/* ============================================================
   Standing content pages — about, who we serve, catalog, guide, faq.
   One page shape reused: a hero band, one or two body bands, the
   shared CTA. Nothing here invents a new section type.
   ============================================================ */
.subpage{ background: var(--void); }

.page-hero{
  position:relative; overflow:clip;
  padding-block: clamp(126px,17vh,206px) clamp(30px,4vh,54px);
}
.page-hero-wash{
  position:absolute; inset:-22% 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 48% at 78% 22%,
      color-mix(in oklab, var(--accent) 20%, transparent) 0%,
      color-mix(in oklab, var(--accent) 6%, transparent) 46%, transparent 74%),
    linear-gradient(180deg, var(--pitch) 0%, var(--void) 74%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-title{
  font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height:1.04; letter-spacing:-.03em; margin:0 0 24px; color: var(--bone);
}
.page-hero .sec-lede{ margin-top:0; }

/* ---------- prose ---------- */
.p-body{ padding-block: clamp(52px,8vh,104px); }
/* directly under the hero there is no colour change to justify the full
   band padding — only the two paddings, and they add up */
.page-hero + .p-body{ padding-top: clamp(34px,5vh,64px); }
.p-alt{ background: var(--pitch); }
/* Same trap .sec-head fell into: max-width on the element that is also
   .wrap means .wrap's margin-inline:auto centres the narrow box, and the
   prose ends up in the middle of the page while the page title sits at
   the gutter. The measure belongs on the text, not on the container. */
.p-col{ max-width: var(--wrap); }
/* 70ch was derived against Inter Tight, whose "0" is 8.44px at 17px.
   Manrope's is 10.31px, so the same 70ch renders 726px and the prose
   runs 74-94 characters per line — measured, not estimated. 55ch brings
   it back to ~68, which is where long-form reading wants to be. */
.p-col > *{ max-width:55ch; }
.p-h{
  font-family:var(--display);
  font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight:700; letter-spacing:-.02em;
  color:var(--bone); margin: clamp(38px,5vh,58px) 0 16px;
}
.p-h:first-child{ margin-top:0; }
.p-p{ font-size:1.0625rem; line-height:1.72; color:var(--ink-soft); margin:0 0 18px; }
.p-list{ list-style:none; margin:6px 0 22px; padding:0; }
.p-list li{
  position:relative; padding:11px 0 11px 24px; font-size:1.0625rem; line-height:1.6;
  color:var(--ink-soft); border-bottom:1px solid rgba(255,255,255,.05);
}
.p-list li::before{
  content:""; position:absolute; left:0; top:1.15em; width:10px; height:1px; background:var(--accent);
}
.p-list b{ color:var(--bone); font-weight:500; }
.p-note{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em;
  color:var(--ink-faint); margin:30px 0 0; padding-top:18px;
  border-top:1px solid var(--slate-lift);
}
.p-note a{ color:var(--accent); }

/* ---------- who we serve ---------- */
.seg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(12px,1.6vw,22px); }
.seg{
  background: linear-gradient(180deg, var(--slate), var(--pitch));
  border:1px solid var(--slate-lift); border-radius:4px; padding: clamp(20px,2vw,30px);
}
.seg h3{
  font-family:var(--display);
  font-size:1.2rem; font-weight:700; letter-spacing:-.015em; color:var(--bone); margin:0 0 12px;
}
.seg-who{ font-size:1rem; line-height:1.58; color:var(--ink-soft); margin:0 0 14px; }
.seg-run{ font-size:.9375rem; line-height:1.55; color:var(--ink-mid); margin:0 0 16px; }
.seg-note{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0;
  padding-top:14px; border-top:1px solid var(--slate-lift);
}

/* ---------- catalog ---------- */
.cat-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(12px,1.6vw,22px); }
/* seven in rows of three: the last card sits in the middle column */
.cat-cards > :nth-child(7):last-child{ grid-column:2; }
.cat-card{
  display:block; text-align:center; padding: clamp(22px,2.4vw,34px) 16px clamp(20px,2vw,28px);
  border:1px solid var(--slate-lift); border-radius:4px;
  background: linear-gradient(180deg, var(--slate), var(--pitch));
  transition: border-color .45s var(--ease-out), transform .5s var(--ease-soft);
}
/* Backlit, the way the product shot is lit: a tight white halo hugging the
   glass, a wider bloom in the blend's colour behind it, and a real shadow
   underneath so the bottle still sits on something.

   drop-shadow is the right tool HERE — unlike a light source placed behind
   an object, this halo is supposed to trace the silhouette, which is exactly
   what drop-shadow does and what a radial gradient cannot. */
.cat-card img{ width:52%; height:auto; margin:0 auto 18px;
  filter:
    drop-shadow(0 0 13px rgba(255,255,255,.40))
    drop-shadow(0 0 38px color-mix(in oklab, var(--glow, var(--g)) 60%, transparent))
    drop-shadow(0 18px 26px rgba(0,0,0,.72));
  animation: cat-drift 7.2s ease-in-out infinite;
  will-change: transform;
  transition: filter .5s var(--ease-out); }

/* Out of phase, so six bottles read as suspended rather than as one moving
   row. */
.cat-cards > *:nth-child(6n+2) img{ animation-delay:-1.2s; animation-duration:7.8s; }
.cat-cards > *:nth-child(6n+3) img{ animation-delay:-2.5s; animation-duration:6.9s; }
.cat-cards > *:nth-child(6n+4) img{ animation-delay:-3.6s; animation-duration:8.1s; }
.cat-cards > *:nth-child(6n+5) img{ animation-delay:-4.4s; animation-duration:7.4s; }
.cat-cards > *:nth-child(6n+6) img{ animation-delay:-5.7s; animation-duration:8.6s; }

@keyframes cat-drift{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-7px); }
}

@media (hover:hover) and (pointer:fine){
  .cat-card:hover img{
    filter:
      drop-shadow(0 0 18px rgba(255,255,255,.62))
      drop-shadow(0 0 54px color-mix(in oklab, var(--glow, var(--g)) 80%, transparent))
      drop-shadow(0 18px 26px rgba(0,0,0,.72));
    /* the lift is the card's job; two transforms on one element judder */
    animation-play-state: paused; }
  .cat-card:hover{ transform: translateY(-5px); }
}
@media (prefers-reduced-motion:reduce){ .cat-card img{ animation:none; } }
.cat-card b{
  display:block; font-family:var(--display);
  font-size:1.3rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bone);
}
.cat-card span{
  display:block; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--g,var(--accent)); margin-top:9px;
}
.cat-card em{
  display:block; font-family:var(--mono); font-style:normal; font-size:var(--t-micro);
  letter-spacing:.05em; color:var(--ink-faint); margin-top:12px;
  padding-top:12px; border-top:1px solid var(--slate-lift);
}
@media (hover:hover) and (pointer:fine){
  .cat-card:hover{ border-color: color-mix(in oklab, var(--g) 48%, var(--slate-lift));
                   transform: translateY(-3px); }
}

.cat-scroll{ overflow-x:auto; margin-top:26px; }
.cat-table{ width:100%; border-collapse:collapse; min-width:640px; }
.cat-table th{
  text-align:left; font-family:var(--mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  padding:0 16px 13px 0; border-bottom:1px solid var(--slate-lift); white-space:nowrap;
}
.cat-table td{ padding:17px 16px 17px 0; border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:top; }
.cat-name{
  font-family:var(--display);
  font-size:1.12rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase;
  color:var(--bone); display:block;
}
.cat-ep{ display:block; font-family:var(--display); font-size:.9375rem; font-weight:500;
  color:var(--ink-faint); margin-top:5px; }
.cat-dom{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--g,var(--accent)); }
.cat-formula{ font-family:var(--mono); font-size:.875rem; color:var(--ink-soft); }
.cat-fmt{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.cat-go a{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap; }

/* ---------- faq ---------- */
/* This page has no hero band: the title lives in the rail so the ruled
   rows have something opposite them. A 70ch column of full-width rules
   with the right half of the page empty reads as a layout that failed
   to load — prose gets away with it, rules do not. */
.faq-body{ padding-top: clamp(112px,15vh,180px); }
.faq-layout{
  display:grid; grid-template-columns: minmax(0,.68fr) minmax(0,1fr);
  gap: clamp(30px,5vw,92px); align-items:start;
}
.faq-rail{ position:sticky; top: clamp(96px,12vh,132px); }
.faq-rail-h{ font-size: clamp(2.4rem,4.4vw,4.1rem); letter-spacing:-.03em;
  line-height:1.04; margin:0 0 22px; color:var(--bone); }
.faq-rail-p{ font-size:1.0625rem; line-height:1.7; color:var(--ink-soft);
  max-width:34ch; margin:0 0 26px; }
.faq-rail-a{ display:inline-block; }

.faq-list{ list-style:none; margin:0; padding:0; }
.faq{ border-bottom:1px solid var(--slate-lift); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 0; display:flex;
  align-items:flex-start; justify-content:space-between; gap:22px;
  font-family:var(--display);
  font-size: clamp(1.06rem,1.6vw,1.3rem); font-weight:700; letter-spacing:-.015em; color:var(--bone);
  transition: color .3s var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary i{
  flex:none; width:15px; height:15px; margin-top:.4em; position:relative;
}
.faq summary i::before, .faq summary i::after{
  content:""; position:absolute; left:0; top:7px; width:15px; height:1px;
  background: var(--accent); transition: transform .38s var(--ease-soft);
}
.faq summary i::after{ transform: rotate(90deg); }
.faq[open] summary i::after, .faq details[open] summary i::after{ transform: rotate(0deg); }
.faq details[open] summary{ color: var(--accent); }
.faq p{
  margin:0; padding:0 46px 24px 0; max-width:58ch;
  font-size:1.0625rem; line-height:1.7; color:var(--ink-soft);
}
@media (hover:hover) and (pointer:fine){ .faq summary:hover{ color: var(--accent); } }

@media (max-width:1040px){
  .seg-grid, .cat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cat-cards > :nth-child(7):last-child{ grid-column:1 / -1; justify-self:center; width:calc((100% - clamp(12px,1.6vw,22px)) / 2); }
}
@media (max-width:900px){
  .faq-layout{ grid-template-columns:1fr; gap:34px; }
  .faq-rail{ position:static; }
  .faq-rail-p{ max-width:52ch; }
  .faq-body{ padding-top: clamp(96px,13vh,140px); }
}
@media (max-width:620px){
  .seg-grid, .cat-cards{ grid-template-columns:1fr; }
  .faq p{ padding-right:0; }
  .p-list li{ font-size:1rem; }
}