/* =========================================================
   Tech For Trades — Site Styles
   Colors derived from brand logo (navy, cyan, gray)
   ========================================================= */

:root {
  --navy:      #1C3D6B;   /* logo dark blue */
  --navy-900:  #0F2544;
  --navy-700:  #274E85;
  --cyan:      #0EA5D8;   /* logo bright blue */
  --cyan-600:  #0B86B0;
  --steel:     #A7B0B5;   /* logo gray */
  --steel-200: #D8DCDE;
  --amber:     #E08A2B;   /* warm accent, trades-feeling */
  --amber-600: #B86C14;
  --paper:     #FAF7F2;   /* warm off-white */
  --paper-2:   #F1EBE0;
  --ink:       #10192A;
  --ink-muted: #465468;
  --rule:      #E4DDD0;
  --shadow-1:  0 1px 2px rgba(16,25,42,.06), 0 2px 8px rgba(16,25,42,.05);
  --shadow-2:  0 12px 32px -12px rgba(16,25,42,.25);

  --w-wide:  1240px;
  --w-main:  1120px;
  --w-text:  720px;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--cyan); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--cyan);
  display: inline-block;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.025em; line-height: 1.0; }
h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; text-transform: none; }

p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.4vw, 21px); color: var(--ink-muted); line-height: 1.55; max-width: 640px; }
.small { font-size: 14px; color: var(--ink-muted); }

/* ---------- Layout ---------- */
.container { max-width: var(--w-main); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
@media (max-width: 720px){ section { padding: 64px 0; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,242,.92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; height: 56px; }
.nav-logo img {
  min-width: 80px;
  width: 80px;
  height: auto;
}
.nav-links {
  display: flex; gap: 28px; margin-left: 8px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
}
.nav-links a {
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.nav-links a:hover { color: var(--navy); border-bottom-color: var(--cyan); }
.nav-links a.active { color: var(--navy); border-bottom-color: var(--cyan); }

/* ---------- Nav dropdown (Resources) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-toggle-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit;
  transition: border-color .15s, color .15s;
}
.nav-dropdown > .nav-toggle-link:hover,
.nav-dropdown.open > .nav-toggle-link,
.nav-dropdown > .nav-toggle-link.active { color: var(--navy); border-bottom-color: var(--cyan); }
.nav-dropdown > .nav-toggle-link svg { width: 12px; height: 12px; transition: transform .15s; flex-shrink: 0; }
.nav-dropdown.open > .nav-toggle-link svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: -16px;
  min-width: 240px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,37,68,.12);
  padding: 8px;
  display: none;
  z-index: 100;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
/* Invisible bridge across the 14px gap between trigger and menu —
   keeps the cursor inside the menu's hit-test zone so the dropdown
   doesn't close while the user is moving toward a sub-item. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-radius: 6px;
  border-bottom: 0 !important;
  color: var(--navy-900);
  font-size: 14px;
}
.nav-dropdown-menu a:hover { background: var(--paper); color: var(--cyan-600); }
.nav-dropdown-menu a .menu-desc {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 12.5px;
}
.nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.nav-portal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  transition: all .15s;
}
.nav-portal:hover { background: var(--navy); color: white; }
.nav-portal svg { width: 14px; height: 14px; }

/* Compact CTA scoped to the header .nav-right cluster. Mirrors the
   sizing that used to live as inline overrides on the "Start the
   Conversation" anchor. font-size stays at 14px at every viewport;
   on phones the padding shrinks so the button doesn't waste
   horizontal room and the label is allowed to wrap to two lines
   when there isn't enough width to fit on one. line-height: 1.2
   gives wrapped text breathing room (the base .btn rule sets 1.0
   which is too tight when wrapped).
   Selector is `.nav-right .nav-cta` (not just `.nav-cta`) to win on
   specificity against the .btn rule defined later in this file —
   without the ancestor selector, .btn's 15px 26px padding + 16px
   font wins on source order and the button balloons up, pushing
   the hamburger off the viewport on mobile. */
.nav-right .nav-cta { padding: 10px 18px; font-size: 14px; }
@media (max-width: 480px) {
  .nav-right .nav-cta {
    padding: 6px 12px;
    line-height: 1.2;
    /* width: min-content forces the box to shrink to its longest
       unbreakable word ("Conversation") + padding instead of the
       flex-calculated one-line max-content width. Without it, the
       text wraps but the box stays at its pre-wrap width, leaving
       a chunk of empty pill to the right of the shorter first
       line. text-align: center keeps both wrapped lines visually
       balanced within the now-tighter pill. */
    width: min-content;
    text-align: center;
  }
}

/* Hamburger (mobile) */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; stroke: var(--navy); }

/* Scroll-lock the document body while the mobile nav is open so the
   page underneath can't scroll independently of the open panel.
   Applied + removed by the toggle handler in initNav(). */
body.nav-open { overflow: hidden; }

@media (max-width: 900px){
  .nav-portal span { display: none; }
  .nav-portal { padding: 8px; }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] svg { stroke: var(--cyan-600); }

  /* Mobile nav panel. .nav has position: sticky which establishes a
     positioned ancestor, so absolute children anchor relative to it.
     Hidden by default; .is-open is added by the toggle handler. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    background: rgba(250,247,242,.98);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 32px rgba(15,37,68,.08);
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    padding: 8px 0 16px;
  }
  .nav-links.is-open { display: flex; }

  /* Each top-level link as a tappable row. min-height enforces a
     44px tap target. Border-bottom removed since the underline-on-hover
     reads weird as a row indicator. */
  .nav-links > a,
  .nav-dropdown > .nav-toggle-link {
    display: flex; align-items: center;
    min-height: 44px;
    padding: 8px 24px;
    border-bottom: 0;
    width: 100%;
  }
  .nav-links > a:hover,
  .nav-dropdown > .nav-toggle-link:hover,
  .nav-links > a.active,
  .nav-dropdown > .nav-toggle-link.active {
    background: rgba(14,165,216,.08);
    border-bottom-color: transparent;
  }

  /* Resources dropdown on mobile: sub-items always visible, inline,
     no hover gating. Drop the desktop card chrome. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown > .nav-toggle-link svg { display: none; }
  .nav-dropdown-menu {
    display: block !important;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px;
    min-width: 0;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a {
    padding: 8px 24px 8px 44px;
    min-height: 40px;
    font-size: 14px;
    border-radius: 0;
  }
  .nav-dropdown-menu a .menu-desc { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--amber);
  color: white;
  box-shadow: 0 2px 0 var(--amber-600), 0 8px 20px -8px rgba(224,138,43,.6);
}
.btn-primary:hover { background: var(--amber-600); color: white; transform: translateY(-1px); }
/* Icon size applies to every .btn variant (primary, navy, ghost). Without
   this the inline SVG falls back to the browser's default replaced-element
   dimensions (~300×150) and balloons up whenever the button gets enough
   room — most visibly on full-width mobile buttons like the resources hub
   cards. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-navy { background: var(--navy); color: white; }
.btn-navy:hover { background: var(--navy-900); color: white; }

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

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--navy);
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 2px;
  transition: gap .15s, color .15s;
}
/* Constrain the inline arrow SVG. The markup has no width/height
   attributes, so without this it falls back to the UA default
   (~300×150 in some browsers), which renders oversized. */
.link-arrow svg { width: 24px; height: 24px; flex-shrink: 0; }
.link-arrow:hover { gap: 12px; color: var(--cyan-600); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 72px 0 72px;
  overflow: hidden;
  background: var(--navy-900);
  color: white;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  /* image-set() lets the browser pick WebP (~567 KB) when it can decode
     it, and fall back to PNG (~8.9 MB) otherwise. The webp branch
     covers ~98% of traffic today. Preloaded via <link rel="preload"
     as="image" type="image/webp"> in index.html's <head>. */
  background:
    image-set(
      url('jobsite-desk.webp') type('image/webp'),
      url('jobsite-desk.png') type('image/png')
    ) center/cover no-repeat;
  opacity: .35;
  filter: saturate(1.05);
  z-index: -2;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(15,37,68,.95) 0%, rgba(15,37,68,.75) 45%, rgba(15,37,68,.3) 100%),
    linear-gradient(to top, rgba(15,37,68,.85), rgba(15,37,68,0) 40%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask: linear-gradient(to bottom, black, transparent 90%);
}
.hero h1 { color: white; max-width: 16ch; }
.hero .lead { color: rgba(255,255,255,.85); max-width: 620px; font-size: clamp(18px, 1.5vw, 22px); }
.hero .eyebrow { color: var(--cyan); }
.hero .eyebrow::before { background: var(--cyan); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-meta {
  display: flex; gap: 28px; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 14px;
  flex-wrap: wrap;
}
.hero-meta strong { color: white; font-weight: 600; }

/* ---------- Pattern interrupt ---------- */
.pattern {
  background: var(--navy);
  color: white;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.pattern::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 24px 24px;
  mask: linear-gradient(to right, black, transparent);
  pointer-events: none;
}
.pattern h2 {
  color: white;
  font-size: clamp(32px, 4vw, 56px);
  max-width: 22ch;
  margin-bottom: .4em;
}
.pattern h2 em {
  font-style: normal;
  color: var(--cyan);
  position: relative;
}
.pattern p {
  color: rgba(255,255,255,.78);
  max-width: 62ch;
  font-size: clamp(17px, 1.2vw, 19px);
}

/* ---------- Two-column pain + toolbox ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 900px){ .split { grid-template-columns: 1fr; gap: 48px; } }

/* Tighter padding for the friction/toolbox section (the one whose
   left column is the .pain-list). Scoped via :has() so it doesn't
   shrink the .split layouts on about.html / services.html. */
section:has(.pain-list) { padding: 68px 0; }
section:has(.pain-list) .section-head h2 {
  font-size: clamp(26px, 3vw, 40px);
}

.pain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pain-list li {
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.5;
}
.pain-list li:last-child { border-bottom: 0; }
.pain-list li::before {
  content: '';
  position: absolute; left: 0; top: 22px;
  width: 28px; height: 2px;
  background: var(--amber);
}
.pain-list strong { color: var(--navy-900); font-weight: 700; display: block; margin-bottom: 4px; font-family: var(--font-display); }

.toolbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.toolbox-item {
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.toolbox-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--cyan); }
.toolbox-item h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.toolbox-item h4 .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan-600);
  font-weight: 500;
  background: rgba(14,165,216,.08);
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: .05em;
}
.toolbox-item p { margin: 0; font-size: 15px; color: var(--ink-muted); line-height: 1.5; }

/* Matched section images for split layout */
.split-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-1);
  display: block;
}

/* ---------- How it works (3 steps) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 900px){ .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 32px 28px 32px 32px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.step-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  color: var(--cyan);
  opacity: .22;
  position: absolute;
  top: 14px; right: 22px;
  letter-spacing: -0.04em;
}
.step h3 { margin-bottom: 10px; font-size: 20px; line-height: 1.3; }
.step p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }

/* Three-step cards: when displayed in the 3-column grid, the shortest
   heading ("We get it done.") fits on one line while the longest
   ("Tell me what you'd like to improve.") wraps to two — which would
   push the body text to a different vertical baseline in each card.
   Reserve two lines' worth of heading space so all three body
   paragraphs start at the same y. Skipped on mobile where the cards
   stack single-column and natural h3 height reads better. */
@media (min-width: 901px) {
  .step h3 { min-height: 2.6em; }
}

/* ---------- Service cards ---------- */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 40px;
}
@media (max-width: 900px){ .services-grid { grid-template-columns: 1fr; } }
.service-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.service-card .img {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  position: relative;
}
.service-card .img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,37,68,0) 40%, rgba(15,37,68,.35));
}
.service-card .img .label {
  /* Hidden by request — "ALWAYS FREE" / "FLAT-FEE SOW" / "ONGOING"
     badges are redundant with the card headings below. Markup left
     intact so re-enabling is just removing this display override. */
  display: none;
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.95);
  color: var(--navy);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px;
}
.service-card .body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { margin: 0 0 10px; font-size: 22px; }
.service-card p { color: var(--ink-muted); font-size: 15.5px; margin: 0 0 18px; flex: 1; }

/* ---------- Client stories carousel ---------- */
.stories-section { padding: 80px 0; }
.stories-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 36px;
}
.stories-controls { display: flex; gap: 10px; flex-shrink: 0; }
.stories-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--steel-200);
  background: white; color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.stories-btn svg { width: 20px; height: 20px; }
.stories-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--shadow-1); }
.stories-btn:active { transform: scale(.97); }

/* Carousel viewport — clips overflowing track to show exactly N cards. */
.stories-carousel {
  width: 100%;
  overflow: hidden;
  padding-bottom: 8px;
}
/* Track — flex row of cards; JS applies transform: translateX(...) to slide. */
.stories-track {
  display: flex;
  gap: 24px;
  transition: transform .4s ease;
  will-change: transform;
}
@media (max-width: 720px){
  .stories-header { flex-direction: column; align-items: flex-start; }
}

.story-card {
  flex: 0 0 calc((100% - 48px) / 3);  /* desktop: 3 visible (2 × 24px gaps) */
  display: flex; flex-direction: column;
  padding: 32px 30px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (max-width: 1024px){
  .story-card { flex-basis: calc((100% - 24px) / 2); }  /* tablet: 2 visible */
}
@media (max-width: 720px){
  .story-card { flex-basis: 88%; }  /* mobile: ~1 visible */
}
/* ≤768px: stop being a carousel, become a vertical stack. Hides
   the prev/next controls + pagination dots since there's nothing
   to navigate when all cards are visible at once. The
   `transform: none !important` overrides any inline translateX()
   the carousel JS may have applied — without it, resizing from a
   desktop viewport after the user has clicked Next would leave
   the stack shifted off the left edge.
   Must come AFTER the 720px .story-card rule above so cascade
   order wins on flex-basis at sub-720px viewports. */
@media (max-width: 768px) {
  .stories-carousel { overflow: visible; }
  .stories-track {
    flex-direction: column;
    gap: 16px;
    transform: none !important;
  }
  .story-card {
    flex-basis: auto;
    width: 100%;
  }
  .stories-controls,
  .stories-dots {
    display: none;
  }
}
.story-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.story-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: 14px;
}
.story-card h3 {
  font-size: 22px; margin: 0 0 16px; color: var(--navy-900);
  line-height: 1.2;
}
.story-meta { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; color: var(--ink); }
.story-meta strong {
  display: inline; color: var(--navy-900); font-weight: 700;
  font-family: var(--font-body);
}
.story-card blockquote {
  margin: auto 0 0; padding: 14px 16px;
  background: var(--paper);
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.45;
}

/* Client logo inside a story card. Sized to a consistent box so the
   per-client PNGs in /assets/logos/ (all different intrinsic
   dimensions) render at the same visual scale. object-fit: contain
   preserves aspect ratio inside the box. */
.story-card img {
  max-height: 60px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 14px;
  align-self: flex-start;
}

.stories-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; gap: 24px; flex-wrap: wrap;
}
.stories-dots { display: flex; gap: 8px; }
.stories-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; padding: 0;
  background: var(--steel-200);
  cursor: pointer;
  transition: background .2s, transform .2s, width .2s;
}
.stories-dot.is-active { background: var(--cyan); width: 24px; border-radius: 4px; }

/* ---------- Story (legacy/list page) ---------- */
.story-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: 40px;
}
@media (max-width: 800px){ .story-list { grid-template-columns: 1fr; } }
.story {
  padding: 32px 28px;
  background: var(--paper-2);
  border-radius: 12px;
  border: 1px dashed var(--steel);
  position: relative;
}
.story .tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.story h3 { font-size: 20px; margin: 0 0 12px; color: var(--navy); }
.story dl { margin: 0; font-size: 15px; }
.story dt { font-weight: 700; color: var(--navy-900); margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-body); }
.story dd { margin: 2px 0 0; color: var(--ink-muted); }
.story blockquote {
  margin: 20px 0 0; padding: 14px 16px;
  background: white;
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--navy-900);
  font-size: 14.5px;
}
.placeholder-note {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--amber-600);
  background: rgba(224,138,43,.1);
  padding: 3px 7px; border-radius: 3px;
  letter-spacing: .1em;
}

/* ---------- About teaser ---------- */
.about-teaser {
  background: var(--paper-2);
}
.about-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 900px){ .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.about-portrait {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-image: url('derek.jpg');
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-2);
  justify-self: center;
}
@media (max-width: 900px){ .about-portrait { max-width: 240px; justify-self: start; } }
.about-portrait .tag {
  margin: 14px;
  padding: 10px 14px;
  background: rgba(15,37,68,.85);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  border-left: 3px solid var(--cyan);
}
.about-portrait .tag strong { display: block; font-family: var(--font-display); font-size: 15px; }
.about-portrait .tag span { font-size: 12px; opacity: .8; }

/* ---------- Meeting scheduler modal ---------- */
/* Refactored out of inline styles in components/modal.html so the
   mobile breakpoint can take a full-viewport approach without
   needing !important. JS keeps `display:none` inline on
   #meeting-modal and flips it to `display:flex` to open. */
.meeting-modal {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
}
.meeting-modal-card {
  background: white;
  border-radius: 16px;
  padding: 32px 48px 32px 32px;
  width: 90%;
  max-width: 760px;
  position: relative;
  margin: 0 auto;
}
.meeting-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #044674;
  line-height: 1;
  z-index: 10;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-modal-iframe-wrap iframe {
  width: 100%;
  min-height: 620px;
  border: 0;
  border-radius: 8px;
}
/* Mobile: full-screen takeover. The overlay loses its padding so
   the white card reaches every edge; the card drops its
   border-radius and reserves 56px of top space for the close
   button. The iframe fills the remaining card height.
   100dvh (dynamic viewport height) instead of 100vh sidesteps iOS
   Safari's URL-bar-driven viewport jitter — 100vh would leave the
   bottom of the iframe cut off when the URL bar collapses. */
@media (max-width: 767px) {
  .meeting-modal { padding: 0; }
  .meeting-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 56px 0 0 0;
    margin: 0;
  }
  .meeting-modal-close {
    top: 12px; right: 12px;
  }
  .meeting-modal-iframe-wrap {
    height: calc(100dvh - 56px);
  }
  .meeting-modal-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--navy-900);
  color: white;
  text-align: center;
  padding: 110px 24px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(14,165,216,.25), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(224,138,43,.15), transparent 45%);
  pointer-events: none;
}
.final-cta h2 { color: white; font-size: clamp(36px, 4.6vw, 62px); margin-bottom: .4em; position: relative; }
.final-cta p { color: rgba(255,255,255,.8); max-width: 58ch; margin: 0 auto 32px; font-size: 18px; position: relative; }
.final-cta .actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; }
.final-cta .secondary { color: rgba(255,255,255,.7); margin-top: 18px; font-size: 14px; position: relative; }
.final-cta .secondary a { color: var(--cyan); border-bottom: 1px solid rgba(14,165,216,.4); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy-900);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 24px; color: var(--cyan);
  transition: transform .2s;
  line-height: 1;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item .answer { padding: 0 40px 24px 0; color: var(--ink-muted); font-size: 16px; max-width: 70ch; }
/* Inline links inside an FAQ answer default to cyan and darken to navy
   on hover — flips the global a/a:hover rule so the link is the
   visually-prominent state. Inline styles on services/about/resources
   FAQ links (style="color: var(--cyan-600); …") still win on those
   pages via inline-specificity; this rule kicks in for Field Note
   FAQs where the Notion renderer outputs <a> tags without inline
   styling. */
.faq-list .answer a { color: var(--cyan); }
.faq-list .answer a:hover { color: var(--navy); }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.7);
  padding: 64px 0 32px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 800px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .footer-grid { grid-template-columns: 1fr; } }
.footer h5 {
  color: white;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 16px;
}
.footer a { color: rgba(255,255,255,.75); display: block; padding: 4px 0; }
.footer a:hover { color: var(--cyan); }
.footer .foot-logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }

/* Social links — icon + label, sit inline */
.footer-socials { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.footer-socials a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 0;
  color: rgba(255,255,255,.75);
}
.footer-socials a svg { color: rgba(255,255,255,.5); transition: color .15s; flex-shrink: 0; }
.footer-socials a:hover { color: var(--cyan); }
.footer-socials a:hover svg { color: var(--cyan); }

/* Portal column — primary CTA + helper note */
.footer-portal-cta {
  color: var(--cyan) !important;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 15px;
  padding: 6px 0 !important;
}
.footer-portal-cta:hover { color: white !important; }
.footer-portal-note {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 14px;
  max-width: 28ch;
}
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}
.footer-bottom span { 
  display: inline-flex !important; 
  align-items: center;
}
.footer-bottom a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.footer-bottom a:hover { color: white; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.max-text { max-width: 68ch; }

/* ---------- Section header helper ---------- */
.section-head { margin-bottom: 40px; max-width: 720px; }
.section-head .eyebrow { margin-bottom: 16px; }

/* ---------- AI blog highlight card ---------- */
.ai-highlight {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: white;
  border-radius: 16px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px){ .ai-highlight { grid-template-columns: 1fr; padding: 32px; } }
.ai-highlight::before {
  content: 'AI';
  position: absolute; right: -30px; top: -40px;
  font-family: var(--font-display);
  font-size: 220px; font-weight: 900;
  color: rgba(14,165,216,.1);
  line-height: 1;
  letter-spacing: -0.05em;
}
.ai-highlight h3 { color: white; font-size: 28px; margin: 0 0 10px; }
.ai-highlight p { color: rgba(255,255,255,.8); margin: 0; max-width: 55ch; }
.ai-highlight .cta-wrap { position: relative; z-index: 1; }

/* ---------- Page-specific: inner page hero (lighter) ---------- */
.page-hero {
  background: var(--paper-2);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28,61,107,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,61,107,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 62px); color: var(--navy-900); max-width: 20ch; }
.page-hero .lead { color: var(--ink-muted); font-size: clamp(18px, 1.4vw, 22px); }
.crumbs {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--navy); }

/* ---------- Independence / callout ---------- */
.callout {
  background: white;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  padding: 32px 34px;
  border-radius: 0 10px 10px 0;
  margin: 32px 0;
}
.callout h3 { margin-top: 0; font-size: 22px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Platforms grid (platforms.html) ---------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  padding: 8px 0 48px;
}
.platform-cat {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-1);
}
.platform-cat h3 {
  font-size: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cyan);
}
.platform-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-cat ul li {
  font-size: 15px;
  color: var(--ink);
  padding-left: 12px;
  position: relative;
}
.platform-cat ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cyan-600);
  font-weight: 400;
}

/* ---------- Form ---------- */
.form-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 40px;
  box-shadow: var(--shadow-1);
}
.field { margin-bottom: 22px; }
.field label {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--navy-900); margin-bottom: 8px;
  font-family: var(--font-display);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(14,165,216,.15);
}
.field textarea { min-height: 140px; resize: vertical; }

/* ---------- Blog/Resources list ---------- */
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .post-list { grid-template-columns: 1fr; } }
.post-card {
  background: white; border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.post-card .thumb {
  aspect-ratio: 16/10; background-size: cover; background-position: center;
  border-bottom: 1px solid var(--rule);
}
.post-card .meta {
  padding: 22px 24px 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.post-card h3 { padding: 0 24px; font-size: 19px; line-height: 1.25; margin: 0 0 10px; }
.post-card p { padding: 0 24px 22px; color: var(--ink-muted); font-size: 14.5px; margin: 0; flex: 1; }

/* ---------- Memberships ---------- */
.memberships { display: flex; gap: 36px; flex-wrap: wrap; padding: 28px 0; }
.membership {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: white; border: 1px solid var(--rule); border-radius: 10px;
}
.membership .m-dot {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-family: var(--font-display); font-weight: 900; font-size: 14px;
}
.membership strong { display: block; color: var(--navy-900); font-family: var(--font-display); }
.membership span { font-size: 13px; color: var(--ink-muted); }

/* ---------- Stats / county strip ---------- */
.county-strip {
  background: var(--navy);
  color: white;
  padding: 28px 0;
}
.county-inner {
  display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  align-items: center;
  flex-wrap: wrap;
}
.county-inner .counties { display: flex; gap: 22px; flex-wrap: wrap; }
.county-inner .counties span { color: white; font-weight: 500; }
.county-inner .location strong { color: var(--cyan); }

/* ---------- Subscribe section (HubSpot form on dark bg) ---------- */
.subscribe-section .hs-form input[type="email"] {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: white;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  width: 100%;
}
.subscribe-section .hs-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4);
}
.subscribe-section .hs-form input[type="submit"] {
  background: var(--cyan);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
}
.subscribe-section .hs-form input[type="submit"]:hover {
  background: var(--cyan-600);
}
.subscribe-section .hs-form .hs-error-msgs {
  color: rgba(255,180,180,0.9);
  font-size: 13px;
  margin-top: 4px;
}