/* Sigma Design — static rebuild design system.
   Replicates the original Horizons build's index.css in plain CSS (no Tailwind). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

:root {
  --background: hsl(224 52% 6%);
  --foreground: hsl(213 32% 91%);
  --card: hsl(224 44% 9%);
  --card-foreground: hsl(213 32% 91%);
  --primary: hsl(197 100% 74%);
  --primary-foreground: hsl(224 60% 8%);
  --secondary: hsl(222 34% 13%);
  --muted: hsl(222 30% 14%);
  --muted-foreground: hsl(216 16% 62%);
  --accent: hsl(197 55% 18%);
  --destructive: hsl(0 72% 55%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(220 26% 18%);
  --input: hsl(220 26% 22%);
  --ring: hsl(197 100% 74%);
  --radius: 0.25rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  overflow-x: clip;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--primary); color: var(--primary-foreground); }

/* ---------- typography helpers (match original utility classes) ---------- */
.font-display { font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; }
.font-display-black { font-stretch: 125%; font-weight: 900; letter-spacing: -0.025em; }
.font-narrow { font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; }
.font-narrow-light { font-stretch: 68%; font-weight: 300; letter-spacing: 0.14em; }

.eyebrow {
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em;
  font-size: 11px; text-transform: uppercase; color: var(--primary);
  display: flex; align-items: center; gap: 0.5rem;
}
.eyebrow svg { width: 14px; height: 14px; }

h1, h2, h3 { margin: 0; }

/* ---------- layout ---------- */
.container { max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 768px) { .container { padding-left: 2rem; padding-right: 2rem; } }

.section { padding-top: 6rem; padding-bottom: 6rem; position: relative; }
@media (min-width: 768px) { .section { padding-top: 8rem; padding-bottom: 8rem; } }

/* ---------- signature masks & panels ---------- */
.mask-slash { clip-path: polygon(4.5% 0, 100% 0, 95.5% 100%, 0 100%); }
.mask-slash-reverse { clip-path: polygon(0 0, 95.5% 0, 100% 100%, 4.5% 100%); }

.panel-inset {
  background-color: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--border),
    inset 0 1px 0 0 hsl(213 32% 91% / 0.05),
    inset 0 14px 34px rgb(0 0 0 / 0.38);
}
.panel-inset-deep {
  background-color: hsl(224 48% 7.5%);
  box-shadow:
    inset 0 0 0 1px var(--border),
    inset 0 18px 44px rgb(0 0 0 / 0.5);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 3rem; padding: 0 1.5rem;
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em;
  font-size: 0.75rem; text-transform: uppercase; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer; border: none; font-family: inherit;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.btn:hover svg { transform: translate(2px, -2px); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-outline { border: 1px solid var(--border); color: var(--foreground); background: transparent; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary { border: 1px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary); color: var(--primary-foreground); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid hsl(220 26% 18% / 0.7);
  background: hsl(224 52% 6% / 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.site-header .bar { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.logo-mark { display: block; height: 0.875rem; width: 1.5rem; transform: skewX(-12deg); background: var(--primary); }
.logo-word { font-stretch: 125%; font-weight: 800; letter-spacing: 0.08em; font-size: 0.875rem; text-transform: uppercase; color: var(--foreground); white-space: nowrap; }

.main-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .main-nav { display: flex; } }
.nav-link {
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em;
  font-size: 11px; text-transform: uppercase; color: var(--muted-foreground);
  text-decoration: none; transition: color 0.2s ease; background: none; border: none;
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0;
}
.nav-link:hover { color: var(--primary); }
.nav-link svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.nav-dropdown { position: relative; }
.nav-dropdown.open .nav-link svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; left: 0; top: 100%; padding-top: 0.75rem; display: none; z-index: 60;
}
.nav-dropdown.open .dropdown-menu { display: block; }
.dropdown-menu ul { list-style: none; margin: 0; padding: 0.5rem; min-width: 16rem; }
.dropdown-menu a {
  display: block; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--muted-foreground);
  text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease;
}
.dropdown-menu a:hover { background: var(--secondary); color: var(--primary); }
.book-call { height: 2.5rem; padding: 0 1rem; font-size: 11px; }
.book-call svg { width: 14px; height: 14px; }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; background: none; border: none; color: var(--foreground); cursor: pointer;
}
.hamburger svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .hamburger { display: none; } }
.mobile-nav { display: none; border-top: 1px solid hsl(220 26% 18% / 0.7); padding: 1rem 1.25rem; background: var(--background); }
.mobile-nav.open { display: block; }
@media (min-width: 768px) { .mobile-nav.open { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a, .mobile-nav .mobile-services-toggle {
  display: block; width: 100%; text-align: left; padding: 0.75rem 0;
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 0.75rem; text-transform: uppercase;
  color: var(--muted-foreground); text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer;
}
.mobile-nav a:hover, .mobile-nav .mobile-services-toggle:hover { color: var(--primary); }
.mobile-services-toggle { display: flex !important; align-items: center; justify-content: space-between; }
.mobile-services-toggle svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.mobile-services-toggle.open svg { transform: rotate(180deg); }
.mobile-submenu { display: none; margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--border); }
.mobile-submenu.open { display: block; }
.mobile-submenu a { font-size: 0.875rem; letter-spacing: normal; text-transform: none; font-stretch: 100%; font-weight: 400; padding: 0.625rem 0; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: 4rem; }
.hero-beam {
  pointer-events: none; position: absolute; top: -10rem; right: -10%;
  height: 130%; width: 46%; transform: skewX(-12deg);
  background: linear-gradient(to bottom, hsl(197 55% 18% / 0.5), hsl(197 55% 18% / 0.1), transparent);
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 3.5rem;
  align-items: center; min-height: 100vh; padding-top: 4rem; padding-bottom: 6rem;
}
@media (min-width: 768px) { .hero-grid { grid-template-columns: repeat(12, 1fr); padding-top: 2.5rem; } }
.hero-copy { grid-column: span 1; }
@media (min-width: 768px) { .hero-copy { grid-column: span 7; } }
.hero h1 { margin-top: 1.75rem; color: var(--foreground); }
.hero h1 .line1 { display: block; font-size: 13vw; line-height: 0.95; }
@media (min-width: 640px) { .hero h1 .line1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 .line1 { font-size: 4.5rem; } }
.hero h1 .line2 {
  display: block; margin-top: 0.75rem; font-size: 8vw; line-height: 1.05;
  text-transform: uppercase; color: var(--primary);
}
@media (min-width: 640px) { .hero h1 .line2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hero h1 .line2 { font-size: 3rem; } }
.hero-sub { margin-top: 2rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); }
@media (min-width: 768px) { .hero-sub { font-size: 1.125rem; } }
.hero-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero-media { grid-column: span 1; }
@media (min-width: 768px) { .hero-media { grid-column: span 5; transform: translateY(2.5rem); } }
.hero-media figure { margin: 0; }
@media (min-width: 768px) { .hero-media figure { margin-left: auto; max-width: 24rem; } }
.media-frame { padding: 0.5rem; }
.media-frame img { aspect-ratio: 3/2; width: 100%; object-fit: cover; }
.media-caption {
  margin-top: 1rem; display: flex; align-items: baseline; gap: 0.75rem;
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase;
  color: var(--muted-foreground);
}
.media-caption .num { color: var(--primary); }

/* wave signal */
.wave { display: flex; height: 3rem; align-items: center; gap: 3px; }
.wave-bar { width: 3px; border-radius: 9999px; background: hsl(197 100% 74% / 0.8); transform-origin: center; animation: wave-bar 1.7s ease-in-out infinite; will-change: transform, opacity; }
@keyframes wave-bar { 0%, 100% { transform: scaleY(0.22); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wave-bar { animation: none; transform: scaleY(0.6); } }
.wave-note { margin-top: 0.75rem; font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }

/* ---------- section headers ---------- */
.split-head { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .split-head { grid-template-columns: repeat(12, 1fr); } .split-head .left { grid-column: span 7; } .split-head .right { grid-column: span 5; transform: translateY(1.5rem); } }
.h2 { margin-top: 1.25rem; font-size: 2.25rem; line-height: 1.02; color: var(--foreground); }
@media (min-width: 640px) { .h2 { font-size: 3rem; } }
.lede { max-width: 28rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---------- services grid ---------- */
.services-grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.service-card {
  display: flex; flex-direction: column; height: 100%; padding: 1.75rem; text-decoration: none;
  transition: border-color 0.2s ease; color: inherit;
}
@media (min-width: 768px) { .service-card { padding: 2.25rem; } }
.service-card:hover { border-color: var(--primary); }
.service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.service-index { font-stretch: 125%; font-weight: 900; letter-spacing: -0.025em; font-size: 2.25rem; color: var(--border); transition: color 0.2s ease; }
.service-card:hover .service-index { color: var(--primary); }
.service-icon { display: flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; flex-shrink: 0; }
.service-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.service-card h3 { margin-top: 1.5rem; font-size: 1.25rem; color: var(--foreground); }
@media (min-width: 768px) { .service-card h3 { font-size: 1.5rem; } }
.service-card .tagline { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
@media (min-width: 768px) { .service-card .tagline { font-size: 1rem; } }
.tag-list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li {
  border: 1px solid var(--border); padding: 0.25rem 0.625rem;
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase;
  color: var(--muted-foreground);
}
.learn-more {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.375rem;
  font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 11px; text-transform: uppercase;
  color: var(--primary);
}
.learn-more svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.service-card:hover .learn-more svg { transform: translate(2px, -2px); }
@media (min-width: 768px) { .stagger { transform: translateY(3.5rem); } }
.media-tile figure { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.media-tile .btn { margin-top: 2rem; width: fit-content; }

/* ---------- approach ---------- */
.approach-band { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border); }
.approach-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: start; }
@media (min-width: 768px) { .approach-grid { grid-template-columns: repeat(12, 1fr); } .approach-grid .media-col { grid-column: span 5; transform: translateY(-0.5rem); } .approach-grid .text-col { grid-column: span 7; } }
.approach-grid .media-col figure { margin: 0; max-width: 24rem; }
.approach-h2-sub { display: block; margin-top: 0.5rem; font-size: 1.5rem; text-transform: uppercase; color: var(--primary); }
@media (min-width: 640px) { .approach-h2-sub { font-size: 1.875rem; } }
.values { margin-top: 3rem; display: flex; flex-direction: column; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.value-row { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 0; }
.value-row + .value-row { border-top: 1px solid var(--border); }
.value-icon { display: flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0; margin-top: 0.125rem; }
.value-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.value-row h3 { font-size: 1.125rem; color: var(--foreground); }
.value-row p { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---------- process ---------- */
.process-head { max-width: 42rem; }
@media (min-width: 768px) { .process-head { margin-left: auto; } }
.process-steps { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(3, 1fr); } }
.process-step { padding: 2rem 2.5rem; border-top: 1px solid var(--border); }
.process-step:first-child { border-top: none; }
@media (min-width: 768px) {
  .process-step { border-top: none; border-left: 1px solid var(--border); }
  .process-step:first-child { border-left: none; }
  .process-step.mid { transform: translateY(1.5rem); }
}
.process-step .num { font-stretch: 125%; font-weight: 900; letter-spacing: -0.025em; font-size: 3rem; color: var(--border); }
.process-step h3 { margin-top: 1.5rem; font-size: 1.25rem; color: var(--foreground); }
.process-step p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.process-note { margin-top: 2.5rem; text-align: center; font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(12, 1fr); } .contact-grid .info { grid-column: span 5; } .contact-grid .form-col { grid-column: span 7; transform: translateY(2rem); } }
.contact-info-list { margin: 2.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.contact-info-list li.center { align-items: center; }
.contact-info-list svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--primary); margin-top: 0.125rem; }
.contact-info-list li.center svg { margin-top: 0; }
.form-panel { padding: 1.75rem; }
@media (min-width: 768px) { .form-panel { padding: 2.5rem; } }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .field-grid { grid-template-columns: repeat(2, 1fr); } .field-full { grid-column: span 2; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--input); background: var(--background);
  padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--foreground); font-family: inherit;
  transition: border-color 0.2s ease; border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: hsl(216 16% 62% / 0.6); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 1px var(--ring); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field textarea { resize: vertical; }
.form-error { margin-top: 1rem; border: 1px solid hsl(0 72% 55% / 0.5); background: hsl(0 72% 55% / 0.1); padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--destructive-foreground); }
.form-success { min-height: 26rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.form-success svg { width: 3rem; height: 3rem; color: var(--primary); }
.form-success h3 { margin-top: 1.5rem; font-size: 1.5rem; color: var(--foreground); }
.form-success p { margin-top: 0.75rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.form-success .btn { margin-top: 2rem; }
.submit-btn { margin-top: 1.75rem; width: 100%; justify-content: center; }
@media (min-width: 640px) { .submit-btn { width: auto; } }
.submit-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.spinner { width: 1rem; height: 1rem; border: 2px solid hsl(224 60% 8% / 0.3); border-top-color: var(--primary-foreground); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 3.5rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(12, 1fr); } .footer-brand { grid-column: span 4; } .footer-services { grid-column: span 3; } .footer-explore { grid-column: span 2; } .footer-legal { grid-column: span 3; } }
.footer-brand .logo-word { font-size: 0.875rem; }
.footer-brand p { margin-top: 1rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.footer-brand address { margin-top: 1.25rem; font-style: normal; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.footer-nav p { font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: hsl(216 16% 62% / 0.7); margin: 0; }
.footer-nav ul { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; transition: color 0.2s ease; }
.footer-nav a:hover { color: var(--primary); }
.footer-bottom { margin-top: 3rem; border-top: 1px solid var(--border); padding: 1.5rem 0; }
.footer-bottom p { margin: 0; font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: hsl(216 16% 62% / 0.7); line-height: 2; }

/* ---------- service pages ---------- */
.page-top { padding-top: 4rem; }
.page-hero { position: relative; overflow: hidden; }
.page-hero-inner { position: relative; padding-top: 4rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .page-hero-inner { padding-top: 6rem; } }
.back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 11px; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; transition: color 0.2s ease; }
.back-link:hover { color: var(--primary); }
.back-link svg { width: 14px; height: 14px; }
.service-hero-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .service-hero-grid { grid-template-columns: repeat(12, 1fr); } .service-hero-grid .main { grid-column: span 8; } .service-hero-grid .side { grid-column: span 4; transform: translateY(1.5rem); } }
.service-eyebrow { display: flex; align-items: center; gap: 1rem; }
.service-eyebrow .service-icon { height: 3rem; width: 3rem; }
.service-eyebrow .service-icon svg { width: 1.25rem; height: 1.25rem; }
.page-h1 { margin-top: 1.75rem; font-size: 2.25rem; line-height: 1.02; color: var(--foreground); }
@media (min-width: 640px) { .page-h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .page-h1 { font-size: 3.75rem; } }
.page-tagline { margin-top: 1.75rem; max-width: 42rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); }
@media (min-width: 768px) { .page-tagline { font-size: 1.125rem; } }
.page-ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.service-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 768px) { .service-tags { flex-direction: column; gap: 0.75rem; align-items: flex-start; } }
.service-tags li { border: 1px solid var(--border); padding: 0.375rem 0.75rem; font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }

.band { border-top: 1px solid var(--border); padding: 5rem 0; }
@media (min-width: 768px) { .band { padding: 7rem 0; } }
.band-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .band-grid { grid-template-columns: repeat(12, 1fr); } .band-grid .side { grid-column: span 4; } .band-grid .main { grid-column: span 8; } }
.band h2 { margin-top: 1.25rem; font-size: 1.875rem; line-height: 1.05; color: var(--foreground); }
@media (min-width: 640px) { .band h2 { font-size: 2.25rem; } }
.band .body-large { max-width: 42rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); margin: 0; }

.deliverables { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 640px) { .deliverables { grid-template-columns: repeat(2, 1fr); } }
.deliverable { background: var(--background); padding: 1.75rem; display: flex; align-items: flex-start; gap: 1rem; }
@media (min-width: 768px) { .deliverable { padding: 2rem; } }
.deliverable svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--primary); margin-top: 0.125rem; }
.deliverable span { font-size: 0.875rem; line-height: 1.7; color: var(--foreground); }
@media (min-width: 768px) { .deliverable span { font-size: 1rem; } }

.steps-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.step-card { padding: 1.75rem; height: 100%; }
@media (min-width: 768px) { .step-card { padding: 2rem; } }
.step-card .num { font-stretch: 125%; font-weight: 900; letter-spacing: -0.025em; font-size: 2.25rem; color: var(--border); }
.step-card h3 { margin-top: 1.25rem; font-size: 1.25rem; color: var(--foreground); }
.step-card p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

.cta-panel { padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 768px) { .cta-panel { padding: 3rem; flex-direction: row; align-items: center; justify-content: space-between; } }
.cta-panel h2 { margin-top: 0; }
.cta-panel p { margin-top: 1rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); }
.cta-panel .btn { flex-shrink: 0; }

.other-services { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .other-services { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.other-card { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.75rem; text-decoration: none; height: 100%; transition: border-color 0.2s ease; }
@media (min-width: 768px) { .other-card { padding: 2rem; } .other-card.stagger { transform: translateY(2.5rem); } }
.other-card:hover { border-color: var(--primary); }
.other-card .service-icon { height: 2.75rem; width: 2.75rem; }
.other-card .meta { display: flex; align-items: center; gap: 0.75rem; }
.other-card .meta .idx { font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }
.other-card h3 { font-size: 1.125rem; color: var(--foreground); }
.other-card p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---------- blog ---------- */
.blog-head { padding-top: 7rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .blog-head { padding-bottom: 6rem; } }
.blog-head h1 { margin-top: 1rem; font-size: 2.25rem; line-height: 1.02; }
@media (min-width: 640px) { .blog-head h1 { font-size: 3rem; } }
@media (min-width: 768px) { .blog-head h1 { font-size: 3.75rem; } }
.blog-head .lede { margin-top: 1.5rem; }
.post-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
.post-card { display: block; text-decoration: none; overflow: hidden; transition: transform 0.15s ease; color: inherit; }
.post-card:active { transform: scale(0.99); }
.post-card-body { padding: 1.5rem; }
@media (min-width: 768px) { .post-card-body { padding: 2rem; } }
.post-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 11px; text-transform: uppercase; color: var(--muted-foreground); font-stretch: 72%; font-weight: 500; letter-spacing: 0.22em; }
.post-meta svg { width: 14px; height: 14px; }
.post-card h2 { margin-top: 1rem; font-size: 1.5rem; line-height: 1.2; color: var(--foreground); }
.post-card .excerpt { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

.article { max-width: 48rem; margin: 0 auto; padding-top: 7rem; padding-bottom: 6rem; }
.article .post-meta { margin-top: 1.5rem; }
.article h1 { margin-top: 1rem; font-size: 2rem; line-height: 1.1; color: var(--foreground); }
@media (min-width: 640px) { .article h1 { font-size: 2.75rem; } }
.article .standfirst { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); }
.article-body { margin-top: 2.5rem; color: var(--muted-foreground); font-size: 1rem; line-height: 1.8; }
.article-body p { margin: 0 0 1.25rem; }
.article-body h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; line-height: 1.25; color: var(--foreground); }
.article-body h3 { margin: 2rem 0 0.75rem; font-size: 1.125rem; color: var(--foreground); }
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--foreground); }
.article-body strong { color: var(--foreground); font-weight: 700; }
.article-cta { margin-top: 3.5rem; padding: 2rem; }
@media (min-width: 768px) { .article-cta { padding: 2.5rem; } }
.article-cta h2 { margin-top: 0 !important; font-size: 1.5rem !important; }
.article-cta p { margin-top: 0.75rem; }
.article-cta .btn { margin-top: 1.5rem; }
.article-back { margin-top: 3rem; }

/* ---------- legal pages ---------- */
.legal { max-width: 48rem; margin: 0 auto; padding-top: 7rem; padding-bottom: 6rem; }
.legal h1 { margin-top: 1rem; font-size: 2.25rem; line-height: 1.05; color: var(--foreground); }
@media (min-width: 640px) { .legal h1 { font-size: 3rem; } }
.legal .updated { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.legal-body { margin-top: 2.5rem; }
.legal-body section { margin-bottom: 2rem; }
.legal-body h2 { font-size: 1.25rem; color: var(--foreground); margin: 0 0 0.75rem; }
.legal-body p, .legal-body li { font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
@media (min-width: 768px) { .legal-body p, .legal-body li { font-size: 1rem; } }
.legal-body ul { padding-left: 1.25rem; }
.legal-body li { margin-bottom: 0.5rem; }
.legal-back { margin-top: 3rem; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(var(--ry, 20px)); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--rd, 0s); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}