/* ============================================================
   Onosfactory — design system
   Brand gold from the Onos Group mark, carried by a rotating
   "ink" palette (coral / cyan / violet / lime) so a POD catalog
   reads as energetic without losing the brand spine.
   ============================================================ */

:root{
  /* brand */
  --gold:#A8802A; --gold-lite:#D6A93F; --gold-deep:#7E5F1C; --gold-soft:#F6EEDB;
  /* rotating ink accents */
  --coral:#F04E2A; --cyan:#0C9FB4; --violet:#6D42E8; --lime:#6FA300;
  /* neutrals */
  --ink:#14120C; --ink-2:#221E14; --mut:#6C6455; --line:#E7E0D1;
  --paper:#fff; --cream:#FBF7EF; --sand:#F3ECDE;
  /* type + layout */
  --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Arial,sans-serif;
  --display:var(--font);
  --wrap:1180px; --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(20,18,12,.05),0 8px 24px -12px rgba(20,18,12,.14);
  --shadow-lg:0 24px 60px -24px rgba(20,18,12,.34);
  --ease:cubic-bezier(.16,.84,.28,1);
}

/* Accent utility — every card/section that carries an ink colour sets
   --ac once, and its border, badge, glow and hover wash all follow. */
.ink-gold{--ac:var(--gold)} .ink-coral{--ac:var(--coral)}
.ink-cyan{--ac:var(--cyan)} .ink-violet{--ac:var(--violet)} .ink-lime{--ac:var(--lime)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{font-family:var(--font);font-size:17px;line-height:1.55;color:var(--ink);
  background:var(--paper);font-optical-sizing:auto;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* height:auto lets the CSS aspect-ratio win over the img height attribute,
   which the UA maps to a real CSS height and would otherwise stretch crops. */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[id]{scroll-margin-top:104px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.07;letter-spacing:-.028em}
h1{font-size:clamp(2.15rem,1.35rem + 3.6vw,4.15rem)}
h2{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.95rem)}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);letter-spacing:-.019em;line-height:1.2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:800;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ac,var(--gold))}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.lead{font-size:clamp(1.06rem,.98rem + .34vw,1.24rem);line-height:1.5;color:var(--mut);max-width:64ch}
.section-head{max-width:44rem}
.section-head h2{margin:.5rem 0 .85rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.92em 1.7em;border-radius:100px;font-weight:700;font-size:.97rem;
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .22s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--gold);box-shadow:0 12px 28px -10px rgba(168,128,42,.6)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--gold-lite);color:var(--ink)}
.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.link-arrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.94rem;
  color:var(--ac,var(--gold));border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s,gap .2s var(--ease)}
.link-arrow:hover{border-color:currentColor;gap:.7em}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.stuck{border-bottom-color:var(--line);box-shadow:0 6px 22px -18px rgba(20,18,12,.5)}
.site-header .bar{display:flex;align-items:center;gap:22px;height:84px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand svg{width:46px;height:46px;flex-shrink:0}
.brand .wordmark{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:.01em}
.brand small{font-size:.63rem;letter-spacing:.24em;color:var(--mut);font-weight:700;margin-top:5px}
.nav-desk{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-desk a{position:relative;padding:11px 17px;font-size:1.02rem;font-weight:600;border-radius:100px;
  transition:background .2s,color .2s}
.nav-desk a:hover{background:var(--sand)}
.nav-desk a[aria-current]{color:var(--gold-deep)}
.nav-desk a[aria-current]::after{content:"";position:absolute;left:17px;right:17px;bottom:3px;height:2px;
  background:var(--gold);border-radius:2px}
.head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{display:inline-flex;align-items:center;gap:5px;padding:10px 16px;border:1.5px solid var(--line);
  border-radius:100px;font-size:.88rem;font-weight:800;letter-spacing:.05em;transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--gold);color:var(--gold-deep)}
.head-actions .btn{padding:.78em 1.5em;font-size:.98rem}

.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;margin-left:auto}
.burger i{position:relative;display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),top .28s var(--ease)}
.burger i::before{top:-6px} .burger i::after{top:6px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{top:0;transform:rotate(45deg)}
body.menu-open .burger i::after{top:0;transform:rotate(-45deg)}

.mobile-menu{position:fixed;inset:84px 0 0;z-index:99;background:var(--paper);padding:28px 24px 48px;
  overflow-y:auto;transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),opacity .26s}
body.menu-open .mobile-menu{transform:none;opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mobile-menu a.m-link{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.024em;
  padding:17px 2px;border-bottom:1px solid var(--line)}
.mobile-menu .m-foot{margin-top:28px;display:grid;gap:12px}
.mobile-menu .m-foot .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;padding:0}
/* Same slowly-turning colour wash as the CTA band, so the page opens and closes
   on the one treatment. */
.hero::before{content:"";position:absolute;inset:-50% -20%;z-index:-2;
  background:conic-gradient(from 180deg at 50% 50%,rgba(214,169,63,.32),rgba(240,78,42,.25),
    rgba(109,66,232,.27),rgba(12,159,180,.23),rgba(214,169,63,.32));
  filter:blur(70px);animation:spin 34s linear infinite}
/* The wash turns a full circle, so every colour eventually passes behind the
   copy. This layer does not rotate: it holds the text side dark enough to read
   whatever the wash is doing, and carries the grid texture on top of it. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(100deg,rgba(20,18,12,.54) 0%,rgba(20,18,12,.24) 44%,rgba(20,18,12,0) 72%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,76px 76px,76px 76px}
.hero .wrap{padding:clamp(72px,9vw,124px) 24px clamp(60px,7vw,96px);position:relative}
.hero .eyebrow{color:var(--gold-lite)}
.hero h1{margin:1rem 0 1.35rem;max-width:17ch;color:#fff}
.hero p.lead{color:rgba(255,255,255,.84);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.3rem}
.hero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14)}
.hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,60px);align-items:center}
.hero-badge{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;
  background:rgba(20,18,12,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  padding:11px 17px;border-radius:100px;font-size:.82rem;font-weight:700;color:#fff}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(111,163,0,.7);
  animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(111,163,0,0)}100%{box-shadow:0 0 0 0 rgba(111,163,0,0)}}

/* ---------- marquee ---------- */
.marquee{background:var(--gold);color:#fff;overflow:hidden;padding:13px 0;
  border-block:1px solid rgba(0,0,0,.08)}
.marquee-track{display:flex;width:max-content;gap:0;animation:scroll 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--display);font-weight:800;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.marquee span::after{content:"";width:7px;height:7px;background:currentColor;border-radius:50%;opacity:.65}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:clamp(60px,7vw,104px) 0}
section.tight{padding:clamp(44px,5vw,70px) 0}
section.cream{background:var(--cream)}
section.dark{background:var(--ink);color:#fff}
section.dark h2,section.dark h3{color:#fff}
section.dark .lead,section.dark p{color:rgba(255,255,255,.7)}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
section.dark .stat-row{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)}
.stat{background:var(--paper);padding:36px 28px 34px}
section.dark .stat{background:var(--ink)}
section.cream .stat{background:var(--cream)}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.6rem,1.7rem + 2.9vw,4rem);
  font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--gold-deep)}
section.dark .stat b{color:var(--gold-lite)}
.stat>span{display:block;margin-top:13px;font-size:.86rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
section.dark .stat>span{color:rgba(255,255,255,.55)}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.card{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px 30px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card>.link-arrow{margin-top:auto;padding-top:16px;align-self:flex-start}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ac,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}
.card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;
  border-radius:50%;background:var(--ac,var(--gold));opacity:0;filter:blur(46px);
  transition:opacity .4s;pointer-events:none}
a.card:hover,.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:.13}
.card>*{position:relative}
.card .num{font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.14em;color:var(--ac,var(--gold))}
.card h3{margin:.7rem 0 .55rem}
.card p{color:var(--mut);font-size:.96rem}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--ac,var(--gold)) 13%,transparent);color:var(--ac,var(--gold))}
.card .ic svg{width:22px;height:22px}
section.dark .card{background:var(--ink-2);border-color:rgba(255,255,255,.11)}
section.dark .card p{color:rgba(255,255,255,.63)}

.card.cta-tile{background:var(--ink);color:#fff;border-color:transparent;justify-content:center}
.card.cta-tile h3{color:#fff}
.card.cta-tile p{color:rgba(255,255,255,.62)}
.card.cta-tile::after{opacity:.16}

/* media card (product / factory / post) */
.mcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.mcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.mcard .thumb{position:relative;overflow:hidden;background:var(--sand)}
.mcard .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s}
.mcard.square .thumb img{aspect-ratio:1}
.mcard:hover .thumb img{transform:scale(1.055)}
.mcard .body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;gap:.55rem}
.mcard .body p{color:var(--mut);font-size:.95rem}
.mcard .body .link-arrow{margin-top:auto;padding-top:14px;align-self:flex-start}
.tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  background:var(--ac,var(--gold));color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 13px;border-radius:100px}

/* checklist */
.checks{display:grid;gap:11px;margin-top:1.3rem}
.checks li{display:flex;gap:11px;align-items:flex-start;list-style:none;font-size:.96rem;color:var(--mut)}
.checks svg{flex-shrink:0;width:19px;height:19px;margin-top:3px;color:var(--ac,var(--gold))}
section.dark .checks li{color:rgba(255,255,255,.72)}

/* split rows (factories / products detail) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,68px);align-items:center}
.split.flip .split-media{order:2}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.split-media::after{content:"";position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(to top,rgba(20,18,12,.5),transparent)}
.split-stats{position:absolute;left:20px;right:20px;bottom:20px;display:flex;gap:22px;z-index:1}
.split-stats div{color:#fff}
.split-stats b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.028em;line-height:1.1}
.split-stats span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.78}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:22px;counter-reset:step}
.step{position:relative;padding-top:30px}
.step::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--ac,var(--gold)),color-mix(in srgb,var(--ac,var(--gold)) 12%,transparent))}
.step .dot{position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--ac,var(--gold));box-shadow:0 0 0 5px color-mix(in srgb,var(--ac,var(--gold)) 18%,transparent)}
.step b{font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.15em;color:var(--ac,var(--gold))}
.step h3{margin:.45rem 0 .5rem}
.step p{color:var(--mut);font-size:.95rem}
section.dark .step p{color:rgba(255,255,255,.65)}

/* timeline */
.timeline{display:grid;gap:0;margin-top:2rem}
.tl-item{display:grid;grid-template-columns:132px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-item .yr{font-family:var(--display);font-size:1.65rem;font-weight:700;letter-spacing:-.028em;color:var(--gold)}
.tl-item p{color:var(--mut);margin-top:.4rem}

/* qc rail */
.qc{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:2px;
  border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.12)}
.qc div{background:var(--ink-2);padding:28px 22px 30px}
.qc b{display:block;font-family:var(--display);font-size:.8rem;letter-spacing:.15em;color:var(--ac,var(--gold-lite))}
.qc span{display:block;margin-top:.5rem;font-weight:700;font-size:1.02rem;color:#fff}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.gallery figure{border-radius:var(--r);overflow:hidden;background:var(--sand)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .55s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2}
.gallery figure:nth-child(1) img,.gallery figure:nth-child(6) img{aspect-ratio:8/5}

/* team */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;max-width:640px}
.person{text-align:center}
.person img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 16px;
  border:3px solid var(--gold-soft);transition:border-color .3s,transform .3s var(--ease)}
.person:hover img{border-color:var(--gold);transform:translateY(-4px)}
.person b{display:block;font-family:var(--display);font-size:1.1rem}
.person span{font-size:.85rem;color:var(--mut);font-weight:600}

/* faq */
.faq{max-width:56rem}
.faq-group{margin-bottom:2.4rem}
.faq-group>h3{margin-bottom:.6rem;color:var(--gold-deep)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;
  padding:19px 0;cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:22px;height:22px;margin-top:2px;
  background:var(--gold);border-radius:50%;transition:transform .3s var(--ease);
  mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{color:var(--mut);padding:0 0 20px;max-width:70ch}

/* cta band */
.band{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center;isolation:isolate}
.band::before{content:"";position:absolute;inset:-50% -20%;z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%,rgba(214,169,63,.30),rgba(240,78,42,.24),
    rgba(109,66,232,.26),rgba(12,159,180,.22),rgba(214,169,63,.30));
  filter:blur(70px);animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.band h2{max-width:22ch;margin:.6rem auto .9rem}
.band p{max-width:56ch;margin:0 auto 2rem;color:rgba(255,255,255,.74)}
.band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- form ---------- */
.qform{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qform .full{grid-column:1/-1}
.qform label{display:block;font-size:.83rem;font-weight:700;letter-spacing:.02em;margin-bottom:7px}
.qform input,.qform select,.qform textarea{width:100%;padding:13px 15px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:11px;font-size:.97rem;transition:border-color .2s,box-shadow .2s}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(168,128,42,.13)}
.qform textarea{min-height:128px;resize:vertical}
.qform .btn{width:100%}
.form-note{font-size:.9rem;font-weight:600;padding:13px 16px;border-radius:11px;display:none}
.form-note.ok{display:block;background:#EDF7E8;color:#3D6B1E;border:1px solid #CDE6BE}
.form-note.bad{display:block;background:#FDEDE9;color:#9C331A;border:1px solid #F6CDC3}

/* contact page: form beside the details, stacked once there is no room */
.contact-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(32px,4vw,64px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* contact info list */
.info{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.info div{background:var(--paper);padding:22px 24px}
.info b{display:flex;align-items:center;gap:9px;font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.info b svg{width:16px;height:16px}
.info p,.info a{font-size:.98rem;color:var(--ink);overflow-wrap:anywhere}
.info a:hover{color:var(--gold-deep);text-decoration:underline}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(52px,6vw,76px) 0 26px}
.site-footer .cols{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.3fr;gap:36px}
.site-footer .brand b{color:#fff}
.site-footer .brand small{color:rgba(255,255,255,.42)}
.site-footer p{font-size:.93rem;margin-top:16px;max-width:36ch}
.site-footer h4{color:#fff;font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
.site-footer a{display:block;padding:5px 0;font-size:.94rem;transition:color .2s}
.site-footer a:hover{color:var(--gold-lite)}
.site-footer .socials{display:flex;gap:10px;margin-top:18px}
.site-footer .socials a{display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid rgba(255,255,255,.16);border-radius:11px;transition:background .2s,border-color .2s,color .2s}
.site-footer .socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.site-footer .socials svg{width:17px;height:17px}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);
  font-size:.84rem;color:rgba(255,255,255,.4)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate;padding:0}
.page-hero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:180%;z-index:-1;
  background:radial-gradient(50% 50% at 22% 30%,rgba(214,169,63,.34),transparent 62%),
             radial-gradient(46% 46% at 80% 26%,rgba(var(--hue,240,78,42),.24),transparent 64%);
  filter:blur(6px)}
.page-hero .wrap{padding:clamp(56px,7vw,92px) 24px}
.page-hero h1{margin:.9rem 0 1rem;max-width:19ch}
.page-hero p{color:rgba(255,255,255,.74);max-width:58ch;font-size:clamp(1rem,.95rem + .3vw,1.14rem)}
.crumbs{display:flex;gap:9px;align-items:center;font-size:.83rem;color:rgba(255,255,255,.5);margin-bottom:.4rem}
.crumbs a:hover{color:var(--gold-lite)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .nav-desk,.head-actions .btn,.site-header .lang{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.flip .split-media{order:0}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 1}
  .gallery figure:nth-child(1) img,.gallery figure:nth-child(6) img{aspect-ratio:4/3}
}
@media(max-width:620px){
  .qform{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;gap:8px}
  .split-stats{position:static;margin-top:0;padding:16px 20px;background:var(--ink)}
  .hero-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   Step illustrations (tools/art.mjs)
   Each drawing inherits its ink colour from the tile's .ink-* class.
   All motion is defined here so the reduced-motion block below the
   responsive rules switches every one of them off at once.
   ============================================================ */
.art{width:100%;max-width:128px;height:auto;color:var(--ac,var(--gold));overflow:visible}
.step .art{margin-bottom:20px}
.qc .art{max-width:112px;margin-bottom:16px}
section.dark .art{color:var(--ac,var(--gold-lite))}

@keyframes a-bob{50%{transform:translateY(-4px)}}
@keyframes a-ping{0%,100%{opacity:.14;transform:scale(.86)}50%{opacity:.3;transform:scale(1.04)}}
@keyframes a-tick{0%{stroke-dashoffset:26}45%,100%{stroke-dashoffset:0}}
@keyframes a-point{0%,100%{transform:translate(0,0)}45%{transform:translate(9px,9px)}}
@keyframes a-lift{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(-9px);opacity:.55}}
@keyframes a-fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes a-sweep{0%,100%{transform:translateX(-15px)}50%{transform:translateX(15px)}}
@keyframes a-ink{0%{stroke-dashoffset:32}60%,100%{stroke-dashoffset:0}}
@keyframes a-roll{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes a-lines{to{stroke-dashoffset:-24}}
@keyframes a-scan{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,-22px)}}
@keyframes a-spin{to{transform:rotate(1turn)}}
@keyframes a-feed{to{stroke-dashoffset:-28}}
@keyframes a-press{0%,100%{transform:translateY(-6px)}45%,60%{transform:translateY(9px)}}
@keyframes a-heat{0%{opacity:0;transform:translateY(6px)}40%{opacity:.85}100%{opacity:0;transform:translateY(-8px)}}
@keyframes a-stamp{0%,100%{transform:scale(1)}12%{transform:scale(.82)}26%{transform:scale(1.06)}}
@keyframes a-trace{0%{stroke-dashoffset:120}55%,100%{stroke-dashoffset:0}}
@keyframes a-swatch{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes a-layer{50%{transform:translateY(-3px)}}
@keyframes a-cut{0%{stroke-dashoffset:52}70%,100%{stroke-dashoffset:0}}
@keyframes a-run{0%{offset-distance:0%}100%{offset-distance:100%}}

.a-bob{animation:a-bob 3.4s ease-in-out infinite;transform-origin:50% 50%}
.a-ping{animation:a-ping 2.6s ease-in-out infinite;transform-origin:70px 70px}
.a-tick{stroke-dasharray:26;animation:a-tick 2.6s ease-in-out infinite}
.a-point{animation:a-point 2.6s ease-in-out infinite}
.a-lift{animation:a-lift 3s ease-in-out infinite}
.a-fill{transform-origin:30px 0;animation:a-fill 3s ease-in-out infinite}
.a-sweep{animation:a-sweep 3.2s ease-in-out infinite}
.a-ink{stroke-dasharray:32;animation:a-ink 3.2s ease-in-out infinite}
.a-roll{animation:a-roll 2.4s ease-in-out infinite}
.a-dash-lines>path{stroke-dasharray:6 6;animation:a-lines 1.1s linear infinite}
.a-scan{animation:a-scan 3.6s ease-in-out infinite}
.a-spin{animation:a-spin 4.4s linear infinite;transform-origin:34px 49px}
.a-feed{stroke-dasharray:8 8;animation:a-feed 1.4s linear infinite}
.a-press{animation:a-press 3s ease-in-out infinite}
.a-heat>path{animation:a-heat 2.4s ease-in-out infinite}
.a-heat>path:nth-child(2){animation-delay:.35s}
.a-heat>path:nth-child(3){animation-delay:.7s}
.a-stamp,.a-stamp-tick{animation:a-stamp 3.2s ease-in-out infinite;transform-origin:68px 69px}
.a-trace{stroke-dasharray:120;animation:a-trace 3.6s ease-in-out infinite}
.a-arc{stroke-dasharray:120;animation:a-trace 3.6s ease-in-out infinite}
.a-lay1{animation:a-layer 3s ease-in-out infinite}
.a-lay2{animation:a-layer 3s ease-in-out infinite .18s}
.a-lay3{animation:a-layer 3s ease-in-out infinite .36s}
.a-sw1{animation:a-swatch 2.4s ease-in-out infinite}
.a-sw2{animation:a-swatch 2.4s ease-in-out infinite .3s}
.a-sw3{animation:a-swatch 2.4s ease-in-out infinite .6s}
.a-cut{stroke-dasharray:52;animation:a-cut 3.2s ease-in-out infinite}
/* offset-path drives the parcel along the same arc the route draws */
.a-run{offset-path:path("M24 62c14-26 34-26 48 0");offset-rotate:0deg;
  animation:a-run 3.6s ease-in-out infinite}