/* styles.css */

/* ---------- FONT FACES ----------
   Add the licensed Pangram Pangram “PP Monument Extended” files to:
   /assets/fonts/pp-monument-extended/
   The family name below matches common usage so it wires up cleanly.
---------------------------------- */
@font-face{
  font-family: "PP Monument Extended";
  src: url("assets/fonts/pp-monument-extended/PPMonumentExtended-Black.woff2") format("woff2"),
       url("assets/fonts/pp-monument-extended/PPMonumentExtended-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  font-stretch: 100%;
}
@font-face{
  font-family: "PP Monument Extended";
  src: url("assets/fonts/pp-monument-extended/PPMonumentExtended-Regular.woff2") format("woff2"),
       url("assets/fonts/pp-monument-extended/PPMonumentExtended-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-stretch: 100%;
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background:#0b0b0b;
  color:#fff;
  font-family: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* don’t fake bold/italic so the display face looks right */
}
img{ display:block; max-width:100%; height:auto; }
a, button{ font: inherit; }

/* ---------- Theme ---------- */
:root{
  --ink: #0b0b0b;
  --text: #f7f7f7;

  /* BLUE hero palette (as requested) */
  --blue: #2f86ff;
  --blue-strong: #1a60db;

  --headline: clamp(3rem, 10vw + .5rem, 12rem);
  --header-h: 72px;
}

/* ---------- Top bar ---------- */
.bar{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 40;
  background: rgba(11,11,11,.78);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bar[data-elevate].is-scrolled{
  background: rgba(11,11,11,.9);
  border-bottom-color: rgba(255,255,255,.12);
}
.bar__grid{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.bar__left, .bar__right{ display:flex; align-items:center; gap: 1rem; }
.bar__right{ justify-content: flex-end; }
.bar__center{ display:flex; justify-content:center; }

/* Brand — uses PP Monument Extended (display) */
.brand{
  text-decoration:none; color:var(--text); line-height:1;
}
.brand__word{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em; /* keep tight like the reference */
  font-size: .98rem;
}

/* Nav — bold & confident, in the display face */
.nav{
  display:flex; align-items:center; gap: clamp(.7rem, 2.2vw, 1.4rem);
  margin:0; padding:0; list-style:none;
}
.nav__link{
  text-decoration:none; color:var(--text);
  text-transform: uppercase;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 1rem;
  padding: .15rem .3rem;
  position:relative;
}
.nav__link::after{
  content:""; position:absolute; left:.2rem; right:.2rem; bottom:-6px; height:3px;
  background: currentColor; opacity:0; transform: scaleX(.4); transform-origin:left;
  transition: opacity .2s ease, transform .2s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ opacity:1; transform: scaleX(1); }

.lang{
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999rem; padding: .38rem .6rem;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; letter-spacing:.02em; text-transform: uppercase; cursor: pointer;
}

/* Mobile menu button */
.hamburger{
  display:none;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  background: transparent; cursor: pointer;
}
.hamburger span{ display:block; height:2px; background:#fff; margin:6px 9px; }

/* ---------- Hero (image + blue tint) ---------- */
.hero{
  position: relative;
  min-height: 100dvh;
  background: var(--ink);
  overflow: hidden;
}
.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0; /* sits above section bg */
}
.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(106%) saturate(108%);
}
.hero__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 60% 35%, rgba(47,134,255,.30), transparent),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.82) 65%, rgba(0,0,0,.94) 100%);
}

/* Headline — PP Monument Extended, ultrabold feel */
.hero__content{
  position: relative;
  z-index: 2;
  padding: calc(var(--header-h) + 10vh) clamp(1rem, 4vw, 2rem) 16vh;
  display: grid; align-content: start;
}
.huge{
  margin: 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--headline);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: .01em;
  max-width: 16ch;
  color: var(--blue);
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 42px rgba(47,134,255,.25);
  user-select: none;
}
.huge > span{ display:block; }

/* CTA dock (blue) */
.dock{
  position: fixed; left:0; right:0; bottom:0; z-index: 35;
  background: var(--blue);
  border-top: 2px solid rgba(0,0,0,.18);
  display:flex; justify-content:center;
  padding: .85rem clamp(.75rem, 2vw, 1.25rem) max(.85rem, env(safe-area-inset-bottom));
}
.dock__cta{
  color: #fff; text-decoration: none;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem clamp(1.25rem, 4vw, 3rem);
  border: 2px solid rgba(0,0,0,.1);
  box-shadow: inset 0 -4px 12px rgba(0,0,0,.12);
  display:inline-block;
}
.dock__cta:active{ transform: translateY(1px); }

/* Focus states */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .bar__grid{ grid-template-columns: auto 1fr auto; }
  .hamburger{ display:block; }
  .nav{
    position: fixed; left: .8rem; right: .8rem; top: calc(var(--header-h) + .6rem);
    background: rgba(17,19,24,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .8rem; gap: .4rem; flex-direction: column;
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav__link{ font-size: 1.1rem; padding:.6rem .4rem; }
}/* styles.css */

/* ---------- FONT FACES (place licensed files locally) ---------- */
@font-face{
  font-family: "PP Monument Extended";
  src: url("assets/fonts/pp-monument-extended/PPMonumentExtended-Black.woff2") format("woff2"),
       url("assets/fonts/pp-monument-extended/PPMonumentExtended-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "PP Monument Extended";
  src: url("assets/fonts/pp-monument-extended/PPMonumentExtended-Regular.woff2") format("woff2"),
       url("assets/fonts/pp-monument-extended/PPMonumentExtended-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background:#0b0b0b;
  color:#fff;
  font-family: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img{ display:block; max-width:100%; height:auto; }
a, button{ font: inherit; }

/* ---------- Theme ---------- */
:root{
  --ink: #0b0b0b;
  --text: #f7f7f7;
  --muted: #b7b7b7;

  /* BLUE vibe */
  --blue: #2f86ff;
  --blue-strong: #1a60db;

  --headline: clamp(3rem, 10vw + .5rem, 12rem);
  --section-h2: clamp(2.2rem, 5.6vw, 5rem);
  --header-h: 72px;
}

/* ---------- Top bar ---------- */
.bar{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 40;
  background: rgba(11,11,11,.78);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bar[data-elevate].is-scrolled{
  background: rgba(11,11,11,.9);
  border-bottom-color: rgba(255,255,255,.12);
}
.bar__grid{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.bar__left, .bar__right{ display:flex; align-items:center; gap: 1rem; }
.bar__right{ justify-content: flex-end; }
.bar__center{ display:flex; justify-content:center; }

.brand{ text-decoration:none; color:var(--text); line-height:1; }
.brand__word{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size:.98rem;
}

/* Nav */
.nav{ display:flex; align-items:center; gap: clamp(.7rem, 2.2vw, 1.4rem); margin:0; padding:0; list-style:none; }
.nav__link{
  text-decoration:none; color:var(--text);
  text-transform: uppercase;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; letter-spacing: .02em; font-size: 1rem;
  padding: .15rem .3rem; position:relative;
}
.nav__link::after{
  content:""; position:absolute; left:.2rem; right:.2rem; bottom:-6px; height:3px;
  background: currentColor; opacity:0; transform: scaleX(.4); transform-origin:left;
  transition: opacity .2s ease, transform .2s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ opacity:1; transform: scaleX(1); }

.lang{
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999rem; padding: .38rem .6rem;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; letter-spacing:.02em; text-transform: uppercase; cursor: pointer;
}

/* Mobile menu button */
.hamburger{ display:none; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: transparent; cursor: pointer; }
.hamburger span{ display:block; height:2px; background:#fff; margin:6px 9px; }

/* ---------- Hero (image + blue tint) ---------- */
.hero{
  position: relative; min-height: 100dvh; background: var(--ink); overflow: hidden;
}
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(106%) saturate(108%);
}
.hero__shade{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(80% 60% at 60% 35%, rgba(47,134,255,.30), transparent),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.82) 65%, rgba(0,0,0,.94) 100%);
}
.hero__content{
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + 10vh) clamp(1rem, 4vw, 2rem) 16vh;
  display: grid; align-content: start;
}
.huge{
  margin: 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; font-size: var(--headline); line-height: .86;
  text-transform: uppercase; letter-spacing: .01em; max-width: 16ch;
  color: var(--blue);
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 42px rgba(47,134,255,.25);
  user-select: none;
}
.huge > span{ display:block; }

/* CTA dock */
.dock{
  position: fixed; left:0; right:0; bottom:0; z-index: 35;
  background: var(--blue); border-top: 2px solid rgba(0,0,0,.18);
  display:flex; justify-content:center;
  padding: .85rem clamp(.75rem, 2vw, 1.25rem) max(.85rem, env(safe-area-inset-bottom));
}
.dock__cta{
  color: #fff; text-decoration: none;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem clamp(1.25rem, 4vw, 3rem);
  border: 2px solid rgba(0,0,0,.1); box-shadow: inset 0 -4px 12px rgba(0,0,0,.12);
  display:inline-block;
}
.dock__cta:active{ transform: translateY(1px); }

/* ---------- Layout helpers ---------- */
.section{ scroll-margin-top: calc(var(--header-h) + 12px); }
.wrap{ max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

/* ---------- WHO WE ARE ---------- */
.who{
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: #0d0f14; /* slightly different from hero to separate */
  border-top: 1px solid rgba(255,255,255,.06);
}
.who::before{
  /* thin blue accent line at the very top */
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
}
.who__top{ display:grid; gap: .8rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.who__eyebrow{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.08em; font-size:.8rem; color: var(--muted);
}
.who__title{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; line-height: .98; font-size: var(--section-h2);
  max-width: 22ch;
}
.who__grid{
  display: grid; grid-template-columns: 1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.who__lead{
  margin:0;
  font-size: clamp(1.05rem, 1.2vw + .7rem, 1.35rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 60ch;
}
.who__facts{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow:hidden;
}
.fact{ padding: 1.2rem 1rem; display:grid; gap:.25rem; background: rgba(255,255,255,.02); }
.fact:nth-child(odd){ background: rgba(255,255,255,.04); }
.fact + .fact{ border-left: 1px solid rgba(255,255,255,.08); }
.fact__num{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1;
  letter-spacing:.02em; color: var(--blue);
}
.fact__label{
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing:.12em; font-size:.78rem; color: var(--muted);
}

/* Ticker */
.ticker{
  overflow: hidden; margin-top: clamp(2rem, 6vw, 4rem);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0c0e12;
}
.ticker__track{
  display: inline-flex; align-items:center; gap: 1.5rem;
  padding-block: 1rem; white-space: nowrap;
  animation: ticker 28s linear infinite;
  will-change: transform;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.06em;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
}
.ticker__track span{ color:#fff; }
.ticker__track i{ opacity:.35; font-style: normal; }

@keyframes ticker{
  from{ transform: translateX(0%); }
  to{ transform: translateX(-50%); }
}

/* Reveal-on-scroll (subtle) */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }
.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .15s; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1000px){
  .who__grid{ grid-template-columns: 1fr; }
  .who__facts{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .bar__grid{ grid-template-columns: auto 1fr auto; }
  .hamburger{ display:block; }
  .nav{
    position: fixed; left: .8rem; right: .8rem; top: calc(var(--header-h) + .6rem);
    background: rgba(17,19,24,.96); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    padding: .8rem; gap: .4rem; flex-direction: column;
    transform: translateY(-12px); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  }
  .nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav__link{ font-size: 1.1rem; padding:.6rem .4rem; }
  .who__facts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
  .reveal{ opacity:1; transform:none; }
}

/* Focus states */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
/* ======= ACCESSIBILITY HELPER ======= */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}

/* ======= STRATEGIC GALLERY (keeps the hero's blue, bold vibe) ======= */
.gallery{
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: #0b0e12;
  border-top: 1px solid rgba(255,255,255,.06);
}
.gallery::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
}

.gallery__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; margin-bottom: clamp(1.6rem, 3.6vw, 2.4rem);
}
.gallery__eyebrow{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size:.78rem; color:#b7b7b7;
}

/* GRID: deliberate asymmetry, two rows to feel editorial/director‑led */
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 2vw, 1.1rem);
}

/* Tile base */
.shot{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: #0d0f14;
}
.shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  filter: contrast(106%) saturate(112%);
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.7,0,1);
}
/* subtle blue tint + vignette to keep hero vibe */
.shot::after{
  content:""; position:absolute; inset:0; z-index: 1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 60% 40%, rgba(47,134,255,.24), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.72) 100%);
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
}
.shot:hover img,
.shot:focus-within img{ transform: scale(1.06); }
.shot:hover::after,
.shot:focus-within::after{ opacity: .9; }

/* Caption tag (tight, confident) */
.shot__tag{
  position:absolute; left: .9rem; bottom: .9rem; z-index: 2;
  display:inline-flex;
  padding: .32rem .56rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  backdrop-filter: blur(2px);
}
.shot__tag span{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size: .72rem; color:#fff;
}

/* --- Placement & scale (desktop) --- */
/* Top row: A (wide) + B (tall) */
.shot--a{
  grid-column: 1 / span 7;
  height: clamp(260px, 48vh, 560px);
  /* Favor left focal points (adjust as needed) */
  --pos: 40% 50%;
}
.shot--b{
  grid-column: 8 / span 5;
  height: clamp(260px, 48vh, 560px);
  --pos: 50% 50%;
}
/* Bottom row: C (small counter) + D (wide closer) */
.shot--c{
  grid-column: 1 / span 4;
  height: clamp(200px, 36vh, 440px);
  --pos: 50% 50%;
}
.shot--d{
  grid-column: 5 / -1;
  height: clamp(220px, 42vh, 520px);
  --pos: 50% 50%;
}

/* Apply object-position from variable (tweak per image by overriding --pos) */
.shot img{ object-position: var(--pos); }

/* Reveal-on-scroll hooks you already have */
.delay-3{ transition-delay: .22s; }

/* --- Responsive layouts --- */
@media (max-width: 1100px){
  .gallery__grid{ grid-template-columns: repeat(8, 1fr); }
  .shot--a{ grid-column: 1 / span 5; }
  .shot--b{ grid-column: 6 / span 3; }
  .shot--c{ grid-column: 1 / span 3; }
  .shot--d{ grid-column: 4 / span 5; }
}
@media (max-width: 720px){
  .gallery__grid{ grid-template-columns: 1fr; }
  .shot{ border-radius: 12px; }
  .shot--a,
  .shot--b,
  .shot--c,
  .shot--d{
    height: auto; aspect-ratio: 4 / 5; /* clean, tall mobile cards */
  }
}

/* Focus */
.gallery a:focus-visible, .gallery button:focus-visible, .shot:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 2px;
}
/* ================== WHAT WE OFFER — enhanced text + hero-typography title ================== */

/* Section chrome (keeps the hero's blue accent + dark tonality) */
.gallery{
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: #0b0e12;
  border-top: 1px solid rgba(255,255,255,.06);
}
.gallery::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
}

/* Header */
.gallery__head{
  display:grid; gap:.75rem;
  margin-bottom: clamp(1.6rem, 3.6vw, 2.6rem);
  max-width: 1200px;
}
.gallery__eyebrow{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size:.78rem; color:#b7b7b7;
}
/* Title uses the same display family + blue glow like the hero (but smaller) */
.gallery__title{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.01em;
  font-size: clamp(1.8rem, 5.6vw, 3.6rem);
  line-height: .94;
  color: var(--blue);
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 42px rgba(47,134,255,.22);
  max-width: 26ch;
}
.gallery__lede{
  margin: .25rem 0 0 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600; color: #dfe8ff;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.2rem);
  max-width: 60ch;
}

/* Grid (keeps previous placement you liked) */
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 2vw, 1.1rem);
}

/* Tile base */
.shot{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: #0d0f14;
}
.shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: contrast(106%) saturate(112%);
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.7,0,1);
}
/* blue tint + vignette keeps hero vibe */
.shot::after{
  content:""; position:absolute; inset:0; z-index: 1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 60% 40%, rgba(47,134,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.72) 100%);
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
}
.shot:hover img,
.shot:focus-within img{ transform: scale(1.06); }
.shot:hover::after,
.shot:focus-within::after{ opacity: .9; }

/* Caption container overlays the bottom area */
.shot__cap{
  position:absolute; inset:0; z-index: 2;
  display:block;
}

/* Tag badge (confident, compact) */
.shot__tag{
  position:absolute; left: .9rem; bottom: .9rem;
  display:inline-flex; padding: .32rem .56rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; backdrop-filter: blur(2px);
}
.shot__tag span{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size: .72rem; color:#fff;
}

/* Text panel sits just above the badge on desktop */
.shot__panel{
  position:absolute; left: .9rem;
  bottom: calc(.9rem + 46px);
  width: min(440px, 60%);
  padding: .75rem 1rem;
  background: rgba(8,12,20,.6);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.shot__title{
  margin:0 0 .3rem 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.02em;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  line-height:.96; color:#fff;
}
.shot__text{
  margin:0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600; letter-spacing:.01em;
  font-size: .95rem; line-height: 1.5;
  color: #d6e2ff;
}

/* Placement you liked (unchanged columns/heights) */
.shot--a{ grid-column: 1 / span 7; height: clamp(260px, 48vh, 560px); }
.shot--b{ grid-column: 8 / span 5; height: clamp(260px, 48vh, 560px); }
.shot--c{ grid-column: 1 / span 4; height: clamp(200px, 36vh, 440px); }
.shot--d{ grid-column: 5 / -1;  height: clamp(220px, 42vh, 520px); }

/* Reveal delay helper */
.delay-3{ transition-delay: .22s; }

/* Responsive */
@media (max-width: 1100px){
  .gallery__grid{ grid-template-columns: repeat(8, 1fr); }
  .shot--a{ grid-column: 1 / span 5; }
  .shot--b{ grid-column: 6 / span 3; }
  .shot--c{ grid-column: 1 / span 3; }
  .shot--d{ grid-column: 4 / span 5; }
  .shot__panel{ width: min(420px, 80%); }
}

@media (max-width: 720px){
  .gallery__grid{ grid-template-columns: 1fr; }
  .shot{ border-radius: 12px; }
  .shot--a, .shot--b, .shot--c, .shot--d{ height: auto; aspect-ratio: 4 / 5; }

  /* On mobile, make the text panel full-width at the bottom for legibility */
  .shot__panel{
    left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 0; border-left: 0; border-right: 0; padding: .9rem 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(5,8,14,0) 0%, rgba(5,8,14,.75) 26%, rgba(5,8,14,.92) 100%);
  }
  .shot__tag{ left: 1rem; bottom: calc(1rem + 76px); }
}

/* Focus */
.gallery a:focus-visible, .gallery button:focus-visible, .shot:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 2px;
}
/* === Fix: COACHING card (shot--c) text sizing & clamping === */

/* Make the panel a bit more compact on this smaller tile */
.shot--c .shot__panel{
  width: min(360px, 65%);
  bottom: calc(.9rem + 40px);   /* a touch closer to the tag to save space */
  padding: .6rem .85rem;
}

/* Slightly smaller title for this tile */
.shot--c .shot__title{
  font-size: clamp(.9rem, 1.8vw, 1.15rem);
  line-height: 1;
}

/* Clamp the body copy so it never spills the card */
.shot--c .shot__text{
  font-size: .9rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* keep to two lines on desktop */
  -webkit-box-orient: vertical;
}

/* Keep the tag close to the edge */
.shot--c .shot__tag{
  bottom: .9rem;
}

/* Mobile: allow a little more room for copy when panel is full-width */
@media (max-width: 720px){
  .shot--c .shot__text{
    -webkit-line-clamp: 3; /* three lines on mobile */
  }
  .shot--c .shot__panel{
    width: auto;           /* uses your existing full-width mobile panel */
    padding: .9rem 1rem 1.1rem;
  }
}
/* ================= WHO WE ARE — 3 cards, white display type, blue accents ================= */

.who--cards{
  position: relative;
  background: #0d0f14;               /* a touch lighter than the hero to separate */
  border-top: 1px solid rgba(255,255,255,.06);
  padding-block: clamp(3.6rem, 8vw, 6.2rem);
}
.who--cards::before{
  /* section accent line (brand blue) */
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
}

/* Header */
.whoh{ display:grid; gap:.8rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.whoh__eyebrow{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size:.78rem; color:#b7b7b7;
}
.whoh__title{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.01em;
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: .9;
  color: #fff;                                     /* white like the hero (but not blue) */
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 36px rgba(47,134,255,.18); /* subtle blue aura */
  max-width: 28ch;
}
.whoh__lede{
  margin:.2rem 0 0 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600; color:#dfe8ff;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.15rem);
  max-width: 62ch;
}

/* Cards frame (single framed block with internal dividers = styled, cohesive) */
.who-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  background: #0b0e12;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}
.who-card{
  position: relative;
  padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1rem, 2.2vw, 1.4rem) clamp(1.3rem, 3vw, 1.8rem);
  background:
    radial-gradient(140% 80% at 60% 10%, rgba(47,134,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%);
}
.who-card + .who-card{ border-left: 1px solid rgba(255,255,255,.08); }

/* Blue micro‑stripe per card (brand accent) */
.who-card__stripe{
  position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
  opacity:.9;
}

/* Titles — white display font */
.who-card__title{
  margin:0 0 .5rem 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.02em;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  line-height: .96; color:#fff;
}

/* Body copy */
.who-card__text{
  margin:0 0 .9rem 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600; letter-spacing:.01em;
  color:#d6e2ff; line-height: 1.55;
  font-size: .98rem;
}

/* Bulleted list with blue markers */
.who-card__list{
  margin:0; padding:0; list-style:none; display:grid; gap:.45rem;
}
.who-card__list li{
  position: relative; padding-left: 1.15rem;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
  letter-spacing:.04em; text-transform: uppercase; font-size:.8rem; color:#bcd3ff;
}
.who-card__list li::before{
  content:""; position:absolute; left:0; top:.35em; width:.6rem; height:.6rem;
  border-radius: 999rem;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue) 60%, var(--blue-strong));
  box-shadow: 0 0 14px rgba(47,134,255,.35);
}

/* Hover: slight lift + glow */
.who-card:hover{ background:
  radial-gradient(140% 80% at 60% 10%, rgba(47,134,255,.12), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%); }
.who-card:hover .who-card__title{ text-shadow: 0 0 22px rgba(47,134,255,.2); }

/* Responsive */
@media (max-width: 980px){
  .who-cards{ grid-template-columns: 1fr; border-radius: 14px; }
  .who-card + .who-card{ border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
/* ===== WHO WE ARE — subtle brand motif (bottom) ===== */
.who-motif{
  position: relative;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: .9rem 0 1.2rem;
  text-align: center;
}

/* Hairline rules that fade into the center badge */
.who-motif::before,
.who-motif::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  opacity: .9;
}
.who-motif::before{
  left: 0;
  background: linear-gradient(
    to right,
    rgba(207,224,255,0) 0%,
    rgba(207,224,255,.22) 100%
  );
}
.who-motif::after{
  right: 0;
  background: linear-gradient(
    to left,
    rgba(207,224,255,0) 0%,
    rgba(207,224,255,.22) 100%
  );
}

/* Center badge — understated, ties to hero styling */
.who-motif__badge{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .36rem .7rem;
  border-radius: 999rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,12,20,.46);
  box-shadow: inset 0 0 0 1px rgba(47,134,255,.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: #eaf1ff; /* white-ish to match hero, readable on dark */
}

/* Small brand dot — static, not animated (keeps it subtle) */
.who-motif__dot{
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue) 60%, var(--blue-strong));
  box-shadow: 0 0 10px rgba(47,134,255,.28);
}

/* Respect reduced motion users (no animations included here) */

/* Responsive tightening */
@media (max-width: 720px){
  .who-motif::before,
  .who-motif::after{ width: 30%; }
  .who-motif__badge{ font-size: .64rem; padding: .32rem .6rem; }
}
/* ===== WHO WE ARE — Rugged background (tough, gritty, branded) ===== */
/* Works with your existing .who--cards section */
.who--cards{
  position: relative;              /* ensure the overlay anchors here */
  background: #0d0f14;             /* base tone (slightly lighter than hero) */
}

/* keep all content above the texture */
.who--cards > *{
  position: relative;
  z-index: 1;
}

/* Grit + scuffs + subtle brand-blue casts */
.who--cards::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Topmost to bottommost layers */
  background-image:
    /* Fine grain (SVG fractal noise, embedded) */
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjgnIGhlaWdodD0nMTI4Jz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA2Jy8+PC9zdmc+"),
    /* Hairline diagonal scuffs (light) */
    repeating-linear-gradient(22.5deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    /* Deeper scratches (dark) */
    repeating-linear-gradient(-22.5deg, rgba(0,0,0,.13) 0 1px, transparent 1px 22px),
    /* Brand-blue cast blobs (very soft) */
    radial-gradient(900px 600px at 12% 8%, rgba(47,134,255,.06), transparent 60%),
    radial-gradient(900px 600px at 88% 105%, rgba(47,134,255,.05), transparent 60%);

  background-size:
    128px 128px,   /* grain tile size */
    auto,
    auto,
    auto,
    auto;

  /* Blend the layers together so it reads like concrete/steel with scuffs */
  background-blend-mode:
    soft-light,    /* grain */
    soft-light,    /* light scuffs */
    multiply,      /* dark scuffs */
    overlay,       /* blue cast 1 */
    overlay;       /* blue cast 2 */
}

/* Optional intensity presets (add one of these classes to #who if you want) */
.who--cards.rugged--soft::after{ opacity: .6; }
.who--cards.rugged--hard::after{ opacity: 1;  }  /* default feel */
/* ===== WHO (original section) — Rugged background ===== */
/* Applies to .who only when it's NOT the cards variant */
.who:not(.who--cards){
  position: relative;
  background: #0d0f14;         /* match the tough, dark tone */
}

/* keep all content above the texture */
.who:not(.who--cards) > *{
  position: relative;
  z-index: 1;
}

/* ensure any existing .who::before accent line stays above the texture */
.who:not(.who--cards)::before{
  position: absolute;
  z-index: 2;
}

/* gritty overlay (same stack as the cards section) */
.who:not(.who--cards)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Topmost → bottommost layers */
  background-image:
    /* Fine grain (embedded SVG fractal noise; no extra asset needed) */
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjgnIGhlaWdodD0nMTI4Jz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA2Jy8+PC9zdmc+"),
    /* Hairline diagonal scuffs (light) */
    repeating-linear-gradient(22.5deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    /* Deeper scratches (dark) */
    repeating-linear-gradient(-22.5deg, rgba(0,0,0,.13) 0 1px, transparent 1px 22px),
    /* Brand‑blue cast (very soft) */
    radial-gradient(900px 600px at 12% 8%, rgba(47,134,255,.06), transparent 60%),
    radial-gradient(900px 600px at 88% 105%, rgba(47,134,255,.05), transparent 60%);

  background-size:
    128px 128px,
    auto,
    auto,
    auto,
    auto;

  background-blend-mode:
    soft-light,   /* grain */
    soft-light,   /* light scuffs */
    multiply,     /* dark scuffs */
    overlay,      /* blue cast 1 */
    overlay;      /* blue cast 2 */
}

/* Optional intensity presets: add class="rugged--soft" or "rugged--hard" on the section */
.who:not(.who--cards).rugged--soft::after{ opacity: .6; }
.who:not(.who--cards).rugged--hard::after{ opacity: 1; }  /* stronger texture */

/* ================= CONTACT — black, blue type, rugged vibe ================= */
.contact{
  position: relative;
  background: #000; /* black as requested */
  padding-block: clamp(3.6rem, 8vw, 6rem);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Content above texture */
.contact > *{ position: relative; z-index: 1; }

/* Rugged overlay (same family as WHO sections) */
.contact::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjgnIGhlaWdodD0nMTI4Jz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA2Jy8+PC9zdmc+"),
    repeating-linear-gradient(22.5deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-22.5deg, rgba(0,0,0,.18) 0 1px, transparent 1px 22px),
    radial-gradient(900px 600px at 12% 8%, rgba(47,134,255,.05), transparent 60%),
    radial-gradient(900px 600px at 88% 105%, rgba(47,134,255,.05), transparent 60%);
  background-size: 128px 128px, auto, auto, auto, auto;
  background-blend-mode: soft-light, soft-light, multiply, overlay, overlay;
  opacity: 1;
}

/* Header */
.contact__eyebrow{
  margin:0 0 .4rem 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  font-size:.78rem; color:#aebfe6;
}
.contact__title{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.01em;
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: .9;
  color: var(--blue);
  text-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 36px rgba(47,134,255,.24);
}
.contact__lede{
  margin:.6rem 0 1rem 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600; color:#d6e2ff;
  font-size: clamp(1rem, 1.1vw + .6rem, 1.15rem);
  max-width: 58ch;
}

/* Points list with blue markers */
.contact__points{
  margin: 1rem 0 0 0; padding:0; list-style:none; display:grid; gap:.4rem;
}
.contact__points li{
  position: relative; padding-left: 1.15rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700; letter-spacing:.04em; text-transform: uppercase;
  font-size:.78rem; color:#bdd4ff;
}
.contact__points li::before{
  content:""; position:absolute; left:0; top:.35em; width:.6rem; height:.6rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue) 60%, var(--blue-strong));
  box-shadow: 0 0 12px rgba(47,134,255,.35);
}

/* Layout */
.contact__grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem);
}
@media (max-width: 980px){
  .contact__grid{ grid-template-columns: 1fr; }
}

/* Form card */
.contact__form{
  background: rgba(10,14,22,.7);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(47,134,255,.10),
    0 18px 40px rgba(0,0,0,.35);
  padding: clamp(1rem, 2.6vw, 1.4rem);
}

/* Field groups */
.field{ margin-bottom: .95rem; }
.field--split{ display:grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 640px){ .field--split{ grid-template-columns: 1fr; } }

.field__label{
  display:block; margin: 0 0 .35rem 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:#b7c8ee;
}

.field__input{
  width:100%; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(9,12,18,.9), rgba(9,12,18,.82));
  color:#eaf1ff;
  padding: .8rem .9rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field__input::placeholder{ color:#8fa3c8; opacity:.7; }
.field__input:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,134,255,.18);
  background: linear-gradient(180deg, rgba(9,12,18,.95), rgba(9,12,18,.86));
}
.field__input--area{ resize: vertical; min-height: 140px; }

/* Checkbox */
.field--check{
  display:flex; gap:.6rem; align-items:flex-start; margin-top:.2rem;
  font-family: "Archivo", system-ui, sans-serif; color:#cfe0ff;
}
.field--check input{ margin-top:.2rem; accent-color: var(--blue); }
.field--check label{ cursor: pointer; }

/* Errors */
.field__error{
  margin:.35rem 0 0; min-height: 1em;
  font-size: .78rem; color: #ff8a8a;
}

/* Button */
.btn{
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing:.12em;
  border-radius: 12px; padding: 1rem 1.4rem;
}
.btn--primary{
  color:#fff; background: var(--blue);
  box-shadow: 0 12px 28px rgba(47,134,255,.25), inset 0 -3px 8px rgba(0,0,0,.25);
}
.btn--primary:hover{ filter: brightness(1.06); }
.btn--primary:active{ transform: translateY(1px); }

/* Status text */
.form__status{
  margin:.8rem 0 0; font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700; color:#b7c8ee; font-size:.9rem;
}

/* Motif at section bottom (subtle) */
.contact__motif{
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: .9rem 0 0;
  text-align:center;
  position: relative;
}
.contact__motif::before,
.contact__motif::after{
  content:""; position:absolute; top: 50%; width: 38%; height: 1px; opacity: .9;
}
.contact__motif::before{
  left: 0; background: linear-gradient(to right, rgba(207,224,255,0) 0%, rgba(207,224,255,.18) 100%);
}
.contact__motif::after{
  right: 0; background: linear-gradient(to left, rgba(207,224,255,0) 0%, rgba(207,224,255,.18) 100%);
}
.contact__badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.36rem .7rem; border-radius:999rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,20,.46);
  box-shadow: inset 0 0 0 1px rgba(47,134,255,.10);
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  font-size:.68rem; color:#eaf1ff;
}
.contact__dot{
  inline-size:.5rem; block-size:.5rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue) 60%, var(--blue-strong));
  box-shadow: 0 0 10px rgba(47,134,255,.28);
}

/* Honeypot hide */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* === CONTACT: plain black background, no lines === */

/* kill the top divider line and any texture overlay */
.contact{
  background: #000 !important;
  border-top: 0 !important;
}
.contact::after{
  content: none !important;   /* removes the gritty/line overlay we added */
}

/* remove the subtle separator lines around the bottom motif */
.contact__motif::before,
.contact__motif::after{
  content: none !important;
}

/* (optional) if you also want to hide the motif badge itself, uncomment: */
/* .contact__motif{ display: none !important; } */
/* CONTACT — rugged lines/grit INSIDE the form only */
.contact__form{
  position: relative;
  overflow: hidden;           /* keep texture neatly inside the card */
  isolation: isolate;         /* safe stacking for the overlay */
}

/* Texture overlay sits behind inputs/text but inside the form card */
.contact__form::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                 /* stays under content */
  pointer-events: none;

  /* Grain + diagonal scuffs + subtle brand-blue casts */
  background-image:
    /* Fine grain (embedded SVG; no extra asset needed) */
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjgnIGhlaWdodD0nMTI4Jz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA2Jy8+PC9zdmc+"),
    /* Light diagonal hairlines */
    repeating-linear-gradient(22.5deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    /* Darker diagonal scuffs */
    repeating-linear-gradient(-22.5deg, rgba(0,0,0,.18) 0 1px, transparent 1px 22px),
    /* Very soft brand-blue casts */
    radial-gradient(900px 600px at 12% 8%, rgba(47,134,255,.06), transparent 60%),
    radial-gradient(900px 600px at 88% 105%, rgba(47,134,255,.06), transparent 60%);

  background-size: 128px 128px, auto, auto, auto, auto;
  background-blend-mode: soft-light, soft-light, multiply, overlay, overlay;

  /* Single knob to tune intensity per project */
  opacity: var(--form-lines-opacity, .85);
}

/* Ensure form content paints above the overlay */
.contact__form > *{
  position: relative;
  z-index: 1;
}

/* Optional presets — add one of these classes to the form tag */
.contact__form.lines-soft::before{ --form-lines-opacity: .55; }
.contact__form.lines-hard::before{ --form-lines-opacity: 1; }
/* ================= FOOTER (black, blue accents, tough vibe) ================= */
.footer{
  position: relative;
  background: #000;
  padding-block: clamp(2.8rem, 7vw, 4.8rem);
  color: #eaf1ff;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer::before{
  /* thin blue accent at the top edge */
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background: linear-gradient(90deg, var(--blue), rgba(47,134,255,0));
}

.footer__top{
  display:grid; justify-items:center; gap:.6rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
  text-align:center;
}
.footer__brand{
  margin:0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.01em;
  font-size: clamp(1.6rem, 5.6vw, 2.6rem);
  line-height:.9; color:#fff;
  text-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 28px rgba(47,134,255,.18);
}

/* subtle brand capsule under the wordmark */
.footer__badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.32rem .66rem;
  border-radius:999rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,20,.46);
  box-shadow: inset 0 0 0 1px rgba(47,134,255,.10);
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  font-size:.68rem; color:#eaf1ff;
}
.footer__sep{ opacity:.5; }
.footer__dot{
  inline-size:.5rem; block-size:.5rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue) 60%, var(--blue-strong));
  box-shadow: 0 0 10px rgba(47,134,255,.28);
}

/* grid */
.footer__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.2fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items:start;
}
@media (max-width: 960px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* column bits */
.f-col{ min-width: 0; }
.f-title{
  margin:0 0 .6rem 0;
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  font-size:.9rem; color:#aebfe6;
}
.f-text{
  margin:0 0 .8rem 0;
  font-family:"Archivo", system-ui, sans-serif;
  color:#cfe0ff; line-height:1.55; font-weight:600;
}
.f-list{ margin:0; padding:0; list-style:none; display:grid; gap:.35rem; }
.f-link{
  display:inline-block; text-decoration:none; color:#eaf1ff;
  font-family:"Archivo", system-ui, sans-serif; font-weight:700; letter-spacing:.02em;
}
.f-link:hover{ color:#fff; text-decoration: underline; text-decoration-color: rgba(47,134,255,.7); }
.f-cta{
  display:inline-block; margin-top:.2rem; text-decoration:none;
  font-family:"PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  color:#fff; background: var(--blue);
  border-radius: 10px; padding:.6rem .8rem;
  box-shadow: 0 10px 24px rgba(47,134,255,.25), inset 0 -3px 8px rgba(0,0,0,.25);
}
.f-cta:hover{ filter: brightness(1.06); }

/* social chips */
.f-social{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.f-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 36px; padding: 0 .6rem;
  border-radius: 999rem;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(8,12,20,.6);
  color:#eaf1ff; text-decoration:none;
  font-family:"PP Monument Extended","Archivo",system-ui,sans-serif; font-weight:900; letter-spacing:.12em;
  box-shadow: inset 0 0 0 1px rgba(47,134,255,.10);
}
.f-chip:hover{ border-color: var(--blue); color:#fff; }
.f-chip--wa svg{ display:block; }

/* subscribe form */
.f-sub{ display:grid; grid-template-columns: 1fr auto; gap:.5rem; align-items:center; }
.f-input{
  width:100%; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(9,12,18,.9), rgba(9,12,18,.82));
  color:#eaf1ff; padding:.8rem .9rem; outline:none;
}
.f-input::placeholder{ color:#8fa3c8; opacity:.7; }
.f-input:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,134,255,.18); }

.f-btn{
  border:0; border-radius: 12px; padding:.9rem 1rem; cursor:pointer;
  font-family:"PP Monument Extended","Archivo",system-ui,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  color:#fff; background: var(--blue);
  box-shadow: 0 10px 24px rgba(47,134,255,.25), inset 0 -3px 8px rgba(0,0,0,.25);
}
.f-btn:hover{ filter: brightness(1.06); }
.f-msg{ margin:.2rem 0 0; grid-column: 1 / -1; font-family:"Archivo",system-ui,sans-serif; font-weight:700; color:#b7c8ee; font-size:.9rem; min-height: 1.2em; }

/* bottom row */
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; margin-top: clamp(1.6rem, 4vw, 2.2rem);
  padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06);
}
.f-legal{ margin:0; font-family:"Archivo",system-ui,sans-serif; color:#aebfe6; font-weight:600; }
.f-legalnav{ display:flex; align-items:center; gap:.6rem; }
.f-legallink{ color:#cfe0ff; text-decoration:none; font-family:"Archivo",system-ui,sans-serif; font-weight:700; }
.f-legallink:hover{ color:#fff; text-decoration: underline; text-decoration-color: rgba(47,134,255,.7); }
.f-dot{ color:#5f728f; }

@media (max-width: 720px){
  .footer__bottom{ flex-direction: column; align-items:flex-start; }
}
/* ==== FOOTER: lighter dark bg + rugged line/grain overlay (like other sections) ==== */
.footer{
  position: relative;
  background: #0b0e12 !important;  /* lighter than pure black to match sections */
}
.footer > *{ position: relative; z-index: 1; } /* content above overlay */

/* keep the thin blue top accent line above the texture */
.footer::before{ z-index: 2; }

/* rugged overlay inside the footer only */
.footer::after{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;

  /* Grain + diagonal scuffs + subtle blue casts (same stack you've used) */
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjgnIGhlaWdodD0nMTI4Jz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA2Jy8+PC9zdmc+"),
    repeating-linear-gradient(22.5deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-22.5deg, rgba(0,0,0,.18) 0 1px, transparent 1px 22px),
    radial-gradient(900px 600px at 12% 8%, rgba(47,134,255,.05), transparent 60%),
    radial-gradient(900px 600px at 88% 105%, rgba(47,134,255,.05), transparent 60%);
  background-size: 128px 128px, auto, auto, auto, auto;
  background-blend-mode: soft-light, soft-light, multiply, overlay, overlay;
  opacity: .9;
}

/* Footer phone styles */
.f-phone{ margin-top: .9rem; display: grid; gap: .25rem; }
.f-phone__link{
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none;
  color: #fff;
  font-family: "PP Monument Extended","Archivo",system-ui,sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
  font-size: 1rem;
}
.f-phone__link::before{
  content: "☎"; font-family: system-ui, sans-serif; opacity: .8;
}
.f-phone__link:hover{ text-decoration: underline; text-decoration-color: rgba(47,134,255,.7); }
.f-hours{
  font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
  color: #b7c8ee; font-size: .85rem;
}
/* Dock hide/show animation */
.dock{
  transition: transform .22s ease, opacity .22s ease;
}
.dock.is-hidden{
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
/* Smooth scroll; JS will handle offset precision cross-browser */
html { scroll-behavior: smooth; }

/* Make sure sections stop below the fixed header on direct jumps */
.section { scroll-margin-top: calc(var(--header-h) + 12px); }
#footer { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Active nav link state (highlights the section in view) */
.nav__link.is-active { opacity: 1; }
.nav__link.is-active::after { opacity: 1; transform: scaleX(1); }

/* === CLEAN HERO strapline & flipwords (final) === */
:root{ --strap-tweak: 0px; } /* micro‑tune if your eye wants +/‑ 0.5–1px */

.hero__strap{
  margin: clamp(.2rem, .8vw, .6rem) 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(.45rem, 1vw, .7rem);
}
.strap__lead{
  font-family: "PP Monument Extended", "Archivo", system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  line-height: 1; color: #eaf1ff;
  transform: translateY(calc(var(--strap-nudge, 0px) + var(--strap-tweak)));
  will-change: transform;
}
.flipwords{
  position: relative; display: inline-block; vertical-align: baseline;
  perspective: 1000px; height: 1em; /* JS fixes to tallest word */
}
.flipwords__word{
  position: absolute; left:0; top:0; z-index:1; white-space:nowrap;
  font-family:"PP Monument Extended","Archivo",system-ui,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size: clamp(1rem, 2.6vw, 1.6rem); line-height:1; color:#fff;
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 34px rgba(47,134,255,.22);
  backface-visibility:hidden; transform-origin:50% 80%;
  opacity:0; transform: rotateX(90deg); pointer-events:none;
}
.flipwords__word.is-current{ opacity:1; transform: rotateX(0deg); }
.flipwords__word.is-enter{ z-index:2; animation: flipInBack .7s cubic-bezier(.2,.7,0,1) forwards; }
.flipwords__word.is-exit{  z-index:1; animation: flipOutBack .7s cubic-bezier(.2,.7,0,1) forwards; }

@keyframes flipInBack{
  0%{ transform: rotateX(-180deg); opacity:0; }
  50%{ transform: rotateX(-90deg);  opacity:0; }
  51%{ transform: rotateX(-90deg);  opacity:1; }
  100%{transform: rotateX(0deg);    opacity:1; }
}
@keyframes flipOutBack{
  0%{ transform: rotateX(0deg);   opacity:1; }
  50%{ transform: rotateX(90deg); opacity:0; }
  100%{transform: rotateX(180deg);opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .flipwords__word{ animation:none !important; transform:none !important; }
  .flipwords__word:not(.is-current){ display:none; }
}
/* === PATCH: lock the flipwords to a single baseline & kill the nudge === */

/* Keep baseline alignment between the two inline elements */
.hero__strap { align-items: baseline; }

/* Bottom‑align every word to the container so the baseline never moves */
.hero__strap .flipwords__word{
  top: auto !important;
  bottom: 0 !important;                   /* <- the key fix */
  transform-origin: 50% 100% !important;  /* pivot around the baseline */
}

/* Stop moving "BUILT FOR" up/down — we’ll keep it steady */
.hero__strap .strap__lead{
  transform: none !important;
}

/* Optional: slightly shorter flip timing on small screens to feel snappier */
@media (max-width: 520px){
  .hero__strap .flipwords__word.is-enter,
  .hero__strap .flipwords__word.is-exit{
    animation-duration: .6s !important;
  }
}
/* === MICRO FIX: flipwords sit ~1/16" too high — lock baseline & nudge down === */

/* Keep both bits on the same baseline */
.hero__strap{ align-items: baseline; }

/* Stop JS from nudging "BUILT FOR" (we’ll keep it steady) */
.hero__strap .strap__lead{
  transform: none !important;
}

/* Visually drop the rotating words by exactly 1/16" (≈6px) */
.flipwords{
  transform: translateY(0.0625in); /* positive = moves the words down */
}

/* Bottom‑align every word so the baseline never shifts between words */
.flipwords__word{
  top: auto !important;
  bottom: 0 !important;                  /* anchor to baseline */
  transform-origin: 50% 100% !important; /* pivot around the baseline */
}
/* === MICRO OFFSET (mobile-only): raise flipwords by 1/32" === */
/* Desktop stays perfect at 1/16" (0.0625in). Mobile becomes 1/32" (0.03125in). */

:root{
  --flipwords-offset: 0.0625in;    /* desktop: 1/16" down (≈6px) */
}

/* Apply the offset to the rotating word container */
.flipwords{
  transform: translateY(var(--flipwords-offset)) !important;
}

/* Mobile: nudge up by 1/32" (so net is 1/32" down) */
@media (max-width: 720px){
  :root{ --flipwords-offset: 0.03125in; }  /* 1/32" ≈ 3px */
}

/* If you’d rather express mobile in pixels, replace the line above with:
   :root{ --flipwords-offset: 3px; }
*/
/* === WHAT WE OFFER — mobile layout fix (stack cards, no off‑canvas) === */
@media (max-width: 720px){
  /* 1) Force a single-column stack and neutralize desktop grid placement */
  #offer .gallery__grid{
    grid-template-columns: 1fr !important;
    overflow-x: clip; /* avoid accidental horizontal scroll (fallbacks to hidden if unsupported) */
  }
  #offer .shot{
    grid-column: 1 / -1 !important;   /* cancel desktop grid-column positions */
    min-width: 0;                      /* prevents overflow from long text */
  }

  /* 2) Predictable card sizing + clean corners */
  #offer .shot{
    height: auto !important;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }

  /* 3) Full-width, legible caption panel at the bottom */
  #offer .shot__panel{
    left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 0; border-left: 0; border-right: 0;
    padding: .9rem 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(5,8,14,0) 0%, rgba(5,8,14,.75) 26%, rgba(5,8,14,.92) 100%);
  }
  /* keep the tag badge above the panel */
  #offer .shot__tag{ left: 1rem; bottom: calc(1rem + 76px); }

  /* 4) Ensure the fixed CTA dock never covers the last card */
  #offer{ padding-bottom: calc(2.2rem + 64px + env(safe-area-inset-bottom)); }
}
/* === WHAT WE OFFER: keep tag from covering the descriptions === */
/* We stack the caption elements at the bottom instead of absolute-pinning each one. */

#offer .shot__cap{
  /* keep it as the full overlay but use a bottom stack */
  position: absolute; inset: 0; z-index: 2;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  gap: .6rem;                     /* space between panel and tag */
  padding: .9rem;                 /* left/right/bottom breathing room */
}

/* Cancel absolute positioning on both children so they can flow */
#offer .shot__panel,
#offer .shot__tag{
  position: static !important;    /* overrides previous absolute rules */
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Order: text panel sits above, tag sits below (at the card edge) */
#offer .shot__panel{
  order: 1;
  align-self: flex-start;
  /* reasonable width on desktop; mobile keeps your full-width style below */
  max-width: min(460px, 72%);
}
#offer .shot__tag{
  order: 2;
  align-self: flex-start;
}

/* Mobile: keep your full-width gradient panel styling */
@media (max-width: 720px){
  #offer .shot__panel{
    width: 100%;
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding: .9rem 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(5,8,14,0) 0%, rgba(5,8,14,.75) 26%, rgba(5,8,14,.92) 100%);
  }
  /* Tag naturally sits just under the panel now — no overlap */
}/* === WHAT WE OFFER — mobile: keep the photo visible, clamp copy, add More/Less === */
@media (max-width: 720px){

  /* Panel becomes our anchor for the fade + button, regardless of earlier overrides */
  #offer .shot__panel{
    position: relative !important;
    /* Add a little extra bottom pad so the button doesn't cover the last line */
    padding-bottom: calc(.9rem + 2.2rem);
  }

  /* Default (collapsed): keep titles/copy short and readable */
  #offer .shot__title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* at most two lines on mobile */
    overflow: hidden;
  }
  #offer .shot__text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* three lines of body copy by default */
    overflow: hidden;
  }

  /* Soft fade at the bottom to hint there’s more */
  #offer .shot__panel::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,8,14,0), rgba(5,8,14,.92));
  }

  /* The little pill button */
  #offer .shot__more{
    position: absolute; right: .8rem; bottom: .8rem; z-index: 3;
    appearance: none; border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,12,20,.62); color:#fff;
    border-radius: 999rem; padding: .42rem .74rem;
    font-family:"PP Monument Extended","Archivo",system-ui,sans-serif;
    font-weight:900; text-transform:uppercase; letter-spacing:.12em;
    font-size: .68rem;
  }
  #offer .shot__more:active{ transform: translateY(1px); }

  /* Open state: show full text but cap height so the photo remains visible */
  #offer .shot.is-open .shot__panel{
    max-height: 60vh;                 /* photo always keeps ≈40% of the viewport */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #offer .shot.is-open .shot__panel::after{ display:none; }
  #offer .shot.is-open .shot__text{ -webkit-line-clamp: initial; }
  #offer .shot.is-open .shot__title{ -webkit-line-clamp: initial; }
}
/* === FOOTER — Mobile optimization pack =============================== */
@media (max-width: 780px){
  /* Stack columns earlier and add comfortable spacing */
  .footer__grid{
    grid-template-columns: 1fr !important;
    gap: 1.1rem;
  }
  .f-col + .f-col{
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 1rem;
  }

  /* Tighter hero/brand block at top of footer */
  .footer__top{ margin-bottom: 1.4rem; }
  .footer__brand{ font-size: clamp(1.4rem, 7vw, 2.1rem); }
  .footer__badge{ flex-wrap: wrap; row-gap: .25rem; }

  /* Subscribe form: single column + full‑width button */
  .f-sub{ grid-template-columns: 1fr; }
  .f-btn{ width: 100%; }
  .f-msg{ grid-column: 1; }

  /* Social chips: 44×44px touch targets */
  .f-social{ gap: .45rem; }
  .f-chip{ min-width: 44px; height: 44px; }

  /* Legal row wraps neatly */
  .footer__bottom{ flex-direction: column; align-items: flex-start; gap: .6rem; }
  .f-legalnav{ flex-wrap: wrap; gap: .35rem .6rem; }

  /* Small safety pad at the very bottom (also respects iOS safe‑area) */
  .footer{ padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }

  /* Belt‑and‑suspenders: avoid any accidental side‑scroll on old iOS */
  html, body { overflow-x: hidden; }
}

/* Treat the phone block (currently a <div> inside <ul>) like a list item */
#footer .f-list > .f-phone{
  display: grid;
  gap: .25rem;
  margin-top: .6rem;
  list-style: none;
}
#footer .f-list > .f-phone .f-hours{
  font-size: .85rem;
  color: #b7c8ee;
}
/* === WHAT WE OFFER — Mobile: put descriptions under images (clean card style) === */
@media (max-width: 720px){
  /* 0) Make sure the grid stacks to one column (safe if already done) */
  #offer .gallery__grid{ grid-template-columns: 1fr !important; }

  /* 1) Turn each figure into “image, then caption” */
  #offer .shot{
    aspect-ratio: auto !important;   /* let height grow with caption */
    overflow: visible !important;
    border: 0 !important;            /* we’ll give the image/panel their own borders */
    background: transparent !important;
  }
  /* remove the image tint/vignette overlay so it doesn't sit over the caption */
  #offer .shot::after{ display: none !important; }

  /* 2) Image: back to normal flow, with a neat 4:5 crop and rounded corners */
  #offer .shot img{
    position: static !important;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;             /* consistent, tall card feel */
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
  }

  /* 3) Caption block flows under the image */
  #offer .shot__cap{
    position: relative !important;   /* stays in normal flow, stacks below the image */
    z-index: 1;
    display: grid !important;
    gap: .6rem;
    padding-top: .6rem;
  }

  /* 4) Tag chip sits above the panel (no absolute pinning on mobile) */
  #offer .shot__tag{
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    align-self: start;
    display: inline-flex;
    padding: .32rem .56rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    backdrop-filter: blur(2px);
  }

  /* 5) Text panel becomes its own little card */
  #offer .shot__panel{
    position: static !important;
    width: 100% !important;
    padding: .9rem 1rem 1rem !important;
    border-radius: 12px !important;
    background: rgba(8,12,20,.66) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.25) !important;
  }
  #offer .shot__panel::after{ display: none !important; } /* kill any fade overlay */

  /* 6) Show full copy (no clamps/buttons needed in this layout) */
  #offer .shot__title{ margin-top: 0; font-size: clamp(1.05rem, 3.6vw, 1.3rem); }
  #offer .shot__text{
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  #offer .shot__more{ display: none !important; } /* if you ever added the More/Less pill, hide it here */

  /* 7) Ensure the last card isn’t crowded by the fixed CTA dock */
  #offer{ padding-bottom: calc(1.4rem + 64px + env(safe-area-inset-bottom)); }
}
/* === WHAT WE OFFER — Mobile: editorial description (no card, no overlay) === */
@media (max-width: 720px){

  /* More breathing room between items */
  #offer .gallery__grid{
    grid-template-columns: 1fr !important;
    row-gap: 1.2rem !important;
  }

  /* The figure is just a container; no card chrome */
  #offer .shot{
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
  }
  /* Kill the image tint/vignette on mobile for a crisp photo */
  #offer .shot::after{ display: none !important; }

  /* Photo stays on top, consistent crop, no heavy shadow */
  #offer .shot img{
    position: static !important;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: none !important;
  }

  /* Caption flows under the image with gentle spacing */
  #offer .shot__cap{
    position: static !important;
    display: grid !important;
    gap: .5rem;
    margin-top: .7rem;
    padding: 0 !important;
    z-index: 1;
  }

  /* Tag becomes a minimal eyebrow (no pill) */
  #offer .shot__tag{
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: inline-block;
  }
  #offer .shot__tag span{
    display: inline-block;
    font-family: "PP Monument Extended","Archivo",system-ui,sans-serif;
    font-weight: 900;
    letter-spacing: .12em;
    font-size: .72rem;
    color: #aebfe6; /* quiet eyebrow tone */
    opacity: .95;
  }

  /* “Panel” becomes plain text: no background, no border, no fade */
  #offer .shot__panel{
    position: static !important;
    width: 100% !important;
    max-width: 60ch;               /* comfortable line length */
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #offer .shot__panel::after{ display: none !important; } /* remove any gradient fade */

  /* Type scale tuned for reading */
  #offer .shot__title{
    margin: .05rem 0 .25rem 0;
    font-size: clamp(1.05rem, 3.6vw, 1.28rem);
    letter-spacing: .02em;
    line-height: 1.06;
  }
  #offer .shot__text{
    font-weight: 600;
    color: #dfe8ff;
    line-height: 1.55;
    -webkit-line-clamp: initial !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Hide any “More/Less” pill if we added it earlier */
  #offer .shot__more{ display: none !important; }

  /* Ensure the fixed CTA dock doesn’t crowd the last item */
  #offer{ padding-bottom: calc(1.4rem + 64px + env(safe-area-inset-bottom)); }
}

/* Remove COACHING (shot--c) desktop/mobile clamps on mobile for full copy */
@media (max-width: 720px){
  #offer .shot--c .shot__text{
    -webkit-line-clamp: initial !important;
    display: block !important;
  }
}
/* === MOBILE MENU — make it actually work (overlay, scrim, scroll-lock) === */

/* Show the hamburger at a sane breakpoint (wins over earlier rules) */
@media (max-width: 960px){
  .hamburger{ display:block !important; }
}

/* Dimmed page scrim (JS injects <div class="menu-scrim">) */
.menu-scrim{
  position: fixed; inset: 0;
  z-index: 38;                      /* header is 40; menu panel will sit on 41 */
  background: rgba(6,10,16,.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.menu-scrim.is-on{ opacity: 1; pointer-events: auto; }

/* Lock the page and hide the floating dock while menu is open */
html.menu-open, body.menu-open{ overflow: hidden; }
.menu-open .dock{ opacity:0; transform:translateY(100%); pointer-events:none; }

/* The UL.nav becomes a real overlay panel below the fixed header */
@media (max-width: 960px){
  .nav{
    position: fixed; z-index: 41;
    left: 0; right: 0;
    top: var(--header-h);            /* sit right under your fixed bar */
    bottom: 0;
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: .75rem .85rem 1rem;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    overflow: auto;                  /* scroll inside the panel if needed */
  }
  .nav.is-open{
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Big, easy tap targets for links */
  .nav > li{ list-style: none; }
  .nav__link{
    display: block;
    background: rgba(17,19,24,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .9rem .95rem;
    font-size: 1.05rem;
  }
}

/* Hamburger -> "X" animation */
.hamburger{ position: relative; }
.hamburger span{
  transition: transform .18s ease, opacity .18s ease;
  transform-origin: 8px 1px;
}
.hamburger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
/* === MOBILE MENU — make it show, always === */
@media (max-width: 960px){
  /* 1) Ensure the hamburger is visible at this breakpoint */
  .hamburger{ display:block !important; }

  /* 2) Give the menu panel its own layer and consistent overlay styling */
  #navList.nav{
    position: fixed !important;
    left: .8rem; right: .8rem;
    top: calc(var(--header-h) + .6rem);
    z-index: 41;                        /* sits above the fixed header (z-index:40) */
    background: rgba(17,19,24,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .8rem;
    display: flex;                      /* guard against earlier flex → column rules */
    flex-direction: column;
    gap: .4rem;
    transform: translateY(-12px);
    opacity: 0;                         /* default closed */
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* 3) OPEN STATE: show when EITHER .is-open is present OR aria-expanded="true" */
  #navList.nav.is-open,
  #menuToggle[aria-expanded="true"] + #navList{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 4) Big, tappable links */
  #navList .nav__link{
    display: block;
    font-size: 1.1rem;
    padding: .6rem .45rem;
  }
}
/* === MOBILE MENU — final hardening: show the items, always ================= */
@media (max-width: 960px){
  /* Make sure the hamburger is visible at this breakpoint */
  #menuToggle.hamburger{ display: inline-flex !important; }

  /* Overlay panel */
  #navList.nav{
    position: fixed !important;
    inset: calc(var(--header-h) + .6rem) .8rem auto .8rem; /* under the fixed bar */
    z-index: 41 !important;                                  /* above header (z:40) */
    display: grid !important;
    align-content: start;
    gap: .6rem !important;
    padding: .9rem !important;
    background: rgba(17,19,24,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;

    /* closed by default */
    opacity: 0; transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* OPEN when .is-open is present OR when the button says aria-expanded="true" */
  #navList.nav.is-open,
  #menuToggle[aria-expanded="true"] + #navList{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Paint the items as big, tappable rows */
  #navList.nav > li{ list-style: none; margin: 0; }
  #navList.nav > li > .nav__link{
    display: block !important;
    width: 100%;
    padding: .9rem 1rem !important;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(8,12,20,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
  }

  /* Kill the thin underline used on desktop so it doesn't look like an empty input */
  #navList.nav > li > .nav__link::after{ display: none !important; }
}
/* === MOBILE MENU — restore hamburger bars + drive X from aria-expanded === */
@media (max-width: 960px){
  /* Make sure the button is visible at this breakpoint */
  #menuToggle.hamburger{
    display: block !important;     /* block avoids flex child width collapse */
    position: relative;
  }

  /* Bars: give them width so they actually draw inside the 42x42 box */
  #menuToggle.hamburger span{
    display: block;
    width: calc(100% - 18px);      /* fill minus 9px side margins */
    height: 2px;
    margin: 6px 9px;
    background: #fff;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
    transform-origin: 8px 1px;
  }

  /* Animate to an "X" based on aria-expanded (no extra JS needed) */
  #menuToggle[aria-expanded="true"] span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  #menuToggle[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }
  #menuToggle[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* Ensure the mobile sheet actually shows items as big tap targets */
@media (max-width: 960px){
  #navList.nav{
    position: fixed !important;
    inset: calc(var(--header-h) + .6rem) .8rem auto .8rem;
    z-index: 41 !important;
    display: grid !important;
    gap: .6rem !important;
    padding: .9rem !important;
    background: rgba(17,19,24,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    opacity: 0; transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  /* open when either the class OR aria says so */
  #navList.nav.is-open,
  #menuToggle[aria-expanded="true"] + #navList{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #navList.nav > li{ list-style: none; margin: 0; }
  #navList.nav > li > .nav__link{
    display: block !important;
    width: 100%;
    padding: .9rem 1rem !important;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(8,12,20,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
  }
  #navList.nav > li > .nav__link::after{ display: none !important; } /* remove desktop underline */
}
/* === DESKTOP HEADER — perfect vertical centering for nav text === */
@media (min-width: 961px){
  /* Ensure the header columns and nav row are truly centered */
  .bar__grid,
  .bar__left,
  .bar__right,
  .nav{
    align-items: center !important;
  }

  /* Make each nav link center its own text box */
  .nav__link{
    display: inline-flex !important;  /* aligns the text box itself */
    align-items: center !important;
    line-height: 1 !important;        /* no extra line-height slack */
    padding-top: .1rem;               /* keep the hover underline position nice */
    padding-bottom: .1rem;
  }

  /* Micro‑adjust: move the whole nav row down by 1px (tweak if needed) */
  .bar{ --nav-nudge: 1px; }           /* try 2px if you want a hair more */
  .bar .nav{ transform: translateY(var(--nav-nudge)); }
}