/* VOST — Verve Oil Services and Technology
   Brand: Obsidian Black #0A0A0A · Copper Gold #B87333 · Emerald Teal #00836F
          Electric Cyan #00E6FF · Warm Ivory #F5EFE3 · Manrope + Inter */

:root{
 --black:#0A0A0A;--copper:#B87333;--copper2:#E2A763;--teal:#00836F;--cyan:#00E6FF;--ivory:#F5EFE3;
 --line:rgba(245,239,227,.12);--line2:rgba(245,239,227,.07);
 --body:#c4c6c2;--dim:#9ea29e;--muted:#8d918d;--kicker:#62d7d3;
 --radius:14px;--shadow:0 30px 80px rgba(0,0,0,.35);
 --shell:min(1180px,calc(100vw - 48px));
 --header-h:78px;--anchor:calc(var(--header-h) + 40px);
 --sp:120px;               /* section rhythm */

 /* Motion system — industrial luxury */
 --ease-premium:cubic-bezier(.16,1,.3,1);
 --ease-out:cubic-bezier(.22,1,.36,1);
 --motion-fast:.22s;
 --motion-normal:.55s;
 --motion-slow:.9s;
 --reveal-y:28px;
 --stagger:.07s;
 --hover-scale:1.02;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ivory);font-family:Inter,Arial,sans-serif;
 font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
 background:radial-gradient(circle at 15% 12%,rgba(184,115,51,.07),transparent 30%),
            radial-gradient(circle at 86% 18%,rgba(0,230,255,.06),transparent 26%),
            linear-gradient(180deg,#090a09,#0c0e0d 46%,#090a09)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.shell{width:var(--shell);margin:auto}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;margin:0 0 18px;font-weight:500}
h1{font-size:clamp(42px,5.2vw,74px);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.04em;line-height:1.1}
h3{font-size:19px;letter-spacing:-.025em;line-height:1.2;font-weight:600}
h4{font-size:15px;letter-spacing:-.015em;line-height:1.25;font-weight:600}
p{color:var(--body);margin:0 0 18px}
p:last-child{margin-bottom:0}
.muted{color:var(--muted)}

/* Kicker label — sits above every section heading. */
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--kicker);text-transform:uppercase;
 letter-spacing:.2em;font-size:11px;font-weight:600;line-height:1;margin-bottom:20px}
/* Larger eyebrow in the hero for visibility */
.hero-copy .eyebrow{font-size:13px;letter-spacing:.18em}
.eyebrow:before{content:"";width:18px;height:1px;background:var(--copper);flex:none}

/* ------------------------------------------------------------------ CTAs */
.text-link{display:inline-flex;align-items:center;color:var(--kicker);font-weight:600;font-size:11px;
 text-transform:uppercase;letter-spacing:.16em;margin-top:20px;transition:color var(--motion-fast) var(--ease-premium)}
.text-link:after{content:"↳";margin-inline-start:9px;font-size:13px;transition:transform var(--motion-fast) var(--ease-premium)}
.text-link:hover{color:#fff}
.text-link:hover:after{transform:translateX(3px)}

.cta-box{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
 border:1px solid rgba(0,230,255,.4);background:rgba(0,230,255,.04);color:var(--ivory);cursor:pointer;
 font-family:inherit;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;
 transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),
  transform var(--motion-fast) var(--ease-premium),box-shadow var(--motion-fast)}
.cta-box:after{content:"↳";margin-inline-start:11px;font-size:13px;transition:transform var(--motion-fast) var(--ease-premium)}
.cta-box:hover{background:rgba(0,230,255,.1);border-color:var(--cyan);color:#fff;
 transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,230,255,.08)}
.cta-box:hover:after{transform:translateX(4px)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
 font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
 border:1px solid transparent;transition:transform var(--motion-fast) var(--ease-premium),filter var(--motion-fast),box-shadow var(--motion-fast)}
.btn-primary{color:#09100d;background:linear-gradient(110deg,var(--copper2),var(--cyan));
 background-size:140% 140%;background-position:0% 50%}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,230,255,.18);
 background-position:100% 50%}
.btn-small{min-height:38px;padding:0 15px}

:where(a,button,summary,input,textarea):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.55);backdrop-filter:blur(12px);
 border-bottom:1px solid transparent;transition:background var(--motion-normal) var(--ease-premium),
 border-color var(--motion-normal) var(--ease-premium),box-shadow var(--motion-normal) var(--ease-premium)}
.site-header.is-scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(20px);
 border-bottom-color:var(--line2);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.nav-shell{height:var(--header-h);display:flex;align-items:center;gap:22px;
 transition:height var(--motion-normal) var(--ease-premium)}
.site-header.is-scrolled .nav-shell{height:64px}
.brand{display:flex;align-items:center;gap:9px;min-width:170px;position:relative;
 transition:transform var(--motion-fast) var(--ease-premium)}
.brand>img:first-child{width:37px;height:45px;object-fit:contain;
 transition:transform var(--motion-normal) var(--ease-premium),filter var(--motion-normal) var(--ease-premium)}
.brand-wordmark{width:118px;height:34px;object-fit:contain;
 transition:opacity var(--motion-normal) var(--ease-premium),transform var(--motion-normal) var(--ease-premium)}
.site-header.is-scrolled .brand>img:first-child{transform:scale(.9)}
.site-header.is-scrolled .brand-wordmark{transform:scale(.92)}
.brand:hover>img:first-child{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(0,230,255,.25))}
.site-header.is-scrolled .brand:hover>img:first-child{transform:scale(.96);filter:drop-shadow(0 0 10px rgba(0,230,255,.2))}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:20px;flex:1}
.nav-link{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#c9cbc7;position:relative;white-space:nowrap;
 transition:color var(--motion-fast) var(--ease-premium)}
.nav-link:after{content:"";position:absolute;inset-inline:0 100%;bottom:-9px;height:1px;
 background:linear-gradient(90deg,var(--copper),var(--cyan));transition:inset-inline-end var(--motion-normal) var(--ease-premium)}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link:hover:after,.nav-link.active:after{inset-inline-end:0}
.nav-actions{display:flex;align-items:center;gap:9px}
.lang-toggle,.menu-toggle{color:var(--ivory);border:1px solid var(--line);background:#111;
 padding:9px 11px;cursor:pointer;font-size:11px;letter-spacing:.08em;
 transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast) var(--ease-premium)}
.lang-toggle:hover,.theme-toggle:hover{border-color:rgba(0,230,255,.35);transform:translateY(-1px)}
.menu-toggle{display:none;width:42px;height:40px;padding:0}
.menu-toggle span{display:block;width:17px;height:1px;background:#fff;margin:5px auto;transition:transform var(--motion-fast) var(--ease-premium)}
.mobile-panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-premium);background:#0d0f0e}
.mobile-panel.open{max-height:620px}
.mobile-links{display:grid;padding:14px 0 24px}
.mobile-links a{padding:12px 2px;border-bottom:1px solid var(--line2)}

/* --------------------------------------------------------------- section */
.section{padding:var(--sp) 0;position:relative}
.section-dark{background:linear-gradient(180deg,#0d100f,#080909);border-block:1px solid var(--line2)}
.section-accent{padding:78px 0;background:linear-gradient(100deg,rgba(184,115,51,.11),rgba(0,131,111,.09),rgba(0,230,255,.05));
 border-block:1px solid var(--line)}
.section-head{max-width:760px;margin-bottom:56px}
.section-head h2{margin-bottom:0}
.section-lede{font-size:16px;margin:22px 0 0;max-width:660px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}

/* ------------------------------------------------------------------ hero */
.hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;position:relative;overflow:hidden}
.hero-gridlines{position:absolute;inset:0;
 background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
 background-size:74px 74px;mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 76%,transparent)}
.hero-orbit{position:absolute;width:700px;height:700px;border:1px solid rgba(184,115,51,.12);border-radius:50%;
 inset-inline-end:-170px;top:8%}
.hero-inner{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:56px;padding:72px 0;
 position:relative;z-index:2}
.hero-copy h1{margin-bottom:34px;max-width:12ch}
.hero-aside{display:grid;gap:26px}
.hero-sub{font-size:16px;line-height:1.55;max-width:38ch;justify-self:end;
 padding-inline-start:20px;border-inline-start:1px solid var(--copper);color:#d4d7d2}
.hero-logo-wrap{position:relative;display:flex;justify-content:center}
.hero-logo-wrap img{width:min(440px,40vw);position:relative;z-index:2;filter:drop-shadow(0 35px 70px rgba(0,0,0,.5))}
.logo-aura{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;top:15%;filter:blur(7px);
 background:radial-gradient(circle,rgba(0,230,255,.13),rgba(0,131,111,.05) 38%,transparent 70%)}

/* one-line mission statement */
.mission-line{display:grid;gap:6px;max-width:1000px}
.mission-line h2{font-size:clamp(20px,2.2vw,30px);line-height:1.25;letter-spacing:-.03em;margin:0}

/* ------------------------------------------------- applications grid (9) */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
 border:1px solid var(--line2)}
.app-card{background:var(--black);padding:36px 30px 34px;display:flex;flex-direction:column;
 transition:background .3s}
.app-card:hover{background:#0f1211}
.app-card .eyebrow{margin-bottom:24px}
.app-card h3{margin-bottom:12px}
.app-card p{font-size:14px;line-height:1.6;flex:1}
.app-card .text-link{margin-top:22px;align-self:flex-start}

/* --------------------------------------------- problem / solution column */
.narrative{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.narrative h2{margin:0}
.narrative-body p{font-size:16px}

/* ------------------------------------------------- numbered value props */
.vprops{display:grid;border-top:1px solid var(--line)}
.vprop{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:32px 0;
 border-bottom:1px solid var(--line);align-items:start}
.vprop>b{font-family:Manrope,Inter,sans-serif;font-weight:500;font-size:44px;line-height:.9;
 letter-spacing:-.04em;color:rgba(226,167,99,.55)}
.vprop h3{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;margin-bottom:10px}
.vprop p{font-size:15px;max-width:70ch;margin:0}
.vprop-full p{max-width:80ch}

/* ------------------------------------------------------------ spec quad */
.spec-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);
 border:1px solid var(--line2)}
.spec{background:var(--black);padding:34px 26px}
.spec .eyebrow{margin-bottom:22px}
.spec>b{display:block;font-family:Manrope,Inter,sans-serif;font-weight:500;font-size:22px;
 letter-spacing:-.03em;line-height:1.15;color:var(--ivory);margin-bottom:12px}
.spec p{font-size:13.5px;line-height:1.55;margin:0;color:var(--dim)}

/* --------------------------------------------------------- closing band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-band h2{margin:0;max-width:20ch}

/* -------------------------------------------------------------- pagehero */
.pagehero{padding:36px 0 28px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
 min-height:0}
.pagehero-compact{padding:28px 0 22px}
.pagehero-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;min-height:0;
 position:relative;z-index:2;padding-block:4px}
.pagehero h1{margin:0;font-size:clamp(28px,3.6vw,44px);max-width:18ch}
.pagehero-aside{display:grid;gap:12px;justify-items:end;max-width:42ch}
.pagehero-sub{font-size:14.5px;line-height:1.55;max-width:42ch;margin:0;color:#d4d7d2;
 padding-inline-start:14px;border-inline-start:1px solid var(--copper)}
.pagehero-visual{height:72px;width:72px;position:relative;display:grid;place-items:center;
 opacity:.4;justify-self:end}
.pagehero-logo{height:64px;width:64px;object-fit:contain;filter:none;opacity:.85}
.pagehero .hero-orbit{width:260px;height:260px;opacity:.28;inset-inline-end:-60px;top:auto;bottom:-50%}
.circuit-field{position:absolute;width:110px;height:70px;border-radius:50%;opacity:.5;
 background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(0,230,255,.06) 19px 20px),
            repeating-linear-gradient(90deg,transparent 0 29px,rgba(184,115,51,.04) 30px 31px);
 mask-image:radial-gradient(circle,#000,transparent 70%)}
.pagehero-accent{display:block;width:40px;height:1px;background:linear-gradient(90deg,var(--copper),var(--cyan));
 margin:14px 0 0}

/* Team page: tighten hero → leaders */
.pagehero-compact + .section{padding-top:72px}
.pagehero-compact + .section .section-head{margin-bottom:40px}

/* ================================================== WHERE WE EXCEL page */
.svc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;padding:36px 0 80px}
.svc-rail,.svc-main{min-width:0}
.svc-rail-inner{position:sticky;top:calc(var(--header-h) + 32px);padding-top:0;align-self:start;
 max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto;overflow-x:hidden;
 scrollbar-width:thin;scrollbar-color:rgba(0,230,255,.25) transparent}
.svc-progress{position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;
 background:var(--line2);border-radius:2px;pointer-events:none;z-index:0}
.svc-progress>i{position:absolute;inset-inline:0;top:0;width:100%;height:28px;
 background:linear-gradient(180deg,var(--copper),var(--cyan));border-radius:2px;
 transform:translate3d(0,0,0);transition:transform .45s var(--ease-premium);will-change:transform}
.svc-rail .eyebrow{position:relative;z-index:1;margin-bottom:14px}
.svc-rail nav{display:grid;border-top:0;position:relative;padding-inline-start:16px}
.svc-rail a{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:baseline;padding:9px 8px 9px 0;
 border-bottom:1px solid var(--line2);font-size:12px;line-height:1.3;color:var(--body);
 transition:color .25s var(--ease-premium),opacity .25s,background .25s;opacity:.5;position:relative;z-index:1}
.svc-rail a i{font-style:normal;font-family:Manrope,Inter,sans-serif;font-size:11px;letter-spacing:.06em;
 color:rgba(226,167,99,.5);transition:color .25s}
.svc-rail a:hover{color:var(--ivory);opacity:.75}
.svc-rail a.current{color:var(--ivory);opacity:1;background:linear-gradient(90deg,rgba(0,230,255,.07),transparent)}
.svc-rail a.current i{color:var(--cyan)}
.svc-rail a.current:before{content:"";position:absolute;inset-inline-start:-16px;top:50%;width:7px;height:7px;
 margin-top:-3.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(0,230,255,.15)}

/* Sections stay fully readable — never wash out content */
.svc-section{padding:0 0 48px;margin:0 0 48px;border-bottom:1px solid var(--line2);
 scroll-margin-top:calc(var(--header-h) + 40px)}
.svc-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.svc-head{position:relative;padding-inline-start:0}
.svc-head .svc-num{display:block;font-family:Manrope,Inter,sans-serif;font-weight:500;
 font-size:clamp(48px,6vw,80px);line-height:.85;letter-spacing:-.06em;
 color:rgba(226,167,99,.22);margin:0 0 6px;transition:color .35s}
.svc-section.is-active .svc-num{color:rgba(226,167,99,.45)}
.svc-head h2{font-size:clamp(24px,2.5vw,34px);margin:0}
.svc-intro{margin:18px 0 0;max-width:78ch}
.svc-intro p{font-size:15px}

.svc-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.svc-group{border:1px solid var(--line2);background:rgba(255,255,255,.02);padding:20px 22px;
 transition:border-color .25s,background .25s}
.svc-group:hover{border-color:rgba(0,230,255,.22);background:rgba(255,255,255,.035)}
.svc-group h4{color:var(--copper2);margin:0;text-transform:uppercase;letter-spacing:.06em;font-size:12px;line-height:1.4}
.svc-subs{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.svc-subs li{font-size:13.5px;line-height:1.5;color:#b4b7b3;padding-inline-start:14px;position:relative}
.svc-subs li:before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:1px;background:var(--teal)}

/* ==================================================== MEET OUR TEAM page */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.team-card{border:1px solid var(--line2);background:rgba(255,255,255,.018);display:flex;flex-direction:column;
 transition:border-color .3s,transform var(--motion-normal) var(--ease-premium),box-shadow var(--motion-normal)}
.team-card:hover{border-color:rgba(0,230,255,.2);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.team-photo{aspect-ratio:4/5;overflow:hidden;background:#141716;border-bottom:1px solid var(--line2)}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;
 transition:transform calc(var(--motion-slow) + .2s) var(--ease-premium)}
.team-card:hover .team-photo img{transform:scale(1.025)}
.team-photo-ph{display:grid;place-items:center;background:linear-gradient(160deg,#1a1f1c,#0e1210);
 color:rgba(226,167,99,.55);font-family:Manrope,Inter,sans-serif;font-weight:600;font-size:28px;
 letter-spacing:.08em}
.team-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1}
.team-body h3{font-size:16px;margin:0 0 6px}
.team-role{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--kicker);font-weight:600;
 margin-bottom:14px}
.bio-trigger{margin-top:auto;align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
 display:inline-flex;align-items:center;font-size:10px;font-weight:600;text-transform:uppercase;
 letter-spacing:.16em;color:var(--dim);transition:color .25s}
.bio-trigger:after{content:"↳";margin-inline-start:8px;font-size:13px;transition:transform .25s var(--ease-premium)}
.bio-trigger:hover{color:var(--kicker)}
.bio-trigger:hover:after{transform:translateX(3px)}
.team-bio-copy[hidden]{display:none!important}

/* Bio modal */
.bio-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
 background:rgba(5,6,5,.72);backdrop-filter:blur(10px);opacity:0;visibility:hidden;
 transition:opacity .28s var(--ease-premium),visibility .28s}
.bio-overlay.is-open{opacity:1;visibility:visible}
.bio-overlay[hidden]{display:none!important}
body.bio-open{overflow:hidden}
.bio-panel{width:min(920px,100%);max-height:min(86vh,820px);overflow:auto;background:#0e100f;
 border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.5);
 transform:translateY(16px) scale(.98);transition:transform .35s var(--ease-premium);position:relative}
.bio-overlay.is-open .bio-panel{transform:none}
.bio-close{position:absolute;top:14px;inset-inline-end:14px;z-index:2;width:40px;height:40px;
 border:1px solid var(--line);background:#141716;color:var(--ivory);font-size:22px;line-height:1;
 cursor:pointer;transition:border-color .2s,color .2s}
.bio-close:hover{border-color:var(--cyan);color:var(--cyan)}
.bio-panel-grid{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:420px}
.bio-panel-photo{background:#141716;border-inline-end:1px solid var(--line2);overflow:hidden}
.bio-panel-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;min-height:420px}
.bio-photo-fallback{width:100%;min-height:420px;background:linear-gradient(160deg,#1a1d1b,#0e100f)}
.bio-panel-body{padding:36px 40px 40px}
.bio-panel-body h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px}
.bio-panel-role{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--kicker);
 font-weight:600;margin-bottom:22px}
.bio-panel-copy p{font-size:14px;line-height:1.65;color:var(--body);margin:0 0 14px}
[data-theme="light"] .bio-panel{background:#FAF4EC}
[data-theme="light"] .bio-close{background:#E6DFCF;color:var(--ivory)}
[data-theme="light"] .bio-panel-photo{background:#D9D1C4;border-color:rgba(28,30,29,.1)}
@media(max-width:760px){
 .bio-panel-grid{grid-template-columns:1fr}
 .bio-panel-photo img,.bio-photo-fallback{min-height:240px;max-height:280px}
 .bio-panel-body{padding:24px 22px 28px}
}

.ceo-block{display:grid;grid-template-columns:280px 1fr;gap:46px;align-items:start}
.ceo-photo{overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:#141716}
.ceo-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ceo-copy p{font-size:15px}
.ceo-sign{font-family:Manrope,Inter,sans-serif;font-weight:600;color:var(--copper2);margin-top:26px}
.ceo-sign span{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ------------------------------------------- partners / news / contact  */
.coming-block{text-align:center;padding:30px 0}
.coming-block p{max-width:600px;margin:24px auto 30px}
.coming-soon{display:inline-block;font-family:Manrope,Inter,sans-serif;font-weight:600;
 font-size:clamp(28px,4vw,46px);letter-spacing:-.04em;
 background:linear-gradient(120deg,var(--copper2),var(--cyan));-webkit-background-clip:text;
 background-clip:text;color:transparent}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.contact-points{display:grid;gap:12px;margin-top:28px}
.contact-points a{color:var(--kicker);font-size:14px}
.office-grid{display:grid;gap:12px;margin-top:26px}
.office{padding:20px 22px;border:1px solid var(--line2);background:rgba(255,255,255,.018)}
.office h3{font-size:13px;margin:0 0 10px;color:var(--copper2);text-transform:uppercase;letter-spacing:.1em}
.office-addr span{display:block;font-size:13px;color:#b4b7b3}
.office a{display:inline-block;margin-top:9px;font-size:13px;color:var(--kicker)}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:1px solid var(--line2);
 padding:28px;background:#0e100f;margin-top:26px}
.contact-form label{display:grid;gap:8px;color:#c7c9c6;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #2b2e2c;background:#090a09;color:#fff;
 padding:14px;outline:none;font-size:15px;letter-spacing:normal;text-transform:none;transition:border-color .25s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal)}
.contact-form .full,.form-note,.form-status{grid-column:1/-1}
.form-note{font-size:11px;color:#bd9e7c;padding:10px 12px;border-inline-start:2px solid var(--copper)}
.form-status{font-size:13px;color:#69e4d4}
.form-status:empty{display:none}

/* ---------------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--line);padding:76px 0 26px;background:#070807}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:50px}
.footer-brand img{width:170px}
.footer-brand p{font-size:13px;margin-top:12px}
.site-footer h4{font-size:10px;color:#eee;text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px}
.site-footer a,.site-footer span{display:block;color:var(--muted);font-size:12.5px;margin:9px 0;transition:color .25s}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--line2);margin-top:48px;padding-top:22px;display:flex;
 justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom span{font-size:11px;letter-spacing:.06em}
.footer-bottom span:last-child{color:var(--kicker)}

/* ------------------------------------------------------- scroll reveal */
.reveal{opacity:0;transform:translateY(var(--reveal-y));
 transition:opacity var(--motion-slow) var(--ease-premium),transform var(--motion-slow) var(--ease-premium);
 will-change:opacity,transform}
.reveal.visible{opacity:1;transform:none;will-change:auto}
.reveal-scale{opacity:0;transform:translateY(18px) scale(.97);
 transition:opacity var(--motion-slow) var(--ease-premium),transform var(--motion-slow) var(--ease-premium)}
.reveal-scale.visible{opacity:1;transform:none}
.reveal-mask{clip-path:inset(8% 0 8% 0);opacity:0;transform:scale(1.04);
 transition:clip-path var(--motion-slow) var(--ease-premium),opacity var(--motion-slow) var(--ease-premium),
  transform calc(var(--motion-slow) + .15s) var(--ease-premium)}
.reveal-mask.visible{clip-path:inset(0 0 0 0);opacity:1;transform:none}

/* ------------------------------------------------------------------ RTL */
[dir=rtl] body{text-align:right}
[dir=rtl] .text-link:after,[dir=rtl] .cta-box:after{content:"↲"}
[dir=rtl] .text-link:hover:after{transform:translateX(-3px)}
[dir=rtl] .hero-sub{justify-self:start}
[dir=rtl] .pagehero-aside{justify-items:start}
[dir=rtl] .svc-rail a,[dir=rtl] .vprop{text-align:right}

/* --------------------------------------------------------- responsive */
@media(max-width:1180px){
 .team-grid{grid-template-columns:repeat(3,1fr)}
 .spec-quad{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1080px){
 :root{--sp:92px}
 .desktop-nav{display:none}
 .menu-toggle{display:block}
 .app-grid{grid-template-columns:repeat(2,1fr)}
 .hero-inner{grid-template-columns:1fr 1fr;gap:36px}
 .narrative,.split{gap:44px}
 .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
 .footer-grid>div:last-child{display:none}
 /* Sticky sidebar has nowhere to go — degrade to a horizontal index. */
 .svc-layout{grid-template-columns:1fr;gap:0;padding-top:0}
 .svc-rail{position:sticky;top:var(--header-h);z-index:20;margin:0 calc(50% - 50vw);
  padding:0 calc(50vw - 50%);background:rgba(10,10,10,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2)}
 .svc-rail-inner{position:static;padding:14px 0}
 .svc-progress{display:none}
 .svc-rail .eyebrow{display:none}
 .svc-rail nav{display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none;padding-inline-start:0}
 .svc-rail nav::-webkit-scrollbar{display:none}
 .svc-rail a{display:inline-flex;gap:7px;white-space:nowrap;border:1px solid var(--line2);
  padding:8px 13px;font-size:11px;opacity:1}
 .svc-rail a.current:before{display:none}
 .svc-rail a.current{border-color:rgba(0,230,255,.35);background:rgba(0,230,255,.08)}
 .svc-main{padding-top:56px}
 .svc-section{scroll-margin-top:calc(var(--header-h) + 64px)}
}
@media(max-width:860px){
 .team-grid{grid-template-columns:repeat(2,1fr)}
 .svc-groups{grid-template-columns:1fr}
}
@media(max-width:760px){
 :root{--shell:min(100% - 32px,1180px);--header-h:67px;--sp:68px}
 .brand-wordmark,.btn-small{display:none}
 .brand{min-width:0}
 .hero{min-height:auto}
 .hero-inner,.pagehero-grid,.split,.narrative,.contact-grid{grid-template-columns:1fr}
 .hero-inner{padding:56px 0;gap:34px}
 /* Headline leads on small screens; the supporting line follows it. */
 .hero-copy{order:0}
 .hero-aside{order:1;gap:24px}
 .hero-copy h1{max-width:none;margin-bottom:26px}
 .hero-sub{justify-self:start;max-width:none}
 .hero-logo-wrap img{width:250px}
 .hero-orbit{width:420px;height:420px}
 .app-grid,.spec-quad{grid-template-columns:1fr}
 .team-grid{grid-template-columns:1fr;max-width:420px}
 .vprop{grid-template-columns:60px 1fr;gap:18px;padding:26px 0}
 .vprop>b{font-size:30px}
 .pagehero{padding:36px 0 28px}
 .pagehero-grid{min-height:auto;gap:20px;grid-template-columns:1fr}
 .pagehero-aside{justify-items:start;max-width:none}
 .pagehero-visual{height:64px;width:64px;opacity:.4}
 .pagehero-logo{height:56px;width:56px}
 .pagehero-sub{max-width:none}
 .pagehero h1{font-size:clamp(28px,8vw,40px)}
 .svc-progress{display:none}
 .svc-head .svc-num{font-size:42px}
 .ceo-block{grid-template-columns:1fr;gap:26px}
 .ceo-photo{max-width:260px}
 .contact-form{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-brand{grid-column:1/-1}
 .cta-band{display:grid}
}

/* ------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 body{opacity:1}
 .reveal,.reveal-scale,.reveal-mask{opacity:1;transform:none;clip-path:none;transition:none}
 .hero .hero-copy,.hero .hero-aside,.hero .hero-logo-wrap img,.hero .logo-aura,
 .hero .hero-orbit,.hero .hero-gridlines,
 .pagehero .pagehero-logo,.pagehero .circuit-field{opacity:1;transform:none;filter:none;animation:none!important}
 .hero-copy .hline > span{transform:none!important}
 .svc-section{opacity:1;transform:none}
 .scroll-progress,.cursor-ring{display:none!important}
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================ LIGHT MODE */

/* Theme transition — applied before theme class so the swap is animated */
body,body::before,
.site-header,.mobile-panel,
.app-card,.spec,.svc-group,.svc-rail,.team-card,.team-photo,.ceo-photo,
.office,.contact-form,.contact-form input,.contact-form textarea,
.site-footer,.section-dark,.section-accent,
.lang-toggle,.menu-toggle,.theme-toggle,
.hero-gridlines{
 transition:background .35s ease,border-color .35s ease,color .35s ease;
}

/* --- Light-mode token layer -------------------------------------------- */
[data-theme="light"]{
 --black:#F7F1E8;
 --ivory:#1B1D1C;
 --body:#3C3F3D;
 --dim:#575B57;
 --muted:#6A6E6B;
 --kicker:#006B67;
 --line:rgba(28,30,29,.15);
 --line2:rgba(28,30,29,.09);
 --shadow:0 30px 80px rgba(0,0,0,.10);
 --cyan:#0099B0;
}

/* --- Body & background -------------------------------------------------- */
[data-theme="light"] body{background:var(--black);color:var(--ivory)}
[data-theme="light"] body::before{
 background:
  radial-gradient(circle at 15% 12%,rgba(184,115,51,.08),transparent 30%),
  radial-gradient(circle at 86% 18%,rgba(0,153,176,.06),transparent 26%),
  linear-gradient(180deg,#ECE5D9,#F7F1E8 46%,#EAE3D6);
}

/* --- Header ------------------------------------------------------------- */
[data-theme="light"] .site-header{background:rgba(247,241,232,.9)}
[data-theme="light"] .nav-link{color:#4D5050}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active{color:var(--ivory)}
[data-theme="light"] .lang-toggle,
[data-theme="light"] .menu-toggle,
[data-theme="light"] .theme-toggle{background:#E6DFCF;border-color:rgba(28,30,29,.22);color:var(--ivory)}
[data-theme="light"] .menu-toggle span{background:var(--ivory)}
[data-theme="light"] .mobile-panel{background:#EDE6D6}
[data-theme="light"] .mobile-links a{border-color:rgba(28,30,29,.1)}

/* --- Hero --------------------------------------------------------------- */
[data-theme="light"] .hero-gridlines{
 background-image:
  linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
}
[data-theme="light"] .hero-sub,
[data-theme="light"] .pagehero-sub{color:#3C3F3D}

/* --- Sections ----------------------------------------------------------- */
[data-theme="light"] .section-dark{
 background:linear-gradient(180deg,#E4DDD0,#DDD5C6);
 border-color:rgba(28,30,29,.1);
}
[data-theme="light"] .section-accent{
 background:linear-gradient(100deg,rgba(184,115,51,.1),rgba(0,131,111,.08),rgba(0,153,176,.05));
 border-color:rgba(28,30,29,.12);
}

/* --- App cards ---------------------------------------------------------- */
[data-theme="light"] .app-grid{background:rgba(28,30,29,.1)}
[data-theme="light"] .app-card{background:#FAF4EC}
[data-theme="light"] .app-card:hover{background:#F1EAE0}

/* --- Spec quad ---------------------------------------------------------- */
[data-theme="light"] .spec-quad{background:rgba(28,30,29,.1)}
[data-theme="light"] .spec{background:#FAF4EC}

/* --- Value props -------------------------------------------------------- */
[data-theme="light"] .vprop>b{color:rgba(184,115,51,.6)}

/* --- Services ----------------------------------------------------------- */
[data-theme="light"] .svc-group{
 background:rgba(0,0,0,.025);
 border-color:rgba(28,30,29,.12);
}
[data-theme="light"] .svc-group:hover{
 background:rgba(0,0,0,.05);
 border-color:rgba(0,107,103,.25);
}
[data-theme="light"] .svc-subs li{color:#494D4A}
[data-theme="light"] .svc-rail{background:rgba(247,241,232,.94)}

/* --- Team --------------------------------------------------------------- */
[data-theme="light"] .team-card{
 background:rgba(0,0,0,.02);
 border-color:rgba(28,30,29,.1);
}
[data-theme="light"] .team-card:hover{border-color:rgba(0,107,103,.25)}
[data-theme="light"] .team-photo{background:#D9D1C4}
[data-theme="light"] .team-bio-copy p{color:#494D4A}
[data-theme="light"] .ceo-photo{background:#D9D1C4}

/* --- Contact ------------------------------------------------------------ */
[data-theme="light"] .office{background:rgba(0,0,0,.025);border-color:rgba(28,30,29,.1)}
[data-theme="light"] .office-addr span{color:#494D4A}
[data-theme="light"] .contact-form{background:#EDE6D6;border-color:rgba(28,30,29,.12)}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea{
 background:#F7F1E8;color:var(--ivory);border-color:rgba(28,30,29,.22)
}
[data-theme="light"] .contact-form label{color:#494D4A}
[data-theme="light"] .form-status{color:#006B67}
[data-theme="light"] .form-note{border-color:var(--copper)}

/* --- CTAs --------------------------------------------------------------- */
[data-theme="light"] .cta-box{
 border-color:rgba(0,107,103,.4);
 background:rgba(0,107,103,.04);
 color:var(--ivory);
}
[data-theme="light"] .cta-box:hover{
 background:rgba(0,107,103,.1);
 border-color:var(--kicker);
 color:var(--ivory);
}

/* --- Footer ------------------------------------------------------------- */
[data-theme="light"] .site-footer{background:#EDE6D6;border-color:rgba(28,30,29,.12)}
[data-theme="light"] .site-footer h4{color:var(--ivory)}
[data-theme="light"] .site-footer a,
[data-theme="light"] .site-footer span{color:var(--muted)}
[data-theme="light"] .site-footer a:hover{color:var(--ivory)}
[data-theme="light"] .footer-bottom{border-color:rgba(28,30,29,.1)}

/* --- Theme toggle button ------------------------------------------------ */
.theme-toggle{
 display:flex;align-items:center;justify-content:center;
 width:42px;height:40px;padding:0;
 color:var(--ivory);border:1px solid var(--line);background:#111;cursor:pointer;
}
.theme-toggle svg{display:block;flex:none}

/* ============================================================ CINEMATIC MOTION */

/* Grain atmosphere */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.035;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 mix-blend-mode:overlay}
[data-theme="light"] body:after{opacity:.028;mix-blend-mode:multiply}

/* Scroll progress */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none;
 background:transparent}
.scroll-progress>i{display:block;height:100%;width:0;
 background:linear-gradient(90deg,var(--copper),var(--cyan));
 transform-origin:left center;will-change:width}

/* Page enter */
body{opacity:0;transition:opacity .45s var(--ease-premium)}
body.is-ready{opacity:1}
@supports (view-transition-name:none){
 @view-transition { navigation: auto; }
 ::view-transition-old(root){animation:vt-out .28s var(--ease-premium) both}
 ::view-transition-new(root){animation:vt-in .4s var(--ease-premium) both}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* Stagger children */
[data-stagger] > .reveal,
[data-stagger] > .reveal-scale{
 transition-delay:calc(var(--i,0) * var(--stagger));
}

/* ---- Hero cinematic entrance ---- */
.hero .hero-copy,
.hero .hero-aside{opacity:0;transform:translateY(36px)}
.hero .hero-logo-wrap img{opacity:0;transform:scale(.88);filter:blur(8px)}
.hero .logo-aura{opacity:0;transform:scale(.7)}
.hero .hero-orbit{opacity:0;transform:scale(.92) rotate(-8deg)}
.hero .hero-gridlines{opacity:0}
.hero.is-ready .hero-copy{opacity:1;transform:none;
 transition:opacity .9s var(--ease-premium) .12s,transform .9s var(--ease-premium) .12s}
.hero.is-ready .hero-aside{opacity:1;transform:none;
 transition:opacity .9s var(--ease-premium) .28s,transform .9s var(--ease-premium) .28s}
.hero.is-ready .hero-logo-wrap img{opacity:1;transform:scale(1);filter:blur(0);
 transition:opacity 1.1s var(--ease-premium) .2s,transform 1.15s var(--ease-premium) .2s,filter 1s var(--ease-premium) .2s}
.hero.is-ready .logo-aura{opacity:1;transform:scale(1);
 transition:opacity 1.2s var(--ease-premium) .35s,transform 1.2s var(--ease-premium) .35s}
.hero.is-ready .hero-orbit{opacity:1;transform:none;
 transition:opacity 1.4s var(--ease-premium) .15s,transform 1.6s var(--ease-premium) .15s;
 animation:orbit-drift 28s linear infinite}
.hero.is-ready .hero-gridlines{opacity:1;transition:opacity 1.4s var(--ease-premium) .05s}
@keyframes orbit-drift{to{transform:rotate(360deg)}}

.hero-logo-wrap img{will-change:transform}
.hero-copy .hline{display:block;overflow:hidden}
.hero-copy .hline > span{display:block;transform:translateY(110%);
 transition:transform .85s var(--ease-premium)}
.hero.is-ready .hero-copy .hline > span{transform:none}
.hero-copy .hline:nth-child(1) > span{transition-delay:.18s}
.hero-copy .hline:nth-child(2) > span{transition-delay:.3s}
.hero-copy .hline:nth-child(3) > span{transition-delay:.42s}
.hero-copy .hline:nth-child(4) > span{transition-delay:.54s}

/* Pagehero entrance */
.pagehero .pagehero-logo{opacity:0;transform:scale(.9) translateY(16px);filter:blur(4px)}
.pagehero .circuit-field{opacity:0;transform:scale(.85)}
.pagehero.is-ready .pagehero-logo{opacity:1;transform:none;filter:none;
 transition:opacity .9s var(--ease-premium) .15s,transform 1s var(--ease-premium) .15s,filter .8s var(--ease-premium) .15s}
.pagehero.is-ready .circuit-field{opacity:1;transform:none;
 transition:opacity 1.1s var(--ease-premium) .25s,transform 1.2s var(--ease-premium) .25s}

/* Parallax layers (JS-driven via --py) */
[data-parallax]{will-change:transform;transform:translate3d(0,calc(var(--py,0) * 1px),0)}

/* Value props cinematic */
.vprop>b{transition:color var(--motion-normal),transform var(--motion-normal) var(--ease-premium)}
.vprop.visible>b,.vprop.reveal.visible>b{animation:num-in .7s var(--ease-premium) both}
@keyframes num-in{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}

/* CEO photo mask reveal */
.ceo-photo{overflow:hidden}
.ceo-photo img{transform:scale(1.06);transition:transform 1.2s var(--ease-premium)}
.ceo-block.visible .ceo-photo img,
.ceo-block.reveal.visible .ceo-photo img{transform:scale(1)}

/* Footer brand reveal */
.footer-brand img{opacity:.85;transition:opacity var(--motion-normal),transform var(--motion-slow) var(--ease-premium),filter var(--motion-slow)}
.site-footer.is-in .footer-brand img{opacity:1;transform:translateY(-4px);filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.site-footer a{transition:color var(--motion-fast),transform var(--motion-fast) var(--ease-premium)}
.site-footer a:hover{transform:translateX(2px)}
[dir=rtl] .site-footer a:hover{transform:translateX(-2px)}

/* Magnetic cursor ring — desktop only */
/* Cursor follower disabled — native cursor only */
.cursor-ring{display:none!important}

/* Light mode motion overrides */
[data-theme="light"] .site-header{background:rgba(247,241,232,.55)}
[data-theme="light"] .site-header.is-scrolled{background:rgba(247,241,232,.94);box-shadow:0 10px 32px rgba(0,0,0,.06)}
[data-theme="light"] .brand:hover>img:first-child{filter:drop-shadow(0 0 10px rgba(0,107,103,.2))}
[data-theme="light"] .cursor-ring{mix-blend-mode:multiply;border-color:rgba(0,107,103,.4)}
[data-theme="light"] .text-link:hover{color:var(--ivory)}

/* Mobile motion dampening */
@media(max-width:760px){
 :root{--reveal-y:18px;--stagger:.05s}
 .team-card:hover{transform:none;box-shadow:none}
 .team-card:hover .team-photo img{transform:none}
 .svc-group:hover{transform:none}
 .hero.is-ready .hero-orbit{animation:none}
 [data-parallax]{transform:none!important}
 .cta-box:hover{transform:none;box-shadow:none}
}

/* ==================================== AUG 2026 REVIEW: brand lockup + scene */

/* Header lockup. The wordmark art is now VOST only: at ~150px a raster
   tagline is under 4px tall, so the company name is set as live text - it
   stays crisp, selectable and scales with browser zoom. */
.brand-lockup{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand-wordmark{width:150px;height:24px;object-position:left center}
[dir=rtl] .brand-wordmark{object-position:right center}
.brand-tagline{font-family:Manrope,Inter,sans-serif;font-size:8.5px;font-weight:600;
 letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--copper2);opacity:.95}
.site-header.is-scrolled .brand-lockup{transform:scale(.94);transform-origin:left center}
[dir=rtl] .site-header.is-scrolled .brand-lockup{transform-origin:right center}
.desktop-nav{gap:15px}
@media(min-width:1081px) and (max-width:1240px){
 .brand-tagline{display:none}
 .brand-wordmark{width:118px;height:19px}
}
@media(max-width:760px){.brand-tagline{display:none}}
.footer-brand img{width:200px}

/* Hero kicker sized to the sub-paragraph it sits above */
.hero-copy .eyebrow{font-size:16px;letter-spacing:.14em;font-weight:600}
/* Fluid so the three words stay on one line down to a 320px screen. */
@media(max-width:760px){.hero-copy .eyebrow{font-size:clamp(11px,3.4vw,14px)}}

/* Capability index: solid, not washed out, and consistent with the detail
   copy once a section is selected */
.svc-rail a{grid-template-columns:18px 24px 1fr;gap:9px;align-items:center;opacity:.85}
.svc-rail a:hover{opacity:1}
.svc-rail a.current{opacity:1}
.svc-rail a .svc-icon{width:16px;height:16px;color:var(--copper2);opacity:.85;transition:color .25s}
.svc-rail a.current .svc-icon{color:var(--cyan);opacity:1}
[data-theme="light"] .svc-rail a{color:#2E312F}
[data-theme="light"] .svc-rail a:hover,
[data-theme="light"] .svc-rail a.current{color:#0F1110}
[data-theme="light"] .svc-rail a i{color:#8A6034}
[data-theme="light"] .svc-rail a.current i{color:#006B67}

/* One icon per capability, paired with its number */
.svc-head .svc-mark{display:flex;align-items:center;gap:16px;margin:0 0 6px}
.svc-head .svc-mark .svc-num{margin:0}
.svc-head .svc-mark .svc-icon{flex:none;width:38px;height:38px;color:var(--copper2);
 opacity:.65;transition:color .35s,opacity .35s}
.svc-section.is-active .svc-mark .svc-icon{opacity:1;color:var(--cyan)}
[data-theme="light"] .svc-head .svc-mark .svc-icon{color:#8A6034}
[data-theme="light"] .svc-section.is-active .svc-mark .svc-icon{color:#006B67}
@media(max-width:760px){.svc-head .svc-mark .svc-icon{width:28px;height:28px}}

/* Contact: map first, then the enquiry form gets the full column */
.contact-focus{max-width:780px;margin-inline:auto}
.contact-focus h2{font-size:clamp(24px,2.6vw,34px);margin:0}
.contact-focus .contact-points{margin-top:16px}

/* ---------------------------------------------------- home: energy scene */
.energy-section{padding:0 0 96px}
.energy-scene svg{display:block;width:100%;height:auto;max-height:min(64vh,440px);overflow:visible}
.energy-scene .es-ground line{stroke:var(--line);stroke-width:1.5}
.energy-scene .es-strata{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:2 12}
.energy-scene .es-zone text{fill:var(--kicker);font-family:Manrope,Inter,sans-serif;font-size:13px;
 font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle}
.energy-scene .es-zone line{stroke:var(--copper);stroke-width:1}
.energy-scene .es-reservoir{fill:url(#es-res);stroke:rgba(184,115,51,.45);stroke-width:1.2}
.energy-scene .es-reservoir-2{fill:rgba(184,115,51,.16);stroke:none}
.energy-scene .es-well{stroke:var(--copper);stroke-width:3;stroke-linecap:round}
.energy-scene .es-drops circle{fill:var(--copper2)}
.energy-scene .es-solid{fill:rgba(184,115,51,.10);stroke:var(--copper2);stroke-width:1.6;
 stroke-linejoin:round}
.energy-scene .es-strut,.energy-scene .es-nozzle,.energy-scene .es-tray,
.energy-scene .es-cable,.energy-scene .es-crank-arm,.energy-scene .es-pitman,
.energy-scene .es-cell{fill:none;stroke:var(--copper2);stroke-width:1.5;stroke-linecap:round}
.energy-scene .es-tray,.energy-scene .es-strata{opacity:.6}
.energy-scene .es-crank-hub{fill:none;stroke:var(--copper2);stroke-width:1.4;opacity:.45}
.energy-scene .es-weight{fill:var(--copper);stroke:none}
.energy-scene .es-pivot{fill:var(--copper2);stroke:none}
.energy-scene .es-pipe{fill:none;stroke:rgba(184,115,51,.38);stroke-width:5;
 stroke-linecap:round;stroke-linejoin:round}
.energy-scene .es-pipe-flow{stroke:url(#es-oil);stroke-width:3;stroke-dasharray:9 15}
.energy-scene .es-wire{fill:none;stroke:rgba(0,131,111,.35);stroke-width:3.5;
 stroke-linecap:round;stroke-linejoin:round}
.energy-scene .es-wire-flow{stroke:url(#es-grn);stroke-width:2.2;stroke-dasharray:7 13}
.energy-scene .es-blades path{fill:rgba(0,230,255,.16);stroke:var(--cyan);stroke-width:1.4;
 stroke-linejoin:round}
.energy-scene .es-turbine .es-solid{fill:rgba(0,131,111,.10);stroke:var(--teal)}
.energy-scene .es-hub{fill:var(--cyan);stroke:none}
.energy-scene .es-panel{fill:url(#es-panel);stroke:var(--teal);stroke-width:1.4;stroke-linejoin:round}
.energy-scene .es-cell{stroke:rgba(0,230,255,.55);stroke-width:1}
.energy-scene .es-solar .es-strut{stroke:var(--teal)}
.energy-scene .es-shine{fill:url(#es-shine);opacity:.5}
.energy-scene .es-hex{fill:rgba(184,115,51,.10);stroke:var(--copper2);stroke-width:1.6;
 stroke-linejoin:round}
.energy-scene .es-hex-mark{fill:none;stroke:var(--cyan);stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round}
.energy-scene .es-ring{fill:none;stroke:var(--cyan);stroke-width:1.2;opacity:0}

.energy-scene .es-beam{transform-box:view-box;transform-origin:175px 213px;
 animation:es-rock 3.4s ease-in-out infinite}
.energy-scene .es-crank{transform-box:view-box;transform-origin:246px 258px;
 animation:es-spin 3.4s linear infinite}
.energy-scene .es-blades{transform-box:view-box;transform-origin:900px 146px;
 animation:es-spin 7s linear infinite}
.energy-scene .es-pipe-flow{animation:es-flow 1.35s linear infinite}
.energy-scene .es-wire-flow{animation:es-flow 1.6s linear infinite}
.energy-scene .es-drops circle{transform-box:view-box;animation:es-rise 2.7s linear infinite;opacity:0}
.energy-scene .es-drops circle:nth-child(2){animation-delay:.9s}
.energy-scene .es-drops circle:nth-child(3){animation-delay:1.8s}
.energy-scene .es-shine{transform-box:view-box;animation:es-shine 6s ease-in-out infinite}
.energy-scene .es-ring{transform-box:view-box;transform-origin:760px 180px;
 animation:es-pulse 3s ease-out infinite}
.energy-scene .es-ring-2{animation-delay:1.5s}

@keyframes es-rock{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes es-spin{to{transform:rotate(360deg)}}
@keyframes es-flow{to{stroke-dashoffset:-24}}
@keyframes es-rise{0%{transform:translateY(0);opacity:0}
 12%{opacity:1}88%{opacity:1}100%{transform:translateY(-52px);opacity:0}}
@keyframes es-shine{0%,10%{transform:translateX(-150px)}55%,100%{transform:translateX(150px)}}
@keyframes es-pulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.55);opacity:0}}

@media(prefers-reduced-motion:reduce){
 .energy-scene *{animation:none!important}
 .energy-scene .es-drops circle{opacity:1}
 .energy-scene .es-ring{opacity:.25}
}
@media(max-width:760px){
 .energy-section{padding-bottom:64px}
 .energy-scene .es-zone text{font-size:19px;letter-spacing:.14em}
}

/* ================================ AUG 2026: header rhythm + hero structure */

/* --- Header ------------------------------------------------------------- */
/* Eight nav items, a two-line brand lockup and three actions do not fit the
   1180 content rail without the links touching. The header gets 40px more of
   its own (a 20px offset from the content column - not readable as a
   misalignment), the tracking is eased back, and the gap became fluid so it
   degrades instead of collapsing. */
.nav-shell{width:min(1220px,calc(100vw - 48px));gap:26px}
.brand{gap:10px}
.brand-wordmark{width:132px;height:21px}
.brand-tagline{font-size:8px;letter-spacing:.01em}
.nav-link{letter-spacing:.07em}
/* The links space themselves across whatever the brand and the actions leave
   over. A fixed gap overflowed the rail - flex:1 cannot shrink a row of
   nowrap links - and the row spilled past the right margin. */
.desktop-nav{flex:1;min-width:0;justify-content:space-between;gap:0}

/* Under ~1240 the leftover space stops being enough for eight items to keep
   a >=18px gap, so the menu takes over earlier than the old 1080 cut-off. */
@media(max-width:1240px){
 .desktop-nav{display:none}
 .menu-toggle{display:block}
}

/* --- Hero --------------------------------------------------------------- */
/* One reading column - kicker, headline, supporting line - against the logo,
   both centred on the same axis. Previously the headline and the supporting
   line sat in separate columns at different heights, which read as scattered
   and left the top-left corner empty. */
.hero-inner{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;
 align-items:center;padding:64px 0}
.hero-copy{display:grid;justify-items:start}
.hero-copy h1{max-width:none;margin:0 0 28px;font-size:clamp(38px,4.6vw,62px)}
.hero-sub{max-width:52ch;justify-self:start;margin:0;
 padding-inline-start:18px;border-inline-start:1px solid var(--copper)}
[dir=rtl] .hero-sub{justify-self:start}
.hero-aside{display:flex;align-items:center;justify-content:center;gap:0}
.hero-logo-wrap img{width:min(380px,30vw)}

@media(max-width:1080px){
 .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px}
 .hero-copy h1{font-size:clamp(34px,5vw,48px);margin-bottom:22px}
 .hero-sub{max-width:46ch;font-size:15px}
 .hero-logo-wrap img{width:min(300px,32vw)}
}
@media(max-width:760px){
 .hero-inner{grid-template-columns:1fr;padding:48px 0 56px;gap:30px}
 /* Sized so the longest masked line ('Your Trusted Partner') still fits on
    one line down to a 320px screen - if it wraps inside .hline the reveal
    animation breaks and the ragged look comes back. */
 .hero-copy h1{font-size:clamp(24px,7.6vw,44px);margin-bottom:20px}
 .hero-sub{max-width:none;font-size:15px}
 .hero-aside{justify-content:flex-start}
 .hero-logo-wrap{justify-content:flex-start}
 .hero-logo-wrap img{width:min(230px,58vw)}
}

/* Hero copy: one true left edge. The kicker's leading tick and the supporting
   line's inline rule both pushed their text off the headline's axis, and
   pulling them into the gutter overflowed the 24px page margin on narrow
   screens. The tick is dropped here and the rule moves above the paragraph,
   so kicker, headline and paragraph share one axis at every width. */
.hero-copy .eyebrow:before{display:none}
.hero-sub{margin-inline-start:0;padding-inline-start:0;padding-top:20px;
 border-inline-start:0;position:relative}
.hero-sub:before{content:"";position:absolute;top:0;inset-inline-start:0;
 width:52px;height:1px;background:var(--copper)}
.hero-copy h1{font-size:clamp(38px,4.6vw,68px)}
/* The line masks clip descenders at this line-height - grow the box downward
   and pull the same amount back so the rhythm is unchanged. */
.hero-copy .hline{padding-bottom:.14em;margin-bottom:-.14em}

/* With the menu taking over below 1240 there is room for the full lockup all
   the way down to the small-screen breakpoint. */
@media(min-width:761px) and (max-width:1240px){
 .brand-tagline{display:block}
 .brand-wordmark{width:132px;height:21px}
}

/* The Arabic labels are much shorter, so distributing the same leftover space
   spreads them across the whole rail. They cannot overflow at this length, so
   Arabic centres the row on a fixed gap instead. */
[dir=rtl] .desktop-nav{flex:0 1 auto;justify-content:center;gap:26px;margin-inline:auto}

/* ---------------------------------------------- inner page heroes (all 7) */
/* Same correction as the home hero. The statement was bottom-aligned in the
   left column while its supporting line started at the top of the right one,
   so the two sat in opposite corners with a dead field between them. They now
   share one reading column, with the brand mark centred opposite. */
.pagehero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
.pagehero-copy{display:grid;justify-items:start}
.pagehero h1{max-width:34ch}
.pagehero-sub{max-width:68ch;margin:20px 0 0;padding:16px 0 0;
 border-inline-start:0;position:relative}
.pagehero-sub:before{content:"";position:absolute;top:0;inset-inline-start:0;
 width:44px;height:1px;background:var(--copper)}
.pagehero-aside{max-width:none;justify-items:end}
.pagehero-visual{height:96px;width:96px;opacity:.45}
.pagehero-logo{height:84px;width:84px}

@media(max-width:900px){
 .pagehero h1{max-width:26ch}
 .pagehero-sub{max-width:none}
}
@media(max-width:760px){
 .pagehero-grid{grid-template-columns:1fr;align-items:start;gap:18px}
 .pagehero-copy{order:0}
 /* The mark stays at the inline end - it reads as a closing flourish under
    the left-aligned copy. (.pagehero-visual sets its own justify-self, so a
    justify-items on the parent here would be dead weight.) */
 .pagehero-aside{order:1}
 .pagehero-visual{height:64px;width:64px}
 .pagehero-logo{height:56px;width:56px}
 .pagehero-sub{margin-top:16px}
}

/* Balance the statement rather than leaving an orphan word on the last line
   ("...for collective / triumphs"). Ignored by browsers that lack it. */
.pagehero h1{text-wrap:balance}
.pagehero-sub,.hero-sub{text-wrap:pretty}

/* ================================================= AUG 2026: phone layout */

/* The actions were packing to the left once the desktop nav is hidden -
   nothing was left to push them over, because the nav is what grows. */
.nav-actions{margin-inline-start:auto}

@media(max-width:760px){
 /* The brand was reduced to the bare droplet. There is room for the wordmark
    on any phone from 360 up, and the name matters more than the icon. */
 .brand-wordmark{display:block;width:96px;height:16px}
 .brand{gap:8px}
 .lang-toggle,.menu-toggle,.theme-toggle{padding:8px 10px}

 /* Close the hero with the lockup centred, rather than a stray left-aligned
    image floating after the paragraph. */
 .hero-inner{padding:44px 0 40px;gap:26px}
 .hero-aside,.hero-logo-wrap{justify-content:center}
 .hero-logo-wrap img{width:min(210px,54vw)}

 .footer-brand img{width:150px}
}
@media(max-width:359px){
 .brand-wordmark{display:none}
}

/* The energy scene is a 3:1 schematic. Poured into a 358px phone column it
   renders 119px tall with ~6px labels - unreadable. It keeps a legible size
   and the column scrolls it instead, full-bleed so the swipe target is the
   whole screen. Above ~700px of column it simply fits and never scrolls. */
@media(max-width:760px){
 .energy-section{padding-bottom:56px}
 .energy-scene{overflow-x:auto;overscroll-behavior-x:contain;
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  scrollbar-width:none}
 .energy-scene::-webkit-scrollbar{display:none}
 .energy-scene svg{width:max(100%,660px);max-width:none;max-height:none}
 .energy-scene .es-zone text{font-size:22px;letter-spacing:.12em}
}

/* When splitHeroHeadline() measures a wrapped mask it drops the split and
   leaves plain text here; balance keeps the fallback from stranding a word. */
.hero-copy h1{text-wrap:balance}