/* ============================================================
   Sanvedana Mithai — landing page
   ------------------------------------------------------------
   Being rebuilt section by section. This file carries ONLY what
   is on the page right now: the announcement bar, the header and
   the hero. Nothing here is unused.

   Colours come from Admin > Settings > Theme colours, injected at
   runtime by inc/brand.php -> sv_theme_style(). The values below
   are only the fallback.
   ============================================================ */

:root{
  /* set from the admin panel */
  --brand:#ffffff;
  --deep:#000000;
  --ink:#212121;
  --paper:#ffffff;
  --leaf:#4c7a3e;

  /* derived — a monochrome scale off the ink, so the page stays black
     and white whatever the brand colour happens to be */
  --ink-2:color-mix(in srgb, var(--ink) 74%, #ffffff);
  /* 46% came out at 2.85:1 against white — below the 4.5:1 that small
     text needs to pass. 65% reads the same "quiet label" grey and
     clears it on white (5.02) and on the wash panels (4.65). */
  --ink-3:color-mix(in srgb, var(--ink) 65%, #ffffff);
  --line:color-mix(in srgb, var(--ink) 13%, var(--paper));
  --line-2:color-mix(in srgb, var(--ink) 26%, var(--paper));
  --wash:color-mix(in srgb, var(--ink) 4%, var(--paper));

  /* Used by the forms and the cart — placeholders, tinted panels and
     the two states a field can be in. */
  --ink-4:color-mix(in srgb, var(--ink) 34%, var(--paper));
  --rose:#b0332f;
  --rose-bg:#fdf2f1;
  --leaf-bg:color-mix(in srgb, var(--leaf) 12%, #ffffff);

  /* Background ornaments. Kept as tokens so the whole decorative layer
     can be dialled up or down from one place. */
  --orn-line:color-mix(in srgb, var(--ink) 9%, transparent);
  --orn-dot:color-mix(in srgb, var(--ink) 14%, transparent);
  --orn-fill:color-mix(in srgb, var(--ink) 3.5%, transparent);

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-sign:"Alex Brush","Snell Roundhand","Brush Script MT",cursive;

  --shell:1640px;
  --gut:clamp(18px,3vw,56px);

  /* Top and bottom space for EVERY section, on every screen. One value,
     so no section breathes more than its neighbour. Tied to the width
     rather than the height: a short laptop screen should not squeeze
     the gaps while a tall monitor inflates them. */
  --sec-y:clamp(48px,5vw,88px);

  /* Height of the announcement bar plus the header. site.js measures
     it for real on load and on resize; this is the fallback so the
     hero is already the right height before the script runs. */
  --vhead:132px;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  /* clip, not hidden: overflow:hidden turns this into a scroll
     container and kills position:sticky on the header. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Only the header is sticky; the announcement bar scrolls away. Count
     the bar here and every anchor lands with a strip of the previous
     section still showing. site.js measures the real value. */
  scroll-padding-top:calc(var(--headh, 92px) + 4px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}

.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* Decoy fields for scripts.
   display:none, not off-screen: browsers skip autofill on hidden
   fields, and an autofilled decoy is exactly what locked real
   customers out of the form. Bots that parse the HTML still fill
   them, which is the whole point. */
.hp{display:none !important;}

.skip{position:absolute;left:-9999px;}
.skip:focus{
  left:12px;top:12px;z-index:99;
  background:var(--ink);color:var(--paper);padding:10px 16px;
}

/* The hero is sized against the viewport directly.
   It used to be a flex child that soaked up the leftover space, which
   worked while it was the only thing on the page — the moment a second
   section landed in <main>, "leftover space" stopped meaning the fold
   and the hero collapsed. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.topbar{
  background:var(--ink);color:var(--paper);
  text-align:center;padding:10px var(--gut);
  font-size:14px;letter-spacing:.01em;
}
.topbar p{margin:0;}
.topbar b{font-weight:700;letter-spacing:.09em;margin-right:8px;}

/* Test mode: red bar, white text, impossible to miss */
.topbar--test{background:var(--rose);color:#fff;}

/* ============================================================
   HEADER
   ============================================================ */
.head{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.head__in{
  max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gut);
  display:flex;align-items:center;gap:26px;
  min-height:92px;
}

.head__logo{flex:0 0 auto;display:flex;align-items:center;}
.head__logo img{max-height:70px;width:auto;}
.head__logo span{font-family:var(--f-display);font-size:24px;font-weight:400;}

.head__nav{
  margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2vw,36px);
}
.head__nav a{
  position:relative;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);padding:7px 0;white-space:nowrap;
}
.head__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .28s ease;
}
.head__nav a:hover::after{right:0;}
.head__nav a.is-on{color:var(--ink);}

/* One marker for the current section. It glides from link to link as
   the page scrolls instead of each link switching its own underline on
   and off, which read as flicker. Positioned by site.js. */
.head__nav{position:relative;}
.nav__bar{
  position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--ink);border-radius:2px;
  transform:translateX(var(--bar-x,0));width:var(--bar-w,0);
  transition:transform .45s cubic-bezier(.2,0,.2,1),width .45s cubic-bezier(.2,0,.2,1),opacity .3s ease;
  opacity:0;pointer-events:none;
}
.nav__bar.is-ready{opacity:1;}
/* with the marker in charge, the current link's own underline stands down */
.head__nav a.is-on::after{right:100%;}

/* ---- call block + cart ---- */
.head__end{
  flex:0 0 auto;
  display:flex;align-items:center;
  gap:clamp(22px,2.6vw,44px);   /* the breathing room before the cart */
}

.head__call{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  text-align:center;white-space:nowrap;
  transition:opacity .18s ease;
}
.head__call b{
  font-size:17px;font-weight:600;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.head__call span{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.head__call:hover{opacity:.6;}

.head__cart{
  position:relative;flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--ink);
  background:var(--paper);
}
.head__n{
  position:absolute;top:-4px;right:-4px;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  border:2px solid var(--paper);
}

/* ---- mobile menu ---- */
.navtoggle{position:absolute;opacity:0;pointer-events:none;}
.burger{
  display:none;order:3;
  width:42px;height:42px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 9px;
}
.burger span{display:block;height:1.5px;background:var(--ink);}

@media (max-width:1180px){
  .head__in{min-height:74px;gap:14px;flex-wrap:wrap;}
  .burger{display:flex;}
  .head__end{order:2;margin-left:auto;gap:18px;}
  .head__call b{font-size:15px;}
  .head__cart{width:46px;height:46px;}
  /* The panel hangs BELOW the header rather than sitting inside it.
     Growing a row inside a sticky header is what made it jump on the
     first tap — the header's own height never changes now. */
  .head__nav{
    position:absolute;left:0;right:0;top:100%;
    z-index:40;margin:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 30px -28px rgba(0,0,0,.45);

    /* Animatable: display:none cannot transition. */
    max-height:0;opacity:0;overflow:hidden;
    pointer-events:none;
    transition:max-height .36s cubic-bezier(.4,0,.2,1),
               opacity .22s ease,
               visibility 0s linear .36s;
    visibility:hidden;
  }
  .head__nav a{
    position:relative;
    width:100%;padding:16px var(--gut);
    border-bottom:1px solid var(--line);
    transform:translateY(-6px);opacity:0;
    transition:transform .3s ease,opacity .3s ease;
  }
  /* The underline is off on this layout, so the current section is
     marked with a bar in the margin and a tinted row instead. */
  .head__nav a.is-on{background:var(--wash);}
  .head__nav a.is-on::before{
    content:"";position:absolute;left:0;top:0;bottom:0;
    width:3px;background:var(--ink);
  }
  .head__nav a:last-child{border-bottom:0;}
  .head__nav a::after{display:none;}
  .nav__bar{display:none;}

  .navtoggle:checked ~ .head__nav{
    max-height:min(74vh,540px);opacity:1;
    overflow-y:auto;pointer-events:auto;visibility:visible;
    transition:max-height .36s cubic-bezier(.4,0,.2,1),
               opacity .22s ease,
               visibility 0s;
  }
  .navtoggle:checked ~ .head__nav a{transform:none;opacity:1;}

  /* Staggered, so the list unrolls instead of appearing all at once */
  .navtoggle:checked ~ .head__nav a:nth-child(1){transition-delay:.04s;}
  .navtoggle:checked ~ .head__nav a:nth-child(2){transition-delay:.08s;}
  .navtoggle:checked ~ .head__nav a:nth-child(3){transition-delay:.12s;}
  .navtoggle:checked ~ .head__nav a:nth-child(4){transition-delay:.16s;}
  .navtoggle:checked ~ .head__nav a:nth-child(5){transition-delay:.20s;}
  .navtoggle:checked ~ .head__nav a:nth-child(6){transition-delay:.24s;}

  /* Three lines fold into a cross */
  .burger span{transition:transform .28s ease,opacity .18s ease;}
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(6.4px) rotate(45deg);}
  .navtoggle:checked ~ .burger span:nth-child(2){opacity:0;transform:scaleX(.4);}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);}
}
@media (max-width:520px){
  .head__call span{display:none;}
  .head__call b{font-size:14px;}
}

/* ============================================================
   HERO
   ============================================================ */
/* The hero runs wider than the header on purpose — the photographs
   sit closer to the screen edge than the logo does. Nothing bleeds off
   the viewport: at 1536 and at 2048 the outer edge of a photograph
   lands on the gutter, not past it. */
/* ---- background ornaments ----
   Two marks, both drawn in CSS: a large thin ring behind the headline
   and a fine dot field in the upper left. No extra requests, nothing to
   download, and both sit at under 10% ink so they read as paper texture
   rather than decoration. */
.hero::before,
.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;}

/* the ring, centred on the headline */
.hero::before{
  left:50%;top:48%;
  width:min(44vw,600px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid var(--orn-line);border-radius:50%;
}
/* the dot field, tucked behind the upper-left plate */
.hero::after{
  left:6%;top:4%;
  width:min(17vw,210px);height:min(17vw,210px);
  background-image:radial-gradient(var(--orn-dot) 1px, transparent 1px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at 30% 30%, #000 10%, transparent 70%);
  mask-image:radial-gradient(circle at 30% 30%, #000 10%, transparent 70%);
}

.hero{
  position:relative;
  /* Warm ivory rather than white. Mithai lives in brass, ghee and
     saffron; a pure white ground makes those photographs look cold.
     The box-shadow + clip-path pair paints the colour edge to edge
     while the hero itself stays capped at its content width. */
  --hero-bg:color-mix(in srgb, #ecdfc8 40%, var(--paper));
  background:var(--hero-bg);
  box-shadow:0 0 0 100vmax var(--hero-bg);
  clip-path:inset(0 -100vmax);
  /* svh, not dvh: dvh changes as the mobile toolbar hides, which makes
     the whole composition resize while you scroll. */
  /* --appvh is the viewport height site.js actually measured. On a
     phone 100vh is the LARGE viewport — the height with the browser
     toolbar hidden — so a hero sized with it is taller than what you
     can see, and the page scrolls. svh fixes that where it is
     supported; the measured value fixes it everywhere. */
  min-height:calc(100svh - var(--vhead));
  min-height:calc(var(--appvh, 100svh) - var(--vhead));
  width:100%;max-width:2100px;margin-inline:auto;
  padding:clamp(8px,1vh,16px) var(--gut) clamp(52px,6vh,72px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.16fr) minmax(0,1.02fr);
  align-items:center;
  gap:clamp(14px,2vw,36px);
}

/* ---- photographs ---- */
.hero__side{position:relative;z-index:1;height:100%;}

.shot{
  margin:0;position:absolute;overflow:hidden;
  background:var(--wash);
  will-change:transform;
  /* A second, hairline outline sitting just off each photograph —
     the same echo as the hero button's frame. outline follows
     border-radius, so it traces the arch exactly. */
  outline:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset:11px;
  box-shadow:0 38px 60px -40px rgba(90,56,22,.42);
}
.shot img{width:100%;height:100%;object-fit:cover;}

/* Everything below is a percentage of the column, never a pixel value,
   so the composition holds its proportions from a 1366 laptop up to a
   2048 desktop instead of drifting off the edges.

   Left column: a smaller plate high and hard left, a taller one
   dropped below and to the right, overlapping it and spilling a little
   into the gutter. */
/* The small plate is a jharokha — a window arch, round at the top. */
.shot--a{
  top:7%;left:0;
  width:57%;height:54%;
  border-radius:999px 999px 16px 16px;
  animation:drift 7.5s ease-in-out infinite;
}
/* The plate it overlaps stays square-ish, softly rounded, so the two
   shapes argue a little instead of repeating each other. */
.shot--b{
  top:36%;left:43%;
  width:60%;height:57%;
  border-radius:26px;
  animation:drift 9s ease-in-out infinite reverse;
  animation-delay:-2s;
}

/* Right column: one tall plate, flush to the gutter on the right and
   reaching slightly left into the gap. The two lower plates finish on
   the same line, just above the scroll cue. */
/* The tall plate is a mehrab — the arched niche of a temple or a
   haveli doorway. The top radius is half the width, so it is a true
   semicircle at any size. */
.shot--c{
  top:13%;right:0;left:-3%;
  height:81%;width:auto;
  border-radius:999px 999px 22px 22px;
  animation:drift 8.2s ease-in-out infinite;
  animation-delay:-4s;
}

/* A slow vertical float. Small amplitude on purpose — a big bounce
   reads as a banner ad, a 12px drift reads as craft. */
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0);}
  50%    {transform:translate3d(0,-14px,0);}
}

/* The inset photo, overlapping the tall plate's lower-left corner.
   No drift on this one: it overlaps a plate that IS drifting, and two
   elements sliding against each other looks like a rendering fault.
   Width scales with the viewport, height follows the aspect ratio, so
   it holds together from a phone up to a 2048 desktop. */
.blob{
  position:absolute;left:-8%;bottom:4%;
  width:clamp(120px,13vw,230px);height:auto;
  object-fit:cover;
  z-index:2;
  /* no ring here: the photograph carries its own cut-out shape, and a
     second outline crossing the mehrab's reads as a mistake */
}

/* ---- centre column ---- */
.hero__mid{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;
}

.sprig{color:var(--ink-3);margin-bottom:clamp(10px,1.6vh,24px);flex:0 0 auto;}

.hero__h1{
  font-family:var(--f-display);
  font-weight:300;
  /* Tied to the viewport HEIGHT as well as the width, so a short
     laptop screen shrinks the type instead of pushing the button
     below the fold. */
  font-size:clamp(38px,min(6.6vw,10.2vh),104px);
  line-height:.98;
  letter-spacing:-.018em;
  text-transform:uppercase;
  margin:0 0 clamp(22px,3.4vh,48px);
}
.hero__h1 span{display:block;}

/* ---- the button, with its offset letterpress frame ---- */
.cta{
  position:relative;flex:0 0 auto;
  display:inline-block;
  padding:17px 46px;
  border:1px solid var(--ink);
  background:transparent;
  font-size:12.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  transition:background .22s ease,color .22s ease;
}
/* No negative z-index here: a pseudo behind a positioned parent
   vanishes under the parent's own background the moment one is set. */
.cta::after{
  content:"";position:absolute;
  left:9px;top:9px;right:-9px;bottom:-9px;
  border:1px solid var(--line-2);
  pointer-events:none;
  transition:transform .22s ease;
}
.cta:hover{background:var(--ink);color:var(--paper);}
.cta:hover::after{transform:translate(-4px,-4px);}

/* ---- scroll cue ---- */
.scroller{
  position:absolute;left:50%;bottom:clamp(14px,2.4vh,30px);
  transform:translateX(-50%);
  width:46px;height:46px;
  display:grid;place-items:center;
  color:var(--ink);z-index:3;
}
.scroller svg{overflow:visible;}
/* Once the page has moved, the cue has done its job. Leaving it on
   screen means it floats over whatever section you scrolled to. */
.scroller{transition:opacity .3s ease,visibility .3s;}
body.is-scrolled .scroller{opacity:0;visibility:hidden;}
.scroller__c1,.scroller__c2{animation:cue 2s ease-in-out infinite;}
.scroller__c2{animation-delay:.18s;opacity:.45;}
.scroller:hover{color:var(--ink-3);}

@keyframes cue{
  0%,100%{transform:translateY(-3px);opacity:.35;}
  50%    {transform:translateY(3px);opacity:1;}
}

/* ============================================================
   ABOUT
   ------------------------------------------------------------
   Photograph left, copy right. The thin offset frame on the image
   is the same device as the button in the hero, so the two sections
   read as one piece of design rather than two.
   ============================================================ */
/* Padding tuned so the whole section clears a 1536x864 laptop in one
   screen — it is what the hero's arrow jumps to, and landing on a
   half-visible section defeats the point. */
.about{
  position:relative;
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:var(--sec-y) var(--gut);
}
/* A soft disc behind the copy column — the same family as the hero
   ring, filled instead of outlined so the two are not identical. */
.about::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:2%;top:50%;transform:translateY(-50%);
  width:min(34vw,470px);aspect-ratio:1;border-radius:50%;
  background:var(--orn-fill);
}
.about__in{position:relative;z-index:1;}

/* Same reason as the gallery: when checkout is hidden, About sits
   straight under the white shop, and two paddings would stack. With
   checkout open (a tinted band) About keeps its own. */
.co[hidden] + .about{padding-top:0;}
.about__in{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(26px,3.2vw,62px);
}

/* A tall mehrab of kaju katli, a round plate of chikki overlapping its
   foot, and a small ink seal with the year — the same arches and
   hairline echoes as the hero, so About reads as the same hand. */
.about__art{
  position:relative;margin:0;
  /* capped, so the arch stays tall-ish without pushing the section past
     one laptop screen */
  width:100%;max-width:clamp(360px,30vw,540px);justify-self:center;
  padding:14px 12% 12% 14px;          /* room for the plate and the echo */
}
.about__main{
  display:block;width:100%;aspect-ratio:4 / 4.6;object-fit:cover;
  border-radius:999px 999px 22px 22px;
  outline:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset:12px;
  box-shadow:0 40px 60px -42px rgba(90,56,22,.45);
}
.about__inset{
  position:absolute;right:0;bottom:0;
  width:42%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:8px solid var(--paper);
  box-shadow:0 26px 40px -24px rgba(90,56,22,.5);
}
.about__seal{
  position:absolute;left:0;top:30%;
  width:clamp(92px,8vw,118px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);text-align:center;
  outline:1px solid color-mix(in srgb, var(--ink) 30%, transparent);outline-offset:5px;
}
.about__seal em{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
}
.about__seal b{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(24px,2.2vw,32px);line-height:1.05;margin:2px 0;
}
/* No frame here on a wide screen — the photograph carries itself. A
   thin outline comes back on phones, where the image needs an edge to
   sit against. See the phone block. */

/* ---- copy ---- */
.kicker{
  display:flex;align-items:center;gap:16px;
  margin:0 0 clamp(14px,1.8vh,22px);
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
}
.kicker::after{
  content:"";flex:0 0 auto;
  width:clamp(40px,5vw,74px);height:1px;background:var(--line-2);
}

.about__h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(32px,3.6vw,58px);
  line-height:1.08;letter-spacing:-.012em;text-transform:uppercase;
  margin:0 0 clamp(18px,2.6vh,30px);
}

.about__copy p{
  margin:0 0 18px;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.85;color:var(--ink-2);
  max-width:52ch;
}
.about__copy p:last-of-type{margin-bottom:0;}

/* ---- signature ---- */
.sign{
  position:relative;
  margin-top:clamp(22px,3.4vh,38px);
  padding-top:clamp(20px,3vh,32px);
}
/* A short rule, not a full-width divider — it marks where the writing
   stops and the hand takes over. */
.sign__rule{
  position:absolute;left:0;top:0;
  width:clamp(56px,7vw,96px);height:1px;
  background:var(--line-2);
}
.sign__name{
  font-family:var(--f-sign);
  /* A brush face, not a hairline one — it has to hold its own next to
     17px body copy, and a thin script at this size just disappears. */
  font-size:clamp(58px,5.4vw,92px);
  line-height:.86;
  color:var(--ink);
  margin:0 0 8px;
  padding-left:2px;
}
.sign__role{
  margin:0;
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---- tablet: stack, photo first ---- */
@media (max-width:1024px){
  .about__in{grid-template-columns:1fr;gap:clamp(30px,5vw,48px);}
  .about__art{max-width:560px;}
  .about__copy p{max-width:62ch;}
}

@media (max-width:760px){
  .about__in{gap:22px;}

  /* The outline the image sits against on a phone */
  .about__art{padding:10px 14% 14% 10px;}
  .about__main{outline-offset:8px;}
  .about__inset{border-width:6px;}
  .about__seal{width:84px;}
  .about__seal b{font-size:22px;}
  .about__seal em{font-size:7.5px;letter-spacing:.12em;}

  /* Let the headline use the whole column instead of breaking where a
     wide screen wanted it to */
  .lg-br{display:none;}
  .about__h2{font-size:clamp(29px,8vw,40px);line-height:1.12;}

  .kicker{font-size:10.5px;letter-spacing:.16em;gap:10px;margin-bottom:12px;}
  .about__copy p{font-size:15px;line-height:1.75;}

  .sign{margin-top:22px;padding-top:20px;}
  .sign__name{font-size:clamp(52px,15vw,72px);margin-bottom:6px;}
  .sign__role{font-size:9px;letter-spacing:.1em;white-space:normal;}
}

/* Two classes, so these beat .kicker--center::before further down the
   file — otherwise the rules would paint a dark hairline on black. */
.kicker.kicker--light{color:color-mix(in srgb, var(--paper) 62%, transparent);}
.kicker.kicker--light::before,
.kicker.kicker--light::after{background:color-mix(in srgb, var(--paper) 28%, transparent);}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who{
  position:relative;
  background:var(--wash);
  padding:var(--sec-y) var(--gut);
}
/* The curved edge the section sits on, drawn rather than cropped so it
   stretches to any width without distorting. */
.who__wave{
  position:absolute;left:0;right:0;top:0;
  width:100%;height:clamp(40px,6vw,110px);
  transform:translateY(-99%);
  fill:var(--wash);
  display:block;pointer-events:none;
}
.who__in{max-width:var(--shell);margin-inline:auto;}

.who__head{max-width:640px;margin:0 auto clamp(28px,3vw,52px);text-align:center;}
.kicker--center{justify-content:center;}
.kicker--center::before{
  content:"";flex:0 0 auto;
  width:clamp(40px,5vw,74px);height:1px;background:var(--line-2);
}
.who__h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(30px,3.4vw,52px);
  line-height:1.1;letter-spacing:-.012em;text-transform:uppercase;
  margin:0 0 16px;
}
.who__lede{
  margin:0;color:var(--ink-2);
  font-size:clamp(15px,1.05vw,17px);line-height:1.8;
}

/* ---- counters ---- */
/* Three arched tiles — shallow mehrabs, the page's recurring shape — with
   the number first and the label under it, a small diamond at the crown
   of each arch. The middle one is inked, so the row has a centre. */
.tally{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
  max-width:1120px;margin:clamp(34px,4.5vh,60px) auto 0;
}
.tally__cell{
  position:relative;
  display:flex;flex-direction:column-reverse;align-items:center;gap:12px;
  text-align:center;
  padding:clamp(46px,4.6vw,66px) clamp(16px,2vw,28px) clamp(26px,2.6vw,36px);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:50% 50% 18px 18px / 30% 30% 18px 18px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.tally__cell:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(90,56,22,.4);}
.tally__cell::before{
  content:"";position:absolute;left:50%;top:18px;
  width:7px;height:7px;transform:translateX(-50%) rotate(45deg);
  border:1px solid var(--ink-3);
}
.tally__cell:nth-child(2){background:var(--ink);border-color:var(--ink);color:var(--paper);}
.tally__cell:nth-child(2)::before{border-color:color-mix(in srgb, var(--paper) 55%, transparent);}
.tally__cell:nth-child(2) dt{color:color-mix(in srgb, var(--paper) 62%, transparent);}
.tally dt{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.6;
}
.tally dd{
  margin:0;
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(42px,4.4vw,70px);line-height:1;
  font-variant-numeric:tabular-nums;
}


/* ---- phone ---- */
@media (max-width:760px){


  .who__h2{font-size:clamp(26px,7.4vw,36px);}
  .who__lede{font-size:14.5px;}


  .tally{grid-template-columns:1fr;gap:12px;margin-top:26px;max-width:420px;}
  .tally__cell{padding:40px 18px 22px;border-radius:50% 50% 16px 16px / 26% 26% 16px 16px;}
  .tally dt{font-size:10px;letter-spacing:.15em;}
  .tally dd{font-size:clamp(40px,12vw,54px);}
}

/* ============================================================
   PRODUCTS
   ------------------------------------------------------------
   Fed straight from Admin > Products. Hidden rows never reach the
   query, so a product taken down there vanishes from here.
   ============================================================ */
.shop{
  position:relative;
  border-top:1px solid var(--line);
  /* Gutter on the inner wrapper, like .head__in, so the first card
     lines up under the logo instead of a gutter to the left of it. */
  padding:var(--sec-y) 0;
}
.shop__in{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);}

/* ---- head ---- */
.shop__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,44px);
}
.shop__intro{max-width:620px;}
.shop__h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(30px,3.4vw,52px);
  line-height:1.08;letter-spacing:-.012em;text-transform:uppercase;
  margin:0 0 14px;
}
.shop__lede{margin:0;color:var(--ink-2);font-size:clamp(14.5px,1vw,16px);line-height:1.8;max-width:54ch;}

.shop__arrows{display:flex;gap:10px;flex:0 0 auto;}
.shop__arrow{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.shop__arrow svg{width:20px;height:20px;}
.shop__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.shop__arrow[disabled]{opacity:.35;cursor:default;}
.shop__arrow[disabled]:hover{background:var(--paper);color:var(--ink);border-color:var(--line-2);}

.shop__empty{
  text-align:center;color:var(--ink-2);
  border:1px dashed var(--line-2);padding:34px 20px;
}
.shop__empty a{border-bottom:1px solid var(--line-2);}

/* A scroll-snap row. --per is how many cards show at once; site.js
   reads it back, so the breakpoints below are the only place it is set.
   Native scrolling means a phone swipes it with momentum for free. */
.shop__grid{
  --per:4;
  --gap:clamp(14px,1.3vw,22px);
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* room above and below for the hover lift and the shadow, which a
     scroller would otherwise clip. Vertical only: any horizontal
     padding becomes a snap offset and knocks the first card out of line
     with the logo. */
  padding:10px 0 26px;margin:-10px 0 -26px;
  align-items:stretch;
}
.shop__grid::-webkit-scrollbar{display:none;}
.shop__grid:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:18px;}
.shop__grid > .prod{scroll-snap-align:start;}

/* ---- dots ---- */
.shop__dots{
  display:flex;justify-content:center;gap:9px;
  margin-top:clamp(22px,2.4vw,34px);min-height:8px;
}
.shop__dots button{
  width:8px;height:8px;border-radius:5px;padding:0;cursor:pointer;
  border:0;background:var(--line-2);
  transition:width .35s cubic-bezier(.2,0,.2,1),background .25s ease;
}
.shop__dots button:hover{background:var(--ink-3);}
.shop__dots button[aria-selected="true"]{width:28px;background:var(--ink);}

.prod{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.prod:hover{
  border-color:var(--line-2);transform:translateY(-5px);
  box-shadow:0 26px 40px -30px rgba(90,56,22,.4);
}

/* ---- photograph ---- */
/* The photograph sits in a shallow mehrab — the same arch as the hero,
   flattened so a 4:3 picture keeps its sweets in frame. It floats on a
   warm ivory pad the colour of the hero ground. */
.prod__art{
  position:relative;
  padding:12px 12px 0;
  background:color-mix(in srgb, #ecdfc8 40%, var(--paper));
}
.prod__art > img,
.prod__art > .prod__initial{
  display:block;width:100%;aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:50% 50% 10px 10px / 26% 26% 10px 10px;
  background:var(--wash);
}
.prod__art > .prod__initial{display:grid;place-items:center;}
.prod__art > img{transition:filter .5s ease;}
.prod:hover .prod__art > img{filter:saturate(1.08) brightness(1.03);}

/* Stand-in when a product has no photo yet */
.prod__initial{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(54px,6vw,86px);line-height:1;
  color:color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Badges sit on the foot of the picture — the arched top corners would
   crop them. */
.prod__badge,
.prod__off{
  position:absolute;bottom:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:5px;
}
.prod__badge{left:22px;background:var(--ink);color:var(--paper);}
.prod__off{right:22px;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);}

/* ---- copy ---- */
.prod__body{padding:16px 16px 0;flex:1;}

.prod__name{
  font-family:var(--f-display);font-weight:400;
  font-size:18px;line-height:1.22;
  margin:0 0 4px;
}
.prod__tag{
  margin:0 0 10px;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.5;
}
.prod__desc{
  margin:0 0 12px;color:var(--ink-2);
  font-size:13px;line-height:1.65;
  /* three lines, so every card in a row lines up */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- weight chips ----
   One sweet, up to three weights. The chip that is picked is inked, the
   others sit quiet; the price under them follows the pick. */
.prod__ws{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.ws{position:relative;cursor:pointer;}
.ws input{position:absolute;opacity:0;width:0;height:0;}
.ws span{
  display:block;padding:7px 13px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--paper);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.ws:hover span{border-color:var(--ink-3);color:var(--ink);}
.ws.is-on span{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.ws input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px;}

.prod__spec{margin:0;border-top:1px solid var(--line);}
.prod__spec > div:last-child{border-bottom:0;}
.prod__spec > div{
  display:flex;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);
  font-size:12px;
}
.prod__spec dt{color:var(--ink-3);}
.prod__spec dd{margin:0;font-weight:600;text-align:right;}

/* ---- quantity, price, add ----
   Quantity on the left, price on the right, then the button across the
   full width underneath. Price and quantity share a line because they
   are the two numbers a buyer compares; the action gets its own. */
.prod__foot{
  padding:13px 16px 15px;
  margin-top:14px;
  background:var(--wash);border-top:1px solid var(--line);
}
.prod__row{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;
}

.qty{display:flex;flex-direction:column;gap:6px;}
.qty__lbl{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}

.stepper{
  display:flex;align-items:stretch;overflow:hidden;border-radius:8px;
  border:1px solid var(--line-2);background:var(--paper);
}
.stepper button{
  width:30px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:17px;line-height:1;color:var(--ink);
  transition:background .16s ease,color .16s ease;
}
.stepper button:hover{background:var(--ink);color:var(--paper);}
.stepper input{
  width:36px;height:32px;border:0;
  border-inline:1px solid var(--line-2);
  text-align:center;font:inherit;font-size:14px;font-weight:600;
  background:none;color:var(--ink);
  -moz-appearance:textfield;appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper input:focus{outline:none;background:var(--wash);}

.prod__price{
  display:flex;align-items:baseline;gap:9px;margin:0;
  text-align:right;
}
.prod__price b{
  font-family:var(--f-display);font-weight:400;
  font-size:21px;line-height:1;
}
.prod__price s{font-size:12px;color:var(--ink-3);}
.prod__price s[hidden]{display:none;}
.prod__off[hidden]{display:none;}

.prod__add{
  display:block;width:100%;border-radius:9px;
  font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:12px 12px;cursor:pointer;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease;
}
.prod__add:hover{background:transparent;color:var(--ink);}
/* brief confirmation after a click, set by site.js */
.prod__add.is-done{background:var(--leaf);border-color:var(--leaf);color:#fff;}

/* ---- laptop: the cards get a little more room ---- */
@media (max-width:1700px){
  .prod__body{padding:20px 20px 0;}
  .prod__name{font-size:20px;}
  .prod__tag{font-size:10.5px;}
  .prod__desc{font-size:14px;}
  .ws span{padding:8px 14px;font-size:12px;}
  .prod__spec > div{font-size:12.5px;padding:8px 0;}
  .prod__foot{padding:15px 20px 17px;}
  .prod__price b{font-size:24px;}
}

@media (max-width:1280px){ .shop__grid{--per:3;} }

/* ---- tablet ---- */
@media (max-width:1080px){
  .shop__grid{--per:2;}
}

/* ---- phone ---- */
@media (max-width:640px){
  /* one card and a sliver of the next, so it is obvious the row moves */
  .shop__grid{--per:1.18;--gap:12px;}
  .shop__head{align-items:flex-start;}
  .shop__arrows{display:none;}
  .shop__h2{font-size:clamp(26px,7.4vw,36px);}
  .prod__name{font-size:20px;}
  .prod__desc{font-size:14px;}
  .prod__foot{padding:15px 18px 17px;}
  .prod__price b{font-size:25px;}
}

/* ============================================================
   GALLERY
   ------------------------------------------------------------
   One row, sitting just above the footer, drifting sideways like a
   feed. The set is printed twice and the track slides by exactly
   half its width, so the loop has no visible seam. Hover pauses it;
   anyone who has asked for less motion gets a row they can swipe.
   ============================================================ */
.gal{
  /* No top padding — the white contact section above already ends in a
     full --sec-y, and two stacked would read as a double gap. A full
     --sec-y BELOW, though: run flush into the black footer and the
     photographs look cut off rather than finished. */
  padding:0 0 var(--sec-y);
  background:var(--paper);overflow:hidden;
}
.gal__kick{margin-bottom:clamp(18px,2.4vh,28px);}

.gal__strip{
  position:relative;overflow:hidden;
  /* soft fade at both ends so tiles arrive rather than pop in */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.gal__track{
  display:flex;align-items:flex-start;gap:clamp(12px,1.1vw,20px);
  width:max-content;
  /* room for the staggered tiles to drop into */
  padding-bottom:clamp(14px,1.4vw,26px);
  animation:galDrift 52s linear infinite;
}
.gal__strip:hover .gal__track,
.gal__track:focus-within{animation-play-state:paused;}
@keyframes galDrift{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}   /* exactly one copy's width */
}

/* Portrait rather than square — a sweet photographed on a thali reads
   better tall, and it is the shape a feed trains the eye to expect.
   Every other tile drops a little, so the row moves like a tray being
   passed along instead of marching in a straight line. */
.tile{
  position:relative;display:block;flex:0 0 auto;overflow:hidden;
  width:clamp(180px,15vw,270px);aspect-ratio:4 / 5;
  padding:0;border:0;cursor:pointer;border-radius:14px;
  background:var(--line);
  box-shadow:0 18px 34px -26px rgba(0,0,0,.55);
  font:inherit;color:inherit;text-align:left;
  transition:transform .4s cubic-bezier(.2,0,.2,1),box-shadow .4s ease;
}
.tile.is-low{margin-top:clamp(14px,1.4vw,26px);}
.tile:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(0,0,0,.6);}

/* The inset hairline frame — the same device as the hero button and
   the About photograph, so the gallery belongs to the same site. */
.tile::after{
  content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.34);border-radius:8px;
  opacity:0;transform:scale(1.03);
  transition:opacity .35s ease,transform .35s ease;
}
.tile:hover::after,
.tile:focus-visible::after{opacity:1;transform:none;}
.tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,0,.2,1);
}
.tile:hover img,
.tile:focus-visible img{transform:scale(1.06);}

.tile__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 70%);
  opacity:.75;transition:opacity .35s ease;
}
.tile:hover .tile__veil,
.tile:focus-visible .tile__veil{opacity:1;}

.tile__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:18px 20px;color:#fff;
}
.tile__cap em{
  display:block;font-style:normal;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:4px;
}
.tile__cap b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:17px;line-height:1.2;
}

.tile__plus{
  position:absolute;right:18px;top:18px;z-index:3;
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.42);color:#fff;border-radius:50%;
  background:rgba(255,255,255,.06);
  opacity:0;transform:scale(.86);
  transition:opacity .3s ease,transform .3s ease;
}
.tile__plus svg{width:15px;height:15px;}
.tile:hover .tile__plus,
.tile:focus-visible .tile__plus{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .gal__track{animation:none;}
  .gal__strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .tile.is-clone{display:none;}
}

/* ---- lightbox ----
   Wide screens: picture centred, caption bottom-left, counter
   bottom-right, arrows pinned to the sides.
   Narrow screens: caption above the picture, counter below it, arrows
   along the bottom — a side column at 360px costs more than the
   picture can spare. */
.lb{
  /* One place for the frame's measurements. The picture's ceiling is
     worked out from these, so padding and picture can never disagree. */
  --lb-pad:clamp(48px,7vh,84px);     /* top and bottom */
  --lb-side:clamp(76px,9vw,140px);   /* left and right */
  --lb-room:96px;                    /* reserved for the caption row */

  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:var(--lb-pad) var(--lb-side);
  background:rgba(10,12,14,.96);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb[hidden]{display:none;}

.lb__stage{
  margin:0;width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}

/* The ceiling is in viewport units, not a percentage.
   A grid item that is centred rather than stretched has an AUTO height,
   so max-height:100% on the picture inside it resolves against nothing
   and the picture renders at its natural size — which is why it was
   bleeding off the top and bottom of the screen. */
.lb__stage img{
  max-width:100%;
  max-height:calc(100vh  - (var(--lb-pad) * 2) - var(--lb-room));
  max-height:calc(100svh - (var(--lb-pad) * 2) - var(--lb-room));
  width:auto;height:auto;object-fit:contain;
  animation:lbIn .34s cubic-bezier(.2,0,.2,1);
}
@keyframes lbIn{
  from{opacity:0;transform:scale(.97);}
  to{opacity:1;transform:none;}
}

/* ---- caption, bottom left ---- */
.lb__cap{
  position:absolute;left:clamp(24px,4vw,76px);bottom:clamp(24px,4.5vh,58px);
  text-align:left;color:#fff;max-width:46vw;
}
.lb__cap em{
  display:block;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.58);margin-bottom:8px;
}
.lb__cap b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(20px,1.9vw,30px);line-height:1.2;
}

/* ---- counter, bottom right ---- */
.lb__count{
  position:absolute;right:clamp(24px,4vw,76px);bottom:clamp(26px,4.8vh,62px);
  margin:0;display:flex;align-items:baseline;gap:8px;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.45);
}
.lb__count .n{
  font-size:clamp(20px,1.7vw,26px);font-weight:600;color:#fff;
}
.lb__count .t{font-size:14px;}

/* ---- controls ---- */
.lb__x,
.lb__nav{
  position:absolute;z-index:2;
  display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.lb__x:hover,
.lb__nav:hover{background:rgba(255,255,255,.22);}
.lb__nav:active{transform:scale(.94);}

.lb__x{
  right:clamp(14px,2.2vw,34px);top:clamp(14px,2.2vw,34px);
  width:clamp(44px,3.6vw,54px);height:clamp(44px,3.6vw,54px);
}
.lb__x svg{width:19px;height:19px;}

.lb__nav{
  top:50%;transform:translateY(-50%);
  width:clamp(46px,4vw,64px);height:clamp(46px,4vw,64px);
}
.lb__nav:active{transform:translateY(-50%) scale(.94);}
.lb__nav svg{width:22px;height:22px;}
.lb__nav--prev{left:clamp(12px,2vw,40px);}
.lb__nav--next{right:clamp(12px,2vw,40px);}


/* ---- tablet ----
   Same arrangement as a desktop: caption bottom-left, counter
   bottom-right, arrows on the sides. Only the picture shrinks, and the
   side gutters tighten to give it back some width. */
@media (max-width:1024px){
  .lb{--lb-pad:52px;--lb-side:78px;--lb-room:104px;}
  .lb__cap{left:clamp(20px,3vw,34px);bottom:26px;max-width:58vw;}
  .lb__cap b{font-size:20px;}
  .lb__count{right:clamp(20px,3vw,34px);bottom:28px;}
  .lb__count .n{font-size:21px;}
  .lb__nav{width:48px;height:48px;}
  .lb__nav--prev{left:14px;}
  .lb__nav--next{right:14px;}
  .lb__x{width:46px;height:46px;right:16px;top:16px;}
}

/* ---- phone ----
   Caption above the picture, counter below it, arrows along the
   bottom. A side column costs more than the picture can spare. */
@media (max-width:700px){
  .lb{
    --lb-pad:0px;--lb-side:14px;--lb-room:0px;
    padding:66px 14px 92px;
  }

  .lb__stage{gap:14px;justify-content:center;}
  /* Caption above and counter below both live inside the stage here, so
     the picture has to give up their height as well. */
  .lb__stage img{
    max-height:calc(100vh  - 66px - 92px - 132px);
    max-height:calc(100svh - 66px - 92px - 132px);
    min-height:0;
  }

  .lb__cap{
    position:static;max-width:100%;
    text-align:center;flex:0 0 auto;
  }
  .lb__cap em{font-size:10px;letter-spacing:.18em;margin-bottom:5px;}
  .lb__cap b{font-size:clamp(18px,4.6vw,24px);}

  .lb__count{
    position:static;flex:0 0 auto;
    justify-content:center;margin-top:2px;
  }
  .lb__count .n{font-size:20px;}

  .lb__nav{
    top:auto;bottom:clamp(18px,3vh,30px);transform:none;
    width:52px;height:52px;
  }
  .lb__nav:active{transform:scale(.94);}
  .lb__nav--prev{left:clamp(14px,4vw,28px);}
  .lb__nav--next{right:clamp(14px,4vw,28px);}

  .lb__x{right:14px;top:14px;width:46px;height:46px;}
}

/* ---- phone ---- */
@media (max-width:640px){
  .tile{width:clamp(150px,42vw,200px);border-radius:12px;}
  .tile.is-low{margin-top:14px;}
  .tile::after{inset:8px;}
  .tile__cap b{font-size:14.5px;}


}

/* ============================================================
   FAQ
   ------------------------------------------------------------
   Plain <details> elements: they open and close with no JavaScript,
   they are keyboard-operable and screen-reader friendly out of the
   box, and the answers are in the HTML whether or not a panel is
   open — which is what a search engine reads.
   ============================================================ */
.faq{padding:var(--sec-y) var(--gut);background:var(--paper);}
.faq__in{max-width:860px;margin-inline:auto;}
.faq__list{display:flex;flex-direction:column;gap:10px;}

.faq__item{
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.faq__item[open]{border-color:var(--line-2);box-shadow:0 22px 34px -30px rgba(90,56,22,.4);}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,24px);
  cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(16px,1.35vw,19px);line-height:1.35;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:14px;}

/* the + that becomes a - */
.faq__mark{position:relative;flex:0 0 18px;height:18px;}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;
  background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s ease,opacity .3s ease;
}
.faq__mark::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq__item[open] .faq__mark::after{transform:translate(-50%,-50%) rotate(0);opacity:0;}

.faq__item p{
  margin:0;padding:0 clamp(16px,1.9vw,24px) clamp(16px,1.8vw,22px);
  color:var(--ink-2);font-size:clamp(14px,1vw,15.5px);line-height:1.8;
}

@media (max-width:640px){
  .faq__item summary{font-size:15.5px;padding:14px 16px;}
  .faq__item p{font-size:14px;padding:0 16px 16px;}
}

/* ============================================================
   CONTACT
   ------------------------------------------------------------
   One dark slab holding two halves: the pitch on the left, the
   form on a white card that sits proud of it on the right.
   ============================================================ */
.contact{padding:var(--sec-y) var(--gut);}

.contact__shell{
  max-width:1240px;margin-inline:auto;
  background:var(--ink);color:var(--paper);
  border-radius:20px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.06fr;
  align-items:stretch;
}

/* ---- left ---- */
.contact__left{
  padding:clamp(30px,3.4vw,54px);
  display:flex;flex-direction:column;
}
.contact__h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(28px,2.9vw,44px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 16px;
}
.contact__lede{
  margin:0 0 clamp(24px,3vh,34px);max-width:44ch;
  font-size:15px;line-height:1.8;
  color:color-mix(in srgb, var(--paper) 72%, transparent);
}

.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mini{
  border:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  border-radius:10px;padding:16px 14px;
}
.mini b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(21px,2vw,28px);line-height:1;margin-bottom:6px;
}
.mini span{
  display:block;font-size:11px;letter-spacing:.08em;
  color:color-mix(in srgb, var(--paper) 55%, transparent);line-height:1.5;
}

.contact__talk{margin-top:auto;padding-top:clamp(28px,4vh,48px);}
.contact__talk h3{
  font-family:var(--f-display);font-weight:400;font-size:19px;margin:0 0 8px;
}
.contact__talk > p{
  margin:0 0 18px;max-width:40ch;
  font-size:14px;line-height:1.7;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
}

.reach{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;margin-bottom:10px;
  border:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius:10px;
  transition:border-color .2s ease,background .2s ease;
}
.reach:hover{
  border-color:color-mix(in srgb, var(--paper) 38%, transparent);
  background:color-mix(in srgb, var(--paper) 5%, transparent);
}
.reach__ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--paper) 10%, transparent);
  color:var(--paper);
}
.reach__ico svg{width:17px;height:17px;}
.reach__txt{min-width:0;}
.reach__txt em{
  display:block;font-style:normal;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 52%, transparent);margin-bottom:2px;
}
.reach__txt b{
  display:block;font-size:15px;font-weight:600;
  overflow-wrap:anywhere;
}

/* ---- right: the card ---- */
.contact__card{
  background:var(--paper);color:var(--ink);
  margin:clamp(10px,1vw,16px);
  border-radius:14px;
  padding:clamp(24px,2.6vw,42px);
}
.form__h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,2.2vw,32px);margin:0 0 6px;
}
.form__sub{
  margin:0 0 clamp(20px,2.4vh,28px);
  font-size:14px;color:var(--ink-3);line-height:1.6;
}

.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.f{margin-bottom:16px;}
.f label{
  display:block;margin-bottom:7px;
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.f label i{font-style:normal;color:var(--rose);}

.f input,
.f select,
.f textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--wash);
  border:1px solid var(--line-2);border-radius:9px;
  padding:12px 14px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.f textarea{min-height:104px;resize:vertical;line-height:1.7;}
.f select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
    linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 54%,calc(100% - 14px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;background:var(--paper);border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent);
}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-4);}

.f__err{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--rose);}
.f.is-bad input,
.f.is-bad select,
.f.is-bad textarea,
.cap.is-bad .cap__row{border-color:var(--rose);}
.f.is-bad input,.f.is-bad select,.f.is-bad textarea{background:var(--rose-bg);}

/* ---- captcha ---- */
.cap{
  border:1px solid var(--line-2);border-radius:10px;
  padding:16px;margin:4px 0 20px;background:var(--wash);
}
.cap__h{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:13.5px;font-weight:700;
}
.cap__h i{font-style:normal;color:var(--rose);}
.cap__tick{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--leaf-bg);color:var(--leaf);
}
.cap__tick svg{width:13px;height:13px;}

.cap__row{display:flex;align-items:stretch;gap:10px;}

/* The answer box, with room on the right for the tick */
.cap__ans{position:relative;flex:1;min-width:0;display:flex;}
.cap__ok{
  position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.6);
  width:20px;height:20px;color:var(--leaf);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.cap__ok svg{width:100%;height:100%;}
.cap__q{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:0 15px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--paper);
  font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cap__q em{
  font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-right:3px;
}
.cap__q b{font-size:18px;font-weight:700;}
.cap__row input{
  flex:1;min-width:0;font:inherit;font-size:15px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:9px;
  padding:12px 40px 12px 14px;color:var(--ink);
  transition:border-color .16s ease;
}
.cap__row input:focus{outline:none;border-color:var(--ink);}

/* ---- states ----
   Right answer: the box, the header tick and the field all turn green,
   and a tick appears in the field. Wrong answer, on submit: red. */
.cap.is-ok{border-color:var(--leaf);background:var(--leaf-bg);}
.cap.is-ok .cap__tick{background:var(--leaf);color:#fff;}
.cap.is-ok .cap__row input{border-color:var(--leaf);}
.cap.is-ok .cap__ok{opacity:1;transform:translateY(-50%) scale(1);}

.cap.is-bad{border-color:var(--rose);background:var(--rose-bg);}
.cap.is-bad .cap__row input{border-color:var(--rose);}
.cap.is-bad .cap__tick{background:var(--rose-bg);color:var(--rose);}
.cap__new{
  flex:0 0 auto;width:46px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);border-radius:9px;
  color:var(--ink-2);display:grid;place-items:center;
  transition:background .18s ease,color .18s ease;
}
.cap__new:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cap__new svg{width:18px;height:18px;}
.cap__new.is-spin svg{animation:spin .5s linear;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- send ---- */
.form__send{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;
  padding:16px;border-radius:10px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.form__send svg{width:16px;height:16px;}
.form__send:hover{background:transparent;color:var(--ink);}
.form__send[disabled]{opacity:.6;cursor:not-allowed;}
.form__send[disabled]:hover{background:var(--ink);color:var(--paper);}

/* While the request is in flight */
.form__send.is-busy{gap:12px;}
.form__send.is-busy::before{
  content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--paper) 35%, transparent);
  border-top-color:var(--paper);
  animation:sending .7s linear infinite;
}
@keyframes sending{to{transform:rotate(360deg);}}

.form__fine{
  margin:12px 0 0;text-align:center;
  font-size:11.5px;color:var(--ink-4);line-height:1.6;
}

/* ---- result note ---- */
.note{display:none;}
.note.is-on{
  display:block;margin:14px 0 0;padding:13px 15px;border-radius:9px;
  font-size:14px;line-height:1.6;border:1px solid;
}
.note--ok{background:var(--leaf-bg);border-color:color-mix(in srgb,var(--leaf) 32%,#fff);color:color-mix(in srgb,var(--leaf) 78%,#000);}
.note--bad{background:var(--rose-bg);border-color:#efb5b2;color:#7d201d;}

/* The checkout's message sits ABOVE the form, so it needs its gap below,
   not above — with the shared margin it sat flush on the first card.
   scroll-margin-top leaves a little air under the sticky header when
   the page scrolls to it. */
#coNote.is-on{margin:0 0 clamp(16px,1.6vw,22px);scroll-margin-top:18px;}

/* ---- tablet ---- */
@media (max-width:1000px){
  .contact__shell{grid-template-columns:1fr;}
  .contact__left{padding-bottom:clamp(24px,3vw,34px);}
  .contact__lede{max-width:none;}
  .contact__talk{margin-top:26px;padding-top:26px;
    border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent);}
  .contact__talk > p{max-width:none;}
  .contact__card{margin:0 clamp(10px,1.4vw,16px) clamp(10px,1.4vw,16px);}
}

/* ---- phone ---- */
@media (max-width:640px){
  .contact__shell{border-radius:14px;}
  .contact__left{padding:24px 20px 20px;}
  .contact__h2{font-size:clamp(24px,6.6vw,32px);}
  .minis{grid-template-columns:1fr;gap:8px;}
  .mini{display:flex;align-items:baseline;gap:12px;padding:12px 14px;}
  .mini b{margin:0;font-size:22px;}
  .contact__card{padding:22px 18px;border-radius:12px;}
  .f2{grid-template-columns:1fr;gap:0;}

  /* The sum, the answer and the reload will not share 320px */
  .cap__row{flex-wrap:wrap;}
  .cap__q{flex:1 1 auto;justify-content:center;padding:12px 14px;}
  .cap__new{width:46px;}
  .cap__row input{flex:1 1 120px;}
}

/* ============================================================
   FOOTER
   ------------------------------------------------------------
   A dark slab: who we are on the left, then link cards, then the
   one thing we want people to do. A hairline with a diamond set
   into it separates that from the small print.
   ============================================================ */
.foot{
  position:relative;overflow:hidden;
  /* Nearly black, deeper than --ink. The footer closes the page; giving
     it the same grey as the contact slab leaves the bottom of the site
     looking unfinished rather than final. Still derived from the theme
     token, so a colour change carries through. */
  background:color-mix(in srgb, var(--ink) 36%, #000000);
  color:var(--paper);
  /* Padding on the INNER wrapper, not here. The header caps its width
     and pads inside that cap; doing it the other way round in the
     footer left the two out of line by a whole gutter. */
  padding:calc(var(--toran) + clamp(26px,3vw,48px)) 0 clamp(26px,3vh,38px);
}
/* Graph paper. Drawn lines rather than a lifted background: raising the
   whole field turns the black grey, and next to the contact slab — the
   same --ink — the two stopped matching. */
/* Graph paper, but only in the middle.
   An edge-to-edge grid fights the content and makes the black look
   textured everywhere; a patch centred behind the cards reads as a
   watermark and lets the corners stay properly black. The ellipse is
   what does that — it fades the pattern out on all four sides. */
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px);
  /* Smaller squares. Twice as many lines in the same space reads
     heavier, so the lines lose a little weight to compensate. */
  background-size:34px 34px;
  background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 42% 58% at 50% 46%,
                      #000 0%, rgba(0,0,0,.5) 52%, transparent 80%);
  mask-image:radial-gradient(ellipse 42% 58% at 50% 46%,
                      #000 0%, rgba(0,0,0,.5) 52%, transparent 80%);
}
/* ---- the toran ----
   Mithai sells at festivals, so the footer is hung with a toran — but
   drawn in hairline, not colour: one swag of rope, a few beads, an
   outline mango leaf at each joint and a small hanging diya. White at
   low opacity only, no glow and no motion. It is meant to be noticed
   second, and to feel like the rest of the site rather than a banner.

   One small SVG tile inlined as a data URI and repeated sideways, sized
   by height so the drawing keeps its proportions on every screen. */
.foot{--toran:clamp(44px,3.4vw,58px);}
.foot::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:1;
  height:var(--toran);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%2756%27%20viewBox%3D%270%200%20200%2056%27%3E%3Cpath%20d%3D%27M0%204%20Q100%2026%20200%204%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2736.0%27%20cy%3D%2710.5%27%20r%3D%271.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C.32%29%27%2F%3E%3Ccircle%20cx%3D%2768.0%27%20cy%3D%2713.9%27%20r%3D%271.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C.32%29%27%2F%3E%3Ccircle%20cx%3D%27132.0%27%20cy%3D%2713.9%27%20r%3D%271.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C.32%29%27%2F%3E%3Ccircle%20cx%3D%27164.0%27%20cy%3D%2710.5%27%20r%3D%271.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C.32%29%27%2F%3E%3Cpath%20d%3D%27M0%204%20C4.2%208%204.2%2015%200%2020%20C-4.2%2015%20-4.2%208%200%204Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M0%206%20L0%2018%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M200%204%20C204.2%208%20204.2%2015%20200%2020%20C195.8%2015%20195.8%208%20200%204Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M200%206%20L200%2018%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%27.7%27%2F%3E%3Cline%20x1%3D%27100%27%20y1%3D%2715.0%27%20x2%3D%27100%27%20y2%3D%2722%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M100%2022%20L92.5%2033%20M100%2022%20L107.5%2033%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.20%29%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M92%2033%20Q100%2042%20108%2033%20Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.32%29%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M100%2026%20C102.3%2028.6%20102.3%2031%20100%2032.6%20C97.7%2031%2097.7%2028.6%20100%2026Z%27%20fill%3D%27rgba%28255%2C255%2C255%2C.50%29%27%2F%3E%3C%2Fsvg%3E") repeat-x center top / auto 100%;
}

.foot__in{
  position:relative;z-index:1;
  max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gut);      /* same maths as .head__in */
}

.foot__grid{
  display:grid;gap:clamp(18px,2vw,28px);
  grid-template-columns:1.5fr 1fr 1.15fr 1.25fr;
  align-items:start;
}

/* ---- who we are ---- */
.foot__brand img{max-height:64px;width:auto;margin-bottom:clamp(16px,2vh,24px);}
.foot__word{
  font-family:var(--f-display);font-weight:400;font-size:26px;
  margin:0 0 clamp(16px,2vh,24px);
}
.foot__tag{
  margin:0;max-width:38ch;
  font-size:14.5px;line-height:1.8;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
}

.foot__soc{
  display:flex;gap:9px;flex-wrap:wrap;
  list-style:none;margin:clamp(20px,2.6vh,28px) 0 0;padding:0;
}
.foot__soc a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  color:color-mix(in srgb, var(--paper) 72%, transparent);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.foot__soc a:hover{
  border-color:var(--paper);color:var(--paper);
  background:color-mix(in srgb, var(--paper) 8%, transparent);
}
.foot__soc svg{width:17px;height:17px;}

/* ---- link cards ---- */
.fcard{
  /* Barely a fill. The border does the work; a panel that sits up off
     the black turns three quiet cards into three grey boxes. */
  background:color-mix(in srgb, var(--paper) 1.6%, transparent);
  border:1px solid color-mix(in srgb, var(--paper) 9%, transparent);
  border-radius:14px;
  padding:clamp(20px,1.9vw,28px);
  height:100%;
}
.fcard__h{
  margin:0 0 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 58%, transparent);
}
.fcard ul{list-style:none;margin:0;padding:0;}
.fcard li + li{margin-top:11px;}
.fcard a{
  font-size:15px;
  color:color-mix(in srgb, var(--paper) 84%, transparent);
  overflow-wrap:anywhere;
  transition:color .18s ease;
}
.fcard a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px;}
/* the policy page you are reading */
.fcard a[aria-current="page"]{color:var(--paper);text-decoration:underline;text-underline-offset:4px;}
.fcard__addr{
  display:block;font-size:13.5px;line-height:1.7;
  color:color-mix(in srgb, var(--paper) 52%, transparent);
}

/* ---- the ask ---- */
.fcard--cta{
  background:color-mix(in srgb, var(--paper) 3%, transparent);
  border-color:color-mix(in srgb, var(--paper) 14%, transparent);
}
.fcard__lead{
  margin:0 0 18px;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(19px,1.5vw,23px);line-height:1.25;
}
/* a.fcard__btn, not .fcard__btn — `.fcard a` above is a class PLUS a
   type selector, so it outranks a lone class and was painting this
   button's label the same near-white as the links. On a white button
   that is an invisible button. */
a.fcard__btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:9px;
  background:var(--paper);color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.03em;
  transition:opacity .2s ease,transform .15s ease;
}
a.fcard__btn svg{width:14px;height:14px;}
a.fcard__btn:hover{opacity:.86;color:var(--ink);text-decoration:none;}
a.fcard__btn:active{transform:translateY(1px);}

/* ---- rule with a diamond in it ---- */
.foot__rule{
  display:flex;align-items:center;justify-content:center;
  margin:clamp(34px,4.5vh,58px) 0 clamp(20px,2.6vh,30px);
}
.foot__rule::before,
.foot__rule::after{
  content:"";flex:1;height:1px;
  background:color-mix(in srgb, var(--paper) 11%, transparent);
}
.foot__rule span{
  flex:0 0 auto;width:9px;height:9px;margin:0 14px;
  border:1px solid color-mix(in srgb, var(--paper) 34%, transparent);
  transform:rotate(45deg);
}

/* ---- small print ---- */
.foot__base{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  font-size:13.5px;
  color:color-mix(in srgb, var(--paper) 52%, transparent);
}
.foot__base p{margin:0;}
.foot__base a{
  color:var(--paper);font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  padding-bottom:2px;
}
.foot__base a:hover{border-color:var(--paper);}

/* ---- laptop: the cards drop under the brand ---- */
@media (max-width:1100px){
  .foot__grid{grid-template-columns:repeat(3,1fr);}
  .foot__brand{grid-column:1 / -1;max-width:640px;}
  .foot__tag{max-width:none;}
}

/* ---- tablet ---- */
@media (max-width:840px){
  .foot__grid{grid-template-columns:1fr 1fr;}
  .fcard--cta{grid-column:1 / -1;}
  .fcard--cta{display:flex;flex-direction:column;align-items:flex-start;}
  /* Explore + Policies side by side, Reach us under them, full width */
  .fcard--reach{grid-column:1 / -1;}
}

/* ---- phone ---- */
@media (max-width:560px){
  .foot{--toran:40px;padding:calc(var(--toran) + 24px) 0 24px;}
  /* At 360px the patch is wider than the screen, so it stops being a
     patch and just tints everything. Off. */
  .foot::before{display:none;}
  .foot__grid{grid-template-columns:1fr;}
  .foot__brand img{max-height:54px;}
  .foot__tag{font-size:14px;}
  .fcard{padding:18px;border-radius:12px;}
  .fcard__btn{width:100%;justify-content:center;}
  .foot__base{flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;}
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer{position:fixed;inset:0;z-index:120;}
.drawer[hidden]{display:none;}

.drawer__veil{
  position:absolute;inset:0;
  background:rgba(10,12,14,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:veilIn .25s ease;
}
@keyframes veilIn{from{opacity:0}to{opacity:1}}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,100%);
  display:flex;flex-direction:column;
  background:var(--paper);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);
  animation:panelIn .3s cubic-bezier(.2,0,.2,1);
}
@keyframes panelIn{from{transform:translateX(100%)}to{transform:none}}

.drawer__hd{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line);
}
.drawer__hd p{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--f-display);font-weight:400;font-size:19px;
}
.drawer__x{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:none;border:1px solid var(--line-2);color:var(--ink);
  transition:background .18s ease,color .18s ease;
}
.drawer__x:hover{background:var(--ink);color:var(--paper);}
.drawer__x svg{width:16px;height:16px;}

.drawer__body{flex:1;overflow-y:auto;padding:6px 20px;min-height:0;}

.drawer__empty{padding:56px 0;text-align:center;}
.drawer__empty p{margin:0 0 20px;color:var(--ink-3);}
.drawer__shop{
  font:inherit;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  padding:14px 26px;background:none;
  border:1px solid var(--ink);color:var(--ink);
  transition:background .2s ease,color .2s ease;
}
.drawer__shop:hover{background:var(--ink);color:var(--paper);}

.drawer__ft{
  flex:0 0 auto;padding:18px 20px 22px;
  border-top:1px solid var(--line);background:var(--wash);
}
.drawer__sub{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:4px;
}
.drawer__sub span{font-size:13px;font-weight:600;color:var(--ink-2);}
.drawer__sub b{font-family:var(--f-display);font-weight:400;font-size:26px;}
.drawer__ship{margin:0 0 16px;font-size:12px;color:var(--ink-3);}
.drawer__go{
  display:block;width:100%;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:16px;border:1px solid var(--ink);border-radius:9px;
  background:var(--ink);color:var(--paper);
  transition:background .2s ease,color .2s ease;
}
.drawer__go:hover{background:transparent;color:var(--ink);}

/* ---- one line in the box, shared by the drawer and the summary ---- */
.ln__list{list-style:none;margin:0;padding:0;}
.ln{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.ln:last-child{border-bottom:0;}

.ln__art{position:relative;flex:0 0 auto;width:58px;height:58px;}
.ln__art img{
  width:100%;height:100%;object-fit:cover;
  border:1px solid var(--line);border-radius:8px;background:var(--wash);
}
.ln__none{
  display:grid;place-items:center;width:100%;height:100%;
  border:1px solid var(--line);border-radius:8px;background:var(--wash);
  font-family:var(--f-display);font-size:24px;color:var(--ink-3);
}
.ln__q{
  position:absolute;top:-7px;right:-7px;
  min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  border:2px solid var(--paper);
}

.ln__txt{min-width:0;}
.ln__txt b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:15.5px;line-height:1.3;margin-bottom:3px;
}
.ln__txt em{
  display:block;font-style:normal;font-size:12.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.ln__amt{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}

.ln__x{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:none;border:1px solid var(--line-2);color:var(--ink-3);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ln__x:hover{background:var(--rose);border-color:var(--rose);color:#fff;}
.ln__x svg{width:12px;height:12px;}

/* the header cart, once it holds something */
.head__cart{cursor:pointer;font:inherit;transition:background .2s ease,color .2s ease,transform .15s ease;}
.head__cart:hover{background:var(--ink);color:var(--paper);}
.head__cart:active{transform:scale(.94);}
.head__cart.has-items{border-color:var(--ink);}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co{padding:var(--sec-y) var(--gut);background:color-mix(in srgb, #ecdfc8 40%, var(--paper));}
.co__head{max-width:var(--shell);margin:0 auto clamp(26px,3vw,44px);}
.co__head .shop__lede{max-width:58ch;}
.co[hidden]{display:none;}
.co__in{max-width:var(--shell);margin-inline:auto;}

.co__grid{
  display:grid;gap:clamp(18px,2vw,30px);
  grid-template-columns:1.6fr 1fr;
  align-items:start;
}

/* The steps are joined by a hairline running down the gaps between the
   cards, through the centres of the numbered circles, so the form reads
   as one path rather than four boxes. */
/* "Other" under the City list: the typed town sits just below the select */
.f__other{margin-top:10px;}
.co select:disabled{opacity:.6;cursor:not-allowed;}

.co__main{min-width:0;position:relative;}
.co__main::before{
  content:"";position:absolute;z-index:0;
  left:calc(clamp(20px,2.2vw,30px) + 17px);top:40px;bottom:40px;
  border-left:1px dashed var(--line-2);
}
.co__main > .cobox{position:relative;z-index:1;}

.cobox__no{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;
  margin-right:14px;vertical-align:middle;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-ui);font-size:11.5px;font-weight:700;letter-spacing:.04em;
}
.cobox__no--sm{margin:0 14px 0 0;}
.cobox--note{display:flex;align-items:center;flex-wrap:wrap;}
.cobox--note #o_notewrap{flex-basis:100%;}

.cobox{
  background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:clamp(20px,2.2vw,30px);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.cobox:last-child{margin-bottom:0;}
.cobox__h{
  display:flex;align-items:center;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(18px,1.5vw,22px);margin:0 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}

/* ---- payment ---- */
.pay{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  border:1.5px solid var(--ink);border-radius:10px;
  padding:16px 18px;background:var(--wash);
}
.pay input{position:absolute;opacity:0;pointer-events:none;}
.pay__dot{
  flex:0 0 auto;width:19px;height:19px;margin-top:2px;border-radius:50%;
  border:1.5px solid var(--ink);display:grid;place-items:center;
}
.pay__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);}
.pay__txt b{display:block;font-size:15px;margin-bottom:4px;}
.pay__txt em{
  display:block;font-style:normal;font-size:13px;line-height:1.65;color:var(--ink-3);
}
.pay__only{margin:12px 0 0;font-size:12.5px;color:var(--ink-4);}

/* ---- the note ---- */
.cobox--note{padding-block:clamp(16px,1.8vw,22px);}
.cotick{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:14.5px;font-weight:600;
}
.cotick input{position:absolute;opacity:0;pointer-events:none;}
.cotick span{
  flex:0 0 auto;width:20px;height:20px;border-radius:5px;
  border:1.5px solid var(--line-2);background:var(--paper);
  position:relative;transition:background .16s ease,border-color .16s ease;
}
.cotick span::after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--paper);
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .16s ease;
}
.cotick input:checked + span{background:var(--ink);border-color:var(--ink);}
.cotick input:checked + span::after{transform:rotate(45deg) scale(1);}
.cotick input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px;}
#o_notewrap{margin-top:16px;margin-bottom:0;}
.hint{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-3);}

/* ---- summary ---- */
.co__side{position:sticky;top:calc(var(--headh, 92px) + 16px);}
/* The summary is a bill from the shop counter: dashed rules and a torn,
   zigzag foot. The mask cuts the zigzag, so the shadow is a drop-shadow
   on the column rather than on the card, where the mask would clip it. */
.co__side{filter:drop-shadow(0 22px 26px rgba(90,56,22,.16));}
.sum{
  --zz:9px;
  background:var(--paper);
  border-radius:16px 16px 0 0;
  padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) calc(clamp(20px,2vw,26px) + var(--zz));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / calc(var(--zz) * 2) var(--zz) repeat-x;
}
.sum__kick{
  margin:0 0 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.sum__h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(20px,1.7vw,25px);margin:0 0 6px;
  padding-bottom:14px;border-bottom:1px dashed var(--line-2);
}
.sum__list{list-style:none;margin:0;padding:0;}
.sum__list .ln{grid-template-columns:auto 1fr auto auto;gap:10px;}
.sum__list .ln__art{width:50px;height:50px;}
.sum__list .ln__txt b{font-size:14.5px;}

.sum__tot{
  margin:16px 0 0;padding-top:16px;border-top:1px dashed var(--line-2);
}
.sum__tot > div{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:7px 0;
}
.sum__tot dt{font-size:14px;color:var(--ink-2);}
.sum__tot dd{margin:0;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.sum__grand{
  margin-top:8px;padding-top:14px !important;border-top:1px dashed var(--ink-3);
}
.sum__grand dt{font-size:15px;font-weight:700;color:var(--ink) !important;}
.sum__grand dd{font-family:var(--f-display);font-weight:400;font-size:26px;}

.sum__test{
  margin:14px 0 0;padding:11px 13px;border-radius:8px;
  background:var(--rose-bg);border:1px solid #efb5b2;
  font-size:12.5px;line-height:1.6;color:#7d201d;
}
.sum .form__send{margin-top:18px;}

/* ============================================================
   UNDER THE PLACE ORDER BUTTON
   Payments off, or a cancelled payment. Red, right where the eye
   already is; fades out when it clears itself.
   ============================================================ */
.co__msg{
  display:flex;gap:10px;align-items:flex-start;
  margin:12px 0 0;padding:11px 13px;border-radius:9px;
  background:var(--rose-bg);border:1px solid #efb5b2;color:#9b1c17;
  font-size:13px;line-height:1.55;font-weight:500;
  animation:coMsgIn .25s ease-out;
  transition:opacity .35s ease;
}
.co__msg[hidden]{display:none;}
.co__msg::before{
  content:"!";flex:0 0 18px;height:18px;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;
  background:#c0322b;color:#fff;font-size:11px;font-weight:700;   /* 800 is not loaded; the browser was faking it */
}
.co__msg.is-out{opacity:0;}
@keyframes coMsgIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   THANK-YOU DIALOG
   Opens once Razorpay confirms and the server has verified the
   payment. The same arch and hairline echo as the rest of the page;
   a thin bar along the foot runs down the ten seconds before it
   closes itself.
   ============================================================ */
.thanks{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;}
.thanks[hidden]{display:none;}
.thanks__scrim{
  position:absolute;inset:0;background:rgba(12,12,12,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:thFade .3s ease-out;
}
.thanks__card{
  position:relative;width:min(460px,100%);
  padding:clamp(34px,4vw,46px) clamp(22px,3vw,38px) clamp(28px,3vw,36px);
  text-align:center;overflow:hidden;
  background:var(--paper);
  border-radius:999px 999px 20px 20px / 150px 150px 20px 20px;   /* a mehrab */
  outline:1px solid color-mix(in srgb, var(--paper) 55%, transparent);outline-offset:8px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  animation:thRise .42s cubic-bezier(.2,.9,.25,1.05);
}
.thanks__x{
  position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--line-2);
  transition:background .2s ease,color .2s ease;
}
.thanks__x:hover{background:var(--ink);color:var(--paper);}
.thanks__x svg{width:16px;height:16px;}
.thanks__seal{
  width:66px;height:66px;margin:4px auto 16px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  outline:1px solid color-mix(in srgb, var(--ink) 25%, transparent);outline-offset:6px;
  animation:thPop .5s .12s cubic-bezier(.2,.9,.3,1.3) both;
}
.thanks__seal svg{width:30px;height:30px;}
.thanks .kicker{margin-bottom:10px;}
.thanks__h{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(28px,3vw,38px);line-height:1.12;margin:0 0 12px;
}
.thanks__lead{margin:0 auto 10px;max-width:36ch;color:var(--ink-2);font-size:14.5px;line-height:1.7;}
.thanks__lead b{color:var(--ink);white-space:nowrap;}
.thanks__why{margin:0 auto 22px;max-width:36ch;color:var(--ink-3);font-size:13px;line-height:1.6;font-style:italic;}
.thanks__ok{
  display:inline-block;min-width:170px;padding:13px 26px;border-radius:9px;cursor:pointer;
  background:var(--ink);color:var(--paper);border:0;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.thanks__ok:hover{background:var(--deep);}
.thanks__timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);}
.thanks__timer i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(1);}
.thanks.is-open .thanks__timer i{animation:thTimer 10s linear forwards;}

@keyframes thFade{from{opacity:0}to{opacity:1}}
@keyframes thRise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes thPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes thTimer{to{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .thanks__scrim,.thanks__card,.thanks__seal,.co__msg{animation:none;}
  /* the countdown still shows, just without the other movement */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .co__grid{grid-template-columns:1fr;}
  .co__side{position:static;}
}

@media (max-width:640px){
  .cobox{padding:18px;border-radius:12px;}
  .sum{padding:18px 18px calc(18px + var(--zz));border-radius:12px 12px 0 0;}
  .co__main::before{left:calc(18px + 17px);}
  .drawer__panel{width:100%;}
  .drawer__body{padding:6px 16px;}
  .drawer__hd,.drawer__ft{padding-inline:16px;}
  /* Named areas, not auto-placement: picture on the left across both
     rows, name then price stacked beside it, remove button on the
     right. Auto-placing a four-item row into three columns sent the
     button to the far left and the price under the picture. */
  .ln,
  .sum__list .ln{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"art txt x" "art amt x";
    column-gap:12px;row-gap:2px;
  }
  .ln__art{grid-area:art;}
  .ln__txt{grid-area:txt;align-self:end;}
  .ln__amt{grid-area:amt;justify-self:start;align-self:start;font-size:13.5px;}
  .ln__x{grid-area:x;}
}

/* ============================================================
   TABLET AND PHONE
   The three-column composition cannot survive a narrow screen, so it
   becomes: headline first, then the photographs side by side, then
   the tall one. The hero stops being full-height and simply flows.
   ============================================================ */
@media (max-width:1180px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;                  /* it flows on a tablet, no fold */
    gap:clamp(24px,4vw,40px);
    padding-bottom:clamp(64px,9vw,96px);
  }
  .hero__mid{order:1;height:auto;padding-block:clamp(26px,6vw,52px);}
  .hero__h1{font-size:clamp(40px,8.6vw,72px);}

  .hero__side{height:auto;}
  .hero__side--l{order:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .hero__side--r{order:3;}

  .shot{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:auto;}
  .shot--a{height:min(46vw,300px);}
  .shot--b{height:min(46vw,300px);margin-top:26px;}
  .shot--c{height:min(74vw,440px);}

  .blob{left:-4%;right:auto;bottom:-5%;width:clamp(96px,22vw,180px);}
}

/* ============================================================
   PHONE — the whole thing on one screen
   ------------------------------------------------------------
   No scrolling to reach the hero. The two left plates come off (three
   photographs cannot breathe at 360px), leaving the tall plate with
   its inset, the headline, the button and the scroll cue — all inside
   the first viewport, the same as the desktop composition.
   ============================================================ */
@media (max-width:760px){
  :root{--vhead:102px;--headh:62px;--sec-y:clamp(40px,11vw,56px);}
  .shot{outline-offset:7px;}

  /* One ornament is company, two is clutter at 360px */
  .hero::after{display:none;}
  .hero::before{width:min(72vw,320px);top:30%;}
  .about::before{right:0;width:min(56vw,250px);}

  /* ---- header: logo, then cart and the menu button, same size ---- */
  .head__call{display:none;}
  .head__in{min-height:62px;gap:10px;flex-wrap:wrap;}
  .head__logo img{max-height:46px;}
  .head__end{order:2;margin-left:auto;gap:10px;}

  .head__cart{width:40px;height:40px;}
  .head__cart svg{width:18px;height:18px;}
  .head__n{
    min-width:19px;height:19px;padding:0 5px;border-radius:10px;
    font-size:10.5px;top:-3px;right:-3px;border-width:1.5px;
  }

  /* The menu button becomes a circle matching the cart, and sits last */
  .burger{
    order:3;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;gap:5px;
    border:1px solid var(--line-2);border-radius:50%;
  }
  .burger span{width:16px;height:1.4px;}
  .navtoggle:checked ~ .burger{border-color:var(--ink);}
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(6.4px) rotate(45deg);}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);}

  /* ---- hero: a flex column that fills exactly what is left ---- */
  .hero{
    display:flex;flex-direction:column;
    align-items:stretch;          /* the grid rule centres items; in a
                                     flex column that would shrink the
                                     photograph to its content width */
    gap:0;
    /* Back to one full screen — the tablet block above turned the
       fold off, and on a phone we want it back. */
    min-height:calc(100svh - var(--vhead));
    min-height:calc(var(--appvh, 100svh) - var(--vhead));
    padding:clamp(10px,2vh,18px) var(--gut) 46px;
  }

  .hero__side--l{display:none;}          /* banner 1 and 2 off on phones */

  .hero__mid{order:1;flex:0 0 auto;height:auto;padding-block:0;}
  .sprig{width:34px;height:48px;margin-bottom:clamp(6px,1.2vh,12px);}
  .hero__h1{
    font-size:clamp(29px,8.4vw,44px);
    margin-bottom:clamp(14px,2.4vh,24px);
  }
  .cta{padding:13px 30px;font-size:11.5px;letter-spacing:.15em;}
  .cta::after{left:7px;top:7px;right:-7px;bottom:-7px;}

  /* The photograph takes every pixel the text did not use */
  .hero__side--r{
    order:2;position:relative;
    flex:1;min-height:0;height:auto;
    margin-top:clamp(14px,2.6vh,26px);
  }
  .shot--c{
    position:absolute;inset:0;
    width:auto;height:auto;margin:0;
  }

  .blob{
    left:0;right:auto;bottom:-3%;
    width:clamp(82px,23vw,124px);
  }

  .scroller{bottom:2px;width:42px;height:42px;}
}