/* ==========================================================================
   Raise Landscaping — shared site stylesheet
   One source of truth for tokens, nav, footer, and every reusable component.
   Shared by all pages.
   ========================================================================== */

@font-face{font-family:'Inter';src:url('/brand/fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  /* Mystic Gardens palette — deep garden green primary + warm clay signature accent.
     Sibling of the Raise flagship (same system), its own hospitality-warm voice. */
  --ink:#24402f; --near:#15271c; --muted:#64695d; --paper:#fff; --soft:#f6f3ec;
  --kelly:#c0894c; --kelly-ink:#895f2f; --line:#e7e2d6;
  --pad:clamp(18px,4vw,48px);
  --shell:1400px;
  --nav:64px;
  --edge:max(var(--pad),calc(50vw - (var(--shell)/2) + var(--pad)));
  --sec:clamp(60px,8vw,104px);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{letter-spacing:-.02em;line-height:.98;font-weight:800}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}

.pill{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.98rem;padding:.85em 1.7em;border-radius:999px;transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);cursor:pointer;border:0;white-space:nowrap}
.pill.dark{background:var(--ink);color:#fff}
.pill.dark:hover{background:var(--kelly-ink);transform:translateY(-1px)}
.pill.light{background:#fff;color:var(--ink)}
.pill.light:hover{background:var(--kelly-ink);color:#fff;transform:translateY(-1px)}
.pill:focus-visible,.filters button:focus-visible,.roles a:focus-visible,.checkset label:has(:focus-visible),.nav .links a:focus-visible,.nav .subnav a:focus-visible,footer a:focus-visible,.sec-h a:focus-visible{outline:2px solid var(--kelly-ink);outline-offset:3px;border-radius:4px}

/* NAV */
header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:var(--nav);gap:24px;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.nav .logo{height:36px}
.nav .links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:32px;font-weight:600;font-size:1rem}
.nav .links a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav .links a:hover{border-color:var(--ink)}
.nav .links a[aria-current="page"]{border-color:var(--ink)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav .ph{font-weight:600;font-size:.95rem;white-space:nowrap}
.nav .pill{padding:.6em 1.25em;font-size:.9rem}
.menub{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* NAV DROPDOWN (Services) */
.nav .links .has-sub{position:relative;display:inline-flex;align-items:center}
.nav .subhead{display:inline-flex;align-items:center}
.nav .subtoggle{display:none}
.nav .links .has-sub::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:18px}
.nav .subnav{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(10,36,29,.14);padding:10px;min-width:242px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:200}
.nav .has-sub:hover .subnav,.nav .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav .subnav a{padding:10px 14px;border-radius:8px;border:0;font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;transition:background .18s var(--ease)}
.nav .subnav a:hover{background:var(--soft);border:0}

/* HERO (home — full video) */
.hero{position:relative;height:calc(100vh - var(--nav));min-height:520px;overflow:hidden;background:var(--near)}
.hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(10,36,29,.66) 0%,rgba(10,36,29,.18) 48%,rgba(10,36,29,0) 72%),linear-gradient(0deg,rgba(10,36,29,.72) 0%,rgba(10,36,29,.46) 26%,rgba(10,36,29,.16) 45%,rgba(10,36,29,0) 62%)}
.hero-tx{position:absolute;left:0;bottom:clamp(40px,7vh,88px);z-index:2;width:100%;color:#fff}
.hero-tx .in{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.kick{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem;opacity:.95}
.hero h1{font-size:clamp(3rem,9vw,7.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;max-width:14ch;text-shadow:0 2px 20px rgba(10,36,29,.3)}
.hero p{font-size:clamp(1.05rem,1.5vw,1.35rem);max-width:44ch;margin:1.2rem 0 1.8rem;font-weight:400}
.hero .pill{font-size:1rem;padding:.95em 2em}

/* INNER-PAGE HERO — lighter, image-based, same headline idiom as home */
.phero{position:relative;min-height:clamp(460px,64vh,620px);overflow:hidden;background:var(--near);display:flex;align-items:flex-end;color:#fff}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(70deg,rgba(10,36,29,.70),rgba(10,36,29,.16) 64%),linear-gradient(0deg,rgba(10,36,29,.74) 0%,rgba(10,36,29,.50) 30%,rgba(10,36,29,.20) 55%,rgba(10,36,29,0) 76%)}
.phero .in{position:relative;z-index:2;width:100%;max-width:var(--shell);margin:0 auto;padding:clamp(80px,12vh,120px) var(--pad) clamp(38px,6vh,66px)}
.phero .kick{opacity:.95}
.phero h1{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.94;max-width:16ch;text-shadow:0 2px 20px rgba(10,36,29,.3)}
.phero p{max-width:52ch;font-size:clamp(1.02rem,1.4vw,1.25rem);margin-top:1rem;font-weight:400;opacity:.96}
.phero .pill{margin-top:1.6rem}
.phero.short{height:clamp(320px,42vh,440px);min-height:320px}
/* rotating slides — top-layer reveal (no cross-dissolve dip) + continuous zoom; used by .phero and .feature */
.phero .pslide,.feature .pslide{opacity:0;z-index:0;will-change:opacity,transform;transform:translateZ(0) scale(1.04);transition:opacity 1.4s var(--ease);backface-visibility:hidden}
.phero .pslide.on,.feature .pslide.on{opacity:1;z-index:1;animation:pheroKB 6.6s linear both}
.phero .pslide.enter,.feature .pslide.enter{opacity:1;z-index:2}
@keyframes pheroKB{from{transform:translateZ(0) scale(1.04)}to{transform:translateZ(0) scale(1.1)}}
.phero::after,.feature::after{z-index:3}
.phero .in,.feature .in{z-index:4}
@media(prefers-reduced-motion:reduce){.phero .pslide,.feature .pslide{transition:none;animation:none!important;transform:none}.phero .pslide.on,.phero .pslide.enter,.feature .pslide.on,.feature .pslide.enter{opacity:1}}
/* solo "living still" — a single hero/feature image gets a slow, continuous zoom (Option B) */
@keyframes kbSolo{from{transform:translateZ(0) scale(1.03)}to{transform:translateZ(0) scale(1.16)}}
.phero>img.kb,.feature>img.kb{will-change:transform;backface-visibility:hidden;animation:kbSolo 14s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.phero>img.kb,.feature>img.kb{animation:none;transform:none}}

/* CRUMB / back-link */
.crumb{font-weight:600;font-size:.9rem;color:var(--muted);margin-bottom:clamp(20px,3vw,34px)}
.crumb a{color:var(--ink);border-bottom:2px solid var(--kelly);padding-bottom:1px}

/* SECTION HEADS */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,40px);flex-wrap:wrap}
.sec-h h2{font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.sec-h a{font-weight:600;color:var(--ink);border-bottom:2px solid var(--kelly);padding-bottom:2px}

/* EDITORIAL TWO-UP */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.split h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.split .body{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--muted);line-height:1.7}
.split .body p+p{margin-top:1.1rem}

/* LEAD INTRO PARAGRAPH */
.lead{font-size:clamp(1.15rem,1.8vw,1.5rem);color:var(--ink);max-width:60ch;line-height:1.5;margin-bottom:clamp(28px,3.5vw,44px);font-weight:500}

/* TILE GRID */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{display:block}
.tile .im{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--soft)}
.tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover .im img{transform:scale(1.05)}
.tile h3{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin-top:18px;text-transform:none}
.tile .loc{color:var(--muted);font-size:.95rem;margin-top:2px}

/* FULL-WIDTH FEATURE */
.feature{position:relative;height:clamp(520px,82vh,860px);overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(60deg,rgba(10,36,29,.72),rgba(10,36,29,.1) 60%),linear-gradient(0deg,rgba(10,36,29,.6),transparent 42%)}
.feature .in{position:relative;z-index:4;width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad) clamp(44px,7vh,80px)}
.feature .fbox{max-width:640px}
.feature.flip .in{display:flex;justify-content:flex-end}
.feature h2{font-size:clamp(2rem,5vw,4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;max-width:15ch;line-height:.94}
.feature p{max-width:46ch;font-size:1.1rem;margin:1.1rem 0 1.7rem;opacity:.95}
.nums{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin:0 0 2rem}
.num b{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.num span{font-size:.85rem;opacity:.82;margin-top:.3rem;display:block}
/* .nums on a light section — inherits --ink automatically; helper for muted labels */
.nums.dark-labels .num span{color:var(--muted);opacity:1}
.nums.center{justify-content:center}

/* CARD GRID (non-photo content: what's included, values) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.cards.two{grid-template-columns:repeat(2,1fr)}
/* 5-card variant: flex so an orphan last row centers instead of leaving a gap */
.cards.c5{--cgap:clamp(14px,1.6vw,20px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cgap)}
.cards.c5 .card{flex:0 1 calc((100% - 2*var(--cgap))/3)}
.card{background:#fff;border:1px solid var(--line);padding:clamp(22px,2.2vw,32px)}
.card .n{font-weight:700;color:var(--kelly-ink);font-size:.8rem;letter-spacing:.12em;margin-bottom:12px;display:block}
.card h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;text-transform:none}
.card p{color:var(--muted);font-size:.98rem;line-height:1.6}
.card.soft{background:var(--soft)}

/* WHAT'S-INCLUDED CHECKLIST (service pages) */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px clamp(28px,4vw,56px);list-style:none}
.checklist li{position:relative;padding-left:1.5em;font-size:1.05rem;color:var(--ink);line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:999px;background:var(--kelly)}
.checklist li b{font-weight:600}
@media(max-width:860px){.checklist{grid-template-columns:1fr}}

/* FILTER / SEGMENT CHIPS */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,40px)}
.filters button{font-weight:600;font-size:.92rem;padding:.6em 1.25em;border-radius:999px;border:0;cursor:pointer;background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.filters button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}

/* SERVICES (dark band, Nike shop-by-sport filmstrip) */
.svc{background:var(--near);color:#fff;overflow:hidden}
.svc .sec-h{align-items:center}
.svc .sec-h h2{color:#fff}
.svc .sec-h a{color:#fff;border-color:var(--kelly)}
/* service overview grid on the dark band (hub) */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* HORIZONTAL RAILS — full-bleed to the right viewport edge (Nike-style); first card aligns with content */
.rail{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--edge)}
.rail::-webkit-scrollbar{display:none}
/* custom scrollbar under a rail (Nike-style, replaces arrows) */
.railbar{position:relative;height:18px;margin-top:clamp(22px,2.6vw,36px);cursor:pointer;touch-action:none}
.railbar::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.railbar.on-light::before{background:rgba(20,70,60,.16)}
.railbar-thumb{position:absolute;top:50%;height:3px;min-width:44px;background:#fff;border-radius:3px;transform:translate(0,-50%)}
.railbar.on-light .railbar-thumb{background:var(--ink)}
.scard{flex:0 0 clamp(300px,31vw,430px);scroll-snap-align:start;position:relative;overflow:hidden;aspect-ratio:4/5;display:block;background:var(--soft)}
/* portfolio tiles in a horizontal rail (Our Work) */
.workrail{align-items:flex-start}
.workrail .tile{flex:0 0 clamp(300px,32vw,420px)}
.scard img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.scard:hover img{transform:scale(1.04)}
.scard .plabel{position:absolute;left:20px;bottom:20px;z-index:2;background:#fff;color:var(--ink);font-weight:600;font-size:1rem;padding:.8em 1.4em;border-radius:999px;transition:background .22s var(--ease),color .22s var(--ease)}
.scard:hover .plabel{background:var(--kelly-ink);color:#fff}

/* REVIEWS / PROOF (light band) */
.reviews{background:var(--soft)}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.rcard{background:#fff;border:1px solid var(--line);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column}
.stars{color:var(--kelly-ink);font-size:.95rem;letter-spacing:3px;margin-bottom:16px}
.rcard blockquote{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.55;font-weight:500;color:var(--ink);margin:0 0 22px}
.rcard .who{margin-top:auto}
.rcard .who b{display:block;font-weight:600;font-size:.98rem;color:var(--ink)}
.rcard .who span{color:var(--muted);font-size:.9rem}
.trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(22px,3.5vw,48px);margin-top:clamp(34px,4vw,56px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.trustbar.left{justify-content:flex-start}
.trustbar .ti{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;color:var(--ink)}
.trustbar .ti::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--kelly);flex:none}

/* COMPANIES — home trust row */
.co{text-align:center}
.co h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.co p{color:var(--muted);max-width:52ch;margin:14px auto 0;font-size:1.05rem}
.logorow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(18px,2.5vw,36px);max-width:1240px;margin:clamp(40px,5vw,64px) auto 0}
.logorow img{max-height:92px;max-width:190px;width:auto;height:auto;object-fit:contain;opacity:.98}
.logorow .grc{max-height:104px}
.logorow .pwr{max-height:98px}

/* COMPANIES — dedicated page brand cards */
.cobiz{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
.cobiz .b{background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;min-height:230px;transition:box-shadow .2s var(--ease)}
.cobiz .b:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.cobiz .b img{height:60px;width:auto;max-width:210px;object-fit:contain;object-position:left center;margin-bottom:20px}
.cobiz .b h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;text-transform:none;margin-bottom:8px}
.cobiz .b .region{color:var(--kelly-ink);font-weight:700;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.cobiz .b .meta{color:var(--muted);font-size:.98rem;line-height:1.6;margin-bottom:22px}
.cobiz .b .go{margin-top:auto}
.cobiz .b .go .pill{padding:.6em 1.25em;font-size:.9rem}

/* LEADERSHIP */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.team.cols3{grid-template-columns:repeat(3,1fr)}
.team .m .im{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.team .m .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s var(--ease),transform .8s var(--ease)}
.team .m:hover .im img{filter:grayscale(0);transform:scale(1.04)}
/* monogram placeholder until real headshots arrive */
.team .m .ph{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--soft),#e7ede8);color:var(--ink);font-weight:800;font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:.03em;opacity:.5}
.team .m h3{font-size:1.1rem;font-weight:600;margin-top:14px;text-transform:none;letter-spacing:-.01em}
.team .m .role{color:var(--muted);font-size:.92rem;margin-top:2px;line-height:1.4}
@media(max-width:860px){
  /* leadership scrolls horizontally (full-bleed) on mobile, first card inset */
  .team.cols3{display:flex;grid-template-columns:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad);gap:14px}
  .team.cols3::-webkit-scrollbar{display:none}
  .team.cols3 .m{flex:0 0 60vw;scroll-snap-align:start}
}

/* CAREERS — role list */
.roles{border-top:1px solid var(--line)}
.roles a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}

.roles a .t{font-size:clamp(1.15rem,2vw,1.55rem);font-weight:700;letter-spacing:-.01em}
.roles a .t{transition:transform .25s var(--ease)}
.roles a:hover .t{transform:translateX(12px)}
.roles a .meta{color:var(--muted);font-size:.95rem;white-space:nowrap}
.roles a .arw{color:var(--kelly-ink);font-weight:700}

/* CONTACT FORM */
.form{display:grid;gap:16px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-weight:600;font-size:.85rem;letter-spacing:.02em;margin-bottom:7px;color:var(--ink)}
.form input,.form textarea,.form select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #c5cec2;border-radius:0;padding:.85em 1em;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:#6f7d74}
.form .pill{justify-self:start;margin-top:6px;border:0;font:inherit}
.contactgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.applyimg{align-self:stretch;overflow:hidden}
.applyimg img{width:100%;height:100%;object-fit:cover;display:block;min-height:360px}
.cinfo h3{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 6px}
.cinfo .big{font-size:1.15rem;font-weight:600;color:var(--ink)}
.cinfo .blk{margin-bottom:26px}
.formnote{color:var(--muted);font-size:.9rem;margin-top:4px}
.formerr{color:#b3261e;font-size:.92rem;margin-top:10px;font-weight:600}
.form .fieldnote{font-weight:400;color:var(--muted);font-size:.85rem}
/* multi-select service pills */
.checkset{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.checkset label{display:inline-flex;align-items:center;cursor:pointer;font-weight:600;font-size:.9rem;padding:.55em 1.05em;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);user-select:none}
.checkset label:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.checkset input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.checkset label:has(input:checked){background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
/* CV file picker */
.filepick{display:flex;align-items:center;gap:.7em;cursor:pointer;border:1px dashed var(--line);padding:.85em 1em;color:var(--muted);transition:border-color .2s var(--ease)}
.filepick:hover{border-color:var(--ink)}
.filepick input{position:absolute;opacity:0;width:0;height:0}
.filepick .fpname{color:var(--ink);font-weight:600}
.thanks{background:var(--soft);border:1px solid var(--line);padding:clamp(28px,4vw,48px);text-align:center}
.thanks h3{font-size:1.4rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px}
.thanks p{color:var(--muted)}

/* SCROLL REVEAL */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* CTA */
.cta{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,36,29,.72),rgba(10,36,29,.4))}
.cta .in{position:relative;z-index:2;padding:0 var(--pad)}
.cta h2{font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;max-width:16ch;margin:0 auto 1.5rem;line-height:.95}
.cta p{max-width:44ch;margin:0 auto 1.5rem;opacity:.95;font-size:1.1rem}
.cta .ph{display:block;margin-top:1.2rem;opacity:.9}
.cta .ph a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* FOOTER */
footer{background:var(--near);color:rgba(255,255,255,.8);padding:var(--sec) 0 32px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .flogo{height:34px;margin-bottom:16px}
footer h2{color:#fff;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;font-weight:700;line-height:1.4}
footer a{display:block;padding:6px 0;color:rgba(255,255,255,.8)}
footer a:hover{color:#fff}
.foot p{max-width:34ch;line-height:1.7}
.foot-b{border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem}

@media(max-width:860px){
  .nav .links{display:none}.nav .ph{display:none}
  /* keep logo + CTA + hamburger on one row on phones (logo height set via .brand .logo below) */
  .nav{gap:14px}.nav .right{gap:12px}.brand{flex:0 1 auto;min-width:0}
  
  .nav .links .mph{display:block;font-weight:700;color:var(--kelly-ink)}
  .menub{display:block}
  .nav .links.open{display:flex;position:fixed;inset:var(--nav) 0 auto 0;transform:none;left:0;flex-direction:column;gap:18px;background:#fff;padding:22px var(--pad);border-bottom:1px solid var(--line)}
  .nav .links .has-sub{flex-direction:column;align-items:flex-start;width:100%}
  .nav .links .has-sub::after{display:none}
  .nav .subhead{display:flex;align-items:center;justify-content:space-between;width:100%}
  .nav .subtoggle{display:block;width:44px;height:34px;margin:-6px 0;background:none;border:0;cursor:pointer;position:relative;flex:none}
  .nav .subtoggle::before{content:"";position:absolute;top:42%;left:50%;width:9px;height:9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg);transition:transform .22s var(--ease)}
  .nav .has-sub.open .subtoggle::before{transform:translate(-50%,-25%) rotate(-135deg)}
  .nav .subnav{display:none;position:static;box-shadow:none;border:0;border-radius:0;padding:10px 0 0 14px;min-width:0;gap:0;transition:none}
  .nav .has-sub:hover .subnav,.nav .has-sub:focus-within .subnav{transform:none}
  .nav .has-sub.open .subnav{display:flex;opacity:1;visibility:visible;transform:none}
  .nav .subnav a{padding:7px 0;font-weight:500;color:var(--muted)}
  /* work tiles scroll horizontally on mobile instead of stacking; full-bleed like the services rail */
  .grid3{display:flex;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;scroll-snap-type:x mandatory;
         margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad);scroll-padding-left:var(--pad)}
  .grid3::-webkit-scrollbar{display:none}
  .grid3>*{flex:0 0 78vw;scroll-snap-align:start}
  .tile .im{aspect-ratio:4/5}
  .scard{flex-basis:82vw;aspect-ratio:4/5}
  .workrail .tile{flex-basis:80vw}
  .reviewrail .rcard{flex-basis:84vw}
  .rail-nav{display:none}
  /* client reviews scroll horizontally (full-bleed) on mobile, first card inset */
  .rgrid{display:flex;grid-template-columns:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad);gap:14px}
  .rgrid::-webkit-scrollbar{display:none}
  .rgrid .rcard{flex:0 0 82vw;scroll-snap-align:start}
  .logorow{grid-template-columns:repeat(2,1fr);gap:28px}
  .logorow img{max-width:100%;max-height:60px}
  .foot{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:18px}
  /* 3-up card rows (Why Raise) scroll horizontally (full-bleed) on mobile */
  .cards{display:flex;grid-template-columns:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .cards::-webkit-scrollbar{display:none}
  .cards .card{flex:0 0 78vw;scroll-snap-align:start}
  .cards.two{display:grid;grid-template-columns:1fr;margin:0;padding:0}
  /* 5-value cards scroll horizontally (full-bleed) on mobile */
  .cards.c5{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .cards.c5::-webkit-scrollbar{display:none}
  .cards.c5 .card{flex:0 0 78vw;scroll-snap-align:start}
  .svcgrid{grid-template-columns:1fr}
  /* six companies scroll horizontally (full-bleed) on mobile, first card inset */
  .cobiz{display:flex;grid-template-columns:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .cobiz::-webkit-scrollbar{display:none}
  .cobiz .b{flex:0 0 78vw;scroll-snap-align:start}
  .team{grid-template-columns:repeat(2,1fr)}
  .contactgrid{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .roles a{flex-direction:column;align-items:flex-start;gap:6px}
  .roles a .meta{color:var(--muted)}
  .trustbar.left{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- work portfolio lightbox --- */
.tile.has-gallery{cursor:pointer}
.tile.has-gallery .im::after{content:"⤢";position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(14,49,40,.82);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.tile.has-gallery:hover .im::after,.tile.has-gallery:focus-visible .im::after{opacity:1;transform:none}
.tile.has-gallery:focus-visible{outline:2px solid var(--kelly-ink);outline-offset:3px}
.logorow .reef{max-height:68px}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(10,20,15,.93);padding:clamp(16px,4vw,52px);overscroll-behavior:contain;touch-action:none}
.lightbox.open{display:flex}
.lightbox .lb-inner{position:relative;width:min(1080px,100%);display:flex;flex-direction:column;gap:16px}
.lightbox .lb-stage{position:relative;aspect-ratio:3/2;background:#0a140f;border-radius:8px;overflow:hidden}
.lightbox .lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s var(--ease)}
.lightbox .lb-stage img.on{opacity:1}
.lightbox .lb-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:#fff}
.lightbox .lb-cap h3{color:#fff;margin:0;font-weight:600;font-size:clamp(1.15rem,2.6vw,1.55rem);letter-spacing:-.01em}
.lightbox .lb-cap span{color:rgba(255,255,255,.72);font-size:.95rem;white-space:nowrap}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.16);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease)}
.lightbox .lb-nav:hover{background:rgba(255,255,255,.34)}
.lightbox .lb-prev{left:16px}
.lightbox .lb-next{right:16px}
.lightbox .lb-dots{display:flex;gap:9px;justify-content:center}
.lightbox .lb-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.36);cursor:pointer;transition:background .2s var(--ease)}
.lightbox .lb-dots button.on{background:#fff}
.lightbox .lb-x{position:fixed;top:20px;right:24px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;opacity:.85;transition:opacity .2s var(--ease)}
.lightbox .lb-x:hover{opacity:1}
@media(max-width:640px){.lightbox .lb-nav{width:42px;height:42px;font-size:1.4rem}.lightbox .lb-prev{left:8px}.lightbox .lb-next{right:8px}.lightbox .lb-cap{flex-direction:column;gap:4px}.lightbox .lb-cap span{white-space:normal}}

/* --- skip link (a11y) --- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:#fff;font-weight:700;padding:10px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0;outline:2px solid var(--kelly-ink);outline-offset:2px}
/* phone link lives in the drawer only */
.links .mph{display:none}
/* --- what-happens-next steps (contact) --- */
.nextsteps{list-style:none;counter-reset:ns;padding:0;margin:6px 0 0}
.nextsteps li{counter-increment:ns;position:relative;padding:5px 0 5px 34px;color:var(--muted);font-size:.95rem}
.nextsteps li::before{content:counter(ns);position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--kelly-ink);font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center}



/* ── Mystic Gardens: brand lockup + Raise endorsement ───────────────────── */
.brand{display:inline-flex;align-items:center;gap:14px}
.brand .logo{height:38px;width:auto}
@media(max-width:600px){.brand .logo{height:32px}}
@media(max-width:400px){.brand .logo{height:28px}}
.brand .endorse{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line)}
.brand .endorse small{font-size:.62rem;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.brand .endorse img{height:20px;width:auto}
@media(max-width:600px){.brand .endorse{display:none}}
/* footer text wordmark (dark bg — no reversed raster logo needed) */
.fwordmark{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.fwordmark span{color:var(--kelly)}
.fendorse{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600}
.fendorse img{height:18px;width:auto;opacity:.9}
/* home endorsement strip */
.endorsestrip{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.endorsestrip .in{max-width:var(--shell);margin:0 auto;padding:26px var(--pad);display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;flex-wrap:wrap}
.endorsestrip img{height:26px;width:auto}
.endorsestrip p{color:var(--muted);font-size:.98rem;font-weight:500;max-width:58ch}
.endorsestrip b{color:var(--ink);font-weight:700}
/* aligned inline endorsement lockup (matches GRC): nudge the 2-line Raise logo so "Raise" lands on the "A division of" line */
.edorse-mark{display:inline-flex;align-items:center;gap:11px;font-weight:700;color:var(--ink);font-size:1rem;white-space:nowrap}
.edorse-mark img{height:27px;width:auto;display:block;transform:translateY(3px)}
@media(max-width:600px){.edorse-mark{font-size:.95rem}}

/* ── Mystic dual-path (commercial / residential) ───────────────────────── */
.dual{display:grid;grid-template-columns:1.08fr 1fr;gap:16px}
.dcard{position:relative;overflow:hidden;border-radius:2px;background:var(--soft);min-height:clamp(340px,42vw,520px);display:flex;align-items:flex-end;color:#fff}
.dcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.dcard:hover>img{transform:scale(1.045)}
.dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,39,28,.84) 0%,rgba(21,39,28,.58) 34%,rgba(21,39,28,.26) 58%,rgba(21,39,28,0) 80%)}
.dcard .in{position:relative;z-index:2;padding:clamp(26px,3vw,40px)}
.dcard .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.92}
.dcard h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin:.5rem 0 .6rem}
.dcard p{font-size:1.02rem;opacity:.94;max-width:38ch;margin-bottom:1.2rem;line-height:1.55}
.dcard .go{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.95rem;border-bottom:2px solid var(--kelly)}
@media(max-width:760px){.dual{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   MYSTIC RESTYLE — editorial serif + sentence-case + softer shapes
   Gives Mystic its own hospitality personality atop the shared Raise engine.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Merriweather';src:url('/brand/fonts/Merriweather.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('/brand/fonts/Merriweather-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--serif:'Merriweather',Georgia,'Times New Roman',serif}

/* Display headings → warm serif, sentence-case, lighter weight */
h1,h2,h3,
.hero h1,.phero h1,.split h2,.feature h2,.fbox h2,.dcard h3,.cta h2,.tile h3,.sec-h h2,.serve h2{
  font-family:var(--serif);
  text-transform:none;
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.1;
}
.hero h1{font-weight:400;font-size:clamp(2.3rem,4.6vw,4.3rem);max-width:22ch;line-height:1.02;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(21,39,28,.34)}
.phero h1{font-weight:400;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.05}
.split h2,.feature h2,.fbox h2,.cta h2{font-weight:400}
.dcard h3{font-weight:700;letter-spacing:-.01em}
.tile h3{font-weight:400;font-size:1.35rem}
.sec-h h2{font-weight:400}
/* review quotes → serif italic (hospitality editorial voice) */
.rcard blockquote{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}

/* Softer shapes — rounded imagery & cards (Raise flagship is sharp-cornered) */
.tile .im{border-radius:16px}
.dcard{border-radius:20px}
.scard{border-radius:18px}
.rcard{border-radius:16px}
.card{border-radius:16px}
.applyimg img,.contactgrid .cinfo{border-radius:16px}
.form input,.form select,.form textarea{border-radius:12px}
.checkset label{border-radius:12px}

/* Footer — white Mystic mark instead of the orange text wordmark */
.fwordmark{display:none}
footer .flogo-mark{height:38px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px;opacity:.96}
/* Clean "A division of Raise" endorsement — sentence-case + real Raise logo (nav + footer) */
.brand .endorse{gap:9px;padding-left:13px}
.brand .endorse small{font-size:.64rem;line-height:1.15;letter-spacing:.01em;text-transform:none;color:var(--muted);font-weight:500}
.brand .endorse .rlogo{height:15px;width:auto}
.fendorse{text-transform:none;font-size:.82rem;letter-spacing:.01em;color:rgba(255,255,255,.72);font-weight:500}
.fendorse img{height:16px}
/* Home hero → cross-fading slides (was one static image) */
.hero .pslide{opacity:0;z-index:0;will-change:opacity,transform;transform:translateZ(0) scale(1.04);transition:opacity 1.4s var(--ease);backface-visibility:hidden}
.hero .pslide.on{opacity:1;z-index:1;animation:pheroKB 6.6s linear both}
.hero .pslide.enter{opacity:1;z-index:2}
.hero::after{z-index:3}
.hero-tx{z-index:4}

/* nav: nudge the bottom-heavy Mystic wordmark up for optical alignment */
.nav .brand .logo{transform:translateY(-2px)}

.hero-tx .hero-ph{display:inline-block;margin-left:20px;color:#fff;font-weight:600;font-size:1rem;border-bottom:2px solid var(--kelly)}
@media(max-width:600px){.hero-tx .hero-ph{display:block;margin:14px 0 0}}

/* ── Design-audit fixes ─────────────────────────────────────────────────── */
.skip{background:var(--ink)}                                   /* was undefined --forest → invisible */
/* prose (privacy/legal) — global reset zeroes margins, so restore here */
.prose{color:var(--ink);line-height:1.7}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em;margin:1.9rem 0 .5rem;text-transform:none}
.prose p{margin-bottom:1rem;color:var(--muted)}
.prose p+p{margin-top:0}
main p:not([class]){margin-bottom:1rem}                        /* safety for any future rich text */
/* keep micro uppercase labels in Inter (broad serif h3 was catching them) */
.cinfo h3,.thanks h3{font-family:'Inter',Helvetica,Arial,sans-serif}
/* photo-overlay display heads: heavier serif for punch over imagery */
.hero h1,.feature h2,.cta h2{font-weight:700}
/* warm the form fields (were cool blue-grays that read as a template default) */
.form input,.form select,.form textarea{border-color:var(--line)}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
/* finish the rounded-corner treatment */
.thanks,.filepick{border-radius:12px}
.cobiz .b{border-radius:16px}
/* make clay the consistent nav accent (was green — muted the brand) */
.nav .links a:hover{border-color:var(--kelly-ink)}
.nav .links a[aria-current="page"]{border-color:var(--kelly-ink)}


/* ==========================================================================
   HERO LEGIBILITY (2026-07-25)
   Kept at the end of the file so it wins over the per-brand accent overrides
   above. See the hero scrim change further up for the desktop half of this.
   ========================================================================== */
/* The 100vh hero left ~55% of the first phone screen as empty sky above
   bottom-anchored text. A shorter hero lifts the content and lets the next section
   peek (scroll affordance); svh stops mobile browser chrome from eating it. The
   scrim runs higher here because the subcopy wraps to ~5 lines at this width. */
@media(max-width:600px){
  .hero{height:clamp(520px,78svh,720px)}
  .hero-tx{bottom:clamp(24px,4vh,48px)}
  .hero::after{background:linear-gradient(0deg,rgba(10,36,29,.78) 0%,rgba(10,36,29,.56) 34%,rgba(10,36,29,.22) 58%,rgba(10,36,29,0) 80%)}
}

/* Min-pixel contrast on the hero headline still failed on the brightest photos
   (GRC 2.8:1, LCL 2.9:1 at 390px) while medians were already comfortable
   (5.3-7.8:1) — i.e. single bright pixels behind thin letter strokes, not a
   whole-headline problem. A tight shadow fixes exactly that and keeps the
   photography vivid; darkening the scrim further would not. Placed here so it
   wins over the per-brand .hero h1 shadows above. */
.hero h1,.phero h1{text-shadow:0 1px 3px rgba(10,36,29,.42),0 2px 26px rgba(10,36,29,.40)}
.hero-tx .kick{text-shadow:0 1px 3px rgba(10,36,29,.50)}

/* ==========================================================================
   AREA LIST — two-column grid of linked entries with a short description.
   (Started life as an FAQ component; the FAQ sections were removed 2026-07-25
   at Alvaro's request, but the areas hubs use this grid.)
   ========================================================================== */
.arealist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.8vw,40px) clamp(28px,4vw,56px);margin-top:clamp(6px,1vw,14px)}
.arealist h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin-bottom:.5rem;text-transform:none}
.arealist p{color:var(--muted);font-size:1rem;line-height:1.62;max-width:58ch}
@media(max-width:860px){.arealist{grid-template-columns:1fr}}

/* .phero subcopy also carried opacity:.96, which stacks with the photo underneath and
   was part of the measured failure. Full opacity; the scrim now does the work. */
.phero p{opacity:1}

/* ==========================================================================
   LOCATION (city) PAGES — 2026-07-25
   ========================================================================== */
/* The breadcrumb sat close enough to the intro heading that the heading read as
   bound to it rather than to its own content (detector: heading-rhythm). More air
   above; scoped so the service pages' identical .crumb is untouched. */
.areaintro .crumb{margin-bottom:clamp(34px,5vw,60px)}
/* Service links. The two-column .arealist grid expects a heading plus a paragraph;
   bare heading cells in it tripped the heading-rhythm check, so these get their own. */
.arealinks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px);list-style:none;margin-top:clamp(6px,1vw,14px)}
.arealinks li{border-top:1px solid var(--line)}
.arealinks a{display:block;padding:16px 0;font-weight:600;font-size:1.02rem}
.arealinks a:hover{color:var(--kelly-ink)}
@media(max-width:860px){.arealinks{grid-template-columns:1fr}}


/* ==========================================================================
   LARGE DESKTOP — 1700px and up (2026-08-17)
   The site was pinned to a hard-coded 1400px shell, which is 55% of a 2560px
   viewport, and every clamp() ceiling had already topped out, so display type
   looked smaller the bigger the screen got. Raising the root font size lifts
   every rem-based clamp ceiling in proportion; the widened shell and the few
   overrides below cover what proportion alone cannot. The hero headline is
   deliberately held BELOW proportional growth (it reads as shouting at full
   scale on a 27 inch monitor) and its block is kept to about a third of the
   hero so the photograph stays the dominant element. Nothing under 1700px is
   touched. Shipped on the Raise flagship first.
   ========================================================================== */
@media(min-width:1700px){
  html{font-size:17px}
  :root{--shell:1560px;--pad:56px;--nav:74px}
  .nav{height:var(--nav)}
  .nav .logo{height:42px}
  .nav .links{gap:38px}
  .hero{height:calc(100vh - var(--nav))}
  .hero h1{font-size:clamp(4.9rem,4.8vw,5.5rem);max-width:22ch}
  .hero p{max-width:46ch}
  .phero h1{font-size:clamp(4.2rem,4.5vw,5.4rem)}
  .phero p{max-width:58ch}
  .sec-h h2{font-size:clamp(2.8rem,3vw,3.6rem)}
  .split h2{font-size:clamp(3.2rem,3.4vw,4rem)}
  .lead{max-width:66ch}
  .feature{height:clamp(860px,74vh,1040px)}
  .feature h2{font-size:clamp(4rem,4.3vw,5.2rem)}
  .feature p{max-width:52ch}
  .feature .fbox{max-width:760px}
  .cta h2{font-size:clamp(4.5rem,4.7vw,5.6rem)}
  .co h2{font-size:clamp(2.5rem,2.7vw,3.2rem)}
  .co p{max-width:60ch}
  .logorow{max-width:none}
  .scard{flex:0 0 clamp(430px,26vw,560px)}
  .workrail .tile{flex:0 0 clamp(420px,26vw,540px)}
  .arealist p{max-width:64ch}
  .foot p{max-width:38ch}
}
@media(min-width:2100px){
  html{font-size:17.5px}
  :root{--shell:1780px;--pad:64px;--nav:80px}
  .hero h1{font-size:clamp(5.4rem,4.5vw,5.8rem)}
  .feature{height:clamp(1000px,72vh,1180px)}
  .grid3{gap:16px}
  .scard{flex:0 0 clamp(500px,24vw,620px)}
  .workrail .tile{flex:0 0 clamp(500px,24vw,600px)}
}
@media(min-width:2500px){
  html{font-size:18px}
  :root{--shell:1980px;--pad:72px}
  .hero h1{font-size:5.8rem}
}

/* Six brand SVGs with real intrinsic widths overflowed a `repeat(6,1fr)` row
   past the right edge at 1024px (masked only by body overflow-x:hidden).
   minmax(0,1fr) caps the tracks; six across is unreadable between the mobile
   breakpoint and 1180px, so the row drops to three there. */
@media(min-width:861px) and (max-width:1180px){
  .logorow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,34px)}
  .logorow img{max-height:76px;max-width:100%}
}

/* Heading line breaks (Alvaro 10/19/2026). engine.py `_heading_breaks` wraps each
   comma phrase in .hph and each multi-word place name in .hnw; together with balance
   this breaks "The whole property, / one team" at the comma, never splits
   "Fort Lauderdale", and stops one-word last lines. All widths. */
h1,h2,h3{text-wrap:balance}
.hph{display:inline-block}
.hnw{white-space:nowrap}

/* Home page on phones: headline only. Alvaro 10/19/2026, the hero sentence, the feature
   paragraph and the two "who we care for" card blurbs made the phone home page a wall of
   text. `.hero ~ .feature` scopes the feature rule to the home page (inner pages have no
   .hero), so service/about pages keep their copy. Desktop and tablet unchanged. */
@media(max-width:640px){
  .hero .in>p,.hero ~ .feature .in>p,.dcard .in>p{display:none}
  /* the hidden paragraphs carried the spacing; without them the headline touched the CTA
     and the feature heading touched the numbers (0px, measured 10/19) */
  .hero .in h1{margin-bottom:1.5rem}
  .hero ~ .feature .in h2{margin-bottom:1.75rem}
  /* the desktop measure caps (14-16ch) only force extra breaks on a phone, where the
     screen is already narrower than the cap is meant to protect */
  .hero h1,.phero h1,.feature h2,.fbox h2,.cta h2,.split h2,.sec-h h2,.co h2{max-width:none}
}

/* ===== BEGIN shared-ui (generated by site-engine/sync-shared-ui.py — do not edit here) ===== */
/* ==========================================================================
   SHARED UI — single source of truth, owned by site-engine (2026-08-17)

   Do NOT edit this block inside a site's css/site.css. It is stamped into
   every site between the BEGIN/END markers by:

       python3 site-engine/sync-shared-ui.py [--check]

   Edit THIS file, re-run the sync, rebuild, redeploy. `--check` exits non-zero
   if any site has drifted, so it can gate a deploy.

   Why this exists: the five stylesheets are separate files with per-brand
   tails, and the CTA drifted silently. GRC had `.pill{border-radius:4px}`
   (square corners against everyone else's pill), and Mystic and Everglades
   shrank the nav button to .8rem/.5em while the flagship kept .9rem/.6em. The
   "Request a proposal" control is the same promise on every site and has to
   look identical; brand expression belongs in colour and photography, not in
   the shape of the primary button.

   Canonical definition = the Raise flagship's.
   ========================================================================== */

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:600;
  font-size:.98rem;
  padding:.85em 1.7em;
  border-radius:999px;
  white-space:nowrap;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
  cursor:pointer;
  border:0;
}
.pill.dark{background:var(--ink);color:#fff}
.pill.dark:hover{background:var(--kelly-ink);transform:translateY(-1px)}
.pill.light{background:#fff;color:var(--ink)}
.pill.light:hover{background:var(--kelly-ink);color:#fff;transform:translateY(-1px)}

/* nav CTA: one size on every site */
.nav .pill{padding:.62em 1.3em;font-size:.9rem;flex:none}

/* hero CTA */
.hero .pill{font-size:1rem;padding:.95em 2em}
.phero .pill{margin-top:1.6rem}

/* form submit inherits the pill but is laid out by the grid */
.form .pill{justify-self:start;margin-top:6px;border:0;font:inherit}

/* ==========================================================================
   SECTION SEAMS (2026-08-17, third revision)

   Alvaro, three times: too much empty space. The first two passes were wrong
   in a way worth recording. Pass one cut only section-to-section padding and
   was too timid. Pass two went after CONTENT spacing as well — space under
   headings, under lead paragraphs, inside cards, above the logo row — and he
   was explicit that this was the wrong lever: "the empty space is between
   sections, not between content." It also broke the gap between the brand
   logos and the Meet-the-divisions button. All of that content spacing is
   reverted; nothing below touches the inside of a section.

   Pass three measured every ADJACENT SECTION PAIR on all 100 pages and
   grouped by boundary type. That is what found the two real offenders, both
   of which the earlier passes missed completely:

     135px  section.sec + section.sec        (the plain seam, uncovered)
     131px  section.sec + footer             (21 pages, never had a rule)
      96px  background-change pairs
      74px  section.endorsestrip + section.sec   <- the Mystic case he cited;
             .endorsestrip was in none of the selectors, so the next section
             fell through to full default top padding

   Rule: EVERY boundary type gets an explicit value. A boundary that falls
   through to the default is the bug. Audit with scratchpad/seams.js.

   Tuned up ~35% on 2026-08-17 after Alvaro finally saw the real thing (the
   three passes before that never reached his browser — the stylesheet URL was
   year-cached, see bump-ver.py) and called it too tight. Seams at 1440 now:
   plain 98, footer 92, background change 78, after a full-bleed band 46.
   Original was a flat 208 everywhere. To adjust again, scale these six
   clamps together; they are the whole system.
   ========================================================================== */

/* plain content section against another: the seam is the only separator, so
   it carries the most, but 72px total rather than the old 135px */
.sec{padding-top:clamp(36px,3.9vw,54px);padding-bottom:clamp(30px,3.2vw,44px)}

/* a full-bleed band separates on its own; so does the endorsement strip */
.hero + .sec,
.phero + .sec,
.phero.short + .sec,
.feature + .sec,
.cta + .sec,
.endorsestrip + .sec{padding-top:clamp(30px,3.2vw,46px)}
.sec:has(+ .feature),
.sec:has(+ .cta){padding-bottom:clamp(26px,2.7vw,38px)}

/* a background change separates on its own, in both directions */
.sec + .sec.reviews,
.sec + .sec.svc,
.sec.reviews + .sec,
.sec.svc + .sec,
.sec.reviews + .sec.svc,
.sec.svc + .sec.reviews{padding-top:clamp(28px,3vw,42px)}
.sec:has(+ .sec.reviews),
.sec:has(+ .sec.svc){padding-bottom:clamp(26px,2.6vw,36px)}

/* the footer had no rule at all and was inheriting the full section step on
   every one of the 21 pages that end in a content section */
footer{padding-top:clamp(32px,3.5vw,48px)}

/* full-bleed bands were sized in viewport units well beyond their content:
   the closing CTA reserved 70vh (630px at 1440x900) for a headline, a button
   and a phone line; the feature band reserved 82vh for a heading, one
   paragraph and a stat row. These are section heights, not content spacing. */
.cta{min-height:clamp(400px,50vh,600px)}
/* NEVER `height` on a band that holds text. `.feature` is align-items:flex-end
   inside overflow:hidden, so the moment a vh-sized band is shorter than its
   content the heading overflows UPWARD and is clipped off the top. At 1440x650
   it was within 2px of doing exactly that, and on Alvaro's window it did.
   min-height lets the band grow; the padding-top guarantees clearance above the
   heading once it does. */
.feature{height:auto;min-height:clamp(440px,68vh,720px);padding-top:clamp(48px,7vh,90px)}
@media(min-width:1700px){
  .feature{height:auto;min-height:clamp(680px,58vh,860px)}
  .cta{min-height:clamp(520px,46vh,680px)}
}

/* ==========================================================================
   ENDORSEMENT STRIP ALIGNMENT (2026-08-17)

   "A division of [Raise logo]" sat visibly off against the sentence beside
   it, and earlier attempts to fix it by nudging the logo (a hardcoded
   translateY(3px)) never landed, because the logo was never the problem.

   The mark is ONE line. The sentence is TWO. `align-items:center` centres
   each against the flex line, so the single-line mark floats halfway between
   the sentence's two lines. Measured offset from the sentence's first
   baseline: +11.5px at 1440, +13.2px at 1920. That is the whole defect.

   Baseline alignment puts "A division of Raise" exactly on the sentence's
   first line: measured 0.0px delta at 1920, 1440, 1100 and 900. Below ~900px
   the strip already wraps to stacked, where alignment is moot.

   Note this is on `.in` ONLY. `.edorse-mark` keeps `align-items:center`
   internally, which is what sets the two-line Raise lockup correctly against
   the words "A division of". Changing that one re-breaks it.

   Stamped from shared-ui so it also wins over the duplicate `.endorsestrip
   .in` block sitting in the Living Colour brand tail.
   ========================================================================== */
.endorsestrip .in{align-items:baseline}

/* the two-line Raise lockup hangs its "LANDSCAPING" tagline below the shared
   baseline, so equal padding reads as more space underneath than above */
.endorsestrip .in{padding-top:26px;padding-bottom:11px}

/* "Who we serve" on the division homepages is a 2-up .dual grid that stacked
   on mobile. Every other multi-item block on these sites (.grid3, .cards,
   .cobiz, .rgrid, .team) scrolls horizontally there instead; .dual was the one
   that did not. Same full-bleed idiom, first card inset to the content edge. */
@media(max-width:860px){
  .dual{display:flex;grid-template-columns:none;flex-wrap:nowrap;overflow-x:auto;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;
        scroll-padding-left:var(--pad);
        margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));
        padding-left:var(--pad);padding-right:var(--pad);gap:14px}
  .dual::-webkit-scrollbar{display:none}
  .dual .dcard{flex:0 0 82vw;scroll-snap-align:start}
}

/* ==========================================================================
   MOBILE LAYOUT (2026-08-17)
   ========================================================================== */

/* A 3-up stat row wraps 2 + 1 on a phone, which reads as a mistake rather than
   a layout. Measured wrap threshold: below 430px on Raise, below 560px on
   Everglades, so it is content-dependent and no single width is exactly right.
   The third stat is HIDDEN, not removed: it stays in the HTML and in the page
   source for anyone reading or crawling it, and returns above 600px.
   `:nth-child(3):nth-last-child(1)` matches the third item only when it is also
   the last, so rows of two are untouched and a future row of four is too. */
@media(max-width:600px){
  .nums > .num:nth-child(3):nth-last-child(1){display:none}
  /* a long label can stack even a 2-up row, so tighten the gap on a phone */
  .nums{gap:14px 22px}
}
/* Everglades and Living Colour were still 7-12px over at 360px on two long
   labels (e.g. Everglades' "Years in South Florida"). Letting the
   label scale with the viewport keeps the row on one line down to 320px
   without hiding a second stat. */
@media(max-width:480px){
  .num span{font-size:clamp(.68rem,3vw,.8rem)}
  .nums{gap:12px 16px}
}
/* 320px (iPhone SE 1st gen) needed a few more px on Everglades' two longest labels */
@media(max-width:360px){
  .nums{gap:10px 12px}
}

/* Footer stacked in one column on mobile. It was two, which put the Explore
   links beside the company description and pushed Get in touch onto its own
   row underneath, so the three blocks read in a Z rather than in order.
   One column gives description, then Explore, then Get in touch. */
@media(max-width:860px){
  .foot{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   MOBILE TOUCH TARGETS (2026-08-17)

   From a real iPhone-class audit (390x844, touch, DPR 3) across all 100 pages.
   The measured sizes were: the hamburger **22x29px**, the drawer's services
   expander 44x34, drawer links 354x38, the nav CTA 169x39, footer links
   354x36, section "see all" links 91x28, and the hero's "or call" link 354x26.

   Apple and Google both specify 44px as the minimum comfortable target; WCAG
   2.5.8 sets a 24px floor. Primary controls go to 44, secondary text links to
   40. The hamburger was the real defect: a 22x29 target is genuinely hard to
   hit, and it is the only way to open the menu on a phone.

   Note the wide-image findings in that audit were false positives: the
   ken-burns hero images are deliberately scaled past the viewport inside an
   overflow:hidden parent. Verified, not a bug.
   ========================================================================== */
@media(max-width:860px){
  .menub{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;font-size:1.55rem;line-height:1}
  .nav .pill{min-height:44px}
  .nav .links a{min-height:44px;display:flex;align-items:center}
  .nav .subtoggle{width:44px;height:44px}
  .nav .subnav a{min-height:40px;display:flex;align-items:center}
  footer a{min-height:40px;display:flex;align-items:center}
  .foot-b a{min-height:40px;display:inline-flex;align-items:center}
  .sec-h a,.crumb a{min-height:40px;display:inline-flex;align-items:center}
  .hero-ph,.cta .ph a,.hero .ph{min-height:40px;display:inline-flex;align-items:center}
  /* brand lockups and the brand-logo row are links too, and were 26-36px tall */
  /* the flagship's header logo link has no .brand class, unlike the divisions' */
  .nav .brand,.nav>a:first-child,.nav a:has(img.logo),.logorow a,.cobiz .b a.dl{min-height:44px;display:inline-flex;align-items:center}
  .foot a,.foot>div>a{min-height:40px}
  /* segment filter chips were 34px; contact phone/email links 19-22px */
  .filters button{min-height:40px}
  .cinfo a,.cinfo .big{min-height:40px;display:inline-flex;align-items:center}
  /* city-list links were 21px; the division cards' Visit-site pill 39px */
  .arealist h3 a,.arealinks a{min-height:40px;display:inline-flex;align-items:center}
  .cobiz .go .pill{min-height:44px}
  /* every mail and phone link on the site, wherever it sits (they ran 19-23px) */
  a[href^="mailto:"],a[href^="tel:"]{min-height:40px;display:inline-flex;align-items:center}
  /* small-caps labels were 12-12.8px, tight on a phone */
  footer h2{font-size:.8rem}
  .kick{font-size:.82rem}
}

/* ==========================================================================
   WORK LIGHTBOX HEIGHT (2026-08-17)

   The stage was a fixed `aspect-ratio:3/2` inside a column that had no height
   ceiling, so on a short window the caption and the dot navigation fell below
   the fold with no way to scroll to them: measured 44px cut off at 1440x700
   and 34px at 1280x720, both ordinary laptop window heights. It only fitted at
   900px tall and above, which is why it looked fine in review.

   Capping the inner column at the viewport and letting the stage shrink means
   the caption and dots are always the last thing to lose space, never the
   first. The images are already object-fit:contain, so a shorter stage just
   letterboxes rather than cropping.
   ========================================================================== */
.lightbox .lb-inner{max-height:100%}
.lightbox .lb-stage{flex:0 1 auto;min-height:140px;max-height:100%}
.lightbox .lb-cap,.lightbox .lb-dots{flex:0 0 auto}



/* ==========================================================================
   FOOTER PARENT-COMPANY ENDORSEMENT LINK
   The "A Division of [Raise logo]" block in every OpCo footer. The logo is a
   real <a> to raiselandscaping.com so the parent site earns an inbound link
   from each division site — structured-data "url" values pass no authority.
   Neutralising `footer a` is the whole point of this rule: that selector sets
   display:block + padding:6px 0, and a min-height:40px inside the mobile
   media query, either of which would pull the endorsement row apart.
   `.fendorse a` (0,1,1) outranks `footer a` (0,0,2), media query or not.
   The flagship raise-website has no .fendorse block, so this is inert there.
   ========================================================================== */
.fendorse a{display:flex;align-items:center;padding:0;min-height:0}
.fendorse a img{transition:opacity .15s ease}
.fendorse a:hover img{opacity:1}


/* ==========================================================================
   ENDORSEMENT-STRIP PARENT-COMPANY LINK
   Sibling of the footer rule above, for the mid-page "A division of [Raise
   logo]" strip on every OpCo home page. Same reasoning: a real <a> so the
   parent site earns a second inbound link per division site.
   `.edorse-mark` is display:inline-flex, so the <a> becomes the flex item the
   img element used to be — it must carry the same inline-flex/centre alignment or
   the logo's translateY(3px) optical nudge lands against a different box.
   The anonymous "A division of" text run stays the FIRST flex item, so the
   span's baseline (what `.endorsestrip .in{align-items:baseline}` aligns on)
   is unchanged. The flagship raise-website has no .endorsestrip, so this is
   inert there.
   ========================================================================== */
.edorse-mark a{display:inline-flex;align-items:center;padding:0;min-height:0;text-decoration:none;border:0}
.edorse-mark a img{transition:opacity .15s ease}
.edorse-mark a:hover img{opacity:.75}

   HIRING — /careers (two doors + professional roles), /crew (one-minute field
   form, EN/ES), /apply (professional, resume). Markup in site-engine/hiring.py.
   Moved here from the Raise tail 10/23/2026 so all 7 sites share one copy.
   ========================================================================== */
.langsw{display:flex;width:max-content;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;overflow:hidden;margin-bottom:1.1rem}
.langsw button{font:inherit;font-weight:700;font-size:.85rem;padding:.45em 1em;border:0;background:transparent;color:#fff;cursor:pointer}
.langsw button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.langsw button:focus-visible{outline:3px solid var(--kelly);outline-offset:-3px}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pill.ghost:hover{background:var(--ink);color:#fff}

.hdoors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.phero.hhero{min-height:0;height:auto}
/* One line in BOTH languages: the brand 16ch cap broke the Spanish headline (Únete a nuestro equipo) onto two. */
.phero.hhero h1{max-width:none}
.hdoor{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid var(--line);background:#fff;padding:clamp(22px,3vw,36px);transition:border-color .2s ease}
.hdoor.field{background:var(--soft)}
.hdoor:hover{border-color:var(--ink)}
.hdoor:focus-visible{outline:3px solid var(--kelly);outline-offset:3px}
.hdoor h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;margin:0}
.hdoor .es{font-weight:700;font-size:.9rem;color:var(--kelly-ink)}
.hdoor ul{list-style:none;display:grid;gap:6px;color:var(--muted);margin:0;padding:0}
.hdoor li::before,.hfacts li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:9px;background:var(--kelly);margin-right:9px;vertical-align:middle}
.hdoor .pill{margin-top:auto}
.hdoor ul{margin-bottom:14px}

/* Flex, not an auto-fill grid: the cards always fill the row (2 cards = the two door widths
   above; 3 = thirds), and an odd last card stretches instead of leaving a hole. */
.hroles{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,24px)}
.hroles>.hrole{flex:1 1 280px;min-width:0}
.hrole{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hrole .kick{color:var(--kelly-ink);margin:0}
.hrole h3{font-size:1.3rem;line-height:1.1;text-transform:none;letter-spacing:-.01em;margin:0}
.hrole .sal{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.hrole .meta{color:var(--muted);font-size:.95rem}
.hrole .pill{margin-top:auto}
.hrole .meta{margin-bottom:12px}

.form .hjobpick{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.form .hjobpick legend{font-weight:600;font-size:.85rem;letter-spacing:.02em;margin-bottom:9px;color:var(--ink)}
.form .hjp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:14px 16px;border:1.5px solid #c5cec2;background:#fff;cursor:pointer;font-weight:inherit;letter-spacing:0;font-size:inherit}
.form .hjp:has(input:checked){border-color:var(--ink);background:var(--soft)}
.form .hjp:has(input:focus-visible){outline:3px solid var(--kelly);outline-offset:2px}
.form .hjp input{width:18px;height:18px;margin:0;accent-color:var(--ink);padding:0}
.form .hjp .t b{display:block;font-size:1rem}
.form .hjp .t small{display:block;color:var(--muted);font-size:.85rem}
.form .hjp .pay{text-align:right;font-weight:800;font-size:1.1rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.form .hjp .pay small{font-weight:600;font-size:.85rem;color:var(--muted)}
.form .seggrp{border:0;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.form .seggrp legend{width:100%;font-weight:600;font-size:.85rem;letter-spacing:.02em;margin-bottom:9px;color:var(--ink)}
.form .seg{position:relative;margin:0;font-size:inherit;letter-spacing:0;font-weight:inherit}
.form .seg input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.form .seg span{display:inline-block;font-weight:600;font-size:.95rem;padding:.6em 1.05em;border-radius:999px;border:1.5px solid #c5cec2;background:#fff;cursor:pointer}
.form .seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.form .seg input:focus-visible+span{outline:3px solid var(--kelly);outline-offset:2px}
.form .opt{font-weight:500;color:var(--muted)}
.hyardlock{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;background:var(--soft);padding:12px 14px;font-size:.95rem}
.hyardlock span{color:var(--muted);font-weight:600;font-size:.85rem}

.haside{display:grid;gap:14px;align-content:start}
.haside img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 55%;display:block;max-width:100%}
.haside h3{font-size:1.2rem;text-transform:none;letter-spacing:-.01em;margin:0}
.hwhere{color:var(--muted)}
.hwhere b{color:var(--ink)}
.hyardlist{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.hyardlist li{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:.95rem}
.hyardlist b{color:var(--ink);display:block}
.hfacts{list-style:none;display:grid;gap:8px;margin:0;padding:0;color:var(--muted)}
.hsms{margin:0 0 28px;background:var(--soft);border-radius:10px;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px 40px;align-items:start}
.hsms-head{grid-column:1/-1;font-size:1.05rem;font-weight:700;color:var(--ink);margin:0}
.hsms-opt{display:grid;gap:6px;justify-items:start}
.hsms-cta{font-size:1rem;font-weight:600;margin:0;min-height:42px;display:flex;flex-wrap:wrap;align-items:center;gap:0 .3em}
.hsms-cta a{color:var(--ink);border-bottom:2px solid var(--kelly);white-space:nowrap;display:inline-block;padding:9px 0 3px}
.hsms-terms{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0;max-width:80ch}
.hsms-terms a{color:var(--muted);text-decoration:underline}
.hsms-legal{font-size:.74rem;line-height:1.45}
.hwa{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none}
.hwa:hover{opacity:.9}
.hwa:focus-visible{outline:3px solid var(--kelly);outline-offset:2px}
.hwa svg{flex:none}
.hsms-one{grid-template-columns:1fr}
@media(max-width:760px){.hsms{grid-template-columns:1fr;gap:16px}}

.hdone[hidden],.form[hidden]{display:none}
.hdone{background:var(--soft);border:1px solid var(--line);padding:clamp(24px,4vw,44px);display:grid;gap:14px}
.hdone:focus{outline:0}
.hdone{scroll-margin-top:calc(var(--nav,64px) + 28px)}
.hdone h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin:0}
.hdone p{color:var(--muted);font-size:1.05rem}
.hdone ol{list-style:none;counter-reset:s;display:grid;gap:10px;margin:0;padding:0}
.hdone li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center}
.hdone li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}

@media(max-width:760px){.hdoors{grid-template-columns:1fr}.haside img{display:none}}
@media(max-width:560px){.form .row2{grid-template-columns:1fr}.form .hjp{grid-template-columns:auto minmax(0,1fr);row-gap:4px}.form .hjp input{grid-row:span 2}.form .hjp .pay{grid-column:2;text-align:left;font-size:1rem}}
=======
/* ==========================================================================
   KEYBOARD FOCUS (WCAG 2.4.7 / 2.4.11) — one ring, visible on every surface.
   The brand rings were a 2px dark-green line: fine on white, near-invisible
   on the dark footers and photo heroes (2.1–3.3:1, 10/2026 audit). A white
   inner ring + near-black outer ring clears 3:1 against any background.
   !important because the brand tails style :focus-visible at higher
   specificity; this is the one place focus is meant to be decided.
   Form fields keep their own focus border (they always match :focus-visible).
   ========================================================================== */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,
.filepick:focus-within,.checkset label:has(:focus-visible){
  outline:3px solid #fff !important;outline-offset:0 !important;box-shadow:0 0 0 6px #111 !important}

/* ==========================================================================
   PAUSE CONTROL FOR MOVING HEROES (WCAG 2.2.2) — built by site.js on every
   .hero/.phero/.feature that rotates, loops a video or pans (img.kb).
   ========================================================================== */
.motion-host{position:relative}
.motion-toggle{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:12px;z-index:6;
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(10,20,16,.4);
  color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.motion-toggle::before{content:"";width:8px;height:10px;
  background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.motion-toggle[aria-pressed="true"]::before{width:0;height:0;background:none;margin-left:2px;
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.motion-toggle:hover{background:rgba(10,20,16,.75)}
.motion-paused .pslide,.motion-paused img.kb,.motion-paused>img{animation-play-state:paused !important}


/* ===================================================================

/* ==========================================================================
   Service pages, design pass 11/01/2026: "What's included" is the main block,
   photo beside the list, "Who it's for" closing it (engine SERVICE_MAIN).
   ========================================================================== */
.svc-incl .incl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.svc-incl .incl-im{overflow:hidden}
.svc-incl .incl-im img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.svc-incl .sec-h{margin-bottom:clamp(18px,2.4vw,28px)}
.svc-incl .checklist{grid-template-columns:1fr;gap:16px}
.svc-incl .checklist li{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.svc-incl .incl-for{margin:clamp(24px,3vw,36px) 0 0;padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line);color:var(--muted);line-height:1.65;max-width:60ch}
.svc-incl .incl-for b{color:var(--ink)}
@media(max-width:860px){.svc-incl .incl{grid-template-columns:1fr}.svc-incl .incl-im img{aspect-ratio:3/2}}
#crew-form,#apply-form{scroll-margin-top:110px}

/* Closing photo band: one 40-72% brand-green wash over the whole picture left every
   page ending on a grey-green photo. Shade only behind the words, neutral dark, so
   the photo keeps its colour at the edges (design pass 11/01/2026). */
.cta::after{background:radial-gradient(ellipse 72% 62% at 50% 50%,rgba(6,14,11,.66) 0%,rgba(6,14,11,.42) 55%,rgba(6,14,11,.16) 100%)}
.cta h2,.cta p{text-shadow:0 1px 18px rgba(0,0,0,.35)}
/* ===== END shared-ui ===== */