:root {
  /* Color */
  --bg:            #F5F7F8;  /* page background — soft off-white, never pure white */
  --bg-elevated:   #FAFBFC;  /* contact-section "arrival" — slightly lifted, still off-white */
  --text-primary:  #171717;  /* headlines, body */
  --text-secondary:#5E6672;  /* subheadline, supporting text */
  --text-tertiary: #8B94A3;  /* small labels, footer */
  --accent:        #3B556D;  /* deep slate blue — links, dividers, form submit */
  --accent-hover:  #2E4456;  /* darker accent for slate-button hover */
  --cta-accent:        #3884C8;  /* vivid steel blue — primary CTA (Schedule an Intro Call); echoes engagement-framework numbered circles */
  --cta-accent-hover:  #2D6FAB;  /* darker steel blue for CTA hover */
  --rule:          #D8DCE0;  /* hairline dividers / input borders */
  --rule-soft:     #E4E7EA;  /* lighter hairline — within content groupings */
  --field-bg:      #FFFFFF;  /* form input background */

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --content-width: 720px;    /* single text column — body copy */
  --content-wide:  980px;    /* wider column — card grids & process steps */
  --page-max:      1280px;   /* outer page max width */

  --divider: rgba(59, 85, 109, 0.12);  /* accent at ~12% — section rules */

  /* Card surfaces — stronger, quiet definition (premium, not bulky) */
  --card-bg:      #FFFFFF;
  --card-border:  #D7DDE5;
  --card-shadow:        0 1px 2px rgba(23, 23, 23, 0.05), 0 8px 20px rgba(31, 45, 61, 0.06);
  --card-shadow-hover:  0 2px 4px rgba(23, 23, 23, 0.06), 0 16px 36px rgba(31, 45, 61, 0.10);

  /* Section panels — faint cool tint for the alternating block rhythm */
  --panel:        #EAEEF4;
  --panel-border: #D8DFE7;
  --panel-dark:   #2C4460;   /* softer deep slate blue — less heavy than near-black navy */
  --footer-bg:    #1A2530;   /* deep slate — closing footer */
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- Layout primitives ---- */
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}
.content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
/* Wider column for card grids / process steps, so multi-column layouts
   breathe while body copy stays in the narrower reading column. */
.content-wide {
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Links ---- */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 200ms ease;
}
a:hover { color: var(--accent-hover); }

/* ---- Focus visibility ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============ Header (Block 0) ============ */
.site-header {
  height: 72px;
  display: flex;
  align-items: center;
}
.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Header wordmark — transparent vector logo (crisp at any size, no box). */
.brand { display: block; height: 40px; width: auto; }
@media (max-width: 768px) { .brand { height: 34px; } }
/* ============ Primary navigation ============
   Three top-level items: Home, About (dropdown), Contact. Active page is
   marked via aria-current="page" (hardcoded per file) and gets a darker
   color. "About" is a disclosure trigger, not a link — it opens a dropdown
   containing the actual page links. */
.brand-link { display: inline-flex; }   /* logo wraps in an anchor on every page */

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 32px);
}
.site-nav a,
.nav-dropdown-toggle {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 200ms ease;
}
.site-nav a:hover,
.nav-dropdown-toggle:hover { color: var(--accent); }
.site-nav a[aria-current="page"],
.nav-dropdown-toggle.is-section-current {
  color: var(--text-primary);
}

/* "About" trigger: text + chevron, behaves like other nav items visually */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-chev {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  transition: transform 220ms ease;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

/* Dropdown surface — quiet card floating below the trigger. Left-aligned
   to the trigger button (cleaner than centering when the trigger word is
   short, e.g. "About"). Width auto-sizes to content rather than using a
   min-width, so the panel reads as a precise menu, not a roomy box. */
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(-4px);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(31, 45, 61, 0.10);
  padding: 4px 0;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  z-index: 50;
}
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.nav-dropdown li { width: 100%; }
.nav-dropdown a {
  display: block;
  padding: 9px 20px 9px 16px;
  white-space: nowrap;
  font-size: 14px;
}
.nav-dropdown a:hover { background: var(--bg); color: var(--accent); }
.nav-dropdown a[aria-current="page"] { color: var(--text-primary); }

/* Hamburger toggle button — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-right: -8px;   /* visually align with the wrap padding */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 180ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Make the header z-stack above content so the dropdown isn't clipped */
.site-header { position: relative; z-index: 40; background: var(--bg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* Hide the nav row by default on mobile; the hamburger toggles it open. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    box-shadow: 0 10px 24px rgba(31, 45, 61, 0.08);
    padding: 8px 0;
    display: none;
    z-index: 45;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav li { width: 100%; }
  .site-nav a,
  .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px clamp(24px, 5vw, 80px);
    font-size: 15px;
  }
  .nav-dropdown-toggle {
    justify-content: space-between;
  }
  /* Inline (not floating) dropdown on mobile — reads as a nested list */
  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    padding: 4px 0 8px;
    min-width: 0;
    /* Use display:none + display:block (matches desktop fade-in via display swap) */
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown { display: block; transform: none; }
  .nav-dropdown a {
    padding-left: clamp(40px, 8vw, 100px);
  }
}

/* ============ Hero (Block 1) ============ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6.5vw, 96px) 0;
}
/* Full-bleed hero artwork on its own layer so it can drift (mouse parallax +
   slow ambient motion via JS). Slightly over-scaled to hide the drift edges. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/aethistech_hero.jpg');
  background-size: cover;
  /* Vertical anchor at 80% (between center and bottom) keeps the horizon
     visible without pushing the image up as aggressively as full "bottom"
     did. Originally "center right" cropped the horizon when the hero
     copy tightened. */
  background-position: right 80%;
  background-repeat: no-repeat;
  transform: scale(1.06);
  will-change: transform;
}
/* Faint breathing glow over the horizon (screen-blended), layered on top of
   the static art. Off (opacity 0) for reduced-motion users. */
.hero-shimmer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(38% 46% at 60% 80%,
    rgba(205, 228, 255, 0.55) 0%,
    rgba(150, 195, 245, 0.20) 45%,
    rgba(150, 195, 245, 0) 75%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-shimmer { animation: heroGlow 8s ease-in-out infinite; }
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.50; transform: scale(1.05); }
}
/* Left scrim — keeps the headline high-contrast over the artwork and blends
   the image seamlessly into the page on the left. Sits below the text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--bg) 0%,
    rgba(245, 247, 248, 0.82) 24%,
    rgba(245, 247, 248, 0.30) 44%,
    rgba(245, 247, 248, 0) 60%);
}
.hero .wrap {
  /* Left content column; the artwork fills the hero behind it. */
  position: relative;
  z-index: 2;            /* text stays primary, above the artwork + scrim */
  max-width: var(--page-max);
}
/* Constrain the text so it stays over the lighter left of the artwork. */
.hero-text { max-width: 660px; }

/* One coloured phrase in the headline — slate→blue gradient text, echoing
   the way Stripe tints a key word. Solid-colour fallback for old engines. */
.accent-word {
  color: var(--accent);
  background: linear-gradient(95deg, var(--accent) 0%, #5B8FB9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0 0 26px;
  max-width: 18ch;
  text-wrap: balance;
}
.subhead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 36px;
}

/* CTA button */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

/* Primary CTA modifier — vivid steel blue, used for "Schedule an Intro Call"
   so the conversion action visually separates from the slate form-submit button
   and brand links. Apply alongside .btn (e.g., class="btn btn-cta"). */
.btn-cta {
  background: var(--cta-accent);
  border-color: var(--cta-accent);
}
.btn-cta:hover {
  background: var(--cta-accent-hover);
  border-color: var(--cta-accent-hover);
}

/* ============ Body sections ============ */
.section { padding: clamp(40px, 4.5vw, 64px) 0; }

/* Small uppercase eyebrow used above each body block to establish
   rhythm and a sense of "where am I" without adding decoration. */
.section-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 24px;
  max-width: none;
}

p {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 68ch;
}
p:last-child { margin-bottom: 0; }

/* Block 2 emphasis sentence — lifted onto its own line with quiet
   visual weight. No box, no color flag, just air and a touch of scale.
   No max-width on the block itself: the parent .content column already
   constrains it, and a tighter cap was forcing "itself." onto its own line. */
.emphasis {
  display: block;
  font-weight: 500;
  font-size: 1.15em;
  line-height: 1.45;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 32px 0;
}

/* ---- Value cards (Block 3) ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0;
}
/* Four-up variant (Who We Are) — collapses to 2-up, then 1-up */
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: var(--card-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: #D2D7DC;
}
.card-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  color: var(--accent);
}
.card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: none;
}

/* ---- Engagement framework (How We Engage) ----
   Five-stage horizontal methodology: numbered nodes joined by a muted
   connector. Enterprise/consulting feel; collapses to a vertical timeline. */
.fw {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(40px, 5vw, 56px) 0 0;
}
.fw-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
}
/* Connector through circle centres (desktop) */
.fw-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(59, 85, 109, 0.22);
  z-index: 0;
}
.fw-marker { margin-bottom: 28px; }
.fw-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #3884C8;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 0 0 6px rgba(56, 132, 200, 0.08);   /* ceremonial halo */
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.fw-body { text-align: center; }
.fw-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
  transition: color 200ms ease;
}
.fw-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 22ch;
}
.fw-stage:hover .fw-num { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(56, 132, 200, 0.14), 0 6px 16px rgba(56, 132, 200, 0.30); }
.fw-stage:hover .fw-title { color: var(--accent); }

/* ---- Alternating tinted panel (Launch-style block rhythm) ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  padding: clamp(32px, 4.5vw, 68px);
}
/* Dark anchor variant (How We Help) — deep blue-gray; white cards inside
   provide the contrast. Restrained, no gradients/glow. */
.panel.panel-dark {
  background: var(--panel-dark);
  border-color: #3D5870;
  border-radius: 20px;
}
.panel-dark .content .section-label { color: #9FB3C7; }
.panel-dark .content p { color: rgba(255, 255, 255, 0.82); }

/* ---- Outlined button modifier (.btn-outline) ----
   Sits on top of .btn for an outlined / ghost button variant. Used as a
   secondary action (e.g. "Learn more about Aethis") so it doesn't compete
   with the filled primary CTA (.btn-cta). Has a .panel-dark scoped variant
   so it reads correctly on the dark slate panel. */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.panel-dark .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.panel-dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* Arrow glyph inside a button — slides right on hover for a small
   affordance. Reusable on any .btn (e.g. <span class="btn-arrow">→</span>). */
.btn-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Row holding the "Learn more" button — right-aligned within the
   .content-wide container so the button sits at the right edge of the
   card grid above it. */
.learn-more-row {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: right;
}

/* ---- Capability stack (About > "What Aethis Does") ----
   Vertical list of larger content blocks. Each block is a substantial
   editorial card (title + body + "Read more" funnel link) rather than a
   short marketing card. Wider padding, no hover transform — these are
   content blocks, not actionable tiles. */
.capability-stack-heading {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: clamp(36px, 4.5vw, 52px) 0 clamp(20px, 2.5vw, 28px);
  max-width: 36ch;
  text-wrap: balance;
}
.capability-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.capability-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--card-shadow);
  scroll-margin-top: 84px;   /* offset for the fixed-ish header when anchor-linked */
}
.capability-card-head {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 16px;
  max-width: none;
}
.capability-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: none;
}
.capability-card p:last-of-type { margin-bottom: 22px; }

/* ---- Subtle inline "Read more →" link ----
   Quiet funnel inside content cards. Arrow nudges right on hover; color
   shifts to hover accent. Reusable anywhere an inline arrow link is
   wanted (distinct from the bolder .btn .btn-outline pattern used for
   secondary buttons). */
.text-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--accent);
  transition: color 200ms ease;
}
.text-link-arrow:hover { color: var(--accent-hover); }
.text-link-arrow-glyph {
  display: inline-block;
  transition: transform 220ms ease;
}
.text-link-arrow:hover .text-link-arrow-glyph { transform: translateX(4px); }

/* "How We Help" cards on the homepage: brief intro + "Read more →" funnel
   into the matching capability block on /about. Flex column so the link
   pins to the bottom and all cards in the row align visually even if
   their copy lengths differ. */
#how-we-help .card {
  display: flex;
  flex-direction: column;
}
#how-we-help .card p { margin-bottom: 16px; }
#how-we-help .card .text-link-arrow { margin-top: auto; }

/* ---- Block headline (two-column narrative blocks) ---- */
.block-head {
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 22px;
  max-width: 22ch;
  text-wrap: balance;
}

/* ---- "The Opportunity": single-column content + accordion list ----
   Bain/enterprise feel: a subtle rounded container holding intro copy, a
   divider, and a list of challenge accordions. No graphics. */
.opp-panel {
  background: #F6F8FA;
  border: 1.5px solid #C5CED8;
  border-radius: 24px;
  padding: clamp(28px, 4.5vw, 72px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 6px 16px rgba(31, 45, 61, 0.05);
}
.opp-intro { max-width: 760px; }
.opp-rule {
  height: 1px; border: 0; background: var(--rule-soft);
  margin: clamp(32px, 4vw, 48px) 0;
}
.opp-sub {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 24px;
}

/* Accordion list */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 4px 14px rgba(31, 45, 61, 0.05);
  overflow: hidden;
  transition: box-shadow 220ms ease;
}
.acc-item.is-open { box-shadow: inset 3px 0 0 var(--accent), 0 1px 3px rgba(23, 23, 23, 0.06); }
.acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px clamp(18px, 2vw, 26px);
  margin: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font);
  font-size: clamp(0.9875rem, 0.95rem + 0.2vw, 1.0625rem);
  font-weight: 500; line-height: 1.4; text-align: left;
  color: var(--text-primary);
  transition: color 180ms ease;
}
.acc-head:hover { color: var(--accent); }
.acc-chev {
  flex: 0 0 auto; width: 18px; height: 18px;
  color: var(--text-tertiary);
  transition: transform 280ms ease, color 200ms ease;
}
.acc-chev svg { width: 100%; height: 100%; display: block; }
.acc-item.is-open .acc-chev { transform: rotate(180deg); color: var(--accent); }
/* Smooth height via animatable grid rows */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-panel-inner p {
  margin: 0;
  padding: 0 clamp(18px, 2vw, 26px) 22px;
  max-width: 78ch;
  font-size: 1rem; line-height: 1.65;
  color: var(--text-secondary);
}

/* ---- Section rhythm tints ---- */
/* Who We Are gets a subtle cool panel tint; How We Engage sits on the
   plain page background to read as clean and open between the two tinted sections. */
#who-we-are { background: var(--panel); }

/* About page: tint "What Aethis Does" so the page alternates
   white (page header) → tinted (capabilities) → white (engagement) →
   white-with-centered-panel (closing CTA). Creates the same kind of
   rhythm the homepage uses, and the white capability cards inside
   the tinted section get clean visual definition against the tint. */
body.page-about #what-we-do { background: var(--panel); }

/* ============ Contact (Block 5) — conversion module ============ */
/* Tinted section so the white form card reads as a defined module. */
#contact {
  background: var(--panel);
  padding: clamp(56px, 7vw, 100px) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contact-intro { max-width: 460px; }
.contact-intro .block-head { margin-bottom: 18px; }
.contact-intro p {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.contact-intro p:last-child { margin-bottom: 0; }
.contact-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: clamp(26px, 3.2vw, 40px);
  box-shadow: var(--card-shadow);
}
.contact-card form { max-width: none; }
.contact-card button[type="submit"] { width: 100%; margin-top: 8px; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 13px 14px;
  transition: border-color 180ms ease, background 180ms ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-tertiary); }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: #C7CCD2; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  outline: none;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--accent);
}
.field textarea {
  min-height: 160px;
  resize: vertical;
}
/* Select: native chrome removed, custom chevron, matches text inputs */
.field select {
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B94A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
/* Grey the placeholder option until a real choice is made */
.field select:has(option[value=""]:checked) { color: var(--text-tertiary); }
.field-optional { color: var(--text-tertiary); font-weight: 400; }
.field-required label::after {
  content: "*";
  margin-left: 3px;
  color: var(--accent);
  font-weight: 500;
}
#contact .btn { margin-top: 8px; }

/* Honeypot — visually hidden, kept in flow for bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  display: none;
  font-size: 15px;
  line-height: 1.6;
  color: #9A2A2A;
  margin: 0 0 20px;
}
.form-error.is-visible { display: block; }

.form-success {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.65;
  color: var(--text-primary);
  max-width: 70ch;
  margin: 0;
}

.alt-contact {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 28px 0 0;
}

/* ---- Primary CTA panel (Calendly) on the contact page ----
   Sits above the form as the recommended path. Same card silhouette as
   .contact-card so the two read as parallel options; the button itself
   carries the visual weight, since this panel has only one action. */
.cta-panel {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: clamp(26px, 3.2vw, 40px);
  box-shadow: var(--card-shadow);
  margin-bottom: 24px;
}
.cta-panel-head {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 12px;
  max-width: none;
}
.cta-panel-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 20px;
  max-width: none;
}
.cta-panel .btn { width: 100%; }

/* Transitional copy between the Calendly panel and the form. Quieter than
   either card to read as a soft hand-off, not a heading. */
.form-intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: 0.2px;
}

/* ============ Closing CTA panel (About + Founder pages) ============
   Centered, tinted "next step" panel — the page's primary conversion
   moment, sitting above the global footer. Distinct from .cta-panel
   (which is the right-column contact-page variant) so the button is
   inline-block, not full-width, and the whole panel is centered. */
.closing-cta {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 60px);
  text-align: center;
  max-width: var(--content-wide);
  margin: 0 auto;
}
.closing-cta-head {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 14px;
  max-width: none;
}
.closing-cta-body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 auto 28px;
  max-width: 52ch;
}

/* ============ Founder hero (Founder page) ============
   Two-column composition: text on the left, photo slot on the right.
   Photo slot uses an aspect-ratio panel so the real portrait can drop
   in later without any layout change. Collapses to single column on
   mobile, with the photo capped narrower so it doesn't dominate. */
.founder-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.founder-photo-slot {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #E8ECF1 0%, #DCE3EB 55%, #C8D2DD 100%);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.founder-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  filter: grayscale(1) contrast(1.03);   /* B&W aesthetic per founder brief */
}
@media (max-width: 768px) {
  .founder-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .founder-photo-slot, .founder-photo { max-width: 320px; margin: 0 auto; }
}

/* ============ Founder page — editorial layer ============
   The founder page reads as editorial: larger hero headline, more
   generous section padding, narrower line lengths, no UI density.
   Restraint over component-richness — typography and pacing carry
   the page. */
body.page-founder .section { padding: clamp(56px, 5.5vw, 88px) 0; }

/* The Why Aethis panel is the page's editorial centerpiece on Founder
   (the only content section between the hero and the footer). A touch
   more interior padding makes it feel like a thesis statement rather
   than a generic tinted box. */
body.page-founder .panel { padding: clamp(40px, 5vw, 80px); }

/* ---- Single-band hero ----
   Two-column on a subtle tinted background. Left column carries the
   editorial weight: bold name (h1) → role → gradient divider → bio →
   LinkedIn button. Right column: B&W portrait. The tint contains the
   hero as a distinct page moment (otherwise it floats on the same
   off-white as the body sections below). */
.founder-hero-section {
  background: var(--panel);
  /* No hairline rule at the bottom — the tint → white color shift below
     does the transition work without a hard edge. Bottom padding is a
     touch larger than top so the eye gets a relaxed exhale before the
     next section begins. */
  padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 6vw, 100px);
}
.founder-bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

/* Name — the visual anchor. Bold, large, near-black; size carries the
   weight, no color flourish needed. */
.founder-name {
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 12px;
  max-width: none;
}
.founder-role {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 24px;
  max-width: none;
}

/* Gradient divider — slate → steel blue, brand-aligned. Sits between the
   role and the bio as an editorial break. Thinner now (2px) so it reads
   as a flourish rather than a UI separator. */
.founder-divider {
  display: block;
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--cta-accent) 70%, #6FA8DC 100%);
  margin: 0 0 28px;
}

.founder-bio-text p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 56ch;
}
/* Photo column — photo first, then the Schedule prompt + button, then
   LinkedIn. Stacks vertically as a flex column so the actions hang
   visually under the portrait. */
.founder-photo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* .founder-bio-actions — wrapper around the LinkedIn button in the hero
   left column AND around the closing CTA inside the Why Aethis panel.
   Top margin separates it from the prose above. The .panel-scoped
   variant gets a touch more space because the closing CTA acts as the
   page's editorial "next step" and deserves to feel intentional. */
.founder-bio-actions { margin-top: 28px; }
.panel .founder-bio-actions { margin-top: clamp(28px, 3vw, 40px); }

/* Schedule an Intro Call CTA — centered beneath the portrait so the
   primary action sits directly under the focal point of the hero.
   `align-self: center` overrides the column's flex-start. */
.founder-photo-cta {
  align-self: center;
  margin-top: 20px;
}

/* LinkedIn button — filled slate on white. Secondary to the closing
   Calendly CTA but distinct enough to invite the click. */
.founder-linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background 200ms ease, border-color 200ms ease;
}
.founder-linkedin-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.founder-linkedin-icon { width: 16px; height: 16px; display: block; }

@media (max-width: 768px) {
  .founder-bio-grid { grid-template-columns: 1fr; gap: 32px; }
  /* On mobile the photo column stays left-aligned with its CTAs below,
     so the photo no longer centers. Keeps the editorial alignment
     consistent through the stack. */
  .founder-photo { max-width: 360px; }
}

/* "Experience Includes" — subtle institutional credibility strip.
   Quietly elevated background, hairline rules top and bottom, centered
   list with mid-dot separators. Reads as executive-level credentialing,
   not a marketing logo wall. */
.experience-strip {
  background: var(--bg-elevated);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.experience-strip .content { text-align: center; }
.experience-heading {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 22px;
  max-width: none;
}
.experience-list {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  max-width: 780px;
}
.experience-list li {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.1px;
  padding: 0 18px;
  position: relative;
}
.experience-list li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-58%);
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
}
.experience-stat {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-tertiary);
  max-width: 58ch;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .experience-list { flex-direction: column; gap: 8px; }
  .experience-list li { padding: 0; }
  .experience-list li:not(:last-child)::after { display: none; }
}

/* ============ Footer (Block 6) — dark closing anchor ============ */
.site-footer {
  background: var(--footer-bg);
  padding: clamp(52px, 6vw, 84px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer-logo {
  height: 30px; width: auto; display: block;
  filter: brightness(0) invert(1);   /* render the dark logo white on dark */
  opacity: 0.92;
}
.footer-tagline {
  font-size: 15px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.60);
  max-width: 34ch;
  margin: 22px 0 26px;
}
.footer-head {
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
  margin: 4px 0 18px;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-nav a {
  font-size: 14px; color: rgba(255, 255, 255, 0.62);
  transition: color 180ms ease;
}
.footer-nav a:hover { color: #fff; }
.footer-company p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.60); margin: 0 0 14px; }
.footer-company a { color: #6FA8DC; transition: color 180ms ease; }   /* Aethis blue, lightened for dark */
.footer-company a:hover { color: #9CC4E8; }
/* Social icon link: square hit target with subtle hover background; colour
   inherits from .footer-company a via currentColor on the SVG fill. The
   negative margin-left visually aligns the icon's left edge with the text
   in the address/email lines above. */
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border-radius: 4px;
  transition: background 180ms ease;
}
.footer-social:hover { background: rgba(255, 255, 255, 0.06); }
.footer-social svg { width: 22px; height: 22px; display: block; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 24px 0 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.footer-bottom p { font-size: 13px; color: rgba(255, 255, 255, 0.42); margin: 0; }
.footer-bottom a { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.footer-bottom a:hover { color: #fff; }

/* ============ Responsive ============ */
@media (max-width: 768px) {
  .site-header { height: 64px; }

  .hero { padding: 56px 0 64px; }
  .hero-art { background-position: center; transform: none; }   /* static on mobile */
  .hero-shimmer { display: none; }
  h1 { max-width: none; }
  .hero-text { max-width: none; }
  /* On mobile the text sits over the artwork, so wash it more strongly at
     the top (headline) and let the image show through toward the bottom. */
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(245, 247, 248, 0.92) 0%,
      rgba(245, 247, 248, 0.80) 45%,
      rgba(245, 247, 248, 0.45) 100%);
  }

  .section-label { margin-bottom: 18px; }
  .emphasis { margin: 24px 0; max-width: none; }
  .framing { margin-bottom: 40px; }

  .panel { padding: 30px 22px; border-radius: 18px; }
  .panel.panel-dark { border-radius: 18px; }
  .opp-panel { padding: 26px 20px; border-radius: 18px; }
  .acc-head { padding: 18px; }

  /* Card grids collapse to a single column */
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  /* Engagement framework becomes a vertical timeline */
  .fw { grid-template-columns: 1fr; margin-top: 36px; }
  .fw-stage {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 0 0 30px;
  }
  .fw-stage:last-child { padding-bottom: 0; }
  .fw-marker { margin-bottom: 0; flex: 0 0 auto; }
  .fw-body { text-align: left; padding-top: 11px; }
  .fw-desc { max-width: none; margin: 0; }
  .fw-stage:not(:last-child)::after {
    top: 48px; left: 23px;
    width: 2px; height: calc(100% - 48px);
  }

  #contact { padding: 64px 0 72px; }
  .field { margin-bottom: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-intro { max-width: none; }
  .contact-card { padding: 24px 20px; }
  .cta-panel { padding: 24px 20px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============ About page — block layout overrides ============
   The About page uses a single, consistent content column (`.content-wide`,
   980px) for every block. Defaults like `.block-head { max-width: 22ch }`
   and `p { max-width: 68ch }` would force the heading and body text to a
   narrower visual column than the cards / framework below them, so we
   widen them here. Intro paragraphs are justified so the block reads as a
   defined rectangle with a clean right edge that matches the heading and
   the capability stack. Scoped to .page-about so no other page is affected. */
.page-about .block-head,
.page-about .capability-stack-heading {
  max-width: none;
}
.page-about .content-wide > p {
  max-width: none;
  text-align: justify;
  hyphens: auto;
}
/* Re-tighten mobile so justified text doesn't develop large word-spacing
   rivers at narrow widths — left-align below the tablet breakpoint. */
@media (max-width: 768px) {
  .page-about .content-wide > p { text-align: left; hyphens: manual; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
}

html { scroll-behavior: smooth; }