/* =========================================================================
   Access Premium Capital — Design System
   Direction: editorial finance. Deep petrol navy, warm gold, cream paper.
   Display: Newsreader (serif). Body/UI: Instrument Sans (grotesk).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink:            #0B1F2A;   /* deep petrol navy — primary surface + text */
  --ink-deep:       #071620;   /* darkest, for footers / overlays */
  --ink-soft:       #143242;   /* raised dark surface */
  --ink-line:       #1E4356;   /* border on dark */

  --paper:          #F7F4EE;   /* cream page background */
  --paper-warm:     #EFEAE0;   /* alternating band */
  --paper-line:     #DED6C8;   /* border on light */
  --white:          #FFFFFF;

  --gold:           #C8963E;   /* accent — on dark only */
  --gold-bright:    #E0B45C;   /* hover on dark */
  --gold-deep:      #87631F;   /* gold for text on light surfaces — 4.57:1 on the
                                  warm band, 4.99:1 on cream, both WCAG AA */

  --teal:           #1F5C6E;   /* secondary support */
  --success:        #2F6B4F;
  --danger:         #A3341F;

  --text-on-dark:         #F3EFE7;
  --text-on-dark-muted:   #A8BDC7;
  --text-on-light:        #12232D;
  --text-on-light-muted:  #55676F;

  /* Type scale — 1.25 major third, clamped fluid */
  --fs-xs:   0.75rem;                                  /* 12 */
  --fs-sm:   0.875rem;                                 /* 14 */
  --fs-base: 1rem;                                     /* 16 */
  --fs-md:   1.125rem;                                 /* 18 */
  --fs-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-xl:   clamp(1.5rem,  1.1vw + 1.2rem, 2rem);
  --fs-2xl:  clamp(1.9rem,  2vw + 1.3rem,   2.75rem);
  --fs-3xl:  clamp(2.3rem,  3.4vw + 1.3rem, 3.75rem);
  --fs-4xl:  clamp(2.7rem,  5.2vw + 1.1rem, 5rem);

  /* Spacing — 4/8 rhythm */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --shell: 1240px;
  --shell-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11,31,42,.06), 0 2px 8px rgba(11,31,42,.05);
  --shadow:    0 2px 6px rgba(11,31,42,.07), 0 12px 32px rgba(11,31,42,.09);
  --shadow-lg: 0 8px 20px rgba(11,31,42,.10), 0 32px 64px rgba(11,31,42,.14);

  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 220ms;

  --z-header: 100;
  --z-menu: 200;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-on-light);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { margin: 0 0 var(--s-4); line-height: 1.1; font-weight: 400; }
p { margin: 0 0 var(--s-4); }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Typography classes ---------- */
.display, h1, h2 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-family: 'Instrument Sans', sans-serif; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-family: 'Instrument Sans', sans-serif; font-size: var(--fs-base); font-weight: 600; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: currentColor; flex: none;
}
.on-dark .eyebrow, .band-dark .eyebrow { color: var(--gold); }

.lede { font-size: var(--fs-md); color: var(--text-on-light-muted); max-width: 62ch; }
.band-dark .lede { color: var(--text-on-dark-muted); }
.muted { color: var(--text-on-light-muted); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.serif-italic { font-family: 'Newsreader', serif; font-style: italic; font-weight: 300; }

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: var(--shell-narrow); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band-warm { background: var(--paper-warm); }
.band-dark { background: var(--ink); color: var(--text-on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--text-on-dark); }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Section heading block with optional right-aligned action */
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.section-head .lede { margin-bottom: 0; }
.section-head > div { max-width: 46rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-base); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  touch-action: manipulation;
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: var(--shadow); }

.btn-ink { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn-ghost { background: transparent; color: var(--text-on-light); border-color: var(--paper-line); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(11,31,42,.04); }
.band-dark .btn-ghost, .on-dark .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost, .page-head .btn-ghost {
  color: var(--text-on-dark); border-color: var(--ink-line);
}
.band-dark .btn-ghost:hover, .on-dark .btn-ghost:hover, .hero .btn-ghost:hover,
.cta-band .btn-ghost:hover, .page-head .btn-ghost:hover {
  border-color: var(--gold); background: rgba(200,150,62,.10);
}

.btn-lg { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* A long label ("Apply for Merchant Cash Advance") can't fit on one line on a
   narrow phone. Let it wrap and go full width rather than push the page sideways. */
.btn { max-width: 100%; }
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; height: auto; padding-block: var(--s-3); }
  .btn-row > .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none; color: var(--gold-deep);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.link-arrow:hover { border-color: currentColor; gap: var(--s-3); }
/* A long email address is wider than a narrow card, so allow it to break
   rather than run past the edge. */
.link-arrow { max-width: 100%; overflow-wrap: anywhere; }
.band-dark .link-arrow { color: var(--gold); }
.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.topbar {
  background: var(--ink-deep); color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
}
.topbar .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 42px; }
.topbar a { color: var(--text-on-dark); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--gold-bright); }
.topbar-hours { display: none; }
@media (min-width: 720px) { .topbar-hours { display: block; } }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(247,244,238,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header .shell { display: flex; align-items: center; gap: var(--s-5); min-height: 76px; }

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }

/* The circular emblem, lifted from the supplied logo. It keeps its own dark
   ground (the column is silver and would disappear on cream) with the corners
   masked to alpha, so it reads as a dark badge on the light header. */
.brand-mark { width: 44px; height: 44px; flex: none; }

/* The supplied lockup's wordmark is white, so on the cream header the name is
   typeset instead, echoing the logo: serif caps over gold letterspaced caps. */
.brand-name { line-height: 1.06; }
.brand-name strong {
  display: block; font-family: 'Newsreader', serif; font-weight: 500;
  font-size: 1.15rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.brand-name span {
  display: block; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin-top: 2px;
}

/* Full supplied lockup — dark surfaces only (footer, mobile menu). */
.brand-full { display: block; }
.brand-full img { width: 168px; height: auto; }
.mobile-menu .brand-full img { width: 132px; }

.nav { display: none; margin-left: auto; align-items: center; gap: var(--s-2); }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-3) var(--s-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--text-on-light);
  background: none; border: 0;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav-link:hover { color: var(--gold-deep); background: rgba(11,31,42,.04); }
.nav-link[aria-current="page"] { color: var(--gold-deep); }
.nav-link .chev { transition: transform var(--dur) var(--ease-out); }
.nav-item.open .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--s-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: var(--s-3); border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-light);
}
.dropdown a small { display: block; font-weight: 400; color: var(--text-on-light-muted); font-size: var(--fs-xs); margin-top: 2px; }
.dropdown a:hover { background: var(--paper-warm); color: var(--gold-deep); }

.header-cta { display: none; margin-left: var(--s-4); }
@media (min-width: 1024px) { .header-cta { display: flex; gap: var(--s-3); align-items: center; } }

.burger {
  margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 1px solid var(--paper-line); border-radius: var(--radius); color: var(--ink);
}
@media (min-width: 1024px) { .burger { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink); color: var(--text-on-dark);
  padding: var(--s-5) var(--gutter) var(--s-8);
  overflow-y: auto;
  transform: translateY(-100%); visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 320ms;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }

.mobile-menu a.m-link {
  display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--ink-line);
  font-family: 'Newsreader', serif; font-size: 1.4rem; text-decoration: none; color: var(--text-on-dark);
}
.mobile-menu a.m-link:hover { color: var(--gold); }
.mobile-menu .m-close {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 1px solid var(--ink-line); border-radius: var(--radius); color: var(--text-on-dark);
}
.mobile-menu .m-foot { margin-top: var(--s-7); display: grid; gap: var(--s-3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink-deep); padding: var(--s-3) var(--s-4); font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--text-on-dark); overflow: hidden; }
.hero-grid {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

/* Left padding aligns hero copy with .shell content on wide screens,
   and falls back to the plain gutter once the viewport is narrower than the shell. */
.hero-copy {
  align-self: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-right: var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
@media (max-width: 899px) {
  .hero-copy { padding-inline: var(--gutter); }
}
.hero h1 { color: var(--text-on-dark); margin-bottom: var(--s-5); max-width: 15ch; }
.hero h1 em { font-style: italic; font-weight: 300; color: var(--gold); }
.hero .lede { color: var(--text-on-dark-muted); font-size: var(--fs-md); margin-bottom: var(--s-6); max-width: 46ch; }

.hero-media { position: relative; min-height: 320px; }
@media (min-width: 900px) { .hero-media { min-height: 100%; } }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(11,31,42,.55) 22%, rgba(11,31,42,0) 60%);
}
@media (max-width: 899px) {
  .hero-media::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(11,31,42,.2) 30%, rgba(11,31,42,0) 60%); }
}

/* subtle grain over the hero for depth */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero .shell { position: relative; z-index: 1; }

.hero-quick {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6);
}
.hero-quick span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-right: var(--s-2); width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 var(--s-4); border: 1px solid var(--ink-line); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--text-on-dark);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(200,150,62,.08); }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--ink-deep); border-top: 1px solid var(--ink-line); }
.trust-strip .shell {
  display: grid; gap: var(--s-5); padding-block: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.trust-item { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-on-dark); }
.trust-item svg { flex: none; color: var(--gold); margin-top: 2px; }
.trust-item strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.trust-item span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: var(--s-6); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #CFC3AE; }
.card h3 { margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.band-dark .card { background: var(--ink-soft); border-color: var(--ink-line); color: var(--text-on-dark); }
.band-dark .card:hover { border-color: var(--gold); }
.band-dark .card p { color: var(--text-on-dark-muted); }

.card-icon {
  width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--ink); color: var(--gold); margin-bottom: var(--s-5);
}
.band-dark .card-icon { background: rgba(200,150,62,.14); }

/* Product card — the two funding options */
.product-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card-top { padding: var(--s-6); border-bottom: 1px solid var(--paper-line); }
.product-card-top h3 { font-family: 'Newsreader', serif; font-size: var(--fs-xl); font-weight: 400; }
.product-amount {
  font-family: 'Newsreader', serif; font-size: var(--fs-2xl); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; margin: var(--s-4) 0 var(--s-2);
}
.product-amount small { font-family: 'Instrument Sans', sans-serif; font-size: var(--fs-sm); color: var(--text-on-light-muted); font-weight: 500; letter-spacing: 0; }
.product-card-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.product-card-body .btn { margin-top: auto; }

.spec-list { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.spec-list li {
  display: flex; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--paper-line); font-size: var(--fs-sm);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--text-on-light-muted); flex: none; min-width: 9.5rem; }
.spec-list .v { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
/* Below ~520px the label + value no longer fit side by side — stack them. */
@media (max-width: 520px) {
  .spec-list li { flex-direction: column; gap: var(--s-1); }
  .spec-list dt, .spec-list .k { min-width: 0; }
}

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; }
.check-list svg { flex: none; color: var(--gold-deep); margin-top: 3px; }
.band-dark .check-list svg { color: var(--gold); }
.band-dark .check-list li { color: var(--text-on-dark-muted); }

/* ---------- Split feature ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Grid/flex children default to min-width:auto, so a wide child (a long spec row,
   a table) can push the track past the viewport. Let them shrink instead. */
.split > *, .grid > *, .steps > *, .stats > *, .usecase-grid > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-media { position: relative; }
.split-media img {
  border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover;
  position: relative; z-index: 1;
}
/* Offset gold frame peeking out from behind the photo. Sits above the section
   background (z-index 0) but below the image (z-index 1) — a negative z-index
   here would drop it behind the band and disappear. */
.split-media::before {
  content: ''; position: absolute; inset: auto -14px -14px auto; width: 55%; height: 55%;
  border: 1px solid var(--gold); border-radius: var(--radius-lg); z-index: 0;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 899px) { .split.reverse .split-media { order: 0; } }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.step { position: relative; padding-top: var(--s-6); border-top: 2px solid var(--ink-line); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'Newsreader', serif; font-size: var(--fs-xl); color: var(--gold);
  display: block; margin-bottom: var(--s-3); line-height: 1;
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); margin: 0; }
.steps-light .step { border-top-color: var(--paper-line); }
.steps-light .step::before { color: var(--gold-deep); }
.steps-light .step p { color: var(--text-on-light-muted); }

/* ---------- Use cases ---------- */
.usecase-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.usecase {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 230px; display: flex; align-items: flex-end; text-decoration: none; color: var(--white);
  isolation: isolate;
}
.usecase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 500ms var(--ease-out); }
.usecase::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(7,22,32,.92) 0%, rgba(7,22,32,.45) 45%, rgba(7,22,32,.12) 100%);
}
.usecase:hover img { transform: scale(1.05); }
.usecase-label { padding: var(--s-5); }
.usecase-label strong { display: block; font-family: 'Newsreader', serif; font-size: var(--fs-lg); font-weight: 400; }
.usecase-label span { font-size: var(--fs-xs); color: #C6D5DC; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tag {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--paper-line); border-radius: 999px; background: var(--white);
  font-size: var(--fs-sm); font-weight: 500;
}
.band-dark .tag { background: var(--ink-soft); border-color: var(--ink-line); color: var(--text-on-dark); }

/* ---------- Stats ---------- */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stat { border-left: 2px solid var(--gold); padding-left: var(--s-5); }
.stat b {
  display: block; font-family: 'Newsreader', serif; font-weight: 400;
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-2);
}
.stat span { font-size: var(--fs-sm); color: var(--text-on-light-muted); }
.band-dark .stat span { color: var(--text-on-dark-muted); }

/* ---------- Testimonials ---------- */
.quote-card {
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
}
.quote-card blockquote {
  margin: 0; font-family: 'Newsreader', serif; font-size: var(--fs-lg);
  line-height: 1.45; color: var(--text-on-light);
}
.quote-card blockquote::before { content: '“'; color: var(--gold-deep); }
.quote-card blockquote::after { content: '”'; color: var(--gold-deep); }
.quote-who { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.quote-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-who strong { display: block; font-size: var(--fs-sm); }
.quote-who span { font-size: var(--fs-xs); color: var(--text-on-light-muted); }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border-top: 1px solid var(--paper-line); }
.acc-item { border-bottom: 1px solid var(--paper-line); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; background: none; border: 0; text-align: left;
  font-family: 'Newsreader', serif; font-size: var(--fs-lg); color: var(--text-on-light);
  transition: color var(--dur) var(--ease-out);
}
.acc-trigger:hover { color: var(--gold-deep); }
.acc-trigger:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.acc-icon { flex: none; width: 24px; height: 24px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; background: var(--gold-deep); left: 50%; top: 50%;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.acc-icon::before { width: 16px; height: 2px; transform: translate(-50%,-50%); }
.acc-icon::after  { width: 2px; height: 16px; transform: translate(-50%,-50%); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out); }
.acc-panel > div { overflow: hidden; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding-bottom: var(--s-5); color: var(--text-on-light-muted); max-width: 68ch; margin: 0; }
.acc-panel p + p { padding-top: var(--s-3); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow);
}
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); }
.field label .req { color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--text-on-light-muted); margin-top: var(--s-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper); color: var(--text-on-light);
  font: inherit; font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; padding-top: var(--s-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-deep); background: var(--white);
  box-shadow: 0 0 0 3px rgba(200,150,62,.22);
}
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field .error { display: none; color: var(--danger); font-size: var(--fs-xs); margin-top: var(--s-2); font-weight: 600; }
.field.invalid .error { display: block; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form-note { font-size: var(--fs-xs); color: var(--text-on-light-muted); margin-top: var(--s-4); }
.form-status {
  display: none; margin-top: var(--s-5); padding: var(--s-4);
  border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(47,107,79,.10); color: var(--success); border: 1px solid rgba(47,107,79,.3); }
.form-status.err { background: rgba(163,52,31,.08); color: var(--danger); border: 1px solid rgba(163,52,31,.3); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink-deep); color: var(--text-on-dark); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; width: 620px; height: 620px; right: -180px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,.16) 0%, rgba(200,150,62,0) 68%);
}
.cta-band .shell { position: relative; }
.cta-band h2 { color: var(--text-on-dark); max-width: 20ch; }
.cta-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 860px) { .cta-inner { grid-template-columns: 1.4fr 1fr; } }
.cta-phone {
  font-family: 'Newsreader', serif; font-size: var(--fs-xl); color: var(--gold);
  text-decoration: none; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: var(--s-3);
}
.cta-phone:hover { color: var(--gold-bright); }

/* ---------- Page header (interior pages) ---------- */
.page-head { background: var(--ink); color: var(--text-on-dark); padding-block: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-head::before {
  content: ''; position: absolute; inset: 0; opacity: .3;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(200,150,62,.14) calc(100% - 1px)) 0 0/72px 100%,
    linear-gradient(180deg, transparent 0 calc(100% - 1px), rgba(200,150,62,.10) calc(100% - 1px)) 0 0/100% 72px;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.page-head .shell { position: relative; }
.page-head h1 { color: var(--text-on-dark); max-width: 20ch; }
.page-head .lede { color: var(--text-on-dark-muted); }
.crumbs { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-bottom: var(--s-4); }
.crumbs a { color: var(--text-on-dark-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); }
.prose p, .prose li { color: var(--text-on-light-muted); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--text-on-light); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: var(--text-on-dark-muted); font-size: var(--fs-sm); }
.footer-top { padding-block: var(--s-8); display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-6); } }
.footer-brand p { margin-top: var(--s-5); max-width: 34ch; }
.footer-phone {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4);
  font-family: 'Newsreader', serif; font-size: var(--fs-lg); color: var(--gold); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footer-phone:hover { color: var(--gold-bright); }

/* An email address is far longer than a phone number, so it gets its own
   treatment: sans, smaller, and allowed to break rather than run past the
   column on a narrow screen. */
.footer-email {
  display: inline-flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-4);
  font-family: 'Instrument Sans', sans-serif; font-size: var(--fs-base); font-weight: 600;
  color: var(--gold); text-decoration: none; line-height: 1.4;
  max-width: 100%; overflow-wrap: anywhere;
}
.footer-email:hover { color: var(--gold-bright); }
.footer-email svg { flex: none; margin-top: 3px; }
.footer-col h4 { color: var(--text-on-dark); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer-col a { text-decoration: none; color: var(--text-on-dark-muted); }
.footer-col a:hover { color: var(--gold-bright); }
.footer-legal { border-top: 1px solid var(--ink-line); padding-block: var(--s-6); }
.footer-legal p { font-size: var(--fs-xs); line-height: 1.7; color: #7E98A4; max-width: 92ch; }
.footer-bottom {
  border-top: 1px solid var(--ink-line); padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  font-size: var(--fs-xs);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: var(--text-on-dark-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-bright); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Honeypot — off-screen rather than display:none, since some bots skip
   hidden fields. Never announced to screen readers (aria-hidden on the wrapper)
   and unreachable by keyboard (tabindex="-1" on the input). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Neutral "sending…" state, before it resolves to .ok or .err */
.form-status {
  background: var(--paper-warm);
  color: var(--text-on-light-muted);
  border: 1px solid var(--paper-line);
}