/* =========================================================
   MBH ARC — Architecture, Interior & Construction
   Design system: black canvas, signal orange, heavy grotesk
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:        #0a0a0a;
  --bg-soft:   #101010;
  --card:      #161616;
  --card-hi:   #1e1e1e;
  --line:      rgba(255, 255, 255, .10);
  --line-hi:   rgba(255, 255, 255, .22);

  --orange:    #e8481f;
  --orange-hi: #ff5a2d;
  --orange-lo: #c73b16;

  --text:      #f6f5f4;
  --muted:     #9c9c99;
  --muted-dim: #6d6d6a;
  --on-orange: #fff6f2;

  --font:      'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:      'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;

  --pad:  clamp(20px, 5vw, 72px);
  --gap:  clamp(14px, 1.6vw, 24px);
  --sec:  clamp(72px, 11vw, 160px);

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Surfaces that differ between the two themes (everything on orange stays as it is). */
  --glass:      rgba(10, 10, 10, .78);      /* frosted header / name plate */
  --nav-solid:  rgba(10, 10, 10, .97);      /* mobile menu sheet */
  --hover-bg:   rgba(255, 255, 255, .06);
  --invert-bg:  #fff;                        /* "inverts on hover" buttons */
  --invert-fg:  #0a0a0a;
  --text-faint: rgba(255, 255, 255, .28);   /* marquee */
  --glow:       rgba(255, 255, 255, .05);   /* hero blob */
  --cursor:     #fff;
  --noise-opacity: .035;
  color-scheme: dark;
}

/* Light theme — toggled by the sun/moon button in the header, remembered per browser. */
html[data-theme="light"] {
  --bg:        #f5f4f1;
  --bg-soft:   #ffffff;
  --card:      #ffffff;
  --card-hi:   #ecebe7;
  --line:      rgba(0, 0, 0, .09);
  --line-hi:   rgba(0, 0, 0, .2);

  --text:      #131313;
  --muted:     #5f5f59;
  --muted-dim: #9a9a93;

  --glass:      rgba(245, 244, 241, .8);
  --nav-solid:  rgba(245, 244, 241, .97);
  --hover-bg:   rgba(0, 0, 0, .05);
  --invert-bg:  #131313;
  --invert-fg:  #fff;
  --text-faint: rgba(0, 0, 0, .22);
  --glow:       rgba(0, 0, 0, .04);
  --cursor:     #131313;
  --noise-opacity: .05;
  color-scheme: light;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: .98; letter-spacing: -.035em; }
p  { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--orange); color: #fff; }

/* Subtle film grain over the whole canvas */
.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Shared type / helpers ---------- */
.section-pad {
  position: relative;
  z-index: 2;
  padding: var(--sec) var(--pad);
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow span {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow.light { color: var(--orange-hi); }
.eyebrow-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.eyebrow-link:hover { color: var(--text); text-decoration-color: currentColor; }

.section-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 20px;
}
.section-index.light { color: var(--muted); }

h1 { font-size: clamp(2.9rem, 9.5vw, 8.5rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 5.1vw, 4.2rem); text-transform: uppercase; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: -.02em; }

h1 em, h2 em { font-style: normal; color: var(--orange); }

.lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  max-width: 62ch;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-hi);
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.text-link span { color: var(--orange); transition: transform .25s var(--ease); }
.text-link:hover { color: var(--orange); border-color: var(--orange); gap: 14px; }

/* ---------- 4. Buttons ---------- */
.button {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.button span { font-weight: 600; transition: transform .25s var(--ease); }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(232, 72, 31, .28); }
.button:hover span { transform: translate(2px, -2px); }
.button:active { transform: translateY(0); }

.button-light { --btn-bg: var(--invert-bg); --btn-fg: var(--invert-fg); }
.button-light:hover { box-shadow: 0 14px 34px rgba(128, 128, 128, .2); }
.button-light span { color: var(--orange); }

.button-dark {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1px solid var(--line-hi);
}
.button-dark:hover { --btn-bg: var(--invert-bg); --btn-fg: var(--invert-fg); border-color: var(--invert-bg); box-shadow: none; }

.button-gold { --btn-bg: var(--orange); }

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px var(--pad);
  transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; }
.site-header.is-scrolled::before { opacity: 1; }
.site-header > * { position: relative; z-index: 1; }

/* Brand wordmark — personal name, one line and one type size; surname carries the accent colour. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  margin-right: auto;
  font-family: var(--font);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}
.brand span,
.brand small { font-size: 1em; font-weight: inherit; letter-spacing: inherit; text-transform: none; }
.brand span  { color: var(--text); }
.brand small { color: var(--orange); }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  position: relative;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.main-nav a:hover { color: var(--text); background: var(--hover-bg); }
.main-nav a.is-active { color: #fff; background: var(--orange); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.header-cta span { color: var(--orange); transition: color .25s var(--ease); }
.header-cta:hover { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.header-cta:hover span { color: var(--invert-fg); }

/* Light / dark switch: the icon shows the theme you would switch to. */
.theme-toggle {
  order: 2;
  flex: 0 0 auto;            /* never squeezed by the nav links into an oval */
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover { background: var(--hover-bg); border-color: var(--text); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon, html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-sun, html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.menu-toggle {
  display: none;
  order: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  place-content: center;
  gap: 5px;
}
.menu-toggle i {
  display: block;
  width: 17px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle.is-open { background: var(--orange); border-color: var(--orange); }
.menu-toggle.is-open i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.is-open i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(130px, 17vh, 190px) var(--pad) clamp(30px, 6vh, 60px);
  overflow: hidden;
}

/* Faint architectural line grid behind the hero */
.hero-architecture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  opacity: .5;
  mask-image: radial-gradient(120% 80% at 50% 40%, #000 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, #000 15%, transparent 78%);
}
.hero-architecture span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.hero-architecture span:nth-child(1) { width: 40vw; height: 40vw; top: -12%; left: -8%;  background: rgba(232, 72, 31, .20); }
.hero-architecture span:nth-child(2) { width: 32vw; height: 32vw; bottom: -14%; right: -6%; background: rgba(232, 72, 31, .13); }
.hero-architecture span:nth-child(3) { width: 26vw; height: 26vw; top: 42%; left: 44%;   background: var(--glow); }

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-content .eyebrow { justify-content: center; }

.hero h1 { margin-bottom: 14px; }
.hero h1 em { display: block; }

.hero-role {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: clamp(.78rem, 1.25vw, 1rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange);
}
.hero-role b { color: var(--muted-dim); font-weight: 400; margin: 0 10px; }

.hero-copy {
  max-width: 56ch;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 24px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hero-text-link span { color: var(--orange); transition: color .25s var(--ease); }
.hero-text-link:hover { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.hero-text-link:hover span { color: var(--invert-fg); }


/* ---------- 7. Marquee ---------- */
.marquee {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee ul {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  flex: 0 0 auto;
  animation: slide 34s linear infinite;
}
.marquee li {
  display: flex;
  align-items: center;
  gap: 44px;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  word-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.marquee li::after { content: "◆"; font-size: .5em; color: var(--orange); }
/* The one title we want noticed: white on an orange pill, everything else stays dim. */
.marquee li.is-highlight span {
  display: inline-block;
  padding: .18em .7em;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: .82em;
  letter-spacing: .01em;
}
.marquee:hover ul { animation-play-state: paused; }

@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- 8. About / intro ---------- */
.intro { background: var(--bg); }

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--gap);
  align-items: stretch;
}

/* Portrait: crisp depth parallax. The frame stays still; the (slightly oversized) photo glides a
   few pixels with the pointer and the label glides the other way. Pure translate — no scale, no
   rotation, no blur — so the image is always rendered at full sharpness. */
.intro-portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  min-height: 460px;
  --nx: 0; --ny: 0; /* pointer position, -1..1 */
}
.intro-portrait img {
  position: absolute;
  top: -4%;
  left: -4%;
  width: 108%;
  max-width: none; /* override the global img cap so the oversize actually applies */
  height: 108%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: translate3d(calc(var(--nx) * -12px), calc(var(--ny) * -9px), 0);
  transition: transform 1.2s var(--ease);
}
.intro-portrait.is-tilting img { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.intro-portrait .photo-label {
  transform: translate3d(calc(var(--nx) * 7px), calc(var(--ny) * 5px), 0);
  transition: transform 1.2s var(--ease);
}
.intro-portrait.is-tilting .photo-label { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
/* Name plate: bold display name over a small orange title, with an orange accent rule. */
.intro-portrait .photo-label {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: grid;
  gap: 6px;
  padding: 16px 22px 16px 20px;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(10, 10, 10, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
}
.intro-portrait .photo-label strong {
  font-family: var(--font);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
}
.intro-portrait .photo-label small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-hi);
}
.intro-portrait .photo-label em {
  font-style: normal;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
}

.intro-card {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: var(--r-lg);
  background: var(--orange);
  color: var(--on-orange);
}
.intro-card .eyebrow { color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.intro-card h2 { color: #fff; }
.intro-card h2 em { color: #0a0a0a; }
.intro-card p { font-size: clamp(1rem, 1.18vw, 1.1rem); color: rgba(255, 255, 255, .93); }
.intro-card a.inline { text-decoration: underline; text-underline-offset: 4px; font-weight: 700; }
.intro-card a.inline:hover { color: #0a0a0a; }
.intro-card .text-link { color: #fff; border-color: rgba(255, 255, 255, .45); margin-top: 6px; }
.intro-card .text-link span { color: #fff; }
.intro-card .text-link:hover { color: #0a0a0a; border-color: #0a0a0a; }
.intro-card .text-link:hover span { color: #0a0a0a; }

/* Contact block inside the About card — same flat layout as the contact section, recoloured for the orange ground. */
.intro-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: start;
  width: 100%;
  margin-top: 6px;
}
/* Phone on its own line, email on the next — never side by side. */
.intro-contact .contact-phone,
.intro-contact .contact-email { display: flex; width: fit-content; color: #fff; }
.intro-contact .contact-phone::before,
.intro-contact .contact-email::before { color: #000; }
.intro-contact .contact-phone:hover,
.intro-contact .contact-email:hover { color: #000; }
.intro-contact .contact-socials { width: 100%; }
.intro-contact .contact-socials a {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}
.intro-contact .contact-socials a:hover { color: #fff; background: var(--orange); border-color: #0a0a0a; }

/* Architectural-style bullets inside the About card. */
.style-list {
  display: grid;
  gap: 8px;
  margin-top: -6px;
  padding-left: 4px;
  font-size: clamp(1rem, 1.18vw, 1.1rem);
  color: #fff;
  font-weight: 600;
}
.style-list li { display: flex; align-items: center; gap: 12px; }
.style-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a0a0a;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.stats > div {
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.stats > div:hover { background: var(--card-hi); border-color: var(--line-hi); transform: translateY(-4px); }
.stats strong {
  display: block;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}
.stats strong span { color: var(--orange); }
.stats p {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 9. Section heading ---------- */
.section-heading {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-heading p { color: var(--muted); max-width: 46ch; }


/* ---------- 10. Services (What I do) ---------- */
.services { background: var(--bg-soft); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.service-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: var(--r-lg);
  background: var(--orange);
  color: var(--on-orange);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
/* Checkerboard: orange and graphite alternate across rows, not down columns. */
.service-card:nth-child(4n+2),
.service-card:nth-child(4n+3) { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, .45); }
.service-card:nth-child(4n+2):hover,
.service-card:nth-child(4n+3):hover { background: var(--card-hi); }

.service-card h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.service-card p { font-size: .98rem; color: rgba(255, 255, 255, .9); }
.service-card:nth-child(4n+2) p,
.service-card:nth-child(4n+3) p { color: var(--muted); }
.service-card .num {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  margin-bottom: 12px;
  opacity: .7;
}
.service-card:nth-child(4n+2) .num,
.service-card:nth-child(4n+3) .num { color: var(--orange); opacity: 1; }

/* ---------- 11. Works ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.project-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 4 / 3;
}
/* The opening card — and a lone trailing card — run the full width so the
   grid always reads as complete, whatever number of projects is published. */
.project-card:first-child,
.project-card:nth-child(even):last-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}

.project-card > a,
.project-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 8, .92) 2%, rgba(8, 8, 8, .35) 42%, rgba(8, 8, 8, 0) 72%);
}
.project-card:hover img { transform: scale(1.06); }

.project-overlay {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.project-overlay span:first-child {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
}
.project-overlay span:last-child {
  opacity: 0;
  transform: translateY(-6px);
  color: #fff;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.project-card:hover .project-overlay span:last-child { opacity: 1; transform: none; }

.project-title {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 26px);
}
.project-title h3 { text-transform: uppercase; font-size: clamp(1.05rem, 1.7vw, 1.55rem); }
.project-card:first-child .project-title h3,
.project-card:nth-child(even):last-child .project-title h3 { font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
.project-title p {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.empty-projects {
  grid-column: 1 / -1;
  padding: 60px 24px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--r);
  text-align: center;
  color: var(--muted);
}

.projects-button { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- 11b. Portfolio lightbox ---------- */
.lightbox[hidden] { display: none !important; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 6, 6, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.lightbox.is-open .lightbox-figure { transform: none; }
.lightbox-img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.lightbox-caption { display: grid; gap: 4px; text-align: center; }
.lightbox-cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-hi);
}
.lightbox-title { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.lightbox-loc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: rgba(20, 20, 20, .7);
  color: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--orange); border-color: var(--orange); }
.lightbox-close { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.3rem; }
.lightbox-prev { left: clamp(12px, 2vw, 28px); }
.lightbox-next { right: clamp(12px, 2vw, 28px); }
@media (max-width: 600px) {
  .lightbox-nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
  .lightbox-prev { left: 30%; }
  .lightbox-next { right: 30%; }
}

/* ---------- 12. Toolkit ---------- */
/* Icons are short, so trim the section's bottom padding to sit closer to the next section. */
.toolkit { background: var(--bg-soft); padding-bottom: clamp(48px, 6vw, 90px); }
.tool-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px) var(--gap);
}
.tool-list li {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
/* Every icon sits on the same black plate so the set reads as one family. */
.tool-icon {
  width: clamp(64px, 6vw, 84px);
  height: auto;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 26%;
  background: #000;
  object-fit: contain;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tool-list li:hover .tool-icon { transform: translateY(-6px) scale(1.05); box-shadow: 0 18px 32px rgba(0, 0, 0, .6); }
.tool-icon-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--card-hi), var(--card));
  border: 1px solid var(--line-hi);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--orange);
}
.tool-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease);
}
.tool-list li:hover .tool-name { color: var(--text); }

/* ---------- 13. Education (inside the About card) ---------- */
.credential-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}
.credential-list li {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r);
  background: rgba(10, 10, 10, .18);
}
.credential-list strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  /* Positive tracking so initialisms like "D.A.E" stay legible in caps. */
  letter-spacing: .04em;
  line-height: 1.35;
  color: #fff;
}
.credential-list span {
  display: block;
  margin-top: 6px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .82);
}

/* ---------- 14. Process ---------- */
.process { background: var(--bg); }
.fees { background: var(--bg-soft); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
/* Four stage cards: number + arrow pinned top, then a fixed gap so every title starts on the same line. */
.process-steps li {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: clamp(40px, 5vw, 72px);
  min-height: 340px;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.process-steps li:hover { background: var(--card-hi); border-color: var(--line-hi); transform: translateY(-5px); }
.process-steps li > div:last-child { align-self: start; }
.step-top { display: flex; justify-content: space-between; align-items: center; }
.step-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--muted);
}
.step-arrow {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--orange);
  transition: transform .3s var(--ease);
}
.process-steps li:hover .step-arrow { transform: translate(3px, -3px); }
.process-steps h3 { text-transform: uppercase; margin-bottom: 12px; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.1; }
.process-steps p { color: var(--muted); font-size: .96rem; }

/* ---------- 14a. Fees ---------- */
.fees-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.fees-intro { display: grid; gap: 22px; justify-items: start; position: sticky; top: 120px; }
.fees-intro p { color: var(--muted); max-width: 48ch; }
.fee-list { border-top: 1px solid var(--line); }
.fee-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.fee-list li:hover { padding-left: 8px; }
.fee-list h3 { font-size: clamp(1.02rem, 1.25vw, 1.2rem); text-transform: uppercase; letter-spacing: -.01em; }
.fee-list p { margin-top: 6px; font-size: .9rem; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.fee-list strong {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-hi);
  white-space: nowrap;
}

/* ---------- 14b. Testimonials (sliding carousel: centre 50%, sides 25% — mbharc style) ---------- */
.testimonials { background: var(--bg); }
.faq { background: var(--bg-soft); }
.testimonial-slider { display: grid; gap: 34px; }
.testimonial-viewport { overflow: hidden; }
.testimonial-track {
  display: flex;
  align-items: center;
  transition: transform .9s var(--ease);
  will-change: transform;
}
/* While JS re-centres the loop by one lap, nothing inside may animate — the jump must be invisible. */
.testimonial-slider.is-snapping .testimonial-track,
.testimonial-slider.is-snapping .testimonial-track * { transition: none !important; }
/* Each slide is half the viewport; the two neighbours peek 25% on each side. */
.testimonial-card {
  flex: 0 0 50%;
  opacity: .35;
  transition: opacity .55s var(--ease);
}
.testimonial-card.is-active { opacity: 1; }
.testimonial-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  margin: 0 clamp(8px, 1vw, 16px);
  min-height: 300px;
  padding: clamp(26px, 2.6vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: min-height .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.testimonial-card.is-active .testimonial-inner {
  min-height: 360px;
  border-color: var(--line-hi);
  background: var(--card-hi);
}
.testimonial-card blockquote { margin: 0; }
.testimonial-card blockquote p { font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.75; color: var(--muted); transition: color .55s var(--ease); }
.testimonial-card.is-active blockquote p { color: var(--text); font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.65; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-author > span:last-child { display: grid; }
.testimonial-card strong { font-weight: 700; }
.testimonial-card small { font-size: .84rem; color: var(--muted); }
.testimonial-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card-hi);
  border: 1px solid var(--line-hi);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  transition: background .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease);
}
.testimonial-card.is-active .testimonial-avatar { background: var(--orange); border-color: var(--orange); color: #fff; }
.testimonial-dots { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.testimonial-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--muted-dim);
  cursor: pointer;
  transition: width .4s var(--ease), background .3s var(--ease);
}
.testimonial-dots button.is-active { width: 44px; background: var(--orange); }

/* ---------- 14c. FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.faq-intro { display: grid; gap: 22px; justify-items: start; position: sticky; top: 120px; }
.faq-intro p { color: var(--muted); }
.faq-intro a.inline { color: var(--text); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.faq-intro a.inline:hover { color: var(--orange); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  font-weight: 600;
  transition: color .25s var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--orange-hi); }
.faq-list details[open] summary { color: var(--text); font-weight: 700; }
.faq-list summary i {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform .4s var(--ease);
}
.faq-list summary i::before,
.faq-list summary i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: translateY(-50%);
}
.faq-list summary i::after { transform: translateY(-50%) rotate(90deg); }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-answer { padding: 0 48px 24px 0; }
.faq-answer p { color: var(--muted); max-width: 62ch; }

/* ---------- 15. Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  background: var(--bg);
}
.contact-intro { display: grid; gap: 18px; justify-items: start; position: sticky; top: 120px; }
.contact-intro h2 { font-size: clamp(2.4rem, 6.2vw, 5.2rem); }
.contact-intro p { color: var(--muted); max-width: 46ch; }

.contact-phone, .contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  transition: color .25s var(--ease);
}
.contact-phone::before, .contact-email::before {
  content: "→";
  color: var(--orange);
  font-weight: 500;
}
.contact-phone:hover, .contact-email:hover { color: var(--orange); }

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.contact-socials a {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.contact-socials a:hover { color: #fff; background: var(--orange); border-color: var(--orange); }

/* Form */
.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.contact-form label {
  display: grid;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: .98rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23e8481f' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  padding-right: 44px;
  cursor: pointer;
}
.contact-form select option { background: var(--card); color: var(--text); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted-dim); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--orange); outline: none; background: var(--bg-soft); }
.contact-form .button { justify-content: center; margin-top: 4px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* reCAPTCHA: the floating v3 badge would sit on top of the WhatsApp button, so it is hidden and the
   disclosure Google requires in that case is printed under the form instead. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { font-size: .76rem; line-height: 1.5; color: var(--muted-dim); }
.recaptcha-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.recaptcha-note a:hover { color: var(--orange); }
/* Admin login: the v2 checkbox widget. */
.contact-form .req { font-style: normal; color: var(--orange); }

.form-message {
  padding: 13px 17px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  border: 1px solid;
}
.form-message.success { color: #8ce4a8; border-color: rgba(140, 228, 168, .35); background: rgba(140, 228, 168, .08); }
.form-message.error   { color: #ff9179; border-color: rgba(255, 145, 121, .35); background: rgba(255, 145, 121, .08); }

/* ---------- 16. Footer ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 80px) var(--pad) 34px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.footer-shout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  padding-bottom: clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
}
.footer-shout h2 {
  font-size: clamp(2.6rem, 10vw, 8rem);
  color: var(--orange);
  line-height: .85;
  transition: color .3s var(--ease);
}
.footer-shout h2 a:hover { color: var(--orange-hi); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.footer-admin { color: var(--muted-dim); transition: color .25s var(--ease); }
.footer-admin:hover { color: var(--orange); }

/* ---------- 17. WhatsApp float ---------- */
.whatsapp {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #25d366;
  color: #05240f;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .28);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.whatsapp svg { width: 20px; height: 20px; flex: 0 0 auto; }
.whatsapp:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(37, 211, 102, .4); }

/* ---------- 18. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 18b. Custom cursor (pointer devices only; only active once JS adds .has-cursor) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor summary,
  body.has-cursor label, body.has-cursor input, body.has-cursor select, body.has-cursor textarea,
  body.has-cursor [role="button"] { cursor: none; }

  body.has-cursor .cursor {
    display: block;
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  body.has-cursor .cursor.is-visible { opacity: 1; }

  .cursor-dot,
  .cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
  }
  .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  }
  .cursor-ring {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--cursor);
    opacity: .8;
    transition: width .35s var(--ease), height .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  }
  /* Hovering something clickable: ring grows and tints, dot shrinks into it. */
  .cursor.is-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--orange); background: rgba(232, 72, 31, .12); }
  .cursor.is-hover .cursor-dot  { width: 4px; height: 4px; background: var(--cursor); }
  .cursor.is-down  .cursor-ring { width: 30px; height: 30px; }
  /* Over text fields: ring becomes a thin vertical I-beam bar. */
  .cursor.is-text .cursor-ring { width: 2px; height: 28px; border-radius: 2px; border-color: var(--cursor); background: var(--cursor); }
  .cursor.is-text .cursor-dot  { opacity: 0; }
}

/* ---------- 18c. Project detail page ---------- */
.project-hero { padding-top: clamp(110px, 14vh, 170px); }
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 44px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.project-back:hover { color: var(--orange); gap: 12px; }
.project-draft-note {
  display: inline-block;
  margin: 18px 0 0;
  padding: 8px 14px;
  border: 1px solid rgba(245, 196, 81, .4);
  border-radius: 999px;
  background: rgba(245, 196, 81, .1);
  color: #f5c451;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.project-head { max-width: 60ch; }
.project-head .lead { margin-top: -4px; }
.project-head h1 { font-size: clamp(2.4rem, 6vw, 5rem); margin: 12px 0 18px; }
.project-cover {
  margin: clamp(32px, 5vw, 60px) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 16 / 9;
}
.project-cover img { width: 100%; height: 100%; object-fit: cover; }

.project-body {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(40px, 6vw, 80px);
}
.project-body.no-copy { grid-template-columns: 1fr; max-width: 640px; }
.project-meta {
  display: grid;
  gap: 2px;
  position: sticky;
  top: 110px;
  border-top: 1px solid var(--line);
}
.project-body.no-copy .project-meta { position: static; }
.project-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.project-meta span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-meta strong { font-weight: 700; text-align: right; }
.project-meta-cta { margin-top: 22px; justify-content: center; }
.project-desc .project-copy { max-width: 760px; }
.project-copy p { color: var(--muted); font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.8; margin-bottom: 1.2em; }
.project-copy p:last-child { margin-bottom: 0; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.gallery-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 18px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(8,8,8,.9), transparent);
}
.project-missing { padding-top: clamp(140px, 20vh, 220px); text-align: center; }
.project-missing h1 { margin: 14px 0 16px; }
.project-missing .button { margin-top: 24px; }

@media (max-width: 860px) {
  .project-body { grid-template-columns: 1fr; }
  .project-meta { position: static; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------- 19. Admin ----------
   The admin panel has its own stylesheet (assets/css/admin.css) and no longer
   shares this file. Section number kept so the numbering above stays stable. */
/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  /* Single-column grids use minmax(0, 1fr) so a wide child (a nowrap pill, a long word) can
     never push the column — and the page — wider than the screen. */
  .intro-grid { grid-template-columns: minmax(0, 1fr); }
  /* About portrait: in one column the box is full-width, so a fixed 340px height turns the
     full-length photo into a torso crop with the face above the top edge. Give it a portrait
     ratio, anchor the crop to the top so the whole face is in frame, and cap the height so
     tablets get a head-to-waist crop rather than a 1200px-tall box. */
  .intro-portrait { min-height: 0; aspect-ratio: 3 / 4; max-height: min(78vh, 720px); }
  .intro-portrait img { object-position: 50% 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card:first-child,
  .project-card:nth-child(even):last-child { aspect-ratio: 16 / 9; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-steps li { min-height: 280px; gap: 48px; }
  .tool-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .testimonial-card { flex-basis: 62%; }
  .faq-grid, .fees-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-intro, .fees-intro { position: static; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-intro { position: static; }
}

/* Nine nav links + CTA + theme switch only fit on very wide screens: drop the CTA first (the hero
   has one), then collapse the nav. Below 1260px the full nav no longer fits beside the wordmark
   and the round theme button, so the hamburger takes over there. */
@media (max-width: 1400px) {
  .header-cta { display: none; }
}
@media (max-width: 1260px) {
  .menu-toggle { display: grid; }

  .main-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 92px var(--pad) 26px;
    background: var(--nav-solid);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s;
    /* Ten links can be taller than a landscape phone: let the panel scroll instead of cutting off. */
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open { transform: none; visibility: visible; }
  .main-nav a { padding: 14px 16px; font-size: 1rem; text-align: left; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }

  .header-cta { display: none; }

  .hero-actions { width: 100%; }
  .hero-actions > * { flex: 1 1 auto; justify-content: center; }

  .service-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card,
  .project-card:first-child,
  .project-card:nth-child(even):last-child { aspect-ratio: 4 / 3; }
  .credential-list { grid-template-columns: minmax(0, 1fr); }
  .process-steps { grid-template-columns: minmax(0, 1fr); }
  .process-steps li { min-height: 0; gap: 28px; }
  /* Mostly one review with small peeks on small screens. */
  .testimonial-card { flex-basis: 88%; }
  .testimonial-inner, .testimonial-card.is-active .testimonial-inner { min-height: 0; }

  /* iOS zooms into any field smaller than 16px on focus; keep form text at 16px on small screens. */
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; }

  .whatsapp span { display: none; }
  .whatsapp { padding: 15px; }
  .whatsapp svg { width: 24px; height: 24px; }
}

@media (max-width: 560px) {
  /* Tighten the header chrome and step the wordmark down just enough to stay on one line beside the menu button. */
  .site-header { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 1.1rem; min-width: 0; }
  .menu-toggle { width: 40px; height: 40px; flex: 0 0 auto; }
  .theme-toggle { width: 40px; min-width: 40px; height: 40px; flex: 0 0 auto; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fee rows: the nowrap price pill no longer fits beside the text on a phone — it drops
     onto its own line under the description instead of widening the page. */
  .fee-list li { flex-wrap: wrap; gap: 12px 18px; }
  .fee-list li > div { flex: 1 1 100%; }
  .fee-list li:hover { padding-left: 0; }
  .faq-answer { padding-right: 0; }
  .footer-shout { justify-content: center; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .eyebrow { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .eyebrow span { display: none; }
  .hero-role b { margin: 0 6px; }
}

/* The narrowest phones (320–360px): the wordmark must still share the header row with the menu button. */
@media (max-width: 360px) {
  .brand { font-size: .98rem; }
  .site-header { gap: 8px; }
}

/* Touch screens have no hover: show the "View project" hint on cards and give the tiny
   testimonial dots a finger-sized hit area without changing how they look. */
@media (hover: none) {
  .project-overlay span:last-child { opacity: 1; transform: none; }
}
.testimonial-dots button { position: relative; }
.testimonial-dots button::before { content: ""; position: absolute; inset: -14px -5px; } /* 36px tall, edge-to-edge with the next dot */

/* ---------- 21. 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; }
}

@media print {
  .site-header, .whatsapp, .noise, .marquee, .hero-architecture { display: none !important; }
  body { background: #fff; color: #000; }
}