/* ==========================================================================
   Play Stream Studio — styles.css
   --------------------------------------------------------------------------
   One shared stylesheet for every page (index, about, services, portfolio,
   contact). The brand system is taken directly from the Play Stream Studio
   Brand Playbook.

   HOW TO RE-THEME (non-developers welcome):
   • All brand colours live in the ":root" block below as CSS variables.
     Change a hex value once here and it updates everywhere on the site.
   • Fonts are also variables (--font-display / --font-body / --font-mono).
   • Spacing, radius and shadows are variables too — tweak with confidence.

   TABLE OF CONTENTS
     1.  Design tokens (CSS variables)
     2.  Reset & base elements
     3.  Layout helpers (container, sections, grid)
     4.  Typography helpers (eyebrow, headings, lead)
     5.  Buttons & pills
     6.  Brand logo lockup
     7.  Site header / navigation + mobile menu
     8.  Hero
     9.  Cards (feature, work, value, step, service)
     10. Platform badge strip
     11. Stats band
     12. Call-to-action band
     13. Contact page & form
     14. Site footer
     15. Scroll-reveal animation
     16. Responsive breakpoints
     17. Reduced-motion & focus accessibility
   ========================================================================== */


/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* --- Brand core (from the playbook) --- */
  --coral:        #FF6B5E;   /* Primary  · brand & actions            */
  --coral-deep:   #C2382A;   /* Accessible coral for small text/links */
  --mint:         #2ED3B7;   /* Accent   · highlights & "live"        */
  --mint-deep:    #178A75;   /* Accessible mint for small text        */
  --ink:          #2A2F3A;   /* Text     · light-mode dark            */
  --midnight:     #14181F;   /* TV dark surface / footer              */
  --navy:         #1E232B;   /* Hero & nav dark surface               */
  --mist:         #F1F6F5;   /* Surface  · cards                      */
  --stone:        #B8C0CB;   /* Muted    · dividers                   */
  --white:        #FFFFFF;

  /* --- Surfaces & neutrals --- */
  --bg:           #FBFAF8;   /* Page background (warm off-white)      */
  --bg-alt:       #F3F6F5;   /* Alternating section background        */
  --card:         #FFFFFF;
  --card-border:  #EDECE8;
  --line:         #E6EBEA;   /* Hairline dividers on light            */

  /* --- Text roles --- */
  --heading:      #222A2C;
  --text:         #2A2F3A;   /* = ink */
  --text-muted:   #56606A;
  --text-soft:    #6B7480;
  --on-dark:      #FFFFFF;
  --on-dark-mut:  #AEB7C2;
  --on-dark-soft: #7E8894;

  /* --- Feedback --- */
  --ok:           #16966F;
  --err:          #C13338;

  /* --- Type --- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Radius (friendly, never sharp) --- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm:    0 1px 3px rgba(20, 30, 28, .08);
  --shadow:       0 14px 34px rgba(20, 30, 28, .10);
  --shadow-lg:    0 30px 60px rgba(20, 30, 28, .16);
  --shadow-coral: 0 18px 40px rgba(255, 107, 94, .32);

  /* --- Layout --- */
  --container: 1180px;
  --gutter:    clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 9vw, 116px);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
}


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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; }

/* Hide the inline SVG sprite that holds the brand artwork */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Skip link — first tab stop, jumps keyboard users to main content */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--coral);
  color: var(--midnight);
  font-family: var(--font-display);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }


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

.section { padding-block: var(--section-y); }
.section--mist  { background: var(--bg-alt); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }

.section-head { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.stack-lg > * + * { margin-top: clamp(40px, 6vw, 72px); }


/* 4. TYPOGRAPHY HELPERS =================================================== */
/* Eyebrow: small mono label with a coral square bullet. The words carry the
   meaning (and meet contrast); the coral square is decorative. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--coral);
  flex: none;
}
.eyebrow--ondark { color: var(--on-dark-mut); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  letter-spacing: -.025em;
  line-height: 1.02;
  color: var(--heading);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  letter-spacing: -.015em;
  line-height: 1.08;
}
.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 18px;
}
.muted { color: var(--text-muted); }
.on-dark { color: var(--on-dark); }
.on-dark .h2, .on-dark .display { color: var(--white); }
.on-dark .lead { color: var(--on-dark-mut); }

/* Coral / mint text accents that still pass contrast on light surfaces */
.t-coral { color: var(--coral-deep); }
.t-mint  { color: var(--mint-deep); }


/* 5. BUTTONS & PILLS ===================================================== */
.btn {
  --btn-bg: var(--coral);
  --btn-fg: var(--midnight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;            /* labels never break mid-word; the row wraps instead */
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

/* Primary — coral fill, dark ink text (6.6:1 contrast) */
.btn--primary { box-shadow: var(--shadow-coral); }
.btn--primary:hover { box-shadow: 0 22px 48px rgba(255, 107, 94, .42); }

/* Mint — accent fill, dark ink text */
.btn--mint { --btn-bg: var(--mint); --btn-fg: var(--midnight); }

/* Ghost on light */
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: rgba(42, 47, 58, .22);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(42, 47, 58, .04); }

/* Ghost on dark */
.btn--ghost-dark {
  --btn-bg: transparent; --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, .26);
}
.btn--ghost-dark:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.btn .i { width: 18px; height: 18px; }

/* Small text-link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 800;
  color: var(--coral-deep);
}
.link-arrow .i { width: 17px; height: 17px; transition: transform .18s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .i { transform: translateX(4px); }


/* 6. BRAND LOGO LOCKUP =================================================== */
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: -.01em;
}
.brand-name .play   { color: var(--coral); }
.brand-name .stream { color: var(--white); }      /* on dark surfaces */
.brand-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .42em;
  color: var(--on-dark-soft);
  margin-top: 6px;
  padding-left: 2px;
}
/* Light-surface variant of the wordmark (footer columns, etc.) */
.brand--on-light .brand-name .stream { color: var(--ink); }
.brand--on-light .brand-sub { color: var(--text-soft); }


/* 7. SITE HEADER / NAV =================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30, 35, 43, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(20, 24, 31, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--on-dark-mut);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover { color: var(--white); background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--white); }
.nav-links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 6px;
  border-radius: 2px; background: var(--coral);
}
.nav-cta { margin-left: 8px; }
.nav-cta .btn { padding: 11px 20px; font-size: .95rem; }

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle .bars::before { transform: translateY(-7px); }
.nav-toggle .bars::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: rotate(-45deg); }


/* 8. HERO =============================================================== */
/* Dark brand surface with the playbook's subtle module grid texture */
.hero {
  position: relative;
  background-color: var(--navy);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  color: var(--white);
  overflow: hidden;
}
/* Soft coral & mint glows behind the hero */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.hero::before { width: 420px; height: 420px; background: rgba(255,107,94,.45); top: -120px; right: -60px; }
.hero::after  { width: 360px; height: 360px; background: rgba(46,211,183,.30); bottom: -160px; left: -80px; }

.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(56px, 8vw, 104px);
}
.hero h1 { color: var(--white); }
.hero .lead { color: var(--on-dark-mut); max-width: 540px; }

/* Page hero (interior pages) — same dark surface, shorter */
.page-hero { padding-block: clamp(56px, 8vw, 92px); }
.page-hero .display { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.page-hero .lead { max-width: 620px; }

/* Hero device mock — a mini smart-TV "home" rail, on brand with the playbook */
.tv-mock {
  background: var(--midnight);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}
.tv-mock__bar { display: flex; align-items: center; justify-content: space-between; }
.tv-mock__bar .brand-name { font-size: 1rem; }
.tv-mock__nav { display: flex; gap: 16px; align-items: center; }
.tv-mock__nav span { font-size: .78rem; font-weight: 600; color: #5A6573; font-family: var(--font-body); }
.tv-mock__nav .clock { font-family: var(--font-mono); color: #8A93A0; }
.tv-mock__feature {
  margin-top: 16px; height: 116px; border-radius: 13px;
  background: #171D27;                  /* fallback if the image is missing */
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 16px;
}
.tv-mock__feature-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.tv-mock__feature .tag, .tv-mock__feature .pill-play { position: relative; z-index: 1; }
.tv-mock__feature .tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: #5B6576; }
.pill-play {
  font-family: var(--font-display); font-weight: 800; font-size: .74rem;
  color: var(--midnight); background: var(--coral); padding: 7px 14px; border-radius: var(--r-pill);
}
.tv-mock__label { font-weight: 700; font-size: .8rem; color: var(--on-dark-mut); margin-top: 18px; }
/* The rail has top/left clearance (with compensating negative margins so tiles
   stay aligned with the label) and clips overflow — so the active tile's neon
   ring + lift are never cut off, while horizontal overflow on small screens is
   still hidden. Tiles are ~15% smaller (72px → 61px) to give the ring room. */
.tv-mock__rail { display: flex; gap: 14px; margin: 2px -6px 0; padding: 11px 6px 6px; overflow: hidden; }
.tv-app { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 61px; }
.tv-app__tile {
  width: 61px; height: 61px; border-radius: 15px;
  background: #1B2230;                  /* fallback if the image is missing */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tv-app__tile svg { width: 100%; height: 100%; }
.tv-app__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-app--active .tv-app__tile { box-shadow: 0 0 0 3px var(--mint), 0 12px 22px rgba(0,0,0,.5); transform: translateY(-3px); }
.tv-app__tile .ph { font-family: var(--font-mono); font-size: .55rem; color: #5B6576; }
.tv-app span { font-size: .64rem; font-weight: 600; color: #6E7787; white-space: nowrap; }
.tv-app--active span { color: var(--white); font-weight: 700; }


/* 9. CARDS ============================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #E2E0DB; }

.card h3 {
  font-size: 1.3rem; font-weight: 800; color: var(--heading);
  margin-top: 20px;
}
.card p { color: var(--text-soft); margin-top: 8px; font-size: .98rem; }
.card .link-arrow { margin-top: 18px; }

/* Value chip cards (about page) */
.value { padding: 22px; }
.value__dot { width: 26px; height: 26px; border-radius: 8px; }
.value h3 { font-size: 1.05rem; margin-top: 16px; }
.value p { margin-top: 5px; }

/* 9b. Work / portfolio cards */
.work-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.work-card:hover .work-art::after { opacity: 1; }
.work-card:hover .work-art img { transform: scale(1.05); }

/* Art area — holds the static key-art image; the gradient is a fallback if the
   image is missing. */
.work-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.work-art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s var(--ease);
}
.work-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.28));
  opacity: .5; transition: opacity .22s var(--ease);
  pointer-events: none;
}
/* Six art themes (fallback background tones) */
.art-1 { background: linear-gradient(150deg, #FF6B5E 0%, #FF8F6B 100%); }
.art-2 { background: linear-gradient(150deg, #1E232B 0%, #313A49 100%); }
.art-3 { background: linear-gradient(150deg, #2ED3B7 0%, #19A7C7 100%); }
.art-4 { background: linear-gradient(150deg, #5B3DF5 0%, #8A5BFF 100%); }
.art-5 { background: linear-gradient(150deg, #14181F 0%, #243042 100%); }
.art-6 { background: linear-gradient(150deg, #E2613C 0%, #FFB347 100%); }
.work-body { padding: 20px 22px 24px; position: relative; z-index: 2; }
.work-body h3 { font-size: 1.2rem; font-weight: 800; }
.work-body p { color: var(--text-soft); font-size: .95rem; margin-top: 6px; }

/* Tag / chip */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  padding: 6px 11px; border-radius: var(--r-pill);
}
.tag--coral { color: var(--white); background: var(--coral); border-color: transparent; }
.tag--mint  { color: var(--midnight); background: var(--mint); border-color: transparent; }
.work-body .tag { margin-bottom: 14px; }


/* 10. PLATFORM BADGE STRIP ============================================== */
.platforms {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--midnight);
}
.platforms__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px;
  padding-block: 26px;
}
.platforms__label {
  font-family: var(--font-mono); font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-right: 8px;
}
.platform-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--on-dark-mut);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  padding: 9px 16px; border-radius: var(--r-pill);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.platform-badge .i { width: 18px; height: 18px; color: var(--mint); }
.platform-badge:hover { color: var(--white); border-color: rgba(46,211,183,.5); background: rgba(46,211,183,.08); }


/* 11. STATS BAND ======================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 32px); }
.stat__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1;
  color: var(--coral); letter-spacing: -.02em;
}
.stat__label { color: var(--on-dark-mut); margin-top: 8px; font-size: .96rem; }
.stat--mint .stat__num { color: var(--mint); }


/* 12. CTA BAND ========================================================== */
.cta {
  position: relative;
  background-color: var(--navy);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  color: var(--white);
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; width: 460px; height: 460px;
  border-radius: 50%; filter: blur(80px); opacity: .45;
  background: rgba(255,107,94,.5); top: -180px; right: 10%;
  pointer-events: none;
}
.cta .container { position: relative; z-index: 1; text-align: center; }
.cta .h2 { color: var(--white); }
.cta .lead { color: var(--on-dark-mut); margin-inline: auto; max-width: 580px; }
.cta .btn-row { justify-content: center; }


/* 13. CONTACT & FORM ==================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-info { display: grid; gap: 22px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row .i { width: 22px; height: 22px; color: var(--coral); flex: none; margin-top: 3px; }
.info-row h3 { font-size: 1.02rem; font-weight: 800; }
.info-row p, .info-row a { color: var(--text-muted); font-size: .98rem; }
.info-row a { color: var(--coral-deep); font-weight: 700; }

.socials { display: flex; gap: 12px; margin-top: 4px; }
.social-btn {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--card-border);
  color: var(--ink);
  transition: transform .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social-btn .i { width: 20px; height: 20px; }
.social-btn:hover { transform: translateY(-2px); color: var(--coral); border-color: var(--coral); }

/* Form */
.form-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: .92rem; color: var(--ink); margin-bottom: 8px;
}
.field .req { color: var(--coral-deep); }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: #9AA3AE; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(255,107,94,.16);
}
.field.has-error input, .field.has-error textarea {
  border-color: var(--err);
  box-shadow: 0 0 0 4px rgba(193,51,56,.12);
}
.field .error {
  display: none;
  color: var(--err); font-size: .85rem; font-weight: 700; margin-top: 8px;
}
.field.has-error .error { display: block; }

.form-note {
  font-size: .82rem; color: var(--text-soft); margin-top: 6px;
}
/* Friendly success message shown after a valid (front-end only) submit */
.form-success {
  display: none;
  align-items: flex-start; gap: 14px;
  background: rgba(46,211,183,.1);
  border: 1px solid rgba(46,211,183,.4);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.form-success.is-visible { display: flex; }
.form-success .i { width: 24px; height: 24px; color: var(--mint-deep); flex: none; margin-top: 1px; }
.form-success strong { color: var(--ink); font-family: var(--font-display); }
.form-success p { color: var(--text-muted); font-size: .94rem; margin-top: 2px; }


/* 14. FOOTER ============================================================ */
.site-footer {
  background: var(--midnight);
  color: var(--on-dark-mut);
  padding-block: clamp(48px, 6vw, 72px);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
}
.footer-brand { max-width: 320px; }
.footer-brand p { color: var(--on-dark-soft); font-size: .95rem; margin-top: 18px; }
.footer-col h4 {
  font-family: var(--font-display); font-weight: 800;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--on-dark-mut); font-size: .96rem; }
.footer-col a:hover { color: var(--coral); text-decoration: none; }
.footer-socials { display: flex; gap: 12px; margin-top: 20px; }
.footer-socials a {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--on-dark-mut);
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.footer-socials a .i { width: 19px; height: 19px; }
.footer-socials a:hover { color: var(--mint); border-color: rgba(46,211,183,.5); transform: translateY(-2px); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-bottom p { font-family: var(--font-mono); font-size: .8rem; color: var(--on-dark-soft); }
.footer-bottom .mini-links { display: flex; gap: 20px; }
.footer-bottom .mini-links a { color: var(--on-dark-soft); font-size: .85rem; }
.footer-bottom .mini-links a:hover { color: var(--white); text-decoration: none; }


/* 15. SCROLL-REVEAL ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Optional stagger via inline style --d (e.g. style="--d:.08s") */
.reveal[style*="--d"] { transition-delay: var(--d); }


/* 16. RESPONSIVE ======================================================== */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 880px) {
  /* Switch the nav to a mobile dropdown menu */
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px var(--gutter) 22px;
    background: rgba(20, 24, 31, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 24px 40px rgba(0,0,0,.4);
    /* hidden by default; toggled open with .is-open */
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 13px 14px; font-size: 1.05rem; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--coral); }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 460px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  /* Stack call-to-action buttons full-width so long labels never clip */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

@media (max-width: 460px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .brand-sub { letter-spacing: .34em; }
}


/* 17. ACCESSIBILITY: FOCUS & REDUCED MOTION ============================= */
:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header :focus-visible { outline-color: var(--coral); }

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


/* 18. LEGAL / PROSE PAGES (privacy, terms) ============================= */
.legal-meta {
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .04em;
  color: var(--on-dark-mut);
  margin-top: 18px;
}

/* Long-form readable text column */
.prose { max-width: 768px; margin-inline: auto; }
.prose > p { color: var(--text-muted); line-height: 1.75; margin-bottom: 1.05em; }
.prose h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--heading);
  margin: 2.4em 0 .6em; scroll-margin-top: 100px;
}
.prose h2:first-of-type { margin-top: .2em; }
.prose h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.12rem; color: var(--ink);
  margin: 1.7em 0 .5em;
}
.prose ul { margin: .4em 0 1.3em; padding-left: 1.3em; }
.prose li { color: var(--text-muted); line-height: 1.7; margin-bottom: .55em; }
.prose li::marker { color: var(--coral); }
.prose a { color: var(--coral-deep); font-weight: 600; }
.prose strong { color: var(--ink); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* "Template — have a lawyer review" callout */
.legal-note {
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 38px;
  font-size: .95rem; color: var(--text-muted); line-height: 1.6;
}
.legal-note strong { color: var(--ink); }

/* Table of contents */
.toc {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 40px;
}
.toc h2 {
  font-family: var(--font-mono); font-weight: 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-soft); margin: 0 0 14px;
}
.toc ol { margin: 0; padding-left: 1.25em; display: grid; gap: 9px; }
.toc li { color: var(--text-muted); }
.toc a { color: var(--ink); font-weight: 600; text-decoration: none; }
.toc a:hover { color: var(--coral-deep); text-decoration: underline; }