/* The homepage — loaded after approach.css, only by index.html. This file was
   built as a visual-concept redesign (home-concept.html/.css) alongside the
   older approach.html; once it was ready, it replaced approach.html as the
   real homepage and both were renamed to home.html/home.css. When the site
   went live, home.html/home.css took over the index.html/index.css filenames
   (the actual Coming Soon page moved to coming-soon.html to make room).
   Nothing here touches the other live pages.

   Approach (brandbook pp. 9-11, 16, 20): a quiet rhythm of approved color
   pairings and tints, with cropped monogram shapes as background framing
   ("graphic language"). Shapes are decorative only (aria-hidden), are never
   rotated, and are never shown whole. On desktop they sit beside the text
   column; on phones there is no room for that, so the light shapes sit
   behind some text (body text still measures 8:1 or better there).

   Accessibility notes:
   - Every section keeps its text on Orchid, Parchment, or Bone (or a light
     tint of one of those), all of which give body text at least 9:1
     contrast.
   - Shape tints are deliberately low contrast, so they can never compete
     with or reduce the legibility of the copy near them.

   Color history, for whoever reads this next: this page went through two
   rounds of "too many hues of purple" — first four mismatched Periwinkle
   tints (one per section), then four separately hand-picked Orchid tints
   after Periwinkle was removed, which still felt busy because each one was
   tuned independently with no shared logic tying them together. That was
   replaced with ONE rule for shapes (below), and the challenge boxes/service
   cards settled on plain Bone. The photo's arch later became one deliberate
   exception: a Soft Periwinkle accent (see .hc-story-photo::before), added
   back on purpose as a single one-time pop of color, not a repeating tint,
   once the rest of the page had already settled down to Orchid/Bone/Parchment
   plus that one shape rule. */

:root {
  /* ONE rule for every background shape: a low-opacity overlay of whichever
     neutral ISN'T the section's own background — Orchid on light sections,
     Parchment on the dark Orchid sections — always at the same 8% strength.
     (This isn't a new idea: the old hand-picked hero/cta color, #641870,
     turned out to already be within 1 hex digit of "Parchment at 8% over
     Orchid" — so this makes explicit and consistent a rule that one shape
     was already quietly following, instead of four separately-tuned values
     that didn't quite match each other.) */
  --hc-shape-on-light: rgba(87, 5, 100, 0.08);
  --hc-shape-on-dark: rgba(248, 244, 238, 0.08);
  /* ONE size for every background monogram crop, so they read as the same
     element repeating down the page. Fixed in px (not vw) on purpose: the
     crop positions below are tuned to this size, so the same strokes land on
     the section edges at every desktop width. */
  --hc-shape-w: 820px;
  /* Shared size for "You can take action now." and the Services hint line
     below, so the two read as the same voice/weight of prompt. */
  --hc-cta-text-size: 1.35rem;
}

.hc-hero,
.hc-intro,
.hc-bone,
.hc-story,
.hc-cta {
  position: relative;
  overflow: hidden;
}

/* Content always sits above the shapes. */
.hc-hero > .approach-hero-inner,
.hc-intro > .approach-section-inner,
.hc-bone > .approach-section-inner,
.hc-story > .approach-section-inner,
.hc-cta > *:not(.hc-shape) {
  position: relative;
  z-index: 1;
}

.hc-shape {
  position: absolute;
  z-index: 0;
  top: 0;
  width: var(--hc-shape-w);
  height: auto;
  pointer-events: none;
  fill: currentColor;
}

/* How the crops are positioned (so they can be re-tuned without guesswork):
   every shape is anchored to its section's top edge, then nudged up by
   translateY(-N%), where N is how far down the monogram (0-100%) the section's
   TOP edge should land. The section's bottom edge lands N% + section height
   further down. Both edges must fall inside one of the monogram's thick
   horizontal bars, or the crop leaves a thin stub or a strip of empty space
   (which reads as an accident). Measured bar bands, as % down the monogram:
     top bars 0-12 | upper B bar 34-45 | middle bar 65-77 | bottom bar 95-108
   Horizontal position works the same way, as a fraction of the shape's own
   width, so the same part of the monogram shows at every screen width. */

/* 1. Hero: taller, with a large tonal monogram crop bleeding off the right
   edge in place of the old generic ring. */
.hc-hero::before {
  display: none;
}

.hc-hero .approach-hero-inner {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.hc-shape--hero {
  color: var(--hc-shape-on-dark);
  right: calc(var(--hc-shape-w) * -0.26);
  /* Top edge lands in the top bars (6%); bottom edge lands in the middle
     bar. The nav above is the same Orchid, so the shape reads as tucked
     behind it. */
  transform: translateY(-5.5%);
}

/* 2. Intro: Parchment, with a tonal Orchid crop entering from the left edge
   (same side as the closing CTA). The button is nudged right on wider
   screens so it never sits on top of the shape. */
.hc-intro {
  background: var(--parchment);
}

/* Section height is what decides where the shape's bottom edge lands, so the
   padding here is tuned to put that edge inside the monogram's bottom bar
   (about 95-110% of the way down) at desktop widths. */
.hc-intro {
  padding-top: 4.5rem;
  padding-bottom: 4rem;
}

/* On narrower laptops the boxes shrink and the section gets a little short,
   which would leave the shape's bottom edge barely inside the bar. Hold a
   floor so it stays well inside. (Desktop widths are already taller.) */
@media (min-width: 901px) {
  .hc-intro {
    min-height: 565px;
  }
}

.hc-shape--intro {
  color: var(--hc-shape-on-light);
  /* Original vertical position (no shift): the monogram's top edge is flush
     with the hero above and it runs off the bottom of the section, cut
     through its bottom bar (see the padding on .hc-intro) — the house style
     for every shape on this page, so it must keep touching both edges.

     Horizontally it sits 45px left of the original spot (-0.58 -> -0.635).
     At the original spot the problem-statement panel's top-left corner was
     ~13px OUTSIDE the arc's stroke, which looked like a near-touch; this puts
     it ~18px inside the stroke (panel reads as laid over the arc), while
     still showing the right ends of the B's counters (the negative space
     inside the B). Worked out against the monogram's real outline and the
     panel's real corner positions at 1440, 1200 and 1024px wide.

     Things that did NOT work, for whoever tunes this next: moving it up
     stops it touching the section's bottom edge; moving it much further left
     (-0.702) hides the B's counters, so the bowls read as two solid
     bubbles; moving it right (-0.48) exposes the cut-off end of the top bar. */
  left: calc(var(--hc-shape-w) * -0.635);
}

/* Lead-in and closing lines around the challenge boxes: the same larger, bolder
   treatment for both, in Orchid (11.9:1 on Parchment). Sized as a heading-scale
   line, not body copy, so they read as the section's message. */
.hc-lead {
  max-width: 760px;
  /* Balanced wrapping avoids a lone word ("now.") on its own last line. */
  text-wrap: balance;
  margin: 0;
  /* Was 1.25rem/line-height 1.6 — bold matched .hc-cta-line, but the size and
     line-height didn't, so the two bookend lines were subtly different
     scales side by side. Now shares .hc-cta-line's exact font-size (the
     --hc-cta-text-size token) and line-height so the line above the boxes
     and the line below them read as one matched pair. */
  font-size: var(--hc-cta-text-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--velvet-orchid);
}

.hc-lead--closing {
  /* Wide enough to stay on one line on desktop. */
  max-width: 900px;
  margin-bottom: 1.75rem;
}

/* "You can take action now." + the button, woven into one unit: a bolder
   line, a short connecting stem (echoes the small underline rule used for
   eyebrow labels elsewhere on the site), then the button close beneath it. */
.hc-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.75rem;
}

.hc-cta-line {
  margin: 0;
  font-size: var(--hc-cta-text-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--velvet-orchid);
}

.hc-cta-connector {
  display: flex;
  justify-content: center;
  height: 1.75rem;
  /* Not equal top/bottom: the arrowhead's visual weight sits at the bottom of
     its box, so an equal pixel gap on both sides reads as closer to the
     button than to the text above. More room below corrects for that. */
  margin: 0.3rem 0 0.85rem;
  /* Animates this wrapper only (translateY), independent of the arrow's own
     rotation below, so the two transforms don't have to compose. */
  animation: hc-arrow-bounce 1.6s ease-in-out infinite;
}

.hc-cta-arrow {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--velvet-orchid);
  /* Same glyph as .approach-readmore-link's "→", turned to point at the
     button instead of a new page. */
  transform: rotate(90deg);
}

@keyframes hc-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-cta-connector {
    animation: none;
  }
}

.hc-cta-group .approach-intro-cta {
  /* Overrides .approach-intro-cta's own margin-top: the connector already
     provides the space, so the button sits close beneath it as one piece. */
  margin-top: 0;
}

/* Problem statements (intro): four segments separated by vertical Orchid
   lines, sitting together in ONE Bone panel. These used to be four separate
   Bone boxes with an Orchid border — pixel-for-pixel the same as the
   clickable Services cards below, so visitors expected them to be
   clickable. One shared panel (not a tile per statement) keeps the Bone
   color and weight but reads as a section of content, not four things to
   tap; the dividers keep the statements distinct. The panel has the same
   rounded corners and light Orchid outline as the Services cards so the two
   read as one visual family, but it's a single large rectangle (and has no
   hover lift), so it isn't mistaken for one of them. Plain list, not links. */
.hc-challenges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* No gap: each segment's own side padding makes the space, so the divider
     lines sit centered between neighbors. */
  gap: 0;
  align-items: stretch;
  margin: 2rem 0 2.5rem;
  padding: 2rem 0.5rem;
  background: var(--bone);
  /* Same corner radius and outline as .service-card (services.css). */
  border: 1px solid rgba(87, 5, 100, 0.18);
  border-radius: 16px;
}

.hc-challenge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  /* Pins each segment to its column so long text grows the row height
     instead of pushing into a neighbor. */
  justify-self: stretch;
  min-width: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--velvet-orchid);
}

/* The divider: a 3px Orchid line on the left of every segment but the first,
   so it always falls between two segments. Same line as the service
   sub-offerings and the About-page pull quotes. */
.hc-challenge + .hc-challenge {
  border-left: 3px solid var(--velvet-orchid);
}

/* All of a box's text lives in one span so it flows as one block. (Without it,
   the flex container treats the words and the nowrap span as separate items
   and lays them out side by side.) */
.hc-challenge-text {
  display: block;
  /* Even line lengths, so no box ends on a lone word ("it?"). */
  text-wrap: balance;
}

/* Keeps a hyphenated word from splitting across two lines ("tune-" / "up?"). */
.hc-nowrap {
  white-space: nowrap;
}

/* Two by two: one vertical divider down the middle. The third statement starts
   the second row, so it gets no line on its left (the general rule above
   would otherwise put one at the page edge). Rows are separated by space. */
@media (max-width: 900px) {
  .hc-challenges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .hc-challenge:nth-child(odd) {
    border-left: none;
  }
}

/* Phones keep the two-across layout too (stacking them would drop the
   vertical dividers), with tighter side padding for the narrow columns. */
@media (max-width: 480px) {
  .hc-challenge {
    padding: 0.25rem 0.75rem;
  }
}

/* 3. What we do: Bone (secondary pairing), full paragraph unchanged, with a
   faint Orchid-tint crop from the lower right. */
.hc-bone {
  background: var(--bone);
}

/* Sized up to match .approach-hero-copy / .hc-lead above (1.25rem, regular
   weight), so this paragraph doesn't read smaller than the text above it.
   Opacity/color otherwise untouched, matching the same pattern used for the
   About GBD/About Diana body copy (about.css). The link is scaled up to
   match, kept bold so it still reads as a link. */
.hc-bone .approach-body {
  font-size: 1.25rem;
  line-height: 1.6;
}

.hc-bone .approach-readmore-link {
  font-size: 1.1rem;
}

.hc-shape--bone {
  color: var(--hc-shape-on-light);
  right: calc(var(--hc-shape-w) * -0.14);
  /* Top edge lands in the upper B bar (~40%); bottom edge lands in the
     bottom bar. */
  transform: translateY(-36.8%);
}

/* "Click each service to learn more." matched to the same size as "You can
   take action now." above (both are a short prompt pointing at the next
   action) — scoped here rather than in services.css, so the live Services
   page and its four detail pages, which share that stylesheet, are
   untouched.

   margin-top is also bumped here, past services.css's plain 1rem: once
   .hc-services's own bottom padding was trimmed (see below), that 1rem gap
   above the hint stayed fixed while the section's bottom padding shrank
   toward it, so the hint read as pushed up against the cards with too much
   dead space below it before the next section starts. This scales similarly
   to that padding (clamp, not a fixed rem) so the hint sits roughly centered
   in the space beneath the cards at any width, not just fixed close to them. */
.hc-services .services-hint {
  font-size: var(--hc-cta-text-size);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

/* 4. Services: stays on Parchment for breathing room (the cards are Bone, so
   a Bone section would swallow them). No shape here on purpose: the cards
   are the visual. Top/bottom padding trimmed slightly from the sitewide
   .approach-section default (clamp 3.5rem-5.5rem) — just this section and
   .hc-story below, not the shared class, so no other page is affected. */
.hc-services {
  background: var(--parchment);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}

/* 5. Diana's story: Bone, not Parchment. Services (above) is Parchment with
   no shape of its own — if this section were Parchment too, the two would
   share one background with nothing between them and read as a single
   band. Alternating back to Bone here (matching "What we do" two sections
   up) draws a real seam at every section boundary on the page: Orchid,
   Parchment, Bone, Parchment, Bone, Orchid — no two neighbors ever match. */
.hc-story {
  background: var(--bone);
  /* Same trimmed padding as .hc-services above, for the same reason. */
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}

.hc-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 680px) auto;
  column-gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}

/* Sized to match .hc-bone .approach-body (the "What we do" blurb above),
   so the two short teaser paragraphs on this page read at the same scale. */
.hc-story-copy .approach-body {
  color: var(--shadow-grey);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* .hc-bone's read-more link is scaled up to 1.1rem (see .hc-bone
   .approach-readmore-link above) to match its bigger paragraph text, but
   this link never got the same treatment — it was still sitting at the
   plain .approach-readmore-link default (0.95rem), visibly smaller than its
   "GBD intro" counterpart above it even though the paragraphs matched. */
.hc-story-copy .approach-readmore-link {
  font-size: 1.1rem;
}

.hc-story-photo {
  position: relative;
  margin: 0;
  justify-self: start;
}

.hc-story-photo::before {
  content: "";
  position: absolute;
  inset: -1rem -1.25rem 1rem 1.25rem;
  border-radius: 999px 999px 1.5rem 1.5rem;
  /* Was Parchment (the "other neutral" from this Bone section, matching the
     card/box rule elsewhere on the page) — clean, but left this section
     looking flat. Swapped for the same Soft Periwinkle accent now used on
     About Diana's arch: one deliberate, one-time pop of color tied to
     Diana's own photo, not a repeating tint down the page like the earlier
     rejected version (four separately-tuned purples, one per section). Bone
     is light enough that mid-tone Periwinkle still reads crisp against it —
     a different pairing than About Diana, where two similarly pale colors
     were fighting for definition. */
  background: var(--soft-periwinkle);
  opacity: 0.4;
}

.hc-story-frame {
  position: relative;
  width: clamp(190px, 21vw, 280px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 1.5rem 1.5rem;
  box-shadow: 0 1.25rem 2.5rem rgba(29, 28, 31, 0.14);
}

.hc-story-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same crop as the About Diana page: zoom with the origin near the top so
     the headroom above her head is kept. */
  transform: scale(1.2);
  transform-origin: 50% 15%;
}

/* 6. Closing CTA: bookends the hero with the same tonal treatment, entering
   from the left (a different part of the monogram, not a mirrored one). */
.hc-shape--cta {
  color: var(--hc-shape-on-dark);
  left: calc(var(--hc-shape-w) * -0.47);
  /* Top edge lands in the upper B bar (~41%); bottom edge lands in the
     bottom bar. */
  transform: translateY(-37.7%);
}

/* Heading 20% smaller than the base .approach-cta-heading clamp, per
   request, so it reads a little quieter against the shape behind it. */
.hc-cta .approach-cta-heading {
  font-size: clamp(1.28rem, 2.8vw, 1.8rem);
}

/* Tablet and small laptop: the shared section padding shrinks with the screen
   (8vw), which makes the sections shorter than the heights the crop positions
   above were tuned for, and the hero headline wraps to two lines, which makes
   the hero taller. Holding the desktop padding (and a shorter hero bottom
   padding to offset the extra headline line) keeps every crop edge inside a
   bar. */
@media (min-width: 761px) and (max-width: 1199px) {
  .home-page .approach-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  /* ...except the intro, whose padding is tuned separately (see .hc-intro). */
  .home-page .hc-intro {
    padding-top: 4.5rem;
    padding-bottom: 4rem;
  }

  .hc-hero .approach-hero-inner {
    padding-top: 5.5rem;
    padding-bottom: 5rem;
  }

  .hc-cta {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

}

/* Tablets (2x2 boxes make the intro much taller than the shape): show only the
   big outer arc, one thick continuous stroke that tapers to a natural point at
   the bottom, the same approach as phones. */
@media (min-width: 761px) and (max-width: 900px) {
  .hc-shape--intro {
    /* Arc only, as described above: at -0.78 the visible window starts just
       past the B's bowl tips (which end at ~-0.78), so no stray "bubbles" show
       — only the one thick arc. Its outermost curve then reaches ~13px behind
       the problem-statement panel's left edge, so the panel overlaps it a
       little instead of just grazing it (at the old -0.8 the gap was ~3px). */
    left: calc(var(--hc-shape-w) * -0.78);
    transform: translateY(-20%);
  }
}

/* Phones: sections are taller (text wraps more), so the desktop crop windows
   no longer line up with the monogram's bars. Instead every shape shows only
   the monogram's big outer arc, at the left edge. That arc is one continuous
   thick stroke from ~20% to ~90% of the way down, so a horizontal cut through
   it is clean wherever the section edge lands. All four keep the same size;
   only how far down the arc each one starts differs. */
@media (max-width: 760px) {
  :root {
    --hc-shape-w: 1000px;
  }

  .hc-shape {
    right: auto;
    left: calc(var(--hc-shape-w) * -0.865);
  }

  .hc-shape--hero {
    transform: translateY(-22.7%);
  }

  .hc-shape--intro {
    transform: translateY(-20%);
  }

  .hc-shape--bone {
    transform: translateY(-27.3%);
  }

  .hc-shape--cta {
    transform: translateY(-31.8%);
  }

  .hc-story-inner {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .hc-story-photo {
    justify-self: center;
    margin-right: 1.25rem;
  }

  .hc-story-frame {
    width: clamp(180px, 56vw, 260px);
  }
}