/* =========================================================================
   ADVISE OPTIMIZATION — Design System
   Palette   : Ink Navy / Signal Gold / Deep Teal / Fog / Bone
   Type      : Fraunces (display) · Manrope (body) · JetBrains Mono (data)
   ========================================================================= */

:root{
  /* ---- Color tokens --------------------------------------------------- */
  --ink:        #0E1A2B;   /* primary dark background */
  --ink-2:      #16273D;   /* secondary dark surface */
  --bone:       #EEF1F1;   /* light section background (cool, not cream) */
  --paper:      #F8F9F8;   /* near-white surface on light sections */
  --gold:       #C9A24B;   /* signal gold — authority / rankings */
  --gold-dim:   #8C6F32;
  --teal:       #1F8A82;   /* deep teal — AI / data / GEO */
  --teal-dim:   #145A55;
  --coral:      #C1553B;   /* rare, used only for critical highlight/error */
  --line:       rgba(14,26,43,0.12);
  --line-dark:  rgba(238,241,241,0.14);
  --ink-soft:   #45566A;   /* muted text on light bg */
  --fog-soft:   rgba(238,241,241,0.72); /* muted text on dark bg */

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Manrope', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ---- Scale ------------------------------------------------------------ */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.75rem;
  --gap-lg: 3rem;
  --gap-xl: 6rem;
  --radius: 6px;
  --max-w: 1200px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
svg{ max-width:100%; }
a{ color: inherit; text-decoration:none; overflow-wrap: break-word; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.12; margin:0 0 var(--gap-sm); font-weight:600; letter-spacing:-0.01em; overflow-wrap: break-word; }
p{ margin:0 0 var(--gap-sm); overflow-wrap: break-word; }
.container{ max-width: var(--max-w); margin:0 auto; padding:0 24px; }

/* CSS Grid items default to min-width:auto, which equals their content's
   min-content size — long unbroken text (emails, phone numbers, URLs)
   can silently force a column wider than its track and overflow the
   page. This is the single most common cause of "not responsive"
   layouts with CSS Grid, so it's fixed globally here. */
.grid > *, .footer-grid > *, .hero-grid > *, .form-row > *{ min-width: 0; }

/* Visible focus ring everywhere — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Reduced motion respected globally */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Eyebrow / label ---------------------------------------------------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: var(--gap-sm);
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--gold);
}
.on-dark .eyebrow{ color: var(--gold); }
.on-dark .eyebrow::before{ background: var(--gold); }

/* ---- Buttons -------------------------------------------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:14px 26px;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--gold); color: var(--ink); }
.btn-primary:hover{ background:#DDB868; transform: translateY(-2px); }
.btn-ghost{ background:transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.on-dark .btn-ghost{ border-color: var(--line-dark); color: var(--bone); }
.on-dark .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-arrow{ transition: transform .3s ease; }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(14,26,43,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width: var(--max-w); margin:0 auto;
}
.brand{
  font-family: var(--font-display);
  font-size:1.25rem; color: var(--bone); font-weight:600;
  display:flex; align-items:baseline; gap:6px;
}
.brand span{ color: var(--gold); }
.nav-links{ display:flex; gap:2rem; align-items:center; }
.nav-links a{
  color: var(--fog-soft); font-size:0.92rem; position:relative; padding:6px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--gold); transition: width .3s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--bone); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.has-dropdown{ position:relative; }
.has-dropdown::after{
  /* Invisible bridge over the gap between the trigger and the dropdown.
     Without this, moving the mouse from the link down to the dropdown
     passes through empty space with no hoverable element, so :hover
     is lost for an instant and the menu closes before you can reach it. */
  content:"";
  position:absolute;
  top:100%; left:50%;
  width:680px; height:18px;
  transform:translateX(-50%);
}
.dropdown{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  background: var(--ink-2); border:1px solid var(--line-dark); border-radius: var(--radius);
  width:680px; padding:22px; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow: 0 22px 44px rgba(0,0,0,0.35);
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.touch-open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown-col{ display:flex; flex-direction:column; min-width:0; }
.dropdown-col a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:4px; font-size:0.85rem; color: var(--fog-soft); transition: background .2s ease, color .2s ease; }
.dropdown-col a::after{ display:none; }
.dropdown-col a:hover{ background: rgba(201,162,75,0.08); color: var(--gold); }
.dropdown-col a img{ width:16px; height:16px; flex:none; opacity:.85; }
.dropdown-label{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-dim); padding:6px 10px 8px;
}

@media (max-width:1100px){
  .dropdown{ width:460px; grid-template-columns:repeat(2,1fr); max-width:calc(100vw - 32px); }
  .has-dropdown::after{ width:460px; }
}

.nav-cta{ display:flex; align-items:center; gap:20px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--bone); display:block; transition: all .3s ease; }

.mobile-panel{
  position:fixed; inset:0; background: var(--ink); z-index:1100;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  padding:100px 40px 40px; gap:0.6rem; transform:translateY(-100%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel a{ font-family:var(--font-display); font-size:1.4rem; color:var(--bone); padding:6px 0; }
.mobile-panel .close-panel{ position:fixed; top:24px; right:24px; background:none; border:none; color:var(--bone); font-size:1.8rem; cursor:pointer; z-index:1101; }
.mobile-panel-section-label{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-dim); margin-top:14px; width:100%;
}
.mobile-panel-section-label:first-child{ margin-top:0; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}

/* Fail-safe: even if the "open" class is ever left on the mobile panel
   (e.g. a browser window resized past the breakpoint without a reload),
   it must never render at desktop widths and overlap the desktop nav. */
@media (min-width: 901px){
  .mobile-panel{ display:none !important; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  background: var(--ink);
  color: var(--bone);
  padding: 138px 0 110px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gap-lg);
  align-items:center;
}
.hero h1{
  font-size: clamp(1rem, 1rem + 4.2vw, 4.1rem);
  color: var(--bone);
}
.hero h1 em{ font-style:italic; color: var(--gold); }
.hero .lead{
  font-size:1rem; color: var(--fog-soft); max-width:46ch; margin-bottom: var(--gap-md);
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: var(--gap-md); }
.hero-stats{ display:none; margin-top: var(--gap-lg); flex-wrap:wrap; }
.hero-stat .num{ font-family:var(--font-mono); font-size:1.9rem; color:var(--gold); }
.hero-stat .label{ font-size:0.8rem; color:var(--fog-soft); text-transform:uppercase; letter-spacing:.06em; }

/* Signature: signal graph — animated node/path visual representing crawl → index → rank */
.signal-graph{ width:100%; height:auto; }
.signal-graph .path{ fill:none; stroke:var(--teal); stroke-width:1.4; }
.signal-graph .node{ fill: var(--ink); stroke: var(--gold); stroke-width:1.6; }
.signal-graph .node.filled{ fill: var(--gold); stroke:var(--gold); }
.signal-graph text{ font-family:var(--font-mono); font-size:9px; fill:var(--fog-soft); }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:140px 0 70px; }
}

/* =========================================================================
   HERO PARTICLES — ambient floating dots across the banner
   ========================================================================= */
.hero{ position:relative; }
.hero-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-particles span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--gold); opacity:0.5;
}
.hero-particles span:nth-child(1){ top:12%; left:8%; }
.hero-particles span:nth-child(2){ top:68%; left:15%; background: var(--teal); }
.hero-particles span:nth-child(3){ top:24%; left:42%; width:3px; height:3px; }
.hero-particles span:nth-child(4){ top:78%; left:38%; background: var(--teal); width:5px; height:5px; }
.hero-particles span:nth-child(5){ top:15%; left:88%; }
.hero-particles span:nth-child(6){ top:55%; left:92%; background: var(--teal); width:3px; height:3px; }
.hero-particles span:nth-child(7){ top:85%; left:70%; }
.hero-particles span:nth-child(8){ top:40%; left:60%; background: var(--teal); opacity:0.35; }
.hero .container{ position:relative; z-index:1; }
.hero .signal-graph{ will-change: transform; }


/* =========================================================================
   SECTIONS
   ========================================================================= */
section{ padding: var(--gap-xl) 0; }
.section-head{ max-width:640px; margin-bottom: var(--gap-lg); }
.section-head h2{ font-size: clamp(1.7rem, 1.35rem + 1.8vw, 2.6rem); }
.section-dark{ background: var(--ink); color: var(--bone); }
.section-dark .ink-soft, .section-dark p{ color: var(--fog-soft); }
.section-alt{ background: var(--paper); }

/* ---- Service cards --------------------------------------------------- */
.grid{ display:grid; gap: var(--gap-md); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .4s ease;
}
.card:hover{ transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 18px 40px rgba(14,26,43,0.09); }
.card .idx{ font-family:var(--font-mono); font-size:0.78rem; color: var(--teal); margin-bottom:14px; display:block; }
.card h3{ font-size:1.28rem; margin-bottom:10px; }
.card p{ color: var(--ink-soft); font-size:0.95rem; margin-bottom:0; }

.section-dark .card{ background: var(--ink-2); border-color: var(--line-dark); }
.section-dark .card p{ color: var(--fog-soft); }

/* ---- Process / timeline (real sequence → numbering justified) ---------- */
.process{ counter-reset: step; }
.step{
  display:grid; grid-template-columns:90px 1fr; gap: var(--gap-md);
  padding: var(--gap-md) 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .step-num{ font-family:var(--font-mono); font-size:0.9rem; color: var(--gold-dim); }
.step h3{ font-size:1.2rem; margin-bottom:8px; }
.step p{ color: var(--ink-soft); max-width:60ch; }
.section-dark .step{ border-color: var(--line-dark); }
.section-dark .step p{ color: var(--fog-soft); }

/* ---- Comparison / definition table -------------------------------------*/
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); }
table.compare{ border-collapse:collapse; width:100%; min-width:640px; background:var(--paper); }
table.compare th, table.compare td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:0.94rem; }
table.compare thead th{ font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); background:var(--bone); }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare td strong{ color: var(--teal); }

/* ---- Quote / testimonial ------------------------------------------------*/
.quote{ font-family:var(--font-display); font-size:1.5rem; line-height:1.4; max-width:760px; }
.quote-attr{ font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft); margin-top:var(--gap-sm); }

/* ---- Logo strip ---------------------------------------------------------*/
.logo-strip{ display:flex; flex-wrap:wrap; gap: var(--gap-lg); align-items:center; opacity:0.75; }
.logo-strip span{ font-family:var(--font-mono); font-size:0.85rem; letter-spacing:.05em; color:var(--ink-soft); }

/* ---- CTA band ------------------------------------------------------------*/
.cta-band{
  background: linear-gradient(120deg, var(--teal-dim), var(--ink));
  color: var(--bone);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  display:flex; align-items:center; justify-content:space-between; gap: var(--gap-lg); flex-wrap:wrap;
}
.cta-band h2{ font-size:1.9rem; max-width:20ch; margin-bottom:0; }

/* =========================================================================
   FORM
   ========================================================================= */
.form-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: var(--gap-lg); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap-sm); }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom: var(--gap-sm); display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.field input, .field textarea, .field select{
  font-family: var(--font-body); font-size:1rem; padding:13px 14px;
  border:1px solid var(--line); border-radius: 4px; background: var(--bone); color: var(--ink);
  transition:border-color .25s ease, background .25s ease;
  width:100%; max-width:100%; box-sizing:border-box;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--teal); background:var(--paper); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.field.hp{ position:absolute; left:-9999px; top:-9999px; } /* honeypot */
.form-msg{ margin-top:14px; font-size:0.92rem; padding:12px 14px; border-radius:4px; display:none; }
.form-msg.show{ display:block; }
.form-msg.success{ background: rgba(31,138,130,0.12); color: var(--teal-dim); border:1px solid var(--teal); }
.form-msg.error{ background: rgba(193,85,59,0.1); color: var(--coral); border:1px solid var(--coral); }
.field-error{ color: var(--coral); font-size:0.78rem; min-height:1em; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background: var(--ink); color: var(--fog-soft); padding: var(--gap-xl) 0 var(--gap-md); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap: var(--gap-lg) var(--gap-md); }
.footer-grid h4{ color: var(--bone); font-size:0.8rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul li a{ font-size:0.88rem; }
.footer-grid a:hover{ color: var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line-dark); margin-top: var(--gap-lg); padding-top: var(--gap-md); font-size:0.82rem; }
@media (max-width:1100px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; gap: var(--gap-md); } }

/* =========================================================================
   PAGE HEADER (interior pages)
   ========================================================================= */
.page-hero{ background: var(--ink); color: var(--bone); padding:150px 0 80px; position:relative; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero .kicker{ font-family:var(--font-mono); color:var(--gold); font-size:0.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--gap-sm); }
.page-hero h1{ font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3.2rem); max-width:20ch; }
.page-hero .lead{ color: var(--fog-soft); max-width:58ch; font-size:1.08rem; }
.breadcrumb{ font-family:var(--font-mono); font-size:0.78rem; color: var(--fog-soft); margin-bottom: var(--gap-md); }
.breadcrumb a:hover{ color: var(--gold); }

/* GSAP init helpers */
.gsap-fade{ opacity:0; transform:translateY(26px); }
.js-split-word{ display:inline-block; }

/* =========================================================================
   DASHBOARD MOCKUPS — original Search-Console / GA4 / AI-engine style
   illustrations (not the real products' UI or logos) used to signal
   modern, data-driven, AI-aware tooling.
   ========================================================================= */
.dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--gap-md); }
@media (max-width:1000px){ .dash-grid{ grid-template-columns:1fr; } }

.dash-panel{
  background: var(--ink-2); border:1px solid var(--line-dark); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.dash-panel-bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-dark);
}
.dash-panel-bar .dot{ width:8px; height:8px; border-radius:50%; background: var(--line-dark); }
.dash-panel-bar .dash-title{
  margin-left:6px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--fog-soft);
}
.dash-panel-body{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; gap:14px; }

/* --- line chart (Search-Console style) --- */
.dash-linechart{ width:100%; height:auto; }
.dash-linechart .grid-line{ stroke: var(--line-dark); stroke-width:1; }
.dash-linechart .trend-line{ fill:none; stroke: var(--gold); stroke-width:2; }
.dash-linechart .trend-fill{ fill: url(#dashGoldFade); opacity:0.5; }
.dash-linechart .trend-dot{ fill: var(--gold); }
.dash-kpi-row{ display:flex; gap:18px; }
.dash-kpi .num{ font-family:var(--font-mono); font-size:1.3rem; color:var(--gold); }
.dash-kpi .label{ font-size:0.72rem; color:var(--fog-soft); text-transform:uppercase; letter-spacing:.04em; }
.dash-keyword-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; padding:6px 0; border-top:1px solid var(--line-dark); }
.dash-keyword-row:first-of-type{ border-top:none; }
.dash-keyword-row .kw{ color: var(--fog-soft); }
.dash-keyword-row .pos{ font-family:var(--font-mono); color: var(--teal); background: rgba(31,138,130,0.12); padding:2px 8px; border-radius:100px; font-size:0.74rem; }

/* --- bar chart (GA4 style) --- */
.dash-barchart{ display:flex; align-items:flex-end; gap:8px; height:110px; }
.dash-barchart .bar{
  flex:1; background: linear-gradient(180deg, var(--teal), var(--teal-dim)); border-radius:3px 3px 0 0;
  transform-origin: bottom; transform: scaleY(0);
}
.dash-barchart .bar.peak{ background: linear-gradient(180deg, var(--gold), var(--gold-dim)); }
.dash-counter-big{ font-family:var(--font-mono); font-size:2.1rem; color:var(--bone); }
.dash-counter-big .arrow-up{ color: var(--teal); font-size:1.1rem; }

/* --- AI engine chat mockup --- */
.dash-chat{ display:flex; flex-direction:column; gap:10px; }
.dash-chat-bubble{
  border-radius:10px; padding:10px 14px; font-size:0.85rem; line-height:1.5; max-width:92%;
}
.dash-chat-bubble.query{ align-self:flex-end; background: var(--gold); color: var(--ink); border-bottom-right-radius:2px; }
.dash-chat-bubble.answer{ align-self:flex-start; background: rgba(238,241,241,0.06); color: var(--fog-soft); border:1px solid var(--line-dark); border-bottom-left-radius:2px; }
.dash-chat-bubble.answer .cursor{ display:inline-block; width:2px; height:1em; background: var(--teal); vertical-align:middle; margin-left:2px; animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.dash-citation-pill{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.7rem; color: var(--teal); background: rgba(31,138,130,0.12);
  padding:5px 10px; border-radius:100px; border:1px solid rgba(31,138,130,0.3);
}
.dash-citation-pill::before{ content:"✓"; }

.dash-note{ text-align:center; font-size:0.78rem; color: var(--ink-soft); margin-top: var(--gap-sm); }

/* =========================================================================
   CLIENT LOGO BADGES
   ========================================================================= */
.logo-badges{ display:flex; flex-wrap:wrap; gap: 1rem; }
.logo-badge{
  display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px;
  border:1px solid var(--line); border-radius:100px; background: var(--paper);
  transition: border-color .25s ease, transform .3s ease;
}
.logo-badge:hover{ border-color: var(--teal); transform: translateY(-2px); }
.logo-badge .mono-avatar{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:.02em;
  background: var(--ink); color: var(--gold); flex:none;
}
.logo-badge .name{ font-size:0.88rem; color: var(--ink-soft); white-space:nowrap; }
.section-dark .logo-badge{ background: var(--ink-2); border-color: var(--line-dark); }
.section-dark .logo-badge .name{ color: var(--fog-soft); }
.section-dark .logo-badge .mono-avatar{ background: var(--ink); }

/* =========================================================================
   FOOTER — modern redesign
   ========================================================================= */
.site-footer{ position:relative; overflow:hidden; }
.footer-glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.footer-glow::before, .footer-glow::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px);
}
.footer-glow::before{ background: rgba(201,162,75,0.10); top:-260px; left:-120px; }
.footer-glow::after{ background: rgba(31,138,130,0.10); bottom:-280px; right:-140px; }
.site-footer .container{ position:relative; z-index:1; }

.footer-cta{
  display:flex; align-items:center; justify-content:space-between; gap: var(--gap-lg);
  padding-bottom: var(--gap-lg); border-bottom:1px solid var(--line-dark); flex-wrap:wrap;
}
.footer-cta h3{ color: var(--bone); font-size:1.5rem; max-width:26ch; margin-bottom:6px; }
.footer-newsletter{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:0; max-width:420px; }
.footer-newsletter input{
  flex:1; min-width:220px; font-family:var(--font-body); font-size:0.94rem; padding:13px 16px;
  border:1px solid var(--line-dark); border-radius:100px; background: var(--ink-2); color: var(--bone);
}
.footer-newsletter input::placeholder{ color: var(--fog-soft); }
.footer-newsletter input:focus{ outline:none; border-color: var(--gold); }
.footer-newsletter .btn{ border-radius:100px; }
.footer-newsletter .form-msg{ flex-basis:100%; margin-top:0; }

.footer-grid{ padding-top: var(--gap-lg); }

.footer-social{ display:flex; gap:12px; padding: var(--gap-md) 0; border-top:1px solid var(--line-dark); margin-top: var(--gap-lg); }
.social-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; color: var(--fog-soft);
  transition: border-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.social-icon:hover{ border-color: var(--gold); color: var(--gold); background: rgba(201,162,75,0.08); transform: translateY(-3px) rotate(-6deg); }

/* Back to top */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-dark);
  background: var(--ink-2); color: var(--gold); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, border-color .25s ease, background .25s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ border-color: var(--gold); background: var(--ink); }

@media (max-width:700px){
  .footer-cta{ flex-direction:column; align-items:flex-start; }
  .footer-newsletter{ width:100%; }
}

/* =========================================================================
   PHOTO FRAME — placeholder photography with brand-tinted overlay
   (swap the <img src> for real photos when available; the tint keeps
   any placeholder visually consistent with the site palette)
   ========================================================================= */
.photo-frame{ position:relative; border-radius: var(--radius); overflow:hidden; background: var(--ink-2); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(160deg, rgba(14,26,43,0.6), rgba(31,138,130,0.22));
  mix-blend-mode:multiply;
}
.photo-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  border:1px solid rgba(238,241,241,0.08);
}
.photo-caption{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--bone); background: rgba(14,26,43,0.55); padding:5px 10px; border-radius:100px;
  backdrop-filter: blur(4px);
}

/* =========================================================================
   CONNECTED FLOW — clean four-step sequence (SEO -> AEO -> AIEO -> GEO)
   ========================================================================= */
.flow-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.flow-node{
  position:relative; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.75rem 1.5rem; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.flow-node:hover{ transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 16px 32px rgba(14,26,43,0.08); }
.flow-node .flow-step{ font-family:var(--font-mono); font-size:0.75rem; color: var(--gold-dim); display:block; margin-bottom:14px; }
.flow-node .icon-sm{ margin-bottom:14px; }
.flow-node h3{ font-size:1.15rem; margin-bottom:8px; }
.flow-node p{ font-size:0.92rem; color: var(--ink-soft); margin:0; }
.flow-node:not(:last-child)::after{
  content:"\2192"; position:absolute; top:2rem; right:-1.85rem;
  color: var(--gold-dim); font-size:1.1rem; line-height:1;
}
@media (max-width:900px){
  .flow-row{ grid-template-columns:1fr; gap:1rem; }
  .flow-node:not(:last-child)::after{ content:"\2193"; top:auto; bottom:-1.55rem; right:50%; transform:translateX(50%); }
}

/* =========================================================================
   FAQ ACCORDION
   ========================================================================= */
.faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.section-dark .faq-list{ border-color: var(--line-dark); }
.faq-item{ border-bottom:1px solid var(--line); }
.section-dark .faq-item{ border-color: var(--line-dark); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:1.35rem 0.25rem; font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  color: var(--ink);
}
.section-dark .faq-question{ color: var(--bone); }
.faq-question:hover{ color: var(--teal); }
.faq-icon{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--gold);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease;
  font-size:0.85rem;
}
.section-dark .faq-icon{ border-color: var(--line-dark); }
.faq-item.open .faq-icon{ transform: rotate(135deg); background: rgba(201,162,75,0.1); }
.faq-answer{ height:0; overflow:hidden; }
.faq-answer-inner{ padding:0 0.25rem 1.5rem; max-width:66ch; }
.faq-answer-inner p{ color: var(--ink-soft); margin:0; }
.section-dark .faq-answer-inner p{ color: var(--fog-soft); }
.faq-answer-inner a{ color: var(--teal); text-decoration:underline; }
/* utility */
.text-center{ text-align:center; }
.mt-lg{ margin-top: var(--gap-lg); }
.mb-0{ margin-bottom:0; }
.mono{ font-family:var(--font-mono); }
.small{ font-size:0.85rem; color:var(--ink-soft); }

/* =========================================================================
   ICONS
   ========================================================================= */
.icon{ width:44px; height:44px; display:block; margin-bottom:18px; }
.icon-sm{ width:32px; height:32px; margin-bottom:12px; }
.card .icon, .card .icon-sm{ transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover .icon, .card:hover .icon-sm{ transform: translateY(-4px) scale(1.05); }

/* =========================================================================
   FEATURED SERVICES (AEO / AIEO / GEO / SEO Audit highlight band)
   ========================================================================= */
.featured-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink); background: var(--gold); padding:5px 10px; border-radius:100px; margin-bottom:14px;
}
.featured-card{
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border:1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 2.25rem;
  position:relative;
  overflow:hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.featured-card::before{
  content:""; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,75,0.16), transparent 70%);
  pointer-events:none;
}
.featured-card:hover{ transform: translateY(-6px); border-color: var(--gold); }
.featured-card h3{ color: var(--bone); font-size:1.4rem; }
.featured-card p{ color: var(--fog-soft); }
.featured-card .icon{ filter: drop-shadow(0 0 10px rgba(201,162,75,0.25)); }
.featured-card .card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; color: var(--gold); }
.featured-card .card-link .arrow{ transition: transform .3s ease; }
.featured-card:hover .card-link .arrow{ transform: translateX(4px); }

/* =========================================================================
   CHIP ROW (specialized service tags)
   ========================================================================= */
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.8rem;
  padding:10px 16px; border-radius:100px; border:1px solid var(--line);
  color: var(--ink-soft); background: var(--paper);
  transition: border-color .25s ease, color .25s ease, transform .3s ease;
}
.chip:hover{ border-color: var(--teal); color: var(--teal-dim); transform: translateY(-2px); }
.chip img{ width:18px; height:18px; }
.section-dark .chip{ background: var(--ink-2); border-color: var(--line-dark); color: var(--fog-soft); }
.section-dark .chip:hover{ border-color: var(--gold); color: var(--gold); }

/* =========================================================================
   MARQUEE (surfaces ticker)
   ========================================================================= */
.marquee{
  overflow:hidden; white-space:nowrap; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding: 18px 0;
}
.marquee-track{ display:inline-flex; gap:3rem; padding-left:3rem; }
.marquee-track span{ font-family:var(--font-mono); font-size:0.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fog-soft); display:inline-flex; align-items:center; gap:12px; }
.marquee-track span::after{ content:"◆"; color: var(--gold); font-size:0.6rem; }

/* =========================================================================
   MAGNETIC BUTTON WRAPPER (JS adds transform via GSAP quickTo)
   ========================================================================= */
.magnetic{ display:inline-block; will-change: transform; }

/* =========================================================================
   AUDIT ILLUSTRATION / SCORE GAUGE
   ========================================================================= */
.audit-illustration{ width:100%; height:auto; }
.audit-illustration .scan-line{ stroke: var(--teal); stroke-width:1.5; opacity:0.85; }
.audit-illustration .ring-track{ fill:none; stroke: var(--line-dark); stroke-width:6; }
.audit-illustration .ring-progress{ fill:none; stroke: var(--gold); stroke-width:6; stroke-linecap:round; transform-origin:50% 50%; transform:rotate(-90deg); }
.audit-illustration .check-item{ fill:none; stroke:var(--teal); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.audit-illustration text{ font-family:var(--font-mono); font-size:9px; fill:var(--fog-soft); }
.audit-illustration .score-num{ font-family:var(--font-mono); font-size:22px; fill: var(--gold); font-weight:600; }

/* Checklist rows used on the SEO Audit page */
.checklist{ display:flex; flex-direction:column; gap:14px; }
.checklist-item{ display:flex; align-items:flex-start; gap:14px; }
.checklist-item .tick{ flex:none; width:22px; height:22px; margin-top:2px; }
.checklist-item p{ margin:0; color:var(--ink-soft); }
.section-dark .checklist-item p{ color:var(--fog-soft); }

/* =========================================================================
   ORBIT VISUAL (service page hero illustration: core icon + orbiting satellites)
   ========================================================================= */
.orbit-visual{ width:100%; max-width:340px; height:auto; margin:0 auto; display:block; }
.orbit-ring{ fill:none; stroke: var(--line-dark); stroke-width:1; stroke-dasharray:2 5; }
.orbit-core{ fill: var(--ink-2); stroke: var(--gold); stroke-width:1.6; transform-origin:150px 150px; }
.orbit-dot circle{ transition: stroke .3s ease; }
.orbit-ring-group{ transform-origin:150px 150px; }

/* =========================================================================
   SMALL-PHONE OVERRIDES — intentionally placed at the END of the file.
   CSS resolves equal-specificity conflicts by source order, not by
   media-query "importance", so a plain .form-card{...} rule defined
   later in the file will silently win over an earlier, narrower
   @media block targeting the same selector. Keeping all such
   fine-tuning overrides here, after every component's base rule,
   guarantees they always take effect at these widths.
   ========================================================================= */
@media (max-width: 480px){
  .container{ padding: 0 16px; }
  section{ padding: var(--gap-lg) 0; }
  .hero{ padding:130px 0 56px; }
  .form-card{ padding: var(--gap-md) 1.25rem; }
  .cta-band{ padding: var(--gap-md) 1.25rem; }
  .featured-card, .card{ padding: 1.5rem; }
  .step{ grid-template-columns: 56px 1fr; gap: var(--gap-sm); }
  .btn{ padding: 13px 20px; font-size: 0.76rem; }
}

/* =========================================================================
   PHOTO BANNER — full-width sectional image
   ========================================================================= */
.photo-banner .photo-frame{ width:100%; }