/* ==========================================================================
   Torquesafe Mechanical — prototype stylesheet
   Brand: carbon base, safety orange #EA6420, brushed chrome headings.
   ========================================================================== */

:root{
  --carbon:#0B0B0C;
  --carbon-2:#111214;
  --carbon-3:#17191D;
  --carbon-4:#1E2126;
  --line:#2A2E35;
  --line-soft:#1F2228;

  --orange:#EA6420;
  --orange-hi:#FF7B36;
  --orange-tint:rgba(234,100,32,.12);
  --orange-edge:rgba(234,100,32,.42);

  --text:#EDEFF2;
  --muted:#A6ADB8;
  --muted-2:#828A96;

  --h:"Barlow Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --b:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;

  --wrap:1220px;
  --gut:clamp(18px,4vw,40px);
  --r:3px;

  --shadow:0 18px 50px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--carbon);
  color:var(--text);
  font:400 16.5px/1.65 var(--b);
  letter-spacing:.005em;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hi)}
button{font:inherit}

:focus-visible{
  outline:3px solid #FFB98A;
  outline-offset:2px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange);color:#0B0B0C;padding:12px 20px;font-weight:700;
}
.skip:focus{left:8px;top:8px}

/* --- carbon texture ----------------------------------------------------- */
.tex{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23ffffff' stroke-opacity='.028' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:56px 64px;
}

/* --- type --------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--h);
  font-weight:700;
  line-height:1.03;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
h4{font-size:1.12rem}

.chrome{
  background:linear-gradient(176deg,#FFFFFF 4%,#D8DCE2 34%,#9AA1AB 62%,#F2F4F7 78%,#767D88 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){.chrome{color:#EDEFF2;-webkit-text-fill-color:#EDEFF2}}

p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#D3D8DF;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.86rem}

.eyebrow{
  font-family:var(--h);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.83rem;color:var(--orange);
  margin:0 0 .85rem;display:block;
}
.eyebrow--chrome{color:var(--muted-2)}

/* TBC flag ---------------------------------------------------------------- */
.tbc{
  display:inline-block;
  font:700 .66rem/1 var(--b);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0B0B0C;
  background:#F4D03F;
  padding:3px 6px 2px;
  border-radius:2px;
  vertical-align:middle;
  margin-left:.4em;
  white-space:nowrap;
}

/* --- layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding:clamp(56px,8vw,104px) 0}
.sec--tight{padding:clamp(40px,5vw,64px) 0}
.sec--alt{background:var(--carbon-2);border-block:1px solid var(--line-soft)}
.sec__head{max-width:70ch;margin-bottom:clamp(30px,4vw,48px)}
.sec__head--mid{margin-inline:auto;text-align:center}

.grid{display:grid;gap:clamp(14px,2vw,22px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--h);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:1.08rem;
  padding:.92em 1.6em;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),color .18s var(--ease);
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--orange);color:#0B0B0C;border-color:var(--orange)}
.btn--primary:hover{background:var(--orange-hi);border-color:var(--orange-hi);color:#0B0B0C}
.btn--ghost{background:transparent;color:var(--text);border-color:#454B54}
.btn--ghost:hover{border-color:var(--text);color:#fff;background:rgba(255,255,255,.04)}
.btn--dark{background:#0B0B0C;color:var(--text);border-color:#0B0B0C}
.btn--dark:hover{background:#000;color:#fff}
.btn--sm{font-size:.94rem;padding:.72em 1.15em}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{
  font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.98rem;display:inline-flex;align-items:center;gap:.45em;color:var(--orange);
}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

/* --- header ------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:padding .22s var(--ease),background .22s var(--ease);
}
.hdr__in{
  display:flex;align-items:center;gap:22px;
  padding-block:14px;transition:padding-block .22s var(--ease);
}
.hdr.is-stuck .hdr__in{padding-block:8px}
.hdr__logo{flex:0 0 auto}
.hdr__logo img{width:clamp(148px,17vw,198px);transition:width .22s var(--ease)}
.hdr.is-stuck .hdr__logo img{width:clamp(130px,14vw,164px)}

.nav{margin-inline:auto}
.nav ul{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);list-style:none;margin:0;padding:0}
.nav a{
  font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.075em;
  font-size:1.01rem;color:var(--text);padding:7px 2px;display:block;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hdr__tel{
  font-family:var(--h);font-weight:700;font-size:1.16rem;letter-spacing:.04em;
  color:var(--text);white-space:nowrap;
}
.hdr__tel span{display:block;font:500 .64rem/1 var(--b);letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.hdr__tel:hover{color:#fff}

.burger{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  width:46px;height:42px;cursor:pointer;padding:0;position:relative;
}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--text);transition:.22s var(--ease)}
.burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"] i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width:1080px){
  /* backdrop-filter on .hdr would make it the containing block for the
     position:fixed nav panel, clamping the panel to the header box.
     Solid header on mobile instead. */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--carbon)}
  .burger{display:block;order:3}
  .hdr__in{justify-content:space-between}
  .hdr__cta .btn{display:none}
  .nav{
    position:fixed;inset:64px 0 0;background:var(--carbon);margin:0;
    padding:20px var(--gut) 120px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s var(--ease),visibility .28s var(--ease);
    border-top:1px solid var(--line);
  }
  /* visibility:hidden keeps the closed off-canvas panel out of the scroll
     extent -- a position:fixed panel is not clipped by body overflow-x. */
  .nav.is-open{transform:none;visibility:visible}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li{border-bottom:1px solid var(--line-soft)}
  .nav a{padding:16px 2px;font-size:1.3rem}
  .nav a::after{display:none}
  .nav__mcta{margin-top:22px;display:grid;gap:10px}
}
/* .nav a would otherwise override the button's own text colour. */
.nav .btn--primary{color:#0B0B0C}
.nav .btn--ghost{color:var(--text)}

@media (min-width:1081px){.nav__mcta{display:none}}

/* --- mobile call bar ---------------------------------------------------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--carbon-2);border-top:1px solid var(--line);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  gap:9px;
}
.callbar .btn{flex:1;font-size:.99rem;padding:.8em .6em}
@media (max-width:760px){
  .callbar{display:flex}
  body{padding-bottom:74px}
}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(11,11,12,.97) 2%,rgba(11,11,12,.72) 34%,rgba(11,11,12,.22) 66%,rgba(11,11,12,.55) 100%),
    linear-gradient(to right,rgba(11,11,12,.86) 0%,rgba(11,11,12,.34) 52%,rgba(11,11,12,.1) 100%);
}
.hero__in{padding-block:clamp(40px,8vw,88px) clamp(36px,5vw,64px);max-width:44rem}
.hero h1{margin-bottom:.34em}
.hero .lead{margin-bottom:1.6em;color:#DFE3E9}
.hero .btn-row{margin-bottom:26px}

.badge{
  display:inline-flex;align-items:center;gap:.6em;
  background:rgba(11,11,12,.72);border:1px solid var(--orange-edge);
  border-left:3px solid var(--orange);
  padding:.7em 1.05em;border-radius:var(--r);
  font-size:.93rem;color:#E4E8ED;backdrop-filter:blur(4px);
}
.badge b{font-family:var(--h);font-weight:700;font-size:1.12rem;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.badge svg{flex:0 0 auto;fill:var(--orange)}

.hero--sub{min-height:clamp(340px,44vh,460px)}
.hero--sub .hero__in{max-width:52rem}
.hero--sub h1{font-size:clamp(2.3rem,5vw,3.9rem)}

/* --- breadcrumb --------------------------------------------------------- */
.crumb{font-size:.84rem;color:var(--muted-2);padding:14px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45em;margin:0;padding:0}
.crumb li:not(:last-child)::after{content:"/";margin-left:.45em;color:#4A505A}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--orange)}

/* --- trust strip -------------------------------------------------------- */
.trust{background:var(--carbon-2);border-block:1px solid var(--line-soft)}
.trust ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.trust li{
  padding:24px 18px;text-align:center;
  border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.trust li:first-child{border-left:0}
.trust svg{fill:var(--orange);flex:0 0 auto}
.trust b{font-family:var(--h);font-weight:700;font-size:1.28rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.trust li>span{font-size:.83rem;color:var(--muted);line-height:1.4}
.trust li.is-tbc{background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(244,208,63,.05) 9px,rgba(244,208,63,.05) 18px)}
@media (max-width:980px){
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li{border-top:1px solid var(--line-soft)}
  .trust li:nth-child(odd){border-left:0}
  .trust li:last-child{grid-column:1/-1}
}

/* --- cards -------------------------------------------------------------- */
.card{
  background:var(--carbon-3);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease);
}
.card:hover{border-color:var(--orange-edge);transform:translateY(-4px);background:var(--carbon-4)}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--carbon-4)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__img img{transform:scale(1.045)}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:9px}
.card__body h3{margin:0}
.card__body p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.card__body .link-arrow{margin-top:6px}
.card--pillar .card__img{aspect-ratio:3/2}
.card__no{
  font-family:var(--h);font-weight:700;font-size:.8rem;letter-spacing:.2em;
  color:var(--orange);
}
.card a.stretch::after{content:"";position:absolute;inset:0}

/* --- fork (dual audience) ----------------------------------------------- */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.fork{grid-template-columns:1fr}}
.fork__side{
  position:relative;isolation:isolate;padding:clamp(30px,4.4vw,56px);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,46vw,470px);
  transition:background .25s var(--ease);
}
.fork__side img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.fork__side::after{content:"";position:absolute;inset:0;z-index:-1;transition:background .25s var(--ease)}
.fork__side--a::after{background:linear-gradient(to top,rgba(11,11,12,.96) 12%,rgba(11,11,12,.72) 52%,rgba(11,11,12,.55) 100%)}
.fork__side--b::after{background:linear-gradient(to top,rgba(20,7,0,.95) 12%,rgba(120,44,8,.6) 55%,rgba(234,100,32,.35) 100%)}
.fork__side:hover::after{filter:brightness(1.12)}
.fork__side h3{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:.35em}
.fork__side p{color:#D8DDE4;margin-bottom:1.35em;max-width:34ch}
.fork__tag{
  align-self:flex-start;font-family:var(--h);font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;font-size:.78rem;padding:.42em .8em;border-radius:2px;
  margin-bottom:auto;
}
.fork__side--a .fork__tag{background:rgba(237,239,242,.13);color:#fff;border:1px solid rgba(237,239,242,.28)}
.fork__side--b .fork__tag{background:var(--orange);color:#0B0B0C}

/* --- equipment ---------------------------------------------------------- */
.eq{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media (max-width:900px){.eq{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.eq{grid-template-columns:1fr}}
.eq__i{
  position:relative;isolation:isolate;aspect-ratio:16/10;
  display:flex;align-items:flex-end;padding:18px;overflow:hidden;background:var(--carbon-3);
}
.eq__i img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.06);transition:filter .35s var(--ease),transform .5s var(--ease)}
.eq__i::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,11,12,.92) 8%,rgba(11,11,12,.42) 60%,rgba(11,11,12,.25) 100%)}
.eq__i:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.05)}
.eq__i b{font-family:var(--h);font-weight:700;text-transform:uppercase;font-size:1.22rem;letter-spacing:.04em;line-height:1.1}
.eq__i span{display:block;font:400 .82rem/1.3 var(--b);color:var(--muted);margin-top:3px;text-transform:none;letter-spacing:0}

/* --- industries --------------------------------------------------------- */
.ind{display:flex;flex-wrap:wrap;gap:10px}
.ind li{
  list-style:none;
  border:1px solid var(--line);border-left:3px solid var(--orange);
  background:var(--carbon-3);padding:14px 20px;border-radius:var(--r);
  font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:1.1rem;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.ind li:hover{background:var(--carbon-4);border-color:var(--orange-edge);border-left-color:var(--orange)}

/* --- split feature ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.split--flip .split__media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--flip .split__media{order:0}}
.split__media img{border-radius:var(--r);border:1px solid var(--line-soft);width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:3/4}

/* --- ticks -------------------------------------------------------------- */
.ticks{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:32px;color:#D5DAE1}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:17px;height:9px;
  border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);
}
.ticks--2{grid-template-columns:1fr 1fr}
@media (max-width:680px){.ticks--2{grid-template-columns:1fr}}

/* --- stats -------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{background:var(--carbon-3);padding:26px 20px;text-align:center}
.stats b{display:block;font-family:var(--h);font-weight:700;font-size:clamp(2.1rem,4vw,2.9rem);color:var(--orange);line-height:1}
.stats div>span{display:block;font-size:.86rem;color:var(--muted);margin-top:7px}

/* --- testimonials ------------------------------------------------------- */
.quote{
  background:var(--carbon-3);border:1px solid var(--line-soft);border-top:3px solid var(--orange);
  border-radius:var(--r);padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px;
}
.quote blockquote{margin:0;font-size:1.04rem;color:#DDE2E8;line-height:1.6}
.quote blockquote::before{content:"\201C";font-family:var(--h);font-size:3rem;color:var(--orange);line-height:0;vertical-align:-.28em;margin-right:.1em}
.quote figcaption{font-size:.87rem;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:13px;margin-top:auto}
.quote figcaption b{display:block;color:var(--text);font-family:var(--h);font-weight:600;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}

/* --- CTA band ----------------------------------------------------------- */
.cta{background:var(--orange);color:#0B0B0C;position:relative;overflow:hidden}
.cta .chrome,.cta h2{color:#0B0B0C;-webkit-text-fill-color:#0B0B0C;background:none}
.cta p{color:#2A1105;max-width:56ch}
.cta a:not(.btn){color:#0B0B0C;text-decoration:underline}
.cta__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta .ticks .tbc,.cta .lead .tbc{background:#0B0B0C;color:#F4D03F}

/* --- forms -------------------------------------------------------------- */
.form{display:grid;gap:15px}
.form--panel{background:var(--carbon-3);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(22px,3vw,34px)}
.cta .form--panel{background:#0B0B0C;border-color:#2A1105}
/* .cta p sets on-orange brown; undo it inside the dark form panel. */
.cta .form--panel p,.cta .form--panel label,.cta .form--panel legend{color:#C7CDD5}
.cta .form--panel .hint,.cta .form--panel .form__note{color:var(--muted-2)}
.cta .form--panel .req{color:var(--orange)}
.cta .form--panel .err{color:#FF8F81}
.cta .done p{color:var(--muted)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:620px){.f-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{
  font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.85rem;color:#C7CDD5;
}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  background:var(--carbon-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r);padding:12px 13px;font:400 1rem/1.4 var(--b);width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.cta .field input,.cta .field select,.cta .field textarea{background:#141518;border-color:#33373E;color:var(--text)}
.field textarea{resize:vertical;min-height:112px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#3C424B}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);background:var(--carbon-3);outline:none;box-shadow:0 0 0 3px var(--orange-tint)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid #FFB98A;outline-offset:1px}
.field input::placeholder,.field textarea::placeholder{color:#6B727C}
.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='%23A6ADB8' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.field .hint{font-size:.79rem;color:var(--muted-2)}

.field input[type=file]{padding:9px 10px;font-size:.9rem}
.field input[type=file]::file-selector-button{
  background:var(--carbon-4);border:1px solid var(--line);color:var(--text);
  border-radius:2px;padding:7px 12px;margin-right:11px;cursor:pointer;font:600 .86rem var(--b);
}

.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#FF6B5A;background:rgba(255,107,90,.06)}
.err{display:none;font-size:.81rem;color:#FF8F81;font-weight:500}
.field.is-bad .err{display:block}

fieldset{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;margin:0;min-width:0}
.cta fieldset{border-color:#33373E}
legend{
  font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.85rem;color:#C7CDD5;padding:0 7px;
}
.radios{display:flex;flex-wrap:wrap;gap:9px}
.radios label{
  display:flex;align-items:center;gap:.5em;cursor:pointer;
  border:1px solid var(--line);background:var(--carbon-2);border-radius:var(--r);
  padding:10px 14px;font:500 .95rem var(--b);text-transform:none;letter-spacing:0;color:var(--text);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.cta .radios label{background:#141518;border-color:#33373E}
.radios label:hover{border-color:#4A515B}
.radios input{accent-color:var(--orange);width:17px;height:17px;margin:0}
.radios input:checked + span{color:#fff;font-weight:600}
.radios label:has(input:checked){border-color:var(--orange);background:var(--orange-tint)}

.form__note{font-size:.82rem;color:var(--muted-2);margin:0}

.done{
  display:none;text-align:center;padding:clamp(30px,5vw,54px) 24px;
  border:1px solid var(--orange-edge);border-radius:var(--r);background:var(--carbon-3);
}
.cta .done{background:#0B0B0C;border-color:#2A1105}
.done.is-on{display:block}
.done svg{fill:var(--orange);margin-bottom:14px}
.done h3{margin-bottom:.4em}
.done p{color:var(--muted);max-width:46ch;margin-inline:auto}
.cta .done h3,.cta .done p{color:var(--text)}
.cta .done h3{-webkit-text-fill-color:var(--text)}
.is-hidden{display:none !important}

/* --- footer ------------------------------------------------------------- */
.ftr{background:var(--carbon-2);border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 0;font-size:.94rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
@media (max-width:940px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{font-size:1.02rem;letter-spacing:.12em;color:var(--muted);margin-bottom:1.1em}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:#C4CAD3}
.ftr a:hover{color:var(--orange)}
.ftr__logo{width:210px;margin-bottom:18px}
.ftr__blurb{color:var(--muted);max-width:34ch;margin-bottom:16px}
.ftr__tel{font-family:var(--h);font-weight:700;font-size:1.55rem;color:var(--text);letter-spacing:.03em;display:inline-block;margin-bottom:4px}
.ftr__tel:hover{color:var(--orange)}
.ftr__bot{
  border-top:1px solid var(--line-soft);margin-top:clamp(32px,4vw,52px);padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  color:var(--muted-2);font-size:.85rem;
}
.ftr__bot a{color:var(--muted-2)}

/* --- reveal ------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- misc --------------------------------------------------------------- */
.panel{background:var(--carbon-3);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.panel--orange{border-left:3px solid var(--orange)}
.rule{height:1px;background:var(--line-soft);border:0;margin:clamp(30px,4vw,50px) 0}
/* Grid/flex children default to min-width:auto, so one long unbreakable
   string (an email address) can force the whole track wider than the page. */
.split>*,.grid>*,.cta__in>*,.fork>*{min-width:0}
.brk{overflow-wrap:anywhere}

.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1.05em}
