/* ==========================================================================
   home.css — components used ONLY by the home page.

   Tokens, base type, the header/footer/WeChat chrome and the shared section
   primitives all live in styles.css, which every page (including this one)
   loads first. Nothing in this file may redefine a token: change it in
   styles.css or the home silently drifts away from the other nine pages again,
   which is exactly the state 2026-08-31 was spent undoing.
   ========================================================================== */
/* ========== 01 HERO =======================================================
   A photo band, nothing on it but the header. The scrim now only has one job
   left — keeping the white header legible over whatever the photo does at the
   top — so it is a short top-down wash, not the full-height dark wrap the
   headline needed. Height is capped hard: with no copy on it, anything taller
   is just a wall between the visitor and the first claim. */
.hero{position:relative;min-height:clamp(260px,46vh,440px);isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    oklch(0.16 0.02 250 / .72) 0%,
    oklch(0.16 0.02 250 / .46) 26%,
    oklch(0.16 0.02 250 / .12) 58%,
    oklch(0.16 0.02 250 / .10) 100%);
}

/* ========== 02 LEADERSHIP (carries the page H1) =========================== */
.leaders h1{max-width:22ch}
.leaders .people{margin-top:clamp(34px,4.5vw,58px)}

/* ========== shared section rhythm =========================================
   The home rules the TOP of each section, the subpages rule the bottom (see
   styles.css). Both read as one hairline between two blocks; the explicit
   border-bottom:0 is what stops the home from getting two. */
.sec{padding-block:clamp(58px,7.5vw,104px);border-top:1px solid var(--rule);border-bottom:0}
.sec--tight{padding-block:clamp(46px,6vw,80px)}
/* rem, not ch: `ch` here would resolve against .sec__head's *body* font, which
   made a 14-character H2 ("What we handle") wrap onto two lines. */
.sec__head{max-width:40rem}
.sec__head--wide{max-width:48rem}
.sec__head h2{margin-top:0}
.sec__lede{margin-top:16px;color:var(--ink-60);max-width:58ch}

/* ========== 02 WHAT WE HANDLE ============================================= */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:clamp(30px,4vw,52px)}
.area figure{margin:0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)}
.area img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.area:hover img{transform:scale(1.03)}
.area h3{margin-top:20px}
.area p{margin-top:10px;color:var(--ink-60);font-size:.96em;line-height:1.55}

/* ========== 03 FIVE STEPS ================================================= */
/* list-style:none is load-bearing — without it the browser's own "1." markers
   render next to the blaze numerals and the strip is numbered twice. */
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin:clamp(30px,4vw,52px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--rule);
}
/* flex column so the captions sit on one baseline across the strip: step 5's
   title runs to two lines and otherwise drags its caption below the other four */
.step{display:flex;flex-direction:column;padding:26px 22px 4px;border-right:1px solid var(--rule)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step__n{
  font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(1.6rem,1.15rem + 1.5vw,2.3rem);line-height:1;color:var(--blaze);display:block;
}
.step figure{margin:16px 0 0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)}
/* height:auto is load-bearing: these <img> carry width/height attributes (for
   layout stability), and that presentational height wins over aspect-ratio —
   without it every step photo renders 600px tall in a 195px column. */
/* Landscape, and shallower than the 4:3 of `.areas` directly above — two photo
   grids in a row with the same crop is how a page starts reading as one
   repeated component. Height is fixed rather than an aspect-ratio because
   column 1 is wider than the rest (it loses its left padding to sit flush with
   the headline), so a ratio makes its photo taller and drops its title 16px
   below the other four. */
.step img{width:100%;height:clamp(100px,10vw,148px);object-fit:cover;transition:transform .5s var(--ease)}
.step:hover img{transform:scale(1.03)}
.step h3{margin-top:16px}
.step p{margin-top:auto;padding-top:8px;color:var(--ink-60);font-size:.9em;line-height:1.5}

/* ========== 04 RECORD (numbers + sequence, one section) =================== */
.numbers__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3.6vw,48px);
  margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--rule);padding-top:clamp(26px,3vw,38px);
}
/* capped at 3.35rem so the widest figure (350,000) still leaves air inside its
   column — bigger and it runs into the next one. */
.num dt{
  font-family:var(--disp);font-weight:800;font-stretch:112%;letter-spacing:-.03em;
  font-size:clamp(1.95rem,1.2rem + 2.5vw,3.35rem);line-height:1;
}
.num--zero dt{color:var(--blaze)}
.num dd{
  margin:14px 0 0;color:var(--ink-60);
  font-weight:600;font-size:.775rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;
}
.numbers__foot{margin-top:24px;color:var(--ink-60);font-size:.84em}

/* the "why" half of the same section — the hairline is the internal break that
   used to be a section border */
.seq__head{
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(28px,3.2vw,40px);
  border-top:1px solid var(--rule);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);
}
.seq{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(26px,3.4vw,42px)}
.seq__col{border-top:2px solid var(--ink);padding-top:18px}
.seq__k{
  font-weight:600;font-size:.75rem;letter-spacing:.10em;text-transform:uppercase;
  color:var(--blaze-ink);display:block;
}
.seq__col p{margin-top:12px;font-size:.97em;line-height:1.55}

/* ========== 06 CASES ====================================================== */
.cases{margin-top:clamp(34px,4.5vw,60px);display:grid;gap:clamp(40px,6vw,80px)}
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);align-items:center}
.case figure{margin:0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)}
.case img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .5s var(--ease)}
.case:hover img{transform:scale(1.03)}
.case--flip figure{order:2}
.case__badge{
  font-weight:600;font-size:.75rem;letter-spacing:.10em;text-transform:uppercase;
  color:var(--blaze-ink);display:block;
}
.case h3{
  margin-top:14px;font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);
  font-weight:800;font-variation-settings:"wdth" 112,"wght" 800;line-height:1.12;
}
.case p{margin-top:16px;color:var(--ink-60);font-size:1em;line-height:1.6}
.case__tail{margin-top:16px;color:var(--ink);font-weight:500;border-left:2px solid var(--blaze);padding-left:14px}

/* ========== 02/08 PEOPLE ==================================================
   `.people` is the full block under the hero; `.crew` is the one-line recap in
   its own section just above the form. They must not be the same component —
   repeating the whole credential list twice reads as padding. */
/* The grid is capped, not the cards inside it. Capping the card (max-width:22rem
   in two 545px columns) left each one adrift in its own column with ~320px of
   dead space to the right of the pair; capping only the photo would leave a
   300px portrait above a 1090px credential list. */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,64px);max-width:56rem}
.person{max-width:none}
.person figure{margin:0;position:relative;background:oklch(0.19 0.012 250 / .05)}
.person img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
.person__flag{
  position:absolute;right:0;bottom:0;width:46px;height:32px;
  display:grid;place-items:center;background:#fff;
}
.person__flag svg,.person__flag img{width:36px;height:24px;display:block}
.person__name{margin-top:20px;font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);font-weight:800;font-variation-settings:"wdth" 112,"wght" 800}
.person__role{margin-top:6px;color:var(--blaze-ink);font-weight:600;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
/* The one line that says what this person is for. Ink, not ink-60, and set
   above the credential rows — those rows are the evidence for this claim, and
   before 2026-08-31 the claim was buried as the third bullet of four. */
.person__pitch{margin-top:14px;font-size:1.02em;line-height:1.45;max-width:30ch}
.person ul{margin:18px 0 0;padding:0;list-style:none}
.person li{padding:9px 0;border-top:1px solid var(--rule);color:var(--ink-60);font-size:.94em;line-height:1.45}

.crew{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
  max-width:56rem;margin:clamp(28px,3.6vw,44px) 0 0;padding:0;list-style:none;
}
.crew li{display:flex;align-items:flex-start;gap:16px;border-top:1px solid var(--rule);padding-top:18px}
.crew img{width:64px;height:64px;flex:none;object-fit:cover;object-position:50% 14%}
.crew span{color:var(--ink-60);font-size:.92em;line-height:1.45}
.crew b{display:block;color:var(--ink);font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:1.12em;letter-spacing:-.01em;margin-bottom:3px}

/* ========== 09 FORM ======================================================
   The centred "Start with a sample." CTA band that used to sit here was cut on
   2026-08-31 (user). The section below is the call to action — it has its own
   heading, its own lede and the address, and a band that just said "go to the
   form" 200px above it was repeating the same thing. */
.inq{border-top:1px solid var(--rule);padding-block:clamp(52px,6.5vw,88px)}
/* this section is the call to action now that the CTA band is gone, so its
   heading can't sit below the recap heading directly above it */
.inq h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.4rem)}
.inq__sub{margin-top:12px;color:var(--ink-60);max-width:52ch}
/* The inquiry form was removed on 2026-08-31 (user). What is left in that
   section is the address itself, so it has to carry the weight the Send button
   used to: display type, not a body-copy link. */
.contact-line{margin-top:26px}
.contact-mail{
  font-family:var(--disp);font-weight:700;font-stretch:106%;
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.75rem);line-height:1.15;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--blaze);
  text-decoration-thickness:3px;text-underline-offset:6px;
  display:inline-block;padding-block:6px;   /* >=24px target, WCAG 2.5.8 */
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease);
}
.contact-mail:hover,.contact-mail:focus-visible{color:var(--blaze-ink)}
.contact-alt{margin-top:18px;color:var(--ink-60);font-size:.94em;max-width:52ch}
.contact-alt b{color:var(--ink);font-weight:600}

/* ========== RESPONSIVE ====================================================
   Rule for this page (user, 2026-08-31): the phone shows the same page as the
   desktop, not a thinned-out one. Nothing is hidden at any width, every photo
   survives, and the type scale bottoms out high (see the clamps at the top).
   What changes is the number of columns and, for the five steps, the direction
   the column runs. */
@media (max-width:980px){
  .top{padding-block:16px}
  .top nav{gap:12px}
  .top nav a{font-size:.8rem}
  .steps{grid-template-columns:repeat(3,1fr);border-top:0}
  /* every column is equal width again here, so the ratio is safe (and better) */
  .step img{height:auto;aspect-ratio:3/2}
  .step:first-child{padding-left:22px}
  .step{border-top:1px solid var(--rule);border-right:1px solid var(--rule);padding-right:18px}
  .step:nth-child(3n){border-right:0}
  .seq{grid-template-columns:repeat(2,1fr);gap:26px 30px}
}
/* Narrow header: brand and CTA share row 1, the section links drop to row 2.
   As a single flex row they wrapped into three overlapping lines on top of the
   hero photo. */
@media (max-width:880px){
  .top{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:12px 16px;padding-block:14px;
  }
  .top__brand{padding-block:5px}   /* the sub-line is hidden ≤620px, collapsing the link to 17px */
  .top nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:8px 16px}
  .top nav a{font-size:.79rem;padding-block:5px;opacity:.92}  /* keeps the tap target ≥24px (WCAG 2.5.8) */
  .top__cta{grid-column:2;grid-row:1;font-size:.78rem;padding:8px 14px}
}
@media (max-width:860px){
  /* the header is two rows here, so the band needs enough photo under it to
     still read as a photo rather than a textured strip behind the menu */
  .hero{min-height:clamp(300px,42vh,400px)}
  .areas{grid-template-columns:1fr;gap:34px}
  .area img{aspect-ratio:16/9}
  .numbers__grid{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .case,.case--flip{grid-template-columns:1fr;gap:20px}
  .case--flip figure{order:0}
  .case img{aspect-ratio:16/10}
  .foot__grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .top__brand span{display:none}
  /* 3 + 2 instead of 4 + 1: as a wrapping flex row the fifth link ("About")
     dropped alone onto a third line under the photo */
  .top nav{display:grid;grid-template-columns:repeat(3,1fr);column-gap:12px;row-gap:0}
  /* Five steps, one per row, photo beside the words. Five stacked full-width
     4:3 photos would add ~1,400px of scroll and push the record section off the
     end of the phone; this keeps every photo and every line at ~130px a step. */
  .steps{grid-template-columns:1fr;border-top:1px solid var(--rule)}
  .step{
    display:grid;grid-template-columns:118px 1fr;grid-template-areas:"img num" "img h" "img p";
    align-content:start;column-gap:18px;
    border-right:0;border-top:0;padding:20px 0;
  }
  .step + .step{border-top:1px solid var(--rule)}
  .step:first-child,.step:nth-child(3n){padding-left:0;border-right:0}
  .step__n{grid-area:num;font-size:1.5rem}
  .step figure{grid-area:img;margin:0;height:100%;min-height:118px}
  .step img{aspect-ratio:auto;height:100%;object-fit:cover}
  .step h3{grid-area:h;margin-top:6px}
  .step p{grid-area:p;margin-top:4px;padding-top:0}
  .seq{grid-template-columns:1fr;gap:24px}
  .people{grid-template-columns:1fr;gap:38px}
  .person{max-width:none}
  .person img{aspect-ratio:4/3;object-position:50% 16%}
  .crew{grid-template-columns:1fr;gap:0}
  .crew li{padding-block:16px}
  .wx{right:10px;bottom:10px;font-size:.66rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .area:hover img,.case:hover img{transform:none}
}