/* Grandma's Lids — site styles.
   Direction + rationale: ../brand/design-direction.md (2026-09-20).

   The motif is the SLOT: a hard dark bar, the one gesture the whole product is about.
   It marks sections, sits under the wordmark, and is the only place the design is loud.
   Colour comes off the real object — a 1970s orange cooler with a white ribbed top. */

:root{
  /* ground */
  --milk:#FBF6EC;        /* page */
  --milk-2:#F4ECDC;      /* tinted band */
  --milk-3:#EFE5D1;      /* recessed wells */

  /* the object */
  --jug:#E2611F;         /* cooler orange — fills + large display only */
  --jug-deep:#B4450F;    /* shadow side; button fill behind white */
  --jug-press:#8F3609;
  --jug-text:#97400E;    /* small orange text on milk */
  --lid:#F4F2ED;         /* screw top + lids — WHITE PLA, nudged just off pure white so the
                          slot and the form still read at thumbnail size (Tom, 2026-09-20;
                          re-confirmed 2026-10-02 10:30 over the same morning's orange-top-and-lids call) */
  --lid-edge:#B2AEA6;

  /* neutrals */
  --tin:#A8A296;         /* can-lid grey — the cool counterweight */
  --slot:#1E1711;        /* the slot, and headings */
  --ink:#241A10;
  --ink-soft:#6A5744;    /* body copy */
  --rule:rgba(36,26,16,.15);
  --rule-firm:rgba(36,26,16,.30);

  --measure:62ch;
  --pad:clamp(20px,4vw,30px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--milk);color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;}
p{margin:0;}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Figtree",sans-serif;
  font-weight:700;margin:0;line-height:1.04;letter-spacing:-.021em;color:var(--slot);
}
h1{font-size:clamp(36px,4.4vw,55px);letter-spacing:-.029em;}
h2{font-size:clamp(28px,3.6vw,43px);letter-spacing:-.026em;}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.014em;}

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad);}
.lede{font-size:clamp(18px,1.7vw,20.5px);color:var(--ink-soft);max-width:var(--measure);}
.body{color:var(--ink-soft);max-width:var(--measure);}
.muted{color:var(--ink-soft);}
.note{font-size:13.5px;color:var(--ink-soft);margin-top:12px;}
.center-block{text-align:center;}
.center-block .lede{margin-left:auto;margin-right:auto;}

/* ============ THE SLOT MOTIF ============
   Replaces the ALL-CAPS tracked eyebrow that used to sit above every heading. */
.slot-mark{display:block;width:54px;height:9px;border-radius:5px;background:var(--slot);margin-bottom:20px;}
.slot-mark.sm{width:38px;height:7px;margin-bottom:14px;}
.center-block .slot-mark{margin-left:auto;margin-right:auto;}
.label{font-size:14.5px;font-weight:600;color:var(--jug-text);margin-bottom:10px;}

/* ============ SKIP + FOCUS ============ */
.skip{position:absolute;left:-9999px;top:0;background:var(--slot);color:var(--milk);padding:11px 18px;z-index:80;border-radius:0 0 8px 0;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--jug-deep);outline-offset:3px;border-radius:3px;}

/* ============ NAV ============ */

.site-head{position:sticky;top:0;z-index:40;background:rgba(251,246,236,.93);backdrop-filter:blur(9px);border-bottom:1px solid var(--rule);}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px var(--pad);}

/* wordmark: Bricolage heavy + the slot bar. (The Caveat script mark is retired.) */
.logo{text-decoration:none;display:inline-block;line-height:1;}
.logo .mark{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:25px;
  letter-spacing:-.036em;color:var(--slot);display:block;
}
.logo .mark em{font-style:normal;color:var(--jug-text);}
.logo .bar{display:block;width:100%;height:6px;border-radius:3px;background:var(--slot);margin-top:5px;}
/* --tin is only 2.4:1 on milk; it is legible on the dark footer, not here */
.logo .sub{display:block;font-size:10px;font-weight:600;color:var(--ink-soft);margin-top:6px;letter-spacing:.06em;}

.navlinks{display:flex;gap:26px;align-items:center;font-weight:600;font-size:15.5px;}
.navlinks a{text-decoration:none;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;}
.navlinks a:hover{color:var(--slot);border-bottom-color:var(--rule-firm);}
.navlinks a[aria-current="page"]{color:var(--slot);border-bottom-color:var(--jug);}
.navlinks a.shopbtn{background:var(--jug-deep);color:#fff;border-radius:7px;padding:10px 20px;border-bottom:none;}
.navlinks a.shopbtn:hover{background:var(--jug-press);border-bottom-color:transparent;}
.navlinks a.shopbtn[aria-current="page"]{border-bottom-color:transparent;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--jug-deep);color:#fff;border:none;border-radius:8px;
  font-family:"Figtree",sans-serif;font-weight:700;font-size:16.5px;
  padding:15px 28px;text-decoration:none;cursor:pointer;
  transition:background .16s ease;
}
.btn:hover{background:var(--jug-press);}
.btn-ghost{background:transparent;color:var(--slot);border:2px solid var(--rule-firm);}
.btn-ghost:hover{background:var(--milk-2);border-color:var(--slot);color:var(--slot);}
.btn:disabled,.btn:disabled:hover{background:var(--tin);color:#fff;cursor:not-allowed;}

/* ============ PRE-ORDER BOX (shop) ============ */
.preorder{background:var(--milk-2);border-radius:12px;padding:20px 22px;margin-top:24px;}
.preorder .po-batch{color:var(--slot);font-size:16px;}
.preorder .po-count{color:var(--jug-text);font-weight:600;}
.preorder .po-ship{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;color:var(--slot);margin-top:6px;}
.preorder .btn{width:100%;}
.po-safety{color:var(--slot);font-weight:600;font-size:15.5px;margin-top:18px;max-width:var(--measure);}
.cta-row{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:30px;}
.center-block .cta-row{justify-content:center;}

/* ============ SECTIONS ============
   One padding rule plus modifiers, so .section and .tint can't cancel each other out. */
.section{padding:clamp(56px,7vw,92px) 0;}
.section.tight{padding:clamp(38px,4.5vw,58px) 0;}
.section.tint{background:var(--milk-2);}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center;}
.two.wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.two.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.stack>*+*{margin-top:18px;}

/* ============ HERO ============ */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,5vw,60px);
      align-items:center;padding:clamp(34px,5vw,60px) 0 clamp(46px,6vw,74px);}
.hero h1 em{font-style:normal;}
.hero .lede{margin-top:22px;}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-art .stage{
  width:100%;max-width:520px;aspect-ratio:1/1;
  background:radial-gradient(circle at 42% 38%, #FFFFFF 0%, var(--milk-2) 58%, var(--milk-3) 100%);
  border-radius:18px;display:flex;align-items:center;justify-content:center;padding:6%;
}
.hero-art svg{width:100%;height:auto;}
/* the hero now holds a photograph; the stage padding frames it */
.hero-art img{width:100%;height:100%;object-fit:cover;border-radius:12px;}

/* hand-set, not a rotated sticker pill */
.since{
  position:absolute;left:-6px;bottom:-14px;background:var(--jug);color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;
  padding:9px 15px;border-radius:7px;line-height:1.25;max-width:155px;letter-spacing:-.01em;
}

/* ============ TRUST STRIP ============ */
.trust{background:var(--slot);color:var(--milk);}
.trust-inner{display:flex;flex-wrap:wrap;gap:0;padding:0;list-style:none;margin:0;}
.trust-inner li{
  flex:1 1 auto;padding:17px 22px;font-size:14.5px;font-weight:600;
  border-left:1px solid rgba(251,246,236,.16);
}
.trust-inner li:first-child{border-left:none;padding-left:0;}
.trust-inner b{color:var(--jug);font-weight:700;}

/* ============ SPEC LIST (ruled, not a card) ============ */
.specs{margin:30px 0 0;border-top:2px solid var(--slot);}
.specs .row{display:flex;justify-content:space-between;align-items:baseline;gap:22px;
            padding:12px 0;border-bottom:1px solid var(--rule);}
.specs dt{font-weight:600;color:var(--slot);font-size:15px;}
.specs dd{margin:0;text-align:right;color:var(--ink-soft);font-size:15px;}

/* ============ PRICE ============ */
.pricebox{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin:30px 0 4px;}
.pricebox .amt{font-family:"Bricolage Grotesque",sans-serif;font-size:46px;font-weight:700;
               line-height:1;letter-spacing:-.035em;color:var(--slot);}
.pricebox .what{font-size:15px;color:var(--ink-soft);font-weight:600;}

/* ============ PRODUCT WELL ============
   Photo-shaped on purpose: when the orange set is printed and shot, a macro photo
   drops into this same box with no layout change. */
.well{
  background:radial-gradient(circle at 42% 38%, #FFFFFF 0%, var(--milk-2) 60%, var(--milk-3) 100%);
  border-radius:16px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:5%;overflow:hidden;
}
.well.square{aspect-ratio:1/1;}
.well svg{width:auto;height:100%;max-width:100%;}
.well img{width:100%;height:100%;object-fit:contain;}
/* a real photograph fills the box instead of fitting inside it */
.well img.fill{object-fit:cover;border-radius:16px;}
.section.tint .well{background:radial-gradient(circle at 42% 38%, #FFFFFF 0%, var(--milk) 60%, var(--milk-2) 100%);}

/* ============ THE LOOP (replaces 01 / 02 / 03 / 04) ============
   The content returns to where it started, so it is drawn as a loop that closes. */
.loop{margin-top:38px;}
.loop-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--slot);}
.loop-step{padding:22px 26px 26px 26px;border-right:1px solid var(--rule);min-width:0;}
.loop-step:first-child{padding-left:0;}
.loop-step:last-child{border-right:none;padding-right:0;}
.loop-step .tick{display:block;width:30px;height:7px;border-radius:4px;background:var(--jug);margin-bottom:15px;}
.loop-step:last-child .tick{background:var(--tin);}
.loop-step h3{margin-bottom:7px;overflow-wrap:break-word;hyphens:auto;}
.loop-step p{font-size:15px;color:var(--ink-soft);}
.loop-return{
  display:flex;align-items:center;gap:13px;padding:14px 0 0;
  border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink-soft);font-weight:600;
}
.loop-return svg{flex:none;}

/* ============ STICKER PREVIEWS — every sticker is shown on a lid ============
   One disc, two sizes: the letters preview (128px, letter + picture) and the pack chips (92px).
   A blank white lid is the thing the sticker actually goes on, so any pack reads on any lid colour. */
.sound .lid,.chip .disc{
  position:relative;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle at 38% 32%,#FDFDFD 0%,var(--lid) 58%,#DEDBD5 100%);
  border:1px solid var(--lid-edge);
  display:flex;align-items:center;justify-content:center;
}
.sound .lid::after,.chip .disc::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(178,174,166,.55);pointer-events:none;}

.soundgrid{display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;}
.sound{text-align:center;width:128px;}
.sound .lid{width:128px;height:128px;flex-direction:column;gap:1px;}
.sound .lid::after{inset:9px;}
.sound .ltr{font-family:"Bricolage Grotesque",sans-serif;font-size:34px;font-weight:700;
            line-height:1;color:var(--slot);letter-spacing:-.04em;margin:0;}
.sound .art{display:flex;justify-content:center;margin:2px 0 0;}
.sound .art svg{width:40px;height:40px;}
.sound .obj{font-weight:700;font-size:15.5px;color:var(--slot);margin-top:12px;}
.sound .say{font-size:14px;color:var(--ink-soft);margin-top:2px;}

.stickers{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;}
.center-block .stickers{justify-content:center;}
.chip{text-align:center;}
.chip .disc{width:92px;height:92px;}
.chip .lbl{margin-top:11px;font-weight:600;font-size:14.5px;color:var(--ink-soft);}
.chip.lead .disc{box-shadow:0 0 0 3px var(--jug);}
.chip.lead .lbl{color:var(--jug-text);font-weight:700;}
.disc-letter{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:38px;
             color:var(--slot);letter-spacing:-.04em;line-height:1;}

/* ============ COMING SOON (sticker packs, batch 2) ============
   A rubber stamp over the corner of the preview, never over the copy that explains it.
   Uses --jug-text (orange, 6:1+ on milk and milk-2) so it reads at any size. */
.stamp-host{position:relative;}
.stamp-host.fit{display:inline-block;max-width:100%;}
.stamp-host.fit .stamp{top:12px;right:-22px;}
.stamp{
  position:absolute;top:-40px;right:0;z-index:2;
  transform:rotate(-8deg);transform-origin:center;
  border:3px solid var(--jug-text);border-radius:10px;
  background:var(--milk);color:var(--jug-text);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.1;white-space:nowrap;
  padding:8px 14px;box-shadow:inset 0 0 0 2px var(--milk),inset 0 0 0 3px var(--jug-text);
  pointer-events:none;
}
.section.tint .stamp{background:var(--milk-2);box-shadow:inset 0 0 0 2px var(--milk-2),inset 0 0 0 3px var(--jug-text);}
.soon-line{color:var(--slot);font-weight:600;font-size:15.5px;margin-top:14px;max-width:var(--measure);}
/* ============ PROMISES (two plain columns split by a rule) ============ */
.promises{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border-top:2px solid var(--slot);}
.promise{padding:26px 34px 6px 0;border-right:1px solid var(--rule);}
.promise:last-child{border-right:none;padding-right:0;padding-left:34px;}
.promise h3{margin-bottom:9px;}
.promise p{font-size:15.5px;color:var(--ink-soft);}

/* ============ SHOP PACK GRID ============ */
.packs{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:34px;}
.pack{display:flex;flex-direction:column;}
.pack .disc-wrap{background:var(--milk-2);border-radius:12px;padding:22px;display:flex;
                 align-items:center;justify-content:center;margin-bottom:15px;}
.section.tint .pack .disc-wrap{background:var(--milk);}
.pack h3{font-size:18px;margin-bottom:6px;}
.pack p{font-size:14.5px;color:var(--ink-soft);flex:1;}
.pack .price{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;
             color:var(--slot);margin:12px 0;letter-spacing:-.025em;}
.pack .btn{width:100%;font-size:15px;padding:12px;}
/* not yet commissioned — shown so the range reads, but never priced or buyable */
.pack.soon .disc-wrap{opacity:.5;}
.pack .soon-note{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;
                 color:var(--ink-soft);margin-top:12px;padding-top:13px;border-top:1px solid var(--rule);}
.chip.soon .disc{opacity:.5;}
.chip .soon-tag{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:3px;}

/* ============ TIMELINE (story) ============ */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:2px solid var(--slot);}
.tl{padding:22px 26px 8px 26px;border-right:1px solid var(--rule);min-width:0;}
.tl:first-child{padding-left:0;}
.tl:last-child{border-right:none;padding-right:0;}
.tl .yr{font-size:13.5px;font-weight:700;color:var(--jug-text);margin-bottom:9px;}
.tl h3{margin-bottom:7px;overflow-wrap:break-word;hyphens:auto;}
.tl p{font-size:15px;color:var(--ink-soft);}

/* ============ STORY CARD ============ */
.storycard{background:var(--milk);border-left:6px solid var(--jug);
           padding:clamp(28px,4vw,44px);border-radius:0 12px 12px 0;}
.storycard p+p{margin-top:15px;}
.storycard .sig{margin-top:22px;font-weight:700;color:var(--slot);font-size:16px;}

/* photo placeholder — honest about being empty */
.photo-ph{
  aspect-ratio:4/3;border:2px dashed var(--rule-firm);border-radius:14px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px;color:var(--ink-soft);font-size:15px;font-weight:600;background:var(--milk-2);
}

/* ============ PAGE HEAD (inner pages) ============ */
.page-head{padding:clamp(40px,5vw,66px) 0 clamp(10px,1.5vw,18px);}
.page-head+.section{padding-top:clamp(34px,4vw,54px);}
.page-head p{color:var(--ink-soft);font-size:clamp(17px,1.6vw,19.5px);max-width:var(--measure);margin-top:16px;}

/* ============ VIDEO ============ */
figure{margin:0;}
.story-video video{width:100%;border-radius:14px;display:block;background:var(--milk-3);}
figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:12px;}

/* ============ FORM ============ */
.field{margin-bottom:17px;}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--slot);}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1.5px solid var(--rule-firm);border-radius:8px;
  font-family:"Figtree",sans-serif;font-size:16px;background:var(--milk);color:var(--ink);
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--jug-deep);outline:none;}

.panel{background:var(--milk-2);border-radius:14px;padding:clamp(24px,3.4vw,34px);}
.section.tint .panel{background:var(--milk);}

/* ============ FOOTER ============ */
.site-foot{background:var(--slot);color:#CDBFA9;padding:52px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start;}
.site-foot .logo .mark{color:var(--milk);}
.site-foot .logo .mark em{color:var(--jug);}
.site-foot .logo .bar{background:var(--jug);}
.site-foot .logo .sub{color:var(--tin);}
.fine{display:block;font-size:13.5px;margin-top:16px;max-width:46ch;line-height:1.55;}
.foot-links{display:flex;flex-direction:column;gap:11px;font-size:15px;}
.foot-links a{text-decoration:none;color:#CDBFA9;}
.foot-links a:hover{color:var(--milk);}

/* ============ MOTION ============
   One orchestrated moment: a lid falls once and goes through the slot.
   Nothing else on the page moves. */
#glLidDrop{animation:lidDrop 1.5s cubic-bezier(.34,.8,.42,1) .45s both;}
@keyframes lidDrop{
  0%   {transform:translate(200px,-66px);opacity:0;}
  20%  {opacity:1;}
  100% {transform:translate(200px,76.1px);opacity:1;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  #glLidDrop{animation:none;transform:translate(200px,76.1px);}
  *{transition:none!important;}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .packs{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:34px;}
  .hero-art{order:-1;}
  .hero-art .stage{max-width:390px;}
  .two,.two.wide-right,.two.wide-left{grid-template-columns:1fr;}
  .loop-track{grid-template-columns:1fr 1fr;}
  .loop-step{padding:20px 24px 22px 24px;}
  .loop-step:nth-child(2n+1){padding-left:0;}
  .loop-step:nth-child(2n){border-right:none;padding-right:0;}
  .loop-step:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .timeline{grid-template-columns:1fr 1fr;}
  .tl{padding:20px 24px 10px 24px;}
  .tl:nth-child(2n+1){padding-left:0;}
  .tl:nth-child(2n){border-right:none;padding-right:0;}
  .tl:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .promises{grid-template-columns:1fr;}
  .promise{border-right:none;padding:22px 0;border-bottom:1px solid var(--rule);}
  .promise:last-child{padding-left:0;border-bottom:none;}
  .foot-grid{grid-template-columns:1fr;}
  .trust-inner li{flex:1 1 44%;border-left:none;padding-left:0;}
  /* below two-column width the stamp joins the flow above the preview, so it can't sit on a card or the copy */
  .stamp{position:static;display:inline-block;margin:24px 0 -10px 4px;font-size:13.5px;white-space:normal;}
}
@media(max-width:620px){
  body{font-size:16.5px;}
  .packs{grid-template-columns:repeat(2,1fr);}
  .navlinks{gap:16px;font-size:14.5px;}
  .navlinks a:not(.shopbtn){display:none;}
  .site-nav{padding:13px var(--pad);}
  .specs .row{flex-direction:column;gap:2px;}
  .specs dd{text-align:left;}
  /* going static makes .since a flex sibling of .stage, so stack the column */
  .hero-art{flex-direction:column;align-items:center;}
  .since{position:static;margin-top:14px;max-width:none;display:inline-block;}
}
@media(max-width:430px){
  .packs{grid-template-columns:1fr;}
  .loop-track{grid-template-columns:1fr;}
  .loop-step,.loop-step:first-child,.loop-step:nth-child(2n+1){border-right:none;border-bottom:1px solid var(--rule);padding:18px 0;}
  .loop-step:last-child{border-bottom:none;}
  .timeline{grid-template-columns:1fr;}
  .tl,.tl:first-child,.tl:nth-child(2n+1){border-right:none;border-bottom:1px solid var(--rule);padding:18px 0;}
  .tl:last-child{border-bottom:none;}
}

/* ============ FAQ ============ */
.faq{margin-top:34px;border-top:2px solid var(--slot);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 40px 17px 0;position:relative;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17.5px;
  color:var(--slot);letter-spacing:-.014em;
}
.faq summary::-webkit-details-marker{display:none;}
/* the marker is the slot again — it turns upright when the answer opens */
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:19px;height:5px;border-radius:3px;
  background:var(--jug);transform:translateY(-50%);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);}
.faq summary:hover{color:var(--jug-text);}
.faq details p{padding:0 40px 20px 0;color:var(--ink-soft);font-size:16px;max-width:var(--measure);}

/* ============ FORM LAYOUT ============ */
.form .field:last-of-type{margin-bottom:22px;}
.form .btn{width:100%;}