/*
Theme Name: Made Solid
Theme URI: https://madesolid.studio
Author: Made Solid Studio
Author URI: https://madesolid.studio
Description: Custom theme for Made Solid Studio, a web & workflow studio in St. Petersburg, FL. Hand-built foundation, no page builder.
Version: 0.7.4
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madesolid
*/

/* =========================================================
   TOKENS  — define colors ONCE, reference everywhere.
   Transparent variants are derived with color-mix so a
   future palette change is a one-place edit.
   ========================================================= */
:root{
  --coral:#E84A1F; --coral-deep:#B83812; --coral-deep-hover:#9A2E0D; --coral-hover:#FF5A2A; --peach:#FFE0CC; --cream:#F5ECDB;
  --coral-bright:#FF7A52;            /* lightened coral: readable coral accents on ink & ocean (home.css already uses it) */
  --handled:#1F9D6B;                 /* "handled/done" green in decorative flow diagrams (matches the homepage twin card) */
  --paper-bg:#FBF8F1;                /* warm near-white, light sections */
  --ink:#1A1A1A; --ink-2:#141414; --panel:#161514;   /* mega-menu panel */
  --ocean:#0F4C5C;                   /* Ocean Deep — one statement block per page, max */

  --paper:#F5ECDB;                   /* light text / cream on dark */
  --paper-70:color-mix(in srgb, var(--paper) 72%, transparent);
  --paper-50:color-mix(in srgb, var(--paper) 50%, transparent);
  --paper-line:color-mix(in srgb, var(--paper) 15%, transparent);

  --ink-82:color-mix(in srgb, var(--ink) 82%, transparent);
  --ink-72:color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-58:color-mix(in srgb, var(--ink) 58%, transparent);
  --ink-40:color-mix(in srgb, var(--ink) 40%, transparent);
  --rule:color-mix(in srgb, var(--ink) 14%, transparent);
  --rule-strong:color-mix(in srgb, var(--ink) 80%, transparent);

  /* coral alphas */
  --coral-dot:color-mix(in srgb, var(--coral) 15%, transparent);
  --coral-glow:color-mix(in srgb, var(--coral) 32%, transparent);

  /* semantic UI state colors (forms/system) — NOT brand colors; for approval */
  --success:#2E7D52; --success-hover:#24663F;
  --error:#B00020;   --error-hover:#8A0019;

  /* elevation (warm-neutral, layered, pronounced) */
  --shadow-card:0 8px 18px -8px color-mix(in srgb, var(--ink) 32%, transparent),
                0 32px 60px -16px color-mix(in srgb, var(--ink) 48%, transparent);
  --shadow-lg:0 14px 28px -8px color-mix(in srgb, var(--ink) 38%, transparent),
              0 52px 96px -22px color-mix(in srgb, var(--ink) 60%, transparent);

  --display:'Big Shoulders Display',sans-serif;
  --body:'Familjen Grotesk',sans-serif;
  --hand:'Caveat',cursive;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s9:36px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--ink);color:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s8)}
@media(max-width:640px){.wrap{padding:0 var(--s6)}}

/* Universal: no orphan/widow word "tails". `pretty` keeps body copy from
   dropping a single word onto its own last line; `balance` evens out headlines. */
:where(p,li,blockquote,figcaption,dd,dt,.sub,.lead-body,.feature-b,.ds,.supp,.sd,.tr,.foot-tag,.q-text){text-wrap:pretty}
:where(h1,h2,h3,h4,h5,h6,.stmt,.note){text-wrap:balance}

/* Skip link — first tab stop on every page. Hidden above the viewport until it
   receives keyboard focus, so mouse users never see it. */
.skip-link{position:fixed;top:0;left:0;z-index:200;background:var(--coral-deep);color:var(--cream);
  font-family:var(--body);font-weight:600;font-size:15px;padding:14px 22px;
  border-radius:0 0 10px 0;transform:translateY(-110%)}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--coral);outline-offset:2px}

/* =========================================================
   NAV — twin mega menus (ported from previews/mega-menu-v8)
   "Web design" + "Workflow". Mega-internal selectors are
   scoped under .mega so generic names (.row/.cta/.feat) can't
   bleed into the rest of the stylesheet.
   ========================================================= */
.site-header{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--ink-2) 72%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--paper-line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:96px}
.wm{display:inline-flex;align-items:center}
.wm-img{display:block;height:30px;width:auto}

.nl{display:flex;align-items:center;gap:34px}
.nlink{font-family:var(--body);font-weight:600;font-size:17px;color:var(--paper);
  background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:7px;padding:6px 0;text-decoration:none}
.nlink:hover{color:var(--coral-bright)}
.nlink .car{display:inline-flex;align-items:center;color:var(--coral);transition:transform .25s ease}
.nlink .car svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nlink[aria-expanded="true"] .car{transform:rotate(180deg)}
.nbtn{font-family:var(--body);font-weight:700;font-size:16px;color:var(--cream);background:var(--coral-deep);
  border-radius:11px;padding:14px 24px;text-decoration:none;transition:background .2s,transform .2s}
.nbtn:hover{background:var(--coral-deep-hover);transform:translateY(-2px);color:var(--cream)}
.site-header :focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:6px}

/* hamburger — hidden on desktop */
.ham{display:none;flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:10px}
.ham span{display:block;height:2px;width:22px;background:var(--paper);border-radius:2px;transition:transform .22s,opacity .18s}
body.nav-open .ham span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .ham span:nth-child(2){opacity:0}
body.nav-open .ham span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MEGA PANEL — full-width, under the bar */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--panel);
  border-top:1px solid var(--paper-line);box-shadow:var(--shadow-lg);z-index:59;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s,transform .22s,visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega .inner{display:grid;grid-template-columns:1fr 1fr 0.82fr;gap:40px;padding:40px 0;align-items:stretch}
.mega .colhead{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:1.8px;text-transform:uppercase;color:var(--coral-bright);margin:0 0 14px 14px}
.mega .row{position:relative;display:flex;align-items:flex-start;gap:14px;text-decoration:none;padding:13px 15px;border-radius:12px;
  transition:background .16s}
/* All rows equal at rest — the coral accent bar draws in only on the hovered/focused row */
.mega .row::before{content:"";position:absolute;left:3px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--coral);
  transform:scaleY(0);transform-origin:center;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.mega .row + .row{margin-top:4px}
.mega .row:hover,.mega .row:focus-visible{background:color-mix(in srgb,var(--paper) 7%,transparent)}
.mega .row:hover::before,.mega .row:focus-visible::before{transform:scaleY(1)}
.mega .ic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--coral-dot);display:flex;align-items:center;justify-content:center;color:var(--coral);transition:background .16s,color .16s}
.mega .row:hover .ic,.mega .row:focus-visible .ic{background:color-mix(in srgb,var(--coral) 26%,transparent);color:var(--coral-bright)}
.mega .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mega .tx{flex:1;min-width:0}
.mega .tx .t{display:block;font-family:var(--body);font-weight:600;font-size:17px;color:var(--paper);line-height:1.15}
.mega .row:hover .t,.mega .row:focus-visible .t{color:var(--coral-bright)}
.mega .tx .d{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--paper-70);margin-top:4px}
.mega .chev{flex:none;align-self:center;color:var(--coral);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.mega .chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mega .row:hover .chev,.mega .row:focus-visible .chev{opacity:1;transform:translateX(0)}

/* Workflow "what we automate" decode column — diamond-marked, not links */
.mega .feat{display:flex;align-items:flex-start;gap:13px;padding:9px 14px}
.mega .feat .dia{flex:none;width:8px;height:8px;background:var(--coral);transform:rotate(45deg);margin-top:6px}
.mega .feat .ft{flex:1;min-width:0}
.mega .feat .ft b{display:block;font-family:var(--body);font-weight:600;font-size:16px;color:var(--paper);line-height:1.15}
.mega .feat .ft span{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--paper-70);margin-top:3px}

/* quiet trust line under the Workflow panel */
.mega-foot{display:flex;align-items:center;gap:11px;padding:18px 14px 30px;margin-top:10px;border-top:1px solid var(--paper-line);font-family:var(--body);font-size:14.5px;color:var(--paper-70)}
.mega-foot .lk{flex:none;display:inline-flex;color:var(--coral)}
.mega-foot .lk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mega-foot b{color:var(--paper);font-weight:600}

/* right-column conversion callout — color + brand halftone */
.mega .cta{position:relative;overflow:hidden;border-radius:16px;background:var(--coral-deep);display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:28px 26px;min-height:100%;text-decoration:none;transition:background .2s,transform .2s}
.mega .cta:hover{background:var(--coral-deep-hover);transform:translateY(-2px)}
.mega .cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--peach) 16%,transparent) 1.3px,transparent 1.4px);background-size:13px 13px;opacity:.7;pointer-events:none}
.mega .cta .top{position:relative;display:flex;flex-direction:column}
.mega .cta .ey{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--peach);margin-bottom:12px}
.mega .cta .h{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.04;text-transform:uppercase;color:var(--cream)}
.mega .cta .s2{font-family:var(--body);font-weight:500;font-size:15px;line-height:1.4;color:var(--peach);margin-top:14px}
.mega .cta .go{position:relative;color:var(--cream);font-family:var(--body);font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px}
.mega .cta .go .ar{transition:transform .2s}
.mega .cta:hover .go .ar{transform:translateX(5px)}
/* small-screen conversion fallback row, shown when the callout panel is hidden */
.mega .cta-row{display:none}

/* Tablet: keep the dropdown, drop the callout panel, surface the CTA as a row */
@media(max-width:980px) and (min-width:821px){
  .mega .cta{display:none}
  .mega .inner{grid-template-columns:1fr 1fr;gap:26px}
  .mega .cta-row{display:flex}
  .mega .cta-row .ic{background:var(--coral-deep)}
  .mega .cta-row .ic svg{stroke:var(--cream)}
}

/* Mobile: hamburger. Nav stacks; mega collapses into an in-flow accordion. */
@media(max-width:820px){
  .bar{flex-wrap:wrap;height:auto;min-height:96px}
  .ham{display:flex}
  .nl{display:none;order:3;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 18px}
  body.nav-open .nl{display:flex}
  .nlink{font-size:20px;padding:15px 2px;justify-content:space-between;width:100%;border-bottom:1px solid var(--paper-line)}
  .nlink .car svg{width:15px;height:15px}
  .nl .nbtn{margin-top:16px;text-align:center;border-bottom:0}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border-top:0;display:none}
  .mega.open{display:block}
  .mega .wrap{padding-left:0;padding-right:0}
  .mega .inner{grid-template-columns:1fr;gap:4px;padding:6px 0 18px}
  .mega .colhead{margin-left:14px}
  .mega .col + .col{margin-top:18px}
  .mega .cta{display:none}
  .mega .cta-row{display:flex}
  .mega .cta-row .ic{background:var(--coral-deep)}
  .mega .cta-row .ic svg{stroke:var(--cream)}
  .mega-foot{padding-bottom:8px}
}
@media(max-width:560px){.mega .colhead{font-size:13px}}

/* ===== About — compact dropdown (reuses .mega open/close + mobile accordion) ===== */
.nav-drop{position:relative}
.drop-list{padding:8px}
.drop-link{position:relative;display:block;text-decoration:none;padding:11px 14px 11px 18px;border-radius:10px;transition:background .15s}
/* same coral accent-bar as the mega rows — draws in on hover for family cohesion */
.drop-link::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--coral);
  transform:scaleY(0);transform-origin:center;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.drop-link:hover,.drop-link:focus-visible{background:color-mix(in srgb,var(--paper) 6%,transparent)}
.drop-link:hover::before,.drop-link:focus-visible::before{transform:scaleY(1)}
.drop-link .dt{display:block;font-family:var(--body);font-weight:600;font-size:16px;color:var(--paper);line-height:1.2}
.drop-link:hover .dt,.drop-link:focus-visible .dt{color:var(--coral-bright)}
.drop-link .dd{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--paper-70);margin-top:3px}
@media(min-width:821px){
  /* full bar height so the panel's top:100% lands at the header's bottom line,
     not up in the middle of the nav row */
  .nav-drop{display:inline-flex;align-items:center;height:96px}
  .mega.mega--about{left:0;right:auto;top:calc(100% + 6px);width:256px;
    background:#2b2721; /* lifted warm-dark card — About only (megas stay on the dark brand panel) */
    border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
    border-radius:14px; /* floating card, dropped clear below the separator line */
    box-shadow:0 30px 52px -12px rgba(0,0,0,.78), 0 8px 20px -8px rgba(0,0,0,.6);
    overflow:hidden}
  .mega.mega--about .drop-list{padding:12px}
}
@media(max-width:820px){.mega--about .drop-list{padding:2px 0 8px 14px}}

/* =========================================================
   SHARED — buttons, eyebrow, photo-window
   ========================================================= */
.eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;
  letter-spacing:2.6px;font-size:12px;color:var(--coral)}
.eyebrow .ix{color:var(--ink-58);letter-spacing:1.6px;font-weight:500;margin-left:var(--s2)}
.on-dark .eyebrow .ix{color:var(--paper-50)}

/* Buttons — always boxed so clickability reads instantly.
   primary (default) · secondary · ghost (dark secondary).
   Success/error are STATES on the submit button, never standalone buttons. */
.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}
.btn .ar{transition:transform .15s}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-sm{padding:10px 16px;font-size:13px}

/* deep coral + cream = 4.97:1 (WCAG AA). Light text fails on bright coral, so the bg darkens. */
.btn-primary,.btn-coral{background:var(--coral-deep);color:var(--cream);border-color:var(--coral-deep)}
.btn-primary:hover,.btn-coral:hover{background:var(--coral-deep-hover);border-color:var(--coral-deep-hover);transform:translateY(-2px)}

.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);transform:translateY(-2px)}
.on-dark .btn-secondary,.btn-ghost{background:transparent;color:var(--paper);border-color:var(--paper-50)}
.on-dark .btn-secondary:hover,.btn-ghost:hover{border-color:var(--paper);background:color-mix(in srgb,var(--paper) 8%,transparent);transform:translateY(-2px)}

/* =========================================================
   HERO (dark)
   ========================================================= */
.hero{position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:center;
  background:var(--ink);
  background-image:radial-gradient(var(--coral-dot) 1.1px, transparent 1.2px);
  background-size:26px 26px}
/* moving coral glow */
.hero .glow{position:absolute;top:-20%;right:-10%;width:70%;height:90%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 60% 40%, var(--coral-glow), transparent 60%);
  filter:blur(20px);animation:glow 9s ease-in-out infinite alternate}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.16fr .84fr;
  gap:var(--s12);align-items:center;padding-block:60px}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:var(--s10)}}

.hero .eyebrow{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards .15s}
.hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--paper);
  font-size:clamp(48px,7.6vw,108px);line-height:.84;letter-spacing:-2px;margin:20px 0 0;
  opacity:0;animation:wipe 1s cubic-bezier(.2,.7,.2,1) forwards .3s}
.hero h1 .lw{color:var(--coral)}
.hero .sub{color:var(--paper-70);font-size:clamp(16px,1.5vw,18.5px);max-width:500px;margin:26px 0 30px;
  opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards .7s}
.hero .ctas{display:flex;gap:13px;flex-wrap:wrap;
  opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards .85s}
.trust{margin-top:28px;display:flex;gap:9px 20px;flex-wrap:wrap;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.3px;color:var(--paper-50);
  opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards 1s}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral)}

.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--paper-50);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;animation:rise .8s ease forwards 1.4s}
.cue .dot{width:22px;height:34px;border:1.5px solid var(--paper-50);border-radius:12px;position:relative}
.cue .dot::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;background:var(--coral);
  border-radius:2px;transform:translateX(-50%);animation:bob 1.6s ease-in-out infinite}

/* =========================================================
   WHO WE BUILD FOR (light)
   ========================================================= */
.who{position:relative;overflow:hidden;background:var(--paper-bg);color:var(--ink);padding:var(--s24) 0}
@media(max-width:760px){.who{padding:var(--s16) 0}}

.who .eyebrow{color:var(--coral-deep)}
.who .eyebrow .ix{color:var(--ink-72)}

.who .stmt{font-family:var(--body);font-weight:500;color:var(--ink);
  font-size:clamp(23px,2.3vw,30px);line-height:1.24;letter-spacing:-.5px;text-wrap:balance}
.who .stmt u{text-decoration:underline;text-decoration-color:var(--coral);
  text-decoration-thickness:2.5px;text-underline-offset:4px}
.who .supp{color:var(--ink-82);font-size:18px;line-height:1.6;max-width:52ch;
  margin-top:var(--s4);text-wrap:balance}
.who .note{font-family:var(--hand);font-weight:700;color:var(--coral-deep);font-size:27px;
  line-height:1.05;display:inline-block;transform:rotate(-2.5deg);margin-top:var(--s16)}
@media(max-width:820px){.who .note{margin-top:var(--s8)}}

/* Who-we-build-for figure: the restaurant interior in the coded frame with the owner
   cutout layered on, his head poking just slightly above the frame's top edge. Smaller
   pop than the ecommerce variant so only the head clears the top. */
.who-figure{justify-self:end}
.who-figure .local-pop{width:82%;bottom:0}
@media(max-width:820px){.who-figure{justify-self:start;margin-left:0;margin-right:auto}}

/* =========================================================
   WHAT WE DO — alternating feature rows (cream)
   ========================================================= */
.sec{padding:var(--s24) 0}
@media(max-width:760px){.sec{padding:var(--s16) 0}}
.cream{background:var(--cream);color:var(--ink)}
.cream .eyebrow{color:var(--coral-deep)}
.cream .eyebrow .ix{color:var(--ink-72)}

.do-head{max-width:none}

/* shared link + chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)}
.chip{font-size:11.5px;font-weight:600;color:var(--coral-deep);background:var(--peach);
  padding:4px 12px;border-radius:999px}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;
  color:var(--coral-deep);margin-top:var(--s6);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.dark .link,.on-dark .link{color:var(--coral-bright)}
.link .ar{transition:transform .15s}
.link:hover .ar{transform:translateX(4px)}

/* =========================================================
   SHARED SECTION PRIMITIVES
   ========================================================= */
.light{background:var(--paper-bg);color:var(--ink)}
.dark{background:var(--ink);color:var(--paper)}
.light .eyebrow,.cream .eyebrow{color:var(--coral-deep)}
.dark .eyebrow,.on-dark .eyebrow{color:var(--coral-bright)}
.dark .eyebrow .ix{color:var(--paper-50)}

.h-sec{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,5vw,68px);line-height:.9;letter-spacing:-1.5px;margin-top:var(--s3)}
.h-sec .c{color:var(--coral)}
.h-ed{font-family:var(--body);font-weight:500;letter-spacing:-.5px;line-height:1.18;
  font-size:clamp(28px,3.6vw,44px);margin-top:var(--s3)}
.h-ed .c{color:var(--coral)}
.dark .h-ed{color:var(--paper)}
.lead-body{font-size:18px;line-height:1.6;max-width:54ch;color:var(--ink-82);margin-top:var(--s4)}
.dark .lead-body,.on-dark .lead-body{color:var(--paper-70)}
.note{font-family:var(--hand);font-weight:700;color:var(--coral-deep);font-size:27px;
  line-height:1.05;display:inline-block;transform:rotate(-2.5deg)}
.dark .note{color:var(--coral-bright)}
.mk{width:7px;height:7px;background:var(--coral);transform:rotate(45deg);flex:none}
.ctas{display:flex;gap:13px;flex-wrap:wrap}

/* photo placeholder — plain rectangle for now (real treatment TBD) */
.ph{width:100%;aspect-ratio:4/5;border-radius:8px;
  background:color-mix(in srgb, gray 16%, transparent);
  border:1px solid color-mix(in srgb, gray 26%, transparent);
  box-shadow:var(--shadow-card);
  display:grid;place-items:center;color:color-mix(in srgb, gray 72%, transparent);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px}
.q-av{box-shadow:none}
.ph.wide{aspect-ratio:16/10}

/* LOCAL */
.local-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s12);align-items:center;margin-top:var(--s6)}
@media(max-width:820px){.local-grid{grid-template-columns:1fr;gap:var(--s10)}}
/* Z-pattern flip: photo on the LEFT, text on the right (mirrored accents) */
.local-grid--imgleft{grid-template-columns:.9fr 1.1fr}
.local-grid--imgleft .local-figure{order:-1}
@media(min-width:821px){.local-grid--imgleft .local-figure{margin-left:14px;margin-right:auto}}
.local-grid--imgleft .local-keyline{left:-15px;right:auto}
.local-grid--imgleft .local-dots{right:-18px;left:auto}
.local-grid--imgleft .local-chip{right:-16px;left:auto}
/* Stack on tablet/phone: the base .local-grid--imgleft two-column rule sits after the
   .local-grid{1fr} media query and has equal specificity, so it has to be re-stacked
   here explicitly or the row stays side-by-side at every width. */
@media(max-width:820px){.local-grid--imgleft{grid-template-columns:1fr}.local-grid--imgleft .local-figure{order:0}}
/* Photo composed into a coded graphic frame: white-matted photo, a coral keyline
   offset behind it (top-right), a coral halftone block (bottom-left), and a small
   floating rating chip overlapping the lower-left edge. All accents aria-hidden. */
.local-figure{position:relative;width:min(400px,100%);margin:48px auto 14px;isolation:isolate}
@media(min-width:821px){.local-figure{margin-left:auto;margin-right:14px}}
.local-keyline{position:absolute;z-index:0;top:-15px;right:-15px;width:72%;height:76%;
  border:2px solid var(--coral);border-radius:16px}
/* Break-out composition: shop photo in a clipped frame + the owner cutout layered
   on top, her head/shoulders rising above the frame's top edge, lower body masked
   so it fades into the scene. */
.local-frame{position:relative;z-index:1;aspect-ratio:1/1;overflow:hidden;
  border-radius:16px;border:6px solid #fff;box-shadow:var(--shadow-card)}
.local-frame img{width:100%;height:100%;object-fit:cover;display:block}
.local-pop{position:absolute;z-index:2;left:50%;transform:translateX(-50%);width:94%;bottom:0;
  filter:drop-shadow(0 16px 18px color-mix(in srgb,var(--ink) 30%,transparent))}
.local-pop img{width:100%;height:auto;display:block}
.local-chip{position:absolute;z-index:2;left:-16px;bottom:30px;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:12px;padding:9px 13px;box-shadow:var(--shadow-card)}
.lc-stars{display:inline-flex;gap:2px}
.lc-stars svg{width:14px;height:14px;color:var(--coral)}
.lc-num{font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink)}
@media(max-width:820px){.local-chip{left:8px}}

/* WP editing-screen mockup (Why WordPress section) */
.wpe{position:relative;width:100%;border-radius:10px;overflow:hidden;background:var(--paper-bg);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:var(--shadow-card)}
.wpe-cursor{position:absolute;top:0;left:0;z-index:5;opacity:0;pointer-events:none;color:var(--coral);
  will-change:transform;filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--coral) 38%,transparent))}
.wpe-cursor svg{display:block}
.wpe-cursor path{fill:currentColor;stroke:var(--paper-bg);stroke-width:1.6px;stroke-linejoin:round}
.wpe-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:color-mix(in srgb,var(--ink) 5%,var(--paper-bg));
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.wpe-bar span{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.wpe-bar span:first-child{background:color-mix(in srgb,var(--coral) 70%,var(--paper-bg))}
.wpe-url{flex:1;margin-left:6px;font-family:var(--body);font-style:normal;font-size:10px;
  color:color-mix(in srgb,var(--ink) 42%,transparent);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpe-tools{display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.wpe-tool{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  font-family:var(--body);font-size:11px;font-weight:700;color:color-mix(in srgb,var(--ink) 50%,transparent)}
.wpe-tool.wpe-ital{font-style:italic;font-weight:600}
.wpe-sep{width:1px;height:16px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.wpe-canvas{display:flex;flex-direction:column;gap:10px;padding:18px 16px 16px}
.wpe-eyebrow{height:7px;width:32%;border-radius:5px;background:color-mix(in srgb,var(--coral) 55%,transparent)}
.wpe-head{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:20px;line-height:1.1;letter-spacing:.5px;color:var(--ink);
  min-height:2.2em;text-wrap:balance}
.wpe-caret{display:inline-block;width:2px;height:.9em;margin-left:2px;
  vertical-align:-1px;background:var(--coral);
  animation:wpe-blink 1.05s steps(1,end) infinite}
@keyframes wpe-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.wpe-line{height:7px;width:100%;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.wpe-line.short{width:62%}
.wpe-imgblock{position:relative;height:92px;border-radius:8px;margin-top:4px;overflow:hidden;
  background:var(--cream);border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);
  display:grid;place-items:center}
.wpe-img{position:absolute;inset:0}
.wpe-img-a{background:linear-gradient(135deg,var(--peach),color-mix(in srgb,var(--coral) 50%,var(--peach)))}
.wpe-img-b{opacity:0;background:linear-gradient(135deg,color-mix(in srgb,var(--cream) 64%,var(--ocean)),color-mix(in srgb,var(--coral) 45%,var(--peach)))}
.wpe-img picture,.wpe-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wpe-swap{position:relative;z-index:1;font-family:var(--body);font-size:10px;font-weight:600;
  color:color-mix(in srgb,var(--ink) 55%,transparent);
  background:var(--paper-bg);padding:5px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}
.wpe-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 16px}
.wpe-saved{font-family:var(--body);font-size:10px;color:color-mix(in srgb,var(--ink) 42%,transparent)}
.wpe-update{font-family:var(--body);font-size:11px;font-weight:600;color:var(--cream);
  background:var(--coral-deep);padding:7px 16px;border-radius:7px}
@media(prefers-reduced-motion:reduce){.wpe-caret{animation:none}}
.places{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);margin-top:var(--s6)}
.place{display:flex;align-items:center;gap:9px}
.place .pm{font-weight:700;font-size:16px}
.place .pr{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-58)}

/* PROOF (dark) */
.quotes{margin-top:var(--s10);display:grid;grid-template-columns:1fr 1fr;gap:var(--s12)}
@media(max-width:760px){.quotes{grid-template-columns:1fr;gap:var(--s10)}}
.q{display:flex;flex-direction:column}
.q-text{font-size:18px;line-height:1.55;color:var(--paper);max-width:46ch}
.q-by{display:flex;align-items:center;gap:14px;margin-top:var(--s6)}
.q-av{width:54px;height:54px;border-radius:10px;aspect-ratio:auto;flex:none;overflow:hidden}
.q-av img{width:100%;height:100%;object-fit:cover;display:block}
.q-name{font-weight:600;font-size:14px;color:var(--coral-bright)}
.q-role{font-size:13px;color:var(--paper-50)}
.proof-cta{margin-top:var(--s10)}

/* HOW WE WORK */
.steps{margin-top:var(--s10);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:var(--s10) var(--s8)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:var(--s6);border-top:1px solid var(--rule)}
.step-ico{display:block;width:30px;height:30px;color:var(--coral-deep);margin-bottom:var(--s3)}
.step-ico svg{width:100%;height:100%;display:block}
/* icons pop in one after another when the steps scroll into view */
.step.in .step-ico{animation:pop .55s cubic-bezier(.2,.8,.3,1.2) both}
.steps .step:nth-child(1).in .step-ico{animation-delay:.05s}
.steps .step:nth-child(2).in .step-ico{animation-delay:.18s}
.steps .step:nth-child(3).in .step-ico{animation-delay:.31s}
.steps .step:nth-child(4).in .step-ico{animation-delay:.44s}
.step .sn{font-size:12px;font-weight:600;color:var(--coral-deep);letter-spacing:.5px}
.step .st{font-weight:700;font-size:19px;margin-top:6px;letter-spacing:-.3px}
.step .sd{font-size:14px;line-height:1.5;color:var(--ink-72);margin-top:6px}

/* CARE (cream) — editorial pointer to the care-plans page (plans live there, not here) */
.care-cta{margin-top:var(--s8)}

/* FINAL CTA (dark) */
.cta-sec{background:var(--ink);color:var(--paper);text-align:center;padding:var(--s24) 0;position:relative;overflow:hidden}
/* Warm coral glow behind the closing band (add <div class="glow" aria-hidden="true"> as the first child). */
.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}
.cta-sec .wrap{position:relative;z-index:1}
.cta-sec .note{margin-bottom:var(--s2)}
.cta-sec .eyebrow{display:block;margin-top:var(--s2);color:var(--coral-bright)}
.cta-sec h2{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--paper);
  font-size:clamp(40px,6vw,76px);line-height:.94;letter-spacing:-1px;margin:14px auto 0;max-width:none}
.cta-sec h2 .c{color:var(--coral-bright)}
.cta-sec .lead-body{margin:var(--s6) auto 0;text-align:center;color:var(--paper-70)}
.cta-note{display:block;margin-top:var(--s8);color:var(--coral-bright)}
.cta-sec .cta-note + .ctas{margin-top:var(--s3)}
.cta-sec .ctas{justify-content:center;margin-top:var(--s8)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{position:relative;overflow:hidden;background:var(--ink-2);color:var(--paper-70);
  padding:var(--s12) 0 var(--s8)}
/* Brand signature: giant faint wordmark watermark fills the lower area (locked, brand guide §06). */
.site-footer::before{content:"";position:absolute;right:-1%;bottom:-11%;width:min(720px,64%);height:72%;
  background:url(assets/wordmark/wordmark-horizontal-ondark.svg) no-repeat right bottom;background-size:contain;
  opacity:.06;pointer-events:none;z-index:0}
/* Brand signature: halftone dot-fade at the top seam replaces the hard divider line. */
.site-footer::after{content:"";position:absolute;top:0;left:0;right:0;height:110px;pointer-events:none;z-index:0;
  background-image:radial-gradient(color-mix(in srgb,var(--paper) 12%,transparent) 1px,transparent 1.6px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.site-footer > .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.5fr;gap:var(--s10)}
@media(max-width:960px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr;gap:var(--s8)}
  .foot-news{grid-column:1 / -1;margin-top:var(--s2)}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s8)}
  .foot-grid>:first-child{grid-column:1 / -1}
  .foot-grid>:first-child .foot-social{margin-top:var(--s4)}
  .foot-news{margin-top:0}
  .foot-news-copy{max-width:none}}
.site-footer .wm{display:inline-block}
.wm-foot{display:block;height:96px;width:auto}
.foot-tag{font-size:15px;color:var(--paper-70);max-width:34ch;margin-top:var(--s4)}
.foot-social{margin-top:var(--s6)}
.foot-social-link{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--paper-line);color:var(--paper-70);background:rgba(255,255,255,.03);
  transition:color .2s ease,border-color .2s ease,transform .2s ease}
.foot-social-link:hover{color:var(--coral);border-color:var(--coral);transform:translateY(-2px)}
.foot-social-link:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.foot-h{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--paper);
  position:relative;padding-bottom:12px;margin-bottom:calc(var(--s4) + 6px)}
.foot-h::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--coral);border-radius:2px}
.foot-list a{display:block;font-size:15.5px;padding:5px 0;color:var(--paper-70)}
.foot-list a:hover{color:var(--paper)}
.foot-contact a{display:flex;align-items:center;gap:10px}
.foot-contact svg{flex:none;color:var(--coral);transition:transform .2s ease;width:16px;height:16px}
.foot-contact a:hover svg{transform:translateX(1px)}
.foot-loc{display:flex;align-items:center;gap:10px;padding:5px 0;margin-top:var(--s3);
  font-size:15px;color:var(--paper-50)}
.foot-loc svg{flex:none;color:var(--coral);width:16px;height:16px}
.foot-news-copy{font-size:14.5px;color:var(--paper-70);max-width:34ch;margin-bottom:var(--s4)}
.foot-news-form{display:flex;align-items:stretch;max-width:340px;border:1px solid var(--paper-line);
  border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);transition:border-color .2s ease}
.foot-news-form:focus-within{border-color:var(--coral)}
/* Error state: the whole input box goes coral too, so the error reads as one
   block instead of a line of text under a normal-looking field. Driven by :has()
   off the consent label / the flagged input, so no extra JS hook is needed. */
.foot-news-form-wrap:has(.foot-consent.err) .foot-news-form,
.foot-news-form:has(.foot-news-input.is-error){border-color:var(--coral-bright)}
.foot-news-input{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);
  font-size:15px;padding:12px 15px}
.foot-news-input::placeholder{color:var(--paper-50)}
.foot-news-input:focus{outline:none}
.foot-news-btn{flex:none;display:grid;place-items:center;width:48px;background:var(--coral-deep);
  color:var(--cream);border:0;cursor:pointer;transition:background .2s ease}
.foot-news-btn:hover{background:var(--coral-deep-hover)}
.foot-news-btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* Sent: the row stays put (removing it would shift the footer) but goes quiet,
   so an emptied field reads as finished rather than as a form still waiting. */
.foot-news-btn.is-sent{opacity:1}
.foot-news-form:has(.foot-news-btn.is-sent){opacity:.6;border-color:var(--paper-line)}
.foot-consent{display:flex;align-items:flex-start;gap:8px;margin-top:var(--s4);max-width:34ch;
  font-size:12.5px;line-height:1.45;color:var(--paper-50);cursor:pointer}
.foot-consent-box{flex:none;width:16px;height:16px;margin-top:1px;appearance:none;-webkit-appearance:none;
  border:1.5px solid var(--paper-line);border-radius:5px;background:rgba(255,255,255,.02);
  display:grid;place-content:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.foot-consent-box::before{content:"";width:9px;height:9px;transform:scale(0);transition:transform .12s ease;
  box-shadow:inset 1em 1em var(--cream);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.foot-consent-box:checked{background:var(--coral-deep);border-color:var(--coral-deep)}
.foot-consent-box:checked::before{transform:scale(1)}
.foot-consent-box:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.foot-consent:hover .foot-consent-box{border-color:var(--paper-50)}
.foot-consent a{color:var(--paper-70);text-decoration:underline;text-underline-offset:2px}
.foot-consent a:hover{color:var(--coral)}
/* Newsletter status line (shared by the success + error messages). Errors read
   in lightened coral, not --error: #B00020 on ink is close to unreadable, and
   the control it points at is coral anyway. Small and quiet, a nudge not a wall. */
.foot-news-status{margin-top:10px;max-width:34ch;font-size:13px;line-height:1.45;
  font-weight:600;color:var(--paper-70)}
.foot-news-status.is-err{display:flex;align-items:flex-start;gap:7px;color:var(--coral-bright)}
.foot-news-status.is-err::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;
  background:var(--coral-bright);transform:rotate(45deg)}
/* Point at the box they actually need to tick. */
.foot-consent.err{color:var(--coral-bright)}
.foot-consent.err .foot-consent-box{border-color:var(--coral-bright)}
.foot-consent.err a{color:var(--coral-bright)}
.foot-bottom{border-top:1px solid var(--paper-line);margin-top:var(--s8);padding-top:var(--s6);
  font-size:13.5px;color:var(--paper-50);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}
.foot-bottom a{color:var(--paper-50)}
.foot-bottom a:hover{color:var(--paper)}
.foot-legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px var(--s4)}
.foot-div{color:var(--paper-line);margin:0 4px}

/* =========================================================
   SUB-PAGES — hero, service list, areas, ocean block, FAQ
   (shared by /web-design/ and the rest of the inner pages)
   ========================================================= */
.subhero{position:relative;overflow:hidden;background:var(--ink);
  background-image:radial-gradient(var(--coral-dot) 1.1px,transparent 1.2px);background-size:26px 26px;
  padding-block:clamp(76px,11vw,132px)}
.subhero .glow{position:absolute;top:-30%;right:-8%;width:60%;height:130%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 60% 40%,var(--coral-glow),transparent 60%);
  filter:blur(20px);animation:glow 9s ease-in-out infinite alternate}
.subhero .wrap{position:relative;z-index:1}
.subhero-h{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--paper);
  font-size:clamp(40px,6.4vw,88px);line-height:.86;letter-spacing:-1.5px;margin-top:var(--s3);max-width:15ch}
.subhero-h .c{color:var(--coral)}
.subhero-sub{color:var(--paper-70);font-size:clamp(16px,1.5vw,19px);max-width:60ch;margin-top:var(--s6)}
.subhero .ctas{margin-top:var(--s8)}
/* staggered hero entrance (pure CSS, no flash) — GSAP layers parallax/magnetic on top */
.subhero .eyebrow.rv{transition-delay:.05s}
.subhero .subhero-h.rv{transition-delay:.13s}
.subhero .subhero-sub.rv{transition-delay:.22s}
.subhero .ctas.rv{transition-delay:.32s}

/* =========================================================
   E-COMMERCE bespoke hero — floating product cards + order toast (GSAP)
   ========================================================= */
.ecom-hero{min-height:90vh;display:flex;align-items:center}
/* width:100% so the wrap fills the 1140 container instead of shrinking to the copy
   width — otherwise margin:auto centers the narrow block and the text drifts right */
.ecom-hero .wrap{position:relative;z-index:2;width:100%}
.ecom-hero-copy,.hero-copy{max-width:560px}
/* halftone dot texture (shared by all bespoke heroes), masked toward the right cluster */
.subhero .dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 22%,transparent) 1.1px,transparent 1.2px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(72% 62% at 74% 42%,#000,transparent 72%);
  mask-image:radial-gradient(72% 62% at 74% 42%,#000,transparent 72%)}
/* floating stage */
.ecom-stage{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px}
.prod-card{position:absolute;width:172px;border-radius:16px;overflow:hidden;background:var(--ink-2);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);box-shadow:0 34px 64px -26px rgba(0,0,0,.8)}
.pc-img{height:115px;background:#E7DAC5;overflow:hidden}
.pc-img picture{display:block;width:100%;height:100%}
.pc-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.25)}
.pc-body{padding:13px 14px}
.pc-name{display:block;height:8px;width:62%;border-radius:4px;background:color-mix(in srgb,var(--paper) 20%,transparent)}
.pc-price{display:block;margin-top:10px;font-family:var(--body);font-weight:700;font-size:15px;color:var(--paper)}
.pc1{top:12%;right:23%}
.pc2{top:29%;right:6%}
.pc3{top:54%;right:19%}
.order-toast{position:absolute;top:45%;right:31%;display:flex;gap:11px;align-items:center;
  background:rgba(20,20,20,.7);backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:13px;padding:12px 15px;box-shadow:0 26px 52px -28px rgba(0,0,0,.85);width:max-content}
.ot-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}
.ot-ic svg{width:18px;height:18px;display:block}
.ot-t{font-size:13px;font-weight:600;color:var(--paper)}
.ot-d{font-size:11.5px;color:var(--paper-50)}
@media(max-width:980px){.ecom-stage{display:none}}
/* pre-hide hero copy for the GSAP entrance — only when motion is wanted, so no-JS
   and reduced-motion visitors always see the text (set before paint, no flash) */
.motion-on .subhero [data-hero]{opacity:0}
@media(prefers-reduced-motion:reduce){.subhero [data-hero]{opacity:1}}

/* =========================================================
   CUSTOM WORDPRESS bespoke hero — blocks assembling into a page (GSAP)
   ========================================================= */
.wp-hero{min-height:90vh;display:flex;align-items:center}
.wp-hero .wrap{position:relative;z-index:2;width:100%}
.wp-stage{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px}
/* Light, photo-led "real website" windows — bright canvases so each client photo
   reads as a finished site and pops against the dark hero. */
.wp-window{position:absolute;transform:translateY(-50%);width:300px;background:var(--paper-bg);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:14px;overflow:hidden}
/* Opened cascade: staggered top-left → bottom-right so each window's TOP (its photo)
   stays visible above the one in front. Builder back, florist middle, café front. */
.wp-window-back{top:31%;right:22%;z-index:1;scale:.88;box-shadow:0 26px 60px -30px rgba(0,0,0,.72)}
.wp-window-mid{top:50%;right:7%;z-index:3;scale:1.05;box-shadow:0 40px 84px -26px rgba(0,0,0,.85)}
.wp-window-front{top:71%;right:24%;z-index:2;scale:.84;box-shadow:0 34px 72px -28px rgba(0,0,0,.8)}
/* Browser chrome bar */
.wp-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:color-mix(in srgb,var(--ink) 5%,var(--paper-bg));
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.wp-bar span{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.wp-bar span:first-child{background:color-mix(in srgb,var(--coral) 70%,var(--paper-bg))}
.wp-url{flex:1;height:11px;margin-left:6px;border-radius:999px;background:var(--paper-bg);
  border:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.wp-canvas{display:flex;flex-direction:column}
/* Full-bleed photo hero + padded body below it */
.wp-shot{overflow:hidden;background:var(--cream)}
.wp-shot picture{display:block;width:100%;height:100%}
.wp-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.wp-shot-hero{height:144px;width:100%}
.wp-body{display:flex;flex-direction:column;gap:9px;padding:14px 14px 16px}
/* Believable site elements — softened so nothing reads as harsh on the warm page */
.wp-h{height:14px;width:66%;border-radius:5px;background:color-mix(in srgb,var(--ink) 68%,transparent)}
.wp-line{height:7px;width:100%;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.wp-line.short{width:55%}
.wp-thumbs{display:flex;gap:8px}
/* same three small blobs as before; faint "new order" + amount so each reads as a sale that just came in */
.wp-thumbs span{flex:1;height:36px;border-radius:6px;
  background:color-mix(in srgb,var(--peach) 52%,var(--paper-bg));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--body);line-height:1;font-style:normal}
.wp-thumbs .wo-k{font-size:6px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:color-mix(in srgb,var(--coral) 62%,var(--paper-bg))}
.wp-thumbs .wo-v{font-size:9px;font-weight:700;color:color-mix(in srgb,var(--ink) 42%,transparent)}
/* Café "split": photo beside a short menu column */
.wp-split{display:flex;gap:10px;align-items:stretch}
.wp-shot-sq{flex:0 0 47%;height:84px;border-radius:7px}
.wp-col{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}
/* CTA — deep coral, muted against the warm page */
.wp-cta{align-self:flex-start;margin-top:2px;display:inline-flex;align-items:center;
  padding:8px 13px;border-radius:7px;background:var(--coral-deep);color:var(--cream);
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.2px;line-height:1}
@media(max-width:980px){
  /* stage art is hidden here, so drop the 90vh reservation that would otherwise
     leave two-thirds of the first screen as empty ink around the copy. */
  .wp-stage{display:none}
  .wp-hero{min-height:0;padding:var(--s16) 0 var(--s12)}
}

/* =========================================================
   REDESIGN bespoke hero — before / after wipe (GSAP)
   ========================================================= */
.rd-hero{min-height:90vh;display:flex;align-items:center}
.rd-hero .wrap{position:relative;z-index:2;width:100%}
.rd-stage{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px}
.rd-window{position:absolute;top:50%;right:8%;transform:translateY(-50%);width:360px;background:var(--ink-2);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85)}
.rd-bar{display:flex;gap:6px;padding:11px 13px;background:color-mix(in srgb,var(--paper) 6%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--paper) 8%,transparent)}
.rd-bar span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--paper) 22%,transparent)}
.rd-bar span:first-child{background:var(--coral)}
.rd-screen{position:relative;height:236px;overflow:hidden}
.rd-layer{position:absolute;top:0;left:0;height:100%;display:flex;flex-direction:column;gap:11px;padding:18px}
.rd-before{width:100%;background:#1c1c1c}
.rd-before .rdb{background:color-mix(in srgb,var(--paper) 13%,transparent);border-radius:5px}
.rdb-h{height:15px;width:48%}
.rdb-img{height:88px;background:color-mix(in srgb,var(--paper) 8%,transparent)}
.rdb-l{height:9px;width:92%}
.rdb-l.s{width:68%}
.rd-after{width:58%;overflow:hidden;background:var(--ink-2);border-right:2px solid var(--coral)}
.rd-after-inner{width:358px;height:100%;display:flex;flex-direction:column;gap:11px;padding:18px}
.rda-h{height:17px;width:62%;background:color-mix(in srgb,var(--paper) 28%,transparent);border-radius:5px}
.rda-img{height:88px;background:linear-gradient(140deg,color-mix(in srgb,var(--coral) 85%,transparent),color-mix(in srgb,var(--ink) 85%,transparent));border-radius:7px}
.rda-l{height:9px;width:84%;background:color-mix(in srgb,var(--paper) 20%,transparent);border-radius:5px}
.rda-btn{height:30px;width:108px;background:var(--coral-deep);border-radius:6px}
.rd-divider{position:absolute;top:0;bottom:0;left:58%;width:2px;background:var(--coral);z-index:3}
.rd-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50%;background:var(--coral);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.rd-tag{position:absolute;top:12px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  padding:3px 8px;border-radius:999px;z-index:4}
.rd-tag-after{left:12px;color:var(--ink);background:var(--coral)}
.rd-tag-before{right:12px;color:var(--paper-70);background:rgba(0,0,0,.45)}
@media(max-width:980px){.rd-stage{display:none}}

/* two-column heading | body block */
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s12);align-items:start}
@media(max-width:760px){.two-col{grid-template-columns:1fr;gap:var(--s6)}}

/* linked service list — drawing-hairline rows */
.svc-list{margin-top:var(--s10);border-top:1px solid var(--rule)}
.svc{display:flex;align-items:center;gap:var(--s4);padding:var(--s6) 0;border-bottom:1px solid var(--rule);
  color:var(--ink);transition:padding-left .2s,color .2s}
.svc:hover{padding-left:var(--s3);color:var(--coral-deep)}
.svc .mk{flex:none}
.svc-n{flex:1;font-family:var(--body);font-weight:600;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.3px}
.svc .ar{color:var(--coral-deep);font-size:20px;transition:transform .15s}
.svc:hover .ar{transform:translateX(5px)}

/* 1 · "What we build" — 3x2 icon card grid; 6th card is a soft CTA */
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--s10)}
@media(max-width:860px){.build-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.build-grid{grid-template-columns:1fr}}
.build-card{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:26px var(--s6) 54px;background:var(--paper-bg);border:1px solid var(--rule);
  border-radius:16px;box-shadow:var(--shadow-card);color:var(--ink);
  transition:transform .15s,border-color .15s}
.build-card:hover{transform:translateY(-3px);border-color:var(--coral-deep)}
.bc-ico{width:30px;height:30px;color:var(--coral-deep)}
.bc-ico svg{width:100%;height:100%;display:block}
.bc-n{font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.3px;color:var(--ink)}
.bc-d{font-size:14.5px;line-height:1.5;color:var(--ink-72)}
.build-card .ar{position:absolute;right:22px;bottom:20px;color:var(--coral-deep);font-size:20px;
  transition:transform .15s}
.build-card:hover .ar{transform:translateX(5px)}
.build-card.cta{background:var(--coral-deep);border-color:var(--coral-deep);color:var(--cream)}
.build-card.cta .bc-ico,.build-card.cta .bc-n{color:var(--cream)}
.build-card.cta .bc-d{color:color-mix(in srgb,var(--cream) 82%,transparent)}
.build-card.cta .ar{color:var(--cream)}
.build-card.cta:hover{background:var(--coral-deep-hover)}

/* 2 · "Who we work with" — equal cards, diamond marker (no ranked numerals) */
.who-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s8)}
@media(max-width:700px){.who-cards{grid-template-columns:1fr}}
.wc{display:flex;flex-direction:column;gap:8px;padding:24px var(--s6);
  background:var(--paper-bg);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-card)}
.wc .mk{margin-bottom:2px}
.wc-n{font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.2px;color:var(--ink)}
.wc-d{font-size:15px;line-height:1.5;color:var(--ink-72)}
.who-closer{font-size:16px;line-height:1.6;color:var(--ink-72);margin-top:var(--s8);max-width:62ch}

/* inline underlined link inside running copy */
.ul{color:var(--coral-deep);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.ul:hover{color:var(--coral-deep-hover)}
.on-dark .ul{color:var(--coral-bright)}
.ocean .ul{color:var(--peach)} /* body-size links need more than coral gives on ocean */

/* 3 · Across the bay — cream local band + stylized bay map (peach is accent-only, never a section background) */
.local-band{background:var(--cream);color:var(--ink)}
.local-band .eyebrow{color:var(--coral-deep)}
.local-band .h-sec .c{color:var(--coral)}
.bay-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s10);align-items:center;margin-top:var(--s8)}
@media(max-width:820px){.bay-grid{grid-template-columns:1fr;gap:var(--s8)}}
.bay-map{background:var(--paper-bg);border:1px solid var(--rule);border-radius:18px;
  padding:var(--s6);box-shadow:var(--shadow-card)}
.bay-svg{width:100%;height:auto;display:block;max-height:380px}
.bay-svg .water{fill:color-mix(in srgb,var(--ocean) 15%,transparent)}
.bay-svg .land{fill:var(--cream);stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:1.5}
.bay-svg .dot{fill:var(--coral-deep)}
.bay-svg .lbl{font-family:var(--body);font-weight:600;font-size:14px;fill:var(--ink-72)}
.bay-svg .pin{fill:var(--coral)}
.bay-svg .pin-dot{fill:var(--paper-bg)}
.bay-svg .pin-lbl{font-family:var(--body);font-weight:700;font-size:15px;fill:var(--ink)}
.bay-cards{display:flex;flex-direction:column;gap:var(--s6)}

/* 6 · FAQ — two-column (sticky intro left, accordion right) */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s12);align-items:start}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:var(--s6)}}
.faq-intro{position:sticky;top:104px}
@media(max-width:860px){.faq-intro{position:static}}
.faq-grid .faq{margin-top:0}

/* 7 · Ongoing-care cards on the Ocean band */
.ocean.ongoing{padding-bottom:clamp(88px,11vw,140px)}
.care-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s10)}
/* if a cross-promo card is hidden (e.g. Portfolio switched off) the lone card fills the row */
.care-cards>a:only-child{grid-column:1 / -1}
@media(max-width:760px){.care-cards{grid-template-columns:1fr}}
.care-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px var(--s6) 50px;
  background:color-mix(in srgb,var(--paper) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--paper) 18%,transparent);border-radius:14px;color:var(--paper);
  transition:transform .15s,background .15s,border-color .15s}
.care-card:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--paper) 13%,transparent);
  border-color:color-mix(in srgb,var(--paper) 38%,transparent)}
.cc-n{font-family:var(--body);font-weight:600;font-size:20px;letter-spacing:-.3px;color:var(--paper)}
.cc-d{font-size:15px;line-height:1.5;color:var(--paper-70)}
.care-card .ar{position:absolute;right:22px;bottom:20px;color:var(--coral);font-size:20px;transition:transform .15s}
.care-card:hover .ar{transform:translateX(5px)}

/* service-area cards */
.area-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s8)}
@media(max-width:640px){.area-links{grid-template-columns:1fr}}
.area{display:flex;flex-direction:column;gap:7px;padding:var(--s8);border:1px solid var(--rule);
  border-radius:14px;background:var(--paper-bg);box-shadow:var(--shadow-card);
  transition:transform .15s,border-color .15s}
.area:hover{transform:translateY(-3px);border-color:var(--coral-deep)}
.area-k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--ink-58)}
.area-n{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(28px,4vw,46px);line-height:.9;letter-spacing:-1px;color:var(--ink)}
.area-n .ar{color:var(--coral-deep);font-size:24px;transition:transform .15s}
.area:hover .ar{transform:translateX(5px)}

/* Custom WordPress — ownership trio (diamond lines inside the editorial split) */
.own-grid{display:flex;flex-direction:column;margin-top:var(--s8);max-width:560px}
.own{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule)}
.own .mk{flex:none;margin-top:7px}
.own > div{font-size:16px;line-height:1.5}
.own-n{font-family:var(--body);font-weight:600;color:var(--ink)}
.own-d{color:var(--ink-72)}

/* Custom WordPress — animated stepper: coral progress line draws through node chips */
.steps-wrap{position:relative;margin-top:var(--s10)}
.steps-wrap .steps{margin-top:0}
.steps-line{position:absolute;left:0;right:0;top:22px;height:2px;z-index:0;
  background:color-mix(in srgb,var(--ink) 12%,transparent)}
.steps-line.rv{opacity:1;transform:none;transition:none}      /* track itself never fades/moves */
/* fill is a real element (not ::after) so GSAP can scrub it; CSS draws it on reveal as the fallback */
.steps-line-fill{position:absolute;inset:0;background:var(--coral);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.4,.1,.2,1) .2s}
.steps-line.in .steps-line-fill{transform:scaleX(1)}
@media(max-width:820px){.steps-line{display:none}}            /* stacked steps on mobile, no horizontal track */
.steps-flow .step{border-top:0;padding-top:0;position:relative;z-index:1}
.steps-flow .step-ico{width:46px;height:46px;padding:9px;border-radius:50%;box-sizing:border-box;
  background:var(--cream);border:2px solid var(--coral-deep);color:var(--coral-deep);margin-bottom:var(--s4)}
.steps-flow .step.rv:nth-child(2){transition-delay:.12s}
.steps-flow .step.rv:nth-child(3){transition-delay:.24s}
.steps-flow .step.rv:nth-child(4){transition-delay:.36s}

/* Process — scroll-driven two-column. Left phases: the active one grows + brightens,
   the rest sit small and dim. Right: a sticky stage whose graphic crossfades per phase.
   JS toggles .is-active; reduced-motion / no-JS falls back to all phases shown full. */
.proc-intro{margin-top:var(--s3);max-width:54ch}
.proc-scroll{margin-top:var(--s9);display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:start}
.proc-steps{display:flex;flex-direction:column;gap:clamp(32px,5vh,60px);padding:9vh 0 18vh}
.proc-step{position:relative;padding-left:var(--s6);border-left:2px solid color-mix(in srgb,var(--ink) 12%,transparent);
  opacity:.4;transition:opacity .45s ease,border-color .45s ease}
.proc-step.is-active{opacity:1;border-color:var(--coral)}
.proc-ix{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--coral-deep)}
.proc-name{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.4px;
  margin-top:6px;color:var(--ink);font-size:clamp(30px,4vw,46px);
  transform:scale(.78);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.proc-step.is-active .proc-name{transform:scale(1)}
.proc-desc{font-size:15px;line-height:1.6;color:var(--ink-72);margin-top:12px;max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .55s ease,opacity .55s ease,margin .55s ease}
.proc-step.is-active .proc-desc{max-height:380px;opacity:1}

/* Right sticky stage + crossfading graphics */
.proc-stage{position:sticky;top:18vh;height:64vh;min-height:380px}
.proc-vis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s6);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s}
.proc-vis.is-active{opacity:1;visibility:visible;transform:none}
.pv-card{position:relative;width:min(360px,80%);aspect-ratio:4/3;border-radius:18px;background:var(--paper-bg);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 40px 80px -40px rgba(0,0,0,.3);
  padding:24px;display:flex;flex-direction:column}
.pv-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pv-chip{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.2px;color:var(--coral-deep);
  background:color-mix(in srgb,var(--coral) 12%,transparent);border-radius:999px;padding:6px 13px}

/* Shared image slot — every phase card frames a clear spot for a real screenshot/
   photo. Shows an image-placeholder glyph until a real image is dropped in. */
.pv-imgslot{flex:1;width:100%;min-height:100px;border-radius:10px;overflow:hidden;background:var(--cream);
  display:grid;place-items:center;color:color-mix(in srgb,var(--ink) 22%,transparent)}
.pv-imgslot picture{display:block;width:100%;height:100%}
.pv-imgslot img{display:block;width:100%;height:100%;object-fit:cover}
.pv-img-glyph{width:42px;height:42px}

/* Plan — a wireframe/structure frame: tool header + wireframe image + sitemap nodes */
.pv-plan{gap:12px}
.pv-frame-head{display:flex;align-items:center;gap:8px}
.pv-fh-dot{width:11px;height:11px;border-radius:3px;background:var(--coral-deep)}
.pv-fh-bar{width:72px;height:9px;border-radius:5px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.pv-plan-nodes{display:flex;gap:8px}
.pv-plan-nodes span{flex:1;height:22px;border-radius:6px;background:var(--cream);
  border:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent)}

/* Design — a brand board: palette + moodboard image + type specimen */
.pv-board{gap:12px;justify-content:center}
.pv-sw-row{display:flex;gap:11px}
.pv-sw{width:38px;height:38px;border-radius:10px;box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.pv-sw.s1{background:var(--coral)}.pv-sw.s2{background:var(--peach)}
.pv-sw.s3{background:var(--ocean)}.pv-sw.s4{background:var(--ink)}
.pv-board-type{display:flex;align-items:center;gap:13px}
.pv-aa{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--ink)}
.pv-type-stack{flex:1;display:flex;flex-direction:column;gap:8px}
.pv-type{display:block;height:9px;border-radius:6px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.pv-type-a{width:90%}.pv-type-b{width:62%}

/* Build — a believable finished site in a browser frame (mock stand-in for a real
   client/spec-site screenshot). Light, photo-led; rows assemble in via the JS stagger. */
.pv-site{gap:9px;padding:16px;background:var(--paper-bg)}
.pv-bar{display:flex;gap:6px;margin:0 0 2px}
.pv-bar span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.pv-bar span:first-child{background:var(--coral)}
.pv-site-nav{display:flex;align-items:center;gap:7px}
.pv-site-logo{width:30px;height:9px;border-radius:3px;background:var(--ink)}
.pv-site-link{width:20px;height:6px;border-radius:4px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.pv-site-cta{margin-left:auto;width:44px;height:16px;border-radius:5px;background:var(--coral-deep)}
.pv-site-hero{position:relative;flex:1;min-height:92px;border-radius:8px;overflow:hidden;background:var(--cream)}
.pv-site-hero picture{display:block;width:100%;height:100%}
.pv-site-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* headline + button over the hero photo so the mock reads as a real site */
.pv-site-cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:11px 12px;background:linear-gradient(to top,
    color-mix(in srgb,var(--ink) 82%,transparent),
    color-mix(in srgb,var(--ink) 30%,transparent) 56%,transparent)}
.pv-site-cap-h{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  line-height:.92;font-size:18px;color:var(--paper)}
.pv-site-cap-btn{display:inline-flex;align-items:center;padding:4px 9px;border-radius:5px;
  background:var(--coral-deep);color:var(--cream);font-family:var(--body);font-weight:600;
  font-size:9px;letter-spacing:.3px;line-height:1}
.pv-site-h{height:13px;width:58%;border-radius:5px;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.pv-site-line{height:7px;width:84%;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.pv-site-btn{align-self:flex-start;display:inline-flex;align-items:center;padding:7px 12px;border-radius:6px;
  background:var(--coral-deep);color:var(--cream);font-family:var(--body);font-weight:600;font-size:11px;line-height:1}

/* Care — a monitoring dashboard: status header + site-preview image + status rows */
.pv-dash{justify-content:flex-start;gap:12px;padding:20px}
.pv-dash-head{display:flex;align-items:center;justify-content:space-between}
.pv-dash-title{width:96px;height:13px;border-radius:5px;background:color-mix(in srgb,var(--ink) 68%,transparent)}
.pv-dash-live{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ocean);
  background:color-mix(in srgb,var(--ocean) 15%,var(--paper-bg))}
.pv-check{stroke-dasharray:34;stroke-dashoffset:0}
.pv-dash-rows{display:flex;flex-direction:column;gap:9px}
.pv-dash-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pv-dash-label{height:8px;width:62%;border-radius:5px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.pv-dash-label.short{width:44%}
.pv-dash-ok{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  background:color-mix(in srgb,var(--ocean) 22%,var(--paper-bg));
  border:2px solid color-mix(in srgb,var(--ocean) 55%,transparent)}

@media(max-width:860px){
  .proc-scroll{grid-template-columns:1fr;gap:0}
  .proc-steps{padding:0;gap:var(--s8)}
  .proc-step{opacity:1;border-color:var(--coral)}
  .proc-name{transform:none;font-size:clamp(28px,7vw,38px)}
  .proc-desc{max-height:none;opacity:1;overflow:visible}
  .proc-stage{display:none}
}
@media(prefers-reduced-motion:reduce){
  .proc-step,.proc-name,.proc-desc{opacity:1;transform:none;max-height:none;overflow:visible}
  .proc-step{border-color:var(--coral)}
  .pv-pulse{animation:none}
}

/* Reusable care cross-promo (template-parts/care-cross-promo.php).
   Two columns: the cards on the LEFT overlap into a compact deck that piles as you
   scroll; the header text holds still on the RIGHT. CSS position:sticky stack — no
   GSAP, works on every page, degrades to a plain list on mobile / reduced-motion.
   The deck overlaps (negative margin) so the blue band stays short — the cards are
   the moving part, not a long scroll-through. */
.care-stack{display:grid;grid-template-columns:1.05fr .8fr;gap:var(--s12);align-items:start;margin-top:var(--s6)}
/* cards on the LEFT */
.care-stack-cards{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:18px;padding-bottom:4vh}
/* header holds still on the RIGHT, near the eye-line. Minimal runway below the cards so
   the section ends right as the last card piles — no dead blue for the text to drift through. */
.care-stack-head{grid-column:2;grid-row:1;position:sticky;top:20vh}
.care-promo .care-cta{margin-top:var(--s8)}
/* shared care cross-promo heading: the global .h-sec line-height:.9 is too tight
   when the h2 (passed per page) wraps with a comma — e.g. WordPress's "Built to
   last, kept that way." collided with the line below. Loosen slightly; single-line
   headings on other pages are visually unchanged. */
.care-promo .h-sec{line-height:.96}
@media(max-width:820px){
  /* single column: header text first (row 1), then the card deck (row 2). Without
     the explicit rows both blocks inherit grid-row:1 and paint on top of each other. */
  .care-stack{grid-template-columns:1fr;gap:var(--s8)}
  .care-stack-head{grid-column:1;grid-row:1;position:static}
  .care-stack-cards{grid-column:1;grid-row:2;padding-bottom:0}
}
/* each card sticks near the vertical middle and overlaps the one before it, so they
   pile into a tight deck (offset a few px per card) instead of a long ribbon */
.cp-card{position:sticky;top:calc(30vh + var(--i,0) * 10px);
  display:flex;gap:var(--s4);align-items:flex-start;padding:18px 20px;border-radius:14px;
  background:color-mix(in srgb,var(--ink) 64%,var(--ocean));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.8)}
@media(max-width:820px){.cp-card{position:static}}
@media(prefers-reduced-motion:reduce){.cp-card{position:static}}
.cp-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}
.cp-ic svg{width:21px;height:21px;display:block}
.cp-t{font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:-.1px;color:var(--paper)}
.cp-d{font-size:14px;line-height:1.5;color:var(--paper-70);margin-top:3px}
.cp-tier{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--peach);background:color-mix(in srgb,var(--peach) 16%,transparent);
  padding:2px 8px;border-radius:999px;vertical-align:middle;position:relative;top:-1px}

/* Reusable FAQ "I have other questions" button (template-parts/faq-other-questions.php) */
.faq-other{margin-top:var(--s6)}

/* Stepper deliverables — merged "what's included" items under each step */
.steps-flow .step-incl{list-style:none;margin-top:var(--s4);display:flex;flex-direction:column;gap:7px}
.steps-flow .step-incl li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--ink-72)}
.steps-flow .step-incl li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
  background:var(--coral);transform:rotate(45deg)}

/* Redesign — "signs it's time" cost ledger. A centered masthead introduces a
   contained cream "receipt": tick the signs that sound familiar on the left, and
   each drops an itemised rough monthly cost into the dark receipt on the right,
   with a running total. JS is progressive enhancement — every label, cost line and
   verdict is in the server HTML; the script only ticks, tallies and reveals. */
.signs{
  --signs-ink:var(--ink);
  --signs-ink-soft:#4A4741;
  --signs-ink-mute:#7A7469;
  --signs-accent:var(--coral);
  --signs-accent-lt:var(--coral-bright);
  --signs-panel:var(--ink);
  --signs-panel-txt:#F0EBE1;
  --signs-panel-mute:#ABA497;
  --signs-line:color-mix(in srgb, var(--ink) 12%, transparent);
  --signs-panel-line:color-mix(in srgb, var(--cream) 9%, transparent);
  background:var(--paper-bg);
  color:var(--signs-ink);
  padding:var(--s20) 0;
}
.signs *,.signs *::before,.signs *::after{box-sizing:border-box}
.signs__inner{max-width:1140px;margin:0 auto;padding:0 var(--s8)}

/* centered masthead introduces the contained receipt below it */
.signs__head{text-align:center;max-width:760px;margin:0 auto var(--s10)}
.signs__eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin:0 0 16px}
.signs__title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.4vw,60px);line-height:.9;letter-spacing:.004em;margin:0}
.signs__title em{font-style:normal;color:var(--signs-accent);display:block}
.signs__lede{margin:18px auto 0;font-size:17px;line-height:1.55;color:var(--signs-ink-soft);max-width:56ch}

/* the cream container that grounds the header */
.signs__frame{background:var(--cream);border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);border-radius:22px;padding:clamp(24px,3.5vw,46px);box-shadow:0 34px 66px -38px color-mix(in srgb, var(--ink) 30%, transparent)}
.signs__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}

/* left — the checklist. Sits at the top of the card. When the receipt is the taller
   column, the list sticks and travels down with the page scroll until it reaches the
   bottom of the card, keeping it in view. align-self:start keeps its natural height so
   sticky has room to move. Static on mobile (single column). */
.signs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:sticky;top:110px;align-self:start}
.signs__item{margin:0}
.signs__check{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:17px;line-height:1.35;color:var(--signs-ink);background:transparent;border:none;border-bottom:1px solid var(--signs-line);padding:16px 4px;cursor:pointer;transition:color .16s ease}
.signs__item:first-child .signs__check{border-top:1px solid var(--signs-line)}
.signs__check:hover{color:var(--coral-deep)}
.signs__check:focus-visible{outline:3px solid var(--signs-accent);outline-offset:2px}
.signs__box{position:relative;width:22px;height:22px;flex:0 0 auto;border:1.5px solid var(--signs-ink);border-radius:5px;transition:.18s ease}
.signs__box svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--cream);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .28s ease}
.signs__check[aria-pressed="true"] .signs__box{background:var(--coral-deep);border-color:var(--coral-deep)}
.signs__check[aria-pressed="true"] .signs__box svg{stroke-dashoffset:0}
.signs__check[aria-pressed="true"] .signs__label{color:var(--signs-ink-mute)}
@media(prefers-reduced-motion:reduce){.signs__box svg{transition:none}}

/* right — the dark receipt. It grows as cost lines are revealed, becoming the taller
   column; the checklist then sticks and scrolls down beside it (see .signs__list). */
.signs__receipt{background:var(--signs-panel);color:var(--signs-panel-txt);border-radius:12px;padding:clamp(24px,3vw,34px);box-shadow:0 18px 38px -26px color-mix(in srgb, var(--ink) 45%, transparent)}
.signs__rhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--signs-panel-line);padding-bottom:18px}
.signs__rlabel{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:18px;color:var(--cream);line-height:1}
.signs__total{font-family:var(--display);font-weight:900;font-size:29px;line-height:.85;color:var(--signs-accent-lt);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.signs__total i{font-style:normal;font-family:var(--body);font-weight:600;font-size:13px;color:var(--signs-panel-mute);margin-left:3px}
.signs__zero{color:var(--signs-panel-mute);font-family:var(--body);font-weight:600;font-size:22px}
.signs__lines{list-style:none;margin:20px 0 0;padding:0;min-height:150px}
.signs__empty{font-size:15px;color:var(--signs-panel-mute);line-height:1.6;margin:6px 0}
.signs__line{display:flex;align-items:flex-start;gap:12px;padding:11px 0;font-size:15px;line-height:1.4;color:var(--signs-panel-txt);border-bottom:1px solid color-mix(in srgb, var(--cream) 8%, transparent);animation:signsDrop .34s cubic-bezier(.2,.7,.2,1) both}
.signs__line[hidden],.signs__empty[hidden]{display:none}
.signs__lineC{flex:1}
.signs__lineR{font-family:var(--body);font-weight:700;font-size:14px;color:var(--signs-accent-lt);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px}
.signs__lineR i{font-style:normal;font-weight:400;color:var(--signs-panel-mute);font-size:12px}
.signs__diamond{display:inline-block;width:7px;height:7px;background:var(--signs-accent-lt);transform:rotate(45deg);flex:0 0 auto;margin-top:6px}
@keyframes signsDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.signs__line{animation:none}}

/* verdict + CTA */
.signs__foot{margin-top:22px;padding-top:22px;border-top:1px dashed var(--signs-panel-line)}
.signs__verdict{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:23px;line-height:.98;color:var(--cream);margin:0 0 18px;min-height:1.1em}
.signs__vopt{display:none}
.signs__vopt.is-on{display:inline}
.signs__btn{display:inline-block;background:var(--coral-deep);color:var(--cream);font:inherit;font-weight:700;font-size:16px;line-height:1;padding:15px 28px;border-radius:6px;text-decoration:none;transition:background .18s ease,transform .18s ease}
.signs__btn:hover{background:var(--coral-deep-hover);transform:translateY(-2px)}
.signs__btn:focus-visible{outline:3px solid var(--signs-accent-lt);outline-offset:3px}
.signs__reassure{margin:13px 0 0;font-size:13.5px;color:var(--signs-panel-mute);line-height:1.5}

@media(max-width:1040px){
  .signs{padding:var(--s16) 0}
  .signs__inner{padding:0 var(--s6)}
  .signs__grid{grid-template-columns:1fr;gap:34px}
  .signs__list{position:static;top:auto}
}

/* Redesign — "what's included" editorial ledger. Big numbered header (left) paired
   with body copy (right); body copy top-aligns with the header's cap height. */
.ledger{margin-top:var(--s12);border-top:1px solid var(--rule)}
.led-row{display:grid;grid-template-columns:minmax(170px,.34fr) 1fr;gap:var(--s10);align-items:start;
  padding:var(--s8) 0;border-bottom:1px solid var(--rule)}
.led-k{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,38px);letter-spacing:-.5px;color:var(--coral-deep);line-height:.95;padding-top:4px}
.led-num{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--coral-deep)}
.led-d{font-size:15px;line-height:1.62;color:var(--ink-58);max-width:60ch}
.led-lead{display:block;font-weight:600;font-size:17.5px;line-height:1.5;color:var(--ink);margin-bottom:10px}
@media(max-width:680px){.led-row{grid-template-columns:1fr;gap:8px;padding:var(--s6) 0}.led-k{padding-top:0}.led-lead{font-size:16.5px}}

/* Redesign — "How it works" dark timeline. A coral line draws slowly across the four
   steps (2.6s); each diamond node twinkles as the line reaches it. JS in main.js stages
   the .in / .lit classes; reduced-motion shows the finished state with no animation. */
.tl-track{margin-top:var(--s16);position:relative}
.tl-rail{position:absolute;left:0;right:0;top:5px;height:2px;background:var(--paper-line)}
.tl-fill{position:absolute;left:0;top:5px;height:2px;width:0;background:var(--coral);transition:width 2.6s linear}
.tl-track.in .tl-fill{width:100%}
.tl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s10)}
.tl-step{position:relative;padding-top:var(--s8)}
.tl-node{position:absolute;top:0;left:0;width:12px;height:12px;background:var(--ink);border:2px solid var(--paper-line);
  transform:rotate(45deg) scale(.6);opacity:.5;transition:background .4s ease,border-color .4s ease,opacity .4s ease}
.tl-node::after{content:"";position:absolute;inset:-7px;border:2px solid var(--coral);opacity:0}
.tl-step.lit .tl-node{background:var(--coral);border-color:var(--coral);opacity:1;animation:nodePop .55s cubic-bezier(.3,1.5,.5,1) forwards}
.tl-step.lit .tl-node::after{animation:nodeRing .6s ease-out forwards}
@keyframes nodePop{0%{transform:rotate(45deg) scale(.6)}55%{transform:rotate(45deg) scale(1.4)}100%{transform:rotate(45deg) scale(1)}}
@keyframes nodeRing{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.tl-ix{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-bright)}
.tl-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:-.4px;line-height:1.05;color:var(--paper);margin-top:9px}
.tl-d{font-size:14px;line-height:1.55;color:var(--paper-70);margin-top:12px}
@media(max-width:820px){
	.tl-steps{grid-template-columns:1fr;gap:0}
	.tl-rail,.tl-fill{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto}
	.tl-fill{height:0;width:2px;transition:height 2.6s linear}
	.tl-track.in .tl-fill{height:100%;width:2px}
	.tl-step{padding:0 0 var(--s12) var(--s10)}.tl-node{left:0;top:4px}
}

/* Redesign — before / after draggable slider (the page's interactive proof moment).
   JS in main.js wires the handle; decorative mockups stand in for real screenshots. */
.ba-stage{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  border:1px solid var(--paper-line);user-select:none;touch-action:pan-y}
.ba-bar{height:34px;background:#101010;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid var(--paper-line)}
.ba-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3a;display:block}
.ba-screen{position:relative;background:#fff;--ba-max:77%} /* --ba-max = each mock's width AND the drag cap; keep in sync with the 23/77 clamp in main.js */
.ba-layer{position:absolute;inset:0;transition:filter .2s ease}
/* Grey-fade the shrinking (non-open) side as you drag; neutral at the 50% rest. */
.ba-stage.ba-fade-a .ba-after{filter:grayscale(.65) brightness(.42)}
.ba-stage.ba-fade-b .ba-before{filter:grayscale(.7) brightness(.42)}
/* Each mock lives in a fixed box the width of its max reveal, anchored to its own
   edge, so dragging to the cap shows the ENTIRE site instead of a cropped slice. */
.ba-before-in{position:absolute;top:0;bottom:0;left:0;width:var(--ba-max);overflow:hidden;background:#fff}
.ba-after-in{position:absolute;top:0;bottom:0;right:0;width:var(--ba-max);display:flex;flex-direction:column;overflow:hidden;background:#111214}
/* BEFORE — a dated 2000s local-detailer homepage. Deliberately rough (clashing
   blues + yellow, Times/Comic type, starburst, marquee, visitor-counter energy)
   so the wipe lands. Edge-to-edge bands, so .ba-before carries no padding. */
.ba-before{background:#fff;font-family:Arial,Helvetica,sans-serif;color:#222;overflow:hidden}
.ba-before .btop{background:#ffcc00;color:#a00000;text-align:center;font-family:"Comic Sans MS","Comic Sans",cursive;font-weight:700;font-size:.6em;padding:.4em}
.ba-before .bhead{background:linear-gradient(#1e3fae,#3f74e0);display:flex;align-items:center;gap:.6em;padding:.55em .7em;border-bottom:3px ridge #99a}
.ba-before .bbadge{width:2em;height:2em;border-radius:50%;background:radial-gradient(#bcd,#567);border:2px double #fff;display:grid;place-items:center;font-size:.9em;flex:none}
.ba-before .blogo{font-family:"Times New Roman",serif;color:#fff;line-height:1.05;text-shadow:1px 1px 0 #123}
.ba-before .blogo b{font-size:1em;display:block;font-style:italic}
.ba-before .blogo span{font-size:.48em;letter-spacing:.5px}
.ba-before .bphone{margin-left:auto;text-align:right;color:#ffec6b;font-weight:700;font-family:"Times New Roman",serif;font-size:.5em;line-height:1.1}
.ba-before .bphone .bbig{color:#fff;font-size:1.5em;display:block}
.ba-before .bnav2{background:#dfe3ea;border-bottom:2px groove #b7bcc7;text-align:center;padding:.4em .2em}
.ba-before .bnav2 a{color:#00c;font-size:.5em;text-decoration:underline;margin:0 .4em;font-weight:700}
.ba-before .bbody{padding:.7em .9em}
.ba-before .bhero{position:relative;margin:.1em 0 .55em}
.ba-before .bheroimg{position:relative;height:5.6em;border:2px solid #345;overflow:hidden;background:#8f9aa2}
.ba-before .bheroimg-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:saturate(.72) contrast(.9) brightness(1.08)}
.ba-before .bheroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px)}
.ba-before .bstar{position:absolute;top:-.5em;right:.5em;width:4.4em;height:4.4em;background:#e00000;color:#fe0;font-family:"Arial Black",Arial;font-weight:900;font-size:.72em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.05;transform:rotate(-12deg);clip-path:polygon(50% 0,61% 20%,83% 12%,79% 35%,100% 46%,80% 58%,90% 82%,64% 76%,54% 100%,42% 78%,17% 87%,25% 61%,3% 52%,24% 39%,15% 14%,39% 22%);box-shadow:0 2px 5px rgba(0,0,0,.4)}
.ba-before .bwelcome .bwelcome-h{font-family:"Times New Roman",serif;color:#1e3fae;font-size:1.05em;margin:.1em 0 .3em;text-shadow:1px 1px 0 #ccc;font-weight:700}
.ba-before .bwelcome p{font-family:"Times New Roman",serif;font-size:.6em;line-height:1.5;color:#333;margin:0 0 .5em}
.ba-before .bmarq{background:#111;color:#0f0;font-family:"Courier New",monospace;font-size:.55em;padding:.5em .7em;margin:.4em 0;white-space:nowrap;overflow:hidden}
.ba-before .bsvc{width:100%;border-collapse:collapse;margin:.5em 0;font-size:.58em}
.ba-before .bsvc td{border:1px solid #bbb;padding:.5em .6em;vertical-align:top;color:#4a4a4a}
.ba-before .bsvc td:first-child{background:#eef;font-weight:700;color:#1e3fae;width:34%;white-space:nowrap}
.ba-before .bbtn2{display:inline-block;margin:.4em 0;padding:.5em 1em;font-size:.6em;font-weight:700;color:#222;border:2px outset #cfcfcf;background:linear-gradient(#f6f6f6,#c9c9c9);border-radius:3px}

/* The decorative "bad old site" mockup text is rendered via CSS content, NOT in the
   markup, so search crawlers never index the fake business (name, phone, prices) as
   real copy on this page. The whole .ba-before layer is aria-hidden, so no screen-reader
   text is lost. Visitors see it exactly as before. Added 2026-08-06. */
.ba-before .btop::after{content:"★ NOW OPEN SATURDAYS! Walk-ins Welcome ★"}
.ba-before .blogo b::after{content:"Mike's Auto Detailing"}
.ba-before .blogo span::after{content:"& Hand Car Wash • Est. 2006"}
.ba-before .bphone::before{content:"CALL TODAY!"}
.ba-before .bphone .bbig::after{content:"(727) 555-0134"}
.ba-before .bnav2 a:nth-child(1)::after{content:"HOME"}
.ba-before .bnav2 a:nth-child(2)::after{content:"ABOUT US"}
.ba-before .bnav2 a:nth-child(3)::after{content:"SERVICES"}
.ba-before .bnav2 a:nth-child(4)::after{content:"PRICES"}
.ba-before .bnav2 a:nth-child(5)::after{content:"CONTACT US"}
.ba-before .bstar::after{content:"10%\AOFF!";white-space:pre-line}
.ba-before .bwelcome .bwelcome-h::after{content:"Welcome To Our Website!!"}
.ba-before .bwelcome p::after{content:"Mike's Auto Detailing is a family owned and operated business serving the greater Tampa Bay area for over 20 years. We do it ALL — wash, wax, buff, shampoo and more!"}
.ba-before .bmarq::after{content:"»»» MENTION THIS WEBSITE FOR 10% OFF YOUR FIRST DETAIL «««"}
.ba-before .bsvc tr:nth-child(1) td:nth-child(1)::after{content:"Basic Wash"}
.ba-before .bsvc tr:nth-child(1) td:nth-child(2)::after{content:"Exterior hand wash, tire shine and window cleaning. Starting at $19.99"}
.ba-before .bsvc tr:nth-child(2) td:nth-child(1)::after{content:"Full Detail"}
.ba-before .bsvc tr:nth-child(2) td:nth-child(2)::after{content:"Complete interior and exterior detail. Call for pricing."}
.ba-before .bbtn2::after{content:"Click Here To Contact Us"}
/* AFTER — the rebuild. OWN brand (near-black + teal), NOT the studio's coral,
   so it reads as a real client's site. Edge-to-edge, so no layer padding. */
.ba-after{background:#111214;color:#f4f1ea;clip-path:inset(0 0 0 50%);overflow:hidden}
.ba-after .anav{position:relative;z-index:3;display:flex;align-items:center;gap:.9em;padding:.75em 1.2em .75em 3.2em;border-bottom:1px solid rgba(255,255,255,.09);flex:none}
/* Brand is now an oversized badge: .abrand reserves the slot in the nav flow;
   the badge itself is absolute so its lower third overhangs down into the hero. */
.ba-after .abrand{flex:none;align-self:center;width:4.8em;height:2em}
.ba-after .abadge{position:absolute;left:3.2em;bottom:-1.4em;height:4em;width:auto;z-index:6;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.ba-after .alinks{display:flex;gap:1.2em;position:absolute;left:50%;transform:translateX(-50%)}
.ba-after .alinks a{font-family:var(--body);font-size:.5em;font-weight:500;color:#b7b2a8;letter-spacing:.03em}
.ba-after .anavcta{margin-left:auto;background:#55abb6;color:#171410;font-family:var(--body);font-weight:700;font-size:.5em;padding:.75em 1.1em;border-radius:7px;white-space:nowrap}
.ba-after .ahero{position:relative;flex:1;display:flex;align-items:center;overflow:hidden}
.ba-after .aphoto{position:absolute;inset:0;background:#0b0c0e;overflow:hidden}
.ba-after .aphoto-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% center}
/* Dark scrim over the road on the left (behind the copy), fading out before the car. */
.ba-after .aveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,10,12,.95) 0%,rgba(9,10,12,.9) 34%,rgba(9,10,12,.6) 50%,rgba(11,12,14,.18) 60%,rgba(11,12,14,0) 70%)}
.ba-after .ainner{position:relative;z-index:2;padding:1.3em 1.4em 1.3em 3.4em;max-width:80%}
.ba-after .aeyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:700;font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:#55abb6;margin-bottom:.7em}
.ba-after .aeyebrow .aln{width:1.6em;height:2px;background:#55abb6}
.ba-after .ah{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.9em;line-height:.95;letter-spacing:-.5px;margin:0;color:#fff}
.ba-after .ah .c{color:#55abb6}
.ba-after .ainner p{font-family:var(--body);font-size:.62em;line-height:1.55;color:#cfcac0;margin:.7em 0 0;max-width:26em}
.ba-after .aact{display:flex;align-items:center;gap:1em;margin-top:1.1em;flex-wrap:wrap}
.ba-after .aprimary{background:#55abb6;color:#171410;font-family:var(--body);font-weight:700;font-size:.6em;padding:.85em 1.3em;border-radius:9px;white-space:nowrap}
.ba-after .arate{font-family:var(--body);font-size:.52em;color:#cfcac0}
.ba-after .arate i{color:#55abb6;font-style:normal;letter-spacing:1px}
.ba-div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--coral);transform:translateX(-1px);z-index:3;pointer-events:none}
.ba-handle{position:absolute;top:50%;left:50%;border-radius:50%;background:var(--coral-deep);transform:translate(-50%,-50%);
  z-index:4;display:grid;place-items:center;cursor:ew-resize;box-shadow:0 8px 22px -6px rgba(0,0,0,.6);color:#fff;font-weight:700}
.ba-handle:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
/* Before/After labels live on the browser chrome bar (window frame), never over
   the site content — left half = before, right half = after. */
.ba-tag{font-family:var(--body);font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 8px;border-radius:5px;line-height:1.6}
.ba-tag-b{margin-left:12px;background:rgba(255,255,255,.13);color:#e4e4e4}
.ba-tag-a{margin-left:auto;background:rgba(255,255,255,.13);color:#e4e4e4}
.ba-hint{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-72);letter-spacing:.03em}
.ba-big{margin-top:var(--s12)}
.ba-big .ba-screen{height:clamp(360px,46vw,540px);font-size:21px}
.ba-big .ba-handle{width:48px;height:48px;font-size:19px}

/* ---------------------------------------------------------------------------
   Before/After slider — mobile. The desktop layout overlaps two 77%-wide mock
   columns; on a phone that is too cramped to read as real sites. So here each
   mock instead fills the FULL frame (--ba-max:100%) and the slider becomes a
   clean full-width wipe between two genuine responsive mobile layouts — sized
   to the frame (a real ~340px phone width), not squeezed into a half-column.
   The JS drag cap widens to 4-96 to match (see main.js setPct). Nav collapses
   to a hamburger, header + hero stack. Page-scoped (.ba-*), redesign only. */
@media(max-width:640px){
	.ba-big .ba-screen{--ba-max:100%;height:500px;font-size:13px}
	.ba-big .ba-handle{width:40px;height:40px;font-size:16px}

	/* ---- BEFORE: dated site, full-width phone layout ---- */
	.ba-before .btop{font-size:.66em;white-space:normal;line-height:1.3;padding:.5em 1em}
	.ba-before .bhead{gap:.55em;padding:.7em 1em}
	.ba-before .bbadge{width:2.1em;height:2.1em;font-size:.9em}
	.ba-before .blogo b{font-size:.95em}
	.ba-before .blogo span{font-size:.42em}
	.ba-before .bphone{display:none} /* number moves into the menu */
	.ba-before .bhead::after{ /* hamburger */
		content:"";margin-left:auto;flex:none;width:1.6em;height:1.1em;align-self:center;
		background:repeating-linear-gradient(#fff 0 2px,transparent 2px 5px)}
	.ba-before .bnav2{display:none} /* links collapse into the hamburger */
	.ba-before .bbody{padding:.9em 1.1em 1.1em}
	.ba-before .bhero{margin:.2em 0 .8em}
	.ba-before .bheroimg{height:8.6em}
	.ba-before .bstar{width:4.2em;height:4.2em;font-size:.72em;top:-.3em;right:.4em}
	.ba-before .bwelcome .bwelcome-h{font-size:1.15em;text-align:center}
	.ba-before .bwelcome p{font-size:.6em;line-height:1.55}
	.ba-before .bmarq{font-size:.5em}
	.ba-before .bsvc,.ba-before .bsvc tbody,.ba-before .bsvc tr,.ba-before .bsvc td{display:block;width:auto}
	.ba-before .bsvc{font-size:.58em;margin:.7em 0}
	.ba-before .bsvc td{border:none;border-bottom:1px solid #cfcfcf;padding:.5em .1em}
	.ba-before .bsvc td:first-child{background:none;color:#1e3fae;padding-bottom:.15em;border:none}
	.ba-before .bbtn2{display:block;text-align:center;font-size:.66em;margin:.9em 0 0}
	/* dated footer fills the short page and adds a period tell (decorative,
	   aria-hidden layer — matches the mock's existing CSS-content pattern) */
	.ba-before .bbody::after{content:"© 2006 Mike's Auto Detailing · Best viewed in Internet Explorer";
		display:block;margin-top:1.1em;padding-top:.7em;border-top:1px solid #cdd;
		font-family:"Times New Roman",serif;font-size:.46em;line-height:1.4;text-align:center;color:#667}

	/* ---- AFTER: modern rebuild, full-width phone hero ---- */
	.ba-after .anav{gap:.7em;padding:.9em 1.9em .9em 2.4em}
	/* logo is larger and clearly hangs below the navbar into the hero. Anchored to
	   .anav (position:relative) with a negative bottom so it drops past the nav's
	   bottom edge; left matches the nav padding so it lines up with the copy below. */
	.ba-after .abrand{width:3.4em;height:2.4em;align-self:center}
	.ba-after .abadge{position:absolute;left:2.4em;bottom:-1.5em;height:4.6em;width:auto;z-index:6;
		filter:drop-shadow(0 5px 10px rgba(0,0,0,.6))}
	.ba-after .alinks{display:none} /* links collapse into the hamburger */
	.ba-after .anavcta{display:none} /* CTA lives in the hero */
	.ba-after .anav::after{ /* hamburger */
		content:"";margin-left:auto;flex:none;width:1.7em;height:1.15em;align-self:center;
		background:repeating-linear-gradient(#f4f1ea 0 2px,transparent 2px 5px)}
	/* hero content stacks in the lower third; car shows above it */
	.ba-after .ahero{flex-direction:column;justify-content:flex-end;align-items:stretch}
	/* wide 3.5:1 panorama: zoom from the bottom edge so the car lifts into the
	   mid-right and the lower third (road) stays behind the text. Scaling from
	   the bottom keeps full coverage — no uncovered gap at any drag position. */
	.ba-after .aphoto-i{object-position:72% center;transform:scale(1.1);transform-origin:66% bottom}
	/* The hero text + its dark scrim only appear when the AFTER side is open
	   (ba-fade-b = divider dragged toward after). At rest the clean car photo
	   shows on its own, so there's no half-cut headline. */
	.ba-after .aveil{opacity:.3;transition:opacity .3s ease;
		background:linear-gradient(0deg,rgba(9,10,12,.96) 2%,rgba(9,10,12,.86) 24%,rgba(9,10,12,.42) 44%,rgba(9,10,12,0) 64%)}
	/* left padding matches the nav so the copy lines up with the logo; bigger bottom
	   padding lifts the whole text block up, off the bottom edge */
	.ba-after .ainner{width:auto;max-width:none;margin:0;padding:1.3em 1.9em 5.5em 2.4em;opacity:0;transition:opacity .3s ease}
	.ba-stage.ba-fade-b .ba-after .aveil{opacity:1}
	.ba-stage.ba-fade-b .ba-after .ainner{opacity:1}
	.ba-after .aeyebrow{font-size:.58em;margin-bottom:.55em}
	.ba-after .ah{font-size:2.2em;line-height:.98}
	.ba-after .ainner p{font-size:.66em;max-width:none;margin-top:.6em}
	.ba-after .aact{gap:.8em;margin-top:1em}
	.ba-after .aprimary{font-size:.7em}
	.ba-after .arate{font-size:.58em}
}

/* Redesign — "keep your rankings" traffic-continuity chart (draws in on reveal) */
.seo-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s12);align-items:center}
.rd-seo .h-sec{max-width:14ch}
.seo-chart{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:var(--s8) var(--s8) var(--s6);box-shadow:0 34px 64px -44px rgba(0,0,0,.4)}
.seo-chart svg{width:100%;height:auto;display:block;overflow:visible}
.seo-axis{stroke:var(--rule);stroke-width:1}
.seo-mkline{stroke:color-mix(in srgb,var(--ink) 24%,transparent);stroke-width:1.5;stroke-dasharray:4 5}
.seo-mk{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.14em;fill:var(--ink-58)}
.seo-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.seo-coral{stroke:var(--coral)}
.seo-gray{stroke:color-mix(in srgb,var(--ink) 26%,transparent);stroke-width:2.5}
.seo-line.draw{stroke-dasharray:600;stroke-dashoffset:600}
.seo-chart.in .seo-line.draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.1,1) .3s}
.seo-end{fill:var(--coral);opacity:0}
.seo-chart.in .seo-end{opacity:1;transition:opacity .4s ease 2s}
.seo-legend{display:flex;gap:var(--s6);margin-top:var(--s4);flex-wrap:wrap}
.seo-lg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-72)}
.seo-lg i{width:15px;height:3px;border-radius:2px;display:inline-block}
.lg-coral{background:var(--coral)}.lg-gray{background:color-mix(in srgb,var(--ink) 26%,transparent)}
@media(max-width:820px){.seo-grid{grid-template-columns:1fr;gap:var(--s10)}}

/* Redesign — reduced-motion: show the finished states, no drawing/twinkle */
@media(prefers-reduced-motion:reduce){
	.tl-node{opacity:1;transform:rotate(45deg) scale(1)}
	.tl-track .tl-fill{width:100%;transition:none}
	.tl-step.lit .tl-node{animation:none}.tl-step.lit .tl-node::after{animation:none}
	.seo-line.draw{stroke-dashoffset:0;transition:none}.seo-end{opacity:1}
	.sign .smk{transition:none}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){.tl-track .tl-fill{height:100%}}

/* Redesign — single centered pull-quote (distinct from the 2-up quote grid) */
.quote-solo{max-width:760px;margin:var(--s10) auto 0;text-align:center}
.quote-solo .q-text{font-family:var(--body);font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.45;letter-spacing:-.3px;color:var(--paper)}
.quote-solo .q-by{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:var(--s6)}

/* E-commerce — "what we build": featured product-page mockup + diamond callouts */
.showcase{margin-top:var(--s10)}
/* What-we-build: header text and the product graphic share a top row, then the
   four ownership points span full-width below — so the section reads as one piece. */
.showcase-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:start;margin-top:var(--s6)}
@media(max-width:860px){.showcase-top{grid-template-columns:1fr;gap:var(--s8)}}
.showcase-top + .build-points{margin-top:56px}
.shop-add svg{width:18px;height:18px}
.showcase-head{padding-top:var(--s1)}
.showcase-head .lead-body{margin-bottom:0}
.showcase-top .mockup{width:100%;margin:0}
/* Scale the product page down so it reads as a tidy mini-mockup beside the text */
.showcase-top .mockup-bar{padding:9px 13px;gap:6px}
.showcase-top .mb-dot{width:9px;height:9px}
.showcase-top .shop{grid-template-columns:1.1fr 1fr}
/* On phones stack the mock: product image on top, product details below. This scoped
   rule is needed because .showcase-top .shop outranks the base .shop{1fr} phone rule. */
@media(max-width:620px){.showcase-top .shop{grid-template-columns:1fr}}
.showcase-top .shop-gallery{padding:13px;gap:9px}
.showcase-top .shop-media{min-height:200px}
.showcase-top .shop-thumb{width:42px;height:42px;border-radius:8px}
.showcase-top .shop-tag{font-size:10px;padding:3px 10px;top:10px;left:10px}
.showcase-top .shop-info{padding:16px 18px}
.showcase-top .shop-crumb{font-size:11px}
.showcase-top .shop-title{font-size:21px;margin-top:7px}
.showcase-top .shop-meta{margin-top:9px;gap:8px}
.showcase-top .shop-stars svg{width:13px;height:13px}
.showcase-top .shop-rev{font-size:11px}
.showcase-top .shop-price{font-size:19px;margin-top:10px}
.showcase-top .shop-desc{font-size:12px;margin-top:8px;max-width:30ch}
.showcase-top .shop-opt{margin-top:14px}
.showcase-top .shop-opt-l{font-size:10px;margin-bottom:8px}
.showcase-top .shop-swatch{gap:9px}
.showcase-top .shop-swatch span{width:20px;height:20px}
.showcase-top .shop-divider{margin-top:16px}
.showcase-top .shop-buy{margin-top:16px;padding-top:14px;gap:8px}
.showcase-top .shop-qty{border-radius:9px;padding:3px}
.showcase-top .shop-qty span{width:28px;height:34px;font-size:16px}
.showcase-top .shop-qty b{min-width:22px;font-size:13px}
.showcase-top .shop-add{min-height:40px;font-size:12.5px;border-radius:9px;flex-basis:90px}
.showcase-top .shop-wish{width:40px;border-radius:9px}
.showcase-top .shop-wish svg{width:17px;height:17px}
.showcase-top .shop-trust{font-size:11px;margin-top:14px;gap:7px}
.showcase-top .shop-trust svg{width:14px;height:14px}
.mockup{width:100%;margin:0;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-card)}
.mockup-bar{display:flex;gap:8px;align-items:center;padding:13px var(--s4);
  background:var(--cream);border-bottom:1px solid var(--rule)}
.mockup-bar span{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.mockup .ph{aspect-ratio:16/9;border:0;border-radius:0;box-shadow:none}

/* E-commerce — product-page UI inside the browser frame (decorative; aria-hidden) */
.mb-dot{width:11px;height:11px;border-radius:50%}
.mb-dot:nth-child(1){background:#FF5F57}
.mb-dot:nth-child(2){background:#FEBC2E}
.mb-dot:nth-child(3){background:#28C840}
.shop{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;background:#fff}
@media(max-width:620px){.shop{grid-template-columns:1fr}}
/* Gallery side — warm well holding the product image */
.shop-gallery{background:var(--cream);padding:18px;display:flex;flex-direction:column;gap:14px}
.shop-media{position:relative;flex:1;min-height:300px;border-radius:14px;overflow:hidden}
.shop-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:11px;
  text-align:center;border:1.5px dashed color-mix(in srgb,var(--ink) 26%,transparent);border-radius:14px;
  color:color-mix(in srgb,var(--ink) 44%,transparent);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 10px,rgba(255,255,255,0) 10px 20px)}
.shop-ph svg{width:34px;height:34px;opacity:.7}
.shop-ph span{font-family:var(--body);font-size:12.5px;letter-spacing:.03em;max-width:20ch}
.shop-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  background:var(--coral-deep);padding:6px 15px 4px;border-radius:999px;
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--coral-deep) 60%,transparent)}
.shop-thumbs{display:flex;gap:12px}
.shop-thumb{width:64px;height:64px;border-radius:11px;border:2px solid var(--rule);
  background:#fff;display:grid;place-items:center;overflow:hidden}
.shop-thumb > picture{display:contents}
.shop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shop-thumb:not(:has(img))::after{content:"";width:26px;height:26px;border-radius:50%;
  background:#D8B074;opacity:.85}
.shop-thumb.is-on{border-color:var(--coral)}
/* First thumb's source shows the marble base + floor, which read as empty space at this
   crop, so zoom it toward the wood grain. Scoped to the first thumbnail only. */
.shop-thumbs .shop-thumb:first-child img{transform:scale(1.85);transform-origin:center 30%}
/* Info side — white product detail */
.shop-info{background:#fff;padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column}
.shop-crumb{font-family:var(--body);font-size:13px;
  color:color-mix(in srgb,var(--ink) 44%,transparent)}
.shop-crumb i{font-style:normal;margin:0 7px;opacity:.55}
.shop-title{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,42px);line-height:.94;color:var(--ink);margin-top:12px}
.shop-meta{display:flex;align-items:center;gap:11px;margin-top:14px}
.shop-stars{display:inline-flex;gap:3px}
.shop-stars svg{width:17px;height:17px;color:var(--coral)}
.shop-rev{font-family:var(--body);font-size:13px;
  color:color-mix(in srgb,var(--ink) 50%,transparent)}
.shop-price{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,34px);
  line-height:1;color:var(--ink);margin-top:16px}
.shop-desc{font-family:var(--body);font-size:15px;line-height:1.55;color:var(--ink-72);
  margin-top:14px;max-width:40ch}
.shop-opt{margin-top:24px}
.shop-opt-l{display:block;font-family:var(--body);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 55%,transparent);margin-bottom:11px}
.shop-swatch{display:flex;gap:13px}
.shop-swatch span{width:28px;height:28px;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.shop-swatch span.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.shop-divider{height:1px;background:var(--rule);margin-top:26px}
.shop-buy{display:flex;align-items:stretch;gap:10px;margin-top:24px;flex-wrap:nowrap}
@media(max-width:620px){.shop-buy{flex-wrap:wrap}}
.shop-qty{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--rule);
  border-radius:13px;padding:4px;flex:none}
.shop-qty span{width:34px;height:44px;display:grid;place-items:center;font-size:19px;
  border-radius:9px;color:color-mix(in srgb,var(--ink) 52%,transparent)}
.shop-qty b{min-width:28px;text-align:center;font-family:var(--body);font-weight:700;
  font-size:16px;font-variant-numeric:tabular-nums}
.shop-add{flex:1 1 110px;min-width:0;min-height:52px;display:grid;place-items:center;
  font-family:var(--body);font-weight:600;font-size:15px;color:var(--cream);
  background:var(--coral-deep);border-radius:13px;white-space:nowrap;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--coral-deep) 55%,transparent)}
.shop-wish{flex:none;width:50px;display:grid;place-items:center;border:1.5px solid var(--rule);
  border-radius:13px;color:var(--ink-72)}
.shop-wish svg{width:21px;height:21px}
.shop-trust{display:flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--body);font-size:14px;color:var(--ink-72)}
.shop-trust svg{width:17px;height:17px;color:var(--coral-deep);flex:none}
.build-points{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s12);
  margin:var(--s10) 0 0;max-width:none}
@media(max-width:700px){.build-points{grid-template-columns:1fr}}
.bpt{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--rule)}
.bpt .mk{flex:none;position:relative;top:1px}
.bpt > div{font-size:16px;line-height:1.5;text-wrap:pretty}
.bpt-n{font-family:var(--body);font-weight:600;color:var(--ink)}
.bpt-d{color:var(--ink-72)}

/* E-commerce — centered proof composition (result headline above its supporting quote) */
.proof-stack{text-align:center}
.proof-stack .quote-solo{margin-top:var(--s8)}
/* Ecommerce-only: left-align the name/role so the person's name starts on the same
   left edge as their title (the caption block stays centered as a unit). */
.ecom-proof .q-by > div{text-align:left}

/* Ecommerce-only: on phones the horizontal stepper stacks and left-aligned copy leaves
   a big empty right side, so center the head + each step (icon included) at phone width. */
@media(max-width:480px){
	.ecom-steps-sec > .wrap{text-align:center}
	.ecom-steps-sec .steps-flow .step-ico{margin-left:auto;margin-right:auto}
}

/* Ocean Deep statement block (one per page) */
.ocean{background:var(--ocean);color:var(--paper);padding:var(--s24) 0}
@media(max-width:760px){.ocean{padding:var(--s16) 0}}
.ocean .eyebrow{color:var(--peach)}
.ocean .h-sec{color:var(--paper)}
.ocean .h-sec .c{color:var(--coral-bright)} /* bright coral is only 2.46:1 on ocean; the tint passes 3:1 for display text */
.ocean .lead-body{color:var(--paper-70);max-width:62ch}

/* FAQ — native accordion */
.faq{margin-top:var(--s10);border-top:1px solid var(--rule)}
.faq-i{border-bottom:1px solid var(--rule)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:var(--s6) 0;font-family:var(--body);font-weight:600;
  font-size:clamp(17px,1.8vw,21px);letter-spacing:-.2px;color:var(--ink)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:focus-visible{outline:3px solid var(--coral-deep);outline-offset:3px;border-radius:4px}
.faq-i summary::after{content:"+";font-family:var(--display);font-weight:700;font-size:26px;line-height:1;
  color:var(--coral-deep);transition:transform .2s}
.faq-i[open] summary::after{content:"\2212"}
.faq-i p{font-size:16px;line-height:1.6;color:var(--ink-72);max-width:70ch;padding-bottom:var(--s6)}

.next-ctas{margin-top:var(--s6)}

/* generic page fallback body (pages without a bespoke template yet) */
.page-body{font-size:18px;line-height:1.6;color:var(--ink-82);max-width:70ch}
.page-body p{margin-bottom:var(--s4)}

/* =========================================================
   MOTION — scroll reveal + drawing lines
   ========================================================= */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wipe{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(10px)}
  to{opacity:1;clip-path:inset(0 0 -12% 0);transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.6) rotate(-8deg)}
  60%{opacity:1;transform:translateY(0) scale(1.12) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
@keyframes glow{from{transform:scale(1) translate(0,0);opacity:.55}
  to{transform:scale(1.18) translate(-5%,4%);opacity:.9}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .hero .eyebrow,.hero h1,.hero .sub,.hero .ctas,.trust,.cue{opacity:1!important}
  .hero h1{clip-path:none!important}
  /* transition-based line draws land in their finished state with no sweep */
  .steps-line-fill{transform:scaleX(1)!important;transition:none!important}
  .tl-fill{transition:none!important}
  .mega{transform:none!important}
}

/* =========================================================
   WORKFLOW PAGE (/workflow/)
   "Start small" signature flow diagram + supporting layout.
   Net-new for the Workflow silo hub; element-gated, no-op elsewhere.
   ========================================================= */

/* ---- "The basics" — definition copy left, one real framed photo right. The
   page's single live image; opens on a human note, not another graphic. Frame
   mirrors the locked photo treatment (white mat + coral keyline offset + label
   chip) but namespaced wf- so it never touches the shared .local-* rules. ---- */
.wf-basics-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(40px,5vw,80px);align-items:center}
.wf-basics-copy{max-width:52ch}
.wf-basics-fig{position:relative;width:min(380px,100%);margin:64px auto 14px;isolation:isolate}
@media(min-width:821px){.wf-basics-fig{margin:0 14px 0 auto}}
/* coral keyline offset behind the frame (top-right) */
.wf-fig-keyline{position:absolute;z-index:0;top:-15px;right:-15px;width:72%;height:76%;
  border:2px solid var(--coral);border-radius:16px;pointer-events:none}
/* faint coral halftone block, bottom-left, fading toward the corner */
.wf-fig-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%)}
/* clipped frame holding the background scene */
.wf-fig-shot{position:relative;z-index:1;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  border:6px solid #fff;box-shadow:var(--shadow-card)}
.wf-fig-bg{position:absolute;inset:0;z-index:0;background:var(--cream);
  display:grid;place-items:center;color:color-mix(in srgb,var(--ink) 42%,transparent);
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.wf-fig-bg picture{display:block;width:100%;height:100%}
.wf-fig-bg img{width:100%;height:100%;object-fit:cover;display:block}
.wf-cnr{position:absolute;left:14px;top:14px;width:22px;height:22px;z-index:4;
  border-left:2.5px solid var(--coral);border-top:2.5px solid var(--coral)}
.wf-fig-shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 22%,transparent) 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%)}
/* cutout person, layered ABOVE the frame so head/shoulders rise over the top edge */
.wf-fig-person{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);width:100%;
  filter:drop-shadow(0 16px 18px color-mix(in srgb,var(--ink) 26%,transparent));pointer-events:none}
.wf-fig-person picture{display:block}
.wf-fig-person img{width:100%;height:auto;display:block}
/* temporary person stand-in (rounded top suggests head/shoulders) until the real cutout lands */
.wf-fig-person-ph{display:grid;place-items:center;width:66%;margin:0 auto;aspect-ratio:5/9;
  border-radius:130px 130px 16px 16px;background:color-mix(in srgb,var(--ink) 12%,transparent);
  border:1px dashed color-mix(in srgb,var(--ink) 24%,transparent);
  color:color-mix(in srgb,var(--ink) 52%,transparent);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.wf-fig-chip{position:absolute;z-index:5;left:-16px;bottom:28px;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:12px;padding:9px 13px;box-shadow:var(--shadow-card);
  font-family:var(--body);font-weight:700;font-size:13px;color:var(--ink)}
@media(max-width:820px){
  .wf-basics-grid{grid-template-columns:1fr;gap:var(--s10)}
  .wf-basics-copy{max-width:none}
  .wf-basics-fig{order:2}
  .wf-fig-chip{left:8px}
}

/* ---- Hero: copy left, an always-running "task stack" right. Ported from
   previews/workflow-hero-motion.html (calm level): two tasks gently cycle
   (fill -> check -> float off -> refill) while the rest sit done. Decorative
   + aria-hidden; all real copy is in the .hero-copy column. CSS-only,
   element-gated by .wf-, reduced-motion safe. ---- */
.wf-hero{min-height:90vh;display:flex;align-items:center}
.wf-hero .wrap{width:100%}
.wf-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(48px,6vw,96px);align-items:center}
.wf-hero .hero-copy{max-width:560px}

.wf-tasks{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px}
.wf-cap{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-50);margin-bottom:2px}
.wf-list{display:flex;flex-direction:column;gap:12px}
.wf-task{position:relative;display:flex;align-items:center;gap:12px;border-radius:11px;padding:11px 14px;
  background:color-mix(in srgb,var(--paper) 5%,transparent);border:1px solid var(--paper-line)}
.wf-st{position:relative;width:16px;height:16px;flex:0 0 auto}
.wf-dot{position:absolute;inset:0;border-radius:50%;background:var(--coral)}
.wf-tick{position:absolute;inset:-2px;color:var(--coral-bright);opacity:0}
.wf-tick svg{width:100%;height:100%}
.wf-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.wf-lbl{font-size:13px;font-weight:600;color:var(--paper-70);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-bar{height:4px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--paper) 8%,transparent)}
.wf-fill{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--coral-deep),var(--coral))}
.wf-foot{margin-top:14px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--paper-70)}
.wf-foot .c{color:var(--coral-bright)}

/* motion: only tasks 2 & 4 cycle at a time (calm); the other three sit done */
.wf-list .wf-task:nth-child(2),
.wf-list .wf-task:nth-child(4){animation:wfChip var(--d) ease-in-out var(--dl) infinite}
.wf-list .wf-task:nth-child(2) .wf-fill,
.wf-list .wf-task:nth-child(4) .wf-fill{animation:wfFill var(--d) linear var(--dl) infinite}
.wf-list .wf-task:nth-child(2) .wf-tick,
.wf-list .wf-task:nth-child(4) .wf-tick{animation:wfTick var(--d) ease var(--dl) infinite}
.wf-list .wf-task:nth-child(2) .wf-dot,
.wf-list .wf-task:nth-child(4) .wf-dot{animation:wfDot var(--d) linear var(--dl) infinite}
/* the three completed tasks: full bar + check, no dot */
.wf-list .wf-task:nth-child(1) .wf-fill,
.wf-list .wf-task:nth-child(3) .wf-fill,
.wf-list .wf-task:nth-child(5) .wf-fill{width:100%}
.wf-list .wf-task:nth-child(1) .wf-tick,
.wf-list .wf-task:nth-child(3) .wf-tick,
.wf-list .wf-task:nth-child(5) .wf-tick{opacity:1;transform:scale(1)}
.wf-list .wf-task:nth-child(1) .wf-dot,
.wf-list .wf-task:nth-child(3) .wf-dot,
.wf-list .wf-task:nth-child(5) .wf-dot{opacity:0}

@keyframes wfChip{
  0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  38%{opacity:1;transform:translateY(0) scale(1)}
  44%{transform:translateY(0) scale(1.02)}
  48%{opacity:1;transform:translateY(-4px) scale(1);filter:blur(0)}
  62%{opacity:0;transform:translateY(-46px) scale(.9);filter:blur(6px)}
  62.01%{opacity:0;transform:translateY(18px) scale(.96);filter:blur(3px)}
  86%{opacity:0;transform:translateY(18px) scale(.96);filter:blur(3px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes wfFill{0%{width:0}38%{width:100%}48%{width:100%}48.01%{width:0}100%{width:0}}
@keyframes wfDot{0%,38%{opacity:1}42%,86%{opacity:0}100%{opacity:1}}
@keyframes wfTick{0%,38%{opacity:0;transform:scale(0)}44%{opacity:1;transform:scale(1.2)}50%{transform:scale(1)}60%{opacity:1}62%{opacity:0}100%{opacity:0}}

@media(max-width:820px){
  .wf-hero{min-height:0}
  .wf-hero-grid{grid-template-columns:1fr;gap:var(--s10)}
  .wf-hero .hero-copy{order:1;max-width:none}
  .wf-tasks{order:2;max-width:none;margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .wf-task,.wf-fill,.wf-tick,.wf-dot{animation:none !important}
  .wf-fill{width:100%}
  .wf-tick{opacity:1;transform:scale(1)}
  .wf-dot{opacity:0}
}

.flow-sec .flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:center;margin-top:var(--s6)}
.flow-copy .lead-body{margin-bottom:0}
/* looser leading here so the comma descenders in the multi-line headline
   (SMALL, / IT,) don't collide with the caps on the line below. */
.flow-copy .h-sec{line-height:1}
/* 01-02-03 run HORIZONTALLY as three capped columns (2026-07-20). Number sits
   above its label so the three read as stages side by side, not a stacked list. */
.flow-steps{list-style:none;margin:var(--s10) 0 0;padding:0;display:flex;flex-direction:row;gap:20px}
.flow-steps li{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding-top:11px;border-top:2px solid color-mix(in srgb,var(--coral) 30%,transparent)}
.flow-steps .fs-n{font-family:var(--display);font-weight:800;color:var(--coral-deep);font-size:15px;letter-spacing:.5px}
.flow-steps .fs-t{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink)}
/* The 01-02-03 stages are a desktop-only supporting detail; the copy column
   above already carries the point, so they're dropped on phones (2026-08-09). */
@media(max-width:640px){
  .flow-steps{display:none}
}

/* the diagram panel: leads (in) -> automation bolt -> handled (out) */
.flow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px 22px;
  box-shadow:0 1px 0 rgba(26,26,26,.04),0 26px 50px -28px rgba(26,26,26,.4)}
.flow-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.flow-cap{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:var(--ink-58);margin-bottom:1px}
.fc-dot{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.fc-dot.ok{background:var(--handled)}

.flow-lead{display:flex;align-items:center;gap:9px;background:var(--paper-bg);border:1px solid var(--rule);border-radius:10px;padding:8px 10px}
.flow-lead .fl-av{width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,var(--peach),var(--coral));flex:0 0 auto;opacity:.9}
.flow-lead .fl-ln{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.flow-lead .fl-ln i{height:5px;border-radius:3px;background:var(--rule);display:block}
.flow-lead .fl-ln i:first-child{width:78%}
.flow-lead .fl-ln i:last-child{width:52%}
.flow-lead .fl-new{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:0 0 auto}
.flow-tag{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.3px;padding:3px 9px;border-radius:20px;margin-top:1px}
.flow-tag.before{color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 12%,transparent)}

.flow-bolt{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 10px 22px -8px rgba(26,26,26,.6)}
.flow-bolt svg{width:21px;height:21px}

.flow-done{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;color:var(--ink);background:var(--paper-bg);border:1px solid var(--rule);border-radius:10px;padding:8px 11px}
.flow-done .fl-tick{width:18px;height:18px;border-radius:50%;background:var(--handled);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.flow-done .fl-tick svg{width:11px;height:11px}
.flow-foot{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.4px;color:var(--ink);margin-top:3px}

/* entrance: only when the panel scrolls into view (.in via the .rv observer).
   Natural (no-animation) state is the finished diagram, so reduced-motion and
   no-JS show it complete. Keyframes animate FROM an offset INTO that resting state. */
.flow.in .flow-lead{animation:flLeadIn .5s cubic-bezier(.2,.7,.2,1) both}
.flow.in .flow-lead.l1{animation-delay:.10s}
.flow.in .flow-lead.l2{animation-delay:.22s}
.flow.in .flow-lead.l3{animation-delay:.34s}
.flow.in .flow-tag.before{animation:flFade .4s ease both .5s}
.flow.in .flow-bolt{animation:flZap .7s cubic-bezier(.2,.7,.2,1) both .66s}
.flow.in .flow-done{animation:flDoneIn .5s cubic-bezier(.2,.7,.2,1) both}
.flow.in .flow-done.d1{animation-delay:.95s}
.flow.in .flow-done.d2{animation-delay:1.12s}
.flow.in .flow-done.d3{animation-delay:1.29s}
.flow.in .flow-done .fl-tick{animation:flTick .45s cubic-bezier(.2,.8,.3,1.4) both}
.flow.in .flow-done.d1 .fl-tick{animation-delay:1.08s}
.flow.in .flow-done.d2 .fl-tick{animation-delay:1.25s}
.flow.in .flow-done.d3 .fl-tick{animation-delay:1.42s}
.flow.in .flow-foot{animation:flFade .5s ease both 1.55s}

@keyframes flLeadIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes flDoneIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes flFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes flZap{0%{transform:scale(.5) rotate(-12deg);opacity:0}55%{transform:scale(1.18) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes flTick{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

@media(max-width:820px){
  .flow-sec .flow-grid{grid-template-columns:1fr;gap:var(--s8)}
  .flow{padding:20px 16px;gap:12px}
  .flow-foot{font-size:11.5px}
}

/* ============================================================
   WORKFLOW — "Bigger builds" interactive showcase (.bb-*)
   Tab list on the left, a coded desktop monitor on the right whose screen
   swaps between three panels: a live-ish dashboard, a node-editor workflow
   canvas, and an integrations network.
   Replaced the old "What it looks like for you" before/after cards
   (.foryou-grid/.fy-*) on 2026-07-20; that CSS was removed with the section.
   Behaviour lives in js/workflow.js, loaded only on this page.
   ============================================================ */
.bb{display:grid;grid-template-columns:.86fr 1.14fr;gap:26px;margin-top:36px;align-items:stretch;
  /* Shell color lives in these 4 vars (bezel + neck + foot all read them).
     Graphite chosen 2026-07-20; the warm-aluminium alternative was
     #E6E0D4 / #F4F0E7 / #CFC8B9 / rgba(26,26,26,.32) — too soft on cream. */
  --bb-shell:#1F1F1F;--bb-shell-hi:#2B2B2B;--bb-shell-lo:#131313;--bb-shell-line:rgba(0,0,0,.55)}
.bb-tabs{display:flex;flex-direction:column;gap:12px}
/* white cards with a real keyline: on --paper-bg they were paper-on-paper and read as no card */
.bb-tab{flex:1;display:flex;align-items:center;gap:14px;text-align:left;background:#fff;
  border:1px solid rgba(26,26,26,.16);border-radius:16px;padding:17px 18px;cursor:pointer;
  font:inherit;color:var(--ink);position:relative;overflow:hidden;
  box-shadow:0 2px 4px -2px rgba(26,26,26,.14),0 16px 32px -14px rgba(26,26,26,.45);
  transition:border-color .2s,box-shadow .2s,background .2s}
.bb-tab:hover{border-color:color-mix(in srgb,var(--coral) 55%,transparent);
  box-shadow:0 3px 6px -2px rgba(26,26,26,.16),0 24px 44px -18px rgba(26,26,26,.55)}
.bb-tab.is-active{border-color:color-mix(in srgb,var(--coral) 32%,transparent);
  box-shadow:0 3px 7px -2px rgba(26,26,26,.16),0 36px 62px -22px rgba(26,26,26,.65)}
.bb-tab.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--coral)}
.bb-tab:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.bb-tab-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral-deep);transition:.2s}
.bb-tab.is-active .bb-tab-ic{background:var(--coral);color:var(--cream)}
.bb-tab-ic svg{width:21px;height:21px}
.bb-tab-n{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:16.5px;line-height:1.05}
.bb-tab-d{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--ink)}

/* Desktop-monitor shell: bezel + chin + stand, all coded. No keyboard deck —
   a CSS keyboard never reads right (see the rejected contact-hero laptop). */
.bb-stage{min-height:344px;display:flex;flex-direction:column;align-items:center}
.bb-frame{position:relative;width:100%;flex:1;display:flex;flex-direction:column;
  background:linear-gradient(175deg,var(--bb-shell-hi),var(--bb-shell) 55%,var(--bb-shell-lo));
  border-radius:14px;padding:10px 10px 24px;
  box-shadow:inset 0 0 0 1px var(--bb-shell-line),
    0 2px 6px -3px rgba(26,26,26,.3),0 34px 62px -32px rgba(26,26,26,.75)}
.bb-frame::before{content:"";position:absolute;top:3.5px;left:50%;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent)}
/* browser chrome: a step LIGHTER than the bezel so the two don't merge into one slab */
.bb-bar{display:flex;align-items:center;gap:6px;padding:6px 13px;background:#4C4C46;
  border-bottom:1px solid rgba(0,0,0,.45);border-radius:7px 7px 0 0}
.bb-bar .bb-dot{width:8px;height:8px;border-radius:50%;background:rgba(245,236,219,.3)}
.bb-url{margin-left:10px;font-size:11px;line-height:1.5;
  color:color-mix(in srgb,var(--cream) 78%,transparent);
  background:rgba(0,0,0,.28);border:1px solid rgba(245,236,219,.12);border-radius:6px;padding:2px 10px}
.bb-screen{flex:1;padding:22px;display:grid;background:#fff;border-radius:0 0 7px 7px}
.bb-stand{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.bb-neck{width:88px;height:22px;
  background:linear-gradient(90deg,var(--bb-shell-lo),var(--bb-shell-hi) 42%,var(--bb-shell-lo));
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.bb-foot{width:184px;height:8px;border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,var(--bb-shell),var(--bb-shell-lo));
  box-shadow:0 16px 26px -18px rgba(26,26,26,.8)}
/* all panels share ONE grid cell, so the frame is sized to the tallest panel
   and never resizes when you switch tabs. Inactive = hidden but still occupies space. */
.bb-panel{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;visibility:hidden}
.bb-panel.is-active{visibility:visible;animation:bbFade .4s ease both}
@keyframes bbFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --- dashboard panel --- */
.bb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bb-tile{background:var(--paper-bg);border:1px solid rgba(26,26,26,.08);border-radius:12px;padding:14px}
.bb-k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.bb-v{display:block;margin-top:7px;font-family:var(--display);font-weight:800;font-size:27px;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bb-tr{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;
  color:color-mix(in srgb,var(--ink) 48%,transparent)}
.bb-tr.up{color:#1f7a4d}
.bb-dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bb-dh-t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:15px;color:var(--ink)}
.bb-dh-r{display:flex;align-items:center;gap:14px}
.bb-today{font-size:12px;font-weight:600;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.bb-today b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-left:4px}
.bb-today b.bump{animation:bbBump .5s ease}
@keyframes bbBump{0%{color:var(--coral-deep);transform:translateY(-1px)}100%{color:var(--ink);transform:none}}
.bb-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:#1f7a4d;
  background:color-mix(in srgb,#1f7a4d 10%,transparent);padding:4px 10px;border-radius:999px}
.bb-live i{width:7px;height:7px;border-radius:50%;background:#1f7a4d}
.bb-panel.is-active .bb-live i{animation:bbBlink 1.6s ease-in-out infinite}
@keyframes bbBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,#1f7a4d 55%,transparent)}
  50%{opacity:.5;box-shadow:0 0 0 5px transparent}}
.bb-dash-row{display:grid;grid-template-columns:1.5fr 1.18fr;gap:12px;margin-top:12px;align-items:stretch}
.bb-area{background:var(--paper-bg);border:1px solid rgba(26,26,26,.08);border-radius:12px;padding:13px 14px}
.bb-area-k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.bb-area-svg{width:100%;height:auto;display:block;margin-top:8px}
.bb-area .bb-grid{stroke:rgba(26,26,26,.07);stroke-width:1}
.bb-area-fill{fill:url(#bbAreaG);opacity:0}
.bb-panel.is-active .bb-area-fill{animation:bbFadeIn .7s ease .35s forwards}
@keyframes bbFadeIn{to{opacity:1}}
.bb-area-line{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:620;stroke-dashoffset:620}
.bb-panel.is-active .bb-area-line{animation:bbDraw 1s ease forwards}
@keyframes bbDraw{to{stroke-dashoffset:0}}
.bb-area-dot{fill:var(--coral)}
.bb-panel.is-active .bb-area-dot{animation:bbPing 1.8s ease-out .9s infinite}
@keyframes bbPing{0%{r:4;opacity:1}70%{r:9;opacity:0}100%{r:4;opacity:0}}
.bb-area-dot-core{fill:var(--coral-deep)}
.bb-area-x{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;
  color:color-mix(in srgb,var(--ink) 45%,transparent)}
.bb-feed{background:var(--paper-bg);border:1px solid rgba(26,26,26,.08);border-radius:12px;
  padding:12px;display:flex;flex-direction:column}
.bb-feed-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.bb-feed-live{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:color-mix(in srgb,var(--ink) 42%,transparent)}
.bb-feed-list{display:flex;flex-direction:column;gap:7px;overflow:hidden}
.bb-fr{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;
  background:#fff;border:1px solid rgba(26,26,26,.06)}
.bb-fr.bb-new{animation:bbRowIn .5s ease}
@keyframes bbRowIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.bb-av{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font:700 10.5px var(--body);color:#fff}
.bb-av.c1{background:var(--coral-deep)} .bb-av.c2{background:var(--ocean)}
.bb-av.c3{background:#1f7a4d} .bb-av.c4{background:var(--ink)}
.bb-fm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.22}
.bb-fm b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-ft{font-size:10.5px;color:color-mix(in srgb,var(--ink) 50%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-fp{flex:0 0 auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 7px;border-radius:999px}
.bb-fp.coral{color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 13%,transparent)}
.bb-fp.ocean{color:var(--ocean);background:color-mix(in srgb,var(--ocean) 13%,transparent)}
.bb-fp.green{color:#1a6b43;background:color-mix(in srgb,#1f7a4d 14%,transparent)}
.bb-fp.ink{color:color-mix(in srgb,var(--ink) 62%,transparent);background:rgba(26,26,26,.06)}

/* --- shared caption + svg sizing --- */
.bb-cap{display:block;margin-top:14px;font-size:13px;font-style:italic;
  color:color-mix(in srgb,var(--ink) 60%,transparent)}
.bb-flow,.bb-hub{width:100%;height:auto;display:block}

/* --- workflow node-editor canvas --- */
.bb-flow .fn-card{fill:#fff;stroke:rgba(26,26,26,.10);stroke-width:1.3}
.bb-flow .fn-rail{fill:var(--coral)}
.bb-flow .fn.t-router .fn-rail{fill:var(--ocean)}
.bb-flow .fn.t-action .fn-rail{fill:#1f7a4d}
.bb-flow .fn-icbg{fill:color-mix(in srgb,var(--coral) 12%,transparent)}
.bb-flow .fn.t-router .fn-icbg{fill:color-mix(in srgb,var(--ocean) 14%,transparent)}
.bb-flow .fn.t-action .fn-icbg{fill:color-mix(in srgb,#1f7a4d 14%,transparent)}
.bb-flow .fn-ic{fill:none;stroke:var(--coral-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bb-flow .fn.t-router .fn-ic{stroke:var(--ocean)}
.bb-flow .fn.t-action .fn-ic{stroke:#1a6b43}
.bb-flow .fn-type{font:700 8.5px var(--body);letter-spacing:.13em;fill:color-mix(in srgb,var(--ink) 42%,transparent)}
.bb-flow .fn-title{font:600 13.5px var(--body);fill:var(--ink)}
.bb-flow .fn-stat{fill:#1f7a4d}
.bb-flow .fn.t-trigger .fn-stat{fill:var(--coral)}
.bb-panel.is-active .bb-flow .fn-stat{animation:bbBlink 1.8s ease-in-out infinite}
.bb-flow .wire{fill:none;stroke:rgba(26,26,26,.22);stroke-width:2}
.bb-flow .pkt{fill:var(--coral);offset-rotate:0deg}
.bb-panel.is-active .bb-flow .pkt{animation:bbPkt 1.9s cubic-bezier(.5,0,.5,1) infinite}
.bb-flow .pkt.p1{offset-path:path("M180 125 L206 125")}
.bb-flow .pkt.p2{offset-path:path("M356 125 C374 125 374 66 386 66");animation-delay:.5s}
.bb-flow .pkt.p3{offset-path:path("M356 125 C374 125 374 184 386 184");animation-delay:.9s}
@keyframes bbPkt{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* Horizontal flow is the default; the stacked phone variant (.bb-flow-v) is
   swapped in at the phone breakpoint below. */
.bb-flow-v{display:none}
.bb-flow .pkt.pv1{offset-path:path("M150 70 L150 138")}
.bb-flow .pkt.pv2{offset-path:path("M150 198 L150 266")}
.bb-flow .pkt.pv3{offset-path:path("M150 326 L150 394")}
/* Phone flow packets travel ONE AT A TIME, top to bottom, like the job moving
   through each step: pv1 runs its segment, then pv2, then pv3, then it loops.
   Each fires in its own 1s slot of a 3s cycle (bbPktSeq keeps it hidden the rest
   of the cycle). Higher specificity than the shared .pkt rule above so the
   sequential timing wins. */
.bb-panel.is-active .bb-flow .pkt.pv1,
.bb-panel.is-active .bb-flow .pkt.pv2,
.bb-panel.is-active .bb-flow .pkt.pv3{animation:bbPktSeq 3s linear infinite}
.bb-panel.is-active .bb-flow .pkt.pv2{animation-delay:1s}
.bb-panel.is-active .bb-flow .pkt.pv3{animation-delay:2s}
@keyframes bbPktSeq{0%{offset-distance:0%;opacity:0}4%{opacity:1}24%{opacity:1}28%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}

/* --- integrations network ---
   .bb-hub-tools is the SERVER-RENDERED source of truth for the tool names
   (hard rule: copy lives in HTML, not JS). js/workflow.js reads it to draw the
   SVG; it stays in the DOM as the accessible + crawlable version. Do not
   display:none it — that would drop it from the accessibility tree. */
.bb-hub-tools{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bb-hub .lg{filter:drop-shadow(0 7px 15px rgba(26,26,26,.26))}
.bb-hub .lg-bg{fill:#fff;stroke:rgba(26,26,26,.20);stroke-width:1.6}
.bb-hub .lg-node{cursor:default}
.bb-hub .lg-label{font-family:var(--body);font-weight:600;font-size:11px;pointer-events:none;
  fill:color-mix(in srgb,var(--ink) 72%,transparent);opacity:0;transition:opacity .18s ease}
.bb-hub .lg-node:hover .lg-label{opacity:1}
.bb-hub .lg-more{stroke:color-mix(in srgb,var(--coral) 55%,transparent);stroke-width:1.6;stroke-dasharray:4 4}
.bb-hub .lg-more-t{font-family:var(--body);font-weight:700;font-size:9.5px;fill:var(--coral-deep)}
.bb-hub .net-line{fill:none;stroke:color-mix(in srgb,var(--coral-deep) 62%,transparent);stroke-width:1.5}
.bb-hub .netpkt{fill:var(--coral);offset-rotate:0deg;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--coral) 60%,transparent))}
@keyframes bbNet{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* gentle per-logo float; each badge desynced via inline duration/delay from JS */
.bb-hub .lg-wiggle{transform-box:fill-box;transform-origin:center;animation:bbWig 5s ease-in-out infinite}
@keyframes bbWig{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(3px,-3.8px) rotate(2.4deg)}
  50%{transform:translate(-2.6px,3px) rotate(-1.9deg)}
  75%{transform:translate(3.2px,1.8px) rotate(1.5deg)}
}
.bb-hub .hub-core circle{fill:var(--ink)}
.bb-hub .hub-core text{font-family:var(--display);font-weight:800;font-size:12.5px;
  fill:var(--cream);letter-spacing:.03em}

@media(max-width:860px){
  /* minmax(0,1fr), NOT 1fr: an auto-min track can't shrink below its content's
     min-content width, and all three panels share one grid cell — so the hidden
     dashboard was setting a ~449px floor and pushing the section off-screen. */
  .bb{grid-template-columns:minmax(0,1fr);gap:18px}
  .bb-stage,.bb-tabs,.bb-frame,.bb-screen{min-width:0}
  .bb-dash-row{grid-template-columns:1fr}
  .bb-tab-d{display:none}
  .bb-tabs{flex-direction:row;flex-wrap:wrap}
  /* min-width:0 is load-bearing: without it the long labels set a min-content
     floor, the row refuses to shrink, and the overflow drags the whole section
     (monitor included) past the right edge of the phone. */
  .bb-tab{flex:1 1 30%;min-width:0;flex-direction:column;gap:9px;padding:14px}
  .bb-tab-n{font-size:14px}
}
/* Three tabs across is too tight for these labels on a phone — go full-width
   rows, icon beside the name, which also gives a bigger tap target. */
@media(max-width:560px){
  .bb-tabs{flex-direction:column;gap:9px}
  .bb-tab{flex:0 0 auto;flex-direction:row;align-items:center;gap:12px;padding:13px 14px}
  .bb-stage{min-height:0}
  /* shrink the dashboard's internals so the shared cell stays inside the screen */
  .bb-screen{padding:13px}
  .bb-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bb-tile{padding:9px}
  .bb-k{font-size:9px;letter-spacing:.05em}
  .bb-v{font-size:17px;margin-top:5px}
  .bb-tr{font-size:9.5px;margin-top:6px}
  .bb-dh-t{font-size:12.5px}
  .bb-dh-r{gap:8px}
  .bb-today,.bb-today b{font-size:11px}
  /* PHONE MODE: recast the coded desktop monitor as a phone — rounded slab
     body, speaker slit up top, no window traffic-lights, no monitor stand
     (2026-08-09). The URL pill stays, centered, so it still reads as a live
     app on a phone browser. */
  .bb-frame{max-width:340px;margin-inline:auto;border-radius:42px;padding:11px 11px 12px}
  .bb-frame::before{top:6px;width:44px;height:5px;margin-left:-22px;border-radius:3px;
    background:color-mix(in srgb,var(--ink) 42%,transparent)}
  .bb-bar{justify-content:center;border-radius:30px 30px 0 0;padding:15px 14px 7px}
  .bb-bar .bb-dot{display:none}
  .bb-url{margin-left:0}
  .bb-screen{border-radius:0 0 30px 30px}
  .bb-stand{display:none}
  /* swap the horizontal flow diagram for the stacked phone variant */
  .bb-flow-h{display:none}
  .bb-flow-v{display:block}
}
@media(prefers-reduced-motion:reduce){
  .bb-panel.is-active,
  .bb-panel.is-active .bb-live i,
  .bb-panel.is-active .bb-area-fill,
  .bb-panel.is-active .bb-area-line,
  .bb-panel.is-active .bb-area-dot,
  .bb-panel.is-active .bb-flow .fn-stat,
  .bb-panel.is-active .bb-flow .pkt{animation:none}
  .bb-area-fill{opacity:1}
  .bb-area-line{stroke-dashoffset:0}
  .bb-flow .pkt{opacity:0}
  .bb-hub .netpkt{display:none}
  .bb-hub .lg-wiggle{animation:none}
}

/* Colored-last-word underline that draws itself in (brand standard). Kept
   page-scoped for now; promote to signature-kit.css if a second page wants it. */
.wf-uline{position:relative;display:inline-block}
.wf-uline-svg{position:absolute;left:0;bottom:-.28em;width:100%;height:.16em;overflow:visible}
.wf-uline-svg path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:wfDraw 1s ease .35s forwards}
@keyframes wfDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.wf-uline-svg path{animation:none;stroke-dashoffset:0}}

/* ============================================================
   CARE PLANS (/web-design/care-plans/) — net-new pieces
   Priced tier cards + side-by-side comparison table.
   ============================================================ */

/* ------------------------------------------------------------
   Hero — copy left, a coded "care monitor" right (mirrors the
   compliance-page hero pattern). The monitor holds a real client-
   site screenshot; a heartbeat pulse, three health badges, and an
   always-running loop badge dramatize ongoing care. All motion is
   CSS-only + element-gated by .care-*, and disabled under
   prefers-reduced-motion. Photo wires in via file_exists.
   ------------------------------------------------------------ */
.care-hero{min-height:86vh;display:flex;align-items:center}
.care-hero .wrap{width:100%}
.care-hero-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:1.02fr .98fr;gap:var(--s12);align-items:center}
.care-hero .hero-copy{max-width:560px}
@media(max-width:900px){
  .care-hero{min-height:0;padding-top:var(--s12)}
  .care-hero-grid{grid-template-columns:1fr;gap:var(--s10)}
}

/* the frame — a dark card lifted off the dark hero with a coral edge glow */
.care-mon{position:relative;width:min(460px,100%);justify-self:end;
  background:color-mix(in srgb,var(--paper) 5%,var(--ink));
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  border-radius:16px;padding:14px 14px 16px;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85),
    0 0 0 1px color-mix(in srgb,var(--coral) 12%,transparent);
  animation:care-float 7s ease-in-out infinite}
@media(max-width:900px){.care-mon{justify-self:start}}

/* browser chrome */
.care-mon-bar{display:flex;align-items:center;gap:7px;padding:2px 6px 12px}
.care-mon-bar>span{width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 22%,transparent)}
.care-mon-url{flex:1;min-width:0;height:16px;margin:0 4px 0 8px;border-radius:5px;
  background:color-mix(in srgb,var(--paper) 8%,transparent)}
.care-mon-live{flex:none;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--body);font-weight:700;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.9px;color:var(--cream);white-space:nowrap;
  background:var(--coral-deep);padding:4px 9px;border-radius:999px}
.care-mon-live i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--cream);
  animation:care-blink 1.8s ease-in-out infinite}

/* the screenshot viewport */
.care-mon-shot{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;
  background:var(--cream)}
.care-mon-shot picture,.care-mon-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center}

/* placeholder micro-UI (shown until the real screenshot lands) */
.care-mon-ph{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:11px;padding:26px 28px;background:var(--cream)}
.care-mon-ph .cmp-h{width:56%;height:15px;border-radius:5px;background:var(--coral)}
.care-mon-ph .cmp-line{width:82%;height:9px;border-radius:5px;
  background:color-mix(in srgb,var(--ink) 16%,transparent)}
.care-mon-ph .cmp-line.short{width:60%}
.care-mon-ph .cmp-chip{align-self:flex-start;margin-top:4px;
  font-family:var(--body);font-weight:700;font-size:11px;color:var(--cream);
  background:var(--coral-deep);padding:6px 12px;border-radius:6px}

/* heartbeat pulse across the foot of the shot */
.care-pulse{position:absolute;left:0;right:0;bottom:0;width:100%;height:38px;
  display:block;pointer-events:none}
.care-pulse path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.care-pulse-base{stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.5}
.care-pulse-run{stroke:var(--coral);stroke-width:2.2;
  stroke-dasharray:34 620;stroke-dashoffset:654;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--coral) 70%,transparent));
  animation:care-sweep 2.6s linear infinite}

/* always-running loop badge, bottom-left, overlapping the frame edge */
.care-loop{position:absolute;left:-14px;bottom:-14px;width:62px;height:62px;
  border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--paper) 6%,var(--ink));
  border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.7)}
.care-loop-glyph{width:22px;height:22px;color:var(--coral)}
.care-loop-dot{position:absolute;width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb,var(--peach) 65%,transparent)}
.care-loop-dot.d1{top:5px;left:50%;transform:translateX(-50%)}
.care-loop-dot.d2{right:5px;top:50%;transform:translateY(-50%)}
.care-loop-dot.d3{bottom:5px;left:50%;transform:translateX(-50%)}
.care-loop-dot.d4{left:5px;top:50%;transform:translateY(-50%)}
.care-loop-orbit{position:absolute;inset:5px;animation:care-orbit 3.4s linear infinite}
.care-loop-orbit i{position:absolute;top:-3px;left:50%;margin-left:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 6px color-mix(in srgb,var(--coral) 80%,transparent)}

/* health badges under the frame */
.care-mon-stats{display:flex;flex-wrap:wrap;gap:8px;padding:14px 2px 2px}
.care-stat{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-weight:600;font-size:12px;color:var(--paper-70);
  background:color-mix(in srgb,var(--paper) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--paper) 9%,transparent);
  padding:6px 11px;border-radius:999px}
.care-stat-live{width:7px;height:7px;border-radius:50%;background:#39B87A;
  box-shadow:0 0 0 3px color-mix(in srgb,#39B87A 22%,transparent)}
.care-stat-check{position:relative;width:13px;height:13px}
.care-stat-check::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--coral);border-width:0 2px 2px 0;transform:rotate(43deg)}

@keyframes care-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes care-sweep{to{stroke-dashoffset:0}}
@keyframes care-orbit{to{transform:rotate(360deg)}}
@keyframes care-blink{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  .care-mon{animation:none}
  .care-mon-live i,.care-pulse-run,.care-loop-orbit{animation:none}
  .care-pulse-run{stroke-dasharray:none;stroke-dashoffset:0;opacity:.9}
}

/* visually-hidden helper (a11y captions etc.) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Why it matters: copy + a neglected "site health" panel. The deliberate
   mirror of the hero's healthy monitor — this one has drifted (updates due,
   plugins stale, backup months old). Rows cascade up on reveal; the flag dot
   pulses. All CSS-only + reduced-motion safe (guards at the foot of this block). */
.drift-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:center}
.drift-copy{max-width:520px}
@media(max-width:880px){.drift-grid{grid-template-columns:1fr;gap:var(--s9)}}

/* off-palette status colors, scoped to this panel — it's a deliberate "unbranded
   monitoring UI" graphic (red = problem, amber = warning), not brand coral */
.drift-panel{position:relative;justify-self:end;width:min(440px,100%);
  --drift-red:#C0392B;--drift-amber:#C77B14;
  background:var(--paper-bg);border:1px solid var(--rule);border-radius:14px;
  padding:var(--s6) var(--s6) var(--s4);box-shadow:var(--shadow-card)}
@media(max-width:880px){.drift-panel{justify-self:start;width:100%}}
.drift-panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:var(--s4);margin-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.drift-panel-title{font-family:var(--body);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:1.4px;color:var(--ink-58)}
.drift-panel-flag{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--body);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--drift-red)}
.drift-panel-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--drift-red);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--drift-red) 20%,transparent);
  animation:drift-pulse 1.9s ease-in-out infinite}
.drift-list{list-style:none;margin:0;padding:0}
.drift-row{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.drift-row:last-child{border-bottom:0}
/* round status dots (not coral diamonds): red = problem, amber = warning */
.drift-ico{flex:none;width:9px;height:9px;border-radius:50%;background:var(--drift-red)}
.drift-ico.warn{background:var(--drift-amber)}
.drift-label{flex:1;font-weight:600;font-size:15px;color:var(--ink)}
.drift-state{flex:none;font-family:var(--body);font-weight:600;font-size:12.5px;
  color:var(--ink-58);white-space:nowrap}

/* panel itself stays put (override base .rv); the rows do the revealing */
.drift-panel.rv{opacity:1;transform:none;transition:none}
.drift-panel.rv .drift-row{opacity:0;transform:translateY(10px)}
.drift-panel.in .drift-row{animation:drift-rise .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(.1s + var(--i,0)*.09s)}
@keyframes drift-rise{to{opacity:1;transform:none}}
@keyframes drift-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* --- Three priced tiers --- */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:var(--s10);align-items:start}
.plan-card{position:relative;display:flex;flex-direction:column;background:var(--paper-bg);
  border:1px solid var(--rule);border-radius:18px;padding:var(--s8) var(--s6) var(--s6);
  box-shadow:var(--shadow-card)}
/* card CTA spans the card, content left-aligned (matches the mockup) */
.plan-card .btn{margin-top:auto;align-self:stretch;justify-content:flex-start}
.plan-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:.5px;color:var(--ink)}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:var(--s2) 0 var(--s4)}
.pp-amt{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;color:var(--ink)}
.pp-per{font-weight:600;font-size:14px;color:var(--ink-58)}
.plan-d{font-size:15.5px;line-height:1.55;color:var(--ink-82);margin-bottom:var(--s6)}

/* featured (Care+) wears a coral edge (no lift — card tops align, matching the mockup) */
.plan-card.featured{border:2px solid var(--coral-deep);box-shadow:var(--shadow-lg)}
.plan-card.featured .pp-amt{color:var(--coral-deep)}
.plan-flag{position:absolute;top:-12px;left:var(--s6);background:var(--coral-deep);color:var(--cream);
  font-family:var(--body);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;
  padding:6px 12px;border-radius:99px}
@media(prefers-reduced-motion:reduce){.plan-card.featured{transform:none}}

.plans-annual{display:flex;align-items:center;gap:10px;margin-top:var(--s8);
  font-weight:600;font-size:15px;color:var(--ink-72)}
.pa-mark{flex:none;width:9px;height:9px;background:var(--coral);transform:rotate(45deg)}

@media(max-width:860px){
  .plans-grid{grid-template-columns:1fr;gap:22px}
  .plan-card.featured{transform:none;order:-1}
}

/* --- Comparison table --- */
.compare-scroll{margin-top:var(--s10);overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:collapse;min-width:560px}
.compare th,.compare td{padding:15px var(--s4);text-align:center;
  border-bottom:1px solid var(--rule)}
.compare thead th{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:18px;letter-spacing:.5px;color:var(--ink);vertical-align:bottom;
  border-bottom:2px solid var(--rule-strong)}
.compare .cmp-feat,.compare tbody th{text-align:left;font-family:var(--body);font-weight:600;
  font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.compare tbody th{color:var(--ink-82)}
.cmp-price{display:block;margin-top:4px;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--ink-58)}
.compare td{font-weight:600;font-size:15px;color:var(--ink-82)}

/* highlighted Care+ column */
.compare th.cmp-pop,.compare td.cmp-pop{background:color-mix(in srgb,var(--coral) 7%,transparent)}
.compare thead th.cmp-pop{border-bottom-color:var(--coral-deep)}
.compare tbody tr:last-child td{border-bottom:0}

/* check / dash glyphs */
.cmp-yes,.cmp-no{display:inline-block;vertical-align:middle}
.cmp-yes{width:18px;height:18px;position:relative}
.cmp-yes::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid var(--coral-deep);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.cmp-no{width:14px;height:2px;background:var(--ink-58);border-radius:2px}

.cmp-flag{color:var(--coral-deep);font-weight:700}
.compare-note{margin-top:var(--s4);font-size:13.5px;color:var(--ink-58)}

/* Phones: drop the 560px min-width and compress so all three tiers fit side by side
   instead of the first column ending cleanly at the edge with no sign more exists.
   Price sub-lines are hidden here (the plan cards above carry the prices). */
@media(max-width:560px){
  .compare{min-width:0}
  .compare th,.compare td{padding:11px 6px}
  .compare thead th{font-size:14px;letter-spacing:0}
  .compare .cmp-feat,.compare tbody th{font-size:12.5px}
  .compare td{font-size:13px}
  .cmp-price{display:none}
}

/* the Partner-difference ocean band keeps copy readable at a comfortable measure */
.partner-sec .lead-body{max-width:60ch}

/* --- Care-page motion: cards stagger in, then the comparison table cascades
   row by row with its checkmarks popping as each row lands (the page's signature
   mid-page motion moment). Reveal is driven by the existing .rv/.in observer;
   reduced-motion guards sit at the foot. --- */
.plans-grid .plan-card.rv:nth-child(1){transition-delay:.05s}
.plans-grid .plan-card.rv:nth-child(2){transition-delay:.16s}
.plans-grid .plan-card.rv:nth-child(3){transition-delay:.27s}

/* table container holds still; rows + checks do the revealing (rows carry --i) */
.compare-scroll.rv{opacity:1;transform:none;transition:none}
.compare-scroll.rv tbody tr{opacity:0;transform:translateY(9px)}
.compare-scroll.in tbody tr{animation:drift-rise .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i,0)*.06s)}
.compare-scroll.rv .cmp-yes::after{opacity:0;transform:rotate(43deg) scale(0)}
.compare-scroll.in .cmp-yes::after{animation:cmp-pop .42s cubic-bezier(.2,.8,.3,1.35) both;
  animation-delay:calc(.18s + var(--i,0)*.06s)}
@keyframes cmp-pop{0%{opacity:0;transform:rotate(43deg) scale(0)}
  62%{opacity:1;transform:rotate(43deg) scale(1.25)}
  100%{opacity:1;transform:rotate(43deg) scale(1)}}

@media(prefers-reduced-motion:reduce){
  .drift-row{opacity:1!important;transform:none!important}
  .compare-scroll.rv tbody tr{opacity:1;transform:none}
  .compare-scroll.rv .cmp-yes::after{opacity:1;transform:rotate(43deg) scale(1)}
}

/* --- "One bill, not five" — value legibility: an à-la-carte vendor stack (neutral
   card) vs one Care+ plan (peach, coral-edged). Kills the price objection with a
   like-for-like read. Coral-diamond markers on the bundle side match the page's
   editorial-list convention. --- */
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s10);align-items:stretch}
@media(max-width:860px){.value-grid{grid-template-columns:1fr;gap:18px}.vcard.bundle{order:-1}}
.vcard{display:flex;flex-direction:column;border-radius:12px;padding:var(--s8) var(--s6)}
.vcard.alacarte{background:var(--paper-bg);border:1px solid var(--rule)}
.vcard.bundle{background:var(--peach);border:2px solid var(--coral-deep)}
.vcard-lab{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ink-58);margin-bottom:var(--s4)}
.vcard.bundle .vcard-lab{color:var(--coral-deep)}
.vline{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--rule);font-size:15px}
.vline:first-of-type{border-top:1px dashed var(--rule)}
.vname{color:var(--ink-82)}
.vcost{flex:none;font-family:var(--body);font-weight:600;color:var(--ink-58);white-space:nowrap}
.vcard.bundle .vline{border-color:color-mix(in srgb,var(--coral-deep) 22%,transparent)}
.vcard.bundle .vname{display:flex;align-items:center;gap:9px;color:var(--ink)}
.vcard.bundle .vname::before{content:"\2713";flex:none;color:var(--coral-deep);font-weight:800;font-size:13px;line-height:1}
.vfoot{margin-top:auto;padding-top:var(--s6)}
.vsum{font-family:var(--display);font-weight:900;font-size:27px;text-transform:uppercase;
  letter-spacing:-.5px;color:var(--ink)}
.vcard.bundle .vsum{color:var(--coral-deep)}
.vsub{font-size:13px;color:var(--ink-58);margin-top:5px}
.vcard.bundle .vsub{color:var(--coral-deep)}

/* --- Partner difference: two-column ocean band — copy + CTA left, a coded
   performance-dashboard mockup right. Believable KPI tiles over a rising line that
   DRAWS when the section reveals (the page's second, quieter motion moment). The
   card holds still (overrides base .rv); the inner parts animate on .in. All
   values are illustrative. Reduced-motion + no-.in guard at the foot. --- */
.partner-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:center}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr;gap:var(--s9)}}
.partner-cta{margin-top:var(--s6)}

.partner-chart{justify-self:end;width:min(440px,100%)}
@media(max-width:900px){.partner-chart{justify-self:start}}
.pchart{background:rgba(245,236,219,.05);border:1px solid rgba(245,236,219,.14);
  border-radius:16px;padding:20px 20px 16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.pchart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pchart-label{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--paper-70)}
.pchart-delta{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);
  font-weight:700;font-size:12px;color:var(--coral-bright)}
.pchart-delta svg{width:12px;height:12px;fill:none;stroke:var(--coral-bright);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pstat{background:rgba(245,236,219,.05);border:1px solid rgba(245,236,219,.13);
  border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.pstat-lab{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--paper-70)}
.pstat-val{font-family:var(--display);font-weight:900;font-size:31px;line-height:1;
  color:var(--paper);display:flex;align-items:baseline;gap:3px}
.pstat-val em{font-family:var(--body);font-style:normal;font-weight:600;font-size:13px;
  color:rgba(245,236,219,.55)}
.pstat-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);
  font-weight:600;font-size:11px;color:var(--coral-bright)}
.pstat-delta svg{width:11px;height:11px;fill:none;stroke:var(--coral-bright);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pchart-plot{position:relative;height:132px}
.pchart-svg{width:100%;height:100%;display:block;overflow:visible}
.pgrid{stroke:rgba(245,236,219,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.parea{opacity:0}
.pline{fill:none;stroke:var(--coral-bright);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.pdot,.pring{position:absolute;left:95.3%;top:16.7%;width:12px;height:12px;
  margin:-6px 0 0 -6px;border-radius:50%}
.pdot{background:var(--coral-bright);opacity:0;
  box-shadow:0 0 10px color-mix(in srgb,var(--coral-bright) 70%,transparent)}
.pring{border:2px solid var(--coral-bright);opacity:0}
.pchart-x{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--body);
  font-weight:600;font-size:11px;letter-spacing:.4px;color:rgba(245,236,219,.5)}

/* card holds still; the inner tiles + line reveal when the section scrolls in */
.partner-chart.rv{opacity:1;transform:none;transition:none}
.partner-chart.rv .pstat{opacity:0;transform:translateY(8px)}
.partner-chart.in .pstat{animation:pstat-in .55s cubic-bezier(.4,0,.1,1) both}
.partner-chart.in .pstat:nth-child(1){animation-delay:.1s}
.partner-chart.in .pstat:nth-child(2){animation-delay:.24s}
.partner-chart.in .pline{animation:pline-draw 1.5s cubic-bezier(.4,0,.1,1) .55s forwards}
.partner-chart.in .parea{animation:parea-in .8s ease 1.1s forwards}
.partner-chart.in .pdot{animation:pdot-in .5s ease 1.95s forwards}
.partner-chart.in .pring{animation:pring 2.4s ease-out 2.25s infinite}
@keyframes pstat-in{to{opacity:1;transform:none}}
@keyframes pline-draw{to{stroke-dashoffset:0}}
@keyframes parea-in{to{opacity:1}}
@keyframes pdot-in{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes pring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* reduced-motion / no-JS: show the dashboard fully drawn, no animation */
@media(prefers-reduced-motion:reduce){
  .partner-chart .pstat{opacity:1;transform:none}
  .partner-chart .pline{stroke-dashoffset:0}
  .partner-chart .parea,.partner-chart .pdot{opacity:1}
  .partner-chart .pring{display:none}
}

/* ============================================================
   COMPLIANCE & ACCESSIBILITY (/web-design/website-compliance/)
   Net-new pieces: hero "scan" panel, exposure diptych, straight-talk
   statement. Element-gated by .cpl- prefix; no-op on every other page.
   ============================================================ */

/* 1 · Hero — copy left, coded accessibility/privacy "scan" panel right. The panel
   stays in flow (stacks under the copy on small screens) rather than floating. */
.cpl-hero{min-height:88vh;display:flex;align-items:center}
.cpl-hero .wrap{width:100%}
.cpl-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;
  gap:var(--s12);align-items:center}
@media(max-width:900px){.cpl-hero-grid{grid-template-columns:1fr;gap:var(--s10)}}
.cpl-hero .hero-copy{max-width:560px}

/* the scan panel — a dark card sitting on the dark hero, lifted with a coral edge glow */
.cpl-aud{position:relative;width:min(420px,100%);justify-self:end;
  background:color-mix(in srgb,var(--paper) 5%,var(--ink));
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  border-radius:16px;padding:22px 22px 24px;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85)}
@media(max-width:900px){.cpl-aud{justify-self:start}}
.cpl-aud-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 10%,transparent)}
.cpl-aud-title{font-family:var(--body);font-weight:600;font-size:14px;color:var(--paper)}
.cpl-aud-badge{flex:none;font-family:var(--body);font-weight:700;font-size:10px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--coral);
  background:color-mix(in srgb,var(--coral) 16%,transparent);
  padding:5px 10px;border-radius:999px}
.cpl-aud-rows{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column}
.cpl-aud-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--paper) 7%,transparent)}
.cpl-aud-label{font-family:var(--body);font-weight:500;font-size:14.5px;color:var(--paper-70)}
.cpl-tickwrap{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  color:var(--coral);background:color-mix(in srgb,var(--coral) 14%,transparent)}
.cpl-tickwrap svg{width:15px;height:15px;display:block}
/* checks read as drawn by default (no-JS / reduced-motion); GSAP redraws them on load */
.cpl-tick{stroke-dasharray:30;stroke-dashoffset:0}
/* progress meter under the rows fills coral */
.cpl-aud-meter{margin-top:16px;height:6px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 10%,transparent)}
.cpl-aud-fill{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--coral-deep),var(--coral));transform-origin:left}

/* 2 · What's at stake — two-up exposure diptych */
.cpl-diptych{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s10);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper-bg)}
@media(max-width:680px){.cpl-diptych{grid-template-columns:1fr}}
.cpl-expo{padding:var(--s8)}
.cpl-expo + .cpl-expo{border-left:1px solid var(--rule)}
@media(max-width:680px){.cpl-expo + .cpl-expo{border-left:0;border-top:1px solid var(--rule)}}
.cpl-expo-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 10%,transparent)}
.cpl-expo-ic svg{width:24px;height:24px;display:block}
.cpl-expo-t{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:25px;letter-spacing:.4px;color:var(--ink);margin-top:var(--s4)}
.cpl-expo-d{font-size:16px;line-height:1.55;color:var(--ink-82);margin-top:8px;max-width:40ch}
/* "What that looks like" — coral-diamond checklist grounding each exposure */
.cpl-expo-sub{display:block;margin-top:var(--s6);font-family:var(--body);font-weight:600;
  font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--coral-deep)}
.cpl-expo-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:40ch}
.cpl-expo-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink-82)}
.cpl-expo-list li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;
  background:var(--coral);transform:rotate(45deg);border-radius:1px}

/* 3 · How we help — editorial diamond-marked row (no numerals). Three items, each led
   by a small coral diamond and a display title, divided by a top hairline. */
.cpl-built{margin-top:var(--s10);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s10)}
@media(max-width:760px){.cpl-built{grid-template-columns:1fr;gap:var(--s8)}}
.cpl-built-i{padding-top:var(--s6);border-top:1px solid var(--rule)}
.cpl-built-dia{display:block;width:11px;height:11px;background:var(--coral);
  transform:rotate(45deg);border-radius:1px;margin-bottom:var(--s4)}
.cpl-built-t{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:.4px;color:var(--ink)}
.cpl-built-d{font-size:15px;line-height:1.55;color:var(--ink-82);margin-top:8px;max-width:34ch}

/* 4 · Straight talk — dark statement centered, the honest paragraph carried at display
   size as a manifesto line. */
.cpl-straight .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.cpl-straight-lead{color:var(--paper);margin-top:var(--s6);text-align:center;
  font-size:clamp(19px,2.15vw,27px);line-height:1.36;max-width:34ch}
.cpl-straight-lead .c{color:var(--coral)}

/* 5 · Next step — copy left, a compact light "comes with the build" scan card right */
.cpl-next-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:center}
@media(max-width:820px){.cpl-next-grid{grid-template-columns:1fr;gap:var(--s10)}}
.cpl-next-copy .ctas{margin-top:var(--s8)}
.cpl-scan{width:min(400px,100%);justify-self:end;background:var(--paper-bg);
  border:1px solid var(--rule);border-radius:16px;padding:22px 22px 24px;box-shadow:var(--shadow-card)}
@media(max-width:820px){.cpl-scan{justify-self:start}}
.cpl-scan-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.cpl-scan-title{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink)}
.cpl-scan-badge{flex:none;font-family:var(--body);font-weight:700;font-size:10px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 12%,transparent);
  padding:5px 10px;border-radius:999px}
.cpl-scan-rows{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column}
.cpl-scan-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.cpl-scan-row:last-child{border-bottom:0}
.cpl-scan-label{font-family:var(--body);font-weight:500;font-size:14.5px;color:var(--ink-82)}
.cpl-scan-tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.cpl-scan-tick svg{width:15px;height:15px;display:block}

/* ============================================================
   ABOUT (/about/)
   Net-new pieces: hero "foundation" stack, editorial story lead.
   Steps / who-cards / ocean are reused kit. .abt- prefix = no-op elsewhere.
   ============================================================ */

/* 1 · Hero — copy left, coded foundation stack right (Design/Build/Care). */
.abt-hero{min-height:86vh;display:flex;align-items:center}
.abt-hero .wrap{width:100%}
.abt-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;
  gap:var(--s12);align-items:center}
@media(max-width:900px){.abt-hero-grid{grid-template-columns:1fr;gap:var(--s12)}}
.abt-hero .hero-copy{max-width:580px}
/* Lift the intro a notch so it doesn't read tiny under the big display H1; keep the
   measure tight (short lines) rather than widening the column. About-scoped. */
.abt-hero .subhero-sub{font-size:clamp(17px,1.55vw,20px);line-height:1.55;max-width:50ch}

/* Founder portrait — Nicolas's cutout composed into the brand's coded frame: a warm
   peach "stage" panel behind the lower body, a coral keyline peeking out top-right, a
   coral halftone block bottom-left, the four service chips floating around him, and a
   handwritten hello below with an arrow pointing up to him. His head rises above the
   panel so a transparent cutout reads as an intentional composition, not a floating
   sticker. Accents are decorative; the <img> keeps its alt. Visible state is the CSS
   default (no-JS / reduced-motion safe). */
.abt-portrait{position:relative;justify-self:end;display:flex;flex-direction:column;
  align-items:center;width:min(310px,100%);margin:6px 26px 0 auto;isolation:isolate}
@media(max-width:900px){.abt-portrait{justify-self:center;margin:8px auto 0;width:min(290px,76vw)}}
/* the peach card is a fixed frame; the photo is anchored to its BOTTOM so the card
   holds the (hard-cropped) bottom of the image, while his head rises above the top
   edge and his shoulders spill past the sides. Chips float around it (no clipping). */
.abt-pt-stage{position:relative;width:100%;aspect-ratio:4/5}
/* the peach card fills the stage */
.abt-pt-panel{position:absolute;z-index:1;inset:0;background:var(--peach);border-radius:20px;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.85)}
/* coral keyline offset, peeks out top-right of the card */
.abt-pt-keyline{position:absolute;z-index:0;right:-13px;top:7%;width:66%;height:62%;
  border:2px solid var(--coral);border-radius:18px}
/* halftone dot block, peeks out bottom-left */
.abt-pt-dots{position:absolute;z-index:0;left:-15px;bottom:10%;width:38%;height:40%;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 55%,transparent) 1.3px,transparent 1.5px);
  background-size:12px 12px;border-radius:12px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 78%);
  mask-image:linear-gradient(135deg,#000,transparent 78%)}
/* the cutout, bottom-anchored inside the card; its flat bottom edge sits on the card's
   bottom so nothing hangs off. Solid (no fade); head + sides overflow the card. */
.abt-pt-img{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;display:block}
.abt-pt-img img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 30px color-mix(in srgb,#000 46%,transparent))}
/* four service chips floating around the portrait — dark pills, coral diamond */
.abt-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;font-size:16.5px;color:var(--paper);
  background:color-mix(in srgb,var(--paper) 6%,var(--ink));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;padding:10px 15px;box-shadow:0 20px 40px -22px rgba(0,0,0,.9)}
.abt-dia{flex:none;width:8px;height:8px;background:var(--coral);transform:rotate(45deg)}
.p-web{top:-3%;left:-20%}
.p-workflow{top:-10%;right:-18%}
.p-care{bottom:34%;left:-18%}
.p-compliance{bottom:16%;right:-16%}
@media(max-width:900px){
  .p-web{left:-11%}.p-workflow{right:-9%}.p-care{left:-9%}.p-compliance{right:-7%}
}
/* handwritten hello below the image, off-centered to the right, with a flipped arrow
   on its right end curving up to him — Caveat is the one place the brand allows a
   script face. */
.abt-pt-hi{display:inline-flex;align-items:flex-end;gap:12px;align-self:flex-end;
  margin-top:34px;margin-right:2px;
  font-family:var(--hand);font-weight:700;font-size:clamp(26px,3.2vw,32px);
  color:var(--coral);line-height:1;pointer-events:none}
@media(max-width:900px){.abt-pt-hi{margin-right:6px}}
.abt-pt-arrow{width:24px;height:38px;flex:none;color:var(--coral);margin-bottom:4px}

/* 2 · Story — editorial, held to a ~2/3 measure so the copy doesn't run bare
   across the band. A faint giant wordmark ghosts off the open right side (brand
   watermark texture), and a handwritten sign-off closes the founder's story. */
.abt-story{position:relative;overflow:hidden}
.abt-story .wrap{position:relative}
.abt-story .eyebrow,.abt-story .h-sec,.abt-story-body{position:relative;z-index:1}
/* Story copy uses the page-standard .lead-body verbatim (no size/colour override),
   so it matches the body text everywhere else on the page. */
.abt-story-body{max-width:60ch;margin-top:var(--s8)}
.abt-story-sign{display:block;margin-top:var(--s8)}
.abt-story-signname{display:block;line-height:1;
  font-family:var(--hand);font-weight:700;font-size:clamp(30px,3.4vw,38px);color:var(--coral)}
.abt-story-signrole{display:block;margin-top:10px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-72)}
/* Faint wordmark watermark warming the open right side. Uses the locked stacked
   master as a mask so the letterforms/lockup stay correct and we recolor it to a
   single ink tone (the master is two-colour); anchored to the container edge. */
.abt-story-wm{position:absolute;z-index:0;top:50%;right:-11%;transform:translateY(-50%);
  width:min(52%,560px);aspect-ratio:4068/3520;pointer-events:none;
  background:var(--ink);opacity:.06;
  -webkit-mask:url(assets/wordmark/wordmark-stacked-ondark.svg) center/contain no-repeat;
          mask:url(assets/wordmark/wordmark-stacked-ondark.svg) center/contain no-repeat}
@media(max-width:820px){.abt-story-wm{display:none}}

/* 3 · How we work — About-scoped vertical journey rail (replaces the numbered
   .steps grid, which reads as a repeat of the homepage). Headline + lead pin on
   the left; the four phases run as a connected vertical timeline on the right —
   a coral rail draws down and diamond nodes pop as the section enters view. All
   about-scoped; the shared .steps kit on other pages is untouched. */
.abt-work-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:var(--s20);align-items:start;margin-top:var(--s12)}
.abt-work-intro{position:sticky;top:calc(var(--s24) + var(--s6))}
.abt-work-intro .lead-body{max-width:36ch;margin-top:var(--s6)}

.abt-journey{position:relative;padding-left:var(--s2)}
.aj-rail{position:absolute;left:13px;top:14px;bottom:18px;width:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.aj-rail-fill{position:absolute;inset:0;background:var(--coral);transform:scaleY(0);transform-origin:top;transition:transform 1.3s cubic-bezier(.4,0,.2,1) .1s;will-change:transform}
.abt-journey.in:not(.aj-driven) .aj-rail-fill{transform:scaleY(1)}

.aj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s12)}
.aj-phase{position:relative;padding-left:34px}
.aj-node{position:absolute;left:-1px;top:8px;width:14px;height:14px;background:var(--paper-bg);
  border:2px solid var(--coral-deep);box-sizing:border-box;
  transform:rotate(45deg) scale(.35);opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.3,1.35),opacity .4s ease,background .45s ease}
.abt-journey.in:not(.aj-driven) .aj-node{opacity:1;transform:rotate(45deg) scale(1);background:var(--coral)}
.abt-journey.in:not(.aj-driven) .aj-phase:nth-child(1) .aj-node{transition-delay:.18s}
.abt-journey.in:not(.aj-driven) .aj-phase:nth-child(2) .aj-node{transition-delay:.45s}
.abt-journey.in:not(.aj-driven) .aj-phase:nth-child(3) .aj-node{transition-delay:.72s}
.abt-journey.in:not(.aj-driven) .aj-phase:nth-child(4) .aj-node{transition-delay:.99s}

.aj-title{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:27px;line-height:.95;letter-spacing:.3px;color:var(--ink)}
.aj-desc{font-size:15.5px;line-height:1.55;color:var(--ink-72);margin-top:9px;max-width:40ch}

/* --- Pinned scroll takeover (JS adds .aj-driven; see motion.js). A single scrubbed
   GSAP timeline pins the section and drives the rail fill + each phase's brightening
   as you scroll. CSS transitions on these props are OFF here on purpose — the pin's
   per-frame recalcs would otherwise freeze a half-finished CSS transition; GSAP owns
   the interpolation. These rules are just the pre-JS-init dim state (no flash) and
   only apply on tall desktop viewports (gated in gsap.matchMedia). --- */
.abt-journey.aj-driven .aj-rail-fill{transition:none}
.abt-journey.aj-driven .aj-node{opacity:1;transform:rotate(45deg) scale(1);background:var(--paper-bg);transition:none}
.abt-journey.aj-driven .aj-title,
.abt-journey.aj-driven .aj-desc{opacity:.38;transition:none}
/* Any CSS .rv reveal INSIDE the pinned section (intro eyebrow/headline/lead, and the
   journey container itself) must be shown flat with no transition: a CSS transition
   caught mid-flight when the pin engages freezes partway and leaves the block blank
   on a fast scroll. The pin's rail-draw + phase-lighting is the section's motion. */
.abt-work:has(.abt-journey.aj-driven) .rv{opacity:1;transform:none;transition:none}
/* While pinned, the section is fixed to the viewport. It must fill the whole screen
   and center its content: otherwise the section (shorter than a tall viewport) leaves
   an empty strip below it that exposes the dark body background, and the content jams
   to the top. Filling to 100svh + centering fixes both the "off-centre" look and the
   stray #1A1A1A band. Only applies on the desktop viewports where the pin mounts. */
.abt-work:has(.abt-journey.aj-driven){min-height:100svh;display:flex;align-items:center}
.abt-work:has(.abt-journey.aj-driven) > .wrap{width:100%}
/* While pinned the intro must NOT be sticky: the section is fixed, so a sticky intro
   snaps to a new spot the instant the pin releases (the "jump"). Sit it static and
   centre it against the taller steps column so the whole block moves as one. Sticky
   is kept for the non-pinned short-desktop fallback (rule above, outside this :has). */
.abt-work:has(.abt-journey.aj-driven) .abt-work-intro{position:static;top:auto;align-self:center}

@media(max-width:900px){
  .abt-work-grid{grid-template-columns:1fr;gap:var(--s12);margin-top:var(--s10)}
  .abt-work-intro{position:static}
  .abt-work-intro .lead-body{max-width:60ch}
}
@media(prefers-reduced-motion:reduce){
  .aj-rail-fill{transform:scaleY(1);transition:none}
  .aj-node{opacity:1;transform:rotate(45deg) scale(1);background:var(--coral);transition:none}
}

/* 4 · Who we serve — photo cards (about-scoped). The shared .who-cards diamond
   kit is deliberately NOT used here so /web-design/ keeps its list treatment.
   Each card is an image slot with a caption riding a two-layer dark band, so the
   label/desc stay legible over any photo. Until the photo-treatment system locks
   the image slot shows a plain warm placeholder panel (no stock photos), swapped
   for a real <img> later with zero layout change. */
/* Loosen the intro measure past the default 54ch so it fills more width under the
   wide headline and doesn't read as stubby, while staying in the readable range. */
/* Section reads centered: eyebrow, headline and intro all center; the intro block
   is centered as a whole. Card captions are reset to left below so they stay
   bottom-left inside each photo. */
.abt-serve{text-align:center}
.abt-serve-intro{max-width:72ch;margin-inline:auto}
.abt-serve-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--s8)}
@media(max-width:900px){.abt-serve-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.abt-serve-cards{grid-template-columns:1fr}}

/* --- Slow-spin carousel: a true 3D ring (vertical axis) of the segment photos,
   rotating in a circle like a carousel. Each card is placed around the cylinder
   with rotateY(--i * --step) translateZ(--radius); the ring spins continuously.
   backface-visibility:hidden drops the back half, so you only ever see the
   front-facing cards curving around — no visible backs. Perspective makes the
   front card largest; the side mask fades cards as they round the edges. Spins
   continuously (no hover pause). Reduced-motion: the ring holds still. Card count (12 = the 4 photos
   ×3) and each card's --i are emitted by the PHP loop. --- */
.abt-serve-stage{margin-top:var(--s8);height:clamp(380px,42vw,440px);perspective:1500px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.abt-serve-ring{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  --card-w:210px;--card-h:264px;--step:30deg;--radius:440px;
  animation:abt-serve-spin 55s linear infinite;will-change:transform}
.abt-serve-ring .abt-cb{position:absolute;top:50%;left:50%;
  width:var(--card-w);height:var(--card-h);
  margin:calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
  backface-visibility:hidden}
@keyframes abt-serve-spin{to{transform:rotateY(-360deg)}}
@media(max-width:700px){
  .abt-serve-ring{--card-w:158px;--card-h:198px;--radius:320px}
  .abt-serve-stage{height:clamp(300px,58vw,360px)}
}
@media(prefers-reduced-motion:reduce){.abt-serve-ring{animation:none}}
.abt-cb{position:relative;display:flex;align-items:flex-end;
  aspect-ratio:4/5;border-radius:14px;overflow:hidden}
@media(max-width:520px){.abt-cb{aspect-ratio:16/10}}
/* image slot — placeholder panel now, real photo later (both fill the same box) */
.abt-cb-ph{position:absolute;inset:0;z-index:0;
  background:linear-gradient(158deg,var(--peach),var(--cream))}
.abt-cb img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
/* soft overall lift + a stronger bottom band for caption contrast */
.abt-cb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(26,26,26,.5),rgba(26,26,26,0) 60%)}
.abt-cb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;z-index:1;
  pointer-events:none;background:linear-gradient(to top,rgba(26,26,26,.82),rgba(26,26,26,0))}
.abt-cb-bd{position:relative;z-index:2;padding:14px 15px 16px;text-align:left}
/* Captions are bottom-anchored (align-items:flex-end) with similar-length
   descriptions, so the body text lines up across all four cards; the body sits
   directly under each title (no reserved gap). */
.abt-cb-n{display:block;font-family:var(--body);font-weight:600;font-size:14px;
  line-height:1.2;letter-spacing:-.15px;color:#fff}

/* ============================================================
   CONTACT / START A PROJECT (/contact/)
   Net-new pieces: hero chips, the form + success motion, reach-us cards.
   Steps / faq are reused kit. .ctc- prefix = no-op elsewhere.
   ============================================================ */

/* 1 · Hero graphic — the real site shown in a coded browser window + phone, plus a
   reply-time card. Coded frames (NOT a photoreal laptop: a CSS keyboard never reads
   right, and a device PNG would fight the frame language already used on the homepage,
   care and wordpress pages). Keeps it light, keeps the screenshots swappable, and lets
   the pieces animate in layers. The stage carries [data-hero], so it enters on the
   existing .ctc-hero GSAP stagger in motion.js. */
.ctc-hero .wrap{width:100%}
.ctc-hero-grid{display:grid;grid-template-columns:1.25fr .88fr;gap:clamp(28px,4vw,56px);align-items:center}
.ctc-hero-copy{max-width:620px}
.ctc-hero .subhero-sub{max-width:48ch}

.ctc-stage{position:relative;justify-self:center;width:100%;max-width:500px;padding:10px 0 60px}

/* halftone bloom behind the cluster (brand signature texture) */
.ctc-stage-tex{position:absolute;left:-26px;bottom:6px;width:150px;height:140px;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 30%,transparent) 1.1px,transparent 1.3px);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(circle at 40% 40%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 40% 40%,#000,transparent 72%)}

/* devices wrapper — anchors the phone to the WINDOW, not the stage, so the reply card
   can drop out of absolute flow on small screens without dragging the phone down with it */
.ctc-devices{position:relative}

/* desktop: browser window */
.ctc-win{position:relative;z-index:1;width:86%;margin-left:auto;border-radius:14px;overflow:hidden;background:#111;
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:0 30px 55px -22px rgba(0,0,0,.72)}
.ctc-win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#232120;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 8%,transparent)}
.ctc-win-bar i{flex:none;width:11px;height:11px;border-radius:50%;background:#4a4645}
.ctc-win-bar i:first-child{background:var(--coral)}
.ctc-win-addr{margin-left:10px;flex:1;max-width:64%;height:19px;border-radius:9px;
  display:flex;align-items:center;padding:0 11px;
  background:color-mix(in srgb,var(--paper) 8%,transparent);
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.2px;color:var(--paper-50)}
.ctc-win-shot{aspect-ratio:16/10;overflow:hidden}
.ctc-win-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* phone: a coded mobile layout of the same site (a desktop crop reads as a zoom, not mobile) */
.ctc-phone{position:absolute;z-index:2;left:-2%;bottom:-56px;width:23%;max-width:132px}
.ctc-phone-body{background:#111;border-radius:22px;padding:5px;
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:0 20px 30px -12px rgba(0,0,0,.6)}
.ctc-phone-glass{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/19.5;background:var(--ink)}
.ctc-mui{position:absolute;inset:0;display:flex;flex-direction:column}
.ctc-mui-bar{display:flex;justify-content:center;padding:6px 5px 5px;background:#e9e3d7}
.ctc-mui-url{width:66%;height:6px;border-radius:4px;background:#fff}
.ctc-mui-hero{display:flex;flex-direction:column;gap:5px;padding:9px 9px 11px;background:var(--ink)}
.ctc-mui-wm{font-family:var(--display);font-weight:900;font-size:9px;line-height:1;letter-spacing:.4px;color:var(--paper)}
.ctc-mui-wm b{color:var(--coral)}
.ctc-mui-h{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.ctc-mui-h i{height:5px;border-radius:2px;background:color-mix(in srgb,var(--paper) 85%,transparent)}
.ctc-mui-h i:nth-child(1){width:92%}
.ctc-mui-h i:nth-child(2){width:80%}
.ctc-mui-h i.c{width:54%;background:var(--coral)}
.ctc-mui-btn{margin-top:4px;width:50%;height:9px;border-radius:5px;background:var(--coral-deep)}
.ctc-mui-shot{flex:1;min-height:0;overflow:hidden}
.ctc-mui-shot img{width:100%;height:100%;object-fit:cover}
.ctc-mui-tx{display:flex;flex-direction:column;gap:4px;padding:7px 9px;background:var(--paper-bg)}
.ctc-mui-tx i{height:4px;border-radius:2px;background:var(--ink-40)}
.ctc-mui-tx i:nth-child(2){width:68%}

/* reply-time card — real information, never a mock message thread */
.ctc-reply{position:absolute;z-index:3;right:-4%;bottom:-10px;width:58%;max-width:292px;
  background:var(--paper);color:var(--ink);border-radius:14px;padding:15px 16px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.6)}
.ctc-reply-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ctc-reply-ic{flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--coral-deep);color:var(--paper)}
.ctc-reply-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ctc-reply-h{font-family:var(--body);font-weight:700;font-size:14.5px;line-height:1.2}
.ctc-reply-t{font-size:12.5px;line-height:1.5;color:var(--ink-72)}

@media(prefers-reduced-motion:no-preference){
  .ctc-win{animation:ctcFloat 7s ease-in-out infinite}
  .ctc-phone{animation:ctcFloatS 6s ease-in-out infinite}
  @keyframes ctcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes ctcFloatS{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
}

/* Once the hero stacks, the reply card leaves the overlay and sits BELOW the devices.
   Overlaid on a narrow stage it grows tall enough to bury the browser window. */
@media(max-width:880px){
  .ctc-hero-grid{grid-template-columns:1fr;gap:var(--s16)}
  .ctc-hero-copy{max-width:none}
  .ctc-stage{max-width:480px;justify-self:start;padding:0 0 0}
  .ctc-devices{margin-bottom:var(--s12)}
  .ctc-phone{bottom:-28px}
  .ctc-reply{position:static;width:100%;max-width:none}
}
@media(max-width:520px){
  .ctc-phone{width:28%}
}

/* Shorter hero on /contact/ (base .subhero padding is tall for this lighter page). Wider
   graphic column too — SCOPED to .ctc-hero-contact so the LOCKED get-started .ctc-hero-grid
   is untouched — to fit the three devices side by side without overlap. */
.ctc-hero-contact{padding-block:clamp(48px,6vw,84px)}
/* Two-column contact hero only ABOVE the stack breakpoint. Below 880px the shared
   .ctc-hero-grid rule collapses it to one column; without this min-width guard the
   contact-only override kept forcing 2 columns on mobile and crushed the intro copy. */
@media(min-width:881px){
  .ctc-hero-contact .ctc-hero-grid{grid-template-columns:1fr 1.22fr}
}

/* 1b · Contact hero — a responsive DEVICE LINEUP: a mock bistro site ("RUE.") on a coded
   computer, tablet and phone, side by side with NO overlap (all three fully visible). Coded
   frames only (house rule: no photoreal devices). Each screen is a real website hero (nav,
   headline, tagline, CTA over a gradient-darkened photo). The mock uses a GREEN accent,
   deliberately NOT the Made Solid coral, so the demo reads as someone else's brand.
   /contact/ only; swap the .rw-hero-img images (frames + copy stay). */
.ctc-figure{position:relative;width:100%;max-width:610px;justify-self:center;margin:6px auto 18px;perspective:1600px}
.ctc-fig-dots{position:absolute;z-index:0;top:-16px;right:-8px;width:104px;height:104px;pointer-events:none;
  background-image:radial-gradient(var(--coral) 1.3px,transparent 1.6px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 62% 34%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 62% 34%,#000,transparent 70%)}
.ctc-devwall{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:0;
  transform:rotateY(-17deg) rotateX(7deg);transform-style:preserve-3d;
  --rw-accent:#2f7a56;--rw-accent-2:#8fd0b0}

/* shared coded website bits — REAL text; GREEN accent (not coral) */
.rw-nav{display:flex;align-items:center;justify-content:space-between;background:#fff}
.rw-logo{font-family:var(--display);font-weight:900;color:var(--ink);text-transform:uppercase;line-height:1}
.rw-logo b{color:var(--rw-accent)}
.rw-links{display:flex}
.rw-links span{font-family:var(--body);font-weight:600;color:var(--ink-72)}
.rw-navbtn{background:var(--rw-accent);color:#fff;font-family:var(--body);font-weight:700;
  border-radius:4px;display:inline-flex;align-items:center;white-space:nowrap}
.rw-hero{position:relative;overflow:hidden}
.rw-hero-img{position:absolute;inset:0}
.rw-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.rw-hero-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(12,8,5,.92) 0%,rgba(12,8,5,.62) 40%,rgba(12,8,5,.15) 70%,transparent 90%)}
.rw-eyebrow{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--rw-accent-2)}
.rw-title{font-family:var(--display);font-weight:900;color:#fff;text-transform:uppercase;line-height:.9}
.rw-sub{font-family:var(--body);color:rgba(255,255,255,.85)}
.rw-hero-ov .rw-cta{align-self:flex-start;background:var(--rw-accent);color:#fff;
  font-family:var(--body);font-weight:700;border-radius:4px;white-space:nowrap}

/* --- desktop — ~52% of the lineup; tablet + phone overlap it slightly (fan) --- */
.rw-desk{position:relative;z-index:1;flex:none;width:52%;border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);box-shadow:0 26px 48px -22px rgba(0,0,0,.75)}
.rw-desk-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#242019}
.rw-desk-bar i{flex:none;width:8px;height:8px;border-radius:50%}
.rw-desk-bar i:nth-child(1){background:#ff5f57}
.rw-desk-bar i:nth-child(2){background:#febc2e}
.rw-desk-bar i:nth-child(3){background:#28c840}
.rw-desk-bar span{margin-left:7px;flex:1;max-width:58%;height:13px;border-radius:6px;display:flex;align-items:center;
  padding:0 8px;background:color-mix(in srgb,var(--paper) 9%,transparent);
  font-family:var(--body);font-size:7px;font-weight:600;color:var(--paper-50)}
.rw-desk .rw-nav{padding:8px 12px}
.rw-desk .rw-logo{font-size:14px}
.rw-desk .rw-links{gap:9px}
.rw-desk .rw-links span{font-size:7.5px}
.rw-desk .rw-navbtn{font-size:7.5px;padding:4px 8px}
.rw-desk .rw-hero{aspect-ratio:16/10}
.rw-desk .rw-hero-ov{padding:11px 13px 12px;gap:2px}
.rw-desk .rw-eyebrow{font-size:6px}
.rw-desk .rw-title{font-size:15px}
.rw-desk .rw-sub{font-size:7px;margin-top:1px}
.rw-desk .rw-hero-ov .rw-cta{font-size:7px;padding:4px 8px;margin-top:5px}

/* --- tablet — ~27%; overlaps desktop's bottom-right a little --- */
.rw-tab{position:relative;z-index:2;margin-left:-62px;transform:translateZ(38px);flex:none;width:27%;background:#141210;border-radius:13px;padding:5px;
  border:1px solid color-mix(in srgb,var(--paper) 16%,transparent);box-shadow:0 20px 36px -16px rgba(0,0,0,.7)}
.rw-tab-screen{border-radius:8px;overflow:hidden;background:#fff}
.rw-tab .rw-nav{padding:5px 7px}
.rw-tab .rw-logo{font-size:9.5px}
.rw-tab .rw-navbtn{font-size:5.5px;padding:3px 5px}
.rw-tab .rw-hero{aspect-ratio:4/3}
.rw-tab .rw-hero-ov{padding:7px 8px 8px;gap:2px}
.rw-tab .rw-title{font-size:9.5px}
.rw-tab .rw-hero-ov .rw-cta{font-size:5.5px;padding:3px 5px;margin-top:3px}

/* --- phone — ~14.5%, tall 9:19; overlaps only ~1/5 of the tablet (never >half) --- */
.rw-phone{position:relative;z-index:3;margin-left:-14px;transform:translateZ(76px);flex:none;width:14.5%;min-width:64px;background:#141210;border-radius:15px;padding:4px;
  border:1px solid color-mix(in srgb,var(--paper) 16%,transparent);box-shadow:0 18px 30px -12px rgba(0,0,0,.72)}
.rw-phone-screen{border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:9/19;display:flex;flex-direction:column}
.rw-phone .rw-nav{flex:none;padding:5px 6px}
.rw-phone .rw-logo{font-size:7.5px}
.rw-phone .rw-burger{display:flex;flex-direction:column;gap:1.5px}
.rw-phone .rw-burger i{width:8px;height:1.5px;background:var(--ink);border-radius:1px;display:block}
.rw-phone .rw-hero{flex:1;min-height:0}
.rw-phone .rw-hero-ov{padding:7px 7px 8px;gap:3px}
.rw-phone .rw-title{font-size:11px}
/* mobile CTAs are full-width, not a little left pill — reads like a real responsive site */
.rw-phone .rw-hero-ov .rw-cta{align-self:stretch;text-align:center;font-size:6px;padding:5px 4px;margin-top:5px}

@media(max-width:880px){
  .ctc-figure{max-width:560px;justify-self:start;margin:0 0 var(--s10)}
}

/* 2 · The form — intro left (sticky), fields right. */
.ctc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s12);align-items:start}
@media(max-width:880px){.ctc-grid{grid-template-columns:1fr;gap:var(--s10)}}
.ctc-intro{position:sticky;top:104px}
@media(max-width:880px){.ctc-intro{position:static}}
.ctc-direct{font-size:15px;color:var(--ink-72);margin-top:var(--s6)}
.ctc-opt{font-weight:400;font-size:12px;color:var(--ink-72)}
/* Reassurance list under the intro — small coral diamonds (brand marker), optically
   aligned to the text. Balances the intro column against the form on both /contact/
   and /get-started/. */
.ctc-points{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:12px}
.ctc-points li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--ink-82)}
.ctc-points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--coral);transform:rotate(45deg)}

.ctc-form{display:flex;flex-direction:column;gap:var(--s6);
  background:var(--paper-bg);border:1px solid var(--rule);border-radius:16px;
  padding:var(--s8);box-shadow:var(--shadow-card)}
@media(max-width:480px){.ctc-form{padding:var(--s6)}}
.ctc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}
@media(max-width:560px){.ctc-row{grid-template-columns:1fr}}
.ctc-field{display:flex;flex-direction:column;gap:7px}
.ctc-field label{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.1px}
.ctc-req{color:var(--coral-deep)}
.ctc-field input,.ctc-field textarea,.ctc-select select{width:100%;font-family:var(--body);font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid var(--rule);border-radius:8px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s}
.ctc-field textarea{resize:vertical;min-height:112px}
.ctc-field input::placeholder,.ctc-field textarea::placeholder{color:var(--ink-58)}
.ctc-field input:focus,.ctc-field textarea:focus,.ctc-select select:focus{outline:none;
  border-color:var(--coral-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 20%,transparent)}
/* select with a coded caret (native arrow hidden) */
.ctc-select{position:relative}
.ctc-select select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.ctc-caret{position:absolute;right:14px;top:50%;transform:translateY(-55%);pointer-events:none;
  color:var(--ink-58);font-size:15px}
/* inline validation (matches the approved .dev/buttons.html error state) */
.ctc-field input.is-error,.ctc-field textarea.is-error{border-color:var(--error)}
.ctc-err{display:flex;align-items:center;gap:7px;color:var(--error);font-size:13px;font-weight:600}
.ctc-err[hidden]{display:none}
.ctc-err::before{content:"";width:6px;height:6px;background:var(--error);transform:rotate(45deg);flex:none}
/* privacy-policy consent — unchecked by default, required in markup, gated in js/main.js.
   Light-background twin of .foot-consent; .is-error paints the box red like other fields.
   Selectors carry the .ctc-field prefix so they outweigh the global .ctc-field input rule
   (which would otherwise stretch the checkbox to width:100% with input padding). */
.ctc-consent-field{gap:9px}
.ctc-field label.ctc-consent{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:14px;line-height:1.45;color:var(--ink-72);letter-spacing:0}
.ctc-field input.ctc-consent-box{flex:none;width:18px;height:18px;margin-top:1px;padding:0;appearance:none;-webkit-appearance:none;
  border:1.5px solid var(--rule-strong);border-radius:5px;background:#fff;
  display:grid;place-content:center;cursor:pointer;box-shadow:none;transition:border-color .15s ease,background .15s ease}
.ctc-field input.ctc-consent-box::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s ease;
  box-shadow:inset 1em 1em var(--cream);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.ctc-field input.ctc-consent-box:checked{background:var(--coral-deep);border-color:var(--coral-deep)}
.ctc-field input.ctc-consent-box:checked::before{transform:scale(1)}
.ctc-field input.ctc-consent-box:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ctc-consent:hover .ctc-consent-box{border-color:var(--ink-40)}
.ctc-consent a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
.ctc-consent a:hover{color:var(--coral)}
.ctc-field input.ctc-consent-box.is-error{border-color:var(--error)}
/* honeypot — visually and programmatically gone, still submitted for bots */
.ctc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ctc-submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s2)}
.ctc-status{font-family:var(--body);font-size:14px;color:var(--ink-72);margin:0}
.ctc-status.is-err{color:var(--error);font-weight:600}

/* success motion on the submit button — ported verbatim from .dev/buttons.html.
   Button KEEPS its color; arrow swaps to a drawing checkmark; confetti fires (JS). */
.submit-demo .chk{display:none;width:19px;height:19px;stroke:currentColor;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.submit-demo .chk path{stroke-dasharray:24;stroke-dashoffset:24}
.submit-demo.is-loading{opacity:.75;pointer-events:none}
.submit-demo.is-success .ar{display:none}
.submit-demo.is-success .chk{display:inline-block}
.submit-demo.is-success .chk path{animation:draw-check .45s ease forwards}
@keyframes draw-check{to{stroke-dashoffset:0}}
.confetti-bit{position:fixed;width:7px;height:11px;border-radius:1px;pointer-events:none;z-index:9999;
  will-change:transform,opacity}

/* 3 · What happens next — reused .steps (3-up), no title row (numbered notes). */
/* 3 · "Still deciding" — a centered note to the reader, closing on a handwritten line.
   Line length is capped on the block (max-width), never by narrowing the container. */
.ctc-letter{max-width:760px;margin-inline:auto;text-align:center}
/* keep the centered eyebrow tied to the headline (a centered eyebrow drifts otherwise) */
.ctc-letter .eyebrow{display:block;margin-bottom:var(--s3)}
.ctc-letter .h-sec{margin-bottom:var(--s8)}
.ctc-letter-body{display:flex;flex-direction:column;gap:var(--s6)}
/* Centered copy needs a SHORTER measure than flush-left, and it needs balance, not
   pretty: pretty only rescues the last line, so "Your call." was left dangling alone.
   balance evens every line, which is what a short centered block wants. The global
   :where(p) pretty rule has zero specificity, so this wins without !important. */
/* This is a direct address, not body copy, so it runs at statement size. Weight stays
   400: Familjen 600+ across a whole passage reads as a UI label / warning box, not as a
   person talking. Presence comes from size + full --ink, not from bolding. */
.ctc-letter-body p{font-size:clamp(19px,1.9vw,21.5px);line-height:1.6;color:var(--ink);
  max-width:60ch;margin-inline:auto;text-wrap:balance}
/* The one line that has to get read. It carries no bold: the section is short enough
   that its own line plus a small step up in size is all the emphasis it needs. */
.ctc-letter-key{font-size:clamp(20px,2.1vw,23.5px);line-height:1.45;
  max-width:56ch;margin-block:var(--s2)}
/* Break at the sentence boundary, not mid-phrase: balance would otherwise strand
   "You shouldn't" at the end of line one and split the punchline. Each sentence is its
   own block, so it still wraps naturally inside itself on narrow screens. */
.ctc-letter-key span{display:block}
/* handwritten sign-off — Caveat, the sanctioned aside face (never UI or body) */
.ctc-sign{margin-top:var(--s10);font-family:var(--hand);font-weight:700;
  font-size:clamp(28px,3.2vw,34px);line-height:1.2;color:var(--coral-deep)}

/* 4 · Reach us directly — two detail cards. */
.ctc-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s8)}
@media(max-width:620px){.ctc-cards{grid-template-columns:1fr}}
.ctc-card{display:flex;flex-direction:column;gap:6px;padding:24px var(--s6);
  background:var(--paper-bg);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow-card);text-decoration:none}
a.ctc-card{transition:transform .18s,border-color .18s}
a.ctc-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--coral) 45%,var(--rule))}
.ctc-card-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  color:var(--coral-deep);background:color-mix(in srgb,var(--coral) 10%,transparent);margin-bottom:6px}
.ctc-card-ic svg{width:23px;height:23px;display:block}
.ctc-card-k{font-family:var(--body);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--coral-deep)}
.ctc-card-v{font-family:var(--body);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.2px}

/* =========================================================
   404 — broken-site-window hero graphic
   A coded browser mockup (reuses the shared .mockup / .mockup-bar / .mb-dot
   kit) sits beside the copy. .e404-screen is an image slot: a real screenshot
   can drop in once the photo treatment is locked. Page-specific selectors only.
   ========================================================= */
.e404-grid{display:grid;grid-template-columns:1fr;gap:var(--s12);align-items:center}
@media(min-width:860px){.e404-grid{grid-template-columns:1fr minmax(320px,420px);gap:var(--s16)}}

/* window + soft coral halo so it lifts off the dark hero */
.e404-figure{position:relative;animation:e404-in .8s cubic-bezier(.22,.61,.36,1) both}
.e404-figure::before{content:"";position:absolute;inset:-14% -10%;z-index:0;
  background:radial-gradient(circle at 50% 45%,var(--coral-glow),transparent 68%);
  filter:blur(14px);pointer-events:none}
.e404-window{position:relative;z-index:1;width:100%;max-width:420px;margin-inline:auto;
  animation:e404-float 7s ease-in-out 1s infinite alternate}
@media(min-width:860px){.e404-window{margin-inline:0}}

/* fake address chip showing the broken route. Scoped under .e404-window and
   sized explicitly so the shared `.mockup-bar span` dot rule can't collapse it
   to an 11px circle. */
.e404-window .e404-url{width:auto;height:auto;margin-left:6px;
  font-family:var(--body);font-size:12px;letter-spacing:.02em;border-radius:999px;
  color:color-mix(in srgb,var(--ink) 55%,transparent);
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.e404-window .e404-url-x{width:auto;height:auto;border-radius:0;background:none;
  color:var(--coral-deep);font-weight:700}

/* screen = coded "page not found" state on a faint halftone-dot field (no live
   photo — this page is deliberately image-free). */
.e404-screen{position:relative;overflow:hidden;display:grid;place-content:center;
  justify-items:center;gap:16px;padding:52px 24px 54px;background:var(--paper-bg);min-height:230px;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 16%,transparent) 1.1px,transparent 1.2px);
  background-size:22px 22px}
/* the 404 sits still, then convulses — a hard electrocution shake + RGB slice
   every 4s (the ::before/::after are colour-split copies clipped into jumping
   bands, driven off data-text="404"). */
.e404-num{position:relative;z-index:2;font-family:var(--display);font-weight:900;
  letter-spacing:-2px;line-height:.8;font-size:clamp(84px,16vw,132px);color:var(--coral);
  text-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 12%,transparent);
  animation:e404-zap 4s steps(1,end) infinite}
.e404-num::before,.e404-num::after{content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;height:100%;opacity:0;pointer-events:none}
.e404-num::before{color:var(--coral-deep);animation:e404-slice-a 4s steps(1,end) infinite}
.e404-num::after{color:var(--ocean);animation:e404-slice-b 4s steps(1,end) infinite}
.e404-note{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.e404-dot{width:8px;height:8px;background:var(--coral);transform:rotate(45deg);flex:none}

@keyframes e404-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes e404-float{to{transform:translateY(-9px)}}
/* base body: violent jitter + skew for ~0.28s at the end of each 4s cycle */
@keyframes e404-zap{
  0%,88%,100%{transform:translate(0,0) skewX(0)}
  89%{transform:translate(-4px,2px) skewX(9deg)}
  90%{transform:translate(5px,-3px) skewX(-11deg)}
  91%{transform:translate(-6px,2px) skewX(6deg)}
  92%{transform:translate(4px,3px) skewX(-7deg)}
  93%{transform:translate(-3px,-2px) skewX(5deg)}
  94%{transform:translate(3px,1px) skewX(-4deg)}
  95%{transform:translate(-2px,0) skewX(2deg)}
  96%{transform:translate(1px,-1px) skewX(0)}
}
/* colour-split slices: hidden most of the cycle, then bands jump left/right */
@keyframes e404-slice-a{
  0%,88%,97%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
  89%{opacity:.92;transform:translate(-8px,0);clip-path:inset(10% 0 62% 0)}
  91%{opacity:.92;transform:translate(7px,0);clip-path:inset(46% 0 24% 0)}
  93%{opacity:.92;transform:translate(-5px,0);clip-path:inset(72% 0 6% 0)}
  95%{opacity:.92;transform:translate(4px,0);clip-path:inset(28% 0 52% 0)}
}
@keyframes e404-slice-b{
  0%,88%,97%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
  89%{opacity:.88;transform:translate(8px,0);clip-path:inset(58% 0 14% 0)}
  91%{opacity:.88;transform:translate(-7px,0);clip-path:inset(22% 0 54% 0)}
  93%{opacity:.88;transform:translate(6px,0);clip-path:inset(80% 0 3% 0)}
  95%{opacity:.88;transform:translate(-4px,0);clip-path:inset(40% 0 40% 0)}
}
@media(prefers-reduced-motion:reduce){
  .e404-figure,.e404-window,.e404-num,.e404-num::before,.e404-num::after{animation:none}
  .e404-num::before,.e404-num::after{display:none}
}

/* "Where to next" — a simple editorial list of routes: hairline rows, a coral
   diamond marker, display-type labels, and an arrow that slides on hover. */
.e404-links{margin-top:var(--s10);list-style:none;padding:0;
  border-top:1px solid var(--rule)}
.e404-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding:22px 6px;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left .2s ease,background-color .2s ease}
.e404-link:hover{padding-left:16px;background:color-mix(in srgb,var(--coral) 5%,transparent)}
.e404-link-t{display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:16px;row-gap:3px;min-width:0}
.e404-link-t .mk{grid-row:1 / span 2;align-self:center}
.e404-link-k{grid-column:2;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.5px;font-weight:800;color:var(--ink);line-height:1;
  font-size:clamp(21px,2.6vw,28px);transition:color .18s ease}
.e404-link:hover .e404-link-k{color:var(--coral-deep)}
.e404-link-d{grid-column:2;font-family:var(--body);font-size:14px;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.e404-link .ar{flex:none;color:var(--coral-deep);font-size:22px;line-height:1;
  transition:transform .2s ease}
.e404-link:hover .ar{transform:translateX(6px)}


/* =========================================================
   /web-design/wordpress/ — v2 sections (ported 2026-07-11)
   Why-it-matters stat band, Get-found SERP card, Straight-answers
   facts, Proof seam + mid-CTA, and section halftone texture.
   Page-scoped classes (msv2-* and serp-*); used only on page-wordpress.php.
   ========================================================= */
/* ---- V2r2: straight-answers facts band ---- */
.msv2-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border-top:1px solid var(--rule)}
.msv2-fact{padding:30px 28px 8px 0}
.msv2-fact+.msv2-fact{border-left:1px solid var(--rule);padding-left:28px}
.msv2-fact-big{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,40px);line-height:1.02;text-transform:uppercase;color:var(--ink)}
.msv2-fact-d{display:block;margin-top:13px;font-size:15px;line-height:1.55;color:var(--ink-72);max-width:30ch}
@media(max-width:900px){.msv2-facts{grid-template-columns:1fr 1fr;border-top:0}.msv2-fact{border-top:1px solid var(--rule);padding:22px 0 18px}.msv2-fact+.msv2-fact{border-left:0;padding-left:0}.msv2-fact:nth-child(even){padding-left:24px;border-left:1px solid var(--rule)}}
/* ---- V2r2: mid-page CTA ---- */
.msv2-midcta{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.msv2-midcta-d{font-family:var(--body);font-size:14px;color:var(--ink-72)}
.on-dark .msv2-midcta-d{color:var(--paper-50)}

/* ---- V2r3: signature halftone seam — the dark proof band enters through a dot fade
   (same treatment as the site footer) instead of a hard edge ---- */
.msv2-seam{position:relative}
.msv2-seam::before{content:"";position:absolute;top:0;left:0;right:0;height:110px;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--paper) 12%,transparent) 1px,transparent 1.6px);
  background-size:9px 9px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

/* ---- V2r8: why-it-matters — headline left, copy right, 4-stat row below (from
   Nicolas's prior agency layout, brand-fitted) ---- */
.msv2-why-head{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start}
.msv2-why-r .lead-body+.lead-body{margin-top:16px}
.msv2-statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:92px}
.msv2-st-n{display:block;font-family:var(--display);font-weight:900;font-size:clamp(54px,5vw,78px);line-height:.86;color:var(--coral);letter-spacing:-.01em}
.msv2-st-n i{font-style:normal;font-size:.4em;font-weight:800;vertical-align:baseline;margin-left:1px}
.msv2-st-d{display:block;margin-top:13px;font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink);max-width:24ch}
.msv2-st-src{display:block;margin-top:13px;font-weight:500;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 30%,transparent)}
.msv2-st-src a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 16%,transparent);text-underline-offset:2px;text-decoration-thickness:1px;transition:color .2s ease,text-decoration-color .2s ease}
.msv2-st-src a:hover{color:var(--coral-deep);text-decoration-color:var(--coral-deep)}
@media(max-width:900px){.msv2-why-head{grid-template-columns:1fr;gap:22px}.msv2-statrow{grid-template-columns:1fr 1fr;gap:36px 30px;margin-top:48px}}
@media(max-width:520px){.msv2-statrow{grid-template-columns:1fr}}

/* ---- V2r7: get-found (SEO) section + coded search-result card ---- */
.msv2-seo-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center;margin-top:var(--s6)}
@media(min-width:861px){.msv2-seo-grid .msv2-serp{order:-1}.msv2-seo-grid .msv2-seo-copy{order:0}}
.msv2-serp{background:var(--paper-bg);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:12px;overflow:hidden;box-shadow:0 40px 70px -46px rgba(0,0,0,.45);max-width:440px;width:100%}
.serp-chrome{display:flex;align-items:center;gap:6px;padding:10px 13px;background:color-mix(in srgb,var(--ink) 5%,var(--paper-bg));border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.serp-chrome span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.serp-chrome span:first-child{background:color-mix(in srgb,var(--coral) 70%,var(--paper-bg))}
.serp-addr{flex:1;margin-left:8px;font-style:normal;font-family:var(--body);font-size:10.5px;color:color-mix(in srgb,var(--ink) 42%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-body{padding:18px 18px 20px}
.serp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:11px 18px;font-family:var(--body);font-size:14px;color:var(--ink-72)}
.serp-ic{color:var(--coral);display:flex}.serp-ic svg{width:17px;height:17px}
.serp-item{padding:14px 6px}
.serp-item--top{position:relative;background:#fff;border:1.5px solid color-mix(in srgb,var(--coral) 45%,transparent);border-radius:11px;padding:17px 16px 15px;margin-top:20px;box-shadow:0 16px 34px -22px rgba(0,0,0,.4)}
.serp-badge{position:absolute;top:-11px;left:16px;background:var(--coral);color:var(--paper);font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.4px;padding:4px 10px;border-radius:5px}
.serp-url{display:block;font-family:var(--body);font-size:12.5px;color:color-mix(in srgb,var(--ink) 52%,transparent)}
.serp-title{display:block;margin-top:5px;font-family:var(--body);font-weight:600;font-size:17px;line-height:1.25;color:var(--ocean)}
.serp-desc{display:block;margin-top:6px;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink-72)}
.serp-item--muted{opacity:.5;border-top:1px solid var(--rule);margin-top:4px}
.serp-item--muted .serp-url{margin-bottom:10px}
.serp-line{display:block;height:8px;border-radius:4px;background:var(--rule);margin-top:8px}
.serp-line.short{width:58%}
@media(max-width:860px){.msv2-seo-grid{grid-template-columns:1fr;gap:38px}.msv2-serp{margin-top:8px}}

/* ---- V2r9: halftone dot texture on the flattest light sections (brand §06 signature;
   used only where there's no image, kept faint so copy stays calm) ---- */
.msv2-texA,.msv2-texB{position:relative;overflow:hidden}
.msv2-texA > .wrap,.msv2-texB > .wrap{position:relative;z-index:1}
.msv2-texA::before{content:"";position:absolute;top:-40px;right:-70px;width:460px;height:360px;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 30%,transparent) 1.2px,transparent 1.8px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side at 72% 28%,#000,transparent);mask-image:radial-gradient(closest-side at 72% 28%,#000,transparent)}
.msv2-texB::before{content:"";position:absolute;bottom:-50px;left:-60px;width:420px;height:320px;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 28%,transparent) 1.2px,transparent 1.8px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side at 28% 74%,#000,transparent);mask-image:radial-gradient(closest-side at 28% 74%,#000,transparent)}
/* count-up: reserve width so the number doesn't reflow as it ticks */
.msv2-num{display:inline-block}

/* ============================================================
   THANK YOU (/contact/thank-you/)
   Post-submit confirmation. Centered dark hero with a drawing
   checkmark badge; the confetti burst (js/main.js) is the approved
   success moment relocated off the button. .ty- prefix = no-op
   elsewhere; page-specific selectors only.
   ============================================================ */
.ty-wrap{max-width:720px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.ty-wrap .subhero-sub{margin-inline:auto}

/* Checkmark badge — coral ring + cream tick that draw in on load. */
.ty-badge{display:inline-grid;place-items:center;width:76px;height:76px;margin:0 0 var(--s6);
  border-radius:50%;background:color-mix(in srgb,var(--coral) 16%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--coral) 34%,transparent)}
.ty-badge svg{width:52px;height:52px;overflow:visible}
.ty-badge-ring,.ty-badge-check{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty-badge-ring{stroke:var(--coral);stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;animation:tyRing .55s cubic-bezier(.6,0,.35,1) .1s forwards}
.ty-badge-check{stroke:var(--paper-bg);stroke-width:3.5;
  stroke-dasharray:34;stroke-dashoffset:34;animation:tyCheck .4s cubic-bezier(.6,0,.35,1) .55s forwards}
@keyframes tyRing{to{stroke-dashoffset:0}}
@keyframes tyCheck{to{stroke-dashoffset:0}}

.ty-next-wrap{max-width:640px}
.ty-next-wrap .lead-body{margin-top:var(--s4)}

/* 3 · While you wait — reused blog card grid, scoped under .blog-v2. Neutralise the
   scope box so it inherits the light section behind it; the .pcard styling comes
   straight from css/blog.css (single source of truth for the card). */
.ty-cards-scope{background:transparent;margin-top:var(--s10)}
.ty-reads-more{margin-top:var(--s10);font-family:var(--body);font-weight:600;font-size:15px}
.ty-reads-more .ar{transition:transform .15s}
.ty-reads-more a:hover .ar{transform:translateX(3px)}

/* 4 · Newsletter — consent-gated. Copy left, form right; stacks on mobile. */
.ty-news-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12) var(--s16);align-items:center}
.ty-news-copy .lead-body{margin-top:var(--s4)}
.ty-news{max-width:440px}
.ty-news-row{display:flex;gap:10px;align-items:stretch}
.ty-news-field{flex:1;display:flex;flex-direction:column}
.ty-news-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* label present for a11y, visually hidden */
.ty-news-field input{width:100%;height:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--paper-bg);border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);
  border-radius:10px;padding:13px 15px;transition:border-color .15s}
.ty-news-field input::placeholder{color:color-mix(in srgb,var(--ink) 42%,transparent)}
.ty-news-field input:focus-visible{outline:none;border-color:var(--coral-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 22%,transparent)}
.ty-news .btn{flex:none;white-space:nowrap}
.ty-news-field.is-error input{border-color:var(--error)}
.ty-news-err{margin:9px 0 0;font-family:var(--body);font-size:13.5px;color:var(--error)}
.ty-news-consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;
  font-family:var(--body);font-size:13px;line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.ty-news-consent input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:5px;background:var(--paper-bg);cursor:pointer;transition:background .15s,border-color .15s}
.ty-news-consent input:checked{background:var(--coral-deep);border-color:var(--coral-deep)}
.ty-news-consent input:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:9px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ty-news-consent input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ty-news-consent a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
.ty-news-consent.is-error{color:var(--error)}
.ty-news-consent.is-error input{border-color:var(--error)}
.ty-news-consent.is-error a{color:var(--error)}
.ty-news-status{margin:14px 0 0;font-family:var(--body);font-weight:600;font-size:14px;color:var(--coral-deep)}

@media (max-width:820px){
  .ty-news-wrap{grid-template-columns:1fr;gap:var(--s8)}
  .ty-news{max-width:none}
}
@media (max-width:520px){
  .ty-news-row{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .ty-badge-ring,.ty-badge-check{animation:none;stroke-dashoffset:0}
}


/* =========================================================
   /web-design/redesign/ — v2 sections (ported 2026-07-11)
   Moved 'Keeping your SEO' + the 'redesign without losing SEO' 4-step
   block (diamond grid) and the cream + halftone-seam rankings band.
   (.msv2-seam and .msv2-midcta already defined in the wordpress region.)
   ========================================================= */
/* diamond ledger grid (2-col, ruled) */
.msv2-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;margin-top:46px}
.msv2-it{display:flex;gap:14px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--rule)}
.msv2-mk{flex:none;width:9px;height:9px;background:var(--coral);transform:rotate(45deg);margin-top:8px}
.msv2-n{font-weight:700;font-size:17px;color:var(--ink);display:block;margin-bottom:4px}
.msv2-ix{font-style:normal;font-weight:600;font-size:12.5px;letter-spacing:.1em;color:var(--coral-deep);margin-right:10px}
.msv2-d{font-size:15px;line-height:1.62;color:var(--ink-72);display:block}
.msv2-foot{margin-top:36px;font-size:15px;line-height:1.6;color:var(--ink-58);max-width:62ch}
@media(max-width:760px){.msv2-grid{grid-template-columns:1fr;gap:18px}}
/* redesign: SEO-protection steps (own wrap inside .rd-seo, below the grid) */
.msv2-seosteps{margin-top:64px}
.msv2-h3{font-family:var(--body);font-weight:700;font-size:21px;line-height:1.35;color:var(--ink);margin:0 0 8px}
.msv2-sub{font-size:15px;line-height:1.6;color:var(--ink-58);margin:0;max-width:62ch}
.msv2-seosteps .msv2-grid{margin-top:26px}
/* ---- V2r4: rankings section on cream (peach is never a background color) with a
   coral halftone block peeking from behind the chart card (brand §06, same move as
   the About founder photo) so the band doesn't read flat ---- */
.sec.rd-seo{background:var(--cream)}
.sec.rd-seo{position:relative;overflow:hidden}
.sec.rd-seo::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--coral) 26%,transparent) 1.1px,transparent 1.6px);
  background-size:10px 10px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.sec.rd-seo .wrap{position:relative}


/* =========================================================
   /web-design/ecommerce/ — v2 sections (ported 2026-07-11)
   'Every store ships ready to sell' spec table + lightened hero
   product cards. (.msv2-mk from the redesign region; .msv2-seam
   and .msv2-midcta from the wordpress region.)
   ========================================================= */
/* V2r3: spec list restyled as a true table — a paper sheet on the cream band with a
   header row, ruled rows, and a ruled column divide */
.msv2-spec{margin-top:46px;border:1px solid var(--rule);background:var(--paper-bg)}
.msv2-spec-head{display:grid;grid-template-columns:minmax(280px,.44fr) minmax(0,.56fr);border-bottom:1px solid var(--rule)}
.msv2-spec-head span{padding:13px 24px;font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-72)}
.msv2-spec-head span+span{border-left:1px solid var(--rule)}
.msv2-spec-row{display:grid;grid-template-columns:minmax(280px,.44fr) minmax(0,.56fr);border-bottom:1px solid var(--rule)}
.msv2-spec-row:last-child{border-bottom:0}
.msv2-spec-n{display:flex;gap:13px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.45;color:var(--ink);padding:18px 24px}
.msv2-spec-n .msv2-mk{margin-top:7px}
.msv2-spec-d{font-size:15px;line-height:1.62;color:var(--ink-72);margin:0;max-width:66ch;padding:18px 24px;border-left:1px solid var(--rule)}
.msv2-spec-inv .msv2-spec-n{color:var(--coral-deep)}
@media(max-width:760px){.msv2-spec-head{display:none}.msv2-spec-row{grid-template-columns:1fr}.msv2-spec-d{border-left:0;padding-top:0}.msv2-spec-n{padding-bottom:10px}}
/* ---- V2r2: hero product cards lightened (were ink-2 and blended into the dark hero) ---- */
.ecom-hero .prod-card{background:var(--paper-bg);border-color:rgba(26,26,26,.10)}
.ecom-hero .pc-name{background:color-mix(in srgb,var(--ink) 16%,transparent)}
.ecom-hero .pc-price{color:var(--ink)}

/* ============================================================
   /web-design/redesign/ — Free website audit (lead magnet, 2026-08-02)
   Inline two-column card: left copy + right form card. Reuses the global
   .ctc-field / .ctc-consent / .submit-demo form styles.
   ============================================================ */
.rd-audit{position:relative;overflow:hidden}
.rd-audit .glow{position:absolute;top:-45%;right:-6%;width:56%;height:160%;pointer-events:none;z-index:0;
	background:radial-gradient(circle at 62% 42%,var(--coral-glow),transparent 62%);filter:blur(22px);
	animation:glow 9s ease-in-out infinite alternate}
.rd-audit .wrap{position:relative;z-index:1}
.rd-audit-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.rd-audit-copy .eyebrow{color:var(--coral-bright)}
.rd-audit-copy .h-sec{margin:8px 0 14px;color:var(--paper)}
.rd-audit-copy .h-sec .c{color:var(--coral)}
.rd-audit-copy .lead-body{max-width:44ch}
.rd-audit-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.rd-audit-list li{position:relative;padding-left:30px;font-family:var(--body);font-size:15.5px;color:var(--paper)}
.rd-audit-list li::before{content:"";position:absolute;left:5px;top:3px;width:7px;height:12px;
	border:solid var(--coral-bright);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}

/* the form card (right column) */
.rd-af{background:var(--cream);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:16px;
	padding:26px 26px 24px;box-shadow:0 22px 54px -26px rgba(0,0,0,.6)}
.rd-af-label{display:block;font-family:var(--body);font-weight:700;text-transform:uppercase;
	letter-spacing:1.4px;font-size:11px;color:var(--ink-58);margin-bottom:16px}
.rd-audit-form{display:flex;flex-direction:column;gap:13px}
.rd-af-btn{width:100%;justify-content:center}
.rd-af-note{font-family:var(--body);font-size:12.5px;color:var(--ink-58);margin-top:12px}
.rd-af-status{font-family:var(--body);font-size:13px;color:var(--ink-72);margin-top:10px}
.rd-af-status.is-err{color:var(--error)}
/* visually-hidden label: keeps the field accessible while matching the placeholder-only look */
.rd-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:820px){
	.rd-audit-inner{grid-template-columns:1fr;gap:28px}
}

/* How-it-works recolored to a LIGHT block (breaks the dark run below the audit;
   Ocean/blue is reserved for the Care section). The timeline was built for dark,
   so re-theme its parts for a light bg — scoped to .rdwork, other pages untouched. */
.rdwork .tl-rail{background:var(--rule)}
.rdwork .tl-node{background:var(--paper-bg);border-color:var(--rule)}
.rdwork .tl-ix{color:var(--coral-deep)}
.rdwork .tl-name{color:var(--ink)}
.rdwork .tl-d{color:var(--ink-72)}

/* ============================================================
   Web Design hub (/web-design/) — v2 redesign (2026-07-19)
   Umbrella page: hero "found everywhere" graphic, SEO/AEO/GEO
   pillars, ownership panel, halftone cream texture. Card-internal
   generics (.g-*, .chat-*, .src-chip) are scoped under .wdh-fc so
   they cannot collide with other pages. Reuses theme classes
   (.subhero, .sec, .h-sec, .build-grid, .msv2-*, .care-cards, etc.).
   Platform logos are inline SVG in the markup.
   ============================================================ */

/* Hero */
/* Fallbacks are load-bearing: a `padding` shorthand containing an undefined var()
   (e.g. the old --s14, which isn't in the scale) collapses the WHOLE declaration to
   0 — that was the "no top/bottom padding" bug. The px fallbacks keep 64/48 even if a
   token ever goes missing again. */
.wdh-hero{min-height:88vh;display:flex;align-items:center;padding:var(--s16,64px) 0 var(--s12,48px)}
/* the H1 wraps to 3 lines with a comma after "design,"; the shared .subhero-h
   line-height:.86 is too tight and the comma descender collides with the line
   below. Open the leading a touch on this hero only (Portfolio's hero already
   carries the same line-height:1 override). */
.wdh-hero .subhero-h{line-height:.96}
.wdh-hero .wrap{position:relative;z-index:2;width:100%}
.wdh-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s12);align-items:center}
.wdh-hero .subhero-sub{max-width:46ch}

/* Two decorative surfaces: a Google results page + an AI-platform answer (aria-hidden). */
.wdh-stack{position:relative;height:474px}
.wdh-fc{position:absolute;border-radius:14px;background:#fff;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7),0 40px 80px -30px rgba(0,0,0,.55);
  animation:wdhFloat 6.5s ease-in-out infinite;will-change:transform;
  font-family:arial,'Helvetica Neue',Helvetica,sans-serif;color:#202124;text-align:left}
/* front card floats above the one behind it with a deeper, softer drop shadow (no hard ring) */
.wdh-c-ai{box-shadow:0 3px 8px -2px rgba(0,0,0,.45),0 22px 44px -14px rgba(0,0,0,.62),0 44px 90px -28px rgba(0,0,0,.6)}
.wdh-c-serp{top:0;left:0;z-index:2;width:498px;animation-delay:0s}
.wdh-c-ai{top:312px;right:0;z-index:4;width:328px;animation-delay:-2.4s}
@keyframes wdhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* browser chrome bar */
.wdh-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#f0f0f2;border-bottom:1px solid #e4e4e6}
.wdh-bar .d{width:10px;height:10px;border-radius:50%;flex:none}
.wdh-bar .d1{background:#ff5f57}.wdh-bar .d2{background:#febc2e}.wdh-bar .d3{background:#28c840}
.wdh-url{flex:1;margin-left:9px;background:#fff;border:1px solid #e6e6e8;border-radius:6px;
  padding:5px 11px;font:400 11px/1.3 arial,sans-serif;font-style:normal;color:#5f6368;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Card 1: Google results page (generics scoped under .wdh-fc) */
.wdh-g{padding:14px 16px 16px}
.wdh-fc .g-top{display:flex;align-items:center;gap:12px}
.wdh-fc .g-logo{font-family:'Google Sans','Product Sans',arial,sans-serif;font-weight:500;font-size:21px;letter-spacing:-.5px}
.wdh-fc .g-search{flex:1;display:flex;align-items:center;gap:9px;border:1px solid #dfe1e5;border-radius:999px;padding:8px 15px;box-shadow:0 1px 4px rgba(32,33,36,.08)}
.wdh-fc .g-search .g-q{flex:1;font-size:13px;color:#3c4043;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdh-fc .g-search svg{width:15px;height:15px;color:#4285F4;flex:none}
.wdh-fc .g-tabs{display:flex;gap:24px;margin:12px 2px 0;border-bottom:1px solid #ebebeb}
.wdh-fc .g-tabs span{font-size:12.5px;color:#5f6368;padding-bottom:9px;position:relative;white-space:nowrap}
.wdh-fc .g-tabs span.on{color:#1a73e8;font-weight:500}
.wdh-fc .g-tabs span.on::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-1px;height:3px;background:#1a73e8;border-radius:3px 3px 0 0}
.wdh-fc .g-cols{display:flex;gap:20px;margin-top:16px}
.wdh-fc .g-main{flex:1;min-width:0}
.wdh-fc .g-site{display:flex;align-items:center;gap:10px}
.wdh-fc .g-fav{width:26px;height:26px;border-radius:50%;background:#e8f0fe;color:#1a73e8;font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none}
.wdh-fc .g-site-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wdh-fc .g-site-txt b{font-weight:400;font-size:13px;color:#202124}
.wdh-fc .g-site-txt span{font-size:12px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdh-fc .g-dots{margin-left:auto;color:#5f6368;font-size:17px;letter-spacing:-1px}
.wdh-fc .g-title{display:block;margin-top:6px;font-size:20px;line-height:1.3;color:#1a0dab;font-weight:400}
.wdh-fc .g-desc{margin-top:4px;font-size:13.5px;line-height:1.55;color:#4d5156}
.wdh-fc .g-desc b{font-weight:700}
.wdh-fc .g-sitelinks{display:flex;gap:22px;margin-top:11px}
.wdh-fc .g-sitelink{font-size:13px;color:#1a0dab}
.wdh-fc .g-rail{width:186px;flex:none;border-left:1px solid #ececec;padding-left:16px}
.wdh-fc .g-rail-head{font-size:12px;color:#70757a;font-weight:500;margin-bottom:9px}
.wdh-fc .g-lp-map{width:100%;height:92px;border-radius:8px;position:relative;overflow:hidden;background:#eaf0ec;
  background-image:
    linear-gradient(118deg,transparent 46%,#c7d6cc 46% 50%,transparent 50%),
    linear-gradient(28deg,transparent 61%,#d8e2db 61% 65%,transparent 65%),
    linear-gradient(72deg,transparent 30%,#dde6e0 30% 33%,transparent 33%)}
.wdh-fc .g-lp-map::after{content:"";position:absolute;left:45%;top:34%;width:15px;height:15px;
  background:#EA4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.wdh-fc .g-lp-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.wdh-fc .g-lp-row{display:flex;align-items:flex-start;gap:8px}
.wdh-fc .g-lp-pin{width:13px;height:16px;flex:none;margin-top:1px}
.wdh-fc .g-lp-name{font-size:13px;color:#202124;font-weight:500;line-height:1.2}
.wdh-fc .g-lp-meta{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:#70757a}
.wdh-fc .g-lp-stars{color:#e7711b;letter-spacing:.5px;font-size:10px}
.wdh-fc .g-lp-row.muted{opacity:.5}

/* Card 2: AI-platform answer (generics scoped under .wdh-fc) */
.wdh-chat{font-family:-apple-system,'Segoe UI',Helvetica,arial,sans-serif;padding:16px 18px 18px;color:#0d0d0d}
.wdh-fc .chat-q{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.wdh-fc .chat-uav{width:26px;height:26px;border-radius:50%;background:#ececf1;color:#565869;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex:none;letter-spacing:.3px}
.wdh-fc .chat-a{display:flex;gap:11px;margin-top:15px}
.wdh-fc .chat-bot{width:26px;height:26px;border-radius:50%;background:#0d0d0d;color:#fff;display:grid;place-items:center;flex:none}
.wdh-fc .chat-bot svg{width:15px;height:15px}
.wdh-fc .chat-txt{font-size:13.5px;line-height:1.62}
.wdh-fc .chat-txt b{font-weight:700}
.wdh-fc .chat-txt sup{color:#10a37f;font-weight:700;font-size:10px;margin-left:1px}
.wdh-fc .chat-src{margin-top:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wdh-fc .chat-src-l{font-size:10.5px;color:#8e8ea0;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.wdh-fc .src-chip{display:inline-flex;align-items:center;gap:6px;background:#f7f7f8;border:1px solid #e5e5e8;border-radius:8px;padding:5px 9px;font-size:12px;color:#0d0d0d;text-decoration:none}
.wdh-fc .src-chip i{width:14px;height:14px;border-radius:3px;background:#1a73e8;color:#fff;font-size:8px;font-weight:700;display:grid;place-items:center;font-style:normal}

@media(prefers-reduced-motion:reduce){.wdh-fc{animation:none!important}}

/* stat row -> 3-up variant + linked sources */
.msv2-statrow.wdh-3{grid-template-columns:repeat(3,1fr);max-width:none}
/* the .wdh-3 variant (2 classes) out-specifies the base .msv2-statrow
   responsive rules, so it would stay 3-up on mobile and cram the numbers.
   Repeat the collapse here at matching specificity: 2-up on tablet, 1-up on phone. */
@media(max-width:900px){.msv2-statrow.wdh-3{grid-template-columns:1fr 1fr}}
/* Single column on phones: center each stat (number, copy, source) so a lone
   column doesn't read as a ragged left-aligned list. The description keeps its
   24ch measure but centers as a block via auto margins. */
@media(max-width:520px){
  .msv2-statrow.wdh-3{grid-template-columns:1fr}
  .wdh-3 .msv2-st{text-align:center}
  .wdh-3 .msv2-st-d{margin-inline:auto}
}
/* Count-up numbers tick from 0, so their digit-count grows during the animation
   (0 -> 9 -> 90 -> 900). That reflows the % suffix beside them every frame and
   reads as a flicker/jitter, worst on the 3-digit "900" and most visible on the
   1-up mobile layout. Reserve each number's final width (--nw = digit count, set
   in the markup; defaults to 2) and right-align it: only the digits fill in, the
   suffix stays put. Tabular figures keep every digit the same width. */
.wdh-3 .msv2-num{display:inline-block;text-align:right;font-variant-numeric:tabular-nums;
  min-width:calc(var(--nw,2) * 1ch)}
.msv2-st-src a{color:inherit}

/* halftone dot-fade tucked into a section corner */
.wdh-tex{position:relative;isolation:isolate}
.wdh-tex > .wrap{position:relative;z-index:1}
.wdh-tex::before{content:"";position:absolute;top:0;right:0;width:48%;height:340px;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1.9px,transparent 2.5px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(135% 100% at 100% 0,#000,transparent 72%);
  mask-image:radial-gradient(135% 100% at 100% 0,#000,transparent 72%)}
.wdh-tex.tex-bl::before{top:auto;right:auto;bottom:0;left:0;height:360px;
  -webkit-mask-image:radial-gradient(135% 100% at 0 100%,#000,transparent 72%);
  mask-image:radial-gradient(135% 100% at 0 100%,#000,transparent 72%)}
@media(max-width:760px){.wdh-tex::before{width:74%;height:220px}}

/* Found everywhere -- SEO/AEO/GEO pillars */
.wdh-find-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;margin-top:var(--s6)}
.wdh-find-copy{position:sticky;top:96px}
.wdh-pillars{display:flex;flex-direction:column;gap:16px}
.wdh-pillar{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:var(--paper-bg);border:1px solid var(--rule);border-radius:16px;
  padding:22px 24px;box-shadow:0 18px 40px -34px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease,border-color .28s ease}
.wdh-pillar:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--coral) 42%,var(--rule));box-shadow:0 30px 56px -30px rgba(0,0,0,.5)}
.wdh-pill-n{margin:0;font-family:var(--body);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink)}
.wdh-pill-n span{font-weight:500;color:color-mix(in srgb,var(--ink) 50%,transparent);font-size:14px}
.wdh-pill-d{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-72);max-width:46ch}
.wdh-pill-mini{width:46px;height:46px;flex:none;color:var(--coral);opacity:.6;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s ease}
.wdh-pill-mini svg{width:100%;height:100%}
.wdh-pillar:hover .wdh-pill-mini{transform:translateX(6px);opacity:1}
.wdh-logos{display:flex;align-items:center;flex:none}
.wdh-logo{width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:0 4px 11px -4px rgba(0,0,0,.28);display:grid;place-items:center;
  transition:margin-left .28s cubic-bezier(.4,0,.2,1)}
.wdh-logo:not(:first-child){margin-left:-13px}
.wdh-logo svg{width:25px;height:25px;display:block}
.wdh-pillar:hover .wdh-logo:not(:first-child){margin-left:-6px}
@media(max-width:900px){
  .wdh-find-grid{grid-template-columns:1fr;gap:var(--s8)}
  .wdh-find-copy{position:static}
  .wdh-pillar{grid-template-columns:auto 1fr;gap:14px}
  .wdh-pill-mini{display:none}
}

/* The platform -- persuasive lead + ownership panel */
.wdh-wp-grid{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;margin-top:var(--s8)}
/* wraps to 2 lines with a comma after "WordPress,"; the global .h-sec
   line-height:.9 is too tight and the comma collides with the line below. */
.wdh-plat-h{max-width:20ch;line-height:.96}
.wdh-plat-lead{font-family:var(--body);font-weight:600;font-size:clamp(19px,1.5vw,22px);
  line-height:1.45;letter-spacing:-.005em;color:var(--ink);margin-top:0;max-width:38ch}
.wdh-plat-lead .c{color:var(--coral-deep)}
.wdh-plat-body{margin-top:var(--s6);max-width:48ch}
.wdh-plat-body strong{font-weight:700;color:var(--coral-deep)}
.wdh-plat-link{margin-top:var(--s8)}
.wdh-own-panel{position:relative;background:var(--paper-bg);border:1px solid var(--rule);border-radius:20px;
  padding:24px 26px 8px;box-shadow:0 30px 62px -40px rgba(0,0,0,.55)}
.wdh-own-tag{display:inline-block;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--coral-deep);margin-bottom:4px}
.wdh-own-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.wdh-own-row:first-of-type{border-top:0}
.wdh-own-ic{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 12%,#fff);color:var(--coral-deep);
  transition:background .28s ease,color .28s ease,transform .28s ease}
.wdh-own-ic svg{width:23px;height:23px}
.wdh-own-row:hover .wdh-own-ic{background:var(--coral);color:#fff;transform:rotate(-4deg) scale(1.05)}
.wdh-own-n{display:block;font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink)}
.wdh-own-d{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink-72)}
@media(max-width:860px){.wdh-wp-grid{grid-template-columns:1fr;gap:var(--s8)}}

@media(prefers-reduced-motion:reduce){
  .wdh-pillar,.wdh-pillar *,.wdh-own-ic{transition:none}
  .wdh-pillar:hover{transform:none}
}

/* Hero responsive */
@media(max-width:900px){
  .wdh-grid{grid-template-columns:1fr;gap:var(--s10)}
  .wdh-stack{height:520px;margin:0 auto;width:min(380px,100%)}
  .wdh-c-serp{width:min(358px,100%)}
  .wdh-c-ai{width:min(320px,92%)}
}

/* ============================================================
   PORTFOLIO (/portfolio/) — page-scoped (.pf-*)
   Honest portfolio for a pre-launch studio: "the standard" card
   grid + real testimonials + "in progress" first-piece cards.
   Reuses global .subhero/.sec/.proof/.quotes/.mk/.ph kit.
   ============================================================ */
/* 1 · Hero — centered statement, deliberately quiet. This page's job is to get people
   into the work, so the hero is a single calm line + a scroll cue rather than a big
   two-line stack and an outbound button. Headline sized to sit on ONE line at desktop
   (page-scoped, down from the global two-line clamp); glow + dots dialled well back so
   the dark band reads as a soft setup, not a spotlight. */
.pf-hero{padding-block:clamp(52px,6.4vw,92px)} /* compact but breathing: the work leads, the hero just sets it up */
.pf-hero .wrap{text-align:center}
.pf-hero .subhero-h{max-width:none;margin-inline:auto;line-height:1;letter-spacing:-1px;
  font-size:clamp(38px,5.4vw,66px)} /* one confident line, not the giant stack */
.pf-hero .subhero-sub{max-width:50ch;margin-inline:auto}
/* softer, smaller glow — a warm hint behind the words, not a flare (centred via
   left + margin-left since the glow keyframe owns transform) */
.pf-hero .glow{right:auto;left:50%;margin-left:-24%;top:-46%;width:48%;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--coral) 18%,transparent),transparent 62%)}
.pf-hero .dots{opacity:.3;
  -webkit-mask-image:radial-gradient(58% 60% at 50% 42%,#000,transparent 72%);
  mask-image:radial-gradient(58% 60% at 50% 42%,#000,transparent 72%)}

/* 3 · The standard — editorial coral-diamond points. Borderless (no paper panel: on
   the cream field a --paper fill nearly vanishes and only its shadow shows). A hairline
   rule tops each point so they read as intentional, not floating. */
.pf-std-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12) var(--s16);margin-top:var(--s9)}
/* each point led by a SHORT coral rule. A full-width hairline left the line stranded
   far wider than the text beneath it, which read as broken. */
.pf-card{position:relative;padding-top:var(--s6)}
.pf-card::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;border-radius:2px;background:var(--coral)}
.pf-card h3{font-family:var(--body);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.2px}
.pf-card p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-72);max-width:46ch}

/* 2 · The work — image-led tiles. Default = image + "In progress" chip only. Details
   (segment + name) reveal on hover over a bottom scrim; the image gives a subtle zoom.
   The .pf-over text stays in the DOM (SEO / a11y), just visually hidden until hover. */
.pf-work .lead-body{max-width:56ch}
.pf-grid{list-style:none;margin:var(--s10) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.pf-piece{position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,26,26,.04),0 20px 40px -28px rgba(26,26,26,.3)}
.pf-piece .ph{position:relative;border-radius:0;display:block;border:0;box-shadow:none; /* the tile frames it; no inner border/shadow line */
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
/* real photo fills the 16:10 tile; the frame's overflow:hidden clips the hover zoom */
.pf-piece .ph picture,.pf-piece .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pf-piece:hover .ph{transform:scale(1.045)}
.pf-status{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;background:rgba(26,26,26,.72);backdrop-filter:blur(4px);
  color:var(--paper);font-family:var(--body);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em}
.pf-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 60%,transparent);animation:pf-pulse 2.2s ease-out infinite}
@keyframes pf-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 55%,transparent)}
  70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--coral) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 0%,transparent)}}
.pf-over{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  gap:4px;padding:var(--s8);
  background:linear-gradient(to top,rgba(20,20,20,.86),rgba(20,20,20,.2) 46%,transparent 72%);
  opacity:0;transition:opacity .4s ease}
.pf-piece:hover .pf-over{opacity:1}
.pf-over-seg{font-family:var(--body);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--peach)}
.pf-over-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,2.4vw,32px);line-height:.95;letter-spacing:-.5px;color:var(--paper)}

@media(max-width:820px){
  .pf-std-grid{grid-template-columns:1fr;gap:var(--s10)}
  .pf-grid{grid-template-columns:1fr;gap:var(--s8)}
  /* no hover on touch — always show the details */
  .pf-over{opacity:1;background:linear-gradient(to top,rgba(20,20,20,.86),rgba(20,20,20,.15) 52%,transparent 74%)}
}
@media(prefers-reduced-motion:reduce){
  .pf-status::before{animation:none}
  .pf-piece:hover .ph{transform:none}
}

/* ============================================================================
   ACCESSIBILITY / LEGAL STATEMENT  (.lgl-*)  — /accessibility/
   A quiet trust page: dark subhero + a single semantic prose column on light.
   Scoped under .lgl-sec so nothing leaks. Reused pattern for Privacy/Terms later.
   ============================================================================ */
.lgl-hero .subhero-sub{max-width:64ch}

/* Decorative access mark — right side of the hero. Coral figure on a faint disc. */
.lgl-hero-art{position:absolute;top:50%;right:clamp(20px,6vw,96px);transform:translateY(-50%);
  z-index:0;width:clamp(240px,30vw,430px);pointer-events:none;
  opacity:0;animation:lglArtIn 1s cubic-bezier(.2,.7,.2,1) .45s forwards}
.lgl-a11y{display:block;width:100%;height:auto;color:var(--coral)}
.lgl-a11y-disc{fill:currentColor;opacity:.07}
.lgl-a11y-ring{fill:none;stroke:currentColor;stroke-width:5;opacity:.4;
  transform-box:fill-box;transform-origin:center;
  animation:lglRingPulse 3.4s ease-in-out infinite}
@keyframes lglRingPulse{
  0%,100%{transform:scale(1);opacity:.34}
  50%{transform:scale(1.045);opacity:.62}
}
.lgl-a11y-head{fill:currentColor}
.lgl-a11y-body{fill:none;stroke:currentColor;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
@keyframes lglArtIn{
  from{opacity:0;transform:translateY(-50%) scale(.94)}
  to{opacity:.92;transform:translateY(-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .lgl-hero-art{opacity:.92;animation:none}
  .lgl-a11y-ring{animation:none;opacity:.4}
}
/* Below the two-column comfort point, the mark would crowd the copy — retire it. */
@media(max-width:860px){
  .lgl-hero-art{display:none}
}

.lgl-sec .wrap{max-width:760px}
.lgl-doc{font-family:var(--body);font-size:17.5px;line-height:1.72;color:var(--ink)}
.lgl-doc h2{font-family:var(--display);font-weight:800;text-transform:none;
  font-size:clamp(24px,2.6vw,32px);line-height:1.05;letter-spacing:-.4px;color:var(--ink);
  margin:var(--s10) 0 var(--s4)}
.lgl-doc h2:first-child{margin-top:0}
.lgl-lead{font-size:19px;line-height:1.66;color:var(--ink);margin:0 0 var(--s8);max-width:66ch}
.lgl-doc p{margin:0 0 var(--s4);max-width:66ch}
.lgl-doc a.link{color:var(--coral-deep);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.lgl-doc ul{list-style:none;margin:0 0 var(--s4);padding:0}
.lgl-doc li{position:relative;padding-left:26px;margin-bottom:var(--s3);max-width:66ch}
.lgl-doc li::before{content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;background:var(--coral);transform:rotate(45deg)}
.lgl-contact{padding:var(--s4) var(--s6);background:var(--cream);
  border-left:3px solid var(--coral);border-radius:0 8px 8px 0;line-height:1.9}
.lgl-email{display:inline-block;font-size:clamp(21px,2.3vw,27px);font-weight:600;
  line-height:1.25;margin-bottom:4px}

/* Editorial cross-link to the compliance service page — internal linking, not a pitch */
/* Footer block: the "applies to / last reviewed" note, closing the statement. */
.lgl-note{margin-top:var(--s10);padding-top:var(--s6);border-top:1px solid var(--rule);
  font-family:var(--body);font-size:15px;
  color:color-mix(in srgb, var(--ink) 78%, transparent);letter-spacing:.01em}

@media(max-width:640px){
  .lgl-contact{padding:var(--s3) var(--s4)}
}

/* ============================================================
   MOBILE: hide the busy hero UI-mockups (sitewide, 2026-08-06)
   These hero graphics are decorative (aria-hidden) fake-UI
   stacks — Google result cards, browser mockups, the care
   monitor, the audit panel, the workflow task list. On phones
   they add 400-520px of scroll between the CTA and the first
   real section for the lowest-legibility payoff, so we drop
   them and let the headline + CTA carry the hero. Also covers the
   two conversion heroes (contact, get-started) and the About
   portrait so mobile visitors reach the copy/form faster. The
   only hero graphic left on mobile is the homepage portrait
   (it lives in css/home.css, not here). Consolidated so the rule
   is one place to find/tune/revert, not scattered per page. */
@media(max-width:768px){
  .wdh-stack,   /* web-design: SERP + AI answer cards   */
  .wp-stage,    /* wordpress: UI screenshot mockups     */
  .ecom-stage,  /* ecommerce: storefront mockup         */
  .rd-stage,    /* redesign: before/after mockup        */
  .care-mon,    /* care-plans: the care monitor         */
  .cpl-aud,     /* compliance: the audit checklist panel*/
  .lgl-hero-art,/* accessibility: hero art              */
  .wf-tasks,    /* workflow: floating task-list mockup  */
  .ctc-figure,  /* contact: responsive-site devwall     */
  .ctc-stage,   /* get-started: browser + phone devices */
  .abt-portrait /* about: founder portrait + chips      */
  {display:none}
  /* With the graphic gone, the tall centered hero (min-height:88-90vh)
     would leave a dead "hole" where the mockup sat. Collapse these heroes
     to their content height so the copy + CTA sit naturally under the nav.
     wp/wf/care already reset this at their own breakpoints; repeating it
     here is idempotent and keeps every hidden-mockup hero consistent. */
  .wdh-hero,.ecom-hero,.rd-hero,.cpl-hero,.wp-hero,.wf-hero,.care-hero,.abt-hero{min-height:0}
}

/* ============================================================
   Care Plans + Get Started polish — ported from approved previews (2026-08-09)
   Page-scoped rules; appended so they win the cascade over the base rules.
   ============================================================ */
/* Care Plans hero mockup: inset the "Live" pill off the browser-bar edge, make its status dot a true circle */
.care-mon-bar{ padding-right:16px; }
.care-mon-live{ margin-right:2px; }
.care-mon-live i{ width:7px; height:7px; border-radius:50%; flex:none; }
/* Care Plans "one bill" compare: soft coral glow on the Care+ card, firmer outline on the à-la-carte card so it stops dissolving into the cream */
.vcard.bundle{ box-shadow:0 0 55px -6px color-mix(in srgb, var(--coral) 38%, transparent), 0 14px 36px rgba(0,0,0,.10); }
.vcard.alacarte{ border:1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); }
/* Get Started testimonial: keep the attribution block centered, but left-align the name/title to each other; color the highlighted result line (the .c class isn't styled inside a blockquote otherwise) */
.gs-proof .q-by > div{ text-align:left; }
.gs-proof .q-text .c{ color:var(--coral-bright); }