/* ============================================================
   HOMEPAGE — built from Figma `Homepage · 1440 · poster`
   (412:2113), 24 Aug 2026.

   NAMESPACE: `hp-`. Third namespace on this project after
   `ls-` (layouts) and `po-` (poster). comp.css and layouts.css
   collided once and cost a day; nothing here may share a name.

   ⚠️ This design introduces a language the other five pages do
   NOT use yet: diagonal-rounded cards (40 0 40 0), a teal tint
   ground, rounded buttons, and photography. Flagged to Ali —
   either the rest follow, or the homepage reads as a different
   site.
   ============================================================ */

/* the diagonal corner: one radius top-left, one bottom-right.
   Used on every card, plate and photo on this page. */
:root{--hp-corner:var(--corner-fluid)}

/* ---------- HERO ------------------------------------------- */
.hp-hero{position:relative;isolation:isolate;min-height:clamp(520px,58vw,677px);
  display:flex;align-items:center;overflow:hidden}
.hp-hero .hp-shot{position:absolute;inset:0;z-index:-2}
.hp-hero .hp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hp-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(6,8,10,.86) 0%, rgba(6,8,10,.68) 44.67%,
    rgba(6,8,10,.30) 71.07%, rgba(6,8,10,.18) 101.52%)}
/* mid stop is .68, not the .62 the Figma carries: at .62 with the lede at
   82% opacity the 18px copy measured 3.91:1 over the real photo. Composited
   against actual pixels, not eyeballed. H1 5.08:1, lede 5.23:1. */
.hp-hero .wrap{width:100%}
.hp-copy{max-width:860px;padding-top:clamp(120px,10vw,142px);
  padding-bottom:var(--sec-y)}
.hp-copy h1{margin:0;max-width:800px;
  font-size:var(--ramp-display);
  line-height:1;letter-spacing:-.04em;
  font-weight:var(--fw-bold);color:var(--w)}
.hp-copy h1 .hp-em{font-family:var(--serif);font-style:italic;
  font-weight:400;color:var(--gold);letter-spacing:-.02em}
.hp-lede{margin:clamp(20px,2.2vw,26px) 0 0;
  font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:-.015em;
  font-weight:var(--fw-med);color:var(--w)}
.hp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:clamp(20px,2.2vw,26px)}

/* buttons — one corner token, shared with the poster layer */
.hp-btn{display:inline-flex;align-items:center;gap:.5em;border:0;
  min-height:var(--btn-h);padding:0 24px;
  border-radius:var(--btn-radius);
  background:var(--teal);color:var(--w);
  font-size:14.4px;line-height:22px;letter-spacing:-.012em;
  font-weight:var(--fw-med);text-decoration:none;
  transition:background .3s var(--ease)}
.hp-btn:hover{background:var(--teal-deep)}
.hp-btn:focus-visible{outline:2px solid var(--w);outline-offset:3px}
.hp-btn-white{background:var(--porcelain);color:var(--ink);padding:0 28px}
.hp-btn-white:hover{background:#EFE9DC}
.hp-btn-white:focus-visible{outline-color:var(--w)}
.hp-link{color:var(--w);font-size:14px;line-height:22px;
  font-weight:var(--fw-semi);letter-spacing:-.01em;text-decoration:none;
  border-bottom:1px solid rgba(255,254,250,.4);padding-bottom:2px}
.hp-link:hover{border-bottom-color:var(--w)}

/* ---------- 01 · a familiar gap ----------------------------- */
.hp-gap{background:var(--porcelain);padding:var(--sec-y) 0}
.hp-gap .hp-row{display:grid;grid-template-columns:minmax(0,772fr) minmax(0,464fr);
  gap:var(--gap-md);align-items:center}

/* The scalloped teal plate. The left edge is a repeating lobe —
   masked, NOT a stretched SVG, so the circles keep their shape
   at any plate height instead of squashing. */
.hp-plate{position:relative;background:var(--teal);
  min-height:248px;display:flex;align-items:center;
  /* right padding is ZERO by design: the text column is 658 and the
     scallop inset is 114, which together are exactly the 772 plate.
     Any right padding pushes the statement to a fourth line. */
  padding:29px 0 29px 114px;
  --lobe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='115' height='82.6685' viewBox='0 0 115 82.6685'%3E%3Cpath d='M114.331 0C97.7639 0 83.5491 10.3014 77.4539 24.9832C71.2657 10.2902 56.9961 0 40.3738 0C18.0777 0 0 18.5077 0 41.3343C0 64.1608 18.0777 82.6685 40.3738 82.6685C57.1274 82.6685 71.49 72.2215 77.6016 57.3493C83.7679 71.8574 97.8898 82.0075 114.337 82.0075L115 82.6685L115 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--lobe),linear-gradient(#000,#000);
          mask-image:var(--lobe),linear-gradient(#000,#000);
  -webkit-mask-size:115px 82.6685px,calc(100% - 114px) 100%;
          mask-size:115px 82.6685px,calc(100% - 114px) 100%;
  -webkit-mask-position:left top,114px top;
          mask-position:left top,114px top;
  -webkit-mask-repeat:repeat-y,no-repeat;
          mask-repeat:repeat-y,no-repeat}
.hp-plate p{margin:0;max-width:min(658px,var(--measure));
  font-size:clamp(2rem,4.3vw,3.875rem);      /* 62px @1440 */
  line-height:1;letter-spacing:-.035em;
  font-weight:var(--fw-bold);color:var(--w)}
.hp-plate .hp-em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.02em}
.hp-gap-body{display:flex;flex-direction:column;gap:16px}
.hp-gap-body p{margin:0;max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);
  letter-spacing:-.01em;font-weight:var(--fw-med);color:var(--mut)}
.hp-gap-body p:last-child{color:var(--text-strong)}

/* ---------- 02 · statement band ----------------------------- */
.hp-statement{background:var(--gold);padding:var(--sec-y) 0;
  text-align:center}
.hp-statement p{margin:0;font-family:var(--serif);
  font-size:clamp(1.625rem,3.33vw,3rem);     /* 48px @1440 */
  line-height:1.27;letter-spacing:-.01em;color:var(--ink)}

/* ---------- 03 · how I help (six cards) --------------------- */
.hp-help{background:var(--porcelain);padding:var(--sec-y) 0}
.hp-cards{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gap-sm);row-gap:clamp(24px,2.5vw,36px)}
.hp-cards li{background:var(--teal-tint);
  border-radius:var(--hp-corner) 0 var(--hp-corner) 0;
  min-height:150px;padding:var(--pad-card)}
.hp-cards h3{margin:0 0 6px;
  font-size:var(--ramp-h3);
  line-height:1.09;letter-spacing:-.03em;
  font-weight:var(--fw-bold);color:var(--text-strong)}
.hp-cards p{margin:0;font-size:var(--t-body-sm);line-height:1.53;
  letter-spacing:-.01em;font-weight:var(--fw-med);color:var(--mut)}

/* ---------- 04 · built for ---------------------------------- */
.hp-built{background:var(--porcelain);padding:var(--sec-y) 0}
.hp-built .hp-row{display:grid;grid-template-columns:579px minmax(0,1fr);
  gap:var(--gap-lg);align-items:center}
.hp-built-copy{background:rgba(255,254,250,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:10px;padding:20px 0 0;
  display:flex;flex-direction:column;gap:18px}
.hp-built-copy h2{margin:0;
  font-size:var(--ramp-h2-xl);
  line-height:1.14;letter-spacing:-.03em;
  font-weight:var(--fw-bold);color:var(--text-strong)}
.hp-built-copy p{margin:0;max-width:var(--measure);font-size:var(--t-lead);line-height:var(--lh-lead);
  letter-spacing:-.015em;font-weight:var(--fw-med);color:var(--body)}

/* the progress pride rule — real flag colours at 50%, so it
   composites correctly rather than being baked for one ground */
.hp-pride{height:6px;border-radius:2px;
  background:linear-gradient(90deg,
    #E40303 0 9.09%, #FF8C00 9.09% 18.18%, #FFED00 18.18% 27.27%,
    #008026 27.27% 36.36%, #24408E 36.36% 45.45%, #732982 45.45% 54.54%,
    #5BCEFA 54.54% 63.63%, #FFFFFF 63.63% 72.72%, #F5A9B8 72.72% 81.81%,
    #000000 81.81% 90.90%, #613915 90.90% 100%);
  opacity:.5}

.hp-photo{position:relative;overflow:hidden;
  border-radius:var(--hp-corner) 0 var(--hp-corner) 0;
  aspect-ratio:630 / 591}
/* stacked, that 1.07 ratio makes a 683px-tall slab that swallows the
   tablet. A landscape crop reads as a photograph, not a wall. */
@media (max-width:1100px){
  .hp-photo{aspect-ratio:16 / 10}
  .hp-portrait{aspect-ratio:4 / 3;max-width:520px}
}
.hp-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* A text-shadow is not a contrast guarantee and axe cannot score it: this
   caption measured 1.90:1 against the brightest pixels under it. It now has
   its own ground — a bottom scrim on the figure — giving 6.0:1. */
.hp-photo::after{content:"";position:absolute;inset:40% 0 0;pointer-events:none;
  /* .62 held at 1440 but the 16:10 tablet/phone crop puts brighter sky
     under the caption — 3.40:1 at the worst width. .80 gives 4.82:1. */
  background:linear-gradient(180deg,rgba(4,18,26,0) 50%,rgba(4,18,26,.80) 100%)}
.hp-photo figcaption{position:absolute;right:22px;bottom:18px;z-index:1;
  font-size:10.56px;line-height:16px;font-weight:var(--fw-bold);
  letter-spacing:.16em;color:var(--w);text-align:right;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* ---------- 05 · meet Colleen ------------------------------- */
.hp-colleen{background:var(--porcelain);
  padding:var(--sec-y) 0}
.hp-colleen .hp-row{display:grid;grid-template-columns:539px minmax(0,1fr);
  gap:var(--gap-lg);align-items:center}
.hp-portrait{overflow:hidden;aspect-ratio:539 / 466;
  border-radius:var(--hp-corner) 0 var(--hp-corner) 0}
.hp-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hp-colleen-body{display:flex;flex-direction:column;gap:28px}
.hp-colleen-body h2{margin:0;
  font-size:var(--ramp-h2-sm);
  line-height:1.26;letter-spacing:-.02em;
  font-weight:var(--fw-bold);color:var(--text-strong)}
.hp-colleen-body h2 .hp-em{color:var(--teal)}
.hp-colleen-body > p{margin:0;max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);
  letter-spacing:-.01em;font-weight:var(--fw-med);color:var(--mut)}
.hp-creds{display:flex;flex-wrap:wrap;gap:26px;padding-top:8px}
.hp-creds .k{font-size:10px;line-height:16px;font-weight:var(--fw-bold);
  letter-spacing:.1em;color:var(--teal)}
.hp-creds .v{margin-top:6px;font-size:12px;line-height:19px;
  letter-spacing:-.014em;color:var(--text-strong)}

/* ---------- 06 · the first step ----------------------------- */
.hp-first{position:relative;isolation:isolate;min-height:555px;
  display:flex;align-items:center;overflow:hidden}
.hp-first .hp-shot{position:absolute;inset:0;z-index:-2}
.hp-first .hp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hp-first::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.78) 100%)}
/* deepened from the Figma's .44/.66: at those values the 18px body measured
   3.65:1 over the real coffee photo. Now 5.42:1, H2 5.38:1. */
.hp-first .wrap{width:100%}
.hp-first-inner{margin-left:auto;max-width:622px;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:22px;
  padding:var(--sec-y) 0}
.hp-first-inner h2{margin:0;
  font-size:var(--ramp-h2-cta);
  line-height:1.02;letter-spacing:-.03em;
  font-weight:var(--fw-bold);color:var(--w)}
.hp-first-inner p{margin:0;max-width:var(--measure);font-size:var(--t-lead);line-height:var(--lh-lead);
  letter-spacing:-.015em;font-weight:var(--fw-med);color:var(--w)}
.hp-kicker{font-size:clamp(1.25rem,1.88vw,1.6875rem) !important;
  line-height:1.11 !important}
.hp-kicker .hp-em{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- responsive ------------------------------------- */
/* one column only once it is genuinely a phone. At 768 the six
   cards were a single stack of full-width slabs six deep. */
@media (max-width:620px){
  .hp-cards{grid-template-columns:minmax(0,1fr)}
  .hp-creds{gap:18px}
}

@media (max-width:1100px){
  /* MEASURED, not guessed: the horizontal CTA scrim leaves the body at
     3.04:1 by 900px, because the copy moves left into the bright cup
     while the gradient's dark end stays on the right. A vertical scrim
     covers the full width evenly. 5.68:1 at 1024, 5.82 at 900, 5.77 at
     768, 6.4 at 390. */
  .hp-first::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.78) 100%)}
  .hp-gap .hp-row{grid-template-columns:minmax(0,1fr)}
  .hp-built .hp-row,.hp-colleen .hp-row{grid-template-columns:minmax(0,1fr)}
  .hp-portrait{max-width:460px}
}
@media (max-width:820px){
  /* the scallop is a horizontal rhythm; at this width the plate is
     too narrow for it to read, so it becomes a plain teal panel */
  .hp-plate{padding-left:clamp(24px,6vw,40px);
    -webkit-mask-image:none;mask-image:none;
    border-radius:var(--hp-corner) 0 var(--hp-corner) 0}
  .hp-first-inner{margin-left:0;text-align:left;align-items:flex-start}
  /* scrim already set to .55/.78 at the 1100 breakpoint above */
  /* the 90deg hero scrim fades to .18 on the right; once the copy
     spans the full width it sits over that light end. Vertical here. */
  .hp-hero::after{background:linear-gradient(180deg,rgba(6,8,10,.62) 0%,rgba(6,8,10,.80) 100%)}
}

/* measure cap — .hp-lede had no max-width at all (96ch at 1440) */
.hp-lede{max-width:var(--measure-lede)}

/* ============================================================
   27 AUG · these rules live HERE, not in poster.css — index.html
   loads home.css and does NOT load poster.css at all, so the first
   version of them was dead code.
   ============================================================ */

/* HOMEPAGE · the full-width rule reaches the homepage.
   Measured at 768: the lede, the plate, and the four body
   paragraphs all stopped at 561px of a 673px column, because the
   33em measure was still capping them after the section had
   stacked. Same rule the five inner pages follow.
   The card grids are NOT included — those are still two columns
   at 768, so the measure is doing its job there. */
/* 1100, not 900. The homepage stacks its two-column rows at 1100
   (see the media query above), so the measure had to come off at
   the same width — at 901 Ali was looking at a stacked page whose
   text still stopped at 33em. */
@media (max-width:1100px){
  .hp-copy .hp-lede,
  .hp-plate p,
  .hp-gap-body p,
  .hp-built-copy p,
  .hp-colleen-body p,
  .hp-first-inner p{
    /* Fill the column, but not without limit. QA measured 114
       characters a line at 1024, where the page has stacked into a
       968px column — far past anything else on the site, whose worst
       case is 98 on Advisory at 900. 800px caps it at about 98 and
       changes nothing below 900, where the column is already
       narrower than the cap. */
    max-width:min(100%,800px)}
}

/* HOMEPAGE · stacked, the photograph follows the pride bar.
   Ali: "the seattle image should be underneath the rainbow bar
   when the layout stacks." The figure is a sibling of the copy
   block, so display:contents lifts the copy's children into the
   same grid and they can be ordered against it. */
@media (max-width:1100px){
  .hp-built .hp-row{gap:clamp(18px,2.4vw,26px)}
  .hp-built-copy{display:contents}
  .hp-built-copy h2{order:1}
  .hp-built-copy .hp-pride{order:2}
  .hp-built .hp-photo{order:3;margin:clamp(6px,1vw,12px) 0}
  .hp-built-copy p{order:4}
}

/* ============================================================
   PHONE PASS · 28 Aug — the homepage hero
   ============================================================ */
@media (max-width:560px){
  /* The lede was OVERLAPPING the headline: measured -6px between them
     at 375. h1 runs line-height 1 on 44px type, so its box is shorter
     than the glyphs and a 20px margin disappears into the descenders.
     A flex column with a real gap cannot collapse like that.
     32, not 20: the last line of the headline ends in the italic
     serif "telling", whose descender reaches well below the line box.
     A gap measured from the box looks half its size on screen. */
  .hp-copy{display:flex;flex-direction:column;align-items:flex-start;
    gap:clamp(32px,8.6vw,38px);
    padding-top:clamp(92px,24vw,112px)}
  .hp-copy h1,.hp-lede,.hp-cta{margin:0}

  /* the lede comes down a step so the headline keeps the emphasis */
  .hp-lede{font-size:16px;line-height:1.5}

  /* The closing block, measured at 390: headline to copy 12px, copy to
     kicker 30px, kicker to copy 20px. Ali: "tight and also very spaced
     out at the same time" — which is exactly right, and it is two
     faults compounding.

     One, the h2 runs line-height 1.02, so its box hugs the glyphs and
     a 20px flex gap reads as 12. Two, the kicker carries its own
     margin-top on TOP of that flex gap, so one join got 30px while its
     neighbour got 12.

     Fixed by making the flex gap the only spacing mechanism, then
     giving the headline the extra it needs to clear its own line box. */
  .hp-first-inner{gap:16px}
  .hp-first-inner h2{margin-bottom:10px}
  .hp-first-inner .hp-kicker{margin-top:6px}
  .hp-first-inner p + p{margin-top:0}
  .hp-first{min-height:0}

  /* min-height:150px keeps the six cards even in a 2-up desktop grid.
     In a single column it just parks 34px of dead space under every
     card — measured: content ends at 116 in a 150px box. THIS is what
     read as the cards being cut off. */
  .hp-cards li{min-height:0;padding:clamp(16px,4.2vw,20px) clamp(16px,4.1vw,19px)}
  /* 13.5px, and this one IS measured rather than guessed.
     Ali pointed at "Blind-spot review" — two lines running nearly the
     full card — and said every card should look like that. Blind-spot
     already worked because its copy is 85 characters; the others are
     93 to 107 and tipped onto a third line holding a fifth of the
     column.

     Last-line fill at 390 / 402 / 430, homepage cards:
        15.5px   16% · 15% · 17%   (a stub on nearly every card)
        14.5px   15% · 17% · 72%
        14px     17% · 75% · 69%
        13.5px   74% · 72% · 67%   ← two full lines, no stub
        13px     71% · 69% · 49%

     13.5 is the first size where every card is two full lines at the
     three common phone widths. 375 is the holdout and goes to three
     lines; there is no size that satisfies 375 and 430 at once, so
     the three widths most phones actually use win.

     text-wrap:balance was tried and removed. It kills the stub by
     making EVERY line about two thirds width, which is the opposite
     of what was asked for. */
  .hp-cards p{font-size:13.5px;line-height:1.58}
  .hp-cards h3{margin:0 0 10px}

  /* the photo caption was 10.6px and the credential list 10/12 —
     small enough to read as decoration rather than information */
  .hp-photo figcaption{font-size:12.5px}
  .hp-creds .k{font-size:11.5px}
  .hp-creds .v{font-size:15px;line-height:1.45}
  .hp-btn{font-size:16px;padding:15px 22px}
  .hp-link{font-size:16px}
  .hp-plate,.hp-built-copy{padding-inline:clamp(16px,4.1vw,19px)}
}