/*
Theme Name: Sohaib Wasif
Description: Website for Sohaib Wasif, built by EZ-AD TV. Edit your pages under Pages in the dashboard.
Author: EZ-AD TV
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:20}.navrow{display:flex;align-items:center;gap:22px;padding:16px 24px;max-width:1080px;margin:0 auto}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em;display:inline-flex}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.lmark{display:inline-flex}.lname{white-space:nowrap}
.brandimg{max-height:46px;width:auto;display:block}
.brandimg-dark{background:var(--ink);border-radius:10px;padding:7px 12px;display:inline-flex;align-items:center}
.brandimg-dark .brandimg{max-height:34px}
.logo.stack{flex-direction:column;gap:2px}.logo.stack .lname{font-size:13px;letter-spacing:.01em}
.svc-hero{padding:44px 0 8px}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
.svc-himg{margin:0}.svc-himg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 24px 60px -22px rgba(0,0,0,.3);border:1px solid var(--line)}
.svc-ticks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc-tick{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--a)}
.svc-cols{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start}
.svc-aside{position:sticky;top:86px;display:grid;gap:16px}
.aside-card{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.aside-card h4{margin:0 0 6px;font-size:16px}.aside-card p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.aside-btn{display:block;text-align:center;margin-bottom:10px}
.aside-btn.ghost{background:transparent;border:1.5px solid var(--a);color:var(--a)}
.aside-meta{font-size:13px;color:var(--muted);margin-top:8px}
.aside-list a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.aside-list a:last-child{border-bottom:0}.aside-list a:hover{color:var(--a)}
@media(max-width:900px){.svc-hero-grid,.svc-cols{grid-template-columns:1fr}.svc-aside{position:static}}
.mono{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;font-weight:800;font-size:14px}
.links{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-weight:700;font-size:15px;cursor:pointer;transition:.18s;text-align:center}
.btn:hover{transform:translateY(-1px)}.hero-in{text-align:center;position:relative;z-index:1}
.eyebrow{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--a)}
.hero h1{font-size:clamp(38px,6vw,66px);line-height:1.03;margin:.2em 0;letter-spacing:-.02em}
.lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:640px;margin:14px auto 26px}
.stars{margin-top:22px;color:var(--a);font-size:15px;letter-spacing:2px}.stars span{color:var(--muted);letter-spacing:0;font-size:13.5px;margin-left:8px}
.hero-in.lay-left{text-align:left}.hero-in.lay-left .lede{margin-left:0}.hero-in.lay-left .btns{justify-content:flex-start}.hero-in.lay-left .hero h1{margin-left:0}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.hero-txt{text-align:left}.hero-txt .lede{margin-left:0;margin-right:0}.hero-txt .btns{justify-content:flex-start}
.hero-side{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(10,14,26,.5)}
.hero-side img{width:100%;height:380px;object-fit:cover;display:block}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-side img{height:240px}}
.hero.has-img{position:relative}.hero.has-img:after{display:none}
.hero.has-img h1,.hero.has-img .eyebrow{color:#fff!important}.hero.has-img .lede,.hero.has-img .stars,.hero.has-img .stars span{color:rgba(255,255,255,.9)!important}
.hero.has-img .btn-s{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.65)!important}
.trustrow{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center}.tb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.tick{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--a);color:#fff;font-size:11px;font-weight:900}
.block{padding:74px 0}.sec-head,.center{text-align:center}.sub2{color:var(--muted);max-width:560px;margin:8px auto 0}
h2{font-size:clamp(28px,3.6vw,38px);letter-spacing:-.02em;margin:0 0 8px}.block .sec-head{margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
.card h3{margin:.5em 0 .35em;font-size:19px;letter-spacing:-.01em}.card p{margin:0;color:var(--muted);font-size:14.5px}
.num{font-size:12px;font-weight:800;color:var(--a);letter-spacing:2px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feat h3{font-size:16px;margin:14px 0 6px}.feat p{margin:0;color:var(--muted);font-size:13.5px}
.ficon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--a)}
.center{margin-top:34px}.page-head{text-align:center}.narrow{max-width:720px}.prose{font-size:19px;color:var(--muted);line-height:1.75}
.info,.contact{margin-top:26px}.kv,.crow{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.kv b,.crow b{min-width:130px;font-size:14px}.kv span,.crow span{color:var(--muted)}.crow:hover b{color:var(--a)}.note{color:var(--muted);margin-top:18px;font-size:14.5px}
.cta{text-align:center;padding:80px 0}.cta h2{color:#fff}.cta p{color:rgba(255,255,255,.85);margin:10px 0 26px}
.faq{max-width:760px;margin:0 auto}.faq-item{padding:18px 0;border-bottom:1px solid var(--line)}.faq-item h3{margin:0 0 6px;font-size:17px}.faq-item p{margin:0;color:var(--muted)}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.price-card{border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;background:#fff}
.price{font-size:34px;font-weight:800;color:var(--a);margin:6px 0 4px}.price-card ul{list-style:none;padding:0;margin:16px 0 20px}.price-card li{padding:8px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.gtile{position:relative;aspect-ratio:4/3;border-radius:14px;background-size:cover;background-position:center;display:flex;align-items:flex-end;overflow:hidden;margin:0}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gtile figcaption{position:relative;z-index:1}
.card-more{display:block;margin-top:12px;font-size:13px;font-weight:700;color:var(--a)}
.card.has-img{padding:0;overflow:hidden}.card-img{width:100%;height:150px;object-fit:cover;display:block}
.card.has-img .card-in{padding:20px 22px 24px}
.svc-banner{margin:34px 0 0;border-radius:18px;overflow:hidden}.svc-banner img{width:100%;height:320px;object-fit:cover;display:block}
.svc-mid{margin:26px 0 0;border-radius:14px;overflow:hidden}.svc-mid img{width:100%;height:260px;object-fit:cover;display:block}
.related{color:var(--muted);font-size:14px;line-height:2}.related b{color:var(--ink);margin-right:8px}
.tag-link{display:inline-block;margin:0 6px 6px 0;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}.tag-link:hover{color:var(--a);border-color:var(--a)}
.gtile figcaption{background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;padding:12px;width:100%;font-size:13.5px;font-weight:600}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}.qcard{border:1px solid var(--line);border-radius:16px;padding:26px;margin:0;background:#fff}.qcard p{font-size:16px;line-height:1.6;margin:0 0 12px}.qcard cite{color:var(--a);font-weight:700;font-style:normal;font-size:14px}
.foot{padding:36px 0;font-size:13.5px}
.statband{padding:58px 0;background:var(--soft)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat b{display:block;font-size:clamp(32px,4.5vw,50px);font-family:var(--head);color:var(--a);letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;padding:26px;border:1px solid var(--line);border-radius:16px}
.snum{width:44px;height:44px;border-radius:50%;background:var(--a);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;margin-bottom:14px}
.step h3{margin:0 0 6px;font-size:17px}.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pstrip img{width:100%;height:230px;object-fit:cover;border-radius:14px;display:block}
.cta-tel{display:block;margin-top:18px;font-size:clamp(18px,2.6vw,24px);font-weight:800;color:#fff}
.cta-tel:hover{text-decoration:underline;text-underline-offset:4px}
.bigfoot{padding:56px 0 26px;border-top:1px solid var(--line)}
.fgrid4{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.3fr;gap:34px}
.fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 14px;opacity:.55}
.fcol a,.fcol p,.fcol div{display:block;font-size:14px;color:inherit;opacity:.78;margin:0 0 9px;line-height:1.55}
.fcol a:hover{opacity:1;color:var(--a)}
.fbrand .brand{margin-bottom:12px}.frep{color:var(--a)!important;opacity:1!important;font-weight:700}
.fbot{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;opacity:.65;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:820px){.statrow{grid-template-columns:1fr 1fr;gap:26px 12px}.steps{grid-template-columns:1fr}.pstrip{grid-template-columns:1fr}.pstrip img{height:200px}.fgrid4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid4{grid-template-columns:1fr}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(30px,-24px) rotate(8deg)}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.hero .eyebrow{animation:fadeUp .6s .05s both}.hero h1{animation:fadeUp .7s .16s both}
.hero .lede{animation:fadeUp .7s .3s both}.hero .btns{animation:fadeUp .7s .44s both}
.hero .stars{animation:fadeUp .7s .58s both}.hero-side{animation:fadeUp .8s .34s both}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media print{.reveal{opacity:1!important;transform:none!important}.mcall{display:none!important}}
.qstars{color:var(--a);letter-spacing:2px;font-size:14px;margin-bottom:10px}
.center-tags{text-align:center}.center-tags .tag-link{font-size:14.5px;padding:8px 18px;margin:0 5px 10px}
.contact-cols{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.lform{display:flex;flex-direction:column;gap:12px}.lrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lform input,.lform textarea{padding:13px 15px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--ink);width:100%}
.lform input:focus,.lform textarea:focus{outline:2px solid var(--a);outline-offset:0;border-color:var(--a)}
.lform button{border:none}.lnote{color:var(--a);font-weight:700;font-size:14.5px}
.gmap{margin:44px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}.gmap iframe{width:100%;height:340px;border:0;display:block}
.mcall{display:none}
@media(max-width:820px){.navrow{flex-wrap:wrap;gap:12px 20px;justify-content:center}.links{width:100%;order:3;margin-left:0;justify-content:center;gap:20px;font-size:14px}
.fgrid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.block{padding:52px 0}.hero{padding-top:72px!important;padding-bottom:56px!important}
.contact-cols{grid-template-columns:1fr}.lrow{grid-template-columns:1fr}
.mcall{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;gap:1px;box-shadow:0 -8px 24px rgba(10,14,26,.18)}
.mcall-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--a);color:#fff;font-weight:800;font-size:16px}
.mcall-dir{display:flex;align-items:center;justify-content:center;padding:16px 22px;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px}
body:has(.mcall){padding-bottom:56px}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}.trustrow{gap:8px 18px}}
/* ---- structural variants: video hero, service rows/list/tiles, footers, service pages ---- */
.hero.has-video{position:relative;overflow:hidden;color:#fff}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-vover{position:absolute;inset:0;background:linear-gradient(rgba(8,10,20,.6),rgba(8,10,20,.5));z-index:0}
.hero.has-video .wrap{position:relative;z-index:1}.hero.has-video .lede{color:#eef}
.hero-side-v{width:100%;height:380px;object-fit:cover;display:block;border-radius:22px}
.hero.has-carousel{position:relative;overflow:hidden;color:#fff;min-height:72vh;display:flex;align-items:center}
.hero-carousel{position:absolute;inset:0;z-index:0}
.hcslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.hcslide.on{opacity:1}
.hero.has-carousel .wrap{position:relative;z-index:1}
.hero.hero-cover{padding:150px 0 120px}.hero.hero-cover h1{font-size:clamp(44px,7vw,76px)}
.hero.hero-min{padding:88px 0 54px;border-bottom:1px solid var(--line);background:var(--bg)}
.hero.hero-min h1{font-size:clamp(34px,5vw,54px)}.hero.hero-min .stars{display:none}
.srows{display:flex;flex-direction:column;gap:30px;margin-top:26px}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.srow.rev{direction:rtl}.srow.rev>*{direction:ltr}
.srow-img{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(10,14,26,.5)}
.srow-img img{width:100%;height:300px;object-fit:cover;display:block}
.srow-noimg{display:grid;place-items:center;height:220px;background:linear-gradient(135deg,var(--a),var(--ink));color:#fff;font-size:60px;font-weight:800;opacity:.92}
.srow-txt .num{color:var(--a);font-weight:800;letter-spacing:.1em}
.srow-txt h3{font-size:26px;margin:6px 0 8px;letter-spacing:-.01em}
.srow-txt p{color:var(--muted);font-size:16px}
.srow-txt .card-more{display:inline-block;margin-top:12px;color:var(--a);font-weight:700}
.slist{margin-top:22px;border-top:1px solid var(--line)}
.slist-item{display:flex;align-items:center;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);transition:.15s;color:inherit}
.slist-item:hover{padding-left:14px;background:var(--soft)}
.slist-num{font-size:22px;font-weight:800;color:var(--a);opacity:.5;flex:none;width:44px}
.slist-body{flex:1}.slist-body h3{font-size:20px;margin:0 0 3px}.slist-body p{color:var(--muted);margin:0}
.slist-arrow{font-size:22px;color:var(--a);flex:none}
.grid.tiles{grid-template-columns:repeat(4,1fr);gap:14px}
.grid.tiles .card{border-radius:14px}.grid.tiles .card-img{height:120px}
.grid.tiles h3{font-size:16px}.grid.tiles p{font-size:13px}.grid.tiles .card-more{display:none}
.foot-simple .footsimple{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0}
.foot-simple .fs-links{display:flex;gap:18px;flex-wrap:wrap}.foot-simple .fs-links a{color:inherit;opacity:.85;font-size:14px}
.foot-simple .fs-copy{opacity:.7;font-size:13px}
.foot-simple .socials{margin-top:0}.foot-simple .soc{width:30px;height:30px}
.foot-centered .footcenter{text-align:center;padding:44px 0}
.foot-centered .fc-blurb{max-width:520px;margin:12px auto;opacity:.85}
.foot-centered .fc-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:16px 0}.foot-centered .fc-links a{color:inherit;opacity:.85}
.foot-centered .fc-contact{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:.8;font-size:14px;margin-bottom:10px}.foot-centered .fc-contact a{color:inherit}
.foot-centered .fbot{border:none;justify-content:center}
.svc-hero.cover{background-size:cover;background-position:center;color:#fff;padding:120px 0 84px;text-align:center}
.svc-hero.cover .lede{color:#eef;margin-left:auto;margin-right:auto}.svc-hero.cover .svc-ticks{justify-content:center}.svc-hero.cover .eyebrow{color:#fff;opacity:.85}
/* ---- extra hero variants: split media, photo-left, banner, gradient, boxed, stats ---- */
.hero-fig{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(10,14,26,.5)}
.hero-fig img,.hero-fig video,.hero-media{width:100%;height:390px;object-fit:cover;display:block}
.hero-fig .hero-noimg{height:390px;background:linear-gradient(135deg,var(--a),var(--ink));opacity:.9}
.hero-split.hero-rev .hero-grid{direction:rtl}.hero-split.hero-rev .hero-grid>*{direction:ltr}
.hero.hero-banner{padding:0;min-height:74vh;display:flex;align-items:flex-end}
/* keep .wrap's 24px gutter and centring: zeroing them pinned the headline to
   the very left edge of the viewport on wide screens */
.hero.hero-banner .hero-in{text-align:left;padding:0 24px 62px;max-width:1080px;margin:0 auto}
.hero.hero-banner .hero-in>*{max-width:780px}
.hero.hero-banner .lede{margin-left:0}.hero.hero-banner .btns{justify-content:flex-start}
.hero.hero-grad{background:linear-gradient(135deg,var(--a),var(--ink));color:#fff;padding:132px 0 98px}
.hero.hero-grad h1,.hero.hero-grad .eyebrow{color:#fff}.hero.hero-grad .lede{color:rgba(255,255,255,.92)}
.hero.hero-grad .stars,.hero.hero-grad .stars span{color:rgba(255,255,255,.92)}
.hero.hero-grad .btn-s{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.6)}
.hero.hero-boxed{background:var(--soft);padding:92px 0}
.hero-boxed .hero-card{background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:56px 48px;max-width:820px;margin:0 auto;box-shadow:0 46px 100px -55px rgba(10,14,26,.55)}
.hero-stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.hero.has-img .hero-stats{border-color:rgba(255,255,255,.3)}
.hero-stats>div{text-align:center}.hero-stats b{display:block;font-size:30px;font-weight:800;color:var(--a);line-height:1}
.hero.has-img .hero-stats b{color:#fff}
.hero-stats span{font-size:13px;color:var(--muted);letter-spacing:.02em}.hero.has-img .hero-stats span{color:rgba(255,255,255,.85)}
/* ---- extra service layouts: cards2, split, carousel, compact, accordion ---- */
.grid.cards2{grid-template-columns:repeat(2,1fr);gap:26px}
.grid.cards2 .card-img{height:230px}.grid.cards2 h3{font-size:23px}
.ssplit{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;margin-top:6px}
.ssplit-head{position:sticky;top:96px;text-align:left}.ssplit-head h2{margin-top:6px}
.ssplit-head .sub2{margin:10px 0 20px}.ssplit-head .btn{margin-top:4px}
.ssplit-list .slist{margin-top:0;border-top:none}
.scarousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,320px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 2px 22px;margin-top:14px;-webkit-overflow-scrolling:touch}
.scarousel .card{scroll-snap-align:start}
/* A card sliced by the right edge reads as a broken grid, not as "there is
   more to scroll". Fade the edge and leave room after the last card so the
   cut looks deliberate. */
.scarousel{scroll-padding-inline:2px;padding-right:26px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15));
  mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15))}
.scarousel:after{content:"";flex:none;width:2px}
.scarousel::-webkit-scrollbar{height:8px}.scarousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.scompact{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.scomp{background:var(--bg);padding:26px 24px;transition:.15s;color:inherit}
.scomp:hover{background:var(--soft)}.scomp h3{font-size:18px;margin:0 0 6px}.scomp p{color:var(--muted);margin:0;font-size:14.5px}
.sacc{margin-top:18px;border-top:1px solid var(--line)}
.sacc-item{border-bottom:1px solid var(--line)}
.sacc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 4px;font-weight:700;font-size:19px}
.sacc-item summary::-webkit-details-marker{display:none}
.sacc-n{color:var(--a);font-weight:800;opacity:.55;font-size:16px}
.sacc-x{margin-left:auto;color:var(--a);font-size:24px;font-weight:400;transition:.2s}
.sacc-item[open] .sacc-x{transform:rotate(45deg)}
.sacc-body{padding:0 4px 22px 44px}.sacc-body p{color:var(--muted);margin:0 0 8px}
.sacc-body .card-more{color:var(--a);font-weight:700}
/* ---- extra service-page variants: band, mini, split, magazine ---- */
.svc-hero.band{background:linear-gradient(135deg,var(--a),var(--ink));color:#fff;padding:96px 0 72px}
.svc-hero.band h1,.svc-hero.band .eyebrow{color:#fff}.svc-hero.band .lede{color:rgba(255,255,255,.92)}
/* on any dark service hero the pills need a translucent fill, otherwise the
   base light background stays and white text becomes invisible */
.svc-hero.band .svc-tick,.svc-hero.cover .svc-tick{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.45)}
.svc-hero.mini{padding:76px 0 40px;border-bottom:1px solid var(--line)}
.svc-split{display:grid;grid-template-columns:1.4fr .9fr;gap:44px;align-items:start}
.svc-splitside{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.svc-splitimg{margin:0;border-radius:18px;overflow:hidden}.svc-splitimg img{width:100%;height:240px;object-fit:cover;display:block}
.svc-mag>p:first-of-type::first-letter{float:left;font-size:66px;line-height:.8;font-weight:800;color:var(--a);padding:6px 12px 0 0}
.svc-mag .prose{font-size:17.5px}
/* ---- extra footers: split, stacked, mega, cta ---- */
.foot-split .footsplit{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:52px 0 26px}
.foot-split .fsp-brand p{opacity:.85;max-width:380px;margin:12px 0}
.foot-split .fsp-contact{display:flex;flex-direction:column;gap:4px;margin-top:12px;opacity:.85;font-size:14px}.foot-split .fsp-contact a{color:inherit}
.foot-split .fsp-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.foot-split .fbot{padding-top:20px;border-top:1px solid var(--line)}
.foot-stacked .footstack{text-align:center;padding:56px 0 30px}
.foot-stacked .brand.big{font-size:34px}
.foot-stacked .fst-blurb{max-width:540px;margin:14px auto 20px;opacity:.85}
.foot-stacked .fst-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}.foot-stacked .fst-links a{color:inherit;opacity:.85}
.foot-stacked .fst-contact{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;opacity:.8;font-size:14px;margin-bottom:12px}.foot-stacked .fst-contact a{color:inherit}
.foot-stacked .fbot{border:none;justify-content:center}
.foot-mega .fmega-top{padding:44px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.foot-mega .fmega-top .brand{font-size:26px}.foot-mega .fmega-top p{opacity:.82;max-width:520px;margin:10px 0 0}
.foot-mega .fmega-contact a,.foot-mega .fmega-contact div{display:block}
.foot-cta{background:linear-gradient(135deg,var(--a),var(--ink));color:#fff;text-align:center;padding:66px 0}
.foot-cta h2{color:#fff;font-size:clamp(28px,4vw,40px)}.foot-cta p{color:rgba(255,255,255,.9);margin:10px 0 22px}
.foot-cta .btn-p{background:#fff;color:var(--ink)}.foot-cta .btn-s{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.6)}
.foot-dark{background:#12131a;color:#e9e9f2;border-top:none}
.foot-dark .brand{color:#fff}.foot-dark .fcol h4{color:#fff;opacity:.7}
.foot-dark .fbot{border-top:1px solid rgba(255,255,255,.14)}
.foot-dark .fcol a:hover{color:#fff}
.foot-compact .footcompact{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;padding:44px 0 24px;align-items:start}
.foot-compact .fcp-contact{display:flex;flex-direction:column;gap:4px;margin-top:12px;opacity:.82;font-size:14px}.foot-compact .fcp-contact a{color:inherit}
.foot-compact .fcp-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc-duo{max-width:940px;column-count:2;column-gap:46px}
.svc-duo .prose{break-inside:avoid;margin-top:0}
.svc-duo .prose:first-of-type::first-letter{font-size:46px;line-height:.85;font-weight:800;color:var(--a);padding:2px 8px 0 0;float:left}
.svc-centered{text-align:center}.svc-centered .svc-mid{margin-left:auto;margin-right:auto}
.svc-hero.mini.center-h{text-align:center}.svc-hero.mini.center-h .svc-ticks{justify-content:center}
/* ---- announcement bar + social icons ---- */
.announce{background:var(--a);color:#fff;text-align:center;font-size:14px;font-weight:600;letter-spacing:.01em}
.announce .wrap{padding:9px 24px}.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ---- grouped dropdown nav + imported rich pages ---- */
.links .ndrop{position:relative;display:inline-flex;align-items:center}
.ndrop-t{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px}
.ndrop-t:after{content:"\25be";font-size:.72em;opacity:.6}
.ndrop-m{position:absolute;top:100%;left:0;margin-top:8px;min-width:190px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -24px rgba(10,14,26,.45);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.ndrop:hover .ndrop-m,.ndrop:focus-within .ndrop-m{display:flex}
.ndrop-m a{padding:8px 12px;border-radius:8px;white-space:nowrap;color:var(--ink);opacity:.85;font-size:14.5px}
.ndrop-m a:hover{background:var(--soft);opacity:1;color:var(--a)}
.rich .rich-img{margin:26px 0;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(10,14,26,.4)}
.rich .rich-img.lead{margin-top:0}
.rich .rich-img img{width:100%;height:auto;display:block}
/* imported pages: alternating text/image rows instead of a centered stack */
.rrow{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.rrow-txt .prose:first-child{margin-top:0}
.rrow-img{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 26px 55px -32px rgba(10,14,26,.45)}
.rrow-img img{width:100%;height:340px;object-fit:cover;display:block}
.rrow-img.wide img{height:420px}
@media(max-width:820px){.rrow{grid-template-columns:1fr;gap:24px}.rrow-img img{height:230px}}
/* ---- block engine: structure-preserving section blocks ---- */
.blk{padding:50px 0}
.blk .wrap.narrow{max-width:820px}
.blk-h{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.02em;margin:0 0 12px}
.blk-t{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 0 12px}
.blk .btns{margin-top:18px}
.ondark,.ondark .blk-h,.ondark .eyebrow{color:#fff !important}
.ondark .blk-t{color:rgba(255,255,255,.92) !important}
.ondark .btn-p{background:#fff;color:var(--ink)}
.ondark .btn-s{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.6)}
.hero-blk{padding:120px 0;text-align:center}
.hero-blk h1.blk-h{font-size:clamp(38px,6vw,66px);margin:.1em auto .25em}
.hero-blk .blk-in .btns{justify-content:center;display:flex}
.band-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.band-grid.rev{direction:rtl}.band-grid.rev>*{direction:ltr}
.band-img{margin:0;border-radius:18px;overflow:hidden}
.band-img img{width:100%;height:330px;object-fit:cover;display:block}
.band-solo{text-align:center}.band-solo .blk-t{margin-left:auto;margin-right:auto}.band-solo .btns{justify-content:center;display:flex}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feat-img{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(10,14,26,.4)}
.feat-img img{width:100%;height:350px;object-fit:cover;display:block}
.cards-blk .sec-head{text-align:center;margin-bottom:8px}
.bcards{display:grid;gap:24px;margin-top:24px}
.bcards.cols-3{grid-template-columns:repeat(3,1fr)}.bcards.cols-4{grid-template-columns:repeat(4,1fr)}
.bcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);transition:.15s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(10,14,26,.4)}
.bcard-img img{width:100%;height:190px;object-fit:cover;display:block}
.bcard-b{padding:20px}.bcard-b h3{margin:0 0 6px;font-size:19px}.bcard-b p{margin:0 0 10px;color:var(--muted);font-size:14.5px}
.bcard-b .card-more{color:var(--a);font-weight:700}
.cta-blk{text-align:center}
.media-blk .media-img{margin:0;border-radius:18px;overflow:hidden}
.media-blk .media-img img{width:100%;height:auto;display:block}
.media-blk figcaption{padding:12px;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:820px){.band-grid,.band-grid.rev,.feat-grid{grid-template-columns:1fr;direction:ltr}
.bcards.cols-3,.bcards.cols-4{grid-template-columns:1fr}.band-img img,.feat-img img{height:240px}.hero-blk{padding:88px 0}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:2147481000;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}.wa-float svg{width:30px;height:30px}
body:has(.mcall) .wa-float{bottom:70px}
.site-map iframe{width:100%;height:340px;border:0;display:block}
.ghd{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.ghd-tile{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.ghd-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ghd-tile:hover img{transform:scale(1.05)}
@media(max-width:820px){.ghd{grid-template-columns:1fr 1fr}}
/* ---- mobile-first polish for the newer components ---- */
@media(max-width:600px){
.hero.has-carousel{min-height:52vh}
.hero-blk{padding:60px 0}.hero-blk h1.blk-h{font-size:clamp(28px,8vw,40px)}
.blk{padding:40px 0}.blk-h{font-size:clamp(23px,6vw,32px)}
.ndrop-m{right:auto;left:0;max-width:86vw}
.ghd{grid-template-columns:1fr}
.wa-float{width:52px;height:52px;right:14px;bottom:14px}
.bcards.cols-3,.bcards.cols-4{grid-template-columns:1fr}
.svc-ticks{gap:6px}.svc-tick{font-size:12.5px}
.statrow,.statrow.cols-3,.statrow.cols-4{grid-template-columns:1fr 1fr}
h1{font-size:clamp(30px,8vw,44px) !important}
}
.socials{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.soc{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--a);transition:.15s}
.soc:hover{background:var(--a);color:#fff;transform:translateY(-2px)}
.foot-dark .soc{background:rgba(255,255,255,.1);color:#fff}.foot-dark .soc:hover{background:var(--a)}
.foot-centered .socials,.foot-stacked .socials{justify-content:center}
@media(max-width:820px){.srow,.srow.rev{grid-template-columns:1fr;direction:ltr}.srow-img img{height:220px}.grid.tiles{grid-template-columns:repeat(2,1fr)}
.ssplit{grid-template-columns:1fr}.ssplit-head{position:static}.svc-split{grid-template-columns:1fr}.svc-splitside{position:static}
.grid.cards2{grid-template-columns:1fr}.scompact{grid-template-columns:1fr}.foot-split .footsplit{grid-template-columns:1fr}.hero-boxed .hero-card{padding:38px 26px}
.svc-duo{column-count:1}.foot-compact .footcompact{grid-template-columns:1fr}.foot-compact .fcp-links{grid-template-columns:1fr 1fr}}

/* ---- editorial sections -------------------------------------------------
   Everything above puts its content inside .wrap, a centred 1080px column, so
   however the colours change the page keeps the same silhouette. These break
   out of it: full-bleed halves, curved joins between bands, and images that
   overlap the block behind them. They are what stops two sites built by the
   same engine from reading as the same page. */
/* The image half runs to the edge of the viewport, but the TEXT half lines up
   with .wrap, the 1080px column everything else sits in. Without this the page
   reads as two designs stacked: centred sections above, full-width ones below,
   with nothing sharing a left edge. --gutter is the distance from the viewport
   edge to that column. */
/* One page, one width. Bands used to bleed their image to the viewport edge
   while every other section stopped at 1080px, and no curve or text alignment
   made that read as deliberate; it just looked like two designs stacked. The
   band keeps what makes it a band, the 50/50 split, the colour and the bullet
   list, and gives up the only thing that broke the page. Its background still
   spans the full width; only the content is contained. */
.band{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:360px;max-width:1080px;margin:0 auto;padding:clamp(38px,5vw,72px) 24px;
  gap:clamp(24px,4vw,56px)}
.band-txt{width:100%}
.band-img{position:relative;align-self:stretch;min-height:300px;overflow:hidden;border-radius:18px}
.band-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band.rev{direction:rtl}.band.rev>*{direction:ltr}
.band h2{font-size:clamp(26px,3.4vw,42px);margin:0 0 16px;line-height:1.12;letter-spacing:-.02em}
.band p{color:var(--muted);font-size:16.5px;line-height:1.7;margin:0 0 18px}
.band-tint{background:var(--soft)}
.band-solid{background:var(--a);color:#fff}
.band-solid h2,.band-solid p,.band-solid li{color:#fff}
.band-solid p,.band-solid li{opacity:.9}
.band-list{list-style:none;padding:0;margin:0 0 20px}
.band-list li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15.5px;line-height:1.6}
.band-list li:before{content:"";position:absolute;left:0;top:.5em;width:14px;height:2px;background:var(--a)}
.band-solid .band-list li:before{background:#fff}

/* curved join between two bands. Sits at the bottom of a section and is
   painted in the NEXT section's colour, so the two appear to interlock. */
.shape{position:relative;overflow:hidden}
.shape>svg{position:absolute;left:0;width:100%;height:clamp(38px,5vw,84px);display:block;z-index:3;pointer-events:none}
.shape>svg.shape-b{bottom:-1px}
.shape>svg.shape-t{top:-1px}

.overlap{position:relative;padding:clamp(56px,7vw,104px) 0}
.overlap-tint{background:var(--soft)}

/* ---- builder controls for agent-written sections ----------------------
   Claude writes free-form markup, so the structured controls (hero style,
   services layout, section toggles) cannot reach it. These classes are what
   the builder applies instead: they restyle a section it did not design,
   using the theme's own tokens so the result still matches the palette. */
section[data-hidden="1"]{display:none}
.sec-plain{background:var(--bg)}
.sec-tint{background:var(--soft)}
.sec-solid{background:var(--a)}
.sec-solid,.sec-solid h1,.sec-solid h2,.sec-solid h3,.sec-solid p,.sec-solid li{color:#fff}
.sec-solid p,.sec-solid li{opacity:.92}
.sec-dark{background:var(--ink)}
.sec-dark,.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark p,.sec-dark li{color:#fff}
.sec-dark p,.sec-dark li{opacity:.86}
.sec-tight{padding-top:clamp(22px,3vw,40px)!important;padding-bottom:clamp(22px,3vw,40px)!important}
.sec-roomy{padding-top:clamp(64px,9vw,140px)!important;padding-bottom:clamp(64px,9vw,140px)!important}
.sec-left,.sec-left .sec-head,.sec-left h1,.sec-left h2,.sec-left p{text-align:left!important}
.sec-center,.sec-center .sec-head,.sec-center h1,.sec-center h2,.sec-center p{text-align:center!important}
.sec-narrow>*{max-width:760px;margin-left:auto;margin-right:auto}
.sec-wide>*{max-width:1320px;margin-left:auto;margin-right:auto}
.sec-full>*{max-width:none}

/* ---- signature devices -------------------------------------------------
   A page of photographs, cards and paragraphs reads as competent and
   forgettable. What separates a site somebody art-directed is usually one
   device that had to be made for that business: a diagram of their process, a
   comparison against the alternative, a ticked list of what is included.
   These give a hand-written section those parts already styled. */
.u-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;
  border-radius:999px;background:color-mix(in srgb,var(--a) 12%,transparent);
  color:var(--a);font-size:13px;font-weight:600;margin-bottom:18px}
.u-dash{display:inline-flex;align-items:center;gap:10px;color:var(--a);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.u-dash:before{content:"";width:26px;height:2px;background:var(--a)}

.u-ticks{list-style:none;padding:0;margin:16px 0}
.u-ticks li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15px;line-height:1.55}
.u-ticks li:before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;
  border-radius:4px;background:color-mix(in srgb,var(--a) 15%,transparent)}
.u-ticks li:after{content:"";position:absolute;left:5px;top:.55em;width:5px;height:9px;
  border:solid var(--a);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* side-by-side comparison: the alternative, then them */
.u-versus{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.u-versus>*{border:1px solid var(--line);border-radius:16px;padding:24px}
.u-versus>.u-win{border:2px solid var(--a);position:relative;
  box-shadow:0 18px 44px color-mix(in srgb,var(--a) 14%,transparent)}
.u-versus h3{margin:0 0 12px;font-size:16px}
.u-versus .u-price{font-size:clamp(22px,3vw,32px);font-family:var(--head);line-height:1.1}
.u-win .u-price{color:var(--a)}

/* numbered long-form rows: 01 / 02 / 03 with real paragraphs beside them */
.u-numbers{border-top:1px solid var(--line)}
.u-numrow{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,3vw,40px);
  padding:clamp(26px,4vw,44px) 0;border-bottom:1px solid var(--line)}
.u-numrow>.u-num{font-size:14px;font-weight:700;color:var(--muted);padding-top:6px}
.u-numrow h3{margin:0 0 12px;font-size:clamp(18px,2.2vw,24px);line-height:1.25}
.u-numrow p{margin:0 0 12px;color:var(--muted);line-height:1.7}

/* a photo with a second, smaller image overlapping its corner */
.u-stack{position:relative;padding-bottom:56px}
.u-stack>img:first-child{width:100%;border-radius:18px;display:block}
.u-stack>.u-inset{position:absolute;right:-14px;bottom:0;width:46%;max-width:240px;
  border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.22);
  border:5px solid var(--bg)}
.u-stack>.u-inset img{width:100%;display:block}

/* a drawn diagram sits on its own, centred, and scales with the column */
.u-figure{display:block;margin:0 auto;max-width:min(460px,100%);height:auto}

/* ---- button shapes, set from the builder ------------------------------
   The theme decides the colour; these decide the shape, so an operator can
   change every button on a site without touching a section. Applied to <body>
   so they reach hand-written buttons as well as composed ones. */
.btns-pill .btn{border-radius:999px}
.btns-square .btn{border-radius:0}
.btns-soft .btn{border-radius:10px}
.btns-sharp .btn{border-radius:4px}
.btns-lg .btn{padding:16px 30px;font-size:16px}
.btns-sm .btn{padding:9px 18px;font-size:14px}
.btns-outline .btn-p{background:transparent;color:var(--a);
  box-shadow:inset 0 0 0 2px var(--a)}
.btns-outline .btn-p:hover{background:var(--a);color:#fff}
.btns-shadow .btn-p{box-shadow:0 12px 26px color-mix(in srgb,var(--a) 34%,transparent)}
.btns-block .btn{width:100%;justify-content:center}
.btns-upper .btn{text-transform:uppercase;letter-spacing:.06em;font-size:13.5px}

/* ---- the client's own blog, carried across --------------------------- */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,28px)}
.bl-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);
  transition:transform .25s ease,box-shadow .25s ease}
.bl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(12,16,24,.12)}
.bl-shot{display:block;height:158px;background-size:cover;background-position:center}
.bl-body{padding:16px 18px 20px}
.bl-body h3{margin:0 0 6px;font-family:var(--head);font-size:1.05rem;line-height:1.3}
.bl-body time{font-size:12.5px;color:var(--muted)}
.bl-body p{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.bl-hero{width:100%;border-radius:14px;margin:0 0 26px}

/* ---- pictures written for the section they sit in -----------------------
   Placed by websites.aiimages as a plain <figure> inside the section's own
   wrapper, rather than by rewriting the author's containers. The theme decides
   how it sits, so a generated picture cannot break the layout it lands in. */
.sec-shot{margin:0 0 clamp(22px,3vw,36px);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(12,16,24,.14)}
.sec-shot img{display:block;width:100%;height:100%;object-fit:cover}
.sec-shot--top{margin:0 0 clamp(26px,3.4vw,42px)}
.sec-shot--bottom{margin:clamp(26px,3.4vw,42px) 0 0}
.sec-shot--side{float:right;width:min(38%,400px);aspect-ratio:4/5;
  margin:0 0 22px clamp(24px,3vw,44px)}
.sec-shot--side + *{clear:none}
@media(max-width:760px){.sec-shot--side{float:none;width:100%;aspect-ratio:16/10;
  margin:0 0 24px}}
/* a dark section's picture should not glow */
:is(.sec-dark,.sec-solid) .sec-shot{box-shadow:0 18px 44px rgba(0,0,0,.3)}

/* ---- layers a section positioned to fill itself -------------------------
   A hand-written hero stacks its photograph, the tint over it, and any
   slideshow in divs that cover the whole section. They are decoration, not a
   column of content, and every layout rule below that talks about columns has
   to leave them alone. The split layout was clamping them to the width of the
   text, which is why the hero picture stopped dead partway across the page and
   left white beside it. Marked in _mark_decoration() from the section's own
   CSS, so this stays right whatever class names the agent invented. */
[data-deco]{max-width:none!important;display:block!important;
  grid-template-columns:none!important;text-align:initial!important}
/* A slideshow replaces the still photograph, so the photograph must stop
   painting. It sits later in the markup than the slides, so it covered them
   completely: adding carousel images changed the page and changed nothing you
   could see. */
.has-carousel [data-deco="photo"]{background-image:none!important}

/* ---- structure choices applied to hand-written sections ----------------
   The hero and services dropdowns pick a layout for a composed block. Claude
   writes its own markup, so those choices did nothing to it and only the theme
   colour appeared to change. These reshape a section that already exists,
   using its own children, so the operator's choice means something either way.
   Deliberately conservative: they change arrangement, never content. */
/* Split means text on one side and a picture on the other. Applied blindly it
   put the eyebrow in one column and the headline in the other, which is not a
   split hero, it is a scrambled one. Text always takes column one; only a real
   picture takes column two.

   Two columns ONLY where there is a picture to put in one. This used to be two
   rules: an unconditional two-column rule, and a "no picture, single column"
   guard written after it. The guard lost, because three :not([class]) tests
   outweigh a :has(img) one, so every hero laid out two columns and the
   headline was squeezed into a 376px strip beside an empty half. One decision,
   two branches, matched specificity.

   "A picture" means one the author placed as a child, or one sitting in a
   wrapper div, which is how it is usually written. Depth is capped at two so
   an icon buried inside a button does not get flung into its own column. */
.lay-hero-split > :is(.wrap,div):not([data-deco]):has(> :is(img,figure,picture),
                                                      > * > :is(img,figure,picture)) {
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;text-align:left}
/* No picture to split against: one column, held to a readable measure rather
   than run across the full width of an empty grid. */
.lay-hero-split > :is(.wrap,div):not([data-deco]):not(:has(> :is(img,figure,picture),
                                                           > * > :is(img,figure,picture))) {
  display:block;text-align:left;max-width:820px}
/* a slideshow keeps its stacking context whatever else is asked for */
.lay-hero-split .hero-carousel{display:block!important;position:absolute;inset:0}
.lay-hero-split > :is(.wrap,div):not([data-deco]) > * { grid-column: 1; }
.lay-hero-split > :is(.wrap,div):not([data-deco]) > :is(img,figure,picture),
.lay-hero-split > :is(.wrap,div):not([data-deco]) > *:has(> :is(img,figure,picture)) {
  grid-column: 2; grid-row: 1 / -1; align-self: center; }
.lay-hero-photo{grid-column:2;grid-row:1/-1;align-self:center;width:100%;
  border-radius:18px;object-fit:cover;aspect-ratio:4/3;
  box-shadow:0 26px 60px rgba(0,0,0,.22)}
/* Where the hero's picture was a background on the section itself, split has
   to take that background away, and taking it away leaves behind every style
   that existed because there WAS a photo: white text on cream, a tinted
   eyebrow chip, a dark overlay over nothing. Those live in the section's own
   scoped CSS, so overriding them has to be deliberate.
   Gated on there being no picture left behind the words. A hero whose photo is
   a layer of its own, or a slideshow, keeps everything the section author
   art-directed: bleaching it produced dark green text sitting on a photograph.
   The words are held to one side instead, which is what split means here. */
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel){
  background-color:var(--bg)!important;background-image:none!important;
  min-height:0!important;padding:clamp(40px,6vw,86px) 0!important;
  display:block!important;align-items:initial!important}
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel)
  :is(h1,h2,h3,h4,p,li,cite,div,label){color:var(--ink)!important}
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel)
  :is(small,.eyebrow,.u-eyebrow,[class*="eyebrow"],[class*="kicker"]){
  color:var(--a)!important;background:none!important;padding-left:0!important;
  padding-right:0!important}
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel)
  :is(.u-gradient-text,.u-gradient-text *){color:var(--a)!important}
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel) .btn{color:#fff}
.lay-hero-split:not(:has([data-deco="photo"])):not(.has-carousel) .btn-s{
  color:var(--ink)!important}
/* A photograph IS behind the words, so split reads as "text down one side":
   the container keeps the full width so the picture is not cropped, and the
   words are held to the left half instead.
   :not([data-deco]) matters here: without it the slideshow counted as a column
   of content and every slide was clipped to the width of the headline. */
.lay-hero-split:is(:has([data-deco="photo"]),.has-carousel)
  > :is(.wrap,div):not([data-deco]){max-width:none}
.lay-hero-split:is(:has([data-deco="photo"]),.has-carousel)
  > :is(.wrap,div):not([data-deco]) > *{max-width:min(58%,680px)}
@media(max-width:900px){.lay-hero-photo{grid-column:1;grid-row:auto}}
.lay-hero-center > .wrap,.lay-hero-center > div:first-child{text-align:center;
  margin-left:auto;margin-right:auto;max-width:820px}
.lay-hero-center .btns,.lay-hero-center .row-wrap{justify-content:center}
.lay-hero-left > .wrap,.lay-hero-left > div:first-child{text-align:left;
  margin-right:auto;max-width:820px}
/* Cover, when the hero holds a real photograph as a child element: put the
   picture behind everything, darken it enough to read against, and set the
   text white. Only reachable for a hero we know the shape of. */
.lay-hero-cover{position:relative;min-height:74vh;display:flex;align-items:center;
  overflow:hidden;padding:clamp(40px,6vw,90px) 0}
/* The photo sits inside a wrapper the section author positioned, so making the
   <img> absolute resolved it against that wrapper: 460px wide and zero tall.
   Promote the WRAPPER to the full-bleed layer instead, and make every ancestor
   between it and the section static so inset:0 means the section. */
.lay-hero-cover .wrap{position:static!important}
/* The picture may be wrapped in a positioned div, or written as a bare <img>
   straight into the column. Only the wrapped form was handled, so a hero whose
   author wrote <img> as a child was never a cover at all: the photo stayed in
   flow as a second column, and collapsing that column dropped it below the
   words. */
.lay-hero-cover :is(.wrap,div) > :is(img,picture),
.lay-hero-cover :is(.wrap,div) > *:has(> img){position:absolute!important;
  inset:0!important;z-index:0!important;margin:0!important;width:auto!important;
  max-width:none!important}
.lay-hero-cover *:has(> img) > img,
.lay-hero-cover :is(.wrap,div) > img{width:100%!important;height:100%!important;
  object-fit:cover!important;border-radius:0!important;
  box-shadow:none!important;aspect-ratio:auto!important}
.lay-hero-cover *:has(> img) > img{position:static!important}
/* Legibility. The scrim below sits at z-index 1, but the promoted picture
   lives inside .wrap and `.lay-hero-cover > *` lifts .wrap to z-index 2, so
   the picture paints above the scrim and the scrim has never darkened a
   promoted photograph at all. Smile only looked right because its photo
   happens to be dark; a bright restaurant interior left white type invisible.
   Darkening the picture itself needs no stacking order to be correct. */
.lay-hero-cover :is(.wrap,div) > :is(img,picture),
.lay-hero-cover *:has(> img) > img{filter:brightness(.55) saturate(.92)}
/* everything that is not the picture sits above the scrim. A bare <img> child
   has no children of its own, so it passed :not(:has(> img)) and was lifted
   above the scrim it is supposed to sit under. */
.lay-hero-cover .wrap > *:not(:has(> img)):not(img):not(picture){
  position:relative;z-index:2}
/* The picture has just been promoted out of flow, so whatever grid the author
   wrote for it now has an empty column. Collapse it: otherwise centring the
   words centres them inside column one and they sit left of the middle. */
.lay-hero-cover .wrap{grid-template-columns:minmax(0,900px)!important}

/* Where the words sit inside the hero, independent of the layout.
   The hero may be a grid (a picture in column two) or a block (a picture
   behind the words), so both have to be handled: text-align moves the lines,
   justify-items moves a grid item, and an auto margin moves a block. The rule
   used to set grid-template-columns instead, which did nothing at all to a
   block hero and flattened a real split into one column when it did apply. */
.lay-halign-center .wrap{text-align:center!important;justify-items:center!important;
  justify-content:center!important}
.lay-halign-center .wrap > *{margin-inline:auto!important}
.lay-halign-center .wrap :is(.btns,.row,.row-wrap,[class*="actions"],[class*="cta"]){
  justify-content:center!important}
.lay-halign-center .wrap :is(.u-dash,.u-eyebrow,[class*="eyebrow"]){justify-content:center!important}
.lay-halign-right .wrap{text-align:right!important;justify-items:end!important;
  justify-content:end!important}
.lay-halign-right .wrap > *{margin-left:auto!important;margin-right:0!important}
.lay-halign-right .wrap :is(.btns,.row,.row-wrap,[class*="actions"],[class*="cta"]){
  justify-content:flex-end!important}
.lay-halign-left .wrap{text-align:left!important;justify-items:start!important;
  justify-content:start!important}
.lay-halign-left .wrap > *{margin-right:auto!important;margin-left:0!important}
.lay-halign-left .wrap :is(.btns,.row,.row-wrap,[class*="actions"],[class*="cta"]){
  justify-content:flex-start!important}

/* Buttons must keep their own colours. Forcing every element white for
   legibility over a photo turned the outline button into white text on a
   white pill. */
.lay-hero-cover .btn-p,.lay-hero-banner .btn-p{color:#fff!important}
.lay-hero-cover .btn-s,.lay-hero-banner .btn-s{color:var(--ink)!important;
  background:#fff!important;border-color:#fff!important}
.lay-hero-cover .btn-s:hover,.lay-hero-banner .btn-s:hover{
  background:rgba(255,255,255,.88)!important}

.lay-hero-cover:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,10,20,.72),rgba(8,10,20,.44))}
.lay-hero-cover > *{position:relative;z-index:2}
.lay-hero-cover :is(h1,h2,h3,p,li,span,div,cite){color:#fff!important}
.lay-hero-cover :is(.u-gradient-text,[class*="accent"]){color:var(--a)!important}
.lay-hero-cover :is(small,.eyebrow,.u-eyebrow,[class*="eyebrow"]){color:#fff!important;opacity:.85}

/* Banner: the same photo, but a shallow strip rather than a screenful. */
.lay-hero-banner{position:relative;min-height:0;overflow:hidden;
  padding:clamp(34px,4.5vw,62px) 0}
.lay-hero-banner .wrap{position:static!important}
.lay-hero-banner :is(.wrap,div) > *:has(> img){position:absolute!important;
  inset:0!important;z-index:0!important;margin:0!important;width:auto!important;
  max-width:none!important}
.lay-hero-banner *:has(> img) > img{width:100%!important;height:100%!important;
  object-fit:cover!important;position:static!important;border-radius:0!important;
  box-shadow:none!important;aspect-ratio:auto!important}
.lay-hero-banner .wrap > *:not(:has(> img)){position:relative;z-index:2}

.lay-hero-banner:after{content:"";position:absolute;inset:0;z-index:1;
  background:rgba(8,10,20,.6)}
.lay-hero-banner > *{position:relative;z-index:2}
.lay-hero-banner :is(h1,h2,h3,p,li,span,div){color:#fff!important}
.lay-hero-banner :is(.u-gradient-text){color:var(--a)!important}
.lay-hero-minimal{min-height:0;padding-top:clamp(30px,5vw,70px);
  padding-bottom:clamp(30px,5vw,70px)}

/* services: reshape whatever grid the section already has */
.lay-svc-rows [class*="grid"],.lay-svc-rows ul,
.lay-svc-rows > div > div{grid-template-columns:1fr!important;display:grid!important}
.lay-svc-grid [class*="grid"],.lay-svc-grid > div > div{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}
.lay-svc-cards [class*="grid"],.lay-svc-cards > div > div{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important}
.lay-svc-carousel [class*="grid"],.lay-svc-carousel > div > div{
  display:grid!important;grid-auto-flow:column!important;
  grid-auto-columns:minmax(280px,330px);grid-template-columns:none!important;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15));
  mask-image:linear-gradient(90deg,#000 calc(100% - 54px),rgba(0,0,0,.15))}
.lay-svc-carousel [class*="grid"] > *{scroll-snap-align:start}
@media(max-width:900px){.lay-hero-split > .wrap,
  .lay-hero-split > div:not([class*="hcslide"]):not([class*="vover"]){
  grid-template-columns:1fr}}

@media(max-width:820px){.u-versus{grid-template-columns:1fr}
.u-numrow{grid-template-columns:1fr;gap:8px}
.u-stack>.u-inset{position:static;width:60%;margin:-30px 0 0 auto}}

/* ---- motion and modern surfaces ---------------------------------------
   Available to hand-written sections. The engine's own blocks are static by
   design, which is exactly why generated pages looked flat next to a site
   somebody art-directed. All of it honours prefers-reduced-motion. */
.u-rise{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.u-rise.in{opacity:1;transform:none}
.u-fade{opacity:0;transition:opacity .8s ease}.u-fade.in{opacity:1}
.u-zoom{opacity:0;transform:scale(.94);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.u-zoom.in{opacity:1;transform:none}
.u-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.u-stagger.in>*{opacity:1;transform:none}
.u-stagger.in>*:nth-child(2){transition-delay:.09s}
.u-stagger.in>*:nth-child(3){transition-delay:.18s}
.u-stagger.in>*:nth-child(4){transition-delay:.27s}
.u-stagger.in>*:nth-child(5){transition-delay:.36s}
.u-stagger.in>*:nth-child(6){transition-delay:.45s}

.u-lift{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.u-lift:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.13)}
.u-zoomimg{overflow:hidden}
.u-zoomimg img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.u-zoomimg:hover img{transform:scale(1.06)}

/* One accent word in a headline. This used to run --a to --a2, which on a
   theme whose two accents are far apart (teal and yellow) painted the word as
   a rainbow smear that read as a rendering fault. A single accent says the
   same thing and cannot go wrong. */
.u-gradient-text{color:var(--a)}
.u-glass{background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.u-ring{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),
  0 18px 40px rgba(0,0,0,.08)}
.u-sticky{position:sticky;top:88px}
.u-rule{height:2px;width:56px;background:var(--a);border:0;margin:0 0 20px}
.u-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--a);margin-bottom:14px}
.u-kicker{font-size:clamp(52px,7vw,104px);line-height:.95;letter-spacing:-.03em;
  font-family:var(--head)}
.u-count{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .u-rise,.u-fade,.u-zoom,.u-stagger>*{opacity:1;transform:none;transition:none}
  .u-lift:hover{transform:none}.u-zoomimg:hover img{transform:none}}
.overlap-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.overlap-fig{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px rgba(0,0,0,.16)}
.overlap-fig img{width:100%;height:100%;object-fit:cover;display:block}
.overlap-panel{background:var(--a);color:#fff;border-radius:20px;padding:clamp(28px,3.6vw,48px)}
.overlap-panel h2,.overlap-panel p{color:#fff}
.overlap-panel h2{font-size:clamp(24px,3vw,36px);margin:0 0 14px;line-height:1.15}
.overlap-panel p{opacity:.92;margin:0 0 18px;line-height:1.7}
@media(min-width:900px){.overlap-rev .overlap-fig{margin-right:-56px;z-index:2}
.overlap:not(.overlap-rev) .overlap-fig{margin-left:-56px;order:2;z-index:2}}

.qsum{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.qsum-st{color:#f5a623;letter-spacing:2px;font-size:19px}
.qsum b{font-size:19px}
.qsum span:last-child{color:var(--muted);font-size:15px}
.qcard .qstars{color:#f5a623;letter-spacing:2px;margin-bottom:12px}
.qcard cite{display:flex;align-items:center;gap:9px}
.qav{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--muted);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}

.bigquote{padding:clamp(60px,8vw,120px) 0;background:var(--soft);text-align:center}
.bigquote blockquote{margin:0 auto;max-width:860px;font-family:var(--head);
  font-size:clamp(22px,3.2vw,40px);line-height:1.3;letter-spacing:-.02em}
.bigquote cite{display:block;margin-top:22px;font-style:normal;font-size:14px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a)}

@media(max-width:900px){.band{grid-template-columns:1fr;min-height:0;padding:34px 20px}
.band.rev{direction:ltr}
.band-txt{max-width:none;padding:0}
.band-img{min-height:260px;height:260px}
.overlap-in{grid-template-columns:1fr}
.overlap:not(.overlap-rev) .overlap-fig{order:0}}
:root{--ink:#0f1c33;--muted:#5a6a86;--bg:#ffffff;--a:#1E3A8A;--a2:#1E40AF;--soft:#EFF3FB;--line:#C7D6F0;--head:'Cormorant Garamond',serif;--body:'Inter',sans-serif}body{font-family:var(--body)}h1,h2,h3,.brand{font-family:var(--head)}.links a.active{color:var(--a)}
h1,h2,h3,.brand{font-weight:700;letter-spacing:-.01em}
header{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.btn-p{background:linear-gradient(135deg,var(--a),var(--a2));color:#fff;padding:14px 26px;border-radius:999px;box-shadow:0 16px 30px -12px color-mix(in srgb,var(--a) 65%,transparent)}
.btn-s{background:var(--soft);color:var(--a);padding:14px 26px;border-radius:999px}
.hero{padding:110px 0 84px;background:radial-gradient(680px 380px at 15% -10%,color-mix(in srgb,var(--a) 15%,transparent),transparent 60%),radial-gradient(680px 380px at 90% 8%,color-mix(in srgb,var(--a2) 15%,transparent),transparent 60%)}
.trust{padding:26px 0;background:var(--soft)}.block.alt{background:var(--soft)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 18px 40px -28px color-mix(in srgb,var(--ink) 45%,transparent)}.card:hover{transform:translateY(-4px)}
.feat{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:22px}.ficon{border-radius:14px}
.cta{background:linear-gradient(135deg,var(--a),var(--a2))}.cta .btn-p{background:#fff;color:var(--a);box-shadow:none}
.foot{border-top:1px solid var(--line);color:var(--muted)}
.admin-bar header{top:32px}