/* =========================================================================
   DOMEQ SOLUTIONS — HOMEPAGE
   Loaded only on pages using page-domeq-home.php.

   Everything derives from the tokens in the first block. Change a token
   and the whole page follows.
   ========================================================================= */

:root {
  /* --- Brand --- */
  --ember:   #FF5D3B;   /* primary — every CTA and accent */
  --magenta: #FF3B8B;   /* gradient bridge */
  --violet:  #7C5CFF;   /* depth */
  --mint:    #3DDC97;   /* positive data only */

  --grad: linear-gradient(100deg, var(--ember) 0%, var(--magenta) 46%, var(--violet) 100%);
  --grad-soft: linear-gradient(100deg, rgba(255,93,59,.16), rgba(255,59,139,.14) 46%, rgba(124,92,255,.16));

  /* --- Type --- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Spacing (8pt) --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:140px;

  /* --- Radii --- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- Light theme --- */
:root, :root[data-theme="light"] {
  --bg:#FBFAF9; --bg-alt:#F3F1EF; --surface:#FFFFFF; --surface-2:#FAF9F8;
  --border:rgba(11,10,16,.10); --border-str:rgba(11,10,16,.16);
  --text:#0B0A10; --text-mid:#56526A; --text-dim:#8B8698;
  --shadow-lg:0 2px 4px rgba(11,10,16,.05), 0 32px 64px -24px rgba(11,10,16,.22);
  --glow-op:.55; --noise-op:.035;
}

/* --- Dark theme (default) --- */
:root[data-theme="dark"] {
  --bg:#08070C; --bg-alt:#0D0B13; --surface:#131120; --surface-2:#171524;
  --border:rgba(255,255,255,.09); --border-str:rgba(255,255,255,.16);
  --text:#F6F4F9; --text-mid:#A6A1B8; --text-dim:#6E687F;
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.85);
  --glow-op:1; --noise-op:.06;
}

/* =========================================================================
   RESET — scoped to .domeq-page so it cannot leak into other pages
   ========================================================================= */
.domeq-page *,
.domeq-page *::before,
.domeq-page *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body.domeq-page {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}

/* Film grain — stops large flat areas from looking dead */
body.domeq-page::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:var(--noise-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.domeq-page img,
.domeq-page svg { display:block; max-width:100%; }
.domeq-page a { color:inherit; text-decoration:none; }
.domeq-page button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.domeq-page ul { list-style:none; }
.domeq-page ::selection { background:var(--ember); color:#fff; }

/* Keyboard focus — visible, on brand, never removed */
.domeq-page a:focus-visible,
.domeq-page button:focus-visible {
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Screen-reader-only text */
.domeq-page .screen-reader-text {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link */
.domeq-page .skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 20px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-str); border-radius:var(--r-full);
}
.domeq-page .skip-link:focus { left:var(--s3); top:var(--s3); }

/* WordPress admin bar offsets the fixed nav */
body.admin-bar .nav { top:32px; }
@media screen and (max-width:782px) { body.admin-bar .nav { top:46px; } }

/* =========================================================================
   TYPE — Archivo runs wide and heavy to match the wordmark
   ========================================================================= */
.domeq-page h1, .domeq-page h2,
.domeq-page h3, .domeq-page h4 {
  font-family:var(--font-display); font-weight:700;
  font-variation-settings:'wdth' 112;
  line-height:1.02; letter-spacing:-.035em; color:var(--text);
}
/* Clamp MINIMUMS are the phone size, not the desktop size. Getting this
   backwards is what made headings render at 43px on a 375px screen. */
.domeq-page h1 { font-size:clamp(2.05rem,7.4vw,4.9rem); font-weight:800; letter-spacing:-.045em; line-height:1.06; }
.domeq-page h2 { font-size:clamp(1.6rem,4.8vw,3.3rem); letter-spacing:-.038em; line-height:1.1; }
.domeq-page h3 { font-size:clamp(1.02rem,2vw,1.32rem); letter-spacing:-.022em; line-height:1.28; font-variation-settings:'wdth' 106; }
.domeq-page p { color:var(--text-mid); }

.eyebrow {
  font-family:var(--font-mono); font-size:.71rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:22px; height:1px; background:var(--grad); }
.eyebrow.center { justify-content:center; }

.lead { font-size:clamp(1.02rem,1.45vw,1.17rem); line-height:1.64; max-width:56ch; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s3); }
.domeq-page section { position:relative; padding:var(--s8) 0; }
@media (max-width:700px) { .domeq-page section { padding:var(--s7) 0; } }

.sec-head { max-width:660px; margin-bottom:var(--s6); }
.sec-head h2 { margin:var(--s2) 0 var(--s2); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .lead { margin:0 auto; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-full);
  font-family:var(--font-body); font-weight:500; font-size:.94rem;
  letter-spacing:-.005em; white-space:nowrap;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .3s, border-color .3s;
}
.btn svg { transition:transform .35s var(--ease-out); }
.btn:hover svg { transform:translateX(4px); }
.btn-primary {
  background:var(--grad); color:#fff; box-shadow:0 6px 22px -6px rgba(255,93,59,.5);
  background-size:160% 100%; background-position:0% 50%;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background-position .6s var(--ease);
}
.btn-primary:hover { transform:translateY(-2px); background-position:100% 50%; box-shadow:0 14px 34px -8px rgba(255,59,139,.6); }
.btn-ghost { border:1px solid var(--border-str); color:var(--text); }
.btn-ghost:hover { border-color:var(--text); transform:translateY(-2px); background:var(--surface); }
.btn-lg { padding:17px 34px; font-size:1rem; }

/* =========================================================================
   LOGO LOCKUP
   ========================================================================= */
.logo { display:flex; align-items:center; gap:12px; }
.logo-mark { width:34px; height:34px; flex-shrink:0; }
/* Courses lift in sequence on hover — the mark assembles itself */
.logo-mark rect, .logo-mark circle { transition:transform .55s var(--ease-out); }
.logo:hover .logo-mark .c-mid { transform:translateY(-1px); }
.logo:hover .logo-mark .c-top { transform:translateY(-2px); }
.logo:hover .logo-mark .c-dot { transform:translate(1.5px,-2.5px); }

.logo-text { display:grid; line-height:1; }
.logo-text b {
  font-family:var(--font-display); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:1.24rem; letter-spacing:-.005em; text-transform:uppercase; color:var(--text);
}
.logo-text em {
  font-family:var(--font-mono); font-style:normal; font-size:.52rem;
  letter-spacing:.36em; text-transform:uppercase; color:var(--text-dim); margin-top:5px;
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0;
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background .4s, border-color .4s;
}
.nav.stuck {
  padding:11px 0; background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--border);
}
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.nav-links { display:flex; align-items:center; gap:var(--s4); }
.nav-links a { font-size:.9rem; color:var(--text-mid); position:relative; transition:color .3s; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--grad); transition:width .4s var(--ease-out); }
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:var(--s2); }

.theme-btn {
  width:38px; height:38px; border-radius:var(--r-full); border:1px solid var(--border);
  display:grid; place-items:center;
  transition:background .3s, border-color .3s, transform .5s var(--ease-out);
}
.theme-btn:hover { background:var(--surface); border-color:var(--border-str); transform:rotate(18deg); }
.theme-btn svg { width:17px; height:17px; stroke:var(--text-mid); fill:none; }
:root[data-theme="dark"] .icon-sun { display:block; }
:root[data-theme="dark"] .icon-moon { display:none; }
:root[data-theme="light"] .icon-sun { display:none; }
:root[data-theme="light"] .icon-moon { display:block; }

@media (max-width:980px) { .nav-links, .nav .btn { display:none; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding:180px 0 var(--s7); overflow:hidden; position:relative; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:var(--glow-op); }
.orb-1 { width:600px; height:600px; top:-190px; right:-130px; background:radial-gradient(circle, rgba(255,93,59,.36), transparent 68%); animation:drift1 22s ease-in-out infinite; }
.orb-2 { width:520px; height:520px; top:150px; left:-190px; background:radial-gradient(circle, rgba(124,92,255,.32), transparent 68%); animation:drift2 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-50px,44px); } }
@keyframes drift2 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(56px,-40px); } }

/* Square grid backdrop */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 78% 58% at 50% 32%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 32%, #000 20%, transparent 78%);
}
.hero-in { position:relative; z-index:2; }

.badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 9px; border:1px solid var(--border); border-radius:var(--r-full);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(10px); font-size:.79rem; color:var(--text-mid); margin-bottom:var(--s3);
}
.badge b { color:var(--text); font-weight:600; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--mint); animation:pulse 2.4s infinite; margin-left:5px; }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(61,220,151,.6); }
  70%  { box-shadow:0 0 0 9px rgba(61,220,151,0); }
  100% { box-shadow:0 0 0 0 rgba(61,220,151,0); }
}

.hero h1 { max-width:15ch; margin-bottom:var(--s3); }
/* Signature motion — the headline rises word by word */
.hero h1 .w { display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .w i {
  display:inline-block; font-style:normal;
  transform:translateY(105%); opacity:0;
  transition:transform .9s var(--ease-out), opacity .7s var(--ease-out);
}
.hero h1.lit .w i { transform:none; opacity:1; }

.tagline {
  font-family:var(--font-display); font-weight:600; font-variation-settings:'wdth' 108;
  font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-.03em;
  margin-bottom:var(--s3); color:var(--text);
  display:inline-flex; align-items:center; gap:14px;
}
.tagline::before { content:''; width:34px; height:3px; background:var(--grad); border-radius:2px; }

.hero-cta { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--border); }
.hstat .num { font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108; font-size:clamp(1.7rem,3.1vw,2.4rem); letter-spacing:-.045em; line-height:1; color:var(--text); }
.hstat .lbl { font-size:.81rem; color:var(--text-dim); margin-top:8px; }
@media (max-width:700px) { .hero-stats { grid-template-columns:repeat(2,1fr); gap:var(--s3); } }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee-sec { padding:var(--s5) 0 !important; border-block:1px solid var(--border); background:var(--bg-alt); }
.marquee-label { text-align:center; margin-bottom:var(--s3); }
.marquee-label .eyebrow::before { display:none; }
.marquee {
  display:flex; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display:flex; gap:var(--s7); padding-right:var(--s7); animation:scroll 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes scroll { to { transform:translateX(-100%); } }
.mq-item {
  font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108;
  font-size:1.2rem; letter-spacing:-.03em; white-space:nowrap;
  color:var(--text-dim); opacity:.75; transition:color .3s, opacity .3s;
}
.mq-item:hover { color:var(--text); opacity:1; }

/* =========================================================================
   FLAGSHIP BLOCKS
   ========================================================================= */
.flag { display:grid; grid-template-columns:1fr 1.08fr; gap:var(--s7); align-items:center; }
.flag.rtl .flag-visual { order:-1; }
@media (max-width:940px) {
  .flag { grid-template-columns:1fr; gap:var(--s5); }
  .flag.rtl .flag-visual { order:0; }
}
.flag-badge {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s2);
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-full);
  background:var(--grad-soft); border:1px solid var(--border); color:var(--text);
}
.flag h2 { font-size:clamp(1.55rem,4.2vw,2.75rem); margin-bottom:var(--s2); }
.flag .lead { margin-bottom:var(--s3); }
.flag-list { display:grid; gap:2px; margin:var(--s3) 0; }
.flag-list li { display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border); }
.flag-list li:last-child { border-bottom:0; }
.flag-list .ck { width:19px; height:19px; flex-shrink:0; margin-top:2px; border-radius:50%; background:var(--grad); display:grid; place-items:center; }
.flag-list .ck svg { width:10px; height:10px; stroke:#fff; stroke-width:3.2; fill:none; }
.flag-list .txt { font-size:.92rem; color:var(--text-mid); }
.flag-list .txt b { color:var(--text); font-weight:600; }

/* --- Browser mock --- */
.visual-frame { position:relative; }
.visual-glow { position:absolute; inset:-14% -8%; background:var(--grad); filter:blur(80px); opacity:.22; border-radius:50%; pointer-events:none; }
.browser { position:relative; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .6s var(--ease-out); }
.visual-frame:hover .browser { transform:translateY(-6px); }
.browser-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.dot3 { width:9px; height:9px; border-radius:50%; background:var(--border-str); }
.browser-url { margin-left:10px; flex:1; font-family:var(--font-mono); font-size:.67rem; color:var(--text-dim); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full); padding:5px 12px; }
.browser-body { padding:var(--s3); display:grid; gap:14px; }
.skel { border-radius:6px; background:var(--border); }
.skel.hero-l { height:15px; width:62%; background:var(--grad); opacity:.85; }
.skel.line { height:9px; }
.skel.w80 { width:80%; }
.skel.w55 { width:55%; }
.skel-row { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:6px; }
.skel-card { height:62px; border-radius:10px; border:1px solid var(--border); background:var(--bg); }
.perf-strip { display:flex; gap:10px; margin-top:var(--s2); flex-wrap:wrap; }
.perf { display:flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--bg); font-family:var(--font-mono); font-size:.67rem; color:var(--text-mid); }
.perf .score { color:var(--mint); font-weight:500; }

/* --- LinkedIn post mock --- */
.li-card { position:relative; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:var(--s3); box-shadow:var(--shadow-lg); transition:transform .6s var(--ease-out); }
.visual-frame:hover .li-card { transform:translateY(-6px); }
.li-head { display:flex; align-items:center; gap:12px; margin-bottom:var(--s2); }
.li-av { width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.86rem; }
.li-who b { display:block; font-size:.89rem; font-weight:600; color:var(--text); }
.li-who span { font-size:.75rem; color:var(--text-dim); }
.li-body { font-size:.9rem; color:var(--text-mid); line-height:1.6; }
.li-stats { display:flex; gap:var(--s3); margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--border); font-size:.77rem; color:var(--text-dim); }
.li-stats b { color:var(--text); font-weight:600; font-family:var(--font-display); }
.li-second { margin-top:-18px; margin-left:var(--s5); position:relative; z-index:-1; opacity:.5; transform:scale(.95); }

/* =========================================================================
   SERVICES
   ========================================================================= */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
@media (max-width:900px) { .svc-grid { grid-template-columns:1fr; } }
.svc { position:relative; padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.svc::before {
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,93,59,.10), transparent 62%);
  transition:opacity .45s var(--ease);
}
.svc:hover { transform:translateY(-5px); border-color:var(--border-str); box-shadow:var(--shadow-lg); }
.svc:hover::before { opacity:1; }
.svc-ico { width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; margin-bottom:var(--s3); background:var(--grad-soft); border:1px solid var(--border); }
.svc-ico svg { width:20px; height:20px; stroke:var(--ember); fill:none; stroke-width:1.6; }
.svc h3 { margin-bottom:9px; }
.svc p { font-size:.91rem; }
.svc-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:var(--s3); }
.tag { font-family:var(--font-mono); font-size:.65rem; padding:5px 10px; border-radius:var(--r-full); border:1px solid var(--border); color:var(--text-dim); }

/* =========================================================================
   RESULTS
   ========================================================================= */
.results { background:var(--bg-alt); border-block:1px solid var(--border); }
.res-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s5); }
@media (max-width:860px) { .res-grid { grid-template-columns:repeat(2,1fr); } }
.res { padding:var(--s4) var(--s3); border-left:1px solid var(--border); position:relative; }
.res::after { content:''; position:absolute; left:-1px; top:0; width:1px; height:0; background:var(--grad); transition:height .9s var(--ease-out); }
.res.in::after { height:100%; }
.res .num { font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108; font-size:clamp(2.1rem,4.2vw,3rem); letter-spacing:-.05em; line-height:1; color:var(--text); }
.res .lbl { color:var(--text-mid); font-size:.87rem; margin-top:10px; }

/* =========================================================================
   PROCESS
   ========================================================================= */
.proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
@media (max-width:900px) { .proc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .proc-grid { grid-template-columns:1fr; } }
.proc { padding-top:var(--s3); border-top:1px solid var(--border-str); }
.proc-step { font-family:var(--font-mono); font-size:.69rem; letter-spacing:.14em; font-weight:500; margin-bottom:var(--s2); display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.proc h3 { margin-bottom:9px; }
.proc p { font-size:.89rem; }

/* =========================================================================
   WORK
   ========================================================================= */
.work-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s3); }
@media (max-width:900px) { .work-grid { grid-template-columns:1fr; } }
.case {
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
  padding:var(--s5) var(--s4) var(--s4); min-height:330px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--surface); transition:transform .5s var(--ease-out), box-shadow .5s;
}
.case:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.case-bg { position:absolute; inset:0; opacity:.9; transition:transform .8s var(--ease-out); }
.case:hover .case-bg { transform:scale(1.05); }
.case-a .case-bg { background:linear-gradient(150deg, rgba(255,93,59,.22), rgba(124,92,255,.18)); }
.case-b .case-bg { background:linear-gradient(150deg, rgba(124,92,255,.2), rgba(61,220,151,.14)); }
.case-c .case-bg { background:linear-gradient(150deg, rgba(255,59,139,.2), rgba(255,93,59,.14)); }
.case-in { position:relative; z-index:2; }
.case-metric { font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108; font-size:clamp(1.85rem,3.3vw,2.7rem); letter-spacing:-.05em; line-height:1; margin-bottom:12px; color:var(--text); }
.case h3 { margin-bottom:6px; }
.case p { font-size:.88rem; }
.case-tag { position:absolute; top:var(--s3); left:var(--s4); z-index:2; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); }
.work-col { display:grid; gap:var(--s3); }
.work-col .case { min-height:0; padding:var(--s4); }

/* =========================================================================
   PRICING
   ========================================================================= */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); align-items:start; }
@media (max-width:940px) { .price-grid { grid-template-columns:1fr; } }
.plan { position:relative; padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.plan:hover { transform:translateY(-5px); border-color:var(--border-str); box-shadow:var(--shadow-lg); }
.plan.featured { border-color:transparent; }
.plan.featured::before {
  content:''; position:absolute; inset:-1px; border-radius:var(--r-lg); padding:1px;
  background:var(--grad); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.plan-flag { position:absolute; top:-11px; left:var(--s4); z-index:2; font-family:var(--font-mono); font-size:.61rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 11px; border-radius:var(--r-full); background:var(--grad); color:#fff; }
.plan-name { font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108; font-size:1.2rem; letter-spacing:-.03em; color:var(--text); }
.plan-for { font-size:.85rem; color:var(--text-dim); margin-top:6px; min-height:3em; }
.plan-price { margin:var(--s3) 0 var(--s2); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }
.plan-price .amt { font-family:var(--font-display); font-weight:700; font-variation-settings:'wdth' 108; font-size:2.25rem; letter-spacing:-.05em; line-height:1; color:var(--text); }
.plan-price .per { font-size:.81rem; color:var(--text-dim); }
.plan-price .from { font-family:var(--font-mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); display:block; margin-bottom:9px; }
.plan ul { display:grid; gap:11px; margin-bottom:var(--s4); }
.plan li { display:flex; gap:11px; font-size:.88rem; color:var(--text-mid); align-items:flex-start; }
.plan li svg { width:15px; height:15px; flex-shrink:0; margin-top:4px; stroke:var(--ember); stroke-width:2.6; fill:none; }
.plan .btn { width:100%; }
.price-note { text-align:center; margin-top:var(--s4); font-size:.85rem; color:var(--text-dim); }
.price-note b { color:var(--text); font-weight:600; }

/* =========================================================================
   QUOTE
   ========================================================================= */
.quote-sec { background:var(--bg-alt); border-block:1px solid var(--border); }
.quote { max-width:860px; margin:0 auto; text-align:center; }
.quote blockquote { font-family:var(--font-display); font-weight:600; font-variation-settings:'wdth' 104; font-size:clamp(1.35rem,2.9vw,2rem); line-height:1.32; letter-spacing:-.035em; color:var(--text); margin:var(--s3) 0 var(--s4); }
.quote-by { display:flex; align-items:center; justify-content:center; gap:13px; }
.avatar { width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.88rem; font-family:var(--font-display); }
.quote-by .who { text-align:left; }
.quote-by .who b { display:block; font-weight:600; font-size:.92rem; color:var(--text); }
.quote-by .who span { font-size:.82rem; color:var(--text-dim); }

/* =========================================================================
   CTA
   ========================================================================= */
.cta-box { position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--border); background:var(--surface); padding:var(--s7) var(--s5); text-align:center; }
.orb-c { position:absolute; width:700px; height:400px; left:50%; top:-130px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(255,93,59,.3), rgba(124,92,255,.18) 45%, transparent 70%); filter:blur(70px); opacity:var(--glow-op); pointer-events:none; }
.cta-in { position:relative; z-index:2; }
.cta-box h2 { margin-bottom:var(--s2); }
.cta-box .lead { margin:0 auto; }
.cta-box .hero-cta { justify-content:center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot { padding:var(--s6) 0 var(--s4); border-top:1px solid var(--border); }
.foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s4); margin-bottom:var(--s6); }
@media (max-width:860px) { .foot-top { grid-template-columns:1fr 1fr; gap:var(--s5); } }
.foot-brand p { font-size:.88rem; margin-top:var(--s2); max-width:34ch; }
.foot-tag { font-family:var(--font-display); font-weight:600; font-variation-settings:'wdth' 106; font-size:1rem; margin-top:var(--s2); letter-spacing:-.03em; }
.foot-col h4 { font-family:var(--font-mono); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); font-weight:500; margin-bottom:var(--s2); }
.foot-col a { display:block; font-size:.88rem; color:var(--text-mid); padding:6px 0; transition:color .25s, transform .3s var(--ease-out); }
.foot-col a:hover { color:var(--text); transform:translateX(3px); }
.foot-bot { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--border); font-size:.79rem; color:var(--text-dim); flex-wrap:wrap; }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.rev { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rev.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .domeq-page *,
  .domeq-page *::before,
  .domeq-page *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rev { opacity:1; transform:none; }
  .hero h1 .w i { transform:none; opacity:1; }
  html { scroll-behavior:auto; }
}

/* =========================================================================
   STRUCTURAL — semantic markup adjustments
   The templates use real lists, figures and headings for accessibility and
   SEO. These rules keep the visual design identical while allowing that.
   Selectors are scoped with .domeq-page so they beat the element rules above.
   ========================================================================= */

.domeq-page ol { list-style: none; }
.domeq-page figure { margin: 0; }
.domeq-page blockquote { margin: 0; }

/* Plan name is an <h3> for document outline; keep its original type scale. */
.domeq-page .plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  font-size: 1.2rem;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text);
}

/* Footer column headings are <h2> for outline; styled as small mono labels. */
.domeq-page .foot-head {
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s2);
}

/* =========================================================================
   MOBILE NAVIGATION
   Below 980px the desktop links collapse into a menu. The same links appear
   in both, so mobile never loses navigation the desktop has.
   ========================================================================= */

.menu-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 5px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.menu-btn:hover { background: var(--surface); border-color: var(--border-str); }
.menu-bar {
  display: block;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
/* Two bars fold into an X — no third bar to hide, so the motion stays clean */
.menu-btn[aria-expanded="true"] .menu-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  padding: 92px var(--s3) var(--s5);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform .45s var(--ease-out);
}
.mobile-menu.open { transform: none; }
body.admin-bar .mobile-menu { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .mobile-menu { top: 46px; } }

.mobile-links { display: grid; gap: 2px; margin-bottom: var(--s3); }
.mobile-links a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  font-size: 1.32rem;
  letter-spacing: -.03em;
  color: var(--text);
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.mobile-links a:hover { padding-left: 8px; }
.mobile-cta { width: 100%; }

@media (max-width: 980px) {
  .nav-links,
  .nav-cta { display: none; }
  .menu-btn { display: grid; }
}

/* Keep the panel out of the accessibility tree and off the page when closed */
.mobile-menu[hidden] { display: none; }

@media (min-width: 981px) {
  /* Desktop never shows the panel, even if it was left open on resize */
  .mobile-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */

/* Shorter hero — the form is the point, not the headline */
.hero-compact { padding: 168px 0 var(--s6); }
.hero-compact h1 { max-width: 16ch; margin-bottom: var(--s3); }
.hero-compact .eyebrow { margin-bottom: var(--s3); }

.contact-sec { padding-top: 0 !important; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* --- Form card --- */
.form-card {
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 560px) { .form-card { padding: var(--s3); } }

.form-title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 10px;
}
.form-note {
  font-size: .92rem;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}

/* --- Sidebar --- */
.contact-side { display: grid; gap: var(--s3); }
.side-block {
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-alt);
}
.side-title {
  font-size: 1.05rem;
  font-variation-settings: 'wdth' 106;
  margin-bottom: var(--s3);
}

.next-steps { display: grid; gap: var(--s3); }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  padding-top: 3px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.step-txt b { display: block; font-size: .93rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.step-txt span { font-size: .87rem; color: var(--text-mid); line-height: 1.55; }

/* --- Direct contact list --- */
.direct-list { display: grid; gap: 2px; }
.direct {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left .3s var(--ease-out);
}
.direct-list li:last-child .direct { border-bottom: 0; }
.direct:hover { padding-left: 6px; }
.direct-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--border);
}
.direct-ico svg { width: 18px; height: 18px; stroke: var(--ember); fill: none; }
.direct-txt b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.direct-txt span { font-size: .82rem; color: var(--text-dim); }

.areas {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-mid);
}
.areas-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}

/* --- Reassurance --- */
.trust-sec { background: var(--bg-alt); border-block: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.trust-card h3 { margin-bottom: 9px; }
.trust-card p { font-size: .91rem; }

/* =========================================================================
   FLUENT FORMS — restyled to match the brand

   Fluent Forms ships its own light-theme CSS. These rules override it so the
   form belongs to the page rather than sitting on top of it. Scoped under
   .domeq-form so no other form on the site is affected.
   ========================================================================= */

.domeq-form .fluentform { margin: 0; }

.domeq-form .ff-el-group { margin-bottom: var(--s3); }
.domeq-form .ff-el-group:last-of-type { margin-bottom: 0; }

/* Labels */
.domeq-form .ff-el-input--label label {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.005em;
}
.domeq-form .ff-el-input--label.ff-el-is-required label:after {
  color: var(--ember);
  margin-left: 3px;
}

/* Inputs, selects, textareas */
.domeq-form .ff-el-form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-str);
  border-radius: var(--r-md);
  padding: 13px 16px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.domeq-form .ff-el-form-control::placeholder { color: var(--text-dim); opacity: 1; }
.domeq-form .ff-el-form-control:hover { border-color: var(--text-dim); }
.domeq-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255, 93, 59, .18);
}
.domeq-form textarea.ff-el-form-control { min-height: 148px; resize: vertical; }

/* Browser autofill would otherwise repaint the input white */
.domeq-form .ff-el-form-control:-webkit-autofill,
.domeq-form .ff-el-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
}

/* Two-column rows */
.domeq-form .ff-t-container { display: flex; gap: var(--s3); flex-wrap: wrap; }
.domeq-form .ff-t-cell { flex: 1 1 220px; padding: 0 !important; }

/* Submit button — matches .btn-primary */
.domeq-form .ff-btn-submit,
.domeq-form .ff_submit_btn_wrapper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 32px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--grad);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 0 6px 22px -6px rgba(255, 93, 59, .5);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), background-position .6s var(--ease);
}
.domeq-form .ff-btn-submit:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 14px 34px -8px rgba(255, 59, 139, .6);
}
.domeq-form .ff-btn-submit:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.domeq-form .ff_submit_btn_wrapper { margin-top: var(--s4); text-align: left; }

/* Validation */
.domeq-form .ff-el-is-error .ff-el-form-control,
.domeq-form .ff-el-form-control.error {
  border-color: #FF4D4D;
  background: rgba(255, 77, 77, .06);
}
.domeq-form .error.text-danger,
.domeq-form .ff-el-is-error .error {
  color: #FF6B6B;
  font-size: .82rem;
  margin-top: 7px;
}

/* Success and failure messages */
.domeq-form .ff-message-success {
  padding: var(--s3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--mint);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  color: var(--text);
  font-size: .95rem;
}
.domeq-form .ff-errors-in-stack,
.domeq-form .ff_submit_failed {
  padding: var(--s3);
  border-radius: var(--r-md);
  background: rgba(255, 77, 77, .08);
  border: 1px solid rgba(255, 77, 77, .3);
  color: #FF8080;
  font-size: .9rem;
}

/* Help text and checkboxes */
.domeq-form .ff-el-help-message { font-size: .8rem; color: var(--text-dim); margin-top: 6px; }
.domeq-form .ff-el-form-check-label { font-size: .88rem; color: var(--text-mid); }
.domeq-form input[type="checkbox"],
.domeq-form input[type="radio"] { accent-color: var(--ember); }

/* =========================================================================
   COMPARISON TABLE — us vs a typical agency
   ========================================================================= */
.compare-sec { background: var(--bg-alt); border-block: 1px solid var(--border); }

.cmp-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-x: auto;            /* wide table scrolls itself, page never does */
  -webkit-overflow-scrolling: touch;
}
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }

.cmp thead th {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 18px var(--s3);
  border-bottom: 1px solid var(--border-str);
  color: var(--text-dim);
}
.cmp thead th.cmp-us {
  color: var(--text);
  background: var(--grad-soft);
}
.cmp tbody th {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  padding: 20px var(--s3);
  width: 22%;
  vertical-align: top;
}
.cmp td {
  font-size: .9rem;
  color: var(--text-mid);
  padding: 20px var(--s3);
  vertical-align: top;
  line-height: 1.55;
}
.cmp tbody tr { border-top: 1px solid var(--border); }
.cmp td.cmp-them { opacity: .78; }
.cmp td.cmp-us {
  color: var(--text);
  background: color-mix(in srgb, var(--ember) 4%, transparent);
  position: relative;
  padding-left: 46px;
}
.cmp-tick {
  position: absolute;
  left: var(--s3);
  top: 21px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
}
.cmp-tick svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3.4; fill: none; }

@media (max-width: 700px) {
  .cmp tbody th, .cmp td { padding: 15px var(--s2); font-size: .86rem; }
  .cmp td.cmp-us { padding-left: 40px; }
  .cmp-tick { left: var(--s2); }
}

/* =========================================================================
   FOUNDER
   ========================================================================= */
.founder-sec { position: relative; overflow: hidden; }
.founder-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--s7);
  align-items: center;
}
@media (max-width: 940px) {
  .founder-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

.founder-visual { position: relative; }
.founder-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 4 / 5;          /* matches the source photo, so nothing crops
                                   — and reserves space, so no layout shift */
  box-shadow: var(--shadow-lg);
}
.founder-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback when no photo has been supplied yet */
.founder-monogram {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  position: relative;
}
.founder-monogram::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .6;
}
.founder-monogram span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: -.05em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.founder-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: calc(var(--s3) * -1);
  margin-left: var(--s3);
  position: relative;
  z-index: 2;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: fit-content;
  box-shadow: var(--shadow-lg);
}
.founder-tag .logo-mark { width: 26px; height: 26px; }
.founder-tag b { display: block; font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.founder-tag span span { font-size: .78rem; color: var(--text-dim); }

.founder-copy h2 { margin: var(--s2) 0 var(--s3); font-size: clamp(1.5rem, 4vw, 2.6rem); }
.founder-copy .lead { margin-bottom: var(--s2); }
.founder-copy .lead:last-of-type { margin-bottom: var(--s3); }

.founder-facts {
  display: grid;
  gap: 0;
  margin: var(--s4) 0;
  border-top: 1px solid var(--border);
}
.founder-facts > div {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: var(--s2);
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 520px) {
  .founder-facts > div { grid-template-columns: 1fr; gap: 3px; }
}
.founder-facts dt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 3px;
}
.founder-facts dd { font-size: .92rem; color: var(--text-mid); }

/* =========================================================================
   FAQ — <details>/<summary>, no JavaScript required
   ========================================================================= */
.faq-sec { background: var(--bg-alt); border-block: 1px solid var(--border); }
.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 940px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--s4); }
}
.faq-head { position: sticky; top: 110px; }
@media (max-width: 940px) { .faq-head { position: static; } }
.faq-head h2 { margin: var(--s2) 0 var(--s2); font-size: clamp(1.5rem, 4vw, 2.6rem); }

.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--text); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.faq-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  letter-spacing: -.025em;
  line-height: 1.35;
  color: var(--text-mid);
  transition: color .3s var(--ease);
}
.faq-item[open] .faq-q { color: var(--text); }

.faq-ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin-top: 2px;
  transition: transform .45s var(--ease-out), background .3s var(--ease), border-color .3s;
}
.faq-ico svg { width: 13px; height: 13px; stroke: var(--text-mid); fill: none; }
.faq-item[open] .faq-ico {
  transform: rotate(135deg);
  background: var(--grad);
  border-color: transparent;
}
.faq-item[open] .faq-ico svg { stroke: #fff; }

.faq-a { padding: 0 var(--s6) 24px 0; }
.faq-a p { font-size: .95rem; line-height: 1.68; }
@media (max-width: 560px) { .faq-a { padding-right: 0; } }

/* Reduced motion keeps the icon state change but drops the spin */
@media (prefers-reduced-motion: reduce) {
  .faq-ico { transition: none; }
  .faq-item[open] .faq-ico { transform: none; }
}

/* =========================================================================
   FOOTER — registration details and legal links
   ========================================================================= */
.foot-reg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding: var(--s3) 0;
  margin-bottom: var(--s2);
  border-top: 1px solid var(--border);
}
.foot-reg > div { display: grid; gap: 3px; }
.foot-reg dt {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.foot-reg dd { font-size: .82rem; color: var(--text-mid); }

.foot-legal { display: flex; gap: var(--s3); flex-wrap: wrap; }
.foot-legal a {
  font-size: .79rem;
  color: var(--text-dim);
  transition: color .25s var(--ease);
}
.foot-legal a:hover { color: var(--text); }

/* =========================================================================
   FLOATING ACTION BAR — mobile only

   Two thumb-reachable buttons pinned to the bottom. Hidden until the visitor
   scrolls past the hero, so it never sits on top of CTAs already on screen.
   ========================================================================= */
.m-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 98;
  display: none;                    /* becomes grid on mobile, below */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--s2);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));  /* clears the iPhone home bar */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform .4s var(--ease-out);
}
.m-cta.show { transform: none; }

.m-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;                 /* comfortably above the 44px tap target floor */
  padding: 0 14px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  transition: transform .25s var(--ease-out);
}
.m-cta-btn:active { transform: scale(.97); }
.m-cta-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* WhatsApp keeps its own green — people recognise it faster than any brand
   colour we could substitute, and recognition is the whole point here. */
.m-cta-wa {
  background: #25D366;
  color: #05240F;
}
.m-cta-wa svg { stroke: #05240F; fill: none; }

.m-cta-book {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(255,93,59,.5);
}
.m-cta-book svg { stroke: #fff; fill: none; }

@media (max-width: 980px) {
  .m-cta { display: grid; }
  /* Stop the bar covering the last of the footer */
  body.domeq-page { padding-bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-cta { transition: none; }
}


/* =========================================================================
   MOBILE PASS

   Everything below only applies at phone and small-tablet widths. The type
   scale itself is fixed at source in the clamp() values further up — these
   are the spacing, target-size and layout corrections on top.
   ========================================================================= */

@media (max-width: 780px) {

  /* --- Vertical rhythm: desktop padding wastes half a phone screen --- */
  .domeq-page section { padding: var(--s6) 0; }
  .hero { padding: 118px 0 var(--s5); }
  .hero-compact { padding: 112px 0 var(--s4); }
  .sec-head { margin-bottom: var(--s4); }
  .hero-stats { margin-top: var(--s5); padding-top: var(--s3); }

  /* Slightly tighter gutters — 24px each side is a lot on a 360px screen */
  .wrap { padding: 0 18px; }

  /* --- Buttons go full width and stack. Two half-width buttons on a phone
         are both harder to hit and harder to read. --- */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta .btn { width: 100%; }
  .btn { min-height: 50px; }
  .btn-lg { padding: 15px 26px; font-size: .96rem; }

  /* --- Tap targets: 30px links are a miss-tap waiting to happen --- */
  .foot-col a { padding: 11px 0; }
  .mobile-links a { padding: 17px 0; }
  .direct { padding: 16px 0; }

  /* --- Long headings need to break, not overflow --- */
  .domeq-page h1, .domeq-page h2 { overflow-wrap: break-word; }
  .hero h1 { max-width: none; }
  .lead { max-width: none; }

  /* --- Cards breathe less --- */
  .svc, .plan, .trust-card, .case { padding: var(--s3); }
  .side-block { padding: var(--s3); }
  .cta-box { padding: var(--s5) var(--s3); }

  /* --- Client marquee: 96px gaps mean one name visible at a time --- */
  .marquee-track { gap: var(--s5); padding-right: var(--s5); }
  .mq-item { font-size: 1.05rem; }

  /* --- Stats read better with a little more room --- */
  .hstat .num { font-size: clamp(1.45rem, 6vw, 2.4rem); }
  .res .num { font-size: clamp(1.7rem, 7vw, 3rem); }
  .case-metric { font-size: clamp(1.5rem, 6.5vw, 2.7rem); }

  /* --- Founder: photo above copy, tag stays legible --- */
  .founder-frame { max-width: 380px; }
  .founder-tag { margin-left: var(--s2); }

  /* --- FAQ --- */
  .faq-item summary { padding: 18px 0; gap: var(--s2); }
  .faq-a { padding-bottom: 20px; }
}

/* -------------------------------------------------------------------------
   Comparison table → stacked cards on mobile.

   A 640px-wide table inside a horizontal scroller technically works, but
   almost nobody discovers they can swipe it. Below 780px each row becomes
   its own card with the two columns stacked and labelled.
   ---------------------------------------------------------------------- */
@media (max-width: 780px) {
  .cmp-wrap { border: 0; background: none; overflow: visible; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { display: none; }
  .cmp { min-width: 0; }

  .cmp tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--s3);
    margin-bottom: var(--s2);
  }
  .cmp tbody th {
    width: auto;
    padding: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-variation-settings: 'wdth' 106;
    font-size: 1.02rem;
    letter-spacing: -.025em;
  }
  .cmp td { padding: 0; font-size: .89rem; }

  /* Labels the hidden table header would otherwise have provided */
  .cmp td::before {
    display: block;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 5px;
  }
  .cmp td.cmp-them::before { content: 'A typical agency'; }
  .cmp td.cmp-us::before { content: 'Domeq'; color: var(--ember); }

  .cmp td.cmp-them { padding-bottom: 16px; }
  .cmp td.cmp-us {
    background: none;
    padding-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .cmp-tick { display: none; }
}

/* Narrow phones — the last 40px matters */
@media (max-width: 400px) {
  .wrap { padding: 0 15px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
  .m-cta-btn { font-size: .86rem; gap: 7px; padding: 0 8px; }
  .logo-text b { font-size: 1.1rem; }
  .logo-text em { letter-spacing: .3em; font-size: .48rem; }
}

/* =========================================================================
   MOBILE — FLOATING GLASS HEADER AND ACTION BAR

   On phones the header and the action bar detach from the screen edges and
   become inset, rounded, frosted panels. Two reasons beyond looks: a pill
   that clearly floats above the page reads as a control rather than part of
   the content, and the inset gutter stops thumbs catching the edge of the
   screen when scrolling.

   Loaded after the base rules so these win without !important.
   ========================================================================= */

@media (max-width: 980px) {

  /* ---- Header ---------------------------------------------------------- */
  .nav {
    top: 12px;
    left: 14px;
    right: 14px;
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .07) inset,   /* top highlight — the "glass" edge */
      0 18px 40px -22px rgba(0, 0, 0, .85);
    transition:
      background .4s var(--ease),
      border-color .4s var(--ease),
      box-shadow .4s var(--ease),
      transform .4s var(--ease-out);
  }

  /* Light theme needs a brighter pane and a darker shadow to read as glass */
  :root[data-theme="light"] .nav {
    border-color: rgba(11, 10, 16, .08);
    background: color-mix(in srgb, #FFFFFF 68%, transparent);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 16px 36px -20px rgba(11, 10, 16, .35);
  }

  /* Tighter gutters inside the pill than the page .wrap default */
  .nav .wrap.nav-in { padding: 9px 9px 9px 16px; }

  /* Scrolled state — slightly denser, so it still registers as a change */
  .nav.stuck {
    padding: 0;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: rgba(255, 255, 255, .14);
  }
  :root[data-theme="light"] .nav.stuck {
    background: color-mix(in srgb, #FFFFFF 84%, transparent);
    border-color: rgba(11, 10, 16, .12);
  }

  .logo-mark { width: 30px; height: 30px; }
  .logo-text b { font-size: 1.08rem; }
  .logo-text em { font-size: .46rem; letter-spacing: .3em; }

  body.admin-bar .nav { top: 58px; }

  /* ---- Menu panel ------------------------------------------------------ */
  /* Floats below the header pill rather than filling the screen edge to edge */
  .mobile-menu {
    top: 74px;
    left: 14px;
    right: 14px;
    padding: var(--s3) var(--s3) var(--s4);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .07) inset,
      0 26px 60px -28px rgba(0, 0, 0, .9);
    transform: translateY(-14px) scale(.97);
    opacity: 0;
    transition:
      transform .42s var(--ease-out),
      opacity .3s var(--ease);
  }
  :root[data-theme="light"] .mobile-menu {
    border-color: rgba(11, 10, 16, .08);
    background: color-mix(in srgb, #FFFFFF 86%, transparent);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 26px 60px -30px rgba(11, 10, 16, .4);
  }
  .mobile-menu.open { transform: none; opacity: 1; }
  body.admin-bar .mobile-menu { top: 120px; }

  .mobile-links a { font-size: 1.2rem; padding: 13px 0; }
}

@media (max-width: 980px) and (max-width: 782px) {
  body.admin-bar .nav { top: 58px; }
}

/* ---- Bottom action bar ------------------------------------------------- */
@media (max-width: 980px) {
  .m-cta {
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .07) inset,
      0 -2px 40px -18px rgba(0, 0, 0, .9);
    transform: translateY(calc(100% + 22px));   /* clears its own shadow when hidden */
  }
  :root[data-theme="light"] .m-cta {
    border-color: rgba(11, 10, 16, .08);
    background: color-mix(in srgb, #FFFFFF 70%, transparent);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 -2px 36px -18px rgba(11, 10, 16, .35);
  }
  .m-cta.show { transform: none; }

  /* Buttons sit inside the glass pane, so they lose their own heavy shadows */
  .m-cta-btn {
    border-radius: 15px;
    box-shadow: none;
  }
  .m-cta-wa { box-shadow: 0 6px 16px -10px rgba(37, 211, 102, .9); }
  .m-cta-book { box-shadow: 0 6px 16px -10px rgba(255, 59, 139, .9); }
}

/* Safari on iOS drops backdrop-filter when Low Power Mode is on, which would
   leave near-transparent panes over live text. Fall back to solid. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (max-width: 980px) {
    .nav,
    .nav.stuck,
    .mobile-menu,
    .m-cta { background: var(--surface); }
  }
}

/* =========================================================================
   LEGAL PAGES — Privacy, Terms
   Long-form reading, so the measure is tighter and the rhythm is looser
   than the marketing pages.
   ========================================================================= */

.hero-legal { padding-bottom: var(--s5); }
.hero-legal h1 { max-width: 18ch; }

.legal-updated {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s3);
}

.legal-sec { padding-top: 0 !important; }
.legal-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 940px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---- Contents list ---- */
.legal-toc {
  position: sticky;
  top: 108px;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-alt);
}
@media (max-width: 940px) { .legal-toc { position: static; } }

.legal-toc-title {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s2);
}
.legal-toc ol { display: grid; gap: 1px; }
.legal-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: .86rem;
  color: var(--text-mid);
  line-height: 1.4;
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.legal-toc a:hover { color: var(--text); padding-left: 4px; }
.toc-n {
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--text-dim);
  padding-top: 2px;
  flex-shrink: 0;
}

/* ---- Body ---- */
.legal-body { max-width: 68ch; }

.legal-block {
  padding: 0 0 var(--s5);
  /* clears the fixed header when jumped to from the contents list */
  scroll-margin-top: 108px;
}
.legal-block:last-child { padding-bottom: 0; }

.legal-block h2 {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}
.legal-block:first-child h2 { padding-top: 0; border-top: 0; }

.legal-n {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  flex-shrink: 0;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.legal-block p {
  font-size: .96rem;
  line-height: 1.72;
  margin-bottom: var(--s2);
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block a {
  color: var(--text);
  border-bottom: 1px solid var(--border-str);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease);
}
.legal-block a:hover { border-bottom-color: var(--ember); }
.legal-block b { color: var(--text); font-weight: 600; }

.legal-list { display: grid; gap: 11px; margin: var(--s2) 0 var(--s3); }
.legal-list li {
  position: relative;
  padding-left: 22px;
  font-size: .94rem;
  line-height: 1.68;
  color: var(--text-mid);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad);
}

@media (max-width: 560px) {
  .legal-block h2 { gap: 10px; }
  .legal-block p, .legal-list li { font-size: .92rem; }
}