/* GENERATED FILE. DO NOT EDIT.
   Built by website/theme/build.sh from:
     .claude/skills/harkio-webpage-content/references/theme.css
     website/theme/src/thegem-reconcile.css
   Edit a source and rebuild. Editing this file, or the copy on the
   server, loses the change on the next deploy. */

/* ============================================================================
   HARKIO WEB THEME  ·  Direction G ("Live Signal + Voice Orb")
   Approved 2026-07-27. Extracted from website/landing-samples/sample-g-live-signal-orb.html.

   This file is the single source of truth for Harkio web styling, and the only
   file in the repo where it is hand-edited.

   HOW IT REACHES THE SITE (changed 2026-07-28): `website/theme/build.sh` copies
   this file, appends `website/theme/src/thegem-reconcile.css`, and writes
   `website/theme/harkio-child/assets/harkio.css`. The child theme loads that
   once, site-wide. Pages no longer carry a global block, and no page ships a
   `<style>` tag of its own: a rule a section needs belongs in this file, under
   section 9d.

   SCOPING RULE (load-bearing): every class is prefixed `hk-` and every block's
   outermost element carries `hk-block`. There are NO bare element selectors
   outside `.hk-block`, so nothing here can leak into or collide with the
   WordPress theme, the admin bar, or a plugin's markup.

   COLOUR RULE: teal is the ownable colour, warm neutrals carry most surfaces,
   coral is a spark. Coral is never body text and never a button, with one
   approved exception: `hk-btn--spark` (hero CTA, dark surface only).
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1 · TOKENS
   Light is the default. Dark responds to the OS, and `data-theme` on <html>
   overrides both so a theme switcher can win in either direction.
   Components never get redesigned per theme; only tokens swap.
   ------------------------------------------------------------------------ */
:root {
  --hk-bg: #F7F4EF;            /* Sand: warm page background, never stark white */
  --hk-surface: #FFFFFF;
  --hk-ink: #14201F;           /* body text, 15.2:1 on Sand */
  --hk-muted: #4A5654;         /* secondary text, 7.0:1 on Sand */
  --hk-line: #E6E0D6;
  --hk-heading: #0F4C4A;       /* Teal 700, 8.9:1 on Sand */
  --hk-brand: #136460;         /* Teal 600, the brand colour */
  --hk-brand-hover: #1B7D77;
  --hk-tint: #EEF5F3;          /* Teal 050, section backgrounds */
  --hk-tint-strong: #D7E8E5;   /* Teal 100, chips and dark-surface buttons */
  --hk-coral: #E8734A;         /* the spark */
  --hk-coral-050: #FDEEE7;
  --hk-link: #D15F38;          /* Coral 600, 4.6:1 on Sand */
  --hk-btn-bg: #136460;
  --hk-btn-text: #FFFFFF;
  --hk-btn-hover: #1B7D77;
  --hk-card-shadow: 0 1px 2px rgba(20,32,31,.04), 0 10px 30px rgba(20,32,31,.07);

  /* Fixed dark-band tokens. Identical in both themes: dark bands stay dark. */
  --hk-dark-bg: #0A2E2E;
  --hk-dark-surface: #0C3B39;
  --hk-dark-ink: #E9F1EE;
  --hk-dark-muted: #A9C0BB;
  --hk-dark-line: #1B4A47;
  --hk-dark-teal: #5FC4BB;
  --hk-coral-soft: #F5B79C;    /* coral text on dark */
}

@media (prefers-color-scheme: dark) {
  :root {
    --hk-bg: #0E1B1A; --hk-surface: #132523; --hk-ink: #E9F1EE; --hk-muted: #A2B7B2;
    --hk-line: #22403C; --hk-heading: #CBE3DE; --hk-brand: #5FC4BB; --hk-brand-hover: #7BD2CA;
    --hk-tint: #102220; --hk-tint-strong: #1A3835; --hk-coral-050: #2A1B16; --hk-link: #E8734A;
    --hk-btn-bg: #D7E8E5; --hk-btn-text: #0A2E2E; --hk-btn-hover: #E8F2F0;
    --hk-card-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.3);
  }
}
:root[data-theme="light"] {
  --hk-bg: #F7F4EF; --hk-surface: #FFFFFF; --hk-ink: #14201F; --hk-muted: #4A5654;
  --hk-line: #E6E0D6; --hk-heading: #0F4C4A; --hk-brand: #136460; --hk-brand-hover: #1B7D77;
  --hk-tint: #EEF5F3; --hk-tint-strong: #D7E8E5; --hk-coral-050: #FDEEE7; --hk-link: #D15F38;
  --hk-btn-bg: #136460; --hk-btn-text: #FFFFFF; --hk-btn-hover: #1B7D77;
  --hk-card-shadow: 0 1px 2px rgba(20,32,31,.04), 0 10px 30px rgba(20,32,31,.07);
}
:root[data-theme="dark"] {
  --hk-bg: #0E1B1A; --hk-surface: #132523; --hk-ink: #E9F1EE; --hk-muted: #A2B7B2;
  --hk-line: #22403C; --hk-heading: #CBE3DE; --hk-brand: #5FC4BB; --hk-brand-hover: #7BD2CA;
  --hk-tint: #102220; --hk-tint-strong: #1A3835; --hk-coral-050: #2A1B16; --hk-link: #E8734A;
  --hk-btn-bg: #D7E8E5; --hk-btn-text: #0A2E2E; --hk-btn-hover: #E8F2F0;
  --hk-card-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.3);
}


/* ---------------------------------------------------------------------------
   2 · BASE + TYPE
   Schibsted Grotesk for display, IBM Plex Sans for body, UI and numerals.
   Both are loaded site-wide by the child theme's functions.php, from:
   https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap
   A page never links them itself. Local previews link them in their <head>.
   ------------------------------------------------------------------------ */
/* SIZES ARE IN px, AND THAT IS DELIBERATE. Do not "modernise" this back to rem.

   `rem` resolves against the ROOT font-size, which a WordPress theme owns and
   we do not. TheGem's `thegem-reset.css` sets `html { font-size: 62.5% }`, the
   old make-1rem-10px trick, so on 2026-07-27 the live page rendered every size
   at 62.5%: body text at 10.6px against the 17px spec, the hero H1 at 27.5px
   against 44px, and mobile body at 10px, breaking the 16px floor in
   brand-foundations.md §6.

   The second, less obvious half: `ch` scales with font-size too, so every
   `max-width: 60ch` measure shrank with it. Section intros wrapped at 382px
   inside a 984px column, which is what made the right-hand side of nearly
   every band look empty. One cause, two symptoms.

   px values below are the ones the design was authored to produce at a 16px
   root, so preview.html and WordPress now render identically. Everything
   inside a block still uses `em`/`%` and scales from the base here.
   Accepted trade-off: a reader who raises their browser's default font size
   no longer scales this page. Revisit only if we control the root element. */
.hk-block, .hk-block * { box-sizing: border-box; }

.hk-block {
  background: var(--hk-bg);
  color: var(--hk-ink);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  /* the same defence as on the headings below: TheGem's body typography options
     can set tracking site-wide, and body copy is the last place it should land.
     Components that want wide tracking (.hk-eyebrow, .hk-sublabel, the stage and
     way labels) are more specific and set it themselves. */
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 640px) {
  .hk-block { font-size: 16px; }   /* never below 16px on mobile */
}

/* `text-transform` and `letter-spacing` here are defences, not defaults. The
   `hk-` prefix stops our CSS leaking out, but it does not stop a WordPress theme
   reaching IN on a property we never declare, and TheGem's Theme Options write a
   full typography block for h1 to h6.

   Both were caught the hard way. `text-transform: uppercase` shipped the live
   hero as HARKIO HANDLES THE CONVERSATIONS YOUR BUSINESS RUNS ON (2026-07-27).
   `letter-spacing: 1.4px` on h3 was found on 2026-07-28 by diffing every
   computed style between the standalone preview and the same page rendered
   inside TheGem's stylesheets: the two card and objection headings were the only
   things on the page that disagreed. Declaring the property is what wins it.

   Only headings and the wordmark: the eyebrows, stage labels and `.hk-sublabel`
   are uppercase with wide tracking on purpose and set both themselves. Never
   widen this to `.hk-block span`, which would out-specify `.hk-eyebrow` and
   flatten them. */
.hk-block h1, .hk-block h2, .hk-block h3 {
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  color: var(--hk-heading);
  text-transform: none;
  letter-spacing: normal;   /* h1 and h2 set their own below; h3 keeps this */
  font-style: normal;
  text-wrap: balance;
  margin: 0;
}
.hk-block .hk-wordmark { text-transform: none; }
.hk-block h1 { font-size: clamp(27.2px, 16.8px + 3vw, 44px); font-weight: 800; line-height: 1.11; letter-spacing: -.027em; }
.hk-block h2 { font-size: clamp(22.72px, 16.8px + 1.6vw, 32px);  font-weight: 700; line-height: 1.17; letter-spacing: -.02em; }
.hk-block h3 { font-size: 17.92px; font-weight: 700; line-height: 1.3; }
.hk-block p  { margin: 0; }
/* `:not(.hk-btn)` is load-bearing, not tidiness. `.hk-block a` has specificity
   (0,1,1), which beats `.hk-btn` and `.hk-btn--spark` at (0,1,0), so without it
   every anchor-based button silently inherits the coral link colour: the hero
   CTA renders coral-on-coral and a primary button on a light band renders coral
   on teal. Fixed 2026-07-27 after the spark CTA shipped unreadable. */
.hk-block a:not(.hk-btn) { color: var(--hk-link); text-underline-offset: 3px; }

.hk-block a:focus-visible,
.hk-block button:focus-visible,
.hk-block input:focus-visible {
  outline: 2px solid var(--hk-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.hk-muted { color: var(--hk-muted); }
.hk-prose { max-width: 62ch; }


/* ---------------------------------------------------------------------------
   3 · LAYOUT + SECTION RHYTHM
   Band rhythm rule: never place two identical surfaces next to each other.
   The reference order is dark hero → light → signal strip → tint → dark →
   tint → light → dark peak → dark footer.
   ------------------------------------------------------------------------ */
.hk-wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

.hk-section        { padding-block: clamp(62px, 8vw, 96px); }
.hk-section--tint  { background: var(--hk-tint); }
.hk-section--dark  { background: var(--hk-dark-bg); color: var(--hk-dark-ink); }

.hk-section--dark h2, .hk-section--dark h3 { color: var(--hk-dark-ink); }
.hk-section--dark .hk-eyebrow { color: var(--hk-dark-teal); }
.hk-section--dark .hk-muted   { color: var(--hk-dark-muted); }

.hk-section-head { display: grid; gap: 14px; margin-bottom: clamp(34px, 4.5vw, 52px); }
.hk-section-head p { max-width: 60ch; color: var(--hk-muted); }

/* eyebrow, with the three-bar signal glyph in front of it */
.hk-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.84px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hk-brand);
}


/* ---------------------------------------------------------------------------
   4 · BUTTONS
   Primary stays in the teal family on BOTH surfaces. Light: teal fill, white
   text. Dark: Teal 100 fill, Teal 900 text. Never teal-on-teal.
   ------------------------------------------------------------------------ */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 28px; border-radius: 12px; border: 1px solid transparent;
  background: var(--hk-btn-bg); color: var(--hk-btn-text);
  font-family: inherit; font-size: 16.32px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.hk-btn:hover { background: var(--hk-btn-hover); transform: translateY(-1px); }

.hk-btn--sm { min-height: 44px; padding: 9px 20px; font-size: 15.2px; border-radius: 10px; }

.hk-btn--ghost { background: transparent; color: var(--hk-ink); border-color: var(--hk-line); }
.hk-btn--ghost:hover { background: var(--hk-tint); }

/* on a fixed dark band */
.hk-section--dark .hk-btn, .hk-onDark .hk-btn { background: #D7E8E5; color: #0A2E2E; }
.hk-section--dark .hk-btn:hover, .hk-onDark .hk-btn:hover { background: #E8F2F0; }
.hk-section--dark .hk-btn--ghost, .hk-onDark .hk-btn--ghost {
  background: transparent; color: var(--hk-dark-ink); border-color: var(--hk-dark-line);
}

/* THE APPROVED CORAL EXCEPTION (2026-07-27).
   Hero CTA only, dark surface only, one per page. Coral is still never a text
   colour and never a button anywhere else.
   Text is Teal 900, the brand's own darkest token: 4.8:1 on coral, and it
   belongs to the palette. Revised 2026-07-27 from #221007, a warm brown-black
   that muddied against the coral fill. Never white: 3.0:1, fails AA. */
.hk-btn--spark { background: var(--hk-coral); color: #0A2E2E; box-shadow: 0 8px 30px rgba(232,115,74,.30); }
.hk-btn--spark:hover { background: #F08258; }

@media (max-width: 640px) { .hk-cta-row .hk-btn { width: 100%; } }
.hk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }


/* ---------------------------------------------------------------------------
   5 · HEADER + FOOTER
   ------------------------------------------------------------------------ */
.hk-header { padding-block: 20px; background: var(--hk-dark-bg); position: relative; z-index: 3; }
/* `flex-wrap` is a safety net, not a layout. The lockup got bigger on
   2026-08-03 and the row is now the widest thing on a narrow screen: lockup
   plus "Join the waitlist" plus the gap comes to about 298px inside the wrap's
   padding, which clears a 375px phone with room and clears 360px, but not a
   320px one. Rather than shrink the artwork again for a screen almost nobody
   is on, let the button drop to a second line there. */
.hk-header-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
}

/* The lockup is ONE svg, the filed artwork inlined whole (mark + outlined
   wordmark + coral tittle), not a mark beside a text span. See the comment at
   the top of website/theme/templates/header.html for why it changed on
   2026-08-03. Size it by height only: the svg carries its own 159 x 33.75
   aspect, so width:auto keeps the approved proportions and the clear space,
   and a stray width can never squash it.

   HEIGHTS, and why these numbers. The old hand-built lockup drew the bars at
   30px with the word at 21.6px, which is a wordmark-to-mark ratio of about
   0.53 against the artwork's 0.74: the word was undersized, and the whole thing
   read small in a 40px-padded band. 36px is a modest step up on the bars and a
   real correction on the word. Below 520px it steps to 30px so the lockup and
   the waitlist button still fit one row on a phone. Both steps stay well over
   the 90px minimum width in brand-foundations.md #7: 30px is 141px wide and
   27px is 127px. */
.hk-lockup { display: flex; align-items: center; text-decoration: none; }
.hk-lockup svg { display: block; height: 36px; width: auto; }
.hk-footer .hk-lockup svg { height: 32px; }
@media (max-width: 520px) {
  .hk-lockup svg { height: 30px; }
  .hk-footer .hk-lockup svg { height: 28px; }
}
@media (max-width: 400px) {
  .hk-lockup svg { height: 27px; }
  .hk-footer .hk-lockup svg { height: 26px; }
}
.hk-wordmark {
  font-family: "Schibsted Grotesk", Arial, sans-serif; font-weight: 700;
  font-size: 21.6px; letter-spacing: -.02em; color: var(--hk-ink);
}
.hk-header .hk-wordmark, .hk-footer .hk-wordmark { color: #F2F8F6; }
.hk-header .hk-btn { background: #D7E8E5; color: #0A2E2E; }
.hk-header .hk-btn:hover { background: #E8F2F0; }

/* The hairline is what separates the footer from the dark peak band above it.
   Both are Teal 900, so without it they read as one very tall band. */
.hk-footer {
  background: var(--hk-dark-bg); color: var(--hk-dark-muted); padding-block: 40px;
  border-top: 1px solid var(--hk-dark-line);
}
.hk-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hk-footer-fine { font-size: 13.92px; }

/* The tagline, confirmed 2026-07-31: "Every conversation, handled."
   Set in the display face and a step up from the fine print, because it is a
   brand line and not a legal one. A flex item in the footer row, so it sits
   between the lockup and the copyright on a wide footer and stacks with them
   below 560px.

   The stack is written out rather than taken from a token because THERE IS NO
   DISPLAY-FONT TOKEN: this file declares the family literally everywhere it is
   needed. A first version of this rule used `var(--hk-display)`, which resolves
   to nothing and silently inherited IBM Plex Sans. Caught by measuring the
   computed font, not by reading the rule. */
.hk-footer-tag {
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  color: var(--hk-dark-ink);
  margin: 0;
}
@media (max-width: 560px) {
  .hk-footer-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ===========================================================================
   6 · THE SIGNAL SYSTEM   ← the heart of the Harkio look
   The logo's voice bars are not a logo detail. They are the page's connective
   tissue, and they must appear at MORE THAN ONE SCALE on every page:

     XL  the voice orb in the hero            (.hk-orb)
     L   the full-width band divider          (.hk-strip)
     S   inside the form-card heading         (.hk-wave, --bw 3.5px)
     XS  the three-bar glyph in every eyebrow (.hk-wave--mini)

   In every instance exactly ONE bar is coral (`hk-wave__pk`), and it is the
   tallest. That asymmetric peak is what makes the mark Harkio's rather than a
   generic equaliser. Never make more than one bar coral.
   ======================================================================== */

/* the shared bar component. Size it with the two custom properties. */
.hk-wave { display: flex; align-items: center; gap: var(--hk-gap, 5px); }
.hk-wave i {
  display: block; width: var(--hk-bw, 5px); border-radius: 4px;
  background: var(--hk-dark-teal); transform-origin: center;
}
.hk-wave i.hk-wave__pk { background: var(--hk-coral); }

/* bars on a LIGHT surface use the brand teal instead */
.hk-wave--onLight i { background: var(--hk-brand); }
.hk-wave--onLight i.hk-wave__pk { background: var(--hk-coral); }

/* XS: the eyebrow glyph. Uses currentColor so it inherits the eyebrow colour. */
.hk-wave--mini { --hk-bw: 2.5px; --hk-gap: 2.5px; height: 13px; }
.hk-wave--mini i { background: currentColor; }
.hk-wave--mini i.hk-wave__pk { background: var(--hk-coral); }

/* the breathing animation. Staggered by nth-child so no two bars move together,
   which is what stops it reading as a loading spinner. */
@media (prefers-reduced-motion: no-preference) {
  .hk-wave--live i { animation: hk-sig 1.9s ease-in-out infinite; }
  @keyframes hk-sig { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
  .hk-wave--live i:nth-child(3n)   { animation-delay: -.30s;  animation-duration: 2.3s; }
  .hk-wave--live i:nth-child(3n+1) { animation-delay: -.85s;  animation-duration: 1.7s; }
  .hk-wave--live i:nth-child(5n)   { animation-delay: -1.25s; animation-duration: 2.6s; }
  .hk-wave--live i.hk-wave__pk     { animation-duration: 1.5s; }
}

/* L: the full-width band divider. Sits between two sections, always on dark.

   The bar run is LONGER THAN THE VIEWPORT on purpose and the band clips it, so
   the waveform reaches both edges instead of sitting as a blip in the middle.
   Shipped 2026-07-27 as 108px of bars in a 1398px band, which read as a failed
   render rather than a divider; block 04 now carries a generated run.

   Two rules that are load-bearing if this is ever regenerated:
   1. `justify-content: center` plus the coral peak at the CENTRE of the run.
      That is what keeps the one coral bar on screen at every width once the
      band starts clipping, down to a 320px phone.
   2. Exactly ONE coral bar in the whole run. This is why the run is a single
      long waveform and not a short group repeated: repeating the group would
      repeat its peak, and a row of coral peaks is not the mark.

   The edge fade lets the run terminate rather than being guillotined, so an
   ultrawide screen that outruns the bars still looks deliberate. */
.hk-strip { background: var(--hk-dark-bg); padding-block: 14px; overflow: hidden; }
.hk-strip .hk-wave {
  --hk-bw: 4px; --hk-gap: 5px;
  justify-content: center; height: 34px; opacity: .5;
  flex-wrap: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}


/* ---------------------------------------------------------------------------
   6b · THE VOICE ORB  (the hero animation)
   Three concentric rings emit outward from a core containing a live waveform:
   a spoken line leaving the phone. Rings are staggered by a third of the cycle
   so one is always mid-flight. The third ring is coral, so the spark rides the
   outermost pulse.

   Tuning: change size with max-width; keep the core at 56% and 7 bars.
   Fewer than 3 rings loses the sense of propagation; more looks like a target.
   ------------------------------------------------------------------------ */
.hk-orb {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; max-width: 330px; width: 100%; margin-inline: auto;
}
.hk-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(95,196,187,.45); }
.hk-orb__ring:nth-child(2) { inset: 12%; border-color: rgba(95,196,187,.32); }
.hk-orb__ring:nth-child(3) { inset: 24%; border-color: rgba(232,115,74,.34); }

@media (prefers-reduced-motion: no-preference) {
  .hk-orb__ring { animation: hk-emit 4.2s ease-out infinite; opacity: 0; }
  .hk-orb__ring:nth-child(2) { animation-delay: 1.4s; }
  .hk-orb__ring:nth-child(3) { animation-delay: 2.8s; }
  @keyframes hk-emit {
    0%   { transform: scale(.42); opacity: 0; }
    18%  { opacity: .95; }
    100% { transform: scale(1.06); opacity: 0; }
  }
}
.hk-orb__core {
  position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #12514D 0%, #0A2E2E 72%);
  border: 1px solid rgba(95,196,187,.35);
  box-shadow: 0 0 60px rgba(95,196,187,.22), inset 0 0 40px rgba(95,196,187,.10);
  display: grid; place-items: center;
}
.hk-orb__core .hk-wave { --hk-bw: 5px; --hk-gap: 5px; height: 46%; }
.hk-orb__core .hk-wave i.hk-wave__pk { box-shadow: 0 0 14px rgba(232,115,74,.7); }

.hk-orb-cap {
  text-align: center; margin-top: 18px; font-size: 12.8px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8FB0AA;
}


/* ---------------------------------------------------------------------------
   7 · HERO
   The hero band is fixed dark in both themes: it is always the strongest
   moment on the page. The glow is two radial gradients, teal top-right and
   coral bottom-left, over the Teal 900 base.
   ------------------------------------------------------------------------ */
.hk-hero {
  background:
    radial-gradient(58% 62% at 82% 18%, rgba(95,196,187,.20) 0%, rgba(95,196,187,0) 66%),
    radial-gradient(54% 58% at 6% 92%,  rgba(232,115,74,.22) 0%, rgba(232,115,74,0) 64%),
    linear-gradient(180deg, #0B3735 0%, #0A2E2E 100%);
  color: var(--hk-dark-ink);
  padding-block: clamp(48px, 6.5vw, 84px) clamp(56px, 7.5vw, 92px);
}
.hk-hero-grid {
  display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
  gap: clamp(34px,5vw,64px); align-items: center;
}
@media (max-width: 900px) { .hk-hero-grid { grid-template-columns: 1fr; } }
.hk-hero-copy { display: grid; gap: 22px; justify-items: start; }
.hk-hero h1 { color: #F2F8F6; max-width: 19ch; }
.hk-hero-lead { color: #BFD8D3; font-size: 1.12em; max-width: 52ch; }
.hk-hero-note { font-size: 14.72px; color: #91B2AC; }
.hk-kicker { font-size: 15.2px; font-weight: 500; color: #9FBDB7; }

/* the status pill with the live coral dot */
.hk-livetag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 17px 8px 13px; border-radius: 999px;
  background: rgba(232,115,74,.15); border: 1px solid rgba(232,115,74,.28);
  color: var(--hk-coral-soft); font-size: 13.92px; font-weight: 600;
}
.hk-livetag__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--hk-coral); flex: none;
  box-shadow: 0 0 0 0 rgba(232,115,74,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .hk-livetag__dot { animation: hk-ring 2.4s ease-out infinite; }
  @keyframes hk-ring {
    0%   { box-shadow: 0 0 0 0 rgba(232,115,74,.55); }
    70%  { box-shadow: 0 0 0 11px rgba(232,115,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,115,74,0); }
  }
}


/* ---------------------------------------------------------------------------
   8 · CONTENT COMPONENTS
   ------------------------------------------------------------------------ */

/* 8a · card grid */
.hk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.6vw,26px); }
.hk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px,2.6vw,26px); }
@media (max-width: 880px) { .hk-grid3, .hk-grid2 { grid-template-columns: 1fr; } }

.hk-card {
  background: var(--hk-surface); border: 1px solid var(--hk-line); border-radius: 16px;
  padding: 26px 24px; display: grid; gap: 12px; align-content: start;
  box-shadow: var(--hk-card-shadow);
}
.hk-card h3 { color: var(--hk-heading); font-size: 16.96px; }
.hk-card p  { color: var(--hk-muted); font-size: 15.2px; }

/* the coral icon tile. A filled rounded square, NOT a bordered callout. */
.hk-icontile {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--hk-coral-050); color: var(--hk-coral);
}

/* 8b · the flow chain: what "handled end to end" means, seen not read.
   Chips connected by arrows. First chip solid teal, last chip solid coral,
   middle chips plain. Rotates to a vertical stack under 880px.

   880, not 700. The horizontal chain needs about 710px at the real type size,
   so a 700px switch leaves a dead band roughly 700-860px wide (iPad portrait
   is 768) where the row wraps and an arrow dangles at the end of a line
   pointing at nothing. It looked fine before only because TheGem's 62.5% root
   was shrinking the chips; do not lower this back on that evidence. */
.hk-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 6px; }
.hk-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px;
  background: var(--hk-surface); border: 1px solid var(--hk-line); color: var(--hk-ink);
  font-size: 15.2px; font-weight: 600; box-shadow: var(--hk-card-shadow);
}
.hk-chip svg { flex: none; color: var(--hk-brand); }
.hk-chip--first { background: var(--hk-brand); border-color: var(--hk-brand); color: #fff; }
.hk-chip--first svg { color: #fff; }
.hk-chip--last  { background: var(--hk-coral); border-color: var(--hk-coral); color: #0A2E2E; }
.hk-chip--last svg { color: #0A2E2E; }
.hk-flow__arrow { color: var(--hk-brand); opacity: .55; flex: none; }
@media (max-width: 880px) {
  .hk-flow { flex-direction: column; align-items: stretch; }
  .hk-flow__arrow { transform: rotate(90deg); }
  .hk-chip { justify-content: flex-start; }
}

/* 8c · comparison rows. Use for "the alternatives", never as a marketing table. */
.hk-alt {
  display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 8px 30px;
  padding-block: 17px; border-top: 1px solid var(--hk-line);
}
.hk-alt:last-of-type { border-bottom: 1px solid var(--hk-line); }
@media (max-width: 640px) { .hk-alt { grid-template-columns: 1fr; } }
.hk-alt__name { font-weight: 600; color: var(--hk-ink); }
.hk-alt__cost { color: var(--hk-muted); font-size: 15.52px; }
.hk-section--dark .hk-alt { border-color: var(--hk-dark-line); }
.hk-section--dark .hk-alt__name { color: #F2F8F6; }
.hk-section--dark .hk-alt__cost { color: var(--hk-dark-muted); }

/* 8d · staged roadmap track. A top rule per column with a node at its start.
   The active stage gets the coral-to-teal gradient rule and a glowing node. */
/* Three stages: now, next, after that. Deliberately a fixed three rather than an
   auto-fit track, because the shape is the argument. A roadmap that can grow a
   column grows one every time something is added, and the reader stops being able
   to see the order at a glance. If a page ever genuinely needs a fourth, the
   change is `repeat(auto-fit, minmax(210px,1fr))`, and it should be a decision,
   not a side effect of writing copy. */
.hk-stages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.6vw,26px); }
@media (max-width: 880px) { .hk-stages { grid-template-columns: 1fr; } }
.hk-stage { display: grid; gap: 12px; align-content: start; padding-top: 28px; position: relative; }
.hk-stage::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px; background: var(--hk-dark-line);
}
.hk-stage--now::before {
  background: linear-gradient(90deg, var(--hk-coral), var(--hk-dark-teal));
  box-shadow: 0 0 16px rgba(232,115,74,.35);
}
.hk-stage__node {
  position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--hk-dark-bg); border: 2px solid var(--hk-dark-line);
}
.hk-stage--now .hk-stage__node {
  background: var(--hk-coral); border-color: var(--hk-coral); box-shadow: 0 0 16px rgba(232,115,74,.6);
}
.hk-stage__when { font-size: 11.68px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-dark-muted); }
.hk-stage--now .hk-stage__when { color: var(--hk-coral-soft); }
.hk-stage p { color: var(--hk-dark-muted); font-size: 15.2px; }

/* 8e · question and answer rows. For objection handling. */
.hk-qa-list { display: grid; gap: clamp(24px,3.5vw,34px); }
.hk-qa {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.5fr);
  gap: 10px 44px; padding-top: clamp(22px,3vw,30px); border-top: 1px solid var(--hk-line);
}
@media (max-width: 780px) { .hk-qa { grid-template-columns: 1fr; } }
.hk-qa h3 { color: var(--hk-heading); }
.hk-qa p  { color: var(--hk-muted); }

/* 8f · the narrative lead. A short scene set larger than body copy, with the
   last line carrying the weight. Max 46ch so it reads as prose, not a column. */
.hk-story { max-width: 46ch; display: grid; gap: 14px; font-size: 1.14em; line-height: 1.5; }
.hk-story__last { color: var(--hk-heading); font-weight: 600; }

/* 8g · the closing peak band. One idea, set in the display face, on dark.
   Always the last band before the footer. Never a summary, never a logo wall. */
.hk-peak { background: var(--hk-dark-bg); color: var(--hk-dark-ink); padding-block: clamp(48px,6vw,72px); }
/* The measure goes on the PARAGRAPHS, never on `.hk-peak__inner`. That element
   also carries `.hk-wrap`, and a `max-width` here has equal specificity but
   comes later in the file, so it beat `.hk-wrap`'s 1080px; `.hk-wrap`'s
   `margin-inline: auto` then centred the shrunken box. Shipped 2026-07-27 with
   the peak starting at x=529 while every other band started at x=228, which
   read as a mistake on the one line the page is built to end on. */
.hk-peak__inner { display: grid; gap: 18px; }
.hk-peak__inner > p { max-width: 60ch; }
.hk-peak p {
  font-family: "Schibsted Grotesk", Arial, sans-serif; font-weight: 500;
  font-size: clamp(18.4px, 16px + .9vw, 24px); line-height: 1.36;
  letter-spacing: -.015em; color: #EDF5F3;
}
/* the coda needs to out-specify `.hk-peak p` above it, or it renders as a
   second headline and the peak loses its single strongest line. */
.hk-peak p.hk-peak__sub {
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.55;
  color: var(--hk-dark-muted); letter-spacing: 0;
}

/* 8h · two-column split, copy beside a card.
   Use only when the two columns are within a few hundred pixels of each other.
   Measured 2026-07-31 on the waitlist band: 275px of copy beside an 886px form
   left a 611px hole, which no amount of vertical centring rescues. When a card
   is much taller than its copy, use the stacked form below instead. */
.hk-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(30px,5vw,60px); align-items: start; }
@media (max-width: 900px) { .hk-split { grid-template-columns: 1fr; } }

/* 8h-2 · the stacked ask. The copy reads as an ordinary left-aligned section head
   across the band, the way every other band on the page opens, and the card sits
   below it rather than beside it.

   MEASURED, because two other arrangements were tried and are worse. Beside the
   copy (`.hk-split`), a 275px copy column stood next to an 886px card and left a
   611px hole in the band. Splitting the card internally, lede beside form, moved
   the hole inside the card: a 62px lede in an 803px card, with roughly 370px of
   empty card above and below it. Stacked, nothing is stranded, because the space
   to the right of the card is band background, which is what every other
   left-aligned component on this page already sits in.

   NO WIDTH CAP (changed 2026-08-03). This used to be capped at 580px, on the
   reasoning that a HubSpot iframe stretches its fields to whatever width it is
   given and .claude/rules/hubspot-forms.md puts a form at 520px. On a wide
   screen that read as a narrow column stranded in a very wide band, so the cap
   is gone and the card fills the content column like every other component in
   the band. The band's own `.hk-wrap` (1080px) is now the only limit, which is
   the same limit the copy above the card already obeys.

   The card is fluid, not fixed at 1080 either: `.hk-wrap` shrinks with the
   viewport, so this shrinks with it and needs no breakpoint of its own. */
.hk-formcard--stack { max-width: none; width: 100%; }

/* 8h-3 · the embed slot. A preview-only box that holds the real height of a
   third-party embed and says what lands there. It exists because the live
   HubSpot form is a cross-origin iframe styled in HubSpot's own Style tab, so a
   look-alike form in the preview would be showing a design that never ships.
   Dashed, deliberately: it must never be mistaken for a finished component. */
.hk-embedslot {
  display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 24px; text-align: center;
  border: 1px dashed var(--hk-line); border-radius: 14px; background: var(--hk-bg);
}
.hk-embedslot__name { font-weight: 600; color: var(--hk-muted); }
.hk-embedslot .hk-fine { max-width: 42ch; }

/* 8i · the two ways. A qualitative before and after, in the reader's own day.
   The "now" column is a plain outlined panel; the "with Harkio" column is a
   raised white card. That weight difference carries the contrast, so no colour
   coding and no banned one-edge callout is needed.
   HONESTY RULE: this component describes what the product does. It never
   carries a number, a metric or a fabricated artifact. Keep it qualitative. */
.hk-ways { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px,2.6vw,26px); align-items: start; }
@media (max-width: 820px) { .hk-ways { grid-template-columns: 1fr; } }
.hk-way { display: grid; gap: 16px; align-content: start; padding: 26px 24px; border-radius: 16px; border: 1px solid var(--hk-line); }
.hk-way--now  { background: transparent; }
.hk-way--then { background: var(--hk-surface); box-shadow: var(--hk-card-shadow); }
.hk-way__when { font-size: 11.68px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-muted); }
.hk-way--then .hk-way__when { color: var(--hk-brand); }
.hk-way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.hk-way li { display: flex; align-items: flex-start; gap: 13px; font-size: 15.84px; }
.hk-way li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 9px; }
.hk-way--now  li { color: var(--hk-muted); }
.hk-way--now  li::before { background: var(--hk-muted); opacity: .45; }
.hk-way--then li { color: var(--hk-ink); }
.hk-way--then li::before { background: var(--hk-brand); }
.hk-way--then li:last-child::before { background: var(--hk-coral); }

/* 8i2 · the tick list. A list the reader mentally ticks against their own
   business, so it must read as their inventory and never as a feature menu.
   Hairline rows, an empty teal box per row, two columns on desktop. The box is
   deliberately unfilled: nothing here is a claim about what Harkio does. */
.hk-ticklist {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 clamp(20px,3.4vw,44px);
}
@media (max-width: 700px) { .hk-ticklist { grid-template-columns: 1fr; } }
.hk-tick {
  display: flex; align-items: flex-start; gap: 13px;
  padding-block: 13px; border-top: 1px solid var(--hk-line); font-size: 15.84px;
}
.hk-tick__box {
  width: 17px; height: 17px; flex: none; margin-top: 5px;
  border: 1.5px solid var(--hk-brand); border-radius: 5px; opacity: .6;
}

/* 8j · the numbered test. A short diagnostic the reader runs on themselves.
   The numeral sits in a filled teal disc; its text colour is the page
   background token, so it inverts correctly in both themes. */
.hk-numlist { display: grid; gap: 15px; list-style: none; margin: 0; padding: 0; counter-reset: hk-n; }
.hk-numlist li { display: flex; align-items: flex-start; gap: 14px; }
.hk-numlist li::before {
  counter-increment: hk-n; content: counter(hk-n);
  width: 27px; height: 27px; flex: none; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--hk-brand); color: var(--hk-bg);
  font-size: 13.92px; font-weight: 700; font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   9 · FORMS
   Used for the HubSpot embed wrapper. Style the embed to match where HubSpot
   allows; where it does not, leave it clean rather than fighting it.
   ------------------------------------------------------------------------ */
.hk-formcard {
  background: var(--hk-surface); border: 1px solid var(--hk-line); border-radius: 18px;
  padding: clamp(24px,4vw,32px); box-shadow: var(--hk-card-shadow); display: grid; gap: 18px;
}
.hk-formcard__top { display: flex; align-items: center; gap: 12px; }
.hk-formcard__top .hk-wave { --hk-bw: 3.5px; --hk-gap: 3.5px; height: 26px; }
.hk-formcard h3 { color: var(--hk-heading); font-size: 19.52px; }

.hk-field { display: grid; gap: 7px; }
.hk-field label { font-size: 14.4px; font-weight: 600; }
.hk-field input {
  font-family: inherit; font-size: 16px; color: var(--hk-ink); background: var(--hk-bg);
  border: 1px solid var(--hk-line); border-radius: 11px;
  padding: 13px 15px; min-height: 50px; width: 100%;
}
.hk-field input::placeholder { color: var(--hk-muted); opacity: .75; }
.hk-field input:focus { border-color: var(--hk-brand); outline: none; }
.hk-field__hint { font-size: 13.6px; color: var(--hk-muted); }
.hk-formcard .hk-btn { width: 100%; }
.hk-fine { font-size: 13.92px; color: var(--hk-muted); }
.hk-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14.88px; }
.hk-consent input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--hk-brand); }

/* 9b · THE HUBSPOT EMBED.
   Governed by .claude/rules/hubspot-forms.md: the page's CSS is the authority
   and HubSpot's default styling never ships. These rules assume the LEGACY v2
   embed, which renders HubSpot's markup inline in the page DOM so these
   selectors can reach it. The newer `.hs-form-frame` embed is a cross-origin
   iframe and none of this applies to it.
   Scoped under .hk-block, so it only ever touches a form inside our markup. */
.hk-block .hs-form { font-family: inherit; display: grid; gap: 18px; }
.hk-block .hs-form fieldset { max-width: none !important; border: 0; margin: 0; padding: 0; }
.hk-block .hs-form .hs-form-field { margin: 0; }
.hk-block .hs-form label { display: block; font-size: 14.4px; font-weight: 600; color: var(--hk-ink); margin-bottom: 7px; }
.hk-block .hs-form .hs-field-desc { display: block; font-size: 13.6px; font-weight: 400; color: var(--hk-muted); margin: -2px 0 9px; }
.hk-block .hs-form .hs-input {
  width: 100% !important; font-family: inherit; font-size: 16px; color: var(--hk-ink);
  background: var(--hk-bg); border: 1px solid var(--hk-line); border-radius: 11px;
  padding: 13px 15px; min-height: 50px;
}
.hk-block .hs-form textarea.hs-input { min-height: 92px; resize: vertical; }
.hk-block .hs-form .hs-input:focus { border-color: var(--hk-brand); outline: 2px solid var(--hk-brand); outline-offset: 1px; }
.hk-block .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hk-block .hs-form .inputs-list label { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; margin: 0; }
.hk-block .hs-form .inputs-list input {
  width: 18px !important; height: 18px; min-height: 0; flex: none; margin: 3px 0 0;
  padding: 0; accent-color: var(--hk-brand);
}
.hk-block .hs-form .hs-button {
  width: 100%; min-height: 50px; padding: 13px 28px; border: 1px solid transparent; border-radius: 12px;
  background: var(--hk-btn-bg); color: var(--hk-btn-text);
  font-family: inherit; font-size: 16.32px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.hk-block .hs-form .hs-button:hover { background: var(--hk-btn-hover); }
.hk-block .hs-form .hs-error-msg,
.hk-block .hs-form .hs-error-msgs label { color: #C0492F; font-size: 14px; font-weight: 400; }
.hk-block .submitted-message { font-family: inherit; font-size: 16px; line-height: 1.55; color: var(--hk-ink); }


/* ---------------------------------------------------------------------------
   9c · MOBILE TYPE FLOOR
   brand-foundations.md §6 sets a hard rule: body text never below 16px on
   mobile. Component body copy that sits at 15.2px on desktop returns to the
   base size on phones. Fine print (.hk-fine, field hints, the footer line) is
   deliberately exempt: it is fine print, not body copy.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .hk-card p, .hk-alt__cost, .hk-stage p, .hk-chip, .hk-tick { font-size: 16px; }
}


/* ---------------------------------------------------------------------------
   9d · PAGE COMPOSITION HELPERS
   Spacing and emphasis rules that used to live in a per-block `<style>` tag on
   the home page. They are here, in the one stylesheet, because a page that
   carries its own CSS is a page whose design drifts from every other page: the
   same "lead line" was defined three times with three slightly different
   weights before this was consolidated on 2026-07-28.

   Rule going forward: a page ships markup and copy, never a `<style>` tag. If a
   section needs a rule that does not exist yet, add it here and reuse it.
   ------------------------------------------------------------------------ */

/* the hero's payoff line: brighter than the lead, so the hero ends on what
   changes rather than on the problem */
.hk-hero .hk-hero-turn {
  color: #F2F8F6; font-size: 1.12em; font-weight: 600; max-width: 46ch; line-height: 1.45;
}

/* a lead-in line above a component, and the closing line that lands after it.
   Both are set in the display face so they read as the section's own voice
   rather than as another paragraph of body copy. */
.hk-tickwrap { margin-top: clamp(38px, 5vw, 58px); display: grid; gap: 18px; }
.hk-tickwrap__lead { font-weight: 600; color: var(--hk-heading); }
.hk-tickwrap__note { max-width: 62ch; }
.hk-tickwrap__close {
  font-family: "Schibsted Grotesk", Arial, sans-serif; font-weight: 600;
  font-size: 18.4px; letter-spacing: -.015em; color: var(--hk-heading);
}

/* a card carrying a short diagnostic. `width`, not `max-width` alone:
   `justify-items: start` makes each grid item shrink to fit-content, so
   `max-width` never engages and the card renders as a small floating box
   beside a lot of empty space. */
.hk-testwrap { margin-top: clamp(30px, 4vw, 42px); display: grid; gap: 26px; justify-items: start; }
.hk-testwrap .hk-card { width: min(560px, 100%); }
.hk-testcard { gap: 18px; }
.hk-testcard h3 { font-size: 17.92px; }
.hk-testcard .hk-numlist li { color: var(--hk-ink); font-size: 16px; }
.hk-testcard__close { padding-top: 17px; border-top: 1px solid var(--hk-line); }

/* a labelled solution sub-block: the same component repeated per vertical.
   The repetition is the point (one engine, two conversations), so never
   restyle one of them to look distinct. */
.hk-sol { display: grid; gap: 8px; }
.hk-sol + .hk-sol { margin-top: clamp(38px, 5vw, 56px); }
.hk-sol .hk-ways { margin-top: 14px; }
.hk-sol h3 { font-size: 19.84px; }
.hk-solnote { margin-top: 20px; max-width: 60ch; font-size: 15.2px; }
.hk-sublabel {
  font-size: 11.68px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hk-brand);
}
.hk-waysclose {
  margin-top: clamp(38px, 5vw, 54px); max-width: 52ch;
  padding-top: clamp(28px, 3.4vw, 36px); border-top: 1px solid var(--hk-line);
  font-family: "Schibsted Grotesk", Arial, sans-serif; font-weight: 600;
  font-size: clamp(17.92px, 16px + .5vw, 21.12px); line-height: 1.36;
  letter-spacing: -.015em; color: var(--hk-heading);
}

/* the note under the flow chain, the comparison rows, and the resolve that
   closes the section */
.hk-flownote { margin-top: clamp(26px, 3.4vw, 34px); display: grid; gap: 12px; max-width: 62ch; }
.hk-flownote p:first-child { font-weight: 600; color: var(--hk-heading); }
.hk-alts { margin-top: clamp(38px, 5vw, 56px); display: grid; gap: 16px; }
.hk-resolve { margin-top: clamp(34px, 4.5vw, 48px); display: grid; gap: 12px; }
.hk-resolve p:first-child { font-size: 1.08em; font-weight: 600; color: var(--hk-heading); }

/* two emphasis lines. Both are written to out-specify `.hk-section-head p` and
   `.hk-block p`, which is why they carry the element in the selector. */
.hk-section-head p.hk-choice { color: var(--hk-heading); font-weight: 600; }
.hk-block p.hk-firstteams { font-weight: 600; margin-bottom: 18px; }

/* the copy column that sits beside the form card */
/* The ask's copy. No measure on the block itself: it opens the band as a full
   row, like every other section head, and the 46ch cap it used to carry was left
   over from when it was the narrow left column of a two-column split. The
   paragraphs still read at a sane length, because `.hk-section-head p` caps them
   at 60ch. */
.hk-askcopy { display: grid; gap: 16px; align-content: start; }
.hk-askcopy .hk-eyebrow { margin-bottom: 2px; }

/* Hold the form card's height until HubSpot reports the iframe's real one, so
   the page does not jump. `:not(:has(iframe))` and not `:empty`, because
   HubSpot fills the div immediately and then resizes it a moment later. */
.hk-block .hs-form-frame:not(:has(iframe)) { min-height: 420px; }

/* The frame and its iframe are fluid, no fixed width anywhere in the chain.
   The iframe's CONTENT is cross-origin and we cannot reach it, but the iframe
   ELEMENT is ours, so its box is ours to size. HubSpot's embed script already
   sets style.width="100%" on it inline; these rules restate that so a future
   change on their side cannot leave a fixed-pixel iframe sitting in a fluid
   card, and `max-width:100%` stops any width attribute overflowing the card on
   a phone. Verified 2026-08-03 by reading js-na2.hsforms.net/forms/embed/
   22368610.js: it creates the iframe, sets width 100% and height 100%, and
   drives the height afterwards by postMessage. */
.hk-block .hs-form-frame { width: 100%; }
.hk-block .hs-form-frame iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}

/* 9c · THE CARD HOLDING THE HUBSPOT EMBED STAYS A LIGHT PANEL IN BOTH THEMES.
   Added 2026-08-03, after the form was found unreadable in dark mode: dark grey
   labels and dark placeholder text sitting on our dark card, with stark white
   inputs punched through it.

   WHY IT CANNOT BE FIXED THE NORMAL WAY. The rest of this stylesheet re-tokens
   components per theme, which works because we own their markup. This form does
   not work that way. It renders inside a cross-origin iframe (route C in
   .claude/rules/hubspot-forms.md), so its label, placeholder and input colours
   are set once in HubSpot's Style tab, they are a single fixed set, and no CSS
   here can reach them or vary them by theme. HubSpot's set is tuned for a light
   surface. The only honest options were to make the surface match it, or to stop
   using their iframe.

   SO: pin the card's tokens to the light values. Every child resolves against
   these instead of the page's, so the heading, the fine print, the border and
   the shadow all come back to the light pairing, and HubSpot's own colours land
   on the surface they were chosen for. A white form panel on a dark page is a
   deliberate, ordinary pattern, not a theme bug: it reads as a physical card.

   `:has()` and not a modifier class, so a page cannot get this wrong by
   forgetting to add one. Any card containing the embed gets it automatically.

   THE LASTING FIX IS ROUTE B, our own markup posting to the Submissions API.
   Then the form is in our DOM, these tokens go back to following the theme, and
   the card can be dark in dark mode like everything else. Until someone budgets
   for owning validation, errors and the success state, this is the correct
   holding position. Do not "fix" it by darkening HubSpot's Style tab: that only
   moves the unreadable case to light mode, where most visitors are.

   `.hk-embedslot` is in the selector so the local preview, which stands a dashed
   placeholder where the iframe lands, shows the same light card the live page
   does. A preview that stayed dark here would be lying about dark mode. */
.hk-formcard:has(.hs-form-frame),
.hk-formcard:has(.hk-embedslot) {
  --hk-bg: #F7F4EF;
  --hk-surface: #FFFFFF;
  --hk-ink: #14201F;
  --hk-muted: #4A5654;
  --hk-line: #E6E0D6;
  --hk-heading: #0F4C4A;
  --hk-brand: #136460;
  --hk-brand-hover: #1B7D77;
  --hk-btn-bg: #136460;
  --hk-btn-text: #FFFFFF;
  --hk-btn-hover: #1B7D77;
  --hk-card-shadow: 0 1px 2px rgba(20,32,31,.04), 0 10px 30px rgba(20,32,31,.07);
}


/* ---------------------------------------------------------------------------
   10 · MOTION
   Every animation is transform or opacity only, so nothing triggers layout.
   Everything stops under prefers-reduced-motion: the page must be complete
   and legible with zero movement.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hk-block *, .hk-block *::before, .hk-block *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   HARKIO · THEGEM RECONCILIATION LAYER
   Hand-edited. Built into harkio-child/assets/harkio.css by website/theme/build.sh,
   appended after the design system.

   These rules only make sense once the stylesheet is loaded site-wide from the
   child theme. They are deliberately NOT in
   .claude/skills/harkio-webpage-content/references/theme.css, because that file
   also has to work standalone in a browser preview, where there is no TheGem
   markup to reconcile with.

   EVERY RULE BELOW WAS CHECKED AGAINST THEGEM'S OWN CSS on 2026-07-28, not
   guessed. The line references are to TheGem Elementor 5.12.2 as served by
   harkio.ai. Markup, from the live DOM:

     #page.layout-fullwidth > #main > #main-content
        > #page-title.page-title-block
        > .block-content > .container > .panel.row > .panel-center.col-xs-12

   RE-VERIFIED 2026-07-29 against the WPBakery edition (`thegem` 5.12.2), after
   the parent theme was swapped. `thegem-reset.css` and `thegem-grid.css` are
   byte-identical between the two editions, and `.block-content`, `.container`
   and the page wrappers are unchanged. The one difference is the overflow value
   noted under R3.

   If TheGem's markup changes in a major update, this is the file to re-check.

   SCOPING: everything that strips TheGem's own chrome is scoped to
   `.harkio-page`, a body class the child theme adds only to a page whose content
   contains `hk-block` (see functions.php). The blog, a plugin page and any
   TheGem-built page are untouched, and so is the block editor, which never
   carries that class.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   R1 · THE ROOT FONT SIZE IS NOT OURS TO FIX
   Verified: thegem-reset.css line 188 sets `html { font-size: 62.5% }`, the old
   make-1rem-10px trick, and TheGem's own components are authored in rem against
   it. Setting `html { font-size: 100% }` here would render every TheGem control,
   menu and widget at 1.6x. Do not do it.

   The design system is authored in px for exactly this reason. See the long
   comment at the top of section 2 of the design system above.
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   R2 · STRIP THEGEM'S PAGE CHROME ON HARKIO PAGES
   Each of these is a real measurement, not a precaution:

     .block-content   padding: 135px 0 100px   (style.css:2857)
     .container       padding: 0 21px, and width: 1212px above 1212px
                                              (thegem-grid.css:1 and :7)
     .panel.row       margin: 0 -21px          (thegem-grid.css:17)
     .panel-center    padding: 0 21px          (the col-xs-12 rule, grid.css:35)

   Without this the hero would sit 135px down the page inside a pale gutter, and
   every full-width band would stop 21px short of the window.

   The ID in the selector is deliberate: `.container`'s width is set inside a
   media query at (0,1,0), and an ID out-specifies it at any viewport.
   ------------------------------------------------------------------------ */
.harkio-page #page-title,
.harkio-page .breadcrumbs-container { display: none; }

.harkio-page #main-content .block-content,
.harkio-page #main-content .container,
.harkio-page #main-content .panel-center { padding: 0; }

.harkio-page #main-content .container { width: 100%; max-width: none; }
.harkio-page #main-content .panel.row  { margin: 0; }


/* ---------------------------------------------------------------------------
   R3 · FULL-BLEED SAFETY NET
   With R2 in place the content column is already the full window width, so this
   resolves to zero and does nothing. It earns its place only if a Harkio page
   ever renders inside a wrapper R2 does not know about: a different page
   template, a future TheGem layout, an Elementor container.

   Margin only, no `width: 100vw`. A block-level box with negative side margins
   grows by exactly that much, which reaches the same width when an escape is
   needed and stays honest when it is not. `100vw` would always be a scrollbar
   wider than the content column, on every page, forever.

   Overflow is not our problem to guard: TheGem clips it on `#page` itself.
   Verified in both editions, and they differ: the Elementor edition uses
   `overflow: clip`, the WPBakery edition `overflow: hidden`. Either way anything
   that escapes is clipped, so there is no `overflow-x: hidden` here. Adding one
   would risk breaking `position: sticky` for every descendant, to solve a
   problem TheGem already solves.

   One thing this cannot survive: TheGem's **boxed** layout, which caps `#page`
   at 1260px (style.css:2639) and would clip the bands to that box. The site is
   on `layout-fullwidth`. Keep it there.
   ------------------------------------------------------------------------ */
.harkio-page .hk-block { margin-inline: calc(50% - 50vw); }


/* ---------------------------------------------------------------------------
   R4 · CORE BLOCK LAYOUT SPACING
   WordPress gives every group block a flow layout, which emits
   `:where(.is-layout-flow) > * { margin-block-start: 24px }` in its global
   styles. Harkio's components space themselves with grid `gap`, so in a block
   pattern the two stack and every gap comes out roughly 24px too big.

   `:where()` contributes zero specificity, so one class selector settles it.
   Scoped inside `.hk-block`, so core's spacing still governs ordinary content
   elsewhere on the site.
   ------------------------------------------------------------------------ */
.hk-block.is-layout-flow > *,
.hk-block .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }

/* Legacy group markup wraps children in an inner container. It must not
   reintroduce a measure inside a band that sets its own. */
.hk-block > .wp-block-group__inner-container { max-width: none; }


/* ---------------------------------------------------------------------------
   R5 · ELEMENTOR'S OWN PADDING
   Measured on the live page 2026-07-28: Elementor's container ships
   `padding: 10px`, which rendered as a pale strip across the top of the page,
   above the dark header. The same 10px would appear around the header template,
   around the footer template, and around every band on any page assembled this
   way.

   Zeroing it here rather than in the Elementor UI means it is fixed once, for
   every page and every template, instead of being three settings somebody has
   to remember on each new page. Harkio bands set their own vertical rhythm and
   their own inner measure, so there is nothing for an Elementor wrapper to add.

   Both generations of Elementor layout are covered: `.e-con` containers, which
   is what this install uses, and the older section and column markup. The custom
   properties are set as well as the shorthand, because that is how Elementor
   applies container padding.

   Scoped to `.harkio-page`, so an Elementor-built page that is not a Harkio page
   keeps its own spacing.
   ------------------------------------------------------------------------ */
.harkio-page .elementor .e-con,
.harkio-page .elementor .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding: 0;
}

.harkio-page .elementor .elementor-section,
.harkio-page .elementor .elementor-widget-wrap { padding: 0; }
.harkio-page .elementor .elementor-container { max-width: none; }


/* ===========================================================================
   R6 · THE THEME OPTIONS THAT MATTER, SET IN CODE
   Added 2026-07-29, after a day of hand-set Theme Options was wiped by a save
   from a second browser tab holding stale form state. TheGem writes the whole
   options array on every save, so one stale tab reverted fonts, sizes, colours
   and transforms across the site in a single click. Nothing in the repo moved.

   WHY THIS CANNOT BE DONE WITH VARIABLES. TheGem's generated stylesheet declares
   263 `--thegem-to-*` custom properties and then **never uses one of them**:
   zero `var()` calls in 300KB. The values are written as literals, so the only
   way to override them from here is with literal rules of matching or higher
   specificity, loaded later. `body:not(.harkio-page)` does both jobs at once: it
   out-specifies TheGem's heaviest selector (0,2,1) and keeps every rule off
   Harkio pages, which get these values from the design system already.

   BREAKPOINTS ARE THEGEM'S OWN, read off its generated CSS: tablet is
   max-width 1199px, mobile is max-width 767px. Not the design system's 900/640,
   because these rules are overriding TheGem's, and the two have to line up.

   WHAT THIS COSTS, STATED PLAINLY. For everything below, the Theme Options panel
   stops being the source of truth. Change a heading size in the panel and
   nothing happens, because this file wins. That is the trade: the panel is
   convenient and can be wiped in one click, a file in the repo cannot. Anything
   NOT listed here is still governed by the panel: galleries, portfolio,
   WooCommerce, mega menu, image hovers, tags, icons, and the menu, which does
   not render at all while the header is a custom template.
   ======================================================================== */

/* R6a · body */
body:not(.harkio-page) {
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 26px;
  color: #14201F;
  background-color: #F7F4EF;
}
@media (max-width: 767px) {
  body:not(.harkio-page) { font-size: 16px; line-height: 25px; }
}

/* R6b · headings.
   `:is()` takes the specificity of its heaviest argument, which is what beats
   TheGem's `body .gem-style-text.title-h1` and its Elementor heading variants. */
body:not(.harkio-page) :is(h1, .title-h1, .gem-style-text.title-h1, .elementor-widget-heading h1.elementor-heading-title),
body:not(.harkio-page) :is(h2, .title-h2, .gem-style-text.title-h2, .elementor-widget-heading h2.elementor-heading-title),
body:not(.harkio-page) :is(h3, .title-h3, .gem-style-text.title-h3, .elementor-widget-heading h3.elementor-heading-title),
body:not(.harkio-page) :is(h4, .title-h4, .gem-style-text.title-h4, .elementor-widget-heading h4.elementor-heading-title),
body:not(.harkio-page) :is(h5, .title-h5, .gem-style-text.title-h5, .elementor-widget-heading h5.elementor-heading-title),
body:not(.harkio-page) :is(h6, .title-h6, .gem-style-text.title-h6, .elementor-widget-heading h6.elementor-heading-title) {
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  color: #0F4C4A;
  text-transform: none;
  font-style: normal;
}

body:not(.harkio-page) :is(h1, .title-h1, .gem-style-text.title-h1) { font-size: 44px; line-height: 49px; font-weight: 800; letter-spacing: -1.2px; }
body:not(.harkio-page) :is(h2, .title-h2, .gem-style-text.title-h2) { font-size: 32px; line-height: 37px; font-weight: 700; letter-spacing: -0.6px; }
body:not(.harkio-page) :is(h3, .title-h3, .gem-style-text.title-h3) { font-size: 24px; line-height: 31px; font-weight: 700; letter-spacing: normal; }
body:not(.harkio-page) :is(h4, .title-h4, .gem-style-text.title-h4) { font-size: 20px; line-height: 27px; font-weight: 600; letter-spacing: normal; }
body:not(.harkio-page) :is(h5, .title-h5, .gem-style-text.title-h5) { font-size: 18px; line-height: 25px; font-weight: 600; letter-spacing: normal; }
body:not(.harkio-page) :is(h6, .title-h6, .gem-style-text.title-h6) { font-size: 16px; line-height: 23px; font-weight: 600; letter-spacing: normal; }

@media (max-width: 1199px) {
  body:not(.harkio-page) :is(h1, .title-h1, .gem-style-text.title-h1) { font-size: 36px; line-height: 40px; }
  body:not(.harkio-page) :is(h2, .title-h2, .gem-style-text.title-h2) { font-size: 28px; line-height: 33px; }
  body:not(.harkio-page) :is(h3, .title-h3, .gem-style-text.title-h3) { font-size: 22px; line-height: 29px; }
  body:not(.harkio-page) :is(h4, .title-h4, .gem-style-text.title-h4) { font-size: 19px; line-height: 26px; }
  body:not(.harkio-page) :is(h5, .title-h5, .gem-style-text.title-h5) { font-size: 17px; line-height: 24px; }
}
@media (max-width: 767px) {
  body:not(.harkio-page) :is(h1, .title-h1, .gem-style-text.title-h1) { font-size: 28px; line-height: 31px; }
  body:not(.harkio-page) :is(h2, .title-h2, .gem-style-text.title-h2) { font-size: 23px; line-height: 27px; }
  body:not(.harkio-page) :is(h3, .title-h3, .gem-style-text.title-h3) { font-size: 20px; line-height: 26px; }
  body:not(.harkio-page) :is(h4, .title-h4, .gem-style-text.title-h4) { font-size: 18px; line-height: 24px; }
}

/* R6c · links. Coral 600 is the only coral that passes AA as text, 4.6:1 on
   Sand. Hover goes to Teal 700 rather than a darker coral, because a darker
   coral would be a new brand fact and Teal 700 is already a token. */
body:not(.harkio-page) a:not(.gem-button):not(.hk-btn):not(.wp-block-button__link) { color: #D15F38; }
body:not(.harkio-page) a:not(.gem-button):not(.hk-btn):not(.wp-block-button__link):hover { color: #0F4C4A; }

/* R6d · buttons. TheGem bundles buttons, pagination and WooCommerce into one
   sprawling selector list, so this targets the elements instead. Only filled
   buttons get colour: outline variants keep whatever the panel says, because
   forcing a fill on them would turn every secondary action into a primary one. */
body:not(.harkio-page) :is(.gem-button, input[type="submit"], button[type="submit"], .blog-load-more button, .wp-block-button__link) {
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 12px;
}
body:not(.harkio-page) :is(.gem-button:not(.gem-button-style-outline), input[type="submit"], button[type="submit"], .blog-load-more button, .wp-block-button__link) {
  background-color: #136460;
  border-color: #136460;
  color: #FFFFFF;
}
body:not(.harkio-page) :is(.gem-button:not(.gem-button-style-outline), input[type="submit"], button[type="submit"], .blog-load-more button, .wp-block-button__link):hover {
  background-color: #1B7D77;
  border-color: #1B7D77;
  color: #FFFFFF;
}

/* R6e · form fields. Governs the comment form and Contact Form 7. The HubSpot
   waitlist form is a cross-origin iframe and none of this reaches it.
   16px minimum on the font size is not cosmetic: below it, iOS zooms the page
   the moment someone taps a field. */
body:not(.harkio-page) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select) {
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: #14201F;
  background-color: #FFFFFF;
  border: 1px solid #E6E0D6;
  border-radius: 11px;
}
body:not(.harkio-page) :is(input, textarea, select)::placeholder { color: #4A5654; opacity: 1; }
body:not(.harkio-page) :is(input, textarea, select):focus { border-color: #136460; outline: 2px solid #136460; outline-offset: 1px; }

/* R6f · pagination */
body:not(.harkio-page) :is(.gem-pagination a, .gem-pagination .dots) { color: #4A5654; background-color: #FFFFFF; }
body:not(.harkio-page) .gem-pagination a:hover { background-color: #D7E8E5; color: #14201F; }
body:not(.harkio-page) .gem-pagination .current { background-color: #136460; color: #FFFFFF; }

/* R6g · hairlines */
body:not(.harkio-page) hr,
body:not(.harkio-page) .gem-divider { border-color: #E6E0D6; background-color: #E6E0D6; }


/* ---------------------------------------------------------------------------
   R5b · WPBAKERY'S OWN GRID
   Added 2026-07-30. The site runs the WPBakery edition of TheGem, so WPBakery is
   the builder available on a page. A Harkio page should be built in the block
   editor, where none of this markup appears, but a page built in WPBakery with a
   Raw HTML element lands inside a row and a column, and both add gutters.

   Measured in the live stylesheets, not guessed. From js_composer.min.css 8.7.3:

     .vc_row                     margin-left: -15px, margin-right: -15px
     .vc_col-sm-*, .vc_col-xs-*  padding-left: 15px, padding-right: 15px
     .wpb_content_element        margin-bottom: 35px

   and from TheGem's own thegem-vc_elements.css, which is the one that actually
   shipped a visible defect:

     .wpb_row, .wpb_content_element, …   margin-bottom: 1.1em
     .wpb_row:last-of-type               margin-bottom: 0

   THE ROW MARGIN IS THE ONE TO KNOW ABOUT. A page built the way TheGem's own UI
   invites, one row per section with a Raw HTML element inside it, then carries
   1.1em of page background between every band, and none after the last one
   because of that `:last-of-type` rule. It reads as a thin white strip between
   two dark bands, seen on the home page 2026-07-31. The first version of this
   rule set zeroed `.wpb_content_element` and missed `.wpb_row`, which is why the
   strip survived it.

   Harkio bands own their vertical rhythm through their own padding. Nothing a
   builder wraps around them may add to it, so all four sides go to zero here
   rather than being three settings to remember on every row anyone adds later.
   ------------------------------------------------------------------------ */
.harkio-page :is(.vc_row, .wpb_row) {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.harkio-page :is([class*="vc_col-"], .vc_column_container > .vc_column-inner) {
  padding: 0;
}

.harkio-page :is(.wpb_content_element, .wpb_raw_code, .wpb_raw_html, .wpb_wrapper) {
  margin-top: 0;
  margin-bottom: 0;
}

/* A row wrapping a single Harkio band must not introduce a stacking or spacing
   context of its own either. `vc_row-has-fill` is WPBakery's class for a row with
   a background, and it pads the column top by 35px. */
.harkio-page .vc_row-has-fill > .vc_column_container > .vc_column-inner { padding-top: 0; }


/* ---------------------------------------------------------------------------
   R7 · THE SITE CHROME
   CHANGED 2026-07-30. The Harkio header and footer are rendered by the child
   theme on every Harkio page (harkio_render_chrome in functions.php), from
   website/theme/templates/. They used to be a TheGem builder template holding one
   HTML widget, and the reasoning for the move is in the long comment above that
   function: the builder wrapped our markup in edition-specific containers, and
   the parent-theme swap on 2026-07-29 invalidated the rules that neutralised
   them.

   TheGem's own header and footer still render, so they are hidden here. Measured
   on the live site 2026-07-30, they are:

     #site-header-wrapper > header#site-header.site-header    (header-style-3)
     #top-area                                               (the top bar)
     footer#footer-nav.site-footer                           (nav, socials, credit)

   SCOPED TO `.harkio-chrome`, NOT `.harkio-page`, and that distinction is the
   whole switch. The class is added only when `HARKIO_THEME_CHROME` is true, so:

     theme route      the class is present, TheGem's chrome is hidden, ours renders
     template route   the class is absent, nothing is hidden, and our markup lives
                      INSIDE `#site-header` as a TheGem template. Hiding
                      `#site-header-wrapper` there would hide our own header.

   The blog index and any TheGem-built page never carry either class, so they keep
   TheGem's chrome in both routes.

   The failure mode to know about on the theme route: if `wp_body_open` never
   fires, a Harkio page has no header at all rather than two. Verification step 2
   after deploying is exactly that check.
   ------------------------------------------------------------------------ */
.harkio-chrome #site-header-wrapper,
.harkio-chrome #top-area,
.harkio-chrome .site-footer { display: none; }

/* The chrome is a direct child of <body>, outside `#page`, so it is already the
   full window width. It must not also escape it: `.hk-block` carries the
   full-bleed margin from R3, which on a body-level element resolves to half a
   scrollbar of overflow on each side. Same specificity as R3 (0,2,0) and later in
   the file, which is what settles it. */
.harkio-page > .hk-header,
.harkio-page > .hk-footer { margin-inline: 0; width: 100%; }


/* ---------------------------------------------------------------------------
   R7b · THE CHROME INSIDE A THEGEM HEADER OR FOOTER TEMPLATE
   The other half of the switch. Active whenever `HARKIO_THEME_CHROME` is false,
   and harmless when it is true because the markup these rules name is not on the
   page.

   Whatever builder the template is made in, it wraps our markup in a container
   with side padding, and TheGem wraps that in `.container`, which is 1212px wide
   with 21px padding (thegem-grid.css:1 and :7). Left alone, that is why the
   header once rendered as a 376px box in the top left corner of the blog index
   and the footer sat in a 21px gutter.

   Measured wrappers:

     WPBakery (js_composer 8.7.3, the current edition)
       .vc_row              margin-left/right: -15px
       [class*="vc_col-"]   padding-left/right: 15px
       .wpb_content_element margin-bottom: 35px
       .wpb_raw_code        the Raw HTML element itself

     Elementor edition (kept for history, and for a swap back)
       .e-con.thegem-e-con-layout-thegem   flex, padding 10px 21px
         > .elementor-widget-html          the HTML widget

   The escape at the end is the same mechanism as R3: negative side margins of
   `50% - 50vw` resolve to exactly 100vw and centre on the viewport no matter what
   padding the ancestors carry. It is NOT applied when the theme renders the
   chrome, because there the header is already a body-level, full-width element
   and a second escape would push it half a scrollbar off centre.
   ------------------------------------------------------------------------ */
#site-header :is(.vc_row, .wpb_row),
.custom-footer :is(.vc_row, .wpb_row),
.thegem-template-footer :is(.vc_row, .wpb_row) { margin-left: 0; margin-right: 0; }

#site-header :is([class*="vc_col-"], .vc_column-inner, .wpb_content_element),
.custom-footer :is([class*="vc_col-"], .vc_column-inner, .wpb_content_element),
.thegem-template-footer :is([class*="vc_col-"], .vc_column-inner, .wpb_content_element) {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

#site-header .thegem-e-con-layout-thegem,
.custom-footer .thegem-e-con-layout-thegem {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding: 0;
  max-width: none;
}

/* The element that directly holds our chrome must stretch, not hug its content.
   `:has()` is what makes this work for any builder without naming every wrapper
   class: it matches the widget that contains the header, whatever it is called. */
:is(.wpb_raw_code, .wpb_wrapper, .wpb_text_column, .elementor-widget-container, .elementor-widget-html, .thegem-template-wrapper, .container):has(> :is(.hk-header, .hk-footer)) {
  width: 100%;
  max-width: none;
  flex: 1 1 100%;
  padding: 0;
  margin: 0;
}

/* Full bleed for chrome that sits inside a template wrapper, on every page
   including the blog. Excluded when the theme renders the chrome itself. */
body:not(.harkio-chrome) :is(.hk-header, .hk-footer) { margin-inline: calc(50% - 50vw); }