/*
Theme Name: MeasureUp Marketing
Theme URI: https://measureup.marketing
Author: MeasureUp Marketing
Author URI: https://measureup.marketing
Description: Custom WordPress theme for MeasureUp Marketing — marketing analytics and measurement consulting.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: measureup
*/

/* ============================================================
   @FONT-FACE — Self-hosted fonts (WOFF2 from assets/fonts/)
   ============================================================ */

/* Inter 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Inter 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Inter 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Inter 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 500 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 900 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/poppins-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* JetBrains Mono 400 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* JetBrains Mono 500 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   CSS CUSTOM PROPERTIES (design tokens)
   ============================================================ */

:root{
  --ink:#0A0E1A;
  --ink-2:#3a3f48;
  --ink-3:#5C6578;
  --line-3:#E2E6EE;
  --line-2:#c9ccd1;
  --paper:#F6F8FB;
  --paper-2:#EEF1F6;
  --accent:#1873FD;
  --accent-600:#0F5FE0;
  --accent-700:#0a4fc2;
  --sans:"Inter", system-ui, sans-serif;
  --display:"Poppins", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{ font-family:var(--sans); color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;}
html{ scroll-behavior:smooth; scroll-padding-top:96px;}

.wrap{ max-width:1280px; margin:0 auto; padding:0 32px;}
/* About page column width */
.col{ max-width:720px; margin:0 auto; }
/* Privacy page overrides col to 740px via specificity on the page — applied in Privacy section below */
a{ color:var(--accent); text-underline-offset:4px;}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--accent);
  background:var(--accent); color:#fff !important;
  font-family:var(--display); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:10px;
  text-decoration:none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--accent-600); border-color:var(--accent-600); transform:translateY(-1px); box-shadow: 0 14px 30px rgba(24,115,253,.30);}
.btn:active{ background:var(--accent-700); transform:translateY(0); box-shadow:none;}
.btn.ghost{ background:transparent; color:var(--ink) !important; border-color:var(--ink);}
.btn.ghost:hover{ background:var(--ink); color:#fff !important; box-shadow:none;}
.btn.lg{ padding:14px 22px; font-size:15px;}
.btn .arr{ font-weight:700;}

/* ============================================================
   EYEBROWS
   ============================================================ */

.eyebrow{
  font-family:var(--display);
  font-weight:700; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:24px; height:1.5px; background:currentColor;}
.eyebrow.ink{ color:var(--ink);}
.eyebrow.light{ color:#cdd1d8;}
.eyebrow.muted{ color:var(--ink-3);}

/* ============================================================
   LOGO
   ============================================================ */

.logo{ display:inline-flex; align-items:center; line-height:0;}
.logo img{ height:48px; width:auto; display:block;}
.topnav .logo img{ height:72px;}
.footer .logo img{ height:56px;}
.logo-white img{ filter:brightness(0) invert(1);}

/* ============================================================
   TOP NAV
   ============================================================ */

.topnav{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-3);
}
.topnav-inner{
  display:flex; align-items:center; gap:32px;
  padding:18px 32px;
  max-width:1280px; margin:0 auto;
}
.nav-links{ margin-left:auto; display:flex; gap:26px; align-items:center;
  font-weight:500; font-size:14px; color:var(--ink-2);
}
.nav-links a{ color:inherit; text-decoration:none;}
.nav-links a:hover{ color:var(--accent-600); text-decoration:underline; text-underline-offset:5px;}
.nav-links a.cta{
  background:var(--accent); color:#fff;
  padding:8px 14px; border-radius:8px;
  font-family:var(--display); font-weight:600;
}
.nav-links a.cta:hover{ background:var(--accent-600); text-decoration:none; color:#fff;}
/* Current page indicator */
.nav-links a[aria-current="page"]{
  color:var(--ink); font-weight:600;
  position:relative;
}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px;
  height:2px; background:var(--accent);
}
.nav-links a.cta::after{ display:none;}

/* Hamburger menu button */
.hamburger{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:8px; margin-left:auto;
  color:var(--ink);
}
.hamburger svg{ display:block; }
.hamburger .close-icon{ display:none; }
.hamburger.active .open-icon{ display:none; }
.hamburger.active .close-icon{ display:block; }

/* ============================================================
   SECTIONS (shared)
   ============================================================ */

.sec{ padding:96px 0;}
.sec.tight{ padding:64px 0;}
.sec-band{ background:var(--paper);}
.sec-dark{ background:#0c0e12; color:#fff;}
.sec-dark *{ color:inherit;}
.h-display{
  font-family:var(--display); font-weight:800;
  font-size:44px; line-height:1.05; letter-spacing:-.025em;
  margin:14px 0 18px;
}
.h-display.sm{ font-size:32px;}
.intro{
  font-size:16px; line-height:1.65; color:var(--ink-2); max-width:64ch;
  margin:0 0 36px;
}
.sec-dark .intro{ color:#cdd1d8;}

/* ============================================================
   HOMEPAGE HERO
   (Split: type left, audit document right)
   ============================================================ */

.hero{
  position:relative;
  padding:80px 0 96px;
  background:#fff;
  border-bottom:1px solid var(--line-3);
  overflow:hidden;
}
.hero .inner{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; padding:0 56px;
  display:grid; grid-template-columns: 1.05fr 1fr; gap:64px;
  align-items:center;
}
.hero .left{ position:relative; }
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:56px; line-height:1.05; letter-spacing:-.03em;
  margin:18px 0 22px; max-width:18ch;
  text-wrap:balance;
}
.hero h1 strong{ color:var(--accent); font-weight:700;}
.hero p.sub{
  font-size:17px; line-height:1.6; color:var(--ink-2);
  max-width:60ch; margin:0 0 30px;
}
.hero .ctas{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;}

/* Hero audit document mock */
.hero .right{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:520px;
}
.hero .right::before{
  content:""; position:absolute; inset:-40px -40px -40px 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(24,115,253,.08), transparent 70%),
    var(--paper);
  border-radius:18px; z-index:0;
}
.hero-doc{
  position:relative; z-index:1;
  background:#fff; border:1.5px solid var(--line-3);
  width:100%; max-width:480px; aspect-ratio: 8.5/11;
  box-shadow:0 32px 56px -32px rgba(12,14,18,.28), 0 4px 8px rgba(12,14,18,.04);
  transform:rotate(-2.2deg);
  padding:36px 32px; font-size:11px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:14px;
}
.hero-doc h5{ font-family:var(--display); font-weight:600; font-size:22px; margin:0; color:var(--ink); line-height:1.2;}
.hero-doc .pill{
  display:inline-block; padding:4px 12px;
  border:1px solid var(--accent); color:var(--accent);
  border-radius:999px; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; align-self:flex-start;
}
.hero-doc hr{ border:none; border-top:1px dashed var(--line-3); margin:6px 0;}
.hero-doc .row{ display:flex; gap:12px; align-items:center;}
.hero-doc .row .lbl{ flex:0 0 130px; color:var(--ink-3); font-family:var(--mono); font-size:10px; letter-spacing:.06em;}
.hero-doc .row .bar{ flex:1; height:8px; background:var(--line-2); border-radius:2px; position:relative; overflow:hidden;}
.hero-doc .row .bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:2px;}
.hero-doc .row.r1 .bar::after{ width:78%;}
.hero-doc .row.r2 .bar::after{ width:42%;}
.hero-doc .row.r3 .bar::after{ width:91%;}
.hero-doc .row.r4 .bar::after{ width:55%;}
.hero-doc .row.r5 .bar::after{ width:67%;}
.hero-doc .note{ margin:0; font-size:10.5px; line-height:1.45; color:var(--ink-3);}
.hero-doc .stamp{
  position:absolute; bottom:34px; right:28px;
  color:#c64a3a; border:2px solid #c64a3a; border-radius:6px;
  padding:5px 14px; font-family:var(--display); font-size:18px; font-style:italic;
  transform:rotate(-12deg); opacity:.78;
  background:rgba(255,255,255,.7);
}

/* ============================================================
   HOMEPAGE WHAT WE DO
   (Phases / Process — 3 column)
   ============================================================ */

.services .head{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:64px; align-items:end;
  margin-bottom:64px;
}
.services .head .right{ font-size:15.5px; line-height:1.65; color:var(--ink-2);}
.services .phases{
  border:1px solid var(--line-3); border-radius:18px;
  overflow:hidden; background:#fff;
  position:relative;
}
.services .phase-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
}
.services .phase{
  padding:40px 36px;
  border-right:1px solid var(--line-3);
  display:flex; flex-direction:column; gap:20px;
  position:relative; background:#fff;
  transition:background .2s ease;
}
.services .phase:last-child{ border-right:none;}
.services .phase:hover{ background:var(--paper);}
.services .phase .step{
  display:flex; align-items:center; gap:18px;
  padding-bottom:18px; border-bottom:1px dashed var(--line-3);
}
.services .phase .step .icon{
  width:56px; height:56px; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(24,115,253,.08); color:var(--accent);
  border-radius:14px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.services .phase:hover .step .icon{
  background:var(--accent); color:#fff; transform:rotate(-3deg);
}
.services .phase .step .icon svg{
  width:28px; height:28px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.services .phase .step h3{
  font-family:var(--display); font-weight:700; font-size:24px; margin:0;
  line-height:1.15;
}
.services .phase .lede{
  font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0;
}
.services .phase ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
  font-size:13.5px; line-height:1.55;
}
.services .phase li{ color:var(--ink-2); display:flex; gap:8px;}
.services .phase li::before{
  content:"+"; color:var(--accent); font-family:var(--mono);
  font-weight:600; flex-shrink:0;
}
/* Connecting arrows between phases */
.services .phase:not(:last-child)::after{
  content:""; position:absolute; right:-7px; top:62px; z-index:2;
  width:14px; height:14px; background:#fff;
  border-top:1px solid var(--line-3); border-right:1px solid var(--line-3);
  transform:rotate(45deg);
}
.services .phases-foot{
  padding:22px 36px;
  border-top:1px solid var(--line-3);
  background:var(--paper);
  display:flex; align-items:center; gap:20px;
}
.services .phases-foot p{ margin:0; font-size:14.5px; color:var(--ink-2); flex:1;}

/* ============================================================
   HOMEPAGE PROBLEMS WE SOLVE
   (2x3 cards grid)
   ============================================================ */

.problems .head{ max-width:760px; margin-bottom:36px;}
.problems .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.prob-card{
  border:1.25px solid var(--line-3); border-radius:14px;
  padding:32px 28px 28px;
  background:#fff;
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.prob-card::before{
  content:"\201C"; position:absolute; top:-2px; left:22px;
  font-family:var(--display); font-weight:800; font-size:72px;
  color:var(--accent); opacity:.18; line-height:1;
  pointer-events:none; background:none; width:auto; height:auto;
  border-radius:0;
}
.prob-card::after{
  content:"\201D"; position:absolute; bottom:-32px; right:22px;
  font-family:var(--display); font-weight:800; font-size:72px;
  color:var(--accent); opacity:.18; line-height:1;
  pointer-events:none;
}
.prob-card{ padding-top:42px; padding-bottom:32px; overflow:hidden;}
.prob-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,14,26,.06); border-color:var(--ink-3);}
.prob-card h4{
  font-family:var(--display); font-weight:700; font-size:18px;
  line-height:1.35; margin:0;
  letter-spacing:-.005em;
}
.prob-card p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0;}
.problems .footer-cta{ margin-top:36px;}

/* ============================================================
   HOMEPAGE ABOUT TEASER
   (copy left, portrait right / sticky)
   ============================================================ */

.about .grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap:72px; align-items:start;
}
.about .copy p{ font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 18px;}
.about .copy p strong{ color:var(--ink); font-weight:600;}
.about .copy .sig{
  font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink);
  margin-top:12px;
}
.about .portrait-wrap{ position:sticky; top:100px;}
.about .portrait{
  aspect-ratio:4/5;
  background:url("assets/images/mike-belasco.jpeg") center 22%/cover;
  border-radius:8px;
  box-shadow: 0 24px 48px rgba(10,14,26,.12);
}
.about .portrait-cap{
  margin-top:16px;
  font-family:var(--display); font-weight:600; font-size:14px;
  color:var(--ink);
}
.about .portrait-cap span{
  display:block; font-family:var(--sans); font-weight:400; font-size:13px;
  color:var(--ink-3); margin-top:2px;
}

/* ============================================================
   HOMEPAGE CERTIFICATIONS
   ============================================================ */

.certs{
  padding:56px 0;
  background:#fff;
  border-top:1px solid var(--line-3);
  border-bottom:1px solid var(--line-3);
}
.certs .head{
  text-align:center; margin-bottom:36px;
}
.certs .head .eyebrow{ justify-content:center;}
.certs .head h3{
  font-family:var(--display); font-weight:600; font-size:18px;
  color:var(--ink-2); margin:8px 0 0;
  letter-spacing:.01em;
}
.certs .cells{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-3); border-radius:14px;
  overflow:hidden; background:var(--line-3); gap:1px;
}
.certs .cell{
  background:#fff; padding:36px 24px;
  display:flex; align-items:center; justify-content:center;
  min-height:160px;
}
.certs .badge-img{
  height:110px; width:auto; max-width:80%;
  object-fit:contain;
  display:block;
}
/* CMM badge is wide-format — align visual mass to peers */
.certs .cell:nth-child(2) .badge-img{ height:78px; max-width:90%;}

/* ============================================================
   HOMEPAGE CLIENTS & LOGOS SECTION
   ============================================================ */

.logos-section .logos-block + .logos-block{ margin-top:64px;}
.logos-head{ margin-bottom:28px;}
.logos-head .h-display.sm{ font-size:32px; margin-top:6px;}
.logo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border:1px solid var(--line-3);
  background:var(--line-3);
  min-height:120px;
}
/* Partner block has only 3 logos — use 3 columns to avoid empty cells */
#partner-logos{ grid-template-columns:repeat(3, 1fr); }
.logo-grid > *{
  background:#fff; height:120px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3);
  padding:16px;
}
.logo-grid > * img,
.logo-grid > * svg{
  max-height:48px; max-width:100%; width:auto; height:auto;
  object-fit:contain;
  transition:filter .2s ease, opacity .2s ease;
}
/* BluShark ships as cyan + white-on-transparent — invert so it reads on white */
.logo-grid img[alt="BluShark Digital"]{
  filter: invert(1) brightness(.55) contrast(1.35);
  max-height:44px;
}
.logo-grid > *:hover img,
.logo-grid > *:hover svg{ opacity:1;}
.logo-grid:empty::before,
.logo-grid[data-empty]:not(:has(*))::before{
  content: attr(data-empty);
  grid-column: 1 / -1;
  display:flex; align-items:center; justify-content:center;
  height:120px; background:#fff;
  color:var(--ink-3); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; font-weight:500;
}
.logos-divider{
  height:1px; background:var(--line-3); margin:64px 0 0; opacity:.6;
}
.logos-foot{ margin:32px 0 0; text-align:center;}

/* Clients section head */
.clients .head{ display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:40px;}
.clients .head .left{ max-width:660px;}

/* Clients logos grid */
.clients .logos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line-3);
  border-radius:14px; overflow:hidden;
  background:var(--line-3);
}
.clients .logos .lg{
  background:#fff; height:96px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3);
  transition: color .2s ease, background .2s ease;
}
.clients .logos .lg:hover{ color:var(--ink); }
.clients .logos .lg svg{ height:32px; width:auto; max-width:80%;}
.clients .quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px;}

/* ============================================================
   PLACEHOLDER STAMPS
   ============================================================ */

.placeholder-stamp{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  background:#fff7d6; border:1px dashed #d4b50a; color:#7a5b00;
  padding:6px 12px; border-radius:999px;
  white-space:nowrap;
}
.placeholder-stamp::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#d4b50a;
}

/* ============================================================
   QUOTE CARDS
   ============================================================ */

.quote-card{
  background:#fff; border:1.25px solid var(--line-3); border-radius:14px;
  padding:32px 30px;
  position:relative;
}
.quote-card::before{
  content:"\201C"; position:absolute; top:-12px; left:24px;
  font-family:var(--display); font-weight:800; font-size:64px;
  color:var(--accent); line-height:1; background:var(--paper); padding:0 8px;
}
.quote-card q{
  quotes:none; display:block;
  font-family:var(--display); font-weight:600; font-size:18px;
  line-height:1.5; letter-spacing:-.005em; color:var(--ink);
  margin:0 0 22px;
}
.quote-card .who{
  display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--line-3); padding-top:16px;
}
.quote-card .av{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-700));
  color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:14px;
}
.quote-card .who .meta strong{
  display:block; font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink);
}
.quote-card .who .meta span{ font-size:12.5px; color:var(--ink-3);}
.quote-card .lorem-tag{
  display:inline-block;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:var(--paper-2); padding:3px 8px;
  border-radius:4px; margin-bottom:14px;
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* Page hero */
.page-hero{
  position:relative;
  padding:96px 0 80px;
  background:#fff;
  border-bottom:1px solid var(--line-3);
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; right:-180px; top:-140px;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(24,115,253,.08), transparent 60%);
  z-index:0; pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1;}
.page-hero .head{
  max-width:880px;
}
.page-hero h1{
  font-family:var(--display); font-weight:800;
  font-size:60px; line-height:1.04; letter-spacing:-.03em;
  margin:16px 0 22px;
  text-wrap:balance;
}
.page-hero h1 strong{ color:var(--accent); font-weight:800;}
.page-hero .lede{
  font-size:18px; line-height:1.6; color:var(--ink-2);
  max-width:62ch; margin:0;
}

/* Phase quick-jump strip */
.phase-jump{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-3);
  border-radius:14px;
  overflow:hidden;
  background:var(--line-3);
  gap:1px;
}
.phase-jump a{
  background:#fff; padding:22px 24px;
  display:flex; align-items:center; gap:18px;
  text-decoration:none; color:var(--ink);
  transition: background .2s ease;
}
.phase-jump a:hover{ background:var(--paper);}
.phase-jump .icon{
  flex-shrink:0;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(24,115,253,.08); color:var(--accent);
  border-radius:12px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.phase-jump a:hover .icon{
  background:var(--accent); color:#fff; transform:rotate(-3deg);
}
.phase-jump .icon svg{
  width:22px; height:22px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.phase-jump .lbl{
  display:flex; flex-direction:column; gap:2px;
}
.phase-jump .lbl strong{
  font-family:var(--display); font-weight:700; font-size:16px;
}
.phase-jump .lbl span{
  font-size:12.5px; color:var(--ink-3); line-height:1.4;
}
.phase-jump a:hover .lbl strong{ color:var(--accent-600);}

/* Phase deep-dive sections */
.phase-deep .hd{
  display:grid; grid-template-columns: auto 1fr;
  gap:36px; align-items:end;
  margin-bottom:56px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line-3);
}
.phase-deep .badge{
  flex-shrink:0;
  width:112px; height:112px;
  display:grid; place-items:center;
  background:rgba(24,115,253,.08); color:var(--accent);
  border-radius:22px;
  margin:0 0 4px;
  transition: transform .3s ease;
}
.phase-deep:hover .badge{ transform:rotate(-3deg);}
.phase-deep .badge svg{
  width:56px; height:56px; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.phase-deep .hd .meta h2{ margin:8px 0 0;}
.phase-deep .hd .meta .lede{
  margin:18px 0 0; font-size:17px; line-height:1.6;
  color:var(--ink-2); max-width:56ch;
}

.phase-deep .body{
  display:grid; grid-template-columns: 1.15fr 1fr;
  gap:64px; align-items:start;
}
.phase-deep.flip .body{
  grid-template-columns: 1fr 1.15fr;
}
.phase-deep.stack .body{
  display:flex; flex-direction:column; gap:48px;
  align-items:stretch;
}
.phase-deep.stack .prose{ max-width:72ch;}
.phase-deep.stack .common-work ul{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px 40px;
}
.phase-deep .prose p{
  font-size:16px; line-height:1.72; color:var(--ink-2);
  margin:0 0 20px;
}
.phase-deep .prose p:first-child{
  font-size:24px; line-height:1.35;
  color:var(--ink);
  font-family:var(--display); font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:28px;
  text-wrap:balance;
}
.phase-deep .prose p:last-child{ margin-bottom:0;}
.phase-deep .prose strong{
  color:var(--ink); font-weight:600;
  background:linear-gradient(transparent 62%, rgba(24,115,253,.16) 62%);
  padding:0 1px;
}

/* Common-work capability card */
.common-work{
  background:#fff;
  border:1.25px solid var(--line-3);
  border-radius:16px;
  padding:32px 32px 28px;
  box-shadow: 0 1px 2px rgba(10,14,26,.03);
  align-self:start;
}
.sec:not(.sec-band) .common-work{ background:var(--paper);}
.common-work h3{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 20px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--line-3);
}
.common-work ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.common-work li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15px; line-height:1.5; color:var(--ink);
}
.common-work li .chk{
  flex-shrink:0; width:20px; height:20px;
  border-radius:50%; background:rgba(24,115,253,.12);
  color:var(--accent);
  display:grid; place-items:center;
  margin-top:1px;
}
.common-work li .chk svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;}

/* Engagement models */
.engage .head{ max-width:760px; margin-bottom:48px;}
.engage .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.engage-card{
  background:#fff;
  border:1.25px solid var(--line-3); border-radius:16px;
  padding:36px 32px 32px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.engage-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,14,26,.06);
  border-color:var(--ink-3);
}
.engage-card h3{
  font-family:var(--display); font-weight:700; font-size:24px;
  margin:0; letter-spacing:-.015em;
}
.engage-card p{
  font-size:15px; line-height:1.65; color:var(--ink-2);
  margin:0;
}

/* Tooling band */
.tooling .head{
  display:grid; grid-template-columns: 1fr 1.2fr;
  gap:64px; align-items:end; margin-bottom:40px;
}
.tooling .head .right p{
  font-size:15.5px; line-height:1.65; color:var(--ink-2); margin:0;
}
.tooling-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--line-3);
  border-radius:14px; overflow:hidden;
  background:var(--line-3);
}
.tooling-grid .cell{
  background:#fff;
  padding:24px 20px;
  display:flex; flex-direction:column; gap:6px;
  min-height:108px; justify-content:center;
}
.tooling-grid .cell .nm{
  font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink);
}
.tooling-grid .cell .nm em{
  font-style:normal; font-weight:500; font-size:12px;
  color:var(--ink-3); margin-left:4px;
  letter-spacing:.01em;
}
.tooling-grid .cell .ctx{
  font-size:12px; color:var(--ink-3); line-height:1.4;
}

/* FAQ accordion */
.faq .head{ max-width:680px; margin-bottom:40px;}
.faq .head .h-display{ font-size:48px;}
.faq-list{
  border-top:1px solid var(--line-3);
}
.faq-list details{
  border-bottom:1px solid var(--line-3);
  padding:24px 0;
}
.faq-list details summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--display); font-weight:600; font-size:18px;
  color:var(--ink); letter-spacing:-.005em;
}
.faq-list details summary::-webkit-details-marker{ display:none;}
.faq-list summary .plus{
  flex-shrink:0; width:28px; height:28px;
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.faq-list summary .plus::before{
  content:""; width:11px; height:1.5px; background:currentColor; position:absolute;
}
.faq-list summary .plus::after{
  content:""; width:1.5px; height:11px; background:currentColor; position:absolute;
  transition: opacity .2s ease;
}
.faq-list summary .plus{ position:relative;}
.faq-list details[open] summary .plus{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.faq-list details[open] summary .plus::after{ opacity:0;}
.faq-list summary:hover{ color:var(--accent-600);}
.faq-list summary:hover .plus{ border-color:var(--accent); color:var(--accent);}
.faq-list details .ans{
  margin:18px 0 4px;
  font-size:15px; line-height:1.7; color:var(--ink-2);
  max-width:80ch;
}
.faq-list details .ans p{ margin:0 0 12px;}
.faq-list details .ans p:last-child{ margin-bottom:0;}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* About page — page hero (overrides shared .page-hero for this context) */
.about-page .page-hero{
  padding:112px 0 72px;
}
.about-page .page-hero h1{
  font-size:60px; line-height:1.04; letter-spacing:-.03em;
  margin:18px 0 28px;
}
.about-page .page-hero .lede{
  font-size:18px; line-height:1.65; color:var(--ink-2);
  max-width:62ch; margin:0;
}

/* About page body sections */
.about-page .sec{ padding:96px 0; }
.about-page .sec.first{ padding-top:104px; }
.about-page .sec + .sec{ border-top:1px solid var(--line-3); }

/* Section heading with rule */
.sec-head{ margin:0 0 36px; }
.sec-head h2{
  font-family:var(--display); font-weight:700;
  font-size:30px; line-height:1.15; letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
}
.sec-head .rule{
  width:48px; height:2px; background:var(--ink);
  margin:0 0 22px;
}

/* About page prose */
.about-page .prose p,
.about-mike .prose p,
.about-practice .prose p,
.advisory .prose p{
  font-size:17px; line-height:1.75; color:var(--ink-2);
  margin:0 0 22px;
  text-wrap:pretty;
}
.about-page .prose p:last-child,
.about-mike .prose p:last-child,
.about-practice .prose p:last-child,
.advisory .prose p:last-child{ margin-bottom:0; }
.about-page .prose strong,
.about-mike .prose strong,
.about-practice .prose strong,
.advisory .prose strong{ color:var(--ink); font-weight:600; }
.about-page .prose a,
.about-mike .prose a,
.about-practice .prose a,
.advisory .prose a{
  color:var(--accent); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.about-page .prose a:hover,
.about-mike .prose a:hover,
.about-practice .prose a:hover,
.advisory .prose a:hover{ color:var(--accent-600); }

/* Mike photo + copy layout */
.mike{ display:grid; grid-template-columns: 240px 1fr; gap:56px; align-items:start; }
.mike .photo-wrap{ position:relative; }
.mike .photo{
  width:100%; aspect-ratio: 4/5;
  background:url("assets/images/mike-belasco.jpeg") center 20%/cover;
  border-radius:6px;
  filter: grayscale(100%) contrast(1.02);
  box-shadow: 0 18px 36px rgba(10,14,26,.10);
}
.mike .photo-cap{
  margin-top:14px;
  font-family:var(--display); font-weight:600; font-size:13px;
  color:var(--ink);
  line-height:1.4;
}
.mike .photo-cap span{
  display:block; font-family:var(--sans); font-weight:400; font-size:12.5px;
  color:var(--ink-3); margin-top:2px;
}
.mike .body{ padding-top:4px; }
.mike .sec-head{ margin-bottom:24px; }

/* Agency advisory section */
.advisory .body{ max-width:640px; }
.advisory .more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:6px;
  font-family:var(--display); font-weight:600; font-size:14.5px;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.advisory .more:hover{ color:var(--accent-600); }
.advisory .more .arr{ transition: transform .2s ease; }
.advisory .more:hover .arr{ transform: translateX(3px); }

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */

/* Privacy page column is wider than About */
.privacy-page .col{ max-width:740px; margin:0 auto; }

/* Document header */
.doc-head{
  padding:80px 0 36px;
  background:#fff;
  border-bottom:1px solid var(--line-3);
}
.doc-head .meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px;
  margin-bottom:18px;
}
.doc-head h1{
  font-family:var(--display); font-weight:700;
  font-size:36px; line-height:1.15; letter-spacing:-.02em;
  margin:6px 0 18px;
  color:var(--ink);
}
.doc-head .updated{
  font-family:var(--mono); font-size:12.5px;
  color:var(--ink-3);
  letter-spacing:.01em;
}
.doc-head .updated b{ color:var(--ink-2); font-weight:500;}

/* Intro block */
.doc-intro{
  padding:36px 0 24px;
}
.doc-intro p{
  font-size:16px; line-height:1.7; color:var(--ink-2);
  margin:0 0 16px;
  text-wrap:pretty;
}
.doc-intro p:last-child{ margin-bottom:0;}
.doc-intro a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.doc-intro a:hover{ color:var(--accent-600); }

/* Table of contents */
.toc{
  margin:32px 0 8px;
  padding:20px 24px;
  background:var(--paper);
  border:1px solid var(--line-3);
  border-radius:6px;
}
.toc-title{
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 12px;
}
.toc ol{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:32px; row-gap:6px;
  counter-reset: toc;
}
.toc li{
  counter-increment: toc;
  font-size:14px; line-height:1.5;
}
.toc li a{
  display:inline-flex; gap:10px; align-items:baseline;
  color:var(--ink-2); text-decoration:none;
  padding:2px 0;
}
.toc li a::before{
  content: counter(toc, decimal-leading-zero);
  font-family:var(--mono); font-size:11px;
  color:var(--ink-3);
  min-width:2ch;
}
.toc li a:hover{ color:var(--accent-600); text-decoration:underline; text-underline-offset:3px;}

/* Document body */
.doc-body{
  padding:24px 0 56px;
}

/* Each numbered section */
.doc-sec{
  padding:32px 0 8px;
  border-top:1px solid var(--line-3);
  scroll-margin-top:104px;
}
.doc-sec:first-of-type{ border-top:none; padding-top:16px;}
.doc-sec h2{
  font-family:var(--display); font-weight:700;
  font-size:21px; line-height:1.3; letter-spacing:-.005em;
  margin:0 0 18px;
  color:var(--ink);
  display:flex; align-items:baseline; gap:14px;
}
.doc-sec h2 .num{
  font-family:var(--mono); font-weight:500;
  font-size:13px; color:var(--ink-3);
  letter-spacing:.02em;
  min-width:2.5ch;
}

/* Prose inside sections */
.doc-sec p,
.doc-sec li{
  font-size:16px; line-height:1.7; color:var(--ink-2);
  text-wrap:pretty;
}
.doc-sec p{ margin:0 0 16px;}
.doc-sec p:last-child{ margin-bottom:0;}
.doc-sec strong{ color:var(--ink); font-weight:600;}
.doc-sec a{
  color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.doc-sec a:hover{ color:var(--accent-600);}
.doc-sec ul{
  margin:0 0 16px;
  padding:0 0 0 22px;
}
.doc-sec ul li{ margin:0 0 8px;}
.doc-sec ul li:last-child{ margin-bottom:0;}

/* Contact block */
.doc-contact{
  margin-top:4px;
}
.doc-contact .org{
  font-family:var(--display); font-weight:600;
  color:var(--ink);
  display:block;
}
.doc-contact .email{
  font-family:var(--mono); font-size:14px;
  color:var(--ink-2);
  display:block;
  margin-top:2px;
}

/* Document foot */
.doc-foot{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line-3);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; flex-wrap:wrap;
}
.doc-foot .stamp{
  font-family:var(--mono); font-size:12px;
  color:var(--ink-3);
}
.back-top{
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.02em;
  color:var(--accent); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.back-top:hover{ color:var(--accent-600); text-decoration:underline; text-underline-offset:4px;}
.back-top .arr{ display:inline-block; transform:rotate(-90deg); transition:transform .2s ease;}
.back-top:hover .arr{ transform:translateY(-2px) rotate(-90deg);}

/* ============================================================
   CTA SECTION (shared across all pages)
   ============================================================ */

.cta-section{
  background:var(--ink); color:#fff;
  border-top:1px solid #000;
}
.cta-section *{ color:inherit;}
.cta-section .cta-inner{
  max-width:1280px; margin:0 auto; padding:96px 32px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.cta-section h2{
  font-family:var(--display); font-weight:800;
  font-size:64px; line-height:1; letter-spacing:-.03em;
  margin:14px 0 18px;
  text-wrap:balance;
}
.cta-section h2 mark{ background:var(--accent); color:#fff; padding:0 .12em;}
.cta-section p.sub{
  font-size:16px; line-height:1.6; color:#cdd1d8;
  max-width:42ch; margin:0 0 24px;
}
.cta-section .fallback{
  margin-top:24px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px; color:#9aa3ad;
}
.cta-section .fallback a{ color:#fff; text-decoration:underline;}

/* ============================================================
   FORM STYLING (native fallback)
   ============================================================ */

.form{ display:flex; flex-direction:column; gap:14px;}
.form label{ font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.04em; color:#cdd1d8; margin-bottom:-8px;}
.form .field{
  background:#15181d;
  border:1.25px solid #2a2f37;
  border-radius:10px;
  padding:14px 16px;
  font-family:var(--sans); font-size:14.5px; color:#fff;
  width:100%;
  transition: border-color .2s ease;
}
.form .field:focus{ outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(24,115,253,.25);}
.form .field::placeholder{ color:#5c6578;}
.form textarea.field{ height:120px; resize:vertical;}
.form button.btn{ align-self:flex-start; margin-top:6px;}

/* ============================================================
   GRAVITY FORMS OVERRIDES (dark CTA section)
   Works with GF 2.5+ orbital/foundation theme markup.
   ============================================================ */

/* --- Reset all GF theme styles --- */
.cta-section .gform_wrapper,
.cta-section .gform_wrapper *{
  box-sizing:border-box;
}
.cta-section .gform_wrapper{
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:none !important;
  --gf-ctrl-border-color: #2a2f37;
  --gf-ctrl-bg-color: #15181d;
  --gf-ctrl-label-color-primary: #cdd1d8;
  --gf-ctrl-label-color-secondary: #8a8f9a;
  --gf-color-primary: var(--accent);
}

/* Body / fields container */
.cta-section .gform_wrapper .gform_body,
.cta-section .gform_wrapper .gform-body{
  display:flex !important; flex-direction:column !important; gap:14px !important;
  padding:0 !important;
}
.cta-section .gform_wrapper .gform_fields{
  display:flex !important; flex-direction:column !important; gap:14px !important;
  padding:0 !important; margin:0 !important;
  list-style:none !important;
  grid-column-gap:0 !important; grid-row-gap:14px !important;
}

/* Individual fields */
.cta-section .gform_wrapper .gfield{
  margin:0 !important; padding:0 !important;
}

/* Labels */
.cta-section .gform_wrapper .gfield_label,
.cta-section .gform_wrapper .gform-field-label{
  font-family:var(--display) !important; font-weight:600 !important; font-size:12px !important;
  letter-spacing:.04em !important; color:#cdd1d8 !important;
  margin-bottom:4px !important; padding:0 !important;
  display:block !important;
}

/* Hide "(Required)" indicator — fields use HTML required attribute instead */
.cta-section .gform_wrapper .gfield_required,
.cta-section .gform_wrapper .gfield_required_text,
.cta-section .gform_wrapper .gfield_required_asterisk,
.cta-section .gform_wrapper .gfield_required_custom{
  display:none !important;
}

/* Sub-labels (e.g. "First" under name fields) */
.cta-section .gform_wrapper .ginput_container_name label,
.cta-section .gform_wrapper .ginput_complex label{
  display:none !important;
}

/* Required indicator */
.cta-section .gform_wrapper .gfield_required,
.cta-section .gform_wrapper .gfield_required_text,
.cta-section .gform_wrapper .gfield_required_asterisk{
  color:var(--accent) !important; font-size:11px !important;
}

/* Input containers */
.cta-section .gform_wrapper .ginput_container,
.cta-section .gform_wrapper .ginput_complex{
  margin:0 !important; padding:0 !important;
}
.cta-section .gform_wrapper .ginput_container_name,
.cta-section .gform_wrapper .ginput_complex.ginput_container_name{
  display:flex !important; flex-direction:column !important;
  gap:0 !important;
}
.cta-section .gform_wrapper .ginput_container_name span{
  display:block !important; width:100% !important; padding:0 !important;
  flex:none !important;
}

/* All text inputs, email inputs, and textareas */
.cta-section .gform_wrapper input[type="text"],
.cta-section .gform_wrapper input[type="email"],
.cta-section .gform_wrapper input[type="tel"],
.cta-section .gform_wrapper input[type="url"],
.cta-section .gform_wrapper input[type="number"],
.cta-section .gform_wrapper select,
.cta-section .gform_wrapper textarea{
  background:#15181d !important;
  border:1.25px solid #2a2f37 !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  font-family:var(--sans) !important; font-size:14.5px !important; color:#fff !important;
  width:100% !important;
  -webkit-appearance:none !important; appearance:none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  line-height:1.4 !important;
  height:auto !important; min-height:0 !important;
  margin:0 !important;
}
.cta-section .gform_wrapper input:focus,
.cta-section .gform_wrapper textarea:focus,
.cta-section .gform_wrapper select:focus{
  outline:none !important; border-color:var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(24,115,253,.25) !important;
}
.cta-section .gform_wrapper textarea{
  height:120px !important; resize:vertical !important;
}
.cta-section .gform_wrapper ::placeholder{ color:#5c6578 !important;}

/* Footer / submit area */
.cta-section .gform_wrapper .gform_footer,
.cta-section .gform_wrapper .gform-footer{
  margin:6px 0 0 !important; padding:0 !important;
  border:none !important; background:transparent !important;
}
.cta-section .gform_wrapper input[type="submit"],
.cta-section .gform_wrapper button[type="submit"],
.cta-section .gform_wrapper .gform_button{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  border:1.5px solid var(--accent) !important;
  background:var(--accent) !important; color:#fff !important;
  font-family:var(--display) !important; font-weight:600 !important; font-size:15px !important;
  padding:14px 22px !important; border-radius:10px !important;
  cursor:pointer !important;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-appearance:none !important; appearance:none !important;
  line-height:1.4 !important; height:auto !important;
  width:auto !important;
}
.cta-section .gform_wrapper input[type="submit"]:hover,
.cta-section .gform_wrapper button[type="submit"]:hover,
.cta-section .gform_wrapper .gform_button:hover{
  background:var(--accent-600) !important;
  transform:translateY(-1px); box-shadow: 0 14px 30px rgba(24,115,253,.30);
}

/* Validation */
.cta-section .gform_wrapper .validation_error,
.cta-section .gform_wrapper .validation_message,
.cta-section .gform_wrapper .gfield_validation_message{
  color:#ff6b6b !important; font-size:13px !important;
  background:transparent !important; border:none !important;
  padding:4px 0 !important;
}
.cta-section .gform_wrapper .gfield_error input,
.cta-section .gform_wrapper .gfield_error textarea{
  border-color:#ff6b6b !important;
}

/* Confirmation message */
.cta-section .gform_confirmation_message{
  color:#fff; font-family:var(--display); font-size:20px; font-weight:600;
  text-align:center; padding:40px 0;
}

/* Fieldset reset (Name field uses <fieldset>/<legend>) */
.cta-section .gform_wrapper fieldset.gfield{
  border:none !important; padding:0 !important; margin:0 !important;
  min-width:0 !important;
}
.cta-section .gform_wrapper fieldset.gfield > legend{
  display:block !important; float:none !important;
  width:auto !important; padding:0 !important; margin-bottom:6px !important;
  font-family:var(--display) !important; font-weight:600 !important; font-size:12px !important;
  letter-spacing:.04em !important; color:#cdd1d8 !important;
  border:none !important;
}

/* Name field: hide sub-label, fix grid layout */
.cta-section .gform_wrapper .ginput_container_name .gform-field-label--type-sub,
.cta-section .gform_wrapper .ginput_complex label{
  display:none !important;
}
.cta-section .gform_wrapper .ginput_complex{
  display:block !important;
}
.cta-section .gform_wrapper .ginput_complex .gform-grid-col,
.cta-section .gform_wrapper .ginput_container_name span.name_first{
  display:block !important; width:100% !important;
  padding:0 !important; margin:0 !important;
  flex:none !important;
}

/* Hide GF theme injected elements */
.cta-section .gform_wrapper .gform_validation_errors,
.cta-section .gform_wrapper .gform_required_legend{
  display:none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  background:#fff; border-top:1px solid var(--line-3);
  padding:64px 32px 36px;
}
.footer-inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap:56px;
}
.footer .brand p{ max-width:36ch; color:var(--ink-3); font-size:13.5px; margin:16px 0 0; line-height:1.55;}
.footer h4{
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 16px; color:var(--ink);
}
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;
  font-size:13.5px; color:var(--ink-2);
}
.footer ul a{ color:inherit; text-decoration:none;}
.footer ul a:hover{ color:var(--accent-600); text-decoration:underline;}
.footer ul a.social{ display:inline-flex; align-items:center; gap:8px;}
.footer ul a.social svg{ color:var(--accent);}
.footer-bot{
  max-width:1280px; margin:32px auto 0; padding-top:18px;
  border-top:1px solid var(--line-3);
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--ink-3);
}
.footer-bot a{ color:var(--ink-3); text-decoration:none;}
.footer-bot a:hover{ color:var(--accent); text-decoration:underline;}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.skip-link{
  position:absolute; left:-9999px; top:8px;
  background:var(--ink); color:#fff; padding:10px 16px;
  border-radius:8px; text-decoration:none; z-index:100;
  font-family:var(--display); font-weight:600; font-size:14px;
}
.skip-link:focus{ left:16px;}
:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}
.btn:focus-visible{ outline-offset:4px;}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- 980px breakpoint ---- */
@media (max-width: 980px){
  /* Hero */
  .hero{ padding:64px 0;}
  .hero .inner{ grid-template-columns:1fr; gap:40px; padding:0 24px;}
  .hero h1{ font-size:38px;}
  .hero .right{ min-height:auto;}
  .hero-doc{ max-width:380px;}

  /* Shared display heading */
  .h-display{ font-size:34px;}

  /* Homepage sections */
  .services .head{ grid-template-columns:1fr; gap:32px;}
  .about .grid{ grid-template-columns:1fr; gap:32px;}
  .services .phase-row{ grid-template-columns:1fr;}
  .services .phase{ border-right:none; border-bottom:1px solid var(--line-3);}
  .services .phase:last-child{ border-bottom:none;}
  .services .phases-foot{ flex-direction:column; align-items:flex-start; padding:24px;}
  .services .phase:not(:last-child)::after{ display:none;}
  .problems .grid{ grid-template-columns:1fr;}
  .about .portrait-wrap{ position:static;}
  .logo-grid{ grid-template-columns:repeat(2,1fr);}
  .certs .cells{ grid-template-columns:1fr;}
  .clients .logos{ grid-template-columns:repeat(2,1fr);}
  .clients .quotes{ grid-template-columns:1fr;}
  .clients .head{ flex-direction:column; align-items:flex-start;}

  /* CTA section */
  .cta-section .cta-inner{ grid-template-columns:1fr; gap:32px;}
  .cta-section h2{ font-size:42px;}

  /* Footer */
  .footer-inner{ grid-template-columns:1fr 1fr !important; gap:32px;}

  /* Services page */
  .page-hero{ padding:64px 0 56px;}
  .page-hero h1{ font-size:40px;}
  .page-hero .lede{ font-size:16px;}
  .phase-jump{ grid-template-columns:1fr;}
  .phase-deep .hd{ grid-template-columns:1fr; gap:24px; align-items:start;}
  .phase-deep .badge{ width:88px; height:88px; border-radius:18px;}
  .phase-deep .badge svg{ width:44px; height:44px;}
  .phase-deep .body{ grid-template-columns:1fr !important; gap:32px;}
  .phase-deep .prose p:first-child{ font-size:22px;}
  .phase-deep.stack .common-work ul{ grid-template-columns:1fr;}
  .phase-deep .meta-grid{ grid-template-columns:1fr;}
  .engage .grid{ grid-template-columns:1fr;}
  .tooling .head{ grid-template-columns:1fr; gap:20px;}
  .tooling-grid{ grid-template-columns:repeat(2,1fr);}

  /* About page */
  .about-page .page-hero{ padding:80px 0 56px; }
  .about-page .page-hero h1{ font-size:42px; }
  .about-page .page-hero .lede{ font-size:16.5px; }
  .about-page .sec{ padding:72px 0; }
  .sec-head h2{ font-size:26px; }
  .about-page .prose p{ font-size:16px; line-height:1.7; }
  .mike{ grid-template-columns:1fr; gap:32px; }
  .mike .photo-wrap{ max-width:240px; }

  /* Privacy page */
  .doc-head{ padding:64px 0 28px;}
  .doc-head h1{ font-size:30px;}
  .doc-intro p{ font-size:15.5px;}
  .toc ol{ grid-template-columns:1fr; column-gap:0; row-gap:4px;}
  .doc-sec h2{ font-size:19px;}
  .doc-sec p, .doc-sec li{ font-size:15.5px; line-height:1.7;}
}

/* ---- 540px breakpoint ---- */
@media (max-width: 540px){
  /* Layout */
  .wrap{ padding:0 20px;}
  .topnav-inner{ padding:14px 20px;}

  /* Hamburger shows; nav links become a vertical dropdown */
  .hamburger{ display:block; }
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(12px);
    flex-direction:column;
    padding:20px 24px;
    gap:16px;
    border-bottom:1px solid var(--line-3);
    box-shadow:0 8px 24px rgba(10,14,26,.08);
  }
  .nav-links.active{ display:flex; }
  .nav-links a{ font-size:16px; padding:8px 0; }
  .nav-links a.cta{
    align-self:flex-start;
    margin-top:4px;
  }
  /* Override any hide rules — all links visible in open menu */
  .topnav .nav-links a:not(.cta){ display:none; }
  .nav-links.active a:not(.cta){ display:block; }

  /* Hero */
  .hero{ padding:48px 0 56px;}
  .hero h1{ font-size:30px; line-height:1.1;}
  .hero .sub{ font-size:15px;}
  .hero-doc{ max-width:100%; transform:rotate(-1deg); padding:24px 20px; font-size:10.5px;}

  /* Shared */
  .h-display{ font-size:30px;}
  .sec{ padding:64px 0;}

  /* Homepage sections */
  .services .head{ margin-bottom:36px;}
  .services .phase{ padding:32px 24px;}
  .services .phases-foot{ padding:20px;}
  .prob-card{ padding:38px 22px 28px;}
  .prob-card h4{ font-size:17px;}
  .about .portrait{ max-width:280px;}
  .certs{ padding:40px 0;}
  .certs .cell{ padding:28px 16px; min-height:140px;}
  .certs .badge-img{ height:88px;}
  .certs .cell:nth-child(2) .badge-img{ height:62px;}

  /* CTA section */
  .cta-section{ padding:0;}
  .cta-section .cta-inner{ padding:64px 20px;}
  .cta-section h2{ font-size:34px;}

  /* Footer */
  .footer-inner{ grid-template-columns:1fr !important;}

  /* Services page */
  .page-hero{ padding:48px 0 40px;}
  .page-hero h1{ font-size:30px; line-height:1.1;}
  .h-display{ font-size:28px;}
  .phase-deep .badge{ width:72px; height:72px; border-radius:16px;}
  .phase-deep .badge svg{ width:36px; height:36px;}
  .deliverables{ padding:24px 22px;}
  .engage-card{ padding:24px 22px;}
  .tooling-grid{ grid-template-columns:1fr;}
  .faq-list summary{ font-size:16px;}

  /* About page */
  .about-page .page-hero{ padding:64px 0 48px; }
  .about-page .page-hero h1{ font-size:32px; line-height:1.1; }
  .about-page .sec{ padding:56px 0; }
  .sec-head h2{ font-size:23px; }

  /* Privacy page */
  .doc-head{ padding:48px 0 24px;}
  .doc-head h1{ font-size:26px;}
  .doc-sec{ padding-top:28px;}
}