/* =========================================================
   Senon Package — "flat to form"
   palette / type / layout tokens
   ========================================================= */
:root{
  --ink:        #08222F;
  --ink-2:      #0C2E3E;
  --ink-deep:   #05161F;
  --paper:      #F2EFE6;
  --bone:       #FBFAF5;
  --gold:       #C9A25A;
  --gold-lite:  #D9B766;
  --blue:       #0078C0;
  --kraft:      #DCCBAE;

  --line-dark:  rgba(242,239,230,.16);
  --line-light: rgba(8,34,47,.14);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(.2,.75,.25,1);
  --nav-h: 84px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 8px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ list-style:none; padding:0 }

::selection{ background:var(--gold); color:var(--ink) }

.mono{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.13em;
  font-weight:400;
  text-transform:lowercase;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:300;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font-family:var(--mono); font-size:12px;
}
.skip:focus{ top:12px }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}
.section--ink :focus-visible,
.section--kraft :focus-visible,
.foot :focus-visible{ outline-color:var(--gold-lite) }

/* ============ buttons & links ============ */
.btn{
  --btn-bg: var(--gold-lite);
  --btn-fg: var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:15px 24px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  border-radius:2px;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .35s;
  will-change:transform;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease) }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(0,0,0,.6) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:11px 18px; font-size:13.5px }
.btn--gold{ background:var(--gold-lite); color:var(--ink) }

.link-arrow{
  position:relative; font-weight:600; font-size:15px;
  padding-bottom:4px; color:inherit;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; opacity:.4;
  transform-origin:right; transform:scaleX(1);
  transition:transform .4s var(--ease), opacity .3s;
}
.link-arrow:hover::after{ opacity:1; transform:scaleX(.55); transform-origin:left }

/* ============ nav ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:color .35s;
}
/* the frosted bar lives on its own layer: backdrop-filter on .nav itself would
   become the containing block for the fixed mobile panel and clip it to 84px */
.nav::before{
  content:""; position:absolute; inset:0 0 -1px 0; z-index:-1;
  background:rgba(242,239,230,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid transparent;
  opacity:0;
  transition:opacity .4s, border-color .4s;
}
.nav__inner{
  height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  transition:height .4s var(--ease);
}
.nav__brand{ position:relative; display:block; width:142px; flex:none }
.nav__brand img{
  width:142px; height:auto; transition:opacity .35s;
}
.nav__brand img:last-child{ position:absolute; top:0; left:0; opacity:0 }
.nav__links{
  display:flex; align-items:center; gap:clamp(16px,2.2vw,34px);
  margin-left:auto;
}
.nav__links a{
  position:relative; font-size:14px; font-weight:500; letter-spacing:-.005em;
  padding:6px 0; opacity:.82; transition:opacity .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-current{ opacity:1 }
.nav__links a:hover::after,
.nav__links a.is-current::after{ transform:scaleX(1) }

.nav__cta{
  background:transparent; color:inherit;
  border:1px solid currentColor; padding:11px 18px; font-size:13.5px;
}
.nav__cta:hover{ background:var(--gold-lite); border-color:var(--gold-lite); color:var(--ink); box-shadow:none }

body:not(.is-scrolled) .nav{ color:var(--paper) }
body:not(.is-scrolled) .nav__brand img:first-child{ opacity:0 }
body:not(.is-scrolled) .nav__brand img:last-child{ opacity:1 }

body.is-scrolled .nav{ color:var(--ink) }
body.is-scrolled .nav::before{
  opacity:1;
  border-bottom-color:var(--line-light);
}
body.is-scrolled .nav__inner{ height:68px }

.nav__toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  position:relative; flex:none;
}
.nav__toggle span{
  position:absolute; left:11px; width:22px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease), opacity .2s;
}
.nav__toggle span:first-child{ top:18px }
.nav__toggle span:last-child{ top:25px }

.nav__panel{ display:none }

/* ============ hero ============ */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding-top:calc(var(--nav-h) + clamp(24px,6vh,72px));
  padding-bottom:clamp(48px,8vh,96px);
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(242,239,230,.055) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(242,239,230,.045) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(120% 90% at 55% 40%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 55% 40%, #000 35%, transparent 100%);
  pointer-events:none;
  animation:gridDrift 46s linear infinite;
}
@keyframes gridDrift{
  to{ background-position:84px 84px }
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
  width:100%;
}
.hero__copy{ grid-column:1 / span 6; position:relative; z-index:3 }

.kicker{
  color:var(--gold-lite);
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(20px,3vh,34px);
}
.kicker::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.7;
}

.hero__title{
  font-size:clamp(2.5rem, 1.15rem + 4.4vw, 4.3rem);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:800;
  font-stretch:112%;
  margin-bottom:clamp(22px,3.4vh,38px);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em }
.hero__title .line > span{
  display:block;
  transform:translateY(110%);
  animation:riseIn 1.05s var(--ease) forwards;
}
.hero__title .line:nth-child(2) > span{ animation-delay:.09s }
.hero__title .line:nth-child(3) > span{ animation-delay:.18s }
@keyframes riseIn{ to{ transform:translateY(0) } }

.hero__lede{
  max-width:46ch;
  font-size:clamp(1rem,.94rem + .35vw,1.15rem);
  line-height:1.62;
  color:rgba(242,239,230,.76);
  opacity:0; animation:fadeUp .9s var(--ease) .5s forwards;
}
.hero__actions{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(26px,4vh,42px);
  opacity:0; animation:fadeUp .9s var(--ease) .62s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,44px);
  margin-top:clamp(34px,6vh,62px);
  padding-top:22px;
  border-top:1px solid var(--line-dark);
  opacity:0; animation:fadeUp .9s var(--ease) .76s forwards;
}
.hero__facts dt{ color:rgba(242,239,230,.5); margin-bottom:4px }
.hero__facts dd{
  font-family:var(--sans); font-size:1.05rem; font-weight:600;
  letter-spacing:-.01em; color:var(--gold-lite);
}

/* hero stage — paper sheet + dieline + product */
.hero__stage{
  grid-column:7 / span 6;
  position:relative;
  min-height:clamp(380px,58vh,600px);
  display:grid; place-items:center;
  opacity:0; animation:fadeUp 1s var(--ease) .25s forwards;
}
.dieline{
  position:absolute;
  left:-5%; top:-1%;
  height:110%; width:auto;
  max-width:none;
  opacity:.95;
}
.dieline path{ fill:none; stroke:var(--gold); }
.dl-cut path{
  stroke-width:1.5; stroke-linejoin:round;
  stroke-dasharray:1600; stroke-dashoffset:1600;
  animation:drawLine 1.7s cubic-bezier(.45,.05,.25,1) forwards .35s;
}
.dl-cut path:nth-child(2){ animation-delay:.45s }
.dl-cut path:nth-child(3){ animation-delay:.55s }
.dl-cut path:nth-child(4){ animation-delay:.62s }
.dl-cut path:nth-child(5){ animation-delay:.69s }
.dl-cut path:nth-child(6){ animation-delay:.76s }
.dl-cut path:nth-child(n+7){ animation-delay:.83s }
.dl-fold path{
  stroke-width:.9; stroke-dasharray:4 5; opacity:0;
  animation:fadeIn .9s ease forwards 1.25s;
}
.dl-marks path{
  stroke-width:1; opacity:0;
  animation:fadeIn 1s ease forwards 1.5s;
}
@keyframes drawLine{ to{ stroke-dashoffset:0 } }
@keyframes fadeIn{ to{ opacity:.78 } }

.prod{
  position:absolute; z-index:2;
  right:1%; bottom:2%;
  width:90%;
  opacity:0;
  transform:translateY(24px);
  animation:prodIn 1.2s var(--ease) .8s forwards;
}
.prod__frame{
  position:relative;
  aspect-ratio:662/567;
}
.prod__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.5));
  opacity:0;
  transform:translateY(22px) scale(.99);
  pointer-events:none;
  transition:opacity .38s ease, transform .5s var(--ease);
}
.prod__slide.is-active{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease) .16s, transform 1s var(--ease) .16s;
}
.prod__slide.is-leaving{
  opacity:0;
  transform:translateY(-12px) scale(1.008);
  transition:opacity .3s ease, transform .45s var(--ease);
}
.prod__cap{
  transition:opacity .45s ease;
}
.prod__cap.is-swapping{ opacity:0 }
@keyframes prodIn{ to{ transform:none; opacity:1 } }
.prod__cap{
  margin-top:20px;
  color:rgba(242,239,230,.42);
  display:flex; align-items:center; gap:10px;
}
.prod__cap::before{ content:""; width:22px; height:1px; background:currentColor; flex:none }

.hero__ann{
  position:absolute; left:0; top:-1.5%;
  color:rgba(242,239,230,.55);
  display:flex; align-items:center; gap:10px;
  opacity:0; animation:fadeIn .9s ease forwards 1.7s;
}
.hero__ann::before{ content:""; width:26px; height:1px; background:currentColor }

.scroll-hint{
  position:absolute; left:var(--gut); bottom:26px; z-index:3;
  display:flex; align-items:center; gap:10px;
  color:rgba(242,239,230,.42);
  transition:color .3s;
}
.scroll-hint:hover{ color:var(--gold-lite) }
.scroll-hint span{
  display:block; width:1px; height:26px; background:currentColor;
  transform-origin:top; animation:scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{ transform:scaleY(.35); opacity:.5 }
  50%{ transform:scaleY(1); opacity:1 }
}

/* ============ back to top ============ */
.totop{
  position:fixed; right:clamp(18px,3vw,36px); bottom:clamp(18px,3vw,36px);
  z-index:90;
  display:flex; align-items:center; gap:8px;
  padding:10px 14px 10px 12px;
  background:var(--ink); color:var(--paper);
  border:1px solid rgba(201,162,90,.45);
  box-shadow:0 0 0 1px rgba(242,239,230,.26), 0 16px 34px -16px rgba(4,16,24,.72);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s,
             background .25s, color .25s, border-color .25s;
}
.totop svg{ display:block }
.totop .mono{ font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.totop:hover{
  background:var(--gold); border-color:var(--gold); color:var(--ink);
  transform:translateY(-2px);
}
.totop.is-on{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
.totop:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
body.is-menu-open .totop{ opacity:0; visibility:hidden; pointer-events:none }

/* ============ section shells ============ */
.section{ position:relative; padding-block:clamp(72px,11vh,148px) }
.section--paper{ background:var(--paper); color:var(--ink) }
.section--ink{ background:var(--ink); color:var(--paper) }
.section--kraft{ background:var(--kraft); color:var(--ink) }

.shead{ max-width:920px; margin-bottom:clamp(40px,6vh,76px) }
.shead__label{ color:var(--blue); margin-bottom:22px }
.section--ink .shead__label,
.section--kraft .shead__label{ color:var(--gold) }
.shead__title{
  font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem);
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:800;
  font-stretch:108%;
}
.shead__note{
  margin-top:24px;
  max-width:52ch;
  font-size:1.02rem;
  line-height:1.66;
  color:rgba(8,34,47,.72);
}
.section--ink .shead__note{ color:rgba(242,239,230,.66) }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }

/* ============ company ============ */
.about{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.about__body p{
  font-size:1.02rem; line-height:1.72;
  color:rgba(8,34,47,.78);
  max-width:62ch;
  margin-bottom:1.15em;
}
.about__body .about__lead{
  font-size:clamp(1.2rem,.98rem + .8vw,1.55rem);
  line-height:1.48;
  letter-spacing:-.02em;
  color:var(--ink);
  font-weight:500;
  margin-bottom:1.3em;
}
.about__quote{
  margin-top:clamp(30px,5vh,52px);
  padding-left:clamp(18px,2vw,26px);
  border-left:2px solid var(--gold);
}
.about__quote blockquote{
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  line-height:1.4; letter-spacing:-.02em; font-weight:600;
}
.about__quote figcaption{
  margin-top:12px; color:rgba(8,34,47,.45);
}

.about__side{
  position:sticky; top:calc(68px + 40px);
  display:grid; gap:clamp(24px,4vh,40px);
}
.certs{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,32px);
  padding:26px 0;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.certs img{ height:44px; width:auto; opacity:.9 }

.credlist{ display:grid; gap:18px }
.credlist li{
  display:grid; grid-template-columns:80px 1fr; gap:16px;
  align-items:baseline;
}
.credlist .mono{ color:var(--blue); padding-top:2px }
.credlist p{ font-size:.95rem; line-height:1.55; color:rgba(8,34,47,.75) }

.about__thumb{ position:relative }
.about__thumb img{
  width:100%; height:auto;
  mix-blend-mode:multiply;
  transition:transform .8s var(--ease);
}
.about__thumb:hover img{ transform:scale(1.02) }
.about__thumb figcaption{
  margin-top:12px; color:rgba(8,34,47,.45);
}

/* ============ packaging catalog ============ */
.catalog{ overflow:hidden }
.cat__grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(242,239,230,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(242,239,230,.04) 0 1px, transparent 1px 96px);
  mask-image:linear-gradient(180deg, #000, transparent 92%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 92%);
}
.cat{
  position:relative;
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.cat__list{ order:1; border-top:1px solid rgba(242,239,230,.18) }
.cat__stage{ order:2 }

.cat__row{
  width:100%;
  display:grid; grid-template-columns:38px 1fr 20px;
  align-items:center; gap:14px;
  padding:clamp(14px,1.7vw,20px) 0;
  border-bottom:1px solid rgba(242,239,230,.14);
  color:rgba(242,239,230,.62);
  text-align:left;
  transition:color .3s, padding-left .4s var(--ease);
}
.cat__row .idx{ color:rgba(242,239,230,.34); transition:color .3s }
.cat__row .name{
  font-size:clamp(1.05rem,.92rem + .55vw,1.42rem);
  font-weight:600; letter-spacing:-.02em;
  font-stretch:104%;
}
.cat__row .arw{
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s, transform .4s var(--ease);
  color:var(--gold-lite);
}
.cat__row:hover,
.cat__row:focus-visible,
.cat__row.is-active{ color:var(--paper) }
.cat__row:hover .idx,
.cat__row.is-active .idx{ color:var(--gold-lite) }
.cat__row:hover{ padding-left:6px }
.cat__row.is-active .arw{ opacity:1; transform:none }

.cat__stage{ position:relative; padding-bottom:8px }
.cat__img{
  position:relative;
  width:auto; max-width:100%;
  max-height:min(50vh,470px);
  margin:0 auto;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));
  transition:opacity .3s ease, transform .55s var(--ease);
  transform:scale(1);
}
.cat__img.is-swap{ opacity:0; transform:scale(.97) translateY(6px) }

.cat__caption{ margin-top:clamp(18px,3vh,30px) }
.cat__name{
  font-size:1.45rem; font-weight:700; letter-spacing:-.025em;
  margin-bottom:10px;
}
.cat__desc{
  max-width:44ch; font-size:.97rem; line-height:1.62;
  color:rgba(242,239,230,.62);
}
.cat__spec{ margin-top:14px; color:var(--gold) }

.cat__more{
  margin-top:clamp(56px,9vh,100px);
  padding-top:clamp(28px,4vh,40px);
  border-top:1px solid rgba(242,239,230,.16);
  display:grid; grid-template-columns:150px 1fr 220px;
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.cat__more-label{ color:var(--gold) }
.cat__more-list{
  display:flex; gap:clamp(16px,2.4vw,32px); flex-wrap:wrap;
}
.cat__more-list li{
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-start;
}
.cat__more-list img{
  height:76px; width:auto; opacity:.86;
  transition:opacity .3s, transform .5s var(--ease);
}
.cat__more-list li:hover img{ opacity:1; transform:translateY(-3px) }
.cat__more-list span{ color:rgba(242,239,230,.42) }
.cat__more-note{ font-size:.86rem; line-height:1.6; color:rgba(242,239,230,.45) }

/* ============ finishing ============ */
.craft__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.craft__media{
  position:sticky; top:calc(68px + 32px);
  aspect-ratio:4/3.15;
  background:var(--bone);
  overflow:hidden;
  max-height:420px;
}
.craft__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .35s ease, transform .8s var(--ease);
}
.craft__media img.is-swap{ opacity:0; transform:scale(1.04) }
.craft__corner{
  position:absolute; left:14px; bottom:12px;
  color:var(--ink); background:rgba(251,250,245,.86);
  padding:4px 8px; letter-spacing:.1em;
}

.craft__list{ border-top:1px solid var(--line-light) }
.craft__item{ border-bottom:1px solid var(--line-light) }
.craft__head{
  width:100%; display:grid; grid-template-columns:34px 1fr 22px;
  align-items:center; gap:12px;
  padding:20px 0; text-align:left;
}
.craft__no{ color:rgba(8,34,47,.34); transition:color .3s }
.craft__name{
  font-size:clamp(1.02rem,.9rem + .5vw,1.24rem);
  font-weight:600; letter-spacing:-.02em;
  transition:color .3s;
}
.craft__sign{
  position:relative; width:12px; height:12px; justify-self:end;
}
.craft__sign::before,
.craft__sign::after{
  content:""; position:absolute; top:5.5px; left:0; width:12px; height:1.4px;
  background:var(--ink); transition:transform .4s var(--ease), background .3s;
}
.craft__sign::after{ transform:rotate(90deg) }
.craft__item.is-open .craft__sign::after{ transform:rotate(0) }
.craft__item.is-open .craft__sign::before,
.craft__item.is-open .craft__sign::after{ background:var(--gold) }
.craft__item.is-open .craft__no{ color:var(--blue) }
.craft__item.is-open .craft__name{ color:var(--ink) }
.craft__head:hover .craft__name{ color:var(--blue) }

.craft__panel{
  max-height:0; overflow:hidden;
  transition:max-height .5s var(--ease);
}
.craft__panel-inner{
  padding:0 0 22px 46px;
  max-width:48ch;
}
.craft__panel-inner p{
  font-size:.97rem; line-height:1.65; color:rgba(8,34,47,.76);
}
.craft__tag{ margin-top:12px; color:var(--gold); letter-spacing:.08em }

/* ============ process ============ */
.process{ overflow:hidden }
.process__head{
  display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:clamp(32px,6vw,72px);
  align-items:end;
  margin-bottom:clamp(44px,7vh,76px);
}
.shead--flush{ margin-bottom:0 }
.proc-dieline{ margin:0; padding-bottom:6px }
.proc-dieline svg{ width:100%; height:auto; overflow:visible }
.pd-cut{
  fill:none; stroke:var(--ink); stroke-width:1.05; stroke-linejoin:round;
  opacity:.42;
  stroke-dasharray:1500; stroke-dashoffset:1500;
}
.proc-dieline.is-in .pd-cut{ animation:drawLine 1.8s var(--ease) .2s forwards }
.pd-fold{ fill:none; stroke:var(--ink); stroke-width:.7; opacity:.22; stroke-dasharray:3 4 }
.proc-dieline figcaption{
  margin-top:14px; color:rgba(8,34,47,.45);
  display:flex; align-items:center; gap:8px;
}
.proc-dieline figcaption::before{ content:""; width:18px; height:1px; background:currentColor }

.process__track{
  position:relative;
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(16px,2vw,32px);
  padding-top:34px;
}
.process__line{
  position:absolute; top:4px; left:0; right:0; height:1px;
  background:rgba(8,34,47,.22);
}
.process__line i{
  position:absolute; inset:0;
  background:var(--gold);
  transform:scaleX(var(--p,0));
  transform-origin:left center;
  transition:transform .12s linear;
}
.step{ position:relative; padding-top:0 }
.step__dot{
  position:absolute; top:0; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--kraft);
  border:1px solid rgba(8,34,47,.5);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.step.is-lit .step__dot{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(201,162,90,.18);
}
.step__meta{
  margin-top:26px; color:rgba(8,34,47,.5);
  display:flex; gap:10px; align-items:baseline;
}
.step__no{ color:var(--ink); font-weight:500 }
.step__title{
  margin-top:10px;
  font-size:1.06rem; font-weight:700; letter-spacing:-.02em;
}
.step__desc{
  margin-top:8px;
  font-size:.88rem; line-height:1.6;
  color:rgba(8,34,47,.66);
  max-width:26ch;
}
.process__foot{
  margin-top:clamp(40px,6vh,64px);
  padding-top:22px;
  border-top:1px solid rgba(8,34,47,.16);
  color:rgba(8,34,47,.5);
}

/* ============ contact ============ */
.contact{ overflow:hidden }
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,92px);
  align-items:start;
}
.contact__copy .shead__label{ color:var(--gold); margin-bottom:22px }
.contact__title{
  font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);
  line-height:.98; letter-spacing:-.04em; font-weight:800;
  font-stretch:108%;
}
.contact__lede{
  margin-top:22px; max-width:44ch;
  font-size:1rem; line-height:1.65; color:rgba(242,239,230,.66);
}
.contact__address{
  margin-top:clamp(32px,5vh,52px);
  display:grid; gap:6px;
  font-style:normal;
}
.contact__address .mono{ color:var(--gold); margin-top:16px }
.contact__address p{ font-size:.98rem; line-height:1.55 }
.contact__address p:first-of-type{ margin-top:0 }
.contact__address a{
  border-bottom:1px solid rgba(242,239,230,.25);
  transition:border-color .3s, color .3s;
}
.contact__address a:hover{ color:var(--gold-lite); border-color:var(--gold) }

.form{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,24px);
  padding-top:6px;
}
.field{ display:grid; gap:8px }
.field--full{ grid-column:1 / -1 }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; color:rgba(242,239,230,.58) }
.field input,
.field textarea,
.field select{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid rgba(242,239,230,.26);
  color:var(--paper);
  font-family:var(--sans); font-size:1rem;
  padding:10px 0 12px;
  border-radius:0;
  transition:border-color .3s, background .3s;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(242,239,230,.28) }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.6 }
.field.invalid input{ border-bottom-color:#E0684B }

.select{ position:relative }
.select::after{
  content:""; position:absolute; right:2px; top:50%;
  width:7px; height:7px; margin-top:-6px;
  border-right:1px solid rgba(242,239,230,.6);
  border-bottom:1px solid rgba(242,239,230,.6);
  transform:rotate(45deg);
  pointer-events:none;
}
.field select{ appearance:none; -webkit-appearance:none; padding-right:24px }
.field select option{ background:var(--ink); color:var(--paper) }

.form__foot{
  grid-column:1 / -1;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px; margin-top:14px;
}
.form__note{ color:rgba(242,239,230,.45); max-width:34ch }
.form__note.is-ok{ color:var(--gold-lite) }

/* ============ footer ============ */
.foot{
  background:var(--ink-deep); color:rgba(242,239,230,.6);
  padding-block:clamp(40px,6vh,64px);
}
.foot__inner{
  display:grid;
  grid-template-columns:1.1fr auto auto;
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
.foot__brand img{ width:124px; height:auto; margin-bottom:18px }
.foot__brand .mono{ color:rgba(242,239,230,.34) }
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.9rem }
.foot__nav a{ transition:color .25s }
.foot__nav a:hover{ color:var(--gold-lite) }
.foot__certs{ display:flex; gap:18px; align-items:center }
.foot__certs img{ height:28px; width:auto; opacity:.7 }
.foot__legal{
  grid-column:1 / -1;
  padding-top:24px; margin-top:8px;
  border-top:1px solid rgba(242,239,230,.1);
  color:rgba(242,239,230,.3);
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1180px){
  .hero__title{ font-size:clamp(2.4rem,1rem + 5.6vw,4.6rem) }
  .cat__more{ grid-template-columns:120px 1fr }
  .cat__more-note{ grid-column:2 }
}

@media (max-width:1024px){
  .nav__links{ display:none }
  .nav__cta{ display:none }
  .nav__toggle{ display:block }

  .nav__inner{ position:relative; z-index:3 }
  .nav__panel{
    position:fixed; inset:0; z-index:2;
    background:var(--paper); color:var(--ink);
    padding:calc(var(--nav-h) + 20px) var(--gut) calc(36px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; justify-content:flex-start;
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .32s var(--ease), visibility .32s;
  }
  .nav__panel a{
    font-size:clamp(1.6rem,5.4vw,2.2rem);
    font-weight:700; letter-spacing:-.03em; line-height:1.1;
    padding:14px 0; border-bottom:1px solid var(--line-light);
  }
  .nav__panel a:last-child{ border-bottom:0 }
  body:not(.is-scrolled) .nav.is-open,
  body.is-scrolled .nav.is-open{ color:var(--ink) }
  .nav.is-open .nav__brand img:first-child{ opacity:1 }
  .nav.is-open .nav__brand img:last-child{ opacity:0 }
  .nav.is-open .nav__panel{ opacity:1; visibility:visible; pointer-events:auto }
  .nav.is-open .nav__toggle span:first-child{ transform:translateY(3.5px) rotate(45deg) }
  .nav.is-open .nav__toggle span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

  .hero{
    min-height:auto;
    padding-top:calc(var(--nav-h) + clamp(14px,3.5vh,44px));
    padding-bottom:56px;
  }
  .hero__inner{ grid-template-columns:1fr; gap:0 }
  .hero__copy{ display:contents }
  .kicker{ order:1 } .hero__title{ order:2 } .hero__lede{ order:3 }
  .hero__actions{ order:4 } .hero__stage{ order:5 } .hero__facts{ order:6 }
  .hero__stage{ grid-column:1; min-height:0; margin-top:clamp(32px,8vw,52px) }
  .hero__facts{ margin-top:clamp(28px,6vw,40px) }
  .hero__ann{ left:0 }
  .prod{ position:relative; right:auto; bottom:auto; width:min(86%,460px); margin:0 auto }
  .scroll-hint{ display:none }

  .about{ grid-template-columns:1fr; gap:44px }
  .about__side{ position:static }
  .about__thumb{ max-width:520px }

  .cat{ grid-template-columns:1fr; gap:28px; align-items:start }
  .cat__stage{
    order:0; position:sticky; top:calc(68px + 12px);
    z-index:2;
    background:linear-gradient(180deg, var(--ink) 78%, rgba(8,34,47,0));
    padding-top:6px;
  }
  .cat__img{ max-height:min(30vh,260px) }
  .cat__caption{ margin-top:14px; padding-bottom:12px }
  .cat__name{ font-size:1.2rem; margin-bottom:6px }
  .cat__desc{ font-size:.9rem; max-width:56ch }
  .cat__spec{ margin-top:8px }
  .cat__list{ order:1 }
  .cat__plate{ display:none }

  .cat__more{ grid-template-columns:1fr; gap:20px }
  .cat__more-note{ grid-column:1 }

  .craft__grid{ grid-template-columns:1fr; gap:28px }
  .craft__media{ position:relative; top:0; max-height:340px; aspect-ratio:16/10 }
  .craft__panel-inner{ padding-left:0 }

  .process__head{
  display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:clamp(32px,6vw,72px);
  align-items:end;
  margin-bottom:clamp(44px,7vh,76px);
}
.shead--flush{ margin-bottom:0 }
.proc-dieline{ margin:0; padding-bottom:6px }
.proc-dieline svg{ width:100%; height:auto; overflow:visible }
.pd-cut{
  fill:none; stroke:var(--ink); stroke-width:1.05; stroke-linejoin:round;
  opacity:.42;
  stroke-dasharray:1500; stroke-dashoffset:1500;
}
.proc-dieline.is-in .pd-cut{ animation:drawLine 1.8s var(--ease) .2s forwards }
.pd-fold{ fill:none; stroke:var(--ink); stroke-width:.7; opacity:.22; stroke-dasharray:3 4 }
.proc-dieline figcaption{
  margin-top:14px; color:rgba(8,34,47,.45);
  display:flex; align-items:center; gap:8px;
}
.proc-dieline figcaption::before{ content:""; width:18px; height:1px; background:currentColor }

.process__track{ grid-template-columns:1fr; gap:0; padding-top:0; padding-left:26px }
  .process__line{ top:0; bottom:0; right:auto; left:4px; width:1px; height:auto }
  .process__line i{ transform:scaleY(var(--p,0)); transform-origin:top center }
  .step{ padding:0 0 clamp(28px,5vw,40px) 0 }
  .step__dot{ top:8px; left:-26px }
  .step__meta{ margin-top:0 }
  .step__desc{ max-width:44ch }

  .contact__grid{ grid-template-columns:1fr; gap:44px }
  .foot__inner{ grid-template-columns:1fr; gap:28px }
  .foot__legal{ margin-top:12px }
}

@media (max-width:640px){
  :root{ --nav-h:72px; --gut:20px }
  .hero__facts{ gap:18px 28px }
  .hero__facts dd{ font-size:.95rem }
  .hero__actions{ flex-wrap:wrap; gap:18px }
  .form{ grid-template-columns:1fr }
  .craft__panel-inner{ padding-bottom:18px }
  .cat__more-list img{ height:58px }
  .about__thumb{ display:none }
  .certs{ gap:18px }
  .certs img{ height:36px }
  .credlist li{ grid-template-columns:1fr; gap:2px }

  .totop{
    right:14px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:46px; height:46px; padding:0; border-radius:50%;
    justify-content:center;
  }
  .totop .mono{ display:none }
  .totop svg{ width:19px; height:19px }
}

/* ============ motion preferences ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .hero__title .line > span,
  .hero__lede,
  .hero__actions,
  .hero__facts,
  .hero__stage,
  .prod,
  .prod__frame,
  .prod__slide{ transform:none !important; transition:none !important }
  .prod__slide{ opacity:0 !important }
  .prod__slide.is-active{ opacity:1 !important }
  .dl-cut path{ stroke-dashoffset:0 !important }
  .dl-fold path,
  .dl-marks path{ opacity:.62 !important }
  .reveal{ opacity:1; transform:none }
}