/* Northside Gutter Care — one stylesheet.
   Light cool paper, deep van-blue bookends, hard edges (4px, 1.5px rules, no shadows).
   Display: Familjen Grotesk. Body: Instrument Sans. Every class is prefixed ng- to stay clear of the tool's sheet. */

:root {
  --ng-accent: #1e5aa8;
  --ng-accent-dark: #174a8c;
  --ng-deep: #0f2f5c;
  --ng-deeper: #0a2244;
  --ng-ink: #111b2e;
  --ng-muted: #55617a;
  --ng-paper: #f3f5f9;
  --ng-paper-2: #e8eef7;
  --ng-surface: #ffffff;
  --ng-line: #d3dae6;
  --ng-line-strong: #111b2e;
  --ng-on-deep: #eef3fa;
  --ng-on-deep-muted: #a9bbd8;
  --ng-trace: #9cc9ff;
  --ng-radius: 4px;
  --ng-display: "Familjen Grotesk", "Helvetica Neue", "Segoe UI", sans-serif;
  --ng-body: "Instrument Sans", "Segoe UI", "Trebuchet MS", sans-serif;
  --ng-max: 1200px;
  --ng-gutter: clamp(20px, 4vw, 40px);
  --ng-section: clamp(64px, 9vw, 104px);

  /* runtime tokens */
  --aiwj-accent: var(--ng-accent);
  --aiwj-accent-ink: #ffffff;
  --aiwj-deep: var(--ng-deep);
  --aiwj-ink: var(--ng-ink);
  --aiwj-muted: var(--ng-muted);
  --aiwj-paper: var(--ng-paper);
  --aiwj-surface: var(--ng-surface);
  --aiwj-line: var(--ng-line);
  --aiwj-radius: 4px;
  --aiwj-font: var(--ng-body);
  --aiwj-font-head: var(--ng-display);
  --aiwj-bar-height: 0px;
  --aiwj-trace: var(--ng-trace);

  /* the quote tool's own three */
  --gold: #1e5aa8;
  --gold-dark: #174a8c;
  --green: #0f2f5c;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ng-paper);
  color: var(--ng-ink);
  font-family: var(--ng-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ng-page :where(:not(#app, #app *)), .ng-page :where(:not(#app, #app *))::before, .ng-page :where(:not(#app, #app *))::after { box-sizing: border-box; }

h1:where(:not(#app *)), h2:where(:not(#app *)), h3:where(:not(#app *)), h4:where(:not(#app *)) { font-family: var(--ng-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .5em; color: inherit; }
h1:where(:not(#app *)) { font-size: clamp(2.5rem, 5.6vw, 4.5rem); }
h2:where(:not(#app *)) { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3:where(:not(#app *)) { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.15; }
p:where(:not(#app *)) { margin: 0 0 1em; }
a:where(:not(#app *)) { color: var(--ng-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
img:where(:not(#app *)) { max-width: 100%; height: auto; display: block; }
.ng-wrap { width: min(100% - 2 * var(--ng-gutter), var(--ng-max)); margin-inline: auto; }
.ng-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 40ch; }
.ng-kicker { font-family: var(--ng-display); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-accent); margin: 0 0 1rem; display: block; }
.ng-on-deep .ng-kicker, .ng-phero .ng-kicker, .ng-hero .ng-kicker { color: var(--ng-trace); }
.ng-sec { padding-block: var(--ng-section); }
.ng-sec-tight { padding-block: clamp(48px, 6vw, 72px); }
.ng-on-deep { background: var(--ng-deep); color: var(--ng-on-deep); }
.ng-on-deep a { color: #fff; }
.ng-on-paper2 { background: var(--ng-paper-2); }
.ng-on-deep .ng-muted-t { color: var(--ng-on-deep-muted); }
.ng-muted-t { color: var(--ng-muted); }
.ng-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.ng-sr:focus { clip: auto; width: auto; height: auto; left: 12px; top: 12px; z-index: 60; background: #fff; color: var(--ng-deep); padding: 10px 14px; border-radius: var(--ng-radius); }
.ng-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); }
.ng-head-row h2 { margin: 0; max-width: 20ch; }
.ng-head-row p { margin: 0; max-width: 44ch; }

/* Buttons and links */
.ng-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--ng-display); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em;
  color: #fff; background: var(--ng-accent); border: 1.5px solid var(--ng-accent);
  border-radius: var(--ng-radius); text-decoration: none; cursor: pointer;
  transition: background .18s ease-out, transform .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
.ng-btn:hover { background: var(--ng-accent-dark); border-color: var(--ng-accent-dark); transform: translateY(-1px); }
.ng-btn:active { transform: translateY(0); }
.ng-btn-ghost { background: transparent; color: var(--ng-ink); border-color: var(--ng-ink); }
.ng-btn-ghost:hover { background: var(--ng-ink); color: #fff; border-color: var(--ng-ink); }
.ng-on-deep .ng-btn-ghost, .ng-photo .ng-btn-ghost, .ng-phero .ng-btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.ng-on-deep .ng-btn-ghost:hover, .ng-photo .ng-btn-ghost:hover, .ng-phero .ng-btn-ghost:hover { background: #fff; color: var(--ng-deep); border-color: #fff; }
.ng-btn-light { background: #fff; color: var(--ng-deep); border-color: #fff; }
.ng-btn-light:hover { background: var(--ng-trace); border-color: var(--ng-trace); color: var(--ng-deep); }
.ng-on-deep .ng-btn-light, .ng-photo .ng-btn-light, .ng-phero .ng-btn-light { color: var(--ng-deep); }
.ng-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ng-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; color: inherit; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1.5px; padding-bottom: 2px; transition: background-size .2s ease-out; }
.ng-link:hover, .ng-link:focus-visible { background-size: 100% 1.5px; }
.ng-link::after { content: "\2192"; margin-left: 8px; }
:focus-visible:where(:not(#app *)) { outline: 3px solid var(--ng-accent); outline-offset: 3px; }
.ng-on-deep :focus-visible, .ng-head :focus-visible, .ng-foot :focus-visible { outline-color: var(--ng-trace); }

/* Header */
.ng-head { position: sticky; top: 0; z-index: 40; background: var(--ng-deep); color: var(--ng-on-deep); border-bottom: 1.5px solid transparent; transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.ng-head.is-scrolled { border-bottom-color: rgba(156,201,255,.35); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.ng-head-in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.ng-mark { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0; text-decoration: none; color: #fff; font-family: var(--ng-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; margin-right: auto; }
.ng-mark svg { width: 30px; height: 22px; flex: none; }
.ng-mark small { display: block; font-family: var(--ng-body); font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ng-on-deep-muted); margin-top: 4px; }
.ng-nav { display: none; }
.ng-nav a { color: var(--ng-on-deep); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1.5px solid transparent; transition: border-color .15s ease-out, color .15s ease-out; }
.ng-nav a:hover, .ng-nav a[aria-current="page"] { border-bottom-color: var(--ng-trace); color: #fff; }
.ng-head-phone { display: none; color: #fff; text-decoration: none; font-family: var(--ng-display); font-weight: 600; font-size: 1.05rem; min-height: 44px; align-items: center; padding: 0 6px; }
.ng-head-phone:hover { text-decoration: underline; text-decoration-color: var(--ng-trace); }
.ng-head .ng-btn { min-height: 44px; padding: 10px 18px; display: none; }
.ng-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--ng-radius); color: #fff; cursor: pointer; padding: 0; }
.ng-nav-btn:hover { border-color: #fff; }
.ng-nav-btn span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: background .2s ease-out; }
.ng-nav-btn span::before, .ng-nav-btn span::after { content: ""; display: block; width: 20px; height: 2px; background: #fff; position: absolute; left: 0; transition: transform .2s ease-out; }
.ng-nav-btn span::before { top: -6px; }
.ng-nav-btn span::after { top: 6px; }
.ng-nav-btn[aria-expanded="true"] span { background: transparent; }
.ng-nav-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.ng-nav-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.ng-drawer { display: none; background: var(--ng-deeper); color: var(--ng-on-deep); border-top: 1.5px solid rgba(156,201,255,.25); }
.ng-drawer.is-open { display: block; }
.ng-drawer ul { list-style: none; margin: 0; padding: 12px var(--ng-gutter) 20px; display: grid; }
.ng-drawer a { display: flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; font-family: var(--ng-display); font-weight: 600; font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ng-drawer .ng-drawer-sub { color: var(--ng-on-deep-muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding-top: 18px; padding-bottom: 6px; }
@media (min-width: 1000px) {
  .ng-nav { display: flex; gap: 2px; }
  .ng-head-phone { display: inline-flex; }
  .ng-head .ng-btn { display: inline-flex; }
  .ng-nav-btn, .ng-drawer { display: none !important; }
}

/* Hero */
.ng-hero { background: var(--ng-deep); color: var(--ng-on-deep); position: relative; isolation: isolate; }
.ng-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.ng-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.ng-hero-bg::after { content: ""; position: absolute; inset: 0; background-color: rgba(15,47,92,.84); background-image: linear-gradient(rgba(156,201,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(156,201,255,.06) 1px, transparent 1px); background-size: 48px 48px; }
.ng-hero-grid {
  background-image: linear-gradient(rgba(156,201,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(156,201,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ng-hero-in { display: grid; gap: 32px; grid-template-areas: "copy" "tool" "router"; padding-block: clamp(36px, 6vw, 88px) clamp(56px, 7vw, 96px); align-items: start; }
.ng-hero-copy { grid-area: copy; }
.ng-hero .ng-tool { grid-area: tool; }
.ng-hero .ng-router { grid-area: router; }
.ng-hero-copy h1 { max-width: 18ch; color: #fff; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.ng-hero .ng-lead { color: var(--ng-on-deep); }
.ng-rating { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 0; text-decoration: none; color: inherit; min-height: 44px; flex-wrap: wrap; }
.ng-stars { display: inline-flex; gap: 2px; }
.ng-stars svg { width: 18px; height: 18px; fill: #ffc857; }
.ng-rating strong { font-family: var(--ng-display); font-size: 1.3rem; }
.ng-rating span { color: var(--ng-on-deep-muted); font-size: .95rem; }
.ng-rating:hover span { color: #fff; }
.ng-router { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 0; padding-top: 24px; border-top: 1.5px solid rgba(156,201,255,.25); align-items: center; }
.ng-router p { margin: 0; color: var(--ng-on-deep-muted); font-size: .95rem; width: 100%; }
.ng-router a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid rgba(156,201,255,.4); border-radius: var(--ng-radius); color: #fff; text-decoration: none; font-weight: 600; font-size: .98rem; transition: border-color .15s ease-out, background .15s ease-out; }
.ng-router a:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.ng-tool { background: var(--ng-surface); color: var(--ng-ink); border-radius: 6px; padding: clamp(8px, 2vw, 20px); border: 1.5px solid rgba(156,201,255,.3); }
.ng-tool-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px 12px; border-bottom: 1.5px solid var(--ng-line); margin-bottom: 4px; flex-wrap: wrap; }
.ng-tool-top strong { font-family: var(--ng-display); font-size: 1.1rem; }
.ng-tool-top span { font-size: .85rem; color: var(--ng-muted); }
@media (min-width: 960px) {
  .ng-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "copy tool" "router tool"; gap: 40px clamp(40px, 5vw, 72px); }
  .ng-tool { position: sticky; top: 92px; }
}
@media (min-width: 1440px) { .ng-hero-copy h1 { font-size: 4.4rem; } }

/* Inner page hero */
.ng-phero { background: var(--ng-deep); color: var(--ng-on-deep); }
.ng-phero-in { display: grid; gap: 32px; padding-block: clamp(40px, 5vw, 72px); align-items: end; }
.ng-phero h1 { color: #fff; max-width: 14ch; font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.ng-phero .ng-lead { color: var(--ng-on-deep); }
.ng-phero a { color: #fff; }
.ng-phero-side { border-top: 1.5px solid rgba(156,201,255,.3); padding-top: 20px; }
.ng-phero-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: .98rem; }
.ng-phero-side dt { color: var(--ng-on-deep-muted); }
.ng-phero-side dd { margin: 0; color: #fff; }
.ng-phero-side a { color: #fff; }
.ng-phero-side .ng-creds { margin-top: 0; }
@media (min-width: 900px) { .ng-phero-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: start; } .ng-phero-side { border-top: 0; border-left: 1.5px solid rgba(156,201,255,.3); padding: 8px 0 8px 28px; margin-top: 84px; } .ng-phero-side .ng-creds { grid-template-columns: 1fr; gap: 16px; } }
.ng-crumbs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--ng-on-deep-muted); }
.ng-crumbs a { color: var(--ng-on-deep-muted); min-height: 44px; display: inline-flex; align-items: center; }
.ng-crumbs a:hover { color: #fff; }
.ng-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.ng-crumbs li { display: inline-flex; align-items: center; }

/* How it works */
.ng-how { display: grid; gap: 40px; align-items: start; }
.ng-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1.5px solid var(--ng-line-strong); }
.ng-steps li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1.5px solid var(--ng-line); }
.ng-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--ng-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--ng-accent); }
.ng-steps h3 { margin: 4px 0 6px; }
.ng-steps p { margin: 0; color: var(--ng-muted); max-width: 44ch; }
.ng-trace { aspect-ratio: 16 / 9; width: 100%; border-radius: 6px; overflow: hidden; background: var(--ng-deep); border: 1.5px solid var(--ng-line); }
.ng-trace-cap { font-size: .9rem; color: var(--ng-muted); margin: 12px 0 0; }
@media (min-width: 900px) { .ng-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } .ng-trace-col { position: sticky; top: 100px; } }

/* Services */
.ng-services { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ng-line-strong); }
.ng-services li { display: grid; gap: 14px; padding: 28px 0; border-bottom: 1.5px solid var(--ng-line); align-items: center; }
.ng-services h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.ng-services p { margin: 0; color: var(--ng-muted); max-width: 52ch; }
.ng-price { display: inline-block; font-family: var(--ng-display); font-weight: 600; color: var(--ng-deep); background: var(--ng-paper-2); padding: 6px 10px; border-radius: var(--ng-radius); font-size: .95rem; margin-top: 6px; }
.ng-on-deep .ng-price { background: rgba(255,255,255,.12); color: #fff; }
@media (min-width: 900px) { .ng-services li { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 32px; } }

/* Proof */
.ng-proof-top { display: grid; gap: 28px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.ng-big { font-family: var(--ng-display); font-weight: 700; font-size: clamp(6rem, 18vw, 13rem); line-height: .85; letter-spacing: -.04em; color: #fff; margin: 0; }
.ng-big-sub { display: flex; flex-direction: column; gap: 10px; }
.ng-big-sub .ng-stars svg { width: 24px; height: 24px; }
.ng-big-sub p { margin: 0; font-size: 1.15rem; }
@media (min-width: 800px) { .ng-proof-top { grid-template-columns: auto 1fr; gap: 48px; } }
.ng-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ng-review { background: rgba(255,255,255,.04); border: 1.5px solid rgba(156,201,255,.22); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s ease-out, transform .2s ease-out; }
.ng-review:hover { border-color: rgba(156,201,255,.6); transform: translateY(-2px); }
.ng-review blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.ng-review footer { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ng-on-deep-muted); margin-top: auto; flex-wrap: wrap; }
.ng-review footer b { color: #fff; font-weight: 600; }
.ng-review .ng-stars svg { width: 15px; height: 15px; }
@media (min-width: 720px) { .ng-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ng-reviews li:nth-child(n+5) { display: none; } }
.ng-review-light { background: var(--ng-surface); border-color: var(--ng-line); }
.ng-review-light footer { color: var(--ng-muted); }
.ng-review-light footer b { color: var(--ng-ink); }
.ng-review-light:hover { border-color: var(--ng-accent); }
.ng-creds { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: 20px; }
.ng-creds li { border-top: 1.5px solid rgba(156,201,255,.4); padding-top: 14px; }
.ng-creds b { display: block; font-family: var(--ng-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.ng-creds span { color: var(--ng-on-deep-muted); font-size: .95rem; }
.ng-creds-light li { border-top-color: var(--ng-line-strong); }
.ng-creds-light b { color: var(--ng-ink); }
.ng-creds-light span { color: var(--ng-muted); }
@media (min-width: 700px) { .ng-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* Plan */
.ng-plan { display: grid; gap: 32px; align-items: center; }
.ng-plan-card { background: var(--ng-surface); border: 1.5px solid var(--ng-line-strong); border-radius: 6px; padding: clamp(24px, 4vw, 40px); }
.ng-timeline { display: flex; gap: 6px; margin: 0 0 40px; align-items: flex-start; }
.ng-timeline i { flex: 1; height: 2px; margin-top: 4px; background: var(--ng-line); border-radius: 2px; position: relative; }
.ng-timeline i.is-visit { height: 10px; margin-top: 0; background: var(--ng-accent); }
.ng-timeline i b { position: absolute; top: 16px; left: 0; font-family: var(--ng-display); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ng-accent); white-space: nowrap; font-style: normal; }
.ng-plan-card p { margin: 0 0 16px; color: var(--ng-muted); }
.ng-plan-card strong { color: var(--ng-ink); }
@media (min-width: 900px) { .ng-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* Photo band */
.ng-photo { position: relative; color: #fff; background: var(--ng-deep); isolation: isolate; overflow: hidden; }
.ng-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ng-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,34,68,.84), rgba(10,34,68,.66)); z-index: -1; }
.ng-photo .ng-kicker { color: var(--ng-trace); }
.ng-photo h2, .ng-photo h1 { color: #fff; }
.ng-photo .ng-lead { color: var(--ng-on-deep); }
.ng-photo a { color: #fff; }
.ng-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ng-chips li { border: 1.5px solid rgba(255,255,255,.45); border-radius: var(--ng-radius); padding: 10px 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.ng-chips li a { color: #fff; text-decoration: none; }
.ng-chips li a:hover { text-decoration: underline; }
.ng-chips-light li { border-color: var(--ng-line-strong); }
.ng-chips-light li a { color: var(--ng-ink); }
.ng-areas-grid { display: grid; gap: 32px; align-items: end; }
.ng-areas-grid .ng-chips { max-width: 34rem; }
@media (min-width: 900px) { .ng-areas-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; } }

/* FAQ */
.ng-faq { border-top: 1.5px solid var(--ng-line-strong); max-width: 800px; }
.ng-faq details { border-bottom: 1.5px solid var(--ng-line); }
.ng-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--ng-display); font-weight: 600; font-size: 1.15rem; min-height: 44px; }
.ng-faq summary::-webkit-details-marker { display: none; }
.ng-faq summary::after { content: "+"; font-size: 1.6rem; color: var(--ng-accent); flex: none; transition: transform .2s ease-out; }
.ng-faq details[open] summary::after { transform: rotate(45deg); }
.ng-faq summary:hover { color: var(--ng-accent); }
.ng-faq details > div { padding: 0 0 20px; color: var(--ng-muted); max-width: 60ch; }
.ng-faq details > div p { margin: 0; }

/* Final call */
.ng-final-in { display: grid; gap: 28px; align-items: center; }
.ng-final h2 { font-size: clamp(2.2rem, 5vw, 4rem); color: #fff; max-width: 14ch; margin: 0; }
.ng-demo { font-size: .9rem; color: var(--ng-on-deep-muted); margin: 12px 0 0; max-width: 44ch; }
@media (min-width: 900px) { .ng-final-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; } }

/* Footer */
.ng-foot { background: var(--ng-deeper); color: var(--ng-on-deep-muted); padding: clamp(48px, 6vw, 72px) 0 32px; font-size: .95rem; }
.ng-foot-grid { display: grid; gap: 32px; }
.ng-foot h4 { color: #fff; font-size: 1rem; margin-bottom: 10px; }
.ng-foot ul { list-style: none; margin: 0; padding: 0; }
.ng-foot a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ng-foot a:hover { text-decoration: underline; text-decoration-color: var(--ng-trace); }
.ng-foot .ng-mark { margin-right: 0; }
.ng-foot p { max-width: 36ch; }
.ng-hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.ng-hours dd { margin: 0; color: #fff; }
.ng-foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.ng-foot-base p { margin: 0; max-width: none; }
.ng-foot-base ul { display: flex; gap: 20px; }
@media (min-width: 760px) { .ng-foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }

/* Mobile bar */
.ng-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr 1.4fr; background: var(--ng-deeper); border-top: 1.5px solid rgba(156,201,255,.3); height: 64px; padding-bottom: env(safe-area-inset-bottom); }
.ng-bar a { display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-family: var(--ng-display); font-weight: 600; font-size: 1rem; min-height: 44px; }
.ng-bar a + a { border-left: 1px solid rgba(255,255,255,.12); }
.ng-bar a:last-child { background: var(--ng-accent); }
.ng-bar a:hover { background: rgba(255,255,255,.08); }
.ng-bar a:last-child:hover { background: var(--ng-accent-dark); }
@media (max-width: 999px) { :root { --aiwj-bar-height: 64px; } body { padding-bottom: 64px; } }
@media (min-width: 1000px) { .ng-bar { display: none; } }

/* Forms (request and plan) */
.ng-form { display: grid; gap: 16px; background: var(--ng-surface); border: 1.5px solid var(--ng-line-strong); border-radius: 6px; padding: clamp(20px, 3vw, 32px); }
.ng-form label, .ng-form fieldset { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.ng-form fieldset { border: 0; padding: 0; margin: 0; }
.ng-form legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.ng-form input:not([type="radio"]):not([type="file"]), .ng-form select, .ng-form textarea { width: 100%; font: inherit; font-weight: 400; color: var(--ng-ink); background: var(--ng-paper); border: 1.5px solid var(--ng-line); border-radius: var(--ng-radius); padding: 11px 12px; min-height: 48px; transition: border-color .15s ease-out; }
.ng-form textarea { min-height: 110px; resize: vertical; }
.ng-form input:focus, .ng-form select:focus, .ng-form textarea:focus { outline: none; border-color: var(--ng-accent); box-shadow: 0 0 0 3px rgba(30,90,168,.2); }
.ng-form input[type="file"] { font-weight: 400; padding: 8px 0; }
.ng-form .ng-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; grid-template-columns: none; }
.ng-form .ng-radio input { width: 20px; height: 20px; accent-color: var(--ng-accent); margin: 0; }
.ng-form .ng-radios { display: grid; gap: 4px; }
.ng-form .ng-row { display: grid; gap: 16px; }
@media (min-width: 600px) { .ng-form .ng-row { grid-template-columns: 1fr 1fr; } }
.ng-form button { justify-self: start; }
.ng-form-note { font-size: .9rem; color: var(--ng-muted); margin: 0; }
.aiwj-hp { position: absolute; left: -9999px; }
.ng-split { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .ng-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; } .ng-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ng-calc { max-width: 720px; }
.ng-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ng-line-strong); max-width: 56ch; }
.ng-list li { padding: 14px 0; border-bottom: 1.5px solid var(--ng-line); display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.ng-list li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; background: var(--ng-accent); border-radius: 2px; }
.ng-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ng-tier { background: var(--ng-surface); border: 1.5px solid var(--ng-line); border-radius: 6px; padding: 24px; transition: border-color .2s ease-out, transform .2s ease-out; }
.ng-tier:hover { border-color: var(--ng-accent); transform: translateY(-2px); }
.ng-tier.is-pick { border-color: var(--ng-line-strong); }
.ng-tier h3 { margin: 0 0 6px; }
.ng-tier .ng-kicker { margin-bottom: 8px; }
.ng-tier p { margin: 0; color: var(--ng-muted); }
@media (min-width: 760px) { .ng-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; border-block: 1.5px solid var(--ng-line-strong); padding-block: 16px; font-weight: 600; }
.ng-terms li { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.ng-terms li::before { content: ""; width: 8px; height: 8px; background: var(--ng-accent); border-radius: 50%; }
.ng-tool-page { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 72px); }
.ng-tool-page .ng-tool { max-width: 820px; margin-inline: auto; border-color: var(--ng-line); }

/* Prose pages */
.ng-prose { max-width: 70ch; }
.ng-prose h2 { font-size: 1.5rem; margin-top: 2em; }
.ng-prose ul { padding-left: 1.2em; }
.ng-prose li { margin-bottom: .5em; }
.ng-all-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .ng-all-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ng-all-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-404 { min-height: 60vh; display: grid; align-content: center; }
.ng-404 .ng-big { color: var(--ng-deep); font-size: clamp(6rem, 22vw, 16rem); }

/* Motion — gated. With reduced motion or without JS, everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js .ng-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
  .js .ng-reveal.is-in { opacity: 1; transform: none; }
  .js .ng-reveal:nth-child(2) { transition-delay: .08s; }
  .js .ng-reveal:nth-child(3) { transition-delay: .16s; }
  .js .ng-reveal:nth-child(4) { transition-delay: .24s; }
  .js .ng-hero-open { animation: ng-rise .45s ease-out both; }
  .js .ng-hero-open:nth-child(2) { animation-delay: .08s; }
  .js .ng-hero-open:nth-child(3) { animation-delay: .16s; }
  .js .ng-hero-open:nth-child(4) { animation-delay: .24s; }
  .js .ng-hero .ng-router { animation-delay: .3s; }
  .js .ng-tool-open { animation: ng-fade .5s ease-out .4s both; }
  .ng-hero-bg img { animation: ng-drift 25s ease-in-out infinite alternate; }
  .ng-photo img { transform: scale(1.03); transition: transform 6s ease-out; }
  .ng-photo.is-in img { transform: scale(1); }
}
@keyframes ng-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ng-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ng-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Late additions */
.ng-phero .ng-price { background: rgba(255,255,255,.12); color: #fff; margin-top: 0; }
.ng-hours-light dt { color: var(--ng-muted); }
.ng-hours-light dd { color: var(--ng-ink); }
.ng-tier h3 a { color: inherit; text-decoration: none; display: inline-block; padding: 6px 0; min-height: 44px; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1.5px; transition: background-size .2s ease-out; }
.ng-tier h3 a:hover, .ng-tier h3 a:focus-visible { background-size: 100% 1.5px; }
.ng-tier h3 a::after { content: "\2192"; margin-left: 8px; }

.ng-on-deep .ng-chips li { border-color: rgba(255,255,255,.45); }
.ng-on-deep h2 { color: #fff; }
.ng-photo .ng-phero-side { border-color: rgba(156,201,255,.3); }