/* MORFI home page v2: built from the client's mobile mockups (reference_img/).
   Mobile first (390px). Section prefixes: hv hero · hc collections · hs steps · hd differences · hp story. */

.hv { --ink: #14141c; --text: #2b2630; --plum: #683a7c; --plum-dark: #5a3069; --violet2: #683a7c; --wine: #6a2646; --sage: #d4dcc0; --logo-violet: #6a2fc0; background: #fff; overflow-x: clip; }
.hv h1, .hv h2, .hv h3 { font-family: 'Newsreader', serif; color: var(--ink); letter-spacing: -.012em; }
.hv h1 em, .hv h2 em { font-style: italic; }
html body .hv :is(h1, h2, h3):not(.x):not(.y):not(.z) { color: var(--ink); }
.hv p, .hv li { font-family: 'Figtree', sans-serif; }

/* ---------- 1 · hero ---------- */
.hv-hero { position: relative; background: linear-gradient(#faf0e4, #fef5ec 38%, #fef7ed); padding-top: 1rem; }
.hv-top { position: relative; z-index: 2; padding: 0 1.2rem; }
.hv-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .34rem .9rem .34rem .6rem; border: 1px solid #d9cdbf; border-radius: 9999px; background: #fdf5ec; font-size: .75rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: #2b2520; }
.hv-pill i { width: .8rem; height: .8rem; border-radius: 9999px; background: radial-gradient(circle at 35% 35%, #f6d3c0, #e9a98e); }
.hv .hv-h1 { margin-top: .95rem; max-width: 74vw; font-weight: 700; font-size: clamp(1.7rem, 8.2vw, 2.6rem); line-height: 1.1; }
.hv .hv-h1 em { color: #6b4078; font-weight: 700; }
.hv-tale { position: relative; display: inline-block; }
.hv-spark { position: absolute; left: calc(100% + .28em); top: -.05em; width: .95em; height: .95em; }
.hv-underline { display: block; width: 40vw; max-width: 15rem; height: .2rem; margin: .45rem 0 0 .35rem; border-radius: 9999px; background: #f0c63d; transform: rotate(-.7deg); }
.hv .hv-sub { position: relative; z-index: 2; margin-top: .8rem; max-width: 17rem; font-size: clamp(.9rem, 3.9vw, 1.1rem); line-height: 1.38; color: #241f26; }

/* sticky note: drop-shadow lives on the wrapper so the clipped corner keeps its shadow */
.hv-note { position: absolute; right: 5vw; top: 1.9rem; width: 21.5vw; height: 17.5vw; min-width: 5rem; min-height: 4.1rem; transform: rotate(3deg); filter: drop-shadow(0 5px 5px rgba(90, 65, 15, .22)) drop-shadow(0 1px 1px rgba(90, 65, 15, .18)); }
.hv-paper { position: absolute; inset: 0; background: #fce89c; clip-path: polygon(0 0, 100% 0, 100% 76%, 82% 100%, 0 100%); }
.hv-paper::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18%; height: 24%; background: #efd777; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hv-note-t { position: absolute; left: 12%; top: 17%; font: 600 clamp(1.15rem, 5.5vw, 1.45rem)/1.05 'Caveat', cursive; color: #2a2623; transform: rotate(-3deg); }
.hv-note-rays { position: absolute; right: -9%; top: -24%; width: 36%; height: auto; transform: rotate(-3deg); }

.hv-art { display: block; width: 100%; height: auto; margin-top: -.3rem; position: relative; z-index: 1; }
.hv-actions { position: relative; z-index: 2; margin-top: -1.3rem; padding-bottom: .4rem; text-align: center; }
.hv-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 1.8rem; min-height: 3rem; border-radius: 9999px; background: var(--plum); color: #fff; font: 500 1.05rem/1 'Figtree', sans-serif; box-shadow: 0 6px 14px rgba(104, 58, 124, .22); transition: transform .2s ease, background-color .2s ease; }
.hv-btn:hover { background: var(--plum-dark); transform: translateY(-2px); }
.hv-btn svg { width: 1.15rem; height: 1.15rem; }
.hv-link { transition: color .2s ease, background-size .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1); display: inline-block; margin-top: .55rem; padding: .7rem .5rem; font-size: 1.05rem; font-weight: 500; color: var(--ink); background: linear-gradient(var(--violet2), var(--violet2)) no-repeat left calc(100% - .45rem) / 100% 2px; }
.hv-feats { display: grid; grid-template-columns: 1fr 1.18fr; gap: 0; margin: .6rem 0 0; padding: 1rem 1.2rem 1.7rem; list-style: none; }
.hv-feats li { display: flex; align-items: center; gap: .45rem; font-size: .78rem; white-space: nowrap; font-weight: 500; line-height: 1.2; color: var(--ink); }
.hv-feats li + li { margin-left: .7rem; padding-left: .7rem; border-left: 1px solid #d9d2c7; }
.hv-feat-ic { flex: none; display: inline-grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 9999px; color: #5a4a3c; }
.hv-feat-ic svg { width: 1.3rem; height: 1.3rem; }
.hv-peach { background: #f8dcd0; }
.hv-sun { background: #fce4a8; }

/* ---------- 2 · collections ---------- */
.hc { background: #fdf8f4; padding: 1.8rem 1rem 2rem; }
.hv .hc-title { font-weight: 700; font-size: 1.7rem; line-height: 1.1; padding: 0 .35rem; }
.hc-wave { display: block; width: 6.2rem; height: .55rem; margin: .1rem 0 0 .35rem; }
.hv .hc-sub { margin: .75rem .35rem 0; font-size: 1.05rem; color: var(--text); }
.hc-search { position: relative; display: flex; align-items: center; margin: 1.1rem 0 1.25rem; height: 3.3rem; border: 0; border-radius: 9999px; background: #fffdfb; box-shadow: 0 0 0 1px #d6cec3, 0 2px 8px rgba(60, 40, 30, .06); }
.hc-search svg { position: absolute; left: 1.15rem; width: 1.4rem; height: 1.4rem; color: var(--ink); pointer-events: none; }
.hc-search input { width: 100%; height: 100%; border: 0; border-radius: 9999px; background: transparent; padding: 0 1rem 0 3.4rem; font: 400 1rem 'Figtree', sans-serif; color: var(--ink); }
.hc-search input::placeholder { color: #4b4650; opacity: 1; }
.hc-search input:focus { outline: none; }
html body .hc-search input:focus-visible { outline: none; }
html body .hc-search input { border-radius: 9999px; background-color: transparent; box-shadow: none; }
.hc-search { transition: box-shadow .2s ease; }
.hc-search:focus-within { box-shadow: 0 0 0 2px var(--plum), 0 6px 18px rgba(104, 58, 124, .14); }

.hc-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.hc-card { position: relative; display: flex; min-height: 7.6rem; overflow: hidden; border-radius: 1.35rem; background: var(--bg); box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
.hc-card img { position: absolute; right: 0; top: 0; width: 56%; height: 100%; object-fit: cover; object-position: left center; }
.hc-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 44%; width: 7%; background: linear-gradient(90deg, var(--bg), transparent); pointer-events: none; }
.hc-card > div { position: relative; z-index: 1; width: 49%; padding: .8rem .3rem .8rem 1rem; display: flex; flex-direction: column; align-items: flex-start; }
.hv .hc-card :is(h2, h3) { max-width: 7.4rem; font-weight: 700; font-size: 1.38rem; line-height: 1.04; }
.hc-card p { margin-top: .35rem; max-width: 7.8rem; font-size: .8rem; line-height: 1.28; color: var(--text); }
.hc-card a { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.hc-card a span { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .9rem; border: 1.5px solid var(--ink); border-radius: 9999px; font-size: .82rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .25); transition: background-color .2s ease; }
.hc-card a:hover span { background: rgba(255, 255, 255, .7); }
.hc-card a svg { width: .9rem; height: .9rem; }

.hc-idea { position: relative; display: flex; align-items: center; gap: .6rem; margin-top: .85rem; padding: .9rem 1rem .9rem .8rem; overflow: hidden; border-radius: 1.35rem; background: #fbf1ea; }
.hc-idea::after { content: ""; position: absolute; right: -2.2rem; bottom: -2.4rem; width: 6.4rem; height: 6.4rem; border-radius: 9999px; background: #dfe6cf; }
.hc-idea > img { position: relative; z-index: 1; flex: none; width: 5.2rem; height: auto; mix-blend-mode: darken; }
.hc-idea-spark { position: absolute; left: 5.1rem; top: .55rem; width: 1.6rem; height: 1.5rem; }
.hc-idea > div { position: relative; z-index: 1; }
.hv .hc-idea :is(h2, h3) { font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.hc-idea p { margin-top: .15rem; font-size: .84rem; line-height: 1.3; color: var(--text); }
.hc-idea-btn { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .55rem; padding: 0 1.15rem; border-radius: 9999px; background: var(--plum); color: #fff; font-size: .9rem; font-weight: 500; }

/* ---------- 3 · how it works (readable flow layout; photos, blobs and dotted connectors taken from the mockup) ---------- */
.hs { position: relative; background: #fcede6; padding: 1.4rem 1rem 1.8rem; text-align: center; }
.hs-brand { display: flex; align-items: center; justify-content: center; gap: .9rem; font: 700 1.6rem/1 'Newsreader', serif; color: var(--logo-violet); }
.hs-brand::before, .hs-brand::after { content: ""; width: 3rem; height: 1.5px; background: var(--logo-violet); opacity: .7; }
.hs-brand img { display: block; width: 9.5rem; height: auto; mix-blend-mode: multiply; }
.hs-pill { display: inline-block; margin-top: 1rem; padding: .45rem 1.3rem; border-radius: 9999px; background: var(--sage); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1c1c20; }
.hv .hs-title { margin-top: .85rem; font-weight: 700; font-size: 1.82rem; line-height: 1.08; }
.hs-title span { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 7C20 1 38 9 56 5S88 -1 99 3' fill='none' stroke='%23f2a07e' stroke-width='3.4' stroke-linecap='round' stroke-dasharray='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 104% .5em no-repeat; padding-bottom: calc(.24em + 3px); }
.hs-sub { margin-top: .6rem; font-size: 1.02rem; letter-spacing: .03em; color: #6c6788; }
.hs-list { display: grid; gap: 2.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; text-align: left; }
.hs-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 55%; align-items: center; gap: .75rem; }
.hs-step.hs-rev { grid-template-columns: 55% minmax(0, 1fr); }
.hs-step.hs-rev .hs-text { order: 2; }
.hs-photo { width: 100%; height: auto; border-radius: 1.15rem; object-fit: cover; }
.hs-step[data-k="1"] .hs-photo { aspect-ratio: 1.45; }
.hs-step[data-k="2"] .hs-photo { aspect-ratio: 1.45; }
.hs-step[data-k="3"] .hs-photo { aspect-ratio: 1.45; }
.hs-step[data-k="4"] .hs-photo { aspect-ratio: 1.5; object-position: 50% 50%; }
.hs-text { position: relative; }
.hs-head { display: flex; align-items: center; gap: .5rem; }
.hs-n { flex: none; width: 3.2rem; height: auto; mix-blend-mode: darken; }
.hv .hs-text h3 { font-weight: 700; font-size: 1.12rem; line-height: 1.12; }
.hs-text p { margin-top: .5rem; font-size: .84rem; line-height: 1.42; color: var(--text); }
.hs-sw { display: block; width: 8.6rem; height: auto; margin-top: .55rem; mix-blend-mode: darken; }
.hs-text::before { content: ""; position: absolute; right: .3rem; top: -.9rem; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%239aa27c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-step[data-k="2"] .hs-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%23f2b13f' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hs-step[data-k="3"] .hs-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%2326a8f0' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); right: auto; left: 5.4rem; }
.hs-step[data-k="1"] .hs-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%239aa27c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); right: .2rem; }
.hs-step[data-k="4"] .hs-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%239aa27c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* dotted connectors are drawn by js/steps.js */
.hs-list { position: relative; }
.hs-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hs-links path { fill: none; stroke: #7f62d6; stroke-width: 1.6; stroke-dasharray: 5 6; stroke-linecap: round; }
.hs-pill { position: relative; }
.hs-pill::before, .hs-pill::after { content: ""; position: absolute; top: -.35rem; width: 1.4rem; height: 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%23f2a07e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-pill::before { left: -1.7rem; }
.hs-pill::after { right: -1.7rem; transform: scaleX(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%23f2b13f' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hs-cta { position: relative; margin-top: 1.7rem; padding: 1rem 1rem 1.1rem; border-radius: 1.8rem; background: #fcecd4; text-align: center; }
.hv .hs-cta h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.hs-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; margin-top: .7rem; padding: 0 1.3rem; border-radius: 9999px; background: var(--plum); color: #fff; font-size: .88rem; font-weight: 500; }
.hs-cta-btn svg { width: 1rem; height: 1rem; }
.hs-sign { margin-top: .9rem; font-size: .8rem; letter-spacing: .03em; color: var(--text); }
.hs-sign { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.hs-sign::before, .hs-sign::after { content: ""; flex: 1 1 0; height: 1.5px; background: var(--logo-violet); opacity: .6; }
.hs-sign::before { max-width: 3rem; } .hs-sign::after { max-width: 3rem; }
.hs-cta::before, .hs-cta::after { content: ""; position: absolute; top: 1rem; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 24L12 8M16 28L32 18M20 12L30 6' fill='none' stroke='%239aa27c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-cta::before { left: 1.1rem; }
.hs-cta::after { right: 1.1rem; transform: scaleX(-1); }
.hs-sign b { font: 700 .9rem 'Newsreader', serif; letter-spacing: .1em; color: #5d2fa6; }

/* ---------- 4 · what makes MORFI different: a 696 x 1590 stage, everything placed at the mockup's coordinates ---------- */
.hd { background: #fbf6f3; padding: 0; }
.hd-stage { position: relative; container-type: inline-size; width: 100%; max-width: 696px; margin: 0 auto; aspect-ratio: 696 / 1590; overflow: hidden; }
.hd-stage > * { position: absolute; margin: 0; }
.hv .hd-title { position: static; font-weight: 400; }
.hd-t1, .hd-t2 { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; line-height: 1; letter-spacing: -.012em; color: var(--ink); font-weight: 400; }
.hd-t1 { font-size: 11.2cqw; letter-spacing: -.05em; }
.hv .hd-t2 { font-size: 13.9cqw; font-style: italic; color: var(--wine); font-weight: 400; }
.hd-lines { left: 0; width: 100%; height: auto; pointer-events: none; }
.hd-img { height: auto; mix-blend-mode: darken; }
.hd-n { font: italic 400 4.8cqw/1 'Newsreader', serif; color: var(--wine); white-space: nowrap; }
.hd-dash { width: 7.2cqw; height: .55cqw; border-radius: 1cqw; background: #9db58a; }
.hv .hd-h3 { font: 500 6.6cqw/6.61cqw 'Newsreader', serif; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.hv .hd-p { font: 400 4.3cqw/5cqw 'Newsreader', serif; color: var(--text); white-space: nowrap; }

/* ---------- 5 · story ---------- */
.hp { background: #fcf7f3; padding: 1.2rem 1rem 2.4rem; }
.hp-pill { display: inline-block; padding: .55rem 1.3rem; border-radius: 9999px; background: var(--sage); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #1c1c20; }
.hv .hp-title { margin-top: 1rem; font-weight: 600; font-size: 2.6rem; line-height: 1.05; }
.hv .hp-title em { display: block; color: var(--mauve); }
.hp-text { margin-top: 1rem; font-size: 1.02rem; line-height: 1.42; color: var(--text); }
.hp-fig { position: relative; margin: 1.3rem -.3rem 0; }
.hp-art { display: block; width: 100%; max-width: none; height: auto; mix-blend-mode: darken; }
.hp-tag { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; border-radius: 9999px; background: #f8eccc; font: italic 500 clamp(.8rem, 3.85vw, 1.15rem)/1 'Newsreader', serif; white-space: nowrap; color: var(--text); }
.hp-line { margin-top: .9rem; text-align: center; font-size: 1.02rem; color: var(--text); }
.hp-line + .hp-btn { margin-top: 1.1rem; }
.hp-line { padding-bottom: 1rem; border-bottom: 1px solid #cfd8c2; }
.hp-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.3rem; margin-top: 1.1rem; padding: 0 1rem; border: 1.2px solid #8fa77a; border-radius: 9999px; font: 500 1.15rem 'Newsreader', serif; color: var(--ink); background: rgba(255, 255, 255, .3); transition: background-color .2s ease; }
.hp-btn:hover { background: #fff; }
.hp-btn svg { width: 1.2rem; height: 1.2rem; }

@media (prefers-reduced-motion: reduce) { .hv-btn { transition: none; } }


.hp-sign { margin-top: 1.4rem; text-align: center; }
.hp-sign b { display: block; font: 500 1.1rem/1 'Figtree', sans-serif; letter-spacing: .5em; padding-left: .5em; color: var(--ink); }
.hp-sign span { display: block; margin-top: .35rem; font: italic 400 .95rem 'Newsreader', serif; color: var(--text); }



/* =====================================================================
   DESKTOP ADAPTATION. Mobile rules above are untouched; everything below
   only adds from 640px up. --gut keeps every section on one 1200px column.
   ===================================================================== */
.hd-side { display: none; }

/* ---------- tablet (640-1023): the phone layout, centred in a readable column ---------- */
@media (min-width: 640px) {
  .hv { --gut: max(1.5rem, calc((100% - 720px) / 2)); }
  .hv-hero { padding-top: 2rem; }
  .hv-top, .hv-actions, .hv-feats, .hv-art { max-width: 720px; margin-inline: auto; }
  .hv-top { padding-inline: 1.5rem; }
  .hv .hv-h1 { max-width: 30rem; font-size: 3rem; }
  .hv .hv-sub { max-width: 24rem; font-size: 1.2rem; }
  .hv-note { right: 1.5rem; top: 2.4rem; width: 8.5rem; height: 7rem; }
  .hv-actions { margin-top: -2rem; }
  .hv-btn { max-width: 24rem; margin-inline: auto; }
  .hc, .hs, .hp { padding-inline: var(--gut); }
  .hv .hc-title { font-size: 2.3rem; }
  .hv .hc-sub { font-size: 1.15rem; }
  .hc-list { gap: 1rem; }
  .hc-card { min-height: 10rem; }
  .hv .hc-card :is(h2, h3) { max-width: 11rem; font-size: 1.75rem; }
  .hc-card p { max-width: 12rem; font-size: .95rem; }
  .hc-card a span { font-size: .92rem; }
  .hv .hs-title { font-size: 2.6rem; }
  .hs-n { width: 4rem; }
  .hv .hs-text h3 { font-size: 1.5rem; }
  .hs-text p { font-size: 1.02rem; }
  .hs-sw { width: 10rem; }
  .hp-fig { max-width: 620px; margin-inline: auto; }
  .hv .hp-title { font-size: 3.2rem; }
  .hp-text { font-size: 1.12rem; max-width: 36rem; }
}

/* ---------- desktop (1024+) ---------- */
@media (min-width: 1024px) {
  .hv { --gut: max(2rem, calc((100% - 1200px) / 2)); }

  /* 1 · hero: copy left, photo right */
  .hv-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto auto auto; align-content: center; column-gap: 3rem; min-height: 40rem; padding: 4rem var(--gut) 3rem; background: linear-gradient(#faf0e4, #fef5ec 45%, #fef7ed); }
  .hv-top, .hv-actions, .hv-feats, .hv-art { max-width: none; margin-inline: 0; }
  .hv-top { position: static; grid-column: 1; grid-row: 1; padding: 0; align-self: end; }
  .hv-actions { grid-column: 1; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 2rem 0 0; padding: 0; text-align: left; }
  .hv-feats { grid-column: 1; grid-row: 3; display: flex; gap: 0; margin: 1.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid #e5d9cb; align-self: start; }
  .hv-art { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: 640px; justify-self: end; align-self: center; margin: 0; }
  .hv-pill { font-size: .8rem; }
  .hv .hv-h1 { max-width: none; margin-top: 1.4rem; font-size: clamp(2.8rem, 4vw, 3.9rem); line-height: 1.06; white-space: nowrap; }
  .hv-underline { width: 15rem; height: .26rem; margin-top: .7rem; }
  .hv .hv-sub { max-width: 27rem; margin-top: 1.25rem; font-size: 1.3rem; line-height: 1.45; }
  .hv-note { right: calc(var(--gut) + 1.5rem); top: 1.75rem; width: 9.5rem; height: 7.8rem; z-index: 3; }
  .hv-note-t { font-size: 1.7rem; }
  .hv-btn { display: inline-flex; margin: 0; min-height: 3.5rem; padding: 0 2.1rem; font-size: 1.12rem; }
  .hv-link { margin: 0; font-size: 1.1rem; }
  .hv-feats li { font-size: .95rem; }
  .hv-feats li + li { margin-left: 1.6rem; padding-left: 1.6rem; }
  .hv-feat-ic { width: 2.9rem; height: 2.9rem; }

  /* 2 · collections: header row, 2x2 cards, idea band */
  .hc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: 3rem; align-items: end; padding: 5rem var(--gut) 5.5rem; }
  .hc > .hc-title, .hc > .hc-wave, .hc > .hc-sub { grid-column: 1; padding-inline: 0; margin-inline: 0; }
  .hv .hc-title { font-size: 3.1rem; }
  .hc-wave { width: 8rem; height: .7rem; margin-top: .35rem; }
  .hv .hc-sub { margin-top: 1rem; font-size: 1.3rem; }
  .hc-search { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0 0 .25rem; }
  .hc-list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
  .hc-card { min-height: 13rem; border-radius: 1.75rem; }
  .hc-card > div { width: 47%; padding: 1.6rem .5rem 1.6rem 2rem; }
  .hv .hc-card :is(h2, h3) { max-width: 13rem; font-size: 2.1rem; }
  .hc-card p { max-width: 14rem; margin-top: .55rem; font-size: 1.02rem; line-height: 1.35; }
  .hc-card a span { min-height: 2.9rem; padding: 0 1.2rem; font-size: 1rem; }
  .hc-card { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
  .hc-idea { grid-column: 1 / -1; gap: 2.5rem; margin-top: 1.25rem; padding: 1.75rem 3rem; border-radius: 1.75rem; }
  .hc-idea::after { right: -3rem; bottom: -4.5rem; width: 14rem; height: 14rem; }
  .hc-idea > img { width: 8.5rem; }
  .hc-idea-spark { left: 8.4rem; top: 1rem; width: 2.2rem; height: 2rem; }
  .hv .hc-idea :is(h2, h3) { font-size: 2.2rem; }
  .hc-idea p { margin-top: .35rem; font-size: 1.1rem; }
  .hc-idea-btn { min-height: 3rem; margin-top: .9rem; padding: 0 1.6rem; font-size: 1rem; }

  /* 3 · how it works: roomy zigzag, description tucked under the title like the mockup */
  .hs { padding-top: 5rem; padding-bottom: 5.5rem; }
  .hs-brand img { width: 13rem; }
  .hs-brand::before, .hs-brand::after { width: 5rem; }
  .hs-pill { margin-top: 1.4rem; padding: .6rem 1.8rem; font-size: .85rem; }
  .hv .hs-title { margin-top: 1.1rem; font-size: clamp(3rem, 4.4vw, 4.1rem); }
  .hs-sub { margin-top: .9rem; font-size: 1.3rem; }
  .hs-list { max-width: 980px; margin: 3.5rem auto 0; gap: 4.5rem; }
  .hs-step { grid-template-columns: minmax(0, 1fr) 480px; gap: 3.5rem; }
  .hs-step.hs-rev { grid-template-columns: 480px minmax(0, 1fr); }
  .hs-photo { border-radius: 1.6rem; }
  .hs-step[data-k="1"] .hs-photo { aspect-ratio: 1.9; }
  .hs-step[data-k="2"] .hs-photo { aspect-ratio: 2; }
  .hs-step[data-k="3"] .hs-photo { aspect-ratio: 1.95; }
  .hs-step[data-k="4"] .hs-photo { aspect-ratio: 2.15; }
  .hs-head { gap: 1rem; }
  .hs-n { width: 4.6rem; }
  .hv .hs-text h3 { font-size: 2rem; }
  .hs-text p { margin: .7rem 0 0 5.6rem; max-width: 20rem; font-size: 1.12rem; line-height: 1.5; }
  .hs-sw { width: 11.5rem; margin: .9rem 0 0 5.6rem; }
  .hs-text::before { width: 2rem; height: 2rem; top: -1.2rem; }
  .hs-cta { max-width: 760px; margin: 4rem auto 0; padding: 2rem 2rem 2.2rem; border-radius: 2.4rem; }
  .hv .hs-cta h3 { font-size: 2.2rem; }
  .hs-cta::before, .hs-cta::after { top: 1.8rem; width: 2rem; height: 2rem; }
  .hs-cta::before { left: 2.4rem; }
  .hs-cta::after { right: 2.4rem; }
  .hs-cta-btn { min-height: 3.3rem; margin-top: 1.2rem; padding: 0 2.2rem; font-size: 1.05rem; }
  .hs-sign { margin-top: 1.5rem; font-size: .95rem; }
  .hs-sign b { font-size: 1.05rem; }
  .hs-sign::before, .hs-sign::after { max-width: 8rem; }

  /* 4 · diferit: sticky heading left, the mockup column right (its own title cropped off) */
  .hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: 5rem; padding: 5rem var(--gut) 3rem; }
  .hd-side { display: block; position: sticky; top: 7rem; align-self: start; padding-top: 4rem; }
  .hv .hd-big { font: 700 clamp(3.4rem, 5.2vw, 4.8rem)/1.02 'Newsreader', serif; letter-spacing: -.03em; color: var(--ink); }
  .hv .hd-big em { display: block; margin-top: .05em; font-weight: 400; font-size: 1.18em; letter-spacing: -.02em; color: var(--wine); }
  .hd-lead { max-width: 24rem; margin-top: 1.6rem; font-size: 1.2rem; line-height: 1.5; color: var(--text); }
  .hd-col { overflow: hidden; }
  .hd-col .hd-stage { margin-top: -25.5%; }
  .hv .hd-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* 5 · story: text left, illustration right */
  .hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: 4.5rem; align-content: center; padding: 5rem var(--gut) 3.5rem; }
  .hp > * { grid-column: 1; }
  .hp-pill { justify-self: start; }
  .hv .hp-title { font-size: clamp(2.7rem, 4.4vw, 4.6rem); }
  .hp-text { max-width: 31rem; font-size: 1.18rem; line-height: 1.5; }
  .hp-fig { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; max-width: 620px; margin: 0; justify-self: end; }
  .hp-line { max-width: 31rem; margin-top: 1.4rem; text-align: left; font-size: 1.12rem; }
  .hp-btn { justify-self: start; min-width: 22rem; margin-top: 1.4rem; font-size: 1.2rem; }
  .hp-sign { grid-column: 1 / -1; margin-top: 3.5rem; }
  .hp-sign b { font-size: 1.3rem; }
  .hp-sign span { font-size: 1.1rem; }
}

@media (hover: hover) and (min-width: 1024px) {
  .hc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(90, 60, 40, .13); }
  .hc-idea-btn:hover { background: var(--plum-dark); }
  .hs-cta-btn:hover { background: var(--plum-dark); }
}


/* search suggestions */
.hc-suggest { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 30; max-height: min(34rem, 72vh); overflow-y: auto; padding: .4rem .4rem .6rem; border-radius: 1.4rem; background: #fffdfb; box-shadow: 0 0 0 1px #e4dcd1, 0 18px 40px rgba(60, 40, 30, .16); }
.hc-suggest[hidden] { display: none; }
.hc-sg-group + .hc-sg-group { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid #efe8de; }
.hc-sg-h { padding: .55rem .8rem .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b6470; }
.hc-sg-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .6rem .8rem; border-radius: .9rem; font-size: 1rem; color: var(--ink); }
.hc-sg-row:hover, .hc-sg-row.is-active { background: #f7ede3; }
.hc-sg-t { font-weight: 500; }
.hc-sg-s { flex: none; font-size: .8rem; color: #6b6470; }
.hc-sg-q .hc-sg-t::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .6rem; vertical-align: -.05em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23683a7c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-sg-row:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }


/* wavy underline that runs the full width of the title text */
.hv .hc-title { width: fit-content; max-width: 100%; text-decoration: underline wavy #6b3fa4; text-decoration-thickness: 3px; text-underline-offset: .28em; text-decoration-skip-ink: none; }
.hc-wave { display: none; }

/* hero text link: underline thickens and the link lifts a touch */
@media (hover: hover) {
  .hv-link:hover { color: var(--plum); background-size: 100% 4px; transform: translateY(-2px); }
}
.hv-link:focus-visible { color: var(--plum); background-size: 100% 4px; }
@media (prefers-reduced-motion: reduce) { .hv-link { transition: color .2s ease; } .hv-link:hover { transform: none; } }