/* ============================================================
   STYLES.CSS - Intelligencia V2
   Direction: The Assembly with the Abyssal Light undercurrent
   Brand tokens: brand-tokens.json v1.0.0 (black & gold, fluoro wayfinding)
   Built on base.css (V5 pipeline). Extend only - never edit base.css.
   ============================================================ */

@import url('base.css');

/* ============================================================
   TOKENS - Intelligencia brand over the base.css slots
   ============================================================ */

:root {
  /* Foundation - black and gold */
  --color-bg:              #0C0C0C;
  --color-bg-alt:          #0F0F0F;
  --color-surface:         #141414;
  --color-raised:          #1C1C1C;
  --color-text:            #EBEBEB;
  --color-text-muted:      #8A8A8A;
  --color-border:          #1C1C1C;
  --color-accent:          #C9A84C;
  --color-accent-2:        #E8C870;
  --color-accent-contrast: #0C0C0C;

  --color-gold:   #C9A84C;
  --color-gold-2: #E8C870;

  /* Service wayfinding colours - highlight only */
  --color-svc-brand:     #7B35A0;
  --color-svc-web:       #00E5FF;
  --color-svc-ai:        #CCFF00;
  --color-svc-structure: #FF4500;
  --color-svc-marketing: #FF0080;

  /* Service tint backgrounds - near-invisible */
  --tint-brand:     #100C12;
  --tint-web:       #001418;
  --tint-ai:        #0E1000;
  --tint-structure: #180800;
  --tint-marketing: #160010;

  /* Gradient text - gold */
  --gradient-text: linear-gradient(100deg, #C9A84C, #E8C870);

  /* Grain - subtle, per direction */
  --grain-opacity: 0.045;

  /* Reveal travel - pronounced enough to read as deliberate motion */
  --reveal-distance: 46px;
}

/* ============================================================
   GLOBAL
   ============================================================ */

html {
  overscroll-behavior-y: none;
  /* Sections click to the top of the viewport as you scroll past them.
     Proximity (not mandatory) so tall sections never trap the scroll. */
  scroll-snap-type: y proximity;
  scroll-padding-top: 4.5rem;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  overscroll-behavior-y: none;
}

section { scroll-snap-align: start; }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* Fraunces is an editorial serif - serifs need less negative tracking
   and read beautifully at a medium display weight. */
.hero h1,
.about-hero h1,
.service-hero h1,
.contact-hero h1,
.section-cta h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

a { color: var(--color-gold); }
a:hover { color: var(--color-gold-2); text-decoration: none; }

::selection { background: var(--color-gold); color: #0C0C0C; }

/* ============================================================
   HEADER & NAV
   ============================================================ */

.site-header {
  background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
  border-bottom: 1px solid var(--color-border);
}

.site-logo img { height: 26px; width: auto; }

.site-nav { gap: var(--space-lg); }

.site-nav a {
  font-family: var(--font-text);
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.site-nav a:hover,
.site-nav a.active { color: var(--color-gold); }

.site-nav .btn-outline {
  color: rgba(235, 235, 235, 0.7);
  border-color: rgba(235, 235, 235, 0.2);
  padding: 7px 18px;
}

.site-nav .btn-outline:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: transparent;
  transform: none;
}

/* Per-service nav hover colours (wayfinding) */
.site-nav a.nav-svc:not(.active):hover { color: var(--svc); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background-color: var(--color-gold);
  color: #0C0C0C;
  border-color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

.btn-primary:hover {
  background-color: var(--color-gold-2);
  border-color: var(--color-gold-2);
  color: #0C0C0C;
}

.btn-outline {
  border-color: rgba(235, 235, 235, 0.25);
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ============================================================
   SHARED SECTION HEADINGS
   ============================================================ */

.section-label,
.eyebrow {
  color: var(--color-gold);
}

/* Tighter vertical rhythm so major sections fit within a 1080p viewport */
.section-problem,
.section-services,
.section-credibility,
.section-approach,
.section-deliverables,
.about-why {
  padding: var(--space-3xl) 0;
}

/* About "why" section - black, between the two grey sections */
.about-why {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.section-heading { margin-bottom: var(--space-2xl); }

/* Pull the sticky heading column closer to its detail paragraphs. */
.split-layout { gap: var(--space-2xl); }

/* Eyebrow separator - a thin gold pipe between the discipline words. */
.eyebrow-sep {
  color: var(--color-gold);
  font-style: normal;
  margin: 0 0.3em;
  opacity: 0.55;
}

/* ============================================================
   HOMEPAGE HERO - the signature moment lives here
   Split asymmetric: copy left, the assembling mark right,
   gold aurora breathing behind. Stage 2 = static structure.
   ============================================================ */

/* Fills the viewport below the sticky header so the whole hero
   loads on one screen, no scrollbar nudge. Header is ~4.5rem tall. */
.hero {
  min-height: calc(100vh - 4.5rem);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-3xl);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-copy { max-width: 36rem; min-width: 0; }

.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.75rem);
  line-height: 1.02;
  margin-bottom: var(--space-xl);
}

.hero h1 em { font-style: normal; color: var(--color-gold); }

.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: rgba(201, 168, 76, 0.75);
  margin-bottom: var(--space-2xl);
}

.hero-sub {
  font-size: var(--text-lg);
  color: rgba(235, 235, 235, 0.6);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 32em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* --- The icon stage (signature moment host) --- */
.icon-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.icon-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The aurora field behind the mark - static gradient in Stage 2.
   Centres sit off the right and top edges so you only see the arc
   bleeding in from the side, never the bright middle of the gradient.
   Stage 3 drops the live canvas into .hero-aurora. */
@keyframes hero-breathe {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.62; transform: scale(1.04); }
}

/* Static fallback glow; the live aurora canvas (data-aurora) drifts on top. */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 112% 55%, rgba(201, 168, 76, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 105% 95%, rgba(0, 229, 255, 0.03) 0%, transparent 60%);
}

@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  /* Headline leads on mobile (DOM order); the mark sits below it. */
  .hero-copy { max-width: none; }
  .icon-stage { max-width: 300px; }
  .hero-aurora { inset: 0; }
}

/* The discipline eyebrow is pipe-separated with no break points, so it
   cannot wrap - shrink it on small phones so the last word ("Marketing")
   is never clipped by the hero's overflow. */
@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
  }
  .eyebrow-sep { margin: 0 0.3em; }
}

/* ============================================================
   PROBLEM SECTION (split-layout)
   ============================================================ */

.section-problem {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.problem-heading {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.problem-heading em { font-style: normal; color: var(--color-gold); }

.problem-body p {
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-lg);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.problem-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.problem-list li {
  padding: var(--space-md) 0 var(--space-md) var(--space-xl);
  position: relative;
  color: rgba(235, 235, 235, 0.62);
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border);
}

.problem-list li:first-child { border-top: 1px solid var(--color-border); }

.problem-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.75rem;
  height: 0.75rem;
  background-image: url('../images/Icon-white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */

.section-services { background-color: var(--color-bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.service-card              { grid-column: span 2; }
.service-card:nth-child(4) { grid-column: 2 / span 2; }
.service-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card,
  .service-card:nth-child(4),
  .service-card:nth-child(5) { grid-column: auto; }
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border);
  border-radius: 2px;
  padding: var(--space-xl);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth);
}

.service-card:hover { transform: translateY(-3px); }
.service-card h3, .service-card p { color: inherit; }

/* Cards sit on the black services section as raised grey panels.
   Wayfinding is the coloured top border + label only - no tint fill,
   which keeps black and gold leading and gives the border real contrast. */
.service-card--brand     { border-top-color: var(--color-svc-brand); }
.service-card--web       { border-top-color: var(--color-svc-web); }
.service-card--ai        { border-top-color: var(--color-svc-ai); }
.service-card--structure { border-top-color: var(--color-svc-structure); }
.service-card--marketing { border-top-color: var(--color-svc-marketing); }

.service-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  padding: 3px 8px;
  border-radius: 2px;
}

.service-card--brand     .service-label { color: var(--color-svc-brand);     border: 1px solid rgba(123,53,160,0.5); background: rgba(123,53,160,0.1); }
.service-card--web       .service-label { color: var(--color-svc-web);       border: 1px solid rgba(0,229,255,0.4);  background: rgba(0,229,255,0.07); }
.service-card--ai        .service-label { color: var(--color-svc-ai);        border: 1px solid rgba(204,255,0,0.4);  background: rgba(204,255,0,0.07); }
.service-card--structure .service-label { color: var(--color-svc-structure); border: 1px solid rgba(255,69,0,0.5);   background: rgba(255,69,0,0.1); }
.service-card--marketing .service-label { color: var(--color-svc-marketing); border: 1px solid rgba(255,0,128,0.5);  background: rgba(255,0,128,0.1); }

.service-card h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
}

.service-card p {
  color: rgba(235, 235, 235, 0.5);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   CREDIBILITY (split-layout)
   ============================================================ */

.section-credibility {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.credibility-heading {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.credibility-heading em { font-style: normal; color: var(--color-gold); }

.credibility-body p {
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-lg);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
}

/* Stat counters - count up when the section scrolls into view */
.stat-row {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.stat { display: flex; flex-direction: column; }

.stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

@media (max-width: 480px) { .stat-row { gap: var(--space-xl); } }

.role-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) 0 var(--space-3xl);
}

.role-list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-sm);
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  line-height: 1.6;
}

.role-list li:first-child { border-top: 1px solid var(--color-border); }

.role-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  min-width: 96px;
  flex-shrink: 0;
}

/* ============================================================
   CTA STRIP
   ============================================================ */

.section-cta {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 50% 120%, rgba(201, 168, 76, 0.12) 0%, transparent 60%);
}

.section-cta > .container { position: relative; z-index: 1; }

.section-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.section-cta h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.section-cta p {
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-lg);
  max-width: 30em;
  margin: 0 auto var(--space-2xl);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { background-color: var(--color-bg); }

.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

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

.footer-logo { margin-bottom: var(--space-lg); }
.footer-logo img { height: 22px; width: auto; opacity: 0.7; }

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(235, 235, 235, 0.6);
  max-width: 240px;
  line-height: 1.6;
}

.footer-location {
  font-size: var(--text-sm);
  color: rgba(235, 235, 235, 0.6);
  line-height: 1.7;
  margin: 0;
}

.footer-col a { color: rgba(235, 235, 235, 0.4); }
.footer-col a:hover { color: var(--color-gold); }

.footer-bottom { color: rgba(235, 235, 235, 0.55); }
.footer-bottom p { margin: 0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-hero {
  padding: var(--space-5xl) 0 var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at -8% 60%, rgba(201, 168, 76, 0.14) 0%, transparent 60%);
}

.about-hero > .container { position: relative; z-index: 1; }

.about-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 1.04;
  margin-bottom: var(--space-xl);
}
.about-hero h1 em { font-style: normal; color: var(--color-gold); }

.about-hero p {
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-lg);
  max-width: 38em;
  line-height: 1.7;
  margin: 0;
}

/* Duotone Brisbane photography - gold on black, applied via CSS */
.duotone {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.duotone img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.6);
}

/* About page feature photo - full-bleed band, set the ratio per use */
.about-band { margin: 0; padding: 0; }
.about-band .duotone {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  aspect-ratio: 5 / 2;
  overflow: hidden;
}

/* A 5:2 band is too letterboxed on a phone - give it more height. */
@media (max-width: 600px) {
  .about-band .duotone { aspect-ratio: 4 / 3; }
}

/* The band image runs well taller than the band so it can drift a long
   way on parallax without ever exposing an edge. */
.about-band .duotone img {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  width: 100%;
  height: 162%;
  aspect-ratio: auto;
  object-fit: cover;
}

.duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(201, 168, 76, 0.35), rgba(12, 12, 12, 0.2) 70%);
}

.duotone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 12, 12, 0.5), transparent 50%);
}

.about-photo-caption {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */

.service-hero {
  padding: var(--space-5xl) 0 var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border);
  position: relative;
}

.service-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}
.service-hero h1 em { font-style: normal; }

.service-hero p {
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-lg);
  max-width: 38em;
  line-height: 1.7;
  margin: 0;
}

.service-hero--brand     { border-top-color: var(--color-svc-brand);     background-color: var(--tint-brand); }
.service-hero--web       { border-top-color: var(--color-svc-web);       background-color: var(--tint-web); }
.service-hero--ai        { border-top-color: var(--color-svc-ai);        background-color: var(--tint-ai); }
.service-hero--structure { border-top-color: var(--color-svc-structure); background-color: var(--tint-structure); }
.service-hero--marketing { border-top-color: var(--color-svc-marketing); background-color: var(--tint-marketing); }

.service-hero--brand     h1 em { color: var(--color-svc-brand); }
.service-hero--web       h1 em { color: var(--color-svc-web); }
.service-hero--ai        h1 em { color: var(--color-svc-ai); }
.service-hero--structure h1 em { color: var(--color-svc-structure); }
.service-hero--marketing h1 em { color: var(--color-svc-marketing); }

.section-approach {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Service-page section rhythm: hero(tint) > problem(grey) > approach(black)
   > deliverables(grey) > cta(tint). Scoped so About keeps its own rhythm. */
.service-page .section-approach     { background-color: var(--color-bg); }
.service-page .section-deliverables { background-color: var(--color-surface); }

.approach-heading {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  letter-spacing: -0.015em;
  line-height: 1.13;
}
.approach-heading em { font-style: normal; color: var(--color-gold); }

.approach-body p {
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-lg);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
}

.approach-body strong { color: var(--color-text); font-weight: 600; }

.section-deliverables h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
}

.deliverables-intro {
  color: rgba(235, 235, 235, 0.5);
  font-size: var(--text-lg);
  margin-bottom: 0;
}

.deliverables-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  max-width: 680px;
}

.deliverables-list li {
  padding: var(--space-md) 0 var(--space-md) var(--space-xl);
  position: relative;
  color: rgba(235, 235, 235, 0.65);
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border);
}

.deliverables-list li:first-child { border-top: 1px solid var(--color-border); }

.deliverables-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.75rem;
  height: 0.75rem;
  background-image: url('../images/Icon-white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
}

/* ============================================================
   SERVICE PAGE PHOTOGRAPHY + CTA BOOKEND
   ============================================================ */

/* Hero with a gold-duotone photo alongside the text */
.service-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-3xl);
  align-items: center;
}
.service-hero-grid .duotone { --ratio: 4 / 3; }

@media (max-width: 860px) {
  .service-hero-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* Two-photo row in the deliverables (second-last) section */
.deliverables-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
}
.deliverables-photos .duotone { --ratio: 4 / 3; }

@media (max-width: 600px) { .deliverables-photos { grid-template-columns: 1fr; } }

/* CTA bookends the hero: same tint and coloured top border, coloured
   accent word, no glow - so the page reads as one self-contained piece. */
.service-page .section-cta {
  border-top: 2px solid var(--color-border);
}
.service-page .section-cta::before,
.service-page .section-cta::after { display: none; } /* clean bookend: tint + coloured border, no glow */
.service-page .section-cta h2 em { font-style: normal; }

.svc-brand     .section-cta { background-color: var(--tint-brand);     border-top-color: var(--color-svc-brand); }
.svc-web       .section-cta { background-color: var(--tint-web);       border-top-color: var(--color-svc-web); }
.svc-ai        .section-cta { background-color: var(--tint-ai);        border-top-color: var(--color-svc-ai); }
.svc-structure .section-cta { background-color: var(--tint-structure); border-top-color: var(--color-svc-structure); }
.svc-marketing .section-cta { background-color: var(--tint-marketing); border-top-color: var(--color-svc-marketing); }

.svc-brand     .section-cta h2 em { color: var(--color-svc-brand); }
.svc-web       .section-cta h2 em { color: var(--color-svc-web); }
.svc-ai        .section-cta h2 em { color: var(--color-svc-ai); }
.svc-structure .section-cta h2 em { color: var(--color-svc-structure); }
.svc-marketing .section-cta h2 em { color: var(--color-svc-marketing); }

/* ============================================================
   SERVICE PAGE HERO AURORA
   The colour lives in the hero banner only - a live aurora of three
   blobs drifting in the page's own colour. The content sections stay
   clean, so nothing bleeds under the hero and pulls focus off the
   copy as you scroll.
   ============================================================ */

.service-page .service-hero { overflow: hidden; }
.service-page .service-hero > .container { position: relative; z-index: 1; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-hero {
  padding: var(--space-5xl) 0 var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.contact-hero > .container { position: relative; z-index: 1; }

.contact-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}
.contact-hero h1 em { font-style: normal; color: var(--color-gold); }

.contact-hero p {
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-lg);
  max-width: 34em;
  line-height: 1.7;
  margin: 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-4xl);
  padding: var(--space-4xl) 0;
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

.contact-info p {
  color: rgba(235, 235, 235, 0.55);
  line-height: 1.8;
  font-size: var(--text-base);
  margin-bottom: var(--space-xl);
}

.contact-detail { margin-bottom: var(--space-lg); }

.contact-detail-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.contact-detail-value {
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-base);
}

.contact-form-wrapper {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3xl);
}

label {
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text);
}

input:focus, textarea:focus, select:focus { border-color: var(--color-gold); }

input::placeholder, textarea::placeholder { color: rgba(235, 235, 235, 0.2); }

.contact-submit { width: 100%; margin-top: var(--space-md); }

/* ============================================================
   FAQ ACCORDION - ready infrastructure (content added in Stage 5)
   ============================================================ */

.faq {
  border-top: 1px solid var(--color-border);
  max-width: 760px;
  margin: 0 auto;
}

.faq-item { border-bottom: 1px solid var(--color-border); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-lg) 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}

.faq-question::after {
  content: '+';
  color: var(--color-gold);
  font-size: var(--text-xl);
  font-weight: 400;
  transition: transform var(--dur-fast) var(--ease-smooth);
  flex-shrink: 0;
}

.faq-question[aria-expanded="true"]::after { transform: rotate(45deg); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-med) var(--ease-smooth);
}

.faq-answer-inner {
  padding: 0 0 var(--space-lg);
  color: rgba(235, 235, 235, 0.6);
  font-size: var(--text-base);
  line-height: 1.75;
}

/* ============================================================
   404
   ============================================================ */

.error-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
}

.error-hero > .container { position: relative; z-index: 1; }

.error-hero h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-lg);
}

.error-hero p {
  color: rgba(235, 235, 235, 0.55);
  font-size: var(--text-lg);
  max-width: 28em;
  margin: 0 auto var(--space-2xl);
}