/* ==========================================================================
   SINGHI EXPORTS — motion edition
   Light, editorial, image-led. Every section is built to move.
   ========================================================================== */

:root{
  --paper:#ffffff;
  --paper-2:#f4f2ee;
  --paper-3:#eae7e1;
  --ink:#0c0c0d;
  --ink-2:#3b3e43;
  --muted:#8a8d93;
  --line:#e4e1db;
  --blue:#1668f0;
  --green:#11a45e;
  --red:#c0271c;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;

  --gut:clamp(18px, 4vw, 72px);
  --hdr-h:64px;          /* fixed header: a fixed bar height, border included */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.7,0,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}

.wrap{padding-inline:var(--gut)}
.sec{padding-block:clamp(80px,11vw,180px);position:relative}

/* ==========================================================================
   Type
   ========================================================================== */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:.94;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.d1{font-size:clamp(2.9rem, 1rem + 8.4vw, 11rem)}
.d2{font-size:clamp(2.3rem, 1rem + 5.4vw, 6.2rem)}
.d3{font-size:clamp(1.7rem, 1rem + 2.6vw, 3.2rem)}
.italic{font-style:italic}
.display em{font-style:italic;font-weight:400}

.tag{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
}
.tag::before{content:"";width:22px;height:1px;background:var(--blue)}
.tag--plain::before{display:none}

.lede{
  font-size:clamp(1.02rem,.95rem + .45vw,1.32rem);
  line-height:1.6;color:var(--ink-2);max-width:56ch;
}
.body{font-size:1rem;line-height:1.75;color:var(--ink-2);max-width:60ch}
.body + .body{margin-top:1.1em}

/* ==========================================================================
   Preloader
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:9000;
  background:var(--paper);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gut);
  transition:transform 1s var(--ease-io);
}
.loader.is-done{transform:translateY(-101%)}
/* intro already seen this visit, or a live reload — the page opens straight up */
.is-resumed .loader{display:none}
.loader__n{
  font-family:var(--serif);
  font-size:clamp(4rem,16vw,15rem);line-height:.8;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.loader__label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);text-align:right;padding-bottom:14px;
}
.loader__bar{
  position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:var(--line);
}
.loader__fill{height:100%;width:0;background:var(--ink);transition:width .2s linear}

/* page-transition curtain
   .is-in   leaving  — slides up over the page
   .is-cover arriving — already covering, set before the first paint
   .is-out  arriving — lifts away once the new page is built
   .is-out is declared last so it wins the tie against .is-cover. */
/* Parked just below the screen between navigations. On a phone that is not
   enough: during a fast fling the browser can show a fixed layer for a frame
   before it settles, and a black one flashes across the bottom of the page.
   Hidden outright while idle, it cannot be painted at all. */
.curtain{
  position:fixed;inset:0;z-index:8000;background:var(--ink);
  transform:translateY(101%);pointer-events:none;visibility:hidden;
}
.curtain.is-in,.curtain.is-cover,.curtain.is-out{visibility:visible}
.curtain.is-in{transform:translateY(0);transition:transform .42s var(--ease-io)}
.curtain.is-cover{transform:translateY(0)}
.curtain.is-out{transform:translateY(-101%);transition:transform .52s var(--ease-io)}

/* ==========================================================================
   Progress + header
   ========================================================================== */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:5000;background:transparent}
.prog__bar{height:100%;width:0;background:var(--ink);transform-origin:0 50%}

/* A solid white bar, all the way down the page.
   It replaced a difference-blended transparent header: that trick kept plain
   text readable over any backdrop, but it also inverted an uploaded logo, so a
   custom mark never showed its real colours. An opaque bar leaves artwork
   alone. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:4000;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--hdr-h);
  /* the logo sits tight to the edge and uses the gutter space; the right side
     keeps the page gutter so the nav still lines up with the content below */
  padding:0 var(--gut) 0 clamp(12px,1.5vw,24px);
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:height .4s var(--ease), box-shadow .5s var(--ease);
}
/* once the page is moving, lift the bar off the content very slightly */
.hdr.is-small{height:54px;box-shadow:0 10px 30px rgba(12,12,13,.07)}

/* logo and the establishment line sit together on the left */
.hdr__left{display:flex;align-items:center;gap:18px;min-width:0}
.hdr__est{
  position:relative;
  padding-left:19px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
  opacity:.72;
}
.hdr__est::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:15px;margin-top:-7.5px;
  background:currentColor;opacity:.4;
}
/* the header is narrow on small screens — the logo alone is enough there */
@media(max-width:900px){ .hdr__est{display:none} }

.hdr__logo{font-family:var(--serif);font-size:1.18rem;letter-spacing:-.01em;line-height:1}

/* uploaded logo image */
.hdr__logo--img{display:flex;align-items:center;line-height:0}
/* The bar is 64px and was giving the mark 54 of it. The strapline under the
   wordmark is a tenth of the artwork, so every pixel it loses turns it to
   mush — the mark is taken as close to the bar height as the border and
   the shrunken bar allow. */
.hdr__logo--img img{
  height:60px;width:auto;max-width:340px;object-fit:contain;
  transition:height .4s var(--ease);
}
.hdr.is-small .hdr__logo--img img{height:48px}
@media(max-width:640px){
  .hdr__logo--img img{height:48px;max-width:220px}
  .hdr.is-small .hdr__logo--img img{height:42px}
}
.hdr__logo small{
  display:block;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-top:4px;
}
/* stretched to the full bar height so the dropdown can hang off its bottom edge */
.hdr__nav{display:flex;align-items:center;align-self:stretch;gap:30px}

/* direct children only — the links inside the dropdown are styled separately */
.hdr__nav > a,.hdr__toggle{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding-bottom:3px;
}
.hdr__nav > a::after,.hdr__toggle::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease);
}
.hdr__nav > a:hover::after,.hdr__toggle:hover::after{transform:scaleX(1);transform-origin:0 50%}
.hdr__nav > a[aria-current]::after,
.hdr__toggle[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- products dropdown ---------- */
.hdr__item{position:relative;align-self:stretch;display:flex;align-items:center}
.hdr__toggle{display:inline-flex;align-items:center;gap:7px}
.hdr__toggle svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.hdr__item.is-open .hdr__toggle svg{transform:rotate(180deg)}

.hdr__menu{
  position:absolute;top:100%;left:50%;
  width:294px;padding:8px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(12,12,13,.13);
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-7px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.hdr__item.is-open .hdr__menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
@media(hover:hover){
  .hdr__item:hover .hdr__menu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
}
.hdr__menu a{
  display:block;padding:11px 13px;
  font-family:var(--sans);font-size:.87rem;font-weight:500;
  letter-spacing:-.005em;text-transform:none;color:var(--ink);
  transition:background .2s var(--ease);
}
.hdr__menu a span{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:.58rem;font-weight:400;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.hdr__menu a:hover{background:var(--paper-2)}

@media(max-width:860px){.hdr__nav{display:none}}

.menu-btn{
  display:none;width:44px;height:44px;position:relative;
}
.menu-btn span{
  position:absolute;left:11px;width:22px;height:1px;background:currentColor;
  transition:transform .4s var(--ease), opacity .3s;
}
.menu-btn span:nth-child(1){top:19px}
.menu-btn span:nth-child(2){top:25px}
.menu-btn.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:860px){.menu-btn{display:block}}

/* Same treatment as the curtain: a clipped black panel is still a painted
   black panel. The visibility flip waits for the closing sweep to finish, so
   the menu still animates shut rather than vanishing. */
.overlay{
  position:fixed;inset:0;z-index:3900;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .7s var(--ease-io), visibility 0s linear .7s;
}
.overlay.is-open{
  clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .7s var(--ease-io), visibility 0s;
}
.overlay a{
  font-family:var(--serif);font-size:clamp(2.2rem,10vw,4rem);
  color:#fff;line-height:1.08;
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.overlay.is-open a{opacity:1;transform:none}
.overlay.is-open a:nth-child(1){transition-delay:.16s}
.overlay.is-open a:nth-child(2){transition-delay:.22s}
.overlay.is-open a:nth-child(3){transition-delay:.28s}
.overlay.is-open a:nth-child(4){transition-delay:.34s}
.overlay.is-open a:nth-child(5){transition-delay:.40s}
.overlay.is-open a:nth-child(6){transition-delay:.46s}
.overlay__foot{
  position:absolute;left:var(--gut);right:var(--gut);bottom:36px;
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.overlay__foot a{font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.8);opacity:1;transform:none}

/* ==========================================================================
   Hero
   ========================================================================== */
/* min-height, not height: on a short screen the hero grows rather than letting
   its bottom-aligned content ride up underneath the fixed header. */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);
  animation:drift 22s ease-out forwards;
}
@keyframes drift{to{transform:scale(1)}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,9,.5) 0%,rgba(8,8,9,.18) 38%,rgba(8,8,9,.82) 100%);
}
.hero__in{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--hdr-h) + clamp(16px,3.5vh,44px));
  padding-bottom:clamp(38px,6vw,84px);
}
.hero .display{color:#fff}
.hero__lede{color:rgba(255,255,255,.76);max-width:44ch;margin-top:26px}

/* Masked line reveal.
   The mask clips at the line box, which is shorter than the glyphs at
   line-height .94 — so pad the box downward and pull the same amount back
   off the margin, giving the descenders room without changing the layout. */
.line{
  display:block;overflow:hidden;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.05s var(--ease);
}
.reveal .line > span,.line.in > span{transform:translateY(0)}
.line:nth-child(2) > span{transition-delay:.09s}
.line:nth-child(3) > span{transition-delay:.18s}
.line:nth-child(4) > span{transition-delay:.27s}

.hero__bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin-top:clamp(26px,4vw,52px);
}
.hero__scroll{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hero__scroll i{
  width:1px;height:38px;background:rgba(255,255,255,.4);position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:#fff;
  animation:runline 1.9s var(--ease-io) infinite;
}
@keyframes runline{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ==========================================================================
   About page
   A quieter register than the homepage: the headline opens on white and the
   photography starts underneath it rather than behind it.
   ========================================================================== */
.sec--paper{background:var(--paper-2)}

/* ---------- masthead ---------- */
.mast{
  padding-top:calc(var(--hdr-h) + clamp(28px,4vw,60px));
  padding-bottom:clamp(40px,6vw,80px);
}
.mast__crumb{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(22px,3vw,40px);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.mast__crumb a:hover{color:var(--ink)}
.mast__crumb [aria-current]{color:var(--ink)}

.mast__title{max-width:16ch}

.mast__foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:end;
  margin-top:clamp(34px,5vw,64px);
}
.mast__lede{margin:0}
.mast__meta{display:grid;gap:14px;align-content:end}
.mast__meta > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
.mast__meta dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.mast__meta dd{font-size:.92rem;color:var(--ink);text-align:right}
@media(max-width:820px){
  .mast__foot{grid-template-columns:1fr}
  .mast__title{max-width:none}
}

/* ---------- full-width photographic band ---------- */
.band{margin:0}
.band__media{
  height:clamp(320px,52vw,640px);overflow:hidden;background:var(--paper-3);
}
.band__media img{
  width:100%;height:100%;object-fit:cover;
  /* the parallax shifts the image inside its frame, so it is oversized */
  transform:scale(1.1);
}
.band__cap{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  padding-top:16px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.band__cap span:first-child{color:var(--ink)}

/* ---------- label column beside the copy ---------- */
.cols{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(26px,5vw,84px);align-items:start;
}
.cols__aside{position:sticky;top:calc(var(--hdr-h) + 34px)}
.cols__hint{
  margin-top:16px;max-width:22ch;
  font-size:.86rem;line-height:1.6;color:var(--muted);
}
.cols__body > .display{margin-bottom:clamp(22px,3vw,38px);max-width:18ch}
.cols__body > .body + .body{margin-top:18px}
@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:26px}
  .cols__aside{position:static}
  .cols__hint{display:none}
}

/* ---------- pull quote ---------- */
.quote{
  margin:clamp(30px,4vw,52px) 0;
  padding-left:clamp(20px,3vw,34px);
  border-left:2px solid var(--blue);
}
.quote p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);
  line-height:1.28;color:var(--ink);max-width:24ch;
}

/* ---------- image beside copy ---------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:start;
  margin-bottom:clamp(30px,4vw,54px);
}
.feature__media{
  height:clamp(300px,34vw,480px);overflow:hidden;background:var(--paper-3);
}
.feature__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.feature__text > .body + .body{margin-top:18px}
@media(max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature__media{height:clamp(230px,52vw,340px)}
}

/* ---------- three data pairs ---------- */
.pairs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--line);padding-top:26px;
}
.pairs dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.pairs dd{font-size:.95rem;line-height:1.7;color:var(--ink)}
@media(max-width:640px){.pairs{grid-template-columns:1fr;gap:22px}}
/* Why Surat ends on the feature block, so its trailing margin would leave
   dead space above the section's own padding. */
#surat .feature{margin-bottom:0}

/* ---------- mission and vision ---------- */
.mv{background:var(--ink);color:#fff}
/* the quotation and the port picture share a row: the picture stretches to
   whatever height the words end up taking */
.mv__lead{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,80px);
  margin:clamp(26px,4vw,46px) 0 clamp(40px,6vw,80px);
}
.mv__quote{margin:0}
.mv__figure{position:relative;overflow:hidden;min-height:clamp(220px,24vw,360px)}
.mv__figure img{width:100%;height:100%;object-fit:cover;display:block}
/* the measure belongs to the quotation, not to the note underneath it */
.mv__quote .display{color:#fff;max-width:14ch}
.mv__quote footer{
  margin-top:26px;max-width:52ch;
  font-size:.95rem;line-height:1.75;color:rgba(255,255,255,.6);
}
.mv__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);
  border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(30px,4vw,54px);
}
.mv__col h3{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:22px;
}
/* doubled class: the base .checks rules are declared later in this file, so a
   single class here would lose the tie on specificity */
.checks.checks--light{border-top-color:rgba(255,255,255,.14);margin-top:0}
.checks.checks--light li{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}
.checks.checks--light b{color:var(--green)}
@media(max-width:820px){
  .mv__grid{grid-template-columns:1fr}
  .mv__lead{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .mv__figure{min-height:0;aspect-ratio:16/10}
}

/* ---------- documents ---------- */
.docs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,56px);
  margin-top:clamp(26px,4vw,44px);
  border-top:1px solid var(--line);
}
.docs li{
  display:flex;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--ink);
}
.docs span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--blue);
}
@media(max-width:640px){.docs{grid-template-columns:1fr}}

/* ==========================================================================
   Range pages
   ========================================================================== */
.sec--dark{background:var(--ink);color:#fff}
.sec--dark .display,.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .body{color:rgba(255,255,255,.72)}
.sec--dark .lede{color:rgba(255,255,255,.8)}
.sec--dark .tag{color:rgba(255,255,255,.5)}
.sec--dark .tag::before{background:var(--green)}
.sec--dark .cols__hint{color:rgba(255,255,255,.45)}

/* ---------- the product grid ---------- */
.pgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,42px) clamp(18px,2.4vw,34px);
  margin-top:clamp(30px,4vw,58px);
}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.pgrid{grid-template-columns:1fr}}

.pcard{display:block;width:100%;padding:0;text-align:left;border:0;background:none;cursor:pointer}
.pcard__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4 / 5;background:var(--paper-3);
}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img{transform:scale(1.05)}
.pcard__n{
  position:absolute;top:14px;left:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  color:#fff;mix-blend-mode:difference;
}
.pcard__meta{display:block;padding-top:16px}
.pcard__name{
  display:block;font-family:var(--serif);font-size:1.32rem;
  line-height:1.1;color:var(--ink);
}
.pcard__bot{
  display:block;margin-top:4px;
  font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--muted);
}
.pcard__sum{
  display:block;margin-top:11px;
  font-size:.91rem;line-height:1.65;color:var(--ink-2);
}
.pcard__foot{
  display:flex;gap:20px;margin-top:15px;padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.61rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  transition:border-color .4s var(--ease);
}
.pcard:hover .pcard__foot{border-top-color:var(--ink)}
/* an affordance that the card opens something, kept in flow so nothing shifts */
.pcard__meta::after{
  content:"Specifications →";
  display:block;margin-top:13px;
  font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);
  opacity:0;transform:translateY(5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.pcard:hover .pcard__meta::after,
.pcard:focus-visible .pcard__meta::after{opacity:1;transform:none}

/* ---------- standard terms ---------- */
.terms{border-top:1px solid var(--line);margin-top:clamp(26px,4vw,44px)}
.terms > div{
  display:grid;grid-template-columns:minmax(140px,215px) minmax(0,1fr);
  gap:12px clamp(20px,3vw,44px);
  padding:18px 0;border-bottom:1px solid var(--line);
}
.terms dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding-top:3px;
}
.terms dd{font-size:.95rem;line-height:1.7;color:var(--ink-2)}
.terms__note{
  margin-top:22px;max-width:60ch;
  font-size:.84rem;line-height:1.65;color:var(--muted);
}
@media(max-width:720px){.terms > div{grid-template-columns:1fr;gap:5px}}

/* ==========================================================================
   Harvest calendar
   A twelve-column schedule rather than a coloured chart: hairline rules, mono
   month labels, and one filled block for the peak months.
   ========================================================================== */
.cols__body--wide{min-width:0}

.hcal__key{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.hcal__swatch{
  width:22px;height:11px;background:var(--ink);display:inline-block;flex-shrink:0;
}
.hcal__note{color:var(--muted);margin-left:auto}
@media(min-width:761px){.hcal__note{display:none}}

/* the grid scrolls inside its own box; the page never scrolls sideways.
   `contain` is what keeps that promise on a phone: without it the table's
   600px minimum still reaches the page's intrinsic width, and the browser
   answers by zooming the whole page out to fit it. */
.hcal__scroll{
  overflow-x:auto;overscroll-behavior-x:contain;contain:layout inline-size;
  margin-top:14px;padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.hcal{
  border-collapse:collapse;width:100%;min-width:660px;
  table-layout:fixed;
}
.hcal th,.hcal td{border-bottom:1px solid var(--line)}

/* month headings */
.hcal thead th{
  padding:0 0 11px;
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-align:center;border-bottom-color:var(--ink);
}
.hcal thead th abbr{display:none;text-decoration:none}
.hcal__corner{text-align:left!important;width:26%}

/* product names, pinned so they stay readable while the months scroll past */
.hcal tbody th,.hcal__corner{
  position:sticky;left:0;z-index:1;background:var(--paper-2);
}
.hcal tbody th{
  padding:13px 18px 13px 0;text-align:left;font-weight:400;
  font-family:var(--serif);font-size:1rem;line-height:1.25;color:var(--ink);
  white-space:nowrap;
}

/* one cell per month; the mark sits inside so the rules stay unbroken */
.hcal tbody td{padding:13px 3px;text-align:center}
.hcal tbody td::before{
  content:"";display:block;height:11px;
  background:var(--paper-3);
  transition:background .3s var(--ease);
}
.hcal tbody td.is-peak::before{background:var(--ink)}
.hcal tbody tr:hover td.is-peak::before{background:var(--blue)}
.hcal tbody tr:hover th{color:var(--blue)}

@media(max-width:760px){
  .hcal{min-width:600px}
  .hcal thead th abbr{display:inline}
  .hcal thead th span{display:none}
  .hcal tbody th{font-size:.92rem}
  .hcal__corner{width:38%}
}

/* ==========================================================================
   Specification panel
   ========================================================================== */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:6000}
.sheet__scrim{
  position:absolute;inset:0;background:rgba(8,8,9,.55);
  opacity:0;transition:opacity .45s var(--ease);
}
.sheet.is-open .sheet__scrim{opacity:1}
.sheet__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  display:flex;flex-direction:column;
  background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(101%);transition:transform .55s var(--ease-io);
}
.sheet.is-open .sheet__panel{transform:none}
/* the panel takes focus when it opens, so the ring is not thrown around the
   close button on a plain click */
.sheet__panel:focus{outline:none}
.sheet__close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;padding:0;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:0 6px 20px rgba(12,12,13,.13);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.sheet__close svg{
  width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;
}
.sheet__close:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* a circle wants the ring closer than the page-wide 3px */
.sheet__close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sheet__media{aspect-ratio:16 / 10;overflow:hidden;background:var(--paper-3);flex:0 0 auto}
.sheet__media img{width:100%;height:100%;object-fit:cover}
.sheet__body{padding:clamp(24px,3.4vw,40px)}
.sheet__bot{
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);
  margin-bottom:8px;
}
.sheet__title{font-family:var(--serif);font-size:clamp(1.7rem,1.3rem + 1.3vw,2.3rem);line-height:1.06;color:var(--ink)}
.sheet__desc{margin-top:18px;font-size:.95rem;line-height:1.75;color:var(--ink-2)}
.sheet__specs{border-top:1px solid var(--line);margin-top:28px}
.sheet__specs > div{
  display:grid;grid-template-columns:minmax(96px,132px) minmax(0,1fr);
  gap:10px 20px;padding:14px 0;border-bottom:1px solid var(--line);
}
.sheet__specs dt{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding-top:2px;
}
.sheet__specs dd{font-size:.92rem;line-height:1.65;color:var(--ink)}
.sheet__cta{margin-top:30px}
.sheet__cta .mag{width:100%}
/* The side panel is 560px wide, so it only makes sense where there is page left
   to see beside it. On anything narrower it becomes a sheet that rises from the
   bottom and takes the full width. */
@media(max-width:860px){
  .sheet__panel{top:auto;height:92svh;width:100%;transform:translateY(101%)}
  .sheet.is-open .sheet__panel{transform:none}
  .sheet__media{aspect-ratio:16 / 9}
}
@media(max-width:600px){
  /* a 132px label column leaves too little for the value: stack them instead */
  .sheet__specs > div{grid-template-columns:minmax(0,1fr);gap:6px}
  .sheet__specs dt{padding-top:0}
}
@media(prefers-reduced-motion:reduce){
  .sheet__panel,.sheet__scrim{transition:none}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-direct{padding-bottom:clamp(38px,5vw,72px)}
.cstrip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,52px);
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px);
}
.cstrip dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.cstrip dd{
  font-family:var(--serif);font-size:clamp(1.1rem,1rem + .5vw,1.42rem);
  line-height:1.25;color:var(--ink);
}
.cstrip dd a{position:relative;padding-bottom:2px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease)}
.cstrip dd a:hover{background-size:100% 1px}
.cstrip dd.cstrip__addr{font-family:var(--sans);font-size:.95rem;line-height:1.7;color:var(--ink-2)}
@media(max-width:760px){.cstrip{grid-template-columns:1fr;gap:26px}}

/* a shorter band, so the form stays close to the top of the page */
.band--slim .band__media{height:clamp(220px,30vw,400px)}

/* ---------- enquiry form ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.eform{margin-top:clamp(26px,3.4vw,44px);max-width:760px}
.eform__row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,38px)}
@media(max-width:640px){.eform__row{grid-template-columns:1fr}}

.eform .field{position:relative;margin-bottom:26px}
.eform label{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.eform .req{color:var(--blue)}
.eform input,.eform select,.eform textarea{
  width:100%;padding:11px 0;
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.eform textarea{min-height:132px;resize:vertical;line-height:1.7}
.eform input::placeholder,.eform textarea::placeholder{color:var(--muted)}
.eform input:focus,.eform select:focus,.eform textarea:focus{
  outline:0;border-bottom-color:var(--ink);
}
/* the native arrow cannot be styled, so it is replaced */
.eform select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px}
.field--select{position:relative}
.field--select::after{
  content:"";position:absolute;right:4px;bottom:20px;
  width:7px;height:7px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg);pointer-events:none;
}

.field__err{
  display:block;margin-top:7px;min-height:1px;
  font-size:.79rem;line-height:1.5;color:var(--red);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-bottom-color:var(--red)}

.eform__status{
  display:none;margin:4px 0 26px;padding:16px 18px;
  border:1px solid var(--line);font-size:.92rem;line-height:1.65;
}
.eform__status.is-visible{display:block}
.eform__status--ok{border-color:var(--green);background:rgba(17,164,94,.06);color:#0a6b40}
.eform__status--err{border-color:var(--red);background:rgba(192,39,28,.05);color:var(--red)}

.eform__send{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.eform__send .mag{flex-shrink:0}
.eform__send .mag[disabled]{opacity:.55;pointer-events:none}
.eform__note{max-width:42ch;font-size:.82rem;line-height:1.65;color:var(--muted)}
.eform__note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* ---------- product picker ----------
   The enquiry form asks for lines, not one line: a panel of ticks grouped by
   range, then a row per choice asking how much of it is wanted. */
.field__hint{
  display:block;margin-top:9px;
  font-size:.8rem;line-height:1.55;color:var(--muted);
}

/* the chosen lines, each with its own quantity box */
.picked:empty{display:none}
.picked{display:grid;gap:10px;margin-bottom:14px}
.picked__row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr) 34px;
  align-items:center;gap:14px;
  padding:10px 12px;border:1px solid var(--line);background:var(--paper-2);
}
.picked__thumb{width:44px;height:44px;object-fit:cover;display:block;background:var(--paper-3)}
.picked__name{font-size:.95rem;color:var(--ink);line-height:1.3}
.eform .picked__qty{
  padding:7px 0;font-size:.92rem;
  border-bottom:1px solid var(--line);background:transparent;
}
.eform .picked__qty:focus{border-bottom-color:var(--ink)}
.picked__rm{
  width:30px;height:30px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.picked__rm:hover{color:var(--red);border-color:var(--red)}
@media(max-width:560px){
  .picked__row{grid-template-columns:44px minmax(0,1fr) 34px;row-gap:10px}
  .picked__qty{grid-column:1 / -1}
}

.picked__add{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px 11px 14px;cursor:pointer;
  border:1px solid var(--line);background:transparent;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.picked__add:hover{border-color:var(--ink);background:var(--paper-2)}
.picked__plus{font-size:1rem;line-height:1;color:var(--blue)}

/* the panel itself */
/* display:flex would override what the hidden attribute does, leaving the
   panel invisible but still covering the page and eating every click */
.pick[hidden]{display:none}
.pick{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(8,8,9,.42);
  opacity:0;transition:opacity .26s var(--ease);
}
.pick.is-open{opacity:1}
.pick__panel{
  display:flex;flex-direction:column;
  width:min(760px,100%);max-height:min(760px,88vh);
  background:#fff;border:1px solid var(--line);
  transform:translateY(14px) scale(.99);
  transition:transform .3s var(--ease);
}
.pick.is-open .pick__panel{transform:none}
.pick__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px clamp(18px,3vw,30px);border-bottom:1px solid var(--line);
}
.pick__title{font-family:var(--serif);font-size:1.35rem;color:var(--ink);line-height:1.1}
.pick__count{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
/* flex:1 with min-height:0 keeps the footer in the panel: without it the list
   grows past the bottom and Cancel / Done are pushed off the screen */
.pick__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px clamp(18px,3vw,30px) 18px;-webkit-overflow-scrolling:touch}
.pick__group{padding-top:18px}
.pick__cat{
  position:sticky;top:0;z-index:1;padding:8px 0;background:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);
}
.pick__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
@media(max-width:560px){.pick__list{grid-template-columns:1fr}}
/* these sit inside .eform, whose own label rule would otherwise make them
   blocks of small uppercase mono — hence the .eform prefix and the reset */
.eform .pick__item{
  display:grid;grid-template-columns:40px minmax(0,1fr) 18px;
  align-items:center;gap:12px;margin-bottom:0;
  padding:7px 10px 7px 7px;cursor:pointer;
  border:1px solid transparent;
  font-family:var(--sans);font-size:.93rem;letter-spacing:normal;
  text-transform:none;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.eform .pick__item:hover{background:var(--paper-2)}
.pick__thumb{width:40px;height:40px;object-fit:cover;display:block;background:var(--paper-3)}
.pick__name{display:block;line-height:1.3}
/* the native box is replaced by a square that fills in when ticked */
.pick__box{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick__tick{
  display:block;width:18px;height:18px;border:1px solid var(--line);
  position:relative;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.pick__tick::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(45deg) scale(.4);opacity:0;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.pick__box:checked ~ .pick__tick{background:var(--ink);border-color:var(--ink)}
.pick__box:checked ~ .pick__tick::after{opacity:1;transform:rotate(45deg) scale(1)}
.pick__box:checked ~ .pick__name{font-weight:500}
.pick__box:focus-visible ~ .pick__tick{outline:2px solid var(--blue);outline-offset:2px}
.pick__foot{
  display:flex;justify-content:flex-end;gap:12px;
  padding:16px clamp(18px,3vw,30px);border-top:1px solid var(--line);
}
.pick__btn{
  padding:12px 26px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.pick__btn:hover{border-color:var(--ink)}
.pick__btn--done{background:var(--ink);border-color:var(--ink);color:#fff}
.pick__btn--done:hover{background:#000}
@media(prefers-reduced-motion:reduce){
  .pick,.pick__panel{transition:none}
}


/* ---------- four notes ---------- */
.notes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(28px,4vw,50px);
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,32px);
}
.note__n{
  display:block;margin-bottom:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--blue);
}
.note h3{font-family:var(--serif);font-size:1.12rem;line-height:1.2;color:var(--ink);margin-bottom:9px}
.note p{font-size:.89rem;line-height:1.65;color:var(--ink-2)}
@media(max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.notes{grid-template-columns:1fr}}

/* ---------- questions ---------- */
.acc{border-top:1px solid var(--line);margin-top:clamp(26px,4vw,44px)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  width:100%;padding:22px 0;text-align:left;
  font-family:var(--serif);font-size:clamp(1.02rem,.96rem + .3vw,1.22rem);
  line-height:1.3;color:var(--ink);
}
.acc__btn i{position:relative;width:14px;height:14px;flex-shrink:0}
.acc__btn i::before,.acc__btn i::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .4s var(--ease);
}
.acc__btn i::before{left:0;top:6.5px;width:14px;height:1px}
.acc__btn i::after{left:6.5px;top:0;width:1px;height:14px}
.acc__item.is-open .acc__btn i::after{transform:scaleY(0)}
.acc__panel{height:0;overflow:hidden;transition:height .5s var(--ease)}
.acc__inner{
  padding-bottom:26px;max-width:64ch;
  font-size:.94rem;line-height:1.75;color:var(--ink-2);
}
@media(prefers-reduced-motion:reduce){.acc__panel{transition:none}}

/* ==========================================================================
   Endless strip
   ========================================================================== */
/* The dark product band is a strong break on its own, so the section after it
   does not need a full section's worth of air above as well. */
.strip + .sec{padding-top:clamp(44px,5vw,80px)}

/* Two plain sections in a row put a full measure of air below one and above the
   next, which reads as a hole when the background never changes. The section
   above already supplies the space; this only trims the doubling. A change of
   background is a break in its own right, so those seams keep both halves. */
.sec + .sec{padding-top:clamp(16px,2vw,32px)}
/* and the section above gives up part of its own, closing the seam further.
   Browsers without :has() keep the full amount, which only reads as roomier. */
.sec:has(+ .sec){padding-bottom:clamp(48px,6.5vw,100px)}

.strip{
  background:var(--ink);color:#fff;overflow:hidden;
  padding-block:20px;border-block:1px solid rgba(255,255,255,.12);
}
.strip__track{display:flex;width:max-content;will-change:transform}
.strip__item{
  display:inline-flex;align-items:center;gap:14px;
  padding-inline:22px;white-space:nowrap;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.strip__item img{width:60px;height:40px;object-fit:cover;flex-shrink:0}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:center}
@media(max-width:900px){.intro{grid-template-columns:1fr}}
.intro__media{position:relative;overflow:hidden}
.intro__media img{width:100%;aspect-ratio:4/5;object-fit:cover;will-change:transform}
.intro__cap{
  position:absolute;left:0;bottom:0;right:0;padding:20px 22px;
  background:linear-gradient(180deg,transparent,rgba(8,8,9,.85));
  color:#fff;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;
}

.checks{margin-top:32px;border-top:1px solid var(--line)}
.checks li{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.checks b{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  color:var(--blue);flex-shrink:0;
}

/* ==========================================================================
   Horizontal rail
   ========================================================================== */
.rail{position:relative;background:var(--paper-2)}
.rail__pin{padding-block:clamp(64px,8vw,120px)}
.rail__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:0 var(--gut) clamp(20px,3vw,40px);
}
.rail__nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.rail__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--muted)}
.rail__count b{color:var(--ink);font-weight:500}
.rail__hint--touch{display:none}
.rail__arrows{display:flex;gap:8px;flex-shrink:0}
.rail__arrows[hidden]{display:none}
.rail__arrow{
  width:38px;height:38px;flex:0 0 38px;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),opacity .3s var(--ease);
}
.rail__arrow svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.rail__arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rail__arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rail__arrow[disabled]{opacity:.28;cursor:default;background:transparent;border-color:var(--line);color:var(--ink)}

/* A plain horizontal scroller: the arrows drive it with the pointer, a swipe
   drives it by touch. The scrollbar is hidden — the arrows are the affordance. */
.rail__track{
  display:flex;gap:clamp(16px,2vw,32px);padding-inline:var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none;
  /* headroom for the hover lift and its shadow — overflow-x:auto would clip both */
  padding-block:14px 34px;margin-block:-14px -34px;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__card{flex:0 0 clamp(260px,26vw,380px);scroll-snap-align:start}
.rail__media{position:relative;overflow:hidden;background:var(--paper-3)}
.rail__media img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  max-height:46svh;   /* keeps a whole card in view on a short laptop screen */
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.rail__card:hover .rail__media img{transform:scale(1.07)}

/* Hover lift. The tilt script writes transform inline on .rail__card itself,
   so the card would win over anything set here — the anchor is lifted instead. */
.rail__card > a{
  display:block;
  transition:transform .55s var(--ease);
}
.rail__card:hover > a,
.rail__card > a:focus-visible{transform:translateY(-12px)}
.rail__media{transition:box-shadow .55s var(--ease)}
.rail__card:hover .rail__media{box-shadow:0 26px 52px rgba(12,12,13,.17)}

/* the small accents that tell you which card is live */
.rail__meta h3{
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .5s var(--ease);
}
.rail__card:hover .rail__meta h3{background-size:100% 1px}
.rail__index{transition:opacity .45s var(--ease)}
.rail__card:hover .rail__index{opacity:.55}
.rail__foot{transition:border-color .5s var(--ease)}
.rail__card:hover .rail__foot{border-top-color:var(--ink)}
.rail__index{
  position:absolute;top:14px;left:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  color:#fff;mix-blend-mode:difference;
}
.rail__meta{padding-top:18px}
.rail__meta h3{
  font-family:var(--serif);font-size:1.42rem;color:var(--ink);line-height:1.1;margin-bottom:4px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
}
.rail__bot{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--muted);margin-bottom:11px}
.rail__sum{
  font-size:.86rem;line-height:1.6;color:var(--ink-2);margin-bottom:14px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.rail__foot{
  display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
@media(max-width:760px){
  .rail__pin{padding-block:clamp(60px,10vw,90px)}
  /* no hover on touch, so the lift headroom is not needed — keep padding and margin paired */
  .rail__track{padding-block:0 14px;margin-block:0}
  .rail__card{flex-basis:76vw}
  /* touch pages the rail by swiping, so the arrows would only take up room */
  .rail__arrows{display:none}
  .rail__hint{display:none}
  .rail__hint--touch{display:inline}
}

/* The rail carries its own generous padding, so the section behind it does not
   need the full section rhythm on top as well. */
.rail + .sec{padding-top:clamp(38px,4.4vw,72px)}

/* ==========================================================================
   Range cards
   The three ranges, in the same card language as the product pages.
   ========================================================================== */
.cgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,42px);
}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}}

.ccard{display:block}
.ccard__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:5 / 4;background:var(--paper-3);
}
.ccard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ccard:hover .ccard__media img,
.ccard:focus-visible .ccard__media img{transform:scale(1.05)}
.ccard__n{
  position:absolute;top:14px;left:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  color:#fff;mix-blend-mode:difference;
}
.ccard__meta{display:block;padding-top:18px}
.ccard__name{
  display:block;font-family:var(--serif);
  font-size:clamp(1.32rem,1.2rem + .4vw,1.62rem);
  line-height:1.1;color:var(--ink);
}
.ccard__sub{
  display:block;margin-top:5px;
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);
}
.ccard__body{
  display:block;margin-top:13px;
  font-size:.93rem;line-height:1.7;color:var(--ink-2);
}
.ccard__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-top:18px;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  transition:border-color .4s var(--ease);
}
.ccard:hover .ccard__foot{border-top-color:var(--ink)}
.ccard__go{color:var(--blue);opacity:0;transform:translateX(-5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ccard:hover .ccard__go,
.ccard:focus-visible .ccard__go{opacity:1;transform:none}

/* ==========================================================================
   Mosaic
   ========================================================================== */
/* Multi-column rather than grid: cells vary in height, and a grid would leave
   holes wherever a row's tallest item sets the track height. */
.mosaic{
  column-count:4;
  column-gap:clamp(10px,1.4vw,22px);
}
@media(max-width:1000px){.mosaic{column-count:3}}
@media(max-width:680px){.mosaic{column-count:2}}
.mosaic__cell{
  position:relative;overflow:hidden;background:var(--paper-3);
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(10px,1.4vw,22px);
  display:block;
}
/* The produce is the point, so it is shown in its own colour. Hovering
   pushes in slightly and brings up the name and the growing region. */
.mosaic__cell img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.mosaic__cell:hover img{transform:scale(1.06)}
.mosaic__cell.is-tall img{aspect-ratio:3/4}
.mosaic__cell.is-wide img{aspect-ratio:16/10}
/* Name above, range below. Side by side they collided as soon as either ran
   long — "Moringa Leaf & Powder" beside "Herbs & Botanicals" in a 300px cell —
   and how long a product name gets is not something the layout should depend
   on. Stacked, any length simply wraps. */
.mosaic__cell figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;
  display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(180deg,transparent,rgba(8,8,9,.86));
  color:#fff;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.35;
  overflow-wrap:anywhere;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
/* the range is context for the name, so it sits back a little */
.mosaic__cell figcaption span + span{
  font-size:.54rem;letter-spacing:.1em;color:rgba(255,255,255,.62);
}
.mosaic__cell:hover figcaption{opacity:1;transform:none}
/* A touch screen has no hover, so the name only arrived after a tap — and
   tapping a photograph to find out what it is was work the visitor should not
   have to do. On a phone, and on anything else that cannot hover, the name and
   the range simply stay on the picture. */
@media (hover:none),(max-width:680px){
  .mosaic__cell figcaption{opacity:1;transform:none}
}
/* ---------- mosaic: cut short on a phone ----------
   Twenty-odd photographs is a long scroll on a small screen, so the grid is
   clipped to about two-thirds of the screen and opened by a button. The button
   only appears once the script has marked the section, so with no script the
   grid is simply whole. */
.mosaic__box{position:relative}
.mosaic__more{display:none}

@media(max-width:680px){
  .js-mosaic .mosaic__more{
    display:flex;align-items:center;justify-content:center;gap:12px;
    width:100%;margin-top:18px;padding:15px 20px;cursor:pointer;
    border:1px solid var(--line);background:transparent;color:var(--ink);
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .js-mosaic .mosaic__more:hover{border-color:var(--ink);background:var(--paper-2)}

  .is-clamped .mosaic{max-height:64vh;overflow:hidden}
  /* the cut is softened rather than sliced, so it reads as "there is more" */
  .is-clamped .mosaic__box::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--paper));
    pointer-events:none;
  }

  .mosaic__chev{
    width:9px;height:9px;flex-shrink:0;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .35s var(--ease);
  }
  /* pointing up again once everything is showing */
  .mosaic__more[aria-expanded="true"] .mosaic__chev{transform:translateY(2px) rotate(225deg)}
}


/* ==========================================================================
   Sticky process
   ========================================================================== */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.proc__sticky{position:sticky;top:calc(var(--hdr-h) + 4vh)}

/* The frame keeps its 4/5 crop but is never taller than the space left under
   the header, so the whole picture is on screen while the steps scroll past it
   and swap it. object-fit:cover absorbs the difference on short viewports. */
.proc__frame{
  position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;
  max-height:calc(100vh - var(--hdr-h) - 9vh);
  max-height:calc(100svh - var(--hdr-h) - 9vh);
}
.proc__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--ease), transform 1.4s var(--ease);
}
.proc__frame img.on{opacity:1;transform:scale(1)}
.proc__steps{display:grid}
.proc__step{
  padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line);
  opacity:.32;transition:opacity .55s var(--ease);
}
.proc__step.on{opacity:1}
.proc__step:first-child{padding-top:0}
/* Where the frame is sticky, each step is given a screenful of scroll of its
   own. Steps sized only by their text went past faster than their pictures
   could be looked at. The room under the last step keeps the frame stuck
   while step 04 is showing, instead of releasing the moment it lights up. */
@media(min-width:901px){
  .proc__steps{padding-bottom:40vh}
  .proc__step{min-height:46vh;display:flex;flex-direction:column;justify-content:center}
}
/* On a phone the two columns become one, and the picture pins under the
   header while the steps pass beneath it — so each step still arrives with
   its own photograph rather than one picture serving all four.
   The grid has to give way to a block: a sticky grid item can only travel
   inside its own row, which here is just the height of the picture. */
@media(max-width:900px){
  .proc{display:block}
  /* The picture pins as a band the full width of the screen, hard against
     the header. Inset, with a gap above it, it read as a card floating on
     top of the page — and the step labels showed through the gap. */
  /* Pinned at the very top with the header height as padding, rather than
     below the header: --hdr-h and the header as it actually renders differ
     by a few pixels here, and a step label showed through the gap. */
  .proc__sticky{
    top:0;z-index:2;
    background:var(--paper-2);
    padding:var(--hdr-h) 0 16px;
    margin-inline:calc(var(--gut) * -1);
  }
  /* a plain height, not a ratio: a capped ratio narrows the frame as well
     as shortening it, leaving a strip of background down one side */
  .proc__frame{aspect-ratio:auto;height:34vh;max-height:none}
  .proc__step{min-height:34vh;display:flex;flex-direction:column;justify-content:center}
  .proc__steps{padding-bottom:16vh}
}
.proc__n{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  color:var(--blue);display:block;margin-bottom:14px;
}
.proc__step h3{font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);color:var(--ink);margin-bottom:12px;line-height:1.1}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{background:var(--ink);color:#fff;text-align:center;overflow:hidden}
/* a dark section running straight into the dark call to action reads as one
   long black stretch; tighten the seam and mark it with a hairline */
.sec--dark + .cta{padding-top:clamp(48px,6vw,96px)}
.sec--dark + .cta::before{
  content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;
  height:1px;background:rgba(255,255,255,.13);
}
.cta .display{color:#fff}
.cta__sub{color:rgba(255,255,255,.62);margin:26px auto 44px;max-width:46ch}

.mag{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:22px 46px;border:1px solid rgba(255,255,255,.34);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;overflow:hidden;will-change:transform;
}
.mag::before{
  content:"";position:absolute;inset:0;background:#fff;
  transform:translateY(101%);transition:transform .55s var(--ease-io);z-index:-1;
}
.mag:hover{color:var(--ink);border-color:#fff}
.mag:hover::before{transform:translateY(0)}
.mag span{position:relative;z-index:1}
/* the same button on a light surface, such as the specification panel */
.mag--ink{
  border-color:var(--line);color:var(--ink);
  padding:18px 34px;font-size:.68rem;
}
.mag--ink::before{background:var(--ink)}
.mag--ink:hover{color:#fff;border-color:var(--ink)}

.btn-line{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding-bottom:5px;position:relative;
}
.btn-line::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform-origin:0 50%;transition:transform .5s var(--ease);
}
.btn-line:hover::after{transform:scaleX(0);transform-origin:100% 50%}
.btn-line i{transition:transform .45s var(--ease);font-style:normal}
.btn-line:hover i{transform:translateX(6px)}

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{background:var(--ink);color:rgba(255,255,255,.6);padding-block:clamp(50px,6vw,86px) 30px}
.ftr__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(26px,3vw,52px);
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.13);
}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:18px;font-weight:400;
}
.ftr__mark{font-family:var(--serif);font-size:1.9rem;color:#fff;line-height:1;margin-bottom:16px}
.ftr li{margin-bottom:10px}
.ftr a:hover{color:#fff}
.ftr address{font-style:normal;line-height:1.95}
.ftr__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ==========================================================================
   Reveal helpers
   ========================================================================== */
.up{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.up.in{opacity:1;transform:none}
.up[data-d="1"]{transition-delay:.08s}
.up[data-d="2"]{transition-delay:.16s}
.up[data-d="3"]{transition-delay:.24s}
.up[data-d="4"]{transition-delay:.32s}

/* Masked reveal.
   The clip lives on the children, never on .clip itself: an element whose own
   clip-path collapses it to nothing has no intersection area, so the observer
   that adds .in would never fire and the reveal could never start. */
.clip > *{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.clip.in > *{clip-path:inset(0 0 0 0)}

/* Fast scrolling.
   A one-second reveal is unnoticed work at reading pace and a second of blank
   section when the page is being thrown along. While the reader is moving
   fast the reveals are cut short and the staggered delays dropped, so a
   section has finished arriving by the time it is looked at. */
.is-fast .up,
.is-fast .up[data-d]{transition-duration:.24s;transition-delay:0s}
.is-fast .clip > *{transition-duration:.3s}
.is-fast .line > span,
.is-fast .line:nth-child(n) > span{transition-duration:.26s;transition-delay:0s}

/* Opened part way down the page: whatever is already behind the reader is
   simply present. There is no entrance left to play, so none is played. */
.up.is-ready,
.clip.is-ready > *,
.line.is-ready > span{transition:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .up,.clip > *,.line > span{opacity:1;transform:none;clip-path:none}
  .loader{display:none}
  .hero__media img{animation:none;transform:none}
  .rail__card:hover > a,.rail__card > a:focus-visible{transform:none}
}