/* =========================================================
   Directorit — redesign stylesheet
   Colour tokens live in :root. Change them here to re-brand.
   ========================================================= */
:root{
  --navy:#0B1E47;
  --navy-2:#132B63;
  --blue:#1E5EFF;
  --blue-dark:#1446C9;
  --sky:#EAF1FF;
  --amber:#FFB423;
  --ink:#13203D;
  --muted:#55617A;
  --line:#DCE3F0;
  --mist:#F5F8FD;
  --paper:#FFFFFF;

  --font-head:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:24px;
  --shadow:0 18px 40px -22px rgba(11,30,71,.45);
  --wrap:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip;margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
h1,h2,h3,h4,h5{font-family:var(--font-head);line-height:1.12;margin:0 0 .5em;color:var(--navy);letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
h4{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.section{padding:clamp(4rem,8vw,6.5rem) 0}
.section--mist{background:var(--mist)}
.section--navy{background:var(--navy);color:#C9D4EE}
.section--navy h2,.section--navy h3{color:#fff}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;color:var(--blue);margin-bottom:.8rem}
.kicker::before{content:"";width:22px;height:2px;background:currentColor}
.section--navy .kicker{color:var(--amber)}
.section-head{max-width:640px;margin-bottom:2.8rem}
.section-head--center{text-align:center;margin-inline:auto}
.section-head--center .kicker{justify-content:center}
.lead{font-size:1.15rem;color:var(--muted)}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--navy);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem/1 var(--font-body);padding:1rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-dark);color:#fff;transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:var(--navy)}
.btn--amber:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--navy);background:#fff}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn svg{width:18px;height:18px}

/* ---------- top bar + header ---------- */
.topbar{background:var(--navy);color:#AFC0E4;font-size:.9rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0}
.topbar a{color:#fff}
.topbar__links{display:flex;gap:1.4rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px -20px rgba(11,30,71,.5)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:84px;transition:height .3s var(--ease)}
.site-header.is-scrolled .wrap{height:70px}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:.3rem}
.nav__items{list-style:none;display:flex;align-items:center;gap:.3rem;padding:0;margin:0}
.nav__items li{margin:0;padding:0}
.nav a{color:var(--navy);font-weight:600;font-size:.98rem;padding:.55rem .8rem;border-radius:999px;transition:background .2s,color .2s;display:block}
.nav a:hover,.nav a[aria-current="page"]{background:var(--sky);color:var(--blue)}
.header-cta{display:flex;align-items:center;gap:.8rem}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--navy);margin:6px 0;transition:transform .3s,opacity .3s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- home hero ---------- */
.hero{position:relative;background:var(--navy);color:#C9D4EE;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem)}
.hero__mosaic{position:absolute;inset:-10% -5% -10% 45%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-8deg);opacity:.55}
.hero__col{display:flex;flex-direction:column;gap:14px;animation:drift 38s linear infinite}
.hero__col:nth-child(2){animation-duration:46s;animation-direction:reverse}
.hero__col:nth-child(3){animation-duration:42s}
.hero__col img{border-radius:var(--r-md);aspect-ratio:4/5;object-fit:cover;width:100%}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 38%,rgba(11,30,71,.82) 58%,rgba(11,30,71,.35));pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero__copy{max-width:660px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero__title,.hero__highlight{display:block;overflow-wrap:break-word}
.hero__title{animation:rise .9s var(--ease) both}
.hero__highlight{animation:rise .9s .12s var(--ease) both;color:var(--amber)}
.hero__sub{font-size:1.18rem;max-width:520px;animation:fadeUp .8s .35s var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.search-console{display:grid;grid-template-columns:1.4fr 1fr auto;gap:.5rem;background:#fff;border-radius:var(--r-lg);padding:.55rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);margin-top:2.2rem;animation:fadeUp .8s .5s var(--ease) both}
.search-console label{display:flex;align-items:center;gap:.6rem;padding:0 1rem;border-radius:var(--r-md);background:var(--mist)}
.search-console svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-console input,.search-console select{width:100%;border:0;background:transparent;font:500 1rem var(--font-body);color:var(--ink);padding:1rem 0;outline:none}
.search-console select{cursor:pointer}
.search-console label:focus-within{box-shadow:0 0 0 2px var(--blue)}
.hero__meta{display:flex;align-items:center;gap:1.4rem;margin-top:1.6rem;font-size:.98rem;animation:fadeUp .8s .65s var(--ease) both}
.hero__meta strong{font-family:var(--font-head);font-size:1.9rem;color:#fff;margin-right:.35rem}
.hero__meta a{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* ---------- marquee ---------- */
.marquee{background:var(--amber);overflow:hidden;padding:.95rem 0}
.marquee__track{display:flex;gap:2.5rem;width:max-content;animation:marquee 60s linear infinite}
.marquee a{color:var(--navy);font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:2.5rem}
.marquee a::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;background:var(--navy) center/cover no-repeat;color:#C9D4EE;padding:clamp(3.5rem,7vw,5.5rem) 0}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,30,71,.97) 30%,rgba(11,30,71,.7))}
.page-hero--blog::before{background:var(--navy)}
.page-hero .wrap{position:relative}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.3rem);max-width:780px;animation:fadeUp .7s var(--ease) both}
.page-hero p{max-width:620px;font-size:1.12rem;animation:fadeUp .7s .12s var(--ease) both}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.92rem;margin-bottom:1rem;list-style:none;padding:0}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{color:#fff}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.cat-grid--4{grid-template-columns:repeat(4,1fr)}
.cat-tile{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3.3;background:var(--navy-2);isolation:isolate}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,30,71,.92));z-index:1}
.cat-tile span{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;color:#fff;font:600 1.12rem/1.25 var(--font-head);display:flex;justify-content:space-between;align-items:end;gap:.6rem}
.cat-tile span svg{width:34px;height:34px;flex:none;padding:8px;border-radius:50%;background:var(--amber);color:var(--navy);transform:scale(.6);opacity:0;transition:.35s var(--ease)}
.cat-tile:hover img{transform:scale(1.08)}
.cat-tile:hover span svg,.cat-tile:focus-visible span svg{transform:none;opacity:1}

/* compact category list (sidebar / A–Z page) */
.cat-chip{display:flex;align-items:center;gap:.8rem;padding:.55rem;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--navy);font-weight:600;transition:border-color .2s,transform .25s var(--ease)}
.cat-chip img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.cat-chip:hover{border-color:var(--blue);color:var(--blue);transform:translateX(4px)}
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}

.az-rail{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.6rem}
.az-rail button{min-width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;font:700 .95rem var(--font-head);color:var(--navy);cursor:pointer;transition:.2s}
.az-rail button:hover{border-color:var(--blue);color:var(--blue)}
.az-rail button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.az-rail button:disabled{opacity:.3;cursor:default}
.filter-bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.4rem}
.field-inline{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:999px;padding:0 1.1rem;background:#fff;min-width:min(340px,100%)}
.field-inline input{border:0;outline:0;font:500 1rem var(--font-body);padding:.85rem 0;width:100%;background:transparent}
.field-inline svg{width:18px;color:var(--muted)}
.field-inline:focus-within{border-color:var(--blue)}
.count-note{color:var(--muted);font-size:.95rem}

/* ---------- listing cards ---------- */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem}
.listing{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.listing:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.listing__logo{height:150px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:1.5rem;background:var(--mist);border-bottom:1px solid var(--line)}
.listing__logo img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.listing__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.pill{display:inline-block;align-self:flex-start;background:var(--sky);color:var(--blue-dark);font-size:.82rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;margin-bottom:.8rem}
.listing h3{font-size:1.12rem;margin-bottom:.55rem}
.listing h3 a{color:var(--navy)}
.listing h3 a:hover{color:var(--blue)}
.listing p{font-size:.96rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.listing__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem .8rem;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px dashed var(--line);font-size:.9rem}
.review-note{white-space:nowrap;font-size:.85rem;display:flex;align-items:center;gap:.35rem;color:var(--muted)}
.review-note svg{width:15px;color:var(--amber)}
.more{font-weight:700;display:inline-flex;align-items:center;gap:.3rem}
.more svg{width:16px;transition:transform .25s}
.more:hover svg{transform:translateX(4px)}
/* row layout for category pages */
.listing--row{flex-direction:row}
.listing--row .listing__logo{width:240px;height:auto;flex:none;border-bottom:0;border-right:1px solid var(--line)}
.listing--row .listing__logo img{width:auto;height:auto;max-width:100%;max-height:150px}
.listing--row p{-webkit-line-clamp:2}
.stack{display:grid;gap:1.2rem}
.empty{border:2px dashed var(--line);border-radius:var(--r-lg);padding:3rem 2rem;text-align:center;color:var(--muted)}
.empty h3{color:var(--navy)}

/* ---------- split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split__media{position:relative}
.split__media img{border-radius:var(--r-lg);width:100%;aspect-ratio:5/5.4;object-fit:cover}
.split__badge{position:absolute;left:-1.5rem;bottom:2rem;background:var(--amber);color:var(--navy);border-radius:var(--r-md);padding:1.1rem 1.4rem;font-weight:600;box-shadow:var(--shadow);max-width:230px;line-height:1.35}
.split__badge strong{display:block;font:700 2.2rem/1 var(--font-head)}
.checks{list-style:none;padding:0;margin:1.4rem 0 2rem;display:grid;gap:.75rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start}
.checks svg{width:22px;height:22px;flex:none;color:var(--blue);margin-top:2px}
.feature-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.6rem 0}
.feature{display:flex;gap:.9rem}
.feature__icon{width:52px;height:52px;flex:none;border-radius:14px;background:var(--sky);color:var(--blue);display:grid;place-items:center}
.feature__icon svg{width:26px;height:26px}
.feature h4{margin-bottom:.2rem}
.feature p{font-size:.95rem;color:var(--muted);margin:0}

/* ---------- testimonials ---------- */
.testi{position:relative;overflow:hidden}
.testi__track{display:flex;transition:transform .7s var(--ease)}
.testi__slide{flex:0 0 50%;padding:0 .7rem}
.quote-card{background:var(--navy-2);border-radius:var(--r-lg);padding:2.2rem;height:100%;display:flex;flex-direction:column;gap:1.4rem;border:1px solid rgba(255,255,255,.08)}
.quote-card blockquote{margin:0;color:#fff;font:500 1.3rem/1.45 var(--font-head)}
.quote-card blockquote::before{content:"\201C";display:block;font-size:3.6rem;line-height:.6;color:var(--amber);margin-bottom:.6rem}
.quote-card figcaption{display:flex;align-items:center;gap:.9rem;margin-top:auto}
.quote-card img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--amber)}
.quote-card cite{font-style:normal;color:#fff;font-weight:700;display:block}
.quote-card small{color:#AFC0E4}
.testi__nav{display:flex;gap:.6rem;margin-top:2rem;justify-content:center}
.testi__nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;transition:.25s}
.testi__nav button:hover{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.testi__nav svg{width:20px}
.dots{display:flex;gap:.45rem;justify-content:center;margin-top:1.2rem}
.dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:28px;background:var(--amber)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;max-width:860px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:var(--blue);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;font:600 1.1rem var(--font-head);color:var(--navy);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px;height:30px;flex:none;border-radius:50%;background:var(--sky);position:relative;transition:transform .3s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--blue);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq details[open] summary i{background:var(--blue);transform:rotate(180deg)}
.faq details[open] summary i::before{background:#fff}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0);background:#fff}
.faq .answer{padding:0 1.4rem 1.3rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--blue);border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.4rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;color:#E1E9FF;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.08)}
.cta-band h2{color:#fff;margin-bottom:.3rem;font-size:clamp(1.6rem,3vw,2.3rem)}
.cta-band p{margin:0;max-width:540px}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.svc{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-weight:600;color:var(--navy);transition:.3s var(--ease)}
.svc svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--sky);color:var(--blue);flex:none;transition:.3s}
.svc:hover{border-color:var(--blue);transform:translateY(-3px)}
.svc:hover svg{background:var(--blue);color:#fff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.duo__card{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line)}
.duo__card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.duo__card div{padding:1.8rem}

/* ---------- layout with sidebar ---------- */
.with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.5rem;align-items:start}
.sidebar{display:grid;gap:1.4rem;position:sticky;top:100px}
.widget{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;background:#fff}
.widget h3{font-size:1.15rem;margin-bottom:1rem}
.widget ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.widget ul:not(.info-list) li a{display:flex;justify-content:space-between;padding:.55rem .2rem;color:var(--ink);border-bottom:1px dashed var(--line)}
.widget ul:not(.info-list) li:last-child a{border-bottom:0}
.widget li a:hover{color:var(--blue)}
.widget--navy{background:var(--navy);color:#C9D4EE;border:0}
.widget--navy h3{color:#fff}

/* ---------- single listing ---------- */
.biz-head{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;margin-top:-4.5rem;position:relative;z-index:3;box-shadow:var(--shadow)}
.biz-head__logo{background:var(--mist);border-radius:var(--r-md);height:150px;display:grid;place-items:center;padding:1rem}
.biz-head__logo img{max-height:100%;object-fit:contain}
.biz-head h1{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.6rem}
.biz-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:var(--muted);font-size:.96rem;margin-bottom:1rem}
.biz-meta span{display:flex;align-items:center;gap:.4rem}
.biz-meta svg{width:17px;color:var(--blue)}
.biz-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem;overflow-x:auto}
.tabs button{background:none;border:0;padding:.9rem 1.1rem;font:600 1rem var(--font-body);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--blue);border-color:var(--blue)}
.tab-panel{animation:fadeUp .4s var(--ease)}
.listing-section-title{font-size:1.6rem}
.review-widget{margin-top:2rem}
.review-rating{border:0;padding:0;margin:0}
.review-rating legend{font-weight:600;color:var(--navy);margin-bottom:.3rem}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.info-list li{display:flex;gap:.8rem}
.info-list svg{width:20px;flex:none;color:var(--blue);margin-top:3px}
.info-list strong{display:block;color:var(--navy)}
.map-box{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--mist)}
.map-box iframe{width:100%;height:100%;border:0}
.listing-map{aspect-ratio:16/10}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:grid;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--navy)}
.form input,.form select,.form textarea{font:500 1rem var(--font-body);padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,94,255,.15)}
.form .err{color:#C2272D;font-size:.86rem;font-weight:500;margin-top:-.5rem}
.form .err:empty{display:none}
.form [aria-invalid="true"]{border-color:#C2272D}
.form-note{font-size:.95rem;padding:.9rem 1rem;border-radius:var(--r-sm);background:#E7F7EE;color:#11643A;display:none}
.form-note.is-shown{display:block;animation:fadeUp .4s var(--ease)}
.captcha{display:flex;align-items:center;gap:.8rem}
.captcha span{font:700 1.05rem var(--font-head);color:var(--navy);white-space:nowrap}
.captcha input{max-width:110px}
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem}
.stars{position:relative}
.stars input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.stars input:focus-visible+label{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.stars label{cursor:pointer;color:var(--line);font-size:1.7rem;line-height:1}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:var(--amber)}

/* contact cards */
.contact-cards{display:grid;gap:1rem}
.contact-card{display:flex;gap:1rem;padding:1.3rem;border-radius:var(--r-md);background:var(--navy-2);color:#C9D4EE}
.contact-card svg{width:46px;height:46px;padding:11px;border-radius:12px;background:var(--amber);color:var(--navy);flex:none}
.contact-card h4{color:#fff;margin-bottom:.15rem}
.contact-card p{margin:0}
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.2rem;counter-reset:step}
.steps li{display:flex;gap:1rem;counter-increment:step}
.steps li::before{content:counter(step);width:38px;height:38px;flex:none;border-radius:50%;border:2px solid var(--amber);color:var(--amber);display:grid;place-items:center;font:700 1rem var(--font-head)}
.steps strong{color:#fff;display:block}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.post{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .post__img img{transform:scale(1.06)}
.post__date{position:absolute;left:1rem;top:1rem;background:#fff;border-radius:10px;padding:.4rem .7rem;text-align:center;font:700 1.25rem/1 var(--font-head);color:var(--navy)}
.post__date small{display:block;font:600 .75rem var(--font-body);color:var(--muted);margin-top:.2rem}
.post__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post__body h3 a{color:var(--navy)}
.post__body h3 a:hover{color:var(--blue)}
.post__body p{color:var(--muted);font-size:.97rem}
.post__meta{display:flex;gap:1rem;font-size:.88rem;color:var(--muted);margin-top:auto}
.post--feature{display:grid;grid-template-columns:1.2fr 1fr;margin-bottom:2rem}
.post--feature .post__img{aspect-ratio:auto;min-height:340px}
.post--feature .post__body{padding:2.4rem;justify-content:center}
.post--feature h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.post--feature h2 a{color:var(--navy)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.cat-tabs a{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);color:var(--navy);font-weight:600;font-size:.95rem}
.cat-tabs a:hover,.cat-tabs a[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:3rem}
.pager a,.pager span{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);font-weight:700;color:var(--navy)}
.pager [aria-current]{background:var(--blue);color:#fff;border-color:var(--blue)}

.article{max-width:740px}
.article__cover{border-radius:var(--r-lg);margin-bottom:2rem;aspect-ratio:16/9;object-fit:cover;width:100%}
.article p,.article li{font-size:1.1rem;line-height:1.75}
.article h2{font-size:1.75rem;margin-top:2.2rem}
.article blockquote{margin:2rem 0;padding:1.4rem 1.6rem;border-left:4px solid var(--amber);background:var(--mist);border-radius:0 var(--r-md) var(--r-md) 0;font:500 1.25rem/1.5 var(--font-head);color:var(--navy)}
.article ul{padding-left:1.2rem}
.author{display:flex;gap:1rem;align-items:center;padding:1.4rem;border-radius:var(--r-lg);background:var(--mist);margin-top:2.6rem}
.author__mark{width:64px;height:64px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none}
.author__mark img{width:40px}
.share{display:flex;gap:.5rem;align-items:center;margin-top:2rem;flex-wrap:wrap}
.share a{padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem;font-weight:600;color:var(--navy)}
.share a:hover{border-color:var(--blue);color:var(--blue)}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--amber);width:0;z-index:60}

/* ---------- sitemap ---------- */
.sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem}
.sitemap h3{padding-bottom:.6rem;border-bottom:2px solid var(--amber);display:inline-block}
.sitemap ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.sitemap a{color:var(--ink)}
.sitemap a:hover{color:var(--blue)}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;background:var(--navy);color:#C9D4EE;padding:4rem 0;overflow:hidden;position:relative}
.nf__num{font:800 clamp(7rem,24vw,16rem)/1 var(--font-head);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.35);letter-spacing:-.04em;display:flex;justify-content:center}
.nf__num span{display:inline-block;animation:bob 3.2s ease-in-out infinite}
.nf__num span:nth-child(2){color:var(--amber);-webkit-text-stroke:0;animation-delay:.3s}
.nf__num span:nth-child(3){animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-14px)}}
.nf h1{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.nf .search-console{max-width:640px;margin:2rem auto 1.5rem;grid-template-columns:1fr auto}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#AFC0E4;padding-top:4.5rem}
.footer-grid{display:grid;grid-template-columns:1.1fr .7fr .9fr 1.3fr;gap:2.5rem}
.site-footer h3{color:#fff;font-size:1.15rem;margin-bottom:1.1rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.site-footer a{color:#AFC0E4}
.site-footer a:hover{color:var(--amber)}
.footer-logo{background:#fff;display:inline-block;padding:.7rem 1rem;border-radius:var(--r-md);margin-bottom:1.2rem}
.footer-logo img{height:40px}
.site-footer .form label{color:#fff}
.site-footer .form input,.site-footer .form textarea{background:var(--navy-2);border-color:rgba(255,255,255,.12);color:#fff}
.site-footer .form textarea{min-height:90px}
.site-footer .captcha span{color:#fff}
.footer-bottom{margin-top:3.5rem;border-top:1px solid rgba(255,255,255,.1);padding:1.4rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.92rem}
.to-top{position:fixed;right:1.2rem;bottom:1.2rem;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue);color:#fff;cursor:pointer;opacity:0;transform:translateY(20px);transition:.35s var(--ease);z-index:40;box-shadow:var(--shadow)}
.to-top.is-shown{opacity:1;transform:none}
.to-top svg{width:20px}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal="left"]{transform:translateX(-36px)}
.js [data-reveal="right"]{transform:translateX(36px)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .site-header .wrap{gap:.8rem}
  .logo{flex:none}
  .nav{min-width:0}
  .nav__items{gap:0}
  .nav a{font-size:.86rem;padding:.45rem .42rem;white-space:nowrap}
  .header-cta .btn{padding:.85rem 1rem;font-size:.9rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .with-sidebar{grid-template-columns:1fr}
  .sidebar{position:static}
  .cat-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .site-header{backdrop-filter:none;background:#fff}
  .nav{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;flex-direction:column;align-items:stretch;padding:6rem 1.4rem 2rem;gap:.2rem;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s;box-shadow:-20px 0 40px -20px rgba(0,0,0,.3);z-index:-1}
  .nav__items{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav a{padding:.85rem 1rem;font-size:.98rem}
  .nav-open .nav{transform:none;visibility:visible;transition:transform .4s var(--ease)}
  .nav-toggle{display:block}
  .header-cta .btn{display:none}
  .hero__mosaic{inset:auto -20% -30% -20%;height:60%;opacity:.25}
  .hero::after{background:linear-gradient(180deg,var(--navy) 50%,rgba(11,30,71,.75))}
  .search-console{grid-template-columns:1fr}
  .search-console .btn{padding:1.1rem}
  .split,.duo,.feature-pair,.post--feature{grid-template-columns:1fr}
  .split__badge{left:1rem}
  .testi__slide{flex-basis:100%}
  .listing--row{flex-direction:column}
  .listing--row .listing__logo{width:auto;height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .biz-head{grid-template-columns:1fr}
  .topbar__links{display:none}
}
@media (max-width:560px){
  .form-row,.footer-grid{grid-template-columns:1fr}
  .cat-grid--4{gap:.7rem}
  .cat-tile span{font-size:.95rem;left:.8rem;right:.8rem;bottom:.7rem}
  .logo img{height:38px}
  .cta-band .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}
.site-footer .btn--amber,.site-footer .btn--amber:hover{color:var(--navy)}