/* Front page: hero, promise, catalogue, steps, guides, FAQ. */
  /* ==================== HERO ==================== */
  .hero{
    position:relative;display:flex;align-items:center;
    /* Fills the first screen under the utility bar and header, but never
       stretches into a tall empty band on large monitors. */
    min-height:min(660px, calc(100dvh - 116px));overflow:hidden;
    background:var(--paper);
  }
  .hero-bg{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 70%;
  }
  .hero-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to right, rgba(38,43,33,0) 30%, rgba(38,43,33,.46) 55%, rgba(38,43,33,.84) 82%, rgba(38,43,33,.9) 100%),
      linear-gradient(to top, rgba(38,43,33,.42), transparent 34%);
  }
  .hero .wrap{position:relative;z-index:2;width:100%}
  .hero-inner{max-width:600px;padding:var(--s10) 0}

  /* ---------- split hero (no dedicated hero photo) ----------
     The copy keeps its column and the catalogue's own shots fill the other
     half. Below the layout breakpoint this collapses to a stacked hero. */
  @media (min-width:900px){
    .hero--split .wrap{
      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
      align-items:center;gap:var(--s10);
    }
    .hero--split .hero-inner{max-width:none;padding:var(--s9) 0}
  }

  .hero-art{display:none}
  @media (min-width:900px){
    .hero-art{
      display:grid;position:relative;
      grid-template-columns:1fr 1.15fr;
      grid-template-rows:repeat(2,1fr);
      gap:var(--s4);aspect-ratio:1/.92;
      max-height:min(560px,64dvh);
    }
    .hero-shot{
      overflow:hidden;border-radius:var(--r-lg);
      background:var(--surface);
      box-shadow:var(--sh-lg);
      /* The tiles are set by the grid, not the image ratio. Without this a
         1:1 source leaves the cell short and the group looks ragged. */
      min-height:0;min-width:0;
    }
    .hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
    /* wp_get_attachment_image ships width/height attributes, which otherwise
       win over the grid track and leave gaps between the tiles. */
    .hero-art img{max-width:none}
    /* Column 2 is the far side in RTL, so the tall shot sits against the
       page edge and the stacked pair sits nearer the copy. */
    .hero-shot--1{grid-column:2;grid-row:1/3}
    .hero-shot--2{grid-column:1;grid-row:1}
    .hero-shot--3{grid-column:1;grid-row:2}

    /* Editorial set from the Customizer: landscape shots, so one wide tile
       across the top and two below. The top row is slightly taller so the
       lead photo keeps close to its 2:1 framing. */
    .hero-art--editorial{
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:1.12fr 1fr;
    }
    .hero-art--editorial .hero-shot--1{grid-column:1/3;grid-row:1}
    .hero-art--editorial .hero-shot--2{grid-column:1;grid-row:2}
    .hero-art--editorial .hero-shot--3{grid-column:2;grid-row:2}
    /* Keep each subject whole inside its crop: the care set sits right of
       centre in its frame, the box and the cups are centred. */
    .hero-art--editorial .hero-shot--2 img{object-position:58% 60%}
    .hero-art--editorial .hero-shot--3 img{object-position:50% 62%}
  }
  /* The collage settles in on load: the lead shot first, the pair after it,
     so the eye lands on the headline before the pictures finish arriving. */
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .hero-shot{animation:shotIn .9s var(--ease-out) both}
    .hero-shot--2{animation-delay:.12s}
    .hero-shot--3{animation-delay:.22s}
    .hero-shot img{transition:transform .9s var(--ease-out)}
    .hero-shot:hover img{transform:scale(1.04)}
  }
  @keyframes shotIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

  @media (prefers-reduced-motion:no-preference){
    .hero-inner > *{animation:copyIn .8s var(--ease-out) both}
    .hero-inner > :nth-child(2){animation-delay:.06s}
    .hero-inner > :nth-child(3){animation-delay:.12s}
    .hero-inner > :nth-child(4){animation-delay:.18s}
  }
  @keyframes copyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .hero-eyebrow{
    display:inline-flex;align-items:center;
    background:var(--sage-tint);color:var(--sage-ink);
    font-family:var(--display);font-size:13px;font-weight:500;
    letter-spacing:-.005em;padding:7px 15px;
    border-radius:var(--r-pill);margin-bottom:var(--s6);
  }

  /* Arabic needs more leading than Latin at display sizes; the ascenders and
     descenders collide at the 1.06 that would suit a Latin headline. */
  .hero h1{
    font-size:var(--t-3xl);font-weight:500;line-height:1.28;
    letter-spacing:-.035em;text-wrap:balance;color:var(--ink);
    margin-bottom:var(--s5);max-width:15ch;
  }
  .hero .lede{
    font-size:var(--t-md);color:var(--muted);
    max-width:40ch;margin-bottom:var(--s8);line-height:1.75;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
  .hero-cta{
    display:inline-flex;align-items:center;gap:var(--s3);min-height:60px;
    padding:6px;padding-inline-end:var(--s5);border-radius:var(--r-pill);
    font-family:var(--display);font-size:15.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
    transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  }
  .hero-cta:hover{transform:translateY(-2px)}
  .hero-cta:active{transform:translateY(0) scale(.98)}
  .hero-cta-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%}
  .hero-cta-art{width:42px;height:42px;object-fit:contain;transition:transform .4s var(--ease-out);filter:drop-shadow(0 3px 4px rgba(20,23,15,.15))}
  .hero-cta:hover .hero-cta-art{transform:rotate(-8deg) scale(1.08)}
  .hero-cta-go{display:grid;place-items:center;width:20px;height:20px;margin-inline-start:var(--s1)}
  .hero-cta-go svg{display:block;width:17px;height:17px;stroke:currentColor;transition:transform var(--dur) var(--ease)}
  .hero-cta:hover .hero-cta-go svg{transform:translateX(-4px)}
  .hero-cta--alt{background:var(--card);color:var(--ink);border:1px solid var(--border)}
  .hero-cta--alt:hover{border-color:var(--sage-line);box-shadow:var(--sh)}
  .hero-cta--alt .hero-cta-ic{background:var(--sage-pale);border:1px solid var(--sage-line)}

  /* ---------- photo hero (a hero image IS set) ----------
     Only then does the band go dark and the copy invert. */
  .hero--photo{background:#14170F}
  .hero--photo h1{color:#FBFAF7}
  .hero--photo .lede{color:rgba(251,250,247,.8)}
  .hero--photo .hero-eyebrow{
    background:rgba(255,255,255,.16);color:#F5F2EB;
  }
  .hero--photo .btn-primary{background:#FBFAF7;color:#14170F}
  .hero--photo .btn-primary:hover{background:#fff}
  .hero--photo .btn-ghost{color:#FBFAF7;border-color:rgba(255,255,255,.32);background:transparent}
  .hero--photo .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}

  @media (max-width:899px){
    .hero{min-height:auto}
    .hero-inner{padding:var(--s9) 0 var(--s8);max-width:100%}
    .hero h1{max-width:100%}
    .hero-actions{gap:var(--s2)}
    .hero-actions .btn{flex:1 1 auto;min-width:150px}
    .hero--photo{align-items:flex-end}
    .hero--photo .hero-inner{padding-top:var(--s12)}
    .hero--photo .hero-scrim{
      background:
        linear-gradient(to top, rgba(20,23,15,.93) 26%, rgba(20,23,15,.5) 58%, rgba(20,23,15,.2) 100%);
    }
    .hero .lede{font-size:15.5px;margin-bottom:var(--s6)}
    .hero-inner{padding:var(--s7) 0 var(--s6)}
    /* Two buttons side by side, not two heavy full-width bars. */
    .hero-actions{flex-wrap:nowrap}
    .hero-cta{flex:1 1 0;min-width:0;min-height:52px;padding:5px;padding-inline-end:var(--s3);gap:var(--s2);font-size:14.5px}
    .hero-cta-ic{width:42px;height:42px}
    .hero-cta-art{width:36px;height:36px}
    .hero-cta-go{display:none}

    /* The photos come back on phones as a compact collage under the copy:
       one wide shot over two small ones, with the guide badge on it. */
    .hero--split .hero-art{
      display:grid;position:relative;
      grid-template-columns:1fr 1fr;grid-template-rows:170px 120px;gap:var(--s2);
      margin-bottom:var(--s9);
    }
    .hero--split .hero-shot{overflow:hidden;border-radius:var(--r-md);background:var(--surface);min-height:0;min-width:0}
    .hero--split .hero-shot img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
    .hero--split .hero-shot--1{grid-column:1/3;grid-row:1}
    .hero--split .hero-shot--2{grid-column:1;grid-row:2}
    .hero--split .hero-shot--3{grid-column:2;grid-row:2}
  }

  /* ==================== PROMISE ====================
     One promise and the facts behind it. The facts are set as a plain
     term / answer list: each row names a place an order could give itself
     away (the box, the doorstep, the phone number, the payment) and says
     what happens there. No icons; the words carry it. */
  .promise{padding:0 0 var(--s4)}
  /* Promise on top, centred; the four tiles in one row beneath it, so the
     panel reads top to bottom with no empty half. */
  .promise-panel{
    background:var(--sage-pale);border-radius:var(--r-lg);
    padding:var(--s8) var(--s5);
  }
  @media (min-width:900px){.promise-panel{padding:var(--s10) var(--s8)}}
  .promise-lead{text-align:center;max-width:680px;margin:0 auto var(--s8)}
  .promise-lead h2{
    font-size:var(--t-2xl);font-weight:500;letter-spacing:-.035em;
    line-height:1.3;margin-bottom:var(--s3);
  }
  .promise-lead p{
    font-size:var(--t-md);color:var(--muted);line-height:1.75;max-width:46ch;margin-inline:auto;
    text-wrap:balance;
  }

  .promise-eyebrow{
    display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s4);
    padding:5px 12px;padding-inline-start:9px;border-radius:var(--r-pill);
    background:var(--card);border:1px solid var(--sage-line);
    font-family:var(--display);font-size:13px;font-weight:500;color:var(--sage-ink);
  }
  .promise-eyebrow svg{width:15px;height:15px;stroke:var(--sage)}

  /* Four tiles, one per place an order could give itself away. The art
     floats, each tile on its own beat, so the panel feels alive without
     anything competing with the words. */
  .promise-tiles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .promise-tile{
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--card);border:1px solid var(--sage-line);border-radius:var(--r-lg);
    transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .promise-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
  /* The stage: a soft lit area the art floats in, so the picture leads
     the tile and the words sit under it as a caption. */
  .promise-stage{
    display:grid;place-items:center;height:156px;margin:6px 6px 0;
    border-radius:calc(var(--r-lg) - 6px);
    background:radial-gradient(120% 90% at 50% 30%,#fff 0%,var(--sage-pale) 70%);
  }
  .promise-art{
    width:128px;height:128px;object-fit:contain;
    filter:drop-shadow(0 14px 18px rgba(20,23,15,.14));
    animation:promiseFloat 4.2s ease-in-out infinite;
    animation-delay:calc(var(--i) * -1.05s);
    transition:transform .5s var(--ease-out);
  }
  .promise-tile:hover .promise-art{animation-play-state:paused}
  .promise-art--icon{
    display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
    background:var(--card);border:1px solid var(--sage-line);filter:none;
  }
  .promise-art--icon svg{width:26px;height:26px;stroke:var(--sage-ink)}
  @keyframes promiseFloat{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-7px) rotate(-2deg)}
  }
  .promise-copy{padding:var(--s4) var(--s5) var(--s5);text-align:center}
  .promise-label{
    display:block;font-family:var(--display);font-size:13px;font-weight:600;color:var(--sage);
    margin-bottom:var(--s1);
  }
  .promise-tile p{font-size:15px;line-height:1.7;color:var(--ink)}
  @media (min-width:900px){
    .promise-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
  }
  @media (max-width:559px){
    .promise-tiles{gap:var(--s2)}
    .promise-stage{height:112px;margin:4px 4px 0}
    .promise-art{width:92px;height:92px}
    .promise-copy{padding:var(--s3) var(--s4) var(--s4)}
    .promise-tile p{font-size:13.5px}
  }

  /* The guide promise pinned to the hero photos: a small card with the
     guide mark, floating gently, overlapping the photos' bottom edge. */
  .hero-art{position:relative}
  .hero-badge{
    position:absolute;z-index:3;bottom:-22px;inset-inline-end:-18px;
    display:flex;align-items:center;gap:var(--s3);
    padding:8px 18px 8px 10px;padding-inline-start:10px;padding-inline-end:18px;
    background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-md);
    box-shadow:var(--sh-lg);
    animation:heroBadge 5s ease-in-out infinite;
  }
  .hero-badge-art{width:56px;height:56px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(20,23,15,.12))}
  .hero-badge strong{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
  .hero-badge span span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
  @keyframes heroBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @media (max-width:899px){
    .hero-badge{bottom:-16px;inset-inline-end:12px;padding:6px 14px 6px 8px}
    .hero-badge-art{width:44px;height:44px}
  }

  /* ==================== SECTION RHYTHM ====================
     Untinted bands run on --s11. Where one meets the tinted .how band, the
     tint's own edge reads as separation, so the neighbour steps down. */
  section.block{padding:var(--s11) 0}
  section.block.block-tight{padding-top:var(--s10)}
  section.block:has(+ .how){padding-bottom:var(--s10)}
  .how + section.block{padding-top:var(--s10)}

  @media (max-width:759px){
    section.block{padding:var(--s10) 0}
    section.block.block-tight{padding-top:var(--s9)}
  }

  /* ==================== CATEGORY BENTO ====================
     The first category takes the tall cell. The grid is shaped by how many
     categories exist (.cats--N), so every cell has content. */
  .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .cats > .cat{aspect-ratio:4/5}
  .cats > .cat:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .cats--2 > .cat:first-child{grid-column:auto;aspect-ratio:4/5}
  /* Four on a phone: wide, pair, wide. Otherwise the last row is one tile
     beside an empty cell. */
  .cats--4 > .cat:last-child{grid-column:1/-1;aspect-ratio:16/10}
  @media (min-width:820px){
    .cats{gap:var(--s4);grid-auto-rows:minmax(0,1fr)}
    .cats > .cat,
    .cats > .cat:first-child,
    .cats--4 > .cat:last-child{aspect-ratio:auto;grid-column:auto}
    .cats--2{grid-template-columns:repeat(2,1fr);height:440px}
    .cats--3{grid-template-columns:1.3fr 1fr;grid-template-rows:repeat(2,1fr);height:540px}
    .cats--3 > .cat:first-child{grid-row:1/3}
    .cats--4{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,1fr);height:560px}
    .cats--4 > .cat:first-child{grid-row:1/3}
    .cats--4 > .cat:nth-child(2){grid-column:2/4}
    /* Five: the lead tile tall, the other four in a 2x2 beside it. */
    .cats--5{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,1fr);height:560px}
    .cats--5 > .cat:first-child{grid-row:1/3}
  }
  .cats--1 > .cat:first-child{aspect-ratio:21/9}

  .cat{
    position:relative;display:block;overflow:hidden;
    border-radius:var(--r-lg);background:var(--surface);
    isolation:isolate;
  }
  .cat-art{position:absolute;inset:0;background:var(--surface);overflow:hidden}
  .cat-art .shot{
    width:100%;height:100%;object-fit:cover;object-position:50% 42%;
    transition:transform .9s var(--ease-out);
  }
  .cat:hover .cat-art .shot{transform:scale(1.05)}
  /* Scrim only under the text, so the product stays visible up top. Weighted
     for a worst case of near-white packaging directly behind the label. */
  .cat-art::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,
      rgba(12,15,9,.86) 0%,rgba(12,15,9,.58) 24%,rgba(12,15,9,.16) 48%,transparent 64%);
  }
  .cat-b{
    position:absolute;inset-inline:0;bottom:0;z-index:2;
    display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
    padding:var(--s5);
  }
  .cat-b h3{
    font-family:var(--display);font-size:17px;font-weight:500;
    letter-spacing:-.02em;color:#fff;margin-bottom:2px;
  }
  .cats > .cat:first-child .cat-b{padding:var(--s7)}
  .cats > .cat:first-child .cat-b h3{font-size:var(--t-lg)}
  .cat-b p{font-size:12.5px;color:rgba(255,255,255,.76);display:flex;align-items:center;gap:var(--s2)}
  .cat-count{white-space:nowrap}
  @media (max-width:479px){
    .cats > .cat:not(:first-child) .cat-b{padding:var(--s4)}
    .cats > .cat:not(:first-child) .cat-b h3{font-size:16px}
  }
  /* A small arrow chip answers "is this clickable" without a button label. */
  .cat-go{
    width:38px;height:38px;flex:none;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(255,255,255,.24);
    transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .cat-go svg{width:16px;height:16px;stroke:#fff}
  .cat:hover .cat-go{background:rgba(255,255,255,.3);transform:translateX(-3px)}

  /* ==================== HOW IT WORKS ====================
     Heading and a single action above, then the four steps as one row of
     cards joined by a line through their icons, so the band reads as a
     path from start to doorstep. */
  .how{background:var(--surface);padding:var(--s11) 0}
  .how-head{
    display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
    gap:var(--s5) var(--s8);margin-bottom:var(--s8);
  }
  .how .sec-head{margin-bottom:0}
  .how-cta{flex:none}

  .steps{
    list-style:none;position:relative;
    display:grid;grid-template-columns:1fr;gap:var(--s3);
  }
  @media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
  @media (min-width:1024px){
    .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
    /* The path: a line through the icon centres, visible in the gaps. */
    .steps::before{
      content:"";position:absolute;z-index:0;
      inset-inline:var(--s9);top:calc(var(--s6) + 48px);
      border-top:1px dashed var(--line-strong);opacity:.6;
    }
  }
  .step{
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    padding:var(--s6);background:var(--card);
    border:1px solid var(--border);border-radius:var(--r-lg);
    transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .step:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
  .step-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s5)}
  /* 3D art floats on the card, no plate behind it; a soft drop shadow
     grounds it the way the renders were lit. */
  .step-art{
    width:96px;height:96px;object-fit:contain;
    filter:drop-shadow(0 10px 14px rgba(20,23,15,.10));
    transition:transform .5s var(--ease-out);
  }
  .step:hover .step-art{transform:translateY(-4px) rotate(-3deg)}
  .step-n{font-family:var(--lat);font-size:13px;font-weight:600;color:var(--line-strong);letter-spacing:.04em}
  .step h3{font-size:18px;font-weight:500;letter-spacing:-.02em;margin-bottom:var(--s2)}
  .step p{font-size:14.5px;color:var(--muted);line-height:1.75}

  /* The last step is the one that settles a first order, so it gets the
     sage tint: marked, but in the same soft family as the art. */
  .step:last-child{background:var(--sage-pale);border-color:var(--sage-line)}
  .step:last-child .step-n{color:var(--sage)}

  @media (max-width:759px){
    .how{padding:var(--s10) 0}
    .how-head{margin-bottom:var(--s6)}
    .how-cta{display:flex;width:100%}
    .how-cta .wa-btn-t{flex:1;text-align:start}
  }
  /* Phones: compact rows, icon beside the text. */
  @media (max-width:639px){
    .step{
      display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s4);align-items:center;
      padding:var(--s4) var(--s5);
    }
    .step-top{grid-row:1/3;margin:0}
    .step-art{width:64px;height:64px}
    .step-n{display:none}
    .step h3{font-size:16.5px;margin-bottom:2px}
    .step p{font-size:14px}
  }