/*SEMH-EXT-CSS-OK*/
.sv2, .sv2 *{box-sizing:border-box}
.sv2{
--teal:#013b35;--teal-2:#024a42;--teal-mid:#1a8678;--teal-label:#157366;
--brand:#d84727;--brand-deep:#b73a1f;
--cream:#fbf0da;--peach:#f7deb0;--lime:#d5ff7e;--lime-deep:#c6f562;
--ink:#161e1a;--muted:#5d6b62;--page:#eef1ec;--line:#e1e6dd;--white:#fff;
--sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--radius:clamp(34px,5vw,64px);
--sec:clamp(36px,4.4vw,58px);
--maxw:1180px;
font-family:var(--sans);color:var(--ink);
background:radial-gradient(55% 45% at 88% 7%,rgba(26,134,120,.12),transparent 62%),radial-gradient(46% 40% at 5% 40%,rgba(213,255,126,.13),transparent 60%),radial-gradient(50% 45% at 97% 86%,rgba(247,222,176,.17),transparent 62%),var(--page);
background-attachment:fixed;
font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
/* overflow-x:hidden makes this element a scroll container, and a
position:sticky descendant then pins to THIS scrollport rather than the
viewport - which never scrolls, so sticky silently degrades to static
everywhere under .sv2. overflow:clip does the same visual job of stopping
horizontal overflow WITHOUT creating a scroll container. hidden stays first
as the fallback for anything that does not know clip. */
overflow-x:hidden;
overflow-x:clip;
}
/* beat the theme's global Amiri serif heading rule */
.sv2 h1,.sv2 h2,.sv2 h3,.sv2 h4,.sv2 h5,.sv2 h6,.sv2 p,.sv2 a,.sv2 span,.sv2 li,.sv2 button,.sv2 input,.sv2 label,.sv2 div{
font-family:var(--sans) !important;
}
.sv2 h1,.sv2 h2,.sv2 h3,.sv2 h4{margin:0;letter-spacing:-.02em;line-height:1.12;font-weight:600;color:var(--ink) !important}
.sv2 .hero__h1{color:#fff !important}
.sv2 .foot__cta h2{color:#fff !important}
.sv2 p{margin:0}
.sv2 a{color:inherit;text-decoration:none}
.sv2 img{max-width:100%;display:block}
.sv2 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
/* ---- highlighter + eyebrow ---- */
.sv2 .hl{position:relative;z-index:0;color:#fff;font-weight:700;white-space:nowrap;padding:0 .26em;margin:0 .04em}
.sv2 .hl::before{content:"";position:absolute;z-index:-1;left:-.05em;right:-.05em;top:.06em;bottom:.03em;
background:linear-gradient(101deg,#cf3f22 0%,#d84727 22%,#e04d2c 50%,#d84727 78%,#c53c20 100%);
border-radius:1.4em .5em 1.6em .45em / .95em 1.35em .8em 1.4em;
transform:rotate(-1.7deg);
box-shadow:0 4px 12px -6px rgba(150,35,10,.5)}
/* section eyebrow -> glass "signal tag" chip with a radar-ping dot */
.sv2 .eyebrow{display:inline-flex;align-items:center;gap:.55em;padding:.5em .95em;border-radius:100px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.52));border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 22px -14px rgba(20,50,40,.42),inset 0 1px 0 rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.sv2 .eyebrow--onteal{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:var(--lime)}
.sv2 .eyebrow .dot{width:14px;height:12px;flex:none;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Crect x='0' y='7.5' width='3' height='4.5' rx='1' fill='%23d84727'/%3E%3Crect x='5.5' y='3.5' width='3' height='8.5' rx='1' fill='%23d84727'/%3E%3Crect x='11' y='0' width='3' height='12' rx='1' fill='%23d84727'/%3E%3C/svg%3E") no-repeat center/contain}
.sv2 .eyebrow--onteal .dot{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Crect x='0' y='7.5' width='3' height='4.5' rx='1' fill='%23d5ff7e'/%3E%3Crect x='5.5' y='3.5' width='3' height='8.5' rx='1' fill='%23d5ff7e'/%3E%3Crect x='11' y='0' width='3' height='12' rx='1' fill='%23d5ff7e'/%3E%3C/svg%3E") no-repeat center/contain}
/* signal-bars dot: static (pulse removed — 8 chips animating at once read as restless) */
/* H2 keyword accent — lime signal underline (distinct from the tomato highlighter) */
.sv2 .sig{position:relative;white-space:nowrap;color:inherit;z-index:0}
.sv2 .sig::after{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:-.04em;height:.34em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'%3E%3Cpath d='M6 13C64 6 150 16 236 9C282 5 306 12 314 9C306 18 250 13 188 15C108 18 52 12 14 17C7 18 3 15 6 13Z' fill='%23c6f562'/%3E%3C/svg%3E") no-repeat center/100% 100%}
/* shared icon chip (teal gradient + lime line-icon) */
.sv2 .sicon{width:54px;height:54px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#0f4a42,#1a8678);color:var(--lime);box-shadow:0 12px 24px -13px rgba(26,134,120,.6)}
.sv2 .sicon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---- buttons ---- */
.sv2 .sbtn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:600;font-size:.94rem;letter-spacing:.04em;text-transform:uppercase;padding:.98em 1.6em;border-radius:100px;border:1.6px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;line-height:1;text-decoration:none}
.sv2 .sbtn svg{width:1.05em;height:1.05em}
.sv2 .sbtn--cta{background:var(--lime);border-color:var(--lime);color:#16291b;box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.sv2 .sbtn--cta:hover,.sv2 .sbtn--cta:focus-visible{background:var(--lime-deep);border-color:var(--lime-deep);color:#16291b;transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(0,0,0,.5)}
/* secondary: outline that fills white on hover (no dark-border flash) */
.sv2 .sbtn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sv2 .sbtn--ghost:hover,.sv2 .sbtn--ghost:focus-visible{background:#fff;color:var(--teal);border-color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(0,0,0,.4)}
.sv2 .sbtn--dark{background:var(--teal);border-color:var(--teal);color:#fff}
.sv2 .sbtn--dark:hover,.sv2 .sbtn--dark:focus-visible{background:var(--teal-2);border-color:var(--teal-2);color:#fff;transform:translateY(-2px)}
.sv2 .sbtn--lg{font-size:1.06rem;padding:1.05em 1.9em}
.sv2 a:hover{color:inherit}
/* scroll-reveal: fade + rise as elements enter the viewport (Realize-style) */
@media(prefers-reduced-motion:no-preference){
.sv2 .rv{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.sv2 .rv.rv-in{opacity:1;transform:none}
}
/* ---- header / nav ---- */
.sv2 .nav{position:absolute;top:0;left:0;right:0;z-index:40}
.sv2 .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:clamp(70px,8vw,92px)}
/* Liquid glass nav. Same material recipe the free-audit form card already uses:
backdrop blur plus a saturation lift, a bright inset top edge for the specular
highlight, and a faint bottom bounce. A web approximation of the Apple
material, not an official one. There is no liquid-glass spec for the web.
Padding goes on .nav rather than a margin on .wrap so the capsule keeps a
gutter at every width without needing to know the wrap max-width. */
.sv2 .nav{top:clamp(10px,1.4vw,18px);padding-inline:clamp(12px,3vw,24px)}
.sv2 .nav .wrap{position:relative;height:clamp(62px,7vw,78px);
padding-inline:clamp(16px,1.8vw,24px)}
/* The glass sits on a pseudo-element, never on .wrap itself.
Putting backdrop-filter on .wrap makes every descendant filter nest inside it,
and .mega__inner carries its own blur(20px). Two nested backdrop filters turned
a 98% opaque white mega panel see-through: the page headline read straight
through the dropdown. A pseudo-element is not an ancestor of the mega, so the
two filters stay independent and the panel stays opaque. */
.sv2 .nav .wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
background:linear-gradient(168deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 42%,rgba(1,59,53,.34));
-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
border:1px solid rgba(255,255,255,.16);pointer-events:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(213,255,126,.10),0 18px 40px -22px rgba(0,0,0,.65)}
/* Links keep their text weight; the pill only appears on hover. The gap tightens
because each link now carries its own padding. */
.sv2 .nav__links{gap:clamp(2px,.7vw,10px)}
.sv2 .nav__top{position:relative;padding:9px 14px;border-radius:999px;isolation:isolate}
.sv2 .nav__top::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(168deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
opacity:0;transform:scale(.94);pointer-events:none;
transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.sv2 .nav__top:hover::before,.sv2 .nav__top:focus-visible::before{opacity:1;transform:scale(1)}
/* Lime glass CTA. Tint held at .72 so the dark label keeps its contrast once the
translucency composites over the teal behind it. */
.sv2 .nav .sbtn--cta{background:linear-gradient(168deg,rgba(213,255,126,.72),rgba(198,245,98,.55));
-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
border:1px solid rgba(213,255,126,.78);color:#0d2b12;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 10px 26px -12px rgba(213,255,126,.5)}
.sv2 .nav .sbtn--cta:hover,.sv2 .nav .sbtn--cta:focus-visible{
background:linear-gradient(168deg,rgba(213,255,126,.88),rgba(198,245,98,.72));
border-color:var(--lime);transform:translateY(-2px)}
/* Without backdrop-filter the glass becomes an opaque teal bar, which is the
correct degradation rather than a washed-out panel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.sv2 .nav .wrap::before{background:rgba(1,59,53,.94)}
.sv2 .nav .sbtn--cta{background:var(--lime);color:#16291b}
}
@media (prefers-reduced-transparency:reduce){
.sv2 .nav .wrap::before{background:rgba(1,59,53,.96)}
.sv2 .nav .sbtn--cta{background:var(--lime);color:#16291b}
}
@media (prefers-reduced-motion:reduce){
.sv2 .nav__top::before{transition:none;transform:none}
.sv2 .nav .sbtn--cta:hover{transform:none}
}
.sv2 .wm{display:inline-flex;align-items:center;text-decoration:none}
.sv2 .wm__img{height:clamp(42px,4.4vw,52px);width:auto;display:block}
.sv2 .wm--big .wm__img{height:58px}
.sv2 .nav__links{position:relative;display:flex;align-items:center;gap:clamp(15px,2vw,28px)}
.sv2 .nav__item{display:flex;align-items:center}
.sv2 .nav__top{display:inline-flex;align-items:center;gap:.34em;color:rgba(255,255,255,.92);font-weight:500;font-size:.98rem;transition:color .15s;cursor:pointer;white-space:nowrap;text-decoration:none}
.sv2 .nav__top .caret{width:11px;height:8px;opacity:.7;transition:transform .22s}
.sv2 .nav__top:hover,.sv2 .nav__item--mega:hover .nav__top{color:#fff}
.sv2 .nav__item--mega:hover .caret{transform:rotate(180deg)}
.sv2 .nav__right{display:flex;align-items:center;gap:18px}
.sv2 .nav__toggle{display:none;background:none;border:0;padding:0;cursor:pointer}
.sv2 .nav__scrim{display:none}
html.sv2-noscroll{overflow:hidden}
/* solid variant for inner pages */
.sv2 .nav--solid{position:sticky;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.sv2 .nav--solid .wm{color:var(--teal)}
.sv2 .nav--solid .wm .wm__c{color:var(--brand)}
.sv2 .nav--solid .nav__top{color:#33413a}
.sv2 .nav--solid .nav__top:hover,.sv2 .nav--solid .nav__item--mega:hover .nav__top{color:var(--teal)}
/* mega menu panels */
.sv2 .mega{position:absolute;top:100%;left:0;padding-top:15px;width:min(720px,90vw);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
/* Wider than before: the Services panel now carries a 2x2 card grid plus the
promo, and 884px squeezed the cards to ~230px each. */
.sv2 .mega--wide{width:min(1000px,94vw)}
.sv2 .mega--right{left:auto;right:0}
.sv2 .nav__item--mega:hover .mega,.sv2 .nav__item--mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.sv2 .mega__inner{display:grid;grid-template-columns:1fr .58fr;gap:clamp(20px,2.4vw,32px);background:rgba(255,255,255,.98);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--line);border-radius:22px;box-shadow:0 44px 84px -36px rgba(20,50,40,.55);padding:clamp(22px,2.4vw,30px)}
.sv2 .mega__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px}
.sv2 .mega__cols--3{grid-template-columns:repeat(3,1fr)}
/* --- mega menu group hierarchy -------------------------------------------
The category used to be an 11.5px uppercase eyebrow sitting above 15px links,
i.e. the LABEL was 23% smaller than the items it organised, and its colour was
identical to the links' hover colour. Scanning the panel you read the service
names first and the category second -- exactly backwards for wayfinding.
Now: heading is the largest text in the group, sentence case (uppercase at this
size reads as shouting and slows scanning in a dropdown), anchored by the same
teal signal-dot used on the location pills. A hairline rule separates "what this
bucket is" from "what's in it". Links are quieter and hover DARKENS toward ink
with a lime underline, so a hovered link can never be mistaken for a heading. */
.sv2 .mega__group{min-width:0}
.sv2 .mega__gh{position:relative;font-size:.95rem;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--teal);margin:0 0 .28em;padding-left:15px;line-height:1.25}
.sv2 .mega__gh::before{content:"";position:absolute;left:0;top:.46em;width:7px;height:7px;border-radius:50%;background:var(--teal-mid);box-shadow:0 0 0 3px rgba(26,134,120,.14)}
.sv2 .mega__desc{font-size:.76rem;color:var(--muted);margin:0 0 .5em;line-height:1.4;padding-left:15px;max-width:27ch}
/* Emblem is a desktop-card affordance; the mobile drawer keeps its compact
text accordion, so hide it below the card breakpoint. */
@media(max-width:860px){.sv2 .mega__ico{display:none}}
/* the divider lands on the first link, so no extra markup is needed and groups
without a description still get a clean heading/items split */
.sv2 .mega__group > a.mega__link:first-of-type{margin-top:.1em;padding-top:.5em;border-top:1px solid var(--line)}
.sv2 a.mega__link{display:block;color:#3f4d46;font-weight:500;font-size:.88rem;padding:.26em 0;padding-left:15px;line-height:1.35;text-decoration:none;transition:color .14s,transform .14s}
.sv2 a.mega__link:hover{color:var(--ink);transform:translateX(3px);text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px;text-underline-offset:3px}
@media(min-width:861px){
/* SERVICES PANEL -- four competency cards in a 2x2.
Previously SEO spanned its own column and the three light groups stacked
beside it, which read as one tall list plus scraps. Cards give each
competency equal standing and a visible boundary; align-items:stretch keeps
each row's two cards the same height so the grid stays square. */
.sv2 .mega__cols--cards{grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
/* Services runs four cards in a 2x2; Who We Serve and Locations run three in a
row. Two classes so this beats the plain --cards rule above. */
.sv2 .mega__cols--cards.mega__cols--3{grid-template-columns:repeat(3,1fr)}
.sv2 .mega__cols--cards .mega__group{display:flex;flex-direction:column;background:var(--page);border:1px solid var(--line);border-radius:16px;padding:18px 17px 15px;transition:border-color .18s,background .18s}
.sv2 .mega__cols--cards .mega__group:hover{border-color:var(--teal-mid);background:#fff}
/* The hairline moves off the first link and onto the items wrapper, so it
spans the card's full inner width instead of starting at the text indent --
the separator Leigh wanted to keep, now reading as a card rule. */
/* No margin-top:auto here. Pinning the rule to the card bottom left a void
between the description and the links on the shallow cards (Web showed a
~90px gap with the divider floating below it). Items follow the description;
the stretched card simply carries trailing space, which reads as a panel. */
.sv2 .mega__cols--cards .mega__items{padding-top:9px;border-top:1px solid var(--line)}
/* SEO carries six services -- 3+3 keeps its card roughly the height of the
Web card beside it, instead of a six-deep list that dictated the whole row. */
.sv2 .mega__cols--cards .mega__items--2{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
.sv2 .mega__cols--cards .mega__group > a.mega__link:first-of-type{margin-top:0;padding-top:0;border-top:0}
/* Card headings get the site's signal-emblem treatment (teal disc, lime mark,
radar ring) instead of a 7px dot, plus the lime top-bar wipe the service
cards use on hover -- so the mega menu belongs to the same card family as
the page it sits above. */
.sv2 .mega__cols--cards .mega__group{position:relative;overflow:hidden}
.sv2 .mega__cols--cards .mega__group::after{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--lime),var(--lime-deep));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.sv2 .mega__cols--cards .mega__group:hover::after{transform:scaleX(1)}
/* gap:14 (not 10) and the ring geometry below are measured, not guessed: at
inset -9 and hover scale 1.14 the radar ring overlapped the heading text by
2px and cleared the card's top edge by only 4px. */
.sv2 .mega__cols--cards .mega__gh{display:flex;align-items:center;gap:14px;padding-left:0;font-size:1rem;font-weight:600;color:var(--teal);margin-bottom:.45em}
.sv2 .mega__cols--cards .mega__gh::before{display:none}
.sv2 .mega__ico{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#0f4a42,#1a8678);color:var(--lime);box-shadow:0 8px 16px -8px rgba(26,134,120,.65),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .3s ease,box-shadow .3s ease}
.sv2 .mega__ico::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.4px solid rgba(26,134,120,.3);opacity:.75;transition:opacity .4s ease,transform .4s ease}
.sv2 .mega__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sv2 .mega__cols--cards .mega__group:hover .mega__ico{transform:scale(1.06);box-shadow:0 12px 22px -8px rgba(26,134,120,.8),inset 0 1px 0 rgba(255,255,255,.24)}
.sv2 .mega__cols--cards .mega__group:hover .mega__ico::before{opacity:1;transform:scale(1.08)}
.sv2 .mega__cols--cards .mega__desc,
.sv2 .mega__cols--cards a.mega__link{padding-left:0}
.sv2 .mega__cols--cards .mega__desc{margin-bottom:.85em;max-width:none}
.sv2 .mega__main{display:flex;flex-direction:column}
.sv2 .mega__main .mega__all{margin-top:12px;padding-left:2px}
/* the 3-column panels (Who We Serve, Locations) squeeze multi-word labels like
"Retail & Local Goods" onto two lines. Give those panels more width so each
item stays on one line and the column scans as a clean list. */
.sv2 .mega:has(.mega__cols--3) .mega__inner{grid-template-columns:1fr .42fr}
.sv2 .mega:has(.mega__cols--3) .mega__cols{gap:20px 22px}
/* PANEL POSITIONING -- fixes a pre-existing horizontal-scroll bug.
.mega is absolutely positioned against .nav__links (not the menu item), and
.mega--wide was a fixed 884px anchored at left:0. On a ~1000px viewport the
nav starts at x=218, so the panel ran to x=1102 and pushed the whole document
sideways. Centring the panel on the nav instead keeps it on screen at every
width, and the viewport-aware max keeps a gutter on small laptops. */
.sv2 .mega--wide,.sv2 .mega--loc{left:50%;width:min(1000px,calc(100vw - 48px));transform:translateX(-50%) translateY(10px)}
.sv2 .nav__item--mega:hover .mega--wide,.sv2 .nav__item--mega:focus-within .mega--wide,
.sv2 .nav__item--mega:hover .mega--loc,.sv2 .nav__item--mega:focus-within .mega--loc{transform:translateX(-50%) translateY(0)}
}
.sv2 .mega__all{display:inline-block;margin-top:.55em;color:var(--brand-deep);font-weight:600;font-size:.9rem}
.sv2 .mega__all:hover{color:#8f2c17}
.sv2 .mega__promo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:24px;border-radius:16px;text-decoration:none;background:linear-gradient(155deg,#0f4a42 0%,#13403a 55%,#1d393d 100%);overflow:hidden}
.sv2 .mega__promo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 52% at 85% 15%,rgba(213,255,126,.18),transparent 65%);pointer-events:none}
.sv2 .mega__promo-vis{position:relative;flex:1 1 auto;min-height:92px;max-height:215px;width:100%;margin:0 0 16px;display:block}
.sv2 .mega__promo-vis rect[stroke],.sv2 .mega__promo-vis circle[fill="#d5ff7e"]{transition:opacity .25s ease}
.sv2 .mega__promo:hover .mega__promo-vis{opacity:1}
.sv2 .mega__promo h4{font-size:1.1rem;font-weight:600;margin:.5em 0 .45em;color:#fff !important;position:relative}
.sv2 .mega__promo p{font-size:.85rem;color:rgba(255,255,255,.82);margin-bottom:1em;position:relative;line-height:1.45}
.sv2 .mega__promo-cta{color:var(--lime);font-weight:600;font-size:.92rem;position:relative}
.sv2 .mega__promo:hover .mega__promo-cta{text-decoration:underline}
/* ---- hero arch ---- */
.sv2 .hero{position:relative;color:#fff;padding:clamp(100px,12vw,124px) 0 clamp(60px,7vw,88px);
min-height:clamp(430px,58vh,560px);display:flex;align-items:center;
background:
radial-gradient(95% 58% at 50% 116%, rgba(0,110,80,.45) 0%, transparent 60%),
linear-gradient(180deg,#005645 0%,#134039 55%,#1d393d 100%);
border-radius:0 0 260px 260px / 0 0 150px 150px;
overflow:hidden}
.sv2 .hero__glow{position:absolute;inset:0;background:radial-gradient(40% 34% at 82% 20%,rgba(213,255,126,.16),transparent 70%);pointer-events:none}
.sv2 .hero__inner{position:relative;max-width:830px}
.sv2 .hero__h1{font-size:clamp(2.5rem,6vw,4rem);line-height:1.08;letter-spacing:-.03em;font-weight:600;margin:.42em 0 .5em;text-shadow:0 2px 18px rgba(0,0,0,.18)}
.sv2 .hero__sub{font-size:clamp(1.06rem,1.7vw,1.28rem);color:rgba(255,255,255,.9);max-width:620px;font-weight:400;line-height:1.55}
.sv2 .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.4vw,38px)}
.sv2 .hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(26px,3.6vw,40px);color:rgba(255,255,255,.72);font-size:.85rem;font-weight:500}
.sv2 .hero__trust b{color:#fff;font-weight:600}
.sv2 .hero__trust .sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}
/* ---- section scaffolding ---- */
.sv2 .sec{padding:var(--sec) 0}
.sv2 .sec--tight{padding:clamp(26px,3.4vw,44px) 0}
.sv2 .sec-head{max-width:680px;margin:0 auto clamp(28px,3.6vw,44px);text-align:center}
.sv2 .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.03em;margin:.5em 0 .35em}
.sv2 .sec-head p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.14rem)}
.sv2 .sec-head--left{margin-left:0;text-align:left}
/* ---- generic card ---- */
.sv2 .card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.40));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.75);border-radius:24px;padding:clamp(24px,3vw,34px);box-shadow:0 22px 46px -30px rgba(20,50,40,.4),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s ease,box-shadow .2s ease}
.sv2 .card:hover{transform:translateY(-4px);box-shadow:0 30px 56px -28px rgba(20,50,40,.5),inset 0 1px 0 rgba(255,255,255,.7);border-color:rgba(26,134,120,.34)}
/* one corner "signal" emblem: icon transmitter + radiating rings, contained + fading up on hover */
.sv2 .card::before{content:"";position:absolute;z-index:0;pointer-events:none;top:-48px;right:-48px;width:190px;height:190px;
background:repeating-radial-gradient(circle at 50% 50%,transparent 0 12px,rgba(26,134,120,.13) 12px 13.5px);
-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 30px,#000 40px,#000 76px,transparent 92px);
mask:radial-gradient(circle at 50% 50%,transparent 0 30px,#000 40px,#000 76px,transparent 92px);
opacity:.5;transition:opacity .5s ease,transform .5s ease}
.sv2 .card:hover::before{opacity:.95;transform:scale(1.09)}
.sv2 .card>*{position:relative;z-index:1}
.sv2 .card .card__wm{position:absolute;z-index:0;top:22px;right:22px;width:52px;height:52px;color:var(--teal-mid);opacity:.15;transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.sv2 .card:hover .card__wm{opacity:.32;transform:scale(1.08)}
.sv2 .card .card__wm svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sv2 .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.sv2 .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
/* ---- footer inverse arch ---- */
.sv2 .foot{position:relative;color:#fff;margin-top:clamp(40px,6vw,80px);padding:clamp(78px,10vw,120px) 0 44px;
background:linear-gradient(180deg,#1d393d 0%,#134039 45%,#013b35 100%);
border-radius:260px 260px 0 0 / 150px 150px 0 0;overflow:hidden}
.sv2 .foot__glow{position:absolute;inset:0;background:radial-gradient(38% 40% at 20% 12%,rgba(213,255,126,.12),transparent 70%);pointer-events:none}
.sv2 .foot__cta{position:relative;text-align:center;max-width:640px;margin:0 auto clamp(52px,7vw,78px)}
/* sized so "Ready to be the name" and "Hawaii searches for?" each fit on one
line in this column at every width (at 3.1rem line 1 needed 554px in a 509px
column, which is what forced the ugly break after "the") */
.sv2 .foot__cta h2{font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:600;letter-spacing:-.03em;margin:.4em 0 .5em;text-wrap:pretty}
.sv2 .foot__cta p{color:rgba(255,255,255,.82);font-size:1.08rem;margin-bottom:1.6em}
/* footer CTA with embedded audit form */
/* copy column widened slightly (was 1fr 1.02fr) so the headline has room to hold
its two intended lines without shrinking the type further */
.sv2 .foot__cta--form{max-width:var(--maxw);text-align:left;display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.sv2 .foot__cta--form h2{margin:.35em 0 .45em}
.sv2 .foot__cta-copy p{margin-bottom:0}
.sv2 .foot__points{list-style:none;margin:1.4em 0 0;padding:0;display:flex;flex-direction:column;gap:.7em}
.sv2 .foot__points li{position:relative;padding-left:1.9em;color:rgba(255,255,255,.86);font-size:.98rem}
.sv2 .foot__points li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:50%;background:var(--lime);color:#16291b;font-weight:800;font-size:.7rem;line-height:18px;text-align:center}
.sv2 .foot__points li::after{content:"✓";position:absolute;left:0;top:.15em;width:18px;height:18px;color:#16291b;font-weight:800;font-size:.72rem;line-height:18px;text-align:center}
.sv2 .foot__form{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:clamp(22px,3vw,32px);box-shadow:0 34px 66px -32px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25)}
/* audit form fields */
.sv2 .sv2-af__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.sv2 .sv2-af__field{margin-bottom:13px;display:flex;flex-direction:column;gap:.4em}
.sv2 .sv2-af__field label{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85)}
/* color needs !important: a theme/Oxygen input rule out-specs this and turns
typed text black on the dark panels (measured on both footer and location
band forms 2026-07-28) -- users typed invisibly. */
.sv2 .sv2-af__field input,.sv2 .sv2-af__field select{width:100%;padding:.78em .92em;border-radius:12px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);color:#fff !important;font-family:var(--sans);font-size:.97rem;transition:border-color .15s,background .15s}
.sv2 .sv2-af__field input::placeholder{color:rgba(255,255,255,.72)}
.sv2 .sv2-af__field input:focus,.sv2 .sv2-af__field select:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--lime);background:rgba(255,255,255,.14)}
.sv2 .sv2-af__field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center;padding-right:2.4em}
.sv2 .sv2-af__field select option{color:#161e1a}
.sv2 .sv2-af__submit{width:100%;justify-content:center;margin-top:4px}
.sv2 .sv2-af__fine{font-size:.78rem;color:rgba(255,255,255,.75);margin-top:.9em;text-align:center}
.sv2 .sv2-af__opt{font-weight:600;font-size:.66em;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:.15em .6em;margin-left:.35em;vertical-align:middle}
.sv2 .sv2-af__status{margin-top:.8em;font-size:.9rem;color:#d5ff7e;text-align:center}
.sv2 .sv2-af__status.is-err{color:#ffd7cd}
.sv2 .foot__grid{position:relative;display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(20px,2.2vw,30px);padding-top:clamp(40px,5vw,56px);border-top:1px solid rgba(255,255,255,.12)}
.sv2 .foot__grid h3{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime) !important;margin-bottom:1.1em;font-weight:600}
.sv2 .foot__nap{margin-top:1.1em;font-style:normal;display:flex;flex-direction:column;gap:.3em}
.sv2 .foot__nap-call{display:inline-flex;align-items:center;gap:.5em;color:#fff !important;font-weight:700;font-size:1.02rem}
.sv2 .foot__nap-call svg{width:16px;height:16px;flex:none;color:var(--lime)}
.sv2 .foot__nap-call:hover{color:var(--lime) !important}
.sv2 .foot__nap-loc{color:rgba(255,255,255,.7);font-size:.86rem}
.sv2 .foot__grid a{display:block;color:rgba(255,255,255,.78);font-size:.95rem;margin-bottom:.7em;transition:color .15s}
.sv2 .foot__grid a:hover{color:#fff}
.sv2 .foot__brand .wm{margin-bottom:1em}
.sv2 .foot__brand p{color:rgba(255,255,255,.66);font-size:.92rem;max-width:260px}
.sv2 .foot__legal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:clamp(38px,5vw,54px);padding-top:26px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.72);font-size:.84rem}
/* ============================================================
* COOKIE CONSENT (CookieYes) - brand skin
*
* Restyle only. The consent copy, the category list, and the consent behaviour
* are all CookieYes plugin settings and are deliberately untouched: nothing here
* changes what the user is told or what they agree to, only how it looks.
*
* What was off-brand, measured off the live banner:
* - DM Sans throughout, which is the superseded v1 font (v2 is Poppins)
* - pure rgb(0,0,0) bar, and the design system bans pure black
* - accept button a grey rgb(47,50,50) pill
* - "Show more" and "Save My Preferences" in rgb(24,99,220), stock CookieYes
* blue that appears nowhere else in the palette
* - radius 200px on the bar button against 2px on the modal button
*
* These selectors are NOT scoped under .sv2 because CookieYes appends its markup
* to , outside the v2 wrapper. The v2 gate is the file: semh_v2_core_css()
* is only emitted when semh_v2_active() is true, so v1 keeps its current banner.
* !important is needed throughout because CookieYes writes its palette inline
* from plugin settings.
* ========================================================== */
/* The design tokens are declared on .sv2, and CookieYes appends its markup to
, outside that scope. So var(--lime) resolved to nothing here, and an
unresolvable var() makes the whole declaration invalid at computed-value time
rather than falling back -- which turned the accept button's background fully
transparent (dark text on the teal panel). Re-declaring the handful of tokens
the banner needs on its own roots keeps the rules readable and fixes the lot. */
.cky-consent-container,.cky-preference-wrapper,.cky-btn-revisit-wrapper{
--lime:#d5ff7e;--lime-deep:#c6f562;--teal:#013b35;
font-family:Poppins,system-ui,sans-serif !important}
/* Floating panel rather than a full-bleed bar, to match the site's rounded
inset panels. Bottom-left on desktop so it never sits under the sticky CTA. */
.cky-consent-container.cky-classic-bottom{
left:clamp(14px,2vw,26px) !important;right:auto !important;
bottom:clamp(14px,2vw,24px) !important;width:min(430px,calc(100vw - 28px)) !important}
.cky-consent-container .cky-consent-bar{
background:#013b35 !important;
border:1px solid rgba(255,255,255,.16) !important;border-radius:18px !important;
padding:20px 20px 18px !important;
box-shadow:0 30px 70px -28px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.14) !important;
font-family:Poppins,system-ui,sans-serif !important}
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p,
.cky-consent-container .cky-title{
font-family:Poppins,system-ui,sans-serif !important;
color:rgba(255,255,255,.86) !important;padding:0 !important}
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p{font-size:.86rem !important;line-height:1.6 !important}
.cky-consent-container .cky-notice-des a{
color:#fff !important;text-decoration:underline !important;
text-decoration-color:var(--lime) !important;text-decoration-thickness:2px !important;
text-underline-offset:3px !important}
/* Buttons stack under the copy in the narrow panel instead of sitting beside it. */
.cky-consent-container .cky-notice-group{display:block !important}
.cky-consent-container .cky-notice-btn-wrapper{
display:flex !important;flex-wrap:wrap !important;gap:10px !important;
/* CookieYes centres this row; the panel's copy is left-aligned, so the button
was floating out of alignment with everything above it. */
justify-content:flex-start !important;
padding:14px 0 0 !important;margin-top:14px !important;
border-top:1px solid rgba(255,255,255,.14) !important}
/* Accept takes the lime CTA treatment used everywhere else on the site. */
.cky-consent-container .cky-btn-accept,
.cky-preference-wrapper .cky-btn-accept{
background:var(--lime) !important;border:1px solid var(--lime) !important;
color:#16291b !important;font-family:Poppins,system-ui,sans-serif !important;
font-size:.8rem !important;font-weight:700 !important;letter-spacing:.02em !important;
padding:11px 20px !important;border-radius:100px !important;
box-shadow:0 10px 24px -12px rgba(198,245,98,.85) !important;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important}
.cky-consent-container .cky-btn-accept:hover,
.cky-preference-wrapper .cky-btn-accept:hover{
background:var(--lime-deep) !important;transform:translateY(-2px) !important;
box-shadow:0 14px 28px -12px rgba(198,245,98,.95) !important}
/* Secondary actions: white hairline ghost, never the stock blue. */
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize,
.cky-preference-wrapper .cky-btn-preferences{
background:transparent !important;border:1.5px solid rgba(255,255,255,.4) !important;
color:#fff !important;font-family:Poppins,system-ui,sans-serif !important;
font-size:.8rem !important;font-weight:600 !important;
padding:11px 20px !important;border-radius:100px !important;transition:border-color .18s,background .18s !important}
.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-customize:hover,
.cky-preference-wrapper .cky-btn-preferences:hover{
border-color:var(--lime) !important;background:rgba(213,255,126,.12) !important}
.cky-consent-container .cky-show-desc-btn,
.cky-preference-wrapper .cky-show-desc-btn{
color:var(--lime) !important;font-family:Poppins,system-ui,sans-serif !important;font-weight:600 !important}
/* Preference modal on the same teal panel. */
.cky-preference-wrapper .cky-preference-center{
background:#013b35 !important;border:1px solid rgba(255,255,255,.16) !important;
border-radius:18px !important;font-family:Poppins,system-ui,sans-serif !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,.7) !important}
.cky-preference-wrapper .cky-preference-header,
.cky-preference-wrapper .cky-footer-wrapper,
.cky-preference-wrapper .cky-preference-body-wrapper{background:transparent !important}
.cky-preference-wrapper .cky-preference-title,
.cky-preference-wrapper .cky-preference-content-wrapper,
.cky-preference-wrapper .cky-accordion-header-des,
.cky-preference-wrapper .cky-accordion-btn{
font-family:Poppins,system-ui,sans-serif !important;color:rgba(255,255,255,.86) !important}
.cky-preference-wrapper .cky-accordion{border-bottom:1px solid rgba(255,255,255,.13) !important}
.cky-preference-wrapper .cky-footer-wrapper{border-top:1px solid rgba(255,255,255,.14) !important}
.cky-preference-wrapper .cky-footer-shadow{display:none !important}
/* The revisit pill picked up a stock blue too. */
.cky-btn-revisit-wrapper{background:#013b35 !important;border:1px solid rgba(255,255,255,.2) !important}
/* Focus rings, since these are real interactive controls. */
.cky-consent-container button:focus-visible,
.cky-preference-wrapper button:focus-visible{
outline:3px solid var(--lime) !important;outline-offset:3px !important}
@media(max-width:860px){
/* Full width at phone size, and lifted clear of the 65px sticky CTA. Without
the offset the banner covers the primary mobile conversion button. */
.cky-consent-container.cky-classic-bottom{
left:12px !important;right:12px !important;width:auto !important;
bottom:calc(65px + 14px) !important}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn{flex:1 1 auto !important;text-align:center !important}
}
/* ---- staging banner ---- */
.sv2-stage{position:fixed;z-index:9999;left:50%;bottom:18px;transform:translateX(-50%);
background:#161e1a;color:#fff;border:1px solid rgba(255,255,255,.16);
font:600 12.5px/1 var(--sans,sans-serif);letter-spacing:.01em;
padding:10px 14px;border-radius:100px;display:flex;align-items:center;gap:10px;
box-shadow:0 14px 40px -14px rgba(0,0,0,.6)}
.sv2-stage .d{width:8px;height:8px;border-radius:50%;background:#d5ff7e;box-shadow:0 0 0 4px rgba(213,255,126,.25)}
.sv2-stage a{color:#d5ff7e;text-decoration:underline;text-underline-offset:2px}
/* ---- responsive ---- */
@media(max-width:860px){
.sv2 .grid-3{grid-template-columns:1fr}
.sv2 .grid-2{grid-template-columns:1fr}
.sv2 .foot__grid{grid-template-columns:1fr 1fr;gap:26px}
.sv2 .foot__brand{grid-column:1/-1}
.sv2 .foot__cta--form{grid-template-columns:1fr;gap:28px}
.sv2 .sv2-af__row{grid-template-columns:1fr}
/* mobile nav drawer (checkbox hack) */
.sv2 .nav__links{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);height:100dvh;
flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;
background:#0f2a27;
/* safe-area: keeps content clear of the notch and the home indicator */
padding:calc(84px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 24px;
transform:translateX(105%);visibility:hidden;
/* visibility, not just transform. A drawer only pushed off-canvas is still
visibility:visible, so its links stay in the keyboard tab order -- tabbing
the page landed on invisible off-screen links (WCAG 2.4.3 Focus Order).
The explicit "0s linear .32s" delay is the whole trick: a plain
"visibility .32s" interpolates discretely and flips at 50%, which would
leave the drawer invisible for half its slide-in. With the delay it flips
to hidden only AFTER the slide-out finishes, and the open rule below
overrides the delay to 0s so it becomes visible instantly on the way in.
Deliberately CSS rather than JS toggling .inert: this lives inside the
breakpoint, so it cannot desync from it. A JS version keyed to a
matchMedia change event left the DESKTOP nav inert when the event did not
fire, which loses the primary nav for keyboard users -- far worse than the
bug being fixed. */
transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .32s;z-index:60;box-shadow:-30px 0 60px -30px rgba(0,0,0,.6)}
/* overscroll-behavior:contain stops the page behind the drawer from scrolling
once you reach the end of the list -- the classic mobile "scroll bleed". */
.sv2 .nav__links{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Landscape phones are only ~375px tall: reclaim the big top inset and tighten
the rows so the list is usable instead of immediately overflowing. */
@media(max-height:520px){
.sv2 .nav__links{padding-top:calc(64px + env(safe-area-inset-top));gap:2px}
.sv2 .nav__top{padding:.42em 0;font-size:1.05rem}
.sv2 .mega__gh{margin:10px 0 3px;font-size:1rem}
}
.sv2 .nav__links a{color:#fff !important;font-size:1.15rem;padding:.5em 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
.sv2 .nav__item{width:100%;display:block}
.sv2 .nav__top{width:100%;color:#fff !important;font-size:1.15rem;padding:.6em 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sv2 .nav__top .caret{display:none}
/* mega panels -> tap-to-expand accordions inside the drawer */
.sv2 .nav__item--mega>.nav__top{justify-content:space-between}
.sv2 .nav__item--mega>.nav__top .caret{display:block;width:13px;height:9px;opacity:.6;transition:transform .28s ease,opacity .2s}
.sv2 .nav__item--mega.is-open>.nav__top .caret{transform:rotate(180deg);opacity:1}
.sv2 .mega{position:static;left:auto;right:auto;width:auto;padding:0;opacity:1;visibility:visible;transform:none;transition:none;display:none}
.sv2 .nav__item--mega.is-open .mega{display:block}
.sv2 .mega__inner{display:block;background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:2px 0 10px}
.sv2 .mega__cols,.sv2 .mega__cols--3{display:block}
.sv2 .mega__group{margin-bottom:4px}
/* drawer: keep the same rank (heading above its links) but on the dark panel.
Lime reads as the accent here; the dot and the divider are recoloured for
the dark background rather than inherited from the light panel. */
.sv2 .mega__gh{color:var(--lime) !important;margin:16px 0 4px;font-size:1.06rem;font-weight:600;letter-spacing:-.01em;text-transform:none;padding-left:15px}
.sv2 .mega__gh::before{background:var(--lime);box-shadow:0 0 0 3px rgba(213,255,126,.16);top:.5em}
.sv2 .mega__group > a.mega__link:first-of-type{border-top:1px solid rgba(255,255,255,.14);padding-top:.5em;margin-top:2px}
.sv2 .mega__desc{display:none}
/* Sub-links were 34-36px tall. That clears WCAG 2.5.8 (24px) but is under the
44px thumb-comfortable standard, and these are the most-tapped items in the
menu. min-height guarantees 44 without bloating the type. */
.sv2 .nav__links a.mega__link{font-size:.94rem;padding:.3em 0 .3em 15px;min-height:44px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.82) !important}
.sv2 a.mega__link:hover{transform:none;color:#fff !important}
.sv2 .nav__links a.mega__all{color:var(--lime) !important;padding-left:15px;border-bottom:none;font-size:.95rem;margin-top:2px;min-height:44px;display:flex;align-items:center}
.sv2 .mega__promo{display:none}
/* 44x44 is the Apple HIG / Android minimum touch target; 40 was under it. */
.sv2 .nav__toggle{display:inline-flex;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;z-index:70;position:relative;background:none;border:0;margin-right:-10px}
.sv2 .nav__toggle span{display:block;width:26px;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s,opacity .3s}
.sv2 .nav--solid .nav__toggle span{background:var(--teal)}
.sv2 .nav__scrim{display:block;position:fixed;inset:0;background:rgba(4,20,16,.55);z-index:55;opacity:0;visibility:hidden;transition:opacity .3s}
.sv2 .nav.is-menu-open .nav__scrim{opacity:1;visibility:visible}
.sv2 .nav.is-menu-open .nav__links{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
.sv2 .nav.is-menu-open .nav__toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);background:#fff}
.sv2 .nav.is-menu-open .nav__toggle span:nth-child(2){opacity:0}
.sv2 .nav.is-menu-open .nav__toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);background:#fff}
/* Opening a category (Services is 6 items) pushed the primary CTA ~950px down,
i.e. off-screen on a 720px phone -- the one thing we most want tappable was
the hardest thing to reach. Pin it to the bottom of the scrolling drawer so
it is always one thumb-tap away, whatever is expanded above it. */
.sv2 .nav__links a.sbtn--cta{color:#16291b !important;border-bottom:none;padding:.85em 1.2em;margin-top:14px;justify-content:center;text-align:center;
position:sticky;bottom:0;z-index:2;
box-shadow:0 -14px 22px -8px #0f2a27, 0 0 0 10px #0f2a27}
.sv2 .nav__cta-desktop{display:none}
}
@media(min-width:861px){
.sv2 .nav__toggle{display:none}
.sv2 .nav__cta-drawer{display:none}
.sv2 .nav__scrim{display:none}
}
/* --- a11y: visible focus rings (light + on-teal contexts) --- */
.sv2 a:focus-visible,.sv2 button:focus-visible,.sv2 select:focus-visible,.sv2 input:focus-visible,.sv2 summary:focus-visible,.sv2 [tabindex]:focus-visible{outline:3px solid var(--teal-mid);outline-offset:2px;border-radius:6px}
.sv2 .hero a:focus-visible,.sv2 .nav a:focus-visible,.sv2 .nav button:focus-visible,.sv2 .hp-tst a:focus-visible,.sv2 .foot a:focus-visible,.sv2 .foot button:focus-visible{outline-color:var(--lime)}
.sv2 #semh-main:focus{outline:none}
/* --- smooth in-page scroll to the audit form, offset under the sticky bar --- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Anchor offset for the sitewide "Get free audit" jumps. 84px was measured
against the nav alone and did not account for the sticky CTA bar, which is
the thing actually pinned to the top by the time you have scrolled far
enough to trigger the jump - so the band landed under it and the first two
fields were unreadable. The extra room is deliberate rather than merely
safe: it leaves the rounded top edge of the CTA band clear of the bar with
white space above it, so the panel reads as rising into the page instead of
being sliced off. #audit-form is the /free-audit/ hero card, same problem. */
.sv2 #free-audit,.sv2 #audit-form{scroll-margin-top:var(--sv2-anchor-off,120px)}
/* --- sticky conversion bar: reveals after the hero (persistent CTA on the long page) --- */
.sv2-scta{position:fixed;top:0;left:0;right:0;z-index:50;transform:translateY(-102%);transition:transform .32s cubic-bezier(.4,0,.2,1);background:rgba(1,42,45,.94);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid rgba(213,255,126,.18);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.sv2-scta.is-visible{transform:translateY(0)}
/* keep the wrap's own horizontal gutter -- the shorthand here previously reset it
to 0, so the phone number and CTA sat flush against the screen edges on mobile */
.sv2-scta .wrap{display:flex;align-items:center;gap:16px;padding:10px clamp(20px,5vw,44px)}
.sv2-scta__txt{color:#fff;font-weight:600;font-size:.98rem;margin-right:auto}
.sv2 .sv2-scta__call{display:inline-flex;align-items:center;gap:.4em;color:var(--lime);font-weight:700;font-size:.95rem;white-space:nowrap;text-decoration:none}
.sv2 .sv2-scta__call svg{color:var(--lime)}
.sv2 .sv2-scta__call:hover,.sv2 .sv2-scta__call:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sv2 .sv2-scta__call:hover svg,.sv2 .sv2-scta__call:focus-visible svg{color:#fff}
/* .sv2 scope needed: bare .sv2-scta__btn loses to .sv2 .sbtn on specificity, so
the button kept the full-size button padding and blew past the screen edge. */
.sv2 .sv2-scta__btn{padding:.62em 1.1em;font-size:.92rem;white-space:nowrap}
.sv2-scta__short{display:none}
@media(max-width:600px){
.sv2-scta__txt{display:none}
.sv2-scta .wrap{gap:10px;justify-content:space-between}
.sv2-scta__call{margin-right:auto;font-size:.9rem}
/* at 375px the phone (145px) + "Get your free audit" button (240px) needed
395px inside a 335px gutter, so the CTA ran off-screen. Shorten the label
and tighten the button on phones. */
.sv2-scta__long{display:none}
.sv2-scta__short{display:inline}
.sv2 .sv2-scta__btn{padding:.6em 1em;font-size:.86rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sv2-scta__call{min-height:44px;align-items:center}
}
/* the narrowest phones still squeezed the button past its right gutter (13px vs
20px on the left) -- shave the phone/button a touch so both gutters match */
@media(max-width:360px){
/* smallest phones: keep the CTA headline to its two intended lines */
.sv2 .foot__cta h2{font-size:1.5rem}
.sv2-scta .wrap{padding-left:16px;padding-right:16px;gap:8px}
.sv2-scta__call{font-size:.85rem;gap:.3em}
.sv2 .sv2-scta__btn{padding:.6em .8em;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){.sv2-scta{transition:none}}
/* even out section headings so a long city name doesn't strand one word
("...how Kailua / searches") on its own line */
.sv2 .sec-head h2{text-wrap:balance}
/* --- hero --- */
.sv2 .loc-hero .hero__inner{padding-top:clamp(96px,12vw,132px)}
/* Equal rhythm down the hero stack: breadcrumb -> eyebrow -> H1 all sit on the
same 18px gap. They were 14 / 16, which read as an uneven ladder. */
.sv2 .loc-crumb{margin-bottom:18px}
.sv2 .loc-crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:.85rem}
.sv2 .loc-crumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}
.sv2 .loc-crumb a{color:rgba(255,255,255,.72)}
.sv2 .loc-crumb a:hover{color:var(--lime)}
.sv2 .loc-crumb span{color:rgba(255,255,255,.92)}
.sv2 .loc-hero .eyebrow{margin-bottom:18px}
/* --- hero: H1 + rating left, entity panel + map right --- */
/* min-width:0 on every grid child: the default is min-width:auto, so a wide
intrinsic item (the map iframe, a long unbroken heading) forces the track
past the container and the whole grid overflows the wrap. */
.sv2 .loc-hero__grid > *,
.sv2 .loc-med > *,
.sv2 .loc-band > *,
.sv2 .loc-quotes > *{min-width:0}
.sv2 .loc-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);align-items:center}
/* Core's hero H1 scale assumes a full-width hero; beside the entity panel the
column is ~570px and "senior-led, no contracts" wrapped to 4 lines. Cap so
the H1 holds its intended 2-line break at desktop. */
/* margin-top:0 is the fix for the uneven hero ladder. The eyebrow is an
inline-flex pill so its 18px bottom margin cannot collapse against the H1's
own .42em top margin -- the two stacked and made the eyebrow-to-H1 gap 31px
against the breadcrumb-to-eyebrow 18px. */
.sv2 .loc-hero .hero__h1{margin-top:0;margin-bottom:.4em;font-size:clamp(2.05rem,3.4vw,2.6rem)}
.sv2 .loc-rate{display:flex;align-items:center;gap:10px;margin:18px 0 22px}
.sv2 .loc-rate__n{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.sv2 .loc-rate__s{display:inline-flex;gap:2px}
.sv2 .loc-rate__s svg{width:18px;height:18px;fill:var(--lime)}
.sv2 .loc-rate__c{color:rgba(255,255,255,.78);font-size:.92rem}
/* Entity panel -- glass over the teal hero, same treatment as the homepage
market-pulse card so it reads as one system. */
/* Dark-side glass: same construction as the light panels, inverted -- saturated
blur, a bright top hairline, and a lifted shadow so it sits above the hero. */
.sv2 .loc-ent{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2);border-radius:22px;overflow:hidden;backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px);
box-shadow:0 34px 68px -34px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.18) inset}
.sv2 .loc-now{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px}
.sv2 .loc-now.is-open{background:var(--lime);color:var(--teal)}
.sv2 .loc-now.is-shut{background:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}
.sv2 .loc-ent__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)}
.sv2 .loc-ent__b{padding:20px 22px 18px;color:#fff}
.sv2 .loc-ent__name{font-size:1.18rem;font-weight:700;letter-spacing:-.02em}
.sv2 .loc-ent__serve{color:var(--lime);font-size:.9rem;font-weight:600;margin-top:2px}
.sv2 .loc-ent__addr{font-style:normal;color:rgba(255,255,255,.78);font-size:.93rem;margin-top:6px}
.sv2 .loc-ent__tel{display:inline-block;color:#fff;font-weight:700;font-size:1.05rem;margin-top:8px;letter-spacing:-.01em}
.sv2 .loc-ent__tel:hover{color:var(--lime)}
.sv2 .loc-ent__soc{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.sv2 .loc-ent__soc a{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.86);font-size:.82rem;font-weight:600;text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.sv2 .loc-ent__soc a:hover,.sv2 .loc-ent__soc a:focus-visible{background:var(--lime);border-color:var(--lime);color:#16291b}
.sv2 .loc-ent__btns{display:flex;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.sv2 .loc-ent__btns .sbtn{flex:1 1 150px;justify-content:center;font-size:.88rem}
.sv2 .loc-ent__d{border-top:1px solid rgba(255,255,255,.14);margin-top:14px}
.sv2 .loc-ent__d summary{list-style:none;cursor:pointer;padding:12px 0;font-weight:600;font-size:.94rem;display:flex;align-items:center;justify-content:space-between;min-height:44px}
.sv2 .loc-ent__d summary::-webkit-details-marker{display:none}
.sv2 .loc-ent__d summary::after{content:"+";font-size:1.15rem;color:var(--lime);line-height:1}
.sv2 .loc-ent__d[open] summary::after{content:"–"}
.sv2 .loc-hrs{margin:0 0 12px;display:grid;gap:5px}
.sv2 .loc-hrs > div{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.sv2 .loc-hrs dt{color:rgba(255,255,255,.72);margin:0}
.sv2 .loc-hrs dd{margin:0;color:#fff;font-variant-numeric:tabular-nums}
.sv2 .loc-hrs dd.is-closed{color:rgba(255,255,255,.72)}
.sv2 .loc-bsv{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.sv2 .loc-bsv li{position:relative;padding-left:20px;font-size:.9rem;color:rgba(255,255,255,.85)}
.sv2 .loc-bsv li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--lime)}
/* --- USP list under the H1 --- */
/* Top margin, not 0: the subhead's own bottom margin was collapsing against
this list, so the bullets sat flush against the last line of the paragraph
and read as a fourth sentence rather than a separate block. */
.sv2 .loc-usp{list-style:none;margin:26px 0 22px;padding:0;display:grid;gap:11px}
.sv2 .loc-usp li{position:relative;padding-left:28px;color:rgba(255,255,255,.92);font-size:.98rem;line-height:1.5}
.sv2 .loc-usp li::before{content:"";position:absolute;left:0;top:.34em;width:17px;height:17px;border-radius:50%;background:var(--lime)}
.sv2 .loc-usp li::after{content:"";position:absolute;left:5px;top:.62em;width:6px;height:3px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
/* --- closing proof bar --- */
.sv2 .loc-proof__in{background:var(--page);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3.4vw,40px);text-align:center;max-width:820px;margin:0 auto}
.sv2 .loc-proof__r{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.98rem;margin-bottom:.9em}
.sv2 .loc-proof__r strong{color:var(--ink);font-size:1.2rem;letter-spacing:-.02em}
.sv2 .loc-proof p{color:var(--muted);font-size:1.01rem;line-height:1.65;margin:0 0 1.6em;text-wrap:pretty}
.sv2 .loc-proof p a{color:var(--teal);font-weight:700;border-bottom:1px solid var(--lime)}
.sv2 .loc-proof__b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* .sbtn--ghost is built for dark surfaces (white text, white hairline border).
On this light mist panel it rendered white-on-near-white -- the phone CTA was
effectively invisible. Restate it in teal for light backgrounds. */
.sv2 .loc-proof .sbtn--ghost{color:var(--teal) !important;border-color:rgba(1,59,53,.3)}
.sv2 .loc-proof .sbtn--ghost:hover{background:var(--teal);border-color:var(--teal);color:#fff !important}
/* ============================================================
* FAQ CARDS -- numbered, with a real parent/child relationship
* Before: question and answer shared one left edge and one visual weight, so an
* open card read as a single grey slab with no entry point. Scoped to
* .faq--num so the homepage FAQ is untouched until we choose to propagate.
* ========================================================== */
/* Double class (.faq.faq--num) is deliberate. Core's .sv2 .faq summary is the
same specificity as .sv2 .faq--num summary and loads AFTER this file, so it
won every tie -- its display:flex and align-items:center were still in force
and the question text sat centred at a different x on every row.
justify-items:start is likewise required: as grid items the spans would
otherwise inherit the section's centring. */
.sv2 .faq.faq--num summary{display:grid;grid-template-columns:30px 1fr 24px;align-items:start;justify-items:start;gap:14px;padding:20px 22px;text-align:left}
/* Rank badge borrowed from the map-pack rows, so the two numbered systems on
this page look like one idea. Open state inverts to teal/lime, same as there. */
/* Badge picks up the signal-emblem construction (gradient disc + radar ring)
once open, matching the mega-menu icons and the service cards. */
.sv2 .faq.faq--num .faq__n{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(1,59,53,.06);color:var(--teal-label);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:background .24s,color .24s,box-shadow .24s;flex:none}
.sv2 .faq.faq--num .faq__n::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.4px solid rgba(26,134,120,.28);opacity:0;transform:scale(.86);transition:opacity .32s ease,transform .32s ease}
.sv2 .faq.faq--num summary:hover .faq__n{background:rgba(26,134,120,.14);color:var(--teal)}
.sv2 .faq.faq--num details[open] .faq__n{background:linear-gradient(150deg,#0f4a42,#1a8678);color:var(--lime);box-shadow:0 8px 16px -8px rgba(26,134,120,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.sv2 .faq.faq--num details[open] .faq__n::before{opacity:1;transform:scale(1)}
/* Lime rail down the open card, the same affirmative accent as the service
cards' top bar -- it marks which card is active at a glance. */
.sv2 .faq.faq--num details{position:relative;overflow:hidden}
.sv2 .faq.faq--num details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--lime),var(--lime-deep));transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.sv2 .faq.faq--num details[open]::before{transform:scaleY(1)}
.sv2 .faq.faq--num .faq__qt{justify-self:stretch;font-size:1.05rem;font-weight:600;line-height:1.4;color:var(--ink);padding-top:3px;text-align:left;text-wrap:pretty}
.sv2 .faq.faq--num details[open] .faq__qt{color:var(--teal)}
.sv2 .faq.faq--num summary:hover .faq__qt{color:var(--teal)}
.sv2 .faq.faq--num summary::after{padding-top:2px;justify-self:end}
/* Frosted card, same glass family as .hp-stat and the audit form: saturated
blur, bright hairline, inner top highlight. */
.sv2 .faq.faq--num details{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border:1px solid rgba(255,255,255,.75);border-radius:18px;margin-bottom:12px;
box-shadow:0 18px 40px -28px rgba(20,50,40,.5),0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(1,59,53,.05)}
.sv2 .faq.faq--num details:hover{box-shadow:0 22px 46px -26px rgba(20,50,40,.55),0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(26,134,120,.22)}
.sv2 .faq.faq--num details[open]{background:rgba(255,255,255,.86);box-shadow:0 26px 54px -26px rgba(20,50,40,.55),0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1.5px rgba(26,134,120,.45)}
/* Answer block indents to the question's text edge (30px badge + 14px gap). */
.sv2 .faq.faq--num .faq__a{padding:0 22px 20px 66px;margin-top:2px;color:var(--muted);font-size:1rem;line-height:1.7;text-align:left;max-width:none}
/* Three type levels inside the card: question (600, ink) -> lead answer (ink,
larger, the direct answer) -> supporting points (muted, smaller). Before this
the answer was one flat grey block with no entry point. */
.sv2 .faq.faq--num .faq__lead{margin:0 0 1.05em;padding-top:14px;border-top:1px solid rgba(1,59,53,.1);color:var(--ink);font-size:1.02rem;line-height:1.6;font-weight:500;max-width:62ch}
.sv2 .faq.faq--num .faq__pts{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:66ch}
.sv2 .faq.faq--num .faq__close{margin:1.05em 0 0;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:66ch}
.sv2 .faq.faq--num .faq__close a{color:var(--teal-label);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(21,115,102,.32)}
.sv2 .faq.faq--num .faq__close a:hover{border-bottom-color:var(--teal-label)}
.sv2 .faq.faq--num .faq__pts li b{color:var(--ink);font-weight:600}
.sv2 .faq.faq--num .faq__pts li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.55;color:var(--muted)}
/* Lime check discs -- the same affirmative mark as the hero USP list, so the
two "here is what you get" moments on the page use one vocabulary. */
/* Neutral dot, deliberately NOT a tick. These bullets are labelled facts, and
many of them are negatives ("staging sites launched with noindex still on",
"a rebuild resets the authority you have"). A tick asserts approval, so it
reads as endorsing the problem. Ticks are kept where they are earned: the
hero benefit list (.loc-usp) and the pass/fail panel (.svc-diag__mark). */
.sv2 .faq.faq--num .faq__pts li::before{content:"";position:absolute;left:3px;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--teal-mid)}
.sv2 .faq.faq--num .faq__pts li::after{content:none}
/* --- section heads: let the H2 run wider than the paragraph measure --- */
/* Core caps .sec-head at 680px, which is a good measure for body copy but too
narrow for a 46px H2 -- "Kailua SEO questions, answered" broke across two
lines with a stranded short first line. Heading gets room; copy keeps 680. */
.sv2 .sec .wrap .sec-head{max-width:900px}
.sv2 .sec .wrap .sec-head p{max-width:680px;margin-left:auto;margin-right:auto}
/* --- result strip: the homepage .hp-stat component, ported verbatim --- */
/* Same fill, blur, border, radius, shadow, dividers and negative offset as the
homepage so both templates stagger-stack over their hero identically. */
.sv2 .hp-stat{position:relative;z-index:5;margin-top:clamp(-52px,-4vw,-38px)}
.sv2 .hp-stat__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
background:rgba(255,255,255,.74);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
border:1px solid rgba(255,255,255,.7);border-radius:24px;padding:clamp(22px,2.6vw,32px) clamp(18px,2.2vw,28px);
box-shadow:0 30px 60px -34px rgba(20,50,40,.5)}
.sv2 .hp-stat__c{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 12px;text-align:center}
.sv2 .hp-stat__c:not(:last-child)::after{content:"";position:absolute;right:-7px;top:14%;height:72%;width:1px;background:var(--line)}
.sv2 .hp-stat__res{display:inline-flex;align-items:center;gap:5px}
.sv2 .hp-stat__arw{width:clamp(15px,1.5vw,19px);height:auto;flex:none}
.sv2 .hp-stat__arw path{stroke:var(--teal-mid);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sv2 .hp-stat__big{font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:700;letter-spacing:-.02em;color:var(--teal);line-height:1;white-space:nowrap}
.sv2 .hp-stat__lab{font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.3}
.sv2 .hp-stat__logo{height:40px;display:flex;align-items:center;justify-content:center;margin-top:2px}
/* The client logos are the "-transparent" knockout variants, authored for dark
backgrounds, and this strip is rgba(255,255,255,.74). Sampling the actual
pixels: My Brow & Lash averages rgb(211,202,197) with 58% of its pixels light,
which is about 1.35:1 here -- invisible. Island Power Yoga sits near 3:1.
A single darkening pass fixes the light marks and leaves the already-dark ones
(Aina Grill, 60% dark pixels) essentially untouched, while keeping brand hue
rather than flattening everyone to grey. */
.sv2 .hp-stat__logo img{max-height:40px;max-width:130px;width:auto;object-fit:contain;opacity:.96;
filter:brightness(.66) saturate(1.12);transition:opacity .25s,transform .25s,filter .25s}
.sv2 .hp-stat__c:hover .hp-stat__logo img{filter:brightness(.5) saturate(1.18)}
.sv2 .hp-stat__c:hover .hp-stat__logo img{opacity:1;transform:scale(1.05)}
/* --- copy beside image (live slots 3 + 4) --- */
.sv2 .loc-med{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.sv2 .loc-med--rev .loc-med__t{order:2}
.sv2 .loc-med--rev .loc-med__m{order:1}
.sv2 .loc-med h2{font-size:clamp(1.9rem,3.8vw,2.5rem);line-height:1.13;letter-spacing:-.025em;margin:.3em 0 .55em;text-wrap:balance}
/* In the split column the authored
fights the natural wrap and strands a
word ("...once they / find us"). Balance alone gives an even 2-line split. */
.sv2 .loc-med h2 br{display:none}
.sv2 .loc-med p{color:var(--muted);font-size:1.01rem;line-height:1.68;margin:0 0 1.1em}
.sv2 .loc-med__m img{width:100%;height:auto;border-radius:20px;display:block}
/* --- why-us process rail (the 4-stage system infographic) --- */
/* Vertical rail with a connecting spine between emblem nodes: reads as a
process, not a list, and fills the column the stock photo used to occupy.
Pure CSS, no JS to strip. */
.sv2 .loc-flow{display:grid;gap:14px;position:relative}
/* Round dots, not dashes: a repeating-linear-gradient paints rectangles, so the
spine has to be a radial-gradient tiled down the axis. Kept identical to the
trail on the "what is included" rail so both read as one system. Width 6px
centred on 30px, which is where the 40px discs centre. */
.sv2 .loc-flow::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:6px;
background-image:radial-gradient(circle,rgba(26,134,120,.5) 2.2px,transparent 2.4px);
background-size:6px 13px;background-repeat:repeat-y}
.sv2 .loc-flow__i{position:relative;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 8px;border-radius:16px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.sv2 .loc-flow__i:hover{border-color:var(--teal-mid);transform:translateX(4px);box-shadow:0 14px 30px -20px rgba(20,50,40,.45)}
.sv2 .loc-flow__node{flex:none;width:44px;display:flex;justify-content:center}
.sv2 .loc-flow__disc{position:relative;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#0f4a42,#1a8678);color:var(--lime);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 18px -10px rgba(26,134,120,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.sv2 .loc-flow__disc::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.4px solid rgba(26,134,120,.28);transition:transform .3s ease,opacity .3s ease;opacity:.8}
.sv2 .loc-flow__i:hover .loc-flow__disc::before{opacity:1;transform:scale(1.1)}
.sv2 .loc-flow__disc svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv2 .loc-flow__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv2 .loc-flow__step{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-label)}
.sv2 .loc-flow__tx strong{font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.sv2 .loc-flow__sub{font-size:.88rem;color:var(--muted);line-height:1.45}
.sv2 .loc-flow__i .svc__ar{margin-left:auto;flex:none}
.sv2 .loc-flow__i:hover .svc__ar{background:var(--lime);border-color:var(--lime);color:#16291b;transform:translateX(3px)}
/* --- signal emblem (ported from the homepage card system) --- */
.sv2 .iemb{position:absolute;top:14px;right:14px;width:62px;height:62px;margin:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.sv2 .iemb::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 3px,rgba(26,134,120,.34) 3px 4.3px);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 20px,#000 21.5px,#000 30px,transparent 31px);mask:radial-gradient(circle at 50% 50%,transparent 0 20px,#000 21.5px,#000 30px,transparent 31px);opacity:.7;transition:opacity .5s ease,transform .5s ease}
.sv2 .iemb__core{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#0f4a42,#1a8678);color:var(--lime);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 22px -12px rgba(26,134,120,.6),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .3s ease,box-shadow .3s ease}
.sv2 .iemb__core svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv2 .loc-svc:hover .iemb::before{opacity:1;transform:scale(1.12)}
.sv2 .loc-svc:hover .iemb__core{transform:scale(1.06);box-shadow:0 16px 28px -12px rgba(26,134,120,.78),inset 0 1px 0 rgba(255,255,255,.2)}
/* The emblem is absolutely positioned at top:14px/right:14px, 62px square, so it
occupies the band 14-76px down from the card's top edge. padding-right keeps
the H3 out of its column, but the paragraph had no such guard: with a one-line
H3 the copy started around 55px and ran straight under the emblem. That only
showed up once the included grid went asymmetric, because at the old uniform
352px every H3 wrapped to two lines and pushed the copy clear by accident.
min-height reserves the vertical band on the H3 instead of taking 70px of
measure off every line of the paragraph. Where the H3 already wraps past 48px
nothing changes, and in a mixed-width row it lines the paragraphs up on a
shared baseline, which reads better than the ragged starts it replaces. */
.sv2 .loc-svc h3{padding-right:70px;min-height:48px}
/* --- proof trio (two quotes + one result card) --- */
.sv2 .loc-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
/* TIER LABEL -- the featured story and these cards were reading as one
undifferentiated run of proof. A ruled label marks the change of element. */
.sv2 .loc-quotes__lab{display:flex;align-items:center;gap:14px;margin:34px 0 4px}
.sv2 .loc-quotes__lab span{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-label)}
.sv2 .loc-quotes__lab::after{content:"";flex:1;height:1px;background:var(--line)}
/* position:relative so the intent emblem (absolute, top-right) anchors to the
card. The QUOTE is now the card's lead voice at 1.06rem ink italic, and the
win moved down into the attribution block as a small lime chip -- previously
the win was a 1.15rem teal headline competing with the featured story's own
big stat, which is why the two tiers looked like the same element. */
/* The section H2 carries a top margin that existed to separate it from the
eyebrow above it. The taste pass removed most of those eyebrows (they only
restated the H2), which left that margin as unexplained dead space at the top
of 21 sections. Zero it only when the H2 is actually first, so the few sections
that kept an eyebrow keep their spacing. */
.sv2 .sec-head h2:first-child{margin-top:0}
/* --- SHARED TYPOGRAPHY: orphan and widow control -------------------------
Lives in the kit so every page built on it inherits the same line discipline.
An audit of one service page found 16 last-lines carrying a single word
("handoff", "program", "alone.", "move.", "afterthought.", "signal"...);
the location pages share these components and had the same problem.
pretty keeps body copy from dropping one word onto its own line; balance evens
out heading line lengths. Both fall back to normal wrapping where unsupported.
Headings only get balance -- on a hero H1 with deliberate clauses it
redistributes across them and breaks mid-phrase, so H1 gets pretty instead. */
.sv2 h2,.sv2 h3{text-wrap:balance}
/* A heading that already contains a
has an author-chosen break, and balance
fights it -- it re-divides each segment to even out lengths and produced
"Everything it / takes to own your / corner of Kailua" and "Need more /
customers in Kailua?" on the location pages. Where the break is deliberate,
only orphan control is wanted. Browsers without :has() keep balance, which is
the behaviour these headings already had. */
.sv2 h2:has(br),.sv2 h3:has(br){text-wrap:pretty}
.sv2 main p,.sv2 main li{text-wrap:pretty}
.sv2 .hero__h1{text-wrap:pretty}
/* NOTE: no .hl nowrap rule here. The base `.sv2 .hl` in semh_v2_core_css()
already sets white-space:nowrap, so adding it again did nothing. The real
constraint that follows from it: a highlighted phrase must be short enough to
fit one line at 375px (roughly 18 chars), or it will run past the viewport
edge. Keep highlights to two or three short words when writing new heroes. */
/* --- SHARED HOVER for clickable quote cards ------------------------------
A CSS audit found zero :hover rules matching .loc-quote, while the cards are
elements pointing at case studies -- clickable cards with no affordance.
Reuses the vocabulary already in this file (.loc-pill's lift + teal-mid border
+ soft shadow, .loc-svc's lime arrow nudge) rather than adding a new one.
Scoped to a.loc-quote on purpose: a quote card rendered as a plain div must
not advertise itself as clickable. */
.sv2 a.loc-quote{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.sv2 a.loc-quote:hover{border-color:var(--teal-mid);transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(20,60,50,.42)}
.sv2 a.loc-quote:hover .svc__ar{background:var(--lime);border-color:var(--lime);color:#16291b;transform:translateX(3px);box-shadow:0 9px 20px -8px rgba(198,245,98,.8)}
.sv2 a.loc-quote .iemb__core{transition:transform .22s ease}
.sv2 a.loc-quote:hover .iemb__core{transform:scale(1.08)}
.sv2 a.loc-quote .svc__link{transition:color .18s ease}
.sv2 a.loc-quote:hover .svc__link{color:var(--teal-label)}
.sv2 .loc-quote{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;color:inherit}
.sv2 .loc-quote__s{display:inline-flex;gap:2px;margin-bottom:14px}
.sv2 .loc-quote__s svg{width:15px;height:15px;fill:var(--brand)}
/* The quote leads: ink, larger, italic, with a hanging open-quote glyph so the
card reads unmistakably as somebody speaking -- distinct from the featured
story, whose lead element is a big teal stat. */
.sv2 .loc-quote blockquote{position:relative;margin:0 0 1.3em;padding:0 52px 0 20px;color:var(--ink);font-size:1.06rem;line-height:1.5;font-style:italic;letter-spacing:-.01em;flex:1}
/* Literal curly quote, never a backslash escape -- this block is a PHP heredoc
and backslash-020 would be decoded as an octal byte into the stylesheet. */
.sv2 .loc-quote blockquote::before{content:"“";position:absolute;left:-2px;top:-.34em;font-size:2.6rem;line-height:1;font-style:normal;color:var(--lime-deep);opacity:.55;pointer-events:none}
.sv2 .loc-quote__who{margin-bottom:1em;line-height:1.35}
.sv2 .loc-quote__who strong{display:block;color:var(--ink);font-size:.95rem;font-weight:600}
.sv2 .loc-quote__who span{display:block;color:var(--muted);font-size:.87rem}
/* Win demoted from a 1.15rem teal headline to a small lime chip inside the
attribution -- it is a footnote on the person, not the card's headline. */
/* Specificity note: .loc-quote__who span (0,2,1) sets display:block for the
role line, which out-specified a bare .loc-quote__w and stretched the chip to
the full card width. Scope it under __who so the chip hugs its text. */
.sv2 .loc-quote__who .loc-quote__w{display:inline-block;width:auto;margin-top:10px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:var(--lime);border-radius:100px;padding:.42em .95em}
/* ============================================================
* THE MARKET -- dark tonal break + map-pack artifact
* The page ran cream from the logo bar to the footer CTA. This section flips to
* teal to break that, and it carries the one piece of real teaching on the
* page, so it earns the interruption.
* ========================================================== */
/* Inset rounded panel, same construction as the client-story card in Proof --
the eyebrow and H2 live outside it on the page background, so this reads as
one more section in the rhythm rather than a full-bleed colour interruption. */
.sv2 .loc-market{background:var(--teal);color:#fff;position:relative;overflow:hidden;border-radius:var(--radius);padding:clamp(30px,4vw,52px)}
.sv2 .loc-market::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 68% 58% at 76% 42%,rgba(26,134,120,.5),transparent 68%);pointer-events:none}
.sv2 .loc-market__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,56px);align-items:center}
.sv2 .loc-market__grid > *{min-width:0}
.sv2 .loc-market h3{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12;letter-spacing:-.025em;color:#fff !important;margin:0 0 .6em;text-wrap:balance}
.sv2 .loc-market p{color:rgba(255,255,255,.84);font-size:1.02rem;line-height:1.68;margin:0 0 1.1em}
/* Hairline above the meta line so it reads as a footnote to the panel rather
than a stray sentence dangling under the button. */
.sv2 .loc-market__meta{font-size:.82rem !important;color:rgba(255,255,255,.62) !important;margin:1.9em 0 0 !important;padding-top:1.2em;border-top:1px solid rgba(255,255,255,.12)}
/* Emphasis in this heading uses .sig (the neon underline), not .hl (the tomato
marker). Full-strength white text -- an earlier muted version read as faded.
.hl stays reserved for the celebratory moments ("revenue", "Fully Booked"). */
/* Query chips -- real query SHAPES a local searcher types, not invented volumes.
2x2 grid rather than flex-wrap: four chips wrapped 3+1 and stranded the last
one on its own line, which read as a mistake. */
.sv2 .loc-q__lab{font-size:.72rem !important;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72) !important;margin:1.8em 0 .8em !important}
.sv2 .loc-q{display:grid;grid-template-columns:repeat(2,max-content);gap:9px;margin:0 0 1.9em}
.sv2 .loc-q span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);font-size:.87rem;color:rgba(255,255,255,.92);white-space:nowrap}
.sv2 .loc-q span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
/* --- the map-pack artifact --- */
.sv2 .loc-market__viz{position:relative;display:flex;flex-direction:column;align-items:center}
/* Concentric signal rings behind the card -- the brand radar motif at scale. */
.sv2 .loc-market__viz::before{content:"";position:absolute;top:46%;left:50%;width:min(680px,132%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
background:repeating-radial-gradient(circle at 50% 50%,transparent 0 23px,rgba(213,255,126,.22) 23px 24.6px);
-webkit-mask:radial-gradient(circle at 50% 50%,#000 24%,transparent 74%);mask:radial-gradient(circle at 50% 50%,#000 24%,transparent 74%);pointer-events:none}
/* Same frosted-glass family as the form card and the .hp-stat strip. */
.sv2 .mpk{position:relative;z-index:1;width:100%;max-width:436px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.5) blur(22px);-webkit-backdrop-filter:saturate(1.5) blur(22px);border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:16px;margin:0;
box-shadow:0 44px 88px -38px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(1,59,53,.05)}
.sv2 .mpk__lab{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-label);margin:2px 0 12px;text-align:center}
.sv2 .mpk__bar{display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid var(--line);border-radius:100px;background:var(--page);margin-bottom:12px}
.sv2 .mpk__bar svg{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.sv2 .mpk__q{font-size:.93rem;color:var(--ink);font-weight:500}
.sv2 .mpk__caret{display:inline-block;width:2px;height:.95em;background:var(--teal-mid);margin-right:3px;vertical-align:-1px}
/* Stylised map strip: soft land/water wash, two roads, three pins. */
.sv2 .mpk__map{position:relative;height:94px;border-radius:14px;overflow:hidden;margin-bottom:13px;
background:linear-gradient(158deg,#e2efe8 0%,#d3e6df 58%,#c7dfe4 100%)}
.sv2 .mpk__map::before,.sv2 .mpk__map::after{content:"";position:absolute;background:rgba(255,255,255,.85)}
.sv2 .mpk__map::before{left:-10%;right:-10%;top:52%;height:7px;transform:rotate(-7deg)}
.sv2 .mpk__map::after{top:-20%;bottom:-20%;left:42%;width:6px;transform:rotate(11deg)}
/* Ringed circles, not teardrops. A rotated teardrop with a white keyline reads
as a speech bubble at 14px; a ringed dot is unambiguous and is what Google
itself uses for secondary map results. The "you" marker is teal with a lime
halo, matching the rank-3 badge below, so map and list point at one thing. */
.sv2 .mpk__pin{position:absolute;width:13px;height:13px;border-radius:50%;background:#7d8c83;border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 5px -1px rgba(0,0,0,.35)}
.sv2 .mpk__pin--you{width:19px;height:19px;background:var(--teal);border-color:#fff;box-shadow:0 0 0 5px rgba(213,255,126,.5),0 3px 8px -2px rgba(0,0,0,.4);z-index:1}
.sv2 .mpk__list{list-style:none;margin:0;padding:0}
.sv2 .mpk__row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;border:1.5px solid transparent}
.sv2 .mpk__row + .mpk__row{margin-top:6px}
.sv2 .mpk__rank{width:23px;height:23px;border-radius:50%;background:var(--page);color:var(--muted);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.sv2 .mpk__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv2 .mpk__nm{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25}
.sv2 .mpk__sub{font-size:.75rem;color:var(--muted);line-height:1.3}
/* Rows 1 and 2 read as anonymised -- they are an illustration, not real firms. */
.sv2 .mpk__row:not(.mpk__row--open) .mpk__nm{color:var(--muted)}
.sv2 .mpk__row--open{background:linear-gradient(95deg,rgba(213,255,126,.55),rgba(213,255,126,.2));border-color:var(--teal-mid);border-style:dashed}
.sv2 .mpk__row--open .mpk__rank{background:var(--teal);color:var(--lime)}
.sv2 .mpk__row--open .mpk__nm{color:var(--teal)}
.sv2 .mpk__row--open .mpk__sub{color:var(--teal-label);font-weight:600}
/* --- why us (live slot 3) --- */
/* Five cards into a 3-col grid leaves a 2-up last row; centring that row reads
as intentional instead of looking like a card failed to load. */
.sv2 .loc-whys{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;justify-content:center}
.sv2 .loc-why{padding:26px 24px 24px}
.sv2 .loc-why:nth-child(4){grid-column:1 / span 1;margin-left:auto}
.sv2 .loc-why__tick{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--lime);margin-bottom:14px}
.sv2 .loc-why__tick svg{width:19px;height:19px;fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sv2 .loc-why h3{font-size:1.08rem;font-weight:600;color:var(--ink);margin:0 0 .45em;letter-spacing:-.01em}
.sv2 .loc-why p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
/* --- 6 numbered steps (live slot 7) --- */
.sv2 .loc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Emblem top-right (intent line art per card), number demoted to a small label
chip -- the bare 1.55rem numeral next to nothing read as a design accident. */
.sv2 .loc-step{position:relative;padding:24px 24px 22px}
/* color needs !important to land: the base .sv2 .step__n rule in this same file
carries color:#fff !important (it styles the homepage's solid tomato step
circles). Without it the chip rendered WHITE on a 14%-teal tint -- effectively
invisible. Teal-on-lime matches the other label chips in the system
(.loc-quote__w in the proof cards, the FAQ number badge). */
.sv2 .loc-step .step__n{display:inline-block;align-self:flex-start;width:auto;height:auto;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--teal) !important;background:var(--lime);border-radius:100px;padding:.45em 1em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.sv2 .loc-step h3{font-size:1.05rem;line-height:1.3;font-weight:600;color:var(--ink);margin:0 0 .45em;letter-spacing:-.01em;padding-right:64px;text-wrap:balance}
.sv2 .loc-step p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0}
/* --- mid-page CTA band (live slot 8) --- */
/* Even columns. At 1.35fr/.65fr the form got 315px, which wrapped the submit
button onto FOUR lines and stacked the fine print three deep. The form is the
conversion element on this page -- it gets equal billing. */
.sv2 .loc-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,48px);align-items:center;background:var(--teal);color:#fff;border-radius:24px;padding:clamp(32px,3.6vw,48px) clamp(24px,4vw,46px);position:relative;overflow:hidden}
/* Soft lime bloom behind the form so the card reads as lit, not pasted on. */
.sv2 .loc-band::before{content:"";position:absolute;z-index:0;top:-30%;right:-12%;width:60%;height:150%;background:radial-gradient(ellipse at center,rgba(213,255,126,.16),transparent 62%);pointer-events:none}
.sv2 .loc-band > *{position:relative;z-index:1}
/* !important needed: core sets color on every .sv2 heading with !important
(escape hatch matches .foot__cta h2). Without it this renders ink-on-teal. */
.sv2 .loc-band h2{font-size:clamp(1.9rem,3.8vw,2.5rem);line-height:1.15;letter-spacing:-.02em;margin:.35em 0 .4em;color:#fff !important;text-wrap:balance}
.sv2 .loc-band p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.6;margin:0;max-width:52ch}
.sv2 .loc-band__a{display:flex;flex-direction:column;gap:12px}
.sv2 .loc-band__a .sbtn{justify-content:center}
.sv2 .loc-band__pts{list-style:none;margin:1.3em 0 0;padding:0;display:grid;gap:9px}
.sv2 .loc-band__pts li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.9)}
.sv2 .loc-band__pts li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--lime)}
.sv2 .loc-band__alt{margin-top:1.4em;font-size:.94rem;color:rgba(255,255,255,.72)}
.sv2 .loc-band__alt a{color:#fff;font-weight:700;border-bottom:1px solid var(--lime)}
.sv2 .loc-band__alt a:hover{color:var(--lime)}
/* The form card is the brightest object on the page. Dark-teal-on-dark-teal
(the previous #024a42 panel on the #013b35 band) gave the single most
important element on the page almost no separation from its background.
White card, lifted -- the eye lands on it before anything else.
The audit-form component ships styled for DARK surfaces (white labels, white
input text, translucent fills), so every field below is re-skinned for light,
scoped to .loc-band__f only. The footer form keeps the dark treatment. */
/* Frosted glass, same family as the .hp-stat strip: saturated blur, a bright
hairline, and an inner top highlight so the panel reads as lit glass rather
than a flat white rectangle. Kept above .8 alpha so form text stays legible. */
.sv2 .loc-band__f{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(22px);-webkit-backdrop-filter:saturate(1.5) blur(22px);border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:clamp(22px,2.6vw,30px);
box-shadow:0 34px 68px -32px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px rgba(1,59,53,.05)}
.sv2 .loc-band__f h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;color:var(--ink) !important;margin:0 0 .9em}
.sv2 .loc-band__f .sv2-af__field label{color:var(--ink)}
/* background-COLOR, never the background shorthand: the shorthand resets
background-repeat to repeat and position to 0 0, which tiled the select's
chevron right across the field. */
.sv2 .loc-band__f .sv2-af__field input,
.sv2 .loc-band__f .sv2-af__field select{background-color:rgba(255,255,255,.62);border-color:rgba(1,59,53,.14);color:var(--ink) !important;box-shadow:0 1px 2px rgba(1,59,53,.04) inset}
.sv2 .loc-band__f .sv2-af__field input::placeholder{color:var(--muted)}
.sv2 .loc-band__f .sv2-af__field input:focus,
.sv2 .loc-band__f .sv2-af__field select:focus{outline:2px solid var(--teal-mid);border-color:var(--teal-mid);background-color:#fff}
/* Chevron is a white stroke in the shared component; restate it in muted ink,
and restate repeat/position defensively so it can never tile again. */
.sv2 .loc-band__f .sv2-af__field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d6b62' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center}
.sv2 .loc-band__f .sv2-af__opt{color:var(--muted);border-color:var(--line)}
/* This rule already existed to re-point the fine print for the light band (left
instead of centred, muted instead of white). It has to restore margin-top and
font-size too, because `.sv2 .loc-band p` at (0,2,1) out-specifies the
component's own `.sv2 .sv2-af__fine` at (0,2,0) and was flattening both: the
note lost its .9em gap entirely (measured 0px from the button, sitting inside
the button's drop shadow) and inflated from 12.5px to 16px.
1.15em clears the submit button's shadow, which is offset 10px downward. */
.sv2 .loc-band__f .sv2-af__fine{color:var(--muted);text-align:left;margin-top:1.15em;font-size:.82rem}
.sv2 .loc-band__f .sv2-af__status{color:var(--teal)}
.sv2 .loc-band__f .sv2-af__status.is-err{color:var(--brand-deep)}
/* Nowrap guard: the label plus its arrow must never break across lines again. */
.sv2 .loc-band__f .sv2-af__submit{white-space:nowrap}
/* --- in-page audit form (live slot 10) --- */
.sv2 .loc-form{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,52px);align-items:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3.6vw,44px)}
.sv2 .loc-form h2{font-size:clamp(1.9rem,3.8vw,2.5rem);line-height:1.15;letter-spacing:-.02em;margin:.35em 0 .5em;text-wrap:balance}
.sv2 .loc-form p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 0 1.3em}
.sv2 .loc-form__pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv2 .loc-form__pts li{position:relative;padding-left:28px;color:var(--ink);font-size:.95rem;line-height:1.5}
.sv2 .loc-form__pts li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--lime)}
/* --- services (same six on every city page) --- */
.sv2 .loc-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sv2 .loc-svc{position:relative;display:flex;flex-direction:column;color:inherit;overflow:hidden}
.sv2 .loc-svc::after{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--lime),var(--lime-deep));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.sv2 .loc-svc:hover::after{transform:scaleX(1)}
.sv2 .loc-svc h3{font-size:1.2rem;font-weight:600;margin-bottom:.4em;color:var(--ink);transition:color .2s ease}
.sv2 .loc-svc:hover h3{color:var(--teal) !important}
.sv2 .loc-svc p{color:var(--muted);font-size:.97rem;line-height:1.6;margin-bottom:1.4em;flex:1}
.sv2 .loc-svc .step__n{display:inline-block;align-self:flex-start;width:auto;height:auto;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--teal) !important;background:var(--lime);border-radius:999px;padding:5px 11px;margin:0 0 14px}
.sv2 .svc__link{margin-top:auto;display:inline-flex;align-items:center;gap:.6em;color:var(--teal);font-weight:700;font-size:.94rem;letter-spacing:-.01em}
.sv2 .svc__ar{display:inline-flex;align-items:center;justify-content:center;width:1.85em;height:1.85em;border-radius:50%;border:1.6px solid var(--teal);background:var(--teal);color:#fff;font-size:.9em;line-height:1;flex:none;box-shadow:0 6px 14px -8px rgba(1,59,53,.6);transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s}
.sv2 .loc-svc:hover .svc__ar{background:var(--lime);border-color:var(--lime);color:#16291b;transform:translateX(4px);box-shadow:0 9px 20px -8px rgba(198,245,98,.8)}
/* --- how it works --- */
.sv2 .step__n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--brand-deep);color:#fff !important;font-weight:700;font-size:.98rem;margin-bottom:16px;box-shadow:0 10px 20px -8px rgba(216,71,39,.55)}
.sv2 .step h3{font-size:1.2rem;font-weight:600;margin-bottom:.45em;color:var(--ink)}
.sv2 .step p{color:var(--muted);font-size:.97rem;line-height:1.6}
/* --- client story --- */
.sv2 .hp-tst{background:var(--teal);color:#fff;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch}
.sv2 .hp-tst__media{position:relative;min-height:340px;background:#0c2c28}
.sv2 .hp-tst__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.sv2 .hp-tst__label{position:absolute;left:18px;bottom:16px;background:rgba(0,0,0,.42);color:#fff;font-size:.8rem;font-weight:600;padding:.4em .8em;border-radius:100px;backdrop-filter:blur(6px)}
.sv2 .hp-tst__body{padding:clamp(30px,4vw,52px)}
.sv2 .hp-tst__stat{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.15em}
.sv2 .hp-tst__statsub{color:rgba(255,255,255,.72);font-size:.98rem;margin-bottom:1.4em}
.sv2 .hp-tst__q{font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.5;font-weight:500;margin-bottom:1.5em}
.sv2 .hp-tst__who{display:flex;align-items:center;gap:14px}
.sv2 .hp-tst__av{width:46px;height:46px;border-radius:50%;background:var(--lime);color:#16291b;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.sv2 .hp-tst__name{font-weight:600}
.sv2 .hp-tst__role{color:rgba(255,255,255,.66);font-size:.86rem}
/* --- nearby cities --- */
.sv2 .loc-panel{position:relative;overflow:hidden;max-width:960px;margin:0 auto;padding:clamp(28px,4vw,44px) clamp(20px,4vw,50px);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.40));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.75);box-shadow:0 26px 54px -34px rgba(20,50,40,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.sv2 .loc-panel::before{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;top:46%;width:840px;height:840px;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle at 50% 50%,transparent 0 21px,rgba(26,134,120,.12) 21px 22.5px);-webkit-mask:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 66%);mask:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 66%);opacity:.9}
.sv2 .loc-panel>*{position:relative;z-index:1}
.sv2 .loc-group__h{display:flex;align-items:center;justify-content:center;gap:11px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.sv2 .loc-group__pin{width:14px;height:14px;flex:none;stroke:var(--teal-mid);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sv2 .loc-group__h::before,.sv2 .loc-group__h::after{content:"";height:1px;width:clamp(36px,11vw,130px);background:linear-gradient(90deg,transparent,var(--line))}
.sv2 .loc-group__h::after{background:linear-gradient(90deg,var(--line),transparent)}
.sv2 .loc-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sv2 .loc-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;background:var(--white);border:1px solid var(--line);border-radius:11px;color:var(--ink);font-weight:600;font-size:.94rem;line-height:1;letter-spacing:-.01em;transition:border-color .16s,transform .16s,box-shadow .16s,background .16s}
.sv2 .loc-pill:hover{border-color:var(--teal-mid);background:#f3f9f7;transform:translateY(-2px);box-shadow:0 12px 22px -15px rgba(20,60,50,.4)}
.sv2 .loc-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal-mid);flex:none;box-shadow:0 0 0 3px rgba(26,134,120,.14)}
/* --- faq + section cta --- */
.sv2 .faq{max-width:760px;margin:0 auto}
.sv2 .faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .16s}
.sv2 .faq details[open]{border-color:var(--teal-mid)}
.sv2 .faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:1.04rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}
.sv2 .faq summary::-webkit-details-marker{display:none}
.sv2 .faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--teal-label);transition:transform .2s;flex:none;line-height:1}
.sv2 .faq details[open] summary::after{transform:rotate(45deg)}
.sv2 .faq__a{padding:0 22px 20px;color:var(--muted);font-size:1rem;line-height:1.65}
.sv2 .sec-cta{text-align:center;margin-top:clamp(24px,3vw,34px)}
.sv2 .sec-cta a{color:var(--brand-deep);font-weight:600;font-size:.98rem}
@media(max-width:860px){
/* Result strip breakpoints, same as the homepage. */
.sv2 .hp-stat__grid{grid-template-columns:1fr 1fr;gap:8px}
.sv2 .hp-stat__c::after{display:none}
.sv2 .loc-svcs{grid-template-columns:1fr 1fr}
/* 3-up would be ~210px per card here, too narrow for a heading plus body. */
.sv2 .loc-steps{grid-template-columns:1fr 1fr}
/* Three testimonial cards in a 2-up grid strand the third alone on row two. A
3-item set needs 3 columns or 1, never 2; 3 columns is too narrow for a quote
at this width, so it collapses straight to 1. */
.sv2 .loc-quotes{grid-template-columns:1fr}
/* Hero stacks: H1 block first, entity panel under it. */
.sv2 .loc-hero__grid{grid-template-columns:1fr;gap:26px}
.sv2 .loc-ent{max-width:520px}
/* Copy-beside-image stacks with the image ALWAYS below the copy, including
the reversed variant -- otherwise the reversed section leads with a
decorative image and pushes the headline off the first screen. */
.sv2 .loc-med{grid-template-columns:1fr;gap:26px}
.sv2 .loc-med--rev .loc-med__t,
.sv2 .loc-med--rev .loc-med__m{order:0}
.sv2 .loc-band{grid-template-columns:1fr;gap:24px}
.sv2 .loc-band__a{flex-direction:row;flex-wrap:wrap}
.sv2 .loc-band__a .sbtn{flex:1 1 200px}
.sv2 .loc-form{grid-template-columns:1fr}
.sv2 .hp-tst{grid-template-columns:1fr}
.sv2 .hp-tst__media{min-height:220px}
}
@media(max-width:600px){
.sv2 .mbr{display:block}
.sv2 .loc-hero .hero__inner{text-align:center}
.sv2 .loc-crumb ol{justify-content:center}
.sv2 .loc-hero .hero__sub{margin-left:auto;margin-right:auto}
.sv2 .loc-hero .hero__cta{flex-direction:column;align-items:center;gap:12px}
.sv2 .loc-hero .hero__cta .sbtn{width:100%;max-width:340px;justify-content:center}
/* Breadcrumb and "view all" are inline text links, so their hit area is only
as tall as the line box (20-22px measured at 375px) -- under the 24px WCAG
2.5.8 floor and well under the 44px both Apple and Android call practical.
Pad the hit area and pull the padding back out of flow so nothing moves. */
.sv2 .loc-crumb a,
.sv2 .sec-cta a{display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
/* Market section stacks: copy first, artifact under it. */
.sv2 .loc-market{padding:26px 20px;border-radius:20px}
.sv2 .loc-market__grid{grid-template-columns:1fr;gap:30px}
.sv2 .loc-market__viz::before{width:min(460px,150%)}
.sv2 .loc-market h3{font-size:1.45rem}
/* Chips go single-column at phone width. The comment here already said that,
but the rule set TWO max-content columns -- and max-content cannot shrink, so
a chip longer than half the measure ran past the viewport edge and got clipped
("seo audit near me" reached 423px in a 375px viewport). Location chips were
short enough to hide it; longer service-page queries were not.
minmax(0,max-content) lets the column shrink, and normal wrapping inside the
pill means no query length can overflow. Short chips still sit on one line, so
nothing changes visually where it already worked. */
.sv2 .loc-q{grid-template-columns:minmax(0,max-content);gap:8px}
.sv2 .loc-q span{white-space:normal}
.sv2 .loc-market__copy .sbtn{width:100%;max-width:340px;justify-content:center}
.sv2 .mpk{max-width:none}
.sv2 .loc-svcs{grid-template-columns:1fr;gap:12px}
/* New live-parity blocks, single column on phones. The why-us 4th-card
centring rule has to be unset or it strands one card at half width. */
.sv2 .loc-steps{grid-template-columns:1fr;gap:12px}
.sv2 .loc-quotes{grid-template-columns:1fr;gap:12px}
.sv2 .loc-quote{padding:20px 18px 18px}
/* 62px right reserve, measured: at 46px the quote text ran to x=290 while the
62px emblem box starts at x=278 on a 335px card -- a 13px overlap. */
.sv2 .loc-quote blockquote{font-size:1rem;padding:0 62px 0 18px}
.sv2 .loc-quotes__lab{margin:26px 0 2px}
/* Result strip: one column so each result + label sits on a single line. */
.sv2 .hp-stat__grid{grid-template-columns:1fr;gap:0}
.sv2 .hp-stat__c{padding:14px 12px}
.sv2 .hp-stat__c:not(:last-child){border-bottom:1px solid rgba(20,50,40,.10)}
.sv2 .hp-stat__big,.sv2 .hp-stat__lab{white-space:nowrap}
.sv2 .hp-stat__lab{font-size:.86rem}
.sv2 .hp-stat__logo{height:34px}
.sv2 .hp-stat__logo img{max-height:34px}
.sv2 .loc-ent{max-width:none}
.sv2 .loc-ent__map{height:160px}
.sv2 .loc-ent__btns .sbtn{flex:1 1 100%}
.sv2 .loc-med__m img{border-radius:16px}
.sv2 .loc-band__f{padding:18px 16px}
.sv2 .loc-rate{flex-wrap:wrap;gap:8px}
/* FAQ: tighter gutters and a shallower answer indent at phone width. */
.sv2 .faq.faq--num summary{grid-template-columns:26px 1fr 20px;gap:11px;padding:16px}
.sv2 .faq.faq--num .faq__n{width:26px;height:26px;font-size:.72rem}
.sv2 .faq.faq--num .faq__qt{font-size:1rem}
.sv2 .faq.faq--num .faq__a{padding:0 16px 16px 53px;font-size:.96rem}
.sv2 .faq.faq--num .faq__lead{font-size:.99rem;padding-top:12px;margin-bottom:.95em}
.sv2 .faq.faq--num .faq__pts li{font-size:.92rem}
.sv2 .loc-proof__in{padding:22px 18px;border-radius:18px}
.sv2 .loc-proof__b .sbtn{width:100%;justify-content:center}
/* The hard
s in headings are desktop line-break art direction. At phone
width they stack ON TOP of natural wrapping and produce ragged 3-4 line
headings ("Everything Kailua needs / to get found and / chosen"). Hide
them here and let text-wrap:balance split the lines evenly instead. */
/* H2 only: the H1's break ("{City} SEO services" / "senior-led...") is the
right split at every width; balancing it instead orphaned "services". */
.sv2 main h2 br{display:none}
.sv2 main h1,.sv2 main h2{text-wrap:balance}
/* Clamp floor (1.9rem) was sized for desktop rhythm; at 375px it pushes the
longer headings to 4 lines. One step down keeps every H2 at 2-3 lines.
Three-class selector: has to outrank both the per-block clamps here and
core's .sec-head clamp, which are all (0,2,1) and load after this file. */
.sv2 .sec .wrap h2{font-size:1.72rem}
/* The highlighter marker carries horizontal padding, so at 375 the H1's last
line ran ~4px past the wrap. Shrink the hero type a step rather than
trimming the marker, which is the brand element. */
.sv2 .loc-hero .hero__h1{font-size:clamp(1.85rem,8.2vw,2.6rem)}
/* Standalone phone and "learn more" links: line-box height only, so pad the
hit area out to 44px without shifting the layout around them. */
.sv2 .loc-ent__tel,
.sv2 .loc-band__alt a{padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}
.sv2 .loc-ent__tel{margin-top:-2px}
.sv2 .loc-step{padding:20px 18px 18px}
.sv2 .loc-band{grid-template-columns:1fr;gap:22px;padding:28px 20px;text-align:center;border-radius:18px}
.sv2 .loc-band p{margin-left:auto;margin-right:auto}
.sv2 .loc-band__a .sbtn{width:100%}
.sv2 .loc-form{grid-template-columns:1fr;gap:26px;padding:24px 18px;border-radius:18px}
.sv2 .loc-pill{padding:13px 16px}
.sv2 .hp-tst__body{text-align:center;padding:30px 18px 30px}
.sv2 .hp-tst__statsub{font-size:.95rem;line-height:1.5;margin:0 0 1.9em}
.sv2 .hp-tst__q{font-size:1.05rem;line-height:1.5;margin:0 0 1.3em;text-wrap:balance}
.sv2 .hp-tst__who{flex-direction:column;align-items:center;gap:10px;text-align:center}
}