/* ══════════════════════════════════════════════════════════════════════════════
   Escargo — /find customer marketplace homepage. PAGE-SCOPED LAYOUT ONLY.
   Every component comes from the DS: os-ui.css (.os-* + --os-* tokens) and the
   site chrome (.eo-*). This file only adds the hero band + search-card layout +
   the enlarged category-chip tap target that os-ui.css does not provide.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO: marketplace front door ─────────────────────────────────────────────
   Structure benchmarked against best-in-class booking marketplaces (compact bold
   H1 + ONE segmented search bar on a light canvas), rendered entirely in Escargo's
   own identity — our tokens, our copy, our chrome. No third-party colour, type,
   imagery or wording. No webfont/CDN (estate CSP bans both): motion is CSS-only
   and honours prefers-reduced-motion. ─────────────────────────────────────── */
.find-hero{
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(128,191,32,.14), transparent 62%),
    radial-gradient(900px 420px at 92% 4%, rgba(7,59,36,.10), transparent 60%),
    var(--os-white);
  color:var(--os-ink);
  padding:56px 0 40px;
  position:relative;
  overflow:hidden;
}
.find-hero .os-kicker{color:var(--os-forest)}
/* CENTRED hero composition (founder master correction 2026-08-27): the
   marketplace moment is a balanced consumer front door, not a left-margin
   utility block. Headline, subtitle, search bar, roadside row and trust strip
   all centre; the form's fields keep their own left-aligned labels. */
.find-head{max-width:720px;margin:0 auto;text-align:center}
.find-sub{margin-left:auto;margin-right:auto}
.find-searchcard{margin-left:auto;margin-right:auto}
.find-roadside-row{justify-content:center}
.find-trust{justify-content:center}
/* NB specificity: the estate's editorial style is light headings (`.eo main h1`
   = 300, specificity 0,1,2). The marketplace front door is a different register —
   a bold, scannable promise — so this rule is scoped one level deeper (0,2,1) to
   win deliberately rather than by accident. Site-wide heading style is untouched. */
.find-hero .find-head h1{
  color:var(--os-ink);
  font-size:clamp(2rem,4.8vw,2.9rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:10px 0 10px;
}
.find-sub{color:var(--os-text);font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.5;max-width:54ch;margin:0}

/* ── the one-row segmented search bar ─────────────────────────────────────────
   Mobile: fields stack full-width (thumb-friendly). ≥860px: a single pill row with
   hairline dividers and the action inside the bar. */
.find-searchcard{
  max-width:980px;margin-top:26px;padding:10px;
  border-radius:var(--os-r-pill);
  box-shadow:0 2px 6px rgba(7,59,36,.08), 0 18px 44px rgba(7,59,36,.13);
  border:1px solid var(--os-line);
  background:var(--os-white);
}
@media (max-width:859px){ .find-searchcard{border-radius:var(--os-r-lg);padding:16px} }

.find-grid{display:grid;gap:10px}
.find-field{margin:0}
@media (min-width:860px){
  .find-grid{grid-template-columns:1.15fr 1fr 1fr;gap:0;align-items:stretch}
  .find-field{position:relative;padding:6px 18px}
  .find-field + .find-field::before{
    content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--os-line);
  }
  .find-field--full{grid-column:auto}
  .find-searchcard .os-input,
  .find-searchcard .os-select{border:0;background:transparent;padding:6px 0;min-height:38px;font-size:.98rem}
  .find-searchcard .os-input:focus,
  .find-searchcard .os-select:focus{outline:none}
  .find-searchcard .os-label{
    font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--os-muted);margin-bottom:2px;
  }
}

.find-geo{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.find-geo-btn{padding:9px 14px;font-size:.85rem}      /* keeps os-btn min-height:44px (tap target) */
.find-geo-note{font-size:.82rem;color:var(--os-muted);margin:0;flex:1 1 180px}
@media (min-width:860px){ .find-geo{margin-top:4px} .find-geo-note{flex-basis:100%} }

.find-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.find-actions .os-btn{flex:1 1 200px}
/* ── phone hero density (visual programme 2026-09-02): the question + the form
   reach the first scroll — same fields, same honesty, tighter rhythm ── */
@media (max-width:560px){
  .find-hero{padding:32px 0 26px}
  .find-hero .find-head h1{font-size:1.78rem}
  .find-searchcard{margin-top:18px}
  .find-grid{grid-template-columns:1fr 1fr;gap:10px}
  .find-grid .find-field:nth-child(1),.find-grid .find-field:nth-child(2){grid-column:1/-1}
  .find-grid .find-field--full{grid-column:auto}
  .find-actions{margin-top:14px;gap:8px}
  .find-actions .os-btn{flex:1 1 140px;padding-left:10px;padding-right:10px}
}
@media (min-width:860px){
  .find-searchcard form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
  .find-actions{margin-top:0;flex-wrap:nowrap;gap:8px}
  .find-actions .os-btn{flex:0 0 auto;border-radius:var(--os-r-pill);padding:12px 24px}
}

.find-roadside-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
.find-roadside-btn{flex:0 0 auto;border-radius:var(--os-r-pill)}
.find-roadside-note{font-size:.86rem;color:var(--os-muted);margin:0;flex:1 1 200px}

/* 2026-09-02: even at 320 the two intents share one row — smaller type/padding
   beats a second row of full-width buttons (phone hero density) */
@media (max-width:420px){ .find-actions .os-btn{flex:1 1 40%;font-size:.86rem;padding:11px 6px;gap:6px} }

/* trust strip — real, non-numeric assurances only (never invented counts) */
.find-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;padding:0;list-style:none}
.find-trust li{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--os-text)}
.find-trust svg{width:16px;height:16px;stroke:var(--os-lime-press);flex:0 0 auto}

/* entrance: quiet, CSS-only */
@keyframes findRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.find-head{animation:findRise .5s ease both}
.find-searchcard{animation:findRise .5s ease .08s both}
.find-trust{animation:findRise .5s ease .16s both}
@media (prefers-reduced-motion:reduce){ .find-head,.find-searchcard,.find-trust{animation:none} }

/* ── category chips band (pale) ─────────────────────────────────────────────── */
.find-cats{background:var(--os-pale);padding:44px 0 60px}
.find-cats h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 6px}
.find-cats .find-cats-sub{color:var(--os-muted);max-width:58ch;margin:0 0 20px}
.find-chips{display:flex;flex-wrap:wrap;gap:10px}

/* enlarge .os-chip into a comfortable >=44px tappable category link */
.find-chip{min-height:44px;padding:10px 16px;font-size:.9rem;font-weight:600;
  background:var(--os-white);color:var(--os-ink);border-color:var(--os-line);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.find-chip:hover{border-color:var(--os-lime);background:#f2fbe3}

/* ── verified providers (data-driven cards; Fresha-structured, real data only) ─ */
.find-featured{padding:48px 0 8px}
.find-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.find-featured h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 0}
.find-sec-link{font-weight:700;color:var(--os-forest);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.find-sec-link:hover{color:var(--os-lime-press)}
.find-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.find-cards--msg{display:block}
.find-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.find-card:hover{box-shadow:var(--os-shadow-hover);transform:translateY(-2px)}
.find-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.find-card-name{font-weight:800;color:var(--os-ink);font-size:1.02rem;line-height:1.2}
.find-card-meta{font-size:.86rem;color:var(--os-muted)}
.find-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.find-rate{font-weight:700;color:var(--os-ink);font-size:.9rem}
.find-rate-c{color:var(--os-muted);font-weight:600}
.find-rate-new{font-size:.78rem;font-weight:700;color:var(--os-forest);background:#e9f7dd;border:1px solid #cdebae;border-radius:999px;padding:2px 9px}
.find-card-go{font-weight:700;color:var(--os-forest);font-size:.86rem}
.find-skelcard{min-height:118px}
.find-empty{text-align:center}
.find-empty-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* ── how it works (flywheel) ────────────────────────────────────────────────── */
.find-how{padding:56px 0}
.find-how h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 24px;max-width:24ch}
.find-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.find-steps li{padding-top:20px}
.find-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--os-lime);color:var(--os-forest-deep);font-weight:800;font-size:1rem;margin-bottom:8px}
.find-steps h3{margin:0 0 6px;color:var(--os-ink);font-size:1.05rem}
.find-steps p{margin:0;color:var(--os-text);font-size:.92rem;line-height:1.5}

/* ── for businesses band ────────────────────────────────────────────────────── */
.find-biz{padding:8px 0 60px}
.find-bizcard{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px}
.find-bizcard-copy{max-width:60ch}
.find-bizcard .os-kicker{color:var(--os-lime)}
.find-bizcard h2{color:#fff;font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;margin:8px 0 8px}
.find-bizcard p{color:var(--os-d-text);margin:0;line-height:1.55}
.find-bizcard-cta{display:flex;flex-wrap:wrap;gap:12px}
.find-biz-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.find-biz-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ═══ Work customer visual system (2026-08-24) ═══════════════════════════════
   Source of truth: escargo/customer-visual-system-reference.html. The hero
   becomes the reference's cinematic ink treatment: storyboard scene behind an
   ink scrim, search card untouched (it is already a white card, so contrast
   IMPROVES on the dark ground). Scoped under .find-hero--visual so any surface
   still using the light hero is unaffected. */
.find-hero--visual{background:#14201d;color:#fff}
.find-hero--visual .find-sub{color:#c1cbc4}
.find-hero--visual .find-head h1{color:#fff}
.find-hero--visual .os-kicker{color:#d9ff4d}
.find-hero-scene{position:absolute;inset:0;overflow:hidden}
.find-hero-scene img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;opacity:.42;filter:saturate(.9)}
.find-hero--visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,32,29,.97) 8%,rgba(20,32,29,.78) 46%,rgba(20,32,29,.25));pointer-events:none}
.find-hero--visual .wrap{position:relative;z-index:1}
/* journey scenes */
.find-steps--visual li{padding-top:0;overflow:hidden}
.find-scene{display:block;height:118px;margin:0 0 4px}
.find-scene img{width:100%;height:118px;object-fit:cover;display:block}
.find-steps--visual .find-step-n{margin:14px 0 0 16px}
.find-steps--visual h3,.find-steps--visual p{padding-left:16px;padding-right:16px}
.find-steps--visual p{padding-bottom:14px}
@media(max-width:760px){
  .find-steps--visual{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}
  .find-steps--visual li{min-width:225px;scroll-snap-align:start}
  .find-hero-scene img{object-position:78% 35%}
}
@media(prefers-reduced-motion:reduce){.find-steps--visual{scroll-behavior:auto}}
/* Meets band: graphite world inside the customer page (Work: Meets is a
   DIFFERENT visual world — graphite/lime/restrained red, condensed display) */
.ec-sec--meets{background:#0d1112;color:#fff;padding-top:52px;padding-bottom:52px}
.ec-sec--meets .os-kicker{color:#ff633f;letter-spacing:.14em}
/* specificity: the page's own `.ec-sec …` heading rules outrank a single class
   (measured: color stayed rgb(35,35,35) and Inter). Match the section class
   TWICE so the motorsport identity wins deliberately, not via !important. */
.ec-sec.ec-sec--meets h2,.ec-sec.ec-sec--meets .ec-sec-hd h2{color:#fff;font-family:'Arial Narrow',Impact,sans-serif;font-weight:900;font-size:clamp(2rem,6vw,3.4rem);line-height:.85;letter-spacing:.01em;text-transform:uppercase}
.ec-sec.ec-sec--meets p{color:#b9c4bd}
.ec-sec--meets .ec-meets-card{box-shadow:14px 14px 0 rgba(217,255,77,.12)}
/* business product mock (composition of real product surfaces, not a screenshot) */
.find-bizmock{background:#101b18;border:1px solid #33443e;border-radius:12px;padding:12px;margin:18px 0 6px;box-shadow:12px 12px 0 rgba(223,243,255,.10)}
.find-bizmock-bar{display:flex;gap:5px;margin-bottom:10px}
.find-bizmock-bar span{width:8px;height:8px;border-radius:50%;background:#33443e}
.find-bizmock-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.find-bizmock-panel{border:1px solid #33443e;border-radius:8px;padding:12px;min-height:74px}
.find-bizmock-panel--wide{grid-row:span 2}
.find-bizmock-panel b{display:block;color:#e9f1ec;font-size:.82rem}
.find-bizmock-panel i{display:block;color:#7d8d86;font-size:.7rem;font-style:normal;margin-top:2px}
.find-bizmock-rows{display:block;margin-top:10px}
.find-bizmock-rows em{display:block;height:7px;border-radius:4px;background:#22312c;margin:6px 0}
.find-bizmock-chip{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:6px;background:#d9ff4d;color:#14201d;font-size:.68rem;font-weight:800}
@media(max-width:760px){.find-bizmock-grid{grid-template-columns:1fr}.find-bizmock-panel--wide{grid-row:auto}}
/* driver app promotion (Work reference §app) */
.find-app{background:linear-gradient(130deg,#eef9ff,#f4f7e9);padding:56px 0}
.find-app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.find-app h2{font-size:clamp(1.4rem,3.6vw,1.9rem);letter-spacing:-.02em;margin:8px 0 12px;color:var(--os-ink)}
.find-app .os-btn{margin-top:14px}
.find-phone{border:8px solid #17201e;border-radius:28px;padding:20px;max-width:265px;justify-self:center;background:#fff;box-shadow:14px 14px 0 rgba(20,32,29,.08)}
.find-phone b{font-size:.9rem;color:var(--os-ink)}
.find-phone p{font-size:.76rem;color:var(--os-muted,#69736f);margin:4px 0 0}
.find-phone hr{border:0;border-top:1px solid #e2e8e2;margin:12px 0}
@media(max-width:760px){.find-app-grid{grid-template-columns:1fr}.find-phone{justify-self:start}}
/* On the dark visual hero the pill-radius search blob reads as a floating egg —
   square it to the DS large radius and lift the scene slightly so the story is
   perceptible under the scrim. Light-hero pages keep the original pill. */
.find-hero--visual .find-searchcard{border-radius:var(--os-r-lg);background:#fff}
.find-hero--visual .find-hero-scene img{opacity:.5}
/* trust strip + roadside row must stay legible on the dark visual hero */
.find-hero--visual .find-trust li{color:#c7d1ca}
.find-hero--visual .find-trust svg{stroke:#d9ff4d}
.find-hero--visual .find-roadside-row{color:#c7d1ca}
.find-hero--visual .find-roadside-row .find-roadside-note{color:#c7d1ca}
/* the dark roadside button vanishes on the dark hero — give it a visible edge */
.find-hero--visual .find-roadside-btn{background:#0d1512;border:1px solid #3d4f47;color:#fff}
/* five journey steps stay ONE row on desktop (auto-fit wrapped 4+1, stranding
   History alone beside a three-card void); tablet gets 2/3 wrap gracefully */
@media(min-width:1100px){.find-steps--visual{grid-template-columns:repeat(5,1fr)}}
@media(min-width:761px) and (max-width:1099px){.find-steps--visual{grid-template-columns:repeat(3,1fr)}}

/* ═══ HOMEPAGE CONTINUITY (2026-08-25, founder ruling: the page must read as
   ONE evolving experience, not stacked modules). Every treatment here is a
   TRANSITION between existing sections — no section identity changes. ═══ */

/* §5 hero → journey: the journey emerges from the hero instead of a hard cut.
   The band opens in the hero's ink, passes through Escargo's deep green and
   settles on the paper tone the discovery block uses. */
.find-how--afterhero{
  padding-top:96px;
  background:linear-gradient(180deg,
    #14201d 0,
    #17281f 90px,
    #eef2ea 300px,
    var(--os-paper,#f5f7f3) 100%);
}
.find-how--afterhero .os-kicker{color:#d9ff4d}
.find-how--afterhero h2{color:#fff}
@media(max-width:760px){.find-how--afterhero{padding-top:64px;background:linear-gradient(180deg,#14201d 0,#17281f 60px,#eef2ea 230px,var(--os-paper,#f5f7f3) 100%)}}

/* §7 scene-specific focal treatment — the story must survive the crop.
   Measured against the extracted cells: search keeps the driver+car (left),
   book keeps the phone (centre-low), quote keeps technician+tablet, track
   keeps truck+car (right), history keeps customer+car. */
.find-steps--visual li:nth-child(1) .find-scene img{object-position:32% 42%}
.find-steps--visual li:nth-child(2) .find-scene img{object-position:52% 58%}
.find-steps--visual li:nth-child(3) .find-scene img{object-position:38% 45%}
.find-steps--visual li:nth-child(4) .find-scene img{object-position:64% 48%}
.find-steps--visual li:nth-child(5) .find-scene img{object-position:55% 45%}

/* §8 presentation: taller cinematic band (140px — still under the 256px source,
   never upscaled), a soft bottom gradient dissolving the photo edge into the
   card body, and image dominance over chrome. */
.find-steps--visual .find-scene{position:relative;height:140px;margin:0}
.find-steps--visual .find-scene img{height:140px}
.find-steps--visual .find-scene::after{content:'';position:absolute;inset:auto 0 0 0;height:56px;background:linear-gradient(180deg,transparent,var(--os-white,#fff))}
/* §9 the number rides the image/content boundary instead of floating in white */
.find-steps--visual .find-step-n{position:relative;z-index:1;margin:-18px 0 0 16px;box-shadow:0 2px 8px rgba(20,32,29,.25);border:2px solid #fff}
.find-steps--visual h3{margin-top:6px}
/* §10 desktop: one shared base plane so the five scenes read as one sequence */
@media(min-width:1100px){
  .find-how--afterhero .find-steps--visual{position:relative;padding:18px;border-radius:16px;background:rgba(255,255,255,.55)}
}
/* §11 mobile: one card dominates, the next peeks */
@media(max-width:760px){
  .find-steps--visual li{min-width:78vw;max-width:78vw}
  .find-steps--visual{padding-right:14vw}
}

/* §24 Meets ENTRY: graphite arrives gradually — the section's own top carries
   the approach, so the preceding white section needs no knowledge of Meets. */
.ec-sec--meets-flow{
  padding-top:120px;
  background:linear-gradient(180deg,
    var(--os-paper,#f5f7f3) 0,
    #4a544e 110px,
    #1a201f 210px,
    #0d1112 300px,
    #0d1112 100%);
}
/* §25 image bleed: the meets card image loses its hard box — its tones carry
   into the section via a soft outer glow instead of a rectangle edge. */
.ec-sec--meets-flow .ec-meets-card{box-shadow:0 0 0 1px rgba(217,255,77,.14), 0 24px 80px rgba(255,99,63,.10), 14px 14px 0 rgba(217,255,77,.10)}
.ec-sec--meets-flow .ec-meets-card img{max-height:360px}
/* §26 Meets EXIT: leave through graphite → deep green → paper, so the next
   (light) section is approached, not slammed into. */
.ec-sec--meets-flow{padding-bottom:0}
.ec-sec--meets-flow::after{content:'';display:block;height:170px;margin-top:52px;background:linear-gradient(180deg,#0d1112 0,#14311f 45%,#dfe6dc 85%,var(--os-paper,#f5f7f3) 100%)}

/* §30 app → footer continuity: the app section deepens into the footer's ink
   so the page ends as one continuous surface. */
.find-app--tofooter{
  padding-bottom:0;
  background:linear-gradient(130deg,#eef9ff,#f4f7e9)
}
.find-app--tofooter::after{content:'';display:block;height:150px;margin-top:56px;background:linear-gradient(180deg,rgba(238,249,255,0) 0,#3d4b45 55%,#13201d 100%)}

/* §18/§19 compact empty states: an honest one-liner, never a reserved carousel */
.ec-empty,.ec-sec .os-empty{max-width:560px;padding:14px 18px}
.ec-empty h3,.ec-sec .os-empty h3{font-size:1rem;margin:0 0 4px}
.ec-empty p,.ec-sec .os-empty p{font-size:.85rem;margin:0}

/* ═══ Work homepage-visual-correction (2026-08-25) ═══════════════════════════
   Frozen order + compositions from escargo/homepage-visual-correction-reference. */

/* seven quick category tiles — act immediately, before the journey */
.quick-discovery{padding:48px 0 40px;background:linear-gradient(180deg,#eef2ea 0,#fff 70%)}
.quick-discovery h2{font-size:clamp(1.3rem,3.2vw,1.7rem);letter-spacing:-.02em;color:var(--os-ink);margin:6px 0 18px}
.quick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.quick-tile{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;aspect-ratio:4/3.4;isolation:isolate}
.quick-tile img{width:100%;height:100%;object-fit:cover;display:block}
.quick-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,16,0) 40%,rgba(10,20,16,.72))}
.quick-tile b{position:absolute;left:12px;right:10px;bottom:10px;z-index:1;color:#fff;font-size:.9rem;line-height:1.15;text-shadow:0 1px 5px rgba(0,0,0,.45)}
.quick-tile:focus-visible{outline:3px solid #86aa00;outline-offset:2px}
@media(max-width:1024px){.quick-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){
  .quick-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .quick-tile{min-width:150px;scroll-snap-align:start}
}

/* corrected journey: lead scene + connected 2×2 plane, numerals inside imagery */
.find-how--corrected{padding:64px 0;background:linear-gradient(180deg,#fff 0,#f7fbf4 100%)}
.find-how--corrected h2{font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:-.03em;color:var(--os-ink);margin:6px 0 22px}
.journey{display:grid;grid-template-columns:1.14fr .86fr;gap:14px}
.journey-feature{position:relative;border-radius:28px;overflow:hidden;background:#0b2f25;min-height:560px}
.journey-feature img{width:100%;height:100%;object-fit:cover;object-position:34% 45%;position:absolute;inset:0}
.journey-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-scene{position:relative;min-height:273px;border-radius:22px;overflow:hidden;background:#18352d}
.mini-scene img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mini-scene:nth-child(1) img{object-position:52% 58%}
.mini-scene:nth-child(2) img{object-position:40% 42%}
.mini-scene:nth-child(3) img{object-position:62% 48%}
.mini-scene:nth-child(4) img{object-position:55% 45%}
.journey-feature::after,.mini-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,14,0) 45%,rgba(8,18,14,.82))}
.scene-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;color:#fff}
.journey-feature .scene-copy{left:32px;right:32px;bottom:28px}
.scene-num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#d9ff4d;color:#14201d;font-weight:900;margin-bottom:8px}
.scene-copy h3{margin:0 0 4px;font-size:1.15rem;letter-spacing:-.01em;color:#fff}
.journey-feature .scene-copy h3{font-size:1.5rem}
.scene-copy p{margin:0;font-size:.85rem;color:#d4ded7;max-width:38ch}
@media(max-width:1024px){.journey{grid-template-columns:1fr}.journey-feature{min-height:420px}}
@media(max-width:760px){
  .journey-stack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .mini-scene{min-width:76vw;min-height:250px;scroll-snap-align:start}
  .journey-feature{min-height:360px}
}
@media(prefers-reduced-motion:reduce){.quick-grid,.journey-stack{scroll-behavior:auto}}

/* ═══ Work correction: ambient fields · business calendar · device (2026-08-25) ═══ */
/* §ambient: restrained blurred colour orbs, slow transform-only drift.
   z-index -1 inside an isolated context so content never sits behind them. */
.ambient{position:relative;isolation:isolate;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;z-index:-1;width:38vw;height:38vw;filter:blur(80px);opacity:.22;border-radius:50%;animation:esc-drift 18s ease-in-out infinite alternate;pointer-events:none}
.ambient::before{left:-20vw;top:10%;background:#d9ff4d}
.ambient::after{right:-22vw;bottom:0;background:#dff4ff;animation-delay:-7s}
.ambient--warm::after{background:#fff3b3}
@keyframes esc-drift{to{transform:translate3d(7vw,3vw,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none}}
@media(max-width:760px){.ambient::before,.ambient::after{filter:blur(55px)}}

/* business product shell: staff-column timed calendar + floating storefront card */
.product-shell{position:relative;background:#eef5ef;border-radius:20px;padding:16px;box-shadow:0 24px 60px rgba(6,50,37,.16)}
.product-top{display:flex;justify-content:space-between;align-items:center;margin:2px 4px 10px;color:#17352a}
.product-top b{font-size:.92rem}.product-top span{font-size:.74rem;color:#5b6f64}
.calendar{background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:74px repeat(3,1fr);font-size:11px;color:#24352d}
.cal-cell{min-height:64px;border-right:1px solid #e4ece7;border-bottom:1px solid #e4ece7;padding:8px}
.cal-head{min-height:auto;font-weight:850;background:#f7faf8;display:flex;align-items:center;gap:6px}
.cal-avatar{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#14311f;color:#d9ff4d;font-size:9px;font-weight:800}
.appt{border-radius:9px;padding:7px 8px;background:#eef4ff;color:#2c4a7c;font-weight:700;line-height:1.25}
.appt.green{background:#e4f6d8;color:#33531f}
.appt.yellow{background:#fff3c4;color:#6b5410}
.profile-float{position:absolute;right:-14px;bottom:-20px;width:210px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(6,50,37,.22)}
.profile-float img{width:100%;height:86px;object-fit:cover;display:block}
.profile-float b{display:block;padding:9px 12px 2px;font-size:.8rem;color:#17352a}
.profile-float span{display:block;padding:0 12px 10px;font-size:.68rem;color:#68796f}
@media(max-width:860px){.calendar{grid-template-columns:56px repeat(3,1fr);font-size:9px}.cal-cell{padding:5px;min-height:52px}.profile-float{position:static;width:auto;margin-top:12px}}

/* driver app device: dimensional phone on the ambient field */
.devices{position:relative;min-height:520px;display:flex;justify-content:center}
.phone{position:relative;width:255px;height:500px;border:10px solid #14201d;border-radius:42px;background:#fff;padding:23px 15px;box-shadow:0 35px 65px rgba(7,50,37,.24);transform:rotate(4deg)}
.phone::before{content:"";position:absolute;top:9px;left:37%;width:26%;height:6px;border-radius:8px;background:#14201d}
.phone-screen{margin-top:12px}
.phone-screen b{font-size:.92rem;color:#17352a}
.phone-row{margin-top:9px;border-radius:14px;padding:13px;background:#f0f6f2;font-weight:750;font-size:.78rem;color:#24352d}
@media(max-width:760px){.devices{min-height:auto}.phone{transform:none;height:auto;padding-bottom:18px}}