/*
Theme Name: Ansh Shah
Theme URI: https://anshshah.com.au
Author: One08 Agency
Author URI: https://www.analytiqtech.com.au
Description: Personal-brand site for Ansh Shah, founder of One08 Agency and speaker on SEO and AI search. Native Elementor pages with a one-click importer (Tools > Ansh Shah Import). Bright, clean design in the One08 palette with Montserrat and Poppins.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ansh-shah
*/


/* =========================================================================
   1. DESIGN TOKENS — v3 "bright editorial" (light-first).
   White canvas carries the page; near-black bands punctuate it (stats,
   proof card, CTA, footer). Type system unchanged: Bebas Neue display,
   Inter 16px body, JetBrains Mono labels. One08 amber accent.
   ========================================================================= */
:root {
  /* --- Canvas (light-first, One08 neutrals) --- */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5f0;          /* warm paper band */
  --color-panel: #f7f5f0;           /* soft warm card fill on white */
  --color-ink: #121212;             /* One08 dark: bands, footer */
  --color-ink-panel: #1d1d1f;       /* panels on dark bands */

  /* --- Text (One08 greys) --- */
  --color-text: #555555;            /* 7.5:1 on white */
  --color-text-strong: #121212;
  --color-muted: #707070;           /* 4.9:1 on white */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #ababab;
  --color-on-dark-faint: #8f8f8f;

  /* --- Lines (One08 hairlines) --- */
  --color-border: #e3e0d9;
  --color-border-soft: #edebe4;
  --color-border-dark: rgba(255, 255, 255, 0.1);

  /* --- Accent: One08's global orange ---
     #fe9817 is for fills, bars and rules; orange TEXT on light surfaces
     uses --color-accent-ink (AA at small sizes). */
  --color-accent: #fe9817;
  --color-accent-hover: #ef8a06;
  --color-accent-bright: #ffa733;   /* orange text on dark bands */
  --color-accent-ink: #9a5600;      /* orange text on light (5.3:1 on band) */
  --color-accent-contrast: #121212;
  --color-accent-dim: rgba(254, 152, 23, 0.12);

  /* --- Typography --- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* label face */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --display-sm: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  --display-md: clamp(1.8rem, 1.45rem + 1.7vw, 2.7rem);
  --display-lg: clamp(2.3rem, 1.75rem + 2.6vw, 3.7rem);
  --display-xl: clamp(2.9rem, 2rem + 4.4vw, 5.4rem);

  /* --- Spacing / layout --- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;

  --content-width: 1120px;
  --content-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(18, 18, 18, 0.05);
  --shadow-md: 0 16px 40px rgba(18, 18, 18, 0.09);

  --transition: 200ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy alias kept for any straggling rules/templates. */
  --color-dark: var(--color-ink);
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  caret-color: var(--color-accent);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--display-lg); }
h2 { font-size: var(--display-md); }

h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { max-width: 64ch; }

a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding-left: 1.2em; }

strong, b { color: var(--color-text-strong); font-weight: 600; }

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

::selection { background: var(--color-accent); color: var(--color-accent-contrast); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--content-narrow); }

.section { padding-block: clamp(3.5rem, 7vw, var(--space-3xl)); }

/* Warm paper band on the white canvas. */
.section--alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

/* The secondary dark: a true ink band. */
.section--dark {
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4 { color: var(--color-on-dark); }
.section--dark .lede { color: var(--color-on-dark-muted); }

.section__head { max-width: var(--content-narrow); margin-bottom: var(--space-xl); }
.section__head h2 { margin-bottom: var(--space-s); }
.section__head .lede { margin-top: var(--space-xs); }

/* Mono label with an amber tick. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--color-accent);
}
.section--dark .eyebrow, .cta-band .eyebrow, .site-footer .eyebrow { color: var(--color-accent-bright); }

.lede { font-size: var(--text-md); line-height: 1.7; color: var(--color-text); }

.grid { display: grid; gap: var(--space-s); }
@media (min-width: 720px) {
  .grid { gap: var(--space-m); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) and (max-width: 719px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.82em 1.75em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--arrow::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--transition);
}
.btn--arrow:hover::after { transform: translateX(3px); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
}
.btn--accent:hover { background: var(--color-accent-hover); box-shadow: 0 8px 24px rgba(254, 152, 23, 0.35); }

.btn--dark { background: var(--color-ink); color: #fff; font-weight: 600; }
.btn--dark:hover { background: #000; }

.btn--ghost { background: transparent; color: var(--color-text-strong); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-text-strong); }
.section--dark .btn--ghost, .hero--dark .btn--ghost:where(.section--dark *) { color: #fff; border-color: var(--color-border-dark); }
.section--dark .btn--ghost:hover { border-color: #fff; }

/* =========================================================================
   5. HEADER / NAV — white glass, mono nav, real logo
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 68px;
}
.site-header.is-scrolled .site-header__inner { min-height: 60px; }

.site-brand--logo { display: flex; align-items: center; }
.site-brand--logo a { display: inline-flex; }
.site-brand--logo img {
  display: block;
  height: 40px;
  width: auto;
}
.site-header.is-scrolled .site-brand--logo img { height: 34px; }
.site-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
  text-decoration: none;
}
.site-brand span { color: var(--color-accent-ink); }

.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.primary-nav ul { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  padding-block: 0.5rem;
  transition: color var(--transition);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--color-accent-ink); }
/* Header CTA stays compact — and immune to the mono nav-link styling. */
.primary-nav .btn {
  padding: 0.7em 1.4em;
  font-size: 0.875rem;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.primary-nav .btn--accent { color: var(--color-accent-contrast); }
.primary-nav .btn--accent:hover { color: var(--color-accent-contrast); }

@media (min-width: 861px) {
  .primary-nav a:not(.btn) { position: relative; }
  .primary-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
  }
  .primary-nav a:not(.btn):hover::after,
  .primary-nav .current-menu-item > a::after { transform: scaleX(1); }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text-strong); transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-header__inner,
  .site-header.is-scrolled .site-header__inner { min-height: 60px; }
  .site-brand--logo img,
  .site-header.is-scrolled .site-brand--logo img { height: 30px; }
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: 60px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-s) var(--gutter) var(--space-l);
    transform: translateY(-120%);
    transition: transform 240ms ease;
    box-shadow: var(--shadow-md);
  }
  .primary-nav[data-open="true"] { transform: translateY(0); }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--color-border-soft); }
  .primary-nav a { display: block; padding: 0.9rem 0; font-size: var(--text-sm); }
  .primary-nav .btn { margin-top: var(--space-s); }
}

/* =========================================================================
   6. HERO — name-led poster on white
   ========================================================================= */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem); }

/* Light hero: clean white with a quiet orange wash behind the photo side.
   (.hero--dark class name kept for markup/template compatibility.) */
.hero--dark {
  background:
    radial-gradient(48% 85% at 86% 32%, rgba(254, 152, 23, 0.11), transparent 62%),
    var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-soft);
}
.hero--dark > .container { position: relative; z-index: 1; }
.hero--dark .hero__title { color: var(--color-text-strong); }
.hero--dark .hero__sub { color: var(--color-text); }
.hero--dark .btn--ghost { color: var(--color-text-strong); border-color: var(--color-border); }
.hero--dark .btn--ghost:hover { border-color: var(--color-text-strong); }

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 880px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* Giant condensed name: ink + amber, bar under the amber word. */
.hero__name {
  font-size: var(--display-xl);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-m);
}
.hero__name .accent {
  color: var(--color-accent);
  display: inline-block;
  line-height: inherit;
  padding-bottom: 0.08em;
  border-bottom: 0.05em solid var(--color-accent);
}

/* Inner-page hero headline. */
.hero__title {
  font-size: var(--display-lg);
  margin-bottom: var(--space-m);
  max-width: 16ch;
}
.hero__title .accent { color: var(--color-accent-ink); }

/* Mono tagline under the name. */
.hero__tag {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-m);
}

.hero__roles {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-s);
}

.hero__copy { align-self: center; }
.hero__sub { font-size: 1.0625rem; line-height: 1.75; max-width: 52ch; margin-bottom: var(--space-l); }
.hero__sub a {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.hero__sub a:hover { color: var(--color-accent-ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* Photo: a tilted print with a real soft shadow. */
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: 0 22px 48px rgba(18, 18, 18, 0.12);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 12px, #e9ebee 12px, #e9ebee 24px);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
  border-radius: var(--radius-lg);
  min-height: 100%;
  padding: var(--space-m);
}
.hero--dark .placeholder { background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 12px, #e9ebee 12px, #e9ebee 24px); }

/* =========================================================================
   7. STATS — condensed numerals + mono labels (lives on the ink band)
   ========================================================================= */
.stats { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { position: relative; padding-left: var(--space-s); border-left: 2px solid var(--color-accent); }
.stat::before { content: none; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}
.section--dark .stat__num { color: var(--color-on-dark); }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.45rem;
}
.section--dark .stat__label { color: var(--color-on-dark-faint); }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: center; }
.logo-strip img { height: 30px; width: auto; opacity: 0.55; filter: grayscale(1); transition: var(--transition); }
.logo-strip img:hover { opacity: 1; filter: grayscale(0); }

/* =========================================================================
   8. CARDS — white panels, hairline borders, amber hover
   ========================================================================= */
/* Soft filled panels: no outlines, generous padding, quiet lift on hover. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
a.card { text-decoration: none; color: inherit; }
a.card::after {
  content: "→";
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  color: var(--color-accent-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
a.card:hover, .card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  box-shadow: var(--shadow-md);
}
a.card:hover::after { opacity: 1; transform: translateX(0); }
/* Bare stroke icon in flow, no tile container. */
.card__icon {
  display: inline-flex;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-2xs);
}
.card h3 { font-size: 1.0625rem; }
.card p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text); }

/* On an off-white band the soft card is white with a whisper of depth. */
.section--alt .card { background: #ffffff; box-shadow: var(--shadow-sm); }
.section--alt .card:hover { box-shadow: var(--shadow-md); }

/* Cards sitting on an ink band. */
.section--dark .card {
  background: var(--color-ink-panel);
}
.section--dark .card:hover { background: #232326; box-shadow: none; }
.section--dark .card h3 { color: var(--color-on-dark); }
.section--dark .card p { color: var(--color-on-dark-muted); }
.section--dark .card__icon { color: var(--color-accent-bright); }

/* Slim section variant for photo strips. */
.section--slim { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Photo strip: three candid moments, slightly tilted prints (Harry-style). */
.photo-strip {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}
@media (min-width: 720px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
.photo-strip figure { margin: 0; }
.photo-strip figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-s);
  padding-left: 0.25rem;
}

/* A "print": rounded photo with soft depth. Crop via aspect + object-position. */
.shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-panel);
  box-shadow: 0 14px 34px rgba(18, 18, 18, 0.12);
  transition: transform var(--transition);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--45 { aspect-ratio: 4 / 5; }
.shot--sq { aspect-ratio: 1 / 1; }
.shot--34 { aspect-ratio: 3 / 4; }
.shot--43 { aspect-ratio: 4 / 3; }


/* Wide professional photo band: one strong image, straight and clean. */
.photo-band {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-panel);
  box-shadow: var(--shadow-md);
  aspect-ratio: 21 / 8;
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 719px) { .photo-band { aspect-ratio: 16 / 10; } }

/* Photo + text split (story teaser and similar sections). */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 820px) { .split { grid-template-columns: 0.85fr 1.15fr; } }
.split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-panel);
  box-shadow: var(--shadow-md);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   9. STORY / PULL-QUOTE / PILLARS
   ========================================================================= */
.story__body { max-width: var(--content-narrow); }
.story__body p { margin-bottom: var(--space-m); font-size: var(--text-base); }
.pullquote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--display-sm);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-text-strong);
  padding-top: var(--space-s);
  margin-block: var(--space-l);
  max-width: 26ch;
}
.pullquote::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 3px;
  background: var(--color-accent);
}
.section--dark .pullquote { color: var(--color-on-dark); }

.pillars { display: grid; gap: var(--space-s); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  text-align: center;
  padding: var(--space-m) var(--space-xs);
  background: var(--color-panel);
  border-radius: var(--radius-lg);
}
.section--alt .pillar { background: #ffffff; box-shadow: var(--shadow-sm); }
.pillar__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

/* =========================================================================
   10. ACCORDION
   ========================================================================= */
.accordion { max-width: var(--content-narrow); margin-inline: auto; border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-m) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-strong);
  transition: color var(--transition);
}
.accordion__trigger:hover { color: var(--color-accent-ink); }
.accordion__icon { flex: none; width: 20px; height: 20px; position: relative; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--color-accent); transition: var(--transition);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); opacity: 0; }
.accordion__panel { overflow: hidden; }
.accordion__panel[hidden] { display: none; }
.accordion__panel-inner { padding-bottom: var(--space-m); }
.accordion__panel-inner p { font-size: 0.9375rem; line-height: 1.7; margin-bottom: var(--space-xs); }

/* =========================================================================
   11. TESTIMONIALS
   ========================================================================= */
.quotes { display: grid; gap: var(--space-m); }
@media (min-width: 720px) { .quotes--2 { grid-template-columns: repeat(2, 1fr); } }
.quotes--single { max-width: var(--content-narrow); margin-inline: auto; }
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
}
.section--alt .quote { background: #ffffff; box-shadow: var(--shadow-sm); }
.quote::before {
  content: "\201C";
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.quote__text {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-strong);
  margin-bottom: var(--space-m);
}
.quotes--single .quote__text { font-size: var(--text-md); }
.quote__author { display: flex; align-items: center; gap: var(--space-s); margin-top: auto; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote__avatar--mono {
  display: grid;
  place-items: center;
  background: var(--color-accent-dim);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.quote__name { font-weight: 600; color: var(--color-text-strong); font-size: var(--text-sm); }
.quote__role { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* =========================================================================
   12. CTA BAND — ink, with a warm amber glow
   ========================================================================= */
.cta-section {
  background:
    radial-gradient(55% 130% at 50% 0%, rgba(254, 152, 23, 0.13), transparent 60%),
    var(--color-ink);
}
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--display-md); margin-bottom: var(--space-s); max-width: 22ch; margin-inline: auto; }
.cta-band p { margin-inline: auto; margin-bottom: var(--space-l); color: var(--color-on-dark-muted); }
.cta-band .hero__cta { justify-content: center; }

/* =========================================================================
   13. FORMS
   ========================================================================= */
.form { max-width: var(--content-narrow); display: grid; gap: var(--space-m); }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 600px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text-strong);
  padding: 0.8em 1em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 0 3px rgba(254, 152, 23, 0.22);
  outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.form-status { padding: var(--space-s) var(--space-m); border-radius: var(--radius); font-size: var(--text-sm); }
.form-status--ok { background: #e8f6ec; color: #17633a; }
.form-status--err { background: #fdecea; color: #a8271f; }
.contact-details { display: grid; gap: var(--space-s); }
.contact-details a { font-weight: 600; color: var(--color-text-strong); }
.contact-details strong {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* =========================================================================
   14. POSTS / EDITORIAL
   ========================================================================= */
.post-list { display: grid; gap: var(--space-m); }
@media (min-width: 720px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
.post-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-bottom: 0.3rem; }
.entry { max-width: var(--content-narrow); margin-inline: auto; }
.entry h2 { font-size: var(--display-sm); margin-top: var(--space-l); }
.entry h3 { margin-top: var(--space-m); }
.entry p, .entry ul, .entry ol { margin-bottom: var(--space-m); }
.entry img { border-radius: var(--radius-lg); margin-block: var(--space-m); }
.post-header { text-align: center; max-width: var(--content-narrow); margin-inline: auto; }
.post-header__meta { font-family: var(--font-mono); color: var(--color-muted); margin-top: var(--space-s); font-size: var(--text-xs); }

/* =========================================================================
   15. FOOTER — the ink anchor
   ========================================================================= */
.site-footer {
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-xl) var(--space-l);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-on-dark-muted); text-decoration: none; transition: color var(--transition); }
.site-footer a:hover { color: var(--color-accent-bright); }
.footer__grid { display: grid; gap: var(--space-l); margin-bottom: var(--space-l); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__logo { display: inline-block; margin-bottom: var(--space-s); }
.footer__logo img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent-bright);
  margin-bottom: var(--space-s);
}
.site-footer .footer__grid ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
/* Filled buttons keep their own ink even inside the grey-link footer. */
.site-footer .btn--accent, .site-footer .btn--accent:hover { color: var(--color-accent-contrast); }
.site-footer .btn--dark, .site-footer .btn--dark:hover { background: #fff; color: var(--color-ink); }
.footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-m);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-on-dark-faint);
}

.social { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.social__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--color-on-dark-muted);
  border: 1px solid var(--color-border-dark);
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.social__link:hover {
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Newsletter band (top of the footer, on ink) */
.footer__newsletter {
  padding-bottom: var(--space-l);
  margin-bottom: var(--space-l);
  border-bottom: 1px solid var(--color-border-dark);
}
.newsletter { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 820px) { .newsletter { grid-template-columns: 1fr 1fr; } }
.newsletter__intro h2 {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
  margin-bottom: var(--space-2xs);
}
.newsletter__sub { color: var(--color-on-dark-muted); max-width: 46ch; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.newsletter__form input[type="email"] {
  flex: 1 1 220px;
  font: inherit;
  font-size: var(--text-base);
  color: #fff;
  padding: 0.8em 1.1em;
  background: var(--color-ink-panel);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.newsletter__form input[type="email"]::placeholder { color: var(--color-on-dark-faint); }
.newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(254, 152, 23, 0.25);
}
.newsletter__form .btn { flex: 0 0 auto; }
.newsletter__form .form-status { flex: 1 1 100%; margin: 0; background: transparent; color: var(--color-on-dark-muted); padding-inline: 0; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   16. UTILITIES
   ========================================================================= */
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.text-center { text-align: center; }
[hidden] { display: none !important; }

/* =========================================================================
   17. BADGE / CHIPS / FEATURE CARD
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--color-accent-dim);
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-m);
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.section--dark .badge, .feature-card .badge {
  color: var(--color-accent-bright);
  background: rgba(254, 152, 23, 0.16);
}

.link-inline {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--color-accent-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-m); }
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  background: rgba(254, 152, 23, 0.16);
  color: var(--color-accent-bright);
}

/* The dark proof card — the strongest "dark as secondary" moment on the page. */
.feature-card {
  position: relative;
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(254, 152, 23, 0.12), transparent 60%),
    var(--color-ink);
  color: var(--color-on-dark-muted);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}
.feature-card__lead {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
  max-width: 30ch;
  margin-bottom: var(--space-m);
}
.feature-card__quote {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-on-dark-muted);
  max-width: 64ch;
}
.feature-card__author { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-l); }
.feature-card__author .quote__avatar--mono { background: rgba(254, 152, 23, 0.18); color: var(--color-accent-bright); }
.feature-card__name { font-weight: 600; color: var(--color-on-dark); font-size: var(--text-sm); }
.feature-card__role { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-on-dark-faint); }

/* =========================================================================
   18. MOTION / ANIMATION
   ========================================================================= */
@keyframes ansh-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__roles, .hero .badge,
.hero__name, .hero__tag,
.hero__title,
.hero__sub,
.hero__cta,
.hero__media {
  animation: ansh-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .badge, .hero__roles { animation-delay: 0.05s; }
.hero__media { animation-delay: 0.1s; }
.hero__name, .hero__title { animation-delay: 0.12s; }
.hero__tag   { animation-delay: 0.18s; }
.hero__sub   { animation-delay: 0.24s; }
.hero__cta   { animation-delay: 0.3s; }


.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

.stat.reveal { border-left-color: transparent; transition: opacity 0.55s, transform 0.55s, border-left-color 0.5s 0.2s; }
.stat.reveal.is-visible { border-left-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}


/* =========================================================================
   E. ELEMENTOR ADAPTER
   Maps the generated widget/section classes onto the design system above.
   ========================================================================= */

/* Resets: our spacing system drives the rhythm, not Elementor's defaults. */
.elementor-section > .elementor-container { padding-inline: var(--gutter); }
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; }
.elementor-widget:not(:last-child) { margin-bottom: 0; }
.elementor-section.section { padding-block: clamp(3.5rem, 7vw, var(--space-3xl)); }
.elementor-section.section--slim { padding-block: clamp(2rem, 4vw, 3.5rem); }
.elementor-section.head-only { padding-bottom: 0; }
.elementor-section.gap-top-none { padding-top: var(--space-l); }

/* ---------- Native header (sticky, logo / nav / CTA) ---------- */
.elementor-section.header-el {
  position: sticky; top: 0; z-index: 100;
  padding-block: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
}
.header-el > .elementor-container { align-items: center; }
.el-logo-col > .elementor-widget-wrap { justify-content: flex-start; }
.el-logo img { height: 40px !important; width: auto !important; }
.el-footer-logo img { height: 38px !important; width: auto !important; filter: brightness(0) invert(1); }
.el-nav-col > .elementor-widget-wrap { align-content: center; justify-content: center; }
.el-nav .elementor-icon-list-items { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
.el-nav .elementor-icon-list-item { margin: 0; padding: 0; }
.el-nav .elementor-icon-list-item:after { display: none; }
.el-nav .elementor-icon-list-text,
.el-nav a {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text);
  transition: color var(--transition);
}
.el-nav a:hover .elementor-icon-list-text { color: var(--color-accent-ink); }
.el-cta-col > .elementor-widget-wrap { align-content: center; }
.el-cta-col .elementor-button-wrapper { text-align: right; }
.el-header-btn .elementor-button { padding: 0.7em 1.4em; font-size: 0.875rem; }
@media (max-width: 767px) {
  .elementor-section.header-el { padding-block: 0.6rem; }
  .header-el > .elementor-container { flex-wrap: wrap; row-gap: 0.4rem; }
  .el-logo-col, .el-nav-col, .el-cta-col { width: 100%; }
  .el-logo { text-align: center; }
  .el-logo img { height: 30px !important; }
  .el-cta-col .elementor-button-wrapper { text-align: center; }
}

/* ---------- Native footer (ink) ---------- */
.elementor-section.footer-el { background: var(--color-ink); color: var(--color-on-dark-muted); }
.footer-el .elementor-widget-text-editor { color: var(--color-on-dark-muted); }
.elementor-section.footer-el--newsletter {
  padding-block: var(--space-xl) var(--space-l);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer-el--newsletter > .elementor-container { align-items: center; }
.ft-title-el .elementor-heading-title { color: #fff; font-size: var(--display-sm); }
.ft-title-el { margin-bottom: var(--space-2xs); }
.ft-muted-el { color: var(--color-on-dark-muted); max-width: 46ch; }
.el-vcenter > .elementor-widget-wrap { align-content: center; }
.elementor-section.footer-el--grid { padding-block: var(--space-l); }
.footer-el--grid > .elementor-container { align-items: start; }
.ft-bio-el { max-width: 42ch; margin-top: var(--space-s); }
.ft-label-el .elementor-heading-title {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-bright);
}
.ft-label-el { margin-bottom: var(--space-s); }
.ft-links-el .elementor-icon-list-items { display: grid; gap: 0.5rem; }
.ft-links-el .elementor-icon-list-item { margin: 0; padding: 0; }
.ft-links-el .elementor-icon-list-text, .ft-links-el a {
  color: var(--color-on-dark-muted); font-size: var(--text-sm); transition: color var(--transition);
}
.ft-links-el a:hover .elementor-icon-list-text { color: var(--color-accent-bright); }
.elementor-section.footer-el--bottom {
  padding-block: var(--space-m) var(--space-l);
}
.footer-el--bottom > .elementor-container { border-top: 1px solid var(--color-border-dark); padding-top: var(--space-m); }
.ft-fine-el, .ft-fine-el p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-on-dark-faint); }
.ft-fine-el--right { text-align: right; }
@media (max-width: 767px) { .ft-fine-el--right { text-align: left; } }
.ft-form-el .newsletter__form input[type="email"] { background: var(--color-ink-panel); color: #fff; border-color: var(--color-border-dark); }

/* Hero */
.elementor-section.hero-el {
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(48% 85% at 86% 32%, rgba(254, 152, 23, 0.11), transparent 62%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.hero-el > .elementor-container { align-items: center; }
.hero-copy-el .elementor-widget { margin-bottom: 0; }
.elementor-widget-heading.badge-el .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-ink); background: var(--color-accent-dim);
  padding: 0.55em 1.1em; border-radius: var(--radius-pill);
}
.badge-el { margin-bottom: var(--space-m); }
.badge-el .elementor-heading-title::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
}
.elementor-widget-heading.hero-name-el .elementor-heading-title {
  font-family: var(--font-display); font-size: var(--display-xl); font-weight: 800;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.015em;
  color: var(--color-text-strong);
}
.hero-name-el { margin-bottom: var(--space-m); }
.hero-name-el .accent {
  color: var(--color-accent); display: inline-block; line-height: inherit;
  padding-bottom: 0.08em; border-bottom: 0.05em solid var(--color-accent);
}
.elementor-widget-heading.hero-title-el .elementor-heading-title {
  font-family: var(--font-display); font-size: var(--display-lg); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text-strong); max-width: 16ch;
}
.hero-title-el { margin-bottom: var(--space-m); }
.hero-title-el .accent { color: var(--color-accent-ink); }
.herotag-el .elementor-heading-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-accent-ink);
}
.herotag-el { margin-bottom: var(--space-m); }
.hero-sub-el { font-size: 1.0625rem; line-height: 1.75; max-width: 52ch; margin-bottom: var(--space-l); }
.hero-sub-el a {
  color: var(--color-text-strong); text-decoration: underline;
  text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.hero-sub-el a:hover { color: var(--color-accent-ink); }
.elementor-widget.hero-media-el {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-bg-alt); box-shadow: 0 22px 48px rgba(18, 18, 18, 0.12);
}
.hero-media-el img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* Stats band */
.elementor-section.stats-el { background: var(--color-ink); }

.stats-el .elementor-column.stat-el > .elementor-widget-wrap {
  padding-left: var(--space-s); border-left: 2px solid var(--color-accent);
}
.elementor-widget-heading.stat-num-el .elementor-heading-title {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.8rem); letter-spacing: -0.01em; color: #fff;
}
.stat-label-el { margin-top: 0.45rem; }
.stat-label-el .elementor-heading-title {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-dark-faint);
}

/* Section heads */
.elementor-widget-heading.eyebrow-el .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-ink);
}
.eyebrow-el { margin-bottom: var(--space-s); }
.eyebrow-el .elementor-heading-title::before { content: ""; width: 18px; height: 2px; background: var(--color-accent); }
.elementor-widget-heading.eyebrow-el--dark .elementor-heading-title { color: var(--color-accent-bright); }
.sec-title-el { margin-bottom: var(--space-s); max-width: var(--content-narrow); }
.sec-lede-el { max-width: var(--content-narrow); }
.head-only .sec-lede-el { margin-bottom: 0; }

/* Grids and cards */
.grid-el > .elementor-container { align-items: stretch; }
.grid-el .elementor-column > .elementor-widget-wrap { height: 100%; }
.grid-el .elementor-column { padding: calc(var(--space-m) / 2); }
.elementor-column.card { background: none; }
.elementor-column.card > .elementor-widget-wrap {
  background: var(--color-panel); border-radius: var(--radius-lg);
  padding: var(--space-l);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.elementor-column.card:hover > .elementor-widget-wrap {
  transform: translateY(-3px); background: #fff; box-shadow: var(--shadow-md);
}
.section--alt .elementor-column.card > .elementor-widget-wrap { background: #fff; box-shadow: var(--shadow-sm); }
.section--alt .elementor-column.card:hover > .elementor-widget-wrap { box-shadow: var(--shadow-md); }
.section--dark .elementor-column.card > .elementor-widget-wrap { background: var(--color-ink-panel); }
.section--dark .elementor-column.card:hover > .elementor-widget-wrap { background: #232326; box-shadow: none; }
.card .elementor-widget.card__icon { margin-bottom: var(--space-2xs); color: var(--color-accent-ink); }
.section--dark .card .elementor-widget.card__icon { color: var(--color-accent-bright); }
.card .elementor-widget-heading .elementor-heading-title { font-size: 1.0625rem; }
.card .elementor-widget-text-editor { font-size: 0.9375rem; line-height: 1.7; margin-top: var(--space-xs); }
.card-cta-el > .elementor-widget-wrap { display: flex; align-items: center; padding: var(--space-m); }

/* Multi-row grids inside one band: rows carry no band borders of their own. */
.elementor-section.grid-row { padding-top: 0; padding-bottom: var(--space-s); border-top: 0; border-bottom: 0; }
.elementor-section.grid-row.band-end { padding-bottom: clamp(3.5rem, 7vw, var(--space-3xl)); border-bottom: 1px solid var(--color-border-soft); }
.elementor-section.head-only.section--alt { border-bottom: 0; }

/* Pillars */
.elementor-column.pillar > .elementor-widget-wrap {
  background: var(--color-panel); border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-xs); text-align: center;
}
.section--alt .elementor-column.pillar > .elementor-widget-wrap { background: #fff; box-shadow: var(--shadow-sm); }
.pillar-el .elementor-heading-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }

/* Photos */
.elementor-widget.photo-band-el {
  aspect-ratio: 21 / 8; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-panel); box-shadow: var(--shadow-md);
}
.photo-band-el img { width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 719px) { .elementor-widget.photo-band-el { aspect-ratio: 16 / 10; } }
.objpos-30 img { object-position: 50% 30%; }
.objpos-55 img { object-position: 50% 55%; }
.objpos-58 img { object-position: 50% 58%; }
.split-el > .elementor-container { align-items: center; }
.elementor-widget.split-media-el {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-panel); box-shadow: var(--shadow-md);
}
.split-media-el img { width: 100% !important; height: 100% !important; object-fit: cover; }
.shot-43-el { margin-top: var(--space-l); }
.elementor-widget.shot-43-el {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.shot-43-el img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* Story / pullquote */
.story-el { margin-bottom: var(--space-m); }
.pullquote-el { margin-block: var(--space-l); }
.pullquote-el .elementor-heading-title {
  position: relative; font-family: var(--font-display); font-size: var(--display-sm);
  font-weight: 700; line-height: 1.25; color: var(--color-text-strong);
  padding-top: var(--space-s); max-width: 26ch;
}
.pullquote-el .elementor-heading-title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: var(--color-accent);
}

/* Feature proof card: the boxed container becomes the ink card. */
.feature-card-el > .elementor-container {
  background: radial-gradient(70% 130% at 100% 0%, rgba(254, 152, 23, 0.12), transparent 60%), var(--color-ink);
  border-radius: var(--radius-xl); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md); color: var(--color-on-dark-muted);
}
.feature-card-el .elementor-widget-heading.badge-el .elementor-heading-title {
  color: var(--color-accent-bright); background: rgba(254, 152, 23, 0.16);
}
.fc-lead-el { margin-bottom: var(--space-m); }
.elementor-widget-heading.fc-lead-el .elementor-heading-title {
  font-family: var(--font-display); font-size: var(--display-sm); font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em; color: #fff; max-width: 30ch;
}
.feature-card-el .feature-card__quote { font-size: 0.9375rem; line-height: 1.75; max-width: 64ch; color: var(--color-on-dark-muted); }

/* CTA band */
.elementor-section.cta-el {
  background: radial-gradient(55% 130% at 50% 0%, rgba(254, 152, 23, 0.13), transparent 60%), var(--color-ink);
}
.cta-col > .elementor-widget-wrap { text-align: center; align-content: center; }
.cta-col .elementor-widget-heading.eyebrow-el .elementor-heading-title { color: var(--color-accent-bright); }
.elementor-widget-heading.cta-title-el .elementor-heading-title { color: #fff; }
.cta-title-el { margin-bottom: var(--space-s); }
.cta-lede-el { color: var(--color-on-dark-muted); max-width: 54ch; margin-inline: auto; margin-bottom: var(--space-l); }
.cta-col .elementor-widget-button .elementor-button-wrapper { text-align: center; }

/* Buttons */
.elementor-widget-button.btn-el .elementor-button, .elementor-widget-button.btn-el .elementor-button:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1;
  padding: 0.82em 1.75em; border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--color-accent); color: var(--color-accent-contrast);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.elementor-widget-button.btn-el .elementor-button:hover { transform: translateY(-1px); background: var(--color-accent-hover); color: var(--color-accent-contrast); box-shadow: 0 8px 24px rgba(254, 152, 23, 0.35); }
.elementor-widget-button.btn-el--dark .elementor-button { background: var(--color-ink); color: #fff; }
.elementor-widget-button.btn-el--dark .elementor-button:hover { background: #000; color: #fff; box-shadow: none; }
.elementor-widget-button.btn-el--ghost .elementor-button { background: transparent; color: var(--color-text-strong); border-color: var(--color-border); }
.elementor-widget-button.btn-el--ghost .elementor-button:hover { background: transparent; color: var(--color-text-strong); border-color: var(--color-text-strong); box-shadow: none; }
.btn-el--arrow .elementor-button-text::after { content: " \2192"; }

/* Accordion */
.accordion-el { max-width: var(--content-narrow); }
.accordion-el .elementor-accordion .elementor-accordion-item {
  border: 0; border-bottom: 1px solid var(--color-border);
}
.accordion-el .elementor-accordion .elementor-accordion-item:first-child { border-top: 1px solid var(--color-border); }
.accordion-el .elementor-accordion .elementor-tab-title {
  padding: var(--space-m) 0; font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 700; color: var(--color-text-strong);
}
.accordion-el .elementor-accordion .elementor-tab-title:hover,
.accordion-el .elementor-accordion .elementor-tab-title.elementor-active { color: var(--color-accent-ink); }
.accordion-el .elementor-accordion .elementor-accordion-icon { color: var(--color-accent); }
.accordion-el .elementor-accordion .elementor-tab-content {
  border: 0; padding: 0 0 var(--space-m); font-size: 0.9375rem; line-height: 1.7; color: var(--color-text);
}

/* Section head spacing to echo .section__head */
.head-only .eyebrow-el + .sec-title-el { margin-top: 0; }
.elementor-section.head-only .elementor-widget:last-child { margin-bottom: 0; }

/* Dark sections: real headings inherit via tag rules; fix muted copy. */
.elementor-section.section--dark .elementor-widget-text-editor { color: var(--color-on-dark-muted); }

/* Mobile: columns stack with breathing room. */



/* Elementor ships no CSS for nonstandard column widths; cover ours. */
@media (min-width: 768px) {
  .elementor-column.elementor-col-55 { width: 55%; }
  .elementor-column.elementor-col-45 { width: 45%; }
  .elementor-column.elementor-col-58 { width: 58%; }
  .elementor-column.elementor-col-42 { width: 42%; }
}

/* Header button stays compact on Elementor 4 markup. */
.elementor-widget-button.el-header-btn .elementor-button { padding: 0.7em 1.4em; font-size: 0.875rem; }


/* =========================================================================
   F. RESPONSIVE & SPACING (v1.3) — desktop column breathing, stacked
   mobile rhythm, Elementor-4-safe alignment (no internal wrappers).
   ========================================================================= */

/* Desktop/tablet: space between side-by-side columns via padding, not gap. */
@media (min-width: 768px) {
  .hero-el .elementor-column:first-child > .elementor-widget-wrap { padding-right: var(--space-xl); }
  .split-el .elementor-column:first-child > .elementor-widget-wrap { padding-right: var(--space-l); }
  .split-el .elementor-column:last-child > .elementor-widget-wrap { padding-left: var(--space-s); }
  .stats-el .elementor-column > .elementor-widget-wrap { margin-right: var(--space-m); }
  .footer-el--grid .elementor-column:first-child > .elementor-widget-wrap { padding-right: var(--space-xl); }
  .footer-el--newsletter .elementor-column:first-child > .elementor-widget-wrap { padding-right: var(--space-l); }
}

/* Alignment without Elementor's removed wrappers. */
.el-cta-col { text-align: right; }
.el-nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.el-nav li { margin: 0; padding: 0; }
.cta-col .elementor-widget-button, .cta-col .elementor-widget-html { text-align: center; }

/* Hero copy rhythm (safety margins, cheap on any markup). */
.hero-copy-el .elementor-widget + .elementor-widget { margin-top: var(--space-s); }
.hero-copy-el .badge-el + .elementor-widget,
.hero-copy-el .hero-name-el + .elementor-widget { margin-top: var(--space-m); }

/* Stacked mobile rhythm. */
@media (max-width: 767px) {
  .hero-el .elementor-column:not(:last-child),
  .split-el .elementor-column:not(:last-child),
  .footer-el--newsletter .elementor-column:not(:last-child),
  .footer-el--grid .elementor-column:not(:last-child) { margin-bottom: var(--space-l); }
  .grid-el .elementor-column { padding: calc(var(--space-s) / 2) 0; }
  .stats-el .elementor-column { width: 50% !important; }
  .stats-el .elementor-column:nth-child(-n+2) { margin-bottom: var(--space-l); }
  .stats-el .elementor-column > .elementor-widget-wrap { margin-right: var(--space-s); }
  .el-cta-col { text-align: center; }
  .el-nav ul { gap: 0.9rem 1.1rem; }
  .elementor-section.header-el { padding-block: 0.55rem; }
  .footer-el--bottom .ft-fine-el--right { text-align: left; }
  /* Section padding breathes a little less on phones. */
  .elementor-section.section { padding-block: clamp(2.75rem, 10vw, 4rem); }
}

/* Tablet: keep the hero readable when columns sit side by side. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-widget-heading.hero-name-el .elementor-heading-title { font-size: clamp(3rem, 7vw, 4.6rem); }
  .hero-el .elementor-column:first-child > .elementor-widget-wrap { padding-right: var(--space-l); }
}

/* Filler column in the last topics row stays invisible. */
.card-empty-el > .elementor-widget-wrap { background: none !important; box-shadow: none !important; }