/* =========================================================================
   AstraForge Company Limited — stylesheet
   v2.1.0  |  Built for Apache/LiteSpeed shared hosting (HostPinnacle cPanel)

   STRUCTURE — do not reorder these blocks. Media queries must stay LAST.
   1. Fonts (self-hosted)
   2. Tokens
   3. Base + accessibility primitives
   4. Layout: header, nav, hero, sections, footer
   5. Components
   6. Motion
   7. Media queries  (>>> ALL breakpoints live here, at the end <<<)
   ========================================================================= */

/* ============================ 1. FONTS ================================== */
/* Self-hosted. latin loads first; latin-ext only fetched if a page actually
   uses those codepoints. font-display:swap prevents invisible text on slow
   Kenyan mobile connections. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmmono-latin.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: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================ 2. TOKENS ================================= */

:root {
  --black: #050505;
  --near-black: #0b0b0b;
  --white: #f7f7f5;
  --soft-white: #deded9;

  /* Text colours. Every value below was checked against its intended
     background for WCAG 2.1 AA (4.5:1 normal text, 3:1 large text).
     The previous palette used #999995 and #666 for small text, which
     failed at 2.6:1 and 3.4:1 respectively. */
  --ink: #050505;              /* on --white   → 18.9:1 */
  --ink-soft: #55554f;         /* on --white   →  7.5:1 */
  --ink-mute: #6a6a63;         /* on --white   →  5.5:1 */
  --paper: #f7f7f5;            /* on --black   → 18.9:1 */
  --paper-soft: #b8b8b3;       /* on --black   →  9.8:1 */
  --paper-mute: #94948f;       /* on --black   →  6.2:1 */

  --line: rgba(255,255,255,.15);
  --line-strong: rgba(255,255,255,.30);
  --line-dark: rgba(0,0,0,.13);
  --line-dark-strong: rgba(0,0,0,.28);

  --silver: #bfc1c2;
  --max: 1380px;
  --header-h: 92px;
  --gutter: 8vw;
  --ease: cubic-bezier(.16,1,.3,1);

  --focus: #0b6bcb;
  --focus-on-dark: #7ec8ff;
  --danger: #a4262c;
  --success: #146c43;
}

/* ================== 3. BASE + ACCESSIBILITY PRIMITIVES ================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops in-page anchors landing underneath the fixed header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* iOS ignores overflow:hidden on <body> for scroll-locking, so the JS adds
   position:fixed and restores scrollTop on close. */
body.menu-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }

/* Visible keyboard focus. The previous build set outline:none on every form
   field and relied on a border-colour change that keyboard users cannot see. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark-section :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible,
.footer :focus-visible {
  outline-color: var(--focus-on-dark);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--black);
  color: #fff;
  padding: 12px 18px;
  font: 400 12px/1 'DM Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 260px; height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
body.pointer-fine:hover .cursor-glow { opacity: 1; }

/* ========================= 4. HEADER + NAV ============================== */
/* The previous build used mix-blend-mode:difference to keep the header
   legible over both light and dark sections. That relied on the logo file
   having an opaque black plate, inverted the mark's colour, and is unreliable
   on iOS Safari when combined with position:fixed. Replaced with an explicit
   scrolled state driven by an IntersectionObserver sentinel. */

.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 50;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.is-scrolled {
  background: rgba(5,5,5,.90);
  border-bottom-color: var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header.is-scrolled {
    background: rgba(5,5,5,.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

.brand { grid-column: 2; justify-self: center; display: block; line-height: 0; }
.brand img { width: 112px; height: 86px; object-fit: contain; display: block; }

.desktop-nav {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
}
.header-cta, .menu-toggle { grid-column: 3; justify-self: end; }

.desktop-nav a, .header-cta, .back-top {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.desktop-nav a {
  color: rgba(255,255,255,.82);
  padding: 10px 2px;
  transition: color .3s ease;
}
.desktop-nav a:hover, .desktop-nav a[aria-current="true"] { color: #fff; }

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  padding: 0 17px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.header-cta:hover { background: #fff; color: #050505; border-color: #fff; }
.header-cta span, .button span, .text-link span, .service-card a span { margin-left: 10px; }

/* 44x44 minimum touch target (WCAG 2.5.5 / Apple HIG). */
.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 0;
  padding: 12px 10px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: #fff;
  margin: 6px 0;
  transition: transform .3s var(--ease), opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--black);
  color: #fff;
  padding: calc(var(--header-h) + 30px) 8vw 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Was missing: on a 667px-tall handset six links plus padding overflowed
     the viewport with no way to reach the last item. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility .3s ease;
}
.mobile-menu.active { visibility: visible; opacity: 1; }
.mobile-menu a {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 7.5vw, 58px);
  font-style: italic;
  line-height: 1.15;
  border-bottom: 1px solid var(--line);
  padding: 14px 0 18px;
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu-foot {
  margin-top: auto;
  padding-top: 28px;
  font: 400 10px/1.8 'DM Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* ============================== 5. HERO ================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--paper);
  display: flex;
  align-items: center;
  padding: 150px var(--gutter) 120px;
  /* svh keeps the hero from jumping when mobile browser chrome collapses.
     The vh line is the fallback for browsers without svh. */
  min-height: 100vh;
  min-height: 100svh;
}
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 60px; }

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 100px 100px;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
}
.hero-line {
  position: absolute;
  height: 1px;
  width: 58vw;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: .6;
}
.hero-line::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px 5px rgba(255,255,255,.35);
  animation: scan 5s linear infinite;
}
.hero-line-one { right: -12vw; top: 29%; transform: rotate(-24deg); }
.hero-line-two { left: -15vw; bottom: 28%; transform: rotate(-24deg); }
.hero-line-two::after { animation-delay: -2.5s; }

.hero-copy { position: relative; z-index: 2; max-width: min(780px, 58vw); }

.eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.eyebrow span {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--silver);
  vertical-align: middle;
  margin-right: 12px;
}
.section:not(.dark-section) .eyebrow { color: var(--ink-mute); }

.hero h1 {
  font-size: clamp(56px, 10.5vw, 166px);
  line-height: .84;
  letter-spacing: -.065em;
  margin: 28px 0 42px;
  font-weight: 700;
}
.hero h1 em, h2 em {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.055em;
}
.hero-description {
  max-width: 570px;
  color: var(--paper-soft);
  line-height: 1.8;
  font-size: 15px;
}
.hero-actions { display: flex; gap: 12px; margin-top: 35px; flex-wrap: wrap; }

.hero-photo {
  position: absolute;
  z-index: 1;
  right: 5.5vw;
  top: 17%;
  width: min(42vw, 620px);
  height: min(58vh, 610px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
  background: #101010;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.18) 60%, rgba(0,0,0,.55));
  pointer-events: none;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transition: transform 1.2s var(--ease), filter .8s ease;
}
.hero-photo:hover img { transform: scale(1.035); filter: saturate(.92) contrast(1.05); }
.hero-photo-caption {
  position: absolute;
  z-index: 2;
  left: 20px; right: 20px; bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: var(--paper-soft);
  font: 400 9px/1.4 'DM Mono', ui-monospace, monospace;
  letter-spacing: .12em;
}
.hero-photo-caption span:last-child { color: var(--paper-mute); }

.hero-footer {
  position: absolute;
  bottom: 38px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--paper-mute);
  font: 400 9px/1.6 'DM Mono', ui-monospace, monospace;
  letter-spacing: .13em;
}
.hero-footer a { color: var(--paper-soft); }

/* =========================== 6. COMPONENTS ============================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color .45s var(--ease), border-color .45s ease;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.button:hover { color: #050505; border-color: #fff; }
.button:hover::before { transform: translateY(0); }
.button-solid { background: #fff; color: #050505; border-color: #fff; }
.button-solid::before { background: #d6d6d4; }
.button-ghost { color: #fff; }
/* Light-background variant. The old .button-solid rendered white-on-white
   when used on privacy.html. */
.button-invert { background: #080808; color: #fff; border-color: #080808; }
.button-invert::before { background: #3a3a3a; }
.button-invert:hover { color: #fff; border-color: #080808; }

.section { padding: 150px var(--gutter); }
.section-kicker {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line-dark);
  padding-top: 16px;
  margin-bottom: 100px;
  font: 400 9px/1.6 'DM Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  color: var(--ink-mute);
}

.statement-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 9vw;
  align-items: start;
}
.statement h2, .section-intro h2, .sector-heading h2,
.work h2, .insights-heading h2, .contact h2 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}
.statement-copy { padding-top: 12px; }
.statement-copy p, .section-intro > p:last-child, .work-top > p,
.insights-heading > p, .contact-copy > p {
  color: var(--ink-soft);
  line-height: 1.9;
  font-size: 15px;
  max-width: 520px;
}
.text-link {
  display: inline-block;
  margin-top: 20px;
  font: 400 10px/1 'DM Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: 9px;
}

.about-photo {
  position: relative;
  margin-top: 100px;
  height: min(62vw, 620px);
  min-height: 340px;
  overflow: hidden;
  background: #111;
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .8s ease;
}
.about-photo:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.05); }
.about-photo-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 90px 42px 38px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.about-photo-overlay span {
  font: 400 9px/1.6 'DM Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  color: var(--paper-soft);
}
.about-photo-overlay strong {
  display: block;
  max-width: 650px;
  margin-top: 14px;
  font-size: clamp(26px, 4vw, 55px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
}

.principles {
  margin-top: 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
}
.principle {
  padding: 25px 22px 10px 0;
  border-right: 1px solid var(--line-dark);
  min-height: 190px;
}
.principle:not(:first-child) { padding-left: 22px; }
.principle:last-child { border-right: 0; }
.principle span, .principle p { color: var(--ink-mute); font-size: 13px; }
.principle strong {
  display: block;
  margin: 28px 0 13px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
}
.principle p { line-height: 1.7; max-width: 230px; }

.dark-section { background: var(--black); color: var(--paper); }
.dark-section .section-kicker { border-color: var(--line); color: var(--paper-mute); }
.dark-section .eyebrow { color: var(--paper-mute); }
.dark-section .statement-copy p,
.dark-section .section-intro > p:last-child,
.dark-section .work-top > p,
.dark-section .insights-heading > p { color: var(--paper-soft); }

.services .section-intro {
  display: grid;
  grid-template-columns: .5fr 1.5fr;
  gap: 6vw;
  margin-bottom: 100px;
}
.section-intro h2 { max-width: 800px; }
.section-intro > p:last-child { align-self: end; }

.service-list { border-top: 1px solid var(--line); }
.service-card {
  display: grid;
  grid-template-columns: .12fr 1fr auto;
  gap: 35px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
  transition: background .6s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: 0; bottom: 0;
  background: rgba(255,255,255,.025);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  z-index: 0;
}
.service-card:hover::before, .service-card:focus-within::before { transform: scaleX(1); }
.service-card > * { position: relative; z-index: 1; }
.service-number { font: 400 10px/1 'DM Mono', ui-monospace, monospace; color: var(--paper-mute); }
.service-card h3 {
  font-size: clamp(28px, 3.5vw, 55px);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 22px;
  font-weight: 500;
}
.service-card p { max-width: 530px; color: var(--paper-soft); line-height: 1.75; font-size: 14px; }
.service-card a {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 0;
  font: 400 10px/1 'DM Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid var(--line-strong);
}
.service-arrow {
  font-size: 34px;
  color: var(--paper-mute);
  transition: transform .5s var(--ease), color .3s ease;
}
.service-card:hover .service-arrow { transform: translate(7px,-7px); color: #fff; }

.sector-heading { margin-bottom: 90px; }
.sector-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.sector-card {
  grid-column: span 4;
  min-height: 460px;
  border: 1px solid #d8d8d3;
  position: relative;
  overflow: hidden;
  background: var(--near-black);
}
.sector-card.large { grid-column: span 6; min-height: 620px; }
.sector-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--near-black);
  filter: saturate(.82) contrast(1.03);
  opacity: 0;
  transition: opacity .6s var(--ease), transform 1.1s var(--ease), filter .3s ease;
}
.sector-image.bg-loaded { opacity: 1; }
.sector-card:hover .sector-image { transform: scale(1.06); filter: saturate(.92) contrast(1.08); }
.sector-content {
  position: absolute;
  inset: auto 0 0;
  padding: 100px 34px 34px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.94));
}
.sector-content span {
  font: 400 9px/1.6 'DM Mono', ui-monospace, monospace;
  letter-spacing: .13em;
  color: var(--paper-soft);
}
.sector-content h3 { font-size: 30px; line-height: 1.02; letter-spacing: -.04em; margin: 14px 0; }
.sector-content p { font-size: 13px; line-height: 1.65; color: var(--paper-soft); max-width: 420px; margin: 0; }

.manifesto {
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px var(--gutter);
  background-image: linear-gradient(rgba(5,5,5,.88), rgba(5,5,5,.96)), url('../images/city-road-lights.webp');
  background-size: cover;
  background-position: center;
}
.manifesto-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 62%);
  filter: blur(20px);
  animation: breathe 8s ease-in-out infinite;
}
.manifesto-inner { max-width: 980px; position: relative; }
.manifesto-inner h2 {
  font-size: clamp(52px, 10vw, 145px);
  line-height: .85;
  letter-spacing: -.07em;
  margin: 35px 0 55px;
}
.manifesto-inner > p:last-child {
  max-width: 600px;
  margin: auto;
  color: var(--paper-soft);
  line-height: 1.9;
  font-size: 15px;
}

.work-top {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10vw;
  align-items: end;
  margin-bottom: 80px;
}
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 55px 24px; }
.project-wide { grid-column: 1 / -1; }
.project-visual {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  background-color: var(--near-black);
  background-size: cover;
  background-position: center 42%;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.project-wide .project-visual { min-height: 560px; }
.project-visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,255,255,.38);
  transform: rotate(-8deg);
  transition: transform 1s var(--ease), inset 1s var(--ease);
}
.project-visual::after {
  content: "";
  position: absolute;
  width: 55%; height: 160%;
  top: -30%; left: -15%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(20deg);
  animation: visual-sweep 7s linear infinite;
}
.project-visual span {
  position: relative;
  z-index: 2;
  font: 400 9px/1 'DM Mono', ui-monospace, monospace;
  color: var(--paper-soft);
  letter-spacing: .15em;
}
.project-meta { padding-top: 20px; }
.project-meta > span { font: 400 9px/1.6 'DM Mono', ui-monospace, monospace; color: var(--ink-mute); letter-spacing: .12em; }
.project-meta h3 { font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; margin: 12px 0 9px; }
.project-meta p { color: var(--ink-soft); line-height: 1.7; font-size: 14px; max-width: 540px; }
.project-card:hover .project-visual::before { inset: 8%; transform: rotate(0deg); }

.insights-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 10vw; margin-bottom: 100px; }
.insights-heading > p { align-self: end; }
.insight-list { border-top: 1px solid var(--line); }
.insight {
  display: grid;
  grid-template-columns: .35fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.insight > span { font: 400 9px/1.6 'DM Mono', ui-monospace, monospace; color: var(--paper-mute); letter-spacing: .12em; }
.insight h3 { font-size: clamp(20px, 2.3vw, 32px); font-weight: 400; letter-spacing: -.035em; margin: 0; }

.contact { background: #e8e8e4; position: relative; overflow: hidden; }
.contact-orbit {
  position: absolute;
  width: 700px; height: 700px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  right: -250px;
  top: 10%;
  transform: rotate(25deg) scaleY(.35);
  pointer-events: none;
}
.contact-orbit::before, .contact-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
}
.contact-orbit::after { inset: 25%; }
.contact-layout { display: grid; grid-template-columns: 1fr .75fr; gap: 12vw; }
.contact-copy { position: relative; z-index: 2; }
.contact-copy h2 { margin: 28px 0; }

.contact-details { display: flex; flex-direction: column; margin-top: 55px; }
.contact-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  min-height: 56px;
  border-bottom: 1px solid var(--line-dark-strong);
  /* The old sheet set `.contact-details a { width: fit-content }` after this
     rule, which collapsed every contact row to its content width and broke
     the three-column grid. */
  width: 100%;
  transition: padding-left .45s var(--ease);
}
.contact-item:hover { padding-left: 10px; }
.contact-icon {
  width: 40px; height: 40px;
  border: 1px solid rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s ease, border-color .4s ease;
}
.contact-icon svg {
  width: 17px; height: 17px;
  fill: none; stroke: #111;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s ease;
}
.contact-item:hover .contact-icon { background: #111; border-color: #111; }
.contact-item:hover .contact-icon svg { stroke: #fff; }
.contact-info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.contact-info small {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-arrow { font-size: 18px; color: var(--ink-mute); transition: transform .4s var(--ease), color .3s ease; }
.contact-item:hover .contact-arrow { transform: translate(4px,-4px); color: #111; }

.contact-form { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form label {
  font: 400 9px/1.4 'DM Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-form .req { color: var(--danger); margin-left: 4px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-mute);
  background: transparent;
  padding: 12px 0;
  /* 16px minimum stops iOS Safari zooming the viewport on focus. */
  font-size: 16px;
  color: var(--ink);
  border-radius: 0;
  min-height: 46px;
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form input:hover, .contact-form textarea:hover, .contact-form select:hover { border-color: var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7a7a74; }
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #222 50%),
    linear-gradient(135deg, #222 50%, transparent 50%);
  background-position: calc(100% - 6px) 55%, calc(100% - 1px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
.contact-form [aria-invalid="true"] { border-color: var(--danger); border-bottom-width: 2px; }
.field-error { font-size: 12px; color: var(--danger); min-height: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit-button { margin-top: 6px; width: fit-content; min-width: 200px; }
.submit-button[disabled] { opacity: .55; cursor: progress; }
.form-status {
  font-size: 14px;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}
.form-status:not(:empty) { padding: 14px 16px; border: 1px solid var(--line-dark-strong); }
.form-status[data-state="ok"] { color: var(--success); border-color: var(--success); background: rgba(20,108,67,.06); }
.form-status[data-state="error"] { color: var(--danger); border-color: var(--danger); background: rgba(164,38,44,.06); }
.form-note { color: var(--ink-mute); font-size: 12px; line-height: 1.6; margin: 0; }
.form-note a { text-decoration: underline; }

.footer { padding: 60px var(--gutter) 28px; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 30px;
  padding-bottom: 70px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: block; line-height: 0; }
.footer-brand img { width: 130px; height: 100px; object-fit: contain; object-position: left bottom; }
.footer-top p {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--paper-soft);
  line-height: 1.25;
  font-size: 20px;
  margin: 0;
}
.back-top { display: inline-block; padding: 10px 0; color: var(--paper-soft); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  color: var(--paper-mute);
  font: 400 10px/1.8 'DM Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-bottom a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }

/* --------------------------- Standalone pages --------------------------- */
/* Moved out of an inline <style> block in privacy.html so the page can be
   served under a Content-Security-Policy without inline exceptions. */
.doc-page { max-width: 780px; margin: 0 auto; padding: 150px 6vw 120px; }
.doc-page h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -.05em; line-height: 1; margin: 22px 0 0; }
.doc-page h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 46px 0 14px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.doc-page p, .doc-page li { color: var(--ink-soft); line-height: 1.75; font-size: 16px; }
.doc-page ul { padding-left: 20px; margin: 10px 0; }
.doc-page li { margin-bottom: 6px; }
.doc-page a:not(.button) { text-decoration: underline; }
.doc-updated {
  font: 400 11px/1.6 'DM Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: 10px;
}
.doc-back { margin-top: 56px; display: inline-flex; }
.doc-flag {
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px solid var(--line-dark-strong);
  font-size: 14px;
  color: var(--ink-soft);
  background: #efefec;
}
.error-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--gutter) 90px;
  background: var(--black);
  color: var(--paper);
}
.error-page h1 { font-size: clamp(64px, 14vw, 150px); line-height: .85; letter-spacing: -.06em; margin: 20px 0 24px; }
.error-page p { color: var(--paper-soft); max-width: 460px; font-size: 15px; line-height: 1.8; }
.error-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ============================== 7. MOTION =============================== */

@keyframes scan { from { left: 0; } to { left: 100%; } }
@keyframes breathe { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes visual-sweep { to { left: 120%; } }
@keyframes astraforgeSilverSweep { 0%,72% { left: -25%; opacity: 0; } 78% { opacity: .8; } 100% { left: 125%; opacity: 0; } }

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.service-card.reveal:nth-child(2), .principle.reveal:nth-child(2), .insight.reveal:nth-child(2) { transition-delay: .08s; }
.service-card.reveal:nth-child(3), .principle.reveal:nth-child(3), .insight.reveal:nth-child(3) { transition-delay: .16s; }
.service-card.reveal:nth-child(4), .principle.reveal:nth-child(4) { transition-delay: .24s; }

.silver-sweep { position: relative; overflow: hidden; }
.silver-sweep::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  left: -25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .silver-sweep::after { animation: astraforgeSilverSweep 7s ease-in-out infinite; }
}

/* =========================================================================
   Tap targets — WCAG 2.2 SC 2.5.8 (Target Size, Minimum: 24x24 CSS px)
   =========================================================================
   These links are set in 9-10px DM Mono and measured 13-20px tall, which
   fails the 24px minimum. They are standalone links, so the "inline in a
   sentence" exception does NOT apply to them. (It does apply to the two
   links inside the contact form-note paragraph, which are left alone.)

   The hit area is expanded with a transparent ::after overlay rather than
   with padding. Padding would push the underline away from the text and
   reflow the hero footer and the footer bar; the overlay is picked up by
   pointer hit-testing while occupying no layout space at all, so the design
   is pixel-identical and only the touchable region grows.

   Verify with document.elementFromPoint at the top and bottom edges of the
   24px band, not with getBoundingClientRect: the rect does not include the
   overlay.
   ------------------------------------------------------------------------- */
.hero-footer a,
.text-link,
.footer-bottom a,
.back-top {
  position: relative;
}

.hero-footer a::after,
.text-link::after,
.footer-bottom a::after,
.back-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 100%;
  min-height: 24px;
  transform: translateY(-50%);
  /* Transparent, and deliberately NOT pointer-events:none: this overlay is
     the expanded target. */
}

/* =========================================================================
   8. MEDIA QUERIES — must remain the last block in this file.

   In the previous build the breakpoint blocks sat in the middle of the sheet
   and were followed by unqualified `.hero-photo`, `.hero-copy`, `.about-photo`
   and `.about-photo-overlay` rules of equal specificity. Later source order
   won, so every mobile and tablet override for those selectors was dead: on
   phones the hero photo stayed absolutely positioned and sat on top of the
   headline. Keeping the breakpoints last is what fixes that.
   ========================================================================= */

@media (max-width: 1180px) {
  .hero-photo { width: 44vw; height: min(52vh, 480px); top: 20%; opacity: .82; }
  .hero-copy { max-width: 62vw; }
}

@media (max-width: 1000px) {
  :root { --header-h: 78px; }

  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }

  .hero { padding: 130px var(--gutter) 110px; }
  .hero-photo { right: 4vw; width: 46vw; height: min(46vh, 420px); top: 24%; opacity: .62; }
  .hero-copy { max-width: 74vw; }

  .statement-layout, .contact-layout { grid-template-columns: 1fr; gap: 55px; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .principle:nth-child(2) { border-right: 0; }
  .principle:nth-child(3), .principle:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .services .section-intro, .work-top, .insights-heading { grid-template-columns: 1fr; gap: 30px; }
  .sector-card, .sector-card.large { grid-column: span 6; min-height: 500px; }
  .sector-card.large { min-height: 540px; }
  .insight { grid-template-columns: .25fr 1fr; }
  .contact-orbit { display: none; }
}

@media (max-width: 650px) {
  :root { --gutter: 6vw; --header-h: 72px; }

  .brand img { width: 92px; height: 71px; }

  /* Hero switches from an absolutely-positioned photo to a stacked column. */
  .hero {
    min-height: 0;
    padding: 104px var(--gutter) 44px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-copy { position: relative; z-index: 2; max-width: none; width: 100%; }
  .hero h1 { font-size: clamp(46px, 15vw, 82px); margin: 22px 0 26px; }
  .hero-description { max-width: 100%; font-size: 15px; line-height: 1.75; }
  .hero-actions { margin-top: 28px; flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: 280px;
    margin-top: 40px;
    opacity: 1;
    z-index: 1;
  }
  .hero-photo-caption { font-size: 8px; }
  .hero-photo-caption span:last-child { display: none; }
  .hero-footer {
    position: relative;
    inset: auto;
    left: auto; right: auto; bottom: auto;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    width: 100%;
    font-size: 8px;
  }
  .hero-footer span:nth-child(2) { display: none; }

  .section { padding: 96px var(--gutter); }
  .section-kicker { margin-bottom: 60px; }
  .statement h2, .section-intro h2, .sector-heading h2,
  .work h2, .insights-heading h2, .contact h2 { font-size: clamp(36px, 10vw, 48px); }

  .about-photo { height: 380px; min-height: 0; margin-top: 64px; }
  .about-photo-overlay { padding: 80px 22px 25px; }
  .about-photo-overlay strong { font-size: 28px; }

  .principles { grid-template-columns: 1fr; margin-top: 70px; }
  .principle, .principle:not(:first-child) {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding: 24px 0;
    min-height: 0;
  }
  .principle:last-child { border-bottom: 0; }

  .service-card { grid-template-columns: 34px 1fr; gap: 10px; padding: 34px 0; }
  .service-arrow { position: absolute; right: 0; top: 34px; font-size: 26px; }
  .service-card h3 { font-size: 30px; padding-right: 34px; }

  .sector-grid { display: block; }
  .sector-card, .sector-card.large { min-height: 420px; margin-bottom: 14px; }
  .sector-content { padding: 90px 22px 26px; }
  .sector-content h3 { font-size: 27px; }

  .manifesto { min-height: 0; padding: 96px var(--gutter); }
  .manifesto-inner h2 { font-size: clamp(46px, 13vw, 70px); margin: 28px 0 40px; }
  .manifesto-glow { width: 320px; height: 320px; }

  .project-grid { grid-template-columns: 1fr; gap: 44px; }
  .project-wide { grid-column: auto; }
  .project-visual, .project-wide .project-visual { min-height: 300px; }

  .insight { grid-template-columns: 1fr; gap: 12px; }

  .contact-details { margin-top: 40px; }
  .contact-item { grid-template-columns: 40px 1fr auto; gap: 13px; }
  .submit-button { width: 100%; }

  .footer { padding: 50px var(--gutter) 26px; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; padding-bottom: 44px; }
  .footer-brand img { width: 110px; height: 85px; }
  .footer-bottom { flex-direction: column; gap: 10px; }

  .cursor-glow { display: none; }
  .doc-page { padding: 120px 6vw 90px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 42px; letter-spacing: -.05em; }
  .mobile-menu a { font-size: 28px; padding: 11px 0 14px; }
  .mobile-menu { padding-top: calc(var(--header-h) + 18px); }
}

/* Devices without a precise pointer: drop hover-only affordances so the
   layout does not depend on states that can never fire. */
@media (hover: none) {
  .cursor-glow { display: none; }
  .service-card::before { display: none; }
  .contact-item:hover { padding-left: 0; }
}

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

@media print {
  .site-header, .mobile-menu, .noise, .cursor-glow, .hero-grid, .hero-line,
  .contact-orbit, .manifesto-glow, .menu-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .dark-section, .hero, .contact { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}