/* ═══════════════════════════════════════════════════════════════
   NakeStrategy — Material Design 3
   ═══════════════════════════════════════════════════════════════ */

/* ─── M3 Design Tokens ─────────────────────────────────────── */
:root {
  /* ── Brand Palette ── */
  --color-deep-navy:   #0D1F3C;
  --color-action-blue: #1A5FA8;
  --color-sky-accent:  #4FA8E8;
  --color-off-white:   #F7F9FC;
  --color-ice-blue:    #E6F1FB;
  --color-teal-spark:  #1DB88A;
  --color-muted-text:  #5A6B82;
  --color-border:      #DCE4EF;

  /* ── M3 Role Mappings ── */
  --md-primary:                  #1A5FA8;  /* Action Blue */
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #E6F1FB;  /* Ice Blue */
  --md-on-primary-container:     #0D1F3C;  /* Deep Navy */
  --md-secondary:                #5A6B82;  /* Muted text */
  --md-on-secondary:             #FFFFFF;
  --md-secondary-container:      #E6F1FB;  /* Ice Blue */
  --md-on-secondary-container:   #0D1F3C;  /* Deep Navy */
  --md-tertiary:                 #4FA8E8;  /* Sky Accent */
  --md-on-tertiary:              #FFFFFF;
  --md-tertiary-container:       #E6F1FB;
  --md-on-tertiary-container:    #0D1F3C;
  --md-error:                    #BA1A1A;
  --md-on-error:                 #FFFFFF;
  --md-error-container:          #FFDAD6;
  --md-background:               #F7F9FC;  /* Off-White */
  --md-on-background:            #0D1F3C;  /* Deep Navy */
  --md-surface:                  #FFFFFF;
  --md-on-surface:               #0D1F3C;  /* Deep Navy */
  --md-surface-variant:          #E6F1FB;  /* Ice Blue */
  --md-on-surface-variant:       #5A6B82;  /* Muted text */
  --md-outline:                  #DCE4EF;  /* Border */
  --md-outline-variant:          #DCE4EF;  /* Border */
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #F7F9FC;  /* Off-White */
  --md-surface-container:        #E6F1FB;  /* Ice Blue */
  --md-surface-container-high:   #DCE4EF;
  --md-inverse-surface:          #0D1F3C;  /* Deep Navy */
  --md-inverse-on-surface:       #FFFFFF;
  --md-inverse-primary:          #4FA8E8;  /* Sky Accent */

  /* Shape — all square */
  --shape-xs:  0px;
  --shape-sm:  0px;
  --shape-md:  0px;
  --shape-lg:  0px;
  --shape-xl:  0px;
  --shape-full: 0px;

  /* Elevation shadows */
  --elev-1: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px 1px rgba(0,0,0,.08);
  --elev-2: 0 1px 2px rgba(0,0,0,.18), 0 2px 6px 2px rgba(0,0,0,.08);
  --elev-3: 0 1px 3px rgba(0,0,0,.18), 0 4px 8px 3px rgba(0,0,0,.08);

  /* M3 Motion — Easing */
  --ease-standard:    cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-decelerate:  cubic-bezier(0.05, 0.7, 0.1, 1.0); /* entering */
  --ease-accelerate:  cubic-bezier(0.3, 0.0, 0.8, 0.15); /* exiting  */

  /* Duration */
  --dur-short:   200ms;
  --dur-medium:  300ms;
  --dur-long:    500ms;
  --dur-xlong:   700ms;

  /* Layout */
  --nav-height: 64px;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: var(--md-background);
  color: var(--md-on-background);
  overflow-x: hidden;
}
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
img  { display: block; max-width: 100%; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
textarea, input { font-family: inherit; }

/* ─── Material Symbols ──────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  pointer-events: none;
}

/* ─── M3 Type Scale ─────────────────────────────────────────── */
.display-large  { font-size: 57px; line-height: 64px; font-weight: 400; letter-spacing: -0.25px; }
.display-medium { font-size: 45px; line-height: 52px; font-weight: 400; letter-spacing: 0; }
.display-small  { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: 0; }
.headline-large  { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0; }
.headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.headline-small  { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.title-large   { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.title-medium  { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.title-small   { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.body-large    { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; }
.body-medium   { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.body-small    { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.4px; }
.label-large   { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.label-medium  { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }
.label-small   { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }

/* ─── Layout Container ──────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ─── State Layer ───────────────────────────────────────────── */
.state-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-standard);
  pointer-events: none;
}
:hover > .state-layer  { opacity: 0.08; }
:focus > .state-layer  { opacity: 0.12; }
:active > .state-layer { opacity: 0.12; }

/* ─── Ripple ────────────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  transform: scale(0);
  animation: ripple-expand 600ms var(--ease-decelerate) forwards;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--shape-full);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 20px;
  overflow: hidden;
  transition:
    background var(--dur-short) var(--ease-standard),
    box-shadow var(--dur-short) var(--ease-standard),
    transform 120ms var(--ease-standard);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  color: var(--md-on-primary);
}
.btn:active { transform: scale(0.98); }

/* Filled */
.btn--filled {
  background: var(--color-action-blue);
  color: #FFFFFF;
}
.btn--filled:hover {
  background: var(--color-sky-accent);
  box-shadow: var(--elev-1);
}

/* Tonal */
.btn--tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.btn--tonal:hover { box-shadow: var(--elev-1); }

/* Outlined */
.btn--outlined {
  background: transparent;
  color: var(--color-action-blue);
  border: 1px solid var(--color-action-blue);
}
.btn--outlined:hover {
  background: rgba(26, 95, 168, 0.08);
  border-color: var(--color-sky-accent);
  color: var(--color-sky-accent);
}

/* Text */
.btn--text {
  background: transparent;
  color: var(--color-action-blue);
  padding: 10px 12px;
}
.btn--text:hover { background: rgba(26, 95, 168, 0.08); }

/* On-primary variant (used on primary container backgrounds) */
.btn--on-primary {
  background: var(--md-on-primary);
  color: var(--md-primary);
}
.btn--on-primary:hover { box-shadow: var(--elev-1); }

/* Sizes */
.btn--large { padding: 12px 24px; font-size: 16px; }
.btn--full  { width: 100%; }

.btn__trailing-icon { font-size: 18px; }

/* ─── Icon Button ───────────────────────────────────────────── */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--shape-full);
  color: #FFFFFF;
  overflow: hidden;
  transition: background var(--dur-short) var(--ease-standard);
}
.icon-btn:hover  { background: rgba(255, 255, 255, 0.1); }
.icon-btn:focus  { background: rgba(255, 255, 255, 0.15); }
.icon-btn:active { background: rgba(255, 255, 255, 0.15); }

/* ─── Chips ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  border-radius: var(--shape-sm);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
}
.chip--assist {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
}
.chip--assist .chip__icon {
  font-size: 18px;
  color: var(--color-action-blue);
}
.chip--duration {
  padding: 4px 12px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
  position: relative;
  border-radius: var(--shape-md);
  padding: 24px;
  overflow: hidden;
  transition:
    box-shadow var(--dur-short) var(--ease-standard),
    transform var(--dur-medium) var(--ease-decelerate);
}

/* Elevated card */
.card--elevated {
  background: var(--md-surface-container-low);
  box-shadow: var(--elev-1);
  color: var(--md-on-surface);
}
.card--elevated:hover { box-shadow: var(--elev-2); }

/* Filled card */
.card--filled {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

/* Outlined card */
.card--outlined {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.card--outlined:hover { background: var(--md-surface-container-low); }

/* Primary (filled with primary) */
.card--primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.card--primary:hover { box-shadow: var(--elev-2); }

/* ─── Top App Bar ───────────────────────────────────────────── */
.top-app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-deep-navy);
  transition:
    box-shadow var(--dur-medium) var(--ease-standard),
    background var(--dur-medium) var(--ease-standard);
}
.top-app-bar--scrolled {
  box-shadow: 0 2px 8px rgba(13,31,60,.35);
  background: var(--color-deep-navy);
}
.top-app-bar__inner {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #FFFFFF;
}
.brand__mark {
  width: 32px; height: 32px;
  border-radius: var(--shape-sm);
  background: var(--color-sky-accent);
  color: var(--color-deep-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand__mark--lg {
  width: 48px; height: 48px;
  border-radius: var(--shape-md);
  font-size: 20px;
}
.brand__name { color: #FFFFFF; }
.brand__logo {
  height: 72px;
  width: 72px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.brand__logo--drawer {
  height: 80px;
  width: 80px;
}
.brand__logo--footer {
  height: 160px;
  width: 160px;
}


/* Nav links */
.top-app-bar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-link {
  padding: 8px 12px;
  border-radius: var(--shape-full);
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard);
}
.nav-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}
.nav-link.active {
  color: var(--color-sky-accent);
  background: rgba(79, 168, 232, 0.15);
}

.top-app-bar__cta { margin-left: 8px; }
.top-app-bar__menu { display: none; }

/* ─── Navigation Drawer ─────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-standard);
}
.scrim.open { opacity: 1; pointer-events: all; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 210;
  width: min(360px, 90vw);
  background: var(--md-surface-container-low);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  transform: translateX(100%);
  transition: transform var(--dur-long) var(--ease-decelerate);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer[hidden] { display: none; }

.nav-drawer__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 24px;
  color: var(--md-on-surface);
}
.nav-drawer__items {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.nav-drawer__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: var(--shape-full);
  color: var(--md-on-surface-variant);
  overflow: hidden;
  transition: background var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard);
}
.nav-drawer__item:hover {
  background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
  color: var(--md-on-surface);
}
.nav-drawer__footer {
  padding: 16px 24px 0;
}

/* ─── Sections ──────────────────────────────────────────────── */
.section {
  padding: 96px 0;
}
.section--surface-container { background: var(--md-surface-container-low); }
.section--primary-container { background: var(--md-primary-container); }

.section__header {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section__eyebrow {
  color: var(--color-action-blue);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
}
.section__eyebrow--on-pc {
  color: var(--md-on-primary-container);
  opacity: 0.7;
}
.section__title { color: var(--md-on-surface); max-width: 24ch; }
.section--primary-container .section__title { color: var(--md-on-primary-container); }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  background: var(--md-background);
}
.hero__container {
  width: 100%;
  padding-top: 48px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.hero__eyebrow { margin-bottom: 8px; }
.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
}
.hero__headline {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--md-on-background);
}
.hero__body {
  color: var(--md-on-surface-variant);
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__stats {
  display: flex;
  align-items: stretch;
  background: var(--md-surface-container-low);
  border-radius: var(--shape-xl);
  border: 1px solid var(--md-outline-variant);
  overflow: hidden;
  width: fit-content;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 40px;
}
.stat-card--divider { border-left: 1px solid var(--md-outline-variant); }
.stat-card__number {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-teal-spark);
  letter-spacing: -0.5px;
}
.stat-card__label { color: var(--md-on-surface-variant); }

/* ─── Services Grid ─────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card__icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--shape-md);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.card--primary .card__icon-wrap {
  background: rgba(255,255,255,0.2);
  color: var(--md-on-primary);
}
.card__title { margin-bottom: 8px; }
.card__body  { color: var(--md-on-surface-variant); }
.card--primary .card__body { color: rgba(255,255,255,0.8); }
.card__cta-text { color: var(--md-on-primary); margin-bottom: auto; }

/* ─── Process Grid ──────────────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--md-outline-variant);
  border-radius: 0;
  overflow: hidden;
}
.process-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  background: var(--md-surface-container-low);
  transition: background var(--dur-short) var(--ease-standard);
}
.process-step:hover { background: var(--md-surface-container); }
.process-step__num .display-small {
  color: var(--color-action-blue);
  font-weight: 300;
}
.process-step__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.process-step__content h3 { color: var(--md-on-surface); }
.process-step__content p  { color: var(--md-on-surface-variant); flex: 1; }
.process-step__content .chip { margin-top: auto; width: fit-content; }

/* ─── Results Grid ──────────────────────────────────────────── */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.result-card { display: flex; flex-direction: column; gap: 12px; }
.result-card__number-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.result-card__number {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--color-teal-spark);
}
.result-card__unit { color: var(--md-on-surface-variant); }
.result-card p { color: var(--md-on-surface-variant); }

/* ─── Testimonial ───────────────────────────────────────────── */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--shape-xl);
}
.testimonial__quote-icon {
  color: var(--color-action-blue);
  font-size: 40px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}
.testimonial__text { color: var(--md-on-surface); max-width: 70ch; }
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial__avatar {
  width: 48px; height: 48px;
  border-radius: var(--shape-full);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.testimonial__author-info { display: flex; flex-direction: column; gap: 2px; }
.testimonial__name { color: var(--md-on-surface); }
.testimonial__role { color: var(--md-on-surface-variant); }

/* ─── Contact ───────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--md-on-primary-container);
  padding-top: 8px;
}
.contact-info .section__title { max-width: 20ch; }
.contact-info__sub { color: color-mix(in srgb, var(--md-on-primary-container) 80%, transparent); }
.contact-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.contact-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--md-on-primary-container);
}
.contact-feature .material-symbols-outlined {
  color: var(--color-teal-spark);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Contact Form (Card) ───────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 0;
}
.contact-form__title { color: var(--md-on-surface); margin-bottom: 4px; }

/* ─── M3 Outlined Text Field ────────────────────────────────── */
.text-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.text-field__label {
  color: var(--md-on-surface-variant);
  transition: color var(--dur-short) var(--ease-standard);
  padding-left: 4px;
}
.text-field__wrap { position: relative; }
.text-field__input {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: var(--md-on-surface);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  outline: none;
  border: none;
  resize: vertical;
  position: relative;
  z-index: 1;
}
.text-field__input::placeholder { color: var(--md-on-surface-variant); opacity: 0.6; }

/* Outlined border via fieldset */
.text-field__border {
  position: absolute;
  inset: 0;
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-xs);
  padding: 0 12px;
  pointer-events: none;
  transition: border-color var(--dur-short) var(--ease-standard),
              border-width var(--dur-short) var(--ease-standard);
  margin: 0;
}
.text-field__legend {
  font-size: 0;
  padding: 0;
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--dur-short) var(--ease-standard),
              font-size var(--dur-short) var(--ease-standard),
              padding var(--dur-short) var(--ease-standard);
}
.text-field__input:focus ~ .text-field__border,
.text-field__input:not(:placeholder-shown) ~ .text-field__border {
  border-color: var(--color-action-blue);
  border-width: 2px;
}
.text-field__input:focus ~ .text-field__border .text-field__legend,
.text-field__input:not(:placeholder-shown) ~ .text-field__border .text-field__legend {
  font-size: 12px;
  max-width: 100%;
  padding: 0 4px;
}
.text-field:focus-within .text-field__label { color: var(--color-action-blue); }

.text-field--textarea .text-field__input { min-height: 120px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.form-hint { color: var(--md-on-surface-variant); }
.form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(29, 184, 138, 0.1);
  border: 1px solid rgba(29, 184, 138, 0.3);
  border-radius: var(--shape-sm);
  color: var(--color-teal-spark);
}
.form-success[hidden] { display: none; }
.form-success .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  padding: 48px 0 24px;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--md-inverse-on-surface) 16%, transparent);
}
.footer .brand { color: var(--md-inverse-on-surface); }
.footer .brand__name { color: var(--md-inverse-on-surface); }
.footer .brand__mark { background: var(--color-sky-accent); color: var(--color-deep-navy); }
.footer__tagline { color: color-mix(in srgb, var(--md-inverse-on-surface) 60%, transparent); margin-top: 8px; }
.footer__links { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__heading {
  color: color-mix(in srgb, var(--md-inverse-on-surface) 60%, transparent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.footer__link {
  color: color-mix(in srgb, var(--md-inverse-on-surface) 80%, transparent);
  transition: color var(--dur-short) var(--ease-standard);
}
.footer__link:hover { color: var(--md-inverse-on-surface); }
.footer__bottom {
  padding-top: 24px;
  color: color-mix(in srgb, var(--md-inverse-on-surface) 50%, transparent);
}

/* ─── Testimonial Carousel ──────────────────────────────────── */
.testimonial-carousel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.testimonial-slides {
  position: relative;
  min-height: 160px;
  overflow: hidden;
}
.testimonial-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity 450ms var(--ease-decelerate),
    transform 450ms var(--ease-decelerate);
  pointer-events: none;
}
.testimonial-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.testimonial-slide.exit {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
  transition:
    opacity 350ms var(--ease-accelerate),
    transform 350ms var(--ease-accelerate);
}
.testimonial-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.testimonial-dot {
  height: 4px;
  width: 32px;
  background: var(--color-ice-blue);
  border: 1px solid var(--color-border);
  transition: background 350ms var(--ease-standard);
  cursor: pointer;
  flex-shrink: 0;
}
.testimonial-dot.active {
  background: var(--color-action-blue);
  border-color: var(--color-action-blue);
}

/* ─── Scroll Reveal — M3 Expressive ────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-long) var(--ease-decelerate) var(--d, 0s),
    transform var(--dur-long) var(--ease-decelerate) var(--d, 0s);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive — Compact (<600dp) ────────────────────────── */
@media (max-width: 1100px) {
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  .process-grid   { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  /* Nav */
  .top-app-bar__nav { display: none; }
  .top-app-bar__cta { display: none; }
  .top-app-bar__menu { display: inline-flex; margin-left: auto; }

  /* Nav drawer now replaces nav */
  .nav-drawer { display: flex; }

  /* Hero */
  .hero__stats { flex-direction: column; width: 100%; border-radius: var(--shape-xl); }
  .stat-card--divider { border-left: none; border-top: 1px solid var(--md-outline-variant); }
  .stat-card { padding: 20px 24px; }

  /* Grids */
  .services-grid  { grid-template-columns: 1fr; }
  .process-grid   { grid-template-columns: 1fr; border-radius: var(--shape-lg); }
  .results-grid   { grid-template-columns: 1fr; }

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

  /* Footer */
  .footer__links { flex-direction: column; gap: 32px; }
  .footer__inner { flex-direction: column; }

  /* Section padding */
  .section { padding: 64px 0; }
  .container { padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  .hero__headline { font-size: 32px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .stat-card__number { font-size: 28px; }
  .contact-form { padding: 24px 20px; border-radius: var(--shape-xl); }
}

/* ─── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ripple { animation: none; }
  * { transition-duration: 0.01ms !important; }
}