/* ============================================================
   ULS PUBLIC WEBSITE - foundation stylesheet (Phase 1)
   The public brand layer of the ULS platform. Shares the CRM's
   teal ramp (uls.css --teal-900…050) so web + ops feel like one
   company; adds the marketing serif (Fraunces), warm greige neutrals
   for the executive, editorial look.
   EVERY shared component for Phases 1-5 is defined here:
   chrome · hero · stat band · cards · splits · readiness ·
   forms (multi-step) · tabs · FAQ · blog · prose · tables.
   ============================================================ */

:root{
  /* palette - logo-true teal, bright & inviting */
  --pine:#0A4A42;          /* deep heading teal (brighter than before) */
  --pine-2:#063B34;        /* footer / darkest surface */
  --teal:#015E54;          /* EXACT logo teal - primary brand */
  --teal-bright:#0A9887;   /* action hover / links */
  --cream:#E9E2D4;         /* warm highlight on dark teal surfaces */
  --teal-soft:#DCEBE6;
  --mist:#F4F1EB;          /* warm greige - calm section background */
  --egg:#F7F4EF;           /* warm greige - strips and soft surfaces */
  --sage:#DFE9E5;          /* soft teal wash - contrast strips, matches the photo accent */
  --paper:#FFFFFF;
  --taupe:#9A8D77;         /* pale taupe - labels and quiet accents */
  --taupe-deep:#7E7360;
  --taupe-soft:#F1EDE5;    /* announcement / soft chips */
  --ink:#23282A; --ink-soft:#4A5457; --ink-3:#7A8487;
  --line:#E2DCD0; --line-2:#ECE7DD;
  --good:#16A34A; --danger:#C2372E; --warn:#B45309;
  --radius:6px; --radius-lg:12px;
  --shadow:0 2px 24px rgba(7,63,62,.08);
  --shadow-lg:0 12px 48px rgba(7,63,62,.16);
  --maxw:1440px;
  --hdr:84px;            /* header height, per breakpoint */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------------- large screen tiers ----------------
   Container width AND base type scale up together so the page stays
   legible on a big monitor instead of shrinking into the middle. */
@media (min-width:1280px){ html{font-size:16.5px} }
@media (min-width:1600px){ html{font-size:17px}   :root{--maxw:1560px} }
@media (min-width:1900px){ html{font-size:17.5px} :root{--maxw:1720px} }
@media (min-width:2400px){ html{font-size:18px}   :root{--maxw:1840px} }

/* ---------------- base ---------------- */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.14;letter-spacing:-.01em;color:var(--pine)}
h1{font-size:clamp(2.2rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.7rem,3vw,2.35rem)}
h3{font-size:1.22rem;line-height:1.3}
h4{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,2.6vw,52px)}
.wrap-narrow{width:100%;max-width:900px;margin:0 auto;padding:0 clamp(20px,2.6vw,52px)}
.center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--pine);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}

.eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:14px}
.on-dark .eyebrow,.hero .eyebrow,.readiness .eyebrow,.cta-band .eyebrow{color:var(--cream)}
.lede{font-size:1.14rem;color:var(--ink-soft);line-height:1.65}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede{color:rgba(255,255,255,.78)}

.s-ico{width:22px;height:22px;flex:none}
.u-ico{width:14px;height:14px;vertical-align:-2px;margin-right:6px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1;padding:14px 24px;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;transition:all .16s ease;text-decoration:none;white-space:nowrap}
.btn .arrow{transition:transform .16s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--pine)}
.btn-accent,.btn-gold{background:#fff;color:var(--teal);font-weight:700}
.btn-accent:hover,.btn-gold:hover{background:var(--cream);color:var(--pine)}
.btn-outline{border-color:var(--teal);color:var(--teal);background:transparent}
.btn-outline:hover{background:var(--teal);color:#fff}
.on-dark-outline{border-color:rgba(255,255,255,.5);color:#fff}
.on-dark-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-ghost{color:var(--teal);background:transparent}
.btn-ghost:hover{background:var(--mist)}
.btn-lg{padding:17px 30px;font-size:1.02rem}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------------- utility bar ---------------- */
.utility-bar{background:var(--pine-2);color:#fff;font-size:.82rem}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.u-note{display:flex;align-items:center;color:rgba(255,255,255,.8)}
.u-links{display:flex;gap:6px;align-items:center}
.u-links a{color:rgba(255,255,255,.85);font-weight:500;padding:4px 10px;border-radius:4px}
.u-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.u-links a.u-portal{border:1px solid rgba(255,255,255,.35)}
.u-links a.u-portal + a.u-portal{margin-left:2px}

/* ---------------- announcement ---------------- */
.announce{background:var(--taupe-soft);color:var(--pine);font-size:.9rem;font-weight:500;border-bottom:1px solid var(--line-2)}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:9px;padding-bottom:9px;position:relative}
.announce a{color:var(--teal);font-weight:700}
.announce a:hover{text-decoration:underline}
.announce-x{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:1.3rem;line-height:1;color:var(--pine);cursor:pointer;opacity:.6;padding:4px 8px}
.announce-x:hover{opacity:1}

/* ---------------- header / nav ---------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line-2);transition:box-shadow .2s ease}
/* Frosted glass only where the mobile panel is not a fixed child of the header:
   backdrop-filter would otherwise become the containing block for that panel
   and trap it inside the 84px header. */
@media (min-width:1181px){
  .site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
.site-header.scrolled{box-shadow:var(--shadow)}
.site-header .wrap{display:flex;align-items:center;gap:clamp(16px,1.6vw,34px);height:var(--hdr)}
.logo{position:relative;z-index:95}
.logo img{height:46px;width:auto}
.main-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600;font-size:.95rem;color:var(--ink);padding:10px clamp(9px,.85vw,15px);border-radius:var(--radius)}
.nav-item>a:hover,.nav-item>a.active{color:var(--teal);background:var(--mist)}
.caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .15s ease}
.nav-item.has-drop:hover .caret,.nav-item.open .caret{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s ease;z-index:110}
.nav-item.has-drop:hover .drop,.nav-item.open .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:var(--radius);font-size:.92rem;font-weight:500;color:var(--ink)}
.drop a:hover{background:var(--mist);color:var(--teal)}
.drop.mega{min-width:600px}
.drop-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-all{margin-top:8px;border-top:1px solid var(--line-2);padding-top:10px !important;font-weight:700 !important;color:var(--teal) !important}
.header-ctas{display:flex;gap:10px;align-items:center;flex:none;white-space:nowrap;position:relative;z-index:95}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;position:relative;z-index:96}
.nav-burger span{display:block;width:24px;height:2.5px;background:var(--pine);margin:5px 0;border-radius:2px;transition:all .2s ease}

/* ---------------- hero ---------------- */
.hero{background:linear-gradient(150deg,#014C44 0%,var(--teal) 48%,#028273 100%);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-140px;top:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,226,212,.55),transparent)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(1,66,59,.93) 0%,rgba(1,94,84,.88) 48%,rgba(2,113,100,.86) 100%)}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,4vw,80px);align-items:center;padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(72px,8vw,120px);position:relative;z-index:1}
.hero-copy{min-width:0}
.hero-visual{min-width:0}
.hero h1{color:#fff;margin-bottom:22px;max-width:14em}
.hero h1 em{font-style:italic;color:var(--cream);text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:2px;text-decoration-color:rgba(233,226,212,.75)}
.hero .lede{color:rgba(255,255,255,.8);margin-bottom:34px;max-width:34em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:24px;font-size:.86rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:9px}
.hero-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cream);flex:none}

/* mock CRM request card */
.req-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px 32px;max-width:440px;margin-left:auto;position:relative}
.req-card::before{content:"";position:absolute;inset:-1px;border-radius:13px;padding:1px;background:linear-gradient(140deg,var(--cream),transparent 45%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.req-card h3{font-family:var(--font-body);font-size:.95rem;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.req-card .live{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--good);background:#EAF7EF;padding:4px 10px;border-radius:99px}
.req-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.req-line .k{color:var(--ink-3);flex:none}
.req-line .v{font-weight:600;text-align:right}
.req-line .v.badge{color:var(--teal);background:var(--teal-soft);padding:2px 10px;border-radius:99px;font-size:.8rem}

/* ---------------- stat band ---------------- */
.stat-band-wrap{background:linear-gradient(180deg,var(--pine) 0%,var(--pine) 46%,var(--paper) 46%)}
.stat-band{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 40px 26px;transform:translateY(-2px)}
.stat-band-title{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:20px;text-align:center}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;left:-13px;top:12%;bottom:12%;width:1px;background:var(--line)}
.stat .num{display:block;font-family:var(--font-display);font-size:2.7rem;font-weight:500;color:var(--teal);line-height:1.05}
.stat .cap{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:6px;line-height:1.35}
.stat-foot{font-size:.75rem;color:var(--ink-3);text-align:center;margin-top:16px}

/* ---------------- sections ---------------- */
.section{padding:96px 0}
.section.mist{background:var(--mist)}
.section.tight{padding:64px 0}
.section-head{max-width:780px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .lede{margin-top:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,4.5vw,88px);align-items:start}
.rich p{margin:16px 0;color:var(--ink-soft);font-size:1.03rem;max-width:62ch}
.rich p:first-child{margin-top:18px}

/* ---------------- lists ---------------- */
.check-list{list-style:none;margin-top:22px}
.check-list li{position:relative;padding:9px 0 9px 36px;color:var(--ink);font-size:1.01rem}
.check-list li b{font-weight:700}
.check-list li::before{content:"";position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;background:var(--teal-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230B5C5A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4 8-9"/></svg>') center/13px no-repeat}
.x-list li::before{background:#F7E9E7 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23C2372E" stroke-width="2.6" stroke-linecap="round"><path d="m7 7 10 10M17 7 7 17"/></svg>') center/12px no-repeat}

/* ---------------- cards ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,1.8vw,30px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;transition:all .18s ease;position:relative;color:var(--ink)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal-soft)}
.card .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:var(--mist);color:var(--teal);margin-bottom:18px}
.card h3{margin-bottom:10px}
.card p{font-size:.97rem;color:var(--ink-soft)}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:.88rem;color:var(--teal)}
.card-link::after{content:"→";transition:transform .16s ease}
.card:hover .card-link::after{transform:translateX(3px)}
.card-dark{background:var(--pine);border-color:var(--pine)}
.card-dark h3{color:#fff}
.card-dark p{color:rgba(255,255,255,.75)}
.card-dark .icon{background:rgba(255,255,255,.1);color:var(--cream)}
.card-dark .card-link{color:var(--cream)}
.card-dark:hover{border-color:var(--cream)}

/* ---------------- logo strip ---------------- */
.logo-strip{border-top:1px solid rgba(1,94,84,.14);border-bottom:1px solid rgba(1,94,84,.14);background:var(--sage)}
.logo-strip .wrap{padding-top:30px;padding-bottom:34px}
.logo-strip-label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:18px}
.logo-row-legacy{display:flex;gap:14px 44px;align-items:center;justify-content:center;flex-wrap:wrap}
.client-name{font-family:var(--font-display);font-size:1.02rem;color:var(--ink-soft);opacity:.85;white-space:nowrap}

/* ---------------- readiness strip ---------------- */
.readiness{background:linear-gradient(150deg,#024B42,var(--teal) 60%,#027465);padding:96px 0;position:relative;overflow:hidden}
.readiness::before{content:"";position:absolute;left:-160px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(233,226,212,.10),transparent 65%)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:14px;position:relative;z-index:1}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:0 6px 24px rgba(2,40,35,.18)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:16px;font-family:var(--font-body)}
.step h3{color:var(--pine);font-size:1.06rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--ink-soft)}
.readiness-badge{margin-top:44px;display:flex;align-items:center;gap:22px;background:var(--cream);border:1px solid #DDD4C2;border-radius:var(--radius-lg);padding:24px 32px;position:relative;z-index:1;flex-wrap:wrap;box-shadow:0 10px 34px rgba(2,40,35,.22)}
.readiness-badge .big{font-family:var(--font-display);font-size:2.9rem;color:var(--teal);line-height:1;flex:none}
.readiness-badge span:not(.big){color:var(--pine);font-size:.97rem;font-weight:500;max-width:34em;flex:1;min-width:240px}

/* ---------------- quote / testimonial ---------------- */
.quote-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-lg);padding:32px 34px;box-shadow:var(--shadow)}
.quote-card .q{font-family:var(--font-display);font-size:1.12rem;line-height:1.5;color:var(--ink);font-style:italic}
.quote-card .who{margin-top:16px;font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.quote-card + .quote-card{margin-top:20px}

/* ---------------- CTA band ---------------- */
.cta-band{background:linear-gradient(140deg,#024B42,var(--teal) 70%);padding:84px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-100px;top:-160px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:44px;position:relative;z-index:1;flex-wrap:wrap}
.cta-band h2{max-width:15em}
.cta-band p{color:rgba(255,255,255,.75);margin-top:12px;max-width:34em}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;flex:none}

/* ---------------- page hero (interior pages) ---------------- */
.page-hero{background:linear-gradient(155deg,var(--pine-2),var(--pine) 75%);padding:72px 0 64px;position:relative;overflow:hidden}
/* a CMS banner photo sits under the teal gradient (inline style from site_page_hero) */
.page-hero.has-img{background-size:cover;background-position:center 42%;background-repeat:no-repeat;padding:88px 0 76px}
/* a photograph beside a caption (site_photo_band) and the side-column picture (site_side_photo) */
.photo-band.compact{padding:56px 0}
.photo-band.compact .photo-frame{max-height:clamp(240px,22vw,320px)}
.side-photo{aspect-ratio:4/3;margin-bottom:22px}
.contact-foot{margin-top:34px}
.contact-foot .note-card{margin-top:0}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,226,212,.5),transparent)}
.page-hero h1{color:#fff}
.page-hero .lede{color:rgba(255,255,255,.78);margin-top:16px}
.crumbs{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:22px}
.crumbs a{color:rgba(255,255,255,.7)}
.crumbs a:hover{color:#fff}

/* ---------------- forms (Phase 3 dependency, defined now) ---------------- */
.form-shell{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.form-head{padding:28px 38px 0;border-bottom:1px solid var(--line-2);padding-bottom:20px}
.step-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.progress{display:flex;gap:6px;margin-top:12px}
.progress i{height:4px;flex:1;background:var(--line-2);border-radius:2px}
.progress i.done{background:var(--teal)}
.form-body{padding:28px 38px 38px}
/* fieldset carries two browser defaults that break form layout:
   a 2px groove border, and min-width:min-content which stops grid
   columns from shrinking so paired fields overflow their row. */
.fieldset{display:flex;flex-direction:column;gap:18px;border:0;padding:0;margin:0;min-width:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0;align-items:start}
.f-group{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.f-group label{font-size:.86rem;font-weight:600;color:var(--ink)}
.f-group .req{color:var(--danger)}
.f-group input,.f-group select,.f-group textarea{font-family:var(--font-body);font-size:.95rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;max-width:100%;min-width:0;height:46px}
.f-group textarea{height:auto}
.f-group select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234A5457" stroke-width="2.2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.f-group label{min-height:1.2em}
.f-group textarea{min-height:110px;resize:vertical}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.f-group .hint{font-size:.8rem;color:var(--ink-3)}
.f-error{display:none;font-size:.8rem;color:var(--danger);font-weight:600}
.f-group.invalid .f-error{display:block}
.f-group.invalid input,.f-group.invalid select,.f-group.invalid textarea{border-color:var(--danger)}







.upload-box{display:block;border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--ink-soft);font-size:.9rem;cursor:pointer;transition:all .14s ease}
.upload-box:hover{border-color:var(--teal);background:var(--mist)}
.upload-box b{color:var(--teal)}
.captcha{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--egg);font-size:.92rem;cursor:pointer;max-width:280px}
.captcha input{width:20px;height:20px;accent-color:var(--teal)}
.form-nav{display:flex;justify-content:space-between;gap:14px;margin-top:28px}
.form-nav [data-back]{visibility:hidden}
.form-nav.can-back [data-back]{visibility:visible}
.form-success{text-align:center;padding:26px 10px 10px}
.form-success .ok-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--teal-soft);color:var(--teal);margin-bottom:20px}
.form-success h3{font-size:1.5rem;margin-bottom:10px}
.form-success p{color:var(--ink-soft);max-width:34em;margin:0 auto}
.record-tag{display:inline-flex;gap:8px;align-items:center;margin-top:18px;background:var(--mist);border:1px solid var(--teal-soft);color:var(--teal);font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:99px}

.f-row-3{display:grid;grid-template-columns:2fr 1.4fr 1fr;gap:18px;min-width:0;align-items:start}
.f-note{font-size:.85rem;color:var(--ink-soft);background:var(--mist);border-left:3px solid var(--teal);padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0}
.f-sub{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-top:6px}

/* prefixed input: a fixed code prefix with a numeric field beside it */
.prefix-wrap{display:flex;align-items:stretch;min-width:0}
.prefix-tag{display:flex;align-items:center;padding:0 14px;background:var(--mist);border:1.5px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);font-weight:700;font-size:.95rem;color:var(--pine);letter-spacing:.04em}
.prefix-wrap input{border-radius:0 var(--radius) var(--radius) 0 !important}

/* compact professional checks and radios: 16px controls, quiet rows */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px;min-width:0}
.check-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.check-item{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink);padding:6px 2px;cursor:pointer;line-height:1.35}
.check-item input{width:16px;height:16px;flex:none;accent-color:var(--teal);margin:0;cursor:pointer}
.check-item:hover{color:var(--teal)}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);cursor:pointer;line-height:1.5}
.consent-row input{width:16px;height:16px;flex:none;accent-color:var(--teal);margin-top:2px}

/* multi-select dropdown: a select-styled trigger opening a checkbox panel */
.mselect{position:relative;min-width:0}
.mselect-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:46px;padding:12px 14px;font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;text-align:left}
.mselect-btn:focus-visible{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.mselect-btn .ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)}
.mselect-btn .ms-label.has{color:var(--ink)}
.mselect-btn .ms-caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-soft);flex:none;transition:transform .15s ease}
.mselect.open .ms-caret{transform:rotate(180deg)}
/* the open panel sits in the document flow, expanding the form downward,
   so no card edge, radius clip, or stacking context can ever cut it off */
.mselect-panel{position:static;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:6px;column-gap:18px}
.mselect-panel{columns:2}
.mselect-panel .check-item{break-inside:avoid}
@media (max-width:720px){.mselect-panel{columns:1}}
.mselect-panel .check-item{padding:8px 10px;border-radius:5px}
.mselect-panel .check-item:hover{background:var(--mist)}

/* two-state client toggle */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border:1px solid var(--line);border-radius:99px;padding:5px;max-width:560px;margin:0 auto 30px;gap:5px}
.mode-toggle button{font-family:var(--font-body);font-weight:700;font-size:.88rem;letter-spacing:.04em;padding:12px 10px;border:0;border-radius:99px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .15s ease;text-transform:uppercase}
.mode-toggle button[aria-pressed="true"]{background:var(--teal);color:#fff;box-shadow:0 2px 10px rgba(1,94,84,.3)}
.mode-toggle button:hover:not([aria-pressed="true"]){color:var(--teal)}

/* step footer: captcha and actions belong to the final step only */
.form-final{border-top:1px solid var(--line-2);margin-top:24px;padding-top:22px}
.upload-name{margin-top:8px;font-size:.86rem;color:var(--teal);font-weight:600}
.req-banner{display:flex;gap:12px;align-items:flex-start;background:var(--taupe-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;font-size:.88rem;color:var(--ink-soft)}
.req-banner b{color:var(--pine)}

/* ---------------- intent tabs ---------------- */
.intent-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.intent-tabs button{font-family:var(--font-body);font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .14s ease}
.intent-tabs button:hover{border-color:var(--teal-bright);color:var(--teal)}
.intent-tabs button[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------------- FAQ ---------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;margin-bottom:12px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 54px 20px 24px;font-weight:600;font-size:1.02rem;color:var(--pine);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;color:var(--teal);transition:transform .18s ease}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item[open] summary{border-bottom:1px solid var(--line-2)}
.faq-a{padding:18px 24px 22px;color:var(--ink-soft);font-size:.96rem}

/* ---------------- blog ---------------- */
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-card .thumb{height:170px;background:linear-gradient(140deg,var(--teal),var(--pine));position:relative}
.post-card .thumb .tag{position:absolute;left:18px;bottom:14px;background:rgba(255,255,255,.92);color:var(--pine);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.post-card .pc-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card .meta{font-size:.8rem;color:var(--ink-3);margin-bottom:8px}
.pullquote{font-family:var(--font-display);font-size:1.3rem;font-style:italic;color:var(--teal);border-left:3px solid var(--taupe);padding:6px 0 6px 24px;margin:30px 0}

/* ---------------- prose ---------------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:1.6rem;margin:40px 0 14px}
.prose p{margin:16px 0;color:var(--ink-soft);font-size:1.02rem;line-height:1.75}
.prose ul,.prose ol{margin:16px 0 16px 22px;color:var(--ink-soft)}
.prose li{margin:8px 0}
.prose a{text-decoration:underline}

/* ---------------- data table + pills (CMS surfaces) ---------------- */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:2px solid var(--line)}
.data-table td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.data-table tr:hover td{background:var(--mist)}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:4px 12px;border-radius:99px}
.pill.new{background:#FDF3E3;color:var(--warn)}
.pill.ok{background:#EAF7EF;color:var(--good)}
.pill.err{background:#FBEFED;color:var(--danger)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--pine-2);color:rgba(255,255,255,.75);padding:72px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:52px}
.foot-brand img{height:40px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.93rem;line-height:1.65;max-width:30em}
.foot-mail{display:inline-block;margin-top:16px;color:var(--cream);font-weight:600}
.foot-mail:hover{color:#fff}
.site-footer h4{color:#fff;margin-bottom:18px}
.site-footer a{display:block;color:rgba(255,255,255,.72);font-size:.93rem;padding:5px 0}
.site-footer a:hover{color:#fff}
.foot-brand a{display:inline-block}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:26px;font-size:.82rem;color:rgba(255,255,255,.5)}
.foot-legal-links{display:flex;gap:22px}
.foot-legal-links a{display:inline;color:rgba(255,255,255,.6);padding:0}
.foot-legal-links a:hover{color:#fff}

@keyframes navIn{from{opacity:0;transform:translateX(10%)}to{opacity:1;transform:none}}

/* ---------------- reveal motion ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------------- responsive ---------------- */
/* ---------------- photography (Phase 1 rev B) ---------------- */
.photo-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

/* Placed images never grow with the viewport: each context carries a
   proportion and a clamp() height cap, so wide screens get the same
   composed photo, only the layout around it breathes. Small screens
   relax to fluid full-width frames further down. */
.split{align-items:center}
.split .photo-accent .photo-frame{aspect-ratio:4/3;max-height:clamp(300px,28vw,430px);width:100%}
.blk-split .photo-accent .photo-frame{aspect-ratio:4/3;max-height:clamp(300px,28vw,430px);width:100%}
.photo-frame::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);border:1px solid rgba(1,94,84,.15);pointer-events:none}
.photo-accent{position:relative}
.photo-accent::before{content:"";position:absolute;left:-14px;bottom:-14px;width:60%;height:60%;border-radius:var(--radius-lg);background:linear-gradient(140deg,#D9D2C2,var(--teal));opacity:.16;z-index:0}
.photo-accent .photo-frame{position:relative;z-index:1}

/* hero photo + overlapping request card */
.hero-photo{position:relative;padding-bottom:64px}
.hero-photo .photo-frame{max-width:clamp(380px,32vw,520px);margin-left:auto;box-shadow:0 18px 60px rgba(1,40,35,.35)}
.hero-photo .req-card{position:absolute;left:-6px;bottom:0;max-width:340px;padding:22px 24px;margin:0}
.hero-photo .req-card h3{margin-bottom:10px}
.hero-photo .req-line{padding:8px 0;font-size:.84rem}

/* split with photo */
.split-photo{margin-top:30px}
.split-photo .photo-frame{max-height:clamp(280px,26vw,380px)}
.split-photo img{max-height:clamp(280px,26vw,380px)}

/* gallery band */
.gallery-band{padding:0 0 96px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,28px)}
.gallery-grid .photo-frame{height:clamp(240px,19vw,340px)}
.gallery-cap{text-align:center;font-size:.9rem;color:var(--ink-3);margin-top:16px}

/* promise photo + floating quote */
.promise-visual{position:relative;padding-bottom:120px}
.promise-visual .photo-frame{max-width:clamp(380px,34vw,520px)}
.promise-visual .quote-card{position:absolute;right:0;bottom:0;max-width:clamp(320px,28vw,420px);padding:24px 26px}

/* ================= RESPONSIVE (must stay last) ================= */
/* the secondary header CTA steps aside before the nav can crowd */
@media (max-width:1400px){ .header-ctas .btn-ghost{display:none} }

/* nav collapses to the burger before the full menu can crowd */
@media (max-width:1180px){
  /* Full-screen menu panel. Compact by design so the whole menu and an open
     submenu are visible at once, without scrolling, on a normal phone. */
  .main-nav{position:fixed;top:var(--hdr);left:0;right:0;bottom:0;width:100%;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px 20px 24px;gap:0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 14px 40px rgba(7,63,62,.14);z-index:80;display:none}
  .main-nav.open{display:flex;animation:navIn .2s ease both}
  .nav-item{border-bottom:1px solid var(--line-2)}
  .nav-item:last-child{border-bottom:0}
  .nav-item>a{padding:11px 8px;font-size:1rem;justify-content:space-between;white-space:normal;border-radius:0}
  .nav-item>a:hover,.nav-item>a.active{background:transparent;color:var(--teal)}
  .caret{border-top-width:6px;border-left-width:5px;border-right-width:5px;opacity:.75}

  /* submenu: two compact columns so all 12 services fit on one screen */
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;background:transparent;margin:0 0 8px;padding:0 0 4px 6px;display:none;min-width:0}
  .drop.mega{min-width:0}
  .drop-cols{display:contents}
  .nav-item.open .drop{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  .drop a{padding:7px 8px;font-size:.85rem;line-height:1.25;border-radius:4px;color:var(--ink-soft)}
  .drop a:hover{background:var(--mist);color:var(--teal)}
  .drop-all{grid-column:1 / -1;margin-top:2px;padding-top:8px !important;font-size:.85rem !important}
  .nav-burger{display:block;z-index:95;flex:0 0 auto;margin-left:auto}
  .logo{flex:0 1 auto;min-width:0}
  .logo img{height:42px}
  .header-ctas{flex:0 1 auto;min-width:0;overflow:hidden}
  .site-header .wrap{gap:12px}
  .header-ctas .btn-ghost{display:none}
  .utility-bar .u-note{display:none}
  .utility-bar .wrap{justify-content:center;flex-wrap:wrap;gap:4px 10px}
  .u-links{flex-wrap:nowrap;justify-content:center;gap:8px}
}

/* layout stacking */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:clamp(56px,6.5vw,88px)}
  .req-card{margin-left:0;margin-right:auto;max-width:480px}
  .stat-band{padding:28px 26px 22px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:28px 22px}
  .stat .num{font-size:2.35rem}
  .stat + .stat::before{display:none}
  .split{grid-template-columns:1fr;gap:52px}
  .split .photo-accent{max-width:520px;margin-left:auto;margin-right:auto}
  .split .photo-accent .photo-frame{aspect-ratio:16/10}
  .split .photo-accent .photo-frame img{object-position:center 40%}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .card[style*="span 3"]{grid-column:span 2 !important}
  .hero-photo{padding-bottom:80px}
  .hero-photo .photo-frame{margin:0 auto}
  .hero-photo .req-card{left:50%;transform:translateX(-50%);width:min(340px,92%)}
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .gallery-grid .photo-frame{height:clamp(160px,21vw,240px)}
  .promise-visual .quote-card{position:static;max-width:none;margin-top:22px;margin-left:0}
  .promise-visual{padding-bottom:0}
}

@media (max-width:720px){
  .wrap,.wrap-narrow{padding:0 20px}
  .section{padding:64px 0}
  /* top bar: email on its own centred line, then two equal login buttons */
  .utility-bar .wrap{flex-direction:column;align-items:stretch;gap:9px;padding-top:11px;padding-bottom:11px;min-height:0}
  .utility-bar .u-note{display:none}
  .u-links{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
  .u-links a[href^="mailto:"]{grid-column:1 / -1;text-align:center;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.9);padding:0;letter-spacing:.01em}
  .u-links a[href^="mailto:"]:hover{background:transparent;color:#fff;text-decoration:underline}
  .u-links a.u-portal{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 8px;font-size:.83rem;font-weight:600;border-radius:6px;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07);margin:0}
  .u-links a.u-portal:hover{background:rgba(255,255,255,.16)}

  /* announcement: centred stack with the close button parked in the corner */
  .announce{font-size:.86rem}
  .announce .wrap{flex-direction:column;align-items:center;gap:5px;text-align:center;padding:11px 42px 12px}
  .announce a{display:inline-block}
  .announce-x{top:8px;right:12px;transform:none;font-size:1.25rem;padding:2px 6px}
  .grid-3,.grid-4,.steps,.choice-grid,.f-row,.f-row-3{grid-template-columns:1fr}
  .card[style*="span 3"]{grid-column:span 1 !important}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .form-head,.form-body{padding-left:22px;padding-right:22px}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .announce .wrap{flex-wrap:wrap;padding-right:44px}

  /* header: logo + CTA + burger must all fit inside the viewport */
  :root{--hdr:68px}
  .site-header .wrap{gap:10px}
  .logo img{height:36px}
  .header-ctas .btn{padding:10px 13px;font-size:.82rem}
  .main-nav{padding:8px 18px 20px}
  .nav-item>a{padding:10px 6px}
  .drop a{padding:6px 6px;font-size:.83rem}

  /* hero request card + stat band: smaller, with clear separation */
  .hero-grid{padding-bottom:44px}
  .req-card{padding:20px 18px}
  .req-card h3{font-size:.9rem;margin-bottom:12px}
  .req-line{padding:8px 0;font-size:.82rem;gap:10px}
  .req-line .v.badge{font-size:.74rem;padding:2px 8px}
  .stat-band-wrap{background:linear-gradient(180deg,var(--teal) 0%,var(--teal) 34%,var(--paper) 34%)}
  .stat-band{padding:22px 18px 18px;border-radius:10px}
  .stat-band-title{font-size:.68rem;letter-spacing:.14em;margin-bottom:16px}
  .stat-grid{gap:26px 14px}
  .stat .num{font-size:1.95rem}
  .stat .cap{font-size:.78rem;line-height:1.3;margin-top:4px}
  .stat-foot{font-size:.7rem;margin-top:14px}

  .gallery-grid{grid-template-columns:1fr;gap:14px}
  .gallery-grid .photo-frame{height:220px}
  .split .photo-accent{max-width:100%}
  .split .photo-accent .photo-frame{aspect-ratio:4/3}
  .promise-visual .photo-frame{max-width:100%}
  .promise-visual .quote-card{margin-left:0}
}

/* small phones: tighten the header once more so the burger is never at risk */
@media (max-width:430px){
  :root{--hdr:64px}
  .site-header .wrap{gap:8px}
  .logo img{height:32px}
  .header-ctas .btn{padding:9px 10px;font-size:.76rem}
  .nav-burger{padding:10px 6px}
  .main-nav{padding:6px 16px 20px}
}

/* ============================================================
   PHASE 2 COMPONENTS
   Interior page pieces: two-column features, side panels,
   promise cards, light step rows, FAQ grouping, article meta.
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px)}
.feature{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.feature-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--teal-soft);color:var(--teal)}
.feature-ico .s-ico{width:18px;height:18px}
.feature h3{font-size:1.06rem;margin-bottom:6px}
.feature p{font-size:.95rem;color:var(--ink-soft)}

.panel{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-lg);padding:28px 30px;box-shadow:var(--shadow)}
.panel h3{margin-bottom:6px}
.panel .btn{margin-top:22px}
.panel-warn{border-left-color:var(--danger)}

.note-card{background:var(--egg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start}
.note-card h3{margin-bottom:2px}
.note-card .btn{margin-top:18px}

.promise-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 30px 30px 76px}
.promise-num{position:absolute;left:26px;top:30px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:.95rem}
.promise-card h3{margin-bottom:8px}
.promise-card p{color:var(--ink-soft);font-size:.97rem}

.steps-light .step{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.steps-light .step h3{color:var(--pine)}
.steps-light .step p{color:var(--ink-soft)}
.steps-light .step-num{background:var(--teal);color:#fff}

.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.faq-jump a{font-size:.84rem;font-weight:600;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);color:var(--ink-soft);background:#fff}
.faq-jump a:hover{border-color:var(--teal);color:var(--teal)}
.faq-group{margin-bottom:38px}
.faq-cat{font-size:1.15rem;color:var(--teal);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--line-2)}

.article-meta{color:rgba(255,255,255,.72);font-size:.9rem;margin-top:14px}
.article-col{max-width:1120px}
/* Article body: the column is wide, the text keeps a comfortable measure and
   centres inside it, while images and figures use the full width. Specificity
   here intentionally beats the global .prose cap. */
.article-col .prose{max-width:100%}
.article-col .prose>p,.article-col .prose>ul,.article-col .prose>ol,.article-col .prose>h2,
.article-col .prose>h3,.article-col .prose>h4,.article-col .prose>blockquote,
.article-col .prose>.callout,.article-col .prose>table{max-width:820px;margin-left:auto;margin-right:auto}
.article-col .prose>figure{margin-left:auto;margin-right:auto}
.article-col .prose>figure.img-size-full{max-width:100%}
/* Pictures carried over from the old blog (plain figures, or an image in a
   paragraph): a tall one is held to a readable height and centred instead
   of running two screens down the page. */
.article-col .prose>figure:not([class*="img-size"]) img,.article-col .prose>p>img{display:block;width:auto;height:auto;max-width:100%;max-height:560px;margin:0 auto;border-radius:10px}
.article-col .prose>figure:not([class*="img-size"]){margin-top:28px;margin-bottom:28px}
.article-col .prose>figure:not([class*="img-size"]) figcaption{text-align:center}
.article-col .credits-block{max-width:820px;margin-left:auto;margin-right:auto}
.article-tight{padding-top:56px}
.post-hero-img{margin:-64px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 22px 44px rgba(10,74,66,.18);position:relative;z-index:2}
.post-hero-img img{display:block;width:100%;max-height:440px;object-fit:cover}
.post-card .thumb{background-size:cover;background-position:center}
.prose{font-size:1.05rem}
.post-card .thumb{display:block}
.post-card .pc-body{display:flex}
a.post-card{padding:0}

@media (max-width:1080px){
  .grid-2{grid-template-columns:1fr}
  .steps-light{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .promise-card{padding:26px 24px 26px 68px}
  .promise-num{left:22px;top:26px}
  .note-card{padding:24px 22px}
  .panel{padding:24px 22px}
}

/* ============================================================
   PHASE 3 FORM ADDITIONS
   ============================================================ */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-title{font-size:1.5rem;margin-top:14px}
.form-intro{color:var(--ink-soft);font-size:.96rem;margin-top:6px}
.form-alert{background:#FBEFED;border:1px solid #F0CFC9;color:var(--danger);font-weight:600;font-size:.9rem;padding:12px 16px;border-radius:var(--radius);margin-bottom:20px}
.group-label{font-size:.86rem;font-weight:600;color:var(--ink);display:block;margin-bottom:2px}
.sr-legend{position:absolute;left:-9999px}
.choice-grid[data-one]{grid-template-columns:1fr}
.choice.consent{align-items:flex-start}
.choice.consent span{font-size:.9rem;color:var(--ink-soft)}
.captcha-group{max-width:340px}
.captcha-input{max-width:180px}
.upload-name{margin-top:8px;font-size:.86rem;color:var(--teal);font-weight:600}
.form-foot{text-align:center;margin-top:24px;font-size:.92rem;color:var(--ink-soft)}
.form-nav [data-back]{visibility:hidden}
.form-nav.can-back [data-back]{visibility:visible}
.success-next{margin-top:26px}
.tab-link{font-family:var(--font-body);font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);text-decoration:none}
.tab-link:hover{border-color:var(--teal-bright);color:var(--teal)}
.tab-link.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
[data-intent-tabs]{justify-content:center}
@media (max-width:720px){
  .form-title{font-size:1.28rem}
  .captcha-group{max-width:none}
  .form-nav{flex-direction:column-reverse;gap:10px}
  .form-nav .btn{width:100%;justify-content:center}
  .form-nav [data-back]{visibility:visible;display:none}
  .form-nav.can-back [data-back]{display:inline-flex}
}

/* ============================================================
   CLIENT LOGO SLIDER (Trusted by band)
   Items come from the CMS; a logo image shows when one is set,
   otherwise a clean monogram tile carries the mark. The track
   scrolls continuously, pauses on hover, and stands still for
   reduced-motion visitors.
   ============================================================ */
.logo-marquee{overflow:hidden;position:relative;margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:clamp(34px,5vw,64px);width:max-content;animation:uls-marquee 32s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes uls-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .logo-marquee{mask-image:none;-webkit-mask-image:none}
  .logo-item[aria-hidden="true"]{display:none}   /* the loop's second copy */
}
/* on the homepage the slider leads the proof band; the credentials follow */
.proof-band.has-slider .proof-grid{margin-top:34px}
.proof-band.has-slider .proof-grid.no-quote .proof-main{text-align:center}
.proof-band.has-slider .proof-grid.no-quote .proof-creds{justify-content:center}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;min-width:120px}
.logo-tile{height:64px;width:120px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 14px}
.logo-tile img{max-height:40px;max-width:96px;object-fit:contain;display:block}
.logo-mono{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--pine);letter-spacing:.04em}
.logo-name{font-size:.82rem;font-weight:600;color:var(--ink-soft);text-align:center;max-width:170px;line-height:1.35}

/* ============================================================
   PHASE 4 BLOCKS (staff-built content from the CMS)
   ============================================================ */
.section.blocks-top{padding:clamp(30px,4.5vw,52px) 0 clamp(10px,2vw,18px)}
.section.blocks-bottom{padding:clamp(30px,4.5vw,52px) 0 clamp(30px,4.5vw,52px)}
.blocks-top .wrap > :last-child,.blocks-bottom .wrap > :last-child{margin-bottom:0}
.blk-text{max-width:820px;margin:0 auto 26px}
.blk-text h2{margin-bottom:12px}
.blk-image{margin:0 auto 30px;max-width:860px}
.blk-image .photo-frame{aspect-ratio:3/2;max-height:clamp(320px,32vw,470px)}
.blk-image.wide{max-width:none}
.blk-image.wide .photo-frame{aspect-ratio:21/9;max-height:clamp(300px,30vw,440px)}
.blk-image figcaption,.blk-video figcaption{text-align:center;font-size:.88rem;color:var(--ink-soft);margin-top:10px}
.blk-split{margin-bottom:34px;align-items:center}
.blk-split .photo-accent::before{display:none}
.blk-split.img-right>div:first-child{order:2}
.blk-gallery{display:grid;gap:16px;margin-bottom:30px}
.blk-gallery .photo-frame{aspect-ratio:4/3;height:clamp(200px,18vw,300px);width:100%}
.blk-gallery.cols-1{grid-template-columns:1fr;max-width:860px;margin-left:auto;margin-right:auto}
.blk-gallery.cols-2{grid-template-columns:1fr 1fr}
.blk-gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.blk-gallery.cols-4{grid-template-columns:repeat(2,1fr)}
.blk-quote{max-width:760px;margin:0 auto 30px;padding:26px 30px;border-left:4px solid var(--teal);background:var(--egg);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.blk-quote p{font-family:var(--font-display);font-size:1.25rem;color:var(--pine);line-height:1.5}
.blk-quote cite{display:block;margin-top:12px;font-style:normal;font-size:.9rem;color:var(--taupe);font-weight:600}
.video-frame{position:relative;padding-top:56.25%;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-video{max-width:860px;margin:0 auto 30px}
.blk-cta{text-align:center;background:var(--taupe-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 30px;margin-bottom:26px}
.blk-cta p{color:var(--ink-soft);max-width:640px;margin:10px auto 0}
.blk-cta-btns{margin-top:20px !important;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:900px){
  .blk-gallery.cols-3,.blk-gallery.cols-4{grid-template-columns:1fr 1fr}
  .blk-split.img-right>div:first-child{order:0}
}
@media (max-width:600px){
  .blk-gallery{grid-template-columns:1fr !important}
  .split .photo-accent .photo-frame,.blk-split .photo-accent .photo-frame,
  .blk-image .photo-frame,.blk-image.wide .photo-frame{aspect-ratio:4/3;max-height:none}
  .blk-gallery .photo-frame{height:auto;aspect-ratio:4/3}
}

/* ============================================================
   HERO BANNER IMAGES (set per page in the CMS)
   ============================================================ */
.page-hero.has-img{background-size:cover;background-position:center 38%;background-repeat:no-repeat}
.page-hero.has-img .crumbs a,.page-hero.has-img .crumbs span{text-shadow:0 1px 8px rgba(7,54,49,.5)}
.page-hero.has-img h1,.page-hero.has-img .lede,.page-hero.has-img .eyebrow{text-shadow:0 2px 14px rgba(7,54,49,.45)}
@media (max-width:720px){.page-hero.has-img{background-position:center}}

/* ============================================================
   INSERTED IMAGE ALIGNMENT AND SIZES (from the editor's
   insert options: alignment, size, caption, link)
   ============================================================ */
.rich::after,.blk-text::after,.rte::after{content:"";display:block;clear:both}
figure.img-align-left{float:left;margin:6px 24px 14px 0}
figure.img-align-right{float:right;margin:6px 0 14px 24px}
figure.img-align-center{margin:16px auto;text-align:center;float:none;display:table}
figure[class*="img-size"]{max-width:100%}
figure.img-size-full{width:100%}
figure.img-size-large{width:75%}
figure.img-size-medium{width:50%}
figure.img-size-thumb{width:25%}
figure[class*="img-size"] img{width:100%;height:auto;border-radius:10px;display:block}
figure[class*="img-size"] figcaption{font-size:.85rem;color:var(--taupe);margin-top:8px;line-height:1.4}
@media (max-width:640px){
  figure.img-align-left,figure.img-align-right{float:none;margin:14px auto}
  figure.img-size-large,figure.img-size-medium,figure.img-size-thumb{width:100%}
}

/* ============================================================
   BLOCK LIBRARY: columns, buttons, audio, file, cover, icon,
   divider, and per-screen visibility
   ============================================================ */
.col-grid{display:grid;gap:26px;margin-top:10px}
.col-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.col-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.col-cell h3{font-family:var(--font-display);font-size:1.15rem;margin:0 0 8px}
.blk-buttons{display:flex;gap:12px;flex-wrap:wrap}
.blk-audio audio{width:100%;max-width:560px}
.file-card{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 20px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .2s,transform .2s}
.file-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.file-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--mist);color:var(--teal);font-size:1.2rem}
.file-sub{display:block;font-size:.8rem;color:var(--taupe)}
.blk-cover{border-radius:18px;overflow:hidden;background:var(--pine) center/cover no-repeat;position:relative;min-height:300px;display:flex;align-items:flex-end}
.blk-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,74,66,.15),rgba(10,74,66,.78))}
.cover-inner{position:relative;padding:34px 36px;color:#fff;max-width:560px}
.cover-inner h2{font-family:var(--font-display);color:#fff;margin:0 0 8px}
.cover-inner .rich{color:var(--cream)}
.blk-icon{display:flex;gap:18px;align-items:flex-start;padding:6px 0}
.icon-ring{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--mist);color:var(--teal);display:grid;place-items:center}
.icon-ring svg{width:26px;height:26px}
.blk-rule{border:0;border-top:1px solid var(--line);margin:26px 0}
.blk-heading{margin:34px 0 12px}
.ta-center{text-align:center}
@media (max-width:820px){.col-grid.cols-2,.col-grid.cols-3{grid-template-columns:1fr}}
@media (max-width:760px){.blk-hide-sm{display:none !important}}
@media (min-width:761px){.blk-hide-lg{display:none !important}}

/* image attribution: credit under each image and in the article foot */
figure figcaption{font-size:.86rem;color:#6b6255;margin-top:8px;line-height:1.5}
figure figcaption .img-credit{display:block;font-size:.8rem;opacity:.85}
.img-credit a{color:inherit}
.credits-block{margin:38px 0 0;padding:16px 18px;background:#F4F1EB;border-radius:12px}
.credits-block h2{font-size:1rem;margin:0 0 8px}
.credits-block ul{margin:0;padding-left:18px}
.credits-block li{font-size:.85rem;color:#6b6255;margin:0 0 4px}

/* ---------------- Clickable things show a hand ----------------
   Every element a visitor can click or tap shows the hand cursor, so
   the affordance is never in doubt: navigation, buttons, form
   controls, the FAQ accordions, the request-form mode and intent
   toggles, and anything the form script listens for. Keyed on the
   markup rather than the page so new components inherit it. */
a[href], button, summary, select,
[role="button"], [role="tab"], [role="option"],
input[type="button"], input[type="submit"], input[type="reset"],
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="range"],
label[for],
[onclick], [data-href], [data-back], [data-next], [data-submit], [data-mode], [data-intent],
[data-mselect] .mselect-btn, [data-dismiss-announce],
.nav-burger, .announce-x, .card-link, a.post-card, .tab-link, .faq-item summary,
.mode-toggle button, .intent-tabs button, .upload-box, .captcha, .check-item, .consent-row,
.choice, .file-card[href], .faq-jump a, .crumbs a {
  cursor: pointer;
}
button[disabled], .btn[disabled], input[disabled], select[disabled], [aria-disabled="true"] {
  cursor: not-allowed;
}
a:not([href]):not([onclick]):not([role="button"]) { cursor: default; }
/* kept separate on purpose: a browser without :has() drops only this
   rule, not the whole list above */
label:has(input[type="checkbox"]), label:has(input[type="radio"]) { cursor: pointer; }

/* ============================================================
   LAUNCH COMPONENTS (September 2026)
   The approved homepage and service layout, the Knowledge Center
   tools, the request page with the form first, and the condensed
   phone header. Kept together at the end so they win over the
   earlier rules they refine.
   ============================================================ */

/* ---------- header: phone and email up top, logins in the phone menu ---------- */
.u-links a.u-phone{font-weight:700;color:#fff;display:inline-flex;align-items:center}
.u-links a.u-phone .u-ico{margin-right:6px}
.nav-extra{display:none}
@media (max-width:1180px){
  .u-links a.u-portal{display:none}
  .nav-extra{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line-2);margin-top:6px;padding-top:10px}
  .nav-extra a{display:flex;align-items:center;gap:8px;padding:10px 8px;font-weight:600;color:var(--teal)}
  .nav-extra a .s-ico{width:18px;height:18px}
}
@media (max-width:720px){
  .utility-bar .wrap{flex-direction:row;justify-content:center;padding-top:7px;padding-bottom:7px}
  .u-links{display:flex;grid-template-columns:none;gap:4px 14px;width:auto;flex-wrap:wrap;justify-content:center}
  .u-links a.u-phone,.u-links a[href^="mailto:"]{grid-column:auto;padding:2px 4px;font-size:.82rem}
  .announce .wrap{padding-top:8px;padding-bottom:8px}
}
@media (max-width:430px){ .u-links a[href^="mailto:"]{display:none} }

/* ---------- homepage banner ---------- */
.hero-call{margin-top:18px;color:var(--cream);font-size:.95rem}
.hero-call a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero-bg .hero-visual{display:flex;justify-content:flex-end}
.hero-split .hero-photo-wrap{position:relative;padding:0 0 56px 0}
.hero-split .hero-photo-wrap .photo-frame{aspect-ratio:4/3;max-width:560px;margin-left:auto;box-shadow:0 18px 60px rgba(1,40,35,.35)}
.hero-split .hero-photo-wrap .req-flow{position:absolute;left:0;bottom:0;margin:0}

/* the request card that plays submitted, matched, confirmed */
.req-flow{background:#fff;color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px 24px;width:min(360px,100%);font-size:.92rem}
.rf-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;margin-bottom:12px}
.rf-num{font-weight:500;color:var(--ink-3);font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rf-states{list-style:none;display:flex;flex-direction:column;gap:8px}
.rf-states li{display:flex;align-items:center;gap:10px;opacity:.42;animation:rfStep 9s infinite}
.rf-states li b{font-weight:700}
.rf-states li span{margin-left:auto;text-align:right;color:var(--ink-soft);font-size:.82rem}
.rf-states li i{width:10px;height:10px;border-radius:50%;background:var(--taupe);flex:none}
.rf-states li:nth-child(2){animation-delay:3s}
.rf-states li:nth-child(2) i{background:var(--teal-bright)}
.rf-states li:nth-child(3){animation-delay:6s}
.rf-states li:nth-child(3) i{background:var(--good)}
.rf-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line-2);margin-top:12px;padding-top:10px;color:var(--ink-soft);font-size:.84rem}
.rf-foot b{color:var(--pine)}
@keyframes rfStep{0%,30%{opacity:1}34%,100%{opacity:.42}}
@media (prefers-reduced-motion:reduce){.rf-states li{animation:none;opacity:1}}

/* Watch in ASL */
.asl-btn{display:inline-flex;align-items:center;gap:9px;background:rgba(6,59,52,.84);color:#fff;border:1px solid rgba(255,255,255,.4);font:600 .9rem/1 var(--font-body);padding:9px 14px 9px 9px;border-radius:999px;cursor:pointer}
.asl-btn:hover{background:var(--pine-2)}
.asl-btn .play{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center}
.asl-btn .play .s-ico{width:12px;height:12px;fill:currentColor;stroke:none;margin-left:2px}
.asl-btn.on-media{position:absolute;top:14px;right:14px;z-index:3}
.asl-dialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(880px,94vw);background:#000;box-shadow:var(--shadow-lg)}
.asl-dialog::backdrop{background:rgba(3,30,27,.78)}
.asl-dialog video{display:block;width:100%;max-height:80vh;background:#000}
.asl-x{position:absolute;top:8px;right:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:1.5rem;line-height:1;cursor:pointer}

/* ---------- service page banner: the photo beside the words ---------- */
.svc-hero{background:linear-gradient(150deg,#014C44 0%,var(--teal) 50%,#028273 100%);position:relative;overflow:hidden}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,72px);align-items:center;padding-top:clamp(44px,5vw,76px);padding-bottom:clamp(48px,5.5vw,84px)}
.svc-hero h1{color:#fff;margin-bottom:18px;max-width:16em}
.svc-hero .lede{color:rgba(255,255,255,.84);margin-bottom:28px;max-width:36em}
.svc-hero-media{position:relative}
.svc-hero-media .photo-frame{aspect-ratio:4/3;box-shadow:0 18px 60px rgba(1,40,35,.35)}
.svc-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;color:rgba(255,255,255,.85);font-size:.9rem}
.svc-trust li{display:flex;align-items:center;gap:7px}
.svc-trust .s-ico{width:16px;height:16px;color:var(--cream)}

/* quick facts */
.facts-band{background:var(--egg);border-bottom:1px solid var(--line-2)}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0}
.fact{padding:26px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact dt{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-deep);margin-bottom:6px}
.fact dd{margin:0}
.fact dd b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.45rem;color:var(--pine);line-height:1.2}
.fact dd span{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:4px}

/* is this the right service */
.fit-split{align-items:start}
.fit-panel h3{margin-bottom:0}
.fit-alt-h{margin-top:26px;font-size:1.06rem}
.dash-list{list-style:none;margin-top:12px}
.dash-list li{position:relative;padding:7px 0 7px 22px;color:var(--ink-soft)}
.dash-list li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:2px;background:var(--taupe)}
.text-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;color:var(--teal)}
.text-link:hover{text-decoration:underline}

/* how booking works */
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,1.8vw,28px)}
.how-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.how-steps h3{font-size:1.1rem;margin-bottom:6px}
.how-steps p{color:var(--ink-soft);font-size:.95rem}
.how-cta{margin-top:34px}

/* proof: clients, a client quote, credentials */
.proof-band{padding:56px 0;border-bottom:1px solid var(--line-2)}
.proof-band.mist{background:var(--mist)}
.proof-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.proof-grid.no-quote{grid-template-columns:minmax(0,1fr)}
.proof-label{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.proof-label + ul + .proof-label{margin-top:28px}
.proof-logos{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.proof-logos li{display:flex;align-items:center;min-height:52px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px}
.proof-logos img{max-height:36px;max-width:150px;width:auto;object-fit:contain}
.proof-name{font-weight:600;color:var(--pine);font-size:.95rem}
.proof-creds{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.proof-creds li{display:flex;align-items:center;gap:7px;font-size:.95rem;color:var(--ink)}
.proof-creds .s-ico{width:17px;height:17px;color:var(--teal)}
.quote-card blockquote.q{margin:0}
.quote-card .who .org{display:block;font-weight:500;color:var(--ink-3)}

/* who we send */
.creds-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.creds-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.creds-list li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.creds-list .s-ico{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}

/* homepage: the problem, the people */
.problem-card{border-top:3px solid var(--danger)}
.problem-card h3{margin-bottom:8px}
.people-band .promise-note{margin-top:22px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-lg)}
.people-band .promise-note h3{font-size:1.08rem;margin-bottom:4px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.card-wide{margin-top:clamp(20px,1.8vw,30px)}

/* closing band phone line and the footer's ASL line */
.cta-call{flex-basis:100%;margin-top:4px;color:var(--cream);font-size:.95rem}
.cta-call a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.foot-asl{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--cream);font-weight:600}
.foot-asl .s-ico{width:18px;height:18px}
.foot-asl:hover{color:#fff}

/* ---------- request page: the form first ---------- */
.page-hero-slim{padding:40px 0 34px}
.page-hero-slim h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.page-hero-slim .lede{margin-top:10px;font-size:1.02rem}
.form-first{padding-top:36px}
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(24px,3vw,44px);align-items:start}
.form-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--hdr) + 18px)}
.form-aside .note-card{margin-top:0}
.next-steps{margin:12px 0 0 20px;display:flex;flex-direction:column;gap:10px;color:var(--ink-soft);font-size:.95rem}
.aside-phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem}
.aside-phone .s-ico{width:18px;height:18px}
.aside-contact p{margin:4px 0 0}
.svc-chosen{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--pine);border-radius:999px;padding:8px 16px;font-size:.92rem;margin-bottom:16px}
.svc-chosen a{font-weight:700;margin-left:6px}
.f-reveal{margin-bottom:4px}

/* contact: call, email, ASL */
.contact-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px}
.cd-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;color:var(--ink)}
.cd-item:hover{border-color:var(--teal-soft);box-shadow:var(--shadow)}
.cd-item .s-ico{width:24px;height:24px;color:var(--teal);flex:none;margin-top:2px}
.cd-item b{display:block;color:var(--pine);margin-bottom:2px}
.cd-item span{font-size:.95rem;color:var(--ink-soft);overflow-wrap:anywhere}
.contact-foot.no-photo{grid-template-columns:minmax(0,1fr);max-width:760px;margin:34px auto 0}

/* ---------- Knowledge Center ---------- */
.kc-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:30px}
.kc-cats{display:flex;flex-wrap:wrap;gap:8px}
.kc-cats a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink-soft);background:#fff}
.kc-cats a:hover{border-color:var(--teal);color:var(--teal)}
.kc-cats a[aria-current="page"]{background:var(--teal);border-color:var(--teal);color:#fff}
.kc-cats .n{font-weight:500;opacity:.75;margin-left:3px;font-variant-numeric:tabular-nums}
.kc-search input{width:min(320px,100%);padding:11px 16px;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff}
.kc-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,152,135,.18)}
.kc-results{margin-bottom:30px}
.kc-count{color:var(--ink-3);font-size:.9rem;margin-bottom:12px}
.kc-hits{list-style:none;display:grid;gap:10px}
.kc-hits a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 20px;color:var(--ink)}
.kc-hits a:hover{border-color:var(--teal-soft);box-shadow:var(--shadow)}
.kc-hits b{display:block;color:var(--pine);font-family:var(--font-display);font-weight:500;font-size:1.1rem}
.kc-hits span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.kc-hits p{margin-top:6px;color:var(--ink-soft);font-size:.93rem}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:40px}
.pager-label{color:var(--ink-3);font-size:.9rem}
.pager-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pager-links a:not(.btn),.pager-links .current{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border-radius:8px;border:1px solid var(--line);font-weight:600;font-variant-numeric:tabular-nums}
.pager-links .current{background:var(--teal);border-color:var(--teal);color:#fff}
.pager-links .btn{padding:10px 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.article-cta{margin-top:44px;padding:24px 26px;background:var(--egg);border:1px solid var(--line);border-radius:var(--radius-lg)}
.article-cta p + p{margin-top:14px}
.article-cta .btn{margin:4px 8px 4px 0}
.comments h2{margin-bottom:8px}
.comment{border-top:1px solid var(--line);padding:16px 0}
.comment-date{color:var(--ink-3);font-size:.85rem;margin-left:8px}
.comment p{margin-top:6px}
.comment-form{margin-top:18px;max-width:600px}
.comment-form input,.comment-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;font:inherit}
.comment-form textarea{min-height:120px}
.comment-actions{margin-top:12px}
.comment-msg{margin-top:12px;padding:12px 16px;border-radius:10px;background:#E3F2EF;color:var(--pine)}
.comment-msg.bad{background:#FBEFED;color:#A3271F}
.muted{color:var(--ink-3)}

/* ---------- the pinned bar on phones ---------- */
.sticky-cta{display:none}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .svc-hero-grid{grid-template-columns:minmax(0,1fr)}
  .svc-hero-media{max-width:620px}
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .fact:nth-child(-n+2){border-top:0}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid,.creds-grid{grid-template-columns:minmax(0,1fr)}
  .form-layout{grid-template-columns:minmax(0,1fr)}
  .form-aside{position:static}
  .hero-split .hero-photo-wrap .photo-frame{margin:0 auto}
  .hero-bg .hero-visual{justify-content:flex-start}
  .contact-direct{grid-template-columns:minmax(0,1fr)}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  /* service and industry cards become one sideways row */
  .swipe-row:not(.no-swipe){display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe-row:not(.no-swipe)::-webkit-scrollbar{display:none}
  .swipe-row:not(.no-swipe) > *{flex:0 0 82%;max-width:340px;scroll-snap-align:start}
  .swipe-row:not(.no-swipe) > .card:hover{transform:none}
  .creds-list{grid-template-columns:minmax(0,1fr)}
  .how-steps{grid-template-columns:minmax(0,1fr)}
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .fact{padding:18px 0}
  .fact dd b{font-size:1.2rem}
  .svc-hero .hero-ctas .btn,.hero .hero-ctas .btn{width:100%;justify-content:center}
  .svc-trust{gap:8px 16px;font-size:.85rem}
  .proof-band{padding:44px 0}
  .hero-split .hero-photo-wrap{padding-bottom:0}
  .hero-split .hero-photo-wrap .req-flow{position:relative;margin-top:-40px;margin-left:12px;width:calc(100% - 24px)}
  .req-flow{padding:18px 18px}
  .page-hero-slim{padding:28px 0 24px}
  .kc-tools{flex-direction:column;align-items:stretch}
  .kc-search input{width:100%}
  .pager{flex-direction:column;align-items:flex-start}
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(7,63,62,.12)}
  .sticky-cta[hidden]{display:none !important}
  .sticky-cta .btn-primary{flex:1;justify-content:center}
  .sticky-cta .sticky-call{flex:none;padding:12px 14px}
  .sticky-cta .sticky-call .s-ico{width:20px;height:20px}
  body.has-sticky .site-footer{padding-bottom:84px}
}

/* ---------- fixes found in the first review ---------- */
/* the footer: phone and email each on their own line */
.foot-brand .foot-mail{display:block;margin-top:10px}
.foot-brand .foot-mail:first-of-type{margin-top:16px}
/* the request form sits at the start of its column, beside the steps */
.form-layout .form-shell{margin-left:0;margin-right:0;max-width:none}
.form-layout .mode-toggle{margin-left:0}
@media (max-width:720px){
  /* .wrap (0 20px) came after .hero-grid and wiped the banner top padding */
  .wrap.hero-grid{padding-top:44px}
  /* scroll snapping aligns to the padding edge, not the screen edge */
  .swipe-row:not(.no-swipe){scroll-padding-inline:20px}
}
.svc-hero-grid.no-media{grid-template-columns:minmax(0,1fr)}