/**
 * Homepage (home-v2) styles.
 *
 * Ported verbatim from previews/home-v2.html. EVERYTHING is scoped under the
 * `.home-v2` wrapper that front-page.php puts around its sections, and the
 * home-v2 design tokens are redefined on `.home-v2` itself. This is deliberate:
 * the homepage uses a different token system than the rest of the theme
 * (notably --paper is a near-white here, not cream, and --rule-strong is a
 * light hairline, not near-black). Scoping to .home-v2 keeps that contained so
 * the shared header/footer and every service page are untouched.
 *
 * Loaded only on the front page (see functions.php). Continue homepage edits here.
 */

/* ---- home-v2 token system (scoped) ----
   Only REAL overrides and homepage-specific derived values live here. The palette
   itself (--coral, --coral-bright, --peach, --cream, --ink, --ocean, ...) is
   inherited from :root in style.css, which this file declares as a dependency, so
   a brand colour change stays a one-place edit. Do not re-declare a token here
   with the same value it already has in :root.
   --paper IS a deliberate override: #FBF8F1 here vs #F5ECDB in :root. Keep it. */
.home-v2{
  --paper:#FBF8F1; --paper-70:rgba(251,248,241,.72); --paper-50:rgba(251,248,241,.5); --paper-line:rgba(251,248,241,.16);
  --ink-72:rgba(26,26,26,.72); --ink-58:rgba(26,26,26,.58); --ink-40:rgba(26,26,26,.4); --ink-12:rgba(26,26,26,.12);
  --ocean-line:rgba(245,236,219,.18);
  --rule:rgba(26,26,26,.14); --rule-strong:rgba(26,26,26,.24);
  --coral-glow:color-mix(in srgb,var(--coral) 22%,transparent); --coral-dot:color-mix(in srgb,var(--coral) 12%,transparent);
  --card-warm:#FBF5E9; --ease:cubic-bezier(.2,.7,.2,1);
  --card-shadow:0 1px 0 rgba(26,26,26,.04),0 18px 40px -24px rgba(26,26,26,.35);
  /* Verde — sample-client palette used only inside the hero "online" mockup */
  --v-green:#1B4332; --v-gold:#C9A84C; --v-cream:#F5EDD8; --v-ink:#162820; --v-serif:"Fraunces",serif;
}

/* ---- layout + surfaces ---- */
.home-v2 .wrap{max-width:1140px;margin:0 auto;padding:0 var(--s8);position:relative;z-index:1}
@media(max-width:640px){.home-v2 .wrap{padding:0 var(--s6)}}
.home-v2 .sec{padding:var(--s24) 0}
.home-v2 .cream{background:var(--cream)}
/* peach is accent-only, never a section background — no .peach section utility on purpose */
.home-v2 .light{background:var(--paper)}
.home-v2 .dark{background:var(--ink);color:var(--paper)}
.home-v2 .ocean{background:var(--ocean);color:var(--cream)}
.home-v2 .dark .lead-body{color:var(--paper-70)}
.home-v2 .ocean .lead-body{color:rgba(245,236,219,.8)}

/* ---- type ---- */
.home-v2 .eyebrow{display:inline-block;font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:2.6px;font-size:12px;color:var(--coral-deep)}
.home-v2 .on-dark .eyebrow,.home-v2 .dark .eyebrow,.home-v2 .ocean .eyebrow{color:var(--coral-bright)}
.home-v2 .eyebrow .ix{color:var(--ink-40);margin-left:8px;letter-spacing:1.5px}
.home-v2 .dark .eyebrow .ix,.home-v2 .on-dark .eyebrow .ix{color:var(--paper-50)}
.home-v2 .h-sec{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,5vw,56px);line-height:.96;letter-spacing:-.5px;margin:.26em 0 0}
.home-v2 .h-sec .c{color:var(--coral)}
.home-v2 .dark .h-sec .c,.home-v2 .on-dark .h-sec .c,.home-v2 .ocean .h-sec .c{color:var(--coral-bright)}
.home-v2 .lead-body{font-size:16px;line-height:1.62;max-width:60ch;margin-top:18px;color:var(--ink-72)}
.home-v2 :where(p,li,blockquote,.lead-body){text-wrap:pretty}
.home-v2 :where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
.home-v2 .note{font-family:var(--hand);font-weight:700;color:var(--coral-deep);font-size:21px;line-height:1;display:inline-block}
.home-v2 .dark .note,.home-v2 .on-dark .note{color:var(--coral-bright)}

/* ---- buttons ---- */
.home-v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:600;
  font-size:14.5px;line-height:1;padding:14px 24px;border-radius:4px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s,background .15s,border-color .15s,color .15s;white-space:nowrap}
.home-v2 .btn:hover{transform:translateY(-2px)}
.home-v2 .btn .ar{transition:transform .15s}
.home-v2 .btn:hover .ar{transform:translateX(3px)}
.home-v2 .btn-coral{background:var(--coral-deep);color:var(--cream)}
.home-v2 .btn-coral:hover{background:var(--coral-deep-hover)}
.home-v2 .btn-secondary{border-color:var(--rule-strong);color:var(--ink)}
.home-v2 .btn-secondary:hover{border-color:var(--ink)}
.home-v2 .btn-ghost{border-color:var(--paper-line);color:var(--paper)}
.home-v2 .btn-ghost:hover{border-color:var(--paper)}
.home-v2 .ocean .btn-secondary{border-color:var(--ocean-line);color:var(--cream)}
.home-v2 .ocean .btn-secondary:hover{border-color:var(--cream)}
.home-v2 .btn-sm{padding:11px 18px;font-size:13.5px}

/* ---- diamond marker ---- */
.home-v2 .mk{width:9px;height:9px;background:var(--coral);transform:rotate(45deg);flex:0 0 auto;display:inline-block;border-radius:1px}

/* =====================================================
   1 — HERO (in-person <-> online)
   ===================================================== */
.home-v2 .hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;min-height:88vh;display:flex;align-items:center}
.home-v2 .hero .glow{position:absolute;width:760px;height:760px;left:-180px;top:-220px;border-radius:50%;
   background:radial-gradient(circle,var(--coral-glow),transparent 62%);filter:blur(8px);pointer-events:none}
.home-v2 .hero-grid{width:100%;display:grid;grid-template-columns:1.16fr .84fr;gap:var(--s12);align-items:center;padding-block:60px}
.home-v2 .hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,7.6vw,108px);line-height:.84;letter-spacing:-2px;margin:20px 0 0}
.home-v2 .hero h1 .lw{color:var(--coral)}
.home-v2 .hero .sub{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--paper-70);max-width:500px;margin:26px 0 30px}
.home-v2 .hero .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* in-person <-> online composition */
/* The mockup is contained to its column so its nav never clips; only the in-person
   photo below spills past the right edge (see .inperson). */
.home-v2 .hero-art{position:relative;padding:6px 0 44px;width:100%}
.home-v2 .hero-art .cap{display:flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--paper-50);margin-bottom:11px}
.home-v2 .hero-art .cap .mk{width:7px;height:7px}

/* ---- the "online" device (Verde sample-client site) ---- */
.home-v2 .vsite{position:relative;z-index:1}
.home-v2 .vbrowser{border-radius:13px;overflow:hidden;border:1px solid rgba(245,236,219,.14);
   background:var(--v-cream);box-shadow:0 36px 70px -26px rgba(0,0,0,.85)}
.home-v2 .vsite .bar{height:auto;min-height:0;background:#e5dcc5;display:flex;align-items:center;gap:3px;padding:6px 11px;border-bottom:1px solid rgba(0,0,0,.09)}
.home-v2 .vsite .bar i{width:6px;height:6px;border-radius:50%}
.home-v2 .vsite .bar i:nth-child(1){background:#d9896a}.home-v2 .vsite .bar i:nth-child(2){background:#cdb560}.home-v2 .vsite .bar i:nth-child(3){background:#72a87e}
.home-v2 .vsite .bar .url{flex:1;height:9px;background:#f4eddd;border-radius:999px;margin-left:9px}
.home-v2 .vsite .v-nav{background:var(--v-green);padding:10px 18px;display:flex;align-items:center;justify-content:space-between}
.home-v2 .vsite .v-logo{font-family:var(--v-serif);font-weight:900;color:var(--v-cream);font-size:19px;letter-spacing:-.3px}
.home-v2 .vsite .v-logo em{color:var(--v-gold);font-style:normal}
.home-v2 .vsite .v-links{display:flex;gap:14px}
.home-v2 .vsite .v-links span{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(245,237,216,.6);font-weight:600}
.home-v2 .vsite .v-hero{position:relative;overflow:hidden;padding:28px 20px 32px}
.home-v2 .vsite .v-hero-photo{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#22503a,#16301f)}
.home-v2 .vsite .v-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;filter:blur(1.5px) saturate(.8) brightness(.92);transform:scale(1.06)}
.home-v2 .vsite .v-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(18,42,28,.93),rgba(18,42,28,.82))}
.home-v2 .vsite .v-hero-body{position:relative;z-index:2}
.home-v2 .vsite .v-pre{font-size:8.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--v-gold);font-weight:700;margin-bottom:7px}
.home-v2 .vsite .v-h1{font-family:var(--v-serif);font-weight:900;color:var(--v-cream);font-size:29px;line-height:.9;letter-spacing:-.4px;margin-bottom:9px}
.home-v2 .vsite .v-h1 em{color:var(--v-gold);font-style:normal}
.home-v2 .vsite .v-desc{font-size:10.5px;color:rgba(245,237,216,.78);line-height:1.55;max-width:82%;margin-bottom:13px}
.home-v2 .vsite .v-cta{display:inline-block;background:var(--v-gold);color:var(--v-ink);font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:8px 14px;border-radius:7px}
.home-v2 .vsite .v-div{height:14px;background:var(--v-green);position:relative;overflow:hidden}
.home-v2 .vsite .v-div svg{position:absolute;inset:0;width:100%;height:100%}
.home-v2 .vsite .v-card{padding:14px 16px 18px;background:var(--v-cream)}
.home-v2 .vsite .v-card-row{display:flex;gap:13px;align-items:flex-start}
.home-v2 .vsite .v-bag{width:78px;height:98px;border-radius:9px;flex-shrink:0;overflow:hidden;border:1px solid rgba(0,0,0,.09);background:linear-gradient(165deg,#cfae6e,#9c7e3f)}
.home-v2 .vsite .v-bag img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.home-v2 .vsite .v-info{flex:1;min-width:0}
.home-v2 .vsite .v-name{font-family:var(--v-serif);font-weight:600;color:var(--v-ink);font-size:14px;line-height:1.1;margin-bottom:6px}
.home-v2 .vsite .v-line{height:6px;border-radius:3px;background:#ddd5bb;margin-bottom:5px}
.home-v2 .vsite .v-line.s{width:60%}
.home-v2 .vsite .v-row{display:flex;align-items:center;gap:8px;margin-top:9px}
.home-v2 .vsite .v-p{font-family:var(--v-serif);color:var(--v-green);font-size:16px;font-weight:900}
.home-v2 .vsite .v-btn{background:var(--v-green);color:var(--v-cream);font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:6px}

/* ---- the "in person" photo card, overlapping the device corner ---- */
.home-v2 .hero-art .inperson{position:absolute;right:-64px;bottom:-40px;z-index:5;width:216px}
.home-v2 .hero-art .photo-slot{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
   border:1.5px solid rgba(245,236,219,.18);box-shadow:0 26px 48px -16px rgba(0,0,0,.85);
   background:radial-gradient(120% 80% at 70% 10%,#3a4b53,#23303a)}
.home-v2 .hero-art .photo-slot img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.home-v2 .hero-art .ip-tag{position:absolute;left:9px;top:9px;z-index:3;background:rgba(20,16,14,.78);
   border:1px solid rgba(245,236,219,.14);color:var(--paper);font-size:8px;letter-spacing:1.2px;text-transform:uppercase;
   font-weight:700;padding:4px 8px;border-radius:6px;display:flex;align-items:center;gap:5px}
.home-v2 .hero-art .ip-tag .d{width:5px;height:5px;background:var(--coral);transform:rotate(45deg);border-radius:1px}

/* ---- coral swap badge at the seam ---- */
.home-v2 .hero-art .swap{position:absolute;right:166px;bottom:188px;z-index:6;width:52px;height:52px;border-radius:50%;
   background:var(--coral-deep);color:var(--cream);display:flex;align-items:center;justify-content:center;
   box-shadow:0 12px 28px -6px color-mix(in srgb,var(--coral) 50%,transparent),0 0 0 7px var(--ink)}
.home-v2 .hero-art .swap svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2}
/* handwritten note + arrow gesturing toward the digital storefront */
.home-v2 .hero-art .hero-note{position:absolute;right:185px;bottom:-8px;z-index:7;display:flex;align-items:flex-end;gap:5px;transform:rotate(-2deg)}
.home-v2 .hero-art .hn-text{font-family:var(--hand);font-weight:700;color:#ff8a64;font-size:21px;line-height:1.02;white-space:nowrap}
.home-v2 .hero-art .hn-arrow{width:56px;height:44px;flex:0 0 auto;color:#ff8a64;margin-bottom:1px}

/* =====================================================
   3 — WHO WE BUILD FOR
   ===================================================== */
.home-v2 .who{padding:var(--s20) 0}
.home-v2 .who .who-lead{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;margin-top:14px}
.home-v2 .who .who-text{display:flex;flex-direction:column;gap:14px}
.home-v2 .who .who-text .eyebrow{margin-bottom:2px}
.home-v2 .who .stmt{font-family:var(--display);font-weight:800;text-transform:none;font-size:clamp(26px,3.1vw,40px);line-height:1.04;letter-spacing:-.3px;margin:0}
.home-v2 .who .stmt u{text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:5px}
.home-v2 .who .supp{font-size:17px;line-height:1.62;color:var(--ink-72);margin:6px 0 0;max-width:60ch}
.home-v2 .who .supp .lead-in{color:var(--ink);font-weight:600}
.home-v2 .who-anchor{display:flex;justify-content:flex-end}
.home-v2 .who-figure{position:relative;width:100%;max-width:300px;margin:30px 0 14px auto;isolation:isolate;perspective:1150px}
/* the wide orbit swings the card out past the column mid-turn; clip horizontally
   so it never spawns a page scrollbar. */
.home-v2 .who{overflow-x:clip}

/* revolving prism rotor: each scene is a self-contained card (coral keyline +
   halftone dots + photo + cut-out person) sitting on one face of a triangular
   prism that turns on a vertical axis: custom builder -> boutique law firm ->
   restaurant owner, swinging out on a wide arc. translateZ is the prism
   apothem (~0.289 x the 300px face width). */
.home-v2 .who-rotor{position:relative;z-index:1;width:100%;aspect-ratio:4/5;
   transform-style:preserve-3d;
   animation:who-revolve 12s cubic-bezier(.66,0,.28,1) infinite}
.home-v2 .who-face{position:absolute;inset:0;
   backface-visibility:hidden;-webkit-backface-visibility:hidden}
.home-v2 .who-face:nth-child(1){transform:rotateY(0deg)    translateZ(87px)}
.home-v2 .who-face:nth-child(2){transform:rotateY(120deg)  translateZ(87px)}
.home-v2 .who-face:nth-child(3){transform:rotateY(240deg)  translateZ(87px)}
.home-v2 .who-face .who-shot{position:absolute;inset:0;aspect-ratio:auto}
/* even out how far each head clears the frame: builder (1) cutout is taller, so
   trim it; the attorney (2) is a tighter 3/4 portrait, so keep her near the
   builder's size so her head clears by the same amount; the owner (3) lifts a
   touch and sits the lowest. */
.home-v2 .who-face:nth-child(1) .who-person{width:88%}
.home-v2 .who-face:nth-child(2) .who-person{width:92%}
.home-v2 .who-face:nth-child(3) .who-person{width:106%}
@keyframes who-revolve{
  0%,28%    {transform:rotateY(0deg)}
  33%,61%   {transform:rotateY(-120deg)}
  66%,94%   {transform:rotateY(-240deg)}
  100%      {transform:rotateY(-360deg)}
}
@media(prefers-reduced-motion:reduce){.home-v2 .who-rotor{animation:none}}
.home-v2 .who-keyline{position:absolute;z-index:0;top:-13px;right:-13px;width:72%;height:76%;
   border:2px solid var(--coral);border-radius:16px;pointer-events:none}
.home-v2 .who-dots{position:absolute;z-index:0;left:-20px;bottom:-20px;width:58%;height:60%;pointer-events:none;border-radius:14px;
   background-image:radial-gradient(color-mix(in srgb,var(--coral) 30%,transparent) 1.7px,transparent 1.8px);background-size:11px 11px;
   -webkit-mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 72%);mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 72%)}
.home-v2 .who-shot{position:relative;z-index:1;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
   border:6px solid #fff;box-shadow:var(--card-shadow)}
.home-v2 .who-shot .who-bg{position:absolute;inset:0;z-index:0}
.home-v2 .who-shot .who-bg img{width:100%;height:100%;object-fit:cover;display:block}
.home-v2 .who-shot .cnr{position:absolute;left:14px;top:14px;width:22px;height:22px;border-left:2.5px solid var(--coral);border-top:2.5px solid var(--coral);z-index:4}
.home-v2 .who-shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
   background-image:radial-gradient(var(--coral-dot) 1.5px,transparent 1.6px);background-size:10px 10px;
   -webkit-mask:radial-gradient(125% 100% at 100% 100%,#000,transparent 55%);mask:radial-gradient(125% 100% at 100% 100%,#000,transparent 55%);opacity:.5}
.home-v2 .who-person{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);width:104%;
   filter:drop-shadow(0 16px 18px color-mix(in srgb,var(--ink) 28%,transparent))}
.home-v2 .who-person img{width:100%;height:auto;display:block}
.home-v2 .who-chip{position:absolute;left:-18px;bottom:34px;z-index:7;display:flex;align-items:center;gap:9px;
   background:var(--paper);border:1px solid var(--rule);box-shadow:var(--card-shadow);border-radius:30px;padding:9px 16px 9px 13px}
.home-v2 .who-chip .dia{width:9px;height:9px;background:var(--coral);transform:rotate(45deg);border-radius:1px;flex:0 0 auto}
.home-v2 .who-chip .who-meta{display:flex;flex-direction:column;gap:3px}
.home-v2 .who-chip .who-nm{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:13.5px;letter-spacing:.3px;line-height:1;white-space:nowrap}
.home-v2 .who-chip .who-rl{font-size:11px;color:var(--ink-58);line-height:1}
@media(max-width:820px){.home-v2 .who-anchor{justify-content:center}.home-v2 .who-figure{margin-left:auto;margin-right:auto}.home-v2 .who .who-lead{grid-template-columns:1fr;gap:32px}.home-v2 .who .supp{max-width:none}}

/* =====================================================
   4 — WHAT WE DO (two cards)
   ===================================================== */
.home-v2 .do-head{text-align:center}
.home-v2 .ms-twins{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:48px}
@media(max-width:860px){.home-v2 .ms-twins{grid-template-columns:1fr}}

/* twin pillar cards — shared base = .ms-card; self-contained token block so the
   card scene reads identically wherever it is dropped. */
.home-v2 .ms-card{
  --ms-coral:var(--coral); --ms-coral-deep:var(--coral-deep); --ms-peach:var(--peach);
  --ms-cream:var(--cream); --ms-paper:var(--paper); --ms-ink:var(--ink);
  --ms-ink-60:color-mix(in srgb,var(--ink) 60%,transparent); --ms-ink-45:color-mix(in srgb,var(--ink) 45%,transparent); --ms-ink-25:color-mix(in srgb,var(--ink) 22%,transparent);
  --ms-line:color-mix(in srgb,var(--ink) 12%,transparent);
  --ms-display:var(--display);
  --ms-body:var(--body);
  --ms-elev:0 14px 30px -14px rgba(26,26,26,.32);
  --ms-elev-lo:0 8px 18px -10px rgba(26,26,26,.26);
  box-sizing:border-box; width:100%; min-width:0;
  font-family:var(--ms-body); color:var(--ms-ink);
  background:var(--ms-paper); border:1px solid var(--ms-line);
  border-radius:26px; padding:18px 18px 30px;
  box-shadow:0 28px 56px -28px rgba(26,26,26,.42), 0 2px 0 rgba(255,255,255,.6) inset;
}
.home-v2 .ms-card *,.home-v2 .ms-card *::before,.home-v2 .ms-card *::after{box-sizing:border-box}

.home-v2 .ms-card__stage{position:relative; background:var(--ms-peach); border:1px solid var(--ms-line); border-radius:18px; overflow:hidden}
/* Twin stages: soft out-of-focus photo behind each scene, with a dark scrim so the
   animation reads clearly. Peach stays as the fallback color if the image fails. */
.home-v2 .ms-card.is-web .ms-card__stage,
.home-v2 .ms-card.is-flow .ms-card__stage{
  background-color:var(--ms-peach);
  background-size:cover; background-position:center;
}
.home-v2 .ms-card.is-web .ms-card__stage{
  background-image:linear-gradient(rgba(26,26,26,.46),rgba(26,26,26,.38)), url('../assets/img/twin-web-bg.jpg');
  background-image:linear-gradient(rgba(26,26,26,.46),rgba(26,26,26,.38)), image-set(url('../assets/img/twin-web-bg.avif') type('image/avif'), url('../assets/img/twin-web-bg.webp') type('image/webp'), url('../assets/img/twin-web-bg.jpg') type('image/jpeg'));
}
.home-v2 .ms-card.is-flow .ms-card__stage{
  background-image:linear-gradient(rgba(26,26,26,.46),rgba(26,26,26,.38)), url('../assets/img/twin-flow-bg.jpg');
  background-image:linear-gradient(rgba(26,26,26,.46),rgba(26,26,26,.38)), image-set(url('../assets/img/twin-flow-bg.avif') type('image/avif'), url('../assets/img/twin-flow-bg.webp') type('image/webp'), url('../assets/img/twin-flow-bg.jpg') type('image/jpeg'));
}
.home-v2 .ms-card__view{position:relative; transform-origin:top left; will-change:transform}
.home-v2 .ms-card__canvas{position:relative; width:440px; height:362px; perspective:1300px}
.home-v2 .ms-card__scene{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,2.5deg)) rotateY(var(--ry,-7deg)); transition:transform .3s ease-out}
.home-v2 .ms-card__layer{position:absolute}

.home-v2 .ms-card__code{position:absolute; inset:0; pointer-events:none}
.home-v2 .ms-card__code i{position:absolute; height:4px; border-radius:3px; background:var(--ms-ink); opacity:.07}
.home-v2 .ms-card__code i:nth-child(1){top:34px; left:30px; width:54px}
.home-v2 .ms-card__code i:nth-child(2){top:44px; left:30px; width:34px}
.home-v2 .ms-card__code i:nth-child(3){top:54px; left:30px; width:46px}
.home-v2 .ms-card__code i:nth-child(4){top:60px; right:26px; width:70px}
.home-v2 .ms-card__code i:nth-child(5){top:70px; right:26px; width:42px}
.home-v2 .ms-card__code i:nth-child(6){top:80px; right:48px; width:58px}
.home-v2 .ms-card__code i:nth-child(7){bottom:40px; left:34px; width:62px}
.home-v2 .ms-card__code i:nth-child(8){bottom:50px; left:34px; width:40px}
.home-v2 .ms-card__code i:nth-child(9){bottom:34px; right:30px; width:50px}

.home-v2 .ms-card__pane{left:64px; top:34px; width:322px; height:262px; transform:translateZ(0); background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:14px; box-shadow:var(--ms-elev); overflow:hidden}
.home-v2 .ms-card__bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--ms-cream); border-bottom:1px solid var(--ms-line)}
.home-v2 .ms-card__bar i{width:9px; height:9px; border-radius:50%}
.home-v2 .ms-card__bar i:nth-child(1){background:var(--ms-coral)}
.home-v2 .ms-card__bar i:nth-child(2){background:var(--ms-peach)}
.home-v2 .ms-card__bar i:nth-child(3){background:var(--ms-line)}

.home-v2 .ms-card__headcard{left:18px; top:64px; width:226px; transform:translateZ(46px); background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:12px; box-shadow:var(--ms-elev); padding:14px 16px}
.home-v2 .ms-card__headcard h3{margin:0; font-family:var(--ms-display); font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.5px; font-size:30px}
.home-v2 .ms-card__headcard .c{color:var(--ms-coral)}

.home-v2 .ms-card__cursor{left:392px; top:300px; transform:translateZ(70px); color:var(--ms-ink); filter:drop-shadow(0 3px 4px rgba(26,26,26,.3))}
.home-v2 .ms-card__cursor svg{width:24px; height:24px; display:block}

.home-v2 .ms-card__content{padding:24px 4px 0}
.home-v2 .ms-card__eyebrow{display:inline-block; font-weight:700; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ms-coral-deep)}
.home-v2 .ms-card__title{font-family:var(--ms-display); font-weight:900; text-transform:uppercase; letter-spacing:-1px; font-size:clamp(28px,4.4vw,40px); line-height:.92; margin:8px 0 12px}
.home-v2 .ms-card__title .c{color:var(--ms-coral)}
.home-v2 .ms-card__bodycopy{margin:0; font-size:15px; line-height:1.6; color:var(--ms-ink-60); max-width:44ch}
.home-v2 .ms-card__tags{display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 22px}
.home-v2 .ms-card__tags span{font-size:12px; font-weight:600; border:1px solid var(--ms-line); border-radius:999px; padding:7px 14px}
.home-v2 .ms-card__cta{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ms-ink); text-decoration:none; border:1.5px solid var(--ms-ink); border-radius:11px; padding:12px 18px; transition:background .18s ease,color .18s ease}
.home-v2 .ms-card__cta:hover{background:var(--ms-ink); color:var(--ms-paper)}
.home-v2 .ms-card__cta:focus-visible{outline:3px solid var(--ms-coral); outline-offset:2px}
.home-v2 .ms-card__cta .arrow{transition:transform .18s ease}
.home-v2 .ms-card__cta:hover .arrow{transform:translateX(3px)}

/* WEB variant */
.home-v2 .ms-card.is-web .ms-card__page{position:absolute; inset:30px 0 0 0; background:
  repeating-linear-gradient(0deg,transparent 0 16px,rgba(26,26,26,.03) 16px 17px)}
.home-v2 .ms-card__navcard{left:28px; top:188px; width:150px; transform:translateZ(34px); display:grid; gap:8px}
.home-v2 .ms-card__navcard a{display:flex; align-items:center; gap:9px; background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:999px; box-shadow:var(--ms-elev-lo); padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--ms-ink); text-decoration:none}
.home-v2 .ms-card__navcard svg{width:15px; height:15px; color:var(--ms-coral-deep); flex:0 0 auto}

.home-v2 .ms-card__media{left:236px; top:120px; width:182px; height:122px; transform:translateZ(20px); border-radius:12px; box-shadow:var(--ms-elev); overflow:hidden; background:var(--ms-cream)}
.home-v2 .ms-card__media .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--ms-ink-25); border:1.5px dashed var(--ms-ink-25); border-radius:12px}
.home-v2 .ms-card__media .ph svg{width:26px; height:26px}
.home-v2 .ms-card__media .ph span{font-family:var(--ms-body); font-weight:600; font-size:9px; letter-spacing:.6px; text-transform:uppercase}
.home-v2 .ms-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.home-v2 .ms-card__media .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; background:rgba(26,26,26,.55); color:#fff; display:grid; place-items:center}
.home-v2 .ms-card__media .play svg{width:16px; height:16px; margin-left:2px}

.home-v2 .ms-card__quote{left:250px; top:256px; transform:translateZ(58px); background:var(--ms-coral-deep); color:var(--ms-cream); font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase; border:0; border-radius:11px; padding:13px 20px; box-shadow:0 12px 24px -8px rgba(184,56,18,.6); cursor:pointer}

/* WORKFLOW variant — sized and spread to fill the stage like the web card. */
.home-v2 .ms-card.is-flow .ms-card__scene{transform:translateY(6px) rotateX(var(--rx,2.5deg)) rotateY(var(--ry,-7deg))}
.home-v2 .ms-card__pile-badge{left:26px; top:30px; transform:translateZ(52px); display:inline-flex; align-items:center; gap:7px; background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:999px; box-shadow:var(--ms-elev-lo); padding:7px 13px; font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--ms-coral-deep)}
.home-v2 .ms-card__pile-badge .n{width:8px; height:8px; border-radius:50%; background:var(--ms-coral)}
.home-v2 .ms-card__lead{width:178px; background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:12px; box-shadow:var(--ms-elev-lo); padding:11px 13px; display:flex; align-items:center; gap:10px}
.home-v2 .ms-card__lead .av{width:25px; height:25px; border-radius:50%; background:var(--ms-peach); flex:0 0 auto}
.home-v2 .ms-card__lead .ln{flex:1; display:grid; gap:6px}
.home-v2 .ms-card__lead .ln i{height:6px; border-radius:3px; background:rgba(26,26,26,.16)}
.home-v2 .ms-card__lead .ln i:first-child{width:74%}
.home-v2 .ms-card__lead .ln i:last-child{width:48%}
.home-v2 .ms-card__lead .unread{width:9px; height:9px; border-radius:50%; background:var(--ms-coral); flex:0 0 auto}
.home-v2 .ms-card__lead.l1{left:26px; top:74px;  transform:translateZ(12px) rotate(-5deg)}
.home-v2 .ms-card__lead.l2{left:18px; top:150px; transform:translateZ(26px) rotate(4deg)}
.home-v2 .ms-card__lead.l3{left:32px; top:226px; transform:translateZ(40px) rotate(-2.5deg)}

.home-v2 .ms-card__flag{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase}
.home-v2 .ms-card__flag.before{left:40px; top:294px; transform:translateZ(8px); color:rgba(245,236,219,.78); text-shadow:0 1px 2px rgba(26,26,26,.4)}
.home-v2 .ms-card__flag.after{left:258px; top:50px;  transform:translateZ(8px); color:rgba(245,236,219,.78); text-shadow:0 1px 2px rgba(26,26,26,.4)}

/* automation node — centered in the stage */
.home-v2 .ms-card__auto{left:189px; top:150px; transform:translateZ(60px); width:62px; height:62px; border-radius:50%; background:var(--ms-coral-deep); color:var(--ms-cream); display:grid; place-items:center; box-shadow:0 16px 30px -8px rgba(184,56,18,.6)}
.home-v2 .ms-card__auto svg{width:28px; height:28px}

.home-v2 .ms-card__handled{left:236px; top:74px; width:182px; transform:translateZ(30px); background:var(--ms-paper); border:1px solid var(--ms-line); border-radius:15px; box-shadow:var(--ms-elev); padding:16px 18px}
.home-v2 .ms-card__handled .hrow{display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600; padding:9px 0}
.home-v2 .ms-card__handled .hrow + .hrow{border-top:1px solid var(--ms-line)}
.home-v2 .ms-card__handled .tick{width:23px; height:23px; flex:0 0 auto; border-radius:50%; background:var(--ms-coral-deep); color:var(--ms-cream); display:grid; place-items:center}
.home-v2 .ms-card__handled .tick svg{width:14px; height:14px}
.home-v2 .ms-card__handled .foot{margin-top:10px; padding-top:11px; border-top:1px solid var(--ms-line); font-size:12px; color:var(--ms-ink-45)}

/* MOTION — base visible; .js hides anim layers; .is-playing settles them in. */
.home-v2 .ms-card.js .ms-card__anim{opacity:0}
@keyframes msIn{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}
@keyframes msBob{0%,100%{translate:0 0} 50%{translate:0 -3px}}
@keyframes msGlow{0%,100%{box-shadow:0 12px 24px -8px rgba(184,56,18,.55)} 50%{box-shadow:0 16px 30px -6px rgba(184,56,18,.85)}}
@keyframes msPulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.7)}}
@keyframes msTick{
  0%{opacity:0; transform:translateY(-11px) scale(1.7)}
  55%{opacity:1; transform:translateY(0) scale(.82)}
  74%{transform:translateY(0) scale(1.08)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes msPulseBtn{0%,100%{scale:1} 50%{scale:1.045}}
@keyframes msBolt{
  0%,86%,100%{transform:rotate(0)}
  89%{transform:rotate(-13deg)}
  92%{transform:rotate(11deg)}
  95%{transform:rotate(-7deg)}
  98%{transform:rotate(4deg)}
}
@keyframes msWiggle{
  0%,82%,100%{translate:0 0; rotate:0deg}
  86%{translate:-1px 1px; rotate:-6deg}
  90%{translate:1px -1px; rotate:5deg}
  94%{translate:-1px 1px; rotate:-3deg}
  97%{translate:0 0; rotate:1deg}
}
@keyframes msTickDrop{
  0%,70%,100%{transform:translateY(0) scale(1)}
  80%{transform:translateY(-9px) scale(1.5)}
  90%{transform:translateY(0) scale(.86)}
  95%{transform:translateY(0) scale(1.06)}
}
@keyframes msFloatLead{
  0%,100%{translate:0 0; rotate:0deg}
  50%{translate:0 -2.5px; rotate:.8deg}
}
@keyframes msFloatPill{0%,100%{translate:0 0} 50%{translate:0 -3px}}

.home-v2 .ms-card.js.is-playing .ms-card__anim{animation:msIn .55s var(--d,0s) both}
.home-v2 .ms-card.js.is-playing .ms-card__glow{animation:msIn .5s var(--d,0s) both, msGlow 3.4s 2s ease-in-out infinite, msPulseBtn 2.8s 2s ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__tour{animation:msIn .5s var(--d,0s) both, msWiggle 4s 2.2s ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__navcard a{animation:msFloatPill 3s 2s ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__navcard a:nth-child(2){animation-delay:2.4s}
.home-v2 .ms-card.js.is-playing .ms-card__navcard a:nth-child(3){animation-delay:2.8s}

.home-v2 .ms-card.js .ms-card__handled .tick{opacity:0}
.home-v2 .ms-card.js.is-playing .ms-card__handled .tick{animation:msTick .5s var(--d,1.3s) cubic-bezier(.3,.7,.3,1) both, msTickDrop 6s var(--dl,3.2s) ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__lead .unread{animation:msPulse 1.7s 1.6s ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__lead{animation:msIn .55s var(--d,0s) both, msFloatLead 4s var(--fl,2.4s) ease-in-out infinite}
.home-v2 .ms-card.js.is-playing .ms-card__auto svg{transform-origin:center; animation:msBolt 5s 2.4s ease-in-out infinite}

.home-v2 .ms-card.js .ms-card__wires .wire{stroke-dasharray:120; stroke-dashoffset:120}
.home-v2 .ms-card.js.is-playing .ms-card__wires .wire{transition:stroke-dashoffset .9s ease 1s; stroke-dashoffset:0}
.home-v2 .ms-card.js .ms-card__wires circle,
.home-v2 .ms-card.js .ms-card__wires .tip{opacity:0}
.home-v2 .ms-card.js.is-playing .ms-card__wires circle{transition:opacity .3s ease 1.05s; opacity:1}
.home-v2 .ms-card.js.is-playing .ms-card__wires .tip{transition:opacity .3s ease 1.8s; opacity:1}

@media (prefers-reduced-motion: reduce){
  .home-v2 .ms-card.js .ms-card__anim,
  .home-v2 .ms-card.js .ms-card__handled .tick,
  .home-v2 .ms-card.js .ms-card__wires .wire,
  .home-v2 .ms-card.js .ms-card__wires .tip,
  .home-v2 .ms-card.js .ms-card__wires circle{opacity:1; translate:none; stroke-dashoffset:0}
  .home-v2 .ms-card *{animation:none !important; transition:none !important}
  .home-v2 .ms-card__scene{transition:none}
}
@media (prefers-reduced-motion:no-preference){
  .home-v2 .hero-art{animation:heroFloat 6s ease-in-out infinite}
}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(.9)}50%{transform:translateY(-12px) scale(.9)}}

/* =====================================================
   5 — WHERE WE WORK (local)
   ===================================================== */
.home-v2 .local-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:stretch;margin-top:18px}
.home-v2 .local-head{position:relative}
.home-v2 .local-h{position:relative;z-index:1;margin:0}
.home-v2 .places{display:flex;flex-direction:column;gap:2px;margin-top:26px;border-top:1px solid var(--rule)}
.home-v2 .place{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--rule)}
.home-v2 .place .pm{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.3px}
.home-v2 .place .pr{margin-left:auto;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--ink-40);text-align:right}
.home-v2 .local-photo{position:relative;display:flex;isolation:isolate}
.home-v2 .local-card{flex:1;min-height:380px;border-radius:22px;overflow:hidden;border:1px solid var(--rule-strong);box-shadow:var(--card-shadow)}
.home-v2 .local-card img{width:100%;height:100%;object-fit:cover;display:block}
.home-v2 .local-chip{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 36px);
   background:var(--paper);border:1px solid var(--rule);box-shadow:var(--card-shadow);border-radius:30px;padding:10px 17px 10px 14px}
.home-v2 .local-chip span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.3px;line-height:1.05}

/* =====================================================
   6 — PROOF (twin quote cards)
   ===================================================== */
.home-v2 .proof .quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.home-v2 .proof .q{background:#211e1b;border:1px solid var(--paper-line);border-radius:16px;padding:28px;box-shadow:var(--card-shadow)}
.home-v2 .proof .q-text{font-size:17px;line-height:1.6;color:var(--paper);margin:0}
.home-v2 .proof .q-text .c{color:#ff8a64;font-weight:600}
.home-v2 .proof .q-by{display:flex;align-items:center;gap:12px;margin-top:22px}
.home-v2 .proof .q-av{width:46px;height:46px;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#3a3531,#262320);border:1px solid var(--paper-line);flex:0 0 auto}
.home-v2 .proof .q-av img{width:100%;height:100%;object-fit:cover;display:block}
.home-v2 .proof .q-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.4px}
.home-v2 .proof .q-role{font-size:13px;color:var(--paper-50)}
.home-v2 .proof .proof-cta{margin-top:34px}

/* =====================================================
   7 — HOW WE WORK (connected stepper)
   ===================================================== */
.home-v2 .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;position:relative}
.home-v2 .steps::before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;background:var(--rule)}
.home-v2 .steps::after{content:"";position:absolute;left:0;top:23px;height:2px;width:100%;background:linear-gradient(90deg,var(--coral),var(--coral-bright))}
.home-v2 .step{position:relative;border-top:0;padding-top:0}
.home-v2 .step-ico{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;background:var(--paper);border:2px solid var(--coral);
   display:flex;align-items:center;justify-content:center;color:var(--coral-deep)}
.home-v2 .step-ico svg{width:22px;height:22px}
.home-v2 .sn{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink-40);margin-top:18px;letter-spacing:1px}
.home-v2 .st{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:22px;line-height:1;margin-top:4px}
.home-v2 .sd{font-size:14.5px;line-height:1.55;color:var(--ink-72);margin-top:10px;max-width:24ch}

/* =====================================================
   8 — CARE (ocean statement block)
   ===================================================== */
.home-v2 .care .h-sec{margin-top:6px}
.home-v2 .care .lead-body{max-width:64ch}
.home-v2 .care-cta{margin-top:30px}
.home-v2 .care{position:relative;overflow:hidden}
.home-v2 .care .glow{position:absolute;width:620px;height:620px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--coral) 16%,transparent),transparent 64%);pointer-events:none}
.home-v2 .care-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.home-v2 .care-copy .lead-body{max-width:52ch}
/* ongoing-care ticker: the care tasks scroll upward forever, faded top+bottom = the list never ends */
.home-v2 .care-cycle{position:relative;display:flex;justify-content:center;align-items:center}
.home-v2 .care-ticker{position:relative;width:100%;max-width:360px;height:300px;overflow:hidden;padding:0 6px;
   -webkit-mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
           mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
.home-v2 .care-ticker-track{display:flex;flex-direction:column;animation:care-ticker 35s linear infinite;
   will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.home-v2 .care-ticker-item{display:flex;align-items:center;gap:13px;white-space:nowrap;margin-bottom:22px;
   font-family:var(--body);font-weight:600;font-size:18px;color:var(--cream)}
.home-v2 .care-ticker-item .cti-d{width:8px;height:8px;flex:0 0 auto;background:var(--coral-bright);transform:rotate(45deg);border-radius:1px}
@keyframes care-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@media(prefers-reduced-motion:reduce){.home-v2 .care-ticker-track{animation:none}}

/* =====================================================
   9 — FINAL CTA
   ===================================================== */
.home-v2 .cta-sec{background:var(--ink);color:var(--paper);text-align:center;padding:var(--s24) 0;position:relative;overflow:hidden}
.home-v2 .cta-sec .glow{position:absolute;width:680px;height:680px;left:50%;top:40%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--coral-glow),transparent 64%);pointer-events:none}
.home-v2 .cta-sec h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,6vw,76px);line-height:.94;letter-spacing:-1px;margin:14px auto 0;max-width:none}
.home-v2 .cta-sec h2 .c{color:var(--coral-bright)}
.home-v2 .cta-sec .lead-body{margin:18px auto 0;color:var(--paper-70)}
.home-v2 .cta-sec .cta-note{margin-top:18px}
.home-v2 .cta-sec .ctas{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* ---- responsive ---- */
@media(max-width:880px){
  .home-v2 .hero-grid,.home-v2 .who .who-lead,.home-v2 .local-grid,.home-v2 .proof .quotes{grid-template-columns:1fr;gap:32px}
  .home-v2 .care-grid{grid-template-columns:1fr;gap:40px}
  .home-v2 .care-cycle{margin-top:8px}
  .home-v2 .steps{grid-template-columns:1fr 1fr}.home-v2 .steps::before,.home-v2 .steps::after{display:none}
  /* hero art: fit the single column */
  .home-v2 .hero-art{width:100%;transform:none;padding:6px 0 64px;max-width:480px}
  .home-v2 .hero-art .inperson{right:0;bottom:-42px;width:34%;max-width:150px}
  .home-v2 .hero-art .swap{right:30%;bottom:22px;width:44px;height:44px}
  .home-v2 .hero-art .swap svg{width:21px;height:21px}
  .home-v2 .hero-art .hero-note{right:auto;left:22px;bottom:-8px}
  .home-v2 .hero-art .hn-text{font-size:18px}
  .home-v2 .hero-art .hn-arrow{width:48px;height:38px}
}