/* Cucumber Capital: site styles, matched to the Wix design. No build step: edit and deploy. */

@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --navy: #001d4b;       /* home headline */
  /* Wix's steel blue (#4682b4) and pink (#d670b6), deepened just enough for normal-size text to
     pass WCAG AA contrast (4.5:1) on white and on the grey bands. The original shades stay for the
     wordmark and big headings, where the large-text bar is 3:1. */
  --blue: #3b72a0;       /* buttons, links, accent headings */
  --blue-dark: #305f86;
  --wordmark: #4682b4;
  --pink: #ad4a91;       /* accent text, current page in the nav */
  --pink-lg: #d670b6;    /* accent words in large headings only */
  --green: #1f8343;      /* phone icon, button outlines */
  --purple: #6755d1;     /* SMS consent text */
  --ink: #000;
  --gray: #595959;
  --cream: #fefffa;      /* home hero */
  --soft: #f7f7f7;       /* grey bands and cards */
  --danger: #b42318;
  --font-display: "Comfortaa", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-plain: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 500 15px/1.75 var(--font-body);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0 0 1.15em; }

.container { width: 100%; max-width: 1028px; margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accent { color: var(--blue); }
.pink { color: var(--pink); }
.pink-lg { color: var(--pink-lg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--blue); border-radius: 6px;
  background: var(--blue); color: #fff;
  font: 700 14px/1 var(--font-display); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn .chev { width: 11px; height: 18px; flex: none; }
.btn-outline { background: #fff; color: var(--blue); border-color: #3a3a3a; }
.btn-outline:hover { background: var(--soft); color: var(--blue-dark); border-color: #000; }
.btn-sm { min-height: 36px; padding: 0 20px; }
.btn-submit { min-width: 200px; min-height: 50px; padding: 0 30px; font-size: 15px; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 #dde2e8; transition: transform .2s ease; }
/* site.js slides the header away while scrolling down and back on scroll up (Wix: 0.2s ease-in / ease). */
.site-header.is-hidden { transform: translateY(-100%); transition-timing-function: ease-in; }
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); max-width: 1280px; margin: 0 auto; padding: 0 20px 0 0; }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; flex: none; }
.brand img { width: 52px; height: auto; }
.brand-name { font: 400 25px/1 var(--font-display); color: var(--wordmark); letter-spacing: 0; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 40px; margin-left: auto; }
.nav a:not(.btn) {
  font: 700 15px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--pink); }
.nav .btn { margin-left: 22px; }
.phone-link { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/1 var(--font-display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.phone-link img { width: 22px; height: 28px; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Footer ---------- */
.site-footer { background: #000; color: #fff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.footer-copy { font: 700 14px/1.4 var(--font-display); margin: 0; }
.footer-links { display: flex; align-items: center; gap: 14px; }
.footer-links a { color: #fff; font: 300 15px/1.4 var(--font-body); letter-spacing: .05em; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .social { display: inline-flex; }
.footer-links .social svg { width: 20px; height: 20px; }
.footer-place { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-display); margin: 0; white-space: pre; }
.footer-place img { width: 20px; height: 28px; }
.footer-disclaimer { border-top: 1px solid #2a2a2a; padding-top: 10px; padding-bottom: 12px; margin: 0 auto; font: 400 12px/1.5 var(--font-body); color: #b5b5b5; text-align: center; }

/* ---------- Home ---------- */
.hero { background: var(--cream); }
.hero-grid { display: grid; grid-template-columns: 1fr 564px; align-items: center; gap: 0; min-height: 700px; padding-top: 40px; padding-bottom: 60px; }
.hero-copy { position: relative; z-index: 1; margin-right: -320px; }
.hero h1 { font-size: 55px; line-height: 1.12; color: var(--navy); margin-bottom: 36px; letter-spacing: 0; }
.hero-sub { font: 500 20px/1.9 var(--font-display); color: var(--gray); letter-spacing: .1em; margin: 0 0 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn-outline { min-width: 178px; }
.hero-photo { width: 564px; height: 564px; }

.band { background: var(--soft); padding: 48px 0 30px; }
.features { display: flex; justify-content: center; gap: 24px 84px; flex-wrap: wrap; text-align: center; color: var(--blue); margin-bottom: 100px; }
.feature { display: flex; flex-direction: column; align-items: center; min-width: 190px; }
.feature img { height: 60px; width: auto; margin-bottom: 14px; }
.feature strong { font: 700 20px/1.4 var(--font-display); letter-spacing: .03em; }
.feature .big { font: 400 26px/1.3 var(--font-display); }
.feature span { font: 500 20px/1.4 var(--font-display); }
.feature .small { font: 400 17px/1.4 var(--font-body); }
.pitch { text-align: center; }
.pitch h2 { font: 700 28px/1.3 var(--font-body); letter-spacing: .12em; color: var(--blue); margin-bottom: 8px; }
.pitch p { font: 500 20px/1.75 var(--font-body); letter-spacing: .06em; color: var(--gray); margin: 0; }

.how { padding: 60px 0 60px; text-align: center; }
.how h2 { font-size: 45px; margin-bottom: 12px; letter-spacing: 0; }
.how .sub { font: 700 26px/1.3 var(--font-display); color: var(--blue); margin-bottom: 36px; }
.steps { list-style: none; margin: 0 auto; padding: 0 10px; max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: #f5f5f5; padding: 26px 26px 24px; display: flex; flex-direction: column; align-items: center; }
.step img { height: 77px; width: auto; margin-bottom: 22px; }
.step h3 { font-size: 23px; letter-spacing: .01em; margin-bottom: 30px; }
.step p { font: 500 16px/1.65 var(--font-body); letter-spacing: .06em; margin: 0; }
.step:first-child p { color: var(--navy); }
.arrows { display: flex; justify-content: center; gap: 190px; margin-top: 36px; color: #6b6b6b; }
.arrows svg { width: 232px; height: 116px; }

/* ---------- Inner-page banner (the Wix "strip" with a curved bottom edge) ---------- */
.page-banner { position: relative; height: 250px; overflow: hidden; background: #000; color: #fff; }
.page-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner .container { position: relative; height: 100%; display: flex; align-items: center; padding-bottom: 20px; }
.page-banner h1 { font-size: 40px; letter-spacing: .01em; text-transform: uppercase; }
/* Pages whose content is one centered column (the forms): center the title over it. */
.banner-centered .container { justify-content: center; text-align: center; }
/* ISO photo: the laptop keyboard fills its right third. Draw it at least 1500px wide from the left, so as
   the window narrows the keyboard slides off the right edge instead of under the centered title. */
.banner-iso > img { min-width: 1500px; object-position: left center; }
.page-banner .curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; fill: #fff; }
.banner-about {
  background:
    radial-gradient(circle at 79.97% 100%, rgb(128 121 255) 0%, 17.5%, rgb(128 121 255 / 0%) 35%),
    radial-gradient(circle at 92.51% 97.3%, rgb(128 121 255) 0%, 17.5%, rgb(128 121 255 / 0%) 35%),
    radial-gradient(circle at 37.2% 11.22%, rgb(0 0 0) 0%, 17.5%, rgb(0 0 0 / 0%) 35%),
    radial-gradient(circle at 98.11% 23.22%, rgb(0 0 0) 0%, 20%, rgb(0 0 0 / 0%) 40%),
    radial-gradient(circle at 30.87% 96.29%, rgb(128 121 255 / 99%) 0%, 25%, rgb(128 121 255 / 0%) 50%),
    radial-gradient(circle at 6.17% 12.62%, rgb(0 0 0) 0%, 42%, rgb(0 0 0 / 0%) 70%),
    radial-gradient(circle at 61.71% 37.57%, rgb(0 0 0) 0%, 42%, rgb(0 0 0 / 0%) 70%),
    radial-gradient(circle at 48.9% 49.52%, rgb(255 255 255) 0%, 100%, rgb(255 255 255 / 0%) 100%);
}
.banner-plain { background: var(--gray); }
.banner-light { color: #000; }

/* ---------- About ---------- */
.section { padding: 80px 0; }
.section-soft { background: var(--soft); }
.center { text-align: center; }
.mission { display: grid; grid-template-columns: 388px 1fr; gap: 42px; align-items: center; padding: 90px 0 110px; }
.blob { width: 388px; height: 408px; object-fit: cover; border-radius: 64% 36% 30% 70% / 42% 38% 62% 58%; }
.heading-lg { font-size: 45px; letter-spacing: 0; margin-bottom: 36px; text-transform: uppercase; }
.heading-md { font-size: 35px; letter-spacing: 0; margin-bottom: 28px; text-transform: uppercase; }
.prose-center { max-width: 840px; margin: 0 auto; }
.about-team { padding: 110px 0 100px; }
.about-office { padding: 90px 0 110px; }

/* ---------- Who we serve ---------- */
.serve-intro { max-width: 800px; margin: 0 auto; padding: 36px 0 30px; text-align: center; }
.serve-intro h2 { font-size: 29px; color: var(--blue); margin-bottom: 30px; letter-spacing: .02em; }
.brand-inline { font-weight: 700; color: var(--blue); }
.industries { list-style: none; margin: 0 auto; padding: 20px 0 60px; max-width: 810px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 60px; text-align: center; }
.industries img { width: 195px; height: 183px; object-fit: cover; border-radius: 50%; margin: 0 auto 26px; }
.industries span { font: 700 19px/1.2 var(--font-display); letter-spacing: .05em; }
/* Fine print under "Recently funded" on the industry pages: small and quiet, but right under the claim it qualifies. */
.funded-note { max-width: 640px; margin: 16px auto 0; font: 500 13px/1.4 var(--font-body); color: var(--gray); text-align: center; letter-spacing: 0; }

/* ---------- Consulting ---------- */
.consulting-copy { max-width: 820px; margin: 0 auto; padding: 36px 0 10px; text-align: center; font-size: 16px; }
.services { padding: 50px 0 20px; }
.service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.service-grid li { background: #f5f5f5; padding: 30px 30px 26px; text-align: center; }
.service-grid img { height: 64px; width: auto; margin: 0 auto 18px; }
.service-grid h3 { font-size: 21px; margin-bottom: 12px; }
.service-grid p { margin: 0; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 40px 0 90px; padding: 34px 40px; background: var(--navy); color: #fff; }
.cta-band h2 { font-size: 28px; margin-bottom: 6px; }
.cta-band p { margin: 0; color: #e6ebf2; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: #fff; }
.cta-band .btn-outline:hover { background: #fff; color: var(--navy); }

/* ---------- FAQ (home) ---------- */
.faq { background: var(--soft); padding: 70px 0 80px; }
.faq h2 .pink-lg { color: #c45aa5; } /* the bright pink is 2.9:1 on this grey; this is 3.7:1 */
.faq h2 { font-size: 40px; text-align: center; margin-bottom: 36px; letter-spacing: 0; }
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid #e3e3e3; }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 18px 56px 18px 22px;
  font: 700 17px/1.4 var(--font-display); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--blue); }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 15px; }
.faq-more { text-align: center; margin: 30px 0 0; }

/* ---------- Forms ---------- */
/* Plain and solid on purpose: white fields with a thin border, a blue focus ring, labels that float up
   onto the border, messages under the field. Fields use 16px text so iPhones don't zoom in on tap. */
/* One narrow column (fields read top to bottom; a wide two-column form looks like more work), with
   first/last name sharing a row. */
/* The form sits on the page like a sheet: a firm border, a soft lift, and a brand-blue band on top. */
.form-card {
  background: #fff; border: 1px solid #d3d9e0; border-top: 4px solid var(--blue); border-radius: 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%), 0 10px 28px -6px rgb(15 23 42 / 16%);
  padding: 40px 44px;
}
.form-grid, .form-stack { display: grid; gap: 26px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-head { margin-bottom: 28px; }
.form-head h2 { font-size: 24px; color: var(--navy); margin-bottom: 6px; letter-spacing: 0; }
.form-head p { margin: 0; color: var(--gray); font-size: 15px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px;
  border: 2px solid #c2c9d2; border-radius: 6px; background: #fff;
  font: 400 16px/1.4 var(--font-display); color: var(--ink); letter-spacing: .01em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field textarea.short { min-height: 96px; }
.field input:hover, .field textarea:hover { border-color: #98a1ad; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(59 114 160 / 18%); }
/* Floating labels: each label sits inside its field like placeholder text and moves up onto the field's
   top border when you click in or type, so the box is clear but you still see which field you're in.
   Inputs carry placeholder=" " so :placeholder-shown can tell an empty field from a filled one. */
.field > label {
  position: absolute; left: 10px; top: 15px; z-index: 1; max-width: calc(100% - 20px);
  padding: 0 4px; pointer-events: none;
  font: 400 16px/1.4 var(--font-display); color: #5b6270; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.field:focus-within > label,
.field:has(input:not(:placeholder-shown)) > label,
.field:has(textarea:not(:placeholder-shown)) > label {
  top: -9px; font-size: 12.5px; color: var(--blue); background: #fff;
}
/* Validation messages (site.js), shown under the field after you leave it or press the button. */
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgb(180 35 24 / 14%); }
.field.is-invalid > label { color: var(--danger); }
.field-error { display: block; margin: 6px 2px 0; font: 500 13px/1.35 var(--font-body); color: var(--danger); letter-spacing: 0; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; }
.form-actions.centered { justify-content: center; }
.form-note { margin: 0; font: 500 13px/1.4 var(--font-body); color: var(--gray); letter-spacing: 0; }
.form-status { margin: 0; flex-basis: 100%; font: 600 14px/1.4 var(--font-body); }
.form-status:empty { display: none; }
.form-status.error { color: var(--danger); }
.form-success { text-align: center; padding: 34px 8px; }
.form-success .tick { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: #e8f3ec; color: var(--green); }
.form-success .tick svg { width: 26px; height: 26px; }
.form-success h2 { font-size: 26px; color: var(--navy); margin-bottom: 10px; }
.form-success p { margin: 0 auto; max-width: 460px; }

.form-page { padding-top: 60px; padding-bottom: 110px; } /* top/bottom only: keep .container's side gutters */
.form-page .form-card { max-width: 608px; margin: 0 auto; }
.form-page.overlap { padding-top: 0; }
.form-page.overlap .form-card { position: relative; margin-top: -20px; }

.contact-top { text-align: center; padding: 16px 0 26px; }
.contact-top img.icon { width: 31px; height: 40px; margin: 0 auto 12px; }
.contact-top .phone-big { font: 700 28px/1.3 var(--font-display); color: #000; text-decoration: none; letter-spacing: 0; }
.contact-top .linkedin { display: inline-flex; margin-top: 12px; }
.contact-top .linkedin svg { width: 38px; height: 38px; }

/* ---------- Opt in + Privacy (plain sans, as on Wix) ---------- */
.plain { font-family: var(--font-plain); letter-spacing: 0; }
.optin-title { font: 700 27px/1.3 var(--font-plain); text-align: center; letter-spacing: -.01em; padding: 50px 0 60px; }
.optin-grid { display: grid; grid-template-columns: 330px 1fr; gap: 50px; padding-bottom: 110px; }
.optin-grid .lede { font: 400 20px/1.4 var(--font-plain); }
.optin-grid .form-card { padding: 40px 40px 36px; max-width: 560px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 28px 0 0; font: 400 14px/1.5 var(--font-plain); color: #3d4048; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.consent a { color: var(--blue); }
.consent .field-error { grid-column: 2; margin-top: 0; }

.legal { max-width: 980px; margin: 0 auto; padding: 30px 24px 90px; font: 400 15px/1.5 var(--font-plain); letter-spacing: 0; }
.legal h1, .legal h2 { font: 700 24px/1.3 var(--font-plain); text-align: center; margin: 0 0 30px; }
.legal h2 { margin-top: 70px; }
.legal .sect-title { font: 400 15px/1.5 var(--font-plain); text-align: left; margin: 0; }
.legal p { margin: 0 0 1.4em; }
.legal ul { margin: 0; padding-left: 28px; }
.legal .sect p { margin: 0; }
.legal address { font-style: normal; }

/* ---------- Simple pages (thank you, 404) ---------- */
.simple { text-align: center; padding: 110px 24px 130px; }
.simple h1 { font-size: 40px; color: var(--navy); margin-bottom: 18px; }
.simple p { font-size: 17px; }
.simple .hero-actions { justify-content: center; margin-top: 30px; }

/* ---------- Scroll-in fade ---------- */
/* site.js hides [data-anim] elements that start below the fold, then fades each one up as it scrolls
   into view. Anything on screen when the page loads is never hidden, so nothing waits on an animation. */
.anim-wait { opacity: 0; }
.anim-in { animation: cc-fade-up .6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
@media print { .anim-wait { opacity: 1 !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 380px) { .field-pair { grid-template-columns: 1fr; gap: 22px; } }
/* Wide screens: the Wix hero positions, measured at 1440 and 1920px. The image sits ~60px right of its
   column, the headline block starts ~230px below the header, and the cream band is 774px tall. */
@media (min-width: 1181px) {
  .hero-grid { align-items: start; min-height: 774px; padding-top: 58px; }
  .hero-copy { margin-top: 174px; }
  .hero-photo { margin-left: 61px; margin-right: -61px; }
}
/* The full menu (4 links + Apply + phone) needs ~1310px at the wide spacing; tighten it below that so it
   never overflows before the hamburger takes over at 1220px. Re-run the width scan if a label changes. */
@media (max-width: 1320px) {
  .nav { gap: 26px; }
  .nav .btn { margin-left: 6px; }
}
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr 460px; }
  .hero-photo { width: 460px; height: 460px; }
}
@media (max-width: 1220px) {
  .nav-toggle { display: block; }
  .header-inner { padding-right: 8px; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    padding: 8px 24px 24px; box-shadow: 0 12px 24px rgb(0 0 0 / 10%);
    display: none;
  }
  .nav-open .nav { display: flex; }
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid #eee; }
  .nav .btn { margin: 18px 0 8px; }
  .nav .phone-link { padding: 12px 0; border: 0; }
  .header-phone { display: none; }
}
@media (min-width: 1221px) {
  .nav .phone-link { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; }
  .hero-copy { margin-right: 0; }
  .hero-photo { width: min(100%, 460px); height: auto; margin: 10px auto 0; }
  .hero h1 { font-size: 42px; }
  .features { gap: 36px; margin-bottom: 60px; }
  .steps { grid-template-columns: 1fr; max-width: 520px; }
  .arrows { display: none; }
  .mission { grid-template-columns: 1fr; justify-items: center; padding: 60px 0; }
  .service-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 28px 24px; }
  .blob { width: min(100%, 340px); height: auto; aspect-ratio: 388 / 408; }
  .industries { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .industries img { width: 150px; height: 141px; }
  .optin-grid { grid-template-columns: 1fr; gap: 30px; }
  .optin-grid .form-card { padding: 28px 20px 30px; }
}
@media (max-width: 640px) {
  .brand-name { font-size: 24px; } /* 24px counts as large text, so Wix's blue clears the 3:1 bar */
  .brand img { width: 44px; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 17px; }
  .hero-actions .btn { width: 100%; }
  .how { padding-left: 16px; padding-right: 16px; }
  .how h2 { font-size: 28px; }
  .faq h2 { font-size: 28px; }
  .faq summary { font-size: 16px; padding: 16px 48px 16px 18px; }
  .faq details p { padding: 0 18px 18px; }
  .heading-lg { font-size: 32px; }
  .heading-md { font-size: 28px; }
  .pitch h2 { font-size: 22px; letter-spacing: .06em; }
  .pitch p { font-size: 17px; }
  .page-banner { height: 190px; }
  .page-banner h1 { font-size: 30px; }
  .page-banner .curve { height: 50px; }
  .form-card { padding: 28px 18px 28px; border-radius: 6px; }
  .form-grid, .form-stack { gap: 22px; }
  .form-head h2 { font-size: 21px; }
  .form-actions { margin-top: 26px; }
  .form-note { flex-basis: 100%; text-align: center; }
  .form-actions .btn { width: 100%; }
  .industries span { font-size: 16px; }
  .footer-inner { flex-direction: column; justify-content: center; text-align: center; padding-top: 18px; padding-bottom: 18px; }
  .optin-title { font-size: 23px; padding: 36px 0 30px; }
}