/* =========================================================
   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;
  /* transform is deliberately NOT transitioned here. GSAP animates this
     button's x on the services rows and its scale on hover, and a CSS
     transition on the same property makes the browser report a
     mid-transition value back to GSAP when it records a from-tween's
     end point — which is what used to leave "Get a quote" parked 40px
     to the left of its column. One owner per property. */
  transition:background .18s ease, box-shadow .25s ease;
}
.btn-solid:hover{background:#ffcf4d}

/* 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:box-shadow .2s ease;   /* transform: see .btn-solid note */
}
.wa:hover{box-shadow:0 12px 30px rgba(0,0,0,.5)}
.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-row-media{--frame-w:340px}
.svc-icon-frame{
  position:relative;aspect-ratio:1;margin-inline:auto;
  /* --frame-w is set on .svc-row-media and narrowed at the stacking
     breakpoint; .svc-row-tags reads the same value so the chips always
     start exactly where the frame starts */
  max-width:var(--frame-w,340px);
  background:linear-gradient(150deg,#242424,#141414);
  border:1px solid var(--line);border-radius:22px;
  /* place-ITEMS, not place-content: with place-content the single grid
     track shrinks to its content, so the icon's percentage width had
     nothing definite to resolve against and collapsed to the SVG's
     intrinsic 300x150 — a big empty box with a tiny mark in it.
     A 1fr track gives the percentage something to measure. */
  display:grid;grid-template:1fr / 1fr;place-items: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:auto;aspect-ratio:1;
  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-row-media{--frame-w: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}
}

/* =========================================================
   REFERENCE-MATCHED INTERACTIONS
   (added to match the two screen recordings)

   Three effects live here, all of them purely additive:
     A. pointer-tracked spotlight panel on the card grids
     B. cursor ring + yellow comet trail
     C. Instagram strip as a running marquee

   B and C only ever appear once js/anim.js has created /
   class-flagged them, so a visitor without JS, or one with
   prefers-reduced-motion, keeps the plain static layout.
   ========================================================= */

/* ---------------------------------------------------------
   A. Card spotlight

   The lighter panel behind a hovered card is an inset-negative
   ::before rather than a background on the card itself, so it
   can bleed past the text block the way the reference does
   without touching the grid's own spacing. --mx/--my are fed
   from the existing mousemove handler in anim.js; the fallback
   values keep the gradient centred on a keyboard-focused card,
   where there is no pointer to track.
   --------------------------------------------------------- */
/* isolation:isolate is what keeps the z-index:-1 panel inside the
   card — without it the negative layer would slide behind the
   section's own background and never be seen. */
.svc,.member,.info{position:relative;isolation:isolate;--mx:50%;--my:30%}

.svc::before,.member::before,.info::before{
  content:"";position:absolute;inset:-22px -24px;
  border-radius:18px;pointer-events:none;z-index:-1;
  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(255,192,29,.13), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  opacity:0;transition:opacity .38s ease;
}
.svc:hover::before,.svc:focus-within::before,
.member:hover::before,.member:focus-within::before,
.info:hover::before,.info:focus-within::before{opacity:1}

/* the beam that snaps across the card's top edge on hover —
   a 1px line plus its own bloom, drawn from the centre out */
.svc::after,.member::after,.info::after{
  content:"";position:absolute;left:-24px;right:-24px;top:-22px;height:1px;
  pointer-events:none;z-index:-1;
  background:var(--grad);
  box-shadow:0 0 18px 2px rgba(255,192,29,.35);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.svc:hover::after,.svc:focus-within::after,
.member:hover::after,.member:focus-within::after,
.info:hover::after,.info:focus-within::after{transform:scaleX(1)}

/* heading underline sweeps out from the left under the hovered
   card's title, exactly as in the first recording */
.svc h3::after{
  content:"";display:block;height:1px;margin-top:12px;
  background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.svc:hover h3::after,.svc:focus-within h3::after{transform:scaleX(1)}

/* icon warms up without a transform — anim.js owns .svc-ico's
   transform for the reveal swing, so this stays off that lane */
.svc-ico{transition:filter .35s ease, color .35s ease}
.svc:hover .svc-ico{filter:drop-shadow(0 0 14px rgba(255,192,29,.45))}

/* ---------------------------------------------------------
   B. Cursor ring + comet trail

   Both elements are created in anim.js on pointer-fine devices
   only. The canvas sits under the ring and above the ambient
   .cursor-glow; neither ever takes pointer events, so the
   native cursor and every hover state below keep working.
   --------------------------------------------------------- */
.cursor-trail{
  position:fixed;inset:0;z-index:118;
  pointer-events:none;
  opacity:0;transition:opacity .45s ease;
}
.cursor-trail.is-on{opacity:1}

.cursor-ring{
  position:fixed;top:0;left:0;z-index:119;
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border:1px solid rgba(255,192,29,.6);border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease, background-color .3s ease,
             border-color .3s ease, transform .3s ease;
}
.cursor-ring.is-on{opacity:1}
/* over anything clickable the ring blooms and fills faintly */
.cursor-ring.is-hot{
  border-color:rgba(255,192,29,.95);
  background:rgba(255,192,29,.10);
  transform:scale(1.5);
}

/* ---------------------------------------------------------
   C. Instagram marquee

   .is-marquee is set by anim.js, which also lifts the yellow
   CTA tile out of the list into .ig-cta-float so it can stay
   parked in the centre while the photos run behind it. Without
   that class the 7-up grid above is untouched.
   --------------------------------------------------------- */
.ig.is-marquee{position:relative;overflow:hidden}
.ig.is-marquee .ig-strip{
  display:flex;grid-template-columns:none;width:max-content;
  will-change:transform;
}
.ig.is-marquee .ig-strip > li{flex:0 0 auto;width:clamp(150px,16vw,240px)}
.ig.is-marquee .ig-cta-float{
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%);
  width:min(300px,40vw);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
/* the floating tile is narrow at every width, so it keeps the
   stacked icon-over-text layout — the row variant further up is
   for the tile while it still spanned columns in the grid */
.ig.is-marquee .ig-cta-float a{padding:22px 18px;flex-direction:column}
@media (max-width:720px){
  .ig.is-marquee .ig-cta-float{width:min(220px,58vw)}
  .ig.is-marquee .ig-cta-float a{font-size:.76rem;padding:18px 14px}
}

@media (prefers-reduced-motion:reduce){
  .cursor-ring,.cursor-trail{display:none}
  .svc h3::after,
  .svc::after,.member::after,.info::after{transition:none}
}

/* =========================================================
   BUTTON MOTION  (spring press/hover, driven from anim.js)

   Every button's transform belongs to GSAP now — see the note
   on .btn-solid. What's left here is the paint-only part: the
   gloss that sweeps across a solid button on hover, and the
   will-change hints.
   ========================================================= */
.btn-solid,.btn-ghost,.btn-appoint,.icon-btn,.viewmore,.wa,.to-top{
  will-change:transform;
}

/* the sheen lives on a pseudo-element, which GSAP never touches,
   so it can keep its own transition without fighting anything */
.btn-solid{position:relative;overflow:hidden;isolation:isolate}
.btn-solid > *{position:relative;z-index:1}
.btn-solid::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;
  width:45%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg) translateX(0);
  transition:none;
}
.btn-solid:hover::after{
  transform:skewX(-18deg) translateX(360%);
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:reduce){
  .btn-solid::after{display:none}
}

/* =========================================================
   NAV DROPDOWNS  (Services / Locations sub-pages)

   Desktop: the panel opens on hover and on focus-within, so a
   mouse and the Tab key both reach it with no JS at all. The
   chevron button is there for touch and for anyone who'd
   rather click — js/main.js toggles .is-open on the <li>, and
   that class is simply a third way into the same rules.

   Mobile: the drawer uses <details>/<summary>, which needs no
   script and keeps the whole tree reachable on a phone.
   ========================================================= */
.nav-desktop .has-sub{position:relative}
.nav-desktop .has-sub > a{padding-right:2px}

/* the parent of the page you're on reads as "active section" —
   the underline sits at half strength so it never competes with
   the aria-current page itself */
.nav-desktop a.is-section::after{right:0;opacity:.5}

.sub-toggle{
  display:inline-grid;place-content:center;
  width:18px;height:18px;margin-left:2px;color:#cfcfcf;
  vertical-align:middle;
  transition:color .18s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.sub-toggle svg{width:12px;height:12px}
.has-sub:hover .sub-toggle,
.has-sub:focus-within .sub-toggle,
.has-sub.is-open .sub-toggle{color:var(--yellow);transform:rotate(180deg)}

/* scoped to .nav-desktop on purpose: `.nav-desktop ul` sets the
   horizontal flex gap for the top-level row and outranks a bare
   `.subnav`, which would leave 23px of air between sub-items. */
.nav-desktop .subnav{
  position:absolute;top:calc(100% + 14px);left:-18px;z-index:60;
  display:flex;flex-direction:column;gap:0;
  min-width:268px;padding:10px;
  background:#1f1f1f;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 54px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .28s;
}
/* an invisible bridge across the gap, so the pointer can travel
   from the nav item to the panel without it closing underneath */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}

.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.has-sub.is-open .subnav{opacity:1;visibility:visible;transform:translateY(0)}

.subnav li{white-space:nowrap}
.subnav a{
  display:block;padding:.62em .8em;border-radius:9px;
  font-size:.74rem;letter-spacing:.05em;color:#dedede;
  transition:background .18s ease, color .18s ease;
}
.subnav a::after{display:none}          /* the nav underline would look wrong here */
.subnav a:hover{background:rgba(255,255,255,.07);color:var(--yellow)}
.subnav a[aria-current="page"]{color:var(--yellow);background:rgba(255,192,29,.10)}
.subnav-all{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.subnav-all a{color:var(--yellow);font-weight:600}

/* ---------- the same tree inside the mobile drawer ---------- */
.drawer-group details summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  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;
  cursor:pointer;list-style:none;
}
.drawer-group details summary::-webkit-details-marker{display:none}
.drawer-group summary svg{width:13px;height:13px;color:var(--yellow);transition:transform .28s ease}
.drawer-group details[open] summary svg{transform:rotate(180deg)}
.drawer-group details[open] summary{color:var(--yellow)}
.drawer-group details > ul{padding:4px 0 10px 14px;border-left:1px solid var(--line);margin-left:2px}
.drawer-group details a{
  padding:.5em 0;border-bottom:0;text-transform:none;letter-spacing:.01em;
  font-size:.82rem;font-weight:500;color:#cfcfcf;
}
.drawer-group details a[aria-current="page"]{color:var(--yellow)}

/* =========================================================
   DETAIL-PAGE COMPONENTS
   (process steps, coverage chips, and the smaller trims the
   service/location pages need)
   ========================================================= */
.sec-process{background:var(--bg-1)}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,28px);
  counter-reset:step;
}
.step{
  position:relative;
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.6vw,30px);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.step:hover{border-color:rgba(255,192,29,.35);box-shadow:0 20px 42px rgba(0,0,0,.38)}
.step-n{
  display:grid;place-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--yellow);color:#151515;
  font-family:var(--f-head);font-weight:700;font-size:.96rem;
  margin-bottom:16px;
}
.step h3{font-size:1.06rem;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:.94rem;line-height:1.62}
/* the connecting hairline between steps, desktop only */
.step:not(:last-child)::after{
  content:"";position:absolute;top:40px;right:calc(-1 * clamp(18px,2.4vw,28px));
  width:clamp(18px,2.4vw,28px);height:1px;background:var(--line);
}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after{display:none}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

.sec-areas{background:var(--bg-2)}
.area-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.area-chips li{
  font-family:var(--f-head);font-size:.86rem;font-weight:500;color:#e8e8e8;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:999px;padding:.6em 1.25em;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.area-chips li:hover{border-color:rgba(255,192,29,.5);background:rgba(255,255,255,.09);color:var(--yellow)}

.sec-related{padding-block:clamp(26px,3.5vw,40px)}
.sec-related .areas-served{margin-top:0;border-top:0;padding-top:0}

/* a 3-up deliverables grid — the services hub runs 4-up, these pages 3 */
@media (min-width:1001px){ .svc-grid--3{grid-template-columns:repeat(3,1fr)} }

/* Tags under the icon / map in a detail page's opening row.

   The icon frame is min(column, 340px) and centred in its column, so
   the tag row has to carry the same constraint or it starts at the
   column edge while the frame starts further in — which is exactly
   what left them misaligned. Same expression, same centring, so the
   two line up at every width.

   A location page's opening row uses a map instead, and that spans
   the full column — so the tag row drops the cap when it follows one. */
.svc-row-tags{
  margin:20px auto 0;
  width:100%;max-width:var(--frame-w,340px);
  justify-content:flex-start;
}
.map-wrap--tall + .svc-row-tags{max-width:none}
.map-wrap--tall{margin-top:0;aspect-ratio:4/3}
@media (max-width:860px){ .map-wrap--tall{aspect-ratio:16/10} }

/* =========================================================
   DETAIL-ROW ALIGNMENT FIXES
   ========================================================= */

/* Two buttons of different font sizes sitting next to each other as
   inline-blocks align on their text baseline, which left the ghost
   button 24px lower than the solid one. A flex row aligns the boxes
   instead of the text. */
.svc-row-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;margin-top:4px;
}
/* matching the ghost button's font size to the solid one makes the two
   boxes exactly the same height, since both use .85em vertical padding */
.svc-row-actions .btn-ghost{
  font-size:1rem;
  padding-block:calc(.85em - 1px);   /* less its 1px border, top and bottom */
}

/* The reveal tweens on these rows come in from ±60px horizontally, and
   when a row is parked in its start state (scrolled past, waiting to
   replay) that offset counted toward the page width — enough to push a
   horizontal overflow at ~1000px wide. `clip` contains it without
   creating a scroll container or affecting position:sticky. */
.sec-svcrows{overflow-x:clip}

/* =========================================================
   TOPICAL DEPTH BLOCKS
   Audience grid, price-factor list, related-reading cards and
   the long-form article layout the blog posts use.
   ========================================================= */
.sec-aud{background:var(--bg-2)}
.aud-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,28px);
}
.aud{
  background:var(--bg-1);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.6vw,30px);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.aud:hover{border-color:rgba(255,192,29,.32);box-shadow:0 18px 40px rgba(0,0,0,.34)}
.aud h3{font-size:1.06rem;font-weight:600;margin-bottom:10px;letter-spacing:-.01em;color:var(--yellow)}
.aud p{color:var(--muted);font-size:.95rem;line-height:1.65}
@media (max-width:720px){ .aud-grid{grid-template-columns:1fr} }

.sec-factors{background:var(--bg-1)}
.factor-list{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px 30px;max-width:1000px;margin-inline:auto;
}
.factor-list li{
  position:relative;padding-left:26px;
  color:#e2e2e2;font-size:.97rem;line-height:1.6;
}
.factor-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:2px;
  background:var(--grad);transform:rotate(45deg);
}
.factor-list b{color:#fff;font-weight:600}
@media (max-width:720px){ .factor-list{grid-template-columns:1fr} }

.sec-reading{background:var(--bg-2)}
.post-grid--2{grid-template-columns:repeat(2,1fr);max-width:880px;margin-inline:auto}
@media (max-width:720px){ .post-grid--2{grid-template-columns:1fr} }
.post-body h3{
  font-size:1.18rem;font-weight:600;margin:10px 0;letter-spacing:-.02em;
  font-family:var(--f-head);
}
.post-more{
  display:block;margin-top:14px;
  font-family:var(--f-head);font-weight:600;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);
}

/* =========================================================
   ARTICLE  (blog posts)
   One measure, generous leading — this is the only place on the
   site with long-form reading, so it gets its own rhythm.
   ========================================================= */
/* A post title needs a shorter measure than a page heading, but capping the
   width without re-centring the block leaves it hugging the left of the wrap
   while its text centres inside itself — which is what knocked the blog
   headings out of line with the pill and the standfirst above and below. */
.page-hero--post .page-h{max-width:26ch;margin-inline:auto}
.post-meta{
  margin-top:18px;font-family:var(--f-head);font-size:.84rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
}
.sec-article{background:var(--bg-1);padding-block:clamp(48px,6vw,84px)}
.article{max-width:68ch;margin-inline:auto}
.article > * + *{margin-top:1.15em}
.article p{color:#dadada;font-size:1.04rem;line-height:1.78}
.article h2{
  font-size:clamp(1.3rem,2.4vw,1.62rem);letter-spacing:-.02em;
  margin-top:2.1em;padding-top:.9em;border-top:1px solid var(--line);
}
.article h3{font-size:1.12rem;font-weight:600;margin-top:1.7em;letter-spacing:-.01em}
.article-list{display:flex;flex-direction:column;gap:12px}
.article-list li{
  position:relative;padding-left:30px;
  color:#dadada;font-size:1.01rem;line-height:1.7;
}
.article ul.article-list li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--yellow);
}
.article ol.article-list{counter-reset:a}
.article ol.article-list li{counter-increment:a;padding-left:36px}
.article ol.article-list li::before{
  content:counter(a);position:absolute;left:0;top:.05em;
  width:24px;height:24px;display:grid;place-content:center;
  font-family:var(--f-head);font-size:.78rem;font-weight:700;
  color:#151515;background:var(--yellow);border-radius:50%;
}
.article b{color:#fff;font-weight:600}
.article .pull{
  margin:1.8em 0;padding:22px 26px;
  border:0;border-left:3px solid var(--yellow);
  background:rgba(255,255,255,.04);border-radius:0 14px 14px 0;
  font-family:var(--f-head);font-weight:500;font-size:1.12rem;line-height:1.55;
  color:#fff;
}
.article a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   ANSWER BOX
   Sits at the top of every blog post, above the intro, so the
   question that brought the reader here is answered before
   anything else — and so a featured snippet has something
   clean to lift.
   ========================================================= */
.answer-box{
  background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:0 16px 16px 0;
  padding:clamp(22px,2.6vw,30px);
  margin-bottom:2em;
}
.answer-label{
  font-family:var(--f-head);font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
  margin-bottom:12px;
}
.answer-lead{
  font-size:1.1rem;line-height:1.62;color:#fff;font-weight:500;
  font-family:var(--f-head);letter-spacing:-.01em;
}
.answer-list{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.answer-list li{
  position:relative;padding-left:26px;
  color:var(--muted);font-size:.96rem;line-height:1.6;
}
.answer-list li::before{
  content:"";position:absolute;left:2px;top:.6em;
  width:9px;height:9px;border-radius:2px;
  background:var(--grad);transform:rotate(45deg);
}
.answer-box .answer-lead + .answer-list{border-top:1px solid var(--line);padding-top:16px}

/* =========================================================
   IMAGE SLOTS  (blog posts)

   Placeholders are meant to look unfinished — dashed edge, the
   brief printed inside, the target filename in monospace — so
   an empty slot is obvious in review and can't quietly ship.
   Swapping in a real <img> needs no CSS change: the figure and
   caption stay, only the inner block is replaced.
   ========================================================= */
.fig{margin:2.2em 0}
.fig img{width:100%;height:auto;display:block;border-radius:16px;object-fit:cover}
.fig--wide img,.fig--wide .fig-ph{aspect-ratio:16/9}
.fig--tall img,.fig--tall .fig-ph{aspect-ratio:4/3}
.fig--square img,.fig--square .fig-ph{aspect-ratio:1}

/* Written as `.fig .fig-ph` and holding every property it needs, because a
   shared `.fig img, .fig .fig-ph` rule setting display:block outranked a bare
   `.fig-ph{display:flex}` further down and collapsed the stack into one line. */
.fig .fig-ph{
  width:100%;border-radius:16px;
  /* a placeholder shouldn't dominate the page the way a real photo can —
     the aspect ratio above still governs the <img> that replaces it */
  max-height:min(58vh,440px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:clamp(20px,3vw,34px);text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,192,29,.07), transparent 70%),
    linear-gradient(160deg,#1d1d1d,#141414);
  border:1px dashed rgba(255,192,29,.42);
}
.fig-ph-tag{
  font-family:var(--f-head);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);
}
.fig-ph-brief{
  color:#d2d2d2;font-size:.95rem;line-height:1.6;max-width:52ch;
}
.fig-ph-file{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:6px;padding:.35em .7em;word-break:break-all;
}
.fig figcaption{
  margin-top:12px;color:var(--dim);font-size:.88rem;line-height:1.55;
  text-align:center;padding-inline:10px;
}
@media (max-width:560px){
  .fig-ph{gap:10px}
  .fig-ph-brief{font-size:.9rem}
}

/* =========================================================
   INSTAGRAM REELS  (projects.html)

   Two states in one section. The strip is plain HTML and always
   works; when js/reels.js manages to mount the Framer carousel
   it adds .is-upgraded and the strip steps aside. Neither state
   is ever half-visible.
   ========================================================= */
.sec-reels{background:var(--bg-2);position:relative}
.reels-carousel{min-height:clamp(420px,52vw,620px)}
.sec-reels.is-upgraded .reels-strip{display:none}

.reels-strip{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.6vw,20px);
}
@media (max-width:1100px){ .reels-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){
  /* a horizontal rail reads better than a 2-up grid of 9:16 cards */
  .reels-strip{
    grid-template-columns:none;
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .reels-strip > .reel{flex:0 0 62%;scroll-snap-align:start}
}

.reel{position:relative}
.reel > a{display:block;color:inherit}
.reel-media{
  position:relative;display:block;
  aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#232323,#141414);
  border:1px solid var(--line);
  transition:border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.reel > a:hover .reel-media{
  border-color:rgba(255,192,29,.45);
  box-shadow:0 22px 44px rgba(0,0,0,.45);
  transform:translateY(-4px);
}
.reel-media img{width:100%;height:100%;object-fit:cover;display:block}

/* placeholder, same convention as the blog image slots */
.reel-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:16px;text-align:center;
  border:1px dashed rgba(255,192,29,.38);border-radius:14px;
}
.reel-ph-tag{
  font-family:var(--f-head);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
}
.reel-ph-file{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.66rem;color:var(--dim);word-break:break-all;line-height:1.5;
}

.reel-play{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background .25s ease, color .25s ease;
}
.reel-play svg{width:14px;height:14px;margin-left:2px}
.reel > a:hover .reel-play{background:var(--yellow);color:#151515;border-color:var(--yellow)}

.reel-meta{display:block;margin-top:12px}
.reel-title{
  display:block;font-family:var(--f-head);font-weight:600;font-size:.92rem;
  letter-spacing:-.01em;color:#fff;
}
.reel-desc{
  display:block;margin-top:4px;color:var(--dim);font-size:.82rem;line-height:1.5;
}
@media (max-width:1100px){ .reel-desc{display:none} }