/* ========================================================================== 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. ========================================================================== */ /* The hero photo band was removed on 2026-09-01 at the user's call. Its rules (.hero, .hero__img and the scrim) went with it, and the header reverted to the shared in-flow bar — the white-on-photo variant had nothing left to sit on. The page now opens on the leadership claim. */ /* ========== 01 LEADERSHIP (carries the page H1) =========================== */ /* 28ch, not 22: at 22 the headline broke into three 66px lines and used a quarter of the viewport before the reader saw a face. Same words, two lines. */ .leaders h1{max-width:28ch} /* The standfirst. Sized off the body, not off the H1: it is the qualifier under the claim, and at display size it competed with it for the same line. */ .leaders__sub{ margin-top:8px;color:var(--ink-60);font-weight:600;max-width:34ch; font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);line-height:1.35; } .leaders .people{margin-top:clamp(22px,2.8vw,36px)} /* ========== 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(36px,4.4vw,60px);border-top:1px solid var(--rule);border-bottom:0} .sec--tight{padding-block:clamp(28px,3.4vw,46px)} /* 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:47rem} .sec__head--wide{max-width:56rem} .sec__head h2{margin-top:0} .sec__lede{margin-top:10px;color:var(--ink-60);max-width:58ch} /* ========== 02 WHAT WE HANDLE ============================================= */ .areas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(20px,2.6vw,34px)} .area figure{margin:0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)} .area img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s var(--ease)} .area:hover img{transform:scale(1.03)} .area h3{margin-top:13px} .area p{margin-top:6px;color:var(--ink-60);font-size:.94em;line-height:1.48} /* ========== 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(20px,2.6vw,34px) 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:18px 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:12px 0 0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)} /* height:auto is load-bearing: these 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(86px,8vw,118px);object-fit:cover;transition:transform .5s var(--ease)} .step:hover img{transform:scale(1.03)} .step h3{margin-top:11px} .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(18px,3vw,40px); margin-top:clamp(22px,2.8vw,36px);border-top:1px solid var(--rule);padding-top:clamp(18px,2.2vw,28px); } /* 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:9px 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:16px;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(24px,2.8vw,36px);padding-top:clamp(18px,2.2vw,28px); border-top:1px solid var(--rule); font-size:clamp(1.32rem,1.05rem + 1.1vw,1.85rem); } .seq{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(18px,2.4vw,30px)} .seq__col{border-top:2px solid var(--ink);padding-top:13px} .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:8px;font-size:.95em;line-height:1.48} /* ========== 06 CASES ====================================================== */ .cases{margin-top:clamp(22px,2.8vw,36px);display:grid;gap:clamp(26px,3.4vw,44px)} .case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,44px);align-items:center} .case figure{margin:0;overflow:hidden;background:oklch(0.19 0.012 250 / .05)} /* 16:9, not 5:4. The photo is the taller half of this two-column row, so its ratio sets the height of the whole case — at 5:4 each one was 444px tall in a 555px column while the words beside it needed barely 300, and the two cases together ran past the end of the screen. */ .case img{width:100%;aspect-ratio:16/9;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:10px;font-size:clamp(1.2rem,1.02rem + .8vw,1.6rem); font-weight:800;font-variation-settings:"wdth" 112,"wght" 800;line-height:1.12; } .case p{margin-top:11px;color:var(--ink-60);font-size:1em;line-height:1.5} .case__tail{margin-top:12px;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(24px,3.4vw,44px);max-width:52rem} .person{max-width:none} .person figure{margin:0;position:relative;background:oklch(0.19 0.012 250 / .05)} /* 4:5, not 3:4 — in a 400px column that is 500px of face instead of 559, and the crop still lands above the shoulders (object-position does the work). */ .person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%} .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:13px;font-size:clamp(1.12rem,1.02rem + .5vw,1.34rem);font-weight:800;font-variation-settings:"wdth" 112,"wght" 800} .person__role{margin-top:4px;color:var(--blaze-ink);font-weight:600;font-size:.75rem;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:9px;font-size:1em;line-height:1.4;max-width:32ch} .person ul{margin:12px 0 0;padding:0;list-style:none} .person li{padding:6px 0;border-top:1px solid var(--rule);color:var(--ink-60);font-size:.92em;line-height:1.4} /* Desktop: the portrait sits BESIDE the credentials, not above them. Stacked, a 4:5 photo in a 394px column is 493px, and the section that opens the site needed a screen and a half before a reader reached the first fact — which is the whole complaint this pass answers. Beside the words, the same pair reads in ~300px and the section lands inside one viewport. The figure spans the four rows its sibling elements occupy (name, role, pitch, list); auto-placement then fills column 2 top to bottom, so no child needs its own grid-column. Below 861px the card goes back to photo-on-top — there is no width there to put anything beside anything. */ @media(min-width:861px){ /* Same eight-row subgrid as the phone (see below), for the same reason: the two credential lists are read across. Here the left card's Keumdo line is the one that wraps, and without shared rows it dragged every hairline under it 17px out of step with the card beside it. */ .people{max-width:none;column-gap:clamp(26px,3.4vw,52px);row-gap:0;grid-template-rows:repeat(8,auto)} .person{ display:grid;grid-row:span 8;grid-template-rows:subgrid; grid-template-columns:minmax(0,clamp(160px,17vw,215px)) minmax(0,1fr); column-gap:clamp(18px,2vw,26px);align-items:start; } .person figure{grid-row:1/span 8} .person ul{display:contents} .person li:first-child{margin-top:12px} .person__name{margin-top:0} .person__pitch{max-width:none} } .crew{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px); max-width:56rem;margin:clamp(18px,2.4vw,30px) 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:13px} .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(34px,4.2vw,58px)} /* 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.45rem,1.12rem + 1.2vw,2rem)} .inq__sub{margin-top:8px;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:18px} .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} /* A contact channel inside a sentence still needs a real tap target: at the inherited line height this was 16px on a phone, and the overflow gates skip links in running prose. Same padding-block trick as .contact-mail. */ .contact-alt a{display:inline-block;padding-block:5px;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)} /* Photo beside the words, not above them. Three stacked cards with a 16:9 still ran 1,167px on a 390px screen — one and a half phone screens for one section. This is the same move the five steps make below 620px, and it is why they get a shallower crop and a hairline between rows: two identical photo lists in a row would read as one repeated component. */ .areas{grid-template-columns:1fr;gap:0} .area{display:grid;grid-template-columns:132px 1fr;column-gap:16px; align-content:start;padding:16px 0;border-top:1px solid var(--rule)} .area:last-child{border-bottom:1px solid var(--rule)} .area figure{grid-row:1/span 3;height:100%;min-height:94px} .area img{aspect-ratio:auto;height:100%;object-fit:cover} .area h3{margin-top:0} .numbers__grid{grid-template-columns:repeat(2,1fr);gap:24px 24px} .case,.case--flip{grid-template-columns:1fr;gap:16px} .case--flip figure{order:0} .case img{aspect-ratio:16/9} .foot__grid{grid-template-columns:1fr 1fr;gap:22px 20px} /* Below 861px the card is photo-on-top and the two cards stand side by side, so the credential lists get read ACROSS, not down — and a row only reads as a row if both halves start on the same line. Subgrid pins all eight rows (photo, name, role, pitch, four facts) to one set of baselines, so a line that wraps on the left no longer slides every hairline under it out of step with the right. `display:contents` is what lets the
  • join that grid; it also drops the