/* ==========================================================================
   UDYVERSE AUTOMATES — STYLESHEET
   --------------------------------------------------------------------------
   How this file is organised:
     1. Design tokens (CSS variables)  ← change brand colors & fonts here
     2. Reset & base
     3. Typography
     4. Layout (container & sections)
     5. Reusable components (eyebrow, section heading, buttons)
     6. Accessibility helpers
     (Section-specific styles are added below in later stages.)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Variables are defined on :root (the whole page) so every rule can use them
   with var(--name). Change a value here and it updates everywhere.
   ========================================================================== */
:root {
  /* ---- Brand colors ---- */
  --color-navy:          #0B0F1A;  /* Midnight navy — main background      */
  --color-navy-surface:  #141A2B;  /* Slightly lighter navy — cards, nav    */
  --color-gold:          #D4A017;  /* Mustard gold — THE brand accent       */
  --color-gold-light:    #E3B53A;  /* Brighter gold — hover states          */
  --color-gold-deep:     #8A6A0C;  /* Darker gold — readable on ivory       */
  --color-ivory:         #F8F6F1;  /* Light sections background             */
  --color-offwhite:      #F5F3EE;  /* Main text on navy                     */
  --color-muted:         #9AA3B5;  /* Secondary text on navy                */
  --color-ink:           #1A1D26;  /* Main text on ivory                    */
  --color-ink-muted:     #5A6070;  /* Secondary text on ivory               */

  /* Subtle lines/borders (semi-transparent so they work on any background) */
  --color-line:          rgba(245, 243, 238, 0.10);
  --color-line-gold:     rgba(212, 160, 23, 0.35);

  /* ---- Typography ---- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Fluid font sizes: clamp(MIN, PREFERRED, MAX)
     The size grows with the screen width (vw) but never goes below MIN
     or above MAX — so text looks right on phones AND large monitors. */
  --text-sm:   0.875rem;                              /* 14px */
  --text-base: 1rem;                                  /* 16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h3:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-h2:   clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-h1:   clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

  /* ---- Spacing scale (use these instead of random numbers) ---- */
  --space-2xs: 0.25rem;  /*  4px */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-section: clamp(4.5rem, 3rem + 6vw, 7.5rem); /* 72px → 120px */

  /* ---- Layout ---- */
  --container-width:  1200px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 4vw, 2rem);  /* side padding on small screens */

  /* ---- Details ---- */
  --radius:      4px;     /* subtle corners feel more refined than round ones */
  --radius-lg:   12px;
  --shadow-soft: 0 20px 50px -20px rgba(0, 0, 0, 0.45);
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);  /* smooth, elegant easing */
  --duration:    0.35s;
}


/* ==========================================================================
   2. RESET & BASE
   Removes inconsistent browser defaults.
   ========================================================================== */

/* Make width/height include padding & border — far easier to reason about */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;        /* menu links glide to sections */
  scroll-padding-top: 5rem;       /* stop sections hiding under the fixed nav */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-navy);
  color: var(--color-offwhite);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* prevents sideways scrolling on mobile */
}

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

/* Lists that have a class are layout lists (menus, grids) — remove bullets */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

/* Form elements don't inherit fonts by default — fix that */
button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;             /* evens out line lengths in headings */
}

h1 { font-size: var(--text-h1); line-height: 1.08; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

/* Italic words inside headings become gold — a signature editorial touch.
   Example in HTML: <h1>Automate the busywork. <em>Scale what matters.</em></h1> */
h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold);
}

p {
  max-width: 65ch;                /* comfortable reading width (~65 characters) */
  text-wrap: pretty;
}

/* Text selection color */
::selection {
  background: var(--color-gold);
  color: var(--color-navy);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* The container keeps content centered with a maximum width */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;            /* centers horizontally */
  padding-inline: var(--gutter);  /* side breathing room on small screens */
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* Every main section gets the same generous vertical spacing */
.section {
  padding-block: var(--space-section);
}

/* Light (ivory) sections — add class="section section--light" in the HTML.
   Colors are switched so text stays readable on the light background. */
.section--light {
  background-color: var(--color-ivory);
  color: var(--color-ink);
}


/* ==========================================================================
   5. REUSABLE COMPONENTS
   ========================================================================== */

/* ---- Eyebrow: the small gold label above headings ("01 — Services") ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* A thin gold line before the eyebrow text — a refined editorial detail */
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: currentColor;
}

.section--light .eyebrow {
  color: var(--color-gold-deep);  /* bright gold is hard to read on ivory */
}

/* ---- Section heading block (eyebrow + h2 + intro paragraph) ---- */
.section-heading {
  max-width: 680px;
  margin-bottom: var(--space-xl);
}

.section-heading h2 {
  margin-bottom: var(--space-sm);
}

.section-heading p:not(.eyebrow) {
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.section--light .section-heading p:not(.eyebrow) {
  color: var(--color-ink-muted);
}

/* ---- Buttons ----
   Base style is .btn; add a variant: .btn-primary (gold) or .btn-outline.
   Sizes: .btn-small, .btn-full (full width). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

/* Gold button with navy text — the main call to action */
.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.btn-primary:hover {
  background-color: var(--color-gold-light);
  transform: translateY(-2px);    /* gentle lift */
  box-shadow: 0 12px 30px -10px rgba(212, 160, 23, 0.55);
}

/* Transparent button with a thin border — the secondary action */
.btn-outline {
  background-color: transparent;
  border-color: var(--color-line-gold);
  color: var(--color-offwhite);
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.btn-small {
  padding: 0.7rem 1.25rem;
  font-size: 0.8125rem;
}

.btn-full {
  width: 100%;
}


/* ==========================================================================
   6. ACCESSIBILITY HELPERS
   ========================================================================== */

/* Visible gold outline when navigating with the keyboard (Tab key) */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* "Skip to main content" link: off-screen until focused with the Tab key */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;                     /* above the fixed navbar */
  padding: 0.75rem 1.25rem;
  background-color: var(--color-gold);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* The skip link moves focus to <main>; no outline needed around the whole page */
main:focus {
  outline: none;
}

/* Respect visitors who ask their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   7. NAVIGATION BAR
   ========================================================================== */

/* Fixed to the top of the screen while the page scrolls underneath */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* The frosted background lives on a pseudo-element (::before) and fades in
   on scroll. Why not on the header itself? A "backdrop-filter" on the header
   would trap the full-screen mobile menu inside the header's 80px height. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(11, 15, 26, 0.94);  /* high enough to stay navy over ivory sections */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

/* JavaScript adds .is-scrolled once the visitor scrolls down */
.site-header.is-scrolled::before {
  opacity: 1;
}

/* Flexbox lays the logo, links and button out in a single row */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo left, links right */
  height: 5rem;                    /* 80px */
}

/* ---- Logo / wordmark ---- */
.logo {
  position: relative;
  z-index: 2;                      /* stays above the open mobile menu */
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-offwhite);
}

.logo em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold);
}

/* Official logo image in the navbar.
   Only the height is set; "width: auto" keeps the original proportions. */
.nav .logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 44px;
  width: auto;
  transition: opacity var(--duration) var(--ease);
}

.logo:hover .logo-img {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .logo-img {
    height: 36px;                  /* slightly smaller on phones */
  }
}

/* ---- Desktop links ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

/* Smaller laptops: slightly tighter spacing so all links fit on one line */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-links {
    gap: 1.5rem;
  }
}

.nav-links a:not(.btn) {
  position: relative;
  padding-block: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  transition: color var(--duration) var(--ease);
}

/* Elegant gold underline that draws in from left to right on hover */
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration) var(--ease);
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible {
  color: var(--color-offwhite);
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;                     /* 44px = comfortable finger tap size */
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-offwhite);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

/* When open, the three lines morph into an "X" */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---- Mobile & tablet: switch to the full-screen menu ---- */
@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 0;                      /* cover the whole screen */
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    background-color: var(--color-navy);
    /* Hidden by default. "visibility: hidden" also stops keyboard users
       tabbing into links they can't see. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility var(--duration);
  }

  /* JavaScript adds .is-open when the hamburger is clicked */
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links a:not(.btn) {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-offwhite);
  }

  .nav-links .btn {
    margin-top: var(--space-sm);
    padding: 0.95rem 1.9rem;
    font-size: var(--text-sm);
  }
}

/* Stop the page scrolling behind the open mobile menu */
body.menu-open {
  overflow: hidden;
}


/* ==========================================================================
   8. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;               /* fallback for older browsers */
  min-height: 100svh;              /* full screen height, mobile-safe */
  padding-block: 8rem 5rem;        /* top leaves room for the fixed navbar */
  overflow: hidden;
}

/* Soft gold glow in the top-right corner */
.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  right: -260px;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.13) 0%, transparent 62%);
  pointer-events: none;
}

/* Faint "blueprint" grid that fades out towards the edges */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 65%);
  mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}

/* Two columns: text (slightly wider) + visual.
   "fr" = a fraction of the available space. */
.hero-grid {
  position: relative;
  z-index: 1;                      /* sits above the glow and grid */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-xl);
}

.hero h1 {
  max-width: 13ch;                 /* keeps the headline in elegant, short lines */
}

.hero-lead {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;                 /* buttons stack if there isn't room */
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---- Entrance animation: content fades up, one item after another ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-content > * {
  animation: fade-up 0.9s var(--ease) both;
}
.hero-content > :nth-child(1) { animation-delay: 0.10s; }
.hero-content > :nth-child(2) { animation-delay: 0.20s; }
.hero-content > :nth-child(3) { animation-delay: 0.35s; }
.hero-content > :nth-child(4) { animation-delay: 0.50s; }

/* ---- Workflow visual ---- */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  animation: fade-in 1.4s var(--ease) 0.4s both;
}

.workflow .orbit {
  stroke: var(--color-line);
  stroke-width: 1;
}

.workflow .orbit-outer {
  stroke-dasharray: 2 8;
  transform-box: view-box;
  transform-origin: 260px 260px;
  animation: spin 120s linear infinite;   /* very slow, barely noticeable */
}

.workflow .links path {
  stroke: var(--color-line-gold);
  stroke-width: 1;
}

/* Short gold dashes that travel along each line towards the hub.
   Moving stroke-dashoffset slides the dash pattern along the path. */
.workflow .flows path {
  stroke: var(--color-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 3 12;
  animation: flow 2.4s linear infinite;
}

.workflow .hub {
  fill: var(--color-navy-surface);
  stroke: var(--color-gold);
  stroke-width: 1.25;
}

.workflow .hub-letter {
  fill: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 36px;
  font-style: italic;
  font-weight: 500;
}

.workflow .node-dot {
  fill: var(--color-gold);
}

.workflow .node-ring {
  fill: var(--color-navy);
  stroke: var(--color-line-gold);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 4.2s var(--ease) infinite;
  animation-delay: var(--delay, 0s);     /* each node pulses at a different time */
}

.workflow .node-label {
  fill: var(--color-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Floating status card ---- */
.hero-badge {
  position: absolute;
  left: 50%;                        /* centred under the hub, in the gap between */
  bottom: 0;                        /* the "Invoices" and "Email" points */
  transform: translateX(-50%);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background-color: rgba(20, 26, 43, 0.75);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.hero-badge strong {
  display: block;
  font-weight: 600;
  color: var(--color-offwhite);
}

.badge-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.18);
}

/* ---- Hero animations ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes flow {
  to { stroke-dashoffset: -30; }   /* a multiple of the dash pattern (3+12) for a seamless loop */
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* ---- Hero: tablet & mobile ---- */
@media (max-width: 960px) {
  .hero {
    min-height: auto;
    padding-block: 8rem var(--space-section);
  }

  .hero-grid {
    grid-template-columns: 1fr;    /* stack: text on top, visual below */
    gap: var(--space-xl);
  }

  .hero h1 {
    max-width: 15ch;
  }

  .hero-visual {
    max-width: 440px;
    margin-inline: auto;           /* centre the visual */
  }
}

@media (max-width: 480px) {
  .hero-actions .btn {
    width: 100%;                   /* full-width buttons are easier to tap */
  }

  .hero-badge {
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

/* ---- Reduced motion: switch hero animations off entirely ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .hero-visual,
  .workflow .orbit-outer,
  .workflow .flows path,
  .workflow .node-ring {
    animation: none;
  }
}


/* ==========================================================================
   9. SHARED SECTION HELPERS
   ========================================================================== */

/* Centered heading variant — add class="section-heading section-heading--center" */
.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--center p:not(.eyebrow) {
  margin-inline: auto;
}

/* Centered eyebrows get a matching line on both sides: — 04 — TESTIMONIALS — */
.section-heading--center .eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: currentColor;
}

/* When two ivory sections sit next to each other, separate them with a hairline */
.section--light + .section--light {
  border-top: 1px solid rgba(26, 29, 38, 0.08);
}

/* On ivory, bright gold focus outlines are too faint — use the deeper gold */
.section--light :focus-visible {
  outline-color: var(--color-gold-deep);
}

/* Small print used to label sample content honestly */
.sample-note {
  margin: var(--space-lg) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-ink-muted);
}


/* ==========================================================================
   10. TRUST STRIP — "Expertise across …"
   ========================================================================== */
.trust {
  border-block: 1px solid var(--color-line);
  background-color: rgba(20, 26, 43, 0.45);
}

/* Label on the left, a thin vertical divider, then the moving tool list */
.trust-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: 1.75rem;
}

.trust-label {
  flex-shrink: 0;
  padding-right: var(--space-lg);
  border-right: 1px solid var(--color-line);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* The "window" the tools scroll through. The mask fades both edges softly,
   so names glide in and out instead of being cut off abruptly. */
.trust-marquee {
  flex: 1;
  min-width: 0;                       /* lets the window shrink inside the flex row */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* The track holds two identical lists side by side. Moving it left by exactly
   half its width (one list) and repeating creates a seamless, endless loop. */
.trust-track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}

/* Pause when the visitor hovers, so names can be read at leisure */
.trust-marquee:hover .trust-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.trust-list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

/* Tool names in italic serif — an editorial "as seen in" feel */
.trust-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;                /* "Google Workspace" never breaks in two */
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-muted);
}

/* A small gold diamond after EVERY item (including the last), so the
   spacing stays perfectly even where the loop joins back to the start */
.trust-list li::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-inline: clamp(1.5rem, 2.5vw, 2.25rem);
  background-color: var(--color-gold);
  opacity: 0.6;
  transform: rotate(45deg);
}

/* Tablet & phones: label on top, full-width marquee below */
@media (max-width: 960px) {
  .trust-inner {
    flex-direction: column;
    gap: var(--space-sm);
    padding-block: 1.5rem;
  }

  .trust-label {
    padding-right: 0;
    border-right: none;
  }

  .trust-marquee {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .trust-list li {
    font-size: 1rem;
  }

  .trust-track {
    animation-duration: 35s;          /* shorter row on phones, so keep a similar pace */
  }
}

/* Reduced motion: no scrolling — show the tools once as a calm, centred,
   wrapping list instead */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .trust-track {
    width: auto;
    animation: none;
  }

  .trust-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
    flex-shrink: 1;
  }

  .trust-list[aria-hidden="true"] {
    display: none;
  }

  .trust-list li:last-child::after {
    display: none;
  }
}



/* ==========================================================================
   11. SERVICES — six cards
   ========================================================================== */

/* CSS Grid: 3 equal columns on desktop (2 on tablet, 1 on phones) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2.25rem;
  background: linear-gradient(180deg, rgba(20, 26, 43, 0.95) 0%, rgba(20, 26, 43, 0.45) 100%);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

/* Gold line that draws across the bottom of the card on hover */
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-gold);
}

.service-card:hover::after {
  transform: scaleX(1);
}

/* Round icon badge with a thin gold outline */
.service-icon {
  display: grid;
  place-items: center;              /* centres the icon inside the circle */
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  background-color: rgba(212, 160, 23, 0.06);
  color: var(--color-gold);         /* the SVG uses currentColor, so it turns gold */
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

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

/* On hover the icon badge fills with gold */
.service-card:hover .service-icon {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

/* Italic number in the top-right corner (01, 02 …) */
.service-number {
  position: absolute;
  top: 2.25rem;
  right: 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-muted);
  opacity: 0.7;
  transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.service-card:hover .service-number {
  color: var(--color-gold);
  opacity: 1;
}

.service-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  color: var(--color-offwhite);
}

.service-card p {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

@media (max-width: 960px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .service-card {
    padding: 2rem 1.5rem;
  }

  .service-number {
    top: 1.75rem;
    right: 1.5rem;
  }
}


/* ==========================================================================
   12. APPROACH — four-step timeline (ivory section)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.step {
  position: relative;
}

/* Numbered circle */
.step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-gold-deep);
  border-radius: 50%;
  background-color: var(--color-ivory);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-gold-deep);
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

/* Connecting line from each circle to the next one (not after the last step) */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;                                         /* middle of the 56px circle */
  left: calc(56px + 1rem);                           /* starts just after the circle */
  right: calc(-1 * var(--space-lg) + 1rem);          /* reaches across the gap */
  height: 1px;
  background: linear-gradient(90deg, rgba(138, 106, 12, 0.55), rgba(138, 106, 12, 0.15));
}

.step:hover .step-number {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-gold);
}

.step h3 {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
  color: var(--color-ink);
}

.step p {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

/* Tablet: 2 × 2 grid. Hide the line that would jump between rows. */
@media (max-width: 960px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
  }

  .step:nth-child(2)::after {
    display: none;
  }
}

/* Phones: a vertical timeline — circle on the left, text on the right */
@media (max-width: 640px) {
  .steps {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1.25rem;
  }

  .step-number {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .step > :not(.step-number) {
    grid-column: 2;
  }

  .step h3 {
    padding-top: 0.6rem;
  }

  .step:not(:last-child)::after,
  .step:nth-child(2)::after {
    display: block;
    top: calc(56px + 0.5rem);
    bottom: calc(-1 * var(--space-lg) + 0.5rem);
    left: 28px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(138, 106, 12, 0.55), rgba(138, 106, 12, 0.15));
  }
}


/* ==========================================================================
   13. RESULTS — metric cards (navy section)
   ========================================================================== */
.results {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 160, 23, 0.07), transparent 70%),
    var(--color-navy);
}

/* Editorial split heading: title left, intro right (stacks on smaller screens) */
.results-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  column-gap: var(--space-xl);
  max-width: none;
}

.results-heading .eyebrow {
  grid-column: 1 / -1;              /* eyebrow spans both columns */
  justify-self: start;
}

.results-heading h2 {
  margin-bottom: 0;
}

.results-heading p:not(.eyebrow) {
  justify-self: end;
  max-width: 26rem;
}

/* Four separate cards with depth */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  background: linear-gradient(180deg, #161D30 0%, var(--color-navy-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  /* inset = a faint highlight on the top edge; second shadow = soft depth */
  box-shadow: inset 0 1px 0 rgba(245, 243, 238, 0.04), var(--shadow-soft);
  overflow: hidden;
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

/* Short gold accent line on the top edge — lengthens on hover */
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2rem;
  width: 32px;
  height: 2px;
  background-color: var(--color-gold);
  transition: width 0.6s var(--ease);
}

/* Soft gold glow that appears from the top on hover */
.stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(212, 160, 23, 0.12), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.stat:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-gold);
}

.stat:hover::before {
  width: 64px;
}

.stat:hover::after {
  opacity: 1;
}

/* The headline metric gets a warm gold tint — gold used strategically, once */
.stat--featured {
  background: linear-gradient(180deg, rgba(212, 160, 23, 0.14) 0%, var(--color-navy-surface) 70%);
  border-color: var(--color-line-gold);
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  color: var(--color-gold);
}

.stat-icon svg {
  width: 18px;
  height: 18px;
}

.stat-number {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line);   /* hairline between number & label */
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 2rem + 3.2vw, 4.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-offwhite);
  /* equal-width digits, so the number doesn't wobble while counting up */
  font-variant-numeric: lining-nums tabular-nums;
}

/* The +, × and % symbols in gold italic */
.stat-suffix {
  margin-left: 0.04em;
  font-style: italic;
  color: var(--color-gold);
}

.stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Disclosure line under the grid, with a small gold diamond */
.stats-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: none;
  margin-top: var(--space-lg);
  font-size: 0.8125rem;
  font-style: italic;
  text-align: center;
  color: var(--color-muted);
}

.stats-note::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  background-color: var(--color-gold);
  transform: rotate(45deg);
}

@media (max-width: 960px) {
  .results-heading {
    grid-template-columns: 1fr;
  }

  .results-heading h2 {
    margin-bottom: var(--space-sm);
  }

  .results-heading p:not(.eyebrow) {
    justify-self: start;
  }

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

@media (max-width: 640px) {
  .stats-grid {
    gap: var(--space-sm);
  }

  .stat {
    padding: 1.75rem 1.25rem 1.5rem;
  }

  .stat::before {
    left: 1.25rem;
  }

  .stat-icon {
    margin-bottom: var(--space-md);
  }

  .stat-number {
    font-size: clamp(2.5rem, 1.5rem + 5vw, 3.25rem);
  }

  .stat-label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  .stats-note {
    align-items: flex-start;
    text-align: left;
  }

  .stats-note::before {
    margin-top: 0.5rem;
  }
}


/* ==========================================================================
   14. TESTIMONIALS — two verified Upwork reviews (ivory section)
   ========================================================================== */
.testimonials {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212, 160, 23, 0.07), transparent 70%),
    var(--color-ivory);
}

/* The hidden <svg> that only stores the star shape */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Two balanced cards, side by side and the same height */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-lg);
  max-width: 1040px;
  margin-inline: auto;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3rem 2.75rem 2.5rem;
  background-color: #FFFEFB;
  border: 1px solid rgba(26, 29, 38, 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(26, 29, 38, 0.04), 0 24px 48px -32px rgba(26, 29, 38, 0.28);
  overflow: hidden;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

/* Large, faint decorative quotation mark */
.testimonial-card::before {
  content: "\201C";                 /* the “ character */
  position: absolute;
  top: 1rem;
  right: 1.75rem;
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.3;
  pointer-events: none;
}

/* Gold hairline that draws across the top edge on hover */
.testimonial-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(26, 29, 38, 0.04), 0 32px 56px -30px rgba(26, 29, 38, 0.35);
}

.testimonial-card:hover::after {
  transform: scaleX(1);
}

/* Rating row: five small SVG stars + the "5.0" score */
.rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-md);
}

.stars {
  display: flex;
  gap: 3px;
  color: var(--color-gold);
}

.rating-score {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-gold-deep);
}

.testimonial-card--featured .rating-score {
  color: var(--color-gold);
}

.stars svg {
  width: 14px;
  height: 14px;
}

/* flex-grow pushes the author row to the bottom, so all three cards line up */
.testimonial-card blockquote {
  flex-grow: 1;
  margin-bottom: var(--space-lg);
}

.testimonial-card blockquote p {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--color-ink);
}

/* Two separate excerpts from one review: divided by a short gold rule,
   so they don't read as one continuous passage */
.testimonial-card blockquote p + p {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  background: linear-gradient(var(--color-gold), var(--color-gold)) top left / 2rem 1px no-repeat;
}

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(26, 29, 38, 0.08);
}

/* Initials in a navy circle with a fine gold ring */
.avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-navy);
  box-shadow: 0 0 0 1px var(--color-navy), 0 0 0 3px rgba(212, 160, 23, 0.35);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-gold);
}

/* Shield-and-tick icon: marks an anonymised, verified reviewer */
.avatar svg {
  width: 20px;
  height: 20px;
}

.author {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.author strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.author span {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

/* ---- Second card: navy, for editorial contrast (same size as the first) ---- */
.testimonial-card--featured {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  box-shadow: 0 32px 60px -30px rgba(11, 15, 26, 0.55);
}

.testimonial-card--featured::before {
  opacity: 0.45;
}

.testimonial-card--featured blockquote p,
.testimonial-card--featured .author strong {
  color: var(--color-offwhite);
}

.testimonial-card--featured .author span {
  color: var(--color-muted);
}

.testimonial-card--featured figcaption {
  border-top-color: var(--color-line);
}

.testimonial-card--featured .avatar {
  background-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--color-gold), 0 0 0 3px rgba(212, 160, 23, 0.3);
  color: var(--color-navy);
}

/* ---- Tablet & phone: the two cards stack ---- */
@media (max-width: 860px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 620px;
  }

  .testimonial-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .testimonial-card {
    padding: 2.25rem 1.5rem 1.75rem;
  }
}


/* ==========================================================================
   15. FAQ — two-column accordion (ivory section)
   ========================================================================== */

/* Left: intro (stays in view while scrolling on desktop). Right: questions. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.faq-intro {
  position: sticky;                 /* follows you down the page on desktop */
  top: 7rem;
}

.faq-intro .section-heading {
  margin-bottom: var(--space-lg);
}

/* Small navy card: "Still have a question?" */
.faq-help {
  position: relative;
  padding: 1.75rem;
  background-color: var(--color-navy);
  border-radius: 8px;
  color: var(--color-offwhite);
  overflow: hidden;
}

.faq-help::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.75rem;
  width: 40px;
  height: 2px;
  background-color: var(--color-gold);
}

.faq-help-title {
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
}

.faq-help p:not(.faq-help-title) {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.faq-help-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.faq-help-link span {
  transition: transform var(--duration) var(--ease);
}

.faq-help-link:hover span {
  transform: translateX(4px);
}

/* Inside the navy card, use the bright gold focus outline */
.faq-help :focus-visible {
  outline-color: var(--color-gold);
}

/* ---- The accordion ---- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Each question is a soft card with a subtle border */
.faq-item {
  position: relative;
  background-color: rgba(255, 254, 251, 0.55);
  border: 1px solid rgba(26, 29, 38, 0.09);
  border-radius: 8px;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.faq-item:hover {
  border-color: rgba(26, 29, 38, 0.16);
}

/* Gold accent bar on the left of the open question */
.faq-item::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--color-gold);
  transform: scaleY(0);
  transition: transform 0.45s var(--ease);
}

.faq-item.is-open {
  background-color: #FFFEFB;
  border-color: rgba(138, 106, 12, 0.25);
  box-shadow: 0 24px 48px -32px rgba(26, 29, 38, 0.3);
}

.faq-item.is-open::before {
  transform: scaleY(1);
}

/* The h3 is there for document structure; the button does the styling */
.faq-item h3 {
  font-size: inherit;
  line-height: inherit;
}

/* Reset the browser's default grey button and restyle it */
.faq-question {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.4rem 1.5rem;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  transition: color var(--duration) var(--ease);
}

.faq-question:hover,
.faq-item.is-open .faq-question {
  color: var(--color-gold-deep);
}

/* Small italic number before each question (01, 02 …) */
.faq-num {
  flex-shrink: 0;
  min-width: 1.75rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-gold-deep);
}

.faq-q-text {
  flex: 1;
}

/* Circular +/− indicator drawn with two thin lines */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(26, 29, 38, 0.18);
  border-radius: 50%;
  color: var(--color-ink);
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration) var(--ease);
}

/* The vertical line of the "+" */
.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Open: navy circle with a gold "−" (the vertical line rotates flat) */
.faq-item.is-open .faq-icon {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-gold);
}

.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Smooth open/close: the grid row animates from 0fr (closed) to 1fr (open).
   This animates to the answer's natural height without measuring it in JS. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: 1.5rem;
  visibility: hidden;               /* hidden answers are skipped by Tab & screen readers */
  transition:
    grid-template-rows 0.45s var(--ease),
    padding-bottom 0.45s var(--ease),
    visibility 0.45s;
}

.faq-answer > p {
  min-height: 0;
  overflow: hidden;
  padding-left: 3rem;               /* lines up with the question text, after the number */
  padding-right: 3.25rem;
  color: var(--color-ink-muted);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  visibility: visible;
  padding-bottom: 1.5rem;
}

/* Tablet & phone: one column — heading, questions, then the help card */
@media (max-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* "display: contents" lets the intro's children join the layout grid
     directly, so the help card can be moved below the questions */
  .faq-intro {
    display: contents;
  }

  .faq-intro .section-heading { order: 1; margin-bottom: 0; }
  .faq-list                   { order: 2; }
  .faq-help                   { order: 3; }
}

@media (max-width: 640px) {
  .faq-question {
    gap: 0.85rem;
    padding: 1.2rem 1.1rem;
  }

  .faq-num {
    min-width: 1.4rem;
  }

  .faq-answer {
    padding-inline: 1.1rem;
  }

  .faq-answer > p {
    padding-left: 0;
    padding-right: 0;
  }
}


/* ==========================================================================
   16. FINAL CALL TO ACTION
   ========================================================================== */
.cta {
  padding-top: var(--space-section);   /* the contact section below adds its own top space */
}

.cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(4rem, 2.5rem + 6vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(212, 160, 23, 0.16), transparent 70%),
    linear-gradient(180deg, #121829 0%, var(--color-navy-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(245, 243, 238, 0.05), var(--shadow-soft);
  overflow: hidden;
}

/* Everything except the decorative rings sits above them */
.cta-inner > :not(.cta-orbits) {
  position: relative;
  z-index: 1;
}

/* Faint concentric rings behind the content, echoing the hero graphic */
.cta-orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-orbits circle {
  stroke: var(--color-line);
  stroke-width: 1;
}

.cta-orbits circle:nth-child(2) {
  stroke-dasharray: 2 8;
}

.cta-orbits .cta-node {
  fill: var(--color-gold);
  stroke: none;
  opacity: 0.7;
}

/* Fine gold corner brackets — like the corners of a formal invitation */
.cta-inner::before,
.cta-inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-color: var(--color-line-gold);
  border-style: solid;
}

.cta-inner::before {
  top: 1.25rem;
  left: 1.25rem;
  border-width: 1px 0 0 1px;
}

.cta-inner::after {
  right: 1.25rem;
  bottom: 1.25rem;
  border-width: 0 1px 1px 0;
}

/* Centred eyebrow gets a line on both sides */
.cta .eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: currentColor;
}

.cta-inner h2 {
  max-width: 14ch;
  margin-bottom: var(--space-md);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
}

.cta-text {
  max-width: 34rem;
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--color-muted);
}

/* ---- Larger button with a sliding arrow (also used by the form) ---- */
.btn-large {
  padding: 1.15rem 2.25rem;
  font-size: 0.9375rem;
}

.btn-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration) var(--ease);
}

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

@media (max-width: 480px) {
  .cta-inner .btn {
    width: 100%;
    white-space: normal;
  }
}


/* ==========================================================================
   17. CONTACT — information + dark enquiry form
   ========================================================================== */
.contact {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(212, 160, 23, 0.06), transparent 70%),
    var(--color-navy);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* ---- Left column: heading, intro, details, next steps ---- */
.contact-info h2 {
  max-width: 14ch;
  margin-bottom: var(--space-sm);
}

.contact-info > p:not(.eyebrow) {
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.contact-details {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.contact-details li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-offwhite);
}

.contact-details strong {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-details a {
  width: fit-content;
  transition: color var(--duration) var(--ease);
}

.contact-details a:hover {
  color: var(--color-gold);
}

/* "What happens next" — three numbered steps */
.contact-next {
  margin-top: var(--space-lg);
}

.contact-next-title {
  margin-bottom: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.contact-steps li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.45rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.contact-steps span {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-gold);
}

/* ---- Right column: the form panel ---- */
.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* name & email side by side */
  gap: 1.5rem 1.25rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: linear-gradient(180deg, #161D30 0%, var(--color-navy-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(245, 243, 238, 0.05), var(--shadow-soft);
}

/* Short gold accent line on the top edge of the panel */
.contact-form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.75rem, 1rem + 3vw, 3rem);
  width: 48px;
  height: 2px;
  background-color: var(--color-gold);
}

/* Items that span the full width of the form */
.form-header,
.form-group--full,
.contact-form > button,
.form-note,
.form-success {
  grid-column: 1 / -1;
}

.form-header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}

.form-title {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  color: var(--color-offwhite);
}

.form-subtitle {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.form-group label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}

.req {
  margin-left: 0.1rem;
  color: var(--color-gold);
}

.optional {
  font-weight: 400;
  color: var(--color-muted);
}

/* Dark input fields with a subtle border (never the white browser default) */
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  background-color: var(--color-navy);
  border: 1px solid rgba(245, 243, 238, 0.12);
  border-radius: var(--radius);
  font-size: 1rem;                  /* 16px+ stops iPhones zooming in on tap */
  line-height: 1.5;
  color: var(--color-offwhite);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(154, 163, 181, 0.75); /* readable (4.7:1) yet clearly dimmer than typed text */
  opacity: 1;                       /* Firefox fades placeholders by default */
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(245, 243, 238, 0.22);
}

/* Gold focus state: border + soft glow (replaces the default outline) */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

/* Stop browser autofill painting fields white/yellow */
.contact-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-offwhite);
  box-shadow: 0 0 0 1000px var(--color-navy) inset;
  caret-color: var(--color-offwhite);
}

/* ---- Validation states (set by js/main.js) ---- */
.error-message {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: #F2A097;
}

.error-message:empty {
  display: none;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #E07A6E;
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(224, 122, 110, 0.18);
}

.contact-form > button {
  margin-top: 0.25rem;
}

/* Honest "demo form" notice, with a small gold diamond */
.form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: none;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.form-note[hidden] {
  display: none;                    /* live mode: the demo notice is removed */
}

.form-note::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin-top: 0.5rem;
  background-color: var(--color-gold);
  transform: rotate(45deg);
}

/* Message shown after a valid (demo) submission */
.form-success {
  max-width: none;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius);
  background-color: rgba(212, 160, 23, 0.08);
  font-size: 0.9375rem;
  color: var(--color-offwhite);
}

.form-success:empty {
  display: none;
}

/* Shown if a live submission could not be delivered */
.form-success.is-error {
  border-color: rgba(224, 122, 110, 0.45);
  background-color: rgba(224, 122, 110, 0.08);
}

/* While sending: button dimmed and not clickable twice */
.contact-form > button[disabled] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Spam trap: moved off-screen so people never see or reach it */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

@media (max-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr;     /* every field on its own row */
  }
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-line);
  background-color: #080B13;        /* a shade deeper than the page navy, to ground the page */
}

/* Main row: brand | navigation | social — three columns in one line.
   "auto 1fr auto" = left & right take only what they need, middle gets the rest. */
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-lg);
}

/* ---- Left: monogram + brand name, tagline underneath ---- */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo img {
  width: 40px;
  height: 40px;
  transition: opacity var(--duration) var(--ease);
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-offwhite);
  transition: color var(--duration) var(--ease);
}

.footer-logo:hover img {
  opacity: 0.85;
}

.footer-logo:hover .footer-name {
  color: var(--color-gold);
}

.footer-brand p {
  max-width: 17rem;                 /* tagline wraps neatly instead of widening the row */
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.975rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ---- Middle: horizontal links with thin gold dividers ---- */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
}

.footer-links li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Desktop: the links always stay on one line */
@media (min-width: 1024px) {
  .footer-links {
    flex-wrap: nowrap;
  }
}

/* Smaller laptops: tighten spacing so brand | links | social still fit in one row */
@media (min-width: 1024px) and (max-width: 1200px) {
  .footer-grid {
    gap: var(--space-lg);
  }

  .footer-links li + li::before {
    margin-inline: 0.8rem;
  }
}

.footer-links li + li::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-inline: clamp(0.85rem, 1.6vw, 1.4rem);
  background-color: var(--color-line-gold);
}

.footer-links a {
  position: relative;
  padding-block: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  transition: color var(--duration) var(--ease);
}

/* Same gold underline as the main navbar, for consistency */
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration) var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-offwhite);
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Right: social icons in thin outlined circles ---- */
.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-muted);
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.social-links svg {
  width: 18px;
  height: 18px;
}

.social-links a:hover,
.social-links a:focus-visible {
  border-color: var(--color-gold);
  background-color: rgba(212, 160, 23, 0.08);
  color: var(--color-gold);
}

/* ---- Bottom strip: divider + copyright ---- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.footer-bottom p {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* ---- Tablet: brand + social on top, navigation on its own row below ---- */
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
  }

  .footer-nav {
    grid-column: 1 / -1;            /* span the full width */
    grid-row: 2;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
  }

  .footer-links {
    justify-content: flex-start;
  }
}

/* ---- Phones: a clean, centred stack ---- */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-lg);
    text-align: center;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-nav {
    grid-row: auto;
    width: 100%;
  }

  .footer-links {
    justify-content: center;
    gap: 0.4rem 1.5rem;
  }

  .footer-links li + li::before {
    display: none;                  /* dividers look stray when links wrap */
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}


/* ==========================================================================
   19. OUR WORK — "Inside the systems we build" (navy section)
   Layout: one wide featured card, then a 2 × 2 grid of cards.
   Each card = a browser-style frame (screenshot preview) + text.
   ========================================================================== */
.work {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(212, 160, 23, 0.06), transparent 70%),
    var(--color-navy);
  border-bottom: 1px solid var(--color-line);   /* separates it from Results (also navy) */
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.work-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #161D30 0%, var(--color-navy-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(245, 243, 238, 0.04), var(--shadow-soft);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease);
}

.work-card:hover,
.work-card:focus-within {
  border-color: var(--color-line-gold);
}

/* Featured card: spans both columns, screenshot left and text right */
.work-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

/* ---- Browser-style frame ---- */
.work-frame {
  display: block;
  margin: var(--space-md) var(--space-md) 0;
  border: 1px solid rgba(245, 243, 238, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background-color: #0E1322;
  cursor: zoom-in;
}

.work-card--featured .work-frame {
  margin: var(--space-md);
  align-self: center;
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background-color: #1B2236;
  border-bottom: 1px solid rgba(245, 243, 238, 0.08);
}

.frame-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.frame-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(245, 243, 238, 0.18);
}

.frame-dots i:first-child {
  background-color: var(--color-gold);           /* one gold dot — brand detail */
}

.frame-url {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.75rem;
  background-color: rgba(11, 15, 26, 0.6);
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The screenshot window: fixed shape, image anchored top-left */
.frame-view {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.frame-view--light {
  background-color: #F7F7F5;                     /* matches light app screenshots */
}

.frame-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.8s var(--ease);
}

/* "View full size" hint that fades in on hover */
.frame-view::after {
  content: "View full size";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.4rem 0.8rem;
  background-color: rgba(11, 15, 26, 0.85);
  border: 1px solid var(--color-line-gold);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.work-frame:hover .frame-view img {
  transform: scale(1.02);
}

.work-frame:hover .frame-view::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Card text ---- */
.work-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-md) 1.75rem;
}

.work-card--featured .work-body {
  justify-content: center;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-sm);
}

.work-badge {
  align-self: flex-start;
  margin-bottom: var(--space-sm);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The client project badge is gold so it stands apart from demos */
.work-badge--client {
  border-color: var(--color-line-gold);
  background-color: rgba(212, 160, 23, 0.1);
  color: var(--color-gold);
}

.work-body h3 {
  margin-bottom: 0.75rem;
}

.work-body > p:not(.work-badge):not(.work-fineprint) {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* Gold tool labels */
.work-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-md);
}

.work-tools li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

/* Numbered list of screenshots — each opens the image viewer */
.work-shots {
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  counter-reset: shot;
}

.work-shots li {
  counter-increment: shot;
  border-bottom: 1px solid var(--color-line);
}

.work-shot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.1rem;
  font-size: var(--text-sm);
  color: var(--color-offwhite);
  transition: color var(--duration) var(--ease);
}

.work-shot::before {
  content: counter(shot, decimal-leading-zero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

/* small "expand" arrow on the right */
.work-shot::after {
  content: "↗";
  margin-left: auto;
  color: var(--color-muted);
  transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.work-shot:hover {
  color: var(--color-gold);
}

.work-shot:hover::after {
  color: var(--color-gold);
  transform: translate(2px, -2px);
}

/* "Demo" tag that keeps the booking page separate from the client workflow */
.demo-tag {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Divine Nursing flyer (card 2): small uncropped preview + caption.
   The flyer is exactly 2:3, so width + auto height shows all of it. */
.work-flyer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--space-md);
}

.work-flyer-link {
  flex-shrink: 0;
  display: block;
  width: 104px;
  border: 1px solid rgba(245, 243, 238, 0.12);
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.work-flyer-link img {
  width: 100%;
  height: auto;
}

.work-flyer-link:hover,
.work-flyer-link:focus-visible {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.work-flyer figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-offwhite);
}

.work-fineprint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-muted);
}

.work-note {
  max-width: 52rem;
  margin: var(--space-lg) auto 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--color-muted);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .work-card--featured {
    grid-template-columns: 1fr;
  }

  .work-card--featured .work-frame {
    margin: var(--space-md) var(--space-md) 0;
  }

  .work-card--featured .work-body {
    padding: var(--space-md) var(--space-md) 1.75rem;
  }
}

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

@media (max-width: 480px) {
  .work-frame,
  .work-card--featured .work-frame {
    margin: var(--space-sm) var(--space-sm) 0;
  }

  .work-body,
  .work-card--featured .work-body {
    padding: var(--space-md) var(--space-sm) 1.5rem;
  }
}


/* ==========================================================================
   20. IMAGE VIEWER (lightbox) — full-size screenshots
   ========================================================================== */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-offwhite);
}

.lightbox::backdrop {
  background-color: rgba(7, 10, 18, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox[open] {
  animation: lightbox-in 0.35s var(--ease);
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter) var(--space-md);
}

.lightbox-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lightbox-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
}

.lightbox-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--color-gold);
}

@media (max-width: 480px) {
  .lightbox-title {
    font-size: 1.125rem;
  }
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 0;
}

.lightbox-img {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(245, 243, 238, 0.12);
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.lightbox-caption {
  max-width: 60ch;
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-muted);
}

.lightbox-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.lightbox-btn {
  display: grid;
  place-items: center;
  width: 44px;                       /* comfortable touch target */
  height: 44px;
  flex-shrink: 0;
  background-color: rgba(20, 26, 43, 0.9);
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  color: var(--color-offwhite);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.lightbox-btn svg {
  width: 20px;
  height: 20px;
}

.lightbox-btn:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.lightbox-btn[hidden] {
  display: none;
}

/* Stop the page scrolling behind the open viewer */
body.lightbox-open {
  overflow: hidden;
}