/* Landing page only (Home/Index): the envelope hero and the "Kabar Bahagia" front page.
   Kept out of styles.css so no other page downloads it. Body copy uses system serif and
   monospace stacks; the only webfonts are three tiny glyph subsets requested by the view. */

/* ─── Envelope hero ──────────────────────────────────────────────────────────────────────
   The page is itself an invitation addressed to the visitor. Markup order is the paint order:
   envelope back → card → pocket → flap. The envelope box creates no stacking context, so the
   card can sit between its back and its pocket.

   The un-closed state is the finished layout (card raised, envelope dropped, flap open), so the
   page still reads correctly without JS. An inline script adds .is-closed before first paint;
   the script at the end of the view removes it on a tap, on keyboard focus, or after a pause.

   Desktop geometry is in cqw of the stage (the envelope's width), so the whole object scales
   as one piece. Below 720px the card leaves the envelope and drops into a grid row above it. */

.iv-env-hero {
  --env-clay: #a94a28;
  --env-cream: #fbf1e3;
  --env-ink: #2a2118;
  --env-ink-soft: #5b4a36;
  --env-label: #7d6848;
  --env-paper: #fffbf3;
  --env-rule: #e5d6be;
  --env-back: #cdbb9b;
  --env-side-l: #e9dabf;
  --env-side-r: #e4d4b7;
  --env-bottom: #f1e4cc;
  --env-flap: #f4e9d6;
  --env-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --env-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --env-script: 'Mrs Saint Delafield', 'Segoe Script', 'Brush Script MT', cursive;
  --env-ease: cubic-bezier(.2, .7, .2, 1);
  --env-drop: 27cqw;
  --env-rise: -17.8cqw;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  margin: 4px clamp(8px, 1.4vw, 20px) 0;
  border-radius: clamp(20px, 2.4vw, 32px);
  min-height: clamp(600px, calc(100svh - 92px), 900px);
  padding: clamp(20px, 3.6svh, 44px) 16px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--env-clay);
  color: var(--env-cream);
}

/* Paper-grain over the clay: one 160px SVG tile, rasterised once, no request. */
.iv-env-hero::before,
.iv-news-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .2;
}

.iv-env-stage {
  position: relative;
  width: min(820px, 100%, calc((100svh - 230px) * 1.36));
  min-width: min(100%, 600px);
  container-type: inline-size;
  transition: transform 1s var(--env-ease) .25s;
}
.iv-env-hero.is-closed .iv-env-stage { transform: rotate(-1.2deg); }

.iv-env-box {
  position: relative;
  margin-top: 16cqw;
  aspect-ratio: 82 / 47;
  cursor: default;
}
.iv-env-hero.is-closed .iv-env-box { cursor: pointer; }

.iv-env-back,
.iv-env-pocket,
.iv-env-flap {
  position: absolute;
  transition: transform 1s var(--env-ease) .25s;
  transform: translateY(var(--env-drop));
}
.iv-env-back {
  inset: 0;
  z-index: 1;
  border-radius: .8cqw;
  background: var(--env-back);
  box-shadow: 0 5cqw 8cqw -4cqw rgba(40, 10, 0, .55);
}
.iv-env-pocket { inset: 0; z-index: 3; pointer-events: none; }
.iv-env-pocket > i {
  position: absolute;
  inset: 0;
}
.iv-env-pocket > i:nth-child(1) { background: var(--env-side-l); clip-path: polygon(0 0, 50% 54%, 0 100%); border-radius: .8cqw 0 0 .8cqw; }
.iv-env-pocket > i:nth-child(2) { background: var(--env-side-r); clip-path: polygon(100% 0, 50% 54%, 100% 100%); border-radius: 0 .8cqw .8cqw 0; }
.iv-env-pocket > i:nth-child(3) { background: var(--env-bottom); clip-path: polygon(0 100%, 50% 45%, 100% 100%); border-radius: 0 0 .8cqw .8cqw; }

.iv-env-address {
  position: absolute;
  left: 0;
  right: 0;
  top: 70.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--env-ink);
  text-align: center;
}
.iv-env-address-to {
  font-family: var(--env-mono);
  font-size: max(10px, 1.6cqw);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6b5a44;
}
.iv-env-address-name {
  font-family: var(--env-script);
  font-size: 10cqw;
  line-height: .95;
  margin-top: .4cqw;
  white-space: nowrap;
}
.iv-env-address-name--long { font-size: 6.4cqw; }
.iv-env-address-at {
  font-family: var(--env-serif);
  font-style: italic;
  font-size: max(11px, 2.2cqw);
  color: #6b5a44;
}

.iv-env-label {
  position: absolute;
  left: 4.9cqw;
  bottom: 3.7cqw;
  padding: 1cqw 1.5cqw;
  border: 1px solid #b89f7c;
  font-family: var(--env-mono);
  font-size: max(9px, 1.34cqw);
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b5a44;
  transform: rotate(-1.5deg);
}

.iv-env-stamp {
  position: absolute;
  right: 5.4cqw;
  top: 38.8cqw;
  width: 11.2cqw;
  aspect-ratio: 92 / 112;
  box-sizing: border-box;
  padding: .75cqw;
  background: radial-gradient(circle, transparent 38%, #fffdf8 42%) -.6cqw -.6cqw / 1.2cqw 1.2cqw;
  transform: rotate(3deg);
}
.iv-env-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-env-postmark {
  position: absolute;
  right: 9.5cqw;
  top: 40.2cqw;
  width: 15.9cqw;
  height: auto;
  color: #3b2a1c;
  opacity: .6;
}

/* The flap is 300/470 of the envelope's height; it hinges at the top edge. */
.iv-env-flap {
  left: 0;
  top: 0;
  width: 100%;
  height: 63.83%;
  z-index: 1;
  transform-origin: top center;
  transform: perspective(1600px) translateY(var(--env-drop)) rotateX(180deg);
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), z-index 0s linear .35s;
}
.iv-env-flap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--env-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 3px rgba(60, 30, 10, .18));
}
.iv-env-seal {
  position: absolute;
  left: 50%;
  top: 100%;
  width: max(48px, 11.2cqw);
  aspect-ratio: 1;
  transform: translate(-50%, -75%);
  border: 0;
  padding: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 36% 30%, #cf4a43, #8e1c1d 62%, #6e1213);
  box-shadow: 0 6px 10px rgba(60, 10, 5, .35), inset 0 -4px 8px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .18);
  color: rgba(60, 6, 6, .55);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: max(18px, 3.8cqw);
  line-height: 1;
  cursor: pointer;
  backface-visibility: hidden;
  transition: transform .2s ease;
}
.iv-env-seal::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1.5px solid rgba(70, 8, 8, .45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
.iv-env-seal:hover { transform: translate(-50%, -75%) scale(1.06) rotate(-4deg); }
.iv-env-seal:focus-visible { outline: 3px solid var(--env-cream); outline-offset: 4px; }

/* Closed state: everything back in the envelope. */
.iv-env-hero.is-closed .iv-env-back,
.iv-env-hero.is-closed .iv-env-pocket { transform: none; }
.iv-env-hero.is-closed .iv-env-flap {
  z-index: 4;
  transform: perspective(1600px) translateY(0) rotateX(0deg);
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), z-index 0s;
}
.iv-env-hero.is-closed .iv-env-seal::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(251, 241, 227, .7);
  animation: ivEnvPulse 2.2s ease-out infinite;
}
@keyframes ivEnvPulse {
  0% { transform: scale(.92); opacity: .9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* Card: same box as the envelope's inside on desktop, raised out of it when open. */
.iv-env-cardwrap {
  position: absolute;
  z-index: 2;
  left: 3.66cqw;
  width: 92.68cqw;
  top: 17.71cqw;
  height: 53.66cqw;
  transform: translateY(var(--env-rise));
  transition: transform 1s var(--env-ease) .35s;
}
.iv-env-hero.is-closed .iv-env-cardwrap { transform: none; }

.iv-env-card {
  box-sizing: border-box;
  height: 100%;
  padding: 3.6cqw 6cqw 3.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--env-paper);
  color: var(--env-ink);
  box-shadow: inset 0 0 0 1.2cqw var(--env-paper), inset 0 0 0 calc(1.2cqw + 1px) #d7bf9b;
}
.iv-env-card:focus { outline: none; }
.iv-env-lead {
  margin: 0;
  font-family: var(--env-serif);
  font-size: max(13px, 2.07cqw);
  color: var(--env-ink-soft);
}
.iv-env-hero .iv-env-title {
  margin: .7cqw 0 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 6.6cqw;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--env-ink);
}
.iv-env-ornament { width: 27cqw; height: auto; margin-top: 1.7cqw; color: #b89a70; }
.iv-env-details {
  margin: 1.9cqw 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.iv-env-details > div { display: flex; flex-direction: column; gap: .6cqw; padding: 0 1cqw; }
.iv-env-details > div + div { border-left: 1px solid var(--env-rule); }
.iv-env-details dt,
.iv-env-cc-label {
  font-family: var(--env-mono);
  font-weight: 400;
  font-size: max(10px, 1.34cqw);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--env-label);
}
.iv-env-details dd {
  margin: 0;
  font-family: var(--env-serif);
  font-size: max(14px, 2.3cqw);
}
.iv-env-cc { margin: 2cqw 0 0; padding-top: 1.5cqw; width: 100%; border-top: 1px solid var(--env-rule); display: flex; flex-direction: column; gap: .6cqw; }
.iv-env-cc-list { font-family: var(--env-serif); font-style: italic; font-size: max(13px, 1.78cqw); color: #4a3b2b; }
.iv-env-actions {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.iv-env-actions-main { display: flex; align-items: center; gap: 2.7cqw; }
.iv-env-hero .iv-env-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 1.5cqw 2.7cqw;
  border-radius: 3px;
  background: var(--env-ink);
  color: var(--env-cream);
  font-weight: 600;
  font-size: max(14px, 1.85cqw);
  transition: background-color .15s ease;
}
.iv-env-hero .iv-env-cta:hover { background: #4a3826; color: #fff; }
.iv-env-hero .iv-env-cta:focus-visible,
.iv-env-hero .iv-env-link:focus-visible { outline: 2px solid var(--env-ink); outline-offset: 3px; }
.iv-env-hero .iv-env-link {
  color: var(--env-ink);
  font-family: var(--env-serif);
  font-size: max(14px, 1.95cqw);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.iv-env-hero .iv-env-link:hover { color: var(--iv-coral-dark); }
.iv-env-sign { margin: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.iv-env-sign-pre { font-family: var(--env-serif); font-size: max(12px, 1.7cqw); color: var(--env-ink-soft); }
.iv-env-sign-name { font-family: var(--env-script); font-size: 5.6cqw; margin-top: .3cqw; }

.iv-env-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 28px;
  margin: 0;
  text-align: center;
  font-family: var(--env-mono);
  font-size: 13px;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.iv-env-hero.is-closed .iv-env-hint { opacity: .92; }

/* ─── Phones and small tablets: the card leaves the envelope ─────────────────────────────── */
@media (max-width: 719px) {
  .iv-env-hero {
    --env-drop: 0px;
    min-height: 0;
    height: clamp(680px, calc(100svh - 76px), 820px);
    padding: 20px 14px 0;
  }
  .iv-env-stage {
    width: 100%;
    min-width: 0;
    max-width: 440px;
    display: grid;
    grid-template-rows: 1fr auto;
    transition: grid-template-rows .8s var(--env-ease) .2s, margin-top .8s var(--env-ease) .2s;
  }
  .iv-env-hero.is-closed .iv-env-stage {
    grid-template-rows: 0fr auto;
    margin-top: 30svh;
    transform: none;
  }
  .iv-env-box { margin-top: 0; }
  .iv-env-flap { height: 50%; }
  .iv-env-address { top: 65%; }
  .iv-env-address-name { font-size: 9cqw; }
  .iv-env-address-to { font-size: 9.5px; }
  .iv-env-address-at { font-size: 11px; }
  .iv-env-stamp { top: auto; bottom: 7%; }
  .iv-env-postmark { display: none; }
  .iv-env-seal { width: 50px; transform: translate(-50%, -66%); }
  .iv-env-seal:hover { transform: translate(-50%, -66%) scale(1.06); }
  .iv-env-cardwrap {
    position: relative;
    z-index: 5;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    transform: none;
  }
  .iv-env-card {
    position: relative;
    height: auto;
    margin-bottom: 14px;
    padding: 28px 24px 22px;
    box-shadow: inset 0 0 0 8px var(--env-paper), inset 0 0 0 9px #d7bf9b;
    transition: opacity .5s ease .35s, transform .8s var(--env-ease) .2s;
  }
  .iv-env-hero.is-closed .iv-env-card { opacity: 0; transform: translateY(24px) scale(.97); }
  .iv-env-lead { font-size: 15px; }
  .iv-env-hero .iv-env-title { font-size: clamp(30px, 9.4vw, 38px); margin-top: 6px; }
  .iv-env-ornament { width: 140px; margin-top: 12px; }
  .iv-env-details { margin-top: 14px; grid-template-columns: 1fr; border-top: 1px solid var(--env-rule); }
  .iv-env-details > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--env-rule);
  }
  .iv-env-details > div + div { border-left: 0; }
  .iv-env-details dd { font-size: 16px; text-align: right; }
  .iv-env-cc { margin-top: 0; padding-top: 12px; border-top: 0; gap: 4px; }
  .iv-env-cc-list { font-size: 14px; line-height: 1.45; }
  .iv-env-actions { margin-top: 18px; flex-direction: column; align-items: stretch; gap: 14px; }
  .iv-env-actions-main { flex-direction: column; align-items: stretch; gap: 10px; }
  .iv-env-hero .iv-env-cta { min-height: 52px; font-size: 15.5px; padding: 0 16px; }
  .iv-env-hero .iv-env-link { align-self: center; font-size: 15px; }
  .iv-env-sign { order: -1; align-self: flex-end; margin-bottom: -4px; }
  .iv-env-sign-pre { font-size: 12px; }
  .iv-env-sign-name { font-size: 30px; }
  .iv-env-label { display: none; }
  .iv-env-hint { position: static; margin-top: 22px; font-size: 12.5px; line-height: 1.6; }
}

/* Reduced motion: no swing, no slide, no pulse. The card simply fades in. */
@media (prefers-reduced-motion: reduce) {
  .iv-env-hero *,
  .iv-env-hero *::before,
  .iv-env-hero *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .iv-env-hero .iv-env-cardwrap { transition: opacity .4s ease !important; }
  .iv-env-hero.is-closed .iv-env-cardwrap { opacity: 0; }
}

/* The sticky header blurs whatever is under it. Over the clay panel that leaves dark nav text
   on terracotta, so on this page the stuck header gets the page's own cream behind it. */
body:has(.iv-env-hero) .iv-site-header.is-stuck { background: rgba(251, 249, 245, .94); }

/* ─── "Kabar Bahagia" front page (Why choose us) ────────────────────────────────────────── */

.iv-news {
  --news-paper: #f2ede1;
  --news-ink: #141310;
  --news-red: #b3201f;
  --news-rule: #b9b1a0;
  --news-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --news-head: 'League Gothic', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --news-black: 'UnifrakturMaguntia', 'Old English Text MT', 'Times New Roman', serif;
  padding: clamp(64px, 9vw, 120px) var(--iv-gutter);
}
.iv-news-sheet {
  position: relative;
  isolation: isolate;
  max-width: var(--iv-container-max);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(14px, 2.4vw, 30px) clamp(18px, 3.4vw, 48px) clamp(26px, 3.6vw, 48px);
  background: var(--news-paper);
  color: var(--news-ink);
  font-family: var(--news-serif);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .08), 0 34px 60px -42px rgba(60, 40, 10, .45);
}
.iv-news-sheet::before { opacity: .16; }

.iv-news-mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  padding-bottom: 6px;
}
.iv-news-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 14px; }
.iv-news-meta:last-child { align-items: flex-end; text-align: right; }
.iv-news-name {
  margin: 0;
  font-family: var(--news-black);
  font-size: clamp(46px, 7vw, 96px);
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.iv-news-rule { height: 3px; border-top: 3px solid var(--news-ink); border-bottom: 1px solid var(--news-ink); }

.iv-news-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.iv-news-lead { padding-right: clamp(22px, 3vw, 40px); border-right: 1px solid var(--news-ink); min-width: 0; }
.iv-news-kicker { font-family: var(--news-serif); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--news-red); }
.iv-news .iv-news-headline {
  margin: 6px 0 0;
  font-family: var(--news-head);
  font-weight: 400;
  font-size: clamp(54px, 8vw, 118px);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--news-ink);
}
.iv-news-deck { margin: 14px 0 0; font-style: italic; font-size: clamp(18px, 1.75vw, 23px); line-height: 1.38; max-width: 860px; }
.iv-news-byline {
  margin: 16px 0 0;
  padding: 7px 0;
  border-top: 1px solid var(--news-ink);
  border-bottom: 1px solid var(--news-ink);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.iv-news-stories {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.iv-news-story { padding: 0 20px; min-width: 0; }
.iv-news-story:first-child { padding-left: 0; }
.iv-news-story:last-child { padding-right: 0; }
.iv-news-story + .iv-news-story { border-left: 1px solid var(--news-rule); }
.iv-news .iv-news-story h3 {
  margin: 6px 0 8px;
  font-family: var(--news-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--news-ink);
}
.iv-news-story p { margin: 0; font-size: 15.5px; line-height: 1.58; text-align: justify; hyphens: auto; }
.iv-news-story:first-child p::first-letter {
  float: left;
  font-family: var(--news-head);
  font-size: 66px;
  line-height: .8;
  padding: 5px 7px 0 0;
}

.iv-news-side { padding-left: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.iv-news-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.iv-news-photo-frame { position: relative; border: 1px solid var(--news-ink); overflow: hidden; aspect-ratio: 52 / 58; }
.iv-news-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: multiply;
  filter: contrast(1.15);
}
.iv-news-photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(20, 19, 16, .2) .8px, transparent 1.4px) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.iv-news-photo figcaption { font-size: 13px; font-style: italic; line-height: 1.42; }

.iv-news-coupon {
  position: relative;
  margin-top: 12px;
  padding: 18px 18px 16px;
  border: 2px dashed var(--news-ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, .28);
}
.iv-news-coupon svg {
  position: absolute;
  top: -12px;
  left: 16px;
  width: 22px;
  height: 22px;
  padding: 0 4px;
  background: var(--news-paper);
}
.iv-news-coupon-label { font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.iv-news-coupon p { margin: 0; font-size: 17px; line-height: 1.38; }
.iv-news .iv-news-coupon-cta {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: var(--news-red);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: background-color .15s ease;
}
.iv-news .iv-news-coupon-cta:hover { background: #8f1716; color: #fff; }
.iv-news .iv-news-coupon-cta:focus-visible { outline: 2px solid var(--news-ink); outline-offset: 3px; }

@media (max-width: 1080px) {
  .iv-news-body { grid-template-columns: 1fr; }
  .iv-news-lead { padding-right: 0; border-right: 0; }
  .iv-news-side {
    padding-left: 0;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--news-ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .iv-news-coupon { margin-top: 0; }
}

@media (max-width: 720px) {
  .iv-news { padding-left: 12px; padding-right: 12px; }
  .iv-news-mast { grid-template-columns: 1fr; gap: 0; }
  .iv-news-meta { flex-direction: row; justify-content: center; gap: .5em; padding: 6px 0; font-size: 11px; }
  .iv-news-meta > span + span::before { content: '· '; }
  .iv-news-meta:first-child { border-bottom: 1px solid var(--news-ink); }
  .iv-news-meta:last-child { display: none; }
  .iv-news-stories { grid-template-columns: 1fr; }
  .iv-news-story,
  .iv-news-story:first-child,
  .iv-news-story:last-child { padding: 14px 0; }
  .iv-news-story + .iv-news-story { border-left: 0; border-top: 1px solid var(--news-rule); }
  .iv-news-story p { text-align: left; }
  .iv-news-side { grid-template-columns: 1fr; gap: 18px; }
}

/* ─── Catalogue: one card per occasion group, two by two ───────────────────────────────── */
.iv-design-grid--groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.iv-group-card {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  min-height: 320px;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(208, 197, 175, .55);
  box-shadow: 0 12px 32px -18px rgba(27, 28, 28, .18);
}
.iv-group-image { position: relative; display: block; overflow: hidden; background: var(--iv-surface-container); }
.iv-group-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s ease;
}
.iv-group-image:hover img { transform: scale(1.03); }
.iv-group-body { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.iv-group-kind { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--iv-coral-dark); }
.ivenku-page .iv-group-body h3 { font-size: 23px; line-height: 1.2; color: var(--iv-ink); }
.iv-group-tagline { margin: 0; font-size: 15px; line-height: 1.6; color: var(--iv-ink-soft); }
.iv-group-count { margin: 0; font-size: 13px; color: var(--iv-muted); }
.iv-group-links { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 700; }
.iv-group-links a { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 760px) {
  .iv-design-grid--groups { gap: 14px; }
  .iv-group-card { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .iv-group-image { aspect-ratio: 4 / 5; }
  .iv-group-body { padding: 14px 14px 12px; gap: 5px; }
  .iv-group-kind { font-size: 10px; letter-spacing: .1em; }
  .ivenku-page .iv-group-body h3 { font-size: 16.5px; }
  .iv-group-tagline { font-size: 13px; line-height: 1.45; }
  .iv-group-count { font-size: 12px; }
  .iv-group-links { flex-direction: column; gap: 2px; padding-top: 6px; font-size: 13px; }
  .iv-group-links a { min-height: 36px; }
}

/* ─── Section rhythm on this page: ~100px between sections on desktop, ~68px on phones ─── */
#designs.iv-designs { padding-top: 96px; padding-bottom: 48px; }
.iv-news { padding-top: 52px; padding-bottom: 20px; }
#how-it-works.iv-section { padding-bottom: 100px; }
#pricing.iv-section { padding-top: 96px; padding-bottom: 100px; }

@media (max-width: 640px) {
  #designs.iv-designs { padding-top: 64px; padding-bottom: 32px; }
  .iv-news { padding-top: 36px; padding-bottom: 8px; }
  #how-it-works.iv-section { padding-bottom: 72px; }
  #pricing.iv-section { padding-top: 66px; padding-bottom: 72px; }
}