/* ==========================================================================
   Henson Consulting — global stylesheet
   In GHL: Settings → Custom CSS (site-wide). Everything is class-based and
   prefixed `hc-`. No selector depends on parent/child structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --hc-obsidian: #050505;
  --hc-black: #0d0d0d;
  --hc-graphite: #1b1b1d;
  --hc-steel: #5b5d61;      /* borders/decor only, fails contrast for text */
  --hc-silver: #bfc2c7;     /* lowest text color allowed on black */
  --hc-soft: #e8e8e8;
  --hc-white: #ffffff;
  --hc-blue: #35b7fd;       /* restrained accent: small labels, links, active states, focus */
  --hc-green: #3fcf8e;      /* money: won revenue and the $10M+ figure */
  --hc-green-soft: #8fb9a0; /* pipeline value (potential revenue): clearly secondary */
  --hc-chrome: #d6d8dc;     /* neutral chrome for the signature and large marks */

  /* Derived */
  --hc-blue-soft: rgba(53, 183, 253, 0.14);
  --hc-line: rgba(255, 255, 255, 0.08);
  --hc-line-strong: rgba(255, 255, 255, 0.16);
  --hc-surface: var(--hc-black);
  --hc-surface-raised: #121214;
  --hc-gray-text: #8a8d92;
  --hc-mist: #cccccc;       /* light grey for the big headline words */
  --hc-dock: #1c1c1c;       /* floating nav background */
  --hc-band: #0b0b0c;       /* alternate (charcoal) section background */
  --hc-card: #111113;       /* cards and panels on black */
  --hc-card-hover: #17171a;

  /* Type */
  /* One family for everything, as on the Milestoners reference: DM Sans Light (300),
     Light Italic for emphasis, SemiBold (600) only inside the logo. */
  --hc-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hc-weight-body: 300;
  --hc-font-display: var(--hc-font);
  /* Hero titles: DM Sans Light, the face Milestoners uses */
  --hc-font-title: var(--hc-font);
  --hc-weight-display: 300;
  --hc-fs-display: clamp(2.625rem, 1.15rem + 6.1vw, 5.75rem);
  --hc-fs-h2: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --hc-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --hc-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --hc-fs-body: 1.0625rem;
  --hc-fs-small: 0.875rem;
  --hc-fs-eyebrow: 0.75rem;
  --hc-lh-tight: 1;
  --hc-lh-snug: 1.15;
  --hc-lh-body: 1.6;
  --hc-track-display: -0.02em;
  --hc-track-heading: -0.03em;
  --hc-track-eyebrow: 0.22em;

  /* Spacing (4px base) */
  --hc-space-1: 0.25rem;
  --hc-space-2: 0.5rem;
  --hc-space-3: 0.75rem;
  --hc-space-4: 1rem;
  --hc-space-5: 1.5rem;
  --hc-space-6: 2rem;
  --hc-space-7: 3rem;
  --hc-space-8: 4rem;
  --hc-space-9: 6rem;
  --hc-space-10: 8rem;
  --hc-section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --hc-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --hc-max: 80rem; /* 1280px */
  --hc-hero-x: clamp(1rem, 3.33vw, 3rem);          /* hero side margin: 48px at 1440 */
  --hc-hero-y-top-bar: clamp(1rem, 2.2vw, 2rem);    /* topbar top margin (was clamp(1.25rem, 3.33vw, 3rem)) */
  --hc-hero-inset: clamp(1rem, 6vw, 6rem);            /* left edge shared by the logo and the hero title: 86px at 1440 (was the 48px side margin) */

  /* Radii */
  --hc-r-sm: 10px;
  --hc-r-md: 16px;
  --hc-r-lg: 24px;
  --hc-r-pill: 999px;

  /* Motion */
  --hc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hc-dur-fast: 160ms;
  --hc-dur: 420ms;
  --hc-dur-slow: 700ms;
  --hc-reveal-shift: 16px;

  /* Layers */
  --hc-z-nav: 50;
  --hc-z-cursor: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  scroll-padding-bottom: 96px; /* clear the floating dock */
}

body {
  margin: 0;
  background: var(--hc-obsidian);
  color: var(--hc-soft);
  font-family: var(--hc-font);
  font-weight: var(--hc-weight-body);
  font-size: var(--hc-fs-body);
  line-height: var(--hc-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--hc-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--hc-blue); color: var(--hc-obsidian); }

.hc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.hc-skip-link {
  position: absolute;
  left: var(--hc-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--hc-space-3) var(--hc-space-5);
  border-radius: var(--hc-r-pill);
  background: var(--hc-white);
  color: var(--hc-obsidian);
  font-weight: 600;
  text-decoration: none;
}
.hc-skip-link:focus { top: var(--hc-space-4); }

/* --------------------------------------------------------------------------
   Layout primitives (map to GHL section / row settings)
   -------------------------------------------------------------------------- */
.hc-section {
  position: relative;
  padding-block: var(--hc-section-y);
}

/* Prototype-only: where blocks/*.html get injected. Specific mounts below set their size. */
.hc-block-mount { width: 100%; }

.hc-container {
  width: 100%;
  max-width: calc(var(--hc-max) + var(--hc-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--hc-gutter);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.hc-display,
.hc-h1,
.hc-h2,
.hc-h3 {
  margin: 0;
  color: var(--hc-white);
  font-family: var(--hc-font-display);
  font-weight: var(--hc-weight-display);
  font-synthesis: none;
  text-wrap: balance;
}

.hc-display,
.hc-h1 {
  font-size: var(--hc-fs-display);
  line-height: 0.98;
  letter-spacing: var(--hc-track-display);
}

.hc-h2 {
  font-size: var(--hc-fs-h2);
  line-height: 1.04;
  letter-spacing: var(--hc-track-heading);
}

.hc-h3 {
  font-size: var(--hc-fs-h3);
  line-height: var(--hc-lh-snug);
  letter-spacing: -0.015em;
}

.hc-line { display: block; text-wrap: balance; }

.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-3);
  margin: 0;
  color: var(--hc-silver);
  font-size: var(--hc-fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--hc-track-eyebrow);
  text-transform: uppercase;
}

.hc-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--hc-silver);
  font-size: var(--hc-fs-lead);
  line-height: 1.55;
}

.hc-body { margin: 0; color: var(--hc-silver); }
.hc-small { margin: 0; color: var(--hc-silver); font-size: var(--hc-fs-small); }

.hc-accent { color: var(--hc-blue); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.hc-btn,
.hc-btn-primary,
.hc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hc-space-2);
  min-height: 52px;
  padding: 0 var(--hc-space-6);
  border: 1px solid transparent;
  border-radius: var(--hc-r-pill);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--hc-dur-fast) var(--hc-ease),
    border-color var(--hc-dur-fast) var(--hc-ease),
    color var(--hc-dur-fast) var(--hc-ease),
    transform var(--hc-dur-fast) var(--hc-ease);
}

.hc-btn-primary {
  background: var(--hc-white);
  color: var(--hc-obsidian);
}
.hc-btn-primary:hover { background: var(--hc-soft); }

.hc-btn-secondary {
  background: transparent;
  border-color: var(--hc-line-strong);
  color: var(--hc-white);
}
.hc-btn-secondary:hover { border-color: var(--hc-silver); }

.hc-btn-primary:active,
.hc-btn-secondary:active { transform: translateY(1px); }

.hc-btn-sm { min-height: 42px; padding: 0 var(--hc-space-5); font-size: 0.875rem; }

.hc-btn-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--hc-dur-fast) var(--hc-ease);
}
.hc-btn-primary:hover .hc-btn-arrow,
.hc-btn-secondary:hover .hc-btn-arrow { transform: translateX(3px); }

.hc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-space-3);
}

/* --------------------------------------------------------------------------
   Loader: black, about a second. A thin silver line runs across the bottom while a
   counter climbs to 100 and the H fades in; the number turns Henson Blue at 100.
   Kept short so it never holds up reading. Hidden without JS.
   -------------------------------------------------------------------------- */
.hc-loader { display: none; }
.hc-loading .hc-loader,
.hc-loader.hc-loader-out {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 var(--hc-hero-x) clamp(2.5rem, 5.5vw, 5rem);
  background: var(--hc-obsidian);
  overflow: hidden;
}
.hc-loader-out {
  opacity: 0;
  transition: opacity 450ms var(--hc-ease);
  pointer-events: none;
}
.hc-loader-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hc-steel), var(--hc-silver));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.hc-loader-count {
  position: relative;
  margin: 0;
  color: var(--hc-silver);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* The H fades in at the centre as the counter climbs (opacity set from JS) */
.hc-loader-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  height: clamp(5rem, 11vw, 9rem);
  width: auto;
  aspect-ratio: 540 / 641;
  transform: translate(-50%, -50%);
  fill: var(--hc-soft);
  opacity: 0;
}
.hc-loader-done .hc-loader-count { color: var(--hc-blue); transition: color 300ms var(--hc-ease); }

/* Hold the hero's entrance until the loader has gone */
.hc-loading .hc-hero-line-inner,
.hc-loading .hc-fade-rise { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   Topbar — logo top left, CTA top right, over the hero (not sticky)
   -------------------------------------------------------------------------- */
.hc-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-space-4);
  padding: var(--hc-hero-y-top-bar) var(--hc-hero-x) var(--hc-hero-y-top-bar) var(--hc-hero-inset);   /* logo lines up with the hero title */
}

.hc-topbar-logo {
  display: block;
  color: var(--hc-white);
  border-radius: 4px;
}
.hc-logo-lockup {
  display: block;
  width: auto;
  height: clamp(28px, 2.4vw, 36px);
  aspect-ratio: 2855 / 641;   /* wordmark sized so HENSON's cap tops meet the H's top-right corner and CONSULTING's baseline meets the H's foot (was 2634 / 641) */
  overflow: visible;
}

.hc-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hc-white);
  border-radius: var(--hc-r-pill);
  color: var(--hc-white);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
/* hover: a plain white fill with black text (no blue flood) */
.hc-topbar-cta:hover,
.hc-topbar-cta:focus-visible { background: var(--hc-white); color: var(--hc-obsidian); }
.hc-topbar-cta-icon { width: 20px; height: 20px; flex: none; }

@media (max-width: 479px) {
  .hc-topbar-cta { height: 38px; padding: 0 12px; gap: 8px; font-size: 0.875rem; }
  .hc-topbar-cta-icon { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   Hero — big light uppercase type around a dark 3D H (custom code block)
   Desktop proportions follow 1440x900: title at ~160px, bottom row ends ~120px
   above the fold to clear the dock.
   -------------------------------------------------------------------------- */
.hc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;            /* the content block sits mid-screen, like the reference */
  min-height: 100svh;
  /* top/bottom set the block's centre: a little above mid-screen (was 10rem top / 7.75rem bottom) */
  padding: clamp(5rem, 8vw, 7rem) var(--hc-hero-x) clamp(8rem, 10.5vw, 9.75rem) var(--hc-hero-inset);
}

/* The H fills the hero behind the text; the block shifts it into the open space on the right
   (desktop), just tucked behind the ends of the titles */
.hc-hero-object {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hc-block-mount-fill { height: 100%; }

.hc-hero-content {
  position: relative;
  z-index: 1;
  max-width: 62rem;
}

/* Three lines, left aligned, sized so the longest ("Measurable growth.", ~8.8em) takes a
   little over half the page, just reaching the H */
.hc-hero-title {
  margin: 0;
  color: var(--hc-mist);
  font-family: var(--hc-font-title);
  font-size: clamp(2.75rem, 6.3vw, 7.75rem);   /* was 5.3vw in uppercase; sentence case runs narrower */
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* sentence case, as written in the markup ("Smarter marketing."); was text-transform: uppercase */
  white-space: nowrap;
  /* column layout so each line's negative margins (mask room) don't collapse together */
  display: flex;
  flex-direction: column;
}

/* "system." falling into the services title (main.js): the flying copy, and the gap left by
   the "s" (which stays in the hero) closing up on the way */
.hc-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  visibility: hidden;
}
.hc-fly-gap { display: inline-block; }

.hc-hero-em {
  color: var(--hc-white);
  font-style: italic;
  /* (The Henson Blue glow was removed; to bring it back:
     text-shadow: 0 0 0.22em rgba(53, 183, 253, 0.6), 0 0 0.8em rgba(53, 183, 253, 0.32);) */
}

/* Line reveal: each line rises out of its own mask */
.hc-hero-line {
  display: block;
  overflow: hidden;
  /* extra room inside the reveal mask (spacing unchanged) */
  padding: 0.3em 0.1em 0.3em 0;
  margin: -0.3em -0.1em -0.3em 0;
}
.hc-hero-line-inner {
  display: inline-block;
  animation: hc-line-up 900ms var(--hc-ease) both;
}
@keyframes hc-line-up {
  from { transform: translateY(160%); }
  to { transform: none; }
}

/* Subtitle under the titles, where the reference has its paragraph */
.hc-hero-lead {
  max-width: 40rem;
  margin: clamp(1.5rem, 2.6vw, 2.5rem) 0 0;
  color: var(--hc-silver);
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Phones: each title line still fits on one line; the H stays centred behind */
@media (max-width: 767px) {
  .hc-hero-title { font-size: clamp(2rem, calc((100vw - var(--hc-hero-x) - var(--hc-hero-inset)) / 8.9), 3.5rem); }
}
/* Short phones (iPhone SE and smaller): tighter so the first screen clears the dock */
@media (max-width: 767px) and (max-height: 700px) {
  .hc-hero-lead { font-size: 0.9375rem; line-height: 1.45; }
}

/* --------------------------------------------------------------------------
   Results: case study cards on black (Milestoners card layout). The cards sit on raised
   charcoal; hovering one widens it into its neighbour and lifts it a shade, with no colour
   fill. Money is green (won revenue); ad spend stays neutral.
   -------------------------------------------------------------------------- */
.hc-cases {
  color: var(--hc-white);
  padding: clamp(5rem, 8vw, 8rem) clamp(0.75rem, 1.4vw, 1.25rem) clamp(5rem, 8vw, 7rem);
}

.hc-cases-title {
  max-width: 64rem;
  margin: 0 auto 0.75rem;
  color: inherit;
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
}
.hc-cases-em { font-style: italic; }
.hc-cases-sub {
  max-width: 40rem;
  margin: 0 auto clamp(2.5rem, 4.5vw, 4rem);
  color: var(--hc-silver);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}

.hc-cases-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 87.5rem;          /* 1400px */
  margin: 0 auto;
}
.hc-cases-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 900px) {
  .hc-cases-row { flex-direction: row; }
}

.hc-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 380px;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  border: 1px solid var(--hc-line);
  border-radius: 16px;
  background: var(--hc-card);
  color: var(--hc-white);
  text-decoration: none;
  overflow: hidden;
  transition:
    flex-grow 650ms var(--hc-ease),
    background-color 400ms var(--hc-ease),
    border-color 400ms var(--hc-ease);
}
/* Desktop: cards share each row; the hovered one widens into its neighbour (~58 / 42) */
@media (min-width: 900px) {
  .hc-case-card { flex: 1 1 0; min-width: 0; min-height: 0; height: clamp(420px, 31.8vw, 458px); }
  .hc-case-card:hover,
  .hc-case-card:focus-visible { flex-grow: 1.38; }
}
.hc-case-card:hover,
.hc-case-card:focus-visible {
  background: var(--hc-card-hover);
  border-color: var(--hc-line-strong);
}
/* the fourth card is the invitation, not a client: an outline instead of a filled card */
.hc-case-card-next { background: transparent; border-color: var(--hc-line-strong); }
/* Keep the hover fade when the card also uses the scroll reveal */
.hc-js .hc-case-card.hc-reveal {
  transition:
    opacity var(--hc-dur-slow) var(--hc-ease),
    transform var(--hc-dur-slow) var(--hc-ease),
    flex-grow 650ms var(--hc-ease),
    background-color 400ms var(--hc-ease),
    border-color 400ms var(--hc-ease);
}

.hc-case-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hc-case-num {
  margin: 0;
  padding-top: 2px;
  color: var(--hc-gray-text);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4;
}
.hc-case-heading { flex: 1; min-width: 0; }
.hc-case-title {
  display: inline-block;
  margin: 0;
  font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* The client's logo (from hensonconsulting.us), a small circle just left of the name */
.hc-case-logo {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 0.32em 0 0;
  border-radius: 50%;
  background: #ffffff;              /* Proper Remodeling's badge is transparent */
  object-fit: cover;
  vertical-align: -0.17em;
}

/* Line that draws in under the title on hover */
.hc-case-underline {
  display: block;
  width: 0;
  height: 1px;
  margin-top: 2px;
  background: currentColor;
  transition: width 500ms var(--hc-ease);
}
.hc-case-card:hover .hc-case-underline,
.hc-case-card:focus-visible .hc-case-underline { width: 100%; }

.hc-case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--hc-silver);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}
/* a small blue label: the one accent on the card */
.hc-case-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hc-blue);
}
.hc-case-verified::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hc-blue);
}

.hc-case-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--hc-white);
  color: var(--hc-obsidian);
  transition: transform 400ms var(--hc-ease);
}
.hc-case-arrow svg { width: 24px; height: 24px; }
.hc-case-card:hover .hc-case-arrow,
.hc-case-card:focus-visible .hc-case-arrow { transform: rotate(45deg); }

/* Bottom: the figures always show; on hover the summary fades in just above them */
.hc-case-desc {
  max-width: 38rem;
  margin: auto 0 0;
  padding-left: 30px;
  color: var(--hc-silver);
  font-size: clamp(1rem, 0.85rem + 0.45vw, 1.375rem);
  font-weight: 300;
  line-height: 1.45;
  /* Collapsed at rest so narrow cards never overflow; grows upward on hover */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    max-height 500ms var(--hc-ease),
    opacity 350ms var(--hc-ease) 80ms,
    transform 350ms var(--hc-ease) 80ms;
}
.hc-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hc-case-tag {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 40px;
  font-size: clamp(1rem, 0.85rem + 0.45vw, 1.375rem);
  font-weight: 300;
  white-space: nowrap;
}
.hc-case-tag-money { border-color: rgba(63, 207, 142, 0.55); color: var(--hc-green); }

@media (hover: hover) {
  .hc-case-card:hover .hc-case-desc,
  .hc-case-card:focus-visible .hc-case-desc { max-height: 12rem; opacity: 1; transform: none; }
}
/* Touch screens: no hover, so the summary is always shown */
@media (hover: none) {
  .hc-case-desc { max-height: none; padding-left: 0; margin-top: 1.5rem; opacity: 1; transform: none; }
}

.hc-cases-note {
  max-width: 87.5rem;
  margin: 1.5rem auto 0;
  color: var(--hc-silver);
  font-size: 0.875rem;
  text-align: center;
}
.hc-cases-note a { margin-left: 0.5em; color: var(--hc-white); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.hc-cases-note a:hover { text-decoration-color: var(--hc-blue); }

/* --------------------------------------------------------------------------
   Services (homepage): the living Henson bot inside the dashed arc of services
   (blocks/henson-bot.html), straight on from the hero
   -------------------------------------------------------------------------- */
.hc-services {
  padding: clamp(5rem, 8vw, 8rem) 0;
  background-color: var(--hc-obsidian);
  color: var(--hc-white);
}
.hc-services-title {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--hc-hero-x);
  color: inherit;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}
.hc-services-em { font-style: italic; }
/* the word that falls from the hero lands in Henson Blue */
.hc-fly-target { color: var(--hc-blue); }
.hc-services-sub {
  max-width: 36rem;
  margin: 1rem auto 0;
  padding: 0 var(--hc-hero-x);
  color: var(--hc-silver);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------------------
   CTA: the closing call on every page. Black, with one button and a quieter link to
   consulting. A hairline above it marks the change of section without a colour switch.
   -------------------------------------------------------------------------- */
.hc-cta {
  display: flex;
  align-items: center;
  min-height: 78vh;
  min-height: 78svh;
  padding: 14vh clamp(0.75rem, 1.4vw, 1.25rem) 18vh;
  border-top: 1px solid var(--hc-line);
  background: var(--hc-obsidian);
  color: var(--hc-white);
}
.hc-cta-inner {
  width: 100%;
  max-width: 87.5rem;              /* same width as the case grid */
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 2.5vw, 2.5rem);
}
.hc-cta-title {
  max-width: 15ch;
  margin: 0;
  color: inherit;
  font-size: clamp(2.75rem, 1.2rem + 5.2vw, 6.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hc-cta-title em { font-style: italic; }
.hc-cta-sub {
  max-width: 42rem;
  margin: clamp(1.25rem, 2.2vw, 2rem) 0 0;
  color: var(--hc-silver);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
}
.hc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.hc-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  height: clamp(60px, 5vw, 76px);
  padding: 0 clamp(26px, 2.6vw, 40px);
  border: 1px solid var(--hc-white);
  border-radius: var(--hc-r-pill);
  background: transparent;          /* a <button> (the consultation form) would otherwise get the browser's white fill */
  color: var(--hc-white);
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.5rem);
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
/* hover: a plain white fill with black text (no blue flood) */
.hc-cta-button:hover,
.hc-cta-button:focus-visible { background: var(--hc-white); color: var(--hc-obsidian); }
.hc-cta-button-icon { width: 1.1em; height: 1.1em; flex: none; }
.hc-cta-alt { margin: 0; color: var(--hc-silver); font-size: 1.0625rem; font-weight: 300; }
.hc-cta-alt a { color: var(--hc-white); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.hc-cta-alt a:hover { text-decoration-color: var(--hc-blue); }

/* --------------------------------------------------------------------------
   Kendrick (About page): his photo pinned on the left with his name and signature over
   it, the story on the right. "Henson" writes itself in, stroke by stroke, once the block
   is on screen (.hc-about-on, main.js): an SVG of the glyphs masked by pen strokes.
   -------------------------------------------------------------------------- */
.hc-about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  background: var(--hc-obsidian);
  color: var(--hc-white);
}
.hc-about-media {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
}
.hc-about-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* the photo melts into the black at the bottom and toward the story */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 38%), linear-gradient(to left, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, #000 38%), linear-gradient(to left, transparent 0, #000 22%);
  mask-composite: intersect;
}
.hc-about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 35%;
}
.hc-about-name {
  position: absolute;
  left: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(2rem, 7vh, 5rem);
  margin: 0;
  line-height: 1;
  pointer-events: none;
}
.hc-about-first {
  display: block;
  font-size: clamp(0.875rem, 0.6rem + 0.8vw, 1.375rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
/* the signature: glyphs drawn at 400px in a 962-wide box, so its width is 2.405em */
.hc-about-last {
  display: block;
  margin: 0.04em 0 0 0.12em;
  color: var(--hc-chrome);
  font-size: clamp(4.5rem, 2rem + 8vw, 10.5rem);
  line-height: 1;
}
.hc-about-sig { display: block; width: 2.405em; height: auto; overflow: visible; }
.hc-sig-pen path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.hc-about-on .hc-sig-pen path {
  animation: hc-sig-write var(--t) linear var(--d) forwards;   /* one steady pen speed */
}
html:not(.hc-js) .hc-sig-pen path { stroke-dashoffset: 0; }
@keyframes hc-sig-write { to { stroke-dashoffset: 0; } }

.hc-about-body {
  align-self: center;
  max-width: 40rem;
  padding: 16vh clamp(1.5rem, 5vw, 6rem) 16vh clamp(1rem, 2vw, 2rem);
}
.hc-about-eyebrow {
  margin: 0 0 1rem;
  color: var(--hc-silver);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.hc-about-title {
  margin: 0;
  font-size: clamp(2.75rem, 1rem + 4.6vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hc-about-title em { font-style: italic; }
.hc-about-text {
  margin: clamp(1.25rem, 2.2vw, 2rem) 0 0;
  color: var(--hc-silver);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.55;
}
/* a longer bio: paragraphs stack with a little space */
.hc-about-text + .hc-about-text { margin-top: 1em; }
.hc-about-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.25em;
  border-bottom: 1px solid currentColor;
  color: var(--hc-white);
  font-size: 1.0625rem;
  font-weight: 300;
  text-decoration: none;
  transition: color var(--hc-dur-fast) var(--hc-ease);
}
.hc-about-link svg { width: 1em; height: 1em; }
.hc-about-link:hover,
.hc-about-link:focus-visible { color: var(--hc-blue); }

/* Phones and tablets: photo on top (not pinned), name over its bottom, story below */
@media (max-width: 899px) {
  .hc-about { grid-template-columns: minmax(0, 1fr); }
  .hc-about-media { position: relative; height: 70vh; height: 70svh; }
  .hc-about-photo {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 38%);
    mask-image: linear-gradient(to top, transparent 0, #000 38%);
  }
  .hc-about-name { bottom: 0.5rem; }
  .hc-about-body { max-width: none; padding: 2.5rem 1.5rem 6rem; }
}

/* The photo fades in once the block is on screen, as the signature starts */
.hc-js .hc-about-static .hc-about-media {
  opacity: 0;
  transition: opacity 1.2s var(--hc-ease);
}
.hc-js .hc-about-static.hc-about-on .hc-about-media { opacity: 1; }

/* --------------------------------------------------------------------------
   Section surfaces: everything is black or charcoal. A band is a slightly raised charcoal
   section with hairlines top and bottom, so sections change without a jump to white.
   -------------------------------------------------------------------------- */
.hc-band {
  background: var(--hc-band);
  border-top: 1px solid var(--hc-line);
  border-bottom: 1px solid var(--hc-line);
  color: var(--hc-white);
}
.hc-process { background: var(--hc-obsidian); color: var(--hc-white); }

/* Photos: real photography with no frame, fading into the black on every side */
.hc-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* no frame: the photo melts into the black on every side */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.hc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-photo-wide { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   Founder and team (homepage): photo left, the team line and "Meet Kendrick" right
   -------------------------------------------------------------------------- */
.hc-team { background: var(--hc-obsidian); color: var(--hc-white); }
.hc-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.hc-team .hc-team-areas { margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.hc-team-founder {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hc-line-strong);
}
.hc-team-founder-label { margin: 0; color: var(--hc-silver); font-size: 0.875rem; letter-spacing: 0.04em; }
.hc-team-sig { margin: 0.25rem 0 1rem; color: var(--hc-chrome); font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem); line-height: 1; }
.hc-team-founder .hc-svc-text { max-width: 34rem; color: var(--hc-silver); opacity: 1; }
@media (max-width: 899px) {
  .hc-team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Two ways to work together: two cards, team or Kendrick
   -------------------------------------------------------------------------- */
.hc-ways-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.hc-way {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 22rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
  color: var(--hc-white);
  text-decoration: none;
  transition: background-color 400ms var(--hc-ease), border-color 400ms var(--hc-ease);
}
.hc-js .hc-way.hc-reveal {
  transition: opacity var(--hc-dur-slow) var(--hc-ease), transform var(--hc-dur-slow) var(--hc-ease),
    background-color 400ms var(--hc-ease), border-color 400ms var(--hc-ease);
}
.hc-way:hover,
.hc-way:focus-visible { background: var(--hc-card-hover); border-color: var(--hc-line-strong); }
.hc-way-label { color: var(--hc-gray-text); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hc-way-title { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
.hc-way-text { max-width: 32rem; color: var(--hc-silver); line-height: 1.6; }
.hc-way-price { color: var(--hc-white); font-size: 1.0625rem; }
.hc-way-go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: auto; padding-top: 1rem; font-size: 1.0625rem; }
.hc-way-go svg { width: 1em; height: 1em; transition: transform 400ms var(--hc-ease); }
.hc-way:hover .hc-way-go svg,
.hc-way:focus-visible .hc-way-go svg { transform: rotate(45deg); }
@media (max-width: 899px) {
  .hc-ways-grid { grid-template-columns: minmax(0, 1fr); }
  .hc-way { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Sub-page hero visuals: the bot (Services, Results, Contact) or a real photo
   (Consulting, About) on the right; the text keeps to the left of it.
   -------------------------------------------------------------------------- */
.hc-hero-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--hc-hero-x);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(36vw, 34rem);
}
.hc-hero-visual .hc-block-mount { width: 100%; height: 76vh; height: 76svh; }
.hc-hero-visual .hc-bot-img { width: auto; max-width: 100%; max-height: 62vh; max-height: 62svh; }
/* the still bot (404 page): a slow, small float; reduced motion keeps it still */
.hc-bot-img { display: block; height: auto; }
.hc-js .hc-bot-float { animation: hc-float 6s ease-in-out infinite alternate; }
@keyframes hc-float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}
.hc-hero-photo {
  position: absolute;
  top: clamp(4.5rem, 7vw, 6rem);
  bottom: clamp(3rem, 5vw, 4rem);
  right: var(--hc-hero-x);
  z-index: 0;
  width: min(36vw, 34rem);
  margin: 0;
  overflow: hidden;
  /* no frame: the photo melts into the black on every side */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.hc-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hc-svc-hero .hc-hero-content { max-width: calc(100% - min(36vw, 34rem) - 2rem); }
  .hc-svc-hero .hc-hero-title { white-space: normal; }
}
.hc-hero-note { max-width: 40rem; margin: 0.9rem 0 0; color: var(--hc-gray-text); font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); font-weight: 300; line-height: 1.5; }
.hc-hero-price { margin: 1.25rem 0 0; color: var(--hc-white); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.hc-hero-buttons { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Footer — four link columns on black, then the social
   pills bottom left and the legal line bottom right (proportions taken from the reference:
   columns on a 4-up grid with ~7% side margins, headings ~1.6× the link size)
   -------------------------------------------------------------------------- */
.hc-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 7.5vw, 7rem) 0 clamp(7rem, 9vw, 8.5rem);   /* bottom clears the dock */
  background: var(--hc-obsidian);
  color: var(--hc-white);
}
.hc-footer-inner {
  position: relative;
  z-index: 6;                      /* above the falling box */
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 6.8vw, 8.5rem);
}
.hc-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 3rem;
}
.hc-footer-heading {
  margin: 0 0 clamp(1.75rem, 3.4vw, 3rem);
  color: inherit;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hc-footer-list { margin: 0; padding: 0; list-style: none; }
.hc-footer-list li + li { margin-top: clamp(0.7rem, 1.1vw, 1rem); }
.hc-footer-link,
.hc-footer-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.45;
  text-decoration: none;
}
.hc-footer-text { display: block; max-width: 16rem; color: var(--hc-silver); }
.hc-footer-link { overflow-wrap: anywhere; }       /* the email address on narrow columns */
/* Underline draws on hover, as on the reference ("Marketing Analytics") */
.hc-footer-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 300ms var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
.hc-footer-link:hover,
.hc-footer-link:focus-visible { color: var(--hc-white); background-size: 100% 1px; }

.hc-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(4rem, 7vw, 6.5rem);
}
.hc-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Pill links: icon, name, and an arrow that turns on hover (like the case-card arrows) */
.hc-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--hc-r-pill);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hc-white);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
.hc-footer-social-icon { width: 18px; height: 18px; flex: none; }
.hc-footer-social-arrow {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.6;
  transition: transform 300ms var(--hc-ease), opacity var(--hc-dur-fast) var(--hc-ease);
}
/* hover: a little lighter, with the arrow turning */
.hc-footer-social:hover,
.hc-footer-social:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
.hc-footer-social:hover .hc-footer-social-arrow,
.hc-footer-social:focus-visible .hc-footer-social-arrow { opacity: 1; transform: rotate(45deg); }
/* Full logo above the legal line, right-aligned with it */
.hc-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.hc-footer-logo { display: block; color: var(--hc-white); }
.hc-footer-logo-svg { display: block; width: clamp(180px, 15vw, 240px); height: auto; }
.hc-footer-legal {
  margin: 0;
  color: var(--hc-silver);
  font-size: 0.875rem;
  font-weight: 300;
}

/* Tablets: two columns; phones: still two (short lists), headings smaller */
@media (max-width: 1023px) {
  .hc-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .hc-footer-cols { column-gap: 1rem; }
  .hc-footer-heading { margin-bottom: 1.25rem; }
  .hc-footer-link, .hc-footer-text { font-size: 0.9375rem; }
  .hc-footer-bottom { flex-direction: column; align-items: flex-start; }
  .hc-footer-brand { align-items: flex-start; }
  .hc-footer-col:last-child { grid-column: 1 / -1; }   /* Contact full width: the email fits */
  .hc-footer-text { max-width: none; }
}

/* --------------------------------------------------------------------------
   Dock — floating bottom navigation (fixed)
   -------------------------------------------------------------------------- */
.hc-dock {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2.2vw, 32px);
  z-index: var(--hc-z-nav);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 8px;
  border-radius: 96px;
  background: var(--hc-dock);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}


.hc-dock-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--hc-r-pill);
  background: var(--hc-dock);
  color: var(--hc-white);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
/* the page you're on (sub pages mark their own link aria-current="page") reads in Henson Blue */
.hc-dock-link[aria-current="page"] { color: var(--hc-blue); }
.hc-dock-link:hover,
.hc-dock-link:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--hc-white); }


/* Phones: tighter links so all six fit */
@media (max-width: 559px) {
  .hc-dock { gap: 0; height: 46px; padding: 0 4px; }
  .hc-dock-link { height: 36px; padding: 0 7px; font-size: 0.78rem; }
}
@media (max-width: 389px) {
  .hc-dock-link { padding: 0 5px; font-size: 0.72rem; }
}

@media (max-width: 479px) {
  .hc-btn-full-mobile { flex: 1 1 100%; width: 100%; }
}

/* Entrance: transform only, so text is painted (and LCP counted) immediately */
@keyframes hc-rise {
  from { transform: translateY(18px); }
  to { transform: none; }
}
@keyframes hc-fade-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hc-rise { animation: hc-rise var(--hc-dur-slow) var(--hc-ease) both; }
.hc-fade-rise { animation: hc-fade-rise var(--hc-dur-slow) var(--hc-ease) both; }
.hc-delay-1 { animation-delay: 80ms; }
.hc-delay-2 { animation-delay: 160ms; }
.hc-delay-3 { animation-delay: 240ms; }

/* --------------------------------------------------------------------------
   Cursor circle — a white disc in "difference" blend, so it inverts what it covers.
   Mouse and trackpad only; it grows over links and buttons. The normal cursor stays visible.
   -------------------------------------------------------------------------- */
.hc-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--hc-z-cursor);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--hc-white);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition:
    width 260ms var(--hc-ease),
    height 260ms var(--hc-ease),
    margin 260ms var(--hc-ease),
    background-color 260ms var(--hc-ease),
    opacity 200ms var(--hc-ease);
}
.hc-cursor-on { opacity: 1; }
/* Two layers make only the part of the circle that overlaps text turn Henson Blue:
   dark backgrounds   tint multiplies by #ca4802 (white minus Henson Blue), then the white
                      main layer inverts: black stays white, white text becomes Henson Blue
   light backgrounds  (.hc-cursor-light) tint inverts with white, then main multiplies by
                      Henson Blue: white stays black, black text becomes Henson Blue */
.hc-cursor-tint { background: #ca4802; mix-blend-mode: multiply; }
.hc-cursor-tint.hc-cursor-light { background: var(--hc-white); mix-blend-mode: difference; }
.hc-cursor-main.hc-cursor-light { background: var(--hc-blue); mix-blend-mode: multiply; }
.hc-cursor-tint.hc-cursor-solid { opacity: 0; }
/* Over a button: a solid black circle with a white copy of the label lined up inside it */
.hc-cursor-main { overflow: hidden; }
.hc-cursor-clone {
  position: absolute !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--hc-white) !important;
  transition: none !important;
  pointer-events: none;
}
.hc-cursor-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.hc-cursor-down { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.hc-cursor-solid { mix-blend-mode: normal; background: var(--hc-obsidian); }

@media (hover: none), (pointer: coarse) {
  .hc-cursor { display: none; }
}

/* --------------------------------------------------------------------------
   Reveal system — JS adds .hc-is-visible; hidden state only applies with JS
   -------------------------------------------------------------------------- */
.hc-js .hc-reveal {
  opacity: 0;
  transform: translateY(var(--hc-reveal-shift));
  transition: opacity var(--hc-dur-slow) var(--hc-ease), transform var(--hc-dur-slow) var(--hc-ease);
}
.hc-js .hc-reveal.hc-is-visible { opacity: 1; transform: none; }

/* Word by word (main.js splits [data-hc-words]): the line itself stays put and each word
   floats up from just below, sharpening from a soft blur as it lands */
.hc-js .hc-reveal[data-hc-words] { opacity: 1; transform: none; }
.hc-word { display: inline-block; }
/* Going: words sink back down, last word first (--hc-wd-out), a little quicker */
.hc-js .hc-word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(6px);
  transition: opacity 0.6s var(--hc-ease), transform 0.7s var(--hc-ease), filter 0.6s var(--hc-ease);
  transition-delay: var(--hc-wd-out, 0ms);
}
/* Coming: words float up one after another (--hc-wd) */
.hc-js .hc-is-visible .hc-word-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s var(--hc-ease), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s var(--hc-ease);
  transition-delay: var(--hc-wd, 0ms);
}

/* ==========================================================================
   SERVICES PAGE (services.html) — hero, pillars, service details with a sticky
   index, how it connects, how we work. Animations are kept simple on purpose
   (fade-and-rise reveals only); add richer motion later.
   ========================================================================== */

/* Shared bits */
.hc-svc-wrap {
  width: 100%;
  max-width: 87.5rem;                       /* same width as the case grid */
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3.5vw, 3.5rem);
}
.hc-svc-h2 {
  max-width: 54rem;
  margin: 0;
  color: inherit;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hc-svc-h2 em { font-style: italic; }
.hc-svc-intro {
  max-width: 44rem;
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
  color: inherit;
  opacity: 0.68;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.5;
}
.hc-js .hc-svc-intro.hc-reveal.hc-is-visible { opacity: 0.68; }
.hc-svc-num {
  color: inherit;
  opacity: 0.64;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.hc-svc-text {
  margin: 0;
  color: inherit;
  opacity: 0.78;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
}
.hc-svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-svc-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: var(--hc-r-pill);
  color: inherit;
  font-size: 0.875rem;
  font-weight: 300;
  white-space: nowrap;
  opacity: 0.8;
}
.hc-svc-text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.hc-svc-text-link:hover { text-decoration-color: var(--hc-blue); }
/* staggered reveals (the hc-delay classes only delay animations elsewhere) */
.hc-js .hc-reveal.hc-delay-1 { transition-delay: 120ms; }
.hc-js .hc-reveal.hc-delay-2 { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   Sub-page heroes: the homepage hero layout, two lines, a visual on the right (the bot or a
   real photo, see "Sub-page hero visuals")
   -------------------------------------------------------------------------- */
.hc-svc-eyebrow {
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  color: var(--hc-silver);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Sized so the longest sub-page line ("Work through your next move", ~12.5em) fits beside the
   hero visual (which takes about a third of the width) */
.hc-svc-hero-title { font-size: clamp(2.5rem, 4.1vw, 5.25rem); }
@media (max-width: 767px) {
  /* lines may wrap on phones, so the title can stay big */
  .hc-svc-hero-title { font-size: clamp(2.25rem, 10.5vw, 3.25rem); white-space: normal; }
}

/* --------------------------------------------------------------------------
   Three groups: Attract demand, Convert opportunities, Improve performance
   -------------------------------------------------------------------------- */
.hc-group-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
}
.hc-group-name { margin: 0.25rem 0 0; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.375rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
.hc-group-text { margin: 0; color: var(--hc-silver); line-height: 1.55; }
.hc-group-links { margin: auto 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--hc-line); }
.hc-group-links a {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  color: var(--hc-white);
  font-size: 1.0625rem;
  text-decoration: none;
  transition: color var(--hc-dur-fast) var(--hc-ease);
}
.hc-group-links a span { color: var(--hc-gray-text); transition: transform var(--hc-dur) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease); }
.hc-group-links a:hover span,
.hc-group-links a:focus-visible span { color: var(--hc-blue); transform: translateX(4px); }
@media (max-width: 899px) {
  .hc-group-list { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Service details and case studies: black, sticky index left, chapters right
   -------------------------------------------------------------------------- */
.hc-svc-details {
  background: var(--hc-obsidian);
  color: var(--hc-white);
}
.hc-svc-details-grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.hc-svc-index {
  position: sticky;
  top: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.hc-svc-index-title {
  margin: 0 0 1.25rem;
  color: var(--hc-gray-text);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hc-svc-index-list { margin: 0; padding: 0; list-style: none; }
.hc-svc-index-link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  color: var(--hc-gray-text);
  font-size: 1.0625rem;
  font-weight: 300;
  text-decoration: none;
  transition: color var(--hc-dur) var(--hc-ease);
}
.hc-svc-index-num { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.hc-svc-index-link:hover,
.hc-svc-index-link.hc-is-current { color: var(--hc-white); }
/* a Henson Blue dot marks the chapter in view */
.hc-svc-index-link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--hc-blue);
  align-self: center;
  opacity: 0;
  transition: opacity var(--hc-dur) var(--hc-ease);
}
.hc-svc-index-link.hc-is-current::after { opacity: 1; }

.hc-svc-chapter {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--hc-line);
  scroll-margin-top: 1rem;
}
.hc-svc-chapter:last-child { border-bottom: 0; }
.hc-svc-chapter-pillar {
  margin: 0 0 1rem;
  color: var(--hc-silver);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.hc-svc-chapter-title {
  margin: 0;
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hc-svc-chapter-lead {
  max-width: 46rem;
  margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;
  font-size: clamp(1.1875rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
}
.hc-svc-included { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hc-svc-label {
  margin: 0 0 0.9rem;
  color: var(--hc-gray-text);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hc-svc-fine { max-width: 40rem; margin: 1rem 0 0; color: var(--hc-gray-text); font-size: 0.9375rem; line-height: 1.55; }
.hc-svc-fine a { color: var(--hc-white); text-underline-offset: 0.2em; }
.hc-svc-connects {
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  color: var(--hc-silver);
  font-size: 0.9375rem;
  font-weight: 300;
}
.hc-svc-connects a { color: var(--hc-white); text-underline-offset: 0.2em; }
.hc-svc-connects a:hover { text-decoration-color: var(--hc-blue); }
.hc-svc-chapter-consult .hc-cta-actions { margin-top: 1.75rem; }
.hc-svc-chapter-consult .hc-about-link { margin-top: 0; }
/* Tablets and phones: no side index column, chapters full width */
@media (max-width: 899px) {
  .hc-svc-details-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Example visuals on the Services page. Each is labelled as an example: they show how the
   work is structured and never carry client figures.
   -------------------------------------------------------------------------- */
.hc-demo {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
}
.hc-demo-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  color: var(--hc-gray-text);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hc-demo-label span:last-child { flex: none; padding: 0 0.6rem; border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r-pill); color: var(--hc-silver); line-height: 1.6; }
.hc-demo-foot { margin: 1rem 0 0; color: var(--hc-silver); font-size: 0.9375rem; }
.hc-demo ol, .hc-demo ul { margin: 0; padding: 0; list-style: none; }
.hc-demo-inner, .hc-demo-ad, .hc-demo-node, .hc-demo-card, .hc-demo-kpi, .hc-demo-chart {
  border: 1px solid var(--hc-line);
  background: var(--hc-obsidian);
}

/* paid ads: three creative angles in one test */
.hc-demo-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 12px; }
.hc-demo-ad { display: flex; flex-direction: column; gap: 0.6rem; padding: 12px; border-radius: var(--hc-r-md); }
.hc-demo-ad-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: linear-gradient(160deg, #202024, #0c0c0d);
  color: var(--hc-gray-text);
  font-size: 0.8125rem;
}
.hc-demo-ad-hook { margin: 0; color: var(--hc-white); font-size: 0.9375rem; line-height: 1.35; }
.hc-demo-chip { display: inline-flex; align-items: center; align-self: flex-start; height: 24px; padding: 0 10px; border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r-pill); color: var(--hc-silver); font-size: 0.75rem; }
.hc-demo-chip-on { border-color: rgba(53, 183, 253, 0.5); color: var(--hc-blue); }

/* creative: a four-frame storyboard */
.hc-demo-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 9.5rem)); gap: 14px; }
.hc-demo-frame { display: flex; flex-direction: column; gap: 0.2rem; }
.hc-demo-frame-screen {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 9 / 16;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: linear-gradient(170deg, #1e1e22, #0b0b0c);
  color: var(--hc-gray-text);
  font-size: 0.75rem;
}
.hc-demo-frame-step { color: var(--hc-gray-text); font-size: 0.75rem; }
.hc-demo-frame-title { color: var(--hc-white); font-size: 0.9375rem; }

/* websites: desktop and phone layout, annotated */
.hc-demo-site { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 16px; align-items: end; }
.hc-demo-browser { overflow: hidden; border: 1px solid var(--hc-line-strong); border-radius: 12px; background: var(--hc-obsidian); }
.hc-demo-browser-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--hc-line); }
.hc-demo-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-line-strong); }
.hc-demo-browser-body, .hc-demo-phone { display: grid; gap: 10px; align-content: start; }
.hc-demo-browser-body { padding: 16px 18px 20px; }
.hc-demo-phone { aspect-ratio: 9 / 18; padding: 22px 10px 10px; border: 1px solid var(--hc-line-strong); border-radius: 22px; background: var(--hc-obsidian); }
.hc-demo-note { color: var(--hc-blue); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-demo-line { display: block; height: 10px; border-radius: 5px; background: #2a2a2e; }
.hc-demo-line-soft { background: #1c1c1f; }
.hc-demo-btn { display: block; width: 7.5rem; max-width: 80%; height: 24px; border-radius: var(--hc-r-pill); background: var(--hc-soft); }
.hc-demo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.hc-demo-tiles i { height: 36px; border-radius: 8px; background: #1c1c1f; }
.hc-demo-form { display: block; height: 46px; border: 1px dashed var(--hc-line-strong); border-radius: 8px; }

/* strategy: three phases */
.hc-demo-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hc-demo-road li { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 14px; border-top: 2px solid var(--hc-line-strong); color: var(--hc-silver); font-size: 0.9375rem; line-height: 1.5; }
.hc-demo-road .hc-demo-road-now { border-top-color: var(--hc-blue); }
.hc-demo-road-step { color: var(--hc-gray-text); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-demo-road b { color: var(--hc-white); font-size: 1.25rem; font-weight: 300; }

/* CRM: a pipeline board and a follow-up sequence */
.hc-demo-pipe { display: grid; grid-template-columns: repeat(5, minmax(7.5rem, 1fr)); gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hc-demo-pipe::-webkit-scrollbar { display: none; }
.hc-demo-col h5 { margin: 0 0 0.6rem; color: var(--hc-gray-text); font-size: 0.6875rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.hc-demo-card { margin-bottom: 8px; padding: 10px; border-radius: 10px; color: var(--hc-gray-text); font-size: 0.8125rem; line-height: 1.4; }
.hc-demo-card b { display: block; color: var(--hc-white); font-size: 0.875rem; font-weight: 300; }
.hc-demo-card-won { border-color: rgba(63, 207, 142, 0.45); }
.hc-demo-seq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 1.25rem !important; }
.hc-demo-seq li { position: relative; padding-top: 16px; border-top: 1px solid var(--hc-line-strong); color: var(--hc-silver); font-size: 0.875rem; line-height: 1.45; }
.hc-demo-seq li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-silver); }
.hc-demo-seq b { display: block; margin-bottom: 0.3rem; color: var(--hc-gray-text); font-size: 0.6875rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }

/* AI and automation: trigger, automated step, human handoff */
.hc-demo-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.hc-demo-node { padding: 14px; border-radius: 12px; }
.hc-demo-node-human { border-color: rgba(53, 183, 253, 0.45); }
.hc-demo-node b { color: var(--hc-gray-text); font-size: 0.6875rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-demo-node-human b { color: var(--hc-blue); }
.hc-demo-node p { margin: 0.4rem 0 0; color: var(--hc-white); font-size: 0.9375rem; line-height: 1.4; }
.hc-demo-arrow { align-self: center; color: var(--hc-steel); }

/* tracking: a demonstration dashboard with no numbers */
.hc-demo-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hc-demo-kpi { padding: 12px; border-radius: 10px; }
.hc-demo-kpi span { color: var(--hc-gray-text); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-demo-kpi i { display: block; height: 6px; margin-top: 0.9rem; border-radius: 3px; background: var(--hc-line); }
.hc-demo-kpi em { display: block; height: 100%; border-radius: inherit; background: var(--hc-silver); }
.hc-demo-kpi .hc-demo-money { background: var(--hc-green); }
.hc-demo-chart { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 12px; border-radius: 10px; }
.hc-demo-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(to top, #2a2a2e, #45474c); }

@media (max-width: 767px) {
  .hc-demo-ads, .hc-demo-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-demo-ad:last-child { display: none; }
  .hc-demo-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-demo-site { grid-template-columns: minmax(0, 1fr); }
  .hc-demo-phone { display: none; }
  .hc-demo-road, .hc-demo-seq { grid-template-columns: minmax(0, 1fr); }
  .hc-demo-flow { grid-template-columns: minmax(0, 1fr); }
  .hc-demo-arrow { justify-self: center; transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   How it connects: five stages from ad spend to won revenue (green)
   -------------------------------------------------------------------------- */
.hc-svc-flow-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-svc-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem 1.25rem 0 0;
  border-top: 1px solid var(--hc-line-strong);
}
/* a dot where each stage meets the line */
.hc-svc-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hc-silver);
}
.hc-svc-stage-name { color: var(--hc-gray-text); font-size: 0.875rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; }
.hc-svc-stage-num {
  font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hc-svc-stage-money .hc-svc-stage-num { color: var(--hc-green); }
.hc-svc-stage-money::before { background: var(--hc-green); }
.hc-svc-note { margin: clamp(2rem, 4vw, 3rem) 0 0; color: var(--hc-silver); font-size: 0.9375rem; font-weight: 300; }
@media (max-width: 899px) {
  .hc-svc-flow-list { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--hc-line-strong); margin-left: 4px; }
  .hc-svc-stage { padding: 0 0 2rem 1.5rem; border-top: 0; }
  .hc-svc-stage::before { left: -5px; top: 0.3rem; }
}

/* --------------------------------------------------------------------------
   How we work: black, three steps
   -------------------------------------------------------------------------- */
.hc-svc-process { background: var(--hc-obsidian); color: var(--hc-white); }
.hc-svc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-svc-step { padding-top: 1.5rem; border-top: 1px solid var(--hc-line-strong); }
.hc-svc-step-title {
  margin: 0.75rem 0 1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hc-svc-step .hc-svc-text { color: var(--hc-silver); opacity: 1; }
@media (max-width: 899px) {
  .hc-svc-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   RESULTS PAGE (results.html): reuses the Services page layout (hc-svc-*: hero, sticky
   index and chapters, all on black) and adds the hero figures, client logos, the
   challenge/work/services list, the six figures and the lead-to-job bars.
   Money is green: won revenue strongest, pipeline value muted. Ad spend stays neutral.
   ========================================================================== */

/* Hero: his three experience figures under the subtitle */
.hc-res-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
}
.hc-res-hero-stats div { display: flex; flex-direction: column-reverse; gap: 0.35rem; max-width: 13rem; }
.hc-res-hero-stats dt { color: var(--hc-silver); font-size: 0.875rem; font-weight: 300; line-height: 1.4; }
.hc-res-hero-stats dd { margin: 0; color: var(--hc-white); font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.hc-res-hero-stats .hc-res-hero-money dd { color: var(--hc-green); }

/* The section heading sits above the index and chapters */
.hc-res-intro { margin-bottom: clamp(0.5rem, 2vw, 1.5rem); }

/* Case study header: logo circle, then the meta line and the client's name */
.hc-res-case-head { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); }
.hc-res-case-head .hc-svc-chapter-pillar { margin-bottom: 0.6rem; }
.hc-res-logo {
  flex: none;
  width: clamp(56px, 6vw, 88px);
  height: clamp(56px, 6vw, 88px);
  border-radius: 50%;
  background: #ffffff;
  object-fit: cover;
}
.hc-res-verified { color: var(--hc-blue); }

/* The challenge, the work and the services used */
.hc-res-story { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; border-top: 1px solid var(--hc-line); }
.hc-res-story div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hc-line); }
.hc-res-story dt { padding-top: 0.2rem; color: var(--hc-gray-text); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-res-story dd { margin: 0; max-width: 42rem; color: var(--hc-silver); font-size: 1.0625rem; line-height: 1.6; }
.hc-res-story a { color: var(--hc-white); text-underline-offset: 0.2em; }
.hc-res-story a:hover { text-decoration-color: var(--hc-blue); }
.hc-res-label { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* Six figures, three across */
.hc-res-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--hc-line);
}
.hc-res-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4rem;
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: 1px solid var(--hc-line);
}
.hc-res-stat dt { color: var(--hc-gray-text); font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-res-stat dt span { letter-spacing: 0.04em; text-transform: none; }
.hc-res-stat dd {
  margin: 0;
  font-size: clamp(1.625rem, 1rem + 1.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hc-res-stat-pipe dd { color: var(--hc-green-soft); }
.hc-res-stat-money dd { color: var(--hc-green); }

/* Leads → opportunities → won jobs, widths as a share of leads */
.hc-res-funnel { max-width: 40rem; margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.hc-res-bar {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  font-weight: 300;
}
.hc-res-bar-label { color: var(--hc-silver); }
.hc-res-bar-track { height: 10px; border-radius: var(--hc-r-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.hc-res-bar-fill { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--hc-steel); }
.hc-res-bar:last-child .hc-res-bar-fill { background: var(--hc-silver); }
.hc-res-bar-num { text-align: right; font-variant-numeric: tabular-nums; }
.hc-res-note { margin: 1.25rem 0 0; color: var(--hc-gray-text); font-size: 0.8125rem; font-weight: 300; }
.hc-res-note a { margin-left: 0.4em; color: var(--hc-silver); text-underline-offset: 0.2em; }

/* What the figures mean: six definitions, three across */
.hc-res-defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
}
.hc-res-def { padding-top: 1.25rem; border-top: 1px solid var(--hc-line-strong); }
.hc-res-def dt { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: 300; }
.hc-res-def dd { margin: 0; color: var(--hc-silver); font-size: 1rem; font-weight: 300; line-height: 1.55; }
.hc-res-def-pipe { border-top-color: var(--hc-green-soft); }
.hc-res-def-pipe dt { color: var(--hc-green-soft); }
.hc-res-def-money { border-top-color: var(--hc-green); }
.hc-res-def-money dt { color: var(--hc-green); }

@media (max-width: 899px) {
  .hc-res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-res-defs { grid-template-columns: minmax(0, 1fr); }
  .hc-res-story div { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}
@media (max-width: 479px) {
  .hc-res-bar { grid-template-columns: 6.25rem minmax(0, 1fr) 2.75rem; font-size: 0.875rem; }
}

/* ==========================================================================
   CONSULTING PAGE (consulting.html): photo hero, the session picker beside the booking
   panel, the three steps and the topics. ABOUT PAGE and 404 share a few pieces.
   ========================================================================== */

/* Topics: two columns of numbered rows */
.hc-con-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-con-topic {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
  border-top: 1px solid var(--hc-line-strong);
}
.hc-con-topic .hc-svc-num { padding-top: 0.6rem; }
.hc-con-topic-name { margin: 0; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }
.hc-con-topic-text { grid-column: 2; margin: 0.6rem 0 0; color: var(--hc-silver); font-size: 1.0625rem; font-weight: 300; line-height: 1.55; }

/* Sessions: the options on the left, the booking panel (GHL calendar) on the right */
.hc-sessions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hc-session-list { display: grid; gap: 12px; margin: clamp(2rem, 3.5vw, 3rem) 0 0; padding: 0; list-style: none; }
.hc-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--hc-r-md);
  background: var(--hc-card);
  color: var(--hc-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--hc-dur-fast) var(--hc-ease), background-color var(--hc-dur-fast) var(--hc-ease);
}
.hc-session:hover { background: var(--hc-card-hover); }
.hc-session[aria-pressed="true"] { border-color: var(--hc-white); background: var(--hc-card-hover); }
.hc-session-static { border-style: dashed; cursor: default; }
.hc-session-static:hover { background: var(--hc-card); }
.hc-session-name, .hc-session-price { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 300; line-height: 1.2; }
.hc-session-price { font-variant-numeric: tabular-nums; }
.hc-session-text { grid-column: 1 / -1; color: var(--hc-silver); font-size: 0.9375rem; line-height: 1.5; }
.hc-booking { overflow: hidden; border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); background: var(--hc-card); }
.hc-booking-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--hc-line);
  color: var(--hc-silver);
  font-size: 0.9375rem;
}
.hc-booking-head strong { color: var(--hc-white); font-weight: 300; }
.hc-booking-body { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; min-height: 24rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
.hc-booking-title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); font-weight: 300; line-height: 1.2; }
.hc-booking-text { max-width: 30rem; margin: 0; color: var(--hc-silver); line-height: 1.6; }
.hc-booking-text a { color: var(--hc-white); text-underline-offset: 0.2em; }
.hc-booking-frame { display: block; width: 100%; min-height: 640px; border: 0; }
.hc-booking-body:has(.hc-booking-frame) { padding: 0; }

/* About page: heading left, copy right */
.hc-ab-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.hc-ab-copy .hc-svc-intro:first-child { margin-top: 0; }
.hc-ab-copy .hc-svc-tags { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; }

/* 404 page: the button and a plain link side by side */
.hc-nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.25rem; }
.hc-nf-actions .hc-cta-button { margin-top: 0; }
.hc-nf-actions .hc-about-link { margin-top: 0; }

@media (max-width: 899px) {
  .hc-con-topics, .hc-sessions, .hc-ab-split { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CONTACT PAGE (contact.html): hero with the ways to get in touch, then his booking
   survey embedded beside the contact details. Reuses hc-svc-*.
   ========================================================================== */

/* Hero: the contact options in a row under the subtitle */
.hc-ct-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 12px;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-ct-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--hc-r-md);
  background: var(--hc-card);
  color: var(--hc-white);
  text-decoration: none;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease);
}
.hc-ct-option-label { color: var(--hc-gray-text); font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-ct-option-value { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); font-weight: 300; }
.hc-ct-option-key { border-color: var(--hc-white); }
.hc-ct-option:hover,
.hc-ct-option:focus-visible { background: var(--hc-card-hover); border-color: var(--hc-white); }

/* Booking: details on the left, the embedded survey on the right */
.hc-ct-book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hc-ct-book-copy { position: sticky; top: clamp(1.5rem, 4vw, 3rem); }
.hc-ct-book-copy .hc-svc-intro + .hc-svc-intro { margin-top: 1rem; }
.hc-ct-details { margin: clamp(2rem, 3.5vw, 3rem) 0 clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--hc-line-strong); }
.hc-ct-details div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hc-line-strong); }
.hc-ct-details dt { padding-top: 0.2rem; color: var(--hc-gray-text); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-ct-details dd { margin: 0; font-size: 1.0625rem; font-weight: 300; }
.hc-ct-details a { color: inherit; text-underline-offset: 0.2em; }
.hc-ct-details a:hover { text-decoration-color: var(--hc-blue); }
.hc-ct-book-copy .hc-svc-fine { margin: 0 0 1.5rem; }
.hc-ct-socials .hc-footer-social { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* his survey is styled for a dark page (white labels), so it sits on a black card */
.hc-ct-form {
  overflow: hidden;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-obsidian);
}
.hc-ct-frame { display: block; width: 100%; min-height: 640px; border: 0; overflow: hidden; }   /* GHL's embed script sets the real height to fit each step */
.hc-ct-form-alt { margin: 0; padding: 0.9rem 1.25rem; border-top: 1px solid var(--hc-line-strong); color: var(--hc-silver); font-size: 0.875rem; font-weight: 300; }
.hc-ct-form-alt a { color: inherit; }

@media (max-width: 899px) {
  .hc-ct-options { grid-template-columns: minmax(0, 1fr); }
  .hc-ct-book-grid { grid-template-columns: minmax(0, 1fr); }
  .hc-ct-book-copy { position: static; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
/* Headings break into even lines (no single word left on the last line) */
h1, h2, h3 { text-wrap: balance; }

/* Homepage hero booking button: phones only (desktop and tablets use the one top right) */
.hc-hero-actions { display: none; }

/* Tablets and phones (≤899px): the chapter index on Services and Results becomes a row of
   chips that sticks to the top while you read, instead of the desktop side column */
@media (max-width: 899px) {
  .hc-svc-index {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 calc(-1 * clamp(1.25rem, 3.5vw, 3.5rem));   /* full bleed: the .hc-svc-wrap gutter */
    padding: 0.75rem clamp(1.25rem, 3.5vw, 3.5rem);
    background: var(--hc-obsidian);
    border-bottom: 1px solid var(--hc-line);
  }
  .hc-svc-index-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .hc-svc-index-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hc-svc-index-list::-webkit-scrollbar { display: none; }
  .hc-svc-index-link {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--hc-line-strong);
    border-radius: var(--hc-r-pill);
    align-items: center;
    font-size: 0.875rem;
    color: var(--hc-silver);
    white-space: nowrap;
  }
  .hc-svc-index-num, .hc-svc-index-link::after { display: none; }
  .hc-svc-index-link.hc-is-current { background: var(--hc-white); border-color: var(--hc-white); color: var(--hc-obsidian); }
}

/* Tablets in portrait (768–1023px wide, taller than wide): the 3D object would sit under the
   title, so it gets its own band: above the text on the homepage, below it on sub pages.
   --hcb-stack tells the blocks to centre it in the band. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hc-hero { justify-content: flex-start; padding-top: 7.5rem; padding-bottom: 5rem; }
  .hc-hero-object {
    --hcb-stack: 1;
    position: relative;
    inset: auto;
    flex: none;
    height: 36svh;
    margin: 0 calc(-1 * var(--hc-hero-x)) 2rem calc(-1 * var(--hc-hero-inset));
  }
  .hc-svc-hero { justify-content: center; }
  .hc-svc-hero .hc-hero-object { order: 2; height: 34svh; margin-top: 3rem; margin-bottom: 0; }
  .hc-svc-hero-title { font-size: 6.2vw; }          /* nothing beside it now: back to full size */
}

/* ==========================================================================
   PHONES (≤767px) — phone-only layout. Nothing here reaches tablets or desktop.
   - the dock moves to the top (the browser's own bar sits at the bottom on phones), with
     the logo and the booking button in a row just under it, scrolling away with the page
   - each hero stacks: the 3D object in its own band on top, the text below it (no longer
     behind it)
   - the closing CTA loses its full-screen height
   - the footer condenses: small headings, links flowing in rows, icon-only social buttons
   ========================================================================== */
@media (max-width: 767px) {
  :root { --hc-mnav: calc(env(safe-area-inset-top, 0px) + 66px); }   /* dock top + height + gap */

  /* nav at the top, stretched across the screen; the logo sits under it (the booking
     button is dropped here, the page has its own) */
  .hc-dock {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    bottom: auto;
    left: 8px;
    right: 8px;
    justify-content: space-evenly;   /* equal space between and around every link */
    padding: 0;
    transform: none;
  }
  .hc-dock-link { padding: 0; }      /* the even spacing does the separating */
  .hc-topbar { top: var(--hc-mnav); padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .hc-topbar-cta { display: none; }
  .hc-logo-lockup { height: 26px; }

  /* heroes: object band on top, text underneath */
  .hc-hero {
    justify-content: flex-start;
    padding-top: calc(var(--hc-mnav) + 54px);
    padding-bottom: 3rem;
  }
  .hc-hero-object,
  .hc-svc-hero .hc-hero-object {
    position: relative;
    inset: auto;
    flex: none;
    height: 34svh;
    min-height: 220px;
    margin: 0 calc(-1 * var(--hc-hero-x)) 1.25rem calc(-1 * var(--hc-hero-inset));
    opacity: 1;
  }
  .hc-hero-lead { margin-top: 1.25rem; }
  /* sub pages: no sculpture on phones, just the text, filling the first screen on its own
     (centred under the logo) so the next section waits below the fold. The homepage keeps
     its H above the text. */
  .hc-svc-hero {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    padding-top: calc(var(--hc-mnav) + 64px);
    padding-bottom: 4rem;
  }
  /* Results and Contact carry more in the hero (stats, contact cards): the title block fills
     the first screen and the extras wait just below it */
  .hc-hero-split { justify-content: flex-start; }
  .hc-hero-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--hc-mnav) - 64px - 1rem);
  }
  .hc-svc-hero .hc-hero-object { display: none; }
  /* sub-page titles: lines that wrap break into even lengths (no word left alone) */
  .hc-svc-hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .hc-svc-hero-title .hc-hero-line-inner { text-wrap: balance; }

  /* CTA: content height, not a full screen */
  .hc-cta { min-height: 0; padding: 4.5rem clamp(0.75rem, 1.4vw, 1.25rem) 3.75rem; }
  .hc-cta-button { margin-top: 2rem; }

  /* footer, condensed */
  .hc-footer { padding: 2.5rem 0 2.25rem; }
  .hc-footer-cols { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  .hc-footer-col:last-child { grid-column: auto; }
  .hc-footer-heading {
    margin: 0 0 0.6rem;
    color: var(--hc-silver);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hc-footer-list { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; }
  .hc-footer-list li + li { margin-top: 0; }
  .hc-footer-link, .hc-footer-text { font-size: 0.9375rem; }
  .hc-footer-text { flex-basis: 100%; font-size: 0.875rem; }
  .hc-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .hc-footer-socials { gap: 6px; flex-wrap: nowrap; }
  .hc-footer-social { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .hc-footer-social-arrow { display: none; }
  .hc-footer-social-name {                                           /* kept for screen readers */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* socials left, logo right, the legal line on its own row underneath */
  .hc-footer-brand { display: contents; }
  .hc-footer-logo-svg { width: 112px; }
  .hc-footer-legal { flex-basis: 100%; font-size: 0.75rem; }
  /* homepage hero: the booking button under the copy */
  .hc-hero-actions { display: block; margin-top: 1.5rem; }
  .hc-hero-actions .hc-hero-btn { height: 52px; margin-top: 0; padding: 0 24px; font-size: 1rem; }


  /* chip index: its bar runs up behind the top nav, so nothing shows between them */
  .hc-svc-index { padding-top: calc(var(--hc-mnav) + 0.25rem); }

  /* homepage section intros line up left like every other heading */
  .hc-services-title, .hc-services-sub, .hc-cases-title, .hc-cases-sub { text-align: left; margin-left: 0; }

  /* case cards: shorter on phones (no description, two key figures); the full story is on Results */
  .hc-case-card:not(.hc-case-card-next) .hc-case-desc { display: none; }
  .hc-case-card:not(.hc-case-card-next) .hc-case-tag:not(.hc-case-tag-key):not(:nth-child(2)) { display: none; }
  .hc-case-card { min-height: 0; height: auto; }                     /* fit the content, no empty space */
  .hc-case-card .hc-case-tags { margin-top: 1.5rem; }

  /* Contact: title and copy, then the form straight away (contact details after it) */
  .hc-ct-hero { min-height: 0; padding-bottom: 1.5rem; }
  .hc-ct-hero .hc-hero-intro { min-height: 0; }
  .hc-ct-hero .hc-ct-options { display: none; }
  .hc-ct-book { padding-top: 0.5rem; }
  .hc-ct-book-grid { display: flex; flex-direction: column; }
  .hc-ct-book-copy { display: contents; }
  .hc-ct-book #book-title, .hc-ct-book .hc-ct-book-copy > .hc-svc-intro { display: none; }
  .hc-ct-form { order: -1; width: 100%; }
  .hc-ct-book-grid { gap: 2rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hc-hero-object, .hc-svc-hero .hc-hero-object { height: 28svh; min-height: 180px; }
}
@media (max-width: 339px) {
  .hc-footer-social { width: 36px; height: 36px; }
  .hc-dock-link { font-size: 0.7rem; }   /* all six still fit at 320px */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hc-js .hc-reveal { opacity: 1; transform: none; }
  .hc-js .hc-word-in { opacity: 1; transform: none; filter: none; }
  .hc-js .hc-bot-float { animation: none; }
  .hc-sig-pen path { animation-delay: 0s !important; }
}

/* --------------------------------------------------------------------------
   Sub-page hero visuals below 900px: the bot is dropped (the text needs the width) and the
   photo moves above the text as its own band
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hc-hero-visual { display: none; }
  .hc-hero-has-photo { justify-content: flex-start; min-height: 0; }
  .hc-hero-photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    order: -1;
    width: 100%;
    height: 56vh;
    height: 56svh;
    margin-bottom: 2rem;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hc-hero-has-photo { padding-top: 7rem; }
}

/* --------------------------------------------------------------------------
   Legal pages (privacy, terms): one plain black reading column
   -------------------------------------------------------------------------- */
.hc-legal {
  padding: clamp(8rem, 13vw, 11rem) 0 clamp(5rem, 9vw, 8rem);
  background: var(--hc-obsidian);
  color: var(--hc-soft);
}
.hc-legal-body { max-width: 44rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.hc-legal-body h2 {
  margin: 2.5rem 0 0.75rem;
  color: var(--hc-white);
  font-size: var(--hc-fs-h3);
  font-weight: 300;
  line-height: var(--hc-lh-snug);
}
.hc-legal-body h2:first-child { margin-top: 0; }
.hc-legal-body p { margin: 0; color: var(--hc-silver); }
.hc-legal-body a { color: inherit; text-underline-offset: 0.2em; }
.hc-legal-body a:hover { color: var(--hc-white); }
@media (max-width: 767px) {
  .hc-legal { padding-top: calc(var(--hc-mnav) + 6rem); }
}

/* GoHighLevel: its page CSS sets `body { line-height: unset !important }` and break-word
   wrapping, and paints a fixed white page background (.bgCover) over the body colour.
   These rules win over both (no effect on the prototype). */
html body { line-height: var(--hc-lh-body) !important; overflow-wrap: normal !important; }
html body .bgCover { background: none !important; }
/* GoHighLevel wraps each Custom Code element in a section, row and column. Strip their
   spacing, backgrounds and clipping so the design sets all of it (and sticky/fixed parts
   work). In the prototype #top is <body> itself, so nothing here matches. */
body *:has(> #top), body *:has(#top) {
  padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  overflow: visible !important; transform: none !important; filter: none !important; contain: none !important;
}

/* ==========================================================================
   Revision 3 (Kendrick's November 2 email and Loom)
   ========================================================================== */

/* Hero: the headline's box never clips "growth." on very wide screens */
.hc-hero:not(.hc-svc-hero) .hc-hero-content { max-width: none; }
.hc-hero:not(.hc-svc-hero) .hc-hero-lead,
.hc-hero:not(.hc-svc-hero) .hc-hero-note { max-width: 40rem; }
.hc-hero:not(.hc-svc-hero) .hc-hero-line { width: max-content; max-width: 100%; padding-right: 0.2em; margin-right: -0.2em; }
@media (min-width: 768px) {
  .hc-hero:not(.hc-svc-hero) .hc-hero-line { max-width: none; }
}

/* One green, for revenue only. Pipeline value and every other figure are white. */
.hc-res-stat-pipe dd { color: var(--hc-white); }
.hc-res-def-pipe { border-top-color: var(--hc-line-strong); }
.hc-res-def-pipe dt { color: var(--hc-white); }

/* Kendrick's signature in Henson Blue again, first name and all */
.hc-team-sig,
.hc-about-last { color: var(--hc-blue); }
.hc-team-founder-label,
.hc-about-first { color: var(--hc-blue); }
.hc-team-founder-label { font-size: 0.8125rem; letter-spacing: 0.32em; text-transform: uppercase; }

/* Professional portrait (homepage About) */
.hc-photo-portrait { aspect-ratio: 4 / 5; max-height: 44rem; }
.hc-photo-portrait img { object-position: 50% 18%; }

/* --------------------------------------------------------------------------
   Homepage results: the one documented engagement, laid out like the Results page
   -------------------------------------------------------------------------- */
.hc-cases .hc-svc-wrap { max-width: 72rem; }
.hc-cases .hc-cases-title,
.hc-cases .hc-cases-sub { text-align: left; margin-left: 0; margin-right: 0; }
.hc-feature {
  display: block;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
  color: var(--hc-white);
  text-decoration: none;
  transition: background-color 400ms var(--hc-ease), border-color 400ms var(--hc-ease);
}
.hc-feature:hover,
.hc-feature:focus-visible { background: var(--hc-card-hover); border-color: var(--hc-line-strong); }
.hc-feature-head { display: flex; align-items: center; gap: 1.25rem; }
.hc-feature-logo { width: clamp(52px, 5vw, 72px); height: auto; border-radius: 50%; flex: none; }
.hc-feature-name { flex: 1; min-width: 0; }
.hc-feature-meta { margin: 0 0 0.35rem; color: var(--hc-gray-text); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-feature-title { margin: 0; font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.hc-feature .hc-case-arrow { flex: none; }
.hc-feature-body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hc-line);
}
.hc-feature-lead { margin: 0; color: var(--hc-silver); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); line-height: 1.6; }
.hc-feature-label { margin: 1.75rem 0 0.75rem; color: var(--hc-gray-text); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hc-feature-stats { margin: 0; }
.hc-cases-more { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 899px) {
  .hc-feature-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .hc-feature .hc-case-arrow { display: none; }    /* the whole card is the link */
  .hc-feature-head { gap: 0.9rem; }
  .hc-feature-meta { letter-spacing: 0.08em; font-size: 0.75rem; }
}

/* Services used: stacked, one per line */
.hc-res-services { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.hc-res-services li { display: flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; }
.hc-res-services li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-blue); flex: none; }
.hc-res-services a { color: inherit; text-underline-offset: 0.2em; }

/* Results page: a single case study, no side index */
.hc-res-single { max-width: 64rem; padding-top: clamp(1rem, 3vw, 2rem); }
.hc-res-single .hc-res-case { border-bottom: 0; }

/* --------------------------------------------------------------------------
   "Human strategy, backed by the right tools": how the tools and people fit together
   -------------------------------------------------------------------------- */
.hc-tools {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
}
.hc-tools-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--hc-gray-text);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hc-tools-key { display: flex; gap: 1.25rem; }
.hc-tools-key i { display: inline-flex; align-items: center; gap: 0.5rem; font-style: normal; }
.hc-tools-key i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.hc-tools-ai::before { background: var(--hc-blue); }
.hc-tools-human::before { background: var(--hc-white); }
.hc-tools-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hctool;
}
.hc-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.1rem 1.1rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: 14px;
  background: var(--hc-obsidian);
}
/* the connector between steps */
.hc-tool:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.05rem;
  right: -13px;
  width: 14px;
  height: 1px;
  background: var(--hc-line-strong);
}
.hc-tool-icon { width: 26px; height: 26px; color: var(--hc-silver); }
.hc-tool b { font-weight: 300; font-size: 1.0625rem; line-height: 1.25; color: var(--hc-white); }
.hc-tool span { color: var(--hc-silver); font-size: 0.875rem; line-height: 1.5; }
.hc-tool em { margin-top: auto; padding-top: 0.5rem; font-style: normal; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hc-tool-ai { border-color: rgba(53, 183, 253, 0.35); }
.hc-tool-ai .hc-tool-icon,
.hc-tool-ai em { color: var(--hc-blue); }
.hc-tool-human { border-color: rgba(255, 255, 255, 0.55); }
.hc-tool-human .hc-tool-icon,
.hc-tool-human em { color: var(--hc-white); }
@media (max-width: 1023px) {
  .hc-tools-flow { grid-template-columns: minmax(0, 1fr); }
  .hc-tool { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.2rem; align-items: start; }
  .hc-tool-icon { grid-row: span 3; }
  .hc-tool em { padding-top: 0.25rem; }
  .hc-tool:not(:last-child)::after { top: auto; bottom: -13px; left: 2.35rem; right: auto; width: 1px; height: 14px; }
}

/* --------------------------------------------------------------------------
   Two ways to work together, now visual: the system the team runs, and Kendrick
   -------------------------------------------------------------------------- */
.hc-ways2 .hc-way-label { margin: 0; }
.hc-way2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.hc-way2 + .hc-way2 {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hc-line);
}
.hc-way2-flip .hc-way2-visual { order: 2; }
.hc-way2-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hc-way2-title { margin: 0; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.hc-way2-copy .hc-way-text { margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); }
.hc-way2-copy .hc-way-price { margin: 0; }
.hc-way2-copy .hc-cta-button { margin-top: 0.75rem; }
.hc-way2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hc-way2-actions .hc-cta-button { margin-top: 0.75rem; }
.hc-way2-photo { aspect-ratio: 4 / 5; max-height: 40rem; }
.hc-way2-photo img { object-position: 50% 20%; }

/* the system panel (illustration of what the team runs) */
.hc-sys {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--hc-r-lg);
  background: linear-gradient(160deg, #141417 0%, var(--hc-obsidian) 70%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.hc-sys-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  color: var(--hc-gray-text);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hc-sys-live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hc-silver); }
.hc-sys-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc-blue); box-shadow: 0 0 0 4px rgba(53, 183, 253, 0.15); }
.hc-sys-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hc-sys-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.hc-sys-list b { font-weight: 300; font-size: 1rem; }
.hc-sys-list span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hc-silver); font-size: 0.8125rem; text-align: right; }
.hc-sys-list span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-silver); flex: none; }
.hc-sys-report { border-color: rgba(53, 183, 253, 0.35) !important; }
.hc-sys-report span::before { background: var(--hc-blue); }
@media (max-width: 899px) {
  .hc-way2 { grid-template-columns: minmax(0, 1fr); }
  .hc-way2-flip .hc-way2-visual { order: 0; }
  .hc-way2-photo { max-height: 30rem; }
}

/* Who we help (moved out of the footer) */
.hc-who { margin-top: clamp(2rem, 3.5vw, 2.75rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--hc-line-strong); }
.hc-who-label { margin: 0 0 1rem; color: var(--hc-gray-text); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hc-who-list .hc-svc-tag { white-space: normal; height: auto; min-height: 32px; }

/* --------------------------------------------------------------------------
   Services: bigger cards and tap targets
   -------------------------------------------------------------------------- */
.hc-group { gap: 1rem; padding: clamp(1.75rem, 3vw, 2.75rem); }
.hc-group-name { font-size: clamp(1.875rem, 1.2rem + 1.8vw, 2.75rem); }
.hc-group-text { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); }
.hc-group-links { padding-top: 0.5rem; }
.hc-group-links li + li { border-top: 1px solid var(--hc-line); }
.hc-group-links a { align-items: center; min-height: 56px; padding: 0.5rem 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.hc-group-links a span { font-size: 1.25rem; }
@media (min-width: 1024px) {
  .hc-svc-details-grid { grid-template-columns: 17rem minmax(0, 1fr); }
  .hc-svc-index-link { min-height: 44px; align-items: center; padding: 0.35rem 0; font-size: 1.125rem; }
  .hc-svc-index-num { font-size: 0.8125rem; }
}
.hc-svc-chapter-lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem); }
.hc-svc-tag { height: 36px; font-size: 0.9375rem; }

/* The follow-up process: lead received to sale won */
.hc-process-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}
.hc-process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--hc-r-lg);
  background: var(--hc-card);
}
.hc-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: var(--hc-line-strong);
}
.hc-process-num { color: var(--hc-gray-text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.hc-process-step .hc-tool-icon { width: 30px; height: 30px; color: var(--hc-white); }
.hc-process-step b { font-weight: 300; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.15; }
.hc-process-step > span:last-child { color: var(--hc-silver); font-size: 0.9375rem; line-height: 1.5; }
.hc-process-won { border-color: rgba(63, 207, 142, 0.55); }
.hc-process-won .hc-tool-icon,
.hc-process-won b { color: var(--hc-green); }
@media (max-width: 1023px) {
  .hc-process-list { grid-template-columns: minmax(0, 1fr); }
  .hc-process-step { display: grid; grid-template-columns: 2.25rem 30px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .hc-process-step > span:last-child { grid-column: 3; }
  .hc-process-step b { grid-column: 3; grid-row: 1; }
  .hc-process-step .hc-tool-icon { grid-row: 1 / span 2; grid-column: 2; }
  .hc-process-num { grid-row: 1 / span 2; }
  .hc-process-step:not(:last-child)::after { top: auto; bottom: -12px; left: 50%; right: auto; width: 1px; height: 12px; }
}

/* --------------------------------------------------------------------------
   The strategy form: a quiet placeholder while GHL's survey loads
   -------------------------------------------------------------------------- */
.hc-ct-form { position: relative; }
.hc-form-wait {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 640px;
  color: var(--hc-gray-text);
  font-size: 0.9375rem;
  pointer-events: none;
  transition: opacity 400ms var(--hc-ease);
}
.hc-form-wait-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-blue); animation: hc-wait 1.2s ease-in-out infinite; }
@keyframes hc-wait { 50% { opacity: 0.25; transform: scale(0.7); } }
.hc-form-ready .hc-form-wait { opacity: 0; }
.hc-ct-frame { position: relative; opacity: 0; transition: opacity 400ms var(--hc-ease); }
.hc-form-ready .hc-ct-frame { opacity: 1; }
html:not(.hc-js) .hc-ct-frame { opacity: 1; }
.hc-ct-book:not(.hc-band) { background: var(--hc-obsidian); color: var(--hc-white); }
@media (prefers-reduced-motion: reduce) { .hc-form-wait-dot { animation: none; } }

/* --------------------------------------------------------------------------
   FAQs: short, page-specific, near the bottom
   -------------------------------------------------------------------------- */
.hc-faq { background: var(--hc-obsidian); color: var(--hc-white); }
.hc-faq.hc-band { background: var(--hc-band); }
.hc-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hc-faq-list { border-top: 1px solid var(--hc-line-strong); }
.hc-faq-item { border-bottom: 1px solid var(--hc-line-strong); }
.hc-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding: 1.1rem 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.hc-faq-q::-webkit-details-marker { display: none; }
.hc-faq-icon { position: relative; width: 14px; height: 14px; flex: none; }
.hc-faq-icon::before,
.hc-faq-icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 300ms var(--hc-ease); }
.hc-faq-icon::after { transform: rotate(90deg); }
.hc-faq-item[open] .hc-faq-icon::after { transform: rotate(0deg); }
.hc-faq-q:hover .hc-faq-icon,
.hc-faq-q:focus-visible .hc-faq-icon { color: var(--hc-blue); }
.hc-faq-a p { max-width: 40rem; margin: 0; padding: 0 2.5rem 1.4rem 0; color: var(--hc-silver); line-height: 1.65; }
@media (max-width: 899px) {
  .hc-faq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   1:1 consultation request form (Consulting page)
   -------------------------------------------------------------------------- */
.hc-cform-wrap {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background: var(--hc-obsidian);
}
.hc-cform { display: grid; gap: 1.1rem; }
.hc-cform-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.hc-cform-field { display: grid; gap: 0.5rem; }
.hc-cform-field > span { color: var(--hc-white); font-size: 0.9375rem; }
.hc-cform-field i { color: var(--hc-blue); font-style: normal; }
.hc-cform em { color: var(--hc-gray-text); font-size: 0.8125rem; font-style: normal; margin-left: 0.35rem; }
.hc-cform input[type="text"],
.hc-cform input[type="email"],
.hc-cform input[type="tel"],
.hc-cform textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: 10px;
  background: var(--hc-card);
  color: var(--hc-white);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--hc-dur-fast) var(--hc-ease);
}
.hc-cform textarea { resize: vertical; min-height: 7.5rem; }
.hc-cform input::placeholder,
.hc-cform textarea::placeholder { color: var(--hc-gray-text); }
.hc-cform input:focus,
.hc-cform textarea:focus { outline: none; border-color: var(--hc-blue); }
.hc-cform-consent { display: grid; gap: 0.75rem; margin: 0.25rem 0 0; padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--hc-line); }
.hc-cform-consent legend { padding: 0; margin-bottom: 0.75rem; color: var(--hc-white); font-size: 0.9375rem; }
.hc-cform-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.75rem; align-items: start; color: var(--hc-silver); font-size: 0.8125rem; line-height: 1.55; cursor: pointer; }
.hc-cform-check input { width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: var(--hc-blue); }
.hc-cform-fine { margin: 0; color: var(--hc-gray-text); font-size: 0.8125rem; line-height: 1.55; }
.hc-cform-fine a,
.hc-cform-error a { color: var(--hc-silver); text-underline-offset: 0.2em; }
.hc-cform-error { margin: 0; color: #ff8f8f; font-size: 0.875rem; }
.hc-cform-submit { justify-self: start; margin-top: 0.5rem; cursor: pointer; font: inherit; }
.hc-cform-submit:disabled { opacity: 0.6; cursor: progress; }
.hc-cform-done { padding: clamp(1rem, 3vw, 2rem) 0; }
.hc-cform-done:focus { outline: none; }
.hc-cform-done p { margin: 0; color: var(--hc-silver); font-size: 1.125rem; line-height: 1.6; }
.hc-cform-done .hc-cform-done-title { margin-bottom: 0.5rem; color: var(--hc-white); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 300; }
@media (max-width: 599px) {
  .hc-cform-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Footer, simplified: logo, page links and contact; socials, legal and policies
   -------------------------------------------------------------------------- */
.hc-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hc-footer-simple .hc-footer-brand { align-items: flex-start; gap: 1.1rem; }
.hc-footer-tag { max-width: 22rem; margin: 0; color: var(--hc-silver); font-size: 1rem; line-height: 1.55; }
.hc-footer-nav,
.hc-footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.hc-footer-simple .hc-footer-link { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); }
.hc-footer-book { color: var(--hc-blue); }
.hc-footer-simple .hc-footer-bottom { align-items: center; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.75rem; border-top: 1px solid var(--hc-line); }
.hc-footer-simple .hc-footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.hc-footer-simple .hc-footer-legal a { color: inherit; text-decoration: none; }
.hc-footer-simple .hc-footer-legal a:hover,
.hc-footer-simple .hc-footer-legal a:focus-visible { color: var(--hc-white); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 899px) {
  .hc-footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hc-footer-simple .hc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hc-footer-simple .hc-footer-brand { display: flex; }
  .hc-footer-simple .hc-footer-logo-svg { width: 150px; }
  .hc-footer-nav,
  .hc-footer-contact { gap: 0.55rem; }
  .hc-footer-simple .hc-footer-legal { flex-basis: auto; gap: 0.4rem 1rem; font-size: 0.8125rem; }
}
@media (max-width: 599px) {
  .hc-sys-list li { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.8rem 0.9rem; }
  .hc-sys-list span { text-align: left; }
}

/* Revision 3b: three case-study cards on the homepage, Results-page style, tighter */
.hc-cases .hc-svc-wrap { max-width: 88rem; }
.hc-cases3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hc-feature-sm { display: flex; flex-direction: column; margin-top: 0; padding: clamp(1.5rem, 2.2vw, 2rem); }
.hc-feature-sm .hc-feature-head { align-items: flex-start; gap: 1rem; }
.hc-feature-sm .hc-feature-logo { width: 52px; }
.hc-feature-sm .hc-feature-title { font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); }
.hc-feature-sm .hc-case-arrow { width: 40px; height: 40px; }
.hc-feature-sm .hc-feature-lead { margin-top: 1.25rem; font-size: 1rem; }
.hc-feature-sm .hc-feature-label { margin-top: 1.25rem; }
.hc-feature-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
  margin: auto 0 0;
  padding-top: 1.5rem;
}
.hc-feature-sm .hc-res-services { margin-bottom: 1.5rem; }
.hc-feature-mini div { padding-top: 0.9rem; border-top: 1px solid var(--hc-line); }
.hc-feature-mini dt { color: var(--hc-gray-text); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hc-feature-mini dd { margin: 0.35rem 0 0; color: var(--hc-white); font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem); font-weight: 300; font-variant-numeric: tabular-nums; }
.hc-feature-mini .hc-res-stat-money dd { color: var(--hc-green); }
@media (max-width: 1099px) {
  .hc-cases3 { grid-template-columns: minmax(0, 1fr); }
  .hc-feature-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .hc-feature-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Homepage About: the portrait runs the full height of the text beside it */
@media (min-width: 900px) {
  .hc-team .hc-team-grid { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hc-team .hc-photo-portrait { aspect-ratio: auto; height: 100%; min-height: 36rem; max-height: none; }
  .hc-team .hc-photo-portrait img { position: absolute; inset: 0; }
}
.hc-faq-a p + p { margin-top: -0.55rem; }
.hc-faq-a a { color: var(--hc-white); text-underline-offset: 0.2em; }
.hc-faq-a a:hover { text-decoration-color: var(--hc-blue); }

/* Form sections scroll as one piece: the text beside the form no longer sticks */
.hc-ct-book-copy { position: static; }
.hc-ct-frame { overflow: hidden; }

/* Footer, centred: large logo, tagline, contact, socials, legal line with the policies */
.hc-footer-center .hc-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hc-footer-center .hc-footer-logo { color: var(--hc-white); }
.hc-footer-center .hc-footer-logo-svg { width: min(56rem, 84vw); }
.hc-footer-center .hc-footer-tag { max-width: 30rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); }
.hc-footer-center .hc-footer-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.hc-footer-center .hc-footer-contact .hc-footer-link { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); }
.hc-footer-sep { width: 1px; height: 1.1em; background: var(--hc-line-strong); }
.hc-footer-center .hc-footer-socials { justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hc-footer-center .hc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  align-self: stretch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hc-line);
  color: var(--hc-silver);
  font-size: 0.875rem;
}
.hc-footer-center .hc-footer-legal a { color: inherit; text-decoration: none; }
.hc-footer-center .hc-footer-legal a:hover,
.hc-footer-center .hc-footer-legal a:focus-visible { color: var(--hc-white); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 767px) {
  .hc-footer-center .hc-footer-logo-svg { width: 86vw; }
  .hc-footer-sep { display: none; }
  .hc-footer-center .hc-footer-contact { flex-direction: column; gap: 0.5rem; }
  .hc-footer-center .hc-footer-socials { flex-wrap: wrap; justify-content: center; }
  .hc-footer-center .hc-footer-legal { gap: 0.4rem 1.1rem; font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   Revision 4 (Kendrick's final edits)
   -------------------------------------------------------------------------- */
/* Hero: "systems." is Henson Blue from the start (the falling copy stays blue too) */
.hc-hero-blue { color: var(--hc-blue); }

/* "From first click to won revenue": the services process and the tools-and-people flow,
   combined into eight steps (homepage and Services). Blue = AI-assisted, white = people,
   green = the sale. Four to a row on desktop, two on tablets, one on phones. */
.hc-tools-8 .hc-tools-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hc-tools-8 .hc-tool { padding: 1.4rem 1.25rem 1.25rem; min-height: 13.5rem; }
.hc-tools-8 .hc-tool-icon { width: 30px; height: 30px; }
.hc-tools-8 .hc-tool b { font-size: clamp(1.1875rem, 1rem + 0.45vw, 1.4375rem); line-height: 1.15; }
.hc-tools-8 .hc-tool span:not(.hc-tool-num) { font-size: 0.9375rem; }
.hc-tool-num {
  position: absolute;
  top: 1.35rem;
  right: 1.25rem;
  color: var(--hc-gray-text) !important;
  font-size: 0.8125rem !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.hc-tools-8 .hc-tool:not(:last-child)::after { top: 2.35rem; right: -15px; width: 16px; }
.hc-tools-8 .hc-tool:nth-child(4n)::after { display: none; }
.hc-tool-ai { background: linear-gradient(160deg, rgba(53, 183, 253, 0.09) 0%, var(--hc-obsidian) 60%); }
.hc-tool-won { border-color: rgba(63, 207, 142, 0.55); background: linear-gradient(160deg, rgba(63, 207, 142, 0.09) 0%, var(--hc-obsidian) 60%); }
.hc-tool-won .hc-tool-icon,
.hc-tool-won b,
.hc-tool-won em { color: var(--hc-green); }
.hc-tools-won::before { background: var(--hc-green); }
@media (max-width: 1023px) {
  .hc-tools-8 .hc-tools-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-tools-8 .hc-tool { display: flex; min-height: 0; }
  .hc-tools-8 .hc-tool:not(:last-child)::after { display: none; }
}
@media (max-width: 599px) {
  .hc-tools-8 .hc-tools-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hc-tools-8 .hc-tool { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.2rem; padding: 1.1rem 1.1rem 1rem; }
  .hc-tools-8 .hc-tool-icon { grid-row: span 3; }
  .hc-tool-num { top: 1.1rem; right: 1.1rem; }
  .hc-tools-8 .hc-tool b { padding-right: 2rem; }
}

/* Two ways to work together, merged into one section: the portrait beside both options */
.hc-way2-merged { align-items: stretch; margin-top: 0; }
.hc-way2-merged .hc-way2-copy { gap: 0; }
.hc-way2-merged .hc-svc-h2 { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.hc-way2-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; width: 100%; }
.hc-way2-opt + .hc-way2-opt { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hc-line); }
.hc-way2-merged .hc-way2-title { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.625rem); }
.hc-way2-merged .hc-way-label { display: inline-flex; align-items: center; gap: 0.75rem; }
.hc-way2-n { color: var(--hc-blue); font-variant-numeric: tabular-nums; }
.hc-way2-merged .hc-way2-actions .hc-cta-button { margin-top: 0.4rem; }
@media (min-width: 900px) {
  .hc-way2-merged .hc-way2-photo { aspect-ratio: auto; height: 100%; min-height: 34rem; max-height: none; }
  .hc-way2-merged .hc-way2-photo img { position: absolute; inset: 0; }
}

/* Footer, revision 4: traditional and symmetrical. Brand and socials on the left, then
   Navigate, Support and Contact; one centred copyright line above the floating nav. */
.hc-foot { padding: clamp(4rem, 6.5vw, 6rem) 0 clamp(7rem, 9vw, 8.5rem); border-top: 1px solid var(--hc-line); }
.hc-foot-inner { max-width: 80rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }
.hc-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.hc-foot-logo { display: inline-block; color: var(--hc-white); }
.hc-foot-logo-svg { display: block; width: clamp(170px, 14vw, 210px); height: auto; }
.hc-foot-tag { max-width: 22rem; margin: 1.5rem 0 0; color: var(--hc-silver); font-size: 1rem; font-weight: 300; line-height: 1.6; }
.hc-foot-heading { margin: 0 0 1.25rem; color: var(--hc-white); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; }
.hc-foot-heading-sm { margin: 1.75rem 0 0.9rem; color: var(--hc-silver); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hc-foot-list { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.hc-foot-link {
  color: var(--hc-silver);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--hc-dur-fast) var(--hc-ease);
}
.hc-foot-link:hover,
.hc-foot-link:focus-visible { color: var(--hc-white); }
.hc-foot-accent { color: var(--hc-blue); }
.hc-foot-accent:hover,
.hc-foot-accent:focus-visible { color: var(--hc-white); }
.hc-foot-text { max-width: 16rem; margin: 0 0 1rem; color: var(--hc-silver); font-size: 1rem; font-weight: 300; line-height: 1.5; }
.hc-foot-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin-top: 1.4rem;
  padding: 0 20px;
  border: 1px solid rgba(53, 183, 253, 0.55);
  border-radius: var(--hc-r-pill);
  color: var(--hc-blue);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  transition: background-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
.hc-foot-btn:hover,
.hc-foot-btn:focus-visible { background: var(--hc-blue); color: var(--hc-black, #000); }
.hc-foot-socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hc-foot-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 50%;
  color: var(--hc-white);
  transition: background-color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease);
}
.hc-foot-social svg { width: 18px; height: 18px; }
.hc-foot-social:hover,
.hc-foot-social:focus-visible { border-color: var(--hc-blue); color: var(--hc-blue); }
.hc-foot-bottom {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hc-line);
  color: var(--hc-gray-text);
  font-size: 0.875rem;
  text-align: center;
}
@media (max-width: 1023px) {
  .hc-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hc-foot-tag { max-width: 30rem; }
  .hc-foot-socials { justify-content: center; }
}
@media (max-width: 767px) {
  .hc-foot { padding: 3rem 0 2.5rem; }
  .hc-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .hc-foot-col:last-child { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hc-foot-col:last-child .hc-foot-list { justify-items: center; }
  .hc-foot-text { max-width: none; }
  .hc-foot-link { font-size: 0.9375rem; }
  .hc-foot-bottom { margin-top: 2.5rem; font-size: 0.8125rem; }
}
.hc-tools-8 .hc-tools-key { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.hc-tools-8 .hc-tools-key i { white-space: nowrap; }
/* The AI-assisted step in the process: Henson Blue */
.hc-process-ai { border-color: rgba(53, 183, 253, 0.55); }
.hc-process-ai .hc-tool-icon,
.hc-process-ai b { color: var(--hc-blue); }

/* --------------------------------------------------------------------------
   Revision 4b: mobile fixes
   -------------------------------------------------------------------------- */
/* Homepage case studies on phones: one swipeable row (the next card peeks in) */
@media (max-width: 767px) {
  .hc-cases3 {
    display: flex;
    gap: 12px;
    margin-left: calc(-1 * clamp(1.25rem, 3.5vw, 3.5rem));
    margin-right: calc(-1 * clamp(1.25rem, 3.5vw, 3.5rem));
    padding: 0 clamp(1.25rem, 3.5vw, 3.5rem) 4px;
    overflow-x: auto;
    overflow-y: hidden;              /* sideways only: no vertical scrolling inside the row */
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;       /* a vertical swipe scrolls the page, not the row */
    scroll-snap-type: x mandatory;
    scroll-padding: 0 clamp(1.25rem, 3.5vw, 3.5rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hc-cases3::-webkit-scrollbar { display: none; }
  .hc-cases3 > .hc-feature-sm { flex: 0 0 84%; scroll-snap-align: start; }
  .hc-cases3 .hc-feature-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-cases3 .hc-reveal { transition-delay: 0s; }
}
.hc-cases-dots { display: none; }
@media (max-width: 767px) {
  .hc-cases-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.1rem; }
  .hc-cases-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hc-line-strong); transition: background-color 200ms ease, width 200ms ease; }
  .hc-cases-dots i.hc-on { width: 18px; border-radius: 3px; background: var(--hc-blue); }
}

/* Two ways, on phones and narrow tablets: heading, done for you, then Kendrick's photo leading
   into the one-on-one option it belongs to */
@media (max-width: 899px) {
  .hc-way2-merged { gap: 0; }
  .hc-way2-merged .hc-way2-copy { display: contents; }
  .hc-way2-merged .hc-svc-h2 { order: 1; }
  .hc-way2-merged .hc-way2-opt:first-of-type { order: 2; }
  .hc-way2-merged .hc-way2-photo { order: 3; margin-top: 2.5rem; max-height: 26rem; }
  .hc-way2-merged .hc-way2-opt + .hc-way2-opt { order: 4; margin-top: 1.25rem; padding-top: 0; border-top: 0; }
}

/* Who we help on phones: a tidy two-column list with small blue markers instead of
   uneven, wrapping pills */
@media (max-width: 767px) {
  .hc-who { margin-top: 1.75rem; padding-top: 1.25rem; }
  .hc-who-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; }
  .hc-who-list .hc-svc-tag {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    opacity: 1;
    color: var(--hc-silver);
  }
  .hc-who-list .hc-svc-tag::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.45em; border-radius: 50%; background: var(--hc-blue); }
}

/* Footer on phones: the page links first (Navigate and Support side by side, then Contact),
   then the logo with the social icons under it, centred, then the copyright line */
@media (max-width: 767px) {
  .hc-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .hc-foot-brand { order: 4; grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--hc-line); }
  .hc-foot-tag, .hc-foot-heading-sm { display: none; }
  .hc-foot-socials { margin-top: 1.25rem; }
  .hc-foot-logo-svg { width: 168px; }
  .hc-foot-col:last-child { grid-column: 1 / -1; display: block; text-align: left; }
  .hc-foot-col:last-child .hc-foot-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-items: start; }
  .hc-foot-text { margin-bottom: 0.75rem; }
  .hc-foot-btn { margin-top: 1.1rem; }
  .hc-foot-heading { margin-bottom: 1rem; }
  .hc-foot-list { gap: 0.7rem; }
  .hc-foot-bottom { margin-top: 1.75rem; padding-top: 0; border-top: 0; }
}

/* Sub-page heroes on phones (Services, Results, Contact): laid out like the homepage. The bot
   gets its own full-width band at the top, centred, with the title and description below it;
   the band is sized so all of it fits on the first screen. */
@media (max-width: 899px) {
  .hc-svc-hero .hc-hero-visual {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    order: -1;
    display: block;
    flex: none;
    align-self: stretch;
    width: auto;
    height: clamp(170px, 30svh, 290px);
    margin: 0 calc(-1 * var(--hc-hero-x)) 1rem calc(-1 * var(--hc-hero-inset));
    pointer-events: none;
  }
  .hc-svc-hero .hc-hero-visual .hc-block-mount { height: 100%; }
}
/* short phones (iPhone SE and smaller): a shorter band, so the description still fits */
@media (max-width: 767px) and (max-height: 620px) {
  .hc-svc-hero .hc-hero-visual { height: 21svh; min-height: 112px; margin-bottom: 0.5rem; }
}

/* ==========================================================================
   Revision 4c: phone-only tidy-up (≤767px unless noted). Each block stands alone,
   so any one can be removed without affecting the others or desktop.
   ========================================================================== */
.hc-team-avatar, .hc-ch-toggle { display: none; }

/* 1. Home case-study cards: no paragraph, services as small inline tags */
@media (max-width: 767px) {
  .hc-cases3 .hc-feature-lead { display: none; }
  .hc-cases3 .hc-feature-label { margin-top: 1.1rem; }
  .hc-cases3 .hc-res-services { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0.6rem 0 1.25rem; padding: 0; list-style: none; }
  .hc-cases3 .hc-res-services li { margin: 0; padding: 4px 10px; border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r-pill); color: var(--hc-silver); font-size: 0.8125rem; line-height: 1.3; }
  .hc-cases3 .hc-res-services li::before { display: none; }
  .hc-cases3 .hc-feature-mini { padding-top: 0.5rem; gap: 0.9rem 1rem; }
  .hc-cases3 .hc-feature-mini dd { font-size: 1.375rem; }
}

/* 2. "From first click" steps: a slim vertical timeline instead of five boxes */
@media (max-width: 767px) {
  .hc-process-list { position: relative; gap: 0; margin-top: 2rem; padding-left: 2.25rem; }
  .hc-process-list::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: var(--hc-line-strong); }
  .hc-process-step {
    position: relative;
    display: block;
    padding: 0 0 1.5rem;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .hc-process-step:last-child { padding-bottom: 0; }
  .hc-process-step:not(:last-child)::after { display: none; }
  .hc-process-step .hc-tool-icon { display: none; }
  .hc-process-num {
    position: absolute;
    left: -2.25rem;
    top: 0;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 50%;
    background: var(--hc-obsidian);
    color: var(--hc-silver);
    font-size: 0.6875rem;
  }
  .hc-band .hc-process-num { background: var(--hc-band); }
  .hc-process-step b { display: block; font-size: 1.1875rem; }
  .hc-process-step > span:last-child { display: block; margin-top: 0.25rem; font-size: 0.9375rem; }
  .hc-process-ai .hc-process-num { border-color: var(--hc-blue); color: var(--hc-blue); }
  .hc-process-won .hc-process-num { border-color: var(--hc-green); color: var(--hc-green); }
}

/* 3. Home About: a small round photo beside the signature instead of the full portrait */
@media (max-width: 767px) {
  .hc-team .hc-photo-portrait { display: none; }
  .hc-team-founder { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .hc-team-avatar { display: block; grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; }
  .hc-team-founder > :not(.hc-team-avatar):not(.hc-team-founder-label):not(.hc-team-sig) { grid-column: 1 / -1; }
}
/* About page: the desk photo becomes a short, wide strip with the signature over it */
@media (max-width: 767px) {
  .hc-about-media { height: 40svh; min-height: 240px; }
  .hc-about-photo img { object-position: 30% 30%; }
}

/* 4. The form keeps a short heading on Home, Services and Results (Contact stays as is) */
@media (max-width: 767px) {
  .hc-book-keep #book-title { display: block; order: -2; margin-bottom: 0.25rem; font-size: clamp(2rem, 9vw, 2.5rem); }
}

/* 5. Services: each service opens on tap (see main.js) */
@media (max-width: 767px) {
  .hc-svc-chapter:not(.hc-ch-open) .hc-svc-included,
  .hc-svc-chapter:not(.hc-ch-open) .hc-svc-connects { display: none; }
  .hc-svc-chapter:not(.hc-ch-open) .hc-svc-chapter-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .hc-ch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hc-blue);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
  }
  .hc-ch-icon { position: relative; width: 12px; height: 12px; }
  .hc-ch-icon::before, .hc-ch-icon::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: currentColor; transition: transform 200ms ease; }
  .hc-ch-icon::after { transform: rotate(90deg); }
  .hc-ch-open .hc-ch-icon::after { transform: rotate(0deg); }
  .hc-svc-chapter { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}

/* 6. (Home hero H band: kept at its original size, at Kendrick's request) */

/* 7. Services hero: text at the top, not centred in a full screen */
@media (max-width: 767px) {
  .hc-svc-hero { min-height: 0; justify-content: flex-start; padding-bottom: 3rem; }
  .hc-svc-hero .hc-hero-intro { min-height: 0; }
}

/* 9. Results hero figures: one row of three */
@media (max-width: 767px) {
  .hc-res-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
  .hc-res-hero-stats div { max-width: none; justify-content: flex-end; }
  .hc-res-hero-stats dd { font-size: 1.3125rem; white-space: nowrap; }
  .hc-res-hero-stats dt { font-size: 0.75rem; line-height: 1.35; }
}

/* 10. Home, Services, Results: no phone and email rows after the form (they're in the footer) */
@media (max-width: 767px) {
  .hc-book-keep .hc-ct-details { display: none; }
}

/* 11. About: the signature names him, so the repeated "Meet the founder / Meet Kendrick." goes */
@media (max-width: 767px) {
  .hc-about .hc-about-eyebrow,
  .hc-about .hc-about-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hc-about .hc-about-body > .hc-about-text:first-of-type { margin-top: 0; }
}

/* 12. About hero: a shorter photo crop than before (raised slightly from 36svh after review).
   Consulting: Kendrick's photo back at the top of the hero, at the larger size it had in
   the request section (revision 4e). */
@media (max-width: 767px) {
  .hc-hero-has-photo .hc-hero-photo { height: 44svh; min-height: 260px; margin-bottom: 1.5rem; }
  .hc-hero-has-photo .hc-hero-photo img { object-position: 50% 22%; }
  .hc-hero-con .hc-hero-photo { height: 56svh; min-height: 340px; }
  .hc-hero-con .hc-hero-photo img { object-position: 50% 20%; }
}

/* Footer on phones, revised: email and phone first, centred, with the booking button under
   them; then Navigate and Support; then the logo and socials */
@media (max-width: 767px) {
  .hc-foot-col:last-child { order: -1; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--hc-line); }
  .hc-foot-col:last-child .hc-foot-heading { display: none; }
  .hc-foot-col:last-child .hc-foot-text { margin-bottom: 0.6rem; }
  .hc-foot-col:last-child .hc-foot-list { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .hc-foot-col:last-child .hc-foot-link { font-size: 1.0625rem; }
  .hc-foot-col:last-child .hc-foot-btn { margin-top: 1.25rem; }
}

/* Results hero on phones: text raised so the three figures show on the first screen
   (the bot band there is 5% smaller than the homepage size; see main.js) */
@media (max-width: 767px) {
  #hero.hc-hero-split:not(.hc-ct-hero) { padding-top: calc(var(--hc-mnav) + 44px); }
  #hero.hc-hero-split:not(.hc-ct-hero) .hc-hero-visual { margin-bottom: 0.25rem; }
  #hero.hc-hero-split:not(.hc-ct-hero) .hc-svc-eyebrow { margin-bottom: 0.6rem; }
  #hero.hc-hero-split:not(.hc-ct-hero) .hc-hero-lead { margin-top: 0.9rem; }
  #hero.hc-hero-split:not(.hc-ct-hero) .hc-res-hero-stats { margin-top: 1.25rem; }
}

/* Revision 4e. The "Example" tag on the Services sample panels keeps its pill shape when the
   caption beside it wraps (it stretched into a tall oval on phones) */
.hc-demo-label { align-items: flex-start; }
.hc-demo-label span:last-child { align-self: flex-start; white-space: nowrap; }
/* Services on phones: a sample panel belongs to "See what's included", so it stays folded
   away with the rest until the service is opened */
@media (max-width: 767px) {
  .hc-svc-chapter:not(.hc-ch-open) .hc-demo { display: none; }
}

/* Revision 4f. CRM & follow-up: one list of the five pipeline stages, each with what
   happens there (replaces the pipeline board plus the separate follow-up timeline) */
.hc-demo-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.hc-demo-stages li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-obsidian);
}
.hc-demo-stage-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 0.2rem;
  border: 1px solid var(--hc-line-strong);
  border-radius: 50%;
  color: var(--hc-silver);
  font-size: 0.6875rem;
}
.hc-demo-stages b { color: var(--hc-white); font-size: 0.9375rem; font-weight: 300; }
.hc-demo-stages li > span:last-child { color: var(--hc-silver); font-size: 0.8125rem; line-height: 1.45; }
.hc-demo-stage-won { border-color: rgba(63, 207, 142, 0.45) !important; }
.hc-demo-stage-won .hc-demo-stage-n { border-color: var(--hc-green); color: var(--hc-green); }
.hc-demo-stage-won b { color: var(--hc-green); }
@media (max-width: 1023px) {
  .hc-demo-stages { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hc-demo-stages li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.15rem; padding: 0.8rem 0.9rem; }
  .hc-demo-stage-n { grid-row: span 2; margin: 0; }
}

/* Services: Consulting set apart from the seven services, as a different way to work */
.hc-svc-split {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  color: var(--hc-blue);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hc-svc-split::before, .hc-svc-split::after { content: ""; flex: 1; height: 1px; background: var(--hc-line-strong); }
.hc-svc-split span { flex: none; }
.hc-svc-compare { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--hc-line); border-radius: 14px; background: var(--hc-card); }
.hc-svc-compare div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.hc-svc-compare dt { color: var(--hc-gray-text); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hc-svc-compare dd { margin: 0; color: var(--hc-white); font-size: 1rem; font-weight: 300; }
.hc-svc-compare div:last-child dt { color: var(--hc-blue); }
/* the service index: a gap and a hairline before Consulting */
@media (min-width: 900px) {
  .hc-svc-index-split { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--hc-line); }
}
@media (max-width: 899px) {
  .hc-svc-index-split { display: flex; align-items: center; gap: 8px; }
  .hc-svc-index-split::before { content: ""; flex: none; width: 1px; height: 22px; background: var(--hc-line-strong); }
}