/* ─── tokens ─────────────────────────────────────────────────── */
:root{
  --bg:        #f1ebde;          /* warm sand */
  --bg-alt:    #faf7ef;          /* lighter cream */
  --bg-card:   #ffffff;
  --ink:       #0a2540;          /* deep ocean ink */
  --ink-2:     #1d3a5a;
  --muted:     #5b7891;
  --muted-2:   #8b9aaa;
  --line:      #ddd3bc;          /* sand border */
  --line-soft: #eae2ce;
  --sea:       #2a7a98;          /* accent */
  --sea-dark:  #1d5870;
  --coral:     #c46a4a;          /* sunset accent */
  --navy:      #0a2540;
  --navy-2:    #112e4d;
  --on-navy:   #dde7f1;
  --on-navy-mu:#7e95ad;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:72px }
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 "Geist","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer }

/* ─── typography ──────────────────────────────────────────────── */
.display{
  font-family:"Source Serif 4", "Times New Roman", serif;
  font-weight:380;
  letter-spacing:-0.022em;
  line-height:1.02;
}
.display em{ font-style:italic; font-weight:380; color:var(--sea-dark) }
.eyebrow{
  font:500 11px/1 "JetBrains Mono", monospace;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--sea); margin-right:8px; vertical-align:1px }
.lede{ font-size:18px; line-height:1.55; color:var(--ink-2); max-width:56ch }
.mono{ font-family:"JetBrains Mono",monospace }

/* ─── layout ─────────────────────────────────────────────────── */
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px }
section{ position:relative }
.pad{ padding:120px 0 }
.pad-sm{ padding:80px 0 }

/* ─── nav ────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px }
.brand{ display:flex; align-items:center; gap:10px; font:600 16px/1 "Geist",sans-serif; letter-spacing:-0.01em }
.brand-mark{ width:28px; height:28px }
.brand small{ color:var(--muted); font-weight:500; letter-spacing:0.04em; font-size:11px; display:block; margin-top:3px; font-family:"JetBrains Mono",monospace }
.nav-links{ display:flex; align-items:center; gap:32px }
.nav-links a{ font-size:14px; color:var(--ink-2); transition:color .15s }
.nav-links a:hover{ color:var(--sea-dark) }
.nav-cta{
  background:var(--ink); color:#faf7ef;
  padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:500;
  border:1px solid var(--ink);
  transition:transform .15s, background .15s;
}
.nav-cta:hover{ background:var(--ink-2); transform:translateY(-1px) }

/* ─── hero ───────────────────────────────────────────────────── */
.hero{ padding:88px 0 120px; overflow:hidden }
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap:72px;
  align-items:center;
}
.hero h1.display{ font-size:clamp(48px, 6.4vw, 88px); margin:18px 0 28px }
.hero h1 .accent{ display:inline-block; position:relative }
.hero h1 .accent::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:6px; height:10px;
  background:linear-gradient(180deg, transparent 0 55%, color-mix(in oklab, var(--sea) 35%, transparent) 55% 100%);
  z-index:-1;
}
.hero .lede{ margin:0 0 36px }
.cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.btn-primary{
  background:var(--ink); color:#faf7ef;
  padding:14px 22px; border-radius:999px; font-size:14.5px; font-weight:500;
  border:1px solid var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s, background .15s;
}
.btn-primary:hover{ background:var(--ink-2); transform:translateY(-1px) }
.btn-primary svg{ transition:transform .15s }
.btn-primary:hover svg{ transform:translateX(3px) }
.btn-ghost{
  background:transparent; color:var(--ink);
  padding:14px 22px; border-radius:999px; font-size:14.5px; font-weight:500;
  border:1px solid var(--line);
  transition:border-color .15s, background .15s;
}
.btn-ghost:hover{ border-color:var(--ink); background:color-mix(in oklab, var(--ink) 4%, transparent) }
.hero-meta{ display:flex; gap:36px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line) }
.hero-meta div{ display:flex; flex-direction:column; gap:4px }
.hero-meta b{ font:600 22px/1 "Source Serif 4", serif; color:var(--ink); font-feature-settings:"lnum" }
.hero-meta span{ font-size:12px; color:var(--muted) }

/* hero panel — uptime / monitoring mock */
.hero-panel{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -30px rgba(10,37,64,.18), 0 8px 18px -10px rgba(10,37,64,.12);
  position:relative;
}
.hero-panel::before{
  content:""; position:absolute; inset:auto -30px -30px auto; width:140px; height:140px;
  background:radial-gradient(circle at 70% 30%, color-mix(in oklab, var(--sea) 25%, transparent), transparent 70%);
  pointer-events:none; z-index:-1; filter:blur(20px);
}
.hp-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line-soft) }
.hp-head .ttl{ font:500 13px/1 "Geist",sans-serif; color:var(--ink); display:flex; align-items:center; gap:8px }
.hp-head .live{ font:500 10.5px/1 "JetBrains Mono",monospace; color:var(--sea-dark); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:6px }
.hp-head .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#3ba36a; box-shadow:0 0 0 3px color-mix(in oklab, #3ba36a 25%, transparent) }
.hp-rows{ display:flex; flex-direction:column; gap:0 }
.hp-row{ display:grid; grid-template-columns: 24px 1fr auto; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line-soft) }
.hp-row:last-child{ border-bottom:0 }
.hp-row .icon{ width:24px; height:24px; border-radius:6px; background:color-mix(in oklab, var(--sea) 12%, transparent); display:grid; place-items:center; color:var(--sea-dark) }
.hp-row .name{ font-size:13.5px; color:var(--ink); font-weight:500 }
.hp-row .name small{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px; font-family:"JetBrains Mono",monospace }
.hp-row .status{ font:500 11.5px/1 "JetBrains Mono",monospace; color:#2c8e5b; padding:5px 10px; border-radius:999px; background:color-mix(in oklab, #3ba36a 14%, transparent) }
.hp-row .status.warn{ color:#a26b1d; background:color-mix(in oklab, #e0a14a 18%, transparent) }
.hp-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:4px; border-top:1px solid var(--line-soft); font:500 11.5px/1 "JetBrains Mono",monospace; color:var(--muted) }
.hp-foot .ago{ color:var(--ink-2) }

/* ─── trust strip ────────────────────────────────────────────── */
.trust{ padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt) }
.trust-inner{ display:flex; align-items:center; gap:48px }
.trust-label{ font:500 11px/1.4 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); flex:0 0 auto; max-width:160px }
.trust-logos{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; flex:1 }
.trust-logos .logo{ height:22px; color:var(--ink-2); opacity:.82; transition:opacity .15s }
.trust-logos .logo:hover{ opacity:1 }
.trust-logos .logo svg{ height:100%; width:auto; display:block }

/* ─── section header ─────────────────────────────────────────── */
.sec-head{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:end; margin-bottom:64px }
.sec-head h2.display{ font-size:clamp(36px, 4.4vw, 60px); margin:14px 0 0 }
.sec-head .right{ color:var(--ink-2); font-size:16px; line-height:1.6; max-width:46ch; justify-self:end }

/* ─── problem/solution ───────────────────────────────────────── */
.problem{ background:var(--navy); color:var(--on-navy) }
.problem .eyebrow{ color:var(--on-navy-mu) }
.problem .eyebrow .dot{ background:#5fb6d6 }
.problem h2.display{ color:var(--on-navy) }
.problem h2.display em{ color:#a0d3e6 }
.problem .right{ color:var(--on-navy-mu) }
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px }
.pcol{ border-top:1px solid color-mix(in oklab, var(--on-navy) 18%, transparent); padding-top:24px }
.pcol .num{ font:500 11px/1 "JetBrains Mono",monospace; letter-spacing:.14em; color:#5fb6d6; margin-bottom:18px }
.pcol h3{ font:380 26px/1.15 "Source Serif 4",serif; letter-spacing:-0.01em; margin:0 0 12px; color:var(--on-navy) }
.pcol p{ margin:0; color:var(--on-navy-mu); font-size:14.5px; line-height:1.6 }

/* wave divider */
.wave{ display:block; width:100%; height:64px }

/* ─── services ────────────────────────────────────────────────── */
.services-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px }
@media (max-width:1180px){ .services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.svc{
  background:var(--bg-card); border:1px solid var(--line); border-radius:18px;
  padding:32px 28px 28px; display:flex; flex-direction:column; gap:18px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.svc:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(10,37,64,.2); border-color:color-mix(in oklab, var(--sea) 30%, var(--line)) }
.svc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
.svc-icon{ width:48px; height:48px; border-radius:12px; background:color-mix(in oklab, var(--sea) 10%, var(--bg-alt)); display:grid; place-items:center; color:var(--sea-dark); flex:0 0 auto }
.svc-num{ font:500 11px/1 "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.08em }
.svc h3{ font:380 28px/1.1 "Source Serif 4",serif; letter-spacing:-0.012em; margin:0 }
.svc p.short{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0 }
.svc ul{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line-soft); padding-top:18px }
.svc ul li{ font-size:13.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start }
.svc ul li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:7px; border-radius:1px;
  background:var(--sea);
}
.svc .from{ margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line-soft) }
.svc .from small{ font:500 10.5px/1 "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.08em; text-transform:uppercase }
.svc .from b{ font:380 22px/1 "Source Serif 4",serif; color:var(--ink); font-feature-settings:"lnum" }

/* ─── how we work ─────────────────────────────────────────────── */
.process{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:48px }
.proc{ position:relative }
.proc .step{ font:500 11px/1 "JetBrains Mono",monospace; color:var(--sea-dark); letter-spacing:.14em; margin-bottom:14px }
.proc h4{ font:380 22px/1.15 "Source Serif 4",serif; letter-spacing:-0.01em; margin:0 0 10px }
.proc p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-2) }
.proc + .proc::before{
  content:""; position:absolute; left:-18px; top:6px; width:10px; height:1px; background:var(--line);
}

/* ─── pricing ─────────────────────────────────────────────────── */
.tabs{ display:inline-flex; padding:5px; background:var(--bg-alt); border:1px solid var(--line); border-radius:999px; margin-bottom:48px }
.tabs button{
  background:transparent; border:0; padding:10px 22px; border-radius:999px;
  font:500 13.5px/1 "Geist",sans-serif; color:var(--ink-2);
  transition:background .15s, color .15s;
}
.tabs button:hover{ color:var(--ink) }
.tabs button[aria-selected="true"]{ background:var(--ink); color:#faf7ef }

.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.tier{
  background:var(--bg-card); border:1px solid var(--line); border-radius:18px;
  padding:32px 28px; display:flex; flex-direction:column; gap:20px;
  position:relative;
}
.tier.featured{ background:var(--navy); color:var(--on-navy); border-color:var(--navy) }
.tier.featured .tier-name, .tier.featured .price b{ color:var(--on-navy) }
.tier.featured .tier-desc, .tier.featured ul li{ color:var(--on-navy-mu) }
.tier.featured ul li::before{ background:#5fb6d6 }
.tier .badge{ position:absolute; top:-10px; right:24px; background:var(--coral); color:#fff; font:500 10.5px/1 "JetBrains Mono",monospace; letter-spacing:.08em; padding:6px 10px; border-radius:999px; text-transform:uppercase }
.tier-name{ font:500 13px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2) }
.tier .price{ display:flex; align-items:baseline; gap:6px; margin:0 }
.tier .price b{ font:380 56px/1 "Source Serif 4",serif; color:var(--ink); font-feature-settings:"lnum"; letter-spacing:-0.02em }
.tier .price span{ font-size:13px; color:var(--muted) }
.tier .tier-desc{ font-size:14px; color:var(--ink-2); margin:-8px 0 0 }
.tier ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; border-top:1px solid color-mix(in oklab, var(--line) 60%, transparent); padding-top:20px }
.tier.featured ul{ border-top-color:color-mix(in oklab, var(--on-navy) 18%, transparent) }
.tier ul li{ font-size:13.5px; line-height:1.45; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start }
.tier ul li::before{
  content:""; flex:0 0 auto; width:14px; height:14px; margin-top:3px; border-radius:50%;
  background:color-mix(in oklab, var(--sea) 18%, transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.5 7.2 6 9.7l4.5-5' stroke='%232a7a98' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:contain;
}
.tier.featured ul li::before{
  background-color:color-mix(in oklab, #5fb6d6 25%, transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.5 7.2 6 9.7l4.5-5' stroke='%23dde7f1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.tier .pick{
  margin-top:auto; padding:13px 18px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  font-weight:500; font-size:14px; transition:background .15s, border-color .15s;
}
.tier .pick:hover{ background:var(--ink); color:#faf7ef; border-color:var(--ink) }
.tier.featured .pick{ background:#faf7ef; color:var(--ink); border-color:#faf7ef }
.tier.featured .pick:hover{ background:#fff }

/* web/addons panels (alt tab content) */
.pricing-panel{ display:none }
.pricing-panel[data-active="true"]{ display:block }

.web-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.web-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:32px; display:flex; flex-direction:column; gap:14px }
.web-card h3{ font:380 30px/1.1 "Source Serif 4",serif; margin:0; letter-spacing:-0.012em }
.web-card .from{ font:500 12px/1 "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.08em; text-transform:uppercase }
.web-card .from b{ display:block; margin-top:8px; font:380 42px/1 "Source Serif 4",serif; color:var(--ink); font-feature-settings:"lnum"; letter-spacing:-0.02em; text-transform:none }
.web-card p{ margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.55 }
.web-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.web-card li{ font-size:13.5px; color:var(--ink-2); padding-left:18px; position:relative }
.web-card li::before{ content:"→"; position:absolute; left:0; color:var(--sea); font-family:"JetBrains Mono",monospace }

.addons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.addon{ background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px }
.addon h4{ font:500 15px/1.3 "Geist",sans-serif; margin:0 }
.addon p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5 }
.addon .price{ margin-top:auto; padding-top:14px; font:380 22px/1 "Source Serif 4",serif; color:var(--ink); font-feature-settings:"lnum" }
.addon .price small{ font:500 10.5px/1 "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:6px }

/* ─── about ──────────────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:72px; align-items:start }
.about-photo{
  aspect-ratio: 4/5; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, #4a8aab 0%, #1d5870 60%, #0a2540 100%);
  position:relative;
  border:1px solid var(--line);
}
.about-photo svg{ position:absolute; inset:0; width:100%; height:100% }
.about-photo .caption{
  position:absolute; left:20px; bottom:18px; right:20px; color:#dde7f1;
  font:500 11.5px/1.4 "JetBrains Mono",monospace; letter-spacing:.06em;
  display:flex; justify-content:space-between; align-items:end; text-transform:uppercase;
}
.about-photo .caption b{ color:#fff; font-weight:500 }
.about-photo .caption span{ opacity:.7 }
.about-prose h2.display{ font-size:clamp(36px,4.2vw,56px); margin:14px 0 24px }
.about-prose p{ font-size:16.5px; line-height:1.7; color:var(--ink-2); margin:0 0 18px; max-width:54ch }
.about-prose p strong{ color:var(--ink); font-weight:500 }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px; padding-top:32px; border-top:1px solid var(--line) }
.about-stats b{ display:block; font:380 36px/1 "Source Serif 4",serif; color:var(--ink); font-feature-settings:"lnum"; letter-spacing:-0.02em }
.about-stats span{ font-size:13px; color:var(--muted); display:block; margin-top:6px; line-height:1.4 }

/* ─── contact ────────────────────────────────────────────────── */
.contact{ background:var(--navy); color:var(--on-navy) }
.contact .eyebrow{ color:var(--on-navy-mu) }
.contact .eyebrow .dot{ background:#5fb6d6 }
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:72px; align-items:start }
.contact h2.display{ font-size:clamp(40px,4.6vw,64px); margin:14px 0 22px; color:var(--on-navy) }
.contact h2.display em{ color:#a0d3e6 }
.contact .lede{ color:var(--on-navy-mu); max-width:42ch }
.contact-meta{ display:flex; flex-direction:column; gap:18px; margin-top:40px; padding-top:32px; border-top:1px solid color-mix(in oklab, var(--on-navy) 18%, transparent) }
.contact-meta .row{ display:flex; gap:14px; align-items:flex-start; color:var(--on-navy-mu); font-size:14px }
.contact-meta .row svg{ flex:0 0 auto; color:#5fb6d6 }
.contact-meta .row b{ color:var(--on-navy); font-weight:500; display:block; margin-bottom:2px }

.form{
  background:var(--navy-2);
  border:1px solid color-mix(in oklab, var(--on-navy) 12%, transparent);
  border-radius:18px;
  padding:32px;
  display:flex; flex-direction:column; gap:16px;
}
.form label{ display:flex; flex-direction:column; gap:7px; font:500 11.5px/1 "JetBrains Mono",monospace; color:var(--on-navy-mu); letter-spacing:.08em; text-transform:uppercase }
.form input, .form textarea, .form select{
  font:400 15px/1.4 "Geist",sans-serif;
  background:color-mix(in oklab, var(--navy) 70%, #000);
  border:1px solid color-mix(in oklab, var(--on-navy) 16%, transparent);
  color:var(--on-navy);
  border-radius:10px;
  padding:13px 14px;
  transition:border-color .15s, background .15s;
}
.form input:focus, .form textarea:focus, .form select:focus{
  outline:none; border-color:#5fb6d6; background:color-mix(in oklab, var(--navy) 50%, #000);
}
.form textarea{ resize:vertical; min-height:90px; font-family:"Geist",sans-serif }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px }
.form-foot small{ color:var(--on-navy-mu); font-size:11px; max-width:323px; line-height:1.4 }
.form button[type="submit"]{
  background:#faf7ef; color:var(--navy);
  padding:14px 22px; border-radius:999px; border:0; font:500 14.5px/1 "Geist",sans-serif;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s, background .15s;
}
.form button[type="submit"]:hover{ background:#fff; transform:translateY(-1px) }

.form-success{
  display:none; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:24px 8px;
}
.form-success.show{ display:flex }
.form-success .check{
  width:56px; height:56px; border-radius:50%; background:color-mix(in oklab,#3ba36a 20%,transparent);
  display:grid; place-items:center; color:#9be3b8;
}
.form-success h4{ font:380 24px/1.2 "Source Serif 4",serif; color:var(--on-navy); margin:0 }
.form-success p{ color:var(--on-navy-mu); margin:0; font-size:14px }

/* ─── footer ─────────────────────────────────────────────────── */
footer{ background:var(--bg); border-top:1px solid var(--line); padding:56px 0 32px }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--line) }
.foot-grid h5{ font:500 11.5px/1 "JetBrains Mono",monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.foot-grid ul a{ font-size:14px; color:var(--ink-2) }
.foot-grid ul a:hover{ color:var(--sea-dark) }
.foot-brand p{ font-size:13.5px; color:var(--muted); margin:14px 0 0; max-width:32ch; line-height:1.55 }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:var(--muted) }
.foot-bot .compass{ display:flex; align-items:center; gap:8px }

/* ─── decorative waves layer (coastal dose) ──────────────────── */
.coastal-deco{ position:absolute; pointer-events:none; opacity:.5 }

/* ─── reduce on small ─────────────────────────────────────────── */
@media (max-width: 980px){
  .pad{ padding:80px 0 }
  .hero{ padding:56px 0 80px }
  .hero-grid, .about-grid, .contact-grid, .sec-head{ grid-template-columns:minmax(0,1fr); gap:40px }
  .services-grid, .tier-grid, .problem-grid, .proc-grid, .addons-grid, .foot-grid, .web-grid{ grid-template-columns:1fr 1fr; gap:20px }
  .nav-links a:not(.nav-cta){ display:none }
  .hero-meta{ gap:20px }
}
@media (max-width: 640px){
  .wrap{ padding:0 20px }
  .services-grid, .tier-grid, .problem-grid, .proc-grid, .addons-grid, .foot-grid, .web-grid{ grid-template-columns:1fr }
  .hero-grid{ gap:32px }
  .form .row2{ grid-template-columns:1fr }

  /* trust strip: label on its own line, logos in a compact wrapped grid instead of one per row */
  .trust{ padding:28px 0 }
  .trust-inner{ flex-direction:column; align-items:flex-start; gap:18px }
  .trust-label{ max-width:none }
  .trust-logos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 16px; width:100% }
  .trust-logos .logo{ height:18px }
  .trust-logos .logo svg{ max-width:100% }

  /* contact: keep the copy and form inside the screen, no sideways scrolling */
  .contact h2.display br{ display:none }
  .contact-meta .row > div{ min-width:0; overflow-wrap:anywhere }
  .form{ padding:22px 18px; min-width:0 }
  .form label, .form input, .form textarea, .form select{ min-width:0; max-width:100%; width:100% }
  .form-foot{ flex-direction:column; align-items:stretch; gap:12px }
  .form-foot small{ max-width:none }
  .form button[type="submit"]{ justify-content:center }

  /* footer: brand on top, the three link groups side by side, shorter bottom bar */
  footer{ padding:40px 0 24px }
  .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 16px; padding-bottom:28px }
  .foot-brand{ grid-column:1 / -1 }
  .foot-grid h5{ margin-bottom:10px }
  .foot-grid ul{ gap:8px }
  .foot-grid ul a, .foot-grid ul li{ font-size:13px; line-height:1.35 }
  .foot-bot{ flex-direction:column; align-items:flex-start; gap:6px; padding-top:18px; font-size:12px }
}

.hero-solo{ grid-template-columns:minmax(0,1fr) }
.hero-solo > div{ max-width:860px }
.services-dark{ background:var(--navy); color:var(--on-navy) }
.services-dark .eyebrow{ color:var(--on-navy-mu) }
.services-dark .eyebrow .dot{ background:#5fb6d6 }
.services-dark h2.display{ color:var(--on-navy) }
.services-dark h2.display em{ color:#a0d3e6 }
.services-dark .sec-head .right{ color:var(--on-navy-mu) }
.services-dark .svc{ background:var(--bg-alt); border-color:var(--line) }
.services-dark .svc:hover{ border-color:#5fb6d6; box-shadow:0 18px 40px -24px rgba(0,0,0,.5) }
.services-dark .svc-icon{ background:color-mix(in oklab, var(--sea) 12%, var(--bg)); color:var(--sea-dark) }
.services-dark .svc-num{ color:var(--muted) }
.services-dark .svc h3{ color:var(--ink) }
.services-dark .svc p.short, .services-dark .svc ul li{ color:var(--ink-2) }
.services-dark .svc ul{ border-top-color:var(--line) }
.services-dark .svc ul li::before{ background:var(--sea) }
.work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.work{ background:var(--bg-card); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s }
.work:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(10,37,64,.2) }
.work-shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); border-bottom:1px solid var(--line) }
.work-shot image-slot{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto }
.work-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px }
.work-id{ display:flex; align-items:center; gap:14px }
.work-logo{ width:48px; height:48px; flex:0 0 auto; background:var(--bg-alt); border-radius:10px }
.work h3{ font:380 24px/1.1 "Source Serif 4",serif; letter-spacing:-0.01em; margin:0 0 4px }
.work-url{ font:500 12px/1 "JetBrains Mono",monospace; color:var(--sea-dark) }
.work-url:hover{ color:var(--ink) }
.work-tag{ margin:4px 0 0; font:500 11px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.work-body > p:last-child{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2) }
.work-body strong{ color:var(--ink); font-weight:600 }
@media (max-width:980px){ .work-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .work-grid{ grid-template-columns:1fr } }
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.svc,.work,.form,.about-photo,.about-stats,.contact-meta,.sec-head,.foot-grid{break-inside:avoid}
@media print{
  .nav{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  *{animation-delay:-99s !important;animation-duration:.001s !important;animation-iteration-count:1 !important;animation-fill-mode:both !important;animation-play-state:running !important;transition-duration:0s !important}
}

/* ── contact form: Firebase submission states */
.hp-field{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.form-error{ margin:0; padding:10px 14px; border:1px solid #e08a6a; border-radius:10px; color:#f3c3b0; font-size:13.5px; line-height:1.45; background:color-mix(in oklab, #e08a6a 10%, transparent) }
.form-error[hidden]{ display:none }
.form button[type="submit"]:disabled{ opacity:.7; cursor:progress; transform:none }
.form .invalid{ border-color:#e08a6a }