@charset "UTF-8";
/* ==========================================================================
   AL AMIRI CONTRACTING LLC — Design System
   Ajman, UAE · Structural steel fabrication & fit-out · est. 2001
   --------------------------------------------------------------------------
   Signature device: "the cut" — a drawing section-line that reveals the
   structural steel behind a finished surface. Everything else stays quiet.
   ========================================================================== */

/* --------------------------------------------------------------- 01 FONTS */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* -------------------------------------------------------------- 02 TOKENS */
:root{
  /* brand — sampled from the supplied logo artwork */
  --c-navy:#02265A;
  --c-red:#CB0823;
  --c-ink:#061428;
  --c-graphite:#1A2333;
  --c-steel:#6E7A8D;
  --c-line:#DDE3EC;
  --c-mist:#F1F4F8;
  --c-white:#FFFFFF;

  /* semantic */
  --bg:var(--c-white);
  --bg-alt:var(--c-mist);
  --fg:var(--c-ink);
  --fg-soft:#4A5668;
  --fg-mute:var(--c-steel);
  --rule:var(--c-line);
  --accent:var(--c-red);
  --brand:var(--c-navy);

  /* brushed metal — used once, on the statistics band */
  --metal:linear-gradient(122deg,#F6F8FB 0%,#E3E8F0 18%,#F7F9FC 34%,#DCE3EC 52%,#F2F5F9 71%,#E1E7EF 100%);

  /* type */
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-d0:clamp(2.3rem,6.6vw,6.75rem);
  --t-d1:clamp(1.95rem,4.6vw,4.35rem);
  --t-d2:clamp(1.6rem,3.1vw,3.05rem);
  --t-d3:clamp(1.32rem,2vw,2.05rem);
  --t-d4:clamp(1.2rem,1.5vw,1.45rem);
  --t-lede:clamp(1rem,1.3vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-label:0.7rem;

  /* space */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:8rem; --s9:10rem;
  --pad-sec:clamp(4.5rem,9vw,9.5rem);
  --gut:clamp(1.25rem,4vw,3rem);
  --maxw:1360px;
  --maxw-text:68ch;

  /* form */
  --r-xs:4px; --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 1px 2px rgba(6,20,40,.05),0 8px 24px -12px rgba(6,20,40,.14);
  --shadow-2:0 2px 4px rgba(6,20,40,.05),0 26px 60px -28px rgba(6,20,40,.30);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.7s;
  --hdr-h:84px;
}

/* --------------------------------------------------------------- 03 RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:var(--t-body);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--f-display);font-weight:500;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--c-navy);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--c-navy);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r-sm);transition:top .2s}
.skip:focus{top:1rem}

/* ---------------------------------------------------------- 04 TYPE ROLES */
.d0{font-size:var(--t-d0);letter-spacing:-.038em;line-height:.96}
.d1{font-size:var(--t-d1);letter-spacing:-.032em;line-height:1.02}
.d2{font-size:var(--t-d2);letter-spacing:-.028em;line-height:1.08}
.d3{font-size:var(--t-d3);letter-spacing:-.02em;line-height:1.18}
.d4{font-size:var(--t-d4);letter-spacing:-.012em;line-height:1.3}
.lede{font-size:var(--t-lede);line-height:1.6;color:var(--fg-soft);font-weight:400;max-width:60ch}
.small{font-size:var(--t-small)}
.mono{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.muted{color:var(--fg-mute)}
.measure{max-width:var(--maxw-text)}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- 05 LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1600px}
.sec{padding-block:var(--pad-sec);position:relative}
.sec-tight{padding-block:clamp(3rem,5.5vw,5.5rem)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) clamp(1.25rem,2.6vw,2.5rem)}
.col-4{grid-column-end:span 4}
.col-5{grid-column-end:span 5}
.col-6{grid-column-end:span 6}
.col-7{grid-column-end:span 7}
.col-8{grid-column-end:span 8}
.col-12{grid-column-end:span 12}
.start-2{grid-column-start:2}
.start-7{grid-column-start:7}
.start-9{grid-column-start:9}
.stack{display:flex;flex-direction:column}
.stack-2>*+*{margin-top:var(--s2)}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}
.stack-5>*+*{margin-top:var(--s5)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* dark surfaces */
.on-dark{background:var(--c-ink);color:#EAEEF5;--fg:#EAEEF5;--fg-soft:#A9B4C6;--fg-mute:#7E8AA0;--rule:rgba(255,255,255,.14);--bg:var(--c-ink)}
.on-navy{background:var(--c-navy);color:#EAF0FA;--fg:#EAF0FA;--fg-soft:#B9C7DE;--fg-mute:#8FA1BE;--rule:rgba(255,255,255,.16);--bg:var(--c-navy)}
.on-mist{background:var(--c-mist);--bg:var(--c-mist)}

/* ---------------------------------------------- 06 SECTION EYEBROW / DATUM
   A drawing datum line: red tick, sheet reference, then a hairline that
   runs to the edge of the container. Encodes where you are in the document. */
.datum{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.85rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.datum::before{content:"";width:14px;height:14px;border-left:2px solid var(--accent);border-top:2px solid var(--accent)}
.datum-no{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;color:var(--accent);font-weight:700}
.datum-name{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}
.datum::after{content:"";height:1px;background:var(--rule)}
.datum-c{justify-content:center;grid-template-columns:auto auto auto auto;text-align:center}
.datum-c::after{display:none}

/* ------------------------------------------------------------ 07 BUTTONS */
.btn{--btn-bg:var(--c-navy);--btn-fg:#fff;--btn-bd:var(--c-navy);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.6rem;border:1px solid var(--btn-bd);border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-fg);font-family:var(--f-body);font-weight:600;
  font-size:.975rem;letter-spacing:-.005em;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn>span{position:relative;z-index:2}
.btn{white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c-red);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{color:#fff;border-color:var(--c-red);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.btn:hover::before{transform:translateY(0)}
.btn-arrow{width:18px;height:10px;flex:none;position:relative;z-index:2;transition:transform .4s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--rule)}
.btn-ghost:hover{--btn-fg:#fff}
.btn-line{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:currentColor}
.btn-sm{padding:.7rem 1.1rem;font-size:.9rem}
.btn-block{width:100%;justify-content:center}

/* text link with a drawn underline */
.tlink{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;padding-bottom:.3rem;background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .45s var(--ease)}
.tlink:hover{background-size:100% 1.5px}
.tlink .btn-arrow{transition:transform .4s var(--ease)}
.tlink:hover .btn-arrow{transform:translateX(4px)}

/* --------------------------------------------------------- 08 SITE HEADER */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr-h);display:flex;align-items:center;
  background:#fff;box-shadow:0 1px 0 rgba(6,20,40,.07);
  transition:box-shadow .4s var(--ease),height .4s var(--ease)}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule)}
.hdr-in{display:flex;align-items:center;gap:var(--s4);width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.hdr.is-stuck{height:70px;box-shadow:0 6px 24px -18px rgba(6,20,40,.5)}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand-mark-wrap{display:grid;flex:none}
.brand-mark{grid-area:1/1;width:40px;height:auto;transition:height .4s var(--ease),opacity .3s var(--ease)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:.02em;color:var(--c-navy)}
.brand-sub{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--c-steel);margin-top:.28rem}
.nav{display:flex;align-items:center;gap:clamp(.4rem,1.5vw,1.35rem);margin-left:auto}
.nav-link{position:relative;padding:.55rem .2rem;font-size:.94rem;font-weight:500;color:var(--fg);white-space:nowrap;transition:color .25s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1.5px;background:var(--c-red);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--c-navy)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.hdr-cta{margin-left:clamp(.5rem,1.6vw,1.25rem)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);border-radius:var(--r-sm);background:transparent;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* mega menu */
.has-mega{position:relative}
.mega{position:fixed;left:0;right:0;top:var(--hdr-h);background:#fff;border-top:1px solid var(--c-line);box-shadow:0 30px 60px -30px rgba(6,20,40,.28);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;z-index:99}
.hdr.is-stuck .mega{top:70px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{display:grid;grid-template-columns:1.15fr 2fr;gap:clamp(2rem,4vw,4rem);max-width:var(--maxw);margin-inline:auto;padding:clamp(2rem,3.4vw,3rem) var(--gut)}
.mega-list{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.mega-item{display:block;padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid transparent;transition:background-color .25s,border-color .25s,transform .25s var(--ease);color:var(--c-ink)}
.mega-item:hover{background:var(--c-mist);border-color:var(--c-line);transform:translateX(3px)}
.mega-item b{display:block;font-family:var(--f-display);font-weight:500;font-size:1.02rem;letter-spacing:-.015em;margin-bottom:.15rem}
.mega-item span{display:block;font-size:.85rem;color:var(--c-steel);line-height:1.45}
.mega-feat{border-left:1px solid var(--c-line);padding-left:clamp(1.5rem,2.5vw,2.5rem)}
.mega-feat .mono{color:var(--c-red);display:block;margin-bottom:.75rem}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:98;background:#fff;padding:calc(var(--hdr-h) + 1.5rem) var(--gut) 2rem;overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility .5s}
body.nav-open .drawer{transform:translateY(0);visibility:visible}
.drawer-link{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--c-line);font-family:var(--f-display);font-size:1.55rem;font-weight:500;letter-spacing:-.02em}
.drawer-link .mono{color:var(--c-steel)}
.drawer-foot{margin-top:2rem;display:grid;gap:.75rem}

/* ------------------------------------------------------------- 09 HERO
   The cut: two frames of the same room, one finished, one structural.
   A section-line slides between them. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--c-ink);color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-layer{position:absolute;inset:0;overflow:hidden}
.hero-layer img{width:100%;height:100%;object-fit:cover}
.hero-layer-b{clip-path:inset(0 0 0 var(--cut,52%))}
.hero-layer-a{clip-path:inset(0 calc(100% - var(--cut,52%)) 0 0)}
.hero-media::after{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(102deg,rgba(6,20,40,.94) 0%,rgba(6,20,40,.82) 34%,rgba(6,20,40,.55) 62%,rgba(6,20,40,.70) 100%)}
.hero-par{position:absolute;inset:-6% 0 -6%;will-change:transform}
/* the section line itself */
.cutline{position:absolute;top:0;bottom:0;left:var(--cut,52%);z-index:4;width:0;pointer-events:none}
.cutline::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--c-red);box-shadow:0 0 0 1px rgba(203,8,35,.25),0 0 30px rgba(203,8,35,.45)}
.cut-tag{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#fff;background:rgba(6,20,40,.55);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:.4rem .6rem;border-radius:var(--r-xs)}
.cut-tag-l{right:14px}
.cut-tag-r{left:14px;border-color:rgba(203,8,35,.55);color:#fff}
/* Above .hero-in (z-index 6), or the full-width content wrapper swallows the
   pointer and the handle cannot be dragged at all. */
.cut-grip{position:absolute;top:50%;left:var(--cut,52%);z-index:7;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(6,20,40,.4);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:ew-resize;touch-action:none;transition:box-shadow .3s,border-color .3s,transform .3s var(--ease)}
.cut-grip:hover,.cut-grip:focus-visible{border-color:var(--c-red);box-shadow:0 0 0 6px rgba(203,8,35,.14);transform:translate(-50%,-50%) scale(1.06)}
.cut-grip svg{width:20px;height:12px;fill:none;stroke:#fff;stroke-width:1.5}

.hero-in{position:relative;z-index:6;width:100%;padding-block:calc(clamp(7rem,14vh,10rem) + 25px) 0}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:.5rem .95rem;background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--c-red);flex:none;box-shadow:0 0 0 3px rgba(203,8,35,.28)}
.hero h1{color:#fff;margin-top:1.6rem;max-width:15ch}
.hero-lede{color:rgba(255,255,255,.82);max-width:46ch;margin-top:1.5rem;font-size:var(--t-lede)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
.hero .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}

/* floating engineering cards */
.spec-card{position:absolute;z-index:6;width:min(272px,72vw);padding:1.15rem 1.25rem;border-radius:var(--r);border:1px solid rgba(255,255,255,.22);background:rgba(8,20,40,.58);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.spec-card .mono{color:var(--c-red);display:block;margin-bottom:.55rem}
.spec-card b{display:block;font-family:var(--f-display);font-weight:500;font-size:1.06rem;letter-spacing:-.02em;color:#fff;margin-bottom:.7rem}
.spec-row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.66)}
.spec-row b{all:unset;font-family:var(--f-mono);font-size:.78rem;color:#fff;letter-spacing:.02em}
.spec-1{right:var(--gut);top:26vh}
.spec-2{right:calc(var(--gut) + 90px);top:calc(26vh + 210px)}

/* hero stat strip */
.hero-stats{position:relative;z-index:6;margin-top:clamp(2.5rem,6vh,4.5rem);border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stat{padding:1.4rem 1.25rem 1.6rem;border-right:1px solid rgba(255,255,255,.12)}
.hero-stat:first-child{padding-left:0}
.hero-stat:last-child{border-right:0}
.hero-stat .num{font-family:var(--f-display);font-size:clamp(1.6rem,2.6vw,2.35rem);font-weight:500;letter-spacing:-.03em;color:#fff;line-height:1}
.hero-stat .lbl{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.55rem;display:block}
.scroll-cue{display:flex;align-items:center;gap:.7rem;margin-left:auto;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.scroll-cue i{display:block;width:42px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--c-red);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* page hero (inner pages) */
.phero{position:relative;padding-top:calc(var(--hdr-h) + clamp(4rem,9vw,7.5rem));padding-bottom:clamp(3.5rem,7vw,6rem);overflow:hidden;background:var(--c-ink);color:#fff;isolation:isolate}
.phero-bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,20,40,.94),rgba(6,20,40,.72))}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;max-width:18ch}
.phero .lede{color:rgba(255,255,255,.8);margin-top:1.35rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1.6rem}
.crumbs a:hover{color:#fff}
.crumbs .sep{color:var(--c-red)}

/* ------------------------------------------------------------ 10 MARQUEE */
.marq{overflow:hidden;padding-block:clamp(2rem,3.4vw,2.75rem);border-block:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex;width:max-content;gap:clamp(2.5rem,5vw,4.5rem);animation:marq 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-item{display:flex;align-items:center;gap:.85rem;font-family:var(--f-display);font-size:1.02rem;font-weight:500;letter-spacing:-.012em;color:var(--fg-mute);white-space:nowrap;opacity:.72;transition:opacity .3s,color .3s}
.marq-item:hover{opacity:1;color:var(--c-navy)}
.marq-item i{width:7px;height:7px;border:1.5px solid var(--c-red);transform:rotate(45deg);flex:none}
.marq-lead{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.4rem;color:var(--fg-mute)}

/* -------------------------------------------------------------- 11 CARDS */
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-mist)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-media img{transform:scale(1.055)}
.card-body{padding:clamp(1.35rem,2vw,1.85rem);display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.6rem}
.card-body>p{margin-bottom:1.25rem}
.card-body p{color:var(--fg-soft);font-size:var(--t-small)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule)}
.card-no{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;color:var(--fg-mute)}
.card-go{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;flex:none;transition:background-color .35s,border-color .35s,transform .35s var(--ease)}
.card-go svg{width:15px;height:9px;stroke:currentColor;fill:none;stroke-width:1.5;transition:stroke .3s}
.card:hover .card-go{background:var(--c-red);border-color:var(--c-red);color:#fff;transform:rotate(-45deg)}
.card-tag{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(6,20,40,.62);color:#fff;padding:.38rem .6rem;border-radius:var(--r-xs);backdrop-filter:blur(6px)}

/* the featured service — deliberately larger and dark */
.card-feat{grid-column:span 12;display:grid;grid-template-columns:1.02fr 1fr;background:var(--c-navy);border-color:transparent;color:#EAF0FA}
.card-feat .card-media{aspect-ratio:auto;min-height:100%}
.card-feat .card-body{padding:clamp(1.85rem,3.6vw,3.4rem);display:flex;flex-direction:column;justify-content:center}
.card-feat h3{color:#fff}
.card-feat p{color:rgba(234,240,250,.78)}
.card-feat .card-foot{border-top-color:rgba(255,255,255,.16)}
.card-feat .card-no{color:rgba(234,240,250,.6)}
.card-feat .card-go{border-color:rgba(255,255,255,.3);color:#fff}
.card-feat:hover{transform:translateY(-4px)}
.feat-flag{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--c-red);padding:.42rem .75rem;border-radius:var(--r-xs);margin-bottom:1.15rem}

.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.25rem,2vw,1.75rem)}
/* rows close 3 + 2 rather than leaving a dead column after the featured card */
.svc-grid>.card:not(.card-feat){grid-column:span 4}
.svc-grid>.card:not(.card-feat):nth-last-child(-n+2){grid-column:span 6}
.svc-grid>.card:not(.card-feat):nth-last-child(-n+2) .card-media{aspect-ratio:16/9}

/* ----------------------------------------------------- 12 INDUSTRY TILES */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;isolation:isolate}
.ind{position:relative;min-height:260px;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c-graphite);color:#fff;overflow:hidden;isolation:isolate}
.ind-img{position:absolute;inset:0;z-index:-2;transform:scale(1.01);transition:transform .9s var(--ease)}
.ind-img img{width:100%;height:100%;object-fit:cover}
.ind::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,20,40,.30) 0%,rgba(6,20,40,.55) 45%,rgba(6,20,40,.90) 100%);transition:background .5s}
.ind:hover .ind-img{transform:scale(1.07)}
.ind:hover::after{background:linear-gradient(180deg,rgba(2,38,90,.24) 0%,rgba(2,38,90,.50) 45%,rgba(6,20,40,.88) 100%)}
.ind-no{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;color:rgba(255,255,255,.62);transition:color .4s}
.ind:hover .ind-no{color:var(--c-red)}
.ind h3{font-size:1.28rem;margin-top:auto;padding-top:2.5rem;color:#fff}
.ind p{font-size:.85rem;color:rgba(255,255,255,.8);margin-top:.5rem;max-width:26ch}

/* ------------------------------------------------- 13 WHY / FEATURE GRID */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.why{background:var(--bg);padding:clamp(1.5rem,2.4vw,2.1rem);min-height:210px;display:flex;flex-direction:column;transition:background-color .45s var(--ease)}
.why:hover{background:var(--c-navy)}
.why-ico{width:34px;height:34px;stroke:var(--c-red);fill:none;stroke-width:1.35;margin-bottom:auto;transition:stroke .35s}
.why h3{font-size:1.12rem;margin-top:1.9rem;transition:color .35s}
.why p{font-size:.87rem;color:var(--fg-soft);margin-top:.55rem;transition:color .35s}
.why:hover h3{color:#fff}
.why:hover p{color:rgba(234,240,250,.76)}
.why:hover .why-ico{stroke:#fff}

/* ----------------------------------------------------- 14 STATISTICS BAND
   The one place brushed metal appears. */
.statband{background:var(--metal);border-block:1px solid var(--c-line);position:relative;overflow:hidden}
.statband::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(2,38,90,.05) 0 1px,transparent 1px 42px);pointer-events:none}
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.stat{padding:clamp(2.25rem,4vw,3.5rem) clamp(1rem,1.6vw,1.5rem);border-right:1px solid rgba(2,38,90,.12);text-align:left}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--f-display);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;letter-spacing:-.04em;color:var(--c-navy);line-height:1;display:flex;align-items:baseline;gap:.06em}
.stat .suf{font-size:.5em;color:var(--c-red)}
.stat .lbl{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:#5A6779;margin-top:.85rem;display:block;line-height:1.5}

/* -------------------------------------------------------- 15 PROJECTS */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.filter{padding:.6rem 1.05rem;border:1px solid var(--rule);border-radius:100px;background:transparent;font-size:.88rem;font-weight:500;color:var(--fg-soft);cursor:pointer;transition:all .3s var(--ease)}
.filter:hover{border-color:var(--c-navy);color:var(--c-navy)}
.filter[aria-pressed="true"]{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.proj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,1.6vw,1.5rem);grid-auto-flow:row dense}
.proj{grid-column:span 2;position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--c-graphite);isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),opacity .4s}
.proj:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.proj.is-tall{grid-row:span 2}
.proj.is-wide{grid-column:span 4}
.proj-media{position:relative;aspect-ratio:4/3;height:100%;overflow:hidden}
.proj.is-tall .proj-media{aspect-ratio:4/5.4;height:100%}
.proj.is-wide .proj-media{aspect-ratio:16/9;height:100%}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .5s}
.proj:hover .proj-media img{transform:scale(1.06)}
.proj-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.1rem,1.8vw,1.6rem);color:#fff;
  background:linear-gradient(180deg,rgba(6,20,40,0) 34%,rgba(6,20,40,.86) 100%)}
.proj-ov .mono{color:rgba(255,255,255,.72);margin-bottom:.4rem}
.proj-ov h3{font-size:1.2rem;color:#fff}
.proj-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.6rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.proj:hover .proj-meta{opacity:1;transform:translateY(0)}
.proj[hidden]{display:none}

/* project modal */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:var(--gut);background:rgba(6,20,40,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.modal.is-open{opacity:1;visibility:visible}
.modal-box{width:min(980px,100%);max-height:86vh;overflow:auto;background:#fff;border-radius:var(--r-lg);position:relative;transform:translateY(14px) scale(.985);transition:transform .45s var(--ease)}
.modal.is-open .modal-box{transform:none}
.modal-close{position:absolute;top:1rem;right:1rem;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--c-line);background:rgba(255,255,255,.9);cursor:pointer;font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:background-color .25s,color .25s}
.modal-close:hover{background:var(--c-red);color:#fff;border-color:var(--c-red)}
.modal-img{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-img img{width:100%;height:100%;object-fit:cover}
.modal-body{padding:clamp(1.5rem,3vw,2.5rem)}
.modal-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;margin-top:1.75rem}
.modal-specs div{background:#fff;padding:1rem 1.1rem}
.modal-specs dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-steel)}
.modal-specs dd{margin:.4rem 0 0;font-family:var(--f-display);font-size:1.02rem;font-weight:500;letter-spacing:-.015em}

/* -------------------------------------------------------- 16 PROCESS */
.proc{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,1.6vw,1.5rem)}
.proc::before{content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:var(--rule)}
.proc-step{position:relative;padding-top:64px}
.proc-step::before{content:"";position:absolute;top:20px;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--c-steel);transition:border-color .4s,background-color .4s,transform .4s var(--ease)}
.proc-step:hover::before{border-color:var(--c-red);background:var(--c-red);transform:scale(1.18)}
.proc-no{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;color:var(--c-red);display:block;margin-bottom:.7rem}
.proc-step h3{font-size:1.1rem}
.proc-step p{font-size:.86rem;color:var(--fg-soft);margin-top:.5rem}

/* ---------------------------------------------------- 17 TESTIMONIALS */
.quotes{position:relative}
.quote-track{display:flex;gap:clamp(1rem,2vw,1.75rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem}
.quote-track::-webkit-scrollbar{display:none}
.quote{flex:0 0 min(460px,84vw);scroll-snap-align:start;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(1.6rem,2.6vw,2.25rem);display:flex;flex-direction:column}
.quote-mark{width:26px;height:20px;fill:var(--c-red);opacity:.9;margin-bottom:1.25rem}
.quote p{font-family:var(--f-display);font-size:1.12rem;font-weight:400;line-height:1.5;letter-spacing:-.015em;color:var(--fg)}
.quote-by{display:flex;align-items:center;gap:.9rem;margin-top:auto;padding-top:1.6rem}
.quote-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--c-mist)}
.quote-by b{display:block;font-family:var(--f-display);font-weight:500;font-size:.98rem;letter-spacing:-.01em}
.quote-by span{display:block;font-size:.82rem;color:var(--fg-mute)}
.quote-nav{display:flex;gap:.6rem;margin-top:1.75rem}
.qbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:transparent;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,border-color .3s,color .3s}
.qbtn svg{width:16px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5}
.qbtn:hover{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.qbtn[disabled]{opacity:.35;cursor:default}

/* -------------------------------------------------------- 18 TIMELINE */
.tl{display:grid;gap:0}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:clamp(1.5rem,3vw,3rem);padding:clamp(1.5rem,2.6vw,2.25rem) 0;border-top:1px solid var(--rule);align-items:start}
.tl-row:last-child{border-bottom:1px solid var(--rule)}
.tl-yr{font-family:var(--f-display);font-size:1.5rem;font-weight:500;letter-spacing:-.03em;color:var(--c-red)}
.tl-row h3{font-size:1.16rem;margin-bottom:.45rem}
.tl-row p{color:var(--fg-soft);font-size:var(--t-small);max-width:62ch}

/* ------------------------------------------------------ 19 SPLIT / MEDIA */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split>*{min-width:0}
.split-rev>.split-a{order:2}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-mist)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame-tall{aspect-ratio:4/5}
.frame-wide{aspect-ratio:16/10}
.frame-sq{aspect-ratio:1}
.frame-par img{scale:1.24;will-change:transform}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.4vw,1.25rem)}
.collage .frame:first-child{grid-row:span 2;aspect-ratio:auto;height:100%;align-self:stretch}
.stat-inline{display:flex;gap:clamp(1.5rem,3vw,3rem);flex-wrap:wrap;margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--rule)}
.stat-inline>div{min-width:120px}
.stat-inline .num{font-family:var(--f-display);font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.035em;color:var(--c-navy);line-height:1}
.stat-inline .lbl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-mute);margin-top:.6rem;display:block}

/* value / tick lists */
.ticks{display:grid;gap:.9rem}
.tick{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;font-size:var(--t-small);color:var(--fg-soft)}
.tick svg{width:17px;height:17px;margin-top:.28rem;stroke:var(--c-red);fill:none;stroke-width:1.8;flex:none}
.tick b{color:var(--fg);font-weight:600}

/* spec table */
.spec-table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.spec-table th,.spec-table td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
.spec-table th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);width:38%;font-weight:400}
.spec-table td{color:var(--fg)}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--rule)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .75rem;border:1px solid var(--rule);border-radius:100px;color:var(--fg-soft)}

/* ------------------------------------------------------------ 20 FAQ */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.018em;color:var(--fg);transition:color .3s}
.faq-q:hover{color:var(--c-navy)}
.faq-ico{position:relative;width:16px;height:16px;flex:none}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--c-red);transition:transform .4s var(--ease)}
.faq-ico::before{top:7.25px;left:0;width:16px;height:1.5px}
.faq-ico::after{left:7.25px;top:0;height:16px;width:1.5px}
.faq-item.is-open .faq-ico::after{transform:rotate(90deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding-bottom:1.6rem;color:var(--fg-soft);font-size:var(--t-small);max-width:70ch}

/* ------------------------------------------------------------ 21 FORMS */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.field .req{color:var(--c-red)}
.field input,.field select,.field textarea{width:100%;padding:.95rem 1rem;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);font-size:.975rem;color:var(--fg);transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(2,38,90,.1)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(203,8,35,.09)}
.field .err{font-size:.78rem;color:var(--c-red);display:none}
.field.is-bad .err{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-note{font-size:.8rem;color:var(--fg-mute)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* contact cards */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.ccard{background:var(--bg);padding:clamp(1.3rem,2vw,1.75rem);display:flex;flex-direction:column;gap:.45rem;transition:background-color .35s}
.ccard:hover{background:var(--c-mist)}
.ccard .mono{color:var(--fg-mute)}
.ccard b{font-family:var(--f-display);font-size:1.06rem;font-weight:500;letter-spacing:-.018em}
.ccard span{font-size:.86rem;color:var(--fg-soft)}
.map-wrap{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);background:var(--c-mist)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ------------------------------------------------------- 22 CTA / FOOTER */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--c-navy);color:#fff;text-align:center}
.cta-bg{position:absolute;inset:-10% 0;z-index:-2;opacity:.3;will-change:transform}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 100% at 50% 0%,rgba(2,38,90,.55),rgba(2,38,90,.95))}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta .lede{color:rgba(255,255,255,.8);margin-inline:auto;max-width:52ch;margin-top:1.35rem}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
.cta .btn{--btn-bg:#fff;--btn-fg:var(--c-navy);--btn-bd:#fff}
.cta .btn-ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}

.ftr{background:var(--c-ink);color:#A9B4C6;position:relative;overflow:hidden;--rule:rgba(255,255,255,.12)}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.25fr;gap:clamp(2rem,4vw,3.5rem);padding-block:clamp(3.5rem,6vw,5.5rem)}
.ftr h2,.ftr h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:400;margin-bottom:1.25rem}
.ftr-links{display:grid;gap:.7rem}
.ftr-links a{font-size:.92rem;color:#A9B4C6;transition:color .25s,padding-left .3s var(--ease)}
.ftr-links a:hover{color:#fff;padding-left:5px}
.ftr-brand .brand-name{color:#fff}
.ftr-brand .brand-sub{color:rgba(255,255,255,.5)}
.ftr-about{font-size:.9rem;line-height:1.7;margin-top:1.5rem;max-width:38ch}
.ftr-news{display:flex;gap:.5rem;margin-top:1rem}
.ftr-news input{flex:1;min-width:0;padding:.85rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);color:#fff;font-size:.92rem}
.ftr-news input::placeholder{color:rgba(255,255,255,.4)}
.ftr-news input:focus{outline:0;border-color:rgba(255,255,255,.4)}
.ftr-news button{padding:.85rem 1.15rem;border:0;border-radius:var(--r-sm);background:var(--c-red);color:#fff;font-weight:600;font-size:.92rem;cursor:pointer;transition:filter .25s}
.ftr-news button:hover{filter:brightness(1.12)}
.ftr-map{margin-top:1.5rem;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.ftr-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.9) contrast(.85)}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.6rem;border-top:1px solid var(--rule);font-size:.82rem}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;transition:background-color .3s,border-color .3s,transform .3s var(--ease)}
.socials svg{width:16px;height:16px;fill:currentColor}
.socials a:hover{background:var(--c-red);border-color:var(--c-red);color:#fff;transform:translateY(-2px)}
.ghost-word{position:absolute;left:50%;bottom:-4.5vw;transform:translateX(-50%);font-family:var(--f-display);font-weight:600;font-size:clamp(6rem,19vw,17rem);letter-spacing:-.05em;color:rgba(255,255,255,.028);pointer-events:none;user-select:none;white-space:nowrap;line-height:1}

/* floating actions */
.fabs{position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);z-index:90;display:grid;gap:.6rem}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 30px -10px rgba(6,20,40,.5);transition:transform .35s var(--ease),filter .3s}
.fab:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.08)}
.fab svg{width:24px;height:24px;fill:currentColor}
.fab-wa{background:#25D366}
.fab-call{background:var(--c-navy)}

/* -------------------------------------------------------- 23 UTILITIES */
.u-center{text-align:center}
.u-mt-0{margin-top:0}
.u-mt-3{margin-top:var(--s3)}
.u-mt-4{margin-top:var(--s4)}
.u-mt-5{margin-top:var(--s5)}
.u-mt-6{margin-top:var(--s6)}
.u-mb-3{margin-bottom:var(--s3)}
.u-mb-4{margin-bottom:var(--s4)}
.u-mb-5{margin-bottom:var(--s5)}
.u-narrow{max-width:56ch}
.u-narrow-c{max-width:26ch;margin-inline:auto}
.u-accent{color:var(--c-red)}
.u-brand{color:var(--c-navy)}
.u-flow>*+*{margin-top:1.15rem}

/* ------------------------------------------------------- 24 ANIMATION */
[data-rv]{opacity:0;transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--rv-d,0ms)}
[data-rv="u"]{transform:translateY(26px)}
[data-rv="l"]{transform:translateX(-26px)}
[data-rv="r"]{transform:translateX(26px)}
[data-rv="s"]{transform:scale(.97)}
[data-rv="m"]{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path 1.05s var(--ease)}
[data-rv].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--c-red);transition:width .12s linear}

/* selected work — one package per sector */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,2.4vw,2.25rem)}
.work{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.work-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-graphite)}
.work-media img{width:100%;height:100%;object-fit:cover;display:block}
.work-body{display:flex;flex-direction:column;flex:1;padding:clamp(1.25rem,2vw,1.75rem)}
.work-loc{font-size:.78rem;margin-top:.5rem}
.work-note{margin-top:auto;padding-top:1rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.work-tbc{border-style:dashed}
.work-media-tbc{display:flex;align-items:center;justify-content:center;background:var(--c-mist);
  border-bottom:1px dashed var(--rule);color:var(--fg-mute)}
.work-media-tbc .mono{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.work-tbc .work-body{opacity:.62}

/* supplied contact sheet - shown whole, never cover-cropped */
.montage{border-radius:var(--r);overflow:hidden;background:var(--c-mist);border:1px solid var(--rule)}
.montage img{width:100%;height:auto;display:block}

/* client roster */
.roster-wrap{display:grid;gap:clamp(2rem,3.4vw,3.25rem)}
.roster-block[hidden]{display:none}
.roster-head{display:flex;align-items:baseline;gap:.85rem;font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:600;padding-bottom:.85rem;
  border-bottom:1px solid var(--rule);margin-bottom:.35rem}
.roster-head .mono{font-size:.74rem;flex:none}
.roster-count{margin-left:auto;font-size:.74rem;flex:none}
.roster{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(1.5rem,3vw,3rem)}
.roster-row{break-inside:avoid;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .9rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule)}
.roster-name{font-weight:500;color:var(--fg)}
.roster-loc{margin-left:auto;font-size:.74rem;color:var(--fg-mute);text-align:right}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .marq-track{animation:none}
  .hero-par,.phero-bg,.cta-bg,.frame-par img{transform:none!important}
}

/* ----------------------------------------------------- 25 RESPONSIVE */
@media (max-width:1180px){
  .svc-grid>.card:not(.card-feat){grid-column:span 6}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(-n+3){border-bottom:1px solid rgba(2,38,90,.12)}
  .proc{grid-template-columns:repeat(3,1fr);row-gap:2.5rem}
  .proc::before{display:none}
  .ftr-top{grid-template-columns:1.3fr 1fr 1fr}
  .ftr-news-col{grid-column:1/-1}
  .spec-2{display:none}
}
@media (max-width:1020px){
  .work-grid{grid-template-columns:1fr}
  :root{--hdr-h:72px}
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .card-feat{grid-template-columns:1fr}
  .card-feat .card-media{aspect-ratio:16/9;min-height:0}
  .proj-grid{grid-template-columns:repeat(4,1fr)}
  .proj.is-wide{grid-column:span 4}
  .proj.is-tall{grid-row:span 1}
  .proj.is-tall .proj-media{aspect-ratio:4/3}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stat:nth-child(2){border-right:0}
  .hero-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .hero-stat:nth-child(3){padding-left:0}
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column-end:span 12}
  .start-2,.start-7,.start-9{grid-column-start:auto}
  /* Below this width the hero already carries eyebrow, headline, lede, two
     buttons and four figures. The floating spec cards would either overlap
     the statistics strip or push the hero past two screens, so they go. */
  .spec-1,.spec-2{display:none}
  .collage .frame:first-child{grid-row:auto;min-height:0;aspect-ratio:4/3}
  /* horizontal reveals push overflow on narrow screens */
  [data-rv="l"],[data-rv="r"]{transform:translateY(26px)}
}
@media (max-width:760px){
  .roster{columns:1}
  .roster-loc{margin-left:0;text-align:left;width:100%}
  .svc-grid>.card:not(.card-feat){grid-column:span 12}
  .ind-grid{grid-template-columns:1fr}
  .ind{min-height:200px}
  .ind h3{padding-top:1.5rem}

  /* Section rhythm. The desktop scale leaves ~150px of dead space between
     sections on a phone, which reads as a loading failure rather than air. */
  :root{--pad-sec:clamp(3.25rem,11vw,4.5rem)}
  .datum{margin-bottom:1.6rem}
  .split{gap:2rem}
  .u-mt-6{margin-top:2.5rem}
  .u-mb-5{margin-bottom:2rem}

  /* Hero: fit the essentials on one screen. */
  .hero-in{padding-block:calc(var(--hdr-h) + 2rem + 25px) 0}
  .hero h1{max-width:none}
  .hero-eyebrow{font-size:.62rem;letter-spacing:.12em;padding:.42rem .8rem}
  .hero-lede{font-size:1rem;line-height:1.55;margin-top:1.1rem}
  .hero-actions{margin-top:1.6rem;gap:.6rem}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .scroll-cue{display:none}
  .hero-stat .num{font-size:1.45rem}
  .hero-stat{padding:1rem .75rem 1.1rem}

  /* Type that was still running long. */
  .marq-item{font-size:.9rem}
  .marq-lead{text-align:center}
  .quote p{font-size:1.02rem}
  .tl-yr{font-size:1.25rem}
  .stat .num{font-size:1.9rem}
  .card-feat .card-body{padding:1.35rem}
  .ghost-word{font-size:clamp(4.5rem,26vw,9rem);bottom:-3vw}

  /* The drag handle sits at mid-height, which on a phone lands in the middle
     of the lede. Lift it clear of the copy. */
  .cut-grip{top:30%}

  /* Touch targets. Anything a thumb has to find gets 44px of height, which
     is more than the 24px WCAG minimum but matches what phones actually need. */
  .filter{padding:.7rem 1.1rem}
  .faq-q{padding:1.15rem 0}
  .nav-link,.drawer-link{min-height:44px}
  .tlink{padding-block:.55rem}
  .ftr-links a{padding-block:.35rem}
  .socials a{width:44px;height:44px}
  .qbtn{width:48px;height:48px}
  .card-go{width:44px;height:44px}
  .why-grid{grid-template-columns:1fr}
  .why{min-height:auto}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:1px solid rgba(2,38,90,.12)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+4){border-bottom:1px solid rgba(2,38,90,.12)}
  .proc{grid-template-columns:1fr;row-gap:2rem}
  .proc-step{padding-top:0;padding-left:2rem}
  .proc-step::before{top:6px;left:0}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj,.proj.is-wide{grid-column:span 2}
  .form-row{grid-template-columns:1fr}
  .ccards{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr;gap:2.25rem}
  .tl-row{grid-template-columns:1fr;gap:.5rem}
  .modal-specs{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .cut-tag{display:none}
  .fab{width:48px;height:48px}
}
@media (max-width:460px){
  .hero-stat{padding-inline:.6rem}
  .hero-stat:nth-child(odd){padding-left:0}
  .modal-specs{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .proj,.proj.is-wide,.proj.is-tall{grid-column:span 1;grid-row:span 1}
  .proj.is-tall .proj-media,.proj.is-wide .proj-media{aspect-ratio:4/3}
  .btn{padding:.95rem 1.2rem;font-size:.92rem}
  .ftr-news{flex-wrap:wrap}
  .ftr-news input{flex:1 1 100%}
  .ftr-news button{flex:1 1 100%}
}

/* Very small phones still in service across the region. */
@media (max-width:370px){
  :root{--gut:1rem}
  .hero-stats{grid-template-columns:1fr}
  .hero-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding-left:0}
  .hero-stat:last-child{border-bottom:0}
  .brand-name{font-size:.94rem}
  .brand-mark{width:34px}
}
@media print{
  .hdr,.fabs,.progress,.scroll-cue,.drawer,.marq{display:none!important}
  body{color:#000}
}

/* form status line */
.form-alert{margin:0 0 .25rem;padding:.85rem 1rem;border-radius:var(--r-sm);font-size:.92rem;border:1px solid}
.form-alert.is-ok{background:rgba(2,38,90,.05);border-color:rgba(2,38,90,.22);color:var(--c-navy)}
.form-alert.is-bad{background:rgba(203,8,35,.05);border-color:rgba(203,8,35,.28);color:var(--c-red)}

/* search form (WordPress fallback template) */
.amiri-search{display:flex;gap:.5rem;max-width:520px}
.amiri-search input{flex:1;min-width:0;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bg);color:var(--fg)}
.amiri-search input:focus{outline:0;border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(2,38,90,.1)}

/* pagination (WordPress fallback template) */
.pagination{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 .75rem;border:1px solid var(--rule);border-radius:var(--r-sm);font-size:.92rem;transition:background-color .3s,border-color .3s,color .3s}
.pagination .page-numbers:hover{border-color:var(--c-navy);color:var(--c-navy)}
.pagination .page-numbers.current{background:var(--c-navy);border-color:var(--c-navy);color:#fff}

/* ------------------------------------------------- 26 MEDIA BOX CONTRACT
   Every box that crops an image to a fixed shape. The rules are written to
   survive arbitrary wrapper markup: Elementor's image widget nests the <img>
   two or three divs deep, and a plain `height:100%` on the image alone stops
   resolving as soon as one of those wrappers has an auto height — which is
   exactly what leaves a strip of background under a correctly sized photo. */
.frame,.card-media,.proj-media,.modal-img{
  position:relative;overflow:hidden;
}
/* These four are already absolutely positioned against their section and must
   keep that positioning — only the clipping is added here. Setting
   position:relative on them collapses the element to nothing. */
.hero-layer,.phero-bg,.cta-bg,.ind-img{overflow:hidden}
/* every direct child becomes the full box */
.frame>*,.card-media>*,.proj-media>*,.ind-img>*,.modal-img>*,.hero-layer>*{
  position:absolute;inset:0;width:100%;height:100%;margin:0;display:block;
}
/* and every wrapper below it passes the height through */
.frame a,.frame figure,.frame picture,.frame span,.frame div,
.card-media a,.card-media figure,.card-media picture,.card-media span,.card-media div,
.proj-media a,.proj-media figure,.proj-media picture,.proj-media span,.proj-media div,
.ind-img a,.ind-img figure,.ind-img picture,.ind-img span,.ind-img div,
.modal-img a,.modal-img figure,.modal-img picture,.modal-img span,.modal-img div,
.hero-layer a,.hero-layer figure,.hero-layer picture,.hero-layer span,.hero-layer div,
.phero-bg a,.phero-bg figure,.phero-bg picture,.phero-bg span,.phero-bg div,
.cta-bg a,.cta-bg figure,.cta-bg picture,.cta-bg span,.cta-bg div{
  display:block;width:100%;height:100%;margin:0;
}
.frame img,.card-media img,.proj-media img,.ind-img img,.modal-img img,
.hero-layer img,.phero-bg img,.cta-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:none;
}
/* captions Elementor may add inside an image widget would break the crop */
.frame figcaption,.card-media figcaption,.proj-media figcaption{display:none}