/* ---------- Manrope, self-hosted ----------
   Was four requests to two Google domains before any text could paint, plus a
   third-party dependency on every page view. One variable file per subset now
   covers 400-800 from our own origin. Instrument Serif was dropped entirely:
   it rendered on two elements site-wide after the enterprise pass overrode
   every other rule that asked for it. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --g:#0EA58A; --gl:#12c9a4; --gd:#098a72;
  --gp:rgba(14,165,138,0.06); --gp2:rgba(14,165,138,0.03);
  --bg:#ffffff; --bg2:#f8f9fb; --bg3:#f2f3f7;
  --ink:#0e0e1a; --ink2:#3a3a54; --ink3:#6a6a86; --ink4:#9a9ab4; --ink5:#c2c2d4;
  --line:#ecedf2; --line2:#f4f4f8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ===== NAV ===== */
#nav{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(255,255,255,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.04);transition:background 0.4s,box-shadow 0.4s,border-color 0.4s;}
#nav.scrolled{box-shadow:0 1px 14px rgba(0,0,0,0.05);}
.nv{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);height:64px;display:flex;align-items:center;justify-content:space-between;}
.nv-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.nv-logo span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:16px;letter-spacing:2.5px;color:var(--ink);}
.nv-links{display:flex;align-items:center;gap:24px;}
.nv-links a{font-size:13.5px;font-weight:500;color:var(--ink3);text-decoration:none;transition:color 0.3s;}
.nv-links a:hover{color:var(--g);}
.nv-cta{font-size:12.5px!important;font-weight:600!important;background:var(--g)!important;color:white!important;padding:8px 20px;border-radius:8px;transition:all 0.3s;}
.nv-cta:hover{background:var(--gd)!important;box-shadow:0 4px 16px rgba(14,165,138,0.18);transform:translateY(-1px);}
.nv-mob{display:none;background:none;border:none;cursor:pointer;padding:4px;}

/* ===== HERO ===== */
.hero{max-width:1100px;margin:0 auto;padding:160px clamp(24px,4vw,48px) 120px;text-align:center;position:relative;}

/* Soft green glow behind hero */
.hero::before{content:'';position:absolute;top:40px;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(14,165,138,0.04),transparent 70%);pointer-events:none;}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;animation:up 0.8s cubic-bezier(0.16,1,0.3,1) both;}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--g);animation:breathe 3s ease infinite;}
.hero-eyebrow span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.5px;color:var(--ink4);}

.hero h1{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(44px,7vw,82px);line-height:1.08;color:var(--ink);margin-bottom:24px;animation:up 0.8s cubic-bezier(0.16,1,0.3,1) 0.06s both;}
.hero h1 em{font-style:italic;color:var(--g);}

.hero-p{font-size:clamp(16px,1.5vw,18px);color:var(--ink3);line-height:1.8;max-width:460px;margin:0 auto 44px;animation:up 0.8s cubic-bezier(0.16,1,0.3,1) 0.12s both;}

.hero-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;animation:up 0.8s cubic-bezier(0.16,1,0.3,1) 0.18s both;}

.btn-p{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;background:var(--g);color:white;padding:12px 32px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);box-shadow:0 2px 8px rgba(14,165,138,0.12);}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,165,138,0.2);}
.btn-p svg{transition:transform 0.3s;}.btn-p:hover svg{transform:translateX(3px);}

.btn-s{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;color:var(--ink2);padding:12px 32px;border-radius:10px;text-decoration:none;border:1px solid var(--line);transition:all 0.3s;background:var(--bg);}
.btn-s:hover{border-color:var(--g);color:var(--g);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.04);}

/* Trust badges */
.hero-trust{margin-top:56px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;animation:up 0.8s cubic-bezier(0.16,1,0.3,1) 0.28s both;}
.hero-trust-i{display:flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:500;color:var(--ink5);letter-spacing:0.2px;}

/* ===== SECTIONS ===== */
.sec{padding:clamp(62px,7vw,96px) clamp(24px,4vw,48px);max-width:1100px;margin:0 auto;}
.sec-hdr{text-align:center;margin-bottom:52px;}
.sec-ey{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:700;letter-spacing:3.4px;text-transform:uppercase;color:var(--g);margin-bottom:12px;}
.sec-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,4.5vw,50px);line-height:1.12;color:var(--ink);margin-bottom:16px;}
.sec-p{font-size:16.5px;color:var(--ink3);line-height:1.8;max-width:460px;margin:0 auto;}

/* ===== PRODUCTS ===== */
.prod-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:1020px){.prod-row{grid-template-columns:1fr 1fr;}}

.prod{background:var(--bg);border-radius:20px;border:1px solid var(--line);overflow:hidden;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);text-decoration:none;color:inherit;display:block;}
.prod:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,0.05);border-color:rgba(14,165,138,0.15);}

.prod-accent{height:3px;background:linear-gradient(90deg,var(--g),var(--gl));opacity:0;transition:opacity 0.4s;}
.prod:hover .prod-accent{opacity:1;}

.prod-body{padding:44px 40px;}
.prod-icon{width:48px;height:48px;border-radius:12px;background:var(--gp);display:flex;align-items:center;justify-content:center;margin-bottom:28px;transition:background 0.3s;}
.prod:hover .prod-icon{background:rgba(14,165,138,0.1);}
.prod-name{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:26px;color:var(--ink);margin-bottom:12px;}
.prod-desc{font-size:15px;color:var(--ink3);line-height:1.75;margin-bottom:28px;}

.prod-foot{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-top:1px solid var(--line2);}
.prod-tag{display:flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:500;color:var(--g);}
.prod-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:breathe 2.5s ease infinite;}
.prod-arrow{width:28px;height:28px;border-radius:50%;background:var(--line2);display:flex;align-items:center;justify-content:center;transition:all 0.3s;opacity:0;transform:translateX(-6px);}
.prod:hover .prod-arrow{opacity:1;transform:translateX(0);background:var(--g);}
.prod:hover .prod-arrow svg line,.prod:hover .prod-arrow svg path{stroke:white;}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;border:1px solid var(--line);overflow:hidden;background:var(--bg);}

.about-left{padding:clamp(40px,5.5vw,68px);display:flex;flex-direction:column;justify-content:center;}
.about-title{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:clamp(28px,3.2vw,40px);color:var(--ink);line-height:1.2;margin-bottom:20px;}
.about-text{font-size:15.5px;color:var(--ink2);line-height:1.85;margin-bottom:16px;}
.about-text:last-of-type{margin-bottom:32px;}
.about-metrics{display:flex;gap:44px;}
.about-m-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:34px;font-weight:800;color:var(--g);line-height:1;}
.about-m-l{font-size:13px;color:var(--ink4);margin-top:4px;}

.about-right{background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(40px,5vw,64px);position:relative;min-height:400px;overflow:hidden;}
.about-right::before{content:'';position:absolute;width:350px;height:350px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(14,165,138,0.04),transparent 60%);}
.about-brand{display:flex;align-items:center;gap:12px;position:relative;}
.about-brand-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(28px,3.5vw,40px);font-weight:800;letter-spacing:7px;color:var(--ink);}
.about-brand-tag{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;letter-spacing:6px;text-transform:uppercase;color:var(--ink4);margin-top:16px;position:relative;}

/* ===== OFFICE ===== */
/* image row — both photos shown at the same height */
.office-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:56px;align-items:start;}
.office-fig{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg);box-shadow:0 22px 54px rgba(14,165,138,0.10),0 8px 24px rgba(0,0,0,0.05);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s;}
.office-fig:hover{transform:translateY(-4px);box-shadow:0 30px 66px rgba(14,165,138,0.14),0 10px 28px rgba(0,0,0,0.07);}
.office-fig-img{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:4/3;}
.office-fig-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.16,1,0.3,1);}
.office-fig:hover .office-fig-img img{transform:scale(1.04);}
.office-chip{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:0.5px;color:var(--ink);background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.6);box-shadow:0 4px 14px rgba(0,0,0,0.1);padding:8px 12px;border-radius:30px;}
.office-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px rgba(14,165,138,0.18);}
.office-figcap{display:flex;align-items:center;gap:12px;padding:16px 16px;border-top:1px solid var(--line);}
.office-figcap-ic{width:36px;height:36px;border-radius:9px;background:var(--gp);border:1px solid rgba(14,165,138,0.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.office-figcap-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.1px;}
.office-figcap-d{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;color:var(--ink4);margin-top:3px;}
.office-figcap-tag{margin-left:auto;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:0.5px;color:var(--g);background:var(--gp);border:1px solid rgba(14,165,138,0.18);padding:4px 12px;border-radius:20px;white-space:nowrap;}
/* narrative — centered below the photos */
.office-story{max-width:760px;margin:clamp(34px,4vw,56px) auto 0;text-align:center;}
.office-copy-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(24px,2.7vw,34px);line-height:1.2;color:var(--ink);margin-bottom:16px;}
.office-p{font-size:15px;color:var(--ink2);line-height:1.85;margin-bottom:16px;}
.office-p:last-child{margin-bottom:0;}
/* full-width feature shot — team presenting */
.office-feature{margin-top:clamp(18px,2.4vw,30px);}
.office-feature-img{aspect-ratio:16/9;}
.office-feature .office-figcap{padding:16px 20px;}
@media(max-width:840px){
  .office-shots{grid-template-columns:1fr;margin-top:40px;}
  .office-feature-img{aspect-ratio:4/3;}
}

/* ===== VALUES ===== */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px;}
.val{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:36px 28px;transition:all 0.35s;}
.val:hover{border-color:rgba(14,165,138,0.15);box-shadow:0 8px 24px rgba(0,0,0,0.03);}
.val-n{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:38px;font-style:italic;color:var(--line);margin-bottom:16px;transition:color 0.35s;}
.val:hover .val-n{color:rgba(14,165,138,0.2);}
.val-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.val-d{font-size:13.5px;color:var(--ink3);line-height:1.7;}

/* ===== STARTIME DEEP SECTION ===== */
.st-intro{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:72px;}
.st-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gp);border:1px solid rgba(14,165,138,0.15);border-radius:100px;padding:4px 12px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;color:var(--gd);margin-bottom:24px;}
.st-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(32px,4.2vw,48px);line-height:1.12;color:var(--ink);margin-bottom:20px;}
.st-h em{font-style:italic;color:var(--g);}
.st-lead{font-size:16px;color:var(--ink2);line-height:1.85;margin-bottom:16px;}
.st-lead:last-of-type{margin-bottom:28px;}
.st-langs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.st-lang{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:500;color:var(--ink3);background:var(--bg3);border-radius:7px;padding:4px 12px;display:inline-flex;align-items:center;gap:8px;}
.st-lang svg{flex:0 0 auto;opacity:.85;}
.st-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.st-visual{background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:24px;padding:clamp(28px,3.5vw,44px);position:relative;overflow:hidden;}
.st-visual::before{content:'';position:absolute;width:300px;height:300px;top:-60px;right:-60px;background:radial-gradient(circle,rgba(14,165,138,0.08),transparent 60%);}
.st-visual-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink4);margin-bottom:20px;position:relative;}
.st-chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;}
.st-chip{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:8px;}
.st-chip svg{flex-shrink:0;}

.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.st-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px 24px;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);}
.st-card:hover{border-color:rgba(14,165,138,0.18);box-shadow:0 12px 32px rgba(0,0,0,0.04);transform:translateY(-3px);}
.st-card-ic{width:42px;height:42px;border-radius:11px;background:var(--gp);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.st-card-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.st-card-d{font-size:13.5px;color:var(--ink3);line-height:1.7;}
@media(max-width:900px){.st-intro{grid-template-columns:1fr;}.st-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.st-grid{grid-template-columns:1fr;}.st-chip-grid{grid-template-columns:1fr;}}

/* ===== SERVICES ===== */
.svc-tagline{text-align:center;font-size:15px;color:var(--ink3);max-width:540px;margin:-44px auto 56px;line-height:1.8;}

/* ===== INDUSTRIES ===== */
.ind-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:840px;margin:0 auto;}
.ind-pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:12px 20px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;font-weight:600;color:var(--ink2);transition:all 0.3s;}
.ind-pill:hover{border-color:rgba(14,165,138,0.25);color:var(--g);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.04);}
.ind-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0;}

/* ===== TECH STACK ===== */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tech-col{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px 24px;transition:all 0.35s;}
.tech-col:hover{border-color:rgba(14,165,138,0.15);box-shadow:0 10px 28px rgba(0,0,0,0.03);}
.tech-col-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--g);margin-bottom:20px;display:flex;align-items:center;gap:8px;}
.tech-list{display:flex;flex-wrap:wrap;gap:8px;}
.tech-tag{background:var(--bg3);border-radius:8px;padding:8px 12px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:600;color:var(--ink2);transition:all 0.25s;}
.tech-col:hover .tech-tag{background:var(--gp);color:var(--gd);}

/* ===== WORK / PORTFOLIO ===== */

@media(max-width:900px){.tech-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.tech-grid{grid-template-columns:1fr;}}

/* ===== CONTACT ===== */
.cta{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:28px;padding:clamp(56px,7vw,96px) clamp(32px,5vw,60px);text-align:center;position:relative;overflow:hidden;}
.cta::before{content:'';position:absolute;width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(14,165,138,0.03),transparent 55%);pointer-events:none;}

.cta-ey{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--g);margin-bottom:20px;position:relative;}
.cta-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:clamp(32px,4.5vw,50px);font-weight:400;color:var(--ink);line-height:1.12;margin-bottom:16px;position:relative;}
.cta-p{font-size:16px;color:var(--ink3);max-width:420px;margin:0 auto 40px;line-height:1.8;position:relative;}

.cta-email{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--g);text-decoration:none;position:relative;transition:color 0.3s;padding-bottom:4px;}
.cta-email::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--g);border-radius:1px;transition:width 0.4s cubic-bezier(0.16,1,0.3,1);}
.cta-email:hover{color:var(--gd);}
.cta-email:hover::after{width:100%;}

.cta-links{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:36px;position:relative;}
.cta-links a{font-size:13px;font-weight:500;color:var(--ink4);text-decoration:none;transition:color 0.3s;}
.cta-links a:hover{color:var(--g);}
.cta-dot{width:3px;height:3px;border-radius:50%;background:var(--ink5);}

/* Side-by-side dual CTA (Hire us / Join us) */
.cta-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.cta-panel{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:28px;padding:clamp(40px,4.5vw,60px) clamp(28px,4vw,48px);text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;}
.cta-panel::before{content:'';position:absolute;width:420px;height:420px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(14,165,138,0.03),transparent 55%);pointer-events:none;}
.cta-panel .cta-h{font-size:clamp(26px,3vw,36px);margin-bottom:16px;min-height:2.24em;display:flex;align-items:center;justify-content:center;}
.cta-panel .cta-p{font-size:15px;margin-bottom:32px;max-width:360px;}
.cta-panel .cta-body{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;}
@media(max-width:820px){.cta-duo{grid-template-columns:1fr;}.cta-panel .cta-h{min-height:0;}}

/* ===== DIVIDER ===== */
.dvd{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);}
.dvd-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);}

/* ===== FOOTER ===== */
footer.ft{padding:48px clamp(24px,4vw,48px);max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line2);}
/* ===== BG STRIPE ===== */
.bg-stripe{background:var(--bg2);}

/* ===== ANIMATIONS ===== */
@keyframes up{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes breathe{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1);transition-delay:var(--d,0ms);}
.rv.v{opacity:1;transform:translateY(0);}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .prod-row{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .about-right{min-height:280px;}
  .vals{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .nv-links{position:fixed;top:64px;left:0;width:100%;background:rgba(255,255,255,0.99);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;align-items:stretch;gap:0;padding:0 20px;max-height:0;overflow:hidden;opacity:0;border-bottom:1px solid transparent;transition:max-height .42s cubic-bezier(0.16,1,0.3,1),opacity .3s,padding .42s;pointer-events:none;}
  .nv-links.open{max-height:420px;opacity:1;padding:8px 20px 24px;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,0.08);pointer-events:auto;}
  .nv-links a{padding:16px 4px;font-size:16px;border-bottom:1px solid var(--line2);}
  .nv-links a:last-of-type{border-bottom:none;}
  .nv-links .nv-cta{margin-top:16px;text-align:center;padding:16px!important;border-radius:11px;font-size:14.5px!important;}
  .nv-mob{display:block;}
  .hero{padding:140px 20px 80px;}
  .sec{padding:64px 20px;}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(31px,8.6vw,42px);}
  .hero-btns{flex-direction:column;width:100%;}
  .btn-p,.btn-s{width:100%;text-align:center;justify-content:center;}
  .about-metrics{flex-wrap:wrap;gap:24px 28px;}
  .vals{grid-template-columns:1fr;}
  .cta-links{flex-direction:column;gap:12px;}
  .hero-trust{flex-direction:column;gap:12px;}
  .st-cta-row{flex-direction:column;}
  .st-cta-row .btn-p,.st-cta-row .btn-s{width:100%;text-align:center;justify-content:center;}
}

/* ============================================================
   PREMIUM THEME — dark hero band + adaptive nav
   ============================================================ */
.hero-wrap{position:relative;overflow:hidden;background:radial-gradient(ellipse 75% 65% at 50% -8%,#1a2742 0%,#0d0d1c 52%,#090912 100%);}
.hero-wrap::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 18% 30%,rgba(14,165,138,0.10),transparent 40%),
  radial-gradient(circle at 85% 12%,rgba(18,201,164,0.08),transparent 38%);pointer-events:none;}
.hero{z-index:1;}
.hero::before{background:radial-gradient(ellipse,rgba(14,165,138,0.14),transparent 70%);width:720px;height:460px;top:10px;}
.hero h1{color:#fff;letter-spacing:-0.5px;}
.hero h1 em{color:var(--gl);}
.hero-p{color:rgba(255,255,255,0.64);}
.hero-eyebrow span{color:rgba(255,255,255,0.5);}
.hero-eyebrow{border:1px solid rgba(255,255,255,0.1);border-radius:100px;padding:8px 16px;background:rgba(255,255,255,0.03);}
.hero-trust-i{color:rgba(255,255,255,0.42);}
.hero .btn-s{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.16);color:#fff;}
.hero .btn-s:hover{border-color:var(--gl);color:var(--gl);background:rgba(255,255,255,0.09);box-shadow:none;}

/* Adaptive nav — transparent/light over dark hero, solid after scroll */
body[data-hero="dark"] #nav:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-logo span{color:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a{color:rgba(255,255,255,0.72);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a:hover{color:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:rgba(255,255,255,0.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,0.22);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta:hover{background:var(--g)!important;border-color:var(--g);box-shadow:none;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-mob svg{stroke:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open a:not(.nv-link-solo){color:var(--ink3)!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open a:not(.nv-link-solo):hover{color:var(--g)!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open .nv-cta{background:var(--g)!important;color:#fff!important;border-color:transparent;}

/* ===== HOW WE WORK (process) ===== */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.proc-step{position:relative;padding:28px 20px;background:var(--bg);border:1px solid var(--line);border-radius:16px;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);}
.proc-step:hover{transform:translateY(-4px);border-color:rgba(14,165,138,0.18);box-shadow:0 14px 34px rgba(0,0,0,0.05);}
.proc-num{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:800;color:var(--g);letter-spacing:1.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.proc-num::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(14,165,138,0.35),transparent);}
.proc-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.proc-d{font-size:13px;color:var(--ink3);line-height:1.65;}

/* ===== WHY ZIVARA (dark band) ===== */
.why{background:linear-gradient(150deg,#0e0e1a 0%,#15152a 60%,#101024 100%);border-radius:28px;padding:clamp(48px,6vw,84px) clamp(32px,5vw,68px);position:relative;overflow:hidden;}
.why::before{content:'';position:absolute;width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(14,165,138,0.12),transparent 60%);pointer-events:none;}
.why-hdr{text-align:center;margin-bottom:52px;position:relative;}
.why-hdr .sec-ey{color:var(--gl);}
.why-hdr h2{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,4vw,46px);color:#fff;line-height:1.14;margin-bottom:12px;}
.why-hdr p{font-size:16px;color:rgba(255,255,255,0.55);max-width:480px;margin:0 auto;line-height:1.8;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 44px;position:relative;}
.why-item{display:flex;flex-direction:column;}
.why-ic{width:44px;height:44px;border-radius:12px;background:rgba(14,165,138,0.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.why-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:8px;}
.why-d{font-size:14px;color:rgba(255,255,255,0.55);line-height:1.7;}

/* ===== VISUAL REFINEMENTS ===== */
.sec-h{letter-spacing:-0.5px;}
.prod:hover{box-shadow:0 24px 56px rgba(0,0,0,0.07);}
.st-card:hover,.val:hover{box-shadow:0 16px 38px rgba(0,0,0,0.05);}

@media(max-width:900px){.proc{grid-template-columns:1fr 1fr;}.why-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:560px){.proc{grid-template-columns:1fr;}.why-grid{grid-template-columns:1fr;}}

/* ============================================================
   PRO POLISH — hero depth, stats, FAQ, footer, micro-interactions
   ============================================================ */
/* Hero depth: grid + animated gradient orbs */
.hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,0.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.028) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 72% 60% at 50% 0%,#000 22%,transparent 72%);mask-image:radial-gradient(ellipse 72% 60% at 50% 0%,#000 22%,transparent 72%);pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0;}
.orb1{width:360px;height:360px;background:radial-gradient(circle,rgba(14,165,138,0.45),transparent 70%);top:-80px;left:-60px;animation:orbf1 15s ease-in-out infinite;}
.orb2{width:320px;height:320px;background:radial-gradient(circle,rgba(58,130,255,0.20),transparent 70%);top:20px;right:-80px;animation:orbf2 18s ease-in-out infinite;}
@keyframes orbf1{0%,100%{transform:translate(0,0);}50%{transform:translate(50px,40px);}}
@keyframes orbf2{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,50px);}}

/* Hero stats band (on the dark canvas) */
.hero-stats{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 clamp(24px,4vw,48px) 100px;display:grid;grid-template-columns:repeat(4,1fr);}
.hstat{text-align:center;padding:0 12px;border-left:1px solid rgba(255,255,255,0.09);}
.hstat:first-child{border-left:none;}
.hstat-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:clamp(28px,4.2vw,42px);color:#fff;line-height:1;letter-spacing:-1.5px;}
.hstat-l{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;font-weight:500;color:rgba(255,255,255,0.46);margin-top:12px;letter-spacing:0.3px;}
@media(max-width:600px){.hero-stats{grid-template-columns:1fr 1fr;gap:32px 0;padding-bottom:72px;}.hstat:nth-child(3){border-left:none;}}

/* Primary button shine */
.btn-p{position:relative;overflow:hidden;}
.btn-p::after{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.28),transparent);transform:skewX(-22deg);transition:left .65s cubic-bezier(0.16,1,0.3,1);pointer-events:none;}
.btn-p:hover::after{left:150%;}

/* Card gradient-border glow on hover */
.st-card,.tech-col,.proc-step{position:relative;}
.st-card::before,.tech-col::before,.proc-step::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(14,165,138,0.55),rgba(18,201,164,0.06) 45%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;}
.st-card:hover::before,.tech-col:hover::before,.proc-step:hover::before{opacity:1;}

/* Staggered reveal inside grids */
.st-grid .rv:nth-child(3n+2){transition-delay:.07s;}
.st-grid .rv:nth-child(3n){transition-delay:.14s;}
.proc .rv:nth-child(2),.tech-grid .rv:nth-child(2){transition-delay:.06s;}
.proc .rv:nth-child(3),.tech-grid .rv:nth-child(3){transition-delay:.12s;}
.proc .rv:nth-child(4),.tech-grid .rv:nth-child(4){transition-delay:.18s;}
.proc .rv:nth-child(5){transition-delay:.24s;}

/* FAQ */
.faq{max-width:780px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;text-align:left;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16.5px;font-weight:600;color:var(--ink);transition:color .25s;}
.faq-q:hover{color:var(--g);}
.faq-ic{position:relative;flex-shrink:0;width:20px;height:20px;}
.faq-ic::before,.faq-ic::after{content:'';position:absolute;background:var(--g);border-radius:2px;transition:transform .3s cubic-bezier(0.16,1,0.3,1);}
.faq-ic::before{top:9px;left:2px;width:16px;height:2px;}
.faq-ic::after{left:9px;top:2px;width:2px;height:16px;}
.faq-item.open .faq-ic::after{transform:rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(0.16,1,0.3,1);}
.faq-item.open .faq-a{max-height:340px;}
.faq-a-inner{padding:0 4px 28px;font-size:15px;color:var(--ink3);line-height:1.85;}

/* Industries pills with icons */
.ind-pill svg{flex-shrink:0;}
.ind-pill{padding-left:16px;}

/* Process — timeline connector + circular badges */
.proc{position:relative;}
.proc::before{content:'';position:absolute;top:52px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,rgba(14,165,138,0.3) 0 7px,transparent 7px 15px);z-index:0;}
.proc-step{z-index:1;}
.proc-badge{width:48px;height:48px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(14,165,138,0.28);color:var(--g);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .35s cubic-bezier(0.16,1,0.3,1);}
.proc-step:hover .proc-badge{background:var(--g);color:#fff;border-color:var(--g);transform:scale(1.07);box-shadow:0 8px 20px rgba(14,165,138,0.25);}
@media(max-width:900px){.proc::before{display:none;}}

/* Contact actions */
.cta-actions{display:flex;align-items:center;justify-content:center;gap:16px 24px;flex-wrap:wrap;margin-bottom:32px;position:relative;}
.cta-actions .cta-email{margin:0;}
.cta-note{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;color:var(--ink4);margin-top:28px;position:relative;display:inline-flex;align-items:center;gap:8px;}
.cta-note .hero-dot{width:6px;height:6px;}

/* Professional multi-column footer */
@media(max-width:760px){}
@media(max-width:460px){}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--g),var(--gl));z-index:1100;transition:width .08s linear;box-shadow:0 0 8px rgba(14,165,138,0.4);}

/* Active nav link (scroll-spy) */
.nv-links a.active{color:var(--g);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a.active{color:#fff;}

/* Hamburger ↔ X icon */
.nv-mob{position:relative;}
.nv-mob .ic-close{display:none;}
#nav.menu-open .nv-mob .ic-open{display:none;}
#nav.menu-open .nv-mob .ic-close{display:block;}

/* Capabilities marquee band */
.marquee-band{background:var(--bg);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;}
.marquee{display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:40px;padding-right:40px;white-space:nowrap;animation:marq 36s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:14.5px;color:var(--ink3);letter-spacing:0.3px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.marquee-track span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g);opacity:.55;flex-shrink:0;}
@keyframes marq{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track,.orb1,.orb2,.orb3{animation:none;}}

/* ============================================================
   ✦ VIBRANT GRADIENT THEME ✦
   ============================================================ */
:root{
  --blue:#3b82f6; --violet:#8b5cf6; --indigo:#6366f1; --cyan:#22b8cf;
  --grad:linear-gradient(120deg,#0EA58A 0%,#22b8cf 32%,#3b82f6 66%,#8b5cf6 100%);
}

/* Ambient gradient mesh behind the whole page */
body{background:#fafbff;}
body::before{content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none;background:
  radial-gradient(34% 26% at 9% 12%,rgba(14,165,138,0.075),transparent 62%),
  radial-gradient(32% 26% at 93% 20%,rgba(59,130,246,0.07),transparent 62%),
  radial-gradient(36% 30% at 80% 66%,rgba(139,92,246,0.065),transparent 62%),
  radial-gradient(30% 24% at 16% 84%,rgba(34,184,207,0.055),transparent 62%);}

/* Translucent sections so the mesh shows through */
.bg-stripe{background:rgba(255,255,255,0.55);}
section.sec,.dvd{position:relative;z-index:1;}

/* Gradient text accents */
.sec-ey,.cta-ey{color:var(--g);}
.hero h1 em{background:linear-gradient(120deg,#19d3ad,#5fb0ff,#b394ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Gradient primary buttons */
.btn-p,.nv-cta{background:var(--grad)!important;background-size:170% 170%!important;box-shadow:0 2px 8px rgba(22,32,74,0.10)!important;border-color:transparent!important;}
.btn-p:hover{box-shadow:0 8px 20px rgba(22,32,74,0.16)!important;}
.nv-cta:hover{background:var(--grad)!important;filter:brightness(1.06);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:rgba(255,255,255,0.12)!important;}

/* Glass cards + gradient hover borders + colored depth */
.st-card,.tech-col,.proc-step,.val,.prod,.about{background:rgba(255,255,255,0.78)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.st-card,.tech-col,.proc-step,.val,.prod{border-color:rgba(22,32,74,0.07);box-shadow:0 1px 2px rgba(22,32,74,0.04);}
.st-card:hover,.tech-col:hover,.prod:hover,.val:hover,.proc-step:hover{box-shadow:0 10px 30px rgba(22,32,74,0.09)!important;border-color:rgba(22,32,74,0.1);}
.st-card::before,.tech-col::before,.proc-step::before{background:linear-gradient(150deg,rgba(14,165,138,0.5),rgba(14,165,138,0.08) 60%,transparent)!important;}

/* Gradient icon tiles with white glyphs */
.st-card-ic,.prod-icon{background:rgba(14,165,138,0.09)!important;box-shadow:none;}
.st-card-ic svg [stroke],.prod-icon svg [stroke]{stroke:#0EA58A;}
.st-card-ic svg [fill]:not([fill="none"]),.prod-icon svg [fill]:not([fill="none"]){fill:#0EA58A;}

/* Industries pills → glass with gradient-tinted hover */
.ind-pill{background:rgba(255,255,255,0.62)!important;backdrop-filter:blur(10px);}
.ind-pill:hover{border-color:rgba(22,32,74,0.12);background:rgba(255,255,255,0.95)!important;}

/* Process circular badges gradient */
.proc-badge{border-color:transparent;background:rgba(14,165,138,0.09);}
.proc-step:hover .proc-badge{background:var(--g);color:#fff;}

/* Dark "Why" band → vibrant gradient mesh */
.why{background:linear-gradient(150deg,#0c1226 0%,#141a3a 55%,#1b1232 100%)!important;}
.why::before{background:radial-gradient(circle,rgba(59,130,246,0.2),transparent 60%)!important;}
.why::after{content:'';position:absolute;width:460px;height:460px;bottom:-150px;left:-110px;background:radial-gradient(circle,rgba(139,92,246,0.18),transparent 60%);pointer-events:none;}
.why-ic{background:rgba(255,255,255,0.09)!important;}

/* CTA + StarTime visual + About panel → gradient glass */
.cta{background:linear-gradient(135deg,rgba(14,165,138,0.07),rgba(59,130,246,0.08),rgba(139,92,246,0.07))!important;border-color:rgba(255,255,255,0.6);backdrop-filter:blur(10px);}
.st-visual{background:linear-gradient(160deg,rgba(14,165,138,0.08),rgba(59,130,246,0.07),rgba(139,92,246,0.06))!important;}
.about-right{background:linear-gradient(160deg,rgba(14,165,138,0.09),rgba(139,92,246,0.09))!important;}
.st-card-ic,.about-brand svg{position:relative;}

/* Hero: richer multi-color mesh + violet orb */
.hero-wrap{background:radial-gradient(ellipse 82% 72% at 50% -10%,#142244 0%,#0e1024 50%,#0a0a16 100%);}
.orb2{background:radial-gradient(circle,rgba(59,130,246,0.36),transparent 70%);}
.orb3{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0;width:300px;height:300px;background:radial-gradient(circle,rgba(139,92,246,0.32),transparent 70%);bottom:-30px;left:40%;animation:orbf1 17s ease-in-out infinite;}

/* ===== TECH STACK — refined professional ===== */
.tech-col{padding:28px 24px 24px;}
.tech-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line2);}
.tech-badge{width:46px;height:46px;border-radius:13px;background:rgba(14,165,138,0.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tech-badge svg [stroke]{stroke:#0EA58A;}
.tech-cat{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.1;}
.tech-sub{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;color:var(--ink4);margin-top:4px;letter-spacing:0.2px;}
.tech-list{gap:8px;}
.tech-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.72)!important;border:1px solid var(--line);border-radius:9px;padding:8px 12px 8px 12px;color:var(--ink2)!important;transition:all .25s cubic-bezier(0.16,1,0.3,1);}
.tech-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--g);flex-shrink:0;}
.tech-col:hover .tech-tag{background:rgba(255,255,255,0.72)!important;color:var(--ink2)!important;}
.tech-tag:hover{border-color:rgba(22,32,74,0.12);transform:translateY(-2px);background:#fff!important;}
.tech-cat-row{display:flex;align-items:center;gap:8px;}
.tech-new{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--g);background:rgba(14,165,138,0.11);padding:3px 8px;border-radius:5px;line-height:1;}
.tech-col.is-ai{border-color:rgba(139,92,246,0.28);box-shadow:0 8px 30px rgba(124,92,246,0.12);}
.tech-col.is-ai .tech-badge{box-shadow:0 6px 18px rgba(124,92,246,0.34);}
@media(max-width:980px){.tech-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.tech-grid{grid-template-columns:1fr;}}

/* ===== Featured AI service card ===== */
.svc-feature{grid-column:1/-1;display:flex;align-items:center;gap:28px;padding:32px 36px;border-radius:18px;background:rgba(14,165,138,0.045);border:1px solid rgba(14,165,138,0.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden;}
.svc-feature::before{content:'';position:absolute;width:320px;height:320px;top:-130px;right:-60px;background:radial-gradient(circle,rgba(14,165,138,0.10),transparent 62%);pointer-events:none;}
.svc-feature-ic{width:66px;height:66px;border-radius:17px;background:rgba(14,165,138,0.11);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.svc-feature-ic svg [stroke]{stroke:#0EA58A;}
.svc-feature-body{flex:1;position:relative;min-width:0;}
.svc-feature-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.svc-feature-head h3{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:20px;font-weight:700;color:var(--ink);}
.svc-feature-d{font-size:14.5px;color:var(--ink2);line-height:1.7;margin-bottom:16px;max-width:680px;}
.svc-feature-tags{display:flex;flex-wrap:wrap;gap:8px;}
.svc-feature-tags span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:600;color:var(--ink2);background:rgba(255,255,255,0.8);border:1px solid rgba(22,32,74,0.07);border-radius:7px;padding:4px 12px;display:inline-flex;align-items:center;gap:8px;}
.svc-feature-tags span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--g);}
@media(max-width:760px){.svc-feature{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px;}}

/* ===== Industries — icon card grid ===== */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ind-card{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,0.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);transition:all .35s cubic-bezier(0.16,1,0.3,1);}
.ind-card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 14px 32px rgba(80,90,200,0.13);}
.ind-ic{width:44px;height:44px;border-radius:12px;background:rgba(14,165,138,0.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s;}
.ind-card:hover .ind-ic{background:var(--g);}
.ind-card:hover .ind-ic svg [stroke]{stroke:#fff;}
.ind-name{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;}
@media(max-width:980px){.ind-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.ind-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:420px){.ind-grid{grid-template-columns:1fr;}}

/* ===== Process — icon + number + deliverable ===== */
.proc{gap:16px;}
.proc .proc-step{padding:28px 24px;background:rgba(255,255,255,0.92)!important;}
.proc-icontop{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.proc-ic{width:50px;height:50px;border-radius:14px;background:rgba(14,165,138,0.09);display:flex;align-items:center;justify-content:center;transition:all .35s;}
.proc-step:hover .proc-ic{background:var(--g);}
.proc-step:hover .proc-ic svg [stroke]{stroke:#fff;}
.proc-no{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-size:40px;color:rgba(14,165,138,0.2);line-height:1;transition:color .35s;}
.proc-step:hover .proc-no{color:rgba(124,92,246,0.32);}
.proc-deliver{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line2);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;font-weight:600;color:var(--ink3);}
.proc-deliver svg{flex-shrink:0;}
.proc::before{top:55px;}

/* ============================================================
   ✦ PROFESSIONAL HEADER ✦
   ============================================================ */
/* Animated gradient underline on TOP-LEVEL links only (hover + active) */
.nv-item>.nv-link,.nv-links>a.nv-link{position:relative;}
.nv-item>.nv-link::after,.nv-links>a.nv-link::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--g);transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(0.16,1,0.3,1);}
.nv-item:hover>.nv-link::after,.nv-item>.nv-link.active::after,.nv-links>a.nv-link:hover::after,.nv-links>a.nv-link.active::after{transform:scaleX(1);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-item>.nv-link::after,body[data-hero="dark"] #nav:not(.scrolled) .nv-links>a.nv-link::after{background:linear-gradient(120deg,#19d3ad,#5fb0ff,#b394ff);}

/* CTA arrow */
.nv-cta{display:inline-flex;align-items:center;gap:8px;}
.nv-cta svg{transition:transform .3s;}
.nv-cta:hover svg{transform:translateX(3px);}

/* Logo refinement */
.nv-logo svg{transition:transform .35s cubic-bezier(0.16,1,0.3,1);}
.nv-logo:hover svg{transform:rotate(-8deg) scale(1.06);}
.nv-logo span{transition:letter-spacing .35s;}

/* Floating pill navbar on scroll (desktop) */
@media(min-width:769px){
  #nav{transition:top .42s cubic-bezier(0.16,1,0.3,1),width .42s cubic-bezier(0.16,1,0.3,1),background .4s,box-shadow .4s,border-color .4s;}
  #nav.scrolled{top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:1140px;border-radius:18px;border:1px solid rgba(120,130,200,0.1);box-shadow:0 12px 44px rgba(50,60,130,0.12);background:rgba(255,255,255,0.78);}
  #nav.scrolled .nv{height:58px;}
}
@media(max-width:768px){.nv-item>.nv-link::after,.nv-links>a.nv-link::after{display:none;}}

/* ===== MEGA-MENU DROPDOWNS ===== */
.nv-item{position:relative;display:flex;align-items:center;}
.nv-link{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;color:var(--ink3);transition:color .3s;}
.nv-link:hover{color:var(--g);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-link{color:rgba(255,255,255,0.72);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-link:hover{color:#fff;}
.nv-link .chev{opacity:.55;transition:transform .3s;}
.nv-item:hover .nv-link .chev{transform:rotate(180deg);}

.nv-drop{position:absolute;top:100%;left:0;margin-top:16px;transform:translateY(10px);background:#fff;border:1px solid rgba(120,130,200,0.12);border-radius:18px;box-shadow:0 28px 70px rgba(40,50,120,0.18);padding:12px;min-width:280px;opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(0.16,1,0.3,1),transform .26s cubic-bezier(0.16,1,0.3,1);z-index:1200;}
.nv-drop::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;}
/* Right-align the last item's dropdown so it opens inward, never past the right edge */
.nv-item:last-of-type .nv-drop{left:auto;right:0;}
.nv-item:hover .nv-drop{opacity:1;visibility:visible;transform:translateY(0);}
.nv-drop-wide{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:560px;}
.nv-drop-label{grid-column:1/-1;display:block;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);padding:4px 12px 8px;}
.nv-drop-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;text-decoration:none;transition:background .2s;}
.nv-drop-row:hover{background:var(--bg2);}
.nv-drop-ic{width:38px;height:38px;border-radius:10px;background:rgba(14,165,138,0.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s;}
.nv-drop-row:hover .nv-drop-ic{background:var(--g);}
.nv-drop-row:hover .nv-drop-ic svg [stroke]{stroke:#fff;}
.nv-drop-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;line-height:1.2;}
.nv-drop-d{font-size:11.5px;color:var(--ink3);margin-top:3px;}
.nv-drop-tag{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--g);background:rgba(14,165,138,0.11);padding:2px 4px;border-radius:4px;}

/* ===== MOBILE: full-screen premium menu ===== */
@media(max-width:768px){
  .nv-links.open{max-height:calc(100vh - 64px);overflow-y:auto;}
  .nv-item{display:block;}
  .nv-item>.nv-link{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4)!important;padding:16px 4px 4px;border-bottom:none!important;pointer-events:none;}
  .nv-item>.nv-link .chev{display:none;}
  .nv-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;padding:0 0 8px;margin:0;min-width:0;width:auto!important;background:transparent;display:block;}
  .nv-drop::before{display:none;}
  .nv-drop-label{display:none;}
  .nv-drop-row{padding:12px 4px;border-bottom:1px solid var(--line2);}
  .nv-drop-ic{width:36px;height:36px;}
  .nv-link-solo{display:block;font-size:16px;font-weight:600;color:var(--ink)!important;padding:16px 4px!important;margin-top:8px;border-top:1px solid var(--line);}
}

/* ===== Mobile nav hardening — keep it a clean full-width bar so the
   fixed dropdown can never shift/hide to the side (fixes resize bug) ===== */
@media(max-width:768px){
  #nav,#nav.scrolled{transform:none!important;left:0!important;right:auto!important;width:100%!important;max-width:none!important;border-radius:0!important;top:0!important;transition:background .3s,box-shadow .3s!important;}
  .nv-links{left:0!important;right:0!important;width:auto!important;transform:none!important;overflow-x:hidden;}
}

/* ===== CASE STUDIES — editorial, evidence-led ===== */
.cs-tech{display:flex;flex-wrap:wrap;gap:4px;margin-top:20px;}
.cs-tech span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;color:var(--ink3);background:rgba(255,255,255,0.7);border:1px solid var(--line);border-radius:7px;padding:4px 8px;}
.cs-v strong{color:var(--ink);font-weight:600;}
.cs-note{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:rgba(255,255,255,0.5);border:1px solid var(--line);border-radius:18px;padding:24px clamp(22px,3vw,34px);}
.cs-note-t{font-size:14.5px;line-height:1.7;color:var(--ink2);max-width:620px;}
@media(max-width:940px){}

/* Careers: four roles read as one row, never an orphan card */
/* Four columns gave each role card 239px for 24-35 words — roughly four
   words a line, with every title wrapping. Two columns at ~490px is a
   readable measure, and four roles sit evenly in a 2x2. */
.careers-grid{grid-template-columns:1fr 1fr;}
@media(max-width:1100px){.careers-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.careers-grid{grid-template-columns:1fr;}}

/* ===== CONTACT — a real form, not a mail link ===== */
.ct-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3.4vw,44px);align-items:start;}
.ct-form{background:rgba(255,255,255,0.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(22,32,74,0.07);box-shadow:0 1px 2px rgba(22,32,74,0.04);border-radius:24px;padding:clamp(26px,3.2vw,40px);}
.ct-switch{display:inline-flex;gap:4px;background:var(--bg3);border-radius:11px;padding:4px;margin-bottom:24px;}
.ct-sw{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:500;color:var(--ink3);background:transparent;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;transition:all .25s cubic-bezier(0.16,1,0.3,1);}
.ct-sw.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(70,90,180,0.1);}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ct-f{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.ct-f[hidden]{display:none;}
.ct-f > span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:0.3px;color:var(--ink3);}
.ct-f > span i{font-style:normal;color:var(--g);}
.ct-f input,.ct-f select,.ct-f textarea{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14.5px;color:var(--ink);background:rgba(255,255,255,0.75);border:1px solid var(--line);border-radius:11px;padding:12px 12px;width:100%;transition:border-color .25s,box-shadow .25s,background .25s;}
.ct-f textarea{resize:vertical;min-height:126px;line-height:1.6;}
.ct-f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236a6a86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.ct-f input:hover,.ct-f select:hover,.ct-f textarea:hover{border-color:#d8dae4;}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:none;background:#fff;border-color:var(--g);box-shadow:0 0 0 3px rgba(14,165,138,0.13);}
.ct-f.is-bad input,.ct-f.is-bad textarea{border-color:#d4553c;box-shadow:0 0 0 3px rgba(212,85,60,0.11);}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ct-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
.ct-submit .btn-p{border:none;cursor:pointer;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
.ct-submit .btn-p[disabled]{opacity:.6;cursor:progress;}
.ct-fine{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;color:var(--ink4);line-height:1.6;}
.ct-fine a{color:var(--ink3);}
.ct-status{font-size:13.5px;line-height:1.65;margin-top:16px;padding:12px 16px;border-radius:11px;display:none;}
.ct-status.is-on{display:block;}
.ct-status.is-bad{background:rgba(212,85,60,0.08);color:#a33e28;border:1px solid rgba(212,85,60,0.2);}
.ct-status.is-info{background:var(--bg3);color:var(--ink2);border:1px solid var(--line);}
.ct-status a{color:var(--g);font-weight:600;}
.ct-done{display:none;text-align:center;padding:clamp(30px,4vw,52px) 20px;}
.ct-done.is-on{display:block;}
.ct-done-ic{width:56px;height:56px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.ct-done-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:29px;color:var(--ink);margin-bottom:12px;}
.ct-done-p{font-size:14.5px;line-height:1.75;color:var(--ink2);max-width:44ch;margin:0 auto;}

.ct-side{display:flex;flex-direction:column;gap:12px;}
.ct-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);border:1px solid rgba(22,32,74,0.06);border-radius:20px;padding:24px 24px 24px;}
.ct-card-k{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink4);margin-bottom:12px;}
.ct-mail{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16.5px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-0.3px;transition:color .25s;}
.ct-mail:hover{color:var(--g);}
.ct-card p{font-size:13.5px;line-height:1.7;color:var(--ink3);margin-top:12px;}
.ct-fact{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.6;color:var(--ink2);padding:12px 0;border-bottom:1px solid var(--line2);}
.ct-fact:last-child{border-bottom:none;padding-bottom:0;}
.ct-fact svg{flex:0 0 auto;margin-top:2px;}
.ct-social{display:flex;gap:8px;margin-top:16px;}
.ct-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.7);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .25s;}
.ct-social a:hover{border-color:rgba(22,32,74,0.14);transform:translateY(-2px);}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.ct-row{grid-template-columns:1fr;gap:0;}}

/* ===== WRITING — internal links to the engineering blog ===== */
.wr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.wr{display:flex;flex-direction:column;background:rgba(255,255,255,0.78);border:1px solid rgba(22,32,74,0.07);border-radius:18px;padding:24px 24px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(22,32,74,0.04);transition:box-shadow .35s cubic-bezier(0.16,1,0.3,1),transform .35s cubic-bezier(0.16,1,0.3,1),border-color .35s;}
.wr:hover{box-shadow:0 10px 30px rgba(22,32,74,0.09);transform:translateY(-2px);border-color:rgba(22,32,74,0.1);}
.wr-meta{display:flex;align-items:center;gap:8px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4);margin-bottom:12px;}
.wr-cat{color:var(--g);}
.wr-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-0.3px;color:var(--ink);margin-bottom:8px;}
.wr-d{font-size:13.5px;line-height:1.7;color:var(--ink3);margin-bottom:16px;}
.wr-more{margin-top:auto;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:600;color:var(--g);display:inline-flex;align-items:center;gap:8px;transition:gap .25s;}
.wr:hover .wr-more{gap:12px;}
.wr-all{display:flex;justify-content:center;margin-top:28px;}
@media(max-width:900px){.wr-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.wr-grid{grid-template-columns:1fr;}}

/* ============================================================
   ENTERPRISE THEME — photography-led, institutional, restrained.
   Sits last in the cascade and supersedes the gradient theme above.
   ============================================================ */
:root{
  --navy:#0C1E33; --navy2:#132F4C; --navy3:#1D3E60;
  --ink:#101820; --ink2:#3D4A57; --ink3:#6B7885; --ink4:#939EAA; --ink5:#BFC7CF;
  --bg:#ffffff; --bg2:#F5F7F9; --bg3:#EDF1F4;
  --line:#E1E6EB; --line2:#EDF0F3;
  --g:#0B8C75; --g-soft:#E8F4F1;
  --r:6px; --r-lg:8px;
}

/* Flat institutional ground — no ambient mesh, no tinting. */
body{background:#fff!important;}
body::before{display:none!important;}
.bg-stripe{background:var(--bg2)!important;}

/* ---------- Type: one family, a firm scale ---------- */
.hero h1,.sec-h,.work-h,.st-h,.about-title,.cta-h,.why-hdr h2,.office-copy-h,.ct-done-h,.faq h2{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-weight:800!important;letter-spacing:-1px!important;}
.sec-h{font-size:clamp(29px,3.5vw,40px)!important;line-height:1.14!important;color:var(--ink)!important;}
.hero h1{font-size:clamp(38px,5.4vw,64px)!important;line-height:1.06!important;letter-spacing:-1.6px!important;}
.st-h,.about-title{font-size:clamp(26px,3vw,34px)!important;}

/* Section headers: left-aligned under a short accent rule. Centred stacks
   are what template pages do; a firm leads with a column of text. */
.sec-hdr{text-align:left!important;margin-bottom:44px!important;max-width:760px;}
.sec-hdr .sec-p{margin:0!important;max-width:620px!important;}
/* a second paragraph in a section header needs the gap the first one gives up */
.sec-hdr .sec-p + .sec-p{margin-top:18px!important;}
.sec-ey{position:relative;padding-top:16px;font-size:11px!important;font-weight:700!important;
  letter-spacing:2.4px!important;color:var(--g)!important;margin-bottom:12px!important;}
.sec-ey::before{content:'';position:absolute;top:0;left:0;width:38px;height:2px;background:var(--g);}
.why-hdr,.cta-panel{text-align:left!important;}

/* ---------- Surfaces: flat, hairline, small radius ---------- */
.st-card,.tech-col,.proc-step,.val,.prod,.about,.cs,.ct-form,.ct-card,.wr,.ind-pill,.ind-card,.faq-item{
  background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-color:var(--line)!important;box-shadow:none!important;border-radius:var(--r)!important;}
.st-card:hover,.tech-col:hover,.prod:hover,.val:hover,.proc-step:hover,.cs:hover,.wr:hover{
  box-shadow:0 4px 16px rgba(12,30,51,0.07)!important;border-color:#CBD4DC!important;transform:none!important;}
.st-card::before,.tech-col::before,.proc-step::before{display:none!important;}
.cta,.st-visual,.about-right,.cs-note,.svc-feature{
  background:var(--bg2)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;backdrop-filter:none!important;}
.svc-feature::before{display:none!important;}
.ct-form,.ct-card{border-radius:var(--r)!important;}
.ct-f input,.ct-f select,.ct-f textarea{border-radius:var(--r)!important;background:#fff!important;}
.tech-tag,.st-chip,.cs-tech span,.svc-feature-tags span,.st-lang{border-radius:4px!important;background:var(--bg2)!important;border:1px solid var(--line)!important;}
.ind-pill:hover,.tech-tag:hover,.ct-social a:hover{transform:none!important;border-color:#CBD4DC!important;}

/* Icon tiles: a bordered square with a teal glyph. No fills, no glow. */
.st-card-ic,.prod-icon,.tech-badge,.svc-feature-ic,.ind-ic,.proc-ic,.nv-drop-ic{
  background:var(--g-soft)!important;border:1px solid rgba(11,140,117,0.16)!important;border-radius:var(--r)!important;box-shadow:none!important;}
.st-card-ic svg [stroke],.prod-icon svg [stroke],.tech-badge svg [stroke],.svc-feature-ic svg [stroke],
.ind-ic svg [stroke],.proc-ic svg [stroke],.nv-drop-ic svg [stroke]{stroke:var(--g)!important;}
.ind-card:hover .ind-ic,.proc-step:hover .proc-ic,.nv-drop-row:hover .nv-drop-ic{background:var(--g)!important;border-color:var(--g)!important;}
.ind-card:hover .ind-ic svg [stroke],.proc-step:hover .proc-ic svg [stroke],.nv-drop-row:hover .nv-drop-ic svg [stroke]{stroke:#fff!important;}
.proc-badge{background:var(--bg3)!important;border-color:transparent!important;}
.proc-step:hover .proc-badge{background:var(--navy)!important;color:#fff!important;box-shadow:none!important;}

/* ---------- Buttons: solid, square-ish, no gradient ---------- */
.btn-p,.nv-cta{background:var(--g)!important;background-image:none!important;color:#fff!important;
  border-radius:var(--r)!important;box-shadow:none!important;border:1px solid var(--g)!important;font-weight:700!important;}
.btn-p:hover,.nv-cta:hover{background:#0A7A66!important;border-color:#0A7A66!important;box-shadow:none!important;filter:none!important;}
.btn-s{border-radius:var(--r)!important;border:1px solid var(--line)!important;background:#fff!important;color:var(--ink)!important;font-weight:600!important;}
.btn-s:hover{border-color:var(--ink3)!important;background:#fff!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:var(--g)!important;border-color:var(--g)!important;}
.btn-p::after,.btn-p::before{display:none!important;}
.nv-item>.nv-link::after,.nv-links>a.nv-link::after{background:var(--g)!important;}
.nv-drop{border-radius:var(--r)!important;box-shadow:0 16px 44px rgba(12,30,51,0.14)!important;}
.nv-drop-tag,.tech-new{background:var(--g-soft)!important;color:var(--g)!important;border-radius:3px!important;}

/* ---------- Dark bands: one institutional navy ---------- */
.why{background:var(--navy)!important;border-radius:var(--r)!important;}
.why::before,.why::after{display:none!important;}
.why-ic{background:rgba(255,255,255,0.07)!important;border:1px solid rgba(255,255,255,0.12)!important;border-radius:var(--r)!important;}
.why-ic svg [stroke]{stroke:#4FD1B5!important;}
.why-hdr .sec-ey{color:#4FD1B5!important;}
.why-hdr .sec-ey::before{background:#4FD1B5;}
/* ---------- Case studies: a ledger, not a card stack ---------- */
.wr-t{letter-spacing:-0.4px!important;}
.wr-cat,.wr-more,.ct-mail:hover{color:var(--g)!important;}

/* ---------- Commitments strip ---------- */
.cmt{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);}
.cmt-in{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(4,1fr);}
.cmt-i{padding:28px 24px 28px 0;border-right:1px solid var(--line);}
.cmt-i:last-child{border-right:none;}
.cmt-i:not(:first-child){padding-left:24px;}
.cmt-k{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-0.2px;}
.cmt-d{font-size:13px;line-height:1.6;color:var(--ink3);}
@media(max-width:900px){.cmt-in{grid-template-columns:1fr 1fr;}.cmt-i:nth-child(2){border-right:none;}.cmt-i:nth-child(-n+2){border-bottom:1px solid var(--line);}}
@media(max-width:560px){.cmt-in{grid-template-columns:1fr;}.cmt-i{border-right:none!important;padding-left:0!important;}.cmt-i:not(:last-child){border-bottom:1px solid var(--line);}}

/* ---------- Engagement models ---------- */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;}
.eng-col{padding:28px 24px 32px;border-right:1px solid var(--line);display:flex;flex-direction:column;}
.eng-col:last-child{border-right:none;}
.eng-n{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--g);margin-bottom:12px;}
.eng-t{font-size:18px;font-weight:800;letter-spacing:-0.5px;color:var(--ink);margin-bottom:8px;}
.eng-d{font-size:13.5px;line-height:1.7;color:var(--ink3);margin-bottom:20px;}
.eng-l{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:8px;}
.eng-l li{position:relative;padding-left:20px;font-size:13px;line-height:1.55;color:var(--ink2);}
.eng-l li::before{content:'';position:absolute;left:1px;top:4px;width:5px;height:9px;border:1.7px solid var(--g);border-top:none;border-left:none;transform:rotate(42deg);}
@media(max-width:1000px){.eng{grid-template-columns:1fr 1fr;}.eng-col:nth-child(2){border-right:none;}.eng-col:nth-child(-n+2){border-bottom:1px solid var(--line);}}
@media(max-width:600px){.eng{grid-template-columns:1fr;}.eng-col{border-right:none!important;}.eng-col:not(:last-child){border-bottom:1px solid var(--line);}}

/* ---------- Hero: a photograph of the actual firm, not an abstraction ---------- */
.hero-wrap{background:var(--navy)!important;position:relative;overflow:hidden;}
.hero-grid,.orb{display:none!important;}
.hero-photo{position:absolute;inset:0;z-index:0;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(8,22,38,0.96) 0%,rgba(8,22,38,0.92) 40%,rgba(8,22,38,0.78) 70%,rgba(8,22,38,0.70) 100%),
             linear-gradient(180deg,rgba(8,22,38,0.55) 0%,transparent 26%,transparent 70%,rgba(8,22,38,0.5) 100%);}
.hero{position:relative;z-index:2;max-width:1100px!important;margin:0 auto!important;
  padding:clamp(96px,11vw,150px) clamp(24px,4vw,48px) clamp(60px,7vw,90px)!important;text-align:left!important;}
.hero-inner{max-width:660px;}
.hero-eyebrow{background:transparent!important;border:none!important;padding:0!important;margin-bottom:20px!important;
  font-size:11.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#63D9BF!important;}
.hero-eyebrow .hero-dot{background:#63D9BF!important;}
.hero h1{color:#fff!important;margin-bottom:20px!important;}
.hero-p{color:rgba(255,255,255,0.76)!important;max-width:560px!important;margin:0 0 36px!important;font-size:clamp(15.5px,1.4vw,17.5px)!important;}
.hero-btns{justify-content:flex-start!important;}
.hero .btn-s{background:transparent!important;border-color:rgba(255,255,255,0.34)!important;color:#fff!important;}
.hero .btn-s:hover{border-color:#fff!important;background:rgba(255,255,255,0.08)!important;}
.hero-trust{display:none!important;}

/* Stats read as a record of the firm, ruled off like a report. */
.hero-stats{position:relative;z-index:2;max-width:1100px!important;margin:0 auto!important;
  padding:0 clamp(24px,4vw,48px) clamp(44px,5vw,64px)!important;grid-template-columns:repeat(4,1fr)!important;}
.hero-stats::before{content:'';display:block;grid-column:1/-1;height:1px;background:rgba(255,255,255,0.16);margin-bottom:28px;}
.hstat{text-align:left!important;padding:0 20px 0 0!important;border-left:none!important;}
.hstat-n{font-size:clamp(26px,3vw,36px)!important;letter-spacing:-1.2px!important;}
.hstat-l{color:rgba(255,255,255,0.56)!important;font-size:12px!important;margin-top:8px!important;}
@media(max-width:760px){
  .hero-scrim{background:linear-gradient(180deg,rgba(8,22,38,0.90) 0%,rgba(8,22,38,0.93) 60%,rgba(8,22,38,0.96) 100%);}
  .hero-stats{grid-template-columns:1fr 1fr!important;gap:24px 0;}
  .hstat:nth-child(3){border-left:none;}
}

.st-h em,.hero h1 em{font-style:normal!important;color:var(--g)!important;background:none!important;-webkit-text-fill-color:currentColor!important;}
.st-badge{background:var(--g-soft)!important;border:1px solid rgba(11,140,117,0.18)!important;color:var(--g)!important;border-radius:4px!important;}
.prod-tag{color:var(--g)!important;}
.faq-q{font-weight:700!important;}
.marquee-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff!important;}
.marquee span{color:var(--ink3)!important;font-weight:600!important;}

/* ---------- Delivery timeline: the method, stated as a diagram ---------- */
.proc-band{background:var(--navy);color:#fff;}
.proc-band-in{max-width:1100px;margin:0 auto;padding:clamp(66px,7vw,104px) clamp(24px,4vw,48px);}
.proc-band .sec-h{color:#fff!important;}
.proc-band .sec-p{color:rgba(255,255,255,0.62)!important;}
.proc-band .sec-ey{color:#4FD1B5!important;}
.proc-band .sec-ey::before{background:#4FD1B5;}
.tl{position:relative;margin-top:8px;}
.tl::before{content:'';position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,0.18);}
.tl-step{position:relative;display:grid;grid-template-columns:11px 1fr;gap:0 28px;padding:24px 0;}
.tl-step + .tl-step{border-top:1px solid rgba(255,255,255,0.09);}
.tl-marker{position:relative;padding-top:8px;}
.tl-dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--navy);border:2px solid #4FD1B5;}
.tl-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.tl-n{font-size:12px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,0.4);font-variant-numeric:tabular-nums;}
.tl-t{font-size:clamp(20px,2.2vw,25px);font-weight:800;letter-spacing:-0.6px;color:#fff;margin:0;}
.tl-dur{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#4FD1B5;
  border:1px solid rgba(79,209,181,0.32);border-radius:4px;padding:4px 8px;white-space:nowrap;}
.tl-d{font-size:15px;line-height:1.75;color:rgba(255,255,255,0.68);max-width:70ch;margin:0 0 12px;}
.tl-deliver{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,0.9);}
.tl-deliver span{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,0.45);
  border-right:1px solid rgba(255,255,255,0.18);padding-right:12px;}
@media(max-width:700px){
  .tl-step{grid-template-columns:1fr;gap:0;}
  .tl::before,.tl-marker{display:none;}
  .tl-dur{margin-left:0;}
}

/* ---------- Type: no serif survives. One family, used at weight. ---------- */
.prod-name,.faq h2,.faq-q,.cs-name,.wr-t,.tl-t,.eng-t,.ind-name,.st-card-t,.tech-cat,.val-t,.why-t{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;}
.prod-name{font-weight:800!important;font-size:22px!important;letter-spacing:-0.6px!important;}
.office-copy-h,.cta-h,.ct-done-h,.why-hdr h2,.about-title,.st-h,.sec-h,.hero h1{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-weight:800!important;}

/* Product cards: equal footers, so the row reads as one object. */
.prod{display:flex!important;flex-direction:column;}
.prod-body{flex:1 1 auto;}
.prod-foot{margin-top:auto;}

/* Anything the old product/values styling left behind. */
.val-n,.proc-no{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-style:normal!important;font-weight:800!important;}

/* Case-study links: the internal case leads, the live site follows. */
.cs-link-ext:hover{color:var(--g)!important;}
@media(max-width:940px){}

/* ---------- Engineering standards: a specification, not a feature list ---------- */
.std-list{border-top:1px solid var(--line);}
.std{display:grid;grid-template-columns:78px 1fr;gap:0 32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;}
.std-n{font-size:13px;font-weight:700;letter-spacing:1.8px;color:var(--ink4);padding-top:4px;font-variant-numeric:tabular-nums;}
.std-t{font-size:clamp(18px,2vw,21px);font-weight:800;letter-spacing:-0.5px;color:var(--ink);margin:0 0 8px;line-height:1.3;}
.std-d{font-size:15px;line-height:1.8;color:var(--ink2);margin:0;max-width:78ch;}
.std-note{margin-top:32px;border-left:2px solid var(--g);background:var(--bg2);padding:24px clamp(24px,3vw,32px);border-radius:0 var(--r) var(--r) 0;}
.std-note-k{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--g);margin-bottom:12px;}
.std-note-d{font-size:15px;line-height:1.8;color:var(--ink2);margin:0;max-width:80ch;}
@media(max-width:700px){
  .std{grid-template-columns:1fr;gap:0;padding:24px 0;}
  .std-n{padding-top:0;margin-bottom:8px;}
}

/* Anyone who has asked their system not to animate gets no animation. */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important;}
  .hero-eyebrow,.hero h1,.hero-p,.hero-btns{animation:none!important;}
}

/* ---------- Default stack: choices with reasons, not a logo wall ---------- */
.stk-list{border-top:1px solid var(--line);}
.stk{display:grid;grid-template-columns:300px 1fr;gap:0 44px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;}
.stk-l{font-size:17px;font-weight:800;letter-spacing:-0.4px;color:var(--ink);margin:0 0 12px;}
.stk-tags{display:flex;flex-wrap:wrap;gap:4px;}
.stk-tags span{font-size:12px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:4px;padding:4px 8px;}
.stk-why{font-size:15px;line-height:1.8;color:var(--ink2);margin:0;max-width:74ch;}
.stk-note{margin-top:32px;border-left:2px solid var(--g);background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px clamp(22px,3vw,32px);border-radius:0 var(--r) var(--r) 0;}
.stk-note-k{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--g);margin-bottom:12px;}
.stk-note-d{font-size:15px;line-height:1.8;color:var(--ink2);margin:0;max-width:78ch;}
@media(max-width:860px){
  .stk{grid-template-columns:1fr;gap:12px;padding:24px 0;}
}

/* ============================================================
   DESIGN TOKENS — ENFORCED
   Equivalent elements had drifted to near-miss values: twelve title
   sizes, eleven card paddings, six chip treatments. Precision is what
   separates a designed page from an assembled one, so the scale is
   applied here, last, and nothing below competes with it.
   ============================================================ */

/* — Title scale: three levels, no more —
   L1 section heading (.sec-h) is set above. L2 is a named thing you
   might link to. L3 is an item inside a list or grid. */
.cs-name,.tl-t{font-size:22px!important;font-weight:800!important;letter-spacing:-0.6px!important;line-height:1.25!important;}
.st-card-t,.std-t,.stk-l,.eng-t,.wr-t,.why-t,.proc-t,.ind-name,.val-t,.svc-feature-h{
  font-size:17px!important;font-weight:800!important;letter-spacing:-0.4px!important;line-height:1.35!important;}

/* — Body scale: one size for descriptive prose, one for secondary — */
.st-card-d,.std-d,.stk-why,.eng-d,.cs-v,.tl-d,.svc-feature-d,.why-d,.proc-d{
  font-size:15px!important;line-height:1.75!important;}
.wr-d,.cs-sector,.ct-card p,.cmt-d{font-size:13.5px!important;line-height:1.7!important;}

/* — Eyebrow / key labels: one treatment — */
.cs-k,.std-n,.stk-note-k,.std-note-k,.eng-n,.ct-card-k,.wr-meta,.cs-meta,.tl-n{
  font-size:10.5px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;}

/* — Card padding:one value — */
.st-card,.tech-col,.wr,.ct-card,.eng-col{padding:28px!important;}
.proc-step{padding:28px!important;}

/* — Ledger rows: one rhythm — */
.std,.stk{padding:28px 0!important;}

/* — Chips: one definition, whatever they contain — */
.tech-tag,.cs-tech span,.stk-tags span,.st-lang,.svc-feature-tags span{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  font-size:12px!important;font-weight:600!important;line-height:1.3!important;
  color:var(--ink2)!important;background:#fff!important;
  border:1px solid var(--line)!important;border-radius:4px!important;padding:4px 8px!important;}
.tech-tag::before,.svc-feature-tags span::before{width:5px!important;height:5px!important;}

/* — Radius: one value for every panel — */
.st-card,.tech-col,.proc-step,.val,.prod,.about,.cs,.ct-form,.ct-card,.wr,.ind-card,.faq-item,
.eng,.cs-note,.stk-note,.std-note,.svc-feature,.st-visual,.about-right,.cta,.why{border-radius:var(--r)!important;}

/* — Grid gaps: one step — */
.st-grid,.tech-grid,.prod-row,.wr-grid,.cs-list,.ind-grid{gap:16px!important;}

/* — Icon tiles: two sizes, both on the grid.
     There were nine (36/38/42/44/46/48/50/56/66px), which is drift, not intent. — */
.st-card-ic,.prod-icon,.tech-badge,.ind-ic,.proc-ic,.why-ic,.nv-drop-ic{
  width:44px!important;height:44px!important;border-radius:var(--r)!important;flex-shrink:0;}
.svc-feature-ic{width:64px!important;height:64px!important;}
.st-card-ic svg,.prod-icon svg,.tech-badge svg,.ind-ic svg,.proc-ic svg,.why-ic svg,.nv-drop-ic svg{
  width:20px!important;height:20px!important;}
.svc-feature-ic svg{width:26px!important;height:26px!important;}

/* ---------- Hero: engineered, not photographed ----------
   The office photograph read as a small room, and small numbers set in large
   type only advertise how small they are. This states what the firm runs and
   how it contracts, and leaves the arithmetic out of it. */
.hero-wrap{background:linear-gradient(160deg,#0A1826 0%,#0C1E33 52%,#102A44 100%)!important;position:relative;overflow:hidden;}
.hero-photo,.hero-scrim,.hero-grid,.orb{display:none!important;}
.hero-figure{position:absolute;top:50%;right:-40px;transform:translateY(-50%);width:min(640px,52%);z-index:0;
  opacity:.42;pointer-events:none;-webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 42%);mask-image:linear-gradient(100deg,transparent 4%,#000 42%);}
.hero-figure svg{width:100%;height:auto;display:block;}
.hero{position:relative;z-index:1;max-width:1100px!important;margin:0 auto!important;text-align:left!important;
  padding:clamp(104px,12vw,168px) clamp(24px,4vw,48px) 0!important;}
.hero-inner{max-width:680px;}
.hero h1{color:#fff!important;margin-bottom:24px!important;font-size:clamp(38px,5.2vw,62px)!important;letter-spacing:-1.8px!important;}
.hero-p{color:rgba(255,255,255,0.72)!important;max-width:560px!important;margin:0 0 40px!important;}

/* Credentials, ruled like a document rather than counted like a scoreboard. */
.hero-cred{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(56px,7vw,88px);border-top:1px solid rgba(255,255,255,0.14);}
.hcr{padding:24px 28px 0 0;}
.hcr + .hcr{padding-left:28px;border-left:1px solid rgba(255,255,255,0.14);}
.hcr-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#4FD1B5;margin-bottom:8px;}
.hcr-v{display:block;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.82);}
.hcr-v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.28);}
.hcr-v a:hover{border-bottom-color:#4FD1B5;}
.hero-wrap{padding-bottom:clamp(56px,7vw,88px);}
@media(max-width:900px){
  .hero-figure{display:none;}
  .hero-inner{max-width:none;}
  .hero-cred{grid-template-columns:1fr;}
  .hcr{padding:20px 0 0;}
  .hcr + .hcr{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,0.12);margin-top:20px;}
}

/* ---------- Hero: photograph restored (user preference) ----------
   The credentials row stays; only the abstract motif is retired. */
.hero-figure{display:none!important;}
.hero-photo{display:block!important;position:absolute;inset:0;z-index:0;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero-scrim{display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(8,22,38,0.96) 0%,rgba(8,22,38,0.92) 40%,rgba(8,22,38,0.78) 70%,rgba(8,22,38,0.70) 100%),
             linear-gradient(180deg,rgba(8,22,38,0.50) 0%,transparent 26%,transparent 66%,rgba(8,22,38,0.55) 100%);}
.hero,.hero-cred{position:relative;z-index:2;}
@media(max-width:900px){
  .hero-scrim{background:linear-gradient(180deg,rgba(8,22,38,0.90) 0%,rgba(8,22,38,0.93) 55%,rgba(8,22,38,0.96) 100%);}
}

/* Stats band restored in place of the credentials row (user preference). */
.hero-cred{display:none!important;}
.hero-wrap{padding-bottom:0!important;}
.hero{padding-bottom:0!important;}
/* the stats band carries its own space above and below the rule.
   It now sits inside .hero, so it must not repeat .hero's horizontal padding
   or it indents past the headline. */
.hero-stats{margin-top:clamp(48px,6vw,80px)!important;padding:0 0 clamp(48px,5.5vw,76px) 0!important;
  max-width:none!important;}

/* ============================================================
   MOBILE REFINEMENT
   Three real problems at phone width: the hero photograph was
   effectively invisible behind a near-opaque scrim, the eyebrow
   orphaned a word onto its own line, and desktop padding made
   every card taller than it needed to be — nine service cards
   alone ran to roughly three thousand pixels.
   ============================================================ */
@media(max-width:760px){
  /* Let the photograph actually be seen; keep the text side dark enough to read. */
  /* darker again from two-thirds down, where the stats sit over a bright desk */
  .hero-scrim{background:
    linear-gradient(180deg,rgba(8,22,38,0.90) 0%,rgba(8,22,38,0.74) 32%,rgba(8,22,38,0.70) 52%,rgba(8,22,38,0.88) 72%,rgba(8,22,38,0.94) 100%)!important;}
  .hero-photo img{object-position:center 38%;}
  .hero h1{text-shadow:0 1px 24px rgba(6,18,32,0.55);}
  .hero-p{color:rgba(255,255,255,0.86)!important;text-shadow:0 1px 16px rgba(6,18,32,0.6);}

  /* Tighter cards: 28px each side was 15% of the viewport. */
  .st-card,.tech-col,.wr,.ct-card,.eng-col{padding:22px!important;}
  .ct-form{padding:22px!important;}
  .cmt-i{padding:22px 0!important;}
  .st-grid,.tech-grid,.prod-row,.wr-grid,.cs-list,.ind-grid{gap:12px!important;}

  /* Sections were carrying desktop rhythm on a 375px screen. */
  .sec{padding:52px clamp(20px,5vw,24px)!important;}
  .sec-hdr{margin-bottom:32px!important;}
  /* .std and .stk are ledger rows inside a .sec that already provides the
     horizontal padding, so vertical-only is right for them. .proc-band-in
     is a section container inside a full-bleed navy band — zeroing its
     sides ran every line of that section into both screen edges. */
  .std,.stk{padding:22px 0!important;}
  .proc-band-in{padding:34px clamp(20px,5vw,24px)!important;}

  /* The featured service card orphaned its icon above the heading. */
  .svc-feature{gap:16px!important;padding:22px!important;}
  .svc-feature-ic{width:44px!important;height:44px!important;}
  .svc-feature-ic svg{width:20px!important;height:20px!important;}
}
@media(max-width:430px){
  /* "…TAMIL NADU, INDIA" was breaking with one word on line two. */
  .hero-eyebrow{font-size:10px!important;letter-spacing:1.4px!important;}
}

/* One eyebrow for wide screens, a shorter one for phones — it was breaking
   with a single word stranded on the second line. */
.he-short{display:none;}
@media(max-width:430px){
  .he-full{display:none;}
  .he-short{display:inline;}
}

/* ---------- Mobile menu ----------
   The panel animated open via max-height + opacity, and those two declarations
   were being dropped from the cascade while others in the same rule applied —
   so the hamburger swapped its icon and nothing else happened. Driving the menu
   with `display` instead: no transition to interpolate, nothing to interpolate
   wrongly, and it cannot half-apply. A menu that works beats a menu that slides. */
@media(max-width:768px){
  .nv-links{display:none!important;}
  .nv-links.open{
    display:flex!important;
    position:fixed!important;top:64px!important;left:0!important;right:0!important;
    max-height:none!important;height:auto!important;
    max-height:calc(100vh - 64px)!important;
    overflow-y:auto!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    z-index:1400!important;
    padding:8px 20px 24px!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 20px 44px rgba(12,30,51,0.16)!important;
    transition:none!important;
  }
  /* the bar itself turns solid so the logo and close icon stay legible */
  #nav.menu-open{background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;}
  #nav.menu-open .nv-logo span{color:var(--ink)!important;}
  #nav.menu-open .nv-mob svg{stroke:var(--ink)!important;}
}

/* ---------- Engineering pointer: one band on the homepage, depth one click away ---------- */
.engp{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(32px,4vw,56px);}
.engp .sec-p{max-width:70ch!important;margin-bottom:24px!important;}
.engp-cta{display:inline-flex;align-items:center;gap:8px;}

/* ---------- About: narrative beside a company record ----------
   Half of it used to be the wordmark in a tinted panel — space spent
   repeating what the nav and footer already say — and its metrics
   restated the hero band. */
.abt{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,72px);align-items:start;}
.abt-body p{font-size:16px;line-height:1.85;color:var(--ink2);margin:0 0 18px;max-width:64ch;}
.abt-body p:last-child{margin-bottom:0;}
.abt-body strong{color:var(--ink);font-weight:600;}
.abt-facts{border-top:2px solid var(--ink);padding-top:4px;}
.abt-f{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.abt-k{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);}
.abt-v{font-size:14px;line-height:1.6;color:var(--ink);}
.abt-v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.abt-v a:hover{color:var(--g);border-bottom-color:var(--g);}
@media(max-width:860px){
  .abt{grid-template-columns:1fr;gap:32px;}
  .abt-facts{max-width:none;}
}

/* ---------- Domains: what each sector turned out to be about ----------
   Twelve sector names in a grid stated a fact and taught nothing. Each entry
   now carries the constraint that domain actually imposes, which is the only
   part a reader can judge us on. */
.dom{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
.dom-i{padding:22px 30px 24px 0;border-bottom:1px solid var(--line);}
.dom-i:nth-child(odd){border-right:1px solid var(--line);}
.dom-i:nth-child(even){padding-left:30px;}
.dom-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14.5px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);margin-bottom:7px;}
.dom-d{font-size:13.5px;line-height:1.7;color:var(--ink3);margin:0;max-width:52ch;}
@media(max-width:800px){
  .dom{grid-template-columns:1fr;}
  .dom-i{border-right:none!important;padding:18px 0 20px!important;}
}

/* ============================================================
   FOOTER — one block, one ground, every link exactly once.
   Navy so the page terminates against the same institutional colour
   the hero opens on, rather than fading into another pale grey band.
   ============================================================ */
footer.ft{background:var(--navy)!important;color:#fff;border-top:none!important;
  padding:0;margin:0;max-width:none;display:block;}
.ft-main{border-bottom:1px solid rgba(255,255,255,0.10);}
.ft-in{max-width:1100px;margin:0 auto;padding:clamp(52px,6vw,76px) clamp(24px,4vw,48px) clamp(44px,5vw,60px);
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);}

/* Brand column */
.ft-mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:18px;}
.ft-mark span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;font-weight:800;letter-spacing:2.6px;color:#fff;}
.ft-desc{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,0.62);max-width:38ch;margin:0 0 26px;}

/* Company record: a labelled table, the way a firm states its details. */
.ft-meta{margin:0;border-top:1px solid rgba(255,255,255,0.10);}
.ft-meta>div{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.ft-meta dt{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,0.40);}
.ft-meta dd{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.80);}
.ft-meta dd a{color:#5FD3B8;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
.ft-meta dd a:hover{border-bottom-color:#5FD3B8;}

/* Link columns */
.ft-col h4{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,0.40);margin:0 0 18px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.10);}
.ft-col a{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.72);
  text-decoration:none;padding:7px 0;transition:color .2s;}
.ft-col a:hover{color:#fff;}

/* Bottom bar */
.ft-bottom-in{max-width:1100px;margin:0 auto;padding:20px clamp(24px,4vw,48px);
  display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;}
.ft-copy{margin:0;font-size:12.5px;color:rgba(255,255,255,0.42);}
.ft-legal{display:flex;gap:22px;flex-wrap:wrap;}
.ft-legal a{font-size:12.5px;color:rgba(255,255,255,0.55);text-decoration:none;transition:color .2s;}
.ft-legal a:hover{color:#fff;}
.ft-social{display:flex;gap:8px;margin-left:auto;}
.ft-social a{width:34px;height:34px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.62);
  transition:color .2s,border-color .2s,background .2s;}
.ft-social a:hover{color:#fff;border-color:rgba(255,255,255,0.42);background:rgba(255,255,255,0.06);}

@media(max-width:1000px){
  .ft-in{grid-template-columns:1fr 1fr;gap:36px 32px;}
  .ft-brand{grid-column:1/-1;}
}
@media(max-width:560px){
  .ft-in{grid-template-columns:1fr;gap:32px;}
  .ft-meta>div{grid-template-columns:96px 1fr;}
  .ft-social{margin-left:0;}
  .ft-bottom-in{gap:16px;}
}

/* ---------- Capability labels ----------
   These were pills carrying a teal dot — decoration repeated roughly forty
   times across the page, which is what made a specification read like a tag
   cloud. The label is the information; the dot never was. */
.tech-tag::before,.svc-feature-tags span::before{display:none!important;}
.tech-tag,.cs-tech span,.stk-tags span,.st-lang,.svc-feature-tags span{
  gap:0!important;font-size:11.5px!important;font-weight:600!important;
  letter-spacing:0.2px!important;color:var(--ink2)!important;
  background:var(--bg2)!important;border:1px solid var(--line)!important;
  padding:5px 10px!important;border-radius:4px!important;}
.st-lang{gap:7px!important;}          /* keeps its language glyph */
.st-lang svg,.st-chip svg{display:inline-block;}
.tech-tag:hover{transform:none!important;background:#fff!important;border-color:#CBD4DC!important;}
.svc-feature-tags{gap:6px!important;}

/* ---------- Technology listings as a specification line ----------
   Boxed pills read as tags — the vocabulary of a blog sidebar. A stack is a
   statement of record, so it is set as a ruled line: small, tracked, divided
   by hairlines, sharing the page's ledger language instead of floating on it.
   Applies to listings that sit inside prose or a card; the engineering page's
   stack table keeps chips, where they are the content rather than a footnote. */
.cs-tech,.svc-feature-tags{
  display:flex!important;flex-wrap:wrap!important;gap:8px 0!important;
  margin-top:20px!important;padding-top:14px!important;
  border-top:1px solid var(--line)!important;}
.cs-tech span,.svc-feature-tags span{
  display:inline-block!important;background:none!important;border:0!important;
  border-right:1px solid var(--line)!important;border-radius:0!important;
  padding:1px 13px!important;margin:0!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:0.9px!important;
  text-transform:uppercase!important;color:var(--ink3)!important;line-height:1.45!important;}
.cs-tech span:first-child,.svc-feature-tags span:first-child{padding-left:0!important;}
.cs-tech span:last-child,.svc-feature-tags span:last-child{border-right:none!important;}

/* ---------- About: evidence, not adjectives ----------
   The section asserted quality; this makes it demonstrate it. Three numbered
   entries, each a real constraint one of our own products imposed, so the
   claim carries something a reader can check rather than take on faith. */
.abt-proof{margin-top:clamp(48px,5vw,72px);border-top:2px solid var(--ink);padding-top:clamp(28px,3vw,38px);}
.abt-proof-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:-0.6px;color:var(--ink);margin:0 0 6px;}
.abt-proof-list{margin-top:26px;}
.apf{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.5vw,34px);
  padding:26px 0;border-bottom:1px solid var(--line);}
.apf:first-child{border-top:1px solid var(--line);}
.apf-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:1px;color:var(--g);padding-top:2px;}
.apf-b h4{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px;font-weight:700;letter-spacing:-0.35px;color:var(--ink);margin:0 0 10px;}
.apf-b p{font-size:14.5px;line-height:1.8;color:var(--ink2);margin:0;max-width:74ch;}
.apf-t{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.apf-t a{font-size:12.5px;font-weight:700;color:var(--g);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s;}
.apf-t a:hover{border-bottom-color:var(--g);}
.apf-t span{font-size:10.5px;font-weight:700;letter-spacing:0.9px;text-transform:uppercase;
  color:var(--ink4);padding-left:14px;border-left:1px solid var(--line);}
.abt-proof-note{margin:26px 0 0;font-size:14px;line-height:1.8;color:var(--ink3);max-width:74ch;}
@media(max-width:620px){
  .apf{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  .apf-n{padding-top:0;}
  .apf-t span{padding-left:0;border-left:0;}
}

/* ============================================================
   CASE STUDIES — a ruled dossier, not three identical boxes.
   The old version was a stack of bordered cards with a half-empty
   left column and no figure anywhere for the eye to catch. Each entry
   is now a full-width ledger record: rule, identity, figures, then the
   narrative — the same hairline language as the rest of the page.
   ============================================================ */
.cs-list{display:block;}
.cs{display:block;border:0!important;background:none!important;box-shadow:none!important;
  border-top:2px solid var(--ink)!important;border-radius:0!important;
  padding:30px 0 40px!important;margin:0;}
.cs+.cs{margin-top:4px;}
.cs:hover{box-shadow:none!important;border-color:var(--ink)!important;transform:none!important;}

.cs-hd{display:grid;grid-template-columns:1fr auto;align-items:start;gap:20px;}
.cs-id{display:flex;align-items:center;gap:14px;margin-bottom:10px;grid-column:1/-1;}
.cs-num{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--g);}
.cs-live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4);}
.cs-name{grid-column:1/-1;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(24px,2.8vw,32px);font-weight:800;letter-spacing:-1px;color:var(--ink);margin:0 0 8px;}
.cs-sector{grid-column:1/-1;font-size:15px;line-height:1.6;color:var(--ink3);margin:0;max-width:62ch;}

/* Figures: the thing the old section had none of. */
.cs-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:28px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.csf{padding:18px 24px 18px 0;border-right:1px solid var(--line);}
.csf:last-child{border-right:none;}
.csf:not(:first-child){padding-left:24px;}
.csf-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-1.4px;color:var(--ink);line-height:1;}
.csf-l{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink3);}

.cs-rows{margin-top:26px;display:grid;gap:0;}
.cs-row{display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,40px);
  padding:18px 0;border-bottom:1px solid var(--line2);align-items:start;}
.cs-row:last-child{border-bottom:none;}
.cs-k{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink4);padding-top:4px;}
.cs-v{font-size:14.5px;line-height:1.8;color:var(--ink2);max-width:78ch;}
.cs-v strong{color:var(--ink);font-weight:600;}

.cs-ft{margin-top:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cs-ft .cs-tech{margin-top:0!important;padding-top:0!important;border-top:0!important;flex:1 1 auto;}
.cs-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.cs-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:13.5px;font-weight:700;transition:color .2s;}
.cs-link-main{color:var(--g);}
.cs-link-main:hover{color:#0A7A66;}
.cs-link-ext{color:var(--ink4);font-weight:600;font-size:12.5px;}
.cs-link-ext:hover{color:var(--ink2);}

@media(max-width:820px){
  .cs-row{grid-template-columns:1fr;gap:6px;}
  .cs-k{padding-top:0;}
  .cs-ft{align-items:flex-start;flex-direction:column;gap:16px;}
}
@media(max-width:600px){
  .cs-figs{grid-template-columns:1fr;}
  .csf{border-right:none;border-bottom:1px solid var(--line);padding:14px 0!important;}
  .csf:last-child{border-bottom:none;}
}

/* ---------- Feature cards: title beside its mark, not stacked under it ----------
   Icon tile → heading → paragraph in one vertical column is the default every
   template arrives with: three stacked blocks, the icon floating alone above a
   gap it does not belong to. Pairing the mark with the heading it labels makes
   one object instead of three, gives the card a firm top line to start on, and
   returns the paragraph to a full measure rather than a column of orphans. */
.st-card{display:grid!important;grid-template-columns:38px 1fr!important;
  grid-template-rows:auto auto!important;column-gap:14px!important;row-gap:0!important;
  align-items:center!important;padding:26px 26px 28px!important;}
.st-card-ic{width:38px!important;height:38px!important;margin:0!important;
  grid-column:1;grid-row:1;align-self:center;}
.st-card-ic svg{width:19px!important;height:19px!important;}
.st-card-t{grid-column:2;grid-row:1;margin:0!important;font-size:16px!important;
  letter-spacing:-0.3px!important;line-height:1.3!important;align-self:center;}
.st-card-d{grid-column:1/-1;grid-row:2;margin-top:16px!important;
  padding-top:16px!important;border-top:1px solid var(--line2);
  font-size:13.5px!important;line-height:1.75!important;color:var(--ink3)!important;}

/* The featured service card follows the same rule at a larger size. */
.svc-feature-head{display:flex!important;align-items:center!important;gap:16px!important;}
.svc-feature-ic{width:48px!important;height:48px!important;flex:0 0 48px;margin:0!important;}
.svc-feature-ic svg{width:24px!important;height:24px!important;}

/* ============================================================
   PRODUCT PAGE HERO
   These pages opened on a small eyebrow and a 40px heading over white —
   a section that had been lifted onto its own URL and still read like one.
   They now open on the same institutional navy the homepage and footer use,
   so a product page arrives as a destination rather than a fragment.
   ============================================================ */
.phero{background:var(--navy);color:#fff;position:relative;}
.phero-in{max-width:1100px;margin:0 auto;padding:clamp(84px,9vw,120px) clamp(24px,4vw,48px) clamp(38px,4vw,52px);}
.phero-back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:0.3px;color:rgba(255,255,255,0.55);text-decoration:none;margin-bottom:30px;transition:color .2s;}
.phero-back:hover{color:#fff;}
.phero-live{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:#63D9BF;margin-bottom:16px;}
.phero-live .prod-tag-dot{background:#63D9BF;}
.phero-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(38px,5.4vw,62px);font-weight:800;letter-spacing:-2px;line-height:1.02;
  color:#fff;margin:0 0 16px;}
.phero-t{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:rgba(255,255,255,0.72);
  margin:0 0 26px;max-width:56ch;}
.phero-meta{display:flex;flex-wrap:wrap;gap:0;margin-bottom:34px;}
.phero-meta span{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,0.5);padding:0 14px;border-right:1px solid rgba(255,255,255,0.18);line-height:1.4;}
.phero-meta span:first-child{padding-left:0;}
.phero-meta span:last-child{border-right:none;}
.phero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.phero .btn-s{background:transparent!important;border-color:rgba(255,255,255,0.34)!important;color:#fff!important;}
.phero .btn-s:hover{border-color:#fff!important;background:rgba(255,255,255,0.08)!important;}

.phero-figs{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px) clamp(44px,5vw,64px);
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,0.16);}
.ph-f{padding:28px 26px 0 0;border-right:1px solid rgba(255,255,255,0.12);}
.ph-f:last-child{border-right:none;}
.ph-f:not(:first-child){padding-left:26px;}
.ph-f-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-1.4px;line-height:1;color:#fff;}
.ph-f-l{margin-top:9px;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.55);}

/* The narrative under the hero is one column at a readable measure — the
   right half used to hold a panel restating the module cards below it. */
.sec-under-hero{padding-top:clamp(52px,5.5vw,74px)!important;}
.st-intro-solo{display:block!important;}
.st-intro-solo .st-h{font-size:clamp(24px,2.9vw,34px)!important;max-width:22ch;}
.st-intro-solo .st-h em{font-style:normal;color:var(--g);}
.st-intro-solo .st-lead{max-width:74ch;}

/* Engineering note: the one thing the product had to be right about. */
.pnote{margin-top:clamp(40px,4.5vw,60px);border-left:2px solid var(--g);
  background:var(--bg2);border-radius:0 var(--r) var(--r) 0;padding:28px clamp(24px,3vw,36px);}
.pnote-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g);margin:0 0 12px;}
.pnote p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink2);max-width:80ch;}

@media(max-width:700px){
  .phero-figs{grid-template-columns:1fr;}
  .ph-f{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:18px 0!important;}
  .ph-f:last-child{border-bottom:none;}
  .phero-meta{gap:6px 0;}
}
/* Back-link and status sit on their own rows; both were inline-flex and
   collided on one line. */
.phero-back{display:flex!important;width:fit-content;}
.phero-live{display:flex!important;width:fit-content;}

/* ============================================================
   PRODUCT PAGE — balance, alignment, and a close worth reading
   ============================================================ */

/* 1. The narrative ran as one 74ch column against a 1100px container, so
      half the page was empty beside it. An editorial split puts the statement
      in its own column and the argument beside it, using the full measure. */
.st-intro-solo{display:grid!important;grid-template-columns:0.8fr 1.2fr!important;
  gap:clamp(28px,5vw,72px)!important;align-items:start!important;
  margin-bottom:clamp(44px,5vw,64px)!important;}
.st-body{grid-column:2;}
.st-intro-solo .st-h{grid-column:1;margin:0!important;max-width:none!important;
  font-size:clamp(23px,2.6vw,31px)!important;line-height:1.22!important;letter-spacing:-0.9px!important;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-weight:800!important;}
.st-intro-solo .st-lead{max-width:66ch!important;margin:0 0 18px!important;}
.st-intro-solo .st-lead+.st-lead{margin-bottom:0!important;}
@media(max-width:840px){
  .st-intro-solo{grid-template-columns:1fr!important;gap:18px!important;}
  .st-body{grid-column:1;}
}

/* 2. Descriptions started at a different height in every card, because a
      two-line title pushed its own paragraph down and a one-line title did
      not. Reserving two lines for the title aligns the rule across the row. */
.st-grid{align-items:stretch!important;gap:16px!important;}
.st-card{height:100%;}
.st-card-t{min-height:2.6em;display:flex;align-items:center;}

/* 3. Two stacked section paddings left roughly 190px of nothing before the
      closing panel. */
.sec-cta{padding-top:0!important;}

/* 4. The close was a pale grey bar with 13px text — the last thing a visitor
      reads, asking for the work, in the quietest voice on the page. */
.cs-note{background:#fff!important;border:0!important;border-top:2px solid var(--ink)!important;
  border-radius:0!important;padding:34px 0 0!important;margin-top:0!important;
  display:grid!important;grid-template-columns:1fr auto!important;
  align-items:center!important;gap:clamp(24px,4vw,56px)!important;}
.cs-note-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  font-size:clamp(18px,2vw,23px)!important;font-weight:700!important;letter-spacing:-0.5px!important;
  line-height:1.45!important;color:var(--ink)!important;margin:0!important;max-width:56ch;}
.cs-note .btn-p{flex:0 0 auto;white-space:nowrap;}
@media(max-width:760px){
  .cs-note{grid-template-columns:1fr!important;gap:22px!important;}
}

/* ============================================================
   FOOTER — denser record, and the products carry their addresses
   ============================================================ */
footer.ft{border-top:3px solid var(--g)!important;}
.ft-meta>div{grid-template-columns:118px 1fr;}
.ft-col a small{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,0.38);
  letter-spacing:0.2px;margin-top:2px;}
.ft-col a:hover small{color:rgba(255,255,255,0.55);}
.ft-bottom-in{padding:22px clamp(24px,4vw,48px);}
.ft-place{font-size:12.5px;color:rgba(255,255,255,0.42);}
/* The record's label column was wide enough to force the office address onto
   two lines; the brand column gets a little more room and the labels less. */
.ft-in{grid-template-columns:1.95fr 1fr 1fr 1.05fr;}
.ft-meta>div{grid-template-columns:100px 1fr;}
@media(max-width:1000px){.ft-in{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr;}}

/* ---------- Technology: a specification table, not a tag cloud ----------
   Boxed pills in a 300px column wrapped raggedly and stranded single words
   on their own line — "Zod", "Nginx", "Evaluation harnesses" — which is what
   made a considered stack read as a pile of logos. Three columns now: the
   layer, the stack as a ruled spec line, and the reason. Same language as the
   case-study and capability listings. */
.stk{grid-template-columns:118px minmax(160px,0.62fr) 1.55fr!important;
  gap:0 clamp(20px,3vw,44px)!important;padding:26px 0!important;align-items:start!important;}
.stk-l{font-size:13px!important;font-weight:800!important;letter-spacing:0.2px!important;
  margin:0!important;padding-top:2px;color:var(--ink)!important;}
.stk-tags{display:block!important;gap:0!important;}
.stk-tags span{display:inline-block!important;background:none!important;border:0!important;
  border-radius:0!important;padding:0!important;margin:0 0 4px!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:0.9px!important;
  text-transform:uppercase!important;color:var(--ink3)!important;line-height:1.5!important;}
.stk-tags span:not(:last-child)::after{content:'';display:inline-block;width:1px;height:9px;
  background:var(--line);margin:0 9px -1px;}
.stk-why{font-size:14.5px!important;line-height:1.8!important;max-width:66ch!important;}
@media(max-width:900px){
  .stk{grid-template-columns:1fr!important;gap:10px 0!important;}
  .stk-l{padding-top:0;}
}

/* The blog's closing panel kept a gradient pill under the new rule. */
.post-cta-in{background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;text-align:left!important;}

/* ---------- Contact: a form that looks like a firm's, not a widget ----------
   The panel and its three side cards were still glassmorphism from the old
   theme — blurred translucent boxes with 24px radii, floating on a page that
   had moved to hairlines and 6px corners two passes ago. */
.ct-grid{grid-template-columns:1.3fr 0.85fr!important;gap:clamp(28px,4vw,64px)!important;}
.ct-form{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0!important;border-top:2px solid var(--ink)!important;border-radius:0!important;
  box-shadow:none!important;padding:30px 0 0!important;}
.ct-card{background:none!important;backdrop-filter:none!important;border:0!important;
  border-top:1px solid var(--line)!important;border-radius:0!important;padding:22px 0 0!important;margin-bottom:26px;}
.ct-card:first-child{border-top:2px solid var(--ink)!important;padding-top:30px!important;}
.ct-card:last-child{margin-bottom:0;}
.ct-card-h{font-size:10.5px!important;font-weight:700!important;letter-spacing:1.5px!important;
  text-transform:uppercase!important;color:var(--ink4)!important;margin-bottom:14px!important;}

/* Fields read as a form, with the label doing the work rather than a border. */
.ct-f>span{font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;
  text-transform:uppercase!important;color:var(--ink4)!important;}
.ct-f>span i{color:var(--g);font-style:normal;}
.ct-f input,.ct-f select,.ct-f textarea{
  border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
  background:none!important;padding:9px 0!important;font-size:15px!important;color:var(--ink)!important;
  transition:border-color .2s;}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{
  outline:none!important;border-bottom-color:var(--g)!important;box-shadow:none!important;}
.ct-f textarea{min-height:120px;resize:vertical;}
.ct-f.is-bad input,.ct-f.is-bad select,.ct-f.is-bad textarea{border-bottom-color:#C0392B!important;}
.ct-f{margin-bottom:22px!important;}

/* The audience switch is a pair of tabs, not two pills. */
.ct-switch{border-bottom:1px solid var(--line);gap:0!important;margin-bottom:28px!important;}
.ct-sw{background:none!important;border:0!important;border-bottom:2px solid transparent!important;
  border-radius:0!important;padding:0 0 12px!important;margin-right:28px!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:0.2px!important;
  color:var(--ink4)!important;transition:color .2s,border-color .2s;}
.ct-sw.is-on{color:var(--ink)!important;border-bottom-color:var(--g)!important;background:none!important;}

.ct-mail{font-size:17px!important;font-weight:700!important;letter-spacing:-0.3px!important;}
.ct-social a{border-radius:var(--r)!important;}
.ct-switch{background:none!important;padding:0!important;border-radius:0!important;}
/* the brand marks use fill:currentColor and were inheriting the default link blue */
.ct-social a{color:var(--ink3)!important;border:1px solid var(--line)!important;background:#fff!important;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s;}
.ct-social a:hover{color:var(--g)!important;border-color:var(--g)!important;background:#fff!important;}
.ct-social a svg{width:16px;height:16px;}
/* Keyboard users land on the nav on every page; this lets them past it. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;
  padding:12px 20px;font-size:13px;font-weight:700;text-decoration:none;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;outline:2px solid var(--g);outline-offset:2px;}

/* ---------- Spec lines that survive wrapping ----------
   The hairline between items was drawn with :not(:last-child)::after, so on a
   narrow screen it landed at the END of every wrapped line — a rule pointing
   at nothing. And padding-left:0 on :first-child only meant lines two and
   three started 13px further right than line one. Both are unfixable with a
   per-item separator, because CSS cannot see where a line breaks. Real gaps
   carry the same separation and cannot produce either artifact. */
.cs-tech span::after,.svc-feature-tags span::after,.stk-tags span::after{content:none!important;}
.cs-tech span:not(:last-child)::after,.svc-feature-tags span:not(:last-child)::after{display:none!important;}
.cs-tech,.svc-feature-tags{gap:9px 22px!important;}
.cs-tech span,.svc-feature-tags span{
  padding:0!important;margin:0!important;border:0!important;}
.stk-tags{display:flex!important;flex-wrap:wrap;gap:7px 18px!important;}
.stk-tags span{margin:0!important;padding:0!important;}

/* ============================================================
   RESPONSIVE FIXES — found by element-level audit
   ============================================================ */

/* 1. CRITICAL: the contact side column never stacked. A mobile rule existed
      (max-width:900px -> 1fr) but the later restyle used !important, which
      wins over a media query at every width. The column overflowed the
      viewport and body{overflow-x:hidden} CLIPPED it — so on a phone the
      direct email address, the "what happens next" list and the social links
      were not merely cramped, they were invisible. Page-level overflow tests
      cannot see this precisely because the overflow is clipped, not scrolled. */
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr!important;gap:32px!important;}
  .ct-form{padding-top:26px!important;}
}

/* 2. Tap targets. Text links sat at 17-23px tall; a thumb needs more than a
      line-height. Vertical padding only, so no layout shifts. */
@media(max-width:600px){
  .cs-link,.ct-mail,.nv-logo,.phero-back,.ft-mark,.wr-more,.abt-v a,.ft-legal a{
    min-height:32px;display:inline-flex;align-items:center;}
  .ct-social a,.ft-social a{min-width:38px;min-height:38px;}
  .ft-col a{padding:10px 0!important;}
  .ft-meta dd a{min-height:30px;display:inline-flex;align-items:center;}
}

/* 3. Micro-labels were set at 10-10.5px. Uppercase tracking makes that read
      smaller still; below 11px it stops being legible on a phone. */
@media(max-width:600px){
  .cs-k,.eng-n,.abt-k,.wr-cat,.ft-col h4,.ft-meta dt,.ct-card-h,.phero-meta span,
  .cs-live,.csf-l,.ph-f-l,.stk-note-k,.std-note-k,.cs-tech span,.svc-feature-tags span,
  .stk-tags span,.sec-ey,.apf-n{font-size:11px!important;}
  .cs-num,.dom-n{font-size:12px!important;}
}

/* Remaining audit findings.
   .ct-card-k is the class the markup actually uses; the earlier rule targeted
   .ct-card-h, which does not exist, so those labels stayed at 10.5px. */
@media(max-width:600px){
  .ct-card-k,.tl-deliver span,.wr-meta,.office-chip,.nv-drop-label,
  .about-brand-tag,.office-figcap-d{font-size:11px!important;}
  .lg-back,.nv-links a:not(.nv-drop-row),.nv-link{min-height:32px;display:inline-flex;align-items:center;}
  .nv-drop-row{display:flex!important;width:100%;min-height:44px;}
}

/* ---------- Featured service card ----------
   This card uses the .svc-feature wrapper but carries .st-card-t/.st-card-d
   children — the wrapper was written for a .svc-feature-head + .svc-feature-d
   structure it no longer has. Left as display:flex with three children, the
   title was squeezed into a narrow middle column (wrapping "Custom / Software
   / Development" on desktop), and on mobile the column direction plus
   align-items:center pushed the icon onto its own line and centred the title.
   It is now the same object as a normal card, one size larger. */
.svc-feature{display:grid!important;grid-template-columns:48px 1fr!important;
  grid-template-rows:auto auto!important;column-gap:16px!important;row-gap:0!important;
  align-items:start!important;padding:26px 30px 28px!important;}
.svc-feature>.svc-feature-ic{grid-column:1;grid-row:1;align-self:center;
  width:48px!important;height:48px!important;margin:0!important;border-radius:var(--r)!important;}
.svc-feature>.svc-feature-ic svg{width:24px!important;height:24px!important;}
.svc-feature>.st-card-t{grid-column:2;grid-row:1;align-self:center;margin:0!important;
  min-height:48px;display:flex;align-items:center;font-size:17px!important;letter-spacing:-0.35px!important;}
.svc-feature>.st-card-d{grid-column:1/-1;grid-row:2;margin-top:16px!important;
  padding-top:16px!important;border-top:1px solid var(--line2);max-width:none!important;}
.svc-feature>.svc-feature-tags{grid-column:1/-1;}
@media(max-width:560px){
  .svc-feature{padding:24px 22px 26px!important;column-gap:14px!important;
    grid-template-columns:40px 1fr!important;}
  .svc-feature>.svc-feature-ic{width:40px!important;height:40px!important;}
  .svc-feature>.st-card-t{min-height:40px;font-size:16px!important;}
}

/* ---------- Workspace ----------
   The studio is the only physical evidence on the site that this is a real
   place with people in it. Both photographs previously existed only as
   darkened backgrounds — the hero scrim sits at 90-96% opacity, so the
   interior shot read as texture rather than as a room. Shown properly here,
   two-up, with the facts stated flat and no argument about not being in a
   metro. */
.wsp{display:block;}
/* A justified row, the way a picture desk lays one out: every photograph the
   same height, each one as wide as its own shape makes it. Give each figure a
   flex-grow equal to its aspect ratio and the arithmetic falls out exactly —
   width_i = A·r_i/Σr, so height_i = width_i/r_i = A/Σr, identical for all three
   whatever their shapes. Nothing is cropped and nothing is matted, because no
   photograph is being asked to fit a box it is the wrong shape for. The row has
   one top edge and one bottom edge, which is what actually reads as composed.
   --ar is set per figure in the markup, from the file's real dimensions. */
.wsp-shots{display:flex;gap:clamp(20px,3vw,36px);align-items:flex-start;}
.wsp-fig{flex:var(--ar,1.5) 1 0;min-width:0;}
/* Stacked below 900px: three across or one, never two, which would strand the
   third photograph alone on a half-width second row. */
@media(max-width:900px){
  .wsp-shots{flex-direction:column;gap:26px;}
  .wsp-fig{flex:none;}
}
.wsp-fig{margin:0;}
.wsp-fig picture{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg3);}
.wsp-fig img{width:100%;height:auto;display:block;}
.wsp-fig figcaption{margin-top:13px;font-size:12.5px;line-height:1.65;color:var(--ink3);max-width:46ch;}
.wsp-fig figcaption strong{color:var(--ink);font-weight:700;}

.wsp-foot{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:start;margin-top:clamp(30px,4vw,44px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--line);}
.wsp-q{margin:0;padding:0 0 0 18px;border-left:2px solid var(--g);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(16px,1.8vw,19px);font-weight:600;line-height:1.55;letter-spacing:-0.3px;color:var(--ink);}
.wsp-facts{margin:0;border-top:1px solid var(--line);}
.wsp-facts>div{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);}
.wsp-facts dt{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink4);}
.wsp-facts dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2);}
@media(max-width:820px){
  .wsp-shots{grid-template-columns:1fr;gap:26px;}
  .wsp-foot{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:600px){
  .wsp-facts>div{grid-template-columns:96px 1fr;}
  .wsp-facts dt{font-size:11px;}
}



/* ---------- Top-level destinations in the mobile menu ----------
   Work, Engineering and Blog are not members of a group — they are peers of
   the group LABELS above them. Giving them the icon-and-description row used
   inside Services, Products and Company made them read as items belonging to
   a group that isn't there. They get weight instead: destination-sized type,
   a chevron to say this navigates, and a clear rule separating them from the
   grouped section. */
@media(max-width:768px){
  body #nav .nv-links a.nv-link-solo{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
    font-size:17px!important;font-weight:700!important;letter-spacing:-0.3px!important;
    text-transform:none!important;color:var(--ink)!important;
    padding:19px 4px!important;margin-top:0!important;
    border-top:none!important;border-bottom:1px solid var(--line)!important;}
  /* one heavier rule marks where the grouped section ends */
  body #nav .nv-links a.nv-link-solo:first-of-type{
    margin-top:14px!important;border-top:2px solid var(--ink)!important;}
  body #nav .nv-links a.nv-link-solo::after{
    /* .nv-link-solo also carries .nv-link, whose ::after is the desktop
       underline: absolutely positioned, teal, forced with !important. Every
       one of those has to be undone before it can be a chevron. */
    content:'';display:block;position:static!important;
    width:7px;height:7px;flex:0 0 auto;
    background:none!important;border-radius:0!important;
    border-top:none;border-left:none;
    border-right:2px solid var(--ink4)!important;
    border-bottom:2px solid var(--ink4)!important;
    transform:rotate(-45deg)!important;transition:none!important;margin-right:6px;}
  body #nav .nv-links a.nv-link-solo:active{color:var(--g)!important;}
}
/* Figures now carry words as well as digits, so the number can shrink to fit. */
.ph-f-n{font-size:clamp(22px,2.6vw,31px)!important;letter-spacing:-1px!important;}

/* ---------- Lead module ----------
   Six identical cards of identical weight told a scanner nothing about which
   capability the product is actually for. The headline module spans the grid
   and takes larger type; the other five stay as they were. */
.st-card-lead{grid-column:1/-1!important;
  grid-template-columns:52px 1fr!important;column-gap:18px!important;
  padding:30px 32px 32px!important;background:var(--bg2)!important;}
.st-card-lead .st-card-ic{width:52px!important;height:52px!important;}
.st-card-lead .st-card-ic svg{width:26px!important;height:26px!important;}
.st-card-lead .st-card-t{font-size:21px!important;letter-spacing:-0.55px!important;min-height:52px;}
.st-card-lead .st-card-d{font-size:15px!important;line-height:1.8!important;max-width:82ch;}
@media(max-width:600px){
  .st-card-lead{grid-template-columns:44px 1fr!important;padding:24px 22px 26px!important;}
  .st-card-lead .st-card-ic{width:44px!important;height:44px!important;}
  .st-card-lead .st-card-t{font-size:18px!important;min-height:44px;}
}

/* ---------- Product diagram ----------
   The page was 2,800px of prose with no image below the hero, on a product
   whose central claim — modules meeting on one record — is structural and
   therefore drawable. One figure per page, in the same hairlines and single
   accent as everything else. */
.pdiag{margin:0 0 clamp(28px,3.5vw,44px);padding:clamp(20px,2.5vw,30px) clamp(18px,2.5vw,28px) 18px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;}
.pdiag svg{width:100%;height:auto;display:block;}
.pdiag figcaption{margin-top:14px;padding-top:13px;border-top:1px solid var(--line2);
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);}
@media(max-width:700px){
  /* the diagram is wide by nature; let it scroll rather than shrink to illegible */
  .pdiag{padding:16px 0 14px;border-left:0;border-right:0;border-radius:0;overflow-x:auto;}
  .pdiag svg{min-width:660px;}
  .pdiag figcaption{padding-left:2px;}
}

/* ---------- Product narrative ----------
   A short statement beside two paragraphs left 171px of the left column empty
   — 60% of the section — which reads as a gap rather than as space. The column
   is tightened to the statement and closed with a rule, so what remains below
   is deliberate margin instead of an unfinished cell. */
/* Scoped to a min-width. Written flat with !important it also won on mobile —
   later in the file than the max-width:840 stack and equally specific — which
   left the statement in a 110px column at about ten characters a line. */
@media(min-width:841px){
  .st-intro-solo{grid-template-columns:0.66fr 1.34fr!important;}
  .st-intro-solo .st-h{padding-bottom:20px;border-bottom:2px solid var(--ink);}
}
.st-body{align-self:start;}
@media(max-width:840px){
  .st-intro-solo .st-h{padding-bottom:16px;}
}
/* The closing note reused .sec-p, which is centre-constrained, so it sat 272px
   right of the section it belongs to. */
.rol-note{margin:32px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink3);max-width:74ch;}
.rol-note a{color:var(--g);font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
.rol-note a:hover{border-bottom-color:var(--g);}