/* ============================================================
   PUBLIC PAGES - the sections added on top of the kraft poster
   system in base.css. Same tokens, same ink borders, same offset
   shadows; nothing here redefines a colour or a font.
   ============================================================ */

/* ---------- header: a menu for phones, which had none ---------- */
.menu-btn{display:none;align-items:center;gap:8px;margin-left:10px;padding:10px 14px;border:1.5px solid var(--ink);
  border-radius:999px;background:var(--paper);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);cursor:pointer}
.menu-btn,.menu-btn:hover{box-shadow:none;transform:none}
.menu-btn span{width:14px;height:10px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);position:relative}
.menu-btn span::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--ink)}
#top nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
@media (max-width:720px){
  .menu-btn{display:inline-flex}
  #top nav.open{display:flex;position:fixed;left:0;right:0;top:64px;flex-direction:column;gap:0;margin:0;
    background:var(--paper);border-bottom:1.5px solid var(--ink);padding:6px var(--pad) 16px;box-shadow:0 12px 30px rgba(36,29,22,.12)}
  #top nav.open a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:.72rem}
  #top nav.open a:last-child{border-bottom:0}
  #top .pill.outline{padding:10px 12px}
}
html.app-mode .menu-btn{display:none}
/* a phone is 375 px wide: the wordmark gives way before the buttons do */
@media (max-width:420px){
  #top{gap:8px}
  #top .wm{font-size:.62rem;letter-spacing:.07em;gap:6px}
  #top .wm .logomark{height:26px}
  #top .pill.outline{padding:9px 11px;font-size:.58rem}
  .menu-btn{margin-left:0;padding:9px 11px}
}
@media (max-width:350px){#top .wm{font-size:0;gap:0}}

/* ---------- page frame ---------- */
body.content-page{background:var(--paper)}
main.cp{display:block;padding-top:64px}
.cp section{padding:clamp(60px,8vw,112px) var(--pad);position:relative}
.cp .wrap{max-width:1180px;margin:0 auto}
.cp h1,.cp h2{font-family:var(--slab);font-weight:400;line-height:1.04;letter-spacing:0;margin:0;text-wrap:balance}
.cp h1{font-size:clamp(2.3rem,5.4vw,4.5rem)}
.cp h2{font-size:clamp(1.8rem,3.8vw,3rem);max-width:22ch}
.cp h3{font-size:1.02rem;font-weight:700;margin:0;line-height:1.3}
.cp p{margin:0;line-height:1.62}
.cp .sub{color:var(--soft);max-width:60ch;margin-top:16px;font-size:1.02rem}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.tone-card{background:var(--card)}
.tone-green{background:var(--green);color:var(--paper)}
.tone-green .sub,.tone-green p{color:rgba(244,239,231,.82)}
.tone-green .eyebrow{color:var(--gold)}
.tone-gold{background:var(--gold)}
.tone-gold .eyebrow{color:var(--ink)}
.rule-top{border-top:1.5px solid var(--ink)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* ---------- hero: words on one side, the picture framed on the other ---------- */
.cp-hero{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding-top:clamp(40px,6vw,80px)!important}
.cp-hero .lede{color:var(--soft);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:46ch;margin-top:20px}
.cp-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn.quiet{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.btn.quiet:hover{background:var(--card)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding:0;list-style:none}
.facts li{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:999px;padding:7px 11px;background:var(--paper)}
.frame{position:relative;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--card);
  box-shadow:7px 7px 0 var(--ink)}
.frame img,.frame video{display:block;width:100%;height:100%;object-fit:cover}
.cp-hero .frame{aspect-ratio:4/3.3}
.frame .tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:6px 10px}
.hero-art{background:var(--kraft);display:grid;place-items:center;padding:clamp(18px,4vw,40px)}
.hero-art .art{width:100%;max-width:440px;height:auto}
@media (max-width:900px){
  .cp-hero{grid-template-columns:1fr}
  .cp-hero .frame{aspect-ratio:4/3}
}

/* ---------- full-bleed photo or video band ---------- */
.band{padding:0!important;position:relative;height:clamp(300px,52vw,620px);overflow:hidden;border-block:1.5px solid var(--ink)}
.band img,.band video{position:absolute;inset:0;width:100%;height:calc(100% + 90px);object-fit:cover;
  transform:translate3d(0,calc(var(--p,0.5) * -90px),0)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,29,22,0) 35%,rgba(36,29,22,.72))}
.band .cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vw,48px);z-index:1;color:var(--paper);max-width:760px;text-shadow:0 1px 14px rgba(36,29,22,.6)}
.band .cap h2{color:var(--paper);font-family:var(--slab);font-weight:400;line-height:1.04;font-size:clamp(1.7rem,3.8vw,3.1rem);max-width:18ch;text-wrap:balance;margin:0}
.band .cap p{margin-top:12px;color:rgba(244,239,231,.88);max-width:52ch}

/* ---------- numbered problem cards ---------- */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pain{background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease,box-shadow .25s ease}
.pain:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ink)}
.pain .n{font-family:var(--slab);font-size:1.4rem;color:var(--gold)}
.pain p{color:var(--soft);font-size:.92rem}
.pain .fix{margin-top:auto;padding-top:12px;border-top:1px dashed var(--board-edge);color:var(--green);font-size:.86rem}
.pain .fix b{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px}
@media (max-width:900px){.pains{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pains{grid-template-columns:1fr}}

/* ---------- a service day, as a timeline ---------- */
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.day::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:rgba(244,239,231,.25)}
.day::after{content:"";position:absolute;left:0;top:15px;height:2px;background:var(--gold);width:calc(var(--p,1) * 100%)}
.day li{position:relative;padding:44px 18px 0 0}
.day li::before{content:"";position:absolute;top:8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--green);
  border:2px solid var(--gold);z-index:1}
.day time{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:8px}
.day h3{color:var(--paper);margin-bottom:8px}
.day p{font-size:.88rem}
@media (max-width:900px){
  .day{grid-template-columns:1fr;padding-left:28px}
  .day::before,.day::after{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .day::after{height:calc(var(--p,1) * 100%)}
  .day li{padding:0 0 32px 0}
  .day li::before{left:-28px;top:2px}
}

/* ---------- products for this trade ---------- */
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.kit a{text-decoration:none;color:inherit}
.kit-item{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;height:100%;
  transition:transform .25s ease,box-shadow .25s ease}
.kit a:hover .kit-item,.kit-item:hover{transform:translate(-2px,-4px);box-shadow:6px 7px 0 var(--ink)}
.kit-item .pic{background:var(--kraft);border-bottom:1.5px solid var(--ink);padding:14px;display:grid;place-items:center;aspect-ratio:4/3}
.kit-item .pic .art{width:100%;height:100%}
.kit-item .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.kit-item .size{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--green)}
.kit-item p{color:var(--soft);font-size:.88rem}
.kit-item .go{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* ---------- die-line with room for the logo ---------- */
.brand-it{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.brand-it .sheet{background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;padding:clamp(14px,3vw,28px);box-shadow:7px 7px 0 var(--ink)}
.brand-it .sheet svg{width:100%;height:auto;display:block}
.brand-it ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.brand-it li{padding-left:26px;position:relative;line-height:1.55}
.brand-it li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border:2px solid var(--green);border-radius:2px;transform:rotate(45deg)}
@media (max-width:900px){.brand-it{grid-template-columns:1fr}}

/* ---------- what it replaces ---------- */
.swap{display:grid;gap:14px}
.swap-row{display:grid;grid-template-columns:minmax(0,.9fr) 40px minmax(0,1.4fr);align-items:center;gap:16px;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:20px 22px}
.swap-row .from{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.swap-row .from b{display:block;color:var(--ink);font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;margin-top:4px;
  text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:2px}
.swap-row .arrow{width:40px;height:40px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.swap-row p{color:var(--soft);font-size:.92rem}
@media (max-width:700px){.swap-row{grid-template-columns:1fr}.swap-row .arrow{transform:rotate(90deg)}}

/* ---------- sample, proof, production: a day chart ---------- */
.plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plan .step-card{flex-direction:column;background:var(--paper);border-style:solid;border-color:var(--ink)}
.plan .when{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.gantt{margin-top:34px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);padding:22px 22px 16px}
.gantt .row-g{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin-bottom:12px}
.gantt .row-g span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.gantt .track{position:relative;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/30 - 1px),var(--rule) calc(100%/30 - 1px) calc(100%/30))}
.gantt .bar{position:absolute;top:2px;bottom:2px;left:calc(var(--s) / 30 * 100%);width:calc(var(--d) / 30 * 100%);border-radius:4px;
  background:var(--green);transform-origin:left;transform:scaleX(var(--g,1));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gantt .bar.gold{background:var(--gold)}
.gantt .bar.kraft{background:var(--kraft)}
.gantt .scale{display:grid;grid-template-columns:150px 1fr;gap:14px;font-family:var(--mono);font-size:.58rem;color:var(--soft)}
.gantt .scale div{display:flex;justify-content:space-between}
.gantt .note{margin-top:12px;font-size:.8rem;color:var(--soft)}
@media (max-width:900px){.plan{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.plan{grid-template-columns:1fr}.gantt .row-g,.gantt .scale{grid-template-columns:92px 1fr}}

/* ---------- spec tables ---------- */
.spec-wrap{border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}
.spec{width:100%;border-collapse:collapse;font-size:.92rem}
.spec th,.spec td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.spec thead th{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;background:var(--card);border-bottom:1.5px solid var(--ink)}
.spec tbody tr:last-child td,.spec tbody tr:last-child th{border-bottom:0}
.spec td.num{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.spec .std{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--green);color:var(--paper);border-radius:999px;padding:3px 7px;vertical-align:2px}
@media (max-width:700px){
  .spec,.spec tbody{display:block;width:100%}
  .spec td.num{white-space:normal}
  .spec thead{display:none}
  .spec tr{display:block;padding:12px 16px;border-bottom:1px solid var(--rule)}
  .spec th,.spec td{display:block;padding:3px 0;border:0}
  .spec td[data-l]::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
}

/* ---------- facts grid (material, print, minimums) ---------- */
.facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fact{border-top:2px solid var(--gold);padding-top:16px}
.fact h3{margin-bottom:8px}
.fact p{color:var(--soft);font-size:.92rem}
.tone-green .fact p{color:rgba(244,239,231,.82)}
@media (max-width:900px){.facts-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.facts-grid{grid-template-columns:1fr}}

/* ---------- counting numbers ---------- */
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
@media (max-width:760px){.stats-row{grid-template-columns:1fr 1fr}}

/* ---------- food it suits ---------- */
.suits{display:flex;flex-wrap:wrap;gap:10px}
.suits span{border:1.5px solid var(--ink);border-radius:999px;padding:9px 14px;background:var(--paper);font-size:.9rem}

/* ---------- FAQ ---------- */
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 4px;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink) center/10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%23f4efe7' stroke-width='1.6'/%3E%3C/svg%3E");
  transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px;color:var(--soft);max-width:72ch;line-height:1.65}
.faq .a p+p{margin-top:10px}
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px)}
@media (max-width:900px){.faq-split{grid-template-columns:1fr}}
.faq-group+.faq-group{margin-top:clamp(48px,7vw,88px)}

/* ---------- longer copy: about, and the legal pages ---------- */
.prose-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px)}
@media (max-width:900px){.prose-split{grid-template-columns:1fr}}
.prose{max-width:66ch}
.prose h3{font-family:var(--slab);font-weight:400;font-size:1.3rem;margin:28px 0 8px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--soft);line-height:1.7}
.legal-doc{max-width:74ch}
.legal-doc h1{font-family:var(--slab);font-weight:400;font-size:clamp(2rem,4.6vw,3rem);line-height:1.05;margin:14px 0 8px}
.legal-doc .upd{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-on-light);display:block;margin-bottom:32px}
.legal-doc h2{font-size:1.08rem;font-weight:700;margin:32px 0 8px}
.legal-doc p,.legal-doc li{color:var(--soft);line-height:1.7}
.legal-doc ul{padding-left:20px;margin:8px 0}
.legal-doc a{color:var(--green)}

/* ---------- quote form on every page ---------- */
.quote{background:var(--gold);border-top:1.5px solid var(--ink)}
.quote .enq-grid{max-width:1180px;margin:0 auto}
.quote h2{max-width:14ch}
.quote .enq-left p{margin-top:16px;max-width:42ch}
.quote .enq-left ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.quote form{display:flex;flex-direction:column;gap:14px}
.quote button[type=submit]{align-self:flex-start;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--green);color:var(--paper);border:0;border-radius:999px;padding:16px 28px;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
.quote button[type=submit]:disabled{opacity:.6;cursor:wait}
.quote .sent{font-size:.92rem}

/* ---------- home: who it's for, a sideways strip ---------- */
/* each home section paints its own ground, or the fixed factory scene shows
   through behind the words */
main.home .who{background:var(--card);border-top:1.5px solid var(--ink)}
main.home .home-faq{background:var(--paper);border-top:1.5px solid var(--ink)}
main.home .who h2,main.home .home-faq h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:18ch;text-wrap:balance}
main.home .home-faq .sub a{color:var(--green)}
.who{padding-right:0!important}
.who .sec-head{padding-right:var(--pad)}
.who-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,28vw,340px);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px var(--pad) 22px 4px;scrollbar-width:thin;overscroll-behavior-x:contain;
  /* room above and below for cards flying in, without a vertical scrollbar */
  overflow-y:hidden;padding-top:34px;margin-top:-30px}
.who-strip a{scroll-snap-align:start;text-decoration:none;color:inherit}
.who-card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease}
.who-strip a:hover .who-card,.who-strip a:focus-visible .who-card{--hx:-2px;--hy:-4px;box-shadow:6px 7px 0 var(--ink)}
.who-card .pic{aspect-ratio:4/3.2;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.who-card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.who-strip a:hover .who-card .pic img{transform:scale(1.04)}
.who-card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.who-card h3{font-family:var(--slab);font-weight:400;font-size:1.25rem}
.who-card p{color:var(--soft);font-size:.88rem}
.who-card .go{margin-top:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.strip-nav{display:flex;gap:8px;margin-top:6px}
.strip-nav button{width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  cursor:pointer;font:600 1.05rem/1 var(--sans);letter-spacing:0;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.strip-nav button:hover{background:var(--card);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* ---------- home: range cards lift and link ---------- */
#range .cards a{text-decoration:none;color:inherit;display:block;height:100%}
#range .cards a .card{height:100%;transition:transform .25s ease,box-shadow .25s ease}
#range .cards a:hover .card,#range .cards a:focus-visible .card{--hx:-2px;--hy:-4px;box-shadow:6px 7px 0 var(--ink)}
#range .card .more{margin-top:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* ---------- home: the fold, step by step ---------- */
.fold-rail{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:clamp(16px,3vh,30px);margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;pointer-events:none;opacity:0;transition:opacity .4s ease}
.fold-rail.show{opacity:1}
.fold-rail li{border-top:3px solid rgba(36,29,22,.16);padding-top:8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);transition:border-color .3s ease,color .3s ease}
.fold-rail li b{display:block;font-family:var(--slab);font-weight:400;font-size:.95rem;letter-spacing:0;color:inherit;margin-bottom:2px}
.fold-rail li.done{border-top-color:var(--gold);color:var(--ink)}
.fold-rail li.now{border-top-color:var(--green);color:var(--ink)}
@media (max-width:760px){
  .fold-rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .fold-rail li{font-size:0;padding-top:0}
  .fold-rail li b{display:none}
  .fold-rail .count{display:block}
}
.fold-count{display:none;position:absolute;z-index:4;right:var(--pad);bottom:calc(clamp(16px,3vh,30px) + 12px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);pointer-events:none}
@media (max-width:760px){.fold-count.show{display:block}}
html.reduced .fold-rail,html.reduced .fold-count{display:none}

/* ---------- appear on scroll ---------- */
/* Hidden only once the script has taken charge. With no script, a blocked
   observer or reduced motion, everything is simply there. */
html.rv-on [data-reveal]:not(.rv-in){opacity:0}
html.rv-on [data-reveal="up"]:not(.rv-in){transform:translate3d(0,28px,0)}
html.rv-on [data-reveal="scale"]:not(.rv-in){transform:scale(.94)}
html.rv-on [data-reveal="left"]:not(.rv-in){transform:translate3d(-28px,0,0)}
html.rv-on [data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0ms)}

/* ---------- boxes that fly in: The range and Who it's for ----------
   Each card has its own path (--fx, --fy, --fr, --fry below). It lands with a
   small overshoot, and only then does what is on it arrive, piece by piece. */
html.rv-on [data-reveal="fly"]:not(.rv-in){opacity:0;
  transform:perspective(900px) translate3d(var(--fx,0),var(--fy,70px),0) rotate(var(--fr,0deg)) rotateY(var(--fry,0deg)) scale(.9)}
html.rv-on [data-reveal="fly"]{transition:opacity .55s ease,transform 1.05s cubic-bezier(.18,1.22,.32,1);transition-delay:var(--rv-d,0ms)}
#range,main.home .who,#lines{overflow-x:clip}    /* a card on its way in never widens the page */
/* the four lines on /products fly in the same way as The range */
.hub-lines>a{text-decoration:none;color:inherit}
.hub-lines>a:nth-child(1){--fx:-150px;--fy:90px;--fr:-9deg}
.hub-lines>a:nth-child(2){--fx:-50px;--fy:150px;--fr:-4deg}
.hub-lines>a:nth-child(3){--fx:50px;--fy:150px;--fr:4deg}
.hub-lines>a:nth-child(4){--fx:150px;--fy:90px;--fr:9deg}
@media (max-width:900px){
  .hub-lines>a:nth-child(odd){--fx:-120px;--fy:60px;--fr:-7deg}
  .hub-lines>a:nth-child(even){--fx:120px;--fy:60px;--fr:7deg}
}
/* the trade cards on /for: whole card is the link, flies in like the range */
.trade-cards>a{text-decoration:none;color:inherit;display:block}
.trade-cards>a .pain{height:100%;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.trade-cards>a .pain .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.trade-cards>a:hover .pain,.trade-cards>a:focus-visible .pain{--hx:-2px;--hy:-4px;box-shadow:6px 7px 0 var(--ink)}
.trade-cards>a:nth-child(3n+1){--fx:-140px;--fy:70px;--fr:-7deg}
.trade-cards>a:nth-child(3n+2){--fx:0px;--fy:130px;--fr:3deg}
.trade-cards>a:nth-child(3n){--fx:140px;--fy:70px;--fr:7deg}
@media (max-width:900px){
  .trade-cards>a:nth-child(odd){--fx:-120px;--fy:60px;--fr:-6deg}
  .trade-cards>a:nth-child(even){--fx:120px;--fy:60px;--fr:6deg}
}
.cat-ph{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* The range: the outer two cross in from the corners, the middle two rise */
#range .cards>a:nth-child(1){--fx:-150px;--fy:90px;--fr:-9deg}
#range .cards>a:nth-child(2){--fx:-50px;--fy:150px;--fr:-4deg}
#range .cards>a:nth-child(3){--fx:50px;--fy:150px;--fr:4deg}
#range .cards>a:nth-child(4){--fx:150px;--fy:90px;--fr:9deg}
@media (max-width:900px){
  #range .cards>a:nth-child(odd){--fx:-120px;--fy:60px;--fr:-7deg}
  #range .cards>a:nth-child(even){--fx:120px;--fy:60px;--fr:7deg}
}
/* what is on a range card: icon spins up, words slide in after it */
#range .card>:nth-child(1){--i:0}#range .card>:nth-child(2){--i:1}#range .card>:nth-child(3){--i:2}
#range .card>:nth-child(4){--i:3}#range .card>:nth-child(5){--i:4}#range .card>:nth-child(6){--i:5}
html.rv-on #range .cards>a[data-reveal="fly"] .card>*{transition:opacity .45s ease,transform .65s cubic-bezier(.2,1.3,.35,1);
  transition-delay:calc(var(--rv-d,0ms) + 420ms + var(--i,0) * 70ms)}
html.rv-on #range .cards>a[data-reveal="fly"]:not(.rv-in) .card>*{opacity:0;transform:translate3d(0,14px,0)}
html.rv-on #range .cards>a[data-reveal="fly"]:not(.rv-in) .card>svg{transform:scale(.3) rotate(-30deg)}
/* Who it's for: in from the right like boxes down a line, turning as they come */
.who-strip>a:nth-child(odd){--fx:170px;--fy:26px;--fr:3deg;--fry:-30deg}
.who-strip>a:nth-child(even){--fx:170px;--fy:-22px;--fr:-3deg;--fry:-30deg}
.who-card .body>:nth-child(1){--i:0}.who-card .body>:nth-child(2){--i:1}.who-card .body>:nth-child(3){--i:2}
/* the photo settles from a close-up (scale, so the hover zoom keeps its own transform) */
html.rv-on .who-strip>a[data-reveal="fly"] .pic img{transition:transform .6s ease,scale 1.6s cubic-bezier(.2,.7,.2,1);
  transition-delay:0s,calc(var(--rv-d,0ms) + 150ms)}
html.rv-on .who-strip>a[data-reveal="fly"]:not(.rv-in) .pic img{scale:1.35}
html.rv-on .who-strip>a[data-reveal="fly"] .body>*{transition:opacity .45s ease,transform .6s cubic-bezier(.2,1.2,.35,1);
  transition-delay:calc(var(--rv-d,0ms) + 480ms + var(--i,0) * 80ms)}
html.rv-on .who-strip>a[data-reveal="fly"]:not(.rv-in) .body>*{opacity:0;transform:translate3d(26px,0,0)}
/* pointer tilt (site.js sets --rx/--ry on the card); the hover lift rides along */
[data-tilt] .card,[data-tilt] .who-card,[data-tilt] .kit-item,[data-tilt] .pain{
  transform:perspective(800px) translate(var(--hx,0),var(--hy,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.kit[data-tilt] a:hover .kit-item,.kit[data-tilt] a:focus-visible .kit-item{--hx:-2px;--hy:-4px;
  transform:perspective(800px) translate(var(--hx),var(--hy)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
@media (prefers-reduced-motion: reduce){
  html.rv-on [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .band img,.band video{transform:none}
  .who-card .pic img,.pain,.kit-item,.who-card{transition:none}
  #range .card>*,.who-card .body>*,.who-card .pic img{opacity:1!important;transform:none!important;scale:none!important;transition:none!important}
  [data-tilt] .card,[data-tilt] .who-card,[data-tilt] .kit-item,[data-tilt] .pain{transform:none}
}
.cp :focus-visible,.who-strip a:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- five-column footer for the bigger site ---------- */
.site-foot .fgrid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
.site-foot .fgrid a{display:block}
.site-foot .fgrid .btn{display:inline-block;margin-top:18px}
@media (max-width:900px){.site-foot .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-foot .fgrid{grid-template-columns:1fr}}
/* a portrait photo must not stretch the card: the picture takes the frame's shape */
.kit-item .pic{overflow:hidden;min-height:0}
.kit-item .pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* reduced motion: the fold is shown as still frames. They sat behind the fixed
   factory scene and were never seen; lift them above it on a paper ground. */
html.reduced #stills{position:relative;z-index:2;margin:0;background:var(--paper);padding-top:clamp(28px,4vw,48px)}

/* ---------- legible small labels ----------
   The brand gold stays on buttons, shadows and fills. Small label text in gold
   read at 2.8:1 on paper and 3.3:1 on green, under the 4.5:1 that small text
   needs, so labels take a deeper gold on light grounds and a lighter one on
   green. Same hue, measured, not a new colour. */
:root{--gold-on-light:#81612d;--gold-on-green:#c9a364}
body.content-page .eyebrow,main.home .eyebrow,#fold .eyebrow,.pain .n{color:var(--gold-on-light)}
body.content-page .tone-green .eyebrow,.day time,main.home #board .eyebrow{color:var(--gold-on-green)}
.quote .eyebrow,.enq-left .eyebrow{color:var(--ink)}
.site-foot .fbottom{color:var(--kraft)}
/* the "mm" beside the big tolerance figure is small text on green */
main.home #board .stat b small{color:var(--gold-on-green)}
/* the hero's paper glow helps the headline over the 3D scene, but on the green
   button it haloes the letters; the button needs no help */
#fold .hero .btn{text-shadow:none}

/* ---------- home: a video under the fold ----------
   Sits above the fixed factory scene and below the transparent fold canvas.
   Full strength at the top; it steps back as the walls start to rise, so the
   folding box keeps the clean ground it was built on. */
/* the kitchen video: the first screen of the page, under the factory line
   (#line), which is cut away over it. It scrolls off like any picture; its
   last 90px fade into the floor (the line's script feathers the floor over
   the same band). */
.hero-media{position:absolute;top:0;left:0;right:0;height:100vh;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 90px), transparent);mask-image:linear-gradient(#000 calc(100% - 90px), transparent)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* nothing behind the words, not even a glow: only the words, each letter
   ringed with a tight paper halo so it reads over the video */
#fold .hero::before{content:none}
#fold .hero{text-shadow:0 0 1px var(--paper),0 0 3px var(--paper),0 0 7px var(--paper),0 0 14px rgba(244,239,231,.9),0 0 26px rgba(244,239,231,.7)}
#fold .hero p{color:var(--ink);font-size:1.02rem;font-weight:500}
#fold .hero .eyebrow{color:var(--gold-on-light);font-weight:700}
#fold .hero .scrollcue{font-weight:700}
@media (max-width:760px){
}
html.app-mode .hero-media,html.page-open .hero-media{display:none}

/* home: a way from each section to its own page */
main.home .more-link{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
main.home #board .more-link{display:block;width:max-content;color:var(--gold-on-green)}
main.home .more-link:hover{color:var(--ink)}
main.home #board .more-link:hover{color:var(--paper)}
main.home #process .step-card a{color:var(--green);font-weight:600}