/* home.css — the KODA homepage * =========================================================================== * ONE PAGE, ONE JOB: get a West Michigan homeowner from "my carpet is gross" * to a booked visit, on a phone, in under two minutes. * * Research Jeremy brought (2026-09-09): the vast majority of visitors never * scroll past the first screen. So the page is built top-heavy — the booking * card, the review seal and the newest reviews are all above or immediately * below the fold, and everything below is reinforcement for the minority who * keep going. * * ═══ THIS FILE DEFINES NO COLOUR ═══ * * koda-theme.css ("Nocturne", approved 2026-09-09) is the single source of * truth for the colour of every pre-login page, and it says so in its own * header: change colour there, not in a page. Every token below is an ALIAS * onto a Nocturne variable. Nothing here introduces a hex. * * That rule was learned the hard way. The first cut of this redesign rebuilt * the homepage from CLAUDE.md §3's burgundy-and-cream palette and never read * koda-theme.css — which loads last, wins every tie, and had RETIRED those warm * neutrals by name (#fbf8f3 among them) the same day. Jeremy: "You changed the * entire color scheme to exactly what we are trying to get away from … go back * to blue and gold, keep the same feel." CLAUDE.md §3 has not caught up with * Nocturne yet; when the two disagree about a public page, NOCTURNE WINS. * * The system, restated so it is obvious what may be painted where: * NAVY chrome and anchor bands — the bar, the dark sections, the footer. * WHITE + ONE mist grey (#eff3f7) carry the content bands between them. * BURGUNDY is the ACTION colour. It is what a customer clicks, and it is * nothing else. Not a heading, not a rule, not a background. * GILT is the accent of last resort: stars, the seal, one hairline, the * top edge of the booking card. Never a large area, and never small * text on a light ground (it measures 2.37:1 on white). * * ═══ THE FEEL: LETTERPRESS ═══ * * What this page adds to Nocturne is DEPTH — Jeremy's note on the old page was * that it "does feel luxurious but also feels flat". Nocturne sets the colour; * this file gives its surfaces weight: * * PAPER a faint grain over the page, so a white card is a raised sheet * rather than a void. * PRESS raised things carry a light top edge and a shadow beneath; pressed * things invert both. --lift-1..4 and --press. * RULE hairlines are Nocturne's --koda-rule, never a grey of our own. * * ═══ TYPE ═══ * Nanum Myeongjo (700/800) display, DM Sans body — CLAUDE.md §4, which the * colour change does not touch. Sizes respect §4.1's web minimums with room to * spare: body 17px, secondary 15px, footer 14px, nothing below 13px. KODA's * audience skews 35+. test/home-font-sizes.test.js enforces the floor. * =========================================================================== */ /* THE TOKENS LIVE IN koda-chrome.css (2026-09-14) — both blocks, the :root primitives and the .koda-v2 aliases onto Nocturne. Every pre-login page needs them to paint the bar, so they went with it. Nothing below changed: koda-chrome.css is linked first on this page. */ *{ margin: 0; padding: 0; box-sizing: border-box; } /* `hidden` must actually hide. The UA sheet sets `display:none`, which any `display:flex`/`grid` rule in this file silently outranks — that is how the booking card's step rail carried on showing four ticks under "Request received". Every hide on this page goes through the attribute, so it is enforced once, here. */ [hidden]{ display: none !important; } html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 14px); } @media (prefers-reduced-motion: reduce) { html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } } body{ font-family: var(--font-body); font-size: 17px; /* §4.1 body floor is 16 — this sits above it */ line-height: 1.65; color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* The grain lies over the whole page, under everything interactive. */ body::before{ content: ''; position: fixed; inset: 0; background-image: var(--grain); opacity: .035; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; } body.koda-page-home img{ max-width: 100%; display: block; } body.koda-page-home a{ color: var(--ink); text-decoration: none; } body.koda-page-home button, body.koda-page-home input, body.koda-page-home select, body.koda-page-home textarea{ font: inherit; color: inherit; } body.koda-page-home .wrap{ width: min(1240px, 100% - 40px); margin-inline: auto; } @media (max-width: 640px) { body.koda-page-home .wrap{ width: min(1240px, 100% - 28px); } } body.koda-page-home .skip{ position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--ink); color: #fff; padding: 14px 22px; font-size: 16px; font-weight: 600; } body.koda-page-home .skip:focus{ left: 12px; top: 12px; } body.koda-page-home :focus-visible{ outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 4px; } /* ── Display type ───────────────────────────────────────────────────────── */ /* `text-wrap: balance` — NO ORPHANS IN A HEADLINE. Jeremy, 2026-09-10, about the services heading breaking after "We": "Looks weird ending that line like that. Make sure other section headers don't have weird cutoffs like that." A browser breaks a heading at the last word that fits, which is how "…Stand On It, We" and "Our Trucks Run Here Every / Week" happen. `balance` asks it to even the lines out instead, which is exactly the rule a typesetter would apply and it costs one declaration. It is a hint: a browser without it lays the heading out the way it always did, so nothing regresses. Where there is ONE right break rather than a balanced one, the markup still carries an explicit
(the services h2, the Why KODA h2) — balance would only usually find those. */ h1, body.koda-page-home h2, body.koda-page-home h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.14; color: var(--ink); text-wrap: balance; } body.koda-page-home h1{ font-size: clamp(40px, 5.4vw, 66px); letter-spacing: -.015em; } body.koda-page-home h2{ font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.01em; } body.koda-page-home h3{ font-size: clamp(20px, 1.5vw, 23px); } body.koda-page-home .eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-deep); margin-bottom: 14px; } body.koda-page-home .eyebrow::before{ content: ''; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--steel), transparent); } body.koda-page-home .lede{ font-size: 19px; color: var(--muted); line-height: 1.6; max-width: 62ch; } /* ═══ THE BAR AND THE DRAWER LIVE IN koda-chrome.css NOW (2026-09-14) ════════ Jeremy: *"The pre-login pages per-service (and likely per area, etc. Any pre-login page) should all have the bar the same up top. Please fix that. Same with the whole footer section."* Nine hundred lines of bar, review pennant, call lockup, mobile sheet, sign-in drawer, form fields and buttons moved out of this file, together with both token blocks and the footer. They are on twenty-one pages now. THE SELECTORS CHANGED SCOPE, NOT SHAPE: `body.koda-page-home X` became `body.koda-chrome X`, and here carries BOTH classes. koda-chrome.css is linked BEFORE this file, so where the two ever collide at equal specificity the home page still wins — which is the right way round. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ HERO Rebuilt 2026-09-09 (Jeremy): "Show a bright clean inviting living room and display the intake form in a clean, intentional, and user-friendly manner." THE TWO HALVES ARE ONE PROBLEM. The card was 1,030px on its counting step — taller than the laptop it sat on — so the photograph was never in the frame with it, and no amount of work on the picture would have shown. Every number below is set against a hero that fits a 900px screen: the card's steps are built to about 480px (see THE BOOKING CARD), and the copy column is tuned to sit beside that rather than under it. THE SCRIM IS A VEIL, NOT A WASH. The old hero drowned the photograph under a burgundy-to-slate overlay; Jeremy, twice: "the blue overlay is way too dark", then "the real image is bright and clean and with the blue overlay it feels dark. Don't change the color scheme, just simply figure out how to make the text pop with the photo light rather than darkly overlaid." So the polarity is inverted — the veil is WHITE, weighted over the left where the copy sits and gone by two thirds across, and the type is NAVY. The room stays a bright room and the words are darker than anything behind them. ═══════════════════════════════════════════════════════════════════════════ */ /* THE TOP PADDING CLEARS THE FLAG. The pennant hangs 78px below the bar, and on a phone the bar collapses to a logo, a call button and a burger, which puts the flag over the middle of the hero copy. The clearance is the overhang plus a real gap: get it wrong and the first line a visitor reads is behind a gold triangle. */ /* ═══ THE COLUMN SITS HIGHER ON THE FRAME (2026-09-16) ═════════════════════ Jeremy: *"Can we lift this up higher so the text doesn't get lost in the background. We like the picture but the stool blends the text."* THE PHOTOGRAPH CANNOT MOVE AND THAT IS THE WHOLE CONSTRAINT. The band is 1266 x 1013 and the file is 1900 x 1069, so `cover` scales to HEIGHT — the crop fills the band exactly top to bottom and there is no vertical play at all. `background-position`'s second value is inert here; panning it is a no-op, which is why nobody should try it again. The only thing that can move is the type. So the type moves. Four small reductions — 36px off the hero's top padding, 10 off the masthead's rule, 6 off the mark and 4 under the headline — lift the whole lockup 56px, which is enough to take the sub-line off the console table and its glass candlesticks (the "stool") and set it on the fireplace surround instead. Nothing shrinks: the mark is still the 3x it was asked to be, the headline is still 66px, the spec strip is untouched. The column just starts earlier. THE FOUR NUMBERS MOVE TOGETHER. Take the padding back on its own and the lockup lands where it started; tighten the internal gaps on their own and the headline barely shifts. They are commented as one change in four places because they are one change. */ body.koda-page-home .hero{ position: relative; padding: calc(var(--bar-h) + 52px) 0 52px; overflow: hidden; } /* PHOTOGRAPHY, CLAUDE.md §9.2: "object position is content". The subject of this frame is the FLOOR — a pale rug running the width of a sunlit room — so the crop is pinned low and never left at centre, which would show ceiling. */ /* ═══ THE PHOTOGRAPH IS A BAND, NOT A BACKDROP (2026-09-10) ═════════════════ Jeremy: "Do we have a way to not expand the image between steps 1 and 2." It was `inset: 0` — the full height of .hero, whatever that turned out to be. And .hero is as tall as the booking card, which is 711px on the counting step and 1,999px on the details step for a four-area house. `background-size: cover` over a box that nearly triples in height does not letterbox, it RE-CROPS: the room zooms in and the frame slides, so tapping Continue looked like the picture had lurched. Every step of the wizard was quietly restaging the photograph behind it. So the photograph gets a height of its own and keeps it. `min(100%, …)` means it still fills a short hero exactly as it did — nothing changes on step one — and simply stops at the cap once the card grows past it, with the veil resolving into the page colour so the band dissolves rather than ending at a line. That is the treatment the stacked layout has used below 1000px since the redesign; it is now what every width does, and the crop is fixed for the whole of the form. */ body.koda-page-home .hero{ --hero-band: 1040px; } body.koda-page-home .hero-photo{ position: absolute; inset: 0 0 auto; z-index: 0; height: min(100%, var(--hero-band)); background-size: cover; background-position: center 68%; } /* MEASURED, NOT GUESSED. The wall behind the headline reads about #EDE9E3. At .58 white that lifts to roughly #F6F4F1, and navy #16202e on it measures about 14:1. Where the veil crosses furniture (around #C8BEB2) the same weight gives #E4DFD8 and about 11.5:1. Both are several times what AA asks, so the veil can stay thin and the room can stay bright. .hero-copy carries a white halo underneath for insurance, not as the contrast mechanism. */ body.koda-page-home .hero-scrim{ position: absolute; inset: 0 0 auto; z-index: 1; height: min(100%, var(--hero-band)); background: /* ── A COLUMN, NOT A CIRCLE (2026-09-11) ──────────────────────────────── Jeremy: *"The text still seems to get lost on the page. Can you help me find a way to position this so text is clear yet we still see the photo the same?"* THE OLD LIFT WAS A CIRCLE AND THE COPY IS A RECTANGLE. A radial centred at 17% 46% is brightest on the headline and falls off in every direction from there — so the sub-headline below it and the spec strip below THAT sat further down the ramp, on progressively less ground, which is exactly the order in which they were getting lost. The headline was never the problem; it is 66px with 5px strokes. The 19px line under it was. PANNING THE PHOTO COULD NOT FIX IT EITHER, and it is worth writing down why so nobody tries again. The band is 1425 × 1014 and the file is 1900 × 1069, so `cover` scales to HEIGHT and leaves about 377px of horizontal play — real, but not enough to move the fireplace, the TV and the black shelf uprights (this room's whole left third, and the busiest passage in it) out from behind a column that is 44% of the screen wide. SO THE LIFT IS A COLUMN NOW: even from top to bottom, so every line of type gets the same ground, and gone by 70% — which is the half of the room a visitor is being invited to imagine clean, and is pixel for pixel what it was before. "We still see the photo the same" is literally true of everything right of the copy, and the picture is not dimmed anywhere: this only ever adds white under the words so the words can stay dark. 96deg rather than 90 so the edge falls with the copy block rather than cutting straight down through it. */ linear-gradient(96deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.78) 28%, rgba(255,255,255,.50) 44%, rgba(255,255,255,.16) 58%, rgba(255,255,255,0) 70%), /* THE LANDING. Where the band ends the page has to already be the page, or the photograph stops at a hard horizontal line halfway down a form. Only the last tenth is spent on it, so a hero that fits inside the band (step one, every phone) is untouched. */ linear-gradient(180deg, rgba(255,255,255,0) 88%, var(--page) 100%), /* the barest overall lift, so the band reads as one surface */ linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)), /* and a whisper of navy at the very top so the bar has something to sit on */ linear-gradient(180deg, rgba(22,32,46,.17) 0%, rgba(22,32,46,0) 13%); } /* The weave stays the full height of the hero — it is the page's own texture, not part of the photograph, and it is what keeps the paper below the band from reading as a blank margin. */ body.koda-page-home .hero-weave{ position: absolute; inset: 0; z-index: 1; background-image: var(--weave); opacity: .45; } body.koda-page-home .hero .wrap{ position: relative; z-index: 2; } /* ═══ THE SMUDGE, AND WHERE IT CAME FROM (2026-09-10) ═══════════════════════ Jeremy: "there is a weird smokey background on the text … That smoke behind the text appears throughout this intake form, we need to remove that everywhere." koda-theme.css §5 styles hero copy for the eighteen pages where a hero IS a photograph with words on it: .koda-v2 .hero p { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); } On this page the booking card lives INSIDE .hero — it is the hero — so that rule reached every

in the wizard: every step hint, every question label, every "Tap any that apply" was carrying a 12px black blur on white paper. At 14px that is not a shadow, it is a smear, and any

the redesign had not given a colour of its own was white on white. ONE RULE, AND ITS PLACEMENT IS LOAD-BEARING. It matches the theme's specificity exactly (0,2,1) and home.css loads second, so it wins the tie — and it sits ABOVE every .step-hint / .blk-hint / .acards-left rule in this file, which are the same specificity again and therefore still win over it. Move it below them and the form goes uniformly dark-on-white and the gold "still to answer" counter goes with it. The three places that genuinely want a halo (the h1 and the sub, over the photograph) take it back by inheriting .hero-copy's WHITE one, which is the shadow this hero was designed around. NOTE THE MISSING `body`. The selector below is `.koda-page-home .hero p`, not `body.koda-page-home .hero p`, and the difference is the whole mechanism: `body` is a TYPE selector, so adding it would make this (0,2,2) — one notch ABOVE every `body.koda-page-home .blk-hint` rule further down, which would then lose their own colours to this one and take the whole form uniformly dark, gold counter and all. Without it this is (0,2,1): exactly the theme's weight, winning only by coming second in the cascade, and losing in turn to anything below that says what colour it actually wants. */ .koda-page-home .hero p{ color: var(--text); text-shadow: none; } /* The card is the widest it can be and still leave the copy a real column: the tile grid inside it wants three across at a comfortable size, and the calendar wants five. Below 1000px they stack. */ body.koda-page-home .hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 530px); gap: 48px; align-items: start; } /* THE CARD'S WIDTH IS A FUNCTION OF THE STEP, and the rules that decide it live with the intake grid further down this file (see THE CARD TAKES THE WIDTH THE STEP NEEDS). `.wide` — the old "give the card 110px back from step 2 on" — is gone: step 2 is a seven-column grid now and 640px was never going to be enough for it. */ /* ═══ "SAME KODA" — THE RETURNING-CUSTOMER NOTE (2026-09-16) ════════ Jeremy: *"We need a small 'Same KODA, New Website' type of message at the top of the hero so returning customers know we are the same company."* IT SITS IN AIR THAT WAS ALREADY THERE. A line dropped in above the masthead pushes the mark, the headline, the sub-line and the spec strip down by its full height — and this column was lifted 56px earlier today for the express purpose of getting the sub-line off the console table and its candlesticks (see THE COLUMN SITS HIGHER ON THE FRAME). Paying for the pill out of the hero's top padding instead is not an option either: the booking card shares that padding, and it would climb to within a few pixels of the bar. SO THE PILL IS LIFTED INTO THE MARK'S OWN DEAD BAND. koda-logo.png.png is a 1200 × 700 canvas with its artwork at y 192 → 485, which at the rendered 534px width leaves 85px of transparent nothing ABOVE the ink — the same wasted band that --mark-air subtracts BELOW it, never yet reclaimed. The pill's box is 33px (15px type + 8px padding each side + a 1px edge) and its gap is 13px, so `.masthead` takes exactly those 46px back and every object below it starts where it started: the mark, the headline and the card beside them do not move by a pixel. --notice-h IS THE ONE NUMBER AND IT IS TWO PLACES. Change the pill's padding, its type size or its margin and this token has to follow, or the whole column shifts down by the difference. THE BAND IS BIG ENOUGH AT EVERY WIDTH THE MARK HAS: 85px at 534, 75px at 472, 64px at 400 — all comfortably clear of 46. LEGIBILITY IS THE FILL, NOT A RING. The sub-line further down wears a hairline outline because it is bare type on a photograph; a 13px tracked cap needs a ground, for the same reason the spec strip at the foot of this column needs one (see THE PLATE UNDER THE SPEC STRIP): a halo saves a letter from standing on a shadow, it does not make a row of small caps read as ONE object. ═══ BUT THE GROUND IS A PLATE, NOT A PILL (2026-09-17) ══════════════════════ Jeremy: *"give the pill a redesign to better fit with the rest of the page's layout. It feels very flat/boring."* HE IS RIGHT, AND THIS PAGE ALREADY WROTE DOWN WHY. The note on the wax seal further down this file diagnoses exactly this failure for a different object: a small rounded box "has the same silhouette as a button, a badge, a pill, a highlighted span — every other small coloured box a page can contain — so the eye files it with them and reads it fourth." That is what a 999px lozenge with a gold hairline was. It did not look like a caption on the mark; it looked like a browser notification that had got loose, and it was the one object in the hero with a hard outline in a composition whose every other element — the gilt rule, the spec plate, the scrim, the mark itself — has soft edges or none. SO THE BOX IS GONE AND THE OBJECT IS TYPE AND RULES. Five children on one line: a gilt rule, "Same KODA" in the display face, a struck gold lozenge, "NEW LOOK" in tracked caps, a gilt rule. The two rules are `.masthead::after` — the same gilt gradient, fading out at the ends, at a smaller scale — so the mark is now bracketed: a ruled caption above it, a rule below it, one lockup. Before this it was a badge floating over the top of one. THE TWO HALVES ARE SET DIFFERENTLY ON PURPOSE. "Same KODA" is the half that answers the question, so it is the display face, reading as the mark's own name repeated. "NEW LOOK" is the half that is news, so it is the spec strip's voice — tracked caps, body face — which is the same pairing that strip uses one tier down the column ("6–12 Hours" over "DRY TIME"). Two faces, one system, and neither of them is a button label. THE GROUND IS THE SPEC STRIP'S, FEATHERED ON ALL FOUR SIDES. Same recipe as `.hero-facts::before`: .86 white, a horizontal ramp that is spent entirely OUTSIDE the words, a mask that softens top and foot so the rules sit ON the plate rather than on its edge, and two pixels of backdrop blur so the room behind goes quiet without going away. Four soft sides, no box. --notice-h IS STILL 46px AND THAT IS DELIBERATE. 15px of type + 9px of padding each side = 33, plus the 13px gap = 46, which is what the old pill measured to the pixel. Every number downstream of it — the masthead's negative margin, the 92px of top padding that clears the review pennant below 1240 (see BELOW 1240 THE PENNANT IS IN THE PILL'S SEAT), the 11px of clearance over the mark's first visible pixel at the 400px mark size — is unchanged, so nothing else in this hero moved for the redesign. */ body.koda-page-home .hero-copy{ --notice-h: 46px; } body.koda-page-home .hero-notice{ position: relative; /* The rule length is a token because it is the one measurement that has to shrink on a phone — see the 640 override at the foot of this block. */ --notice-rule: 44px; --notice-feather: 46px; display: flex; align-items: center; justify-content: center; gap: 11px; width: max-content; max-width: 100%; margin: 0 auto 13px; padding: 9px 0; line-height: 1; /* Declared, not inherited: `.koda-page-home .hero p` above sets every

in this section to --text with no shadow, and this one wants the column's own ink. Same specificity, later in the file. */ color: var(--hero-ink); text-shadow: none; } /* THE PLATE. `z-index: -1` puts it at the bottom of `.hero .wrap`'s stacking context — behind the type and the rules, still well above the scrim at 1 and the photograph at 0. The horizontal inset is the feather, so all of the ramp is spent in the empty margin either side and every glyph stands on the full .86 white. */ body.koda-page-home .hero-notice::before{ content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -6px calc(-1 * var(--notice-feather)); border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.86) var(--notice-feather), rgba(255,255,255,.86) calc(100% - var(--notice-feather)), rgba(255,255,255,0) 100%); -webkit-backdrop-filter: blur(2px) saturate(1.04); backdrop-filter: blur(2px) saturate(1.04); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 13px, #000 calc(100% - 13px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 13px, #000 calc(100% - 13px), rgba(0,0,0,0) 100%); } /* THE RULES. Each fades toward the OUTSIDE, so the object gives out into the plate's own feather instead of stopping at two hard ticks. `flex: none` or they are shrunk before the type is, which on a 375px screen would leave two gold specks. */ body.koda-page-home .hero-notice .notice-rule{ flex: none; width: var(--notice-rule); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(201,164,76,0), var(--gold)); } body.koda-page-home .hero-notice .notice-rule:last-child{ background: linear-gradient(90deg, var(--gold), rgba(201,164,76,0)); } /* THE LOZENGE. A 7px square turned through 45°, struck off the same metal as the review pennant and the wax seal — lit at the top-left corner, deepest at the foot — so the one ornament in the line belongs to the page's gold rather than being a bullet character that happens to be gold. It is `aria-hidden`, and the flex `gap` is what separates the two halves for a reader that skips it. */ body.koda-page-home .hero-notice .notice-gem{ flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 1px 2px rgba(22,32,46,.22); } body.koda-page-home .hero-notice strong{ font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0; white-space: nowrap; } /* 13px with .15em of tracking, which is the spec strip's label a half-pixel larger — and it is FULL ink, not a tinted navy, for the reason that strip gives at length: matching a tone is not worth the contrast on a surface that is a photograph. */ body.koda-page-home .hero-notice span{ font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; } /* A PHONE HAS 335px OF COLUMN AND THE LINE WANTS MOST OF IT. The type cannot give — 13px is at CLAUDE.md §4.1's floor for an audience that skews 35+ — so the rules and the gaps do, which is the right order: they are the two things in the line carrying no information. */ @media (max-width: 640px){ body.koda-page-home .hero-notice{ --notice-rule: 20px; --notice-feather: 26px; gap: 8px; } } /* ═══ THE MASTHEAD ═════════════════════════════════════════════════════════ Mark, gilt rule, headline — one lockup. ENLARGED AND CENTRED, 2026-09-10. Jeremy: "Increase our logo by 3x and center it between 'A' and 'Feel' so it's centered over the hero text." It was a 104px mark tucked into the top-left corner of the column — placed, not designed — and the copy column had 200px of empty air beside it that the booking card next door did not. ═══ WHAT "CENTRED BETWEEN 'A' AND 'FEEL'" MEANS IN CSS ═══ Over the HEADLINE's own measure, not the column's. The column is 662px wide at 1440 and the headline's longest line is 360px of it, so centring the mark on the column would have parked it well to the right of the words it is meant to sit over — technically centred, visibly adrift. (That longest line was "A home you feel", 452px, until the 09-16 re-break; it is "feel proud of" now. See --mark-w below for the one number that had to follow it.) So the lockup shrink-wraps the headline (`width: max-content`, which for an

carrying an explicit
is the longer of its two lines) and the mark is centred inside that. The rule under it follows the same centre. The mark is then as large as that measure allows, up to 3× — which is 3× on every screen where the headline has room for it and a shade under on the widest desktop, where the h1 stops growing at 66px but the column keeps going. A logo that overhung the column to reach a round multiple would sit in the gutter and clip the moment the window narrowed. THE CAP IS 3× THE OLD MARK: 104px tall × 1.714 (1200 × 700 native) = 178px wide, so 534px. Height follows from width, so the aspect can never be stretched — CLAUDE.md §2. */ body.koda-page-home .hero-lockup{ width: max-content; max-width: 100%; margin-inline: auto; } /* THE NEGATIVE TOP IS THE "SAME KODA" PILL BEING PAID FOR OUT OF THE MARK'S TRANSPARENT CANVAS — see THE RETURNING-CUSTOMER NOTE above; it is exactly the height the pill occupies, so nothing below the masthead moves. Bottom is 12px, not 22 — see THE COLUMN SITS HIGHER ON THE FRAME above. */ body.koda-page-home .masthead{ margin-top: calc(-1 * var(--notice-h)); margin-bottom: 12px; } /* `width: 0; min-width: 100%` IS THE WHOLE TRICK, AND IT IS NOT A HACK FOR ITS OWN SAKE. The lockup shrink-wraps its content, and a plain `width: 100%` on a 1200px-wide PNG contributes its INTRINSIC 1200px to that calculation — so the lockup came out as wide as the column and the mark centred 105px right of the headline, which is the exact failure this was meant to fix. A zero width contributes nothing to the intrinsic pass; the min-width then fills the measure the headline set, in the layout pass, where percentages are real. Height is never stated, so the aspect cannot be stretched — CLAUDE.md §2. */ body.koda-page-home .hero-logo{ /* ══ THE MARK'S BOX IS NOT THE MARK (2026-09-16) ══════════════════════════ Jeremy: *"It looks like it and the carpet/upholstery text section could be moved up to better center vertically between the logo and the 6-12 hours dry time."* HE IS DESCRIBING 215 TRANSPARENT PIXELS. koda-logo.png.png is a 1200 × 700 canvas and the artwork inside it runs y 192 → 485: there is 27.4% of nothing above the mark and 30.7% of nothing below it. Rendered at 534px the box is 311px tall and only 130px of that is ink, so the gilt rule under the masthead was not sitting 10px below the logo at all — it was sitting 106px below the last pixel anybody can see, and 31px above the headline. A rule that is three times closer to the headline than to the mark stops reading as a divider between them and starts reading as an underline on the headline, which is why the whole h1 + sub-line group looked like it had slid to the bottom of the space it was in. SO THE DEAD BAND IS SUBTRACTED, IN CSS, FROM THE FILE'S OWN NUMBERS. The band below the mark is 215/700 = 30.71% of the rendered HEIGHT, and height is width / 1.7143, so it is 17.92% of the rendered WIDTH — whatever that width turns out to be. `--mark-air` is then what is actually wanted between the mark's last visible pixel and the rule, and the margin is the one minus the other. The result goes negative (about -56px at 534) and it is supposed to: it is pulling back space the PNG is not using. ONE PERCENTAGE BASIS, WHICH IS WHY THIS IS SAFE. `--mark-w` carries a `100%` term, and a percentage in `margin-bottom` resolves against the containing block's WIDTH — the same basis `min-width` uses. Both properties are on this element, so they cannot disagree. Do not move `--mark-w` up to .hero-copy to share it with the sub-line: over there `100%` would mean the 662px column rather than the 452px lockup, and the two would silently drift apart. THE FILE IS UNTOUCHED — CLAUDE.md §2. Nothing is cropped, redrawn or re-exported; the real logo is still the src and its aspect is still the browser's own. Only the empty margin around it stops taking up room. */ /* ══ 1.256 IS THE HEADLINE THE MARK WAS SIZED AGAINST (2026-09-16) ══════ `100%` here is the lockup, and the lockup is `max-content` of the h1 — its LONGEST line. Re-breaking the headline after "you" to centre it (see the note in index.html) took that longest line from "A home you feel" (451.8px at the 66px ceiling) to "feel proud of" (359.7px), and the mark, which is sized off exactly that measure, would have quietly come out 20% smaller on every screen under 1280. Jeremy asked for a 3× mark; a centring fix is not allowed to take it away again. So the measure is scaled back to the one it used to be: 451.8 / 359.7 = 1.2559. Both lines are set in the same face at the same size, so the ratio holds at every breakpoint rather than only at the ceiling. (The em's 6px of padding is the one px-based term in it, 1.7% of the line, so the ratio drifts under a percent across the whole clamp — far inside the rounding the browser is doing anyway.) CHANGE THE HEADLINE'S WORDING AND THIS NUMBER IS WRONG. It is the only thing in the stylesheet that knows what the h1 says. */ --mark-w: min(534px, calc(100% * 1.2559 + max(0px, 100vw - 1280px))); --mark-air: 40px; width: 0; /* THE CAP, AND THE ONE PLACE THE MARK IS ALLOWED PAST THE TEXT. 534px is 3× the mark it replaced (104px tall × 1.714 native aspect = 178px wide). The corrected measure is 452px at the h1's 66px ceiling, so on a wide desktop the last 82px of that 3× has to come from somewhere: it comes from the gutter, symmetrically, and only from gutter that actually exists. Below a 1280px window the second term is zero and the mark simply sits on the corrected measure. It stays centred on the headline either way — that is what the customer sees, and it is what was asked for. Measured after the 09-16 re-break: 277px at 360, 335 at 900, 407 at 1100, 452 at 1280, 534 at 1440 — the same five numbers it produced before, which is the point. */ min-width: var(--mark-w); height: auto; display: block; /* `margin: 0 auto` centres a box INSIDE its container and gives up the moment the box is wider than it, resolving both margins to zero and hanging the whole overhang off the right — which is how a mark meant to be centred on the headline ended up starting at its first letter and ending past the card. The transform has no such opinion: it centres on the measure whether the mark fits inside it or bleeds either side of it. */ position: relative; left: 50%; transform: translateX(-50%); /* 17.92% of the width is transparent canvas below the mark — see THE MARK'S BOX IS NOT THE MARK above. What is left is `--mark-air` of real space. */ margin: 0 0 calc(var(--mark-air) - var(--mark-w) * .1792); /* Two shadows: a tight one that separates the mark from whatever the photograph is doing behind it, and a wide soft one that gives it weight. A white glow would have done neither — it is already on a light ground. */ filter: drop-shadow(0 1px 1px rgba(16,24,36,.18)) drop-shadow(0 8px 20px rgba(16,24,36,.16)); } body.koda-page-home .masthead::after{ content: ''; display: block; width: 132px; height: 3px; margin: 0 auto; background: linear-gradient(90deg, rgba(201,164,76,0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(201,164,76,0) 100%); } /* ═══ `margin-inline: auto` IS NOT TIDINESS, IT IS THE CENTRING (2026-09-16) ══ Jeremy, twice, and the second time was not a matter of taste: *"We still aren't centered with 'A home you feel proud of'. Everything aligns other than the 'a home you feel proud of'."* IT IS ONLY WRONG ON A WIDE SCREEN, WHICH IS WHY IT SURVIVED A MEASURED PASS. `width: max-content` gives the h1 a box the width of its longest line — 360px — and a fixed-width block inside a WIDER block sits flush LEFT unless it is told otherwise. Normally it is not wider: the lockup is `max-content` too, so it comes out as the h1 and the two edges coincide. THE MARK IS WHAT MAKES THE LOCKUP WIDER. `.hero-logo` is `width: 0` precisely so it contributes nothing to that intrinsic pass (see the note below it), but `min-width` contributes as well, and --mark-w carries a `100vw - 1280px` term. A percentage is dropped from an intrinsic calculation; an absolute length is not. So past about 1640px the mark's min-width starts winning the masthead's max-content, the lockup swells toward 534 — and the h1, still 360px and still flush left, slides (534 - 360) / 2 = 87px off the axis while the mark, the gilt rule, the sub-line and the spec strip all stay on it. Measured at 1920 before this line: column, lockup, mark, sub and strip all centred on 664; the headline on 577. At 1440 the vw term is only 160px, the lockup is the h1's own 360, and everything measures perfect — which is exactly how a pass that only looked at 1280 and 1440 signed this off twice. One declaration removes the whole class of fault: the box is centred in whatever the lockup turns out to be, so it can never matter again what the mark does to the lockup's width. */ body.koda-page-home .hero-lockup h1{ width: max-content; max-width: 100%; margin-inline: auto; } /* The two smaller marks only restate the WIDTH and the AIR; the dead-band subtraction is the base rule's and follows them down on its own. */ @media (max-width: 900px){ body.koda-page-home .hero-logo{ --mark-w: min(472px, calc(100% * 1.2559)); --mark-air: 34px; } body.koda-page-home .masthead{ margin-bottom: 20px; } } @media (max-width: 640px){ body.koda-page-home .hero-logo{ --mark-w: min(400px, calc(100% * 1.2559)); --mark-air: 28px; } body.koda-page-home .masthead::after{ width: 104px; } } /* ── THE HALO IS AN OUTLINE NOW (2026-09-10) ──────────────────────────────── Jeremy: "We need to add a bit of shading behind the hero text. Not a lot, don't overlay the whole image, just find a way to have the text not blend to the background without distracting from the photo or the text. Maybe a very fine outline in white just to make the text stand out. Looks like we have that going just a hair but for example, the word 'every' gets lost on the background." HE NAMED THE EXACT FAILURE. "Every Surface" is the last fact in the spec strip, which is the lowest thing in the copy column — so it sits where the veil has thinned to almost nothing AND where the photograph has its busiest passage, the sofa and the window frame behind it. Two soft glows (12px and 3px) put light NEAR a glyph; what a glyph needs against a busy ground is light ON ITS EDGE, and a 3px blur spread over 360° is not that. So the halo is two things stacked, and the order matters: 1. AN OUTLINE. Eight 1px offsets at 0/45/90/…°, each with a 1px blur. That is a hairline of white tight against every stroke — the "very fine outline in white" verbatim. It costs nothing over the photograph because it is only ever one pixel wide. 2. A BLOOM, kept. The wide 14px glow still lifts the local ground, which is what keeps the outline from reading as a sticker cut out of the room. WHY NOT -webkit-text-stroke. A stroke is drawn CENTRED on the glyph outline, so half of it eats into the letterform: 1px of stroke on a 12.5px cap thins the type visibly and turns the tracking to mush. A text-shadow ring is drawn entirely OUTSIDE the fill, so the letterforms are exactly the letterforms. AND NOT MORE VEIL. "Don't overlay the whole image" is a real constraint and the right one — the hero's whole design is a bright room the type sits on (see THE SCRIM IS A VEIL above). Nothing here touches .hero-scrim. */ /* FULL INK, NOT --text. Jeremy, 2026-09-10: "Darken all of the text so it stands out on the white background." --text (#1e2530) is the body colour for a white PAGE; this column sits on a photograph of a sunlit room, where the brightest patches under the veil run to about #F7F5F2 and every glyph is competing with a window. --ink (#16202e) is the darkest thing in the palette and it is what the headline was already using; the sub-headline and the spec strip now use it too, so the column reads as one voice instead of three. */ /* ═══ AND THEN THE RING CAME OFF (2026-09-14) ══════════════════════════════ Jeremy: *"Try removing the white outline on the hero font and use black font other than 'Proud'."* BOTH HALVES OF THAT ARE ONE MOVE. The ring existed to keep --ink (#16202e, a navy-black) legible where the veil thins; take the ring away and the type has to carry itself, and a navy-black on a sunlit room is the wrong ink to ask that of. Pure brand black — CLAUDE.md §3's dark-text token — is roughly a third of a stop darker on the same ground, and it is the difference between the column needing an outline and not. WHERE THE LEGIBILITY ACTUALLY COMES FROM NOW. The veil (.hero-scrim) is unchanged and still runs 84% → 78% white down the whole copy column, and the spec strip at the foot — the one place the veil has thinned to almost nothing — has had its own white plate under it since earlier today. So the two surfaces that were doing the work are both still there; the ring was the third layer, and it was the one that showed. `text-shadow: none` is declared, not omitted. Leave it off and koda-theme.css applies `.koda-v2 .hero h1 { text-shadow: 0 3px 30px rgba(0,0,0,.55) }` — a 30px black blur meant for white type on a dark photograph, which under black type reads as a smudge. --hero-ink is one token for the whole column so the headline, the sub-line and the spec strip cannot drift apart again. "proud" is the deliberate exception and sets its own colour below. */ body.koda-page-home .hero-copy{ --hero-ink: #1a1a1a; color: var(--hero-ink); text-shadow: none; /* ═══ ONE AXIS FOR THE WHOLE COLUMN (2026-09-15) ═══ Jeremy: *"Please center the hero logo and text so they all align vertically and the text is all centered."* Every piece of this column was already centred on something, and no two of them on the same thing: the mark and the gilt rule on the headline's measure, the headline's second line on its first, the sub-line and the spec strip on nothing at all — both were flush left against a column edge the mark had drifted away from. Four objects, three axes, and the mark visibly off over the words below it. `text-align: center` here is the one declaration that settles all of it, because every child inherits it; `margin-inline: auto` on the three boxes below then puts the BOXES on the same axis as the type inside them. The lockup already shrink-wraps the headline and the spec strip already shrink-wraps its three facts (`width: max-content` on both), so auto margins centre the words rather than a box with slack in it — which is the failure the strip's own note further down describes. */ text-align: center; } /* The theme's `.koda-v2 .hero h1` blur has to be turned off by name here — see the note on .hero-copy above. */ body.koda-page-home .hero-copy h1{ color: var(--hero-ink); text-shadow: none; } /* BOTH LINES CENTRE IN ONE BOX (2026-09-11, revised 2026-09-16). Jeremy: *"Center the words 'proud of' in the hero between 'a home you feel' so it isn't left justified."* `.hero-lockup h1 { width: max-content }` makes the box exactly the LONGER of the two lines, and `text-align: center` then places the shorter one inside it; the mark and the gilt rule above are centred on the same box, so the whole lockup shares one axis. WHICH LINE IS LONGER CHANGED ON 09-16. It was line one, "A home you feel"; the re-break that fixed the optical centring (see index.html) made it line two, "feel proud of", at 360px against line one's 341. The mechanism did not change — max-content is still the longer line — but anything that quoted 452px as "the measure" did, including --mark-w above. */ /* 14px, not 18 — see THE COLUMN SITS HIGHER ON THE FRAME above. */ body.koda-page-home .hero h1{ margin-bottom: 14px; text-align: center; } /* THE WEAKEST WORD ON THE PAGE WAS THE EMPHASISED ONE. "proud" was set in --steel-deep, Nocturne's slate for small text on mist — and it was the one word in a 66px headline that was not full ink, sitting over the brightest part of the room, under a gilt highlighter. --steel-ink is the same brand slate taken down until it clears 7:1 on that surface, so the emphasis still reads as a different colour and no longer reads as a faded one. */ body.koda-page-home .hero h1 em{ font-style: italic; color: var(--steel-ink); position: relative; /* A hand-drawn underline rather than a text-decoration: it reads as emphasis someone made rather than a link the browser drew. */ background: linear-gradient(90deg, rgba(201,164,76,.55), rgba(201,164,76,.55)) 0 88% / 100% 9px no-repeat; border-radius: 2px; padding: 0 3px; } /* ── THE SUB-LINE GETS A RING BACK, AND ONLY A RING (2026-09-16) ──────── Jeremy: *"We need to add the very thin white outline to the 'Carpet, upholstery and every…' part of the hero, through 'serving all of West Michigan'. When mobile it just gets lost in the background."* And then, on what it must not be: *"Don't make it glow/fade, just make it very very fine just to separate the letters from the background."* IT IS ONE LINE OF TYPE, ON A PHOTOGRAPH, AT NINETEEN PIXELS, and stacked it lands square on the sofa and the striped ottoman — the busiest passage in the room, at the depth where the veil has already thinned so the furniture can show. Weight alone does not settle that; 600 makes the strokes thicker and the strokes are still the same colour family as what is behind them. THIS IS NOT THE HALO COMING BACK. The two rings this line wore in a week (09-11, 09-14) were each an outline STACKED ON A BLOOM — a wide soft glow that lit the ground around the words, which is the thing Jeremy has now explicitly ruled out, and which is what made 19px copy the loudest object in the column. There is no bloom here and there is no blur: eight one-pixel offsets at 0/45/90/…°, every one of them at ZERO blur radius, which draws a hairline of white hard against each stroke and stops. It cannot fade, it cannot halo, and it is exactly one pixel wide however big the screen is. WHY NOT -webkit-text-stroke. A stroke is centred on the glyph outline, so half of it eats the letterform: a white 1px stroke on 19px type thins the type and mushes the tracking. A text-shadow ring is drawn entirely OUTSIDE the fill, so the letters are exactly the letters. THE HEADLINE AND THE SPEC STRIP ARE DELIBERATELY NOT GIVEN THIS. The h1 is 66px with five-pixel strokes and has never been the line that disappeared, and the strip's labels are small caps with real tracking. Jeremy named one line; one line gets it. THE EXTRA STEP OF WEIGHT STAYS. 600 rather than 400 is what a 19px line needs on a photograph, and it costs the picture nothing. */ body.koda-page-home .hero-sub{ font-size: 19px; line-height: 1.55; color: var(--hero-ink); font-weight: 600; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff; max-width: 34ch; margin: 0 auto 22px; /* Centred, this line broke "…all of West / Michigan" and left one word stranded on a third row. `balance` is the browser evening the rows out for us; it applies to short blocks only, which this is, and every h2 on the page is already set the same way. */ text-wrap: balance; } /* ═══ THE EXPERIENCE SEAL ══════════════════════════════════════════ Jeremy, 2026-09-10: *"this is more what I was looking for with the 44 years stamp that you have on the hero section and the why koda section. Use the stamp attached and put it to the right of the lead form, not in the hero text."* ═══ WHAT THE REFERENCE ACTUALLY CHANGED ═══ The plate this replaces was a gold RECTANGLE with debossed type in it, and the trouble with a gold rectangle is that it is a label. It has the same silhouette as a button, a badge, a pill, a highlighted span — every other small coloured box a page can contain — so the eye files it with them and reads it fourth. A seal has a silhouette nothing else on a web page has, and that is most of what makes it read as a mark of standing rather than as a piece of interface. It is also, literally, the difference between something printed on a document and something pressed into one. ═══ HOW THE WAX IS BUILT ═══ The manufacture is the review pennant's, so every gold object on this page comes off one metal — but the geometry is new, and it is all in the SVG: THE SCALLOPS fifteen 26-unit arcs struck around a 104-unit circle. Regular rather than hand-irregular: at 176px an irregular blob reads as a badly drawn circle, and the lobes are what carry the silhouette. THE FOIL a six-stop ramp — bright at the crown, through the mid-tone, a specular band where a curved face throws light, then the deepest tone at the foot. THE POOL a radial fill inside the rim, lit from the upper left and a shade deeper than the wax around it. That difference is what makes the rim a raised LIP rather than a drawn circle. THE FLAKE a diagonal guilloche at 6% over the whole face. THE DEBOSS every large glyph drawn twice, a light echo one unit low and the near-black face over it. ═══ AND WHY IT SITS ON THE CARD ═══ "To the right of the lead form" — the booking card IS the right-hand column, so `.book-col` becomes the positioning context and the seal is pressed onto its top-right corner, overlapping the header and the first of the form the way a wax seal overlaps the paper it was dropped on. ═══ IT IS INSIDE THE CARD ON BOTH AXES, AND THAT IS THE FIX OF 2026-09-11 ══ The seal used to hang 26px above the card and 22px past its right edge, and it was being beheaded on one axis and guillotined on the other: THE TOP. The overhang put the crown in the exact band the fixed bar occupies. Scroll fifty pixels and the brass rail took the top off the medallion. A fixed header covers everything that passes under it — a paragraph survives that, a circle does not. THE RIGHT. `.hero` is `overflow: hidden` (it has to be; the photograph and the wash are full-bleed inside it) and it clips at the DOCUMENT edge, which is the page gutter — 20px — outside .wrap. The seal's outermost scallop reaches 17px past .wrap and its 26px shadow another 26 beyond that, so on every viewport narrower than 1280px, where .wrap is `100% - 40px` rather than a centred 1240, the right-hand scallops were being sliced flat. The old note here claimed two pixels of clearance; it was measuring the 176px BOX and the artwork is not the box. So the geometry is now measured from the painting, not the element. The scallop tips reach 83px from the centre (113 viewBox units of 240, scaled to 176px) and the 176px box puts the centre 88px in from its own right edge, so `right: 6px` lands the outermost tip 11px INSIDE the card and the whole shadow inside the gutter. `top: -8px` puts the crown (11.7px of transparent margin at the top of the box) four pixels BELOW the card's top edge. Nothing of the seal is ever the outermost or topmost thing on the page any more: the card's own edges meet the bar and the gutter first, and the seal goes under the rail with the paper it is pressed onto. It reads as a stamp on the corner of a form, which is what it is, and it cannot be cut at any width by anything. IT STANDS UPRIGHT (2026-09-17). It used to sit six degrees off the vertical, on the theory that a hand-pressed seal is never quite square. Jeremy read that as a mistake rather than as a gesture — *"the 44 years of excellence stamp is slightly off-center, tilted left a bit"* — and he is right about what it costs: the ring is a perfect circle, so the tilt is legible ONLY in the type, and a line of type a few degrees off true reads as a layout bug, not as wax. The artwork is symmetric about x=120 to the unit, so level is centred. Every copy of this seal is now 0 degrees; keep it that way. ═══ TYPE SIZES ARE VIEWBOX UNITS AND THAT IS A TRAP ═══ The SVG is 240 units wide and renders at 176px, so every font-size below is multiplied by 0.733 before anybody reads it. CLAUDE.md §4.1 puts the web floor at 12px, which makes 16.4 units the real floor here — "OF", the smallest thing on the seal, is set at 18 and lands at 13.2px. Shrinking the seal shrinks the type with it, which is why the small-screen width is 168px and not 140px: at 140px "OF" would render at 10.5px and the seal would be breaking the type floor without a single font-size in this file changing. */ body.koda-page-home .book-col{ position: relative; } /* z-index 6, NOT 3. The card's own foil edge (.book::before) is also z-3, and it belongs to an element that comes LATER in the markup than the seal — so at equal z-index the rail won a paint-order tie and drew a gold line straight across the top of the medal (Jeremy, 2026-09-11: "the top line going through the top of the medal"). The seal is pressed ONTO the card, so it outranks everything the card draws at its own edge. Safe at any height because the stamp is `pointer-events: none` and the card's own pop-ups (the address suggestions) open low in the body, nowhere near this corner. */ body.koda-page-home .seal-stamp{ position: absolute; z-index: 6; top: -8px; right: 6px; width: 176px; margin: 0; pointer-events: none; /* it is a mark, not a control */ } body.koda-page-home .seal-stamp-svg{ display: block; width: 100%; height: auto; /* Cast onto the card and onto the room behind it. `drop-shadow` follows the scalloped alpha, which is the whole reason the seal reads as an object lying on the page; a box-shadow would draw a square behind a circle. */ filter: drop-shadow(0 2px 3px rgba(16,24,36,.28)) drop-shadow(0 14px 26px rgba(16,24,36,.38)); } /* GILT IS NOT A TEXT COLOUR AND THIS DOES NOT MAKE IT ONE. Nocturne measures the gilt at 2.37:1 and bars it for small type on a light ground. Nothing here breaks that: the letters are near-black (--gold-ink, 8.1:1 on the foil) and the gold is the PLATE they are pressed into. */ body.koda-page-home .seal-stamp-ink{ fill: var(--gold-ink); } /* The light echo, drawn first and one unit LOW. Never above: a highlight above a glyph reads as embossed, which is a different tool. */ body.koda-page-home .seal-lo{ fill: rgba(255,255,255,.5); } body.koda-page-home .seal-rule{ stroke: #2c2109; stroke-opacity: .5; stroke-width: 2; } body.koda-page-home .seal-n{ font-family: var(--font-display); font-weight: 800; font-size: 78px; letter-spacing: -.02em; } body.koda-page-home .seal-y{ font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: .1em; } body.koda-page-home .seal-of{ font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: .16em; } /* 20, NOT 22, AND THE WHOLE BLOCK MOVED UP WITH IT. "EXPERIENCE" is the longest word on the seal and it sits lowest, where the ring has closed in hardest — and the measurement that matters is at the BASELINE, not at the cap. At 22/.085em on a 196 baseline it was 150 units wide against an inner chord of 121: the feet of both E's were outside the rim, which is the one flaw that makes a seal look like clip art. So the text block lifted (baselines 196 -> 187, and everything above it in proportion) and the size came down: 133 units against a chord of 140, clear by three and a half a side. Still 14px at the smallest size this seal ships (168px), over CLAUDE.md §4.1's 12px floor. */ body.koda-page-home .seal-t{ font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: .07em; } /* BELOW 1000px THERE IS NO "RIGHT OF THE FORM" TO BE TO — the hero grid has stacked and the card is the full width of the page. So the seal stops being attached to a corner and becomes a centred medallion ABOVE the card, which is the one thing it must not go back to being: a line inside the hero text. */ @media (max-width: 1000px){ body.koda-page-home .seal-stamp{ position: static; width: 168px; margin: 0 auto 18px; } } /* ON THE NIGHT BAND IT STANDS BESIDE THE HEADLINE, NOT UNDER IT. It used to be centred below the sub-line at 208px with 22px above it, which is 230px of column spent before the reader reached the five tiles that prove the claim the headline makes. `.why-head` sets the head and the seal on one row — the text keeps its centred axis inside its own box, the medallion sits to its right, and the tiles come up by the whole height of the seal. The shadow goes deeper than the booking card's: on navy a soft grey shadow is invisible and the seal floats. */ /* THE HEADLINE KEEPS THE PAGE'S CENTRE LINE. A flex row would have centred the PAIR, which slides the headline sixty pixels left of the tiles underneath it and reads as a typo in the layout. So the text is centred on the band's own axis exactly as it was, and the seal is lifted out of the flow into the right margin — 720px of head inside a 1240px wrap leaves 260px a side, and a 190px medallion sits in that with room to spare. */ body.koda-page-home .why-head{ position: relative; min-height: 196px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 42px; } body.koda-page-home .why-head .sec-head{ margin-bottom: 0; } /* The width tracks the margin it is sitting in rather than being one number: 720px of head inside the wrap leaves (wrap - 720)/2 a side, which is 260px at full width and 190px at the breakpoint below. 15vw lands inside both. */ body.koda-page-home .band-night .seal-stamp{ position: absolute; right: 0; top: 50%; margin: 0; width: clamp(158px, 15vw, 196px); transform: translateY(-50%); } /* Below 1140px the margin is narrower than the medallion and there is no "beside" to be — the seal goes back to a centred medallion under the text, which is the one arrangement that still reads as deliberate at that width. */ @media (max-width: 1140px){ body.koda-page-home .why-head{ min-height: 0; gap: 22px; } /* `transform: none` is LOAD-BEARING, not tidiness. The desktop rule above uses translateY(-50%) to sit the medallion on the headline's centre line; static flow does not need that and a seal shifted up by half its own height lands on top of the sub-line. This used to be reset by accident — the tilt that lived here overwrote the whole `transform` property — so when the tilt came out (2026-09-17) the reset had to be written down on purpose. */ body.koda-page-home .band-night .seal-stamp{ position: static; width: 168px; margin: 22px auto 0; transform: none; } } body.koda-page-home .band-night .seal-stamp-svg{ filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 20px 38px rgba(0,0,0,.7)); } /* ── THE SPEC STRIP ───────────────────────────────────────────────────────── Three facts, one object. The rules do the containing, so nothing sits in a box and the photograph runs underneath the whole thing. GILT RULES, STEEL LABELS. The horizontal rule at the top is gilt because a rule is decoration. The labels are NOT: Nocturne measures gilt at 2.37:1 on white and bars it for small text on a light ground, so a 12px gold cap on this scrim would be a contrast failure however much it suited the palette. */ body.koda-page-home .hero-facts{ position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; /* ═══ THE BOX IS THE THREE FACTS, NOT 600 PIXELS (2026-09-14) ═══ It used to be a 600px box holding 441px of type, packed to the start — 159 pixels of nothing on the right. Everything hung off that box was therefore centred on a phantom: the plate below, and the gold rule above. `width: max-content` makes the box exactly the three facts, so a symmetric inset is symmetric about the WORDS. `max-width` stays as the ceiling it always was. Reset at 640, where the strip deliberately stretches. */ width: max-content; /* Centred on the same axis as the mark and the headline — see the note on .hero-copy. Below 640 the strip goes `width: auto` and fills the column, and an auto margin on a full-width box is a no-op, so this needs no reset. */ margin-inline: auto; /* ═══ THE FEATHER IS AS LONG AS THE MARGIN IT HAS TO FADE INTO ═══ A fixed 92px ramp is symmetric only while there are 92px to draw it in. `.wrap` is `min(1240px, 100% - 40px)`, so the gutter beside this strip is 92px at 1440 and 20px at 1150 — and a 92px ramp on a 20px gutter is a ramp with 72px of itself off-screen, which arrives at the left edge at 78% opacity. That is a hard side, and a hard side on the left with a free fade on the right is exactly the asymmetry this was changed to fix. So the ramp is the gutter. 1256 = the 1240px wrap plus a 16px allowance for a classic scrollbar (100vw counts it, the layout does not), which keeps the fade finishing just INSIDE the frame rather than just outside it on the one browser that matters most here. The 14px floor is the ≤640 gutter, so the phone case falls out of the same expression and needs no override. */ --fact-feather: clamp(14px, calc((100vw - 1256px) / 2), 92px); max-width: 600px; margin-top: 26px; padding: 16px 0 14px; border-top: 2px solid transparent; /* THE GOLD RULE IS CENTRED TOO. It used to run solid from 0 to 62% and fade out to the right — a left-anchored rule, which is exactly what made the whole strip read as pushed to one side. Now it is strongest in the middle and gives out evenly at both ends, on the same axis as the plate. */ border-image: linear-gradient(90deg, rgba(201,164,76,0) 0%, var(--gold) 16%, var(--gold) 84%, rgba(201,164,76,0) 100%) 1; border-bottom: 1px solid var(--rule); border-left: 0; border-right: 0; } /* ═══ THE PLATE UNDER THE SPEC STRIP (2026-09-14) ═══════════════════════════ Jeremy: *"Can you add a slight white overlay under the '6-12 hours dry time' to 'every surface one company' sections? We need those to pop a bit more without blanking out the rest of the photo."* THIS IS THE LOWEST LINE OF COPY IN THE HERO and it crosses the brightest, busiest part of the room — "Every Surface" lands on the sofa. The column veil (.hero-scrim) is deliberately thinnest down here so the furniture stays visible, and the white halo on the glyphs is a ring, not a ground: it saves a letter standing on a shadow, it does not make a strip of 12.5px tracked caps read as ONE object. SO THE STRIP GETS A GROUND OF ITS OWN, and every edge of it is feathered so it is a plate rather than a box: · the BACKGROUND feathers left and right, so it never reaches the booking card and never cuts a vertical line down the photograph; · the MASK feathers top and foot, so the gold rule above and the hairline below sit on it rather than on its edge. Four soft sides, one element, no box. ═══ AND IT WAS FEATHERED OFF-CENTRE (2026-09-14, later) ═══════════════════ Jeremy: *"The backdrop for this section is perfect except it doesn't look properly placed / centered. We'll need to adapt this to make this look like the fade starts from the center and not left justified. Make sure it extends equally in both directions so everything appears centered."* HE IS DESCRIBING TWO DIFFERENT ASYMMETRIES AND THEY COMPOUNDED. ONE — THE FEATHERS WERE DIFFERENT LENGTHS. The left ramp was 26px and the right one ran from 74% to 100% of a 650px plate, which is 169. A 26px edge is a cut; a 169px edge is a fade. So the plate had a left EDGE and a right FADE, and an object with a hard side and a soft side reads as anchored to the hard one. Both are 92px now, measured in pixels rather than percent so the two stay identical at every width the strip can be. TWO — IT WAS CENTRED ON THE WRONG BOX. The insets hung off `.hero-facts`, which was 600px wide holding 441px of type packed to the start. The plate's own centre therefore sat 80px right of the words' centre while its left edge sat 24px left of them — so it was simultaneously too far right AND started too far left, which is precisely the "left justified" look. `.hero-facts` is `width: max-content` now (see above), so the box IS the words and a symmetric inset is symmetric about them. WHY 92px EACH SIDE, AND WHY THE PLATEAU. The ramp ends exactly where the type begins: full opacity runs from the first glyph of "6–12 Hours" to the last of "ONE COMPANY", and all 92px of each feather is spent OUTSIDE the words. That is what keeps this from costing legibility — every word still stands on .86 white, the same as before, and it is only the empty margin either side that is now doing the dissolving. Measured at 1440: the plate runs 0.7 → 625 while the booking card starts at 819, so the right feather has 194px of clearance it did not have before. Z-INDEX -1, AND IT MATTERS WHICH CONTEXT IT LANDS IN. `.hero .wrap` is `position: relative; z-index: 2`, so it is a stacking context and this pseudo can only fall to the BOTTOM of it — behind .hero-facts' own border (the gold rule stays on top, which is the point) and still well above the scrim at z-index 1 and the photograph at 0. Put `isolation: isolate` on .hero-facts and the plate would paint OVER the gold rule instead. The blur is the difference between a wash and a plate: two pixels is enough that the room behind it goes quiet without going away. */ body.koda-page-home .hero-facts::before{ content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -11px calc(-1 * var(--fact-feather)) -9px calc(-1 * var(--fact-feather)); border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.86) var(--fact-feather), rgba(255,255,255,.86) calc(100% - var(--fact-feather)), rgba(255,255,255,0) 100%); -webkit-backdrop-filter: blur(2px) saturate(1.04); backdrop-filter: blur(2px) saturate(1.04); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 15px, #000 calc(100% - 13px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 15px, #000 calc(100% - 13px), rgba(0,0,0,0) 100%); } body.koda-page-home .hero-facts > div{ padding: 0 22px; border-left: 1px solid rgba(201,164,76,.42); } body.koda-page-home .hero-facts > div:first-child{ padding-left: 0; border-left: 0; } body.koda-page-home .hero-facts > div:last-child{ padding-right: 0; } /* `text-shadow: inherit` on both tiers, deliberately restated: these are the glyphs Jeremy watched disappear ("the word 'every' gets lost"), and they are the ones furthest down the column, where the veil is thinnest. Inheriting is what gives them the ring defined on .hero-copy — without it they fall back to nothing and the ring stops at the sub-headline. */ body.koda-page-home .hero-facts dt{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.1; color: var(--hero-ink); letter-spacing: -.012em; white-space: nowrap; text-shadow: none; } body.koda-page-home .hero-facts dd{ margin-top: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; /* The strip is the lowest thing in the copy column, so it crosses the floor where the veil is thinnest — and at 12.5px with .13em of tracking these are the smallest glyphs standing on the photograph. Navy at 78% was chosen to match the tone of the steel labels elsewhere; matching a tone is not worth 22% of the contrast on the hardest surface the page has. Full ink. */ color: var(--hero-ink); white-space: nowrap; text-shadow: none; } /* ═══ BELOW 1240 THE PENNANT IS IN THE PILL'S SEAT ════════════════════ The gold review flag hangs 78px BELOW the bar (see THE TOP PADDING CLEARS THE FLAG), and the "Same KODA" pill sits in the first 33px of the hero — so on a wide screen they miss each other only because the flag is over by the phone number and the pill is over the copy column, 114px apart at 1440. THEY CONVERGE AS THE WINDOW NARROWS, AND THEY MEET AT 1240. Measured: the gap between the pill's right edge and the flag's left edge is 107px at 1280, 29px at 1240, 10px at 1202, and from there it is an overlap — 41px at 1100, and by 1000, where the copy stops being a column and runs down the middle of the page, the flag comes down through the MIDDLE of the pill. No amount of narrowing the pill escapes that: below 1000 its centre and the flag's centre are the same centre. SO THE CLEARANCE IS VERTICAL, WHICH IS THE FIX THIS HERO ALREADY USES. The phone breakpoint has cleared the flag with top padding since the redesign (it was the only width where the flag hung over the copy); this is that same number, applied from the width where the problem actually starts rather than from 640. 92px puts the pill's top 14px below the flag's point, and its bottom stays 11px clear of the mark's first visible pixel even at the 400px mark size — the tightest case on the page. ABOVE 1240 NOTHING MOVES. The composition Jeremy tuned on 09-16 — the 56px lift that took the sub-line off the console table — is untouched at the widths it was tuned at, and the pill is free there because the masthead's negative margin pays for it out of the mark's transparent canvas. */ @media (max-width: 1240px) { body.koda-page-home .hero{ padding-top: calc(var(--bar-h) + 92px); } } @media (max-width: 1000px) { body.koda-page-home .hero-grid{ grid-template-columns: 1fr; gap: 30px; } body.koda-page-home .hero-sub{ max-width: 46ch; } /* Below 1000px the copy stacks above the booking card and runs down the middle, so the left-weighted veil no longer covers it. Same inverted treatment, turned through ninety degrees: opaque white behind the copy, thinning over the lower half where the photograph can show. */ /* ═══ THE PHOTOGRAPH BECOMES A BAND ═══ Stacked, the hero is the copy AND the whole booking card — well over 2,000px on a phone. `background-size: cover` over a 375 × 2000 box crops a landscape photograph to a vertical sliver: the first mobile pass rendered a bright living room as one indistinct pale wall, and no amount of work on the veil would have fixed it, because there was nothing behind the veil. So on a narrow screen the photograph stops. It is a band across the top, tall enough to hold the copy and no taller, at an aspect a room can actually be seen in — and the veil ends by resolving INTO the page colour, so the band dissolves rather than stopping at a line. The card below sits on paper, which is where a form belongs anyway. */ body.koda-page-home .hero{ --hero-band: 760px; } body.koda-page-home .hero-scrim{ background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.57) 44%, rgba(255,255,255,.30) 62%, rgba(255,255,255,.12) 76%, var(--page) 100%), linear-gradient(180deg, rgba(22,32,46,.12) 0%, rgba(22,32,46,0) 12%); } /* Higher up the frame than the desktop crop: stacked, the copy sits over the top of the photograph rather than beside it, and 68% down a narrow crop is a close-up of a rug with nothing to say. */ body.koda-page-home .hero-photo{ background-position: center 46%; } } @media (max-width: 640px) { /* 92, not the 88 this breakpoint carried before the "Same KODA" pill: it is now the same clearance the 1240 rule above uses, so the pill sits the same 14px below the flag's point on a phone as it does on a laptop. */ body.koda-page-home .hero{ padding: calc(var(--bar-h) + 92px) 0 36px; --hero-band: 700px; } /* THE SPEC STRIP HAS TO WRAP. Three nowrap columns at 375px ran "Every Surface / ONE COMPANY" clean off the right edge — and the labels cannot be shrunk out of trouble, because 12.5px is already at CLAUDE.md §4.1's floor for a page whose audience skews 35+. So it becomes two columns and the third takes a row of its own, which is a layout rather than an overflow. */ body.koda-page-home .hero-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); /* `width: auto` undoes the desktop shrink-wrap. Here the strip deliberately fills the column — two columns of 1fr have nothing to shrink to — and the plate's symmetric feather stays symmetric because the box is symmetric. */ justify-content: stretch; width: auto; max-width: none; row-gap: 13px; } body.koda-page-home .hero-facts > div{ padding: 0 0 0 16px; } body.koda-page-home .hero-facts > div:nth-child(odd){ padding-left: 0; border-left: 0; } body.koda-page-home .hero-facts > div:last-child{ grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(201,164,76,.42); } } /* ═══════════════════════════════════════════════════════════════════════════ THE BOOKING CARD The single most important object on the site: a raised sheet of paper with a navy header band, stepping through what → details → when → you → the price. ═══ EVERY STEP FITS IN ABOUT 480px ═══ That is the whole brief, and it is why the controls below look the way they do. Nine stepper rows became nine tiles three across. Four floor questions became one, with the other three behind the answer that needs them. Twenty-one day tiles in an inner scrollbar became a calendar. None of it is compression for its own sake — each one is also the clearer control — but the height is what decided which clearer control to reach for. ═══════════════════════════════════════════════════════════════════════════ */ /* NOTE ON THE GRAIN. It never goes on a light surface as a background-image — the tile is 50%-opacity noise, and painted straight onto white it is just a grey card. It belongs on a pseudo-element at single-digit opacity (the bar, the ink bands, the navy header below), where it reads as ink on paper. */ body.koda-page-home .book{ background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift-4); border: 1px solid rgba(22,40,63,.1); position: relative; } /* A foil edge along the top, tying the card to the medal in the bar. */ body.koda-page-home .book::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--gold-deep), var(--gold-lit) 45%, var(--gold) 70%, var(--gold-deep)); } body.koda-page-home .book-head{ background: linear-gradient(178deg, var(--ink-lift), var(--ink-mid) 60%, var(--ink)); padding: 17px 26px 15px; color: #fff; position: relative; } body.koda-page-home .book-head::after{ content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .1; mix-blend-mode: overlay; pointer-events: none; } body.koda-page-home .book-head-top{ position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } /* THE SEAL OWNS THIS CORNER, SO THE HEADER STOPS USING IT. The seal is 176px wide and hangs 22px past the card's right edge, which puts its face over the right 154px of this row — and what was under it is "No card needed", the one line on this header that answers the question a stranger has before they will type their phone number into anything. RESERVING THE WIDTH DID NOT WORK, AND THE ARITHMETIC IS WHY. The title is 216px on one line and the note is 134px; with 14px between them that is 364 of the row's 476, leaving 112px to give away, against a mark that needs 154. Padding the row enough to clear the seal wrapped "Book Your Cleaning" onto two lines, which is a worse header than the one being fixed. SO THEY STACK. Title over note, both left, both short enough (216px and 134px) to sit entirely clear of a seal whose face does not begin until 376px across. It costs the header 25px of height and reads better than it did flat — a promise under a title is a promise about the title. Below 1000px the seal is not on this corner at all (see .seal-stamp) and the row goes back to being a row. */ @media (min-width: 1001px){ body.koda-page-home .book-head-top{ flex-direction: column; align-items: flex-start; gap: 4px; } } body.koda-page-home .book-head h2{ color: #fff; font-size: 25px; margin-bottom: 0; } body.koda-page-home .book-head-note{ font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,216,148,.92); white-space: nowrap; } /* ── THE RAIL, NAMED ──────────────────────────────────────────────────────── Four ticks and, under them, which one you are on and what it is called. The ticks alone answered "how far through am I" and nothing else; a step that says "Step 3 of 4 · When" is an itinerary rather than a progress bar, and it is the cheapest possible way to tell somebody the form is nearly over. */ body.koda-page-home .steps{ position: relative; z-index: 1; margin-top: 13px; } /* ── AND THE RAIL HOLDS ITS ROOM TOO (2026-09-16) ───────────────────── The step rail ships `hidden` because how many steps there are is a fact about the form, and home.js is what knows it. That was the other half of the load-time jump described under THE PLACEHOLDER RESERVES THE ROOM below: the card's head was 51px shorter until the catalog arrived, and the body moved from y 216 to y 267 in the same recorded shift. THE ELEMENT ITSELF CANNOT BE MADE TO HOLD THE ROOM. Chrome's UA sheet is `[hidden]:not([hidden="until-found"]) { display: none !important }`, so an author `display: block` loses; tried, measured, `display` came back `none` while the height and visibility beside it applied. Fighting that with `!important` would also mean the rail kept its band on the ESTIMATE step, where home.js hides it again on purpose (stepsEl.hidden = true) and the space would be a hole rather than a reservation. So the head reserves it, and only while the form has not arrived. The skeleton's presence is exactly that condition and it is removed with the rest of the placeholder, so the padding lifts by itself and the rule can never apply to a later hide. 51 = the rail's 38 plus the 13 margin above it. */ body.koda-page-home .book:has(#bookSkeleton) .book-head{ padding-bottom: 66px; } @media (max-width: 560px){ body.koda-page-home .book:has(#bookSkeleton) .book-head{ padding-bottom: 64px; } } body.koda-page-home .steps-bar{ display: flex; gap: 6px; } body.koda-page-home .steps-bar i{ height: 4px; flex: 1; border-radius: 3px; background: rgba(255,255,255,.2); transition: background .35s var(--ease); } body.koda-page-home .steps-bar i.done{ background: rgba(240,216,148,.55); } body.koda-page-home .steps-bar i.now{ background: linear-gradient(90deg, var(--gold-lit), var(--gold)); box-shadow: 0 0 10px rgba(240,216,148,.5); } body.koda-page-home .steps-now{ display: flex; gap: 9px; align-items: baseline; margin-top: 8px; font-size: 13px; letter-spacing: .06em; } body.koda-page-home .steps-now #stepNum{ font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.62); } body.koda-page-home .steps-now #stepName{ font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0; color: #fff; } body.koda-page-home .book-body{ padding: 22px 26px 24px; } @media (max-width: 560px) { body.koda-page-home .book-head{ padding: 15px 18px 13px; } body.koda-page-home .book-body{ padding: 18px 18px 20px; } /* On a phone the bar's gold pennant hangs over the card's top-right corner, which is exactly where this sits — and it is the least load-bearing thing on the card. It goes rather than fighting the flag, and the title gets its one line back. */ body.koda-page-home .book-head-note{ display: none; } } body.koda-page-home .step[hidden]{ display: none; } body.koda-page-home .step-title{ font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 3px; } body.koda-page-home .step-hint{ font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.45; } /* ═══ THE INTAKE GRID (2026-09-10) ═════════════════════════════════════════ Jeremy: *"show them a grid with the first column being the room/upholstery item… the next column is the room name… then the floor… Then add the addon columns (with 'apply to all' style options for the addons as well)."* THE WHOLE POINT IS THAT THE ANSWERS LINE UP. The step it replaces was one card per area, stacked — six rooms was six 300px cards asking the same three questions in the same order, 1,800px of form, and no way to check "is the protector on everything upstairs?" without scrolling and remembering. In columns that question is answered by looking down one. ═══ IT IS A CSS GRID, NOT A , AND THAT IS DELIBERATE ═══ A table cannot restack. Below 860px this becomes one CARD PER LINE — the header disappears, every cell grows a label out of its own `data-label`, and the row reads top to bottom. A
would have needed a second copy of the markup to do that, and two copies of a form is how a form starts lying. ═══ THE COLUMN COUNT IS DATA ═══ `--gcols` is how many add-ons the live catalog is currently offering, written by repaintGrid() from offeredAddons(). The header and every row read the same property, so a fifth add-on appearing in the catalog widens the grid and nothing here needs editing. Hardcoding four columns is how a form and its server drift apart. */ body.koda-page-home .grid{ --gcols: 4; margin: 0 0 22px; } body.koda-page-home .ghead, body.koda-page-home .grow{ display: grid; /* what · area · floor · N add-ons · the remove button */ grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.25fr) minmax(120px, 1fr) repeat(var(--gcols), minmax(84px, 84px)) 34px; gap: 8px; align-items: center; } /* AND WITHOUT THE FIRST ONE. "What it is" is a question only an upholstery row asks, so a grid of carpet rooms drops the column entirely and gives the width back to the two pickers that are doing the work — see needsItemCol() in home.js, which sets this class and is the single source of the column count for both the header and the rows. */ body.koda-page-home .grid.no-item .ghead, body.koda-page-home .grid.no-item .grow{ grid-template-columns: minmax(170px, 1.3fr) minmax(130px, 1fr) repeat(var(--gcols), minmax(84px, 84px)) 34px; } body.koda-page-home .ghead{ padding: 0 10px 9px; border-bottom: 1.5px solid var(--rule-firm); margin-bottom: 6px; } /* 13px is a COLUMN HEAD, not body copy — §4.1's 14px floor governs secondary text and this is a label whose content is the 16px control under it. It is full ink rather than muted, which is where the readable weight comes from. */ body.koda-page-home .ghead .gcell{ font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } body.koda-page-home .ghead .gc-add{ align-items: center; text-align: center; } body.koda-page-home .ghead-lbl{ line-height: 1.25; } /* ── APPLY TO ALL ── Sits under its column's name because a control that says "all" has to be at the top of the thing it is all of. Three states to READ (none / some / every) and two to WRITE — pressing it always either fills the column or empties it, so the next state is never a guess. */ body.koda-page-home .gall{ /* 13px, not the 11.5px the pennant's LABELS use: this one is a control a customer presses, and CLAUDE.md 4.1 is a rule about a 35+ audience finding things. It is still the smallest interactive thing on the step, which is right for a column head, and its hit area is the whole pill. */ font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; cursor: pointer; color: var(--steel-deep); background: var(--paper); border: 1px solid var(--rule-firm); transition: background .16s, color .16s, border-color .16s; } body.koda-page-home .gall:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); } body.koda-page-home .gall.part{ border-color: var(--steel); color: var(--ink); background: var(--steel-soft); } body.koda-page-home .gall.on{ background: var(--ink); border-color: var(--ink); color: #fff; } body.koda-page-home .gall:disabled{ opacity: .4; cursor: not-allowed; } body.koda-page-home .grow{ padding: 9px 10px; border-radius: var(--radius); border: 1px solid transparent; transition: background .18s, border-color .18s; } /* Zebra by position, not by state: the eye tracks a long row across a wide grid on the stripe, and a stripe that appears when a row is answered would make the table flicker as it is filled in. */ body.koda-page-home .grow:nth-child(odd){ background: rgba(30,37,48,.028); } body.koda-page-home .grow:hover{ background: rgba(96,120,152,.09); } /* THE ONE PLACE A ROW IS COLOURED. Not when it is finished — most rows are finished most of the time, and a grid of green rows says nothing. Only when Continue has been pressed with something missing, and only on the row that is missing it. */ body.koda-page-home .grow.asking{ border-color: var(--act); background: rgba(139,49,42,.06); } /* THE SPARE ROW IS AN INVITATION, NOT AN UNFINISHED LINE. It is the empty row the grid always keeps at the bottom (see THE SPARE ROW in home.js): the customer did not put it there and is never asked to finish it, so it must not look like the rows that are theirs. A dashed hairline and a little less ink is the whole treatment — enough to read as "next one goes here", not enough to read as a row waiting on an answer. It picks up full weight the moment anything is chosen in it, because at that point it stops being spare. */ body.koda-page-home .grow.spare{ border: 1px dashed var(--rule-firm); background: transparent; } body.koda-page-home .grow.spare:hover{ background: rgba(96,120,152,.06); } body.koda-page-home .grow.spare .gsel{ color: var(--muted); } body.koda-page-home .gcell{ min-width: 0; } body.koda-page-home .gc-add{ display: flex; justify-content: center; } body.koda-page-home .gc-kill{ display: flex; justify-content: flex-end; } /* ── THE PICKERS ── A under 16px makes iOS zoom the whole page on focus, and it does not zoom back out. */ body.koda-page-home .svcjump-sel{ appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink); background-color: var(--paper); background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 19px center, right 13px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; border: 1.5px solid var(--rule-firm); border-radius: 999px; padding: 9px 40px 9px 18px; min-height: 44px; cursor: pointer; box-shadow: var(--lift-1), inset 0 1px 0 #fff; transition: border-color .16s, box-shadow .16s; max-width: 100%; } body.koda-page-home .svcjump-sel:hover{ border-color: var(--ink); box-shadow: var(--lift-2); } body.koda-page-home .svcjump-sel:focus-visible{ outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(96,120,152,.28); } /* The drop-down list itself is drawn by the OS, and on a dark system theme it inherits white-on-white unless the options are told what they are. */ body.koda-page-home .svcjump-sel option{ color: var(--ink); background: #fff; } body.koda-page-home .svcrail-btn{ display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; /* 15px is §4.1's floor for a button label, and that is what this is. */ font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule-firm); border-radius: 999px; padding: 8px 16px 8px 13px; min-height: 40px; cursor: pointer; box-shadow: var(--lift-1), inset 0 1px 0 #fff; transition: border-color .16s, box-shadow .16s, background .16s; } body.koda-page-home .svcrail-btn:hover{ border-color: var(--ink); box-shadow: var(--lift-2); } body.koda-page-home .svcrail-btn:focus-visible{ outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(96,120,152,.28); } /* Two bars or a triangle, drawn in borders so the control carries no image and nothing to load. The state is on aria-pressed; this follows it. */ body.koda-page-home .svcrail-btn-ico{ width: 13px; height: 13px; flex-shrink: 0; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); } body.koda-page-home .svcrail-btn[aria-pressed="true"] .svcrail-btn-ico{ width: 0; height: 0; border-left: 11px solid var(--ink); border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } body.koda-page-home .svcard{ width: 306px; flex-shrink: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff 0%, var(--page-deep) 100%); /* THE DARKER EDGE Jeremy asked for. --rule-firm is .26 of near-black against the old .14 — an edge rather than a divider — and the top rule is the "colour in the pills": a steel-to-gilt bar that is the only thing on the card doing anything decorative. */ border: 1px solid var(--rule-firm); border-radius: var(--radius); box-shadow: var(--lift-2); padding: 22px 22px 18px; position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } body.koda-page-home .svcard::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ink) 0%, var(--steel) 55%, var(--gold) 100%); } body.koda-page-home a.svcard:hover{ transform: translateY(-4px); box-shadow: var(--lift-4); border-color: var(--ink); } /* Flood & mold is the one that is not a booking, and it is allowed to say so in colour. A left edge, not red text — CLAUDE.md 3.1 rule 2 is a portal rule, but the reasoning ("colour is carried by fills and edges, never by the words") is just as true out here. */ body.koda-page-home .svcard-urgent::before{ background: linear-gradient(90deg, #8b1f18 0%, #c8382c 60%, var(--gold) 100%); } /* The same struck medallion as the problem cards, at tile size. It is the darkest thing on the card, which is what a white card standing on a veiled photograph needs if it is going to have a focal point at all. */ body.koda-page-home .svcard-ico{ width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; margin-bottom: 13px; background: linear-gradient(158deg, var(--ink-lift) 0%, var(--ink-mid) 48%, var(--ink) 100%); border: 1px solid rgba(201,164,76,.55); color: var(--gold-lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 14px -7px rgba(13,26,43,.55); } /* UNDERLINED, BECAUSE THE CARD IS A DOOR (2026-09-16). Jeremy: *"Underline the service names."* Seventeen cards go past with a heading, a line, two ticks and a "See what's involved" at the foot, and the only thing saying the whole tile is clickable was that last line — 15px, at the bottom, in steel. An underlined name is the oldest signal on the web for "this opens something", and it is on the one word somebody is actually scanning for. OFFSET AND THICKNESS ARE DECLARED, not left to the font. At 21px display weight the browser default rides into the descenders of a 'y' or a 'p' (Upholstery has both); 4px of offset clears them, and 2px of stroke is what keeps the rule visible at the 19px phone size. */ body.koda-page-home .svcard h3{ font-size: 21px; margin-bottom: 5px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--gold); } body.koda-page-home a.svcard:hover h3{ text-decoration-color: var(--ink); } body.koda-page-home .svcard-lede{ font-size: 16px; line-height: 1.45; color: var(--ink-soft); margin-bottom: 13px; } body.koda-page-home .svcard ul{ list-style: none; display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--rule-soft); } body.koda-page-home .svcard li{ display: flex; gap: 9px; align-items: flex-start; /* CLAUDE.md 4.1: 16px is the web BODY floor, and these bullets are the card's content rather than a caption on it. The panel these cards replaced set its bullets at 16px for the same reason. */ font-size: 16px; line-height: 1.45; color: var(--text); } body.koda-page-home .svcard li svg{ flex-shrink: 0; margin-top: 3px; color: var(--steel-deep); } body.koda-page-home .svcard-go{ display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; /* 15px is 4.1's floor for a navigation or button label, and that is what this is — the card is a link and this line is what says so. */ font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--steel-deep); } body.koda-page-home a.svcard:hover .svcard-go{ color: var(--ink); } body.koda-page-home .svcard-go svg{ transition: transform .2s var(--ease); } body.koda-page-home a.svcard:hover .svcard-go svg{ transform: translateX(3px); } /* The three services with no page of their own say what to do instead, rather than pretending to be a link that goes nowhere. */ body.koda-page-home .svcard-go-call{ color: var(--act); } body.koda-page-home .svcrail-foot{ text-align: center; font-size: 17px; color: var(--ink-soft); margin-top: 0; } body.koda-page-home .svcrail-foot a{ color: var(--steel-deep); font-weight: 700; text-decoration: underline; } @media (max-width: 640px){ body.koda-page-home .svcard{ width: 268px; padding: 18px 18px 15px; } body.koda-page-home .svcard h3{ font-size: 19px; } } /* ═══ THE SERVICE SHEET ══════════════════════════════════════════ The panel a service card opens instead of a page. See the long note in index.html for why it exists; this is how it is built. TWO COLUMNS, AND THE PHOTOGRAPH IS THE SECOND ONE. The reference Jeremy sent is the Rug Types block from /rug-cleaning: type on the left, a single photograph on the right, floating on the page under a deep soft shadow. That layout is doing something specific — the picture is not decoration beside the text, it is the ANSWER to the text, and putting it in its own column at full height is what makes the two read as one statement. THE DEPTH IS THE PAGE'S OWN. --lift-3 under the frame, the same shadow the booking card carries, so the photograph sits on the sheet the way the card sits on the hero. Nothing bespoke: a new shadow here would be a fourth depth on a page that has three. FIVE TICKS IN TWO COLUMNS, exactly like the reference. A five-item list in one column is a paragraph wearing bullets; in two it is a SPEC, which is what somebody deciding whether to call actually wants to read. ══════════════════════════════════════════════════════════════════════ */ body.koda-page-home .svcsheet-scrim{ position: fixed; inset: 0; z-index: 900; background: rgba(22,32,46,.58); backdrop-filter: blur(4px); opacity: 0; transition: opacity .28s var(--ease); } body.koda-page-home .svcsheet-scrim.on{ opacity: 1; } body.koda-page-home .svcsheet{ position: fixed; inset: 0; z-index: 905; display: grid; place-items: center; padding: 24px; overflow-y: auto; } body.koda-page-home .svcsheet-card{ position: relative; width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); gap: 40px; align-items: center; padding: 40px 40px 38px; background: #fff; border-radius: var(--radius); /* The gilt edge along the top is the booking card's; it is what says this object belongs to KODA rather than to the browser. */ border-top: 3px solid var(--gold); box-shadow: 0 4px 10px rgba(16,24,36,.10), 0 40px 90px -24px rgba(16,24,36,.42); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .3s var(--ease), transform .3s var(--ease); } body.koda-page-home .svcsheet.on .svcsheet-card{ opacity: 1; transform: none; } body.koda-page-home .svcsheet-x{ position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } body.koda-page-home .svcsheet-x:hover{ background: var(--ink); color: #fff; border-color: var(--ink); } body.koda-page-home .svcsheet-x:focus-visible{ outline: 3px solid var(--steel); outline-offset: 2px; } body.koda-page-home .svcsheet-say h2{ font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin: 8px 0 14px; color: var(--ink); letter-spacing: -.015em; } /* TWO SENTENCES. That is the brief and it is also the right length: it is what fits above a five-item list without the list becoming the second thing you read rather than the point. */ body.koda-page-home .svcsheet-lede{ font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch; margin-bottom: 22px; } body.koda-page-home .svcsheet-list{ list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 26px; margin-bottom: 26px; } @media (max-width: 620px){ body.koda-page-home .svcsheet-list{ grid-template-columns: minmax(0, 1fr); } } body.koda-page-home .svcsheet-list li{ position: relative; padding-left: 20px; /* 16px, which is CLAUDE.md §4.1's floor for body copy on the web and not the 14px floor for a caption. These five lines are the substance of the sheet, not a note under it, and the audience this page is written for is 35+. */ font-size: 16px; line-height: 1.5; color: var(--text); } /* A LOZENGE, NOT A DISC. The reference marks each line with a small rotated square in the brand burgundy — a diamond reads as a mark somebody chose and a dot reads as the browser's default, and at this size that difference is most of what makes a list look designed. */ body.koda-page-home .svcsheet-list li::before{ content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--act); } body.koda-page-home .svcsheet-act{ display: flex; flex-wrap: wrap; gap: 12px; } body.koda-page-home .svcsheet-more{ margin-top: 16px; font-size: 14px; } body.koda-page-home .svcsheet-more a{ color: var(--steel-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } body.koda-page-home .svcsheet-more a:hover{ color: var(--ink); } body.koda-page-home .svcsheet-shot{ margin: 0; } body.koda-page-home .svcsheet-shot img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--shot-pos, center center); border-radius: var(--radius); box-shadow: var(--lift-3); } /* ── AND ONE OF THEM IS A FILM ──────────────────────────── Area Rugs shows a video where the other sixteen show a photograph, so this slot has to sit in the same hole the does — same corner, same lift — at the one aspect a video is allowed to have. NOT the photograph's 4:5: a 16:9 film letterboxed into a portrait frame is two black bars and a stamp, and there is no crop of a moving picture that fixes it. The column is narrower than the photo would have been tall, which is the trade. */ body.koda-page-home .svcsheet-vid{ width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift-3); } body.koda-page-home .svcsheet-vid iframe{ display: block; width: 100%; height: 100%; border: 0; } /* Stacked, the photograph goes ABOVE the copy and turns landscape — a 4:5 portrait at full width would push the five ticks off a phone screen before anybody read one. */ @media (max-width: 860px){ body.koda-page-home .svcsheet{ padding: 16px; align-items: start; } body.koda-page-home .svcsheet-card{ grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 22px 26px; margin: 12px 0; } body.koda-page-home .svcsheet-shot{ order: -1; } body.koda-page-home .svcsheet-shot img{ aspect-ratio: 16 / 9; } body.koda-page-home .svcsheet-say h2{ font-size: 26px; } } @media (prefers-reduced-motion: reduce){ body.koda-page-home .svcsheet-scrim, body.koda-page-home .svcsheet-card{ transition: none; } body.koda-page-home .svcsheet-card{ transform: none; } } /* ═══ THE FILM CARD IS A WIDER CARD (2026-09-16) ════════════════════════════ Jeremy: *"Rug 'what you get' page — make the video roughly 2x larger (may need to increase that window size as needed)."* THE 370px COLUMN WAS SIZED FOR A PORTRAIT PLATE. A 4:5 photograph in it is 463px tall and reads as the second half of the sheet; the same column given a 16:9 film is 208px tall, which is a thumbnail sitting in the corner of a 980px card. The note above already records the trade ("the column is narrower than the photo would have been tall") — this is Jeremy taking the other side of it, and taking the window with him. SO THE ONE SERVICE THAT SHOWS A FILM GETS ITS OWN GEOMETRY. The card goes to 1320px and the film column to 740px, which is 2.0x the width it had and 4.0x the area. `clamp()` rather than a flat 740 because the card is `min(1320px, 100%)` and a fixed column on a card that has stopped being 1320 eats the copy instead: the 50vw middle term keeps the film at about half the screen all the way down, and the 370px floor means this can never come out SMALLER than the photograph column it replaced. At 1440 the film is 740 x 416; at 1280 it is 640; at 1000 it is the 500 it never was. THE TICKS GO TO ONE COLUMN. 460px of copy is not two columns of 16px list — §4.1 does not let the type shrink to make it fit, so the list changes shape instead. STACKED AT 1000, NOT 860. Below 1000 the copy column is the thing running out of room, and a film above the words at the full width of the card is bigger again than either arrangement of the two-column version. The generic stack rules further up stop at `.svcsheet-card` (0,2,1) and these carry `.has-film` as well (0,3,1), so they win wherever they overlap, whichever order they are read in. */ @media (min-width: 1001px){ body.koda-page-home .svcsheet-card.has-film{ width: min(1320px, 100%); grid-template-columns: minmax(0, 1fr) clamp(370px, 50vw, 740px); } body.koda-page-home .svcsheet-card.has-film .svcsheet-list{ grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px){ /* `align-items: start` on the sheet, because a full-width film plus five ticks is taller than a laptop viewport and a centred card that overflows is a card with its own heading scrolled off the top. */ body.koda-page-home .svcsheet:has(.svcsheet-card.has-film){ align-items: start; } body.koda-page-home .svcsheet-card.has-film{ width: min(1320px, 100%); grid-template-columns: minmax(0, 1fr); gap: 24px; } body.koda-page-home .svcsheet-card.has-film .svcsheet-shot{ order: -1; } } /* ── Trust tiles ────────────────────────────────────────────────────────── */ /* FIVE TILES, AND FIVE IS AWKWARD — same problem the five problem cards have, same answer. `auto-fit` over a 1240px wrap gave four columns and stranded KODA4Kids alone on a second row, and at 238px "Truck-Mount" broke across two lines while every other value sat on one. A six-column grid with each tile spanning two gives three per row, ~390px each, and lets the fourth start at column 2 so the last pair centres under the three above it. */ body.koda-page-home .trust{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } body.koda-page-home .tile{ grid-column: span 2; } body.koda-page-home .tile:nth-child(4){ grid-column: 2 / span 2; } @media (max-width: 1060px){ body.koda-page-home .trust{ grid-template-columns: repeat(4, minmax(0, 1fr)); } body.koda-page-home .tile:nth-child(4){ grid-column: span 2; } body.koda-page-home .tile:nth-child(5){ grid-column: 2 / span 2; } } @media (max-width: 640px){ body.koda-page-home .trust{ grid-template-columns: minmax(0, 1fr); } body.koda-page-home .tile, body.koda-page-home .tile:nth-child(4), body.koda-page-home .tile:nth-child(5){ grid-column: 1 / -1; } } /* THE TRUST TILES. Jeremy: "redesign the tile text/layout/fonts to be standardized (they have different sized fonts), to be visually appealing and engaging. Again, these are flat text on the tile. Very dull. No gold." THE TYPE IS NOW ONE SIZE. The old tiles auto-shrank their headline so that "1,100+", "5.0", "Family" and "KODA4Kids" could each fill the width — four different sizes across four cards sitting in a row, which is exactly the thing the eye reads as unfinished. Every value is now 34px, and the two long words are allowed to be long. Consistency across the row beats each card being individually optimal. THE STRUCTURE IS A LEDGER LINE, not a stack of centred text: the medallion and the value share the top row, the label sits under a rule, and the sentence closes it. Left-aligned, because centred text in four columns has no shared edge for the eye to run down. THE SURFACE IS LIT. A raised panel on the night band — a light top edge, a gradient that falls away downward, and a steel bar down the left that grows on hover. No gold anywhere: gold is the flag's, and spending it here would cost the flag its job. */ body.koda-page-home .tile{ position: relative; overflow: hidden; padding: 22px 22px 20px 24px; background: linear-gradient(180deg, rgba(255,255,255,.115) 0%, rgba(255,255,255,.035) 100%); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 18px 34px -20px rgba(0,0,0,.7); transition: transform .26s var(--ease), background .26s var(--ease); } body.koda-page-home .tile::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(.34); transform-origin: top; transition: transform .32s var(--ease); } body.koda-page-home .tile:hover{ transform: translateY(-4px); background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.06) 100%); } body.koda-page-home .tile:hover::before{ transform: scaleY(1); } /* The top row: medallion and value on one baseline. */ body.koda-page-home .tile-top{ display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } body.koda-page-home .tile-ico{ width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(201,164,76,.12); border: 1px solid rgba(201,164,76,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); color: var(--gold-lit); } /* THE GOLD LINE IS THE HEADING (2026-09-11). It used to be a

with an uppercase 13px

label under it, which meant the loudest thing in the tile was not the heading and the heading was not readable at arm's length. It is an

now and it carries the claim — see the note in index.html — so the tile is two tiers instead of three: the claim, then the evidence. `.tile .tile-num`, not `.tile-num`: the rules below are element-scoped and would otherwise outrank a bare class, which is how the value silently shrank to 15.5px the last time. Specificity beat intent, which is the usual way a design note quietly stops being true. */ body.koda-page-home .tile .tile-num{ font-family: var(--font-display); font-weight: 800; line-height: 1.08; /* A SIZE THAT HOLDS A PHRASE. 34px was set for "5.0" and "1,100+"; the line now says "1,200+ Reviews" and "Family Owned", which is three times the glyphs in a column 225px wide. The clamp keeps it as large as the widest of them can be without breaking mid-word. */ font-size: clamp(24px, 2vw, 30px); /* GILT ON NIGHT. #c9a44c on #16202e measures 6.4:1, so the line that matters most in this section is also the warmest thing in it. Gilt is barred from small text on WHITE (2.37:1), never from display type on navy. */ color: var(--gold-lit); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } /* The evidence, under the gilt hairline the label used to carry. */ body.koda-page-home .tile p{ font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.55; padding-top: 13px; border-top: 1px solid rgba(201,164,76,.28); } /* ── THE SHADE ───────────────────────────────────────── See the long note in index.html. The family tile used to FLIP; all five turn now, and the move is a shade drawn up from the foot of the tile. WHY THE FLIP HAD TO GO, BEYOND BEING ASKED. A flip is a 3D rotation, so it needs `perspective`, `preserve-3d` and `backface-visibility`, and all three are load-bearing — lose any one and the card squashes or shows both faces at ninety degrees. It also cannot hold an