/* =====================================================================
   WITTS DIGITAL — MAIN STYLESHEET
   ---------------------------------------------------------------------
   This is the ONLY stylesheet the site uses. It's organised into
   clearly labelled sections so you can find what you need:

   1.  Variables (colours, fonts, spacing) — change the whole site's
       look from here.
   2.  Reset & base element styles
   3.  Layout helpers (container, grid, section spacing)
   4.  Typography
   5.  Buttons
   6.  Header & navigation
   7.  Hero
   8.  Cards (service / portfolio / process / trust)
   9.  Forms
   10. Footer
   11. Page-specific bits (about, process timeline, portfolio filters)
   12. Utilities & animations
   13. Scroll-driven storytelling (pinned sections, --progress engine)
   14. Media queries
   15. Case study & lightbox (portfolio/[client]/ pages)

   Rebranding tip: almost every colour and font in the site is driven
   by the variables below — change a value once here and it updates
   everywhere.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES
   --------------------------------------------------------------------- */
:root {
  /* Colour palette — warm paper background, near-black ink text,
     a single confident accent colour (deep forest green). Deliberately
     avoids bright/gradient "SaaS" colours for a calmer, premium feel. */
  --color-ink: #14171a;
  --color-ink-soft: #52585e;
  --color-ink-faint: #83898f;
  --color-paper: #faf9f6;
  --color-paper-alt: #f1efe9;
  --color-line: #e2ded4;
  --color-accent: #1f4b3f;
  --color-accent-dark: #123027;
  --color-accent-soft: #e7ede9;
  --color-white: #ffffff;

  /* Extended palette (2026 visual redesign) — additive only. Nothing
     above this block is renamed, so every existing var(--color-accent)
     etc. reference elsewhere in this file keeps working untouched.
     Aliases exist so new component CSS can use clearer names without
     duplicating literal values and risking drift. */
  --color-primary: var(--color-accent);
  --color-primary-dark: var(--color-accent-dark);
  --color-secondary: #0e1512;
  --color-accent-warm: #c9a15a;
  --color-accent-warm-soft: rgba(201, 161, 90, 0.14);
  --color-highlight: #ff6a3d;
  --color-highlight-soft: rgba(255, 106, 61, 0.14);
  --color-surface: var(--color-white);
  --color-surface-dark: #16201c;
  --color-paper-soft: rgba(250, 249, 246, 0.7);
  --color-line-dark: rgba(255, 255, 255, 0.1);

  /* Spacing scale (4px base) — used by new redesign rules */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.5rem;
  --space-10: 3rem;
  --space-11: 4rem;
  --space-12: 6rem;

  /* Feedback colours (form validation) */
  --color-error: #a3312a;
  --color-error-soft: #f7e9e8;
  --color-success: #1f4b3f;

  /* Fonts */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Layout */
  --container-width: 1160px;
  --container-pad: 1.5rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --border: 1px solid var(--color-line);
  --border-dark: 1px solid var(--color-line-dark);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 160ms var(--ease);
  --transition-med: 280ms var(--ease);

  /* Shadows — used sparingly and kept soft/low-contrast */
  --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 23, 26, 0.08);
  --shadow-lg: 0 32px 64px -24px rgba(14, 21, 18, 0.4);

  /* Fluid hero type scale + tracking (new, additive — the shared
     h1–h4 clamps in section 4 are untouched, so only the hero opts
     into this larger scale) */
  --text-hero: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  --tracking-tight: -0.02em;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

table {
  border-collapse: collapse;
}

/* Respect reduced-motion preference across the whole site */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus state everywhere — never remove outline without
   replacing it, keyboard users rely on this */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: clamp(3.75rem, 7vw, 7.5rem);
}

/* Anchor-link targets (nav "Pricing"/footer "FAQs" jump here) —
   offsets the scroll landing spot so the sticky header doesn't cover
   the top of the section. */
#pricing,
#faq {
  scroll-margin-top: 96px;
}

.section-alt {
  background: var(--color-paper-alt);
}

/* Dark section — a genuine contrast band, not a light section with an
   inverted background slapped on: text, borders, cards and icons all
   get dark-appropriate variants so it reads as part of the same
   system. Used sparingly to break up long stretches of light sections. */
.section-dark {
  position: relative;
  background: var(--color-secondary);
  color: var(--color-paper-soft);
  overflow: hidden;
}

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, black, transparent 75%);
  pointer-events: none;
}

.section-dark .container {
  position: relative;
}

.section-dark .eyebrow {
  color: var(--color-accent-warm);
}

.section-dark h2,
.section-dark h3 {
  color: var(--color-white);
}

.section-dark p,
.section-dark .lede {
  color: var(--color-paper-soft);
}

.section-dark .card {
  background: var(--color-surface-dark);
  border-color: var(--color-line-dark);
}

.section-dark .card:hover {
  border-color: var(--color-accent-warm);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.5);
}

.section-dark .card-icon {
  background: var(--color-accent-warm-soft);
  color: var(--color-accent-warm);
}

.section-dark .card:hover .card-icon {
  background: var(--color-accent-warm);
  color: var(--color-secondary);
}

/* ---- "Why Choose Us" bold checklist ---- */
.why-choose-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3rem;
  margin-top: 2.5rem;
}

.why-choose-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  color: var(--color-ink);
}

.why-choose-item svg {
  width: 28px;
  height: 28px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

.section-dark .why-choose-item {
  color: var(--color-white);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.875rem;
}

.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
}

h4 {
  font-size: 1.05rem;
}

p {
  color: var(--color-ink-soft);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--color-ink-soft);
  max-width: 60ch;
}

strong {
  color: var(--color-ink);
  font-weight: 600;
}

.text-center {
  text-align: center;
}

/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--transition-med), color var(--transition-med),
    border-color var(--transition-med), transform var(--transition-med),
    box-shadow var(--transition-med);
  border: 1px solid transparent;
}

.btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
  transition-duration: 80ms;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(18, 48, 39, 0.45);
}

.btn-primary::after {
  content: "\2192";
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn-primary:hover::after {
  transform: translateX(4px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn-secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(20, 23, 26, 0.35);
}

.btn-secondary::after {
  content: "\2192";
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn-secondary:hover::after {
  transform: translateX(4px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
}

.btn-ghost:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-block {
  width: 100%;
}

.btn[disabled],
.btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ---------------------------------------------------------------------
   6. HEADER & NAVIGATION
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

/* The frosted-glass fill lives on a pseudo-element rather than directly
   on .site-header. If backdrop-filter is applied straight to the header,
   it becomes a new "containing block" for any position:fixed descendant
   (the mobile nav drawer), which breaks the drawer's full-screen sizing.
   Keeping it on ::before (not an ancestor of the drawer) avoids that.
   Glass is present at rest (a genuine "always slightly transparent"
   header) and simply intensifies once scrolled, rather than switching
   on from nothing — a subtler, more premium transition. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 246, 0.72);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  z-index: -1;
  transition: background var(--transition-med), backdrop-filter var(--transition-med);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: 0 20px 44px -28px rgba(14, 21, 18, 0.32);
}

.site-header.is-scrolled::before {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.logo .logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-links {
  display: flex;
  gap: 2.25rem;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-ink);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-med);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .bar-1 {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar-2 {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* A slightly stronger hover treatment than the generic .btn-primary,
   just for the header CTA — a hint of the warm accent layered under
   the existing green shadow, so it reads as the header's one clear
   "strong CTA" without changing its size or shape. */
.header-cta:hover {
  box-shadow: 0 4px 14px -4px rgba(201, 161, 90, 0.45),
    0 14px 28px -10px rgba(18, 48, 39, 0.45);
}

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
/* --- Hero Layout & Stage --- */
.hero-light {
  position: relative;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 6rem 0 7rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-glow--left {
  position: absolute;
  top: 15%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(31, 75, 63, 0.22) 0%, rgba(31, 75, 63, 0) 70%);
  filter: blur(40px);
}

.hero-glow--right {
  position: absolute;
  top: 10%;
  right: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 106, 61, 0.18) 0%, rgba(255, 106, 61, 0) 70%);
  filter: blur(50px);
}

/* Ambient dot/grid texture in the upper field, masked with a soft
   radial fade from the top — dark hairline grid at very low opacity,
   the light-background counterpart of the technique used on the
   site's dark sections. */
.hero-grid-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70%;
  background-image: linear-gradient(rgba(20, 23, 26, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 23, 26, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, black, transparent 75%);
}

.hero-grid-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-image:
    linear-gradient(to right, rgba(20, 23, 26, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 23, 26, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
}

.hero-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}

/* --- Stage & Device Mockups --- */
.hero-stage {
  position: relative;
  perspective: 1200px;
  min-height: 440px;
  display: flex;
  align-items: center;
  animation: hero-mockup-float 6s ease-in-out infinite;
  transition: transform 400ms var(--ease);
}

.hero-stage:hover {
  transform: scale(1.015);
}

.hero-stage:hover .desktop-bezel {
  box-shadow: 0 30px 60px -12px rgba(31, 75, 63, 0.4), 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

@keyframes hero-mockup-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage,
  .desktop-bezel {
    animation: none;
    transition: none;
  }
}

/* Desktop Monitor */
.mockup-desktop {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.desktop-bezel {
  width: 100%;
  background: #111413;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: box-shadow 400ms var(--ease);
}

.browser-bar {
  display: flex;
  align-items: center;
  background: #171d1a;
  padding: 8px 12px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-dots {
  display: flex;
  gap: 5px;
}

.browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.browser-address {
  font-size: 0.7rem;
  color: #7d8883;
  background: #0d100f;
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.desktop-screen {
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.desktop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.desktop-stand-neck {
  width: 50px;
  height: 35px;
  background: linear-gradient(to right, #404845, #6b7370, #404845);
}

.desktop-stand-base {
  width: 120px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to right, #4a524f, #7a827f, #4a524f);
  box-shadow: 0 8px 15px rgba(0,0,0,0.6);
}

/* Angled Tablet — sits behind the phone, in front of the desktop,
   offset to the lower-left of the stack. Reuses the same homepage
   screenshot as the desktop/phone mockups, just cropped taller. */
.mockup-tablet {
  position: absolute;
  left: -4%;
  bottom: -4%;
  width: 32%;
  transform: rotateY(10deg) rotateX(3deg) rotate(-5deg) scale(0.98);
  transform-style: preserve-3d;
  z-index: 4;
}

.tablet-frame {
  position: relative;
  background: #111312;
  border-radius: 16px;
  padding: 10px 8px;
  border: 2px solid #333a36;
  box-shadow: -12px 18px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tablet-screen {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.tablet-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 3D Angled Phone */
.mockup-phone {
  position: absolute;
  right: -2%;
  bottom: 10px;
  width: 30%;
  transform: rotateY(-10deg) rotateX(4deg) scale(1.02);
  transform-style: preserve-3d;
  z-index: 5;
}

.phone-frame {
  position: relative;
  background: #111312;
  border-radius: 28px;
  padding: 7px;
  border: 2px solid #333a36;
  box-shadow: -15px 20px 35px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.phone-dynamic-island {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 10px;
  background: #000;
  border-radius: 10px;
  z-index: 10;
}

.phone-screen {
  aspect-ratio: 9 / 19;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Floating Glass Badges --- */
.hero-badge {
  position: absolute;
  z-index: 10;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(18, 24, 22, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e4ece7;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.badge-modern { top: 8%; left: -3%; }
.badge-business { top: 4%; right: 14%; }
.badge-responsive { top: 24%; right: -4%; }
.badge-support {
  bottom: -11%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
}

.badge-dot {
  position: relative;
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
}

.badge-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #22c55e;
  animation: badge-dot-radar 2.2s ease-out infinite;
}

@keyframes badge-dot-radar {
  0% {
    opacity: 0.7;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-dot::after {
    animation: none;
    display: none;
  }
}

/* --- Typography & Copy Adjustments --- */
.hero-copy h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.6vw, 3.35rem);
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.accent-serif {
  font-style: italic;
  color: var(--color-accent-warm);
}

/* Hand-drawn squiggle underline, the light-bg hero's answer to the
   reference brief's underline flourish — an inline SVG wave repeated
   along the bottom of the accent phrase via background-image so it
   still lines up correctly if the phrase wraps onto two lines. */
.accent-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q 6 0 12 5 T 24 5' fill='none' stroke='%23ff6a3d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 22px 8px;
  padding-bottom: 0.2em;
}

.hero-copy .lede {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* --- Responsiveness --- */
@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero-stage {
    order: 2;
    max-width: 520px;
    margin: 0 auto;
  }
  .hero-copy {
    order: 1;
    text-align: center;
  }
  .btn-row, .hero-trust {
    justify-content: center;
  }
}

.hero-copy .eyebrow {
  opacity: 0;
  animation: hero-fade-up 700ms var(--ease) forwards;
}

/* ---- Hero entrance --------------------------------------------------
   The hero is already in view on load, so this runs immediately rather
   than waiting on IntersectionObserver — headline, supporting text,
   buttons and the trust strip stagger in once, quickly, so the page
   never feels like it's making the visitor wait. */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy h1,
.hero-copy .lede,
.hero-copy .btn-row {
  opacity: 0;
  animation: hero-fade-up 700ms var(--ease) forwards;
}

.hero-copy h1 {
  animation-delay: 60ms;
}

.hero-copy .lede {
  animation-delay: 180ms;
}

.hero-copy .btn-row {
  animation-delay: 300ms;
}

.hero-trust {
  opacity: 0;
  animation: hero-fade-up 700ms var(--ease) 400ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1,
  .hero-copy .lede,
  .hero-copy .btn-row,
  .hero-trust,
  .hero-stage {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero-trust {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  font-weight: 500;
}

.hero-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: border-color var(--transition-med), box-shadow var(--transition-med),
    transform var(--transition-med);
}

.card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 24px 44px -28px rgba(20, 23, 26, 0.28), 0 2px 10px rgba(20, 23, 26, 0.05);
  transform: translateY(-6px);
}

.card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  transition: background var(--transition-med), color var(--transition-med),
    transform var(--transition-med);
}

.card:hover .card-icon {
  background: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.08) rotate(-4deg);
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

/* Colour variants — used on the Services Overview row under the hero
   so the three icon badges don't read as one flat block of green. */
.card-icon--warm {
  background: var(--color-accent-warm-soft);
  color: var(--color-accent-warm);
}

.card:hover .card-icon--warm {
  background: var(--color-accent-warm);
  color: var(--color-white);
}

.card-icon--highlight {
  background: var(--color-highlight-soft);
  color: var(--color-highlight);
}

.card:hover .card-icon--highlight {
  background: var(--color-highlight);
  color: var(--color-white);
}

.card h3 {
  margin-bottom: 0.625rem;
}

.card p {
  font-size: 0.95rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.card-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.card-link:hover svg {
  transform: translateX(3px);
}

/* Trust / "why work with me" strip */
.trust-grid {
  grid-template-columns: repeat(4, 1fr);
}

.trust-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.trust-card p {
  font-size: 0.9rem;
}

/* Portfolio cards */
.portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem;
}

.portfolio-card {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Real client work gets an editorial, full-width treatment so it
   reads as the strongest thing on the page — the demo cards below
   stay in the plain grid, clearly secondary. */
.portfolio-card--featured {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 769px) {
  .portfolio-card--featured {
    flex-direction: row;
  }

  .portfolio-card--featured .project-window {
    aspect-ratio: auto;
    width: 56%;
    flex-shrink: 0;
    border-bottom: none;
    border-right: var(--border);
    border-radius: 0;
  }

  .portfolio-card--featured .portfolio-card-body {
    padding: clamp(2rem, 4vw, 2.75rem);
    justify-content: center;
  }

  .portfolio-card--featured h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  }

  /* One demo card spans full width for masonry-style rhythm, without
     the row-layout treatment reserved for real client work above. */
  .portfolio-card--wide {
    grid-column: 1 / -1;
  }

  .portfolio-card--wide .project-window {
    aspect-ratio: 21 / 9;
  }
}

/* ---- Portfolio project preview ------------------------------------
   A browser-window mockup rather than a bare image placeholder. Real
   screenshots can replace .project-window-screen's contents later
   (see images/README.md) — until then it shows a clean abstract
   wireframe fill instead of an apologetic "image missing" box. */
.project-window {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  border-bottom: var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.75rem;
  background: var(--color-paper-alt);
  border-bottom: var(--border);
  flex-shrink: 0;
}

.pw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-line);
  flex-shrink: 0;
}

.project-window-url {
  margin-left: 0.4rem;
  flex: 1;
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-window-screen {
  position: relative;
  flex: 1;
  padding: clamp(0.9rem, 3vw, 1.4rem);
  background: linear-gradient(160deg, var(--color-paper-alt), var(--color-white) 65%);
  overflow: hidden;
  transition: transform 500ms var(--ease);
}

.portfolio-card:hover .project-window-screen,
.featured-project:hover .project-window-screen {
  transform: scale(1.035);
}

.pw-hero {
  height: 32%;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  border: 1px solid rgba(31, 75, 63, 0.16);
  margin-bottom: 0.7rem;
}

.pw-line {
  height: 6px;
  border-radius: 4px;
  background: var(--color-line);
  margin-bottom: 0.5rem;
}

.pw-cards {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.pw-card-block {
  flex: 1;
  height: 15%;
  min-height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-line);
}

/* Gentle variation between cards so a repeated grid doesn't look like
   five identical clones. */
.portfolio-card:nth-child(3n+2) .pw-hero,
.featured-project:nth-child(3n+2) .pw-hero {
  background: var(--color-paper-alt);
  border-color: var(--color-line);
}

.portfolio-card:nth-child(3n) .pw-line,
.featured-project:nth-child(3n) .pw-line {
  background: var(--color-accent-soft);
}

/* Hover affordance for the site owner — shown only on hover, so it
   never reads as a broken/apologetic element to visitors. */
.project-window-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(20, 23, 26, 0.74);
  color: var(--color-white);
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.project-window-hint svg {
  width: 24px;
  height: 24px;
  opacity: 0.85;
}

.project-window-hint span {
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 22ch;
}

.portfolio-card:hover .project-window-hint,
.featured-project:hover .project-window-hint {
  opacity: 1;
}

/* Touch devices don't have a real hover state — a tap can leave :hover
   "stuck" on (notably iOS Safari), which would otherwise leave this
   overlay visibly stuck open. It's a note for the site owner, not
   something touch visitors need anyway. */
@media (hover: none) {
  .project-window-hint {
    display: none;
  }
}

.project-thumb-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
}

.portfolio-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-faint);
}

.portfolio-status svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .project-window-screen {
    transition: none;
  }
}

.portfolio-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.portfolio-category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.portfolio-card-body p {
  font-size: 0.9375rem;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.service-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  background: var(--color-paper-alt);
  border: 1px solid var(--color-line);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
}

.portfolio-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.portfolio-card-footer .hint {
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
}

/* ---------------------------------------------------------------------
   9. FORMS
   --------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field .hint {
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
  font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-ink);
  transition: border-color var(--transition-fast);
  width: 100%;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-ink-faint);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-field input:invalid[data-touched="true"],
.form-field textarea:invalid[data-touched="true"] {
  border-color: var(--color-error);
}

.field-error {
  font-size: 0.8125rem;
  color: var(--color-error);
  display: none;
}

.form-field[data-invalid="true"] .field-error {
  display: block;
}

.form-field[data-invalid="true"] input,
.form-field[data-invalid="true"] select,
.form-field[data-invalid="true"] textarea {
  border-color: var(--color-error);
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--color-ink-faint);
}

.form-status {
  grid-column: 1 / -1;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent);
}

.form-status.is-error {
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* ---------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--color-secondary);
  color: var(--color-paper-soft);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  position: relative;
  overflow: hidden;
}

/* A very faint version of the hero's grid texture, so the footer
   doesn't read as a flat, unrelated block bolted onto the bottom of
   every page — same technique, much lower opacity, no animation. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 0%, black, transparent 75%);
  pointer-events: none;
}

.footer-statement-row {
  position: relative;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: var(--border-dark);
}

.footer-statement {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  max-width: 20ch;
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
  border-bottom: var(--border-dark);
}

.footer-brand .logo {
  color: var(--color-white);
  margin-bottom: 0.9rem;
}

.footer-brand p {
  color: rgba(250, 249, 246, 0.6);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer-col h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-col a,
.footer-col address {
  font-size: 0.9rem;
  font-style: normal;
  color: rgba(250, 249, 246, 0.72);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-white);
}

.footer-credit-link {
  display: inline-block;
  color: var(--color-accent-warm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 250ms var(--ease), transform 250ms var(--ease), text-shadow 250ms var(--ease);
}

.footer-credit-link:hover,
.footer-credit-link:focus-visible {
  color: var(--color-highlight);
  transform: translateY(-2px);
  text-shadow: 0 0 14px rgba(255, 106, 61, 0.55);
}

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(250, 249, 246, 0.5);
}

/* ---------------------------------------------------------------------
   11. PAGE-SPECIFIC
   --------------------------------------------------------------------- */

/* Page intro banner used on inner pages */
.page-intro {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.page-intro .eyebrow {
  margin-bottom: 1rem;
}

.page-intro h1 {
  margin-bottom: 1.25rem;
}

/* Services page */
.service-block {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.service-block + .service-block {
  border-top: var(--border);
}

/* Large editorial number per service — reuses the same counter()
   technique as .process-step::before elsewhere in this file, just
   scaled up and set as a faint watermark behind the heading rather
   than a small circle badge, since a service page has room to let it
   breathe. Self-resetting on :first-of-type avoids needing an extra
   wrapper class just to scope counter-reset. */
.service-block:first-of-type {
  counter-reset: service;
}

.service-block {
  counter-increment: service;
}

.service-block::before {
  content: counter(service, decimal-leading-zero);
  position: absolute;
  top: -0.5rem;
  left: 0;
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-warm);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.service-block-heading {
  position: relative;
  z-index: 1;
}

.service-block-heading .card-icon {
  margin-bottom: 1.5rem;
}

.service-block-heading h2 {
  margin-bottom: 0.9rem;
}

.service-includes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.service-includes li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  align-items: flex-start;
}

.service-includes svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* "Quoted separately" list — visually similar to service-includes but
   muted, so it doesn't read as a second list of included items. */
.service-excludes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.service-excludes li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  align-items: flex-start;
}

.service-excludes svg {
  width: 18px;
  height: 18px;
  color: var(--color-ink-faint);
  flex-shrink: 0;
  margin-top: 2px;
}

.service-subheading {
  margin-top: 2rem;
}

/* Price badge — used on the Website Care & Support block. The amount
   is plain text, so it's a simple find-and-replace to change later. */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
}

.price-badge strong {
  color: var(--color-accent-dark);
  font-size: 1.05rem;
}

.pricing-panel {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.section-dark .pricing-panel {
  background: var(--color-surface-dark);
  border-color: var(--color-line-dark);
}

/* ---- Real pricing cards (Landing Page / Multi-page Website / Care & Support) ---- */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.pricing-card {
  position: relative;
  background: var(--color-surface-dark);
  border: var(--border-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.pricing-card--best {
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 1px var(--color-highlight), var(--shadow-lg);
}

.pricing-badge {
  position: absolute;
  top: -0.9rem;
  left: 2rem;
  background: var(--color-highlight);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.pricing-card h3 {
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.pricing-price {
  margin-bottom: 1rem;
}

.pricing-amount {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.pricing-period {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-paper-soft);
  margin-left: 0.25rem;
}

.pricing-desc {
  margin-bottom: 1.5rem;
}

.pricing-card .service-includes {
  margin-bottom: 2rem;
  flex: 1;
}

.pricing-card .service-includes svg {
  color: var(--color-accent-warm);
}

.pricing-note {
  margin-top: 2rem;
  text-align: center;
}

.pricing-note a {
  color: var(--color-accent-warm);
  font-weight: 600;
}

/* ---- "What You Get" deliverables layout ---- */
.what-you-get-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.what-you-get-layout .service-includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}

.what-you-get-note {
  margin-top: 2rem;
  font-weight: 600;
  color: var(--color-ink);
}

.pricing-panel h2 {
  margin-bottom: 0.9rem;
}

.pricing-panel .lede {
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

/* About page */
.about-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.profile-frame {
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--color-secondary), var(--color-surface-dark) 75%);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.profile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-frame-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--color-paper-soft);
  text-align: center;
  padding: 2rem;
}

.profile-frame-placeholder .icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-accent-warm-soft);
  border: 1px solid var(--color-line-dark);
  color: var(--color-accent-warm);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-frame-placeholder svg {
  width: 30px;
  height: 30px;
}

.profile-frame-placeholder span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 18ch;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.skill-tag {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-white);
  border: var(--border);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
}

.about-section + .about-section {
  margin-top: 2.5rem;
}

.about-section h2 {
  margin-bottom: 0.9rem;
}

/* Process timeline (used on home teaser + full process page) */
.process-steps {
  counter-reset: step;
}

.process-step {
  counter-increment: step;
  position: relative;
  padding-left: calc(64px + 1.75rem);
  padding-bottom: 3rem;
  min-height: 64px;
}

.process-step:last-child {
  padding-bottom: 0;
}

.process-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-accent);
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  z-index: 1;
  transform: scale(0.55);
  transition: transform 480ms var(--ease) 120ms;
}

.process-step.is-visible::before {
  transform: scale(1);
}

.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: -3px;
  width: 1px;
  background: var(--color-accent);
  opacity: 0.35;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease) 260ms;
}

.process-step.is-visible:not(:last-child)::after {
  transform: scaleY(1);
}

.process-step h3 {
  margin-bottom: 0.5rem;
  padding-top: 0.9rem;
}

.process-step p {
  font-size: 0.9375rem;
  max-width: 56ch;
}

.process-step-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}

/* Condensed process teaser on homepage — horizontal on desktop */
.process-teaser-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.process-teaser-item {
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-ink);
}

.process-teaser-item .step-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.process-teaser-item h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.process-teaser-item p {
  font-size: 0.875rem;
}

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: -55%;
  left: 50%;
  width: 620px;
  height: 620px;
  max-width: 90vw;
  max-height: 90vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(31, 75, 63, 0.55), rgba(31, 75, 63, 0) 70%);
  filter: blur(30px);
  pointer-events: none;
  animation: cta-glow-pulse 9s ease-in-out infinite;
}

/* A second, cooler-toned glow in the opposite corner — echoes the
   multi-colour orb treatment introduced in the hero, so the CTA band
   (the site's other "big moment") reads as part of the same family
   rather than the single-tone glow it used to be. */
.cta-band::after {
  content: "";
  position: absolute;
  bottom: -45%;
  right: -10%;
  width: 420px;
  height: 420px;
  max-width: 70vw;
  max-height: 70vw;
  background: radial-gradient(circle, rgba(255, 106, 61, 0.35), rgba(255, 106, 61, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: cta-glow-pulse 11s ease-in-out infinite reverse;
}

@keyframes cta-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band::before,
  .cta-band::after {
    animation: none;
  }
}

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

.cta-band h2 {
  color: var(--color-white);
  margin-bottom: 0.9rem;
}

.cta-band p {
  color: rgba(250, 249, 246, 0.72);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .btn-secondary {
  color: var(--color-white);
  border-color: rgba(250, 249, 246, 0.5);
}

.cta-band .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-ink);
}

/* Portfolio page intro note */
.notice-panel {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--color-accent-dark);
  margin-bottom: 2.5rem;
}

/* Contact page layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.contact-side .card {
  margin-bottom: 1.5rem;
  background: var(--color-secondary);
  border-color: var(--color-line-dark);
}

.contact-side .card:hover {
  border-color: var(--color-accent-warm);
}

.contact-side .card h3 {
  color: var(--color-white);
}

.contact-side .card p {
  color: var(--color-paper-soft);
}

.contact-side .card a {
  color: var(--color-accent-warm);
}

.contact-side h3 {
  margin-bottom: 0.6rem;
}

.contact-side p,
.contact-side a {
  font-size: 0.9375rem;
}

.contact-side a {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---- FAQ accordion (homepage) ----------------------------------------
   The open/close animation is pure CSS: .faq-answer is a 1-row grid
   whose track animates 0fr -> 1fr, clipped by its overflow:hidden
   inner wrapper — no JS height calculation needed. main.js only
   flips aria-expanded/aria-hidden; see "5. FAQ ACCORDION" there. */
.faq-list {
  max-width: 44rem;
}

.faq-item {
  border-bottom: var(--border);
}

.faq-item:first-child {
  border-top: var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: transform var(--transition-med), background var(--transition-med),
    color var(--transition-med), border-color var(--transition-med);
}

.faq-icon svg {
  width: 16px;
  height: 16px;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--color-highlight);
  color: var(--color-white);
  border-color: var(--color-highlight);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--ease);
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer p {
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  max-width: 58ch;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  grid-template-rows: 1fr;
}

.section-dark .faq-item {
  border-color: var(--color-line-dark);
}

.section-dark .faq-question {
  color: var(--color-white);
}

.section-dark .faq-icon {
  border-color: var(--color-line-dark);
  color: var(--color-accent-warm);
}

/* ---------------------------------------------------------------------
   12. UTILITIES & ANIMATIONS
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Portfolio cards get a slightly heavier reveal — starts a touch
   smaller as well as lower, so it "settles into place" rather than
   just fading up like the rest of the site. */
.reveal-scale {
  transform: translateY(16px) scale(0.96);
}

.reveal-scale.is-visible {
  transform: translateY(0) scale(1);
}

.reveal-group .reveal:nth-child(2) {
  transition-delay: 90ms;
}
.reveal-group .reveal:nth-child(3) {
  transition-delay: 180ms;
}
.reveal-group .reveal:nth-child(4) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   13. SCROLL-DRIVEN STORYTELLING
   ---------------------------------------------------------------------
   Three homepage sections (services, featured project, process) use
   scroll position itself to drive a pinned "reveal" sequence, in the
   spirit of Apple-style product pages. The mechanism:

     .scrolly-track   a tall wrapper (height set per-section via the
                       --stages custom property) that creates the
                       scroll distance the section stays pinned for.
     .scrolly-pin      position: sticky — stays in the viewport for
                       that whole distance. main.js updates a
                       `--progress` custom property on this element
                       every frame, and toggles is-active / is-passed
                       / is-visible on any descendant [data-stage].

   Everything pin/progress-related is scoped under html.has-scrolly, a
   class JS adds only on desktop with motion allowed. Without it
   (mobile, reduced motion, or JS not running), [data-stage] elements
   keep the plain, always-visible fallback styling defined alongside
   each section — the page still reads correctly, just without the
   pinning. The max-width query below is a second safety net that
   forces the same fallback if the window is resized narrower without
   a reload.
   --------------------------------------------------------------------- */
.scrolly-pin {
  --progress: 0;
}

/* Track height = number of stages x however much scroll distance each
   stage should get. Both are set inline per-section (--stages is also
   read by JS, --stage-vh defaults if a section doesn't set its own —
   longer for sections that want a slower, more cinematic pace). */
html.has-scrolly .scrolly-track {
  height: calc(var(--stages, 3) * var(--stage-vh, 75vh));
}

html.has-scrolly .scrolly-pin {
  position: sticky;
  top: 76px;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 860px) {
  .scrolly-track {
    height: auto !important;
  }

  .scrolly-pin {
    position: static !important;
    min-height: auto !important;
  }
}

/* ---- Section 1: sticky services -------------------------------------
   Fallback: a plain 3-card grid, fully visible, identical content.
   Enhanced: left intro stays put; right side becomes a list where the
   active service is highlighted and the rest sit dimmed. */
.services-scrolly-grid {
  width: 100%;
}

.services-scrolly-intro .lede {
  margin-bottom: 0;
}

.services-scrolly-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.services-scrolly-panel {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  opacity: 1;
}

.services-scrolly-index {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-warm);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  transition: opacity var(--transition-med), color var(--transition-med);
}

.services-scrolly-panel:hover .services-scrolly-index {
  opacity: 1;
  color: var(--color-accent);
}

.scrolly-dots {
  display: none;
}

html.has-scrolly .services-scrolly-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

html.has-scrolly .services-scrolly-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

html.has-scrolly .services-scrolly-panel {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding-block: 1.75rem;
  opacity: 0.4;
  transform: scale(0.97);
  transform-origin: left center;
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}

html.has-scrolly .services-scrolly-panel:last-child {
  border-bottom: 1px solid var(--color-line);
}

html.has-scrolly .services-scrolly-panel.is-active {
  opacity: 1;
  transform: scale(1);
}

html.has-scrolly .services-scrolly-panel .card-icon {
  transition: background var(--transition-med), color var(--transition-med);
}

html.has-scrolly .services-scrolly-panel.is-active .card-icon {
  background: var(--color-accent);
  color: var(--color-white);
}

html.has-scrolly .services-scrolly-panel.is-active .services-scrolly-index {
  opacity: 1;
  color: var(--color-accent);
}

html.has-scrolly .scrolly-dots {
  display: flex;
  gap: 0.6rem;
  margin-top: 2.25rem;
}

html.has-scrolly .scrolly-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  transition: background var(--transition-med), transform var(--transition-med);
}

html.has-scrolly .scrolly-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.35);
}

/* ---- Section 2: pinned portfolio showcase -----------------------------
   Fallback: a plain two-column "featured project" card, fully visible
   (the stage-0 teaser line is hidden — the section heading above
   already covers that job when nothing is pinning).
   Enhanced: the mockup pins and scales continuously with scroll
   progress; the copy reveals in stages — teaser, then title, then
   description, then tags/status accumulate underneath it. */
.showcase-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.showcase-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Combined-class selector (not just .showcase-window) so this reliably
   beats the plain .case-study-hero-image rule regardless of source
   order — this image is the site's single largest portfolio moment,
   it should read a level more premium than a standard case-study
   inline image. */
.case-study-hero-image.showcase-window {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.showcase-stage {
  opacity: 1;
}

.showcase-stage[data-stage="0"] {
  display: none;
}

html.has-scrolly .showcase-stage[data-stage="0"] {
  display: flex;
}

html.has-scrolly .showcase-grid {
  width: 100%;
  grid-template-columns: 1.5fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

html.has-scrolly .showcase-window {
  transform: scale(calc(0.92 + var(--progress) * 0.08));
  will-change: transform;
}

html.has-scrolly .showcase-copy {
  position: relative;
  min-height: 280px;
  justify-content: center;
}

html.has-scrolly .showcase-stage {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

html.has-scrolly .showcase-stage[data-stage="0"] {
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
}

html.has-scrolly .showcase-stage[data-stage="0"].is-active {
  opacity: 1;
  transform: translateY(0);
}

html.has-scrolly .showcase-stage:not([data-stage="0"]).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Section 3: scroll-driven process ---------------------------------
   Fallback: identical to the original process-teaser-grid — a plain
   5-column grid, fully visible.
   Enhanced: a progress line fills in above the row as you scroll; the
   step whose turn it is gets a solid number circle and full opacity,
   the rest sit dimmed. */
.process-scrolly-line {
  display: none;
}

html.has-scrolly .process-scrolly-line {
  display: block;
  position: relative;
  height: 2px;
  background: var(--color-line);
  margin-block: 3rem 2.5rem;
  border-radius: 1px;
}

html.has-scrolly .process-scrolly-line-fill {
  position: absolute;
  inset: 0;
  width: calc(var(--progress) * 100%);
  background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
  border-radius: 1px;
}

html.has-scrolly .process-teaser-item {
  border-top: none;
  padding-top: 0;
  opacity: 0.4;
  transform: scale(0.96);
  transform-origin: top center;
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}

html.has-scrolly .process-teaser-item.is-active {
  opacity: 1;
  transform: scale(1);
}

html.has-scrolly .process-teaser-item .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  background: var(--color-paper);
  margin-bottom: 1rem;
  transition: background var(--transition-med), color var(--transition-med),
    transform var(--transition-med);
}

html.has-scrolly .process-teaser-item.is-active .step-number {
  transform: scale(1.06);
}

html.has-scrolly .process-teaser-item.is-active .step-number {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   14. MEDIA QUERIES
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-teaser-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .services-scrolly-panels {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .profile-frame {
    position: static;
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .nav-links,
  .nav-cta,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 400;
    overflow-y: auto;
    background: var(--color-paper);
    border-top: 1px solid var(--color-line);
    padding: 1.5rem var(--container-pad) 2.5rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-med), transform var(--transition-med),
      visibility var(--transition-med);
  }

  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .site-nav .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .site-nav .nav-links a {
    display: block;
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-line);
  }

  .site-nav .nav-links a::after {
    display: none;
  }

  .site-nav .nav-cta {
    display: block;
    margin-top: 1.5rem;
  }

  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
  }

  .grid-3,
  .grid-4,
  .trust-grid,
  .portfolio-grid,
  .process-teaser-grid,
  .services-scrolly-panels,
  .why-choose-list,
  .pricing-cards,
  .what-you-get-layout {
    grid-template-columns: 1fr;
  }

  .what-you-get-layout .service-includes {
    grid-template-columns: 1fr;
  }

  .service-block {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.full {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.25rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

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

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   15. CASE STUDY & LIGHTBOX
   ---------------------------------------------------------------------
   Used by /portfolio/[client]/ case study pages. Deliberately reuses
   existing tokens (colours, radius, shadows, fonts) rather than
   introducing anything new — this should feel like the rest of the
   site, not a separate template. Responsive overrides live in their
   own media queries at the end of this section rather than being
   folded into the consolidated blocks above, since this is a
   self-contained, occasionally-added component rather than part of
   the core page set.
   --------------------------------------------------------------------- */

/* ---- Hero ---- */
.case-study-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}

.case-study-hero .eyebrow {
  margin-bottom: 1rem;
}

.case-study-hero h1 {
  margin-bottom: 0.5rem;
}

.case-study-hero .service-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.case-study-hero .lede {
  margin-bottom: 2rem;
}

.case-study-hero-image {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.case-study-hero-image.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.case-study-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Meta strip (client / service / industry / project) ---- */
.case-study-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-block: clamp(2rem, 4vw, 2.5rem);
  border-top: var(--border);
  border-bottom: var(--border);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}

.case-study-meta-item .label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: 0.4rem;
}

.case-study-meta-item .value {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}

/* ---- Story sections (Challenge / Solution / Result) ---- */
.case-study-story {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
}

.case-study-story + .case-study-story {
  border-top: var(--border);
}

.case-study-story-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.case-study-story p {
  max-width: 64ch;
}

.case-study-story p + p {
  margin-top: 1rem;
}

/* ---- Editorial image gallery ---- */
.case-study-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}

.case-study-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.case-study-figure {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-study-figure figcaption {
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
  font-weight: 500;
}

.case-study-image {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border);
  background: var(--color-paper-alt);
  cursor: zoom-in;
  width: 100%;
}

.case-study-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}

.case-study-image:hover img,
.case-study-image:focus-visible img {
  transform: scale(1.035);
}

.case-study-image.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}

.case-study-image.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Before / after ---- */
.case-study-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}

.case-study-ba-item {
  position: relative;
}

.case-study-ba-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
}

.case-study-ba-item .case-study-image {
  aspect-ratio: 4 / 3;
}

/* ---- Live-site link row ---- */
.case-study-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 23, 26, 0.94);
  padding: clamp(1.5rem, 5vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.lightbox img.is-visible {
  opacity: 1;
  transform: scale(1);
}

.lightbox-caption {
  color: rgba(250, 249, 246, 0.78);
  text-align: center;
  margin-top: 1.1rem;
  font-size: 0.875rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: var(--color-white);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg {
  width: 20px;
  height: 20px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close {
  top: -3.25rem;
  right: 0;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: -1rem;
}

.lightbox-next {
  right: -1rem;
}

@media (prefers-reduced-motion: reduce) {
  .case-study-hero-image,
  .case-study-image.reveal,
  .lightbox,
  .lightbox img {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .case-study-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }
}

@media (max-width: 860px) {
  .case-study-story {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .case-study-row-2,
  .case-study-before-after {
    grid-template-columns: 1fr;
  }

  .lightbox-prev {
    left: 0;
  }

  .lightbox-next {
    right: 0;
  }
}

@media (max-width: 560px) {
  .case-study-meta {
    grid-template-columns: 1fr;
  }
}