/* ============================================================
   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}
.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%}
.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{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}