:root{
  --bg:#0c0818; --bg-alt:#140f28; --panel:#1a1433; --panel-border:#2c2350;
  --text:#f3f4f8; --muted:#9aa0b4; --muted-dim:#6b7086;
  --blue:#3a8dff; --cyan:#33d6e0; --purple:#8b3ff2; --pink:#ff4d9d;
  --gradient:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  --gradient-btn:linear-gradient(90deg,#8b3ff2,#ff4d9d);
  --radius:16px; --maxw:1180px;
  --social:#4fc3ff;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Manrope',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Instrument Sans',sans-serif;letter-spacing:-0.5px;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:var(--cyan);margin-bottom:16px;}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor;display:inline-block;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s;}
.btn-primary{background:var(--purple);color:#fff;}
.btn-primary:hover{background:#7a35d9;}
.btn-outline{border-color:#3a3d55;color:var(--text);background:transparent;}
.btn-outline:hover{border-color:var(--purple);color:#fff;}
section{padding:100px 0;position:relative;}
.section-tight{padding:70px 0;}
.section-head{max-width:720px;margin-bottom:50px;}
.section-head h2{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.15;}
.section-head p{color:var(--muted);font-size:16px;margin-top:14px;}
/* Reserved for hero-level headline moments only — one or two per page, not every subheading. */
.grad-text{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--purple);}
/* Restrained alternative for everything else that previously used grad-text — solid, not a gradient. */
.accent-text{color:var(--cyan);}
.pull{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(19px,2.2vw,24px);line-height:1.4;border-left:3px solid var(--pink);padding-left:20px;margin:22px 0;color:#fff;}

.banner{background:linear-gradient(90deg,rgba(139,63,242,.15),rgba(255,77,157,.1));border-bottom:1px solid var(--panel-border);padding:10px 0;text-align:center;font-size:13px;color:var(--muted);}
.banner b{color:#fff;}

/* ===== NAV ===== */
header{position:sticky;top:0;z-index:50;background:rgba(12,8,24,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-border);}
nav.wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;}
.logo img{height:96px;width:auto;}
.nav-right{display:flex;align-items:center;gap:16px;}
.burger{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  font-size:19px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;
  color:#fff;cursor:pointer;transition:border-color .2s,transform .2s;flex:none;
}
.burger:hover{border-color:var(--purple);}
.burger .fa-xmark{display:none;}
.burger.open .fa-bars{display:none;}
.burger.open .fa-xmark{display:block;}
.btn{white-space:nowrap;}
@media(max-width:560px){
  .logo img{height:64px;}
  /* Header runs out of room for logo + full "Request a Quote" button + burger on phones —
     the button was wrapping onto two lines instead of shrinking. Drop it from the header on
     mobile; it's not lost, the same CTA already lives in the menu's promo panel one tap away. */
  .nav-right .btn-outline{display:none;}
}

/* ===== MEGA MENU ===== */
.mega-menu{
  position:absolute;top:100%;left:0;right:0;background:var(--bg-alt);
  border-bottom:1px solid var(--panel-border);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s ease,opacity .3s ease;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}
/* max-height needs to fit a full stacked column of links + the promo block on mobile —
   fixed to a viewport-relative height with scroll instead of a flat px cap so nothing
   below the fold gets silently clipped as more nav links are added over time. */
.mega-menu.open{max-height:min(640px,85vh);overflow-y:auto;opacity:1;}
@media(max-width:600px){.mega-menu.open{max-height:85vh;}}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;gap:36px;padding:48px 24px 56px;}
@media(max-width:900px){.mega-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.mega-grid{grid-template-columns:1fr;padding:32px 20px 40px;}}
.mega-col h5{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted-dim);margin-bottom:18px;}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.mega-col ul a{font-size:16px;font-weight:600;color:var(--text);}
.mega-col ul a:hover{color:var(--cyan);}
.mega-promo{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:26px;}
.mega-promo h3{font-size:19px;font-weight:800;margin:6px 0 10px;}
.mega-promo p{font-size:13px;color:var(--muted);margin-bottom:18px;}
.mega-contact{margin-top:20px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted);}
.mega-contact i{width:16px;color:var(--cyan);margin-right:8px;}
.mega-social{display:flex;gap:10px;margin-top:18px;}
.mega-social a{width:36px;height:36px;border-radius:9px;border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);}
.mega-social a:hover{color:#fff;border-color:var(--social);}

/* ===== PAGE INTRO (subpages) ===== */
.page-intro{padding:64px 0 20px;min-height:560px;display:flex;align-items:center;}
.page-intro > .wrap{width:100%;}
.page-intro h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;line-height:1.15;margin-bottom:14px;}
.page-intro p{color:var(--muted);font-size:16px;max-width:600px;}
@media(max-width:800px){.page-intro{min-height:420px;}}
.book-a-call-hero{position:relative;padding:84px 0 30px;min-height:560px;overflow:hidden;
  background-color:var(--bg);background-image:url('book-a-call-hero-bg-v1.png');
  background-size:cover;background-position:center right;background-repeat:no-repeat;}
.book-a-call-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.97) 30%,rgba(12,8,24,.80) 50%,rgba(12,8,24,.20) 76%,rgba(12,8,24,.08) 100%);
  pointer-events:none;}
.book-a-call-hero > .wrap{position:relative;z-index:1;width:100%;}
.book-a-call-hero h1{max-width:760px;text-shadow:0 2px 24px rgba(6,3,18,.38);}
.book-a-call-hero p{max-width:620px;color:#b9bdd0;}
@media(max-width:800px){
  .book-a-call-hero{min-height:520px;background-position:68% center;}
  .book-a-call-hero::before{background:linear-gradient(90deg,rgba(12,8,24,.99) 0%,rgba(12,8,24,.95) 62%,rgba(12,8,24,.62) 100%);}
}
.digital-transformation-hero{position:relative;padding:84px 0 30px;min-height:560px;overflow:hidden;
  background-color:var(--bg);background-image:url('digital-transformation-hero-v3.png');
  background-size:cover;background-position:center right;background-repeat:no-repeat;}
.digital-transformation-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.96) 28%,rgba(12,8,24,.78) 49%,rgba(12,8,24,.18) 76%,rgba(12,8,24,.08) 100%);
  pointer-events:none;}
.digital-transformation-hero > .wrap{position:relative;z-index:1;width:100%;}
.digital-transformation-hero h1{max-width:820px;text-shadow:0 2px 24px rgba(6,3,18,.38);}
.digital-transformation-hero .hero-title-line{display:block;white-space:nowrap;}
.digital-transformation-hero p{max-width:620px;color:#b9bdd0;}
@media(max-width:800px){
  .digital-transformation-hero{min-height:520px;background-position:66% center;}
  .digital-transformation-hero::before{background:linear-gradient(90deg,rgba(12,8,24,.98) 0%,rgba(12,8,24,.93) 58%,rgba(12,8,24,.58) 100%);}
  .digital-transformation-hero .hero-title-line{white-space:normal;}
}
.services-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('services-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.services-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.services-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.services-hero{min-height:420px;}}
.products-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('products-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.products-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.92) 34%,rgba(12,8,24,.62) 52%,rgba(12,8,24,.12) 82%);
  pointer-events:none;}
.products-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.products-hero{min-height:420px;}}
.domains-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('domains-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.domains-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.domains-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.domains-hero{min-height:420px;}}
.audit-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('audit-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.audit-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.audit-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.audit-hero{min-height:420px;}}
.careers-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('careers-hero-bg-v5.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
@media(max-width:800px){.careers-hero{min-height:420px;}}
.careers-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.careers-hero > .wrap{position:relative;z-index:1;width:100%;}
.marketplace-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('marketplace-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.marketplace-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.marketplace-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.marketplace-hero{min-height:420px;}}
.ecosystems-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('ecosystems-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.ecosystems-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.ecosystems-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.ecosystems-hero{min-height:420px;}}
.talk-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('talk-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.talk-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.talk-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.talk-hero{min-height:420px;}}
.portfolio-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('portfolio-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.portfolio-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.portfolio-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.portfolio-hero{min-height:420px;}}
.contact-hero{position:relative;padding:84px 0 30px;min-height:560px;display:flex;align-items:center;background-color:var(--bg);
  background-image:url('contact-hero-bg-v2.png');background-size:cover;background-position:right center;
  background-repeat:no-repeat;overflow:hidden;}
.contact-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,8,24,.75) 35%,rgba(12,8,24,.35) 100%);
  pointer-events:none;}
.contact-hero > .wrap{position:relative;z-index:1;width:100%;}
@media(max-width:800px){.contact-hero{min-height:420px;}}
.breadcrumb{font-size:12px;color:var(--muted-dim);margin-bottom:18px;}
.breadcrumb a{color:var(--cyan);}

/* ===== HERO (video, index only) ===== */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;padding:60px 0;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,24,.55) 0%,rgba(12,8,24,.75) 60%,rgba(12,8,24,.95) 100%);z-index:1;}
.hero-content{position:relative;z-index:2;max-width:720px;}
.hero h1{font-size:clamp(32px,5vw,54px);font-weight:800;line-height:1.1;margin-bottom:18px;}
.hero .lede{font-size:17px;color:#dfe1ea;max-width:600px;margin-bottom:10px;}
.hero .lede strong{color:#fff;}
.hero .reassure{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:19px;color:#fff;margin:20px 0;padding:14px 20px;border-left:3px solid var(--cyan);background:rgba(255,255,255,.04);border-radius:0 10px 10px 0;}
.hero-ctas{display:flex;gap:16px;margin:26px 0 36px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:32px;flex-wrap:wrap;}
.hero-stats .stat b{display:block;font-family:'Instrument Sans',sans-serif;font-size:15px;color:#fff;}
.hero-stats .stat span{font-size:11px;color:#c7c9d6;text-transform:uppercase;letter-spacing:1px;}
.trust-micro{margin-top:18px;font-size:13px;color:#c7c9d6;}
.trust-micro b{color:#fff;}

/* ===== PHILOSOPHY STRIP ===== */
.phil-strip{padding:26px 0;background:var(--bg-alt);border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);text-align:center;}
.phil-strip p{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:16px;color:#fff;max-width:820px;margin:0 auto;}
.phil-strip .grad-text{font-weight:800;}

/* ===== ABOUT ===== */
.about p{color:var(--muted);font-size:16px;max-width:760px;}
/* Text-only left-aligned inside the 1180px .wrap, this section used to leave roughly half
   a wide desktop viewport as dead black space beside the paragraph — the only section on
   the page with nothing to fill its own width. The ladder gives it a second column to earn. */
.approach-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}
@media(max-width:900px){.approach-grid{grid-template-columns:1fr;gap:40px;}.ladder{justify-self:center;}}
/* The ladder is narrower than the column grid gives it, so left-aligned (the default grid
   stretch) it hugged the paragraph and left a gap on the far right instead. justify-self
   sizes it to its own content and pushes that content to the column's right edge instead. */
.ladder{position:relative;display:flex;flex-direction:column;gap:6px;justify-self:end;}
/* One accent color, not four — a single cyan thread ties the four steps together instead
   of cycling through the palette, matching the cyan used for every eyebrow label sitewide. */
.ladder::before{
  content:'';position:absolute;left:27px;top:38px;bottom:38px;width:2px;
  background:var(--cyan);opacity:.3;
}
.ladder-step{position:relative;display:flex;align-items:center;gap:18px;padding:10px 0;}
.ladder-icon{
  flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),
             conic-gradient(var(--cyan) 0 78%,var(--panel-border) 0);
  color:var(--cyan);font-size:19px;box-shadow:0 0 0 6px var(--bg);position:relative;z-index:1;
}
.ladder-tag{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-dim);}
.ladder-step h4{font-size:16px;font-weight:700;color:#fff;margin-top:2px;}
@media(max-width:480px){
  .ladder-icon{width:46px;height:46px;font-size:16px;box-shadow:0 0 0 5px var(--bg);}
  .ladder::before{left:22px;}
  .ladder-step h4{font-size:14.5px;}
}

/* ===== CAPABILITY CHIPS (homepage teaser) ===== */
.chip-row{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 28px;}
.chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:10px 18px 10px 12px;}
.chip i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--purple);font-size:13px;color:#fff;flex:none;}
.chip span{font-size:13px;font-weight:700;color:var(--text);}

/* ===== MULTILINGUAL DELIVERY ===== */
.global-delivery-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);gap:72px;align-items:center;}
.global-delivery-copy h2{font-size:clamp(30px,3.5vw,44px);font-weight:800;line-height:1.12;max-width:650px;}
.global-delivery-copy > p:not(.pull){color:var(--muted);font-size:15px;margin-top:18px;max-width:650px;}
.global-delivery-copy .pull{font-size:clamp(18px,2vw,23px);margin:32px 0 20px;}
.global-delivery-copy .global-delivery-note{font-size:14px;margin-top:0;}
.language-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start;}
.language-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px 16px;}
.language-card span{font-size:14px;font-weight:700;color:var(--text);}
.language-flag{font-size:22px;line-height:1;flex:none;filter:saturate(.55) brightness(.88) contrast(.92);}
@media(max-width:980px){
  .global-delivery-layout{grid-template-columns:1fr;gap:42px;align-items:start;}
  .global-delivery-copy h2,.global-delivery-copy > p:not(.pull){max-width:760px;}
  .language-grid{max-width:680px;width:100%;}
}
@media(max-width:420px){
  .language-grid{grid-template-columns:1fr;}
}

/* ===== PRODUCTS ===== */
.build-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:1000px){.build-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.build-grid{grid-template-columns:1fr;}}
/* display:block added because these cards are now sometimes <a> tags (linking to a
   dedicated service page) and sometimes plain <div>s (no dedicated page yet) — anchors
   default to inline, which would collapse the grid cell, so this keeps both tag types
   laying out identically. */
.build-card{display:block;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:26px 22px;transition:border-color .25s,transform .25s;}
.build-card:hover{border-color:var(--purple);transform:translateY(-3px);}
.build-card h4{font-size:15px;font-weight:700;margin-bottom:6px;}
.build-card p{font-size:13px;color:var(--muted);}
/* Same HUD-ring icon treatment as .svc-card i on the Services page — conic-gradient gauge ring
   (the site's established .score-ring motif) punched out to the panel color at center, so the two
   product-family card grids read as one consistent visual system. */
.build-card i{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),
             conic-gradient(var(--purple) 0 78%,var(--panel-border) 0);
  color:var(--purple);font-size:17px;margin-bottom:14px;
  box-shadow:0 0 0 0 currentColor;transition:box-shadow .25s,transform .25s;
}
.build-card:hover i{box-shadow:0 0 14px -2px currentColor;transform:scale(1.08);}
.build-card i.c-cyan{color:var(--cyan);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--cyan) 0 78%,var(--panel-border) 0);}
.build-card i.c-blue{color:var(--blue);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--blue) 0 78%,var(--panel-border) 0);}
.build-card i.c-pink{color:var(--pink);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--pink) 0 78%,var(--panel-border) 0);}

/* ===== SPLIT / PANEL SECTIONS ===== */
.panel-section{background:var(--bg-alt);border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);}
.lean-bg{position:relative;background-color:var(--bg-alt);background-image:url('lean-model-bg.jpg');
  background-size:cover;background-position:left center;background-repeat:no-repeat;overflow:hidden;}
.lean-bg::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,10,32,.5) 0%,rgba(16,10,32,.9) 45%,rgba(16,10,32,.97) 100%);
  pointer-events:none;}
.lean-bg > .wrap{position:relative;z-index:1;}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:30px;}}
.split h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;line-height:1.15;}
.split .body p{color:var(--muted);font-size:15px;margin-bottom:14px;}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.tag{font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--panel-border);color:var(--muted);}

/* ===== PORTFOLIO ===== */
.port-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.port-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.port-grid{grid-template-columns:1fr;}}
.port-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);background:var(--panel);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.port-card:hover{transform:translateY(-5px);border-color:rgba(152,88,255,.55);box-shadow:0 18px 42px rgba(0,0,0,.28);}
.port-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);border-bottom:1px solid var(--panel-border);}
.port-thumb img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;transition:transform .45s ease;}
.port-card:hover .port-thumb img{transform:scale(1.035);}
.port-card .info{padding:14px 16px;}
.port-card .info span{font-size:11px;color:var(--muted-dim);text-transform:uppercase;letter-spacing:1px;}
.port-card .info h4{font-size:14px;font-weight:700;margin-top:4px;}

/* ===== C STUDIO TALK (BLOG) ===== */
.talk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.talk-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.talk-grid{grid-template-columns:1fr;}}
.talk-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s;}
.talk-card:hover{border-color:var(--purple);transform:translateY(-3px);}
.talk-card .talk-tag{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;}
.talk-card h4{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.3;}
.talk-card p{font-size:13px;color:var(--muted);margin-bottom:16px;flex:1;}
.talk-card .talk-meta{font-size:11.5px;color:var(--muted-dim);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.talk-card a.talk-link{color:var(--cyan);font-size:13px;font-weight:700;text-decoration:none;}
.talk-card a.talk-link:hover{text-decoration:underline;}

.talk-article{max-width:720px;margin:0 auto;}
.talk-article .talk-meta{font-size:12px;color:var(--muted-dim);margin-bottom:22px;display:flex;align-items:center;gap:8px;}
.talk-article .talk-body p{color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:18px;}
.talk-article .talk-body h3{font-size:20px;font-weight:700;margin:32px 0 12px;color:#fff;}
.talk-article .talk-source{font-size:12.5px;color:var(--muted-dim);margin-top:30px;padding-top:20px;border-top:1px solid var(--panel-border);}
.talk-article .talk-source a{color:var(--cyan);}
.talk-tag.guest{color:var(--pink);}

.talk-share{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:34px;padding-top:24px;border-top:1px solid var(--panel-border);}
.talk-share span.label{font-size:12.5px;color:var(--muted-dim);margin-right:2px;}
.talk-share a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--panel-border);color:var(--muted);transition:border-color .2s,color .2s,transform .2s;}
.talk-share a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);}
.talk-share a.discuss{width:auto;height:auto;border-radius:999px;padding:8px 16px;gap:8px;color:#fff;
  border-color:var(--panel-border);font-size:13px;font-weight:700;}
.talk-share a.discuss:hover{border-color:var(--purple);color:#fff;background:rgba(139,63,242,.15);}

/* ===== WHY CHOOSE US ===== */
.why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:56px;}
@media(max-width:800px){.why-grid{grid-template-columns:1fr;}}
.why-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:26px;}
.why-card h4{font-size:16px;font-weight:700;margin-bottom:8px;}
.why-card p{font-size:14px;color:var(--muted);}
.stat-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:32px;}
.stat-bar .stat{text-align:center;flex:1;min-width:120px;}
.stat-bar .stat b{display:block;font-family:'Instrument Sans',sans-serif;font-size:28px;font-weight:800;}
.stat-bar .stat span{font-size:12px;color:var(--muted-dim);text-transform:uppercase;letter-spacing:1px;}

/* ===== HEADED (vision) ===== */
.headed{border-radius:24px;background:radial-gradient(circle at 20% 30%,rgba(139,63,242,.35),transparent 55%),radial-gradient(circle at 85% 70%,rgba(51,214,224,.25),transparent 50%),#100a20;border:1px solid var(--panel-border);padding:64px 54px;}
@media(max-width:700px){.headed{padding:40px 24px;}}
.headed .eyebrow{color:var(--pink);}
.headed h2{font-size:clamp(26px,4vw,40px);font-weight:800;max-width:680px;margin-bottom:18px;}
.headed p{color:var(--muted);font-size:16px;max-width:640px;margin-bottom:12px;}
.flow{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.flow div{flex:1;min-width:150px;background:rgba(255,255,255,.04);border:1px solid var(--panel-border);border-radius:12px;padding:16px;font-size:13px;color:var(--muted);}
.flow div b{display:block;color:#fff;font-family:'Instrument Sans',sans-serif;font-size:14px;margin-bottom:5px;}
.vision-mark{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.vision-mark img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(51,214,224,.5));}
.vision-mark span{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.2px;}

/* ===== WORLD CLOCKS ===== */
.clocks-grid{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;}
.clock-card{display:flex;flex-direction:column;align-items:center;gap:14px;}
.clock-face{position:relative;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.06),transparent 55%),var(--panel);
  border:1px solid var(--panel-border);
  box-shadow:0 0 34px -10px rgba(51,214,224,.4),inset 0 0 22px rgba(0,0,0,.45);}
.clock-tick{position:absolute;top:50%;left:50%;width:2px;height:9px;background:var(--muted-dim);
  transform:translate(-50%,-50%) rotate(calc(var(--a) * 1deg)) translateY(-64px);border-radius:2px;}
.clock-tick.major{width:3px;height:12px;background:var(--cyan);}
.hand{position:absolute;left:50%;top:50%;transform-origin:50% 100%;border-radius:3px;}
.hand.hour{width:5px;height:38px;margin-left:-2.5px;margin-top:-38px;background:#fff;}
.hand.minute{width:4px;height:54px;margin-left:-2px;margin-top:-54px;background:#fff;}
.hand.second{width:2px;height:60px;margin-left:-1px;margin-top:-60px;background:var(--cyan);}
.clock-center{position:absolute;left:50%;top:50%;width:10px;height:10px;background:var(--cyan);
  border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--cyan);}
.clock-digital{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:.5px;}
.clock-city{font-family:'Instrument Sans',sans-serif;font-size:16px;font-weight:800;color:#fff;}
.clock-country{font-size:12px;color:var(--muted-dim);margin-top:-10px;}

/* ===== TECH STRIP ===== */
.tech-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.tech-pill{font-size:13px;font-weight:700;color:var(--muted);border:1px solid var(--panel-border);padding:9px 16px;border-radius:999px;}
.tech-pill.new{color:#fff;border-color:var(--purple);background:rgba(139,63,242,.12);}

/* ===== CLIENTS ===== */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:800px){.trust-row{grid-template-columns:repeat(2,1fr);}}
.trust-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:20px 10px;
  transition:border-color .2s,transform .2s;}
.trust-logo:hover{border-color:var(--purple);transform:translateY(-2px);}
.trust-logo i{font-size:17px;color:var(--muted-dim);}
.trust-logo span{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.3px;color:var(--muted);text-align:center;}
/* Real logo marks vary a lot in native aspect ratio (a tall wordmark-under-icon lockup vs
   a wide flat one) — fix the height and let width float, so every card reads at the same
   visual scale regardless of the source image's shape. */
.trust-logo img{height:44px;width:auto;max-width:100%;object-fit:contain;}
@media(max-width:480px){.trust-logo img{height:36px;}}

/* ===== SECURITY / DESIGN ===== */
.sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);}
@media(max-width:800px){.sd-grid{grid-template-columns:1fr;}}
.sd-col{padding:44px 38px;}
.sd-col.security{background:linear-gradient(160deg,rgba(58,141,255,.12),transparent);border-right:1px solid var(--panel-border);}
.sd-col.design{background:linear-gradient(160deg,rgba(255,77,157,.12),transparent);}
.sd-col .icon-lg{font-size:24px;margin-bottom:16px;color:var(--cyan);}
.sd-col.design .icon-lg{color:var(--pink);}
.sd-col h3{font-size:20px;font-weight:800;margin-bottom:12px;}
.sd-col p{color:var(--muted);font-size:14px;}

/* ===== CLOSING CTA ===== */
.closing{text-align:center;}
.closing .wrap{max-width:820px;}
.closing h2{font-size:clamp(26px,4vw,40px);font-weight:800;margin-bottom:18px;}
.closing p{color:var(--muted);font-size:16px;margin-bottom:26px;}
.closing .tagline{margin-top:40px;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:17px;color:#fff;}

/* ===== PRICING ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:800px){.price-grid{grid-template-columns:1fr;}}
/* Free-vs-paid comparison variant (audit.html, domains.html "Two Ways to Use This").
   Used to be an inline style="grid-template-columns:1fr 1fr" on individual pages, which
   overrode the media query above and stayed 2-column on phones. Centralised here instead. */
.price-grid-2{grid-template-columns:1fr 1fr;max-width:820px;margin:0 auto;}
@media(max-width:640px){.price-grid-2{grid-template-columns:1fr;}}
/* Same fix, applied to .why-grid: contact.html needed a 2-card variant (Our Office / Open
   Hours) and had it as an inline style="grid-template-columns:1fr 1fr", which — like the
   price-grid case above — outranks the .why-grid media query at 800px and stayed 2-column
   all the way down to a phone. Centralised here with its own collapse instead. */
.why-grid-2{grid-template-columns:1fr 1fr;max-width:760px;margin-left:auto;margin-right:auto;}
@media(max-width:700px){.why-grid-2{grid-template-columns:1fr;}}
.price-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:32px;position:relative;}
.price-card.popular{border-color:var(--purple);}
.price-card .badge{position:absolute;top:-13px;left:24px;background:var(--purple);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.5px;}
.price-card h4{font-size:16px;font-weight:700;margin-bottom:6px;}
.price-card .price{font-family:'Instrument Sans',sans-serif;font-size:26px;font-weight:800;margin:14px 0;}
.price-card .price span{font-size:13px;color:var(--muted-dim);font-weight:500;}
.price-card ul{list-style:none;margin:16px 0 22px;}
.price-card ul li{font-size:13px;color:var(--muted);margin-bottom:8px;}
.price-card ul li i{color:var(--cyan);margin-right:8px;}

/* ===== SERVICES ===== */
/* 3 columns, not 4 — 9 cards divides evenly into 3 rows of 3 with no orphaned card stranded
   alone in a mostly-empty last row (which is what 4 columns did once the 9th card was added). */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr;}}
/* Modifier for grids with a card count that isn't a multiple of 3 (e.g. 4 cards) —
   balances the layout as 2 columns instead of leaving a lone card in row 2. */
.svc-grid-2col{grid-template-columns:repeat(2,1fr);}
@media(max-width:520px){.svc-grid-2col{grid-template-columns:1fr;}}
.svc-card{display:block;background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:22px;transition:border-color .25s,transform .25s;}
.svc-card:hover{border-color:var(--purple);transform:translateY(-3px);}
.svc-card h4{font-size:14px;font-weight:700;margin-bottom:6px;}
.svc-card p{font-size:13px;color:var(--muted);}
/* HUD-ring icon treatment: reuses the exact conic-gradient gauge technique already established
   by .score-ring on the audit page (the site's most distinctive tech motif) instead of inventing
   a new container shape. A conic-gradient ring in the accent color, punched out in the middle by
   a radial-gradient back to the panel color (both as background layers, so nothing sits on top of
   the Font Awesome glyph's own ::before content) — reads as a dashboard/gauge accent consistent
   with the rest of the site, rather than a generic colored badge. */
.svc-card i{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),
             conic-gradient(var(--purple) 0 78%,var(--panel-border) 0);
  color:var(--purple);font-size:17px;margin-bottom:16px;
  box-shadow:0 0 0 0 currentColor;transition:box-shadow .25s,transform .25s;
}
.svc-card:hover i{box-shadow:0 0 14px -2px currentColor;transform:scale(1.08);}
.svc-card i.c-cyan{color:var(--cyan);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--cyan) 0 78%,var(--panel-border) 0);}
.svc-card i.c-blue{color:var(--blue);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--blue) 0 78%,var(--panel-border) 0);}
.svc-card i.c-pink{color:var(--pink);background:radial-gradient(circle,var(--panel) 0 64%,transparent 65%),conic-gradient(var(--pink) 0 78%,var(--panel-border) 0);}

/* ===== DOMAIN CTA ===== */
.domain-box{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:40px;text-align:center;}
@media(max-width:480px){.domain-box{padding:26px 18px;}}
.domain-search{display:flex;max-width:520px;margin:22px auto 14px;border-radius:10px;overflow:hidden;border:1px solid var(--panel-border);}
.domain-search input{flex:1;min-width:0;background:var(--bg-alt);border:none;padding:14px 16px;color:#fff;font-size:14px;}
.domain-search button{background:var(--purple);border:none;padding:14px 22px;color:#fff;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap;}
.domain-search button:hover{background:#7a35d9;}
/* Below ~480px an input + full-text button side by side no longer fits without squeezing
   the input to near-nothing — stack them instead of letting the row overflow. */
@media(max-width:480px){
  .domain-search{flex-direction:column;border-radius:10px;}
  .domain-search input,.domain-search button{width:100%;}
  .domain-search button{justify-content:center;}
}
.ext-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.ext-row span{font-size:12px;color:var(--muted-dim);border:1px solid var(--panel-border);padding:5px 10px;border-radius:999px;}

.name-tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:999px;padding:4px;margin:0 auto 4px;}
.name-tab{background:none;border:none;padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:.2s;}
.name-tab.active{background:var(--purple);color:#fff;}
.name-selects{display:flex;flex-wrap:wrap;gap:10px;max-width:520px;margin:18px auto 0;}
.name-selects select{flex:1;min-width:140px;background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:10px;padding:12px 14px;color:#fff;font-size:13px;font-family:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239aa0b4' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
.name-selects select:focus{outline:none;border-color:var(--purple);}
.name-selects select option{background:var(--bg-alt);}
.name-suggestions{max-width:520px;margin:18px auto 0;display:flex;flex-direction:column;gap:10px;}
.name-suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:10px;padding:12px 16px;text-align:left;}
.name-suggestion .name-text{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:14px;color:#fff;}
.name-suggestion .name-status{font-size:12px;color:var(--muted);white-space:nowrap;}
.name-suggestion .name-status i{margin-right:6px;}
.name-suggestion .name-status.available i{color:var(--cyan);}
.name-suggestion .name-status.taken i{color:var(--pink);}

/* ===== LEAD GATE (email + mobile capture — required before any free tool result) ===== */
.lead-gate-overlay{position:fixed;inset:0;background:rgba(6,4,14,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
.lead-gate-overlay.open{display:flex;}
.lead-gate{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:36px;max-width:420px;width:100%;text-align:center;position:relative;}
.lead-gate-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;}
.lead-gate-close:hover{color:#fff;}
.lead-gate h3{font-family:'Instrument Sans',sans-serif;font-size:20px;font-weight:800;margin:6px 0 8px;}
.lead-gate>p{color:var(--muted);font-size:13px;margin-bottom:22px;}
.lead-gate-form{display:flex;flex-direction:column;gap:10px;}
.lead-gate-form input{background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:10px;padding:13px 14px;color:#fff;font-size:14px;width:100%;}
.lead-gate-form input:focus{outline:none;border-color:var(--purple);}
.lead-gate-form button{margin-top:6px;width:100%;justify-content:center;}
.lead-gate-fine{font-size:11px;color:var(--muted-dim);margin-top:16px;}
.lead-gate-fine + .lead-gate-fine{margin-top:6px;}
.gate-locked{filter:blur(5px);opacity:.5;pointer-events:none;user-select:none;}
/* No flex-wrap here originally — fine for the sample "Welcome back" text, but this line
   carries a real user-typed email address with no length limit, so a longer one on a
   narrow phone had nowhere to go but overflow the box. Wraps and re-centers instead. */
.remember-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);margin-top:14px;text-align:center;}
.remember-banner i{color:var(--cyan);}
.remember-banner a{color:var(--cyan);text-decoration:underline;}

/* ===== DOMAIN MARKETPLACE ===== */
.account-status-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;}
/* Same fix as .remember-banner above: this renders "Signed in as {name} ({email})", both
   free-typed at registration — no flex-wrap meant a longer name/email pair had no way to
   break and just ran off the edge of the screen on a phone. */
.account-status-bar .account-welcome{font-size:13px;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;text-align:center;}
.account-status-bar .account-welcome i{color:var(--cyan);}
.account-status-bar .account-welcome a{color:var(--cyan);text-decoration:underline;}

.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.listing-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.listing-grid{grid-template-columns:1fr;}}
.listing-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;}
.listing-card .listing-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cyan);border:1px solid var(--panel-border);padding:4px 10px;border-radius:999px;margin-bottom:14px;}
.listing-card .listing-domain{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:18px;color:#fff;margin-bottom:8px;}
.listing-card .listing-price{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:22px;margin-bottom:8px;}
.listing-card .listing-price span{font-size:12px;color:var(--muted-dim);font-weight:500;}
.listing-card .listing-meta{font-size:12px;color:var(--muted);margin-bottom:20px;}
.listing-card .listing-meta i{color:var(--cyan);margin-right:6px;}
.listing-card button{margin-top:auto;width:100%;justify-content:center;}

.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:700px){.cta-split{grid-template-columns:1fr;}}
.cta-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:32px;text-align:center;}
.cta-card h4{font-family:'Instrument Sans',sans-serif;font-size:18px;font-weight:800;margin-bottom:10px;}
.cta-card p{font-size:13px;color:var(--muted);margin-bottom:22px;}

.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.review-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.review-grid{grid-template-columns:1fr;}}
.review-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:24px;}
.review-stars{color:var(--cyan);font-size:13px;margin-bottom:14px;letter-spacing:2px;}
.review-stars .empty{color:var(--panel-border);}
.review-card p{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.55;}
.review-card .review-name{font-weight:700;font-size:13px;color:#fff;}
.review-card .review-meta{font-size:11px;color:var(--muted-dim);margin-top:2px;}

.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
@media(max-width:800px){.directory-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.directory-grid{grid-template-columns:1fr;}}
.directory-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px 18px;}
.directory-card .dir-name{font-weight:700;font-size:13.5px;color:#fff;}
.directory-card .dir-domain{font-size:12px;color:var(--cyan);margin-top:4px;}
.directory-card .dir-cat{font-size:10.5px;color:var(--muted-dim);margin-top:8px;text-transform:uppercase;letter-spacing:.5px;}

/* ===== GENERIC MODAL SYSTEM (marketplace: account, sell, source, request-to-buy, review) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(6,4,14,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:36px;max-width:440px;width:100%;text-align:center;position:relative;max-height:88vh;overflow-y:auto;}
.modal-card.wide{max-width:560px;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;}
.modal-close:hover{color:#fff;}
.modal-card h3{font-family:'Instrument Sans',sans-serif;font-size:20px;font-weight:800;margin:6px 0 8px;}
.modal-card>p{color:var(--muted);font-size:13px;margin-bottom:22px;}
.modal-tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:999px;padding:4px;margin:0 auto 20px;}
.modal-tab{background:none;border:none;padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;}
.modal-tab.active{background:var(--purple);color:#fff;}
.modal-form{display:flex;flex-direction:column;gap:10px;text-align:left;}
.modal-form label{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:-4px;}
.modal-form input,.modal-form select,.modal-form textarea{background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:10px;padding:12px 14px;color:#fff;font-size:14px;font-family:inherit;width:100%;}
.modal-form textarea{resize:vertical;min-height:70px;}
.modal-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239aa0b4' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{outline:none;border-color:var(--purple);}
.modal-form button{margin-top:6px;width:100%;justify-content:center;}
.modal-fine{font-size:11px;color:var(--muted-dim);margin-top:16px;}
.modal-note{background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:10px;padding:14px 16px;font-size:12.5px;color:var(--muted);text-align:left;margin-bottom:16px;}
.modal-note strong{color:#fff;}
.form-msg{font-size:12px;text-align:left;display:none;}
.form-msg.error{color:var(--pink);}
.form-msg.success{color:var(--cyan);}

/* ===== HIRING ===== */
.hire-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
@media(max-width:800px){.hire-grid{grid-template-columns:1fr;}}
.hire-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);position:relative;background:var(--panel);}
.hire-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(6,3,18,.82) 100%);pointer-events:none;}
.hire-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease;}
.hire-card:hover img{transform:scale(1.025);}
.hire-card span{position:absolute;z-index:1;bottom:14px;left:14px;font-weight:700;font-size:14px;color:#fff;background:rgba(8,5,20,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:7px 12px;border-radius:8px;}

/* ===== FOOTER ===== */
footer{background:var(--bg-alt);border-top:1px solid var(--panel-border);position:relative;padding:64px 0 30px;}
footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--gradient);}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr 1.1fr;gap:40px;margin-bottom:44px;}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
footer .logo img{height:58px;margin-bottom:14px;}
footer .about p{color:var(--muted);font-size:14px;max-width:280px;}
footer h5{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-dim);margin-bottom:16px;}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
footer ul a{font-size:14px;color:var(--muted);transition:color .2s;}
footer ul a:hover{color:var(--cyan);}
footer form{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
footer form input,footer form textarea{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:11px 13px;color:#fff;font-size:13px;font-family:inherit;}
footer form .form-row{display:flex;gap:10px;}
footer form .form-row input{flex:1;min-width:0;}
.newsletter{display:flex;gap:0;margin-top:10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:4px;}
.newsletter input{flex:1;min-width:0;background:transparent;border:none;padding:9px 14px;color:#fff;font-size:13px;}
.newsletter input:focus{outline:none;}
.newsletter button{background:var(--purple);border:none;border-radius:999px;padding:0 20px;color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:background .2s;}
.newsletter button:hover{background:#7a35d9;}
.foot-social{display:flex;gap:10px;margin-top:16px;}
.foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);transition:color .2s,border-color .2s,background .2s;}
.foot-social a:hover{color:#fff;border-color:transparent;background:var(--gradient);}
.foot-bottom{border-top:1px solid var(--panel-border);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted-dim);}
.back-to-top{display:flex;align-items:center;gap:8px;color:var(--muted-dim);font-size:13px;border:1px solid var(--panel-border);border-radius:999px;padding:8px 16px;transition:color .2s,border-color .2s;}
.back-to-top:hover{color:#fff;border-color:var(--purple);}

.float-stack{position:fixed;bottom:26px;right:26px;display:flex;flex-direction:column;gap:14px;z-index:60;}
.float-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);}
.wa{background:#1fbf5c;}

/* ===== PROCESS STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}
/* 6-step variant (marketplace.html "How It Works"). Used to be an inline
   style="grid-template-columns:repeat(3,1fr)", which overrode the media queries above and
   stayed locked to 3 columns on phones. Centralised here with its own responsive collapse. */
.steps.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:700px){.steps.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.steps.cols-3{grid-template-columns:1fr;}}
.step{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:22px 18px;}
.step .step-num{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:13px;color:var(--cyan);margin-bottom:10px;display:block;}
.step h4{font-size:14px;font-weight:700;margin-bottom:6px;}
.step p{font-size:12.5px;color:var(--muted);}

/* ===== LEGACY TIMELINE (Est. 2001) ===== */
.legacy-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;margin-top:10px;}
.legacy-timeline + .legacy-timeline{margin-top:30px;}
.legacy-timeline::before{content:'';position:absolute;top:11px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));opacity:.5;}
@media(max-width:900px){.legacy-timeline{grid-template-columns:repeat(2,1fr);}.legacy-timeline::before{display:none;}}
@media(max-width:520px){.legacy-timeline{grid-template-columns:1fr;}}
.legacy-item{position:relative;padding-top:26px;}
.legacy-item::before{content:'';position:absolute;top:6px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.legacy-year{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:15px;color:var(--cyan);margin-bottom:8px;display:block;}
.legacy-item h4{font-size:14px;font-weight:700;margin-bottom:6px;color:#fff;}
.legacy-item p{font-size:12.5px;color:var(--muted);line-height:1.5;}
.legacy-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:44px;padding:14px 24px;
  border:1px solid var(--panel-border);border-radius:999px;background:var(--panel);max-width:fit-content;
  margin-left:auto;margin-right:auto;}
.legacy-badge i{color:var(--cyan);}
.legacy-badge span{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:13px;color:#fff;}

/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:16px;max-width:820px;}
.faq-item{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:22px 26px;}
.faq-item h4{font-size:15px;font-weight:700;margin-bottom:8px;}
.faq-item p{font-size:14px;color:var(--muted);}

/* ===== AUDIT TOOL — SCORE CARDS ===== */
.score-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
@media(max-width:1100px){.score-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.score-grid{grid-template-columns:repeat(2,1fr);}}
.score-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:24px 16px;text-align:center;}
.score-card.highlight{border-color:var(--purple);background:linear-gradient(160deg,rgba(139,63,242,.14),var(--panel));}
.score-ring{
  width:76px;height:76px;border-radius:50%;margin:0 auto 14px;position:relative;
  background:conic-gradient(var(--ring-c,var(--cyan)) calc(var(--pct,80)*1%), var(--panel-border) 0);
}
.score-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panel);}
.score-ring span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:17px;color:#fff;}
.score-card h4{font-size:13.5px;font-weight:700;margin-bottom:4px;}
.score-card p{font-size:11.5px;color:var(--muted);}
.sample-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-dim);border:1px solid var(--panel-border);padding:6px 12px;border-radius:999px;margin-bottom:18px;}
.sample-tag i{color:var(--pink);}

/* ===== AUDIT TOOL — QUALIFYING QUESTIONS FORM ===== */
.audit-form{max-width:760px;margin:0 auto;}
.audit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:640px){.audit-form-grid{grid-template-columns:1fr;}}
.audit-form .field{display:flex;flex-direction:column;gap:8px;}
.audit-form label{font-size:12.5px;font-weight:700;color:var(--muted);}
.audit-form input,.audit-form select{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:13px 14px;color:#fff;font-size:14px;font-family:inherit;}
.audit-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239aa0b4' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.audit-form select option{background:var(--bg-alt);}
.audit-form input:focus,.audit-form select:focus{outline:none;border-color:var(--purple);}
.audit-form input[type="date"],.audit-form input[type="time"]{color-scheme:dark;}
.audit-form input[type="date"]::-webkit-calendar-picker-indicator,.audit-form input[type="time"]::-webkit-calendar-picker-indicator{opacity:.8;cursor:pointer;}
.audit-form input[type="date"]::-webkit-calendar-picker-indicator:hover,.audit-form input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.audit-form button{width:100%;justify-content:center;}

/* ===== DYNAMIC QUESTIONNAIRE (contact.html) ===== */
.qform{max-width:760px;margin:0 auto;}
.qform-progress{display:flex;gap:6px;margin-bottom:32px;}
.qform-progress span{flex:1;height:3px;border-radius:999px;background:var(--panel-border);transition:background .3s;}
.qform-progress span.done{background:var(--cyan);}
.qform-step{display:none;}
.qform-step.active{display:block;animation:qformIn .3s ease;}
@keyframes qformIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.qform-question{font-family:'Instrument Sans',sans-serif;font-size:clamp(19px,2.4vw,23px);font-weight:700;margin-bottom:20px;}
.qform-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.qform-choices{grid-template-columns:1fr;}}
.qform-choice{display:block;text-align:left;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px 18px;color:var(--text);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:border-color .2s,background .2s;}
.qform-choice:hover{border-color:var(--purple);}
.qform-choice.selected{border-color:var(--cyan);background:rgba(51,214,224,.08);}
.qform-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;}
.audit-form button.qform-back{width:auto;background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;padding:8px 0;}
.qform-back:hover{color:#fff;}
.audit-form button#qformSubmit{width:auto;margin-left:auto;}
.qform-status{display:none;margin-top:16px;font-size:13.5px;color:var(--muted);text-align:center;}
.qform-status.show{display:block;}
.qform-done{text-align:center;padding:20px 0;}
.qform-done i{font-size:32px;color:var(--cyan);margin-bottom:14px;}
.qform-done h3{font-family:'Instrument Sans',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px;}
.qform-done p{color:var(--muted);font-size:15px;}

/* ===== IMAGE / VIDEO PLACEHOLDER RATIONALE CARDS ===== */
.placeholder-block{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:20px 16px;border:1.5px dashed var(--panel-border);border-radius:inherit;
  background:rgba(255,255,255,.02);height:100%;
}
.placeholder-block i{font-size:20px;color:var(--muted-dim);}
.placeholder-block .ph-label{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.placeholder-block .ph-rationale{font-size:11.5px;color:var(--muted-dim);line-height:1.45;max-width:220px;}

/* ============================================================================
   MOBILE OPTIMISATION PASS — homepage focus
   Layout/spacing/ergonomics only. No copy, no colours, no components changed;
   every rule below is inside a max-width query, so desktop is untouched.
   ============================================================================ */

/* --- Sticky-header anchor offset -------------------------------------------
   The header is position:sticky, so #about / #vision / #clients / #contact all
   scrolled their heading up underneath it. Offset the scroll target by roughly
   the header's height instead. */
section[id],footer[id]{scroll-margin-top:124px;}

/* iOS inflates text in landscape unless told not to. */
html{-webkit-text-size-adjust:100%;}

/* ===== ≤900px — tablets and large phones ===== */
/* 96px logo + 12px padding made a ~120px sticky header that ate a third of a
   tablet viewport before any content appeared. Range-bounded so it can't
   override the existing 64px rule at ≤560px. */
@media(min-width:561px) and (max-width:900px){.logo img{height:72px;}}
@media(max-width:900px){
  section[id],footer[id]{scroll-margin-top:96px;}
  /* Full-bleed edge-to-edge text on the reference banner — it has no .wrap. */
  .banner{padding:10px 18px;font-size:12.5px;line-height:1.45;}
}

/* ===== ≤768px — phones ===== */
@media(max-width:768px){
  /* 100px top + 100px bottom per section is a desktop rhythm; on a phone it
     reads as dead space between every block. */
  section{padding:64px 0;}
  .section-tight{padding:46px 0;}
  .section-head{margin-bottom:32px;}
  .section-head p{font-size:15px;}

  /* HERO — on a phone the full block over the video pushed the CTAs off the first
     screen and left the copy fighting the footage for contrast. The video band now
     ends at the headline; everything below it sits on the page background.
     Grid with both the video and the headline in cell 1/1: the headline sizes the
     row, the video (absolute, but grid-placed, so the cell is its containing block)
     fills exactly that height. .hero-rest drops into row 2, clear of the footage.
     88vh also goes — it only fought the collapsing address bar. */
  .hero{display:grid;grid-template-columns:1fr;min-height:auto;padding:0;align-items:stretch;}
  .hero-content{display:contents;}
  /* Two things matter here:
     - End lines must be explicit. For an absolutely-positioned grid child an `auto`
       end line means the container's padding edge, so `grid-area:1/1` would run the
       video down the full hero instead of stopping at row 1.
     - height stays 100%, never auto. <video> is a replaced element: with height:auto
       it takes its intrinsic height and the `bottom` offset is dropped as
       over-constrained, so it filled only its own aspect ratio — about half the band
       — instead of stretching to it. */
  .hero video,.hero-scrim{grid-area:1/1/2/2;inset:0;width:100%;height:100%;}
  /* The desktop scrim reaches 95% opacity at its bottom edge — over a short mobile
     band that put the headline on what is effectively solid page colour, so it read
     as sitting below the video rather than on it. Lighter, and the copy is centred
     in the band with footage visible above and below it. */
  .hero-scrim{background:linear-gradient(180deg,rgba(12,8,24,.4) 0%,rgba(12,8,24,.55) 45%,rgba(12,8,24,.78) 82%,rgba(12,8,24,.96) 100%);}
  .hero-head{
    grid-area:1/1/2/2;position:relative;z-index:2;
    /* Capped so it stays a band, not a screen, on tall phones. */
    min-height:clamp(250px,40vh,360px);
    display:flex;flex-direction:column;justify-content:center;
    max-width:var(--maxw);width:100%;margin:0 auto;padding:34px 24px;
  }
  .hero-rest{
    grid-row:2;position:relative;z-index:2;
    max-width:var(--maxw);width:100%;margin:0 auto;padding:28px 24px 46px;
  }
  .hero h1{margin-bottom:0;}
  .hero .lede{font-size:16px;}
  .hero .reassure{font-size:17px;padding:12px 16px;margin:18px 0;}
  .hero-ctas{gap:12px;margin:22px 0 0;}

  .phil-strip{padding:22px 0;}
  .phil-strip p{font-size:15px;}
  .about p{font-size:15px;}

  /* Two side-by-side stats need 264px inside the bar's own 32px padding — more
     than a 360px phone has, so all four collapsed into one column of tall rows.
     A fixed 2×2 grid halves the height and keeps them readable. */
  .stat-bar{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;padding:26px 18px;}
  .stat-bar .stat{min-width:0;}
  .stat-bar .stat b{font-size:24px;}

  .sd-col{padding:30px 22px;}
  .split{gap:26px;}
  .headed{padding:36px 22px;}
  .legacy-badge{padding:12px 18px;text-align:center;}
  .legacy-badge span{font-size:12px;}
  .closing .tagline{font-size:15px;margin-top:30px;}

  /* Anything ≥16px stops iOS from zooming the page in on field focus. */
  footer form input,footer form textarea,.newsletter input,
  .audit-form input,.audit-form select,
  .modal-form input,.modal-form select,.modal-form textarea,
  .lead-gate-form input,.domain-search input{font-size:16px;}
  footer{padding:48px 0 26px;}
  .foot-grid{gap:30px;margin-bottom:32px;}
  /* space-between left the three items scattered across two ragged lines. */
  .foot-bottom{justify-content:center;text-align:center;}

  /* Was overlapping the closing CTA and footer buttons on small screens. */
  .float-stack{bottom:16px;right:16px;gap:10px;}
  .float-btn{width:52px;height:52px;font-size:20px;}
}

/* ===== ≤600px — world clocks ===== */
/* Two 150px faces plus a 48px gap don't fit a phone, so the flex row broke to
   one clock per line — four full screens of scrolling. Fixed 2×2 grid with the
   face and every hand scaled by the same 0.787 factor, so the dial keeps its
   exact proportions rather than being squashed. */
@media(max-width:600px){
  .clocks-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 14px;}
  .clock-card{gap:10px;}
  .clock-face{width:118px;height:118px;}
  .clock-tick{height:7px;transform:translate(-50%,-50%) rotate(calc(var(--a) * 1deg)) translateY(-50px);}
  .clock-tick.major{height:9px;}
  .hand.hour{height:30px;margin-top:-30px;}
  .hand.minute{height:42px;margin-top:-42px;}
  .hand.second{height:47px;margin-top:-47px;}
  .clock-center{width:8px;height:8px;}
  .clock-city{font-size:14px;}
  .clock-digital{font-size:12px;}
  /* Menu is scrollable on phones — keep the scroll inside it and clear the
     sticky header rather than running under it. */
  .mega-menu.open{max-height:calc(100vh - 96px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  /* dvh tracks the collapsing address bar; ignored by browsers that lack it. */
  .mega-menu.open{max-height:calc(100dvh - 96px);}
}

/* ===== ≤620px — the three hero CTAs stop fitting one row before the phone
   breakpoints below do. Left alone, "Start a Project" + "View Portfolio" sit
   on one line and "Request a Quote" strands alone on the next — an uneven
   2-then-1 wrap. Stacking all three full width, one per line, reads as a
   deliberate column instead of an accident of wrapping, and gives each a
   proper full-width tap target. */
@media(max-width:620px){
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;justify-content:center;}
}

/* ===== ≤480px — small phones ===== */
@media(max-width:480px){
  .wrap{padding:0 18px;}
  nav.wrap{padding:10px 18px;}
  .logo img{height:58px;}
  section[id],footer[id]{scroll-margin-top:82px;}
  section{padding:54px 0;}
  .section-tight{padding:40px 0;}

  /* .hero-head / .hero-rest aren't .wrap children any more (see ≤768), so they
     need the narrower gutter applied directly. */
  .hero-head{padding:34px 18px;}
  .hero-rest{padding:26px 18px 42px;}

  .chip-row{gap:10px;}
  .chip{padding:9px 14px 9px 10px;}
  .chip span{font-size:12.5px;}
  .stat-bar{padding:22px 14px;}
  .stat-bar .stat b{font-size:22px;}
  .stat-bar .stat span{font-size:11px;letter-spacing:.5px;}
  .flow div{min-width:100%;}
  .vision-mark span{font-size:13px;}
  .why-card,.faq-item{padding:22px 18px;}
  .sd-col{padding:26px 18px;}
  /* Two inputs side by side leave ~140px each — below a comfortable field. */
  footer form .form-row{flex-direction:column;}
  .back-to-top{padding:8px 14px;}
}

/* Respect the OS "reduce motion" setting — mostly a phone/tablet accessibility
   setting, and the hover-lift transitions serve no purpose on touch anyway. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}