/* ============================================================
   BALASOFT SOLUTION — Design System (shared across all pages)
   Loaded AFTER Bootstrap so brand styles take precedence.
   design-taste-frontend-v1
   ============================================================ */

:root{
  --bg:#f6f2e9; --bg-2:#efe8d7; --paper:#ffffff;
  --ink:#0c0b0a; --ink-2:#2a2620; --muted:#7c7264;
  --orange:#ff5a2c; --orange-deep:#d8421a; --orange-soft:#ffd2bf; --orange-tint:#fff1ea;
  --leaf:#129a6b; --line:rgba(12,11,10,.13); --line-2:rgba(12,11,10,.07);

  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-body:"Sora", system-ui, sans-serif;
  --f-script:"Caveat", cursive;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;

  --r-sm:12px; --r-md:20px; --r-lg:30px; --r-xl:46px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* override bootstrap defaults */
  --bs-body-font-family:var(--f-body);
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--bg);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg); color:var(--ink)}
body{font-family:var(--f-body); font-size:17px; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
::selection{background:var(--orange); color:#fff}

/* ---- overlays ---- */
.grain{position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--orange); z-index:130}

/* ---- preloader ---- */
.loader{position:fixed; inset:0; z-index:200; background:var(--ink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px}
.loader__mark{width:58px; height:58px; border-radius:16px; background:var(--orange); display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); animation:markPulse 1.4s var(--ease) infinite}
.loader__mark svg{width:30px; height:30px}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
.loader__bar{width:min(280px,60vw); height:2px; background:rgba(255,255,255,.16); overflow:hidden; border-radius:2px}
.loader__bar span{display:block; height:100%; width:0%; background:var(--orange)}
.loader__count{font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.5)}

/* ============================================================
   Primitives
   ============================================================ */
.wrap{width:min(1360px,92vw); margin-inline:auto}
.section{padding:clamp(74px,10vw,150px) 0}
.eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); font-weight:500; display:inline-flex; align-items:center; gap:12px}
.eyebrow::before{content:""; width:30px; height:1.5px; background:var(--orange)}
.script{font-family:var(--f-script); color:var(--orange); font-size:34px; line-height:1; display:block}
em{font-style:italic}

h1,h2,h3,h4{font-family:var(--f-display); letter-spacing:-.03em}
h2{font-weight:700; line-height:.98; font-size:clamp(32px,4.6vw,64px)}
h2 em{font-family:var(--f-script); font-style:normal; color:var(--orange); font-weight:700; letter-spacing:0}
h3 em{font-family:var(--f-script); font-style:normal; color:var(--orange); font-weight:700}

.lead-p{color:var(--ink-2); font-size:19px; line-height:1.65; max-width:62ch}

/* ============================================================
   Nav (shared) + Bootstrap offcanvas styling
   ============================================================ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0; transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease); border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(246,242,233,.82); backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--line); padding:12px 0}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav__logo{display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-.02em}
.nav__logo-mark{width:34px; height:34px; border-radius:10px; background:var(--ink); display:grid; place-items:center; flex:0 0 auto; transition:transform .5s var(--spring)}
.nav__logo:hover .nav__logo-mark{transform:rotate(-10deg) scale(1.06)}
.nav__logo-mark svg{width:19px; height:19px}
.nav__links{display:flex; gap:6px}
.nav__links a{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; padding:9px 15px; border-radius:30px; position:relative; color:var(--ink-2); transition:color .25s var(--ease); z-index:0}
.nav__links a::after{content:""; position:absolute; inset:0; border-radius:30px; background:var(--ink); transform:scale(.6); opacity:0; transition:transform .4s var(--spring), opacity .3s var(--ease); z-index:-1}
.nav__links a:hover,.nav__links a.is-active{color:#fff}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scale(1); opacity:1}
.nav__cta{display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff; padding:11px 19px; border-radius:40px; font-size:13.5px; font-weight:500; will-change:transform}
.nav__cta .dot{width:7px; height:7px; border-radius:50%; background:var(--orange); animation:blink 1.8s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.nav__burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:transparent; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav__burger span{width:18px; height:1.8px; background:var(--ink)}

/* bootstrap offcanvas, brand styled */
.offcanvas.bs-menu{background:var(--ink); color:#fff; width:min(420px,86vw)}
.offcanvas.bs-menu .offcanvas-header{padding:24px 30px}
.offcanvas.bs-menu .btn-close{filter:invert(1) grayscale(1); opacity:.7}
.offcanvas.bs-menu .offcanvas-body{padding:10px 30px 40px; display:flex; flex-direction:column; justify-content:center}
.bs-menu a.m-link{font-family:var(--f-display); font-weight:700; font-size:clamp(34px,9vw,54px); letter-spacing:-.03em; line-height:1.15; color:#fff; opacity:.92; transition:color .25s, padding .3s var(--ease)}
.bs-menu a.m-link:hover{color:var(--orange); padding-left:10px}
.bs-menu a.m-link.is-active{color:var(--orange)}
.bs-menu__foot{margin-top:36px; font-family:var(--f-mono); font-size:13px; color:rgba(255,255,255,.5); line-height:1.9}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary,.btn-outline,.btn-light-pill{will-change:transform}
.btn-primary{display:inline-flex; align-items:center; gap:14px; background:var(--ink); color:#fff; padding:16px 16px 16px 26px; border-radius:46px; font-weight:500; font-size:15.5px; border:0; transition:transform .15s var(--ease)}
.btn-primary .arrow{width:34px; height:34px; border-radius:50%; background:var(--orange); display:grid; place-items:center; transition:transform .4s var(--spring)}
.btn-primary:hover{color:#fff} .btn-primary:hover .arrow{transform:rotate(45deg)}
.btn-primary:active{transform:scale(.97)}
.btn-outline{display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:46px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-weight:500; font-size:15.5px; transition:background .3s var(--ease), color .3s var(--ease), transform .15s var(--ease)}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-outline:active{transform:scale(.97)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap}

/* ============================================================
   HOME — Hero
   ============================================================ */
.hero{position:relative; min-height:100dvh; display:flex; align-items:flex-end; padding-bottom:46px; padding-top:130px; overflow:hidden}
.hero__top{display:flex; gap:30px; justify-content:space-between; align-items:baseline; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:42px}
.hero__since,.hero__locale{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.hero__since b{color:var(--orange)}
.hero__locale{display:inline-flex; align-items:center; gap:9px}
.hero__locale .d{width:8px; height:8px; border-radius:50%; background:var(--leaf); animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(18,154,107,.5)}70%{box-shadow:0 0 0 8px rgba(18,154,107,0)}100%{box-shadow:0 0 0 0 rgba(18,154,107,0)}}
.hero__contact{font-family:var(--f-mono); font-size:12.5px; text-align:right; line-height:1.7; color:var(--ink-2)}
.hero__contact a:hover{color:var(--orange)}
.hero__main{display:grid; grid-template-columns:1.18fr .82fr; gap:30px; align-items:end}
.hero__headline{font-family:var(--f-display); font-weight:800; letter-spacing:-.045em; line-height:.86; font-size:clamp(52px,9.4vw,148px); text-transform:lowercase; margin:22px 0 0}
.hero__headline .l{display:block; overflow:hidden}
.hero__headline .l>span{display:block; will-change:transform}
.hero__headline .into{font-family:var(--f-script); font-weight:700; color:var(--orange); text-transform:none; font-size:.82em; letter-spacing:0; padding:0 .12em}
.hero__headline .pill{display:inline-block; background:var(--orange); color:#fff; padding:.02em .26em .12em; border-radius:.28em; transform:rotate(-2deg); box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}
.hero__intro{display:flex; gap:18px; margin-top:34px; max-width:560px}
.hero__intro .bar{width:42px; height:3px; background:var(--orange); margin-top:13px; flex:0 0 auto}
.hero__intro p{color:var(--ink-2); font-size:17.5px; line-height:1.6}
.hero__intro b{color:var(--ink); font-weight:600}
.hero__cta-row{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.hero__metrics{display:flex; gap:38px; margin-top:30px; flex-wrap:wrap}
.metric .num{font-family:var(--f-display); font-weight:800; font-size:clamp(34px,4vw,52px); letter-spacing:-.03em; line-height:1}
.metric .num em{font-style:normal; color:var(--orange); font-size:.55em; font-family:var(--f-mono); font-weight:600}
.metric .lbl{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:7px}

.hero__right{position:relative; align-self:stretch; min-height:430px}
.stage{position:absolute; inset:0; perspective:1400px}
.scene{position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d}
.scene__inner{transform-style:preserve-3d; transform:rotateX(54deg) rotateZ(-40deg); will-change:transform}
.server{position:absolute; transform:translate(-120px,-30px); display:flex; flex-direction:column; gap:7px; transform-style:preserve-3d}
.server u{display:block; width:74px; height:24px; background:var(--ink); border-radius:5px; position:relative; box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.server u::after{content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--leaf); animation:srv 1.6s steps(1) infinite}
.server u:nth-child(2)::after{animation-delay:.5s; background:var(--orange)}
.server u:nth-child(3)::after{animation-delay:1s}
@keyframes srv{0%,60%{opacity:1}61%,100%{opacity:.25}}
.laptop{position:relative; transform-style:preserve-3d}
.laptop__base{width:230px; height:158px; background:linear-gradient(135deg,#1a1714,#0c0b0a); border-radius:10px; box-shadow:0 40px 60px -30px rgba(0,0,0,.6); padding:16px}
.laptop__scr{position:absolute; inset:0; transform-origin:top; transform:rotateX(-92deg) translateZ(2px); width:230px; height:158px}
.laptop__scr .panel{width:100%; height:100%; background:#0c0b0a; border-radius:10px; padding:14px; box-shadow:0 -22px 40px -18px rgba(0,0,0,.55)}
.dots{display:flex; gap:5px; margin-bottom:11px}
.dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22)}
.dots i:first-child{background:var(--orange)}
.code{font-family:var(--f-mono); font-size:9px; line-height:1.75; color:rgba(255,255,255,.6)}
.code .k{color:#ffb37a} .code .s{color:#7fd1a8} .code .c{color:rgba(255,255,255,.3)}
.code .typed::after{content:"▌"; color:var(--orange); animation:cb .8s steps(1) infinite}
@keyframes cb{50%{opacity:0}}
.laptop__keys{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-top:6px}
.laptop__keys span{height:8px; background:rgba(255,255,255,.07); border-radius:2px}
.phone{position:absolute; transform:translate(120px,70px) translateZ(40px); transform-style:preserve-3d}
.phone__body{width:62px; height:120px; background:linear-gradient(135deg,#1a1714,#0c0b0a); border-radius:13px; padding:5px; box-shadow:0 30px 40px -22px rgba(0,0,0,.6)}
.phone__scr{width:100%; height:100%; background:var(--orange); border-radius:9px; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:7px; align-content:start}
.phone__scr span{height:13px; background:rgba(255,255,255,.85); border-radius:3px}
.phone__scr span:first-child{grid-column:1/-1; height:8px; background:rgba(255,255,255,.5)}
.float-card{position:absolute; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:13px 17px; box-shadow:0 24px 40px -22px rgba(12,11,10,.28); z-index:5; will-change:transform}
.float-card .l{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.float-card .v{font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:-.02em; margin-top:3px}
.float-card--a{top:8%; left:-4%; animation:fl 5s ease-in-out infinite} .float-card--a .v{color:var(--leaf)}
.float-card--b{bottom:14%; right:-2%; animation:fl 6s ease-in-out infinite .8s} .float-card--b .v{color:var(--orange)}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero__corner{position:absolute; top:0; right:0; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:7px}
.hero__corner .d{width:6px; height:6px; border-radius:50%; background:var(--leaf); animation:blink 1.6s infinite}

/* ============================================================
   Marquees
   ============================================================ */
.ticker{border-block:1px solid var(--line); background:var(--ink); color:#fff; padding:22px 0; overflow:hidden; white-space:nowrap}
.ticker__track{display:inline-flex; will-change:transform}
.ticker__item{font-family:var(--f-display); font-weight:700; font-size:clamp(24px,3vw,40px); letter-spacing:-.02em; display:inline-flex; align-items:center; text-transform:lowercase}
.ticker__item::after{content:""; width:11px; height:11px; border-radius:50%; background:var(--orange); margin:0 38px}
.tech-row{overflow:hidden; white-space:nowrap; border-block:1px solid var(--line); padding:18px 0}
.tech-row+.tech-row{border-top:0}
.tech-track{display:inline-flex; will-change:transform}
.tech-track span{font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.4vw,32px); letter-spacing:-.02em; color:var(--ink-2); display:inline-flex; align-items:center; padding:0 32px; transition:color .3s}
.tech-track span:hover{color:var(--orange)}
.tech-track span::after{content:"/"; color:var(--line); margin-left:32px; font-weight:400}

/* ============================================================
   About (home) + pillars
   ============================================================ */
.about__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start}
.about__head h2{margin-top:14px}
.about__copy{padding-top:8px}
.about__copy p{color:var(--ink-2); margin-bottom:20px; max-width:60ch}
.about__copy .lead{color:var(--ink); font-weight:600; font-size:20px}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); margin-top:80px; border-top:1px solid var(--line)}
.pillar{padding:34px 30px 34px 0; border-right:1px solid var(--line); position:relative}
.pillar:last-child{border-right:0}
.pillar .ic{font-family:var(--f-mono); font-size:13px; color:var(--orange); letter-spacing:.1em}
.pillar h4{font-weight:700; font-size:22px; line-height:1.12; margin:16px 0 12px}
.pillar p{color:var(--muted); font-size:15px; max-width:34ch}
.pillar::after{content:""; position:absolute; left:0; bottom:-1px; width:0; height:3px; background:var(--orange); transition:width .5s var(--ease)}
.pillar:hover::after{width:60px}

/* ============================================================
   Services bento
   ============================================================ */
.head-2col{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; margin-bottom:54px}
.head-2col p{color:var(--muted); max-width:44ch}
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; grid-auto-rows:minmax(170px,auto)}
.card{position:relative; border-radius:var(--r-lg); padding:30px; overflow:hidden; background:var(--paper); border:1px solid var(--line); transition:transform .5s var(--spring), box-shadow .5s var(--ease); will-change:transform; display:flex; flex-direction:column}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .4s var(--ease); background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(255,90,44,.14), transparent 60%)}
.card:hover::before{opacity:1}
.card:hover{box-shadow:0 36px 60px -34px rgba(12,11,10,.34)}
.card__num{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card__title{font-weight:700; font-size:clamp(22px,2.3vw,30px); line-height:1.05; margin:14px 0 12px}
.card__desc{color:var(--muted); font-size:15px; max-width:40ch; flex:1}
.card__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px}
.card__tags span{font-family:var(--f-mono); font-size:10.5px; padding:6px 11px; border-radius:30px; border:1px solid var(--line); color:var(--ink-2)}
.card__link{font-family:var(--f-mono); font-size:12.5px; margin-top:18px; display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-weight:500}
.card__link svg{width:13px; height:13px; transition:transform .4s var(--spring)}
.card:hover .card__link svg{transform:translateX(5px)}
.card--wide{grid-column:span 4} .card--mid{grid-column:span 2} .card--full{grid-column:span 6}
.card--ink{background:var(--ink); color:#fff; grid-row:span 2}
.card--ink .card__desc{color:rgba(255,255,255,.6)}
.card--ink .card__tags span{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.8)}
.card--ink .card__link{color:var(--orange-soft)} .card--ink .card__title em{font-family:var(--f-script); color:var(--orange-soft)}
.card--orange{background:var(--orange); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.card--orange .card__desc{color:rgba(255,255,255,.82)} .card--orange .card__num{color:rgba(255,255,255,.7)}
.card--orange .card__tags span{border-color:rgba(255,255,255,.3); color:#fff} .card--orange .card__link{color:#fff}
.card--orange::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%)}
.art-code{margin-top:auto; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; font-family:var(--f-mono); font-size:12px; line-height:1.85}
.art-code .prompt{color:rgba(255,255,255,.45)}
.art-code .typed-line{color:#fff; min-height:1.85em}
.art-code .typed-line::after{content:"▌"; color:var(--orange); animation:cb .8s steps(1) infinite}
.art-globe{position:absolute; right:-24px; bottom:-24px; width:130px; height:130px; opacity:.9}
.art-globe .ring{position:absolute; inset:0; border:1.5px solid var(--line); border-radius:50%}
.art-globe .ring:nth-child(2){inset:18px; animation:spin 8s linear infinite}
.art-globe .ring:nth-child(3){inset:36px; border-color:var(--orange); border-style:dashed; animation:spin 5s linear infinite reverse}
.art-globe .core{position:absolute; inset:54px; border-radius:50%; background:var(--orange); box-shadow:0 0 24px rgba(255,90,44,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
.art-host{display:flex; flex-direction:column; gap:6px; margin-top:auto}
.art-host u{height:14px; background:rgba(255,255,255,.16); border-radius:4px; position:relative; overflow:hidden}
.art-host u::after{content:""; position:absolute; inset:0; width:40%; background:rgba(255,255,255,.45); filter:blur(2px); animation:scan 2.2s var(--ease) infinite}
.art-host u:nth-child(2)::after{animation-delay:.4s} .art-host u:nth-child(3)::after{animation-delay:.8s}
@keyframes scan{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.art-device{display:flex; align-items:flex-end; gap:12px; margin-top:auto; height:90px}
.art-device .lap{flex:1; height:64px; background:var(--ink); border-radius:8px 8px 2px 2px; padding:8px; display:flex; flex-direction:column; gap:5px}
.art-device .lap i{height:5px; background:rgba(255,255,255,.18); border-radius:3px} .art-device .lap i:nth-child(1){width:70%; background:var(--orange)}
.art-device .ph{width:34px; height:78px; background:var(--ink); border-radius:9px; padding:5px; display:flex; flex-direction:column; gap:4px}
.art-device .ph i{height:9px; background:rgba(255,255,255,.18); border-radius:2px}
.art-chart{position:relative; height:100%; min-height:170px; display:flex; align-items:flex-end; gap:9px}
.art-chart .bar{flex:1; background:var(--bg-2); border-radius:7px 7px 0 0; transform-origin:bottom; transform:scaleY(.15)}
.art-chart .bar:last-child{background:var(--orange)}
.art-chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.art-chart path{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round}

/* ============================================================
   Process / timeline (horizontal)
   ============================================================ */
.process{position:relative}
.process__line{position:absolute; left:0; right:0; top:54px; height:2px; pointer-events:none}
.process__line svg{width:100%; height:2px; overflow:visible}
.process__line path{fill:none; stroke:var(--orange); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1}
.process__steps{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; position:relative}
.step .dot{width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--ink); position:relative; z-index:2; transition:background .3s, transform .3s var(--spring)}
.step:hover .dot{background:var(--orange); border-color:var(--orange); transform:scale(1.3)}
.step__num{font-family:var(--f-mono); font-size:12px; color:var(--orange); letter-spacing:.1em; margin:24px 0 10px}
.step h4{font-weight:700; font-size:19px; margin-bottom:8px}
.step p{color:var(--muted); font-size:14px; line-height:1.5}
@media(max-width:900px){.process__line{display:none}}

/* ============================================================
   Testimonials
   ============================================================ */
.testi{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(46px,7vw,90px); position:relative; overflow:hidden}
.testi__mark{position:absolute; top:-30px; right:30px; font-family:var(--f-display); font-weight:800; font-size:300px; color:rgba(255,255,255,.04); line-height:1; pointer-events:none}
.testi .eyebrow{color:#fff} .testi .eyebrow::before{background:var(--orange)}
.testi__stage{position:relative; min-height:230px; margin-top:36px}
.testi__item{position:absolute; inset:0; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none}
.testi__item.is-active{opacity:1; transform:none; pointer-events:auto; position:relative}
.testi__quote{font-family:var(--f-display); font-weight:600; font-size:clamp(24px,3.4vw,44px); line-height:1.15; max-width:18ch}
.testi__quote em{font-family:var(--f-script); font-style:normal; color:var(--orange)}
.testi__foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:40px; flex-wrap:wrap; gap:24px}
.testi__author{display:flex; align-items:center; gap:14px}
.testi__author img{width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2)}
.testi__author strong{display:block; font-weight:600; font-size:16px}
.testi__author span{font-family:var(--f-mono); font-size:12px; color:rgba(255,255,255,.5)}
.testi__nav{display:flex; align-items:center; gap:16px}
.testi__nav button{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; display:grid; place-items:center; transition:background .3s, color .3s, transform .15s}
.testi__nav button:hover{background:#fff; color:var(--ink)} .testi__nav button:active{transform:scale(.92)}
.testi__count{font-family:var(--f-mono); font-size:13px; color:rgba(255,255,255,.5)}

/* ============================================================
   CTA + contact strip
   ============================================================ */
.cta{text-align:center}
.cta .eyebrow{justify-content:center}
.cta__giant{font-family:var(--f-display); font-weight:800; letter-spacing:-.045em; line-height:.94; font-size:clamp(44px,8vw,118px); margin-top:24px}
.cta__giant em{font-family:var(--f-script); font-style:normal; color:var(--orange); font-weight:700}
.cta__sub{color:var(--ink-2); max-width:52ch; margin:26px auto 0; font-size:17.5px}
.cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.cta__strip{display:grid; grid-template-columns:repeat(4,1fr); margin-top:80px; border-top:1px solid var(--line); text-align:left}
.cta__strip>div{padding:30px 24px 0; border-right:1px solid var(--line)}
.cta__strip>div:last-child{border-right:0}
.cta__strip .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.cta__strip .v{font-weight:600; margin-top:12px; line-height:1.5}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--ink); color:#fff; padding:80px 0 36px; overflow:hidden}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.footer__brand .nav__logo{color:#fff} .footer__brand .nav__logo-mark{background:var(--orange)}
.footer__brand p{color:rgba(255,255,255,.55); max-width:34ch; margin-top:18px; font-size:15px}
.footer h4{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:18px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:11px; padding:0; margin:0}
.footer li,.footer li a{color:rgba(255,255,255,.72); font-size:15px; transition:color .25s}
.footer li a:hover{color:var(--orange)}
.footer__big{font-family:var(--f-display); font-weight:800; font-size:clamp(60px,17vw,250px); letter-spacing:-.05em; line-height:.8; margin:60px 0 30px; color:rgba(255,255,255,.06); text-align:center; user-select:none}
.footer__big em{color:var(--orange); font-style:normal}
.footer__bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-family:var(--f-mono); font-size:12px; color:rgba(255,255,255,.45)}

/* ============================================================
   INNER PAGES — sub hero
   ============================================================ */
.subhero{position:relative; padding:170px 0 70px; overflow:hidden}
.subhero::after{content:""; position:absolute; right:-6%; top:20%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,90,44,.14), transparent 65%); pointer-events:none}
.crumb{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; gap:10px; align-items:center}
.crumb a:hover{color:var(--orange)} .crumb span{color:var(--orange)}
.subhero h1{font-weight:800; letter-spacing:-.045em; line-height:.92; font-size:clamp(46px,7.5vw,108px); margin:26px 0 0; max-width:16ch}
.subhero h1 em{font-family:var(--f-script); font-style:normal; color:var(--orange); font-weight:700}
.subhero .sub{margin-top:26px; max-width:60ch; color:var(--ink-2); font-size:19px; line-height:1.6}
.subhero__meta{display:flex; gap:40px; margin-top:42px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line)}
.subhero__meta .m .n{font-family:var(--f-display); font-weight:800; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em}
.subhero__meta .m .n em{font-style:normal; color:var(--orange); font-size:.5em; font-family:var(--f-mono)}
.subhero__meta .m .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:6px}

/* prose / split text */
.split-block{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start}
.split-block .sticky-h{position:sticky; top:120px}
.prose p{color:var(--ink-2); margin-bottom:22px; max-width:64ch; line-height:1.7}
.prose p:last-child{margin-bottom:0}

/* mission/vision duo */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.duo .panel{border-radius:var(--r-lg); padding:42px; border:1px solid var(--line); background:var(--paper)}
.duo .panel.ink{background:var(--ink); color:#fff}
.duo .panel .k{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:18px; display:block}
.duo .panel h3{font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.05; margin-bottom:18px}
.duo .panel p{color:var(--ink-2); line-height:1.65}
.duo .panel.ink p{color:rgba(255,255,255,.62)}
.duo .panel ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:11px}
.duo .panel ul li{position:relative; padding-left:24px; color:rgba(255,255,255,.72); font-size:15px}
.duo .panel ul li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--orange)}

/* values grid (asymmetric, divider style) */
.values{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.value{padding:38px 32px 38px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative}
.value:nth-child(3n){border-right:0; padding-right:0}
.value .n{font-family:var(--f-mono); font-size:13px; color:var(--orange); letter-spacing:.1em}
.value h4{font-weight:700; font-size:22px; line-height:1.12; margin:18px 0 12px}
.value .k{font-family:var(--f-script); color:var(--orange); font-size:21px; display:block; margin-bottom:8px}
.value p{color:var(--muted); font-size:15px; max-width:36ch; line-height:1.55}

/* stats band */
.statband{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(46px,6vw,72px)}
.statband .eyebrow{color:#fff} .statband .eyebrow::before{background:var(--orange)}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:40px}
.statgrid .s{padding:24px 24px 24px 0; border-right:1px solid rgba(255,255,255,.12)}
.statgrid .s:nth-child(4n){border-right:0}
.statgrid .s .n{font-family:var(--f-display); font-weight:800; font-size:clamp(34px,4vw,56px); letter-spacing:-.03em; line-height:1}
.statgrid .s .n em{font-style:normal; color:var(--orange); font-size:.5em; font-family:var(--f-mono)}
.statgrid .s .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:10px}

/* expertise / team list */
.expertise{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line)}
.xp{display:flex; gap:20px; padding:30px 30px 30px 0; border-bottom:1px solid var(--line); align-items:flex-start}
.xp:nth-child(odd){border-right:1px solid var(--line)}
.xp .ic{width:46px; height:46px; flex:0 0 auto; border-radius:13px; background:var(--orange-tint); display:grid; place-items:center; color:var(--orange)}
.xp .ic svg{width:22px; height:22px}
.xp h4{font-weight:700; font-size:18px; margin-bottom:6px} .xp p{color:var(--muted); font-size:14.5px; line-height:1.5}

/* industries grid */
.industries{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ind{border:1px solid var(--line); border-radius:var(--r-md); padding:24px; background:var(--paper); transition:transform .4s var(--spring), border-color .3s; position:relative; overflow:hidden}
.ind:hover{transform:translateY(-5px); border-color:var(--orange)}
.ind .n{font-family:var(--f-mono); font-size:12px; color:var(--orange)}
.ind h4{font-weight:700; font-size:18px; margin:12px 0 8px}
.ind p{color:var(--muted); font-size:13.5px; line-height:1.5}

/* certifications chips */
.certs{display:flex; flex-wrap:wrap; gap:12px}
.cert{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:40px; padding:11px 18px; font-size:14px; background:var(--paper)}
.cert .d{width:8px; height:8px; border-radius:50%; background:var(--leaf)}

/* service detail (zig-zag) */
.svc-detail{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:clamp(50px,7vw,90px) 0; border-bottom:1px solid var(--line)}
.svc-detail:nth-child(even) .svc-detail__media{order:-1}
.svc-detail__num{font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.svc-detail h2{font-size:clamp(30px,4vw,52px); margin:16px 0 18px}
.svc-detail .desc{color:var(--ink-2); font-size:18px; line-height:1.6; max-width:50ch}
.feat-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:26px}
.feat-list li{list-style:none; position:relative; padding-left:26px; color:var(--ink-2); font-size:14.5px; line-height:1.5}
.feat-list li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--orange); transform:rotate(45deg)}
.svc-detail__media{position:relative; min-height:320px; border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; padding:36px}
.svc-detail__media.ink{background:var(--ink)}

/* plan cards */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.plan{border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; background:var(--paper); display:flex; flex-direction:column; transition:transform .45s var(--spring), box-shadow .4s, border-color .3s; position:relative}
.plan:hover{transform:translateY(-6px); box-shadow:0 36px 60px -34px rgba(12,11,10,.28)}
.plan.feature{background:var(--ink); color:#fff; border-color:var(--ink)}
.plan.feature .plan__name{color:#fff} .plan.feature p{color:rgba(255,255,255,.6)}
.plan.feature .plan__feats li{color:rgba(255,255,255,.78)}
.plan__badge{position:absolute; top:18px; right:18px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--orange); color:#fff; padding:5px 11px; border-radius:30px}
.plan__name{font-weight:700; font-size:22px; margin-bottom:6px}
.plan p{color:var(--muted); font-size:14px; line-height:1.5; min-height:42px}
.plan__feats{list-style:none; padding:0; margin:20px 0 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.plan__feats li{position:relative; padding-left:22px; font-size:14px; color:var(--ink-2)}
.plan__feats li::before{content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--orange)}
.plan .btn-outline{justify-content:center; padding:13px 20px}
.plan.feature .btn-outline{border-color:rgba(255,255,255,.3); color:#fff} .plan.feature .btn-outline:hover{background:#fff; color:var(--ink)}

/* vertical timeline (what happens next) */
.vtimeline{position:relative; margin-left:8px}
.vtimeline::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--line)}
.vstep{position:relative; padding:0 0 38px 44px}
.vstep:last-child{padding-bottom:0}
.vstep .dot{position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px var(--bg)}
.vstep .when{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange)}
.vstep h4{font-weight:700; font-size:20px; margin:8px 0 8px} .vstep p{color:var(--muted); font-size:15px; max-width:48ch; line-height:1.55}

/* ============================================================
   Accordion (FAQ) — over Bootstrap
   ============================================================ */
.faq{max-width:880px}
.accordion.bs-faq{--bs-accordion-bg:transparent; --bs-accordion-border-color:var(--line); --bs-accordion-border-width:0 0 1px 0; --bs-accordion-border-radius:0; --bs-accordion-btn-padding-x:0; --bs-accordion-btn-padding-y:26px; --bs-accordion-active-bg:transparent; --bs-accordion-active-color:var(--ink); --bs-accordion-btn-focus-box-shadow:none}
.accordion.bs-faq .accordion-item{background:transparent}
.accordion.bs-faq .accordion-button{font-family:var(--f-display); font-weight:700; font-size:clamp(18px,2vw,23px); color:var(--ink); letter-spacing:-.02em; box-shadow:none}
.accordion.bs-faq .accordion-button::after{width:20px; height:20px; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23ff5a2c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.accordion.bs-faq .accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10' stroke='%23ff5a2c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); transform:none}
.accordion.bs-faq .accordion-body{padding:0 40px 26px 0; color:var(--ink-2); line-height:1.65; max-width:70ch}

/* ============================================================
   Contact methods + form
   ============================================================ */
.methods{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.method{display:flex; gap:18px; padding:28px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); transition:transform .4s var(--spring), border-color .3s; align-items:flex-start}
.method:hover{transform:translateY(-5px); border-color:var(--orange)}
.method .ic{width:50px; height:50px; flex:0 0 auto; border-radius:14px; background:var(--ink); color:#fff; display:grid; place-items:center}
.method .ic svg{width:23px; height:23px}
.method h4{font-weight:700; font-size:19px; margin-bottom:4px}
.method .big{font-family:var(--f-mono); font-size:16px; color:var(--orange); margin:6px 0 8px; word-break:break-word}
.method p{color:var(--muted); font-size:13.5px; line-height:1.45}
.method .best{font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:8px; letter-spacing:.04em}

.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start}
.contact-aside .infoline{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.contact-aside .infoline:first-child{padding-top:0}
.contact-aside .infoline .ic{color:var(--orange)} .contact-aside .infoline .ic svg{width:20px; height:20px}
.contact-aside .infoline .l{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.contact-aside .infoline .v{font-weight:600; margin-top:3px; line-height:1.5}

/* form — styled over bootstrap controls */
.cform{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,4vw,46px)}
.cform .row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.field label{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.field label .req{color:var(--orange)}
.field .form-control,.field .form-select{font-family:var(--f-body); font-size:15px; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); transition:border-color .25s, background .25s; box-shadow:none}
.field .form-control:focus,.field .form-select:focus{border-color:var(--orange); background:var(--paper); box-shadow:none; outline:none}
.field textarea.form-control{min-height:120px; resize:vertical}
.field .help{font-family:var(--f-mono); font-size:11px; color:var(--muted)}
.field .err{font-family:var(--f-mono); font-size:11.5px; color:var(--orange-deep); display:none}
.field.invalid .form-control,.field.invalid .form-select{border-color:var(--orange-deep)}
.field.invalid .err{display:block}
.cform .check{display:flex; gap:10px; align-items:flex-start; margin:6px 0 22px; font-size:14px; color:var(--ink-2)}
.cform .check input{margin-top:4px; accent-color:var(--orange); width:16px; height:16px}
.cform .submit-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.form-note{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.form-success{display:none; align-items:center; gap:14px; background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:26px 30px; margin-top:8px}
.form-success.show{display:flex}
.form-success .ic{width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:var(--leaf); display:grid; place-items:center}
.form-success .ic svg{width:22px; height:22px}
.form-success h4{font-weight:700; font-size:18px; margin-bottom:3px} .form-success p{color:rgba(255,255,255,.6); font-size:14px}

/* map placeholder */
.map{position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); min-height:340px; background:
  repeating-linear-gradient(0deg, var(--line-2) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 44px), var(--bg-2)}
.map__pin{position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:8px}
.map__pin .dot{width:18px; height:18px; border-radius:50%; background:var(--orange); border:3px solid #fff; box-shadow:0 6px 16px rgba(255,90,44,.5); position:relative}
.map__pin .dot::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--orange); animation:ping 2s var(--ease) infinite}
.map__pin .tag{background:var(--ink); color:#fff; font-family:var(--f-mono); font-size:12px; padding:8px 14px; border-radius:30px; white-space:nowrap}
.map__chip{position:absolute; left:24px; bottom:24px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; font-size:14px; max-width:240px}
.map__chip b{display:block; font-family:var(--f-display); font-weight:700; margin-bottom:3px}

/* areas + social */
.areas{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.area-col h4{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:16px}
.area-col ul{list-style:none; padding:0; margin:0; columns:2; column-gap:18px}
.area-col li{padding:7px 0; color:var(--ink-2); font-size:14.5px; break-inside:avoid}
.socials{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.social{width:48px; height:48px; border-radius:14px; border:1px solid var(--line); display:grid; place-items:center; background:var(--paper); transition:background .3s, color .3s, transform .15s; color:var(--ink)}
.social:hover{background:var(--ink); color:#fff; transform:translateY(-3px)}
.social svg{width:20px; height:20px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .hero__main{grid-template-columns:1fr; gap:50px}
  .hero__right{min-height:360px; display:none}
  .about__grid,.split-block{grid-template-columns:1fr; gap:34px}
  .split-block .sticky-h{position:static}
  .head-2col{grid-template-columns:1fr; gap:24px}
  .card--wide,.card--mid{grid-column:span 3}
  .card--ink{grid-column:span 6; grid-row:auto}
  .bento{grid-auto-rows:auto}
  .process__steps{grid-template-columns:repeat(2,1fr); gap:30px}
  .duo,.svc-detail,.contact-grid{grid-template-columns:1fr; gap:28px}
  .svc-detail:nth-child(even) .svc-detail__media{order:0}
  .values,.statgrid,.industries,.plans,.expertise,.methods,.areas{grid-template-columns:repeat(2,1fr)}
  .statgrid .s:nth-child(2n),.expertise .xp:nth-child(odd){border-right:0}
  .value:nth-child(3n){border-right:1px solid var(--line); padding-right:32px}
  .value:nth-child(2n){border-right:0; padding-right:0}
}
@media(max-width:768px){
  body{font-size:16px}
  .hero{padding-top:110px} .hero__top{gap:14px} .hero__contact{text-align:left}
  .pillars,.values,.statgrid,.industries,.plans,.expertise,.methods,.areas,.footer__grid,.cta__strip,.feat-list,.cform .row-2,.area-col ul{grid-template-columns:1fr !important; columns:1 !important}
  .pillar{border-right:0; border-bottom:1px solid var(--line); padding-right:0; padding-block:26px}
  .pillar:last-child{border-bottom:0}
  .bento{grid-template-columns:1fr}
  .card--wide,.card--mid,.card--full,.card--ink{grid-column:span 1}
  .card--full{display:flex !important}
  .process__steps{grid-template-columns:1fr}
  .value,.statgrid .s,.expertise .xp{border-right:0 !important; padding-right:0 !important}
  .footer__grid{grid-template-columns:1fr 1fr}
  .cta__strip>div{border-right:0; border-bottom:1px solid var(--line); padding-bottom:24px}
  .svc-detail{padding:46px 0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}