/* ===========================================================================
   Homepage — comp v2 ("cut-paper")
   ---------------------------------------------------------------------------
   A second visual identity, built to the 2026-09-02 homepage comp: bold
   Matisse cut-paper illustration, saturated coral/gold/blue/green and a pink
   band, on a warm off-white. The live site is the parchment "Embodied Light"
   system — tan, warm brown, soft line art on a paper texture. The two do not
   blend.

   SO THIS FILE IS SCOPED, DELIBERATELY. Every rule sits under .home-v2, which
   only index.html carries, and this stylesheet is only linked from index.html.
   /bio, /body-map, /12-step-work, /breathwork, /faqs and /schedule render
   exactly as they did — they were laid out for parchment and would look
   half-finished in these colours.

   It loads AFTER styles.css, so the shared header, footer, buttons and type
   scale are inherited and then overridden here rather than duplicated. When
   the rewrite reaches the other pages, the token block below is what graduates
   into :root, and the .home-v2 scoping comes off.

   THE PAGE IS FIVE THINGS: hero, the Intersection band, Sharon, the credential,
   the footer. The comp also drew a black "Bringing the Hidden Into Awareness"
   panel beside the Intersection panel; it is cut, along with everything that
   had been built below the comp's crop. Nothing here styles a section that no
   longer exists — if a rule has no markup, delete it rather than leave it for
   the next person to trace.

   Colours are sampled off the comp, not eyeballed:
   assets/originals/home-v2-comp.png.
   =========================================================================== */

.home-v2 {
  --hv-ground:   #F6F1EB;   /* page + header field */
  --hv-ink:      #0A0B0B;   /* type and buttons — the comp's true black */
  --hv-ink-soft: #3A3A38;   /* body copy on light ground */
  --hv-ink-dim:  #6B6B67;
  --hv-coral:    #F06B4D;   /* the accent rule under every heading */
  --hv-pink:     #FAD0C6;   /* the Intersection band */
  /* The button blue is NOT defined here. It is --cta in styles.css, because it
     is now the call-to-action colour on every page rather than a homepage one —
     see the note there. Defining it twice is how the two drift apart.
     Worth knowing: the comp draws the buttons BLACK. The blue is a deliberate
     departure from it, not a correction toward it. */
  --hv-hair:     rgba(10, 11, 13, .12);

  /* Content sits in 1200. Colour does not — see the bleed note below. */
  --hv-wrap: 1200px;
  --hv-gut:  clamp(20px, 3.6vw, 48px);

  /* The gap between a full-width section's edge and the 1200 column inside it,
     and zero once the window is narrower than the column. Anything absolutely
     positioned that must stop at the column rather than the window — the hero
     art, the leaf — offsets by this instead of by 0.

     The 100% is deliberate and resolves at the point of USE, against that
     element's containing block, so this stays correct wherever it is applied.
     Not 100vw: that counts the scrollbar and would push everything a scrollbar's
     width off-centre. */
  --hv-edge: max(0px, (100% - var(--hv-wrap)) / 2);
}

/* The shared sheet paints a parchment texture on <body>. Off, or the flat pink
   band sits on a visible paper grain that the comp does not have. */
body.home-v2 {
  background-image: none;
  background-color: var(--hv-ground);
  color: var(--hv-ink-soft);
}

/* COLOUR BLEEDS, CONTENT DOES NOT. Each band's field — the pink Intersection
   panel, the black footer, the header's ground and the hairline under it — runs
   the full width of the window, while every word and every image inside stays
   in the 1200 column. So the page reads as full-width bands rather than as a
   stack of 1200-wide slabs, and no line of text ever gets longer than 1200.

   That means the width cap comes OFF these three, and the capping moves inward
   to what they contain: .wrap and .hv-hero-inner. styles.css caps all three at
   1380 and centres them — the parchment "sheet of paper on a table" — and its
   EDGE SHADOWS, dark hairlines down both sides suggesting the paper's
   thickness, go with the cap; full width they would draw a line down each side
   of the window.

   The catch is absolutely positioned children. They resolve against the section,
   which is now the window, so they bleed with the colour unless told otherwise
   — that is what --hv-edge is for. Anything new that is positioned rather than
   flowed has to opt back into the column the same way. */
.home-v2 .site-header,
.home-v2 main,
.home-v2 .site-footer {
  max-width: none;
  background-color: transparent;
  box-shadow: none;
}

.home-v2 .wrap { max-width: var(--hv-wrap); padding-inline: var(--hv-gut); }
.home-v2 h1, .home-v2 h2, .home-v2 h3 { color: var(--hv-ink); font-weight: 400; }
.home-v2 a { color: var(--hv-ink); }
.home-v2 :focus-visible { outline-color: var(--hv-coral); }

/* --- The coral rule ------------------------------------------------------- *
   The comp puts the same short coral bar under every heading that opens a
   block. One class, so it stays one decision. */
.hv-rule {
  width: 84px; height: 4px;
  background: var(--hv-coral);
  margin: 22px 0 26px;
  border: 0;
}
.hv-rule--tight { margin: 16px 0 26px; }
.hv-rule--center { margin-inline: auto; }

/* --- Buttons -------------------------------------------------------------- *
   Square-ish slab, white sans label, in the seated figure's blue. The shared
   .btn-primary is a navy pill in Cormorant; this replaces both the colour and
   the face. Every primary button on the page takes it, header included: two
   controls with the same words doing the same job should not be two colours. */
.home-v2 .btn-primary {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 3px;
  padding: 15px 26px;
  transition: background .18s ease, transform .18s ease;
}
.home-v2 .btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-1px); }
.home-v2 .btn-lg { font-size: 1rem; padding: 18px 32px; }

/* --- Header --------------------------------------------------------------- *
   Flat off-white, a hairline under it, and the active link marked with a short
   coral underline rather than the shared sheet's tan one. */
.home-v2 .site-header {
  background: var(--hv-ground);
  border-bottom: 1px solid var(--hv-hair);
  box-shadow: none;
}
.home-v2 .nav-link { color: var(--hv-ink); font-weight: 400; }
.home-v2 .nav-link[aria-current="page"] { color: var(--hv-ink); }
.home-v2 .nav-link[aria-current="page"]::after,
.home-v2 .nav-link:hover::after { background: var(--hv-coral); height: 2px; }

/* THE HEADER HAS TO FIT 1200, AND IT IS ONLY EVER ASKED TO FIT 1200. The shared
   sheet hands the nav to the hamburger at max-width:1200, so this row exists at
   exactly one size: a 1200 column less two ~48px gutters, about 1104 of content.
   Six links, a button and the lockup do not fit that at the widths styles.css
   uses — it sized them for a header as wide as the window — so the gap, the
   link size and the button's padding all come in a notch.

   styles.css also sets .brand to flex: 1 1 auto so it absorbs whatever the nav
   leaves. With almost nothing left over, and a flex item free to shrink below
   its own width, the lockup collapsed to about a third of its size. Its width is
   fixed here and the nav takes the slack with margin-left: auto instead. */
.home-v2 .brand { flex: 0 0 auto; }
.home-v2 .brand-lockup { width: 252px; max-width: none; }
.home-v2 .main-nav { margin-left: auto; gap: 18px; }
.home-v2 .nav-link { font-size: .88rem; white-space: nowrap; }
.home-v2 .nav-cta { white-space: nowrap; font-size: .88rem; padding: 13px 20px; }

/* ===========================================================================
   1. Hero
   ---------------------------------------------------------------------------
   Title and button left, illustration right. The cream field runs the full
   width of the window; the art is an image, so it stops at the 1200 column and
   the whole scene stays visible rather than being cropped by the viewport. It
   is still placed absolutely and anchored bottom-right rather than being a grid
   cell, because a grid cell would letterbox it and put a band of dead space
   under the figures.
   =========================================================================== */
.hv-hero {
  position: relative;
  background: var(--hv-ground);
  overflow: hidden;
  isolation: isolate;
}
/* The art is now a child of this, so this is its containing block. That is the
   whole trick: the art can only reach the bottom of THIS box, which is where
   the epigraph below starts, so the two can never meet however the copy wraps.

   position:relative WITHOUT z-index is load-bearing. z-index on a positioned
   element makes a stacking context, and the art is now inside this one, so a
   z-index here is the thing that isolates its multiply and paints the white
   field back as a rectangle. The art needs to blend against .hv-hero, which is
   the intended blend root — that is what isolation:isolate up there marks. The
   copy takes the z-index instead, since it is what has to sit over the art. */
.hv-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--hv-wrap);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) var(--hv-gut) clamp(64px, 9vw, 130px);
}
/* The copy never crosses the art. 47% is where the comp's headline wraps.
   Positioned so it paints over the art: the art is absolute and would otherwise
   sit above static copy regardless of source order. */
.hv-hero-copy { position: relative; z-index: 2; max-width: 47%; }
.hv-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
}
/* The comp carries a lede between the rule and the button, which is what sets
   the button that far down the hero. The lede is cut but that position is
   wanted, so the gap it left is held open deliberately. */
.hv-hero-cta { margin-top: clamp(18px, 5vw, 80px); }

/* The scene ships with a white field and no alpha — the export baked a faint
   neutral checker into it, which snapping lifted to pure white. multiply is
   what makes that field vanish into the ground, so NOTHING may sit above it
   with opacity, a transform or a z-index, or the blend isolates and the white
   rectangle comes back. Same rule as the parchment hero figure. */
.hv-hero-art {
  position: absolute;
  bottom: 0;
  /* Both resolve against .hv-hero-inner, which is already capped at 1200 — so
     these are the column's right edge and 56% of the column, with no
     --hv-edge arithmetic needed any more. */
  right: 0;
  width: 72%;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* --- Corner decoration ----------------------------------------------------- *
   The comp frames the hero in four cut-paper blobs — green, coral, orange with
   a seedling, blue. They were delivered as one 1717x916 frame with the corners
   baked into it; that frame is cut into four so each corner keeps its shape at
   any hero height instead of being stretched to whatever the section becomes.

   They resolve against .hv-hero-inner, so top/bottom are the scene's own edges
   and left/right are the 1200 column — the same free capping .hv-hero-art gets,
   and the reason none of this needs --hv-edge arithmetic.

   z-index 0 puts them under the art (1) and the copy (2). They must stay there
   — see the multiply note on .hv-hero-art.

   SIZED AGAINST THE SCENE, WHICH IS ABOUT 570 TALL AT DESKTOP. The comp's
   corners take roughly a quarter of the hero's height; at their delivered
   pixel heights they took two thirds of it and closed over the headline. The
   caps below are that quarter, so they read as corners rather than as a border,
   and they downscale from the source at every width. */
.hv-corner {
  position: absolute;
  z-index: 0;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* The two on the left are held off the copy rather than sized to taste: the
   headline starts about 100px down the scene and the button ends about 130px
   up from its floor, so those are the two ceilings. Dark green and dark ink
   have nowhere near the contrast to overlap. The right-hand pair have only the
   artwork to answer to, which they are allowed to sit under, so they stay
   nearer the comp's proportion. */
.hv-corner--tl { top: 0;    left:  0; height: clamp(48px,  8vw, 120px); }
.hv-corner--tr { top: 0;    right: 0; height: clamp(60px, 10vw, 165px); }
.hv-corner--bl { bottom: 0; left:  0; height: clamp(56px,  8vw, 115px); }
.hv-corner--br { bottom: 0; right: 0; height: clamp(64px, 10vw, 165px); }

/* --- The epigraph, closing the hero --------------------------------------- */
.hv-hero-epigraph {
  position: relative;
  max-width: var(--hv-wrap);
  margin-inline: auto;
  /* The art sits at the bottom edge of .hv-hero-inner's padding box, so the
     clearance between it and this line is this top padding, not that padding. */
  padding: clamp(26px, 3vw, 44px) var(--hv-gut) clamp(52px, 6vw, 84px);
  text-align: center;
}
/* Hung off the right of the Jung line, sitting in the empty ground beside it
   rather than over it. NOT mirrored: the blue base is a corner piece, drawn
   with its two straight edges along the bottom and the right, so it only sits
   flush in a bottom-right corner. Flipped, those cut edges turn inward and the
   blue reads as a rectangle someone sliced off mid-page.

   THE WIDTH IS A CLEARANCE, NOT A TASTE. The line is set to 40em and centred,
   which at desktop is about 920px of a 1200 column — so the clear ground beside
   it is only ~140px a side, not the ~280 a 40em measure suggests. Anything
   wider than this and the leaves close over the end of "psychological". The
   comp hangs it at much the same fraction of the band, so small is also right.

   right:0 rather than --hv-edge because this box is ALREADY the 1200 column:
   .hv-hero-epigraph caps itself and centres, so --hv-edge would resolve against
   1200 and evaluate to 0 anyway. Gone below 980, where the line takes it back. */
.hv-sprig {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(84px, 9vw, 132px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hv-hero-epigraph p {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 40em;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.42;
  color: var(--hv-ink);
}

/* ===========================================================================
   2. At the Intersection of Psychology & Spirituality
   ---------------------------------------------------------------------------
   In the comp this is the right half of a two-panel band, left-aligned because
   a black panel sat beside it. That panel is gone, so the band is the full
   width of the window and its contents are centred in 1200 — left-aligned copy in a
   full-width pink field would read as a column that lost its neighbour.
   =========================================================================== */
.hv-intersect {
  position: relative;
  overflow: hidden;
  background: var(--hv-pink);
  /* Flat, not a clamp. The band was running 928 tall at desktop — near a full
     screen, which made it read as a second hero competing with the first
     rather than as a section under it. The old clamp's 6.5vw meant the wider
     the window, the more it grew, so the problem was worst exactly where the
     hero was already largest. 64 holds at every width above the phone rule. */
  padding: 64px 0;
  text-align: center;
}
.hv-intersect h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  margin: 0 auto;
  /* In em, so it scales with the heading and holds the same break at every
     width: "At the Intersection of / Psychology & Spirituality". Wide enough
     to orphan "Spirituality" on its own line, which is what 18em did. */
  max-width: 14em;
}
.hv-intersect .hv-rule { margin-inline: auto; }

/* The pair sits in a constrained block rather than filling the band: two
   columns of half the 1200 column would set 12 words across 38em. */
.hv-duo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  max-width: 880px;
  margin-inline: auto;
  text-align: left;
}
/* The comp separates the pair with a hairline, not a gap. */
.hv-duo > * + * {
  border-left: 1px solid rgba(10, 11, 13, .16);
  padding-left: clamp(24px, 3.4vw, 52px);
}
.hv-duo-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.hv-duo-head h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.hv-duo svg { flex: 0 0 auto; }
.hv-duo p { margin: 0; font-size: .97rem; line-height: 1.66; }

/* Spirituality mirrors Psychology across the hairline rather than repeating it:
   text ranged right, and its heading row reversed so the icon sits on the
   outside edge like the other one does. row-reverse packs to the right on its
   own, so no justify-content is needed with it. */
.hv-duo > *:last-child { text-align: right; }
.hv-duo > *:last-child .hv-duo-head { flex-direction: row-reverse; }

/* The band's anchor, sitting between the rule and the pair. Purpose-drawn for
   this blush field and shipped with real alpha, so unlike the hero scene it
   needs no multiply and nothing above it has to avoid making a stacking
   context. Run past the 520 its own README suggests: it is the band's subject
   rather than a decoration, and the source is 1100px so 680 is still inside
   its resolution. */
/* 540, down from 680. The picture was the single biggest thing in the band and
   the main reason it stood up to the hero; at 540 it still carries the section
   without leading it. The second term is a share of the VIEWPORT rather than of
   the column, so the art narrows with the window between the phone rule and the
   point it reaches 540 (about 675). Below 640 none of this applies — the art
   goes full-bleed and sets its own width and margins there. */
.hv-intersect-art {
  width: min(540px, 80vw);
  height: auto;
  margin: 4px auto 26px;
}

/* ===========================================================================
   3. Sharon — portrait and story
   ---------------------------------------------------------------------------
   The only photograph on a page of flat cut-paper artwork, so it is given a
   plain square-cornered block and nothing else: no shadow, no arch, no filter.
   Anything decorative would be the one place the page tries to make a
   photograph behave like an illustration, and lose to it.
   =========================================================================== */
/* Asymmetric padding on purpose. The credential below is the same cream, so
   the two bands' facing paddings read as one gap rather than two, and the pair
   was leaving ~180px of empty ground between Sharon's last line and the
   credential. The bottom is cut to about a third of the top. */
.hv-sharon {
  /* The portrait accents hang past the photograph on the left and below, and
     on a phone the portrait is already nearly the full column — so without
     this the botanical reaches past the viewport and puts a horizontal
     scrollbar on the whole page. Same guard .hv-intersect and .hv-license use.
     Nothing else here comes near the section's edges. */
  overflow: hidden;
  background: var(--hv-ground);
  padding: clamp(56px, 7vw, 100px) 0 clamp(20px, 2.6vw, 36px);
}
.hv-sharon-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* --- Portrait accents ------------------------------------------------------ *
   A cobalt cut-paper panel leaning out from behind the photograph, and a gold
   and green botanical at its lower-left corner. Both sit UNDER the photo; this
   wrapper is the positioning context and the grid item, so the figure inside it
   keeps its own crop and radius untouched.

   The backing takes the photograph's box and shifts it 18 left and 20 down, so
   the offset is those pixels at every width rather than a share that drifts as
   the column narrows. It is a flat rounded rectangle, so object-fit:fill costs
   nothing but a fractionally softer corner — worth it to keep the paper grain
   the identity is built on.

   IT IS SIZED BY WIDTH AND ASPECT, NOT BY INSET. Four insets size a normal
   element, but an <img> is replaced: with width:auto it takes its intrinsic
   543x780 and the insets are simply ignored, which is what it did here first.
   The ratio lives on the wrapper so the panel and the crop cannot disagree. */
.hv-portrait {
  position: relative;
  --portrait-ratio: 3 / 4;
}
.hv-portrait-backing {
  position: absolute;
  z-index: 0;
  left: -18px;
  top: 20px;
  width: 100%;
  aspect-ratio: var(--portrait-ratio);
  height: auto;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}
/* Behind the photograph's lower-left corner, per the artwork's own note, so it
   is meant to be partly hidden — but far enough out that what shows still reads
   as a stem with leaves rather than as one stray flower. At -44 the photo
   covered everything but the coral bloom. */
.hv-portrait-botanical {
  position: absolute;
  z-index: 0;
  left: -62px;
  bottom: -26px;
  width: clamp(96px, 12vw, 162px);
  max-width: none;
  pointer-events: none;
}
/* Above both accents. Without this the figure is a static grid child and the
   positioned panels paint over the photograph. */
.hv-sharon-portrait {
  position: relative;
  z-index: 1;
  margin: 0;
  /* 3:4, not the 4:5 this held for the previous portrait. The photograph is the
     one where Sharon's hands rest on her middle, and head-to-hands is about a
     0.66 ratio of subject — taller than a 0.8 box can hold. At 4:5 the crop cut
     the hands off at the frame edge whatever the anchor, which loses the only
     reason this frame was chosen over the last one.

     3:4 rather than the 2:3 that frames it best, because of what sets this
     section's height: the copy column runs about 494, so a 475 portrait was
     never the tall side of the grid. 507 costs the band ~13px and shows the
     hands; 2:3 would be 570 and cost ~76px for a little more belt.

     Declared on .hv-portrait as --portrait-ratio so the cut-paper panel behind
     the photograph is cut to the same shape from the same number. */
  aspect-ratio: var(--portrait-ratio);
  overflow: hidden;
  border-radius: 3px;
}
.hv-sharon-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Centred, not top-anchored. The old 12% pinned her face high because the
     crop was taking off the bottom; here the bottom is the point, and the
     middle is the only place both her hair and her hands survive. */
  object-position: 50% 50%;
}
.hv-sharon-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0;
}
.hv-sharon-copy p { font-size: .99rem; line-height: 1.68; max-width: 40em; }
/* Her own words, so they carry a little more weight than the prose around
   them without becoming a pull quote with a rule and a mark of its own. */
.hv-sharon-pull {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  line-height: 1.36;
  color: var(--hv-ink);
}

/* ===========================================================================
   4. Credential — the last thing before the footer
   =========================================================================== */
.hv-license {
  /* One number drives the whole band: the gates' height, the floor the band
     reserves for them, and the point at which the credential has to move up out
     of their way.

     THE TOP END IS SET BY THE CREDENTIAL, NOT BY THE ARTWORK. The florals ship
     560 tall, so 560 is where they would start upscaling — but they widen as
     they grow, at about 1.32x their height for the pair, and the middle they
     leave is what the title has to fit in. At 380 the title clears the
     right-hand bouquet by about 60px at desktop; past roughly 400 that gap is
     gone and "Therapist" runs into the flowers. Raise this and check that gap,
     not the source height.

     The 24vw matters as much as the cap: the pair only reach it above ~1580,
     so on a 1440 laptop this middle term is what is actually in force. */
  --gate-h: clamp(132px, 24vw, 380px);

  position: relative;
  overflow: hidden;
  background: var(--hv-ground);
  padding: clamp(26px, 3.2vw, 42px) 0 clamp(40px, 5vw, 64px);
  /* Tall enough that the gates always have their full height to stand in, and
     no taller: this floor, not the padding, is what sets the band's height at
     desktop, so trimming the padding alone would not have closed the gap. */
  min-height: calc(var(--gate-h) + 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
/* Above the artwork, and its own stacking context so the reveal's transform on
   .wrap cannot land it underneath. */
.hv-license .wrap { position: relative; z-index: 1; }

/* Bottom corners of the 1200 column — images, so they stop where the hero art
   and the text stop while the ground runs past them. Explicit height with
   width:auto, because the shared reset forces height:auto on every img and the
   pair have different aspects: they are a matched set, not a mirrored one, and
   matching their HEIGHTS is what makes them read as one.

   The pair are the comp's dense floral corners, which replaced the sparser
   cut-paper ones the band opened with. Both ship 560 tall against a --gate-h
   that tops out at 250, so they downscale at every width and never soften. */
.hv-gate {
  position: absolute;
  bottom: 0;
  height: var(--gate-h);
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.hv-gate--left  { left:  var(--hv-edge); }
.hv-gate--right { right: var(--hv-edge); }
.hv-license-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.16;
  color: var(--hv-ink);
  margin: 0 0 14px;
}
.hv-license-num {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv-ink-dim);
  margin: 0;
}
.hv-license-cta { margin-top: clamp(24px, 3vw, 34px); }

/* --- Footer --------------------------------------------------------------- *
   The shared footer is parchment-toned; on this page it takes the comp's black
   so the page closes on a slab. */
.home-v2 .site-footer {
  background: var(--hv-ink);
  color: rgba(255, 255, 255, .68);
  border-top: 0;
}
.home-v2 .site-footer a { color: rgba(255, 255, 255, .8); }
.home-v2 .site-footer a:hover { color: #fff; }
.home-v2 .site-footer h4,
.home-v2 .footer-brand { color: #fff; }
.home-v2 .crisis {
  background: rgba(255, 255, 255, .06);
  border-color: var(--hv-coral);
  color: rgba(255, 255, 255, .8);
}
.home-v2 .crisis strong { color: #fff; }
.home-v2 .footer-bottom { border-top-color: rgba(255, 255, 255, .16); }

/* ===========================================================================
   Responsive
   ---------------------------------------------------------------------------
   Two real breaks, not a ladder of them:
     980 — the hero's copy/art split stops fitting
     640 — phone: the Intersection pair stacks
   =========================================================================== */
/* THE BOTANICAL RUNS OUT OF ROAD BEFORE THE LAYOUT DOES. It hangs 62px left of
   the photograph, which is fine while the 1200 column is centred in a window
   with margin to spare. Below about 1280 that margin is gone: the column is the
   window less a ~40px gutter, so the portrait sits hard against the left edge
   and 62px puts a fifth of the leaves off-screen, where .hv-sharon's overflow
   clips them into a straight vertical cut. The two-column layout still has
   plenty of room here — only the decoration does not — so the offset comes in
   rather than the layout changing. Below 980 the grid centres and the problem
   goes away on its own. */
@media (max-width: 1279px) and (min-width: 981px) {
  .hv-portrait-botanical { left: -30px; }
}

@media (max-width: 980px) {
  /* The hero art can no longer sit beside the copy without squeezing the
     headline to two words a line, so it goes under it — and the button goes
     under THAT, so the order becomes title, rule, artwork, button.

     Which needs the button to be a sibling of the artwork, and it is not: it
     sits inside .hv-hero-copy. display:contents dissolves that wrapper so its
     three children become flex items of .hv-hero-inner alongside the image,
     and then `order` can put the button last. The wrapper carries data-reveal,
     and an element with display:contents generates no box, so its opacity and
     transform stop applying — the hero copy simply appears here rather than
     fading in. No broken state: the 0-opacity start stops applying too.

     Flex items stretch on the cross axis, so the button needs align-self or it
     becomes a full-width slab. .hv-rule and the artwork set explicit widths, so
     stretch leaves those alone. */
  .hv-hero-inner { padding-bottom: 0; display: flex; flex-direction: column; }
  .hv-hero-copy { display: contents; }
  .hv-hero-cta { order: 2; align-self: flex-start; margin-top: clamp(22px, 4.5vw, 32px); }

  /* Wider than its column and cropped by .hv-hero's overflow. Only a little at
     tablet sizes: the same percentage overflow costs far more actual picture on
     a 820 column than a 390 one, and past about 9% a side it starts cutting the
     reclining figure rather than the empty ground around her. The phone gets
     the real oversize, below. Symmetric — the negative left margin is exactly
     half the overflow. */
  .hv-hero-art {
    position: static;
    order: 1;
    width: 108%;
    /* max-width:none is required, not decorative: the shared reset puts
       max-width:100% on every img, which silently clamps the width above back
       to the column and makes the whole overflow a no-op. */
    max-width: none;
    margin: 28px 0 0 -4%;
  }

  /* THE BOTTOM TWO CORNERS COME OFF HERE, AND NOT FOR CROWDING. Above this
     width the art is absolute and the blobs sit under it at z-index 0. Here it
     turns static, and a positioned element paints above in-flow content
     whatever its z-index says — so the pair would land on top of the artwork
     and, being over a multiply, bring its white field back with them. The top
     two are safe: the stack puts the title at the top, not the picture.

     They are also what the bottom of the hero no longer has room for. The art
     runs full-bleed from here down and the epigraph follows it directly. */
  .hv-corner--bl, .hv-corner--br { display: none; }

  /* Same story, and the 40em line has taken back the ground it hung in. */
  .hv-sprig { display: none; }

  /* Portrait above the story rather than beside it; capped so a phone-width
     column does not hand it 600px of height. */
  .hv-sharon-grid { grid-template-columns: 1fr; justify-items: center; }
  /* The wrapper is the grid item now, not the figure, so the cap belongs here
     — left on the figure it would size the photograph inside a wrapper still
     as wide as the column, and the accents would sit adrift of it. */
  .hv-portrait { width: min(340px, 100%); }
  .hv-sharon-copy { text-align: center; }
  .hv-sharon-copy p { margin-inline: auto; }
  .hv-sharon-copy .hv-rule { margin-inline: auto; }
}

/* The credential and the gates compete for the middle of the band long before
   the phone breakpoint. The title holds a floor of about 400px — its font-size
   clamp bottoms out at 1.5rem — while the two gates together take roughly a
   third of the band's width, so just above 640 they meet and the title runs
   under the right-hand flowers. Past ~900 there is comfortably clear middle.

   So below that, stop centring the credential in the band and give it the
   gates' height as floor instead: it sits wholly above them rather than through
   them, which is what the parchment licence band does with its ridgeline.

   The 44 was 28 while the gates were shorter. It is not slack: it is the only
   thing separating the button from the flowers here, and the taller art ate it
   down to 12px of real clearance before this went up. If --gate-h grows again,
   measure this gap rather than assuming the formula keeps it. */
@media (max-width: 900px) {
  .hv-license {
    justify-content: flex-start;
    padding-bottom: calc(var(--gate-h) + 44px);
  }
}

@media (max-width: 640px) {
  .hv-hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }

  /* The artwork is the page's whole first impression on a phone, and this is
     the one width where running it off both edges buys back real size for a
     crop of about 6% a side — empty ground, not figures. */
  .hv-hero-art { width: 130%; margin-left: -15%; }

  /* The hairline divider reads as a column rule; stacked, it is a left edge on
     nothing. Swap it for a top rule. */
  .hv-duo { grid-template-columns: 1fr; gap: 26px; }
  .hv-duo > * + * {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(10, 11, 13, .16);
    padding-top: 26px;
  }
  /* Stacked, there is nothing left to mirror across — one ranged right under
     one ranged left just reads as a mistake. Both go back to left. */
  .hv-duo > *:last-child { text-align: left; }
  .hv-duo > *:last-child .hv-duo-head { flex-direction: row; }

  /* Full-bleed to both screen edges, and NOT cropped — unlike the hero art,
     which is allowed to run past them. This one is a single centred composition
     with the two figures near its edges, so anything the crop took would come
     off a figure. So it grows to exactly the viewport and stops: the width is
     the column plus its two gutters, and the negative inline margins cancel
     them. max-width:none again, or the shared img reset clamps it back.

     The vertical spacing comes in with it. At 78% the band's padding and the
     art's margins were sized against a much smaller picture; at full width the
     same gaps read as the section drifting apart. */
  .hv-intersect { padding: clamp(34px, 7vw, 48px) 0; }
  .hv-intersect .hv-rule--tight { margin-bottom: 14px; }
  .hv-intersect-art {
    width: calc(100% + 2 * var(--hv-gut));
    max-width: none;
    margin: 0 calc(-1 * var(--hv-gut)) 18px;
  }
}

/* The same running-out-of-road as the 1279 rule, at the other end. Here the
   portrait is min(340px, 100%) centred in a column barely wider than itself —
   at 360 the wrapper starts about 20px from the section edge — so the 62px
   overhang is again mostly off-screen and clipped flat.

   Pulled to 20, which is safe down to a 320 viewport: the gutter's own floor is
   20, so the leaves stop exactly at the edge rather than past it. What still
   reads at this size is the part hanging BELOW the photograph's corner, which
   the bottom offset keeps either way. */
@media (max-width: 479px) {
  .hv-portrait-botanical { left: -20px; }
}