/* Xcelerate site styles. Mobile first. Brand tokens come from the Brand Guidelines (Sept 2023):
   Emerald 1DD88A, Aquamarine 3AF2AE, French Gray B2B5C0, Eerie Black 212427.
   Layout idea: white page, generous space, Eerie Black bands for proof and the final call to action,
   emerald used for fills and highlights (never as text on white, it does not have enough contrast). */

:root {
  --ink: #212427;
  --emerald: #1DD88A;
  --aqua: #3AF2AE;
  --gray: #B2B5C0;

  --bg: #FFFFFF;
  --bg-soft: #F4F6F6;
  --fg: #212427;
  --muted: #585F66;
  --line: #E3E7E9;
  --card: #FFFFFF;

  --band: #212427;
  --band-fg: #FFFFFF;
  --band-muted: #B2B5C0;
  --band-line: rgba(255, 255, 255, .14);

  --accent: #1DD88A;
  --accent-text: #0A7447;
  --focus: #0A7447;
  --btn-bg: #1DD88A;
  --btn-fg: #212427;
  --btn-hover: #3AF2AE;
  --soft-btn-bg: #EDF0F1;
  --soft-btn-hover: #E0E5E7;

  --ph-bg: #FFF1BF;
  --ph-fg: #5A4200;
  --ph-line: #D9A300;

  --shadow: 0 1px 2px rgba(33, 36, 39, .06), 0 14px 34px rgba(33, 36, 39, .10);
  --shadow-lg: 0 2px 4px rgba(33, 36, 39, .06), 0 28px 60px rgba(33, 36, 39, .16);

  --font: "Aeonik", "Satoshi", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --section-y: clamp(72px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131517; --bg-soft: #1A1D1F; --fg: #F1F3F4; --muted: #A5ABB3; --line: #2B2F32; --card: #1A1D1F;
    --band: #0B0C0D; --accent-text: #3AF2AE; --focus: #3AF2AE;
    --soft-btn-bg: #262A2D; --soft-btn-hover: #31363A;
    --ph-bg: #3A2F08; --ph-fg: #FFE08A; --ph-line: #8A6A00;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131517; --bg-soft: #1A1D1F; --fg: #F1F3F4; --muted: #A5ABB3; --line: #2B2F32; --card: #1A1D1F;
  --band: #0B0C0D; --accent-text: #3AF2AE; --focus: #3AF2AE;
  --soft-btn-bg: #262A2D; --soft-btn-hover: #31363A;
  --ph-bg: #3A2F08; --ph-fg: #FFE08A; --ph-line: #8A6A00;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@font-face{font-family:"Satoshi";font-weight:400;font-display:swap;src:url(/assets/fonts/satoshi-regular.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-weight:500;font-display:swap;src:url(/assets/fonts/satoshi-medium.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-weight:600 700;font-display:swap;src:url(/assets/fonts/satoshi-bold.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-weight:800 900;font-display:swap;src:url(/assets/fonts/satoshi-black.woff2) format("woff2")}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--aqua); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1232px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 640px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
section { scroll-margin-top: 84px; }
.section { padding-block: var(--section-y); }
.soft { background: var(--bg-soft); }

/* Type scale */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.band .eyebrow { color: var(--aqua); }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.9vw, 4.75rem); line-height: 1.02; letter-spacing: -.038em; font-weight: 700; }
h2 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.35rem); line-height: 1.07; letter-spacing: -.032em; font-weight: 700; }
h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; }
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--muted); max-width: 38rem; }
.band .lede { color: var(--band-muted); }
.sec-head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 6px 6px 6px 24px;
  border: 0; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  white-space: nowrap;
}
.btn .ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--emerald); overflow: hidden;
}
.btn .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.btn:hover { background: var(--btn-hover); box-shadow: 0 10px 28px rgba(29, 216, 138, .35); }
.btn:hover .ico svg { transform: translateX(3px) rotate(-45deg); }
.btn:active { transform: translateY(1px); }
.btn.soft { background: var(--soft-btn-bg); color: var(--fg); padding: 0 26px; }
.btn.soft:hover { background: var(--soft-btn-hover); box-shadow: none; }
.btn.small { min-height: 44px; padding: 4px 4px 4px 18px; font-size: .9375rem; gap: 10px; }
.btn.small .ico { width: 36px; height: 36px; }
.btn.block { width: 100%; justify-content: space-between; }
.band .btn.soft { background: rgba(255, 255, 255, .1); color: var(--band-fg); }
.band .btn.soft:hover { background: rgba(255, 255, 255, .18); }
.linkarrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg); }
.linkarrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.linkarrow:hover svg { transform: translateX(4px); }

/* Placeholder marker, visible only so nothing unfinished slips into the live site unnoticed */
.ph-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--ph-line); background: var(--ph-bg); color: var(--ph-fg); font-size: .75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5; }

/* Preview notice */
.notice { background: var(--ph-bg); color: var(--ph-fg); font-size: .875rem; }
.notice .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-block: 10px; }
.notice button { border: 0; background: transparent; font-weight: 600; text-decoration: underline; padding: 4px 6px; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.logo img { height: 26px; width: auto; }
.logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .logo-light { display: none; } :root:not([data-theme="light"]) .logo .logo-dark { display: block; } }
:root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
.nav-links { display: none; gap: 4px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font-weight: 500; font-size: .9688rem; color: var(--fg); transition: background-color .3s var(--ease); }
.nav-links a:hover { background: var(--soft-btn-bg); }
.nav-cta { display: none; }
.menu-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--soft-btn-bg); }
.menu-btn span, .menu-btn span::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .35s var(--ease); }
.menu-btn span::before { content: ""; position: absolute; top: 6px; left: 0; }
.menu-btn[aria-expanded="true"] span { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); top: 6px; }
.mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px max(16px, env(safe-area-inset-left, 0px)) 24px; }
.mobile-panel a { display: block; padding: 14px 4px; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-panel .btn { margin-top: 20px; border-bottom: 0; }
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn, .mobile-panel { display: none !important; }
}

/* Hero */
.hero { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 96px); overflow-x: clip; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--soft-btn-bg); font-size: .875rem; font-weight: 500; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 55%, transparent) 62% 92%, transparent 92%); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.proof-line { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; color: var(--muted); }
.proof-line b { color: var(--fg); font-weight: 600; }
.hv { position: relative; width: min(100%, 500px); aspect-ratio: 1 / 1.02; margin-inline: auto; --px: 0; --py: 0; }
.hc { position: absolute; width: 50%; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--bg-soft); box-shadow: var(--shadow-lg); transition: transform .5s var(--ease); }
.hc img { width: 100%; height: 100%; object-fit: cover; }
.hc .tag { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #212427; font-size: .75rem; font-weight: 600; }
.hc-1 { left: 0; top: 24%; transform: rotate(-5deg) translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0); z-index: 1; }
.hc-2 { left: 24%; top: 0; width: 52%; z-index: 3; transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -10px), 0); }
.hc-3 { right: 0; top: 40%; transform: rotate(5deg) translate3d(calc(var(--px) * -12px), calc(var(--py) * 6px), 0); z-index: 2; }
.fl { position: absolute; z-index: 4; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; transition: transform .6s var(--ease); }
.fl-a { right: 2%; top: 6%; transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0); }
.fl-a .ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.fl-a .ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fl-b { left: 0; bottom: 4%; flex-direction: column; align-items: flex-start; gap: 7px; width: 44%; transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * -8px), 0); }
.fl-b .sk { display: block; height: 7px; border-radius: 4px; background: var(--line); width: 100%; }
.fl-b .sk.short { width: 60%; }
.fl-b .sk.hi { background: var(--accent); width: 38%; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 56px; }
}
@media (max-width: 420px) {
  .fl { font-size: .75rem; padding: 9px 11px; }
  .hc .tag { font-size: .6875rem; padding: 4px 9px; }
}

/* Stats and logo strip */
.stats { border-block: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 32px 8px 32px 0; display: grid; gap: 4px; }
.stat b { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); line-height: 1; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .9688rem; max-width: 16rem; }
@media (min-width: 760px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 44px 24px 44px 28px; border-left: 1px solid var(--line); }
  .stat:first-child { border-left: 0; padding-left: 0; }
}
.logos { padding-block: 40px 56px; display: grid; gap: 22px; }
.logos .cap { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; color: var(--muted); font-size: .9688rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 16px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.lg { display: grid; place-items: center; min-width: 150px; height: 56px; padding-inline: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: .8125rem; font-weight: 500; }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; width: auto; } .track [aria-hidden="true"] { display: none; } }

/* Services */
.svc-grid { display: grid; gap: 16px; }
.svc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease); }
.svc:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: var(--shadow); }
.svc .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); transition: background-color .4s var(--ease), color .4s var(--ease); }
.svc:hover .ic { background: var(--accent); color: var(--ink); }
.svc .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.svc p { color: var(--muted); }
.svc .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc .price { font-size: .9375rem; color: var(--muted); }
.svc .price b { color: var(--fg); font-size: 1.125rem; font-weight: 700; }
.svc.talk { background: var(--band); color: var(--band-fg); border-color: transparent; overflow: hidden; justify-content: space-between; }
.svc.talk p { color: var(--band-muted); }
.svc.talk::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; background: url(/assets/logo/xcelerate-symbol.svg) no-repeat center / contain; opacity: .16; pointer-events: none; }
.svc.talk:hover { border-color: transparent; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .svc { padding: 32px; } }

/* Process */
.proc-grid { display: grid; gap: 40px; }
.proc-side { display: grid; gap: 22px; align-content: start; justify-items: start; }
.steps { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: 26px; border-radius: 26px; border: 1px solid var(--line); background: var(--card); transition: opacity .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.step .n { grid-row: span 2; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.step p { color: var(--muted); }
@media (min-width: 960px) {
  .proc-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .proc-side { position: sticky; top: 120px; }
  .js .step { opacity: .5; }
  .js .step.is-active { opacity: 1; border-color: var(--accent); box-shadow: var(--shadow); transform: translateX(6px); }
  .step { padding: 34px; }
}

/* Work */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pill { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: .9375rem; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pill:hover { background: var(--soft-btn-bg); }
.pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
:root[data-theme="dark"] .pill[aria-pressed="true"] { background: var(--emerald); color: var(--ink); border-color: var(--emerald); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill[aria-pressed="true"] { background: var(--emerald); color: var(--ink); border-color: var(--emerald); } }
.work-grid { display: grid; gap: 22px 12px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 639px) { .proj h3 { font-size: 1rem; } .proj .meta { font-size: .8125rem; } .proj .ph { border-radius: 18px; padding: 10px; } .proj .ph .ph-tag { font-size: .6875rem; padding: 2px 8px; } }
.proj { display: grid; gap: 14px; }
.proj[hidden] { display: none; }
.proj.pop { animation: pop .6s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.proj .ph { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; display: grid; place-items: end start; padding: 16px; background: linear-gradient(150deg, var(--c1), var(--c2)); isolation: isolate; }
.proj .ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/assets/logo/xcelerate-symbol.svg) no-repeat 118% 112% / 70%; opacity: .2; transition: transform .8s var(--ease); }
.proj:hover .ph::before { transform: scale(1.08) rotate(-3deg); }
.proj .go { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--emerald); display: grid; place-items: center; transform: scale(.7); opacity: 0; transition: transform .45s var(--ease), opacity .3s var(--ease); }
.proj .go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proj:hover .go, .proj:focus-within .go { transform: none; opacity: 1; }
@media (hover: none) { .proj .go { transform: none; opacity: 1; } }
.proj h3 { font-size: 1.125rem; }
.proj .meta { color: var(--muted); font-size: .9375rem; margin-top: 2px; }
.work-more { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; }
@media (min-width: 640px) { .work-grid { gap: 28px 16px; } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; } }
.proj:nth-child(4n+1) { --c1: #D9F8EA; --c2: #8BE9BF; }
.proj:nth-child(4n+2) { --c1: #E7EAEE; --c2: #B2B5C0; }
.proj:nth-child(4n+3) { --c1: #C9FBE7; --c2: #3AF2AE; }
.proj:nth-child(4n+4) { --c1: #DCE0E4; --c2: #8E939C; }
.proj .ph .ph-tag { background: rgba(255, 255, 255, .85); border-color: #B58900; color: #4A3700; }

/* Testimonials band */
.band { background: var(--band); color: var(--band-fg); }
.quote-wrap { display: grid; gap: 36px; }
.quote { display: grid; gap: 26px; min-height: 17rem; align-content: start; }
.quote[hidden] { display: none; }
.quote > .ph-tag { justify-self: start; }
.quote.fade { animation: fade .7s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quote blockquote { font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.625rem); line-height: 1.22; letter-spacing: -.025em; font-weight: 500; max-width: 46rem; text-wrap: pretty; }
.who { display: flex; align-items: center; gap: 14px; }
.who .av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--emerald); color: var(--ink); font-weight: 700; }
.who b { display: block; font-size: 1.0625rem; }
.who span { color: var(--band-muted); font-size: .9375rem; }
.q-ctrl { display: flex; align-items: center; gap: 12px; }
.q-ctrl button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--band-line); background: transparent; color: var(--band-fg); transition: background-color .3s var(--ease), color .3s var(--ease); }
.q-ctrl button:hover { background: var(--emerald); color: var(--ink); border-color: var(--emerald); }
.q-ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.q-count { margin-left: 8px; color: var(--band-muted); font-variant-numeric: tabular-nums; }

/* Pricing */
.price-grid { display: grid; gap: 24px; }
.opts { display: grid; gap: 12px; border: 0; min-width: 0; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt .box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--card); transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .4s var(--ease); }
.opt:hover .box { transform: translateX(3px); }
.opt .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.opt .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.opt strong { display: block; font-size: 1.0625rem; line-height: 1.3; }
.opt small { display: block; color: var(--muted); font-size: .9063rem; line-height: 1.4; margin-top: 2px; }
.opt .pr { font-weight: 700; white-space: nowrap; text-align: right; }
.opt .pr small { display: inline; font-weight: 500; }
.opt input:checked + .box { border-color: var(--emerald); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.opt input:checked + .box .ic { background: var(--accent); color: var(--ink); }
.opt input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 3px; }
.summary { background: var(--band); color: var(--band-fg); border-radius: 30px; padding: 30px; display: grid; gap: 22px; align-content: start; box-shadow: var(--shadow-lg); }
.summary .lbl { color: var(--band-muted); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.summary h3 { font-size: 1.625rem; margin-top: 6px; }
.sum-price { display: flex; align-items: baseline; gap: 8px; }
.sum-price b { font-size: 3.5rem; line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.sum-price span { color: var(--band-muted); }
.incl { display: grid; gap: 12px; }
.incl li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: #E8EBED; font-size: .9688rem; }
.incl svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--emerald); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.summary .note { display: grid; gap: 8px; justify-items: start; font-size: .875rem; color: var(--band-muted); }
.co-msg { min-height: 1.5em; font-size: .9063rem; color: var(--aqua); }
.band .ph-tag, .summary .ph-tag { background: #3A2F08; color: #FFE08A; border-color: #8A6A00; }
@media (min-width: 960px) {
  .price-grid { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
  .summary { position: sticky; top: 112px; padding: 36px; }
}
@media (max-width: 440px) { .opt .box { grid-template-columns: auto 1fr; } .opt .pr { grid-column: 2; text-align: left; } }

/* About */
.about-grid { display: grid; gap: 44px; align-items: center; }
.about-img { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: var(--shadow); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: grid; gap: 22px; justify-items: start; }
.values { display: grid; gap: 18px; width: 100%; margin-top: 6px; }
.values li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.values b { font-size: 1.0625rem; }
.values span { color: var(--muted); font-size: .9688rem; }
.team { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; }
.team-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.team-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.person { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding: 14px; border: 1px dashed var(--line); border-radius: 22px; background: var(--card); }
.person .photo { width: 76px; height: 76px; border-radius: 20px; background: var(--bg-soft); display: grid; place-items: center; color: var(--muted); font-size: .75rem; text-align: center; line-height: 1.2; }
.person b { display: block; }
.person span { color: var(--muted); font-size: .9375rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } .person { grid-template-columns: 1fr; text-align: left; } .person .photo { width: 100%; height: auto; aspect-ratio: 1 / 1; } }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 80px; } .values { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* Contact band */
.contact { position: relative; isolation: isolate; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--band) url(/assets/cta-bg.webp) no-repeat right center / cover; }
.contact::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 12, 13, .94) 0%, rgba(11, 12, 13, .78) 46%, rgba(11, 12, 13, .35) 100%); }
.c-grid { display: grid; gap: 44px; }
.c-copy { display: grid; gap: 24px; align-content: start; justify-items: start; }
.c-list { display: grid; gap: 16px; width: 100%; max-width: 30rem; margin-top: 8px; }
.c-list li { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--band-line); }
.c-list .k { font-size: .8125rem; color: var(--band-muted); letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.c-list a, .c-list span.v { font-size: 1.125rem; font-weight: 500; color: var(--band-fg); overflow-wrap: anywhere; }
.c-list a:hover { color: var(--aqua); }
.form { background: var(--bg); color: var(--fg); border-radius: 30px; padding: clamp(22px, 4vw, 40px); display: grid; gap: 18px; box-shadow: var(--shadow-lg); }
.form h3 { font-size: 1.5rem; }
.f-row { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: .9063rem; font-weight: 600; }
.field label small { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.field textarea { min-height: 128px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.fine { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.fine a { text-decoration: underline; }
.f-status { min-height: 1.5em; font-size: .9375rem; font-weight: 500; color: var(--accent-text); }
@media (min-width: 640px) { .f-row.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .c-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; } }

/* Footer */
.site-footer { background: #0B0C0D; color: #E8EBED; padding-block: 64px 36px; }
.f-top { display: grid; gap: 40px; }
.f-brand { display: grid; gap: 18px; max-width: 22rem; align-content: start; }
.f-brand img { height: 26px; width: auto; }
.f-brand p { color: var(--band-muted); font-size: .9688rem; }
.f-cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, 1fr); }
.f-cols h4 { margin: 0 0 14px; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--band-muted); font-weight: 600; }
.f-cols ul { display: grid; gap: 10px; }
.f-cols a { color: #E8EBED; transition: color .3s var(--ease); }
.f-cols a:hover { color: var(--aqua); }
.f-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--band-muted); font-size: .875rem; }
.addr { font-style: normal; color: var(--band-muted); font-size: .9375rem; line-height: 1.55; }
@media (min-width: 900px) { .f-top { grid-template-columns: 1fr 1.6fr; } .f-cols { grid-template-columns: repeat(3, 1fr); } }

/* Scroll reveal. Content is visible by default; JS only hides things that are below the fold. */
.will-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.will-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}

/* ===== Additions for the multi page site (same visual language as the home page) ===== */
.site-header{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-links a[aria-current="page"]{background:var(--soft-btn-bg)}
.menu{position:static}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-btn span{transform:translateY(3px) rotate(45deg)}
.menu[open] .menu-btn span::before{transform:translateY(-6px) rotate(-90deg);top:6px}
@media (min-width:960px){.menu{display:none}}
.btn:not(:has(.ico)){padding:0 26px}
.btn-ghost{background:var(--soft-btn-bg);color:var(--fg);padding:0 26px}
.btn-ghost:hover{background:var(--soft-btn-hover);box-shadow:none}
.band .btn-ghost{background:rgba(255,255,255,.1);color:var(--band-fg)}
p{line-height:1.6}
a.inl,.prose a,.answer a,.faq a,.c-list a{text-decoration:underline;text-underline-offset:.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.draft{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px dashed var(--ph-line);background:var(--ph-bg);color:var(--ph-fg);font-size:.6875rem;font-weight:600;letter-spacing:.02em;vertical-align:.1em}
.summary .draft,.band .draft{background:#3A2F08;color:#FFE08A;border-color:#8A6A00}
.crumbs{font-size:.875rem;color:var(--muted)}
.crumbs a{text-decoration:underline;text-underline-offset:.2em}
.page-hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,6vw,80px)}
.page-hero .hero-copy{max-width:46rem}
.page-hero.split .hero-grid{align-items:center}
.answer{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;color:var(--fg);max-width:44rem;padding-left:18px;border-left:3px solid var(--accent)}
.band .answer{color:var(--band-fg)}
.hero-pic{position:relative;width:min(100%,440px);margin-inline:auto;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-soft)}
.hero-pic img{width:100%;height:auto}
.hero-pic .tag{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#212427;font-size:.75rem;font-weight:600}
.ticks{display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px;background:color-mix(in srgb,var(--accent) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7447' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/14px}
.band .ticks li::before,.summary .ticks li::before{background-color:var(--emerald);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212427' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ticks.crosses li::before{background:color-mix(in srgb,#E5484D 16%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") no-repeat center/12px}
.band .ticks.crosses li::before{background-color:rgba(255,120,100,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9E7A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
.band .ticks li{color:#E8EBED}
.two-col{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,34px);display:grid;gap:18px;align-content:start}
.panel h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.band .panel{background:rgba(255,255,255,.05);border-color:var(--band-line)}
.scope{width:100%;border-collapse:collapse}
.scope th,.scope td{text-align:left;vertical-align:top;padding:14px 0;border-top:1px solid var(--line)}
.scope th{width:38%;padding-right:18px;font-weight:600}
.scope td{color:var(--muted)}
.steps-h{display:grid;gap:16px}
@media (min-width:760px){.steps-h{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.steps-h .step{grid-template-columns:1fr;gap:10px}
.steps-h .step .n{grid-row:auto}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:0 24px}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem;padding:20px 36px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft-btn-bg);font-weight:500}
.faq details[open] summary::after{content:"\2212";background:var(--accent);color:var(--ink)}
.faq details p{color:var(--muted);padding-bottom:20px;max-width:62ch}
.prose{max-width:46rem;display:grid;gap:14px}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-top:22px}
.prose ul{list-style:disc;padding-left:1.3em;display:grid;gap:8px}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--fg)}
.proj .ph{padding:0;display:block}
.proj .ph::before{display:none}
.proj .ph img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.proj:hover .ph img{transform:scale(1.04)}
.proj a.ph{color:inherit}
.proj.wide .ph{aspect-ratio:2/1}
.work-grid.cols-2{grid-template-columns:1fr}
@media (min-width:760px){.work-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
.work-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.work-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:.9375rem}
.work-nav a:hover{background:var(--soft-btn-bg)}
.work-block{margin-top:clamp(44px,6vw,72px);display:grid;gap:24px}
.work-block h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)}
.qa{display:grid;gap:16px}
@media (min-width:760px){.qa{grid-template-columns:repeat(3,1fr)}}
.qa figure{border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.qa figcaption{padding:16px 18px;display:grid;gap:4px}
.qa .q{font-weight:600}
.qa .a{color:var(--muted);font-size:.9688rem}
.case-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.case-head span{color:var(--muted)}
.quote-grid{display:grid;gap:20px}
@media (min-width:860px){.quote-grid{grid-template-columns:repeat(2,1fr);gap:28px}}
.quote-card{display:grid;gap:22px;align-content:space-between;padding:clamp(24px,3vw,36px);border-radius:26px;border:1px solid var(--band-line);background:rgba(255,255,255,.03)}
.quote-card blockquote{font-size:clamp(1.2rem,1rem + .9vw,1.6rem);line-height:1.3;letter-spacing:-.02em;font-weight:500}
.perm{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:26px;padding:22px 24px;box-shadow:var(--shadow-lg);width:min(100%,460px);margin-inline:auto}
.perm figcaption{display:grid;gap:2px;margin-bottom:10px}
.perm figcaption span{font-size:.875rem;color:var(--muted)}
.perm ul{display:grid}
.perm li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:.9375rem}
.perm li em{font-style:normal;font-size:.8125rem;color:var(--muted)}
.perm li i{width:38px;height:22px;border-radius:99px;background:var(--line);position:relative}
.perm li i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.perm li.on i{background:var(--emerald)}
.perm li.on i::after{left:auto;right:3px}
.perm li.off span{color:var(--muted)}
.perm-foot{font-size:.8125rem;color:var(--muted);margin-top:10px}
/* Pricing selector: pure CSS, every summary is in the page */
.summary-set{display:grid;gap:16px}
@supports selector(:has(*)){
  .price-grid .summary{display:none}
  .price-grid:has(#pick-account-management:checked) .sum-account-management,
  .price-grid:has(#pick-a-plus-content:checked) .sum-a-plus-content,
  .price-grid:has(#pick-listing-images:checked) .sum-listing-images,
  .price-grid:has(#pick-brand-story:checked) .sum-brand-story,
  .price-grid:has(#pick-storefront-design:checked) .sum-storefront-design{display:grid}
}
.summary .ticks li{font-size:.9688rem}
.summary .more{color:var(--aqua);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.every{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.every li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:500;font-size:.9375rem}
.every li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:26px;background:var(--card)}
.compare{width:100%;min-width:860px;border-collapse:collapse;font-size:.9375rem}
.compare th,.compare td{padding:18px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare thead th{border-top:0;font-size:1rem}
.compare thead th:first-child{width:12rem}
.compare tbody th{font-weight:600}
.compare td{color:var(--muted)}
.compare tbody tr:last-child td{color:var(--fg);font-weight:600}
.compare .hl{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.contact-list{display:grid;gap:16px}
.contact-list li{display:grid;gap:2px;padding-top:16px;border-top:1px solid var(--line)}
.contact-list .k{font-size:.8125rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.contact-list a,.contact-list .v{font-size:1.125rem;font-weight:500}
address{font-style:normal}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent-text)}
.f-legal{margin-top:20px;color:var(--band-muted);font-size:.8125rem;line-height:1.55;display:grid;gap:6px}
.site-footer address{color:var(--band-muted)}
.site-footer .f-brand a{color:#E8EBED;text-decoration:underline;text-underline-offset:.2em}
@media print{.site-header,.site-footer{display:none}}

img{height:auto}
.qa img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero-pic img,.about-img img{height:auto}
.about-img img{height:100%}
.bundles{margin-top:28px;display:grid;gap:14px}
.bundles-h{font-size:1.125rem}
.svc-grid.two{grid-template-columns:1fr}
@media (min-width:700px){.svc-grid.two{grid-template-columns:repeat(2,1fr)}}
.svc.bundle{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}

.proj.story{grid-column:1/-1}
.proj.story .ph{aspect-ratio:auto;background:#1b1530}
.proj.story .ph img{height:auto;object-fit:contain}

.hero-pic{width:min(100%,500px)}
.hero-pic.wide{width:100%;max-width:none}
@media (min-width:960px){.page-hero.split .hero-grid{grid-template-columns:1fr 1fr;gap:48px}.page-hero.split .hero-pic.wide{margin-right:-8px}}

/* Icons */
.ic-s{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;margin-right:8px}
.band .ic-s,.c-list .ic-s{stroke:var(--aqua)}
.ic-h{width:28px;height:28px;flex:none;padding:5px;border-radius:9px;background:color-mix(in srgb,var(--accent) 18%,transparent);fill:none;stroke:var(--accent-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h-ic{display:flex;align-items:center;gap:12px}
.prose h2.h-ic .ic-h{width:36px;height:36px;padding:7px}
.band .ic-h{background:rgba(58,242,174,.15);stroke:var(--aqua)}
.ic-v{width:40px;height:40px;padding:9px;border-radius:12px;background:color-mix(in srgb,var(--accent) 18%,transparent);fill:none;stroke:var(--accent-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.every li::before{display:none}
.every li .ic-s{margin-right:0}
.c-list .k .ic-s,.contact-list .k .ic-s{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
/* Policy pages */
.hero > .wrap:not(.hero-grid){display:grid;gap:18px;justify-items:start}
.hero > .wrap:not(.hero-grid) h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem)}
.wrap.prose{max-width:1232px;gap:14px}
.wrap.prose > *{max-width:46rem}
.wrap.prose ul{padding-left:1.3em}
.hero:has(> .wrap:not(.hero-grid)) + .section{padding-top:8px}

/* Service process cards */
.steps-h{align-items:stretch}
.steps-h .step-c{display:flex;flex-direction:column;gap:10px;align-content:start;justify-content:flex-start;padding:26px}
.step-c .step-top{display:flex;align-items:center;justify-content:space-between}
.step-c .n{font-size:1rem;font-weight:700;letter-spacing:.06em;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 14%,transparent);padding:4px 10px;border-radius:999px;grid-row:auto}
.step-c .ic-h{width:40px;height:40px;padding:9px;border-radius:12px}
.step-c h3{font-size:1.125rem;margin-top:6px}
.step-c p{font-size:.9688rem}
.panel .ticks{gap:14px}
.panel .ticks li{font-size:.9844rem}
.scope th{white-space:nowrap}
@media (max-width:600px){.scope th{white-space:normal;width:44%}}