/* ==========================================================================
   ENDGAME STRATEGY LAB
   Palette + type pulled from the live brand:
   ink #000 · cyan #80F0FF · white #fff
   Mistrully (script) · Barlow Condensed (display) · Josefin Sans (body)
   ========================================================================== */

/* Self-hosted — no third-party font requests. */
@font-face {
  font-family: "Mistrully";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Mistrully.woff2") format("woff2"),
       url("assets/fonts/Mistrully.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/BarlowCondensed-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/BarlowCondensed-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/BarlowCondensed-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/BarlowCondensed-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/JosefinSans-200.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/JosefinSans-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/JosefinSans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink:        #000000;
  --ink-2:      #050708;
  --cyan:       #80F0FF;
  --cyan-deep:  #12C4DF;
  --cyan-bright: #A5F5FF;   /* cyan type over photography */
  --cyan-glow:  rgba(128, 240, 255, .45);
  --white:      #ffffff;
  --mute:       rgba(255, 255, 255, .58);
  --faint:      rgba(255, 255, 255, .46);   /* .30 failed WCAG AA on black */
  --hair:       rgba(128, 240, 255, .18);
  --hair-soft:  rgba(255, 255, 255, .08);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Josefin Sans", system-ui, sans-serif;
  --script:  "Mistrully", "Brush Script MT", cursive;

  --wrap: 1240px;
  --pad:  clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
svg { width: 100%; height: 100%; }
li { list-style: none; }

::selection { background: var(--cyan); color: #000; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(6rem, 14vw, 12rem); position: relative; }

/* ==========================================================================
   ATMOSPHERE — film grain + vignette give the black real depth
   ========================================================================== */
.grain {
  position: fixed; inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 4%) }
  40% { transform: translate(4%, -2%) }
  60% { transform: translate(-2%, -4%) }
  80% { transform: translate(3%, 3%) }
}

.vignette {
  position: fixed; inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.75) 100%);
}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: 2.25rem;
  background: var(--ink);
  transition: opacity .7s var(--ease), visibility .7s;
}
.intro.done { opacity: 0; visibility: hidden; }

.intro__mark { text-align: center; }
.intro__esl {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 7rem);
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 0 60px var(--cyan-glow);
}
.intro__sub {
  display: block;
  margin-top: .9rem;
  font-family: var(--display);
  font-size: clamp(.6rem, 2vw, .74rem);
  letter-spacing: .58em;
  text-indent: .58em;
  text-transform: uppercase;
  color: var(--cyan);
}
.intro__bar {
  width: min(240px, 50vw);
  height: 1px;
  margin-inline: auto;
  background: var(--hair-soft);
  overflow: hidden;
}
.intro__bar i {
  display: block; height: 100%; width: 0;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  animation: load 1.5s var(--ease) forwards;
}
@keyframes load { to { width: 100% } }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem var(--pad);
  transition: padding .45s var(--ease), background .45s var(--ease),
              backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  padding-block: .85rem;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--hair-soft);
}

.nav__logo img {
  width: clamp(38px, 5vw, 46px);
  height: auto;
  transition: filter .4s var(--ease), transform .4s var(--ease);
}
.nav__logo:hover img {
  filter: drop-shadow(0 0 14px var(--cyan-glow));
  transform: scale(1.05);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.nav__links > a {
  position: relative;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__links > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links > a:hover { color: var(--white); }
.nav__links > a:hover::after { transform: scaleX(1); transform-origin: left; }


.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0;
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 10px;
  width: 24px; height: 1.5px;
  background: var(--cyan);
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
/* The photo opens the page full-bleed; the copy fades in over the lower third
   a beat later, clear of both faces. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
  padding: clamp(7rem, 14vh, 9rem) var(--pad) clamp(3.5rem, 9vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* grounds the copy without touching the faces above it */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Kept light on purpose — the per-element dark halos give the type its
     contrast locally, so this only has to ground the lower third. Pushing it
     higher or darker flattens the photograph. */
  background: linear-gradient(180deg,
      transparent 26%,
      rgba(0, 0, 0, .20) 46%,
      rgba(0, 0, 0, .58) 70%,
      rgba(0, 0, 0, .88) 100%);
}

/* Breathing cyan bloom behind the silhouettes */
.hero__bloom {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 62%;
  translate: -50% -50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  background: radial-gradient(circle,
      rgba(128, 240, 255, .30) 0%,
      rgba(18, 196, 223, .16) 32%,
      rgba(0, 120, 150, .06) 55%,
      transparent 72%);
  filter: blur(24px);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .85 }
  50%      { transform: scale(1.12); opacity: 1 }
}

/* Cursor-tracked spotlight */
.hero__spot {
  position: absolute;
  z-index: -1;
  width: 620px; height: 620px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(128,240,255,.13), transparent 62%);
  translate: -50% -50%;
  opacity: 0;
  transition: opacity .6s var(--ease);
  mix-blend-mode: screen;
}
.hero:hover .hero__spot { opacity: 1; }

/* Full-bleed: the photo fills the viewport. Its own background is pure black,
   so `lighten` dissolves it into the page — no frame, no seam, and the copy
   sits straight on top. Bleeding past every edge means no mask is needed. */
/* Full-bleed. The photo is shot on pure black, so `lighten` melts its frame
   into the page and it simply becomes the page. */
.hero__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  mix-blend-mode: lighten;
  pointer-events: none;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  opacity: 0;
  transform: scale(1.05);
  animation: heroIn 1.9s var(--ease) .15s forwards;
}
@keyframes heroIn { to { opacity: 1; transform: scale(1) } }
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-14px) }
}

.hero .reveal { transition-delay: calc(950ms + var(--d, 0) * 140ms); }

.hero__copy {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}
.hero__title { margin-inline: auto; }

.kicker {
  font-family: var(--display);
  font-size: clamp(.7rem, 1.6vw, .82rem);
  font-weight: 500;
  letter-spacing: .44em;
  text-indent: .44em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  /* small text on the brightest part of the glow — it needs the most help */
  text-shadow:
      0 0 14px rgba(128, 240, 255, .45),
      0 1px 6px rgba(0, 0, 0, 1),
      0 0 16px rgba(0, 0, 0, 1),
      0 0 34px rgba(0, 0, 0, .95);
}

.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--cyan-bright);
  line-height: .95;
  text-shadow: 0 0 34px rgba(128, 240, 255, .40);
}

.hero__title { margin-bottom: clamp(1.5rem, 3.5vw, 2rem); }
.hero__title .script {
  display: block;
  font-size: clamp(3.1rem, 7.2vw, 5.5rem);
  line-height: 1;
  /* Mistrully has a deep descender — "Strategy" needs real clearance or the
     tail crashes into the headline below it. */
  margin-bottom: clamp(.9rem, 2.6vw, 1.9rem);
  /* Cyan on a cyan-lit photo has almost no contrast, and a cyan glow only
     adds more of the same light. The dark halo underneath does the separating;
     the cyan bloom sits on top of it for the neon read. */
  text-shadow:
      0 0 10px rgba(128, 240, 255, .60),
      0 0 34px rgba(128, 240, 255, .45),
      0 2px 14px rgba(0, 0, 0, .95),
      0 0 42px rgba(0, 0, 0, .90),
      0 0 90px rgba(0, 0, 0, .75);
}
.hero__line {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 5.9rem);
  line-height: .94;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .85), 0 0 55px rgba(0, 0, 0, .65);
}
.hero__line em {
  font-style: normal;
  color: var(--cyan-bright);
  text-shadow:
      0 0 12px rgba(128, 240, 255, .70),
      0 0 40px rgba(128, 240, 255, .50),
      0 2px 16px rgba(0, 0, 0, .95),
      0 0 48px rgba(0, 0, 0, .90),
      0 0 105px rgba(0, 0, 0, .75);
}

/* A soft pool of light behind the headline. */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 42%;
  translate: -50% -50%;
  width: min(115%, 1000px);
  aspect-ratio: 2.1 / 1;
  background: radial-gradient(ellipse,
      rgba(128, 240, 255, .13) 0%,
      rgba(18, 196, 223, .06) 45%,
      transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

.hero__lede {
  max-width: 34ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
}
.hero__lede strong { color: var(--white); font-weight: 400; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem 1.1rem;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--cyan);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 2rem;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--cyan);
  overflow: hidden;
  transition: color .45s var(--ease), box-shadow .45s var(--ease),
              transform .35s var(--ease);
  box-shadow: 0 0 0 rgba(128,240,255,0);
}
.btn span, .btn svg { position: relative; z-index: 1; }
.btn svg { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover {
  color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 46px rgba(128, 240, 255, .28);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover svg { transform: translateX(5px); }

.btn--ghost {
  background: transparent;
  color: var(--cyan);
  border-color: var(--hair);
}
.btn--ghost::before { background: var(--cyan); }
.btn--ghost:hover { color: var(--ink); border-color: var(--cyan); }

/* ---------- scroll cue ---------- */
.scrollcue {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .35s var(--ease);
}
.scrollcue:hover { color: var(--cyan); }
.scrollcue i {
  display: block;
  width: 62px; height: 1px;
  background: var(--hair-soft);
  position: relative;
  overflow: hidden;
}
.scrollcue i::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cyan);
  animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%) }
  60%,100% { transform: translateX(100%) }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--hair-soft);
  padding-block: 1.15rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(128,240,255,.03), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee__track span {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  padding-right: 2.5rem;
  white-space: nowrap;
}
.marquee__track b { color: var(--cyan); font-weight: 400; padding-inline: .35em; }
@keyframes slide { to { transform: translateX(-50%) } }

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
.about__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.about__label .idx { color: var(--cyan); }
.about__label .rule {
  width: clamp(40px, 8vw, 86px);
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.sechead { margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.sechead__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(150px, .28fr) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about__grid .about__label { padding-top: .6rem; }
.about__label { margin-bottom: 0; }

.lead {
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  font-weight: 200;
  line-height: 1.62;
  color: rgba(255, 255, 255, .82);
  max-width: 34ch;
}
.lead .hi {
  color: var(--white);
  font-weight: 400;
  position: relative;
  white-space: nowrap;
}
.lead .hi::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--cyan);
  opacity: .5;
}

.about__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hair-soft);
}
.about__meta > div { display: flex; flex-direction: column; gap: .45rem; }
.about__meta b {
  font-family: var(--display);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
}
.about__meta span { color: var(--mute); font-size: .98rem; line-height: 1.5; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { background: linear-gradient(180deg, transparent, rgba(128,240,255,.022), transparent); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(2rem, 3.6vw, 2.85rem);
  background: var(--ink);
  overflow: hidden;
  transition: background .5s var(--ease);
}
.card--wide { grid-column: 1 / -1; }

/* cyan wash that rises on hover */
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 120%, rgba(128,240,255,.13), transparent 70%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
/* top hairline that draws in */
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover::after  { transform: scaleX(1); }

.card > * { position: relative; z-index: 1; }

.card__no {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--faint);
  transition: color .45s var(--ease);
}
.card:hover .card__no { color: var(--cyan); }

.card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.06;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--white);
}
.card p {
  color: var(--mute);
  font-size: .97rem;
  line-height: 1.68;
  max-width: 32ch;
}

.card__arrow {
  padding-top: .35rem;
  font-size: 1.3rem;
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card__arrow { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement {
  position: relative;
  padding-block: clamp(7rem, 18vw, 14rem);
  text-align: center;
  overflow: hidden;
  border-block: 1px solid var(--hair-soft);
}
.statement__bloom {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(120vw, 1100px);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse, rgba(128,240,255,.16), transparent 66%);
  filter: blur(30px);
  animation: breathe 11s ease-in-out infinite;
  pointer-events: none;
}
.statement__script {
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  margin-bottom: clamp(.75rem, 2vw, 1.25rem);
}
.statement__quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 6.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.statement__quote em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 48px var(--cyan-glow);
}

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.journal__note {
  max-width: 46ch;
  color: var(--mute);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}
.journal__link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--cyan);
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .2rem;
  transition: border-color .35s var(--ease), text-shadow .35s var(--ease);
}
.journal__link:hover {
  border-color: var(--cyan);
  text-shadow: 0 0 16px var(--cyan-glow);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { position: relative; overflow: hidden; }
.contact__bloom {
  position: absolute;
  left: 50%; bottom: -40%;
  translate: -50% 0;
  width: min(140vw, 1300px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(128,240,255,.13), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.contact .wrap { position: relative; z-index: 1; }

.contact__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .98;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.contact__title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 44px var(--cyan-glow);
}

.contact__mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 2.35rem);
  letter-spacing: .06em;
  color: var(--cyan);
  border-bottom: 1px solid var(--hair);
  padding-bottom: .35rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
  word-break: break-word;
  transition: border-color .4s var(--ease), text-shadow .4s var(--ease);
}
.contact__mail:hover {
  border-color: var(--cyan);
  text-shadow: 0 0 30px var(--cyan-glow);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--hair-soft);
}
.contact__grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.contact__grid b {
  font-family: var(--display);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .3rem;
}
.contact__grid span { color: var(--mute); font-size: .97rem; }
.contact__grid a {
  color: var(--mute);
  font-size: .97rem;
  transition: color .3s var(--ease);
}
.contact__grid a:hover { color: var(--cyan); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  border-top: 1px solid var(--hair-soft);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}
.foot__inner { display: grid; justify-items: center; gap: 1.1rem; }
.foot__logo { width: clamp(44px, 6vw, 54px); opacity: .9; }
.foot__tag {
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
}
.foot__copy { font-size: .82rem; color: var(--faint); letter-spacing: .04em; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links > a { font-size: .85rem; letter-spacing: .12em; }
  }

@media (max-width: 900px) {
  .nav__links > a { font-size: .85rem; letter-spacing: .12em; }

  /* ---------- hero ----------
     `cover` on a portrait viewport crops this landscape photo into an
     unreadable zoom, so on small screens the whole frame sits above the copy
     instead of behind it. */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1.25rem, 4vh, 2.25rem);
    padding: clamp(6rem, 13vh, 7.5rem) var(--pad) clamp(3rem, 7vh, 4.5rem);
  }
  .hero__figure {
    order: 1;
    position: static;
    /* Cancel the hero's side padding to reach the viewport edges exactly.
       100vw would overshoot by the scrollbar width and fight max-width:100%. */
    width: calc(100% + var(--pad) * 2);
    max-width: none;
    margin-inline: calc(var(--pad) * -1);
  }
  .hero__figure img {
    height: auto;
    object-fit: contain;
    /* the frame now has real edges against the page, so feather them away */
    -webkit-mask-image:
        linear-gradient(180deg, #000 78%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 78%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
  .hero__copy { order: 2; }
  .hero::after { display: none; }          /* nothing to scrim: no overlap */
  .hero__bloom { top: 34%; width: 170vw; }
  .scrollcue { display: none; }

  .kicker { letter-spacing: .26em; text-indent: .26em; }
  .hero__title, .hero__lede { max-width: 100%; }
  .hero__lede { max-width: 30ch; }

  /* full-width CTAs are far easier to hit than centred inline ones */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  .about__grid { grid-template-columns: 1fr; }
  .lead { max-width: 100%; }

  /* the longest service name wraps to two lines — reserve the space so
     rotating between phrases never shifts the page */
  .typer { min-height: 3.1em; }

  /* full-screen menu */
  .nav__toggle { display: block; z-index: 2; }
  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    background: rgba(0, 0, 0, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s;
    overscroll-behavior: contain;
  }
  .nav__links.open { opacity: 1; visibility: visible; }
  .nav__links > a { font-size: 1.5rem; letter-spacing: .2em; padding: .5rem 1rem; }
    }

/* ---------- touch targets ----------
   Anything tappable gets 44px of height even when the ink is smaller. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .nav__logo { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .journal__link,
  .contact__mail,
  .contact__grid a,
  .foot__meta a,
  .post__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .contact__grid > div { gap: 0; }
  .chan { padding-block: 1.15rem; }
}

@media (max-width: 560px) {
  .card--wide { grid-column: auto; }
  .hero__lede { font-size: 1rem; }
  .typer { font-size: 1.05rem; min-height: 3.3em; }
  .grp__list li { gap: .7rem; }
  .contact__mail { font-size: 1.05rem; }
  /* the grain layer is a full-screen animated repaint — not worth the battery
     on a phone, and invisible at this size anyway */
  .grain { animation: none; }
}

/* ==========================================================================
   MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__figure img { opacity: 1; transform: none; }
  .grain { display: none; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page main { padding-top: 0; }
.nav__links > a.is-active { color: var(--white); }
.nav__links > a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- page hero ---------- */
.phero {
  position: relative;
  padding: clamp(8rem, 18vh, 11rem) 0 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.phero__bloom {
  position: absolute;
  z-index: -1;
  left: 50%; top: 30%;
  translate: -50% -50%;
  width: min(130vw, 1200px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(128,240,255,.16), transparent 62%);
  filter: blur(34px);
  animation: breathe 10s ease-in-out infinite;
  pointer-events: none;
}
.phero__inner { position: relative; z-index: 1; }
.phero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: .98;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.phero__title em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0 0 40px var(--cyan-glow);
}
.phero__lede {
  max-width: 46ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
}
/* Unlike the home hero, these photos aren't all shot on pure black — several
   have a lit backdrop, so `lighten` alone would leave a hard rectangle. Feather
   the top and sides so every one of them melts into the page. */
.phero__figure {
  width: min(100vw, 1400px);
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  mix-blend-mode: lighten;
}
.phero__figure img {
  width: 100%;
  height: auto;
  -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 16%),
      linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
      linear-gradient(180deg, transparent 0%, #000 16%),
      linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- prose ---------- */
.section--tight { padding-block: 0 clamp(5rem, 11vw, 9rem); }
.prose { max-width: 62ch; }
.prose p {
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.85;
  margin-bottom: 1.4em;
}
.prose p:last-child { margin-bottom: 0; }
.prose__h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.1rem;
}
.prose__h:first-child { margin-top: 0; }

/* ---------- grouped lists ---------- */
.grps { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.grp__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--hair-soft);
}
.grp__list { display: grid; gap: 1.05rem; }
.grp__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .95rem;
  align-items: start;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(.97rem, 1.25vw, 1.06rem);
  line-height: 1.68;
  max-width: 82ch;
}
.tick {
  width: 7px; height: 7px;
  margin-top: .62em;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  rotate: 45deg;
}

/* ---------- service cards (services index) ---------- */
.scards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--hair-soft);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.scard:hover { border-color: var(--hair); transform: translateY(-4px); }
.scard__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin: -.5rem -.5rem .6rem;
  overflow: hidden;
  mix-blend-mode: lighten;
}
.scard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.scard:hover .scard__media img { transform: scale(1.05); }
.scard__no {
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .32em;
  color: var(--cyan);
}
.scard__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.scard__title em { font-style: normal; color: inherit; }
.scard__title br { display: none; }
.scard__desc { color: var(--mute); font-size: .95rem; line-height: 1.65; }
.scard__go {
  margin-top: .6rem;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: .65;
  transition: opacity .4s var(--ease);
}
.scard:hover .scard__go { opacity: 1; }

/* make the whole homepage service card clickable */
.card__link {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  height: 100%;
}

/* ---------- blog ---------- */
.posts { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.post {
  display: grid;
  grid-template-columns: minmax(180px, .32fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair-soft);
}
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post__media { display: block; mix-blend-mode: lighten; }
.post__media img { width: 100%; height: auto; }
.post__tag {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cyan);
}
.post__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: .6rem 0 .8rem;
}
.post__excerpt { color: var(--mute); max-width: 60ch; line-height: 1.7; }
.post__link {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: .88rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid var(--hair);
  padding-bottom: .2rem;
  transition: border-color .35s var(--ease), text-shadow .35s var(--ease);
}
.post__link:hover { border-color: var(--cyan); text-shadow: 0 0 16px var(--cyan-glow); }

/* ---------- closing CTA ---------- */
.endcta {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9rem);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--hair-soft);
}
.endcta__bloom {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(120vw, 1100px);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse, rgba(128,240,255,.14), transparent 66%);
  filter: blur(30px);
  animation: breathe 11s ease-in-out infinite;
  pointer-events: none;
}
.endcta .wrap { position: relative; z-index: 1; }
.endcta__script {
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---------- footer meta ---------- */
.foot__meta {
  display: grid;
  gap: .45rem;
  font-size: .9rem;
  color: var(--mute);
  line-height: 1.6;
}
.foot__meta a { transition: color .3s var(--ease); }
.foot__meta a:hover { color: var(--cyan); }

@media (max-width: 760px) {
  .post { grid-template-columns: 1fr; }
  .post__media { max-width: 260px; }
}

/* ---------- skip link ---------- */
.skip {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 10000;
  padding: .7rem 1.1rem;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ==========================================================================
   CONTACT — form + direct channels
   ========================================================================== */
.contact-sec { padding-top: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.cform__title, .chans__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair-soft);
}

.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.field label .opt { color: var(--faint); letter-spacing: .1em; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hair-soft);
  color: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
                    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: right 1.35rem center, right 1.05rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option { background: #0a0d0e; color: var(--white); }

.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--hair);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(128, 240, 255, .05);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 26px rgba(128, 240, 255, .16);
}
.field.is-bad input, .field.is-bad textarea { border-color: #ff6b6b; }
.field__err {
  min-height: 0;
  margin-top: .4rem;
  font-size: .85rem;
  color: #ff8b8b;
}

.cform__submit { margin-top: .6rem; cursor: pointer; }
.cform__note {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: var(--mute);
  line-height: 1.6;
}
.cform__note.ok { color: var(--cyan); }
.cform__note.bad { color: #ff8f8f; }

/* ---------- direct channels ---------- */
.chans { display: grid; gap: .85rem; align-content: start; }
.chan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--hair-soft);
  transition: border-color .4s var(--ease), transform .4s var(--ease),
              background .4s var(--ease);
}
.chan:hover {
  border-color: var(--hair);
  background: rgba(128, 240, 255, .04);
  transform: translateX(3px);
}
.chan__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--hair);
  color: var(--cyan);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.chan__ico svg { width: 20px; height: 20px; }
.chan:hover .chan__ico { background: var(--cyan); color: var(--ink); }
.chan__ico--wa { border-color: rgba(37, 211, 102, .45); color: #25D366; }
.chan:hover .chan__ico--wa { background: #25D366; color: var(--ink); }

.chan__body { display: grid; gap: .15rem; min-width: 0; }
.chan__body b {
  font-family: var(--display);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
}
.chan__body span {
  font-size: .96rem;
  color: rgba(255, 255, 255, .84);
  overflow-wrap: anywhere;
}

.chans__meta {
  display: grid;
  gap: .3rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-soft);
}
.chans__meta b {
  font-family: var(--display);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .3rem;
}
.chans__meta span { color: var(--mute); font-size: .95rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* honeypot — hidden from people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ---------- scroll progress ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 950;
  width: 100%;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}





/* ==========================================================================
   TYPEWRITER
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.caret {
  display: inline-block;
  width: 2px;
  height: .96em;
  margin-left: .12em;
  vertical-align: -.14em;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  animation: blink 1.05s steps(1) infinite;
}
/* hold steady while characters are landing, blink only at rest */
.is-typing .caret { animation: none; }
.caret--rest { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* rotating service line */
.typer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  min-height: 1.6em;
}
.typer__pre { color: var(--faint); }

/* the statement line types itself in place, so it must not reflow */
.statement__quote em { display: inline-block; min-height: 1em; }

/* ---------- page hero: copy centred on the photo ----------
   The contact photo is a diptych with the two figures at the outer edges and
   dark space between them, so the copy sits in that gap rather than below the
   image. The glow either side is bright, hence the scrim. */
.phero--overlay {
  display: grid;
  place-items: center;
  min-height: min(86vh, 760px);
  padding: clamp(8rem, 18vh, 11rem) var(--pad) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.phero--overlay .phero__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
}
.phero--overlay .phero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* fade the bottom edge only — the other three bleed off-screen */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
.phero--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(46% 52% at 50% 50%,
      rgba(0, 0, 0, .88) 0%,
      rgba(0, 0, 0, .70) 45%,
      rgba(0, 0, 0, .35) 72%,
      transparent 100%);
}
.phero--overlay .phero__inner { position: relative; z-index: 2; }
.phero--overlay .phero__bloom { z-index: 1; }

@media (max-width: 900px) {
  /* portrait crops the diptych down to one figure, so fall back to the
     standard stacked hero */
  .phero--overlay { display: block; min-height: 0; padding-inline: var(--pad); }
  .phero--overlay .phero__figure {
    position: static;
    width: calc(100% + var(--pad) * 2);
    max-width: none;
    margin: clamp(2.5rem, 6vh, 4.5rem) calc(var(--pad) * -1) 0;
  }
  .phero--overlay .phero__figure img {
    height: auto;
    object-fit: contain;
    /* restore the two-axis feather the overlay rule replaced */
    -webkit-mask-image:
        linear-gradient(180deg, #000 82%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 82%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
  .phero--overlay::after { display: none; }
}