/* =========================================================
   MS Production — Creative Media Agency
   Rebuilt as a static HTML/CSS/JS site.
   Palette, type and layout matched to the original design.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --yellow:#ffc01d;
  --yellow-deep:#f0a500;
  --lime:#a9d22c;
  --grad: linear-gradient(96deg, var(--yellow) 0%, var(--yellow) 30%, var(--lime) 100%);

  --bg-0:#0c0c0c;
  --bg-1:#141414;
  --bg-2:#1b1b1b;
  --bg-3:#242424;
  --header:#2b2b2b;

  --white:#fff;
  --muted:#b7b7b7;
  --dim:#8d8d8d;
  --line:rgba(255,255,255,.09);

  --wa:#25d366;

  --f-head:'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body:'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --f-serif:'Playfair Display', Georgia, serif;

  --wrap:1280px;
  --gut:clamp(18px, 4vw, 48px);
  --hh:104px;                 /* header height */
  --r:14px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-1);
  color:var(--white);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;line-height:1.14;font-weight:700;letter-spacing:-.02em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
svg{display:block}

/* The browser's own [hidden]{display:none} loses to any author `display`
   declaration, which silently un-hides panels. Make it win. */
[hidden]{display:none !important}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-200%);
  background:var(--yellow);color:#111;font-weight:700;
  padding:10px 16px;border-radius:8px;
}
.skip-link:focus{transform:none}

:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px}

/* ---------- shared bits ---------- */
.pill{
  display:inline-block;
  font-family:var(--f-head);font-weight:500;font-size:.9rem;
  color:var(--yellow);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  padding:.5em 1.35em;border-radius:999px;
  backdrop-filter:blur(4px);
}

.btn-solid{
  display:inline-block;
  background:var(--yellow);color:#151515;
  font-family:var(--f-head);font-weight:600;
  padding:.85em 2.1em;border-radius:999px;
  transition:background .18s ease, transform .18s ease;
}
.btn-solid:hover{background:#ffcf4d}
.btn-solid:active{transform:translateY(1px)}

/* section rhythm — one place only, to avoid specificity fights */
.sec{position:relative;padding-block:clamp(64px,9vw,120px)}
.sec-head{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.sec-sub{
  color:var(--muted);max-width:62ch;margin:22px auto 0;
  font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.6;
}
.sec-sub.wide{max-width:78ch}

/* headline with gradient second half */
.h-split{
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  letter-spacing:-.03em;
}
.h-split em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.h-split.center{text-align:center;margin-bottom:clamp(38px,5vw,64px)}
.h-stack{line-height:1.06}

/* ---------- placeholder art ----------
   Every .ph is a stand-in for a real photo.
   Drop a real file in assets/img/… and replace the
   background with url("../assets/img/…").             */
.ph{
  background-color:#2a2a2a;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px);
  pointer-events:none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:90;
  background:var(--header);
  border-top:3px solid var(--yellow);
  border-bottom:5px solid var(--yellow);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:0 12px 34px rgba(0,0,0,.5)}

.header-inner{
  height:var(--hh);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}

/* logo */
.logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1;flex:0 0 auto}
.logo-mark{
  font-family:var(--f-head);font-weight:800;font-size:2.15rem;letter-spacing:-.06em;
  background:linear-gradient(90deg,#fff 0 46%, var(--yellow) 46% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-rule{display:block;width:100%;height:4px;background:var(--yellow);margin:2px 0 3px;border-radius:1px}
.logo-sub{
  font-family:var(--f-head);font-size:.44rem;font-weight:600;
  letter-spacing:.42em;color:var(--muted);text-transform:uppercase;
}

/* nav — 7 items now that Services/Locations are real pages, so this
   runs a touch tighter than the original 6-item bar to keep every
   label on one line down to the 1180px collapse breakpoint */
.nav-desktop{margin-inline:auto}
.nav-desktop ul{display:flex;gap:clamp(10px,1.6vw,30px);white-space:nowrap}
.nav-desktop a{
  font-family:var(--f-head);font-size:.78rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:#e9e9e9;
  padding:.4em 0;position:relative;
}
.nav-desktop a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--yellow);transition:right .28s ease;
}
.nav-desktop a:hover::after{right:0}

/* actions */
.header-actions{display:flex;align-items:center;gap:clamp(10px,1.5vw,20px);flex:0 0 auto}

.btn-appoint{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-head);font-size:.78rem;font-weight:600;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;padding:.85em 1.5em;
  white-space:nowrap;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.btn-appoint svg{width:13px;height:13px;margin-top:-8px}
.btn-appoint:hover{background:var(--yellow);border-color:var(--yellow);color:#151515}

.icon-btn{
  width:38px;height:38px;display:grid;place-content:center;
  border-radius:8px;color:#fff;
  transition:color .18s ease;
}
.icon-btn:hover{color:var(--yellow)}
.icon-btn svg{width:19px;height:19px}

.burger{gap:5px}
.burger span{
  display:block;height:2px;background:var(--yellow);border-radius:2px;
  transition:width .2s ease, margin .2s ease, transform .34s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:20px;margin-left:6px}
.burger span:nth-child(3){width:26px}
.burger:hover span:nth-child(2){width:26px;margin-left:0}
/* morph into an X while the drawer is open */
.burger.is-x span:nth-child(1){width:26px;transform:translateY(7px) rotate(45deg)}
.burger.is-x span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-x span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}

.header-divider{width:1px;height:26px;background:rgba(255,255,255,.28)}

/* search panel */
.search-panel{border-top:1px solid rgba(255,255,255,.1);background:#242424;padding-block:20px}
.search-form{display:flex;gap:12px;flex-wrap:wrap}
.search-form input{
  flex:1 1 240px;min-width:0;
  background:#1a1a1a;border:1px solid var(--line);
  border-radius:999px;padding:.85em 1.4em;
}
.search-form input::placeholder{color:var(--dim)}
.search-note{margin-top:10px;color:var(--dim);font-size:.9rem;min-height:1.2em}

/* drawer
   Closed by default in two independent ways: the `hidden` attribute in the
   markup (covers the moment before JS runs) and the transform/visibility
   pair below (lets it slide instead of snapping). JS clears `hidden` first,
   then adds .is-open on the next frame so the transition actually plays. */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:98;
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility .4s;
}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;z-index:99;
  width:min(340px,86vw);height:100%;
  background:#1d1d1d;border-left:3px solid var(--yellow);
  padding:26px 28px;display:flex;flex-direction:column;gap:26px;
  overflow-y:auto;
  box-shadow:-34px 0 70px rgba(0,0,0,.55);
  transform:translateX(101%);
  visibility:hidden;
  transition:transform .48s cubic-bezier(.22,1,.36,1), visibility .48s;
}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer-close{align-self:flex-end;width:38px;height:38px;color:var(--yellow);transition:transform .25s ease}
.drawer-close:hover{transform:rotate(90deg)}
.drawer-close svg{width:20px;height:20px}
.drawer nav ul{display:flex;flex-direction:column;gap:4px}
.drawer nav a{
  display:block;padding:.7em 0;border-bottom:1px solid var(--line);
  font-family:var(--f-head);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.86rem;
}
.drawer nav a:hover{color:var(--yellow)}
.drawer-cta{text-align:center}
.drawer-meta{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.92rem;margin-top:auto}
.drawer-meta a:hover{color:var(--yellow)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:clamp(58px,8vw,104px);
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#160d1c}
.hero-mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 90% at 18% 40%, #2a1030 0%, transparent 62%),
    radial-gradient(60% 80% at 78% 30%, #251043 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 100%, #3a1420 0%, transparent 65%),
    linear-gradient(180deg,#180d1e 0%, #241026 45%, #120b16 100%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.hero-glow--a{width:46vw;height:46vw;left:8%;top:32%;background:#7a1f5a}
.hero-glow--b{width:40vw;height:40vw;right:6%;top:12%;background:#2b2a8c}
.hero-tri{
  position:absolute;left:0;top:0;width:min(30%,430px);height:100%;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 15px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%, transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%, transparent 100%);
}
.hero-rules{position:absolute;inset:0;z-index:-1;display:flex;justify-content:space-evenly;pointer-events:none}
.hero-rules i{width:1px;background:rgba(255,255,255,.07)}

/* =========================================================
   AMBIENT BACKGROUND MOTIFS — camera aperture + flying drone

   Decorative only: aria-hidden, pointer-events:none, sat behind
   the real content by plain DOM order (no z-index tug-of-war
   needed inside .hero/.page-hero's isolated stacking context).
   Idle motion lives in anim.js and is skipped entirely for
   prefers-reduced-motion visitors the same way every other
   idle loop in this file is; the CSS keyframe below is also
   caught by the global reduced-motion block further down.
   ========================================================= */
.bg-motif{position:absolute;pointer-events:none;opacity:.16}
.bg-aperture{width:clamp(240px,30vw,440px);aspect-ratio:1;top:8%;right:2%}
.bg-aperture svg{width:100%;height:100%;overflow:visible;color:var(--yellow)}
.bg-aperture .ap-ring{fill:none;stroke:currentColor;stroke-width:1.1}
.bg-aperture .ap-blade{fill:currentColor;opacity:.6}
.bg-aperture .ap-core{fill:none;stroke:currentColor;stroke-width:1.6}

/* sits inside the section's own top padding band, above where any
   heading text starts, so it never crosses a headline or paragraph */
.bg-flyway{position:absolute;left:0;right:0;top:0;height:clamp(50px,7vw,95px);overflow:hidden;pointer-events:none;opacity:.18}
.bg-flyway .drone-track{display:flex;align-items:center;width:max-content;height:100%;animation:droneFly 30s linear infinite}
/* gap lives on the group, not the track, so translateX(-50%) lands exactly — same trick as .mq-group */
.bg-flyway .drone-group{display:flex;align-items:center;gap:5vw;padding-right:36vw}
.bg-flyway .drone-ico{flex:none;width:min(6vw,82px);color:var(--yellow)}
.bg-flyway .drone-ico--b{width:min(4.6vw,64px);opacity:.8;align-self:flex-end}
.bg-flyway .drone-ico svg{width:100%;height:100%;display:block}
.dr-body,.dr-arm{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.dr-rotor-ring{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7}
.dr-blade{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 50%}
@keyframes droneFly{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:720px){ .bg-aperture{opacity:.1} .bg-flyway{display:none} }

.hero-inner{text-align:center;position:relative}
.hero-title{margin:26px 0 0;display:flex;flex-direction:column;letter-spacing:-.04em}
.hero-title .l1{font-size:clamp(2.7rem,7.8vw,6.2rem);font-weight:800}
.hero-title .l2{font-size:clamp(2.7rem,7.8vw,6.2rem);font-weight:800;color:var(--yellow)}
.hero-sub{
  margin:26px auto 0;max-width:56ch;
  font-size:clamp(1.02rem,1.7vw,1.42rem);font-weight:600;line-height:1.62;
  color:#e4e4e4;
}

/* cinematic vignette — darkens the hero's edges so the eye stays on the
   headline and coverflow, the way a wide establishing shot is graded */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* small chrome detail, bottom-left — "keep scrolling" without a paragraph
   of copy. The line grows/shrinks on a slow loop; idle only, no scroll math */
.scroll-cue{
  position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,40px);
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);
  pointer-events:none;
}
.scroll-cue i{display:block;width:1px;height:26px;background:var(--yellow);transform-origin:top center}

/* ---------- coverflow ---------- */
.cover{position:relative;margin-top:clamp(38px,6vw,74px);padding-bottom:clamp(30px,4vw,54px)}
.cover-stage{
  position:relative;
  height:clamp(300px,38vw,560px);
  perspective:1500px;
  transform-style:preserve-3d;
}
.cov{
  position:absolute;top:0;left:50%;
  width:clamp(210px,25vw,470px);
  height:100%;
  margin-left:calc(clamp(210px,25vw,470px) / -2);
  transition:transform .62s cubic-bezier(.22,.75,.3,1), opacity .62s ease, filter .62s ease;
  will-change:transform;
}
.cov-frame{
  position:relative;height:100%;
  background:var(--yellow);
  border-radius:12px;
  padding:34px 10px 10px;
  box-shadow:0 34px 60px rgba(0,0,0,.55);
}
.cov-img{position:absolute;inset:34px 10px 10px;border-radius:10px}
.cov-cap{
  position:absolute;left:0;right:0;bottom:34%;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-inline:12px;text-align:center;
}
.cov-tag{
  font-family:var(--f-head);font-size:.52rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  background:#111;color:var(--yellow);
  padding:.42em 1em;border-radius:999px;
}
.cov-cap h3{
  font-family:var(--f-serif);font-weight:500;
  font-size:clamp(.95rem,1.9vw,2rem);
  color:#fff;letter-spacing:.01em;
  text-shadow:0 3px 16px rgba(0,0,0,.75);
}

/* positions written by JS via data-pos */
.cov[data-pos="0"]{transform:translateZ(90px) rotateY(0deg) scale(1);opacity:1;z-index:5}
.cov[data-pos="-1"]{transform:translateX(-82%) translateZ(-70px) rotateY(26deg) scale(.9);opacity:.94;z-index:4}
.cov[data-pos="1"]{transform:translateX(82%) translateZ(-70px) rotateY(-26deg) scale(.9);opacity:.94;z-index:4}
.cov[data-pos="-2"]{transform:translateX(-152%) translateZ(-220px) rotateY(34deg) scale(.8);opacity:.7;z-index:3}
.cov[data-pos="2"]{transform:translateX(152%) translateZ(-220px) rotateY(-34deg) scale(.8);opacity:.7;z-index:3}
.cov[data-pos="hide"]{transform:translateZ(-420px) scale(.6);opacity:0;z-index:1;pointer-events:none}

.cover-dots{display:flex;justify-content:center;gap:11px;margin-top:26px}
.cover-dots button{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.32);
  transition:background .2s ease, transform .2s ease;
}
.cover-dots button[aria-selected="true"]{background:var(--yellow);transform:scale(1.35)}

/* placeholder tints for the work cards */
.ph-work{background-image:linear-gradient(160deg,#4a4a4a,#161616)}
.ph-honda{background-image:linear-gradient(160deg,#6b4a2f,#1b1310)}
.ph-mg{background-image:linear-gradient(160deg,#7a2020,#171012)}
.ph-pvc{background-image:linear-gradient(160deg,#7a5a18,#141210)}
.ph-zfam{background-image:linear-gradient(160deg,#5c1830,#120d14)}
.ph-saffron{background-image:linear-gradient(160deg,#6a5230,#141210)}

/* =========================================================
   STATEMENT — cinematic pause between the hero and services

   Static by default: the two lines just stack and both read fine
   with no JS at all. anim.js adds .is-cinematic only once GSAP
   and ScrollTrigger are confirmed alive, which is what switches
   the pin on and turns the lines into a scroll-scrubbed crossfade.
   ========================================================= */
.sec-statement{position:relative;background:var(--bg-0)}
.statement-pin{
  display:flex;flex-direction:column;gap:clamp(18px,3.6vw,36px);
  align-items:center;justify-content:center;
  padding:clamp(70px,11vw,150px) 6vw;text-align:center;
}
.statement-line{
  font-family:var(--f-head);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,5vw,3.6rem);letter-spacing:-.02em;line-height:1.25;
  color:#fff;max-width:20ch;
}
.statement-line em{font-style:normal;color:var(--yellow)}

.sec-statement.is-cinematic{height:220vh}
.sec-statement.is-cinematic .statement-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  padding:0 6vw;display:block;
}
.sec-statement.is-cinematic .statement-line{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}

/* =========================================================
   SERVICES
   ========================================================= */
.sec-services{background:var(--bg-2)}
.waves{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-radial-gradient(120% 60% at 50% 130%, transparent 0 22px, rgba(255,255,255,.045) 22px 23px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 55%);
  mask-image:linear-gradient(180deg,#000 0%, transparent 55%);
}
.waves-2{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%);mask-image:linear-gradient(180deg,transparent 0%,#000 60%)}
.waves-3{opacity:.65;-webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 70%);mask-image:linear-gradient(180deg,transparent 10%,#000 70%)}

.svc-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,4.6vw,72px) clamp(30px,4vw,64px);
}
.svc{max-width:44ch}
.svc-ico{color:var(--yellow);margin-bottom:20px}
.svc-ico svg{
  width:46px;height:46px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.svc h3{
  font-size:1.12rem;font-weight:700;line-height:1.4;margin-bottom:14px;
}
.svc h3 span{display:block;font-weight:600}
.svc p{color:var(--muted);font-size:.99rem;line-height:1.68}

/* =========================================================
   ABOUT
   ========================================================= */
.sec-about{background:var(--bg-1);overflow:hidden}
.about-tint{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 45% at 12% 55%, rgba(120,60,30,.20) 0%, transparent 70%),
    radial-gradient(45% 40% at 55% 20%, rgba(40,90,50,.16) 0%, transparent 70%);
}
.about-grid{
  position:relative;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,80px);align-items:start;
}
.about-h{
  font-size:clamp(1.85rem,3.5vw,2.85rem);
  margin:24px 0 20px;letter-spacing:-.03em;
}
.about-h em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:#d2d2d2;font-size:1.06rem;line-height:1.7;max-width:56ch}

.mini{
  font-family:var(--f-head);font-size:1.02rem;font-weight:700;
  color:var(--yellow);margin:34px 0 14px;
  display:flex;align-items:center;gap:.5em;
}
.mini::before{content:"//";color:var(--yellow);opacity:.85}
.about-copy > p{color:var(--muted);line-height:1.7;max-width:58ch}

.checks{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px 26px;margin:26px 0 4px;
}
.checks li{
  position:relative;
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-head);font-weight:600;font-size:.94rem;color:#ededed;
}
.checks li::before{
  content:"";flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background-color:var(--yellow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='%23151515' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:15px 15px;background-repeat:no-repeat;background-position:center;
}

.stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:30px clamp(26px,4vw,60px);
  margin-top:40px;max-width:560px;
}
/* number and label sit side by side, rule under the label */
.stat{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
.stat dt{
  grid-column:1;
  display:flex;align-items:baseline;gap:.12em;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--yellow);
  letter-spacing:-.03em;
}
.stat .suf{font-size:.8em}
.stat dd{
  grid-column:2;
  font-family:var(--f-head);font-weight:700;font-size:.79rem;
  letter-spacing:.06em;color:#efefef;line-height:1.35;
  margin-top:.55em;padding-bottom:14px;
  border-bottom:2px solid var(--yellow);
  max-width:15ch;
}

/* collage */
.about-collage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-collage .col{display:flex;flex-direction:column;gap:16px}
.col-b{margin-top:clamp(30px,6vw,86px)}
.about-collage .ph{border-radius:16px}
.ph-b1{aspect-ratio:4/3}
.ph-b2{aspect-ratio:3/4}
.ph-b3{aspect-ratio:4/3}
.ph-b4{aspect-ratio:3/4}
.ph-b5{aspect-ratio:3/4}
.ph-b6{aspect-ratio:4/3}
.ph-bts{background-image:linear-gradient(150deg,#3b3b3b,#191919)}
.ph-b2{background-image:linear-gradient(150deg,#4a4034,#1a1714)}
.ph-b4{background-image:linear-gradient(150deg,#402a2a,#171213)}
.ph-b5{background-image:linear-gradient(150deg,#33404a,#141719)}

/* =========================================================
   PROJECTS
   ========================================================= */
.sec-projects{background:var(--bg-1)}
.proj-slider{position:relative;display:flex;align-items:center;gap:14px}
.proj-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * 18px) / 3);
  gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block:4px;
  flex:1 1 0%;min-width:0;
}
.proj-track::-webkit-scrollbar{display:none}
.proj{scroll-snap-align:start}
.proj-card{
  position:relative;display:block;
  aspect-ratio:16/9;border-radius:6px;overflow:hidden;
}
.proj-card .ph{position:absolute;inset:0}
.ph-proj{background-image:linear-gradient(150deg,#4c3a4a,#161318)}
.ph-p2{background-image:linear-gradient(150deg,#6b5836,#171410)}
.ph-p3{background-image:linear-gradient(150deg,#3d5a3a,#131714)}
.ph-p4{background-image:linear-gradient(150deg,#4a2340,#141018)}
.ph-p5{background-image:linear-gradient(150deg,#5a2626,#161011)}
.proj-label{
  position:absolute;left:16px;top:16px;right:60px;z-index:2;
  font-family:var(--f-serif);font-size:1.02rem;font-weight:500;
  color:#f3e6c8;text-shadow:0 2px 10px rgba(0,0,0,.7);line-height:1.3;
}
.proj-label.serif{font-size:1.24rem;color:#fff}
.play{
  position:absolute;inset:0;margin:auto;z-index:2;
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  display:grid;place-content:center;color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.play svg{width:26px;height:26px;margin-left:3px}
.proj-card:hover .play{background:rgba(255,255,255,.18);transform:scale(1.06)}

.proj-arrow{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-content:center;color:#fff;
  background:rgba(255,255,255,.06);
  transition:background .2s ease,color .2s ease;
}
.proj-arrow:hover{background:var(--yellow);color:#151515}
.proj-arrow svg{width:20px;height:20px}

.viewmore-wrap{text-align:center;margin-top:34px}
.viewmore{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:600;font-size:.92rem;
}
.vm-arrow{width:13px;height:13px;color:var(--yellow)}
.vm-line{width:44px;height:1px;background:rgba(255,255,255,.45)}
.vm-dot{
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  display:grid;place-content:center;
}
.vm-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.viewmore:hover .vm-dot{border-color:var(--yellow)}

/* =========================================================
   PARTNERS
   ========================================================= */
.sec-partners{background:var(--bg-1);padding-top:0;overflow:hidden}
/* Two rows, opposite directions — row 1 drifts left, row 2 drifts
   right, forever. Each row's content is duplicated once so
   translateX(-50%)/translateX(0)->(-50%) lands exactly on a full
   loop with no seam, the same trick the text marquee uses. */
.partner-marquee{display:flex;flex-direction:column;gap:clamp(14px,2vw,26px);margin-top:clamp(30px,5vw,54px)}
.partner-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partner-track{display:flex;width:max-content}
.partner-track--left{animation:partnersLeft 34s linear infinite}
.partner-track--right{animation:partnersRight 34s linear infinite}
.partner-set{display:flex;list-style:none;margin:0;padding:0;gap:clamp(14px,2vw,26px);padding-right:clamp(14px,2vw,26px)}
@keyframes partnersLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes partnersRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.partner{
  background:#fff;border-radius:14px;flex:none;
  width:clamp(150px,15vw,196px);aspect-ratio:1;display:grid;place-content:center;
  padding:14px;text-align:center;
}
.partner.dark{background:#0f0f0f;border:1px solid #2a2a2a}
.plogo{
  font-family:var(--f-head);font-weight:700;
  font-size:.78rem;color:#1b1b1b;line-height:1.25;letter-spacing:-.01em;
}
.plogo.strong{font-size:1.7rem;letter-spacing:-.04em}
.plogo.red{color:#c8102e}
.plogo.small{font-size:.62rem;letter-spacing:.02em}
.plogo.serif{font-family:var(--f-serif);font-weight:500;letter-spacing:.06em}
.plogo.light{color:#f0e4c8}
.plogo i{font-style:normal;color:#d33}

/* =========================================================
   TEAM INTRO + MARQUEE
   ========================================================= */
.sec-teamintro{background:var(--bg-1)}
.teamintro-grid{
  position:relative;
  display:grid;grid-template-columns:1fr 1.05fr 1fr;
  gap:clamp(24px,4vw,60px);align-items:center;
}
.teamintro-copy{color:#e0e0e0;font-size:1.06rem;line-height:1.75}
.ph-t1{aspect-ratio:1;border-radius:4px;background-image:linear-gradient(150deg,#6b5024,#1a1410)}
.ph-t2{aspect-ratio:3/4;border-radius:4px;background-image:linear-gradient(150deg,#2f3b30,#141614)}

.marquee{
  overflow:hidden;background:var(--bg-1);
  padding-block:clamp(10px,2vw,26px);
  border-block:0;
}
.marquee-row{
  display:flex;align-items:center;
  width:max-content;
  animation:mq 26s linear infinite;
}
/* gap lives on the group, not the row, so translateX(-50%) lands exactly */
.mq-group{
  display:flex;align-items:center;
  gap:clamp(20px,3vw,54px);
  padding-right:clamp(20px,3vw,54px);
}
.marquee span{
  font-family:var(--f-head);font-weight:800;
  font-size:clamp(2.4rem,7.2vw,5.6rem);
  letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  line-height:1;
}
.mq-sol{color:var(--yellow)}
.mq-out{
  color:transparent;
  -webkit-text-stroke:1.5px var(--yellow);
}
.mq-star{font-size:clamp(1.4rem,3vw,2.6rem);color:#fff;font-weight:400}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   TEAM
   ========================================================= */
.sec-team{background:var(--bg-1)}
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3vw,42px) clamp(16px,2.4vw,30px);
}
.member h3{font-size:1.32rem;font-weight:600;margin:18px 0 6px;letter-spacing:-.02em}
.member p{color:#d6d6d6;font-size:.94rem}
.ph-face{
  aspect-ratio:1/1.1;
  background-image:radial-gradient(75% 70% at 50% 30%, #e0a916 0%, #b57f0a 55%, #8a5f06 100%);
}
.ph-face.mono{background-image:radial-gradient(75% 70% at 50% 30%, #3a3a3a 0%, #232323 60%, #141414 100%)}
/* simple figure silhouette so the tile reads as a portrait slot */
.ph-face::before{
  content:"";position:absolute;left:50%;bottom:0;
  width:74%;height:52%;transform:translateX(-50%);
  border-radius:46% 46% 0 0/58% 58% 0 0;
  background:rgba(0,0,0,.30);
}
.ph-face::after{
  background-image:none;
  content:"";position:absolute;right:auto;bottom:auto;left:50%;top:20%;
  width:30%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:rgba(0,0,0,.30);
}
.member.todo h3{color:var(--yellow)}
.member.todo p{color:var(--dim);font-style:italic}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.sec-quote{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,130px)}
.quote-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.72) 48%, rgba(8,8,8,.35) 100%),
    linear-gradient(140deg,#3a2a18 0%, #150f0a 55%, #0b0b0b 100%);
}
.quote-card{position:relative;max-width:62ch}
.stars{display:flex;gap:6px;margin-bottom:26px}
.stars svg{width:26px;height:26px;fill:var(--yellow)}
.quote-mark{
  position:absolute;left:min(48ch,88%);top:-14px;
  font-family:var(--f-serif);font-size:7rem;line-height:1;
  color:rgba(255,255,255,.14);pointer-events:none;
}
.quote-slides{position:relative}
.qs{margin:0;display:none}
.qs.is-active{display:block}
.qs p{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.75;color:#eaeaea}
.qs p::before{content:"\201C"}
.qs p::after{content:"\201D"}
.qs footer{
  display:flex;align-items:center;gap:18px;
  margin-top:34px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.2);
  max-width:46ch;
}
.ph-avatar{
  flex:0 0 auto;width:74px;height:74px;border-radius:50%;
  background-image:radial-gradient(70% 70% at 50% 30%, #6b6b6b, #262626);
  border:2px solid rgba(255,255,255,.25);
}
.qs cite{font-style:normal;display:flex;flex-direction:column}
.qs cite strong{font-family:var(--f-head);font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
.qs cite span{color:#d0d0d0;font-size:1.02rem}

.quote-nav{display:flex;gap:16px;margin-top:30px}
.quote-nav button{
  width:52px;height:52px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.45);
  display:grid;place-content:center;color:#fff;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.quote-nav button:hover{background:var(--yellow);border-color:var(--yellow);color:#151515}
.quote-nav svg{width:22px;height:22px}

/* =========================================================
   FAQ
   ========================================================= */
.sec-faq{background:var(--bg-2)}
.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:var(--bg-3);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .2s ease;
}
.faq-item.is-open{border-color:rgba(255,192,29,.4)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:1.15em 1.5em;text-align:left;
  font-family:var(--f-head);font-weight:600;font-size:1.02rem;color:#f2f2f2;
}
.faq-plus{
  position:relative;flex:0 0 auto;width:22px;height:22px;
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;top:50%;left:50%;
  background:var(--yellow);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.faq-plus::before{width:16px;height:2px}
.faq-plus::after{width:2px;height:16px}
.faq-item.is-open .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
/* max-height cap (generous — longer than any answer here actually
   runs) is what really zeroes this out; overflow:hidden does the
   clipping. A plain 0fr/1fr grid-rows trick still leaves slivers of
   text peeking through in Chromium because a bare `fr` track keeps
   an implicit content-based minimum even at min-height:0. */
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,1,.36,1);
}
.faq-item.is-open .faq-a{max-height:240px}
.faq-a > p{
  color:var(--muted);line-height:1.7;
  padding:0 1.5em 1.15em;max-width:68ch;
}
.faq-cta{
  text-align:center;margin-top:clamp(30px,4vw,42px);
  color:var(--muted);font-size:.98rem;
}
.faq-cta a{color:var(--yellow);border-bottom:1px solid rgba(255,192,29,.4)}
.faq-cta a:hover{border-color:var(--yellow)}

/* =========================================================
   AREAS SERVED + MAP
   ========================================================= */
.areas-served{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(40px,6vw,64px);padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line);
}
.areas-label{
  font-family:var(--f-head);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
}
.areas-served ul{display:flex;flex-wrap:wrap;gap:10px}
.areas-served li{
  font-family:var(--f-head);font-size:.83rem;font-weight:500;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:999px;transition:border-color .18s ease,background .18s ease;
}
.areas-served li:hover{border-color:rgba(255,192,29,.5);background:rgba(255,255,255,.09)}
.areas-served li a{display:block;padding:.5em 1.1em;color:#e8e8e8}
.areas-served li a:hover{color:var(--yellow)}
.map-wrap{
  margin-top:24px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/6;background:#1a1a1a;
}
.map-wrap iframe{
  width:100%;height:100%;border:0;display:block;
  /* tints the default Google Maps chrome to sit comfortably on a dark page */
  filter:invert(90%) hue-rotate(180deg) brightness(96%) contrast(90%);
}

/* =========================================================
   CONTACT INFO
   ========================================================= */
.sec-info{background:var(--bg-2);padding-block:clamp(48px,6vw,84px)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.info{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:start}
.info-ico{
  grid-row:1 / span 3;
  width:52px;height:52px;border-radius:50%;
  background:var(--yellow);color:#151515;
  display:grid;place-content:center;
}
.info-ico svg{width:24px;height:24px}
.info h3{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.info p{color:#dcdcdc;line-height:1.5}
.info p a:hover{color:var(--yellow)}
.info-cta{
  justify-self:start;margin-top:8px;
  font-family:var(--f-head);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;
}
.info-cta:hover{color:var(--yellow);border-color:var(--yellow)}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.sec-contact{background:var(--bg-2)}
.contact-grid{
  position:relative;
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,5vw,70px);align-items:start;
}
.contact-h{
  font-size:clamp(2.1rem,4vw,3.15rem);margin-top:26px;
  line-height:1.12;letter-spacing:-.03em;
}
.contact-h em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-copy{align-self:start}
.contact-form{display:flex;flex-direction:column;gap:18px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin:0;display:block}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:#2e2e2e;border:1px solid transparent;
  border-radius:26px;padding:1.05em 1.6em;
  transition:border-color .18s ease,background .18s ease;
  resize:vertical;
}
.contact-form textarea{border-radius:22px;min-height:200px}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#9a9a9a}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;border-color:var(--yellow);background:#333}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"]{border-color:#e2564c}
.err{display:block;color:#f2857c;font-size:.84rem;min-height:1.1em;padding:4px 0 0 1.6em}
.btn-submit{align-self:flex-start;border:0}
.form-status{color:var(--lime);font-size:.95rem;min-height:1.3em}

/* =========================================================
   INSTAGRAM STRIP
   ========================================================= */
.ig{background:var(--bg-2)}
.ig-strip{display:grid;grid-template-columns:repeat(7,1fr);align-items:stretch}
.ig-strip > li{aspect-ratio:1;position:relative}
.ph-ig{background-image:linear-gradient(150deg,#44503f,#171a16)}
.ph-i2{background-image:linear-gradient(150deg,#5d5136,#191712)}
.ph-i3{background-image:linear-gradient(150deg,#4a3a2c,#171310)}
.ph-i4{background-image:linear-gradient(150deg,#2c4438,#121614)}
.ph-i5{background-image:linear-gradient(150deg,#3a4a44,#141817)}
.ph-i6{background-image:linear-gradient(150deg,#54402f,#181310)}
.ig-strip > li.ig-cta{display:grid;place-content:center;aspect-ratio:auto}
.ig-cta a{
  background:var(--yellow);color:#151515;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 18px;width:100%;height:auto;
  font-family:var(--f-head);font-weight:700;font-size:.82rem;
  letter-spacing:.02em;text-align:center;
  transition:background .2s ease;
}
.ig-cta a:hover{background:#ffcf4d}
.ig-cta svg{width:30px;height:30px}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{position:relative;background:var(--bg-0);overflow:hidden;padding-top:clamp(60px,9vw,120px)}
.foot-arc{
  position:absolute;left:50%;top:8%;
  width:min(1000px,84vw);aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.10);border-radius:50%;
  pointer-events:none;
}
.foot-tri{
  position:absolute;top:0;bottom:0;width:min(24%,320px);pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
}
.foot-tri.left{left:0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.foot-tri.right{right:0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}

.foot-grid{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(30px,5vw,70px);align-items:center;
  padding-bottom:clamp(46px,7vw,90px);
}
.foot-nav ul{display:flex;flex-direction:column;gap:20px}
.foot-nav a{
  font-family:var(--f-head);font-weight:700;font-size:.88rem;
  letter-spacing:.22em;text-transform:uppercase;color:#9c9c9c;
}
.foot-nav a:hover{color:var(--yellow)}

.foot-logo{display:flex;flex-direction:column;align-items:center;justify-self:center}
.foot-logo .logo-mark{font-size:3rem}
.foot-logo .logo-sub{letter-spacing:.5em;font-size:.5rem}

.foot-social{justify-self:end;text-align:right}
.foot-social h2{
  font-family:var(--f-head);font-weight:700;font-size:.88rem;
  letter-spacing:.22em;text-transform:uppercase;color:#9c9c9c;margin-bottom:20px;
}
.foot-social ul{display:flex;gap:10px;justify-content:flex-end}
.foot-social a{
  width:34px;height:34px;border-radius:7px;
  border:1px solid rgba(255,255,255,.22);
  display:grid;place-content:center;color:#e6e6e6;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.foot-social a:hover{background:var(--yellow);border-color:var(--yellow);color:#151515}
.foot-social svg{width:17px;height:17px}

.foot-base{
  position:relative;
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--dim);font-size:.86rem;
}
.foot-base a:hover{color:var(--yellow)}

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.to-top{
  position:fixed;right:22px;bottom:96px;z-index:80;
  width:52px;height:52px;
  background:#3a3a3a;border:1px solid rgba(255,255,255,.16);
  display:grid;place-content:center;
  font-family:var(--f-head);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#e2e2e2;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease,background .18s ease;
}
.to-top::before{
  content:"";position:absolute;top:-14px;left:50%;
  width:1px;height:14px;background:rgba(255,255,255,.35);
}
.to-top.is-on{opacity:1;visibility:visible}
.to-top:hover{background:var(--yellow);color:#151515}

.wa{
  position:fixed;right:22px;bottom:24px;z-index:80;
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;
  display:grid;place-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s ease;
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:32px;height:32px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1260px){
  .nav-desktop{display:none}
}
@media (max-width:1000px){
  :root{--hh:88px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .col-b{margin-top:0}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr;gap:30px}
  .proj-track{grid-auto-columns:calc((100% - 18px) / 2)}
  .ig-strip{grid-template-columns:repeat(4,1fr)}
  .ig-cta{grid-column:span 4}
  .ig-cta a{flex-direction:row}
  .teamintro-grid{grid-template-columns:1fr;gap:26px}
  .teamintro-grid .ph{max-height:340px;width:100%}
  .foot-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:38px}
  .foot-nav ul{align-items:center}
  .foot-social{justify-self:center;text-align:center}
  .foot-social ul{justify-content:center}
  .quote-mark{left:auto;right:4%}
}
@media (max-width:720px){
  .btn-appoint{display:none}
  .header-divider{display:none}
  .svc-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:22px}
  .row-2{grid-template-columns:1fr}
  .proj-track{grid-auto-columns:100%}
  .proj-arrow{display:none}
  .ig-strip{grid-template-columns:repeat(2,1fr)}
  .ig-cta{grid-column:span 2}
  .cov{width:clamp(180px,58vw,300px);margin-left:calc(clamp(180px,58vw,300px) / -2)}
  .cov[data-pos="-2"],.cov[data-pos="2"]{opacity:0;pointer-events:none}
  .cov[data-pos="-1"]{transform:translateX(-62%) translateZ(-90px) rotateY(24deg) scale(.86)}
  .cov[data-pos="1"]{transform:translateX(62%) translateZ(-90px) rotateY(-24deg) scale(.86)}
  .quote-mark{display:none}
  .qs footer{flex-wrap:wrap}
  .foot-base{justify-content:center;text-align:center}
}
@media (max-width:430px){
  .stats{grid-template-columns:1fr}
}
@media (max-width:720px){
  .map-wrap{aspect-ratio:4/5}
  .faq-q{font-size:.94rem;padding:1em 1.2em}
  .areas-served{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-row{animation:none}
  .drone-track{animation:none}
  .partner-track{animation:none}
}

/* =========================================================
   BLOG PAGE
   ========================================================= */
.crumbs{padding-top:22px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--dim)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li:not(:last-child)::after{content:"/";color:var(--dim);opacity:.6}
.crumbs a:hover{color:var(--yellow)}
.crumbs li[aria-current="page"]{color:#d6d6d6}

.page-hero{position:relative;overflow:hidden;padding-block:clamp(58px,8vw,110px);text-align:center;isolation:isolate}
.page-hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 80% at 22% 40%, #2a1030 0%, transparent 62%),
    radial-gradient(55% 70% at 78% 30%, #251043 0%, transparent 60%),
    linear-gradient(180deg,#180d1e 0%, #16101a 100%);
}
/* same cinematic vignette as the homepage hero */
.page-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 30%, transparent 45%, rgba(0,0,0,.5) 100%);
}
.page-hero .wrap{position:relative}
.page-h{
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;margin:22px 0 0;
}
.page-h em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-sub{margin:20px auto 0;max-width:56ch;color:#dcdcdc;font-size:clamp(1rem,1.4vw,1.16rem)}

.sec-posts{background:var(--bg-1)}
.posts-note{
  color:var(--yellow);font-size:.92rem;margin-bottom:30px;
  border-left:3px solid var(--yellow);padding-left:14px;max-width:70ch;
}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
.post a{display:block;background:var(--bg-2);border-radius:14px;overflow:hidden;height:100%;
  transition:transform .2s ease, background .2s ease}
.post a:hover{background:var(--bg-3);transform:translateY(-3px)}
.ph-post{display:block;aspect-ratio:16/10}
.ph-o1{background-image:linear-gradient(150deg,#4c3a4a,#161318)}
.ph-o2{background-image:linear-gradient(150deg,#4a4030,#171410)}
.ph-o3{background-image:linear-gradient(150deg,#2f4440,#131716)}
.post-body{display:block;padding:22px 24px 28px}
.post-body time{display:block;color:var(--yellow);font-size:.8rem;font-weight:600;letter-spacing:.04em}
.post-body h2{font-size:1.24rem;font-weight:600;margin:10px 0 10px;letter-spacing:-.02em}
.post-body p{color:var(--muted);font-size:.96rem;line-height:1.65}

@media (max-width:1000px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .post-grid{grid-template-columns:1fr} }

/* the services grid now runs 8 tiles instead of 6 */
@media (min-width:1001px){ .svc-grid{grid-template-columns:repeat(4,1fr)} }
.svc{display:flex;flex-direction:column}
.svc p{flex:1 0 auto}
.svc-more{
  display:inline-block;margin-top:14px;
  font-family:var(--f-head);font-weight:600;font-size:.86rem;color:var(--yellow);
}
.svc-more:hover{text-decoration:underline}

/* =========================================================
   CTA BANNER — reused across every page
   ========================================================= */
.cta-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#241026 0%,#1c1030 55%,#12141f 100%);
  padding-block:clamp(44px,6vw,70px);
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 140% at 85% 30%, rgba(169,210,44,.16) 0%, transparent 65%),
             radial-gradient(50% 120% at 10% 80%, rgba(255,192,29,.14) 0%, transparent 65%);
  pointer-events:none;
}
.cta-banner-inner{
  position:relative;display:flex;flex-wrap:wrap;gap:28px;
  align-items:center;justify-content:space-between;
}
.cta-banner-inner h2{
  font-size:clamp(1.5rem,3vw,2.15rem);max-width:22ch;margin-top:16px;letter-spacing:-.02em;
}
.cta-banner-actions{display:flex;flex-wrap:wrap;gap:14px}
.btn-ghost{
  display:inline-block;
  font-family:var(--f-head);font-weight:600;font-size:.92rem;color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;
  padding:.85em 2em;transition:border-color .18s ease,background .18s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* cross-link strip between pages */
.sec-crosslink{padding-block:clamp(30px,4vw,44px);background:var(--bg-1)}
.crosslink-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding-top:clamp(26px,4vw,34px);
}
.crosslink-row p{color:var(--muted);font-family:var(--f-head);font-weight:500}

/* =========================================================
   SERVICES PAGE — alternating detail rows
   ========================================================= */
.sec-svcrows{background:var(--bg-1)}
.svc-rows{display:flex;flex-direction:column;gap:clamp(56px,8vw,96px)}
.svc-row{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);
  align-items:center;
}
.svc-row--rev{grid-template-columns:1.15fr .85fr}
.svc-row--rev .svc-row-media{order:2}
.svc-row--rev .svc-row-copy{order:1}

.svc-icon-frame{
  position:relative;aspect-ratio:1;max-width:340px;margin-inline:auto;
  background:linear-gradient(150deg,#242424,#141414);
  border:1px solid var(--line);border-radius:22px;
  display:grid;place-content:center;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.svc-icon-frame::before{
  content:"";position:absolute;inset:18%;
  background:radial-gradient(closest-side, rgba(255,192,29,.16), transparent 75%);
  pointer-events:none;
}
.svc-icon-frame svg{
  position:relative;width:56%;height:56%;
  fill:none;stroke:var(--yellow);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.svc-icon-tag{
  position:absolute;top:16px;left:16px;
  font-family:var(--f-head);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  color:#151515;background:var(--yellow);
  padding:.3em .8em;border-radius:999px;
}
.svc-row-copy h2{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:16px 0 14px;letter-spacing:-.02em}
.svc-row-copy > p{color:var(--muted);line-height:1.7;max-width:52ch;margin-bottom:20px}
.svc-bullets{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.svc-bullets li{
  position:relative;padding-left:30px;
  font-family:var(--f-head);font-weight:500;font-size:.96rem;color:#ededed;
}
.svc-bullets li::before{
  content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  background-color:var(--yellow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='%23151515' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px 13px;background-repeat:no-repeat;background-position:center;
}

@media (max-width:860px){
  .svc-row, .svc-row--rev{grid-template-columns:1fr}
  .svc-row-media, .svc-row--rev .svc-row-media{order:1}
  .svc-row-copy, .svc-row--rev .svc-row-copy{order:2}
  .svc-icon-frame{max-width:240px}
}

/* =========================================================
   LOCATIONS PAGE
   ========================================================= */
.sec-locations{background:var(--bg-1)}
.loc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,32px);margin-bottom:clamp(44px,6vw,64px);
}
.loc-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,3vw,34px);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.loc-card:hover{box-shadow:0 22px 46px rgba(0,0,0,.4);border-color:rgba(255,192,29,.35)}
.loc-ico{
  display:grid;place-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--yellow);color:#151515;margin-bottom:18px;
}
.loc-ico svg{width:24px;height:24px}
.loc-card h2{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.loc-card p{color:var(--muted);line-height:1.65;font-size:.96rem;margin-bottom:16px}
.loc-tags{display:flex;flex-wrap:wrap;gap:8px}
.loc-tags li{
  font-family:var(--f-head);font-size:.74rem;font-weight:600;color:#e6e6e6;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:.35em .85em;border-radius:999px;
}
.map-wrap--wide{aspect-ratio:21/6}

@media (max-width:1000px){ .loc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .loc-grid{grid-template-columns:1fr} .map-wrap--wide{aspect-ratio:4/5} }

/* =========================================================
   ANIMATION LAYER
   Deliberately nothing in here hides content. Every reveal's
   start state (opacity:0 and friends) is written by GSAP at
   runtime, only after it has confirmed it loaded. If the CDN
   is unreachable the whole layer is inert and the page just
   renders normally — a blank white screen is a far worse
   failure than a missing animation.
   ========================================================= */

/* per-word mask used by the heading splitter in js/anim.js.
   The padding/margin pair stops overflow:hidden from shaving
   the descenders off g, y, p and q. Perspective + backface-hidden
   let anim.js flip each word in on a 3D rotateX instead of a flat rise. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;perspective:600px}
.w-i{display:inline-block;backface-visibility:hidden}

/* cards anim.js gives a mouse-driven 3D tilt to — hinting the
   browser up front keeps the effect from ever looking choppy */
.svc,.member,.proj-card,.partner,.info{will-change:transform}

/* soft light pooling under the hero coverflow for extra depth —
   pure CSS, no JS, sits behind the cards */
.cover::before{
  content:"";position:absolute;left:50%;bottom:-6%;
  width:min(560px,70%);height:70px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,192,29,.28), transparent 75%);
  filter:blur(6px);pointer-events:none;z-index:0;
}

/* ambient glow that follows the pointer — created only on
   hover-capable devices, see js/anim.js */
.cursor-glow{
  position:fixed;top:0;left:0;z-index:1;
  width:380px;height:380px;margin:-190px 0 0 -190px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,192,29,.16), rgba(169,210,44,.05) 55%, transparent 75%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .5s ease;
}
.cursor-glow.is-on{opacity:1}

/* scroll progress bar — the element is created in JS, so it
   never exists unless it can actually be driven */
.scroll-prog{
  position:fixed;top:0;left:0;z-index:120;
  width:100%;height:3px;
  background:var(--grad);
  transform-origin:0 50%;
  pointer-events:none;
}

/* Card hover. GSAP owns the lift (transform); these are the
   properties it should keep its hands off. */
.svc,.member,.info,.proj-card,.partner{
  transition:box-shadow .32s ease, background-color .32s ease, border-color .32s ease;
}
.svc:hover{box-shadow:0 22px 48px rgba(0,0,0,.42)}
.member:hover{box-shadow:0 20px 42px rgba(0,0,0,.45)}
.partner:hover{box-shadow:0 18px 36px rgba(0,0,0,.35)}
.proj-card:hover{box-shadow:0 24px 50px rgba(0,0,0,.5)}

/* the yellow underline sweep on desktop nav gets a touch more life */
.nav-desktop a::after{transition:right .34s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  .scroll-prog{display:none}
  .w{overflow:visible;padding-bottom:0;margin-bottom:0}
  .cursor-glow{display:none}
}