/* ═══════════════════════════════════════════════════════════════
   NEW ERA 3D — "Molten Precision"
   Charcoal ink · raw concrete · KUKA orange
   Type: Clash Display (display) · Satoshi (body) · JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0A0C10;   /* page ground            */
  --ink-2:      #10131A;   /* raised panels          */
  --ink-3:      #171B24;   /* hover / borders fill   */
  --paper:      #EBE8E2;   /* raw concrete, light    */
  --paper-2:    #E1DDD5;
  --text:       #F4F2ED;
  --text-dim:   #A3A8B2;
  --text-faint: #6E7480;
  --accent:     #F26D0D;   /* logo / KUKA orange     */
  --accent-hi:  #FF8A2E;
  --accent-deep:#8C3D03;
  --line:       rgba(244,242,237,.09);
  --line-hi:    rgba(244,242,237,.18);

  --font-d: "Clash Display", "Archivo", system-ui, sans-serif;
  --font-b: "Satoshi", "Inter", system-ui, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --sec: clamp(90px, 12vw, 170px);
  --r: 4px;
  --ease: cubic-bezier(.22,.9,.28,1);
}

/* ─────────── reset ─────────── */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
html:focus-within{scroll-padding-top:90px}
body{
  background:var(--ink); color:var(--text);
  font:400 16.5px/1.65 var(--font-b);
  -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}
ul{list-style:none}

/* film grain — the one global texture */
body::after{
  content:""; position:fixed; inset:-100%; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.032; animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-2%,-3%)} 80%{transform:translate(4%,2%)}
}
@media (prefers-reduced-motion: reduce){ body::after{animation:none} }

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:var(--font-m); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}

.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:3000; padding:.7em 1.2em;
  background:var(--accent); color:var(--ink); font-weight:700; border-radius:var(--r);
  transition:top .2s;
}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

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

/* ─────────── type ─────────── */
.h2{
  font:600 clamp(2rem, 4.6vw, 3.4rem)/1.06 var(--font-d);
  letter-spacing:-.005em; text-wrap:balance;
}
/* Clash Display sets words very tight at display sizes — open the gaps */
.hero__title, .h2, .midcta__head, .step__t, .advcard h3, .servecard h3,
.qa summary, .stat__val, .contact__list .tel, .contact__list .email{
  word-spacing:.18em;
}
.eyebrow{
  display:flex; align-items:center; gap:.65em;
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim);
}
.eyebrow__dot{
  width:7px; height:7px; background:var(--accent); border-radius:1px; flex:none;
  box-shadow:0 0 12px rgba(242,109,13,.8);
}
.lede{max-width:56ch; color:var(--text-dim); font-size:1.06rem}
.section-head{margin-bottom:clamp(40px,5.5vw,72px); display:grid; gap:18px}
.section-head .lede a{color:var(--text); border-bottom:1px solid var(--accent)}

/* ─────────── buttons ─────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.95em 1.9em; border-radius:var(--r); overflow:hidden;
  font:700 .8rem/1 var(--font-b); letter-spacing:.09em; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  will-change:transform;
}
.btn--lg{padding:1.15em 2.3em; font-size:.84rem}
.btn--sm{padding:.8em 1.4em; font-size:.72rem}
.btn--accent{background:var(--accent); color:#0A0C10}
.btn--ghost{border:1px solid var(--line-hi); color:var(--text)}
/* layer-fill hover: a printed bead rising through the button */
.btn::before{
  content:""; position:absolute; inset:auto 0 0 0; height:0%; z-index:-1;
  transition:height .35s var(--ease);
}
.btn{z-index:0}
.btn--accent::before{background:#FFB067}
.btn--accent:hover::before{height:100%}
.btn--ghost::before{background:var(--accent)}
.btn--ghost:hover{color:#0A0C10; border-color:var(--accent)}
.btn--ghost:hover::before{height:100%}

.link-arrow{
  display:inline-flex; gap:.5em; align-items:baseline; margin-top:auto;
  font:700 .8rem/1 var(--font-b); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-hi);
}
.link-arrow span{transition:transform .3s var(--ease); display:inline-block}
.link-arrow:hover span{transform:translateX(6px)}

/* ─────────── preloader ─────────── */
.loader{
  position:fixed; inset:0; z-index:4000; background:var(--ink);
  display:grid; place-content:center; gap:22px; justify-items:center;
  transition:transform .7s var(--ease), visibility 0s .7s;
}
.loader.is-done{transform:translateY(-101%); visibility:hidden}
.loader__mark{display:flex; flex-direction:column-reverse; gap:5px}
.loader__bar{
  width:88px; height:9px; border-radius:2px; background:var(--ink-3);
  position:relative; overflow:hidden;
}
.loader__bar::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:printbar .38s var(--ease) forwards;
}
.loader__bar:nth-child(2)::after{animation-delay:.14s; }
.loader__bar:nth-child(3)::after{animation-delay:.28s}
.loader__bar:nth-child(4)::after{animation-delay:.42s}
.loader__bar:nth-child(5)::after{animation-delay:.56s; background:var(--accent-hi)}
@keyframes printbar{to{transform:scaleX(1)}}
.loader__txt{color:var(--text-faint)}
@media (prefers-reduced-motion: reduce){
  .loader{display:none}
}

/* ─────────── custom cursor ─────────── */
.cursor{display:none}
@media (pointer:fine){
  .cursor{display:block; position:fixed; inset:0; z-index:3500; pointer-events:none}
  .cursor__dot{
    position:absolute; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
    background:var(--accent); border-radius:50%; will-change:transform;
  }
  .cursor__ring{
    position:absolute; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
    border:1px solid rgba(242,109,13,.55); border-radius:50%;
    display:grid; place-content:center; will-change:transform;
    transition:width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease),
               background-color .28s var(--ease), border-color .28s var(--ease);
  }
  .cursor__label{
    font:500 .58rem/1 var(--font-m); letter-spacing:.16em; color:#0A0C10;
    opacity:0; transition:opacity .2s;
  }
  /* states */
  .cursor.is-link .cursor__ring{width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--accent)}
  .cursor.is-view .cursor__ring,
  .cursor.is-drag .cursor__ring{
    width:74px; height:74px; margin:-37px 0 0 -37px;
    background:var(--accent); border-color:var(--accent);
  }
  .cursor.is-view .cursor__label,
  .cursor.is-drag .cursor__label{opacity:1}
  .cursor.is-view .cursor__dot,
  .cursor.is-drag .cursor__dot{opacity:0}
  .cursor.is-hidden{opacity:0}

  html.has-cursor body,
  html.has-cursor a, html.has-cursor button, html.has-cursor summary,
  html.has-cursor .card, html.has-cursor .cmp{cursor:none}
}

/* ─────────── nav ─────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  transition:background-color .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
/* the glass blur lives on a pseudo-element: putting backdrop-filter on .nav
   itself would make it the containing block for the fixed .nav__mobile overlay,
   shrinking the menu to the height of the bar */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s;
}
.nav.is-stuck{
  background:rgba(10,12,16,.72);
  border-bottom-color:var(--line);
}
.nav.is-stuck::before{opacity:1}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.logo{flex:none}
.logo__img{width:132px; height:auto}
.nav__links{display:flex; gap:22px; margin-left:auto}
.nav__links a{
  position:relative; white-space:nowrap; font:500 .8rem/1 var(--font-b); letter-spacing:.06em;
  color:var(--text-dim); padding:6px 0; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav__sim{color:var(--accent-hi)!important}
.nav__tel{
  display:flex; align-items:center; gap:.5em;
  font:500 .8rem/1 var(--font-m); color:var(--text-dim); transition:color .25s;
}
.nav__tel:hover{color:var(--accent-hi)}
.nav__toggle{display:none}

.nav__mobile{
  position:fixed; inset:0; z-index:-1; padding:92px var(--pad) 28px;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
  background:#0A0C10;                       /* fully opaque — nothing bleeds through */
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nav__mobile[hidden]{display:none}
.nav__mobile > a{
  font:600 clamp(1.35rem,6vw,2rem)/1.3 var(--font-d);
  color:var(--text); border-bottom:1px solid var(--line); padding:.42em 2px;
  display:flex; justify-content:space-between; align-items:center; flex:none;
}
.nav__mobile > a::after{content:"→"; color:var(--accent); font-size:.7em}
.nav__mobile-foot{margin-top:auto; padding-top:22px; display:grid; gap:12px; flex:none}

@media (max-width:1180px){
  .nav__links, .nav__tel, .nav__cta{display:none}
  .nav__toggle{
    display:grid; gap:6px; margin-left:auto; padding:10px; z-index:10;
  }
  .nav__toggle span{
    width:26px; height:2px; background:var(--text); border-radius:2px;
    transition:transform .3s var(--ease);
  }
  .nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
}

/* ─────────── hero ─────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
}
html.js .hero__media img{animation:heroin 2.6s var(--ease) forwards}
@keyframes heroin{to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ html.js .hero__media img{animation:none; transform:none} }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.15) 34%, rgba(10,12,16,.62) 72%, var(--ink) 100%),
    radial-gradient(120% 90% at 18% 78%, rgba(10,12,16,.68) 0%, transparent 55%);
}
.hero__content{position:relative; padding-block:120px clamp(80px,12vh,150px); display:grid; gap:26px; width:100%}
.hero__title{
  font:600 clamp(2.5rem, 6.8vw, 5.4rem)/1.06 var(--font-d);
  letter-spacing:-.008em;
}
.hero__title .line{display:block; overflow:hidden}
.hero__title .line__in{display:inline-block}
.hero__title .num{font-style:normal; color:var(--accent-hi)}
.line--accent{color:var(--accent)}
.hero__sub{max-width:52ch; color:#D6D4CE; font-size:clamp(1rem,1.4vw,1.15rem)}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero__scroll{
  position:absolute; right:var(--pad); bottom:36px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--text-dim);
}
.hero__scroll .mono{font-size:.6rem; writing-mode:vertical-rl; letter-spacing:.3em}
.hero__scrollbar{width:1px; height:64px; background:var(--line-hi); position:relative; overflow:hidden}
.hero__scrollbar i{
  position:absolute; inset:0; background:var(--accent);
  animation:scrollhint 1.8s var(--ease) infinite;
}
@keyframes scrollhint{
  0%{transform:translateY(-100%)} 55%{transform:translateY(0)} 100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion: reduce){ .hero__scrollbar i{animation:none} }
@media (max-width:700px){ .hero__scroll{display:none} }

/* ─────────── ticker ─────────── */
.ticker{
  border-block:1px solid var(--line); overflow:hidden; background:var(--ink);
  padding:16px 0; position:relative; z-index:5;
}
.ticker__track{display:flex; width:max-content; animation:tick 36s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__seq{
  display:flex; align-items:center; white-space:nowrap; color:var(--text-dim);
  font-size:.74rem; letter-spacing:.22em;
}
.ticker__seq i{
  display:inline-block; width:8px; height:8px; margin:0 2.2em;
  background:var(--accent); border-radius:1px; flex:none;
}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker__track{animation:none} }

/* ═══════════ STORY — pinned 3D scroll scene ═══════════ */
.story{position:relative; height:520vh; background:var(--ink)}
.story__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 88%, #141922 0%, var(--ink) 62%);
}
.story__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.story__title{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  gap:18px; justify-items:center; padding:0 var(--pad);
  transition:opacity .4s, visibility .4s; z-index:3; pointer-events:none;
}
.story__title.is-gone{opacity:0; visibility:hidden}
.story__title .lede{max-width:44ch}
.story__hud{
  position:absolute; left:var(--pad); bottom:clamp(26px,6vh,60px); z-index:3;
  width:min(420px, 82vw); pointer-events:none;
}
.story__era{
  position:absolute; bottom:0; left:0; width:100%;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  display:grid; gap:10px;
}
.story__era.is-on{opacity:1; transform:none}
.story__era--end{pointer-events:none}
.story__era--end.is-on{pointer-events:auto}
.story__era--end .btn{justify-self:start; margin-top:6px}
.story__year{color:var(--accent-hi); font-size:.78rem}
.story__cap{
  color:var(--text-dim); font-size:1rem; line-height:1.55;
  border-left:2px solid var(--accent); padding-left:16px;
}
.story__meter{
  position:absolute; right:var(--pad); bottom:clamp(26px,6vh,60px); z-index:3;
  display:flex; align-items:center; gap:14px; color:var(--text-faint);
  font-size:.66rem;
}
.story__meter-sep{width:44px; height:1px; background:var(--line-hi)}
#meterInfo{color:var(--text-dim); min-width:9ch; text-align:right}
@media (max-width:700px){
  .story__meter{display:none}
  .story__hud{max-width:calc(100vw - 2*var(--pad))}
}
/* fallback mode */
.story.story--fallback{height:auto; padding-block:var(--sec)}
.story.story--fallback .story__stage{display:none}
.story__fallback[hidden]{display:none}
.story__fbgrid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.fbcard{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; display:grid; gap:12px; align-content:start; color:var(--text-dim);
}
.fbcard--accent{border-color:rgba(242,109,13,.45)}
@media (max-width:860px){ .story__fbgrid{grid-template-columns:1fr} }

/* ─────────── transform (compare slider) ─────────── */
.transform{padding-block:var(--sec) 0}
.compare-fig{padding-bottom:var(--sec)}
.cmp{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); touch-action:pan-y; --pos:50%;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.cmp__img{width:100%; height:auto; user-select:none; -webkit-user-drag:none}
.cmp__before{
  position:absolute; inset:0; width:var(--pos); overflow:hidden;
  border-right:2px solid var(--accent);
}
.cmp__before .cmp__img{
  width:100%; height:100%; object-fit:cover; object-position:left center;
  max-width:none;
}
.cmp__tag{
  position:absolute; top:16px; padding:.55em .9em; border-radius:2px;
  background:rgba(10,12,16,.72); backdrop-filter:blur(6px);
  color:var(--text); font-size:.62rem;
}
.cmp__tag--before{left:16px}
.cmp__tag--after{right:16px; color:var(--accent-hi)}
.cmp__range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.cmp__handle{
  position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:#0A0C10; display:grid; place-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5); pointer-events:none;
}
.compare-fig__cap{margin-top:14px; color:var(--text-faint); font-size:.64rem}

/* JS sizes the before-pane width; without JS the range input still works */
.cmp__before{will-change:width}

/* ─────────── work strip ─────────── */
.work{padding-block:var(--sec) 0}
.work .section-head{margin-bottom:clamp(30px,4vw,54px)}
.strip{
  display:flex; gap:10px; padding:0 var(--pad) var(--sec);
  max-width:calc(var(--wrap) + 2*var(--pad)); margin-inline:auto;
}
.card{
  position:relative; flex:1 1 0; min-width:0; height:clamp(340px,58vh,560px);
  overflow:hidden; border-radius:var(--r); padding:0; text-align:left;
  transition:flex-grow .55s var(--ease); border:1px solid var(--line);
}
.card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .6s var(--ease);
  filter:grayscale(.35) brightness(.82);
}
.card.is-open{flex-grow:5.5}
.card.is-open img{filter:none}
.card:hover img{filter:none}
.card__cap{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px;
  background:linear-gradient(transparent, rgba(10,12,16,.88));
  font:500 .86rem/1.4 var(--font-b); color:var(--text);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease) .12s, transform .4s var(--ease) .12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__cap .mono{color:var(--accent-hi); margin-right:.8em}
.card.is-open .card__cap{opacity:1; transform:none}
@media (max-width:899px){
  .strip{
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:calc(var(--sec) - 20px);
    -webkit-overflow-scrolling:touch;
  }
  .card{flex:0 0 78vw; scroll-snap-align:center; height:60vw; min-height:300px}
  .card__cap{opacity:1; transform:none}
  .card img{filter:none}
}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:2500; background:rgba(6,7,10,.94);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.lb[hidden]{display:none}
.lb__fig{max-width:min(1400px,92vw); max-height:88vh; display:grid; gap:14px}
.lb__fig img{max-height:78vh; width:auto; max-width:100%; margin-inline:auto; border-radius:var(--r)}
.lb__fig figcaption{text-align:center; color:var(--text-dim); font-size:.68rem}
.lb__close{
  position:absolute; top:18px; right:22px; font-size:2.2rem; line-height:1;
  color:var(--text-dim); padding:8px; transition:color .2s;
}
.lb__close:hover{color:var(--accent)}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.6rem; padding:16px; color:var(--text-dim); transition:color .2s;
}
.lb__nav:hover{color:var(--accent)}
.lb__nav--prev{left:10px}
.lb__nav--next{right:10px}

/* ─────────── proof / stats ─────────── */
.proof{padding-block:var(--sec); border-top:1px solid var(--line)}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stat{
  padding:clamp(24px,3vw,40px); display:grid; gap:8px; align-content:start;
  background:var(--ink-2); border-right:1px solid var(--line);
  position:relative;
}
.stat:last-child{border-right:0}
.stat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.stat:hover::before{transform:scaleX(1)}
.stat__label{color:var(--text-faint); font-size:.62rem}
.stat__val{
  font:600 clamp(2.4rem,4.4vw,3.6rem)/1 var(--font-d); letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:.3em; flex-wrap:wrap;
}
.stat__val em{
  font:500 .66rem/1 var(--font-m); letter-spacing:.14em; font-style:normal;
  color:var(--accent-hi);
}
.stat__note{color:var(--text-dim); font-size:.85rem}
@media (max-width:960px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
}

/* ─────────── process ─────────── */
.process{padding-block:var(--sec); border-top:1px solid var(--line)}
.steps{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.5vw,32px); counter-reset:step;
}
.step{position:relative; padding-top:22px; display:grid; gap:12px; align-content:start}
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--line-hi);
}
.step::after{
  content:""; position:absolute; top:-2px; left:0; width:38px; height:5px;
  background:var(--accent); border-radius:1px;
}
.step__n{color:var(--accent-hi); font-size:.72rem}
.step__t{font:600 1.25rem/1.2 var(--font-d)}
.step p{color:var(--text-dim); font-size:.94rem}
@media (max-width:960px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ─────────── image breaks ─────────── */
.imgbreak{position:relative; height:clamp(320px,55vh,620px); overflow:hidden}
.imgbreak img{width:100%; height:130%; object-fit:cover; will-change:transform}
.imgbreak::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink), transparent 22%, transparent 78%, var(--ink));
  pointer-events:none;
}

/* ─────────── comparison table — the spec sheet, on raw concrete ─────────── */
.compare{background:var(--paper); color:#15181E; padding-block:var(--sec)}
.compare .eyebrow{color:#6B6F77}
.compare .lede{color:#4C5058}
.ctable{
  width:100%; border-collapse:collapse; background:#F4F2EC;
  border:1px solid #CFCBC1; border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(21,24,30,.35);
}
.ctable th, .ctable td{
  padding:clamp(14px,2vw,22px) clamp(14px,2vw,26px); text-align:left;
  border-bottom:1px solid #DDD9CF; font-size:.95rem; vertical-align:top;
}
.ctable thead th{
  font:500 .68rem/1 var(--font-m); letter-spacing:.16em; text-transform:uppercase;
  color:#6B6F77; background:#EDEAE2; border-bottom:1px solid #CFCBC1;
}
.ctable tbody th{font-weight:600; color:#15181E; width:26%}
.ctable td{color:#4C5058}
.ctable__win{position:relative; background:rgba(242,109,13,.07)}
.ctable td.ctable__win{color:#15181E; font-weight:600}
.ctable thead th.ctable__win{color:var(--accent-deep); border-left:2px solid var(--accent); border-right:2px solid var(--accent)}
.ctable td.ctable__win{border-left:2px solid var(--accent); border-right:2px solid var(--accent)}
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td{border-bottom:0}
@media (max-width:720px){
  .ctable thead{display:none}
  .ctable tbody th, .ctable td{display:block; width:100%; border-left:0!important; border-right:0!important}
  .ctable tbody th{border-bottom:0; padding-bottom:4px}
  .ctable td{padding-top:4px}
  .ctable td::before{
    content:attr(data-label); display:block;
    font:500 .6rem/2 var(--font-m); letter-spacing:.16em; text-transform:uppercase; color:#8A8E96;
  }
  .ctable td.ctable__win{background:rgba(242,109,13,.09)}
}

/* ─────────── advantages ─────────── */
.adv{position:relative; padding-block:var(--sec); overflow:hidden}
.adv__bg{position:absolute; inset:0}
.adv__bg img{width:100%; height:120%; object-fit:cover; opacity:.16; will-change:transform}
.adv__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(10,12,16,.4) 40%, var(--ink) 100%);
}
.adv .wrap{position:relative}
.adv__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.advcard{
  background:rgba(16,19,26,.8); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); display:grid; gap:10px; align-content:start;
  transition:border-color .3s, transform .3s var(--ease);
}
.advcard:hover{border-color:rgba(242,109,13,.5); transform:translateY(-4px)}
.advcard h3{font:600 1.35rem/1.2 var(--font-d)}
.advcard p{color:var(--text-dim); font-size:.95rem}
@media (max-width:760px){ .adv__grid{grid-template-columns:1fr} }

/* ─────────── mid cta ─────────── */
.midcta{
  border-block:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(242,109,13,.12), transparent 55%),
    var(--ink-2);
}
.midcta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding-block:clamp(44px,6vw,72px); flex-wrap:wrap;
}
.midcta__head{font:600 clamp(1.6rem,3vw,2.3rem)/1.1 var(--font-d)}
.midcta__sub{color:var(--text-dim); max-width:46ch; margin-top:8px}

/* ─────────── serve ─────────── */
.serve{padding-block:var(--sec)}
.serve__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.servecard{
  position:relative; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(24px,3vw,38px);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .35s var(--ease), border-color .35s;
  overflow:hidden;
}
.servecard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.servecard:hover{transform:translateY(-6px); border-color:var(--line-hi)}
.servecard:hover::before{transform:scaleX(1)}
.servecard--lead{border-color:rgba(242,109,13,.4)}
.servecard--lead::before{transform:scaleX(1)}
.servecard__tag{color:var(--accent-hi); font-size:.62rem}
.servecard h3{font:600 1.45rem/1.15 var(--font-d)}
.servecard p{color:var(--text-dim); font-size:.94rem}
@media (max-width:900px){ .serve__grid{grid-template-columns:1fr} }

/* ─────────── concept ─────────── */
.concept{padding-block:var(--sec); border-top:1px solid var(--line)}
.concept__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cc{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--ink-2)}
.cc--wide{grid-column:span 2}
.cc img{width:100%; height:100%; object-fit:cover; min-height:280px; transition:transform .7s var(--ease)}
.cc--contain img{object-fit:cover}
.cc:hover img{transform:scale(1.04)}
.cc__badge{
  position:absolute; top:14px; left:14px; padding:.5em .8em; border-radius:2px;
  background:rgba(10,12,16,.78); backdrop-filter:blur(6px);
  color:var(--accent-hi); font-size:.58rem;
}
.cc figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:40px 18px 16px;
  background:linear-gradient(transparent, rgba(10,12,16,.92));
  font-size:.88rem; color:var(--text);
}
@media (max-width:760px){
  .concept__grid{grid-template-columns:1fr}
  .cc--wide{grid-column:auto}
}

/* ─────────── faq ─────────── */
.faq{padding-block:var(--sec); background:var(--paper); color:#15181E}
.faq .eyebrow{color:#6B6F77}
.faq .lede{color:#4C5058}
.faq__list{display:grid; border-top:1px solid #CFCBC1}
.qa{border-bottom:1px solid #CFCBC1}
.qa summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:clamp(18px,2.6vw,28px) 4px;
  font:600 clamp(1.05rem,1.8vw,1.3rem)/1.3 var(--font-d);
  cursor:pointer; transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-deep)}
.qa__ico{position:relative; width:16px; height:16px; flex:none}
.qa__ico::before, .qa__ico::after{
  content:""; position:absolute; background:currentColor; transition:transform .3s var(--ease);
}
.qa__ico::before{top:7px; left:0; width:16px; height:2px}
.qa__ico::after{top:0; left:7px; width:2px; height:16px}
.qa[open] .qa__ico::after{transform:scaleY(0)}
.qa[open] summary{color:var(--accent-deep)}
.qa__body{padding:0 4px clamp(18px,2.6vw,28px); max-width:72ch; display:grid; gap:14px; color:#4C5058}
.qa__fig{margin:6px 0 0; display:grid; gap:8px}
.qa__fig img{width:100%; height:auto; border-radius:var(--r); border:1px solid #CFCBC1; background:#fff}
.qa__fig figcaption{font-family:var(--font-m); font-size:.62rem; letter-spacing:.04em; color:#8A8E96; line-height:1.5}
.qa__body strong{color:#15181E}

/* ─────────── about ─────────── */
.about{padding-block:var(--sec)}
.about__inner{display:grid; grid-template-columns:44% 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.about__media{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.about__media::after{
  content:""; position:absolute; left:-1px; top:10%; bottom:10%; width:3px; background:var(--accent);
}
.about__copy{display:grid; gap:18px}
.about__copy p{color:var(--text-dim)}
.about__meta{color:var(--text-faint); font-size:.64rem; letter-spacing:.2em}
@media (max-width:560px){ .about__inner{grid-template-columns:1fr} }

/* ─────────── contact ─────────── */
.contact{
  padding-block:var(--sec); border-top:1px solid var(--line);
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(242,109,13,.08), transparent 60%),
    var(--ink);
}
.contact__inner{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,80px)}
.contact__copy{display:grid; gap:20px; align-content:start}
.contact__list{display:grid; gap:14px; margin-top:10px}
.contact__list li{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.contact__list .mono{color:var(--text-faint); width:7ch; flex:none; font-size:.64rem}
.contact__list .tel, .contact__list .email{
  font:600 1.05rem/1 var(--font-d); letter-spacing:.01em; transition:color .25s;
}
.contact__list .tel:hover, .contact__list .email:hover{color:var(--accent-hi)}
.contact__list .role{color:var(--text-faint); font-size:.8rem}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; align-content:start;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px);
}
.field{display:grid; gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font:500 .66rem/1 var(--font-m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
}
.field .opt{color:var(--text-faint); text-transform:none; letter-spacing:.05em}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-hi);
  padding:10px 2px; color:var(--text); font:400 1rem/1.4 var(--font-b);
  border-radius:0; transition:border-color .25s;
}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A3A8B2' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center}
.field select option{background:var(--ink-2); color:var(--text)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--accent);
}
.field textarea{resize:vertical; min-height:96px}
.field.is-invalid input{border-bottom-color:#E5484D}
.field__err{color:#FF8589; font-size:.8rem}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.form__foot{display:grid; gap:14px; justify-items:start}
.form__status{font-size:.9rem; min-height:1.4em}
.form__status.is-ok{color:#6BCB77}
.form__status.is-bad{color:#FF8589}

/* ── submission success modal ── */
.sent{
  position:fixed; inset:0; z-index:2600; display:grid; place-content:center;
  background:rgba(6,7,10,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:24px;
}
.sent[hidden]{display:none}
.sent__card{
  width:min(440px, 92vw); background:var(--ink-2); border:1px solid rgba(242,109,13,.4);
  border-radius:var(--r); padding:clamp(30px,5vw,44px); text-align:center;
  display:grid; gap:14px; justify-items:center;
  animation:sentin .45s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
@keyframes sentin{from{opacity:0; transform:translateY(20px) scale(.97)} to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .sent__card{animation:none} }
.sent__check{color:#6BCB77}
.sent__check svg{display:block}
.sent__title{font:600 1.5rem/1.15 var(--font-d); word-spacing:.14em}
.sent__body{color:var(--text-dim); font-size:.95rem}
.sent__body a{color:var(--accent-hi)}
.sent__card .btn{margin-top:8px}
@media (max-width:980px){
  .contact__inner{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

/* ─────────── footer ─────────── */
.footer{border-top:1px solid var(--line); background:#07090C}
.footer__inner{
  padding-block:clamp(44px,6vw,72px);
  display:grid; gap:22px; justify-items:center; text-align:center;
}
.logo--footer img{width:190px; height:auto}
.footer__tag{color:var(--text-dim)}
.footer__links{display:flex; gap:24px; flex-wrap:wrap; justify-content:center}
.footer__links a{
  font:500 .78rem/1 var(--font-b); letter-spacing:.06em; color:var(--text-dim);
  transition:color .25s;
}
.footer__links a:hover{color:var(--accent-hi)}
.footer__legal{color:var(--text-faint); font-size:.62rem}
.footer__admin{color:var(--text-faint); border-bottom:1px dotted var(--text-faint); transition:color .2s}
.footer__admin:hover{color:var(--accent-hi)}

/* ─────────── reveal defaults (JS adds motion) ─────────── */
html.js [data-anim]{opacity:0}
html.js.no-motion [data-anim]{opacity:1}
html:not(.js) [data-anim]{opacity:1}