/* ============================================================
   Bajoria Consultancy — Quiet Modern design system
   ============================================================ */

:root {
  /* ---- Quiet professional palette (toned down) ---- */
  --lavender: #ECEAEF;
  --lavender-mist: #F4F3F6;
  --lavender-wash: #F7F6F8;
  --lavender-deep: #B8B4C4;

  --bg: #F5F4F6;
  --bg-soft: #ECEAED;
  --surface: #FCFCFD;
  --ink: #1C1E24;
  --ink-strong: #0C0D10;
  --ink-muted: #5A5F6B;
  --ink-faint: #8A8F9A;
  --line: #E4E2E8;
  --line-strong: #D2CFD8;
  --accent: #55586A;
  --accent-soft: #EEEFF2;
  --accent-hover: #3F4250;
  --accent-deep: #3A3D4A;
  --gold: #A8944A;
  --gold-ink: #7A6A30;
  --gold-soft: #F5F2E8;
  --gold-line: #E4DCC0;
  --teal: #3D7A72;
  --teal-ink: #2F5F59;
  --teal-soft: #E8F1F0;
  --teal-line: #C5D9D6;
  --coral: #A86B5C;
  --coral-ink: #855448;
  --coral-soft: #F5EEEC;
  --coral-line: #E2D0CB;
  --violet: #6B6680;
  --violet-ink: #524E63;
  --violet-soft: #EEECF2;
  --violet-line: #D5D1DF;
  --green-soft: #EBF1EC;
  --green-line: #C9D6CB;
  --green-ink: #3D6B4A;
  --sky: #4A6F8C;
  --sky-ink: #3A5870;
  --sky-soft: #EAF0F4;
  --sky-line: #C8D6E2;
  --rose: #8F6674;
  --rose-ink: #6F4E59;
  --rose-soft: #F4EEF0;
  --rose-line: #E0CFD5;
  --mint: #4A7A6A;
  --mint-ink: #3A6054;
  --mint-soft: #EAF2EF;
  --mint-line: #C5DBD2;
  --amber: #9A7B30;
  --amber-ink: #7A6124;
  --amber-soft: #F5F0E4;
  --amber-line: #E4D7B4;
  --indigo: #5A5E7A;
  --indigo-ink: #464A62;
  --indigo-soft: #EEEFF4;
  --indigo-line: #D0D3E0;
  --dark: #12141A;
  --dark-muted: #9AA0AE;
  --success: #2F6B4F;
  --white: #FFFFFF;

  /*
    Font stacks — web fonts first, then OS-native fallbacks
    (Windows / macOS / iOS / Android) so type stays consistent offline too.
  */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---- Responsive type scale (fluid) ---- */
  --text-xs: clamp(0.7rem, 0.66rem + 0.15vw, 0.78rem);
  --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
  --text-md: clamp(0.9rem, 0.86rem + 0.25vw, 0.975rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  --text-lg: clamp(1.05rem, 0.98rem + 0.4vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.55vw, 1.35rem);
  --text-h3: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-h2: clamp(1.4rem, 0.95rem + 1.6vw, 2.5rem);
  --text-h1: clamp(1.75rem, 1rem + 2.8vw, 3.75rem);
  --text-display: clamp(1.55rem, 0.85rem + 2.4vw, 2.85rem);
  --text-tagline: clamp(0.88rem, 0.35rem + 2.35vw, 2.35rem);
  --text-nav: clamp(0.7rem, 0.68rem + 0.12vw, 0.78rem);
  --text-btn: clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --leading-loose: 1.75;

  --max: 1120px;
  --nav-h: 54px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(18, 20, 26, 0.04), 0 8px 24px rgba(18, 20, 26, 0.05);
  --shadow-md: 0 2px 4px rgba(18, 20, 26, 0.04), 0 12px 32px rgba(18, 20, 26, 0.07);
  --shadow-lg: 0 4px 8px rgba(18, 20, 26, 0.04), 0 20px 48px rgba(18, 20, 26, 0.09);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 1px 2px rgba(18, 20, 26, 0.04), 0 10px 28px rgba(18, 20, 26, 0.05);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}

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

html {
  scroll-behavior: smooth;
  /* Prevent iOS / Android from inflating text unpredictably */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%;
}

/* Offset sticky header when jumping to in-page anchors */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 100% 70% at 100% -10%, rgba(120, 120, 140, 0.05), transparent 50%),
    linear-gradient(180deg, var(--lavender-wash) 0%, var(--bg) 32%, var(--bg) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

/*
  SEO chrome (skip link + breadcrumbs) — defined early so it never fails
  to load if a later stylesheet block is truncated/cached incompletely.
  Prevents "Home / About" leaking into the top of About/Services.
*/
.seo-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--ink, #1a1d26);
  color: var(--white, #fff);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
  box-shadow: 0 8px 24px rgba(26, 29, 38, 0.16);
}
.seo-skip-link:focus,
.seo-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent, #5b5fcf);
  outline-offset: 2px;
}
.seo-breadcrumbs,
.seo-breadcrumbs.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.seo-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fixed backgrounds can lag on mobile OS browsers */
@media (max-width: 960px), (hover: none) {
  body {
    background-attachment: scroll;
  }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }

/* Long words / emails / URLs never force horizontal scroll */
p, li, h1, h2, h3, h4, h5, h6,
.lead, .display, .eyebrow, .service-block-lead, .service-block-body,
.contact-meta a, .blog-card-body p, .article-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prefer safe layout boxes on narrow viewports */
main,
.section,
.hero,
.page-hero,
.container,
.hero-grid,
.service-block,
.contact-layout,
.form-grid,
.form-section {
  min-width: 0;
  max-width: 100%;
}

/* ---- Text links: underline on hover · box on press ---- */
a:not(.btn):not(.logo):not(.social-link):not(.service-tab):not(.blog-card):not(.blog-list-item):not(.menu-toggle) {
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  border-radius: 6px;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease),
    box-shadow 0.15s var(--ease),
    text-decoration-color 0.15s var(--ease);
}
a:not(.btn):not(.logo):not(.social-link):not(.service-tab):not(.blog-card):not(.blog-list-item):not(.menu-toggle):hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}
a:not(.btn):not(.logo):not(.social-link):not(.service-tab):not(.blog-card):not(.blog-list-item):not(.menu-toggle):active {
  text-decoration: none;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 123, 200, 0.35);
  color: var(--accent);
}

/* Kill global text-underline on menu/footer — only the thin bar is used */
.nav-links a,
.nav-links a:hover,
.nav-links a:active,
.nav-links a:focus,
.mobile-nav a,
.mobile-nav a:hover,
.mobile-nav a:active,
.mobile-nav a:focus,
.footer-col a,
.footer-col a:hover,
.footer-col a:active,
.footer-col a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  -webkit-text-decoration-line: none !important;
}

.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

/* ---- Typography (shared scale) ---- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--ink);
  text-wrap: balance;
}

h1, h2, h3, h4 {
  color: var(--ink);
  text-wrap: balance;
}
h1.display { font-size: var(--text-h1); }
h2.display { font-size: var(--text-h2); }
/* Compact section / form titles (same family & colour as h2.display) */
h2.display.display--sm {
  font-size: clamp(1.35rem, 0.95rem + 1.2vw, 1.9rem);
}
h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}
h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Section titles: prefer one line; wrap with even balance when needed */
.section-header .display {
  max-width: 36rem;
}
.section-header.center .display {
  margin-inline: auto;
}

.lead {
  font-size: var(--text-lg);
  color: #4a5268; /* slightly stronger than --ink-muted for body lead contrast */
  max-width: 36rem;
  line-height: var(--leading-loose);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.eyebrow svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/*
  Heading + small favicon-style mark
  Icon stays on the first line; title prefers one line and wraps cleanly when space is tight.
*/
.heading-icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.6rem;
  row-gap: 0;
  max-width: 100%;
}
/* Centered section titles: keep icon + text as one block, multi-line left-aligned inside */
.section-header.center .heading-icon {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.heading-icon .hi-mark {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 0.18em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.heading-icon .hi-mark svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heading-icon .hi-mark svg.is-fill {
  fill: currentColor;
  stroke: none;
}
.heading-icon .hi-mark.hi-mark--md {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 8px;
}
.heading-icon .hi-mark.hi-mark--md svg {
  width: 1.1rem;
  height: 1.1rem;
}

/*
  Soft favicon-style icon tones
  Use on: .hi-mark · .hero-title-icon · .card-icon · .service-panel-icon · .big-icon · .caps-icon · .form-section-num
  Soft wash behind the glyph so each badge is distinct but easy on the eyes.
*/
.hi-mark.tone-accent, .hi-mark.accent,
.hero-title-icon.tone-accent, .hero-title-icon.accent,
.card-icon.tone-accent, .card-icon.accent,
.service-panel-icon.tone-accent,
.big-icon.tone-accent,
.caps-icon.tone-accent,
.form-section-num.tone-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(91, 95, 207, 0.08);
}
.hi-mark.tone-teal, .hi-mark.teal,
.hero-title-icon.tone-teal, .hero-title-icon.teal,
.card-icon.tone-teal, .card-icon.teal, .card-icon--teal,
.service-panel-icon.tone-teal,
.big-icon.tone-teal,
.caps-icon.tone-teal,
.form-section-num.tone-teal {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: var(--teal-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(13, 148, 136, 0.08);
}
.hi-mark.tone-gold, .hi-mark.gold,
.hero-title-icon.tone-gold, .hero-title-icon.gold,
.card-icon.tone-gold, .card-icon.gold,
.service-panel-icon.tone-gold,
.big-icon.tone-gold,
.caps-icon.tone-gold,
.form-section-num.tone-gold {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border-color: var(--gold-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(196, 154, 18, 0.08);
}
.hi-mark.tone-coral, .hi-mark.coral,
.hero-title-icon.tone-coral, .hero-title-icon.coral,
.card-icon.tone-coral, .card-icon.coral,
.service-panel-icon.tone-coral,
.big-icon.tone-coral,
.caps-icon.tone-coral,
.form-section-num.tone-coral {
  background: var(--coral-soft);
  color: var(--coral);
  border-color: var(--coral-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(224, 122, 95, 0.08);
}
.hi-mark.tone-violet, .hi-mark.violet,
.hero-title-icon.tone-violet, .hero-title-icon.violet,
.card-icon.tone-violet, .card-icon.violet,
.service-panel-icon.tone-violet,
.big-icon.tone-violet,
.caps-icon.tone-violet,
.form-section-num.tone-violet {
  background: var(--violet-soft);
  color: var(--violet);
  border-color: var(--violet-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(139, 123, 200, 0.1);
}
.hi-mark.tone-sky, .hi-mark.sky,
.hero-title-icon.tone-sky, .hero-title-icon.sky,
.card-icon.tone-sky, .card-icon.sky,
.service-panel-icon.tone-sky,
.big-icon.tone-sky,
.caps-icon.tone-sky,
.form-section-num.tone-sky {
  background: var(--sky-soft);
  color: var(--sky);
  border-color: var(--sky-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(59, 142, 208, 0.08);
}
.hi-mark.tone-rose, .hi-mark.rose,
.hero-title-icon.tone-rose, .hero-title-icon.rose,
.card-icon.tone-rose, .card-icon.rose,
.service-panel-icon.tone-rose,
.big-icon.tone-rose,
.caps-icon.tone-rose,
.form-section-num.tone-rose {
  background: var(--rose-soft);
  color: var(--rose);
  border-color: var(--rose-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(212, 106, 140, 0.08);
}
.hi-mark.tone-mint, .hi-mark.mint,
.hero-title-icon.tone-mint, .hero-title-icon.mint,
.card-icon.tone-mint, .card-icon.mint,
.service-panel-icon.tone-mint,
.big-icon.tone-mint,
.caps-icon.tone-mint,
.form-section-num.tone-mint {
  background: var(--mint-soft);
  color: var(--mint);
  border-color: var(--mint-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(47, 168, 138, 0.08);
}
.hi-mark.tone-amber, .hi-mark.amber,
.hero-title-icon.tone-amber, .hero-title-icon.amber,
.card-icon.tone-amber, .card-icon.amber,
.service-panel-icon.tone-amber,
.big-icon.tone-amber,
.caps-icon.tone-amber,
.form-section-num.tone-amber {
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-color: var(--amber-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(184, 134, 11, 0.08);
}
.hi-mark.tone-indigo, .hi-mark.indigo,
.hero-title-icon.tone-indigo, .hero-title-icon.indigo,
.card-icon.tone-indigo, .card-icon.indigo,
.service-panel-icon.tone-indigo,
.big-icon.tone-indigo,
.caps-icon.tone-indigo,
.form-section-num.tone-indigo {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(99, 102, 184, 0.1);
}
.hi-mark.tone-green, .hi-mark.green,
.hero-title-icon.tone-green,
.card-icon.tone-green,
.service-panel-icon.tone-green,
.big-icon.tone-green,
.caps-icon.tone-green,
.form-section-num.tone-green {
  background: var(--green-soft);
  color: var(--green-ink);
  border-color: var(--green-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(45, 122, 69, 0.08);
}

/* Dark process band: soften light tones so they stay readable */
.process .hi-mark.tone-gold,
.process .hi-mark.gold,
.process .hi-mark.tone-amber,
.process .heading-icon .hi-mark.gold {
  background: rgba(251, 245, 224, 0.14);
  color: var(--gold);
  border-color: rgba(232, 197, 71, 0.35);
  box-shadow: none;
}
.process .hi-mark.tone-sky {
  background: rgba(234, 244, 252, 0.12);
  color: #9BC8F0;
  border-color: rgba(155, 200, 240, 0.3);
  box-shadow: none;
}
.process .hi-mark.tone-mint {
  background: rgba(232, 247, 242, 0.12);
  color: #7ED9C0;
  border-color: rgba(126, 217, 192, 0.3);
  box-shadow: none;
}
.process .hi-mark.tone-coral {
  background: rgba(253, 240, 236, 0.12);
  color: #F0A890;
  border-color: rgba(240, 168, 144, 0.3);
  box-shadow: none;
}
.process .hi-mark.tone-rose {
  background: rgba(251, 240, 244, 0.12);
  color: #E8A0B8;
  border-color: rgba(232, 160, 184, 0.3);
  box-shadow: none;
}
/* Optional text wrapper for balanced multi-line titles */
.heading-icon-text {
  min-width: 0;
  text-wrap: balance;
}

/* Stacked icon-above-text for process / centered long titles */
.heading-icon.heading-icon--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 22em;
  margin-inline: auto;
  text-align: center;
}
.heading-icon.heading-icon--stack .hi-mark {
  margin-top: 0;
}
.heading-icon.heading-icon--stack .heading-icon-text {
  display: block;
  text-align: center;
  text-wrap: balance;
  line-height: 1.25;
}

/* Process band: keep stacked heading centered and crisp on dark */
.process .heading-icon.heading-icon--stack {
  max-width: 24em;
}

/* Technical aspect tags */
.tech-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1rem 0 0.55rem;
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
  max-width: 100%;
  min-width: 0;
}
.tech-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}
.tech-tag:nth-child(6n+1) { background: var(--accent-soft); border-color: var(--line-strong); color: var(--accent-deep); }
.tech-tag:nth-child(6n+2) { background: var(--teal-soft); border-color: var(--teal-line); color: var(--teal-ink); }
.tech-tag:nth-child(6n+3) { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
.tech-tag:nth-child(6n+4) { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet-ink); }
.tech-tag:nth-child(6n+5) { background: var(--coral-soft); border-color: var(--coral-line); color: var(--coral-ink); }
.tech-tag:nth-child(6n+6) { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }

.muted { color: var(--ink-muted); }
.text-center { text-align: center; }

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-size: var(--text-btn);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  text-decoration: none !important;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.45s var(--ease), transform 0.25s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  /* Comfortable tap target on phones / tablets */
  min-height: 2.75rem;
}

.btn:hover { text-decoration: none !important; }
.btn:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 0 1px rgba(26, 29, 38, 0.12);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 18px rgba(91, 95, 207, 0.22);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 22px rgba(91, 95, 207, 0.28);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover {
  background: var(--surface);
}

.btn-gold {
  background: var(--gold);
  color: var(--dark);
}
.btn-gold:hover { filter: brightness(0.95); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}
.btn-whatsapp:hover {
  background: #1ebe57;
  color: var(--white);
  text-decoration: none !important;
}
.btn-whatsapp:active {
  background: #189c48;
  color: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--dark);
}
.btn-light:hover { background: var(--bg-soft); }

.btn-ghost {
  position: relative;
  color: var(--accent);
  padding: 0.25rem 0.4rem;
  gap: 0.35rem;
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  text-decoration: none !important;
}
.btn-ghost:hover {
  color: var(--accent-hover);
  text-decoration: none !important;
  background: transparent;
  box-shadow: none;
}
.btn-ghost:active {
  text-decoration: none !important;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 123, 200, 0.35);
  color: var(--accent);
}
.btn-ghost svg { transition: transform 0.25s var(--ease); }
.btn-ghost:hover svg { transform: translateX(3px); }

/*
  Linked / interactive rounded boxes:
  border line eases in on hover (same timing as header underline).
*/
a.btn,
button.btn,
a.btn-ghost,
a.blog-card,
a.blog-list-item,
button.service-tab,
label.skill-chip {
  position: relative;
  isolation: isolate;
}
a.btn::after,
button.btn::after,
a.btn-ghost::after,
a.blog-card::after,
a.blog-list-item::after,
button.service-tab::after,
label.skill-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
a.btn:hover::after,
button.btn:hover::after,
a.btn:focus-visible::after,
button.btn:focus-visible::after,
a.btn-ghost:hover::after,
a.btn-ghost:focus-visible::after,
a.blog-card:hover::after,
a.blog-card:focus-visible::after,
a.blog-list-item:hover::after,
a.blog-list-item:focus-visible::after,
button.service-tab:hover::after,
button.service-tab:focus-visible::after,
label.skill-chip:hover::after {
  opacity: 0.88;
  transform: scale(1);
}
/* Filled primary / WhatsApp: lighter ring so it reads on solid colour */
a.btn-primary::after,
button.btn-primary::after,
a.btn-whatsapp::after,
button.btn-whatsapp::after {
  border-color: var(--white);
}
a.btn-primary:hover::after,
button.btn-primary:hover::after,
a.btn-whatsapp:hover::after,
button.btn-whatsapp:hover::after {
  opacity: 0.55;
}
/* Active service tab already solid — soft white ring */
button.service-tab.is-active::after {
  border-color: var(--white);
}
button.service-tab.is-active:hover::after {
  opacity: 0.45;
}
/* Ghost: thin accent-coloured ring, no underline */
a.btn-ghost::after {
  border-color: var(--accent);
}
a.btn-ghost:hover::after {
  opacity: 0.55;
}

/* ---- Nav (compact, consistent site-wide) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  /* Soft transparent lavender tint */
  background: rgba(237, 232, 245, 0.55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(212, 206, 227, 0.55);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(237, 232, 245, 0.72);
  border-bottom-color: rgba(212, 206, 227, 0.75);
  box-shadow: 0 4px 18px rgba(90, 70, 130, 0.06);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.1rem 0.2rem 0.1rem 0;
  border-radius: 6px;
  line-height: 1;
  color: var(--ink);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.logo:hover { opacity: 0.8; }
.logo:active { transform: scale(0.97); opacity: 0.9; }

/* Header: logo only (original asset with white plate) */
.site-header .logo {
  gap: 0;
  padding: 0.05rem 0;
  background: transparent;
}
.site-header .logo-mark {
  /* Compact header mark */
  width: clamp(20px, 2.6vw, 24px);
  height: clamp(20px, 2.6vw, 24px);
  border-radius: 4px;
  background: var(--white);
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: 1;
  transition: width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.2s var(--ease);
}
.site-header .logo:hover .logo-mark {
  opacity: 0.92;
}
.site-header .logo-text {
  display: none !important;
}

.logo-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
}

/* Footer may still show name with logo */
.footer-brand .logo {
  gap: 0.55rem;
}
.footer-brand .logo-text {
  display: inline;
  font-family: "Century", "Century Schoolbook", "New Century Schoolbook", "Century Gothic", Georgia, serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.55rem 1.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Shared menu link behaviour — identical on desktop + hamburger drawer */
.nav-links a,
.mobile-nav a {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.38rem 0.35rem;
  border-radius: 0;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.25s var(--ease);
}

/* Thin underline under the name only — appears on hover (all screen sizes) */
.nav-links a::after,
.mobile-nav a::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  bottom: 0.22rem;
  width: 0;
  height: 0.5px;
  min-height: 0.5px;
  max-height: 0.5px;
  border: none;
  border-radius: 0;
  background-color: currentColor;
  background-image: none;
  box-shadow: none;
  outline: none;
  transform: none;
  transition: width 0.45s var(--ease);
  pointer-events: none;
  opacity: 0.9;
}

/* Hover — underline + darker label (desktop header + mobile drawer) */
.nav-links a:hover,
.mobile-nav a:hover,
.nav-links a.active:hover,
.mobile-nav a.active:hover {
  color: var(--ink-strong) !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.nav-links a:hover::after,
.mobile-nav a:hover::after,
.nav-links a.active:hover::after,
.mobile-nav a.active:hover::after {
  width: calc(100% - 0.7rem) !important;
  height: 0.5px;
  min-height: 0.5px;
  max-height: 0.5px;
  transform: none;
}

/* Current page (after click/navigation) — dark colour only, no permanent underline */
.nav-links a.active,
.mobile-nav a.active,
.nav-links a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  color: var(--ink-strong) !important;
  font-weight: 700;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}
.nav-links a.active::after,
.mobile-nav a.active::after,
.nav-links a[aria-current="page"]::after,
.mobile-nav a[aria-current="page"]::after {
  width: 0 !important;
}
/* Visited links stay muted unless they are the current page */
.nav-links a:visited,
.mobile-nav a:visited {
  color: var(--ink-muted);
}
.nav-links a.active:visited,
.mobile-nav a.active:visited,
.nav-links a[aria-current="page"]:visited,
.mobile-nav a[aria-current="page"]:visited {
  color: var(--ink-strong) !important;
}

/* Click / press — dark colour; no underline while pressing */
.nav-links a:active,
.mobile-nav a:active,
.nav-links a.active:active,
.mobile-nav a.active:active {
  color: var(--ink-strong) !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}
.nav-links a:active::after,
.mobile-nav a:active::after,
.nav-links a.active:active::after,
.mobile-nav a.active:active::after {
  width: 0 !important;
  transition: none;
}

.nav-links a:focus-visible,
.mobile-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: transparent !important;
  color: var(--ink-strong);
}
/* Focus alone does not force underline — only hover does (same as large screens) */
.nav-links a:focus-visible::after,
.mobile-nav a:focus-visible::after {
  width: 0;
}
.nav-links a:focus-visible:hover::after,
.mobile-nav a:focus-visible:hover::after {
  width: calc(100% - 0.7rem);
}

.nav-cta {
  margin-left: 0.45rem;
  padding: 0.45rem 0.95rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background 0.18s var(--ease),
    transform 0.15s var(--ease),
    box-shadow 0.18s var(--ease) !important;
}
.nav-cta:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(91, 95, 207, 0.28);
}
.nav-cta:active {
  transform: scale(0.96);
  box-shadow: none;
}

/*
  Hamburger in the sticky header — stays put and morphs to X.
  Menu = right sidebar; link style matches desktop primary nav.
  Blends into header: no border / no fill chip.
*/
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 260;
  position: relative;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s var(--ease),
    transform 0.15s var(--ease),
    opacity 0.2s var(--ease);
}
.menu-toggle:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0.85;
}
.menu-toggle:active {
  transform: scale(0.96);
  background: transparent;
  border: none;
  box-shadow: none;
}
.menu-toggle[aria-expanded="true"] {
  background: transparent;
  border: none;
  box-shadow: none;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  display: block;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition:
    top 0.28s var(--ease),
    transform 0.28s var(--ease),
    background 0.2s ease,
    opacity 0.2s ease,
    width 0.2s ease;
}
.menu-toggle span:nth-child(1) {
  top: calc(50% - 5px);
}
.menu-toggle span:nth-child(2) {
  top: calc(50% + 5px);
}
.menu-toggle:hover span {
  background: var(--ink-strong);
}
.menu-toggle[aria-expanded="true"] span {
  background: var(--ink);
  width: 20px;
  top: 50%;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-50%) rotate(-45deg);
}

/* Lock scroll; header + X stay above the sidebar */
body.nav-drawer-open {
  overflow: hidden;
  touch-action: none;
}
body.nav-drawer-open .site-header {
  position: sticky;
  top: 0;
  z-index: 250;
  background: rgba(245, 244, 247, 0.96);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(28, 30, 36, 0.06);
}
/* Full-page dim behind drawer (header sits above it) */
body.nav-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(18, 16, 26, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: menuBackdropIn 0.28s ease;
}
@keyframes menuBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Right sidebar drawer — slightly narrower, labels inset to the right */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(62vw, 240px);
  max-width: 100%;
  max-height: none;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35rem;
  /* Clear sticky header; extra left padding pushes labels a little right */
  padding: calc(var(--nav-h) + 1rem) 1.15rem 1.5rem 1.85rem;
  padding-right: max(1.15rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(90deg, rgba(196, 181, 217, 0.06) 0%, transparent 14px),
    linear-gradient(180deg, var(--surface) 0%, var(--lavender-wash) 100%);
  border-left: 1px solid var(--line);
  border-bottom: none;
  border-radius: 0;
  box-shadow: -12px 0 40px rgba(26, 29, 38, 0.12);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    visibility 0.4s;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-close {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.mobile-nav-close svg {
  display: none;
}

/*
  Sidebar link layout only — hover / click / active behaviour is shared
  with .nav-links above (underline on hover, dark colour when active/clicked).
*/
.mobile-nav a {
  display: inline-block;
  align-self: flex-start;
  min-height: 2.75rem;
  font-size: clamp(0.95rem, 0.88rem + 0.45vw, 1.12rem);
  padding: 0.6rem 0.35rem;
  margin-left: 0;
  line-height: 1.3;
  box-sizing: border-box;
}
/* Keep underline geometry identical to desktop shared ::after */
.mobile-nav a::after {
  left: 0.35rem;
  bottom: 0.28rem;
  height: 0.5px;
  min-height: 0.5px;
  max-height: 0.5px;
  border-radius: 0;
  transition: width 0.45s var(--ease);
}
.mobile-nav .btn:active { transform: scale(0.98); }

/* ---- Sections (subtle separation only) ---- */
.section {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  position: relative;
  background: transparent;
  border-top: 1px solid transparent;
}

/* Hairline edge between blocks — barely there */
.section,
.stats,
.service-focus,
.process,
.cta-band,
.page-hero {
  position: relative;
}

/* Soft alternate surfaces — lavender whisper */
.section--soft {
  background: rgba(240, 236, 246, 0.45);
  border-top-color: rgba(230, 225, 239, 0.9);
  border-bottom: 1px solid rgba(230, 225, 239, 0.55);
}

/* Slightly less “perfect template” body rhythm */
body {
  text-rendering: optimizeLegibility;
}
.lead {
  max-width: 34rem;
}
.section-header .lead {
  max-width: 32rem;
}

.section--plain {
  background: transparent;
  border-top-color: rgba(230, 225, 239, 0.65);
}

.section--surface {
  background: rgba(253, 252, 254, 0.72);
  border-top-color: rgba(230, 225, 239, 0.85);
  border-bottom: 1px solid rgba(230, 225, 239, 0.45);
}

/* Optional thin accent bar at top of a section (2px, low opacity) */
.section--mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(4.5rem, 18%);
  height: 2px;
  border-radius: 2px;
  background: rgba(139, 123, 200, 0.28);
}

.section-sm { padding: clamp(3rem, 6vw, 4.5rem) 0; }

.section-header {
  max-width: 36rem;
  margin-bottom: 2.75rem;
}
.section-header.center {
  margin-inline: auto;
  text-align: center;
}
.section-header .lead { margin-top: 0.85rem; }
.section-header.center .lead { margin-inline: auto; }

/* ---- Hero (home + all pages) ---- */
.hero,
.page-hero {
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(2.75rem, 7vw, 4.5rem);
  background: linear-gradient(180deg, rgba(246, 243, 250, 0.5) 0%, transparent 85%);
  border-bottom: 1px solid rgba(230, 225, 239, 0.65);
  position: relative;
  overflow: hidden;
}

/*
  Each page = one muted colour family (not bright).
  Soft radial near the title icon + pale wash + quiet border.
*/
/* Home — cool slate */
.hero--home {
  background:
    radial-gradient(ellipse 70% 90% at 10% 20%, rgba(70, 75, 95, 0.06), transparent 55%),
    linear-gradient(185deg, #EEF0F4 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(200, 204, 214, 0.7);
}

/* About — soft sage */
.page-hero--about {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(61, 122, 114, 0.07), transparent 55%),
    linear-gradient(185deg, #E9F0EE 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(190, 210, 205, 0.65);
}

/* Services — cool steel blue */
.page-hero--services {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(74, 111, 140, 0.07), transparent 55%),
    linear-gradient(185deg, #E8EEF3 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(190, 205, 218, 0.65);
}

/* Blog — warm parchment */
.page-hero--blog {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(154, 123, 48, 0.06), transparent 55%),
    linear-gradient(185deg, #F3F0E8 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(220, 210, 185, 0.6);
}

/* Join — muted stone violet */
.page-hero--join {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(107, 102, 128, 0.07), transparent 55%),
    linear-gradient(185deg, #EEECF2 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(210, 205, 220, 0.65);
}

/* Contact — warm sand */
.page-hero--contact {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(168, 107, 92, 0.06), transparent 55%),
    linear-gradient(185deg, #F3ECEA 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(220, 200, 192, 0.65);
}

/* Policy — cool graphite */
.page-hero--policy {
  background:
    radial-gradient(ellipse 65% 80% at 10% 20%, rgba(90, 94, 122, 0.07), transparent 55%),
    linear-gradient(185deg, #ECEEF3 0%, var(--bg) 72%, transparent 100%);
  border-bottom-color: rgba(200, 204, 218, 0.65);
}

/* Float + image panel: quiet borders, low shadow */
.hero--home .hero-float { border-color: rgba(212, 206, 227, 0.75); }
.hero--home .hero-visual {
  border-color: rgba(220, 216, 232, 0.75);
  box-shadow: 0 1px 2px rgba(91, 95, 207, 0.03), 0 12px 28px rgba(91, 95, 207, 0.04);
}

.page-hero--about .hero-float {
  border-color: rgba(197, 235, 230, 0.75);
  color: var(--teal-ink);
}
.page-hero--about .hero-float svg { stroke: var(--teal); color: var(--teal); }
.page-hero--about .hero-visual {
  border-color: rgba(200, 228, 222, 0.75);
  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.03), 0 12px 28px rgba(13, 148, 136, 0.04);
}

.page-hero--services .hero-float {
  border-color: rgba(197, 223, 245, 0.8);
  color: var(--sky-ink);
}
.page-hero--services .hero-float svg { stroke: var(--sky); color: var(--sky); }
.page-hero--services .hero-visual {
  border-color: rgba(197, 223, 245, 0.75);
  box-shadow: 0 1px 2px rgba(59, 142, 208, 0.03), 0 12px 28px rgba(59, 142, 208, 0.04);
}

.page-hero--blog .hero-float {
  border-color: rgba(232, 220, 180, 0.8);
  color: var(--gold-ink);
}
.page-hero--blog .hero-float svg { stroke: var(--gold-ink); color: var(--gold-ink); }
.page-hero--blog .hero-visual {
  border-color: rgba(232, 220, 180, 0.7);
  box-shadow: 0 1px 2px rgba(196, 154, 18, 0.03), 0 12px 28px rgba(196, 154, 18, 0.04);
}

.page-hero--join .hero-float {
  border-color: rgba(220, 214, 240, 0.8);
  color: var(--violet-ink);
}
.page-hero--join .hero-float svg { stroke: var(--violet); color: var(--violet); }
.page-hero--join .hero-visual {
  border-color: rgba(220, 214, 240, 0.75);
  box-shadow: 0 1px 2px rgba(139, 123, 200, 0.03), 0 12px 28px rgba(139, 123, 200, 0.05);
}

.page-hero--contact .hero-float {
  border-color: rgba(240, 216, 208, 0.85);
  color: var(--coral-ink);
}
.page-hero--contact .hero-float svg { stroke: var(--coral); color: var(--coral); }
.page-hero--contact .hero-visual {
  border-color: rgba(240, 216, 208, 0.75);
  box-shadow: 0 1px 2px rgba(224, 122, 95, 0.03), 0 12px 28px rgba(224, 122, 95, 0.04);
}

.page-hero--policy .hero-float {
  border-color: rgba(210, 214, 236, 0.85);
  color: var(--indigo-ink);
}
.page-hero--policy .hero-float svg { stroke: var(--indigo); color: var(--indigo); }
.page-hero--policy .hero-visual {
  border-color: rgba(210, 214, 236, 0.75);
  box-shadow: 0 1px 2px rgba(99, 102, 184, 0.03), 0 12px 28px rgba(99, 102, 184, 0.05);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: center;
}

.page-hero .hero-grid {
  align-items: center;
}

/* Shared page-hero rhythm matches home: copy left · visual right */
.hero .hero-grid,
.page-hero .hero-grid {
  align-items: center;
}

/*
  Hero headings: prefer one line (fluid type).
  On narrow screens, allow two lines with icon aligned to the first line.
*/
.hero-title {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.4vw, 0.85rem);
  margin-bottom: 1.1rem;
  min-width: 0;
  max-width: 100%;
}

.hero-title-icon {
  width: clamp(2rem, 4.2vw, 3.1rem);
  height: clamp(2rem, 4.2vw, 3.1rem);
  border-radius: clamp(8px, 1.2vw, 14px);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(91, 95, 207, 0.08);
}
.hero-title-icon svg {
  width: clamp(0.95rem, 2vw, 1.3rem);
  height: clamp(0.95rem, 2vw, 1.3rem);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-title .display {
  margin: 0;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  line-height: var(--leading-tight);
  text-wrap: unset;
  font-size: var(--text-display);
}

/* Long tagline: tighter so it stays one line longer */
.hero-title .display.tagline-display {
  font-size: var(--text-tagline);
  letter-spacing: 0.015em;
}

.page-hero .hero-title .display:not(.tagline-display) {
  font-size: clamp(1.15rem, 0.6rem + 2.7vw, 2.75rem);
}

/* Explicit two-line hero titles (e.g. Services) */
.hero-title.hero-title--stack {
  align-items: flex-start;
}
.hero-title.hero-title--stack .hero-title-icon {
  margin-top: 0.2em;
}
.hero-title .display.hero-title-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08em;
  white-space: normal;
  text-wrap: unset;
  line-height: 1.15;
  font-size: clamp(1.35rem, 0.75rem + 2.6vw, 2.75rem);
}
.hero-title .display.hero-title-lines .hero-line {
  display: block;
  white-space: nowrap;
}
/* Home brand lines: uppercase tagline split across two rows */
.hero--home .hero-title-lines {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.25rem, 0.55rem + 2.5vw, 2.45rem);
}
.hero--home .hero-line--accent {
  color: var(--ink);
  font-weight: inherit;
}

/* Eyebrow + chips: muted ink of each page colour (not bright fills) */
.hero--home .eyebrow,
.page-hero--about .eyebrow,
.page-hero--services .eyebrow,
.page-hero--blog .eyebrow,
.page-hero--join .eyebrow,
.page-hero--contact .eyebrow,
.page-hero--policy .eyebrow {
  color: var(--ink-muted);
}

.hero--home .hero-detail {
  background: rgba(242, 240, 248, 0.65);
  border-color: rgba(220, 216, 232, 0.75);
  color: var(--ink-muted);
}
.page-hero--about .hero-detail {
  background: rgba(236, 246, 244, 0.65);
  border-color: rgba(200, 228, 222, 0.7);
  color: var(--teal-ink);
}
.page-hero--services .hero-detail {
  background: rgba(236, 244, 250, 0.65);
  border-color: rgba(197, 223, 245, 0.7);
  color: var(--sky-ink);
}
.page-hero--blog .hero-detail {
  background: rgba(250, 247, 236, 0.7);
  border-color: rgba(232, 220, 180, 0.7);
  color: var(--gold-ink);
}
.page-hero--join .hero-detail {
  background: rgba(244, 241, 249, 0.7);
  border-color: rgba(220, 214, 240, 0.7);
  color: var(--violet-ink);
}
.page-hero--contact .hero-detail {
  background: rgba(252, 244, 241, 0.7);
  border-color: rgba(240, 216, 208, 0.7);
  color: var(--coral-ink);
}
.page-hero--policy .hero-detail {
  background: rgba(240, 241, 248, 0.7);
  border-color: rgba(210, 214, 236, 0.7);
  color: var(--indigo-ink);
}
/* Inner pages: same stacked title sizing as home/services */
.page-hero .hero-title-lines {
  font-size: clamp(1.35rem, 0.75rem + 2.6vw, 2.75rem);
  text-transform: none;
  letter-spacing: -0.02em;
}
.page-hero .hero-line {
  white-space: nowrap;
}
.page-hero--about .hero-sub {
  color: var(--teal-ink);
}

.hero-copy {
  min-width: 0;
}
.hero-copy .lead {
  margin-bottom: 1.35rem;
  max-width: 34rem;
}
.hero-sub {
  margin: -0.65rem 0 1.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-ink);
}

/* Detail chips (home hero) */
.hero-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  list-style: none;
  padding: 0;
}
.hero-actions + .hero-details {
  margin-top: 0.15rem;
}

.hero-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: rgba(253, 252, 254, 0.9);
  border: 1px solid var(--line);
}
.hero-detail svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.hero-detail:nth-child(3n+2) svg { stroke: var(--teal); }
.hero-detail:nth-child(3n+3) svg { stroke: var(--gold-ink); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hero-actions:last-child {
  margin-bottom: 0;
}
/* Consistent vertical rhythm in all heroes */
.hero-copy .eyebrow {
  margin-bottom: 0.85rem;
}
.hero-copy .hero-title {
  margin-bottom: 1rem;
}
.hero-copy .lead {
  margin-bottom: 1.25rem;
}
.hero-copy .hero-details {
  margin-top: 0.15rem;
}

.hero-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* Image panel */
.hero-visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  min-height: 240px;
  background: linear-gradient(145deg, #EDE8F5 0%, #F9F7FC 45%, #EEEAF8 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.page-hero .hero-visual {
  aspect-ratio: 4 / 3;
}

/* Legacy about visual class kept for markup compatibility */
.hero-visual--about {
  border-color: rgba(197, 235, 230, 0.9);
}
.hero-float--teal {
  background: rgba(253, 252, 254, 0.94);
  border-color: var(--teal-line);
  color: var(--teal-ink);
}
.hero-float--teal svg {
  stroke: var(--teal);
  color: var(--teal);
}
.hero-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(0.85rem, 2.5vw, 1.25rem);
  background: linear-gradient(
    to top,
    rgba(18, 16, 26, 0.48) 0%,
    rgba(18, 16, 26, 0.14) 42%,
    transparent 72%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-visual-card {
  position: relative;
  background: rgba(253, 252, 254, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  padding: 0.9rem 1.05rem;
  box-shadow: var(--shadow-card);
  max-width: min(280px, calc(100% - 0.5rem));
  width: max-content;
  min-width: 0;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.hero-visual-card .card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.hero-visual-card .card-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-visual-card > div {
  min-width: 0;
  flex: 1 1 auto;
}
.hero-visual-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
  font-weight: 500;
  margin-bottom: 0.2rem;
  color: var(--ink);
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.hero-visual-card span {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Floating mini badge on image */
.hero-float {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(253, 252, 254, 0.95);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.hero-float svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Stats / Trust line ---- */
.stats {
  border-block: 1px solid rgba(230, 225, 239, 0.85);
  background: rgba(253, 252, 254, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(196, 181, 217, 0.06);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem 1rem;
  padding: 1.85rem 0;
  align-items: stretch;
}

.stat {
  text-align: center;
  padding: 1rem 0.75rem;
  border-radius: 14px;
  background: rgba(253, 252, 254, 0.75);
  border: 1px solid rgba(230, 225, 239, 0.9);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.35;
  max-width: 11rem;
  text-wrap: balance;
}

/* ---- About teaser ---- */
.about-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.about-teaser-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  min-height: 200px;
}
.about-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About page — colour, space, clear differentiation */
.about-page {
  max-width: 980px;
  margin-inline: auto;
  min-width: 0;
}

/* Distinct section surfaces so blocks do not blend
   (specificity beats global main > .section:nth-of-type rules) */
main > .section.about-section {
  padding: clamp(3.75rem, 9vw, 6.25rem) 0;
}
main > .section.about-section--purpose {
  background:
    radial-gradient(ellipse 70% 80% at 8% 0%, rgba(47, 168, 138, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(253, 252, 254, 0.7) 0%, rgba(232, 247, 242, 0.28) 100%) !important;
  border-top: 1px solid rgba(195, 232, 219, 0.55);
  border-bottom: 1px solid rgba(195, 232, 219, 0.35);
}
main > .section.about-section--commitments {
  background:
    radial-gradient(ellipse 55% 65% at 90% 15%, rgba(59, 142, 208, 0.06), transparent 50%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(232, 185, 35, 0.05), transparent 45%),
    linear-gradient(180deg, rgba(250, 248, 252, 0.65) 0%, rgba(234, 244, 252, 0.3) 100%) !important;
  border-top: 1px solid rgba(197, 223, 245, 0.5);
  border-bottom: 1px solid rgba(197, 223, 245, 0.35);
}
main > .section.about-section--values {
  background:
    radial-gradient(ellipse 50% 55% at 20% 10%, rgba(212, 106, 140, 0.05), transparent 50%),
    radial-gradient(ellipse 45% 50% at 85% 70%, rgba(99, 102, 184, 0.06), transparent 48%),
    linear-gradient(180deg, rgba(253, 252, 254, 0.8) 0%, rgba(251, 240, 244, 0.22) 100%) !important;
  border-top: 1px solid rgba(240, 208, 220, 0.45);
  border-bottom: 1px solid rgba(240, 208, 220, 0.3);
}
main > .section.about-section--next {
  background:
    radial-gradient(ellipse 50% 70% at 15% 75%, rgba(212, 160, 23, 0.05), transparent 50%),
    radial-gradient(ellipse 40% 50% at 88% 20%, rgba(91, 95, 207, 0.05), transparent 48%),
    linear-gradient(180deg, rgba(253, 252, 254, 0.85) 0%, rgba(251, 246, 232, 0.25) 100%) !important;
  border-top: 1px solid rgba(240, 226, 184, 0.5);
  border-bottom: 1px solid rgba(240, 226, 184, 0.3);
}

/* Coloured eyebrow labels */
.about-eyebrow {
  font-weight: 700;
}
.about-eyebrow--teal { color: var(--teal-ink); }
.about-eyebrow--indigo { color: var(--indigo-ink); }
.about-eyebrow--violet { color: var(--violet-ink); }
.about-eyebrow--coral { color: var(--coral-ink); }
.about-eyebrow--sky { color: var(--sky-ink); }
.about-eyebrow--amber { color: var(--amber-ink); }
.about-eyebrow--mint { color: var(--mint-ink); }
.about-eyebrow--rose { color: var(--rose-ink); }

.about-story {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding: 0.25rem 0 0.5rem;
}
.about-story .eyebrow {
  justify-content: center;
  margin-bottom: 1rem;
}
.about-story .display {
  margin: 0 0 1.5rem;
}
.about-story-body {
  text-align: left;
  padding: 1.5rem 1.65rem 1.6rem;
  border-radius: 18px;
  background: rgba(253, 252, 254, 0.94);
  border: 1px solid rgba(195, 232, 219, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px rgba(47, 168, 138, 0.04);
}
/* Plain story block — less “boxed product page” */
.about-story-body--plain {
  padding: 0.25rem 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: 38rem;
  margin-inline: auto;
}
.about-story--human {
  text-align: left;
  max-width: 40rem;
  margin-inline: 0;
}
.about-story--human .eyebrow {
  justify-content: flex-start;
}
.about-story--human .display {
  text-align: left;
}
.about-story-body p {
  color: var(--ink-muted);
  font-size: var(--text-base);
  line-height: 1.8;
  margin: 0 0 1.15rem;
}
.about-story-body p:last-child {
  margin-bottom: 0;
}
.about-story-body em {
  font-style: italic;
  color: var(--teal-ink);
  font-weight: 600;
}
.about-story-body a {
  color: var(--teal-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.about-story-body a:hover {
  color: var(--teal);
}

.about-block-header {
  max-width: 36rem;
  margin: 0 0 2.25rem;
}
.about-block-header .eyebrow {
  margin-bottom: 0.85rem;
}
.about-block-header .display {
  margin: 0;
}

/* Promise cards — spaced + colour coded */
.about-promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
}
.about-promise {
  position: relative;
  padding: 1.6rem 1.4rem 1.65rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.about-promise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
}
.about-promise-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.65rem;
  padding: 0 0.45rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.about-promise h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.65rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.about-promise p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-muted);
  line-height: 1.65;
}

/* Human-style promise cards: quiet surface, no rainbow chrome */
.about-promise--plain {
  background: var(--surface);
  border-color: var(--line);
  padding: 1.45rem 1.35rem 1.5rem;
}
.about-promise--plain::before {
  display: none;
}
.about-promise--plain h3 {
  margin-top: 0;
  font-size: 1.12rem;
}
.about-promise-grid--human {
  gap: 1.15rem 1.25rem;
}

.about-promise--sky {
  background: linear-gradient(180deg, rgba(234, 244, 252, 0.85) 0%, var(--surface) 62%);
  border-color: rgba(197, 223, 245, 0.75);
}
.about-promise--sky::before { background: rgba(59, 142, 208, 0.55); }
.about-promise--sky .about-promise-num {
  background: rgba(234, 244, 252, 0.95);
  color: var(--sky-ink);
  border: 1px solid rgba(197, 223, 245, 0.8);
}

.about-promise--amber {
  background: linear-gradient(180deg, rgba(251, 246, 232, 0.9) 0%, var(--surface) 62%);
  border-color: rgba(240, 226, 184, 0.8);
}
.about-promise--amber::before { background: rgba(212, 160, 23, 0.55); }
.about-promise--amber .about-promise-num {
  background: rgba(251, 246, 232, 0.95);
  color: var(--amber-ink);
  border: 1px solid rgba(240, 226, 184, 0.85);
}

.about-promise--mint {
  background: linear-gradient(180deg, rgba(232, 247, 242, 0.9) 0%, var(--surface) 62%);
  border-color: rgba(195, 232, 219, 0.8);
}
.about-promise--mint::before { background: rgba(47, 168, 138, 0.5); }
.about-promise--mint .about-promise-num {
  background: rgba(232, 247, 242, 0.95);
  color: var(--mint-ink);
  border: 1px solid rgba(195, 232, 219, 0.85);
}

.about-promise--teal {
  background: linear-gradient(180deg, rgba(230, 247, 245, 0.9) 0%, var(--surface) 62%);
  border-color: rgba(197, 235, 230, 0.8);
}
.about-promise--teal::before { background: rgba(13, 148, 136, 0.5); }
.about-promise--teal .about-promise-num {
  background: rgba(230, 247, 245, 0.95);
  color: var(--teal-ink);
  border: 1px solid rgba(197, 235, 230, 0.85);
}

.about-promise--violet {
  background: linear-gradient(180deg, rgba(242, 238, 249, 0.9) 0%, var(--surface) 62%);
  border-color: rgba(221, 216, 255, 0.8);
}
.about-promise--violet::before { background: rgba(139, 123, 200, 0.5); }
.about-promise--violet .about-promise-num {
  background: rgba(242, 238, 249, 0.95);
  color: var(--violet-ink);
  border: 1px solid rgba(221, 216, 255, 0.85);
}

/* Values without colour-coded bars — one quiet system */
.about-values--human .value-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  padding: 1.35rem 1.25rem 1.4rem;
}
.about-values--human .value-card::before {
  display: none !important;
}
.about-values--human .value-card h3 {
  color: var(--ink) !important;
  font-size: 1.05rem;
}
.about-values--human .value-card:nth-child(odd) {
  background: rgba(253, 252, 254, 0.95) !important;
}
.about-values--human .value-card:nth-child(even) {
  background: rgba(246, 243, 250, 0.45) !important;
}
.about-values--human .value-card:hover {
  transform: none;
  box-shadow: 0 2px 12px rgba(26, 29, 38, 0.05);
}

.about-next-card--plain {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.about-next-card--plain::before {
  display: none !important;
}
.about-next-card--plain strong {
  color: var(--ink) !important;
}
.about-next-card--plain:hover {
  border-color: var(--line-strong) !important;
  background: rgba(246, 243, 250, 0.5) !important;
}
.about-next-links--human {
  gap: 1rem;
}

/* Values — roomy grid + per-card colour */
.about-section--values .section-header {
  margin-bottom: 2.5rem;
}
.about-values {
  gap: 1.25rem 1.35rem;
}
.about-values .value-card {
  padding: 1.55rem 1.4rem 1.6rem;
  border-radius: 16px;
  border-width: 1px;
  border-style: solid;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s var(--ease), transform 0.2s var(--ease), border-color 0.25s var(--ease);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.about-values .value-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.about-values .value-card h3 {
  margin-bottom: 0.65rem;
  padding-left: 0.15rem;
}
.about-values .value-card p {
  line-height: 1.6;
  padding-left: 0.15rem;
}
.about-values .value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Very light multi-colour value cards */
.about-values .value-card--sky {
  background: linear-gradient(135deg, rgba(234, 244, 252, 0.75) 0%, var(--surface) 72%);
  border-color: rgba(197, 223, 245, 0.7);
}
.about-values .value-card--sky::before { background: rgba(59, 142, 208, 0.45); }
.about-values .value-card--sky h3 { color: var(--sky-ink); }

.about-values .value-card--teal {
  background: linear-gradient(135deg, rgba(230, 247, 245, 0.75) 0%, var(--surface) 72%);
  border-color: rgba(197, 235, 230, 0.7);
}
.about-values .value-card--teal::before { background: rgba(13, 148, 136, 0.45); }
.about-values .value-card--teal h3 { color: var(--teal-ink); }

.about-values .value-card--amber {
  background: linear-gradient(135deg, rgba(251, 246, 232, 0.8) 0%, var(--surface) 72%);
  border-color: rgba(240, 226, 184, 0.75);
}
.about-values .value-card--amber::before { background: rgba(212, 160, 23, 0.45); }
.about-values .value-card--amber h3 { color: var(--amber-ink); }

.about-values .value-card--violet {
  background: linear-gradient(135deg, rgba(242, 238, 249, 0.75) 0%, var(--surface) 72%);
  border-color: rgba(221, 216, 255, 0.7);
}
.about-values .value-card--violet::before { background: rgba(139, 123, 200, 0.45); }
.about-values .value-card--violet h3 { color: var(--violet-ink); }

.about-values .value-card--rose {
  background: linear-gradient(135deg, rgba(251, 240, 244, 0.8) 0%, var(--surface) 72%);
  border-color: rgba(240, 208, 220, 0.75);
}
.about-values .value-card--rose::before { background: rgba(212, 106, 140, 0.45); }
.about-values .value-card--rose h3 { color: var(--rose-ink); }

.about-values .value-card--mint {
  background: linear-gradient(135deg, rgba(232, 247, 242, 0.8) 0%, var(--surface) 72%);
  border-color: rgba(195, 232, 219, 0.75);
}
.about-values .value-card--mint::before { background: rgba(47, 168, 138, 0.45); }
.about-values .value-card--mint h3 { color: var(--mint-ink); }

.about-values .value-card--coral {
  background: linear-gradient(135deg, rgba(253, 240, 236, 0.8) 0%, var(--surface) 72%);
  border-color: rgba(245, 216, 206, 0.75);
}
.about-values .value-card--coral::before { background: rgba(224, 122, 95, 0.45); }
.about-values .value-card--coral h3 { color: var(--coral-ink); }

.about-values .value-card--accent {
  background: linear-gradient(135deg, rgba(238, 234, 248, 0.75) 0%, var(--surface) 72%);
  border-color: rgba(212, 206, 227, 0.75);
}
.about-values .value-card--accent::before { background: rgba(91, 95, 207, 0.4); }
.about-values .value-card--accent h3 { color: var(--accent-deep); }

/* Next steps — spaced coloured destinations */
.about-next {
  display: grid;
  gap: 2.25rem;
}
.about-next-copy {
  max-width: 34rem;
}
.about-next-copy .display {
  margin-bottom: 0.65rem;
}
.about-next-copy .muted {
  max-width: 32rem;
  line-height: 1.6;
}
.about-next-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.4rem;
}
.about-next-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.45rem 1.3rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none !important;
  color: inherit;
  min-height: 8.25rem;
  transition: box-shadow 0.25s var(--ease), transform 0.15s var(--ease), border-color 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.about-next-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.about-next-card:hover {
  box-shadow: var(--shadow);
  text-decoration: none !important;
  transform: translateY(-2px);
}
.about-next-card:active {
  transform: none;
}
.about-next-card strong {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.about-next-card span {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.about-next-card--indigo {
  background: linear-gradient(180deg, rgba(238, 240, 250, 0.85) 0%, var(--surface) 65%);
  border-color: rgba(208, 212, 240, 0.75);
}
.about-next-card--indigo::before { background: rgba(99, 102, 184, 0.5); }
.about-next-card--indigo:hover { border-color: rgba(99, 102, 184, 0.45); }
.about-next-card--indigo strong { color: var(--indigo-ink); }

.about-next-card--mint {
  background: linear-gradient(180deg, rgba(232, 247, 242, 0.85) 0%, var(--surface) 65%);
  border-color: rgba(195, 232, 219, 0.75);
}
.about-next-card--mint::before { background: rgba(47, 168, 138, 0.5); }
.about-next-card--mint:hover { border-color: rgba(47, 168, 138, 0.4); }
.about-next-card--mint strong { color: var(--mint-ink); }

.about-next-card--amber {
  background: linear-gradient(180deg, rgba(251, 246, 232, 0.9) 0%, var(--surface) 65%);
  border-color: rgba(240, 226, 184, 0.8);
}
.about-next-card--amber::before { background: rgba(212, 160, 23, 0.5); }
.about-next-card--amber:hover { border-color: rgba(212, 160, 23, 0.4); }
.about-next-card--amber strong { color: var(--amber-ink); }

.about-next-card--sky {
  background: linear-gradient(180deg, rgba(234, 244, 252, 0.85) 0%, var(--surface) 65%);
  border-color: rgba(197, 223, 245, 0.75);
}
.about-next-card--sky::before { background: rgba(59, 142, 208, 0.5); }
.about-next-card--sky:hover { border-color: rgba(59, 142, 208, 0.4); }
.about-next-card--sky strong { color: var(--sky-ink); }

.about-next-card--violet {
  background: linear-gradient(180deg, rgba(242, 238, 249, 0.85) 0%, var(--surface) 65%);
  border-color: rgba(221, 216, 255, 0.75);
}
.about-next-card--violet::before { background: rgba(139, 123, 200, 0.5); }
.about-next-card--violet:hover { border-color: rgba(139, 123, 200, 0.4); }
.about-next-card--violet strong { color: var(--violet-ink); }

.about-next-card--coral {
  background: linear-gradient(180deg, rgba(253, 240, 236, 0.85) 0%, var(--surface) 65%);
  border-color: rgba(245, 216, 206, 0.75);
}
.about-next-card--coral::before { background: rgba(224, 122, 95, 0.5); }
.about-next-card--coral:hover { border-color: rgba(224, 122, 95, 0.4); }
.about-next-card--coral strong { color: var(--coral-ink); }

@media (max-width: 900px) {
  .about-promise-grid,
  .about-next-links {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .about-story {
    text-align: left;
  }
  .about-story .eyebrow {
    justify-content: flex-start;
  }
  .about-story-body {
    padding: 1.25rem 1.15rem 1.35rem;
  }
  .about-next-card {
    min-height: 0;
  }
  .about-section {
    padding: clamp(3rem, 10vw, 4.5rem) 0;
  }
  .about-section--values .section-header {
    margin-bottom: 1.75rem;
  }
  .about-values {
    gap: 1rem;
  }
}

.value-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
}

/* ---- Service Focus ---- */
.service-focus {
  background: linear-gradient(
    180deg,
    rgba(246, 243, 250, 0.9) 0%,
    rgba(240, 236, 246, 0.55) 100%
  );
  border-top: 1px solid rgba(230, 225, 239, 0.9);
  border-bottom: 1px solid rgba(230, 225, 239, 0.55);
}

/* Wrap on all sizes — no inner horizontal scrollbar / “scroll line” */
.service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow-x: visible;
  overflow-y: visible;
  padding-bottom: 0.15rem;
  margin-bottom: 1.75rem;
  max-width: 100%;
}

.service-tab {
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0.7rem 1.1rem;
  min-height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--ink-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.45s var(--ease);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.service-tab:hover {
  color: var(--ink);
}
.service-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.service-panel-wrap {
  position: relative;
  min-height: 320px;
}

.service-panel {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
  animation: panelIn 0.45s var(--ease);
  align-items: stretch;
  min-width: 0;
}
.service-panel.is-active { display: grid; }
.service-panel > div {
  min-width: 0;
}

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

.service-panel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
/* Auto-cycle soft tones across service tabs when no class set */
.service-panel[data-service="digitization"] .service-panel-icon { background: var(--sky-soft); color: var(--sky); border-color: var(--sky-line); }
.service-panel[data-service="digitalisation"] .service-panel-icon { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
.service-panel[data-service="presence"] .service-panel-icon { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line); }
.service-panel[data-service="security"] .service-panel-icon { background: var(--coral-soft); color: var(--coral); border-color: var(--coral-line); }
.service-panel[data-service="marketing"] .service-panel-icon { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
.service-panel[data-service="commerce"] .service-panel-icon { background: var(--mint-soft); color: var(--mint); border-color: var(--mint-line); }
.service-panel-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-panel h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.service-panel p {
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
  max-width: 36rem;
}

.service-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}
.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--ink);
}
.service-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.service-ideal {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
}
.service-ideal strong { color: var(--ink-muted); font-weight: 600; }

.service-panel-visual {
  border-radius: 14px;
  background: linear-gradient(160deg, var(--lavender-mist), var(--surface) 70%);
  border: 1px solid var(--line);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.service-panel-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-panel-visual .visual-cap {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(to top, rgba(15, 19, 28, 0.72) 0%, rgba(15, 19, 28, 0.2) 70%, transparent 100%);
  color: var(--white);
  margin-top: auto;
  min-height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.service-panel-visual span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.service-panel-visual strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 0.3rem;
  color: var(--white);
  line-height: 1.25;
}

/* Services page — jump nav (wraps; never horizontal-scrolls) */
.service-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.15rem 0 1.15rem;
  border-bottom: 1px solid var(--line);
  max-width: 100%;
  overflow: visible;
}
.service-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  min-height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  line-height: 1.25;
  text-decoration: none !important;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.35s var(--ease);
}
.service-jump a:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none !important;
}
.service-jump a:active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 123, 200, 0.3);
}

.services-detail {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
  overflow-x: clip;
}

/* Services page full blocks */
.service-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  max-width: 100%;
}
.service-block:last-child { border-bottom: none; }

.service-block-copy {
  min-width: 0;
  max-width: 100%;
}
.service-block-copy .heading-icon {
  margin-bottom: 0.85rem;
}
/* Six pillar name labels (01 · Digitization, etc.) */
.service-block-copy .eyebrow {
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.2rem);
  letter-spacing: 0.06em;
  margin-bottom: 0.95rem;
}
/* Six pillar titles on services page — slightly larger than global display--sm */
.service-block-copy h2.display.display--sm {
  font-size: clamp(1.5rem, 1.05rem + 1.45vw, 2.25rem);
}
.service-block-lead {
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: 1.65;
  margin: 0 0 0.85rem;
  max-width: 40rem;
}
.service-block-body {
  font-size: var(--text-base);
  color: #4a5268;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  max-width: 40rem;
}
.service-block-sub {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.65rem;
}
.service-block .service-list {
  margin-bottom: 1.15rem;
}
.service-block .service-list li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a5268;
}
.service-block .service-ideal,
.service-block .service-outcome {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0 0 0.75rem;
  max-width: 40rem;
}
.service-block .service-ideal strong,
.service-block .service-outcome strong {
  color: var(--ink);
  font-weight: 600;
}
.service-block .tech-tags {
  max-width: 100%;
}
.service-block .btn {
  margin-top: 0.25rem;
}

/* Visual column: image + process infographic stacked */
.service-block-aside {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.service-block:nth-of-type(even) .service-block-aside {
  order: -1;
}

.service-block-media {
  border-radius: 18px;
  aspect-ratio: 5 / 4;
  background: linear-gradient(145deg, var(--lavender-mist), var(--surface));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

/* Pillar process infographic under the image */
.service-infographic {
  margin: 0;
  padding: 1rem 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  min-width: 0;
  max-width: 100%;
}
.service-infographic-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
}
.service-infographic-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem 0.4rem;
  counter-reset: none;
  position: relative;
}
.service-infographic-steps::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 1.05rem;
  height: 2px;
  background: linear-gradient(90deg, var(--line-strong), var(--line), var(--line-strong));
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.service-infographic-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.service-infographic-steps li::before {
  display: none;
}
.si-num {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
  flex-shrink: 0;
}
.si-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  max-width: 100%;
}
.si-hint {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.3;
  max-width: 100%;
}

/* Soft colour per pillar */
#digitization .service-infographic { border-color: var(--sky-line); background: linear-gradient(180deg, var(--sky-soft) 0%, var(--surface) 55%); }
#digitization .si-num { background: var(--sky); box-shadow: 0 0 0 1px var(--sky-line); }
#digitalisation .service-infographic { border-color: var(--teal-line); background: linear-gradient(180deg, var(--teal-soft) 0%, var(--surface) 55%); }
#digitalisation .si-num { background: var(--teal); box-shadow: 0 0 0 1px var(--teal-line); }
#presence .service-infographic { border-color: var(--violet-line); background: linear-gradient(180deg, var(--violet-soft) 0%, var(--surface) 55%); }
#presence .si-num { background: var(--violet); box-shadow: 0 0 0 1px var(--violet-line); }
#security .service-infographic { border-color: var(--coral-line); background: linear-gradient(180deg, var(--coral-soft) 0%, var(--surface) 55%); }
#security .si-num { background: var(--coral); box-shadow: 0 0 0 1px var(--coral-line); }
#marketing .service-infographic { border-color: var(--amber-line); background: linear-gradient(180deg, var(--amber-soft) 0%, var(--surface) 55%); }
#marketing .si-num { background: var(--amber-ink); box-shadow: 0 0 0 1px var(--amber-line); }
#commerce .service-infographic { border-color: var(--mint-line); background: linear-gradient(180deg, var(--mint-soft) 0%, var(--surface) 55%); }
#commerce .si-num { background: var(--mint); box-shadow: 0 0 0 1px var(--mint-line); }

/* Deliverables / stack note under infographic */
.service-snapshot {
  margin: 0;
  padding: 0.95rem 1rem 1rem;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: rgba(253, 252, 254, 0.95);
  min-width: 0;
  max-width: 100%;
}
.service-snapshot-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.service-snapshot-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.65rem;
}
.service-snapshot-list li {
  position: relative;
  margin: 0;
  padding: 0.35rem 0.35rem 0.35rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  background: transparent;
  border: none;
}
.service-snapshot-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.65rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}
.service-snapshot-note {
  margin: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.service-snapshot-note strong {
  color: var(--ink);
  font-weight: 700;
}

#digitization .service-snapshot { border-color: var(--sky-line); background: linear-gradient(180deg, rgba(234, 244, 252, 0.55) 0%, var(--surface) 70%); }
#digitization .service-snapshot-list li::before { background: var(--sky); }
#digitalisation .service-snapshot { border-color: var(--teal-line); background: linear-gradient(180deg, rgba(230, 247, 245, 0.55) 0%, var(--surface) 70%); }
#digitalisation .service-snapshot-list li::before { background: var(--teal); }
#presence .service-snapshot { border-color: var(--violet-line); background: linear-gradient(180deg, rgba(242, 238, 249, 0.55) 0%, var(--surface) 70%); }
#presence .service-snapshot-list li::before { background: var(--violet); }
#security .service-snapshot { border-color: var(--coral-line); background: linear-gradient(180deg, rgba(253, 240, 236, 0.55) 0%, var(--surface) 70%); }
#security .service-snapshot-list li::before { background: var(--coral); }
#marketing .service-snapshot { border-color: var(--amber-line); background: linear-gradient(180deg, rgba(251, 246, 232, 0.55) 0%, var(--surface) 70%); }
#marketing .service-snapshot-list li::before { background: var(--amber-ink); }
#commerce .service-snapshot { border-color: var(--mint-line); background: linear-gradient(180deg, rgba(232, 247, 242, 0.55) 0%, var(--surface) 70%); }
#commerce .service-snapshot-list li::before { background: var(--mint); }

@media (max-width: 720px) {
  .service-infographic {
    padding: 0.9rem 0.75rem 0.95rem;
  }
  .service-infographic-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.65rem;
  }
  .service-infographic-steps::before {
    display: none;
  }
  .si-num { width: 1.85rem; height: 1.85rem; font-size: 0.74rem; }
  .si-label { font-size: 0.76rem; }
  .si-hint { font-size: 0.66rem; }
  .service-snapshot {
    padding: 0.85rem 0.8rem 0.9rem;
  }
  .service-snapshot-list {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

.service-block-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-block-media .big-icon {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  box-shadow: var(--shadow);
  z-index: 1;
}
/* Match service pillar colours on detail page media icons (by article order) */
.service-block:nth-of-type(1) .big-icon { background: var(--sky-soft); color: var(--sky); border-color: var(--sky-line); }
.service-block:nth-of-type(2) .big-icon { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
.service-block:nth-of-type(3) .big-icon { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line); }
.service-block:nth-of-type(4) .big-icon { background: var(--coral-soft); color: var(--coral); border-color: var(--coral-line); }
.service-block:nth-of-type(5) .big-icon { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
.service-block:nth-of-type(6) .big-icon { background: var(--mint-soft); color: var(--mint); border-color: var(--mint-line); }
/* Fallback if markup order differs: colour by section id */
#digitization .big-icon { background: var(--sky-soft); color: var(--sky); border-color: var(--sky-line); }
#digitalisation .big-icon { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
#presence .big-icon { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line); }
#security .big-icon { background: var(--coral-soft); color: var(--coral); border-color: var(--coral-line); }
#marketing .big-icon { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
#commerce .big-icon { background: var(--mint-soft); color: var(--mint); border-color: var(--mint-line); }
.service-block-media .big-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Soft color accents on chips / stats */
.chip:nth-child(6n+1) { border-color: #D9D2EA; background: var(--accent-soft); color: var(--accent-deep); }
.chip:nth-child(6n+2) { border-color: var(--teal-line); background: var(--teal-soft); color: var(--teal-ink); }
.chip:nth-child(6n+3) { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold-ink); }
.chip:nth-child(6n+4) { border-color: var(--violet-line); background: var(--violet-soft); color: var(--violet-ink); }
.chip:nth-child(6n+5) { border-color: var(--coral-line); background: var(--coral-soft); color: var(--coral-ink); }
.chip:nth-child(6n+6) { border-color: var(--green-line); background: var(--green-soft); color: var(--green-ink); }

.stat:nth-child(1) strong { color: var(--accent); }
.stat:nth-child(2) strong { color: var(--teal); }
.stat:nth-child(3) strong { color: var(--gold-ink); }
.stat:nth-child(4) strong { color: var(--violet); }

.process-step:nth-child(6n+1)::before { color: var(--gold); }
.process-step:nth-child(6n+2)::before { color: var(--sky); }
.process-step:nth-child(6n+3)::before { color: var(--mint); }
.process-step:nth-child(6n+4)::before { color: var(--coral); }
.process-step:nth-child(6n+5)::before { color: var(--violet); }
.process-step:nth-child(6n+6)::before { color: var(--amber); }

.service-tab.is-active { box-shadow: 0 0 0 1px var(--accent); }

/* Hero subtle color dots */
.hero-visual-card strong { color: var(--ink); }

/* ---- Dark process band (deep lavender-ink) ---- */
.process {
  background: linear-gradient(165deg, #15121F 0%, #1A1628 55%, #12101A 100%);
  color: var(--white);
  border-top: 1px solid rgba(196, 181, 217, 0.12);
  border-bottom: 1px solid rgba(196, 181, 217, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.process .eyebrow { color: var(--gold); }
.process .display { color: var(--white); }
.process .lead { color: rgba(232, 228, 240, 0.86); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 1.5rem;
  margin-top: 2.5rem;
  counter-reset: step;
}

.process-step {
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.12);
  counter-increment: step;
  height: 100%;
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
}
.process-step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 0.85rem;
  letter-spacing: 0.02em;
}
.process-step h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--white);
  line-height: 1.3;
  text-wrap: balance;
}
.process-step p {
  font-size: 0.9rem;
  color: rgba(232, 228, 240, 0.82);
  line-height: 1.55;
  flex: 1;
}

/* ---- AI coming soon — full-width section ---- */
.caps-section {
  padding: clamp(4.5rem, 10vw, 7rem) 0;
  background:
    radial-gradient(ellipse 70% 80% at 12% 20%, rgba(139, 123, 200, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 88% 80%, rgba(110, 213, 200, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(240, 236, 246, 0.55) 0%, rgba(253, 252, 254, 0.9) 100%);
  border-top: 1px solid rgba(230, 225, 239, 0.95);
  border-bottom: 1px solid rgba(230, 225, 239, 0.65);
}
.caps-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  gap: 0;
}
.caps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  margin-bottom: 1.35rem;
  border-radius: 16px;
  background: var(--indigo-soft);
  color: var(--indigo);
  border: 1px solid var(--indigo-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px rgba(99, 102, 184, 0.12);
}
.caps-icon.tone-indigo {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px rgba(99, 102, 184, 0.12);
}
.caps-icon svg {
  width: 2rem;
  height: 2rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.caps-inner .display {
  margin: 0 0 0.55rem;
  font-size: clamp(1.2rem, 0.7rem + 2.2vw, 2.35rem);
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.2;
}
.caps-soon {
  margin: 0 0 1.1rem;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--indigo);
}
.caps-inner .lead {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .caps-section {
    padding: clamp(3.5rem, 12vw, 5rem) 0;
  }
  .caps-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 14px;
    margin-bottom: 1.1rem;
  }
  .caps-icon svg {
    width: 1.7rem;
    height: 1.7rem;
  }
  /* Two-line when one line would crowd the viewport */
  .caps-inner .display {
    white-space: normal;
    text-wrap: balance;
    max-width: 14em;
    font-size: clamp(1.2rem, 4.8vw, 1.55rem);
  }
}

/* ---- FAQ ---- */
.faq-list {
  max-width: 720px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

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

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  min-height: 3.25rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.faq-question:hover { color: var(--accent); }

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), background 0.3s;
  position: relative;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 1px;
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; transition: transform 0.3s var(--ease), opacity 0.3s; }
.faq-item.is-open .faq-icon {
  background: var(--accent-soft);
  border-color: transparent;
}
.faq-item.is-open .faq-icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-answer-inner {
  padding: 0 0 1.35rem;
  color: var(--ink-muted);
  max-width: 40rem;
  font-size: 0.975rem;
}

/* ---- Blog cards ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.blog-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none !important;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  text-decoration: none !important;
}

.blog-card-thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--lavender-mist), var(--accent-soft));
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.blog-card-thumb span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.blog-card-body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-body time {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.blog-card-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.55rem;
  letter-spacing: -0.015em;
}
.blog-card-body p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  flex: 1;
  margin-bottom: 1rem;
}
.blog-card-body .btn-ghost {
  font-size: 0.875rem;
  align-self: flex-start;
}

/* Blog index list */
.blog-list {
  display: grid;
  gap: 1rem;
  max-width: 760px;
}

.blog-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: box-shadow 0.45s var(--ease);
  color: inherit;
  text-decoration: none !important;
}
.blog-list-item:hover {
  box-shadow: var(--shadow);
  text-decoration: none !important;
}
.blog-list-thumb {
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lavender-mist), var(--accent-soft));
  min-height: 88px;
  overflow: hidden;
  position: relative;
}
.blog-list-thumb img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
  display: block;
}
.blog-list-item h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.25rem 0 0.4rem;
}
.blog-list-item p {
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.blog-list-item time {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* Article */
.article {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.article .eyebrow { margin-bottom: 0.75rem; }
.article-figure {
  margin: 1.5rem 0 1.75rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.article-figure figcaption {
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 0.75rem 1rem 1rem;
  line-height: 1.45;
}
.article h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.article .meta {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.article-body p {
  margin-bottom: 1.15rem;
  color: var(--ink-muted);
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  margin: 2rem 0 0.75rem;
  color: var(--ink);
}
.article-body ul {
  margin: 0 0 1.15rem 1.1rem;
  list-style: disc;
  color: var(--ink-muted);
}
.article-body li { margin-bottom: 0.4rem; }

/* ---- CTA band ---- */
.cta-band {
  padding: clamp(3.5rem, 8vw, 5rem) 0;
  background: linear-gradient(135deg, var(--lavender-mist) 0%, var(--accent-soft) 50%, #F3F0F9 100%);
  border-top: 1px solid rgba(230, 225, 239, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 22em;
}
.cta-inner p { color: var(--ink-muted); }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ---- Values grid (about) ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.value-card {
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.value-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  text-wrap: balance;
}
.value-card p {
  font-size: 0.9rem;
  color: #4a5268;
  line-height: 1.55;
  flex: 1;
}

/* ---- Forms ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.15rem;
}
.form-grid .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field textarea,
.field select {
  width: 100%;
  max-width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  /* 16px min avoids iOS focus zoom; keeps forms readable */
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 2.9rem;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.field textarea {
  min-height: 140px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 123, 200, 0.16);
}

.field-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--ink-muted);
  min-height: 2.5rem;
}
.field-check input {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.skill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.skill-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  min-height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.45s var(--ease), color 0.25s var(--ease);
  user-select: none;
  max-width: 100%;
}
.skill-chip input { display: none; }
.skill-chip:has(input:checked),
.skill-chip.is-checked {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.skill-chip:has(input:checked)::after,
.skill-chip.is-checked::after {
  border-color: var(--accent);
  opacity: 0.65;
  transform: scale(1);
}

/* ---- Join application form ---- */
.join-form-wrap {
  max-width: 720px;
  margin-inline: auto;
  min-width: 0;
  width: 100%;
}
.join-form-header {
  margin-bottom: 1.75rem;
}
.join-form-intro {
  margin-top: 0.65rem;
  font-size: 0.95rem;
}
.join-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-section {
  margin: 0;
  padding: 1.35rem 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.form-section--consent {
  border-style: dashed;
  background: rgba(253, 252, 254, 0.85);
}
.form-section-title {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-wrap: balance;
}
.form-section-hint {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.form-section .form-grid {
  clear: both;
}

/* Join — availability as choice cards */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.15rem;
}
.choice-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.choice-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.choice-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  min-height: 4.25rem;
  padding: 0.85rem 2rem 0.9rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(253, 252, 254, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.15s var(--ease);
}
.choice-card-body strong {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.choice-card-body span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.4;
}
.choice-card:hover .choice-card-body {
  border-color: rgba(139, 123, 200, 0.55);
  background: var(--violet-soft);
}
.choice-card input:focus-visible + .choice-card-body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.choice-card input:checked + .choice-card-body {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
  box-shadow:
    0 0 0 1px rgba(91, 95, 207, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.choice-card input:checked + .choice-card-body strong {
  color: var(--accent-deep);
}
.choice-card input:checked + .choice-card-body span {
  color: var(--ink-muted);
}
.choice-card input:checked + .choice-card-body::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.form-section--role .form-grid {
  gap: 1.15rem 1.15rem;
}
.form-section--role .field-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
@media (max-width: 560px) {
  .choice-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .choice-card-body {
    min-height: 0;
    padding: 0.8rem 0.9rem;
  }
}
.skill-other-field {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  animation: skillOtherIn 0.35s var(--ease);
}
.skill-other-field[hidden] {
  display: none !important;
}
@keyframes skillOtherIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.field-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Phone: country code (manual) + number */
.phone-field {
  display: grid;
  grid-template-columns: minmax(5.5rem, 6.75rem) 1fr;
  gap: 0.55rem;
  align-items: end;
}
.phone-code-wrap,
.phone-number-wrap {
  min-width: 0;
}
.phone-code-wrap label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.phone-field .phone-code,
.phone-field input {
  width: 100%;
  min-width: 0;
}
.phone-field .phone-code {
  padding: 0.8rem 0.65rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Consent row — compact, same on Join + Contact */
.join-consent {
  margin: 0 0 1.1rem;
}
.join-consent-check {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  column-gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  min-height: 2.75rem;
}
.join-consent-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.join-consent-box {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.08rem;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.join-consent-box::after {
  content: "";
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg) scale(0);
  margin-top: -0.08rem;
  transition: transform 0.18s var(--ease);
}
.join-consent-check input:checked + .join-consent-box {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 123, 200, 0.16);
}
.join-consent-check input:checked + .join-consent-box::after {
  transform: rotate(45deg) scale(1);
}
.join-consent-check input:focus-visible + .join-consent-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.join-consent-text {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.45;
  padding-top: 0.02rem;
}
.join-consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}
.join-consent-text .req {
  color: var(--accent);
  font-weight: 700;
}
.join-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem 1.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.join-form-actions .btn {
  min-height: 2.85rem;
  padding-inline: 1.5rem;
  font-size: 0.9rem;
}
.join-form-aside {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 16rem;
}

@media (max-width: 720px) {
  .phone-field {
    grid-template-columns: minmax(5.25rem, 6.5rem) 1fr;
  }
  .join-consent-check {
    grid-template-columns: 1.2rem 1fr;
    column-gap: 0.6rem;
  }
  .join-consent-text {
    font-size: 0.82rem;
  }
  .join-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .join-form-actions .btn {
    width: 100%;
  }
}

/* File upload control */
.file-upload {
  position: relative;
}
.file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.file-upload-ui {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: rgba(246, 243, 250, 0.55);
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.file-upload:hover .file-upload-ui,
.file-upload:focus-within .file-upload-ui {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(139, 123, 200, 0.12);
}
.file-upload.has-file .file-upload-ui {
  border-style: solid;
  border-color: rgba(139, 123, 200, 0.45);
  background: var(--surface);
}
.file-upload-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--violet);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.file-upload-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.file-upload-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.file-upload-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.file-upload-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.file-upload-name {
  margin-left: auto;
  max-width: 40%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-upload-name:not([hidden]) {
  display: block;
}
.file-upload.has-file .file-upload-text {
  display: none;
}

.form-success {
  display: none;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: #EAF7F0;
  border: 1px solid #B7E0C8;
  color: var(--success);
  font-weight: 500;
  margin-top: 1rem;
  line-height: 1.55;
}
.form-success.is-visible { display: block; }

.form-error {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: #FDF0EC;
  border: 1px solid var(--coral-line);
  color: var(--coral-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}
.form-error[hidden] { display: none !important; }

/* Netlify Forms honeypot — keep out of layout */
form[data-netlify] .visually-hidden,
form[netlify] .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  .form-section {
    padding: 1.15rem 1rem 1.25rem;
  }
  .file-upload-name {
    max-width: 100%;
    margin-left: 0;
    margin-top: 0.35rem;
    text-align: left;
  }
  .file-upload-ui {
    flex-wrap: wrap;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-aside {
  min-width: 0;
}
.contact-aside h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.contact-aside p {
  color: var(--ink-muted);
  margin-bottom: 1.75rem;
  max-width: 28rem;
}

.contact-meta {
  display: grid;
  gap: 1.15rem;
}
.contact-meta a,
.contact-meta .contact-static {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.975rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-meta a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.contact-meta a:active {
  text-decoration: none;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 123, 200, 0.35);
}
.contact-meta span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.contact-social-block {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.contact-social-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.65rem;
}
.contact-handle {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-weight: 500;
}
.contact-disclaimer {
  margin-top: 1.75rem;
  font-size: 0.825rem;
  line-height: 1.5;
}

.contact-form-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.contact-form-panel--join-style {
  min-width: 0;
}
.contact-form-panel--join-style .join-form-header {
  margin-bottom: 1.35rem;
}
.contact-form-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.contact-form-intro {
  margin-bottom: 1.35rem;
  font-size: 0.9rem;
}
.field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  appearance: none;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 123, 200, 0.16);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

/* Contact + footer: same spacing between social icons */
.contact-social-block .social-row,
.footer-col--social .social-row {
  gap: 0.4rem;
}
.contact-social-block .social-row {
  margin-top: 0.35rem;
}
.contact-social-block .social-link,
.footer-col--social .social-link {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.contact-social-block .social-link svg,
.footer-col--social .social-link svg {
  width: 24px;
  height: 24px;
}

/*
  Social logos only — same on contact page and footer.
  Default: grey brand marks. Hover: brand colour. No box, no underline.
*/
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem;
  margin: 0;
  border: none !important;
  border-radius: 10px;
  background: transparent !important;
  color: #5c6370;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.social-link::after {
  content: none !important;
  display: none !important;
}
.social-link:hover,
.social-link:focus-visible,
.social-link:active {
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none;
}

.social-link svg {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
.social-link svg path {
  fill: currentColor !important;
}

/* Brand colour on the logo when hovered — same as contact page */
.social-link--instagram:hover,
.social-link--instagram:focus-visible {
  color: #E4405F;
}
.social-link--linkedin:hover,
.social-link--linkedin:focus-visible {
  color: #0A66C2;
}
.social-link--x:hover,
.social-link--x:focus-visible {
  color: #000000;
}
.social-link--facebook:hover,
.social-link--facebook:focus-visible {
  color: #1877F2;
}
.social-link--youtube:hover,
.social-link--youtube:focus-visible {
  color: #FF0000;
}
.social-link--pinterest:hover,
.social-link--pinterest:focus-visible {
  color: #E60023;
}

@media (max-width: 720px) {
  .social-link svg {
    width: 24px;
    height: 24px;
  }
}

/* ---- Policy (professional document layout) ---- */
.policy-section {
  padding-top: clamp(3rem, 6.5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7.5vw, 5.5rem);
}

/* Inset vs header .container so content sits clearly inside the logo line on both sides */
.container.policy-wrap,
.policy-wrap {
  width: min(100% - 7rem, calc(var(--max) - 4.5rem));
  max-width: calc(var(--max) - 4.5rem);
  margin-inline: auto;
  min-width: 0;
}

.policy-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(2.5rem, 5vw, 3.25rem);
  text-align: left;
  padding: 0 0 1.9rem;
  border-bottom: 1px solid var(--line);
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.policy-intro .eyebrow {
  justify-content: flex-start;
  color: var(--indigo-ink);
}
.policy-intro-title {
  margin: 0 0 0.9rem;
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  line-height: 1.25;
  overflow-wrap: break-word;
  color: var(--ink-strong);
}
.policy-intro-lead {
  margin: 0;
  max-width: 52rem;
  text-align: left;
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: 1.75;
}

.policy-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 4.5vw, 3rem);
  min-width: 0;
  /* Legal copy must always be readable — never hide behind reveal opacity */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  color: var(--ink);
}

/* Soft group labels (Terms / Privacy / Legal / Grievance) */
.policy-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.policy-group-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo-ink);
  opacity: 0.85;
}
.policy-group-blocks {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.policy-block {
  padding: 1.85rem 0 2rem;
  border-bottom: 1px solid rgba(230, 225, 239, 0.95);
  min-width: 0;
}
.policy-group-blocks .policy-block:first-child {
  padding-top: 1rem;
}
.policy-group-blocks .policy-block:last-child {
  border-bottom: none;
  padding-bottom: 0.15rem;
}
.policy-content > .policy-block:last-child,
.policy-content .policy-group:last-child .policy-block:last-child {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.policy-content h2 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 0.95rem;
  line-height: 1.3;
  scroll-margin-top: 5.5rem;
  text-wrap: balance;
  max-width: 100%;
  overflow-wrap: break-word;
  opacity: 1;
}

.policy-content p {
  font-family: var(--font-body);
  color: var(--ink);
  margin: 0 0 1rem;
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  line-height: 1.85;
  max-width: none;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  opacity: 1;
}
.policy-content p:last-child {
  margin-bottom: 0;
}
.policy-content a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.policy-content a:hover {
  color: var(--accent-hover);
}
.policy-content a:active {
  background: transparent;
  box-shadow: none;
}

.policy-content ul {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.policy-content li {
  position: relative;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  line-height: 1.75;
  margin: 0;
  padding: 0.8rem 1.2rem 0.8rem 2.1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
  overflow-wrap: break-word;
  opacity: 1;
}
.policy-content li::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1.2rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--indigo);
  opacity: 0.55;
  flex-shrink: 0;
}

/* Hero: “Our policies” prefers one line when space allows */
.policy-hero-title {
  font-size: clamp(1.45rem, 0.85rem + 2.4vw, 2.75rem);
  min-width: 0;
}
.policy-hero-title .hero-line {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .policy-intro {
    margin-bottom: 2rem;
    padding-bottom: 1.45rem;
  }
  .policy-content {
    gap: 1.75rem;
  }
  .policy-block {
    padding: 1.45rem 0 1.55rem;
  }
  .policy-group-blocks .policy-block:first-child {
    padding-top: 0.75rem;
  }
  .policy-content h2 {
    font-size: clamp(1.12rem, 4.2vw, 1.3rem);
  }
  .policy-content li {
    padding: 0.7rem 1rem 0.7rem 1.9rem;
  }
  .policy-hero-title .hero-line {
    white-space: normal;
  }
  .form-section-title {
    white-space: normal;
    text-overflow: unset;
    overflow: visible;
  }
}

/* Inner-page section rhythm when no explicit modifier */
main > .section:not(.process):not(.service-focus):not(.section--soft):not(.section--surface):not(.section--plain) {
  border-top-color: rgba(230, 225, 239, 0.6);
}

main > .section:not(.process):not(.service-focus):nth-of-type(even) {
  background: rgba(240, 236, 246, 0.28);
}

main > .section:not(.process):not(.service-focus):nth-of-type(odd) {
  background: rgba(253, 252, 254, 0.35);
}

/* Explicit modifiers always win */
main > .section.section--soft { background: rgba(240, 236, 246, 0.45); }
main > .section.section--plain { background: transparent; }
main > .section.section--surface { background: rgba(253, 252, 254, 0.72); }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.75rem 0 2rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--lavender-wash) 100%);
}

/* Desktop: Explore · Services · Contact · Social — social col wide enough for one icon row */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1.25fr);
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  row-gap: 2.25rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

/* Columns stack links cleanly under aligned headings */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.85rem;
  padding: 0;
  line-height: 1.3;
}

/* Footer text links — sentence case; social icons excluded */
.footer-col a:not(.social-link) {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-muted);
  padding: 0.28rem 0;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  line-height: 1.4;
  transition: color 0.25s var(--ease);
}

/* Non-link footer lines (e.g. AI coming soon) */
.footer-col .footer-note {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-faint);
  padding: 0.28rem 0;
  line-height: 1.4;
}
.footer-col .footer-note em {
  font-style: normal;
  color: var(--violet);
  font-weight: 600;
}

.footer-col a:not(.social-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.12rem;
  width: 0;
  height: 0.5px;
  min-height: 0.5px;
  max-height: 0.5px;
  border: none;
  background-color: currentColor;
  transform: none;
  transition: width 0.45s var(--ease);
  pointer-events: none;
  opacity: 0.9;
}

.footer-col a:not(.social-link):hover {
  color: var(--ink-strong);
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.footer-col a:not(.social-link):hover::after {
  width: 100%;
  height: 0.5px;
  max-height: 0.5px;
}

.footer-col a:not(.social-link):active {
  color: var(--ink-strong);
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.footer-col a:not(.social-link):active::after {
  width: 0;
  transition: none;
}

.footer-col a:not(.social-link):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Social column: all icons on one line with even spacing */
/* Social column — same size & hover as contact page social icons */
.footer-col--social {
  max-width: none;
  min-width: 0;
  width: 100%;
}
.footer-col--social .social-row {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  /* gap set with .contact-social-block .social-row — keep in sync */
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.footer-col--social .social-row::-webkit-scrollbar {
  display: none;
}
.footer-col--social .social-link {
  /* Same size/spacing as contact page social icons */
  padding: 0.35rem;
  flex: 0 0 auto;
  flex-shrink: 0;
  border-radius: 10px;
  background: transparent !important;
  color: #5c6370;
  transition: color 0.2s ease;
}
.footer-col--social .social-link:hover,
.footer-col--social .social-link:focus-visible,
.footer-col--social .social-link:active {
  background: transparent !important;
}
/* Brand colour on hover only — same as contact page */
.footer-col--social .social-link--instagram:hover,
.footer-col--social .social-link--instagram:focus-visible {
  color: #E4405F;
}
.footer-col--social .social-link--linkedin:hover,
.footer-col--social .social-link--linkedin:focus-visible {
  color: #0A66C2;
}
.footer-col--social .social-link--x:hover,
.footer-col--social .social-link--x:focus-visible {
  color: #000000;
}
.footer-col--social .social-link--facebook:hover,
.footer-col--social .social-link--facebook:focus-visible {
  color: #1877F2;
}
.footer-col--social .social-link--youtube:hover,
.footer-col--social .social-link--youtube:focus-visible {
  color: #FF0000;
}
.footer-col--social .social-link--pinterest:hover,
.footer-col--social .social-link--pinterest:focus-visible {
  color: #E60023;
}

.footer-bottom .tagline,
.tagline {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Tagline casing (size handled in .hero-title when used in heroes) */
.display.tagline-display,
h1.display.tagline-display {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* ---- Reveal animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* Policy / legal blocks must never stay invisible if JS is slow or blocked */
.policy-section .policy-intro,
.policy-section .policy-content,
.policy-section .policy-block,
.policy-section .policy-group {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .service-panel { animation: none; }
  .nav-links a::after,
  .mobile-nav a::after {
    transition: none;
  }
  .nav-links a:hover::after,
  .mobile-nav a:hover::after,
  .footer-col a:not(.social-link):hover::after {
    width: 100%;
  }
  .mobile-nav {
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s;
  }
  body.nav-drawer-open::before {
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Responsive ---- */

/* Tighten desktop nav before it gets crowded (header only — not the drawer) */
@media (max-width: 1180px) {
  .nav-links {
    gap: 0.4rem 0.85rem;
  }
  .nav-links a {
    font-size: max(0.65rem, calc(var(--text-nav) - 0.04rem));
    letter-spacing: 0.05em;
    padding: 0.35rem 0.28rem;
  }
  .site-header .logo-mark {
    width: 26px;
    height: 26px;
  }
}

/* Switch to hamburger so header never clusters */
@media (max-width: 980px) {
  .nav-links {
    display: none;
  }
  .menu-toggle {
    display: flex;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .site-header .logo-mark {
    width: 26px;
    height: 26px;
  }
}

/* Tablet: stack two-column layouts */
@media (max-width: 960px) {
  .section {
    padding: clamp(3.25rem, 8vw, 5.5rem) 0;
  }
  .section-sm {
    padding: clamp(2.5rem, 6vw, 3.75rem) 0;
  }
  .section-header {
    margin-bottom: 2rem;
  }

  .hero-grid,
  .about-teaser-grid,
  .service-panel,
  .service-block,
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .service-block:nth-of-type(even) .service-block-aside,
  .service-block:nth-of-type(even) .service-block-media,
  .service-block:nth-child(even) .service-block-media { order: 0; }
  .service-tabs {
    overflow-x: visible;
    flex-wrap: wrap;
  }
  .service-tab {
    flex: 1 1 auto;
    min-width: min(100%, 8.5rem);
    min-height: 2.6rem;
    font-size: 0.8rem;
    padding: 0.6rem 0.85rem;
  }
  .service-jump a {
    font-size: 0.78rem;
    padding: 0.5rem 0.8rem;
    min-height: 2.5rem;
  }
  .service-block-media {
    aspect-ratio: 16 / 10;
    max-width: 100%;
  }
  .hero-visual,
  .page-hero .hero-visual {
    aspect-ratio: 16 / 10;
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
    min-height: 0;
  }
  .hero-copy,
  .page-hero .hero-copy {
    text-align: left;
    max-width: 40rem;
  }
  /* Full-width hero copy on tablet: prefer one line */
  .hero-title .display,
  .page-hero .hero-title .display:not(.tagline-display) {
    font-size: clamp(1.2rem, 0.7rem + 2.4vw, 2.5rem);
  }
  .hero-title .display.tagline-display {
    font-size: clamp(0.95rem, 0.45rem + 2.1vw, 2.1rem);
  }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }

  .cta-actions {
    width: 100%;
  }

  .site-footer {
    padding: 3.25rem 0 1.85rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2.25rem;
    margin-bottom: 2.15rem;
  }
  .footer-col--social .social-row {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 2rem, var(--max));
  }
  .section {
    padding: clamp(2.75rem, 9vw, 4.25rem) 0;
  }
  .section-header {
    margin-bottom: 1.65rem;
  }
  .section-header .lead {
    font-size: var(--text-base);
  }

  .service-tabs {
    gap: 0.45rem;
  }
  .service-tab {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 0;
    min-height: 2.65rem;
    justify-content: center;
    text-align: center;
  }
  .service-jump {
    gap: 0.45rem;
  }
  .service-jump a {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 0;
    min-height: 2.65rem;
    text-align: center;
  }
  .service-block {
    padding: 1.85rem 0;
    gap: 1.25rem;
  }
  .service-block-copy .eyebrow {
    font-size: clamp(0.95rem, 2.8vw, 1.1rem);
    margin-bottom: 0.75rem;
  }
  .service-block-copy h2.display.display--sm {
    font-size: clamp(1.35rem, 4.6vw, 1.85rem);
  }
  .service-block-lead {
    font-size: var(--text-base);
  }
  .service-block .service-list li {
    font-size: 0.92rem;
  }
  .service-block-media {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }
  .service-block-media .big-icon {
    width: 46px;
    height: 46px;
    left: 0.75rem;
    bottom: 0.75rem;
  }

  .mobile-nav {
    width: min(64vw, 236px);
    max-width: 100%;
    top: 0;
    bottom: 0;
    padding: calc(var(--nav-h) + 0.9rem) 1.1rem 1.35rem 1.9rem;
  }
  .mobile-nav a {
    font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.14rem);
    padding: 0.65rem 0.35rem;
    margin-left: 0;
    min-height: 2.8rem;
    width: auto;
  }
  /* Same interaction as desktop on touch / tablet */
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    color: var(--ink-strong);
    background: transparent !important;
  }
  .mobile-nav a:hover::after,
  .mobile-nav a.active:hover::after {
    width: calc(100% - 0.7rem);
  }
  .mobile-nav a.active,
  .mobile-nav a:active,
  .mobile-nav a.active:active {
    color: var(--ink-strong);
    background: transparent !important;
  }
  .mobile-nav a.active::after,
  .mobile-nav a:active::after {
    width: 0;
  }

  .blog-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .blog-list-item {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }
  .blog-list-thumb {
    min-height: 120px;
    aspect-ratio: 16 / 9;
  }
  .stats-row {
    gap: 0.75rem;
    padding: 1.5rem 0;
  }
  .stat {
    padding: 0.9rem 0.6rem;
    min-height: 5rem;
  }
  .stat strong {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }
  .stat span {
    font-size: 0.8rem;
    max-width: none;
  }

  .cta-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .cta-inner h2 {
    max-width: none;
  }
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .cta-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Mid phones / narrow tablets: long heroes may need two lines */
  .hero,
  .page-hero {
    padding: clamp(2rem, 7vw, 3.25rem) 0;
  }
  .hero-title {
    align-items: flex-start;
  }
  .hero-title-icon {
    margin-top: 0.12em;
  }
  .hero-title .display,
  .hero-title .display.tagline-display,
  .page-hero .hero-title .display:not(.tagline-display) {
    white-space: normal;
    text-wrap: balance;
  }
  .hero-title .display.tagline-display {
    font-size: clamp(1rem, 3.6vw, 1.45rem);
  }
  .hero-title .display.hero-title-lines .hero-line,
  .page-hero .hero-line {
    white-space: normal;
  }
  .hero-details {
    gap: 0.4rem;
  }
  .hero-detail {
    font-size: 0.76rem;
    padding: 0.38rem 0.7rem;
  }
  .hero-float {
    top: 0.65rem;
    right: 0.65rem;
    font-size: 0.7rem;
    padding: 0.38rem 0.6rem;
    max-width: calc(100% - 1.3rem);
  }
  .section-header .display {
    max-width: 100%;
  }
  .contact-layout {
    gap: 1.5rem;
  }
  .contact-form-title {
    font-size: clamp(1.25rem, 4.5vw, 1.45rem);
  }
  .contact-aside h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  }
  .join-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .join-form-actions .btn {
    width: 100%;
    white-space: normal;
  }
  .join-form-aside {
    max-width: none;
  }
  .skill-grid {
    gap: 0.45rem;
  }
  .skill-chip {
    min-height: 2.55rem;
    font-size: 0.82rem;
  }
  .faq-question {
    font-size: 0.98rem;
    gap: 0.75rem;
    padding: 1.05rem 0;
  }
  .faq-answer-inner {
    font-size: 0.92rem;
    padding-bottom: 1.15rem;
  }
  .article h1 {
    font-size: clamp(1.55rem, 6.5vw, 2.1rem);
  }
  .article-body h2 {
    font-size: 1.25rem;
  }
  .value-card {
    padding: 1.25rem 1.15rem;
  }
  .process-step {
    padding: 1.25rem 1.1rem;
  }

  /* Mobile: stack columns; tighter link lists under Explore / Services / Contact */
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    row-gap: 1.35rem;
    margin-bottom: 1.35rem;
  }
  .footer-col {
    gap: 0;
  }
  .footer-col h4 {
    margin-bottom: 0.4rem;
  }
  .footer-col a:not(.social-link) {
    padding: 0.12rem 0;
    min-height: 0;
    line-height: 1.35;
    display: inline-block;
  }
  .footer-col .footer-note {
    padding: 0.12rem 0;
    line-height: 1.35;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding-top: 1.25rem;
  }
  .tech-tag {
    font-size: 0.74rem;
    padding: 0.3rem 0.55rem;
  }
}

@media (max-width: 480px) {
  .container { width: min(100% - 1.5rem, var(--max)); }
  .container.policy-wrap,
  .policy-wrap {
    width: min(100% - 1.75rem, calc(var(--max) - 2rem));
  }
  .section {
    padding: clamp(2.35rem, 10vw, 3.5rem) 0;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .hero-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    min-height: 2.85rem;
  }
  .btn {
    white-space: normal;
    text-align: center;
    padding: 0.8rem 1.15rem;
  }

  .mobile-nav {
    width: min(66vw, 228px);
    max-width: 100%;
    top: 0;
    bottom: 0;
    padding: calc(var(--nav-h) + 0.85rem) 1rem 1.25rem 1.85rem;
  }
  .mobile-nav a {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin-left: 0;
    width: auto;
    min-height: 2.85rem;
    padding: 0.65rem 0.35rem;
  }
  .menu-toggle {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .site-header .logo-mark {
    width: 28px;
    height: 28px;
  }

  /*
    Phone: allow two-line hero titles when one line would be too small / overflow.
    Icon aligns to the first line; text balanced.
  */
  .hero-title {
    align-items: flex-start;
    gap: 0.45rem;
  }
  .hero-title-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 7px;
    margin-top: 0.12em;
  }
  .hero-title-icon svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .hero-title .display {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(1.15rem, 5.2vw, 1.55rem);
    line-height: 1.22;
  }
  .hero-title .display.tagline-display {
    font-size: clamp(0.95rem, 4.2vw, 1.25rem);
    letter-spacing: 0.02em;
  }
  .hero-title .display.hero-title-lines {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
  }
  .hero-title .display.hero-title-lines .hero-line {
    white-space: normal;
  }
  .hero-copy .lead {
    font-size: 0.975rem;
  }
  .hero-visual,
  .page-hero .hero-visual {
    border-radius: 14px;
    aspect-ratio: 4 / 3;
  }
  .hero-visual-inner {
    padding: 0.75rem;
  }
  .hero-visual-card {
    padding: 0.75rem 0.85rem;
    max-width: min(100%, 240px);
    gap: 0.55rem;
  }
  .hero-visual-card .card-icon {
    width: 30px;
    height: 30px;
  }
  .hero-visual-card strong {
    font-size: 0.92rem;
  }
  .hero-visual-card span {
    font-size: 0.72rem;
  }

  .service-jump a {
    flex: 1 1 100%;
    font-size: 0.8rem;
  }
  .service-tab {
    flex: 1 1 100%;
    font-size: 0.82rem;
  }
  .service-infographic-steps {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 0.5rem;
  }
  .service-block-copy .eyebrow {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
  }
  .service-block-copy h2.display.display--sm {
    font-size: clamp(1.28rem, 5.2vw, 1.55rem);
  }
  .service-block .btn {
    width: 100%;
    white-space: normal;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 1.35rem 0;
  }
  .stat {
    padding: 0.85rem 0.5rem;
    border-radius: 12px;
    min-height: 4.75rem;
  }
  .form-section {
    padding: 1rem 0.9rem 1.15rem;
    border-radius: 12px;
  }
  .field label {
    font-size: 0.8rem;
  }
  .file-upload-ui {
    padding: 0.9rem;
    gap: 0.7rem;
  }
  .file-upload-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  .phone-field {
    grid-template-columns: minmax(4.75rem, 5.75rem) 1fr;
  }

  .footer-col a:not(.social-link) {
    font-size: 0.82rem;
    padding: 0.1rem 0;
    min-height: 0;
    line-height: 1.3;
  }
  .footer-col h4 {
    margin-bottom: 0.35rem;
  }
  .footer-col {
    gap: 0;
  }
  .footer-col--social .social-row {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .footer-col--social .social-link {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }
  .footer-col--social .social-link svg {
    width: 24px;
    height: 24px;
  }
  .blog-card-body {
    padding: 1.1rem 1.05rem 1.2rem;
  }
  .blog-card-body h3 {
    font-size: 1.02rem;
  }
  .caps-inner .display {
    max-width: 12em;
    font-size: clamp(1.15rem, 5vw, 1.4rem);
  }
}

/* Extra-small phones */
@media (max-width: 360px) {
  .container {
    width: min(100% - 1.25rem, var(--max));
  }
  .stats-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .stat {
    text-align: left;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
  }
  .stat:last-child {
    border-bottom: none;
  }
  .service-infographic-steps {
    grid-template-columns: 1fr;
  }
  .hero-detail {
    width: 100%;
    justify-content: flex-start;
  }
  .mobile-nav {
    width: min(68vw, 220px);
    max-width: 100%;
  }
  .mobile-nav a {
    font-size: 1rem;
  }
  .site-header .logo-mark {
    width: 28px;
    height: 28px;
  }
}

/* Safe areas (notched phones / home indicator) — fixed UI only */
@supports (padding: max(0px)) {
  .site-header .container.nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .mobile-nav {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  }
}




/* SEO utilities — screen-reader only (must not affect page top layout) */
.seo-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--ink, #1a1d26);
  color: var(--white, #fff);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease, ease);
  box-shadow: 0 8px 24px rgba(26, 29, 38, 0.16);
}
.seo-skip-link:focus,
.seo-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent, #5b5fcf);
  outline-offset: 2px;
}
/* Keep breadcrumbs for SEO/a11y without painting at top of page */
.seo-breadcrumbs,
.seo-breadcrumbs.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.seo-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.related-articles {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line, rgba(255,255,255,0.1));
}
.related-articles ul {
  margin: 1rem 0 0;
  padding-left: 1.15rem;
}
.related-articles li {
  margin: 0.4rem 0;
}


/* ============================================================
   Theme: light / dark / system  + formal form polish
   ============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;
  /* Elevated charcoal — not pure black; readable contrast ladder */
  --lavender: #22252E;
  --lavender-mist: #1C1F28;
  --lavender-wash: #1A1D26;
  --lavender-deep: #6B7080;
  --bg: #161920;
  --bg-soft: #1E222C;
  --surface: #222632;
  --ink: #F0F1F4;
  --ink-strong: #FFFFFF;
  --ink-muted: #C2C6D0;
  --ink-faint: #9AA0AE;
  --line: #343A48;
  --line-strong: #4A5162;
  --accent: #C5CAD4;
  --accent-soft: #2C313C;
  --accent-hover: #E4E7ED;
  --accent-deep: #D0D4DC;
  --gold: #D4C48A;
  --gold-ink: #E8D9A8;
  --gold-soft: #2E2A1C;
  --gold-line: #5A5030;
  --teal: #7EBCB2;
  --teal-ink: #A0D4CC;
  --teal-soft: #1E2C2A;
  --teal-line: #3A504C;
  --coral: #D4A898;
  --coral-ink: #E8C0B0;
  --coral-soft: #2E2422;
  --coral-line: #5A443E;
  --violet: #B0ACC2;
  --violet-ink: #C8C4D8;
  --violet-soft: #282630;
  --violet-line: #484458;
  --green-soft: #1E2A24;
  --green-line: #3A4E42;
  --green-ink: #90C4A0;
  --sky: #8EB0C4;
  --sky-ink: #AEC8D8;
  --sky-soft: #1E2830;
  --sky-line: #3A4A56;
  --rose: #C4A8B4;
  --rose-ink: #D8C0CA;
  --rose-soft: #2C2428;
  --rose-line: #4E4048;
  --mint: #8CBEAE;
  --mint-ink: #A8D4C4;
  --mint-soft: #1E2C28;
  --mint-line: #3A5048;
  --amber: #D4BC70;
  --amber-ink: #E8D090;
  --amber-soft: #2E2818;
  --amber-line: #5A4C28;
  --indigo: #A0A4C4;
  --indigo-ink: #B8BCD4;
  --indigo-soft: #242632;
  --indigo-line: #404458;
  --dark: #12141A;
  --dark-muted: #A8AEBC;
  --success: #7AB894;
  /* Keep true light for buttons / icons that use --white as “paper” */
  --white: #F4F5F7;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.38), 0 20px 48px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(120, 135, 170, 0.1), transparent 52%),
    linear-gradient(180deg, #1A1D26 0%, var(--bg) 42%, #14171E 100%);
  color: var(--ink);
}

html[data-theme="dark"] .site-header {
  background: rgba(18, 20, 26, 0.88);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(18, 20, 26, 0.96);
  box-shadow: 0 1px 0 var(--line);
}
html[data-theme="dark"] .site-footer {
  background: linear-gradient(180deg, var(--surface) 0%, #101218 100%);
}
html[data-theme="dark"] .mobile-nav {
  background: linear-gradient(180deg, var(--surface) 0%, #14161c 100%);
  border-left-color: var(--line);
  border-bottom: none;
  box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body.nav-drawer-open .site-header {
  background: rgba(18, 20, 26, 0.96);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] body.nav-drawer-open::before {
  background: rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .menu-toggle:hover,
html[data-theme="dark"] .menu-toggle:active,
html[data-theme="dark"] .menu-toggle[aria-expanded="true"] {
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-theme="dark"] .menu-toggle[aria-expanded="true"] span {
  background: var(--ink);
}
html[data-theme="dark"] .btn-primary {
  background: #E8E9ED;
  color: #12141A;
}
html[data-theme="dark"] .btn-primary:hover {
  background: #F4F5F7;
  color: #0C0D10;
}
html[data-theme="dark"] .btn-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="dark"] .hero--home {
  background: linear-gradient(185deg, #181B24 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--about {
  background: linear-gradient(185deg, #161E1C 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--services {
  background: linear-gradient(185deg, #161A20 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--blog {
  background: linear-gradient(185deg, #1C1A16 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--join {
  background: linear-gradient(185deg, #1A1820 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--contact {
  background: linear-gradient(185deg, #1E1A18 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .page-hero--policy {
  background: linear-gradient(185deg, #181A22 0%, var(--bg) 75%, transparent 100%);
}
html[data-theme="dark"] .section--soft,
html[data-theme="dark"] main > .section.section--soft,
html[data-theme="dark"] main > .section:not(.process):not(.service-focus):nth-of-type(even) {
  background: rgba(26, 28, 36, 0.55);
}
html[data-theme="dark"] main > .section:not(.process):not(.service-focus):nth-of-type(odd),
html[data-theme="dark"] .section--surface,
html[data-theme="dark"] main > .section.section--surface {
  background: rgba(22, 24, 30, 0.4);
}
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .contact-form-panel,
html[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}
html[data-theme="dark"] .footer-col--social .social-link--x:hover,
html[data-theme="dark"] .footer-col--social .social-link--x:focus-visible {
  color: #FFFFFF;
}
html[data-theme="dark"] .value-card p,
html[data-theme="dark"] .card p {
  color: var(--ink-muted);
}

/* Reduce multicolour text accents site-wide */
.tech-tag:nth-child(n) {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink-muted) !important;
}
.process .eyebrow { color: var(--ink-muted) !important; }
.footer-col .footer-note em { color: var(--ink-muted) !important; font-weight: 500; }

/* Tone marks / icons: quieter */
.hi-mark,
.hero-title-icon,
.card-icon,
.service-panel-icon,
.big-icon,
.caps-icon,
.form-section-num {
  background: var(--accent-soft) !important;
  color: var(--ink-muted) !important;
  border-color: transparent !important;
}
.hi-mark svg,
.hero-title-icon svg,
.card-icon svg {
  stroke: currentColor;
  color: inherit;
}

/* ---- Formal forms ---- */
.join-form-wrap {
  max-width: 760px;
}
.join-form-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.join-form-header .display {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.01em;
}
.join-form-intro {
  margin-top: 0.5rem;
  max-width: 36rem;
  color: var(--ink-muted);
  font-size: 0.925rem;
  line-height: 1.55;
}
.join-form {
  gap: 1.5rem;
}
.form-section {
  padding: 1.5rem 1.5rem 1.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  position: relative;
}
.form-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  opacity: 0.85;
}
.form-section--consent {
  border-style: solid;
  background: var(--bg-soft);
}
.form-section--consent::before { display: none; }
.form-section-title {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.15rem;
  padding-left: 0.35rem;
}
.form-section-hint {
  margin: -0.55rem 0 1rem;
  padding-left: 0.35rem;
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.form-grid {
  gap: 1.1rem 1.25rem;
  padding-left: 0.15rem;
}
.field label,
.field .field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field textarea,
.field select {
  padding: 0.8rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: none;
  min-height: 2.85rem;
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ink-faint);
  box-shadow: 0 0 0 3px rgba(90, 95, 110, 0.12);
}
.skill-chip {
  border-radius: 8px;
  border-color: var(--line-strong);
  color: var(--ink-muted);
  background: var(--bg);
  font-weight: 500;
}
.skill-chip:has(input:checked),
.skill-chip.is-checked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
html[data-theme="dark"] .skill-chip:has(input:checked),
html[data-theme="dark"] .skill-chip.is-checked {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--bg);
}
.choice-card-body {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  padding: 0.9rem 1rem;
}
.choice-card input:checked + .choice-card-body {
  border-color: var(--ink-muted);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
.choice-card-body strong {
  color: var(--ink);
  font-weight: 600;
}
.choice-card-body span {
  color: var(--ink-muted);
  font-size: 0.82rem;
}
.file-upload-ui {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  padding: 1.25rem 1.15rem;
}
.file-upload.has-file .file-upload-ui {
  border-style: solid;
  border-color: var(--ink-faint);
}
.join-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.35rem;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.contact-aside {
  padding: 1.5rem 1.5rem 1.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.contact-aside h2 {
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
}
.contact-aside > p {
  color: var(--ink-muted);
  font-size: 0.925rem;
  margin-bottom: 1.25rem;
  max-width: 28rem;
}
.contact-meta {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.contact-meta > div {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.contact-meta > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.contact-meta span {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-meta a,
.contact-meta .contact-static {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  word-break: break-word;
}
.contact-form-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: none;
}
.contact-form-panel--join-style .join-form-header {
  margin-bottom: 1.5rem;
}
@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* Section alignment polish */
.section-header {
  max-width: 38rem;
}
.section-header .lead,
.hero-copy .lead {
  color: var(--ink-muted);
  max-width: 32rem;
}
.hero-copy {
  max-width: 36rem;
}
.hero-details {
  gap: 0.5rem 0.75rem;
}
.hero-detail {
  color: var(--ink-muted);
  border-color: var(--line);
  background: rgba(255,255,255,0.35);
}
html[data-theme="dark"] .hero-detail {
  background: rgba(255,255,255,0.03);
}

/* ---- Theme toggle (one box, segmented active cell) ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  margin: 0;
  overflow: hidden;
}
.theme-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.7;
  box-shadow: none;
  transform: none;
  position: relative;
  transition:
    color 0.18s var(--ease),
    opacity 0.18s var(--ease),
    background 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
/* Hairline separators between segments (hidden against active cell) */
.theme-toggle button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line-strong);
  opacity: 0.85;
  pointer-events: none;
}
.theme-toggle button[aria-pressed="true"] + button::before,
.theme-toggle button + button[aria-pressed="true"]::before {
  opacity: 0;
}
.theme-toggle__icon,
.theme-toggle button svg {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle button:hover {
  color: var(--ink);
  opacity: 0.95;
  background: transparent;
  box-shadow: none;
  transform: none;
}
/* Clicked / selected: filled segment, clearly segregated */
.theme-toggle button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink-strong);
  opacity: 1;
  box-shadow: 0 1px 2px rgba(28, 30, 36, 0.08);
  transform: none;
  z-index: 1;
}
html[data-theme="dark"] .theme-toggle button[aria-pressed="true"] {
  background: #2A2E38;
  color: #F4F5F7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.theme-toggle button:focus-visible {
  outline: 2px solid var(--ink-faint);
  outline-offset: 1px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.footer-bottom-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.25rem;
}
.footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-left: auto;
}
@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}
/* ============================================================
   Bajoria Consultancy — Final Footer Layout Fix
   ============================================================ */

.footer-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px 0 !important;
}

/* Neutralize the old wrapper containers so they don't break flex alignment */
.footer-bottom-center,
.footer-bottom-right,
.footer-bottom-meta {
    display: contents !important; /* Strips the container layout properties entirely */
}

/* Force three equal width layout boxes */
.footer-left, 
.footer-center, 
.footer-right {
    flex: 1 !important;
    display: flex !important;
    margin: 0 !important;
}

/* Precise item placement */
.footer-left {
    justify-content: flex-start !important;
}

.footer-center {
    justify-content: center !important;
}

.footer-right {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Mobile Responsive */
@media (max-width: 760px) {
    .footer-bottom {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .footer-left, 
    .footer-center, 
    .footer-right {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================================
   UI/UX polish (light) — site-wide consistency
   Quiet refinements only: rhythm, focus, hover, forms, cards.
   ============================================================ */

/* Text selection — matches quiet palette */
::selection {
  background: rgba(90, 95, 110, 0.16);
  color: var(--ink-strong);
}

/* Shared focus ring for interactive controls */
:where(
  .btn,
  .btn-ghost,
  .nav-links a,
  .mobile-nav a,
  .social-link,
  .service-tab,
  .blog-card,
  .blog-list-item,
  .theme-toggle button,
  .menu-toggle,
  a.logo
):focus-visible {
  outline: 2px solid rgba(90, 95, 110, 0.45);
  outline-offset: 3px;
}

/* Header: slightly clearer when scrolled (all pages) */
.site-header.is-scrolled {
  background: rgba(245, 244, 247, 0.88);
  border-bottom-color: rgba(210, 207, 216, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 6px 20px rgba(28, 30, 36, 0.05);
}

/* Nav links: calmer default; active page stays darkest */
.nav-links a,
.mobile-nav a {
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.nav-links a:hover,
.mobile-nav a:hover {
  color: var(--ink-strong);
}
.nav-links a.active,
.mobile-nav a.active,
.nav-links a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  color: var(--ink-strong) !important;
}

/* Section rhythm — consistent vertical padding across pages */
.section {
  padding: clamp(3.25rem, 6.5vw, 5.25rem) 0;
}
.section-header {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.85rem);
}
.section-header .lead {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  line-height: var(--leading-loose);
}

/* Hero: a little more air under the title + actions */
.hero .lead,
.page-hero .lead {
  margin-top: 0.85rem;
  max-width: 32rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.9rem;
  margin-top: 1.35rem;
}

/* Buttons: unified soft lift on hover */
.btn-primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 14px rgba(40, 44, 56, 0.14);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px rgba(40, 44, 56, 0.16);
}
.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: var(--ink-faint);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(28, 30, 36, 0.05);
}
.btn:active {
  transform: translateY(0) scale(0.99);
}

/* Cards / panels — consistent soft surface + quiet hover */
.value-card,
.card,
.blog-card,
.blog-list-item,
.service-panel,
.contact-form-panel,
.contact-card,
.faq-item,
.policy-block,
.form-section {
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease),
    background 0.28s var(--ease);
}

a.blog-card:hover,
a.blog-list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* FAQ / content blocks: even gap and readable measure */
.faq-item,
.policy-block {
  border-radius: var(--radius);
}

/* Forms — consistent field chrome site-wide */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field textarea,
.field select {
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s var(--ease);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--ink-faint);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink-muted);
  box-shadow: 0 0 0 3px rgba(90, 95, 110, 0.12);
  background: var(--surface);
}
.field-check {
  padding: 0.15rem 0;
  line-height: 1.5;
}

/* Form sections: subtle depth, same on join + contact */
.form-section,
.contact-form-panel {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 18px rgba(28, 30, 36, 0.03);
}
.form-section:focus-within,
.contact-form-panel:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 22px rgba(28, 30, 36, 0.05);
}

/* Footer: quieter top edge, even columns */
.footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(2.25rem, 4vw, 3rem);
}
.footer-grid {
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.footer-col a:not(.social-link):hover {
  color: var(--ink);
}
.social-link {
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.social-link:hover {
  transform: translateY(-1px);
}

/* Reveal: slightly subtler motion (feels less “template”) */
.reveal {
  transform: translateY(10px);
  transition-duration: 0.55s;
}

/* Service tabs / chips: calmer selected state */
.service-tab[aria-selected="true"],
.service-tab.is-active {
  box-shadow: 0 1px 2px rgba(28, 30, 36, 0.06);
}

/* CTA bands — consistent action row */
.cta-band .hero-actions,
.cta-actions,
.section .hero-actions {
  gap: 0.75rem 0.9rem;
}

/* Dark theme: keep polish coherent */
html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(18, 20, 26, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] ::selection {
  background: rgba(180, 185, 200, 0.28);
  color: #f5f6f8;
}
html[data-theme="dark"] a.blog-card:hover,
html[data-theme="dark"] a.blog-list-item:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .contact-form-panel {
  box-shadow: none;
}
html[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus {
  box-shadow: 0 0 0 3px rgba(160, 165, 180, 0.16);
  background: var(--surface);
}

/* Mobile: keep touch targets comfortable without layout jump */
@media (max-width: 760px) {
  .hero-actions,
  .cta-actions {
    width: 100%;
  }
  .hero-actions .btn,
  .cta-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 10.5rem);
  }
  .section-header {
    margin-bottom: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-secondary:hover,
  a.blog-card:hover,
  a.blog-list-item:hover,
  .social-link:hover {
    transform: none;
  }
}

/* ============================================================
   Surface blend — forms & sections sit in the page wash
   Soften boxed panels so contact/join/content do not float oddly.
   ============================================================ */

/* Page sections: continuous wash, no hard band edges */
.section {
  border-top-color: transparent;
}
.section--soft {
  background:
    linear-gradient(180deg, rgba(240, 236, 246, 0.28) 0%, rgba(245, 244, 246, 0.55) 45%, rgba(245, 244, 246, 0.2) 100%);
  border-top: 1px solid rgba(230, 225, 239, 0.45);
  border-bottom: 1px solid rgba(230, 225, 239, 0.35);
}
.section--surface {
  background:
    linear-gradient(180deg, rgba(253, 252, 254, 0.35) 0%, rgba(248, 247, 250, 0.5) 100%);
  border-top: 1px solid rgba(230, 225, 239, 0.4);
  border-bottom: 1px solid rgba(230, 225, 239, 0.3);
}
.section--plain {
  background: transparent;
  border-top: 1px solid rgba(230, 225, 239, 0.35);
}
/* Soft join from hero into first content section */
.page-hero + .section,
.hero + .section {
  border-top-color: transparent;
}

/* Contact / join: remove heavy outer “card” frames */
.contact-aside,
.contact-form-panel {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.contact-aside {
  padding-top: 0;
  padding-bottom: 0;
}
.contact-form-panel {
  padding: 0;
}
.contact-form-panel:focus-within {
  border: none !important;
  box-shadow: none !important;
}

/* Form fieldsets: blend with section instead of solid cards */
.form-section {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(210, 207, 216, 0.55) !important;
  border-radius: 12px;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.form-section:focus-within {
  border-color: rgba(180, 176, 190, 0.75) !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.4) !important;
}
.form-section::before {
  background: rgba(90, 95, 110, 0.22);
  opacity: 0.7;
  width: 2px;
  border-radius: 2px;
}
.form-section--consent {
  background: rgba(245, 244, 246, 0.45) !important;
  border-style: dashed !important;
  border-color: rgba(210, 207, 216, 0.65) !important;
}

/* Inputs sit in the same wash as the form, not a second solid layer */
.join-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.join-form .field textarea,
.join-form .field select,
.contact-form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-form-panel .field textarea,
.contact-form-panel .field select {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(200, 196, 208, 0.75);
  box-shadow: none;
}
.join-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.join-form .field textarea:hover,
.join-form .field select:hover,
.contact-form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.contact-form-panel .field textarea:hover,
.contact-form-panel .field select:hover {
  border-color: rgba(160, 156, 170, 0.85);
  background: rgba(255, 255, 255, 0.72);
}
.join-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.join-form .field textarea:focus,
.join-form .field select:focus,
.contact-form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.contact-form-panel .field textarea:focus,
.contact-form-panel .field select:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(120, 118, 132, 0.7);
  box-shadow: 0 0 0 3px rgba(90, 95, 110, 0.1);
}

/* Form header divider: soft fade instead of hard rule */
.join-form-header {
  border-bottom: 1px solid rgba(210, 207, 216, 0.55);
  margin-bottom: 1.65rem;
  padding-bottom: 1.1rem;
}

/* Contact meta rows: softer separators */
.contact-meta > div {
  border-bottom-color: rgba(210, 207, 216, 0.5);
}
.contact-social-block {
  border-top-color: rgba(210, 207, 216, 0.5);
}

/* Skill chips / file upload: quieter fill */
.skill-chip {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(200, 196, 208, 0.7);
}
.file-upload,
.file-upload-ui {
  background: transparent;
}

/* Content cards on soft sections: wash through instead of solid tiles */
.section--soft .value-card,
.section--surface .value-card,
.section--soft .card,
.section--surface .card {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(210, 207, 216, 0.5);
  box-shadow: none;
}
.section--soft .blog-card,
.section--surface .blog-card,
.section--soft .blog-list-item,
.section--surface .blog-list-item {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(210, 207, 216, 0.55);
  box-shadow: none;
}

/* FAQ / policy blocks: no floating slabs */
.faq-item {
  background: transparent;
  border-bottom-color: rgba(210, 207, 216, 0.55);
}
.policy-block,
.policy-group {
  background: transparent;
  border-color: rgba(210, 207, 216, 0.45);
  box-shadow: none;
}

/* Dark theme: same idea, quieter glass */
html[data-theme="dark"] .section--soft {
  background:
    linear-gradient(180deg, rgba(28, 30, 38, 0.55) 0%, rgba(18, 20, 26, 0.35) 100%);
  border-top-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .section--surface {
  background:
    linear-gradient(180deg, rgba(32, 34, 42, 0.45) 0%, rgba(20, 22, 28, 0.3) 100%);
  border-top-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .contact-aside,
html[data-theme="dark"] .contact-form-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .form-section {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .form-section:focus-within {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .form-section--consent {
  background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .join-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .join-form .field textarea,
html[data-theme="dark"] .join-form .field select,
html[data-theme="dark"] .contact-form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .contact-form-panel .field textarea,
html[data-theme="dark"] .contact-form-panel .field select {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .join-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="dark"] .join-form .field textarea:focus,
html[data-theme="dark"] .join-form .field select:focus,
html[data-theme="dark"] .contact-form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="dark"] .contact-form-panel .field textarea:focus,
html[data-theme="dark"] .contact-form-panel .field select:focus {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(160, 165, 180, 0.12);
}
html[data-theme="dark"] .section--soft .value-card,
html[data-theme="dark"] .section--surface .value-card,
html[data-theme="dark"] .section--soft .card,
html[data-theme="dark"] .section--surface .card,
html[data-theme="dark"] .section--soft .blog-card,
html[data-theme="dark"] .section--surface .blog-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Dark mode contrast — readable text, lifted surfaces, balanced images
   ============================================================ */

/* Text hierarchy stays clear on charcoal (not pure black void) */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .display,
html[data-theme="dark"] .heading-icon {
  color: var(--ink-strong);
}
html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .section-header .lead,
html[data-theme="dark"] .join-form-intro,
html[data-theme="dark"] .contact-aside > p,
html[data-theme="dark"] .blog-card-body p,
html[data-theme="dark"] .value-card p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .article-body,
html[data-theme="dark"] .faq-answer,
html[data-theme="dark"] .policy-block,
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .footer-note {
  color: var(--ink-muted);
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .contact-meta a,
html[data-theme="dark"] .contact-meta .contact-static {
  color: var(--ink);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .form-section-title,
html[data-theme="dark"] .contact-meta span,
html[data-theme="dark"] .contact-social-label,
html[data-theme="dark"] .footer-col h4 {
  color: var(--ink-faint);
}

/* Nav links — same hover/click model in dark mode (header + drawer) */
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .mobile-nav a {
  color: var(--ink-muted);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .mobile-nav a:hover,
html[data-theme="dark"] .nav-links a.active:hover,
html[data-theme="dark"] .mobile-nav a.active:hover {
  color: var(--ink-strong) !important;
  background: transparent !important;
}
html[data-theme="dark"] .nav-links a.active,
html[data-theme="dark"] .mobile-nav a.active,
html[data-theme="dark"] .nav-links a:active,
html[data-theme="dark"] .mobile-nav a:active,
html[data-theme="dark"] .nav-links a.active:active,
html[data-theme="dark"] .mobile-nav a.active:active {
  color: var(--ink-strong) !important;
  background: transparent !important;
}
html[data-theme="dark"] .nav-links a.active::after,
html[data-theme="dark"] .mobile-nav a.active::after,
html[data-theme="dark"] .nav-links a:active::after,
html[data-theme="dark"] .mobile-nav a:active::after {
  width: 0 !important;
}
html[data-theme="dark"] .nav-links a:hover::after,
html[data-theme="dark"] .mobile-nav a:hover::after,
html[data-theme="dark"] .nav-links a.active:hover::after,
html[data-theme="dark"] .mobile-nav a.active:hover::after {
  width: calc(100% - 0.7rem) !important;
  background-color: currentColor;
  opacity: 1;
}
html[data-theme="dark"] .footer-col a:not(.social-link):hover {
  color: var(--ink-strong);
}

/* Secondary buttons keep edge on dark */
html[data-theme="dark"] .btn-secondary {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-strong);
  border-color: var(--ink-faint);
}
html[data-theme="dark"] .btn-primary {
  background: #E8EAEF;
  color: #161920;
}
html[data-theme="dark"] .btn-primary:hover {
  background: #F5F6F8;
  color: #12141A;
}
html[data-theme="dark"] .btn-ghost {
  color: var(--accent-hover);
}

/* Images: lift slightly so they do not sink into black */
html[data-theme="dark"] .hero-visual img,
html[data-theme="dark"] .page-hero .hero-visual img,
html[data-theme="dark"] .service-block-media img,
html[data-theme="dark"] .blog-card img,
html[data-theme="dark"] .blog-list-thumb img,
html[data-theme="dark"] .article-body img,
html[data-theme="dark"] .about-media img,
html[data-theme="dark"] main img:not(.logo-mark) {
  filter: brightness(1.06) contrast(1.04) saturate(1.02);
  opacity: 1;
}
html[data-theme="dark"] .hero-visual,
html[data-theme="dark"] .page-hero .hero-visual,
html[data-theme="dark"] .service-block-media,
html[data-theme="dark"] .blog-list-thumb {
  background: var(--bg-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Header logo plate stays light for contrast */
html[data-theme="dark"] .site-header .logo-mark {
  background: #F4F5F7;
  opacity: 1;
  filter: none;
}

/* Social marks: grey default, brand on hover — never pure black icons on dark */
html[data-theme="dark"] .social-link {
  color: #B0B6C2;
}
html[data-theme="dark"] .social-link--x:hover,
html[data-theme="dark"] .social-link--x:focus-visible,
html[data-theme="dark"] .footer-col--social .social-link--x:hover,
html[data-theme="dark"] .footer-col--social .social-link--x:focus-visible {
  color: #F0F1F4;
}

/* Process / dark bands: keep text light on charcoal, not crushed */
html[data-theme="dark"] .process {
  background: #1A1E28;
  color: var(--ink);
}
html[data-theme="dark"] .process .display,
html[data-theme="dark"] .process h3,
html[data-theme="dark"] .process .process-step h3 {
  color: var(--ink-strong);
}
html[data-theme="dark"] .process p,
html[data-theme="dark"] .process .muted,
html[data-theme="dark"] .process .eyebrow {
  color: var(--ink-muted) !important;
}

/* Tech tags / chips readable */
html[data-theme="dark"] .tech-tag:nth-child(n) {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--ink-muted) !important;
}
html[data-theme="dark"] .skill-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-muted);
}

/* FAQ questions */
html[data-theme="dark"] .faq-question,
html[data-theme="dark"] .faq-item button {
  color: var(--ink);
}

/* Placeholders */
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: var(--ink-faint);
  opacity: 0.9;
}

/* Theme toggle — dark mode keeps the outer box + active segment */
html[data-theme="dark"] .theme-toggle {
  border-color: var(--line-strong);
  background: rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .theme-toggle button {
  color: var(--ink-muted);
  opacity: 0.7;
}
html[data-theme="dark"] .theme-toggle button[aria-pressed="true"] {
  background: #2A2E38;
  color: #F4F5F7;
  opacity: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .theme-toggle button + button::before {
  background: rgba(255, 255, 255, 0.12);
}

/* Compact header logo on desktop; larger on small screens (media queries) */
.site-header .logo-mark {
  width: clamp(20px, 2.6vw, 24px) !important;
  height: clamp(20px, 2.6vw, 24px) !important;
  border-radius: 4px !important;
  transform: none !important;
  transition: width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.2s var(--ease) !important;
  filter: none !important;
}

.site-header .logo:hover .logo-mark {
  transform: none !important;
  opacity: 0.92;
}

/* Small screens: slightly larger than desktop, still compact */
@media (max-width: 980px) {
  .site-header .logo-mark {
    width: 26px !important;
    height: 26px !important;
  }
}
@media (max-width: 480px) {
  .site-header .logo-mark {
    width: 28px !important;
    height: 28px !important;
  }
}