/* ==========================================================================
   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{
  --ink:#14463c; --near:#0e3128; --muted:#5c6b63; --paper:#fff; --soft:#f4f6f3;
  --kelly:#00aa50; --kelly-ink:#00753c; --line:#e6e9e3;
  --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}
.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}
.logorow a{display:inline-flex;align-items:center;line-height:0}
.cobiz .b a.dl{align-self:flex-start;margin-bottom:20px;line-height:0}
.cobiz .b a.dl img{margin-bottom:0}

/* 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}
  .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(--ink);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}


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

/* ==========================================================================
   LEADERSHIP ROSTER — no headshots (2026-08-17)
   The monogram tiles were a placeholder for photography we are not shipping
   with. A typographic roster reads as a deliberate choice rather than a gap,
   so the section no longer looks like it is waiting on assets.
   ========================================================================== */
.roster{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin:0}
.roster li{border-top:1px solid rgba(20,70,60,.16);padding:clamp(18px,2vw,26px) 0}
.roster h3{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.01em;text-transform:none;line-height:1.25}
.roster span{display:block;color:var(--muted);font-size:.95rem;line-height:1.45;margin-top:5px}
@media(max-width:860px){.roster{grid-template-columns:1fr}}

/* ==========================================================================
   LARGE DESKTOP — 1700px and up (2026-08-17)
   The whole site was pinned to a 1400px shell. On a 27 inch monitor that is
   55% of the viewport, so the page read as a narrow column stranded in
   margin, and every clamp() ceiling had already topped out, which makes type
   look smaller as the viewport keeps growing. Raising the root font size
   lifts every rem-based clamp ceiling in proportion; the widened shell and
   the handful of display overrides below cover what proportion alone cannot.
   Nothing under 1700px is touched.
   ========================================================================== */
@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(6.4rem,6.2vw,7.2rem);max-width:15ch}
  .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}
  .logorow img{max-height:106px;max-width:224px}
  .logorow .grc{max-height:118px}
  .logorow .pwr{max-height:112px}
  .logorow .reef{max-height:78px}
  .scard{flex:0 0 clamp(430px,26vw,560px)}
  .workrail .tile{flex:0 0 clamp(420px,26vw,540px)}
  .arealist p{max-width:64ch}
  .foot p,.roster span{max-width:38ch}
}
@media(min-width:2100px){
  html{font-size:17.5px}
  :root{--shell:1780px;--pad:64px;--nav:80px}
  .hero h1{font-size:clamp(7rem,5.8vw,7.6rem)}
  .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:7.6rem}
}

/* The six brand logos are SVGs with real intrinsic widths, so `repeat(6,1fr)`
   let a track grow past its share and pushed the row 188px off the right edge
   at 1024px (hidden only by body overflow-x). minmax(0,1fr) above caps the
   tracks; between the mobile breakpoint and 1180px six across is still too
   tight to read, so the row drops to three. */
@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%}
  .logorow .grc{max-height:84px}
  .logorow .pwr{max-height:80px}
  .logorow .reef{max-height:58px}
}

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

/* ==========================================================================
   PHOTO COPY DETERRENT
   Pairs with the matching block in site.js — read the comment there first.
   This is friction, not protection: the photo is already on the visitor's
   machine by the time it renders. `-webkit-touch-callout:none` is the part
   that earns its keep, suppressing the iOS long-press "Save Image" sheet.
   Scoped to content photos so text selection elsewhere is unaffected.
   ========================================================================== */
img[src^="/img/"]{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
/* ===== END shared-ui ===== */