/* ============================================================
   LUMIQ — Design System & Styles
   Version 1.1 | 2026
   ============================================================ */


/* ── 01 · RESET ─────────────────────────────────────────── */

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

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

body {
  background-color: #ffffff;
  color: var(--navy);
  font-family: 'Figtree', sans-serif;
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select { font-family: inherit; }


/* ── 02 · CUSTOM PROPERTIES ─────────────────────────────── */

:root {
  /* Brand colours */
  --navy:  #0B1829;
  --ink:   #1A3347;
  --dusk:  #2E4D66;
  --slate: #8AADC7;
  --blue:  #70BCE8;
  --ocean: #3D8FBE;
  --mist:  #D6EBF7;
  --white: #F4F9FD;

  /* Type scale */
  --text-display: clamp(52px, 8.5vw, 108px);
  --text-h1:      clamp(38px, 5.5vw, 72px);
  --text-h2:      clamp(26px, 3.8vw, 48px);
  --text-h3:      clamp(19px, 2.4vw, 26px);
  --text-body:    15px;
  --text-sm:      13px;
  --text-label:   11px;

  /* Spacing (8 px base) */
  --sp-2:   4px;
  --sp-4:   8px;
  --sp-6:  12px;
  --sp-8:  16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-16: 32px;
  --sp-20: 40px;
  --sp-24: 48px;
  --sp-32: 64px;
  --sp-40: 80px;
  --sp-48: 96px;
  --sp-64: 128px;

  /* Radius */
  --r-sm:  6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* Motion */
  --ease:           cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* Z-index */
  --z-base:    10;
  --z-overlay: 20;
  --z-nav:     30;

  /* Light-theme surfaces */
  --bg-subtle:    #EEF6FB;
  --border-light: #C5DDE9;

  /* Layout */
  --max-w:  1200px;
  --gutter: clamp(20px, 5vw, 80px);
  --nav-h:  72px;
}


/* ── 03 · TYPOGRAPHY ─────────────────────────────────────── */

.label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dusk);
}

/* Section label with leading dash */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: var(--sp-8);
}

.section-label::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--dusk);
  flex-shrink: 0;
}

/* Signature degree accent */
.deg {
  color: var(--ocean);
}


/* ── 04 · LAYOUT ─────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section         { padding-block: var(--sp-48); }
.section--sm     { padding-block: var(--sp-24); }
.section--lg     { padding-block: var(--sp-64); }
.section--flush  { padding-block: 0; }


/* ── 05 · NAV ────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition:
    background var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-light);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__logo-text {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--navy);
  overflow: hidden;
  padding-bottom: 4px;
  margin-bottom: -4px;
}

/* Nav logo entrance — mark scales up, letters flow up from below */
.nav__logo-mark {
  opacity: 0;
  transform: translateY(8px) scale(0.82);
  animation: navMarkIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.05s;
}

@keyframes navMarkIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.nav__logo-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  animation: navLetterUp 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nav__logo-letter:nth-child(1) { animation-delay: 0.26s; }
.nav__logo-letter:nth-child(2) { animation-delay: 0.33s; }
.nav__logo-letter:nth-child(3) { animation-delay: 0.39s; }
.nav__logo-letter:nth-child(4) { animation-delay: 0.44s; }
.nav__logo-letter:nth-child(5) { animation-delay: 0.49s; }

@keyframes navLetterUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dusk);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-sm);
  transition: color var(--dur-base) var(--ease);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--ink);
}

.nav__links a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* CTA pill */
.nav__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #ffffff;
  background: var(--navy);
  padding: 9px 18px;
  border-radius: var(--r-sm);
  transition:
    background var(--dur-base) var(--ease),
    transform   var(--dur-fast) var(--ease);
  cursor: pointer;
}

.nav__cta:hover  { background: var(--ink); transform: translateY(-1px); }
.nav__cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--navy);
  transition:
    transform var(--dur-base) var(--ease),
    opacity   var(--dur-base) var(--ease);
  transform-origin: center;
}

.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile fullscreen menu */
.nav__mobile {
  display: flex;
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: calc(var(--z-nav) - 1);
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-40) var(--gutter);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity    280ms var(--ease-out-quart),
    transform  280ms var(--ease-out-quart),
    visibility 0ms   280ms;
}

.nav__mobile.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition:
    opacity    280ms var(--ease-out-quart),
    transform  280ms var(--ease-out-quart),
    visibility 0ms;
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Staggered link entrance — delay set via JS */
.nav__mobile-links li {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity   250ms var(--ease),
    transform 250ms var(--ease);
  transition-delay: 0ms;
}

.nav__mobile.open .nav__mobile-links li {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity   320ms var(--ease-out-expo),
    transform 320ms var(--ease-out-expo);
  transition-delay: var(--link-delay, 0ms);
}

.nav__mobile-links a {
  font-size: clamp(36px, 9vw, 60px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--border-light);
  transition: color var(--dur-base) var(--ease);
  display: block;
  padding-block: var(--sp-2);
}

.nav__mobile-links a:hover,
.nav__mobile-links a.active {
  color: var(--navy);
}

.nav__mobile-bottom {
  margin-top: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   280ms var(--ease-out-quart),
    transform 280ms var(--ease-out-quart);
  transition-delay: 0ms;
}

.nav__mobile.open .nav__mobile-bottom {
  opacity: 1;
  transform: none;
  transition-delay: 220ms;
}

.nav__mobile-email {
  font-size: var(--text-sm);
  color: var(--dusk);
  transition: color var(--dur-base) var(--ease);
}

.nav__mobile-email:hover { color: var(--blue); }


/* ── 06 · BUTTONS ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: var(--r-sm);
  transition: all var(--dur-base) var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.btn--primary {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}

.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--dusk);
}

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

.btn--light {
  background: #ffffff;
  color: var(--navy);
  border-color: #ffffff;
}

.btn--light:hover {
  background: var(--white);
  border-color: var(--white);
  transform: translateY(-1px);
}

.btn--arrow .btn-arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}

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


/* ── 07 · FOOTER ─────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border-light);
  padding-block: var(--sp-12);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.footer__logo-text {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.footer__links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--dusk);
  transition: color var(--dur-base) var(--ease);
}

.footer__links a:hover { color: var(--ocean); }
.footer__links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.footer__copy {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusk);
}


/* ── 08 · HOME · HERO ────────────────────────────────────── */

.hero {
  min-height: min(100svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--sp-32));
  padding-bottom: var(--sp-48);
  position: relative;
  overflow: hidden;
}

/* Background ° watermark — signature motif, animates in on load */
.hero::before {
  content: '°';
  position: absolute;
  right: -0.04em;
  top: -0.12em;
  font-size: clamp(280px, 42vw, 640px);
  font-weight: 900;
  color: var(--mist);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: heroMarkIn 2s var(--ease-out-expo) both;
}

@keyframes heroMarkIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* ─ Eyebrow: slides in from left ─ */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
  opacity: 0;
  transform: translateX(-20px);
}

.hero--animate .hero__eyebrow { opacity: 0; transform: translateX(-20px); }
.hero--entered .hero__eyebrow {
  animation: heroSlideRight 0.6s var(--ease-out-expo) 0.12s both;
}

@keyframes heroSlideRight {
  to { opacity: 1; transform: translateX(0); }
}

.hero__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ocean);
  animation: pulse 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

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

/* ─ Headline: line-mask reveal ─ */
.hero__headline {
  font-size: var(--text-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.93;
  color: var(--ink);
  max-width: 13ch;
  margin-bottom: var(--sp-10);
}

.hero-line {
  display: block;
  overflow: hidden;
  /* Small padding prevents clipping of descenders/ascenders */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hero-line__inner {
  display: block;
  opacity: 0;
  transform: translateY(108%);
  line-height: 0.93;
}

.hero--entered .hero-line:nth-child(1) .hero-line__inner {
  animation: heroLineIn 0.88s var(--ease-out-expo) 0.3s both;
}
.hero--entered .hero-line:nth-child(2) .hero-line__inner {
  animation: heroLineIn 0.88s var(--ease-out-expo) 0.46s both;
}

@keyframes heroLineIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ─ Sub, actions, scroll: fade up ─ */
.hero__sub {
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 400;
  color: var(--dusk);
  max-width: 44ch;
  line-height: 1.6;
  margin-bottom: var(--sp-16);
  opacity: 0;
  transform: translateY(14px);
}

.hero--entered .hero__sub {
  animation: heroFadeUp 0.65s var(--ease-out-expo) 0.64s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
}

.hero--entered .hero__actions {
  animation: heroFadeUp 0.65s var(--ease-out-expo) 0.78s both;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 10 · HOME · FEATURED WORK ───────────────────────────── */

.featured-work__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-24);
  transition: border-color var(--dur-slow) var(--ease);
  color: inherit;
}

.featured-work__card:hover { border-color: var(--ocean); }
.featured-work__card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r-lg); }

.featured-work__tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-6);
}

.featured-work__title {
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: var(--sp-8);
}

.featured-work__desc {
  font-size: var(--text-body);
  color: var(--dusk);
  line-height: 1.65;
  max-width: 44ch;
  margin-bottom: var(--sp-10);
}

.featured-work__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ocean);
  transition: gap var(--dur-base) var(--ease);
}

.featured-work__card:hover .featured-work__link { gap: var(--sp-8); }

.featured-work__visual {
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background var(--dur-slow) var(--ease);
}

.featured-work__card:hover .featured-work__visual {
  background: #daeef8;
}

.featured-work__visual-glyph {
  font-size: clamp(72px, 10vw, 160px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--mist);
  user-select: none;
  transition:
    color     var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease-out-quart);
}

.featured-work__card:hover .featured-work__visual-glyph {
  color: var(--blue);
  transform: scale(1.06);
}


/* ── 11 · HOME · PROCESS BRIEF ───────────────────────────── */

.process-brief {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border-light);
}

.process-brief__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8) var(--sp-32);
  align-items: end;
  margin-bottom: var(--sp-24);
}

.process-brief__heading {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}

.process-brief__lead {
  font-size: var(--text-body);
  color: var(--dusk);
  line-height: 1.65;
  max-width: 44ch;
}

.process-brief__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sp-16);
}

.process-brief__step {
  padding-top: var(--sp-10);
  border-top: 1px solid var(--border-light);
}

.process-brief__num {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ocean);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-8);
}

.process-brief__title {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}

.process-brief__desc {
  font-size: var(--text-body);
  color: var(--dusk);
  line-height: 1.65;
}


/* ── 12 · HOME · ABOUT STRIP ─────────────────────────────── */

.about-strip {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-32);
  align-items: start;
}

.about-strip__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
}

.about-strip__stat {
  background: #ffffff;
  padding: var(--sp-12) var(--sp-10);
}

.about-strip__num {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.about-strip__num sup {
  font-size: 0.45em;
  letter-spacing: 0;
  vertical-align: super;
}

.about-strip__stat-label {
  font-size: var(--text-sm);
  color: var(--dusk);
}

.about-strip__content { padding-top: var(--sp-4); }

.about-strip__body {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: var(--dusk);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: var(--sp-12);
}

/* Commitment list — replaces boxed tiles */
.about-strip__commitments {
  display: flex;
  flex-direction: column;
}

.commitment-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0 var(--sp-8);
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--border-light);
}

.commitment-item:first-child {
  border-top: 1px solid var(--border-light);
}

.commitment-item__mark {
  font-size: 17px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1.4;
}

.commitment-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}

.commitment-item__desc {
  font-size: var(--text-sm);
  color: var(--dusk);
  line-height: 1.55;
}


/* ── 13 · CTA BAND ───────────────────────────────────────── */

.cta-band {
  background: var(--navy);
  border-block: 1px solid var(--navy);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.cta-band__title {
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 28ch;
}

.cta-newline { display: block; }


/* ── 13 · PAGE HEADER ────────────────────────────────────── */

.page-header {
  padding-top: calc(var(--nav-h) + var(--sp-48));
  padding-bottom: var(--sp-32);
  border-bottom: 1px solid var(--border-light);
}

.page-header__title {
  font-size: var(--text-h1);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  max-width: 20ch;
  margin-bottom: var(--sp-10);
}

.page-header__desc {
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--dusk);
  max-width: 54ch;
  line-height: 1.65;
}


/* ── 14 · SERVICES PAGE ──────────────────────────────────── */

.service-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 var(--sp-16);
  padding-block: var(--sp-20);
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}

.service-item:last-child { border-bottom: none; }

.service-item__num {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ocean);
  padding-top: 4px;
}

.service-item__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.service-item__title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: var(--sp-6);
}

.service-item__desc {
  font-size: var(--text-body);
  color: var(--dusk);
  line-height: 1.65;
  margin-bottom: var(--sp-10);
}

.service-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.tag {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dusk);
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 100px;
}

.service-item__includes-title {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: var(--sp-6);
}

.service-item__includes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.service-item__includes li {
  font-size: var(--text-sm);
  color: var(--dusk);
  padding-left: var(--sp-8);
  position: relative;
  line-height: 1.5;
}

.service-item__includes li::before {
  content: '°';
  position: absolute;
  left: 0;
  color: var(--ocean);
  font-weight: 700;
}

/* Process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.process-step {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-16) var(--sp-12);
  transition:
    border-color var(--dur-slow) var(--ease),
    transform    var(--dur-base) var(--ease-out-quart);
}

.process-step:hover {
  border-color: var(--ocean);
  transform: translateY(-3px);
}

.process-step__num {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--blue);
  opacity: 0.7;
  margin-bottom: var(--sp-8);
  transition: opacity var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

.process-step:hover .process-step__num {
  opacity: 1;
  color: var(--ocean);
}

.process-step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.process-step__desc {
  font-size: var(--text-sm);
  color: var(--dusk);
  line-height: 1.6;
}


/* ── 15 · WORK PAGE ──────────────────────────────────────── */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.work-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-slow) var(--ease);
  position: relative;
}

.work-card:hover { border-color: var(--ocean); }
.work-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r-lg); }

/* Degree badge on hover — signature motif */
.work-card::after {
  content: '°';
  position: absolute;
  top: var(--sp-8);
  right: var(--sp-8);
  font-size: 26px;
  font-weight: 900;
  color: var(--blue);
  opacity: 0;
  transform: scale(0.75) rotate(-12deg);
  transition:
    opacity   var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  pointer-events: none;
  line-height: 1;
}

.work-card:hover::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.work-card__visual {
  aspect-ratio: 16 / 9;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.work-card__glyph {
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--mist);
  user-select: none;
  transition:
    color     var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease-out-quart);
}

.work-card:hover .work-card__glyph {
  color: var(--blue);
  transform: scale(1.05);
}

.work-card__body {
  padding: var(--sp-12) var(--sp-12) var(--sp-16);
  flex: 1;
}

.work-card__tag {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-4);
}

.work-card__title {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.work-card__desc {
  font-size: var(--text-sm);
  color: var(--dusk);
  line-height: 1.6;
}

/* Hero card — full width */
.work-card--hero {
  grid-column: span 2;
}

.work-card--hero .work-card__visual {
  aspect-ratio: 21 / 8;
}

.work-card--hero .work-card__glyph {
  font-size: clamp(80px, 12vw, 180px);
}


/* ── 16 · CONTACT PAGE ───────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: var(--sp-40);
  align-items: start;
}

.contact-info__closing {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--border-light);
}

.contact-info__closing-text {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--navy);
}

.contact-detail {
  margin-bottom: var(--sp-12);
}

.contact-detail__label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-2);
}

.contact-detail__value {
  font-size: var(--text-body);
  color: var(--dusk);
}

.contact-detail__value a {
  color: var(--ocean);
  transition: color var(--dur-base) var(--ease);
}

.contact-detail__value a:hover { color: var(--navy); }
.contact-detail__value a:focus-visible { outline: 1px solid var(--blue); border-radius: 2px; }

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-group label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
}

.form-group input,
.form-group textarea {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: var(--text-body);
  color: var(--navy);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow   var(--dur-base) var(--ease);
  outline: none;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--dusk);
  opacity: 0.55;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(61, 143, 190, 0.15);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
}

/* Success state */
.form-success {
  display: none;
  padding: var(--sp-32) var(--sp-16);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  text-align: center;
}

.form-success.visible { display: block; }

.form-success__mark {
  font-size: 36px;
  font-weight: 900;
  color: var(--blue);
  margin-bottom: var(--sp-8);
  line-height: 1;
  animation: successPop 0.5s var(--ease-out-expo) both;
}

@keyframes successPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.form-success__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-6);
}

.form-success__desc {
  font-size: var(--text-body);
  color: var(--dusk);
}


/* ── 17 · SERVICE EXPAND PANELS ──────────────────────────── */

/* Toggle button */
.service-item__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ocean);
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-base) var(--ease);
  text-align: left;
}

.service-item__toggle:hover { color: var(--blue); }
.service-item__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.service-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out-expo);
}

.service-item__toggle[aria-expanded="true"] .service-toggle__icon {
  transform: rotate(45deg);
}

/* Accordion container */
.service-item__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.48s var(--ease-out-expo);
}

.service-item__panel.open {
  grid-template-rows: 1fr;
}

.service-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.service-panel__content {
  border-top: 1px solid var(--border-light);
  margin-top: var(--sp-4);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-12);
}

/* Meta strip — investment + timeline */
.service-panel__meta {
  display: flex;
  gap: var(--sp-32);
  margin-bottom: var(--sp-20);
  flex-wrap: wrap;
}

.service-meta__item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-item__panel.open .service-meta__item:nth-child(1) {
  opacity: 1; transform: none; transition-delay: 0.12s;
}
.service-item__panel.open .service-meta__item:nth-child(2) {
  opacity: 1; transform: none; transition-delay: 0.20s;
}

.service-meta__label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-2);
}

.service-meta__value {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}

.service-meta__bar {
  width: 100px;
  height: 2px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.service-meta__bar-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  border-radius: inherit;
  transition: width 0.7s var(--ease-out-expo) 0.3s;
}

.service-item__panel.open .service-meta__bar-fill {
  width: var(--fill, 40%);
}

.service-meta__note {
  font-size: var(--text-sm);
  color: var(--dusk);
}

/* Action plan steps */
.service-panel__plan {
  margin-bottom: var(--sp-16);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.18s, transform 0.4s ease 0.18s;
}

.service-item__panel.open .service-panel__plan {
  opacity: 1;
  transform: none;
}

.service-plan__heading {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-10);
}

.service-plan__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.service-plan__step {
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  padding: var(--sp-10);
}

.service-plan__step-num {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ocean);
  margin-bottom: var(--sp-4);
}

.service-plan__step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: var(--sp-2);
}

.service-plan__step-desc {
  font-size: var(--text-sm);
  color: var(--dusk);
  line-height: 1.55;
}

/* Footer: best practices + CTAs */
.service-panel__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--border-light);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.26s, transform 0.4s ease 0.26s;
}

.service-item__panel.open .service-panel__footer {
  opacity: 1;
  transform: none;
}

.service-practices__heading {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: var(--sp-6);
}

.service-practices__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.service-practices__list li {
  font-size: var(--text-sm);
  color: var(--dusk);
  padding-left: var(--sp-8);
  position: relative;
  line-height: 1.5;
}

.service-practices__list li::before {
  content: '°';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

.service-panel__ctas {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

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

@media (max-width: 580px) {
  .service-plan__steps {
    grid-template-columns: 1fr;
  }
  .service-panel__meta { gap: var(--sp-16); }
  .service-panel__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── 17b · SOCIAL LINKS ───────────────────────────────────── */

.social-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--dusk);
  border-radius: var(--r-sm);
  transition:
    color      var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.social-link:hover {
  color: var(--ocean);
  background: rgba(61, 143, 190, 0.08);
}

.social-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Footer social row */
.footer__social {
  display: flex;
  align-items: center;
}


/* ── 18 · SCROLL REVEAL ──────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.55s var(--ease-out-expo),
    transform 0.55s var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}

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

@media (prefers-reduced-motion: reduce) {
  /* Reveal animations: show immediately */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hero entrance: show all elements immediately */
  .hero__eyebrow,
  .hero__sub,
  .hero__actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-line__inner {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Watermark: no animation */
  .hero::before { animation: none !important; }

  /* Pulse dot: stop */
  .hero__pulse { animation: none; }

  /* Mobile nav links: no stagger */
  .nav__mobile-links li,
  .nav__mobile-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nav__mobile.open .nav__mobile-links li,
  .nav__mobile.open .nav__mobile-bottom {
    opacity: 1;
    transform: none;
  }

  /* Success mark: no pop */
  .form-success__mark { animation: none; }

  /* Nav logo entrance: show immediately */
  .nav__logo-mark,
  .nav__logo-letter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Process step: no lift */
  .process-step:hover { transform: none; }

  /* Service expand panels: show instantly, no stagger */
  .service-item__panel { transition: none; }
  .service-meta__item,
  .service-panel__plan,
  .service-panel__footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .service-meta__bar-fill {
    transition: none;
    width: var(--fill, 40%);
  }
}


/* ── 18 · RESPONSIVE ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .about-strip      { grid-template-columns: 1fr; gap: var(--sp-20); }
  .process-grid     { grid-template-columns: repeat(2, 1fr); }
  .contact-layout   { grid-template-columns: 1fr; gap: var(--sp-24); }
}

@media (max-width: 768px) {
  :root { --nav-h: 62px; }

  /* Section padding: scale down for mobile */
  .section       { padding-block: var(--sp-32); }
  .section--sm   { padding-block: var(--sp-16); }
  .section--lg   { padding-block: var(--sp-40); }
  .hero          { padding-bottom: var(--sp-32); }

  .nav__links,
  .nav__cta      { display: none; }
  .nav__toggle   { display: flex; }

  .featured-work__card {
    grid-template-columns: 1fr;
  }

  .featured-work__visual {
    order: -1;
    aspect-ratio: 16 / 7;
  }

  .service-item {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .service-item__body {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .work-card--hero            { grid-column: span 1; }
  .work-card--hero .work-card__visual { aspect-ratio: 16 / 9; }

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

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-10);
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
  }

  .footer__links {
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-8);
  }

  .contact-info__closing-text {
    font-size: clamp(16px, 4vw, 22px);
  }

  .page-header {
    padding-top: calc(var(--nav-h) + var(--sp-24));
    padding-bottom: var(--sp-20);
  }
}

@media (max-width: 580px) {
  /* Section padding: tighten further on small phones */
  .section     { padding-block: var(--sp-24); }
  .section--sm { padding-block: var(--sp-12); }
  .section--lg { padding-block: var(--sp-32); }

  .work-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }


  /* Featured work: remove the glyph placeholder on tiny screens */
  .featured-work__visual { display: none; }
  .featured-work__card   { grid-template-columns: 1fr; }

  /* CTA band: full-width button */
  .cta-band__inner .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer: stack links tighter */
  .footer__links {
    flex-direction: column;
    gap: var(--sp-4);
  }
}