/* ==========================================================================
   AAI 2026 — Corporate Design Layer
   Loaded AFTER style.css. Redefines the visual identity site-wide:
   architectural palette, editorial typography, hairline surfaces,
   deliberate rhythm and restrained motion.
   Brand green (--acc) is preserved as the single accent.
   ========================================================================== */

:root{
  /* Architectural neutrals — cooler, cleaner, higher contrast than the warm original */
  --paper:#FCFCFD; --paper2:#F3F5F8; --card:#FFFFFF;
  --ink:#0A1420; --ink2:#2B3A4E; --mut:#5A697F; --mut2:#8996A9;
  --line:#E4E8ED; --line2:#D2D8E0;
  --acc:#17513A; --acc-ink:#0E3A28; --acc-soft:#EDF4F0;
  --dark:#08111B; --dlin:rgba(150,170,200,.14);
  --max:1240px; --r:4px;
  --sp:clamp(72px,9vw,132px);           /* section rhythm */
  --edge:clamp(20px,4vw,40px);
}

/* ---------- Base ---------- */
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--max);padding:0 var(--edge)}
section{padding:var(--sp) 0}
img{max-width:100%;height:auto}

/* ---------- Editorial typography ---------- */
h1,h2,h3,h4,.h1,.h2{font-family:var(--serif);letter-spacing:-.022em;line-height:1.06;font-weight:600}
h1,.h1{font-size:clamp(42px,6.4vw,86px);letter-spacing:-.03em;line-height:1.02}
.h2{font-size:clamp(32px,4.6vw,58px);margin-bottom:22px}
h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.015em}
p{line-height:1.62}
.sub{color:var(--mut);max-width:62ch;font-size:clamp(16.5px,1.35vw,19px);line-height:1.65}

/* Section eyebrow: hairline + label, replaces the old coloured kicker */
.kick{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:22px}
.kick::before{content:"";width:26px;height:1px;background:var(--acc);opacity:.55;display:block}

/* ---------- Buttons: squarer, more corporate presence ---------- */
.btn{border-radius:2px;padding:16px 30px;font-size:15px;font-weight:600;letter-spacing:.005em;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn-p{background:var(--acc);color:#fff;border:1.5px solid var(--acc)}
.btn-p:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.btn-o{border:1.5px solid var(--line2);color:var(--ink);background:transparent}
.btn-o:hover{border-color:var(--ink);background:transparent}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- Surfaces: hairlines instead of heavy shadow ---------- */
.card,.job-card,.crs-val,.crs-col,.crs-card,.detail-box,.career-panel,.apply-card,.apply-note,.eco-media,.job-detail,.pcard,.icard{
  border-radius:var(--r)!important;box-shadow:none!important;border:1px solid var(--line)!important;background:var(--card)}
.job-card:hover,.crs-card:hover{border-color:var(--line2)!important;transform:none!important;box-shadow:none!important}

/* Numbered step blocks read as an editorial index */
.steps{gap:0;margin-top:56px;border-top:1px solid var(--line)}
.st{border-top:0;border-bottom:1px solid var(--line);padding:26px 26px 26px 0;position:relative}
.st h4{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.st p{color:var(--mut);font-size:15px}

/* ---------- Header: quieter, more architectural ---------- */
.navshell{background:rgba(252,252,253,.86);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.navwrap.float .navshell{border-radius:2px;box-shadow:0 12px 40px rgba(10,20,32,.07);max-width:1300px}
.nlinks{gap:30px;font-size:14px;letter-spacing:.005em}
.nlinks a,.nlinks .ddt{font-weight:500;color:var(--ink2)}
.dd-menu{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 24px 60px rgba(10,20,32,.10)}
.ncta .btn{padding:11px 20px!important;font-size:14px}

/* Announcement bar: restrained, corporate */
.promo{background:var(--dark);color:#C9D4E4;font-size:13px;letter-spacing:.005em;border-bottom:1px solid rgba(255,255,255,.07)}
.promo .ptag{background:transparent;color:var(--acc);border:1px solid rgba(255,255,255,.22);font-size:9.5px;letter-spacing:.16em;padding:3px 9px;border-radius:2px}
.promo a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- Alternating rhythm bands ---------- */
.band-dark{background:var(--dark);color:#DCE5F2}
.band-dark .h2,.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .sub,.band-dark p{color:#A9B8CE}
.band-dark .kick{color:#7FD7AE}
.band-dark .kick::before{background:#7FD7AE}
.band-dark .card,.band-dark .crs-card{background:rgba(255,255,255,.03)!important;border-color:var(--dlin)!important}
.band-tint{background:var(--paper2)}

/* ---------- Hero ---------- */
.phero{padding-top:calc(var(--sp) * .85);padding-bottom:calc(var(--sp) * .7);border-bottom:1px solid var(--line)}
.phero h1{max-width:17ch}
.crumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:26px}
.crumb a{color:var(--mut)}

/* ---------- Ecosystem visual: sharper, more technical ---------- */
.eco-sec{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eco-media{padding:34px 30px!important;max-width:1080px!important}
.eco-track{stroke-width:1.5;opacity:.28}
.eco-node{stroke-width:2}
.eco-nlabel{font-family:var(--sans);font-weight:600}

/* ---------- Forms ---------- */
input,select,textarea{border-radius:2px!important;border:1px solid var(--line2)!important;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)!important}
label{letter-spacing:.1em}

/* ---------- Footer ---------- */
footer{background:var(--dark);border-top:0}
footer h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8C9BB2}

/* ---------- Motion: restrained ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Responsive ---------- */
@media(max-width:1080px){ .nlinks{gap:22px} }
@media(max-width:820px){
  .steps{grid-template-columns:1fr!important}
  h1,.h1{font-size:clamp(34px,9vw,48px)}
  .h2{font-size:clamp(27px,7vw,36px)}
}

/* ---------- Overflow guard (fixes pre-existing mobile horizontal scroll) ---------- */
html,body{max-width:100%;overflow-x:hidden}
.logowall,.mq-track,.tick-row{max-width:100vw}
.eco-svg,svg{max-width:100%}

/* ---------- Footer: collapse the 6-column grid on smaller screens ----------
   The footer grid is set via an inline style, so these rules need !important. */
@media(max-width:1000px){ .fgridf{grid-template-columns:1.4fr 1fr 1fr!important;gap:30px 26px!important} }
@media(max-width:720px){ .fgridf{grid-template-columns:1fr 1fr!important} }
@media(max-width:520px){ .fgridf{grid-template-columns:1fr!important} .fgridf .about{margin-bottom:8px} }
/* Viewport-level guard (overflow on <html> is what actually governs the viewport) */
html{overflow-x:hidden}

/* ===== Consent manager ===== */
#aai-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--paper,#fff);
  border-top:1px solid var(--line,#E4E8ED);box-shadow:0 -8px 30px rgba(10,20,32,.10);
  font-family:Inter,-apple-system,sans-serif}
#aai-consent .cc-in{max-width:var(--max,1240px);margin:0 auto;padding:18px 24px;
  display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#aai-consent .cc-tx{flex:1 1 420px;min-width:280px}
#aai-consent .cc-tx b{display:block;font-size:15px;color:var(--ink,#0A1420);margin-bottom:4px}
#aai-consent .cc-tx p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2,#4a5866)}
#aai-consent .cc-tx a{color:var(--acc,#17513A);text-decoration:underline}
#aai-consent .cc-bt{display:flex;gap:10px;flex-wrap:wrap}
#aai-consent .cc-b{font:inherit;font-size:13.5px;font-weight:500;padding:10px 18px;border-radius:2px;
  cursor:pointer;border:1px solid var(--ink,#0A1420);background:transparent;color:var(--ink,#0A1420);
  transition:opacity .15s}
#aai-consent .cc-b:hover{opacity:.75}
#aai-consent .cc-pri{background:var(--ink,#0A1420);color:#fff}
#aai-consent .cc-b:focus-visible{outline:2px solid var(--acc,#17513A);outline-offset:2px}
#aai-consent .cc-pf{max-width:var(--max,1240px);margin:0 auto;padding:4px 24px 20px;
  border-top:1px solid var(--line,#E4E8ED)}
#aai-consent .cc-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line,#E4E8ED)}
#aai-consent .cc-row b{display:block;font-size:14px;color:var(--ink,#0A1420)}
#aai-consent .cc-row i{display:block;font-style:normal;font-size:12.5px;color:var(--ink2,#4a5866);margin-top:2px}
#aai-consent .cc-row input{width:18px;height:18px;flex:none;accent-color:var(--acc,#17513A)}
#aai-consent .cc-pf .cc-bt{padding-top:16px}
.cc-reopen{cursor:pointer}
@media(max-width:640px){
  #aai-consent .cc-in{padding:16px;gap:14px}
  #aai-consent .cc-bt{width:100%}
  #aai-consent .cc-b{flex:1 1 auto;text-align:center}
  #aai-consent .cc-pf{padding:4px 16px 18px}
}
@media(prefers-reduced-motion:reduce){#aai-consent *{transition:none!important}}


/* AAI-PHOTOGRAPHY-LAYER */
.secstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 40px}
.secstrip figure{margin:0}
.secstrip img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block}
.secstrip figcaption{margin-top:9px;font-size:13px;font-weight:600;color:var(--ink2)}
@media(max-width:860px){.secstrip{grid-template-columns:repeat(2,1fr);gap:10px}}
.photoband{margin:0 0 44px;border-radius:16px;overflow:hidden}
.photoband img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
@media(max-width:860px){.photoband img{aspect-ratio:4/3}}

.hero-visual{position:relative}
.hero-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;display:block}
.hero-visual>.shot{position:relative;z-index:2;margin-top:-20%;margin-left:7%;width:93%;box-shadow:0 34px 74px rgba(10,20,15,.30)}
@media(max-width:860px){.hero-visual>.shot{margin-top:-14%;margin-left:0;width:100%}}

.reel{margin-top:22px}
.reel-vid{width:100%;height:auto;display:block;border-radius:14px;background:#0b1322;border:1px solid rgba(255,255,255,.14)}
.reel-cap{margin-top:10px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}

.wall-logo{height:30px;width:auto;display:block;object-fit:contain}

/* --- Client proof card (redesigned 2026-08-27) --- */
.tq{max-width:1000px;margin:0 auto 44px;background:#fff;border:1px solid rgba(10,20,32,.08);border-radius:20px;
 padding:44px 48px;display:grid;grid-template-columns:230px 1fr;gap:46px;align-items:start;
 box-shadow:0 18px 50px rgba(10,20,32,.09);position:relative;overflow:hidden}
.tq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#17513A}
.tq-cred{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.tq-face{width:150px;height:150px;border-radius:50%;object-fit:cover;
 box-shadow:0 8px 26px rgba(10,20,32,.20);border:4px solid #fff;outline:1px solid rgba(10,20,32,.08)}
.tq-logo{width:100%;max-width:190px;height:auto;margin:22px 0 18px}
.tq-who{display:flex;flex-direction:column;gap:5px}
.tq-who b{font-size:15px;line-height:1.35}
.tq-role{font-size:12.5px;line-height:1.45;opacity:.7}
.tq-org{font-size:13px;font-weight:600;color:#17513A}
.tq-sector{font-size:12px;line-height:1.45;opacity:.62;margin-top:5px}
.tq blockquote{grid-column:2;grid-row:1;margin:0;padding:0}
.tq blockquote p{margin:0 0 18px;font-size:18px;line-height:1.68}
.tq blockquote p:first-child{font-size:21px;font-weight:600;line-height:1.5;color:#17513A}
.tq blockquote p:last-child{margin-bottom:0}
@media(max-width:860px){
 .tq{grid-template-columns:1fr;gap:30px;padding:34px 24px}
 .tq-cred{grid-row:1}
 .tq blockquote{grid-column:1;grid-row:2}
 .tq blockquote p{font-size:16.5px}
 .tq blockquote p:first-child{font-size:19px}
 .tq-face{width:124px;height:124px}
 .tq-logo{max-width:170px}
}
.wall-logo