:root {
  --bg: #050505;
  --bg-2: #0a0a0a;
  --panel: #0d0d0d;
  --panel-2: #101010;
  --cyan: #f2f2f2;
  --cyan-soft: #ffffff;
  --cyan-deep: #9a9a9a;
  --glow: rgba(255,255,255,0.55);
  --glow-soft: rgba(255,255,255,0.2);
  --text: #f2f2f0;
  --muted: #8a8a8a;
  --muted-2: #939698;
  --border: rgba(255,255,255,0.14);
  --border-soft: rgba(255,255,255,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html.critical-images-loading body { opacity: 0; }
html.critical-images-ready body { opacity: 1; transition: opacity .2s ease; }
/* Homepage hero copy must paint immediately. The image gate hides the whole
   page, including the largest text, until a background decode finishes. */
html.critical-images-loading body:has(.hero),
html.critical-images-ready body:has(.hero) { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { html.critical-images-ready body { transition: none; } }
::selection { background: var(--cyan); color: #0a0a0a; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }


.eyebrow {
  font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.24em; font-weight: 500;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--muted); }

h1, h2, h3 { font-family: 'Inter', sans-serif; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; }

/* ---------- NAV ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem 2.5rem;
  background: rgba(5,5,5,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}
nav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px;
  background: rgba(5,5,5,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}
.logo { display: flex; align-items: center; }
.logo-img { height: 25px; width: auto; display: block; }
.logo-divider { width: 1px; height: 25px; background: #fff; margin: 0 0.6rem; display: block; }
.logo-tagline { font-family: 'Urbanist', sans-serif; font-weight: 900; font-style: italic; font-size: 0.86rem; line-height: 1.35; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; white-space: nowrap; display: flex; flex-direction: column; justify-content: center; height: 25px; }
.logo-tagline span:first-child { color: #939698; }
@media (max-width: 760px) {
  .logo-img { height: 22px; }
  .logo-divider { height: 20px; margin: 0 0.6rem; }
  .logo-tagline { font-size: 0.62rem; letter-spacing: 0.09em; height: 22px; }
}
.nav-actions { display: flex; align-items: center; gap: 0; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
@media (min-width: 901px) {
  .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.nav-links a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { width: 22px; height: 1.5px; background: #fff; transition: 0.3s; }

/* ---------- SITE SEARCH ---------- */
.nav-search-btn {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; padding: 0.6rem; margin-left: 2rem; width: 46px; height: 46px;
  color: var(--cyan); display: flex; align-items: center; justify-content: center;
  transition: filter 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-search-btn svg { width: 20px; height: 20px; }
.nav-search-btn:hover, .nav-search-btn.active { border-color: var(--cyan); filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 18px var(--glow-soft)); transform: scale(1.06); }

/* ---------- NAV: START A PROJECT + CONTACT DROPDOWN ---------- */
.btn.nav-start-btn-desktop { margin-left: 0.8rem; padding: 0.5rem 1.2rem; font-size: 0.62rem; height: 46px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.nav-start-mobile { display: none; }
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); transition: color 0.2s;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn[aria-expanded="true"] { color: #fff; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 1.1rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 240px; background: rgba(8,9,11,0.98); backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft); box-shadow: 0 20px 44px rgba(0,0,0,0.55);
  padding: 0.5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 250;
}
.nav-dropdown-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem;
  text-transform: none; letter-spacing: normal; color: var(--text); transition: background 0.15s;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-dropdown-menu .ndi { color: var(--cyan); display: flex; flex-shrink: 0; }
.nav-dropdown-menu .ndi svg { width: 18px; height: 18px; }
.nav-dropdown-menu .ndl { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nav-dropdown-menu .ndv { font-size: 0.85rem; font-weight: 500; }
@media (max-width: 1150px) and (min-width: 901px) {
  nav { padding-left: 1.5rem; padding-right: 1.5rem; }
  .nav-links { gap: 1.1rem; }
  .logo-divider { margin: 0 0.45rem; }
  .nav-start-btn-desktop { margin-left: 0.5rem; }
}
@media (max-width: 900px) {
  nav .btn.nav-start-btn-desktop { display: none; }
  .nav-start-mobile { display: block; width: 100%; margin-top: 0.5rem; }
  .nav-start-mobile a { display: block; text-align: center; }
  .nav-dropdown { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .nav-dropdown-menu {
    position: static; transform: none; min-width: 0; width: 100%; margin-top: 0.9rem;
    opacity: 1; visibility: visible; pointer-events: auto; display: none; box-shadow: none;
    border-color: var(--border-soft); background: rgba(255,255,255,0.03);
  }
  .nav-dropdown-menu.open { display: block; transform: none; }
  .nav-search-btn { background: none; border: none; width: auto; height: auto; padding: 4px; margin-left: 1.2rem; }
}

.search-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(5,6,8,0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cyan);
  box-shadow: 0 0 22px var(--glow-soft), 0 16px 44px rgba(0,0,0,0.6);
  padding: 5.6rem 2.5rem 1.8rem;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.search-panel.open { transform: translateY(0); opacity: 1; visibility: visible; }
.search-panel .wrap { max-width: 640px; margin: 0 auto; padding: 0; }
.search-input-row { position: relative; }
.search-input-row svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
#siteSearchInput {
  width: 100%; background: var(--bg); border: 1px solid var(--border-soft); color: var(--text);
  padding: 0.9rem 1rem 0.9rem 2.8rem; font-family: 'Inter', sans-serif; font-size: 1rem;
}
#siteSearchInput:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 16px var(--glow-soft); }
.search-results { margin-top: 1rem; max-height: 50vh; overflow-y: auto; }
.search-result {
  display: block; padding: 0.9rem 1rem; border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border-soft); transition: background 0.15s, border-color 0.15s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: rgba(255,255,255,0.06); border-left-color: var(--cyan); }
.search-result-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.92rem; color: #fff; }
.search-result-desc { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; }
.search-empty { font-family: 'Inter', sans-serif; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); padding: 1.2rem 0.2rem; }
@media (max-width: 640px) {
  .search-panel { padding: 5rem 1.4rem 1.4rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.95rem 2rem; display: inline-block; transition: all 0.22s; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--cyan); color: #0a0a0a; box-shadow: 0 0 24px var(--glow); }
.btn-primary:hover { box-shadow: 0 0 40px var(--glow), 0 0 80px var(--glow-soft); transform: translateY(-2px); }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 20px var(--glow-soft); }
.btn-ghost-white { border-color: #fff; }
.btn-ghost-white:hover { border-color: #fff; color: var(--cyan); box-shadow: 0 0 20px var(--glow-soft); }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; padding: 8rem 0 1rem; overflow: hidden;
  background:#050505; isolation:isolate;
}
.hero::before { content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none; background:url('/images/home-hero-09-facet.jpg') center / cover no-repeat; filter:saturate(.65) contrast(1.12) brightness(.7); }
.hero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(115deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.31) 46%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.35) 100%),linear-gradient(0deg,rgba(0,0,0,.28),transparent 45%); }
@media (min-width:761px) {
  .hero::before { top:-1%; bottom:-1%; left:-1%; right:-1%; background-size: 100% auto; background-position: center; }
  .hero::after { background:linear-gradient(90deg,transparent 74%,rgba(0,0,0,.72) 91%,#000 100%),linear-gradient(115deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.31) 46%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.35) 100%),linear-gradient(0deg,rgba(0,0,0,.28),transparent 45%); }
}
.grad-divider { height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(212,212,212,0.35) 50%, transparent 100%); }
.hero .wrap { position: relative; z-index: 2; }
.hero-tagline { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin: 0.9rem 0 1.1rem; }
.hero h1 { font-family: 'Inter', sans-serif; font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.8rem; }
.hero h1 .glow { color: #fff; text-shadow: none; }
.hero p { font-size: 1.4rem; color: var(--muted); max-width: 640px; margin-bottom: 2.6rem; font-weight: 300; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.trust-box { position: relative; margin-top: 2rem; max-width: 460px; background: transparent; border: none; padding: 0; }
@media (min-width: 901px) { .trust-box { max-width: 580px; } .trust-box-grid { column-gap: 3rem; } }
.trust-box-title { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 1.1rem; }
.trust-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.trust-box-cell { display: flex; gap: 0.65rem; align-items: flex-start; }
.trust-box-cell .why-ico { width: 30px; height: 30px; margin-bottom: 0; flex-shrink: 0; }
.trust-box-cell .why-ico svg { width: 15px; height: 15px; }
.trust-box-cell-n { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.86rem; color: #fff; }
.trust-box-cell-l { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.1rem; }
@media (max-width: 640px) { .trust-box { padding: 1.1rem 1.1rem; max-width: none; } .trust-box-stats { gap: 0.9rem; } }
.hero-stats { display: flex; gap: 3rem; margin-top: 4.5rem; flex-wrap: wrap; }
.hero-stat .n { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2rem; color: var(--cyan); text-shadow: none; }
.hero-stat .l { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.3rem; }

/* ---- hero graph: layered ridgeline, bottom-right ---- */
.hero-graph {
  position: absolute; right: -37%; bottom: 0; width: min(50vw, 630px);
  aspect-ratio: 220 / 100; z-index: 1; pointer-events: none; transform: translateY(10.4%);
}
.hero-graph svg { width: 100%; height: 100%; overflow: visible; }
.hero-graph .hg-bar { pointer-events: auto; cursor: pointer; transition: filter 0.25s ease; }
.hero-graph .hg-bar:hover { filter: drop-shadow(0 0 10px rgba(255,255,255,0.85)) drop-shadow(0 0 26px rgba(255,255,255,0.5)); }
@media (max-width: 1000px) { .hero-graph { display: none; } }

/* ---- hero graph, mobile: compact animated mark beside “Scale.” ---- */
.hero-graph-title { display: none; }
@media (max-width: 1000px) {
  .hero-word-scale { display:inline-flex; align-items:flex-end; white-space:nowrap; }
  .hero-graph-title { display:inline-block; width:2.05em; height:.95em; margin-left:.16em; pointer-events:none; transform:translateY(-.04em); }
  .hero-graph-title svg { display:block; width:100%; height:100%; overflow:visible; }
}

/* ---- hero graph: staggered bar-load animation (both desktop + mobile graphs) ---- */
.hero-graph .hg-bar, .hero-graph-title .hg-bar {
  transform-box: fill-box; transform-origin: bottom; animation: barGrow 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-graph .hg-bar:nth-child(1), .hero-graph-title .hg-bar:nth-child(1) { animation-delay: 0.2s; }
.hero-graph .hg-bar:nth-child(2), .hero-graph-title .hg-bar:nth-child(2) { animation-delay: 0.46s; }
.hero-graph .hg-bar:nth-child(3), .hero-graph-title .hg-bar:nth-child(3) { animation-delay: 0.72s; }
.hero-graph .hg-bar:nth-child(4), .hero-graph-title .hg-bar:nth-child(4) { animation-delay: 0.98s; }
@keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-graph .hg-bar, .hero-graph-title .hg-bar { animation: none; }
}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero { position: relative; z-index: 1; padding: 6.5rem 0 1.5rem; text-align: center; overflow: hidden; }
.svc-hero {
  background: transparent;
}
.subpage { --page-photo: none; --page-photo-position: center; --page-photo-overlay: linear-gradient(rgba(5,5,5,.66),rgba(5,5,5,.86)); background:var(--bg); isolation:isolate; }
.subpage::before { content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none; background-image:var(--page-photo-overlay),var(--page-photo); background-position:center,var(--page-photo-position); background-repeat:no-repeat; background-size:cover; transform:translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; }
.subpage > * { position:relative; z-index:1; }
/* .search-panel is meant to stay position:fixed (an overlay), but the rule above
   has equal specificity and comes later, so it was winning and silently forcing
   the panel into normal document flow — pushing every .subpage page's whole
   content down by the panel's own ~186px height, hidden or not. */
.subpage > .search-panel { position: fixed; z-index: 200; }
.subpage > nav { position:fixed; z-index:300; }
.service-page { --page-photo:url('/images/service-page-bg-6492-4k-optimized.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.60),rgba(5,5,5,.82)); }
.testimonials-page { --page-photo:url('/images/testimonials-bg-geo-08.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.64),rgba(5,5,5,.84)); --page-photo-position:center; background:var(--bg-2); }
.audit-page { --page-photo:url('/images/audit-page-bg-6491.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.60),rgba(5,5,5,.82)); }
.faq-page { --page-photo:url('/images/ity-bg-brushed-metal.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.30),rgba(5,5,5,.50)); --page-photo-position:center; }
.about-page { --page-photo:url('/images/about-bg-option-1-studio-optimized.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.48),rgba(5,5,5,.76)); --page-photo-position:center; }
.live-demos-page { --page-photo:url('/images/live-demos-bg-concrete-stairs.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.58),rgba(5,5,5,.82)); --page-photo-position:center; }
.why-jsi-page { --page-photo:url('/images/why-jsi-bg-6491.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.58),rgba(5,5,5,.82)); --page-photo-position:center; }
.ity-page {
  --page-photo: url('/images/faq-page-bg-6739.jpg');
  --page-photo-overlay: linear-gradient(rgba(5,5,5,.52),rgba(5,5,5,.78));
  --page-photo-position: center;
  background: var(--bg);
}
@media (max-width: 760px) {
  .service-page { --page-photo:url('/images/service-page-bg-6492-mobile.jpg'); --page-photo-position:58% center; --page-photo-overlay:linear-gradient(rgba(5,5,5,.50),rgba(5,5,5,.76)); }
  .testimonials-page { --page-photo:url('/images/testimonials-bg-geo-08.jpg'); --page-photo-overlay:linear-gradient(rgba(5,5,5,.58),rgba(5,5,5,.82)); --page-photo-position:center; }
  .audit-page { --page-photo-position:56% center; --page-photo-overlay:linear-gradient(rgba(5,5,5,.50),rgba(5,5,5,.76)); }
  .faq-page { --page-photo:url('/images/ity-bg-brushed-metal.jpg'); --page-photo-position:center; --page-photo-overlay:linear-gradient(rgba(5,5,5,.30),rgba(5,5,5,.50)); }
  .ity-page { --page-photo-overlay:linear-gradient(rgba(5,5,5,.42),rgba(5,5,5,.72)); }
  .about-page { --page-photo:url('/images/about-bg-option-1-studio-mobile.jpg'); --page-photo-position:72% center; --page-photo-overlay:linear-gradient(rgba(5,5,5,.36),rgba(5,5,5,.68)); }
  .live-demos-page { --page-photo-overlay:linear-gradient(rgba(5,5,5,.66),rgba(5,5,5,.86)); }
  .why-jsi-page { --page-photo-overlay:linear-gradient(rgba(5,5,5,.66),rgba(5,5,5,.86)); }
}
.page-hero + section { padding-top: 1.5rem; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-family: 'Inter', sans-serif; font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.page-hero h1 .glow { color: #fff; text-shadow: none; }
.page-hero p { color: var(--muted); max-width: 620px; margin: 0.9rem auto 0; font-size: 1.08rem; }
.hero-example-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem;
  font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.75rem 1.6rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: none; transition: 0.2s;
}
.hero-example-link:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 16px var(--glow-soft); }

/* ---------- SECTION SHELL ---------- */
section { position: relative; z-index: 1; padding: 4.5rem 0; }
.sec-head { max-width: 640px; margin-bottom: 3.5rem; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; margin-bottom: 1rem; }
.sec-head h2 .glow { color: #fff; text-shadow: none; }
.sec-head p { color: var(--muted); font-size: 1.05rem; }
#services .sec-head { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.sec-num { font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.3em; color: var(--cyan-deep); }
/* Service-page section markers (THE PROBLEM / HOW IT HELPS / DAY TO DAY / WHAT
   WE'LL NEED). Scoped to .svc-detail-body so the homepage and hero eyebrows keep
   their smaller treatment. Larger, brighter and heavier so each section reads as
   a real divider rather than a faint label. */
.svc-detail-body .eyebrow { margin-bottom: 1rem; }
.svc-detail-body .eyebrow .sec-num {
  font-size: 0.95rem; letter-spacing: 0.2em; font-weight: 700; color: var(--text);
}
.svc-detail-body .eyebrow::before { width: 30px; background: var(--text); }
@media (max-width: 900px) {
  .svc-detail-body .eyebrow .sec-num { font-size: 0.85rem; letter-spacing: 0.16em; }
}

/* ---------- ABOUT ---------- */
#about { overflow: hidden; }
.about-top { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.about-top .sec-head { margin-bottom: 0; }
.about-logo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.about-wordmark { display: inline-flex; align-items: baseline; gap: 0.95rem; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: 0.18em; color: #fff; text-shadow: none; }
.about-wordmark b { color: var(--cyan); text-shadow: none; margin-left: -0.46em; }
.about-wordmark-sub { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: #fff; margin-top: -0.6rem; }
.about-mark-img {
  --mark-size: clamp(110px, 11vw, 150px);
  height: var(--mark-size); width: auto; display: block;
}
.about-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.about-col {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft);
  padding: 2.4rem; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.about-col:hover { border-color: var(--cyan-deep); box-shadow: 0 0 26px var(--glow-soft); transform: translateY(-3px); }
.about-col-num { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.26em; color: var(--cyan-deep); }
.about-col h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; margin: 0.9rem 0 1rem; }
.about-col p { font-size: 1.02rem; line-height: 1.7; color: var(--muted); margin: 0; }
.about-col .hl { color: var(--cyan); }
.about-highlight {
  margin-top: 1.6rem; padding: 1.6rem 2rem; border-left: 4px solid #ffffff;
  background: linear-gradient(90deg, var(--glow-soft), transparent);
  font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--text);
}
@media (max-width: 860px) {
  .about-top { flex-direction: column; gap: 2.2rem; text-align: center; }
  .about-top .sec-head { text-align: center; margin-inline: auto; }
  .about-mark-img { --mark-size: clamp(100px, 22vw, 140px); }
  .about-wordmark { font-size: 1.1rem; }
  .about-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .about-col { padding: 1.8rem; }
  .about-highlight { padding: 1.3rem 1.5rem; font-size: 0.98rem; }
}

/* ---------- SERVICES ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.service {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft);
  padding: 2.8rem; position: relative; overflow: hidden; transition: all 0.25s;
  display: flex; flex-direction: column;
}
.service::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; transition: 0.25s; pointer-events: none; }
.service:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 0 24px var(--glow-soft), 0 0 55px rgba(255,255,255,0.16); }
.service:hover::after { box-shadow: inset 0 0 32px var(--glow-soft); border-color: var(--cyan); }
.service:hover .service-ico { color: var(--cyan); box-shadow: 0 0 22px var(--glow-soft); }
.service-ico { width: 52px; height: 52px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--cyan); margin-bottom: 1.6rem; transition: 0.25s; }
.service-ico svg { width: 24px; height: 24px; }
.service h3 { font-size: 1.15rem; color: #fff; margin-bottom: 0.8rem; letter-spacing: 0.01em; }
.service p { color: var(--muted); font-size: 0.95rem; }
.service .service-sub { font-size: 0.82rem; font-style: italic; color: var(--cyan-deep); margin: -0.3rem 0 0.95rem; line-height: 1.4; letter-spacing: 0.01em; }
.service .tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service .tags span { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-deep); border: 1px solid var(--border-soft); padding: 0.25rem 0.6rem; }
.service-price { margin-top: auto; padding-top: 1.4rem; }
.service-price .sp-from { display: block; font-family: 'Inter', sans-serif; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 0.45rem; }
.service-price .sp-amt { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--cyan); text-shadow: none; line-height: 1; }
.service-price .sp-per { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 400; color: #fff; letter-spacing: 0.05em; text-shadow: none; }
.service-price .sp-care { display: block; font-family: 'Inter', sans-serif; font-size: 0.98rem; color: var(--cyan-deep); letter-spacing: 0.03em; margin-top: 0.5rem; }
/* 'upfront' note only on cards that ALSO have a monthly hosting fee (one-time + monthly) */
.service-price:has(.sp-care) .sp-amt::after { content: ' upfront'; font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-shadow: none; vertical-align: middle; margin-left: 0.4rem; }
.service .tags { margin-top: 1.4rem; }
.service-time { margin-top: 1.05rem; padding-top: 0.95rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.service-time svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--cyan-deep); }
.service-time b { color: var(--cyan-deep); font-weight: 500; letter-spacing: 0.05em; }
/* the whole add-on box is the link, so the small "View" label is a span rather
   than a nested anchor (which would be invalid inside this <a>) */
.service-addon {
  display: block; margin-top: 1.05rem; padding: 0.9rem 1rem;
  border: 1px dashed var(--border); background: rgba(255,255,255,0.03);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.service-addon:hover { border-color: var(--cyan); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.service-addon:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.service-addon .addon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.service-addon .addon-tag { font-family: 'Inter', sans-serif; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan-deep); }
.service-addon .addon-price { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--cyan); text-shadow: none; white-space: nowrap; }
.service-addon .addon-name { display: block; color: #fff; font-size: 0.9rem; font-weight: 500; margin-top: 0.45rem; }
.service-addon .addon-desc { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }
.service-addon .addon-example {
  display: inline-block; margin-top: 0.6rem; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.78rem; color: #fff; text-decoration: none; border-bottom: 1px solid var(--border-soft); transition: border-color 0.2s, opacity 0.2s;
}
/* driven by hovering the box, since the label is no longer the hit target */
.service-addon:hover .addon-example { border-color: #fff; }

/* ---------- SERVICE BOXES (homepage) ---------- */
.svc-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: stretch; }
.svc-box {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft);
  padding: 2.2rem; transition: border-color 0.25s, box-shadow 0.25s;
  display: flex; flex-direction: column; position: relative;
}
.svc-box:hover { border-color: var(--border); box-shadow: 0 0 30px rgba(255,255,255,0.08); }
.svc-box-title {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.75rem; color: var(--cyan); line-height: 1.2;
  text-shadow: none; margin-bottom: 1.6rem; padding-bottom: 1.9rem;
  border-bottom: 3px solid #fff; position: relative;
}
@media (min-width: 641px) {
  .svc-box-title { min-height: 8.4rem; }
}
.svc-box-title-icons {
  position: absolute; right: 0; bottom: 1.2rem; display: flex; flex-direction: row; gap: 0.4rem;
}
.svc-box-title-icons .ttl-ico {
  width: 22px; height: 22px; border: 1px solid var(--border-soft); display: grid; place-items: center;
  color: var(--cyan-deep);
}
.svc-box-title-icons .ttl-ico svg { width: 12px; height: 12px; }
.svc-box-list { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 2.6rem; flex: 1; }
.svc-item { display: block; position: relative; text-decoration: none; padding: 0 3rem 1.6rem 0; border-bottom: 1px solid #5c5c5c; transition: transform 0.2s; }
.svc-item:last-child { border-bottom: none; position: static; }
.svc-item:hover { transform: translateX(3px); }
.svc-item:last-child:hover { transform: none; }
.svc-item-ico {
  position: absolute; right: 0; bottom: 1.6rem; width: 32px; height: 32px;
  border: 1px solid var(--border-soft); display: grid; place-items: center;
  color: var(--cyan-deep); transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.svc-item:last-child .svc-item-ico { right: 2.2rem; bottom: 2.2rem; }
.svc-item-ico svg { width: 16px; height: 16px; }
.svc-item:hover .svc-item-ico { color: var(--cyan); border-color: var(--cyan-deep); box-shadow: 0 0 12px var(--glow-soft); }
.svc-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.6rem; }
.svc-item-name { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.15rem; color: var(--text); line-height: 1.3; transition: color 0.2s; }
.svc-item:hover .svc-item-name { color: var(--cyan); }
.svc-item-price { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.08rem; color: var(--cyan); text-shadow: none; white-space: nowrap; flex-shrink: 0; }
.svc-item-per { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 400; color: var(--muted); text-shadow: none; }
.svc-item-hook { font-size: 0.94rem; font-style: italic; color: var(--cyan-deep); line-height: 1.5; margin-bottom: 0.9rem; min-height: 2.85rem; }
.svc-item-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan-deep); border: 1px solid var(--border-soft); padding: 0.45rem 0.85rem; transition: all 0.2s;
}
.svc-item:hover .svc-item-cta { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--glow-soft); }
@media (max-width: 640px) {
  .svc-box { padding: 1.5rem; }
  .svc-box-title { font-size: 1.45rem; margin-bottom: 1.3rem; padding-bottom: 1.6rem; padding-right: 4.5rem; }
  .svc-box-title-icons { bottom: 1rem; gap: 0.3rem; }
  .svc-box-title-icons .ttl-ico { width: 19px; height: 19px; }
  .svc-box-title-icons .ttl-ico svg { width: 10px; height: 10px; }
  .svc-box-list { gap: 1.4rem; margin-bottom: 1.8rem; }
  .svc-item { padding-bottom: 1.4rem; }
  .svc-item-name { font-size: 1.05rem; }
  .svc-item-hook { font-size: 0.88rem; }
  .svc-item-price { font-size: 1rem; }
  .svc-item-ico { width: 28px; height: 28px; bottom: 1.4rem; }
  .svc-item-ico svg { width: 14px; height: 14px; }
  .svc-item:last-child .svc-item-ico { right: 1.5rem; bottom: 1.5rem; }
}

/* ---------- SERVICE DETAIL PAGE ---------- */
.svc-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
.svc-detail-body > .eyebrow { margin-top: 2.6rem; }
.svc-detail-body > .eyebrow:first-child { margin-top: 0; }
.svc-detail-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; margin: 0.6rem 0 1.1rem; }
.svc-detail-body h2 .glow { color: #fff; text-shadow: none; }
.svc-detail-body p { color: var(--muted); font-size: 1.14rem; line-height: 1.72; max-width: 62ch; }
.svc-need-list { list-style: none; padding: 0; margin: 0; max-width: 62ch; }
.svc-need-list li { position: relative; padding-left: 1.1rem; color: var(--muted); font-size: 1.14rem; line-height: 1.72; }
.svc-need-list li + li { margin-top: 0.5rem; }
.svc-need-list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-deep); }
.svc-detail-tags { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc-detail-tags span { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-deep); border: 1px solid var(--border-soft); padding: 0.25rem 0.6rem; }
.svc-related { margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid var(--border-soft); }
.svc-related-label { font-family: 'Inter', sans-serif; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.9rem; }
.svc-related-links { display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; }
.svc-related-links a { font-size: 0.92rem; color: var(--cyan-deep); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.svc-related-links a:hover { color: var(--cyan); border-color: var(--cyan); }
.svc-sidebar { display: flex; flex-direction: column; gap: 1.8rem; }
#invest { scroll-margin-top: 100px; }
.svc-pricing {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--cyan-deep);
  box-shadow: 0 0 30px var(--glow-soft); padding: 3.6rem;
}
.svc-pricing .service-price { padding-top: 0; margin-top: 0; }
.svc-pricing .service-price .sp-amt { font-size: 2.6rem; }
.svc-pricing .service-time { margin-top: 1.6rem; }
.svc-cta-btn { width: 100%; text-align: center; margin-top: 2.2rem; padding: 1.1rem 2rem; }

.svc-icon-box {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border);
  box-shadow: 0 0 20px var(--glow-soft); padding: 5rem; display: grid; place-items: center;
}
.svc-icon-box svg { width: 120px; height: 120px; color: var(--cyan); filter: drop-shadow(0 0 16px var(--glow-soft)); }

.svc-help-box {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border); padding: 1.8rem;
}
.svc-help-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; margin-bottom: 1.4rem; }
.svc-help-btn {
  display: block; width: 100%; text-align: center; font-family: 'Inter', sans-serif; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 1.1rem 1.2rem; border: 1px solid var(--border);
  color: var(--text); background: none; cursor: pointer; transition: 0.2s; line-height: 1.5;
}
.svc-help-btn + .svc-help-btn { margin-top: 1.1rem; }
.svc-help-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px var(--glow-soft); }

/* ---- Choose How You Invest: the box itself is deliberately minimal — title, one positioning
   line, and the bare numbers for whichever option(s) are approved. Nothing else. The explanatory
   copy that used to live here (fit description, timeline, ownership, qualification note) now
   lives in .invest-detail-grid, a separate page section — see generate-site.mjs. ---- */
.invest-choice {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border);
  padding: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem;
}
.invest-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; margin: 0; }
.invest-positioning { font-family: 'Inter', sans-serif; font-size: 0.88rem; line-height: 1.6; color: #fff; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-soft); }
.invest-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.invest-options-single { grid-template-columns: 1fr; }
.invest-option { display: flex; flex-direction: column; gap: 0.5rem; }
.invest-option + .invest-option { padding-left: 1.6rem; border-left: 1px solid #fff; }
.invest-option-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.invest-managed .invest-option-title { color: var(--cyan-deep); }
.invest-amt { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.7rem; color: var(--cyan); line-height: 1; }
.invest-sub { font-family: 'Inter', sans-serif; font-size: 0.86rem; color: var(--cyan-deep); }
.invest-build .invest-amt + .invest-sub {
  color: var(--cyan);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}
.hero .hero-description { color: #fff; }

/* ---- How each option works: the relocated explanatory content, in its own body section ---- */
.invest-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.8rem; }
.invest-detail {
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft);
  padding: 1.8rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.invest-detail h3 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0; }
.invest-detail > p { font-family: 'Inter', sans-serif; font-size: 0.88rem; line-height: 1.6; color: var(--text); }
.invest-line { display: flex; flex-direction: column; gap: 0.25rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; padding: 0.6rem 0; border-top: 1px solid var(--border-soft); color: var(--text); }
.invest-line span { color: var(--muted-2); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.invest-line b { font-weight: 600; line-height: 1.4; }
.invest-detail-disclaimer { font-family: 'Inter', sans-serif; font-size: 0.74rem; line-height: 1.55; color: var(--muted-2); margin-top: auto; padding-top: 0.6rem; }

@media (max-width: 860px) {
  .svc-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Pull pricing up front on mobile: the sidebar's real DOM position (after all
     five body sections) meant "Choose How You Invest" was a long scroll away.
     display:contents promotes its children into the grid so #invest can jump
     to the top via order, without duplicating markup or hurting DOM/reader order. */
  .svc-sidebar { display: contents; }
  .svc-icon-box { display: none; }
  #invest { order: -2; }
  .svc-detail-body { order: 0; }
  .svc-help { order: 1; }
  .svc-pricing { padding: 2.4rem; }
  .svc-help-box { padding: 2.2rem; }
  .invest-options { grid-template-columns: 1fr; }
  .invest-option + .invest-option { padding-left: 0; padding-top: 1.2rem; border-left: none; border-top: 1px solid #fff; }
  .invest-detail-grid { grid-template-columns: 1fr; }
}

/* ---------- PROCESS ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.step { background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft); padding: 2rem 1.8rem; position: relative; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.step:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 0 24px var(--glow-soft), 0 0 55px rgba(255,255,255,0.16); }
.step-num { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--cyan-deep); }
.step-ico { width: 46px; height: 46px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--cyan); margin: 0.8rem 0 1.2rem; transition: 0.25s; }
.step-ico svg { width: 22px; height: 22px; }
.step:hover .step-ico { color: var(--cyan); box-shadow: 0 0 18px var(--glow-soft); }
.step h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.3rem; letter-spacing: 0.01em; }
.step-time { display: inline-block; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.7rem; }
.step p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* desktop: 4 cards per row — 12 services divide evenly into 3 clean rows */
@media (min-width: 1101px) {
  #services .wrap { max-width: 1680px; }
  .services-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .service { padding: 2.6rem; }
}
.scope-cta { text-align: center; margin-top: 3rem; }
.scope-cta .btn { font-size: 0.92rem; padding: 1.15rem 2.6rem; letter-spacing: 0.16em; }

/* ---------- LIVE DEMOS PAGE ---------- */
.demo-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.demo-card {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 2.2rem 1.9rem;
  background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.demo-card:hover { border-color: var(--cyan); box-shadow: 0 0 24px var(--glow-soft), 0 0 55px rgba(255,255,255,0.16); transform: translateY(-4px); }
.demo-card-num { font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 0.85rem; color: var(--cyan); letter-spacing: 0.08em; }
.demo-card h2 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 1.25rem; }
.demo-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; flex-grow: 1; }
.demo-card-cta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: #fff; }
.demo-card-cta svg { width: 16px; height: 16px; transition: transform 0.2s; }
.demo-card:hover .demo-card-cta svg { transform: translateX(4px); }
@media (max-width: 900px) { .demo-list-grid { grid-template-columns: 1fr; } }

/* ---------- WHY JSI PAGE ---------- */
.why-points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.why-card { padding: 1.9rem 1.7rem; background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.why-card:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 0 24px var(--glow-soft), 0 0 55px rgba(255,255,255,0.16); }
.why-ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cyan); border: 1px solid var(--border-soft); margin-bottom: 1rem; }
.why-ico svg { width: 20px; height: 20px; }
.why-card h3 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 0.5rem; }
.why-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
@media (max-width: 900px) { .why-points-grid { grid-template-columns: 1fr; } }
.track-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
.track-col { padding: 1.8rem; background: rgba(255,255,255,0.03); border-left: 2px solid var(--cyan); }
.track-col-num { font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 0.8rem; color: var(--cyan); letter-spacing: 0.08em; display: block; margin-bottom: 0.7rem; }
.track-col p { color: var(--text); font-size: 0.95rem; line-height: 1.6; }
.track-visual { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--border-soft); }
.track-visual-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.track-visual-item img { width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,0.04); padding: 8px; }
.track-visual-item span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.track-visual-arrow { color: var(--cyan); font-size: 1.1rem; }
.track-visual-caption { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }
@media (max-width: 900px) { .track-cols { grid-template-columns: 1fr; } }
.why-final-wrap { text-align: center; max-width: 620px; margin: 0 auto; }
.why-final-wrap h2 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 1.9rem; margin-bottom: 0.8rem; }
.why-final-wrap p { color: var(--muted); margin-bottom: 1.8rem; }
.scope-footnote { max-width: 560px; margin: 1.4rem auto 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted-2); }

/* ---------- TRUSTED BY STRIP ---------- */
.trusted-strip { padding: 1.8rem 0; border-bottom: 1px solid var(--border-soft); }
.trusted-strip-label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); text-align: center; margin-bottom: 0.9rem; }
.trusted-strip-items { display: flex; justify-content: center; align-items: center; gap: 2.2rem; flex-wrap: wrap; }
.trusted-strip-items span { font-size: 0.82rem; color: var(--muted); font-weight: 500; text-align: center; position: relative; }
.trusted-strip-items span:not(:last-child)::after { content: '·'; position: absolute; right: -1.2rem; color: var(--border); }
@media (max-width: 760px) { .trusted-strip-items { flex-direction: column; gap: 0.7rem; } .trusted-strip-items span:not(:last-child)::after { display: none; } }

/* ---------- GUARANTEE ---------- */
.guarantee-wrap { display: flex; align-items: center; gap: 2.4rem; max-width: 820px; }
.guarantee-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.guarantee-pair .guarantee-wrap { flex-direction: column; align-items: flex-start; gap: 1.2rem; max-width: none; }
.guarantee-pair .guarantee-badge { align-self: center; }
.guarantee-pair .guarantee-copy { width: 100%; text-align: center; }
.guarantee-pair .guarantee-copy p { margin-left: auto; margin-right: auto; }
.guarantee-pair .guarantee-copy .eyebrow { display: flex; justify-content: center; }
.guarantee-pair .guarantee-copy .eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--muted); }
@media (max-width: 900px) { .guarantee-pair { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 700px) { .guarantee-pair .guarantee-wrap { align-items: center; } }
.guarantee-badge { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--cyan); }
.guarantee-badge svg { width: 34px; height: 34px; }
.guarantee-copy h2 { margin: 0.4rem 0 0.8rem; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.guarantee-copy p { color: var(--muted); max-width: 560px; }
@media (max-width: 700px) { .guarantee-wrap { flex-direction: column; text-align: center; gap: 1.2rem; } .guarantee-copy p { max-width: none; } }

/* ---------- QUIZ CTA ---------- */
.quiz-cta-section { background: var(--panel); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 3.2rem 0; }
.quiz-cta-wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.quiz-cta-copy h2 { margin: 0.4rem 0 0.6rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.quiz-cta-copy p { color: var(--muted); max-width: 520px; }
.quiz-cta-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) { .quiz-cta-wrap { flex-direction: column; text-align: center; } }

/* ---------- WHY JSI: CLIENT QUOTE ---------- */
.why-quote-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.why-quote-mark { width: 34px; height: 34px; color: var(--cyan); opacity: 0.7; margin: 0 auto 1.2rem; display: block; }
.why-quote-text { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.45; color: #fff; letter-spacing: -0.01em; }
.why-quote-attr { margin-top: 1.3rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- CASE STUDIES ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.case { border: 1px solid var(--border-soft); background: var(--panel); overflow: hidden; transition: 0.25s; display: flex; flex-direction: column; }
.case:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 0 40px var(--glow-soft); }
.case-visual { height: 220px; position: relative; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid var(--border-soft); }
.case-visual.lund { background: radial-gradient(circle at 30% 30%, #1a1a1a, #060606); }
.case-visual.avalon { background: radial-gradient(circle at 70% 40%, #181818, #060606); }
.case-visual .vlabel { position: absolute; z-index: 2; top: 42%; left: 50%; width: 100%; transform: translate(-50%,-50%); font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.6rem; letter-spacing: 0.04em; color: #fff; text-shadow: none; text-align: center; padding: 0 1rem; }
.case-cityscape { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 10 / 1; color: rgba(255,255,255,.66); overflow: visible; }
.case-cityscape .city-main { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.case-cityscape .city-infill { fill: none; stroke: rgba(255,255,255,.57); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.case-cityscape .city-floors { fill: none; stroke: rgba(255,255,255,.34); stroke-width: .85; stroke-linecap: round; }
.case-cityscape .city-small-details { fill: none; stroke: rgba(255,255,255,.28); stroke-width: .72; stroke-linecap: round; stroke-linejoin: round; }
.case-cityscape .city-detail { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; stroke-linecap: round; }
.case-cityscape .city-glow { fill: none; stroke: var(--cyan); stroke-width: 1.1; opacity: .72; }
.case-body { padding: 2rem 2.2rem 2.4rem; display: flex; flex-direction: column; flex-grow: 1; }
.case-niche { font-family: 'Inter', sans-serif; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.7rem; }
.case h3 { font-size: 1.25rem; color: #fff; margin-bottom: 0.7rem; }
.case p { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.4rem; flex-grow: 1; }
.case-meta { display: flex; gap: 1.6rem; margin-bottom: 1.4rem; }
.case-meta div .n { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--cyan); font-size: 1.1rem; }
.case-meta div .l { font-family: 'Inter', sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.case-link { font-family: 'Inter', sans-serif; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 0.5rem; transition: 0.2s; }
.case-link:hover { gap: 0.9rem; text-shadow: none; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start; max-width: 1000px; margin: 0 auto; }
/* wide desktop / Mac screens: 4 across (8-col grid, each card spans 2) with the
   final two of the 18 cards centered on the last row */
@media (min-width: 1000px) {
  #faq .wrap { max-width: 1340px; }
  .faq-grid { grid-template-columns: repeat(8, 1fr); max-width: 1300px; }
  .faq-grid .faq-section { grid-column: span 2; }
}
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-section { margin: 0; }
/* full-width "Services" divider between the general cards and the service cards */
.faq-divider { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin: 1.4rem 0 0.5rem; }
.faq-divider span { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(2.4rem, 6.2vw, 4.6rem); letter-spacing: -0.01em; color: var(--cyan); text-shadow: none; }
.faq-divider::before, .faq-divider::after { content: ''; height: 1px; width: clamp(40px, 8vw, 90px); background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
@media (max-width: 640px) { .faq-divider { gap: 0.8rem; } .faq-divider::before, .faq-divider::after { width: clamp(18px, 7vw, 50px); } }
.faq-card { background: linear-gradient(160deg, var(--panel), var(--bg)); border: 1px solid var(--border-soft); padding: 1.4rem 1.9rem 0.6rem; transition: border-color 0.25s, box-shadow 0.25s; }
.faq-card:hover { border-color: var(--border); box-shadow: 0 0 30px rgba(255,255,255,0.08); }
.faq-cat { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.28rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.faq-cat::before { content: ''; width: 20px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.faq-card > h3 { font-size: 1.2rem; color: #fff; margin: 0.4rem 0 0.3rem; letter-spacing: 0.01em; }
.faq-item { border-top: 1px solid var(--border-soft); }
.faq-card > h3 + .faq-item, .faq-cat + .faq-item { border-top: 1px solid var(--border-soft); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; position: relative; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.98rem; line-height: 1.5; color: var(--text); transition: color 0.2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cyan); }
.faq-item summary::after { content: ''; position: absolute; right: 0.5rem; top: 1.45rem; width: 8px; height: 8px; border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(45deg); transition: transform 0.25s; box-shadow: 1px 1px 6px var(--glow-soft); }
.faq-item[open] summary { color: var(--cyan); text-shadow: none; }
.faq-item[open] summary::after { transform: rotate(225deg); top: 1.7rem; }
.faq-a { padding: 0 1.5rem 1.2rem 0; color: var(--muted); font-size: 0.94rem; line-height: 1.7; max-width: 64ch; }
.faq-a ul { list-style: none; padding: 0; margin: 0; }
.faq-a li { position: relative; padding-left: 1.1rem; }
.faq-a li + li { margin-top: 0.5rem; }
.faq-a li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-deep); }

.faq-closing { text-align: center; max-width: 640px; margin: 4rem auto 0; }
.faq-closing h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: #fff; margin-bottom: 1rem; }
.faq-closing h2 .glow { color: #fff; text-shadow: none; }
.faq-closing p { color: var(--muted); margin-bottom: 2rem; }

/* ---------- CONTACT ---------- */
#contact {
  position: relative; background: var(--bg-2); overflow-x: hidden; scroll-margin-top: 84px;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: stretch; }
.contact-left { display: flex; flex-direction: column; }

.contact-left h2 { font-size: clamp(2rem, 4vw, 3.4rem); color: #fff; margin-bottom: 1.2rem; }
.contact-left h2 .glow { color: #fff; text-shadow: none; }
.contact-left p { color: var(--muted); margin-bottom: 2.4rem; max-width: 420px; }
.contact-pricing-note {
  position: relative; width: 100%; margin: 3.4rem 0 0; padding: 1.35rem 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.48); border-radius: 12px;
  background: linear-gradient(115deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.22);
  color: #fff; font-family: 'Inter', sans-serif; font-size: .94rem; line-height: 1.45;
  letter-spacing: .025em; text-align: center;
}
.contact-pricing-note::before {
  content: 'INVESTMENT NOTE'; position: absolute; top: 0; left: 50%; padding: 0 .7rem;
  background: var(--bg-2); color: var(--muted); transform: translate(-50%, -50%);
  font-size: .58rem; font-weight: 700; letter-spacing: .2em; white-space: nowrap;
}
.contact-pricing-note strong { font-weight: 800; }
.contact-method { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--border-soft); }
.contact-method:last-child { border-bottom: 1px solid var(--border-soft); }
.contact-method .ci { width: 40px; height: 40px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--cyan); flex-shrink: 0; }
.contact-method .ci svg { width: 18px; height: 18px; }
.contact-method .cl { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.contact-method .cv { color: var(--text); font-size: 0.98rem; }
.contact-method:hover .cv { color: var(--cyan); }
form { background: var(--panel); border: 1px solid var(--border-soft); padding: 2.6rem 2.4rem 2.4rem; scroll-margin-top: 90px; }
#contactForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
#contactForm > .form-title, #contactForm > .form-honeypot, #contactForm > .form-status,
#contactForm > .form-consent, #contactForm > .btn, #contactForm .field-full { grid-column: 1 / -1; }
@media (max-width: 640px) { #contactForm { grid-template-columns: 1fr; } }
#contactForm.is-sent { display: flex; align-items: center; justify-content: center; }
.form-success { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2rem; padding: 3rem 1rem; outline: none; }
.form-success-title { margin: 0; font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: clamp(3.4rem, 10vw, 6.6rem); line-height: 1.02; letter-spacing: -0.02em; color: #fff; text-wrap: balance; text-shadow: 0 0 34px var(--glow-soft); }
.form-success-title em { font-style: italic; background: linear-gradient(180deg, #fff 20%, #8c8c8c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(255,255,255,.2)); }
.form-success-note { margin: 0; max-width: 30ch; font-size: clamp(1.15rem, 2.6vw, 1.65rem); line-height: 1.5; color: var(--muted-2); text-wrap: balance; }
.field { margin-bottom: 1.3rem; }
.field label { font-family: 'Inter', sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.5rem; }
#contactForm label[for="contactPreference"] { white-space: nowrap; }
.form-title {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-align: center;
  margin: -2.6rem -2.4rem 2.2rem; padding: 2.1rem 2.4rem;
  border: 1.5px solid #ffffff; border-radius: 14px 14px 0 0;
  box-shadow: 0 0 16px rgba(255,255,255,0.4), 0 0 6px rgba(255,255,255,0.4);
}
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg); border: 1px solid var(--border-soft); color: var(--text);
  padding: 0.85rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 16px var(--glow-soft); }
.field textarea { resize: vertical; min-height: 110px; }
.field-note { font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.5; color: var(--cyan-deep); margin: 0.5rem 0; min-height: 1em; }
.field-note:empty { margin: 0; }
.investment-select-wrap { position: relative; }
.investment-select-wrap #investmentStructure { min-height: 60px; padding-top: 0.55rem; padding-bottom: 0.55rem; color: transparent; cursor: pointer; }
.investment-select-wrap #investmentStructure option { color: var(--text); }
.investment-select-display { position: absolute; z-index: 1; inset: 0 3.3rem 0 1rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; pointer-events: none; line-height: 1.15; }
.investment-select-display span:first-child { color: var(--text); font-size: 0.9rem; }
.investment-select-display span:last-child { color: var(--muted); font-size: 0.76rem; margin-top: 0.16rem; }
.investment-select-display span:last-child:empty { display: none; }
.addon-checks { display: flex; flex-direction: column; gap: 0.6rem; }
.addon-checks .addon-check {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-soft); background: var(--bg); cursor: pointer;
  font-family: 'Inter', sans-serif; text-transform: none; margin-bottom: 0; transition: border-color 0.2s, background 0.2s;
}
.addon-checks .addon-check:hover { border-color: var(--border); background: rgba(255,255,255,0.03); }
.addon-checks .addon-check input[type="checkbox"] {
  width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; margin: 0;
  appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--border-soft);
  border-radius: 3px; position: relative;
}
.addon-checks .addon-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%) rotate(45deg);
  width: 8px; height: 12.5px; border: solid #000; border-width: 0 3.5px 3.5px 0;
}
.addon-checks .addon-check span:first-of-type { flex: 1; font-size: 0.88rem; color: #fff; font-weight: 500; letter-spacing: normal; text-transform: none; }
.addon-checks .addon-check-price { font-size: 0.78rem; color: var(--muted); white-space: nowrap; text-transform: none; letter-spacing: normal; }
form .btn { width: 100%; border: none; }

/* ---------- custom budget dropdown ---------- */
.cselect { position: relative; }
.cselect-trigger {
  width: 100%; background: var(--bg); border: 1px solid var(--border-soft); color: var(--text);
  padding: 0.7rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: 0.2s;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; text-align: left; cursor: pointer;
}
.cselect-trigger:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 16px var(--glow-soft); }
.cselect.open .cselect-trigger { border-color: var(--cyan); box-shadow: 0 0 16px var(--glow-soft); }
.cselect-trigger .cs-text { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; }
.cs-range { color: var(--text); line-height: 1.25; }
.cs-care { font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted); line-height: 1.2; }
.cs-arrow { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform 0.2s, color 0.2s; }
.cselect.open .cs-arrow { transform: rotate(180deg); color: var(--cyan); }
.cselect-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; list-style: none;
  background: var(--panel-2); border: 1px solid var(--cyan);
  box-shadow: 0 0 16px var(--glow-soft), 0 12px 40px rgba(0,0,0,0.55);
  max-height: 320px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.cselect.open .cselect-list { opacity: 1; visibility: visible; transform: translateY(0); }
.cselect-opt {
  display: flex; flex-direction: column; gap: 0.16rem; padding: 0.7rem 1rem; cursor: pointer;
  border-left: 2px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.cselect-opt + .cselect-opt { border-top: 1px solid var(--border-soft); }
.cselect-opt.active { background: rgba(255,255,255,0.06); border-left-color: var(--cyan); }
.cselect-opt[aria-selected="true"] { background: rgba(255,255,255,0.09); }
.cselect-opt[aria-selected="true"] .cs-range { color: var(--cyan); }
.cselect-opt[hidden] { display: none; }

/* ---------- LEGAL PAGES ---------- */
.legal { padding: 4.5rem 0 5rem; }
.legal .wrap { max-width: 800px; }
.legal-updated { font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.8rem; }
.legal-lead { color: var(--text); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.4rem; }
.legal h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: 0.02em; margin: 2.3rem 0 0.6rem; }
.legal p { color: var(--muted); font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; }
.legal a { color: var(--cyan); }
.legal a:hover { text-shadow: none; }

/* ---------- FOOTER ---------- */
footer { background: var(--bg); border-top: 1px solid var(--border-soft); padding: 2.8rem 0; position: relative; z-index: 1; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-copy { display: flex; align-items: center; gap: 0.7rem; }
.footer-mark-img { height: 18px; width: auto; display: block; flex-shrink: 0; opacity: 0.85; }
.footer-grid p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted-2); }
.footer-right { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { color: var(--muted); transition: color 0.2s; display: flex; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 17px; height: 17px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Above-the-fold homepage hero text paints with the first frame. It does not
   fade in, and the scroll-reveal delay must not apply to it. */
.hero .eyebrow,
.hero h1,
.hero .hero-description {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .services-grid, .process-grid, .svc-boxes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-boxes { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  html.nav-menu-open,html.nav-menu-open body { overflow:hidden; overscroll-behavior:none; }
  nav { z-index:300; }
  .nav-links { position: fixed; z-index:301; top: 60px; right: 0; left: 0; max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain; background: rgba(5,6,8,.985); flex-direction: column; padding: 2rem; gap: 1.5rem; border-bottom: 1px solid var(--border); display: none; box-shadow:0 24px 48px rgba(0,0,0,.55); }
  .nav-links.open { display: flex; }
  .hamburger { display: flex; }
  .cases-grid, .contact-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 1.4rem; }
  section { padding: 4.5rem 0; }
  .hero-stats { gap: 2rem; }
  .page-hero { padding: 6rem 0 1.25rem; }
  .contact-pricing-note { margin: 1.7rem 0 0; width: 100%; }
}
@media (max-width: 900px) {
  .streaks { -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity 0.4s ease; }
  .streaks.placed { opacity: 1; }
}
/* phones: 2-up compact cards for Services + Process */
@media (max-width: 640px) {
  .services-grid, .process-grid { gap: 0.7rem; }
  .step { padding: 1.3rem 1.1rem; }
  .step-ico { width: 38px; height: 38px; margin: 0.7rem 0 0.9rem; }
  .step-ico svg { width: 19px; height: 19px; }
  .step h3 { font-size: 0.95rem; margin-bottom: 0.45rem; }
  .step p { font-size: 0.8rem; line-height: 1.45; }
  .service { padding: 1.15rem 1rem; }
  .service-ico { width: 36px; height: 36px; margin-bottom: 0.8rem; }
  .service-ico svg { width: 18px; height: 18px; }
  .service h3 { font-size: 0.92rem; line-height: 1.25; margin-bottom: 0.45rem; }
  .service p { font-size: 0.78rem; line-height: 1.45; }
  .service .tags { margin-top: 0.8rem; gap: 0.35rem; }
  .service .tags span { white-space: normal; font-size: 0.54rem; letter-spacing: 0.06em; padding: 0.2rem 0.45rem; }
  .service-price { padding-top: 1rem; }
  .service-price .sp-amt { font-size: 1.25rem; }
  .service-price .sp-care { font-size: 0.8rem; }
  .scope-cta .btn { font-size: 0.78rem; padding: 0.9rem 1.8rem; letter-spacing: 0.14em; }
  .faq-card { padding: 1.1rem 1.2rem 0.4rem; }
  .faq-item summary { font-size: 0.92rem; padding-right: 1.8rem; }
}
/* animated divider beams between sections */
@media (prefers-reduced-motion: reduce) { .beam::before { animation: none; opacity: 0; } }
</content>
</invoke>


/* ================= ELEVATED GLASS DESIGN LAYER (Tron -> elevated mono migration) ================= */
:root {
  --panel: rgba(255,255,255,0.045);
  --panel-2: rgba(255,255,255,0.08);
}

/* Desktop: fixed, so the glow tracks the viewport as you scroll. The known
   compositing bug that makes a fixed element with animated children paint above
   content mid-scroll is an iOS/mobile Safari problem, so desktop is safe here --
   the mobile override below switches to absolute to sidestep it on phones. */
.mesh {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none; overflow: hidden;
}
/* force each top-level content block into its own stacking context so it composites
   above the mesh unconditionally -- z-index:-1 alone should be enough per spec, but
   isolation:isolate is a stronger, more browser-reliable guarantee (matters most on
   mobile Safari, where fixed-position compositing order during scroll has known
   quirks). Scoped to specific selectors, not a blanket body>* rule, so it can't
   collide with nav/search-panel's own position:fixed. */
nav, .search-panel, .hero, .page-hero, section, footer {
  isolation: isolate;
  /* force a dedicated GPU compositing layer -- Safari (desktop + iOS) has a known
     bug where position:fixed elements can composite above other layers mid-scroll
     regardless of z-index/isolation until something nearby is layer-promoted. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* These sit at z-index:-1, genuinely behind all content -- but a bright glow behind
   muted grey body text still washes out its contrast, which reads as the light being
   "on top". The fix isn't dimming everything into invisibility: it's keeping each
   blob's HOT CORE off-screen (anchored past the viewport edge) so only the soft
   outer falloff reaches inward over text. That buys real visible brightness at the
   edges while the area behind body copy stays low-intensity. Moving a core back on
   top of a text column is what reintroduces the washout. */
.mesh i {
  position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
}
.mesh i:nth-child(1) { width: 50vw; height: 50vw; top: -16vw; left: -12vw; animation: meshDrift1 30s ease-in-out infinite; }
.mesh i:nth-child(2) { width: 42vw; height: 42vw; bottom: -14vw; right: -10vw; opacity: 0.4; animation: meshDrift2 36s ease-in-out infinite; }
/* right-hand side of the desktop hero is free of body copy (graph sits there), so
   this one can stay on-canvas and carry more of the visible glow */
.mesh i:nth-child(3) { width: 34vw; height: 34vw; top: 42%; left: 62%; opacity: 0.26; animation: meshDrift3 24s ease-in-out infinite; }
.mesh i:nth-child(4) { display: none; }
@keyframes meshDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,3vw) scale(1.08); } }
@keyframes meshDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3vw,-4vw) scale(1.1); } }
@keyframes meshDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-2vw,3vw) scale(0.92); } }
@media (max-width: 900px) {
  /* absolute rather than fixed on phones: iOS Safari can composite a fixed element
     with animated children above page content mid-scroll. Pinning it to the top of
     the document sidesteps that entirely -- the trade-off is the glow scrolls away
     with the page here, while desktop keeps it tracking the viewport. */
  .mesh { position: absolute; inset: auto; top: 0; left: 0; width: 100%; height: 100vh; }
  /* the 100px blur was tuned against desktop-sized blobs -- on a narrow viewport the
     vw-sized blobs shrink but the blur radius doesn't, over-diffusing the glow into
     near-invisibility. Scale blur down and lift opacity a touch to compensate. */
  /* mobile body copy spans nearly the full width, so every core is anchored past a
     viewport edge -- the glow reads bright along the edges, but only the faint tail
     of the gradient ever passes behind the text itself. */
  .mesh i:nth-child(1) { top: -6vw; left: -26vw; width: 62vw; height: 62vw; filter: blur(46px); opacity: 0.55; }
  .mesh i:nth-child(2) { bottom: -18vw; right: -24vw; width: 58vw; height: 58vw; filter: blur(44px); opacity: 0.45; }
  .mesh i:nth-child(3) { top: 50%; left: -34vw; width: 62vw; height: 62vw; filter: blur(50px); opacity: 0.32; }
  /* homepage only -- core pushed off the right edge beside the hero paragraph rather
     than centred behind it, so it glows in from the side without washing the text */
  body:not(.subpage) .mesh i:nth-child(4) { display: block; top: 24%; left: 68vw; width: 60vw; height: 60vw; filter: blur(48px); opacity: 0.34; animation: meshDrift1 28s ease-in-out infinite; }
  /* service pages: no ambient lights on mobile, homepage keeps them */
  body.subpage .mesh { display: none; }
}
.grain {
  position: fixed; inset: -10%; z-index: 1; pointer-events: none; opacity: 0.045; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.about-col, .service, .svc-box, .svc-pricing, .svc-icon-box, .svc-help-box,
.step, .case, .faq-card, form, .cselect-list {
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.case { border-radius: 14px !important; }
.case-visual { border-radius: 14px 14px 0 0; }
.svc-box, .about-col, .step, .faq-card, .trust-box, .why-card, .demo-card { border-radius: 16px !important; }

.btn { border-radius: 999px !important; }
.btn-primary { background: linear-gradient(135deg, #ffffff, #dcdcdc) !important; color: #0a0a0a !important; }
.btn-primary:hover { box-shadow: 0 10px 34px rgba(255,255,255,0.28) !important; }
.btn-ghost { background: rgba(255,255,255,0.02); }

.nav-search-btn, .hamburger, .cal-head button { border-radius: 50%; }

.accent-word {
  font-family: 'Inter', sans-serif; font-weight: 800; font-style: italic;
  letter-spacing: -0.01em; padding: 0 0.04em; display: inline-block;
  color: #fff;
  text-shadow: 0.02em 0.02em 0 #a3a3a3, 0.04em 0.04em 0 #8f8f8f, 0.06em 0.06em 0 #7a7a7a, 0.08em 0.08em 0 #666, 0.1em 0.1em 0.15em rgba(0,0,0,0.5);
}

/* ---- glass utility (matches elevated demo's .glass) ---- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  border: 1px solid var(--border-soft); border-radius: 20px !important;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ---- hero-stats -> glass chip row (matches elevated demo) ---- */
.hero-stats { display: flex; gap: 0.9rem; margin-top: 3.2rem; flex-wrap: wrap; }
.hero-stat {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.4rem; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border-soft);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero-stat .n { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; text-shadow: none; }
.hero-stat .l { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
/* On phones the chips wrap to two rows, so the 3.2rem top margin pushed the last
   one ("24/7") past the hero's 1rem bottom padding and into the next section.
   Tighten the gap above the row and give the hero real bottom padding to sit in.
   Must come after the .hero-stats rule above -- the earlier max-width:900px block
   has equal specificity and would otherwise lose on source order. */
@media (max-width: 900px) {
  .hero { padding-bottom: 3.5rem; }
  .hero-stats { margin-top: 2rem; gap: 0.7rem; }
}
@media (max-width: 640px) {
  .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; width:100%; }
  .hero-actions .btn { display:flex; align-items:center; justify-content:center; min-height:50px; padding:.78rem .58rem; font-size:.59rem; line-height:1.25; text-align:center; letter-spacing:.075em; }
  /* Only 2 hero buttons remain (the old 3rd "Free Audit" button that justified
     a 2-column grid is gone) -- both now span the full row so Read Testimonials
     isn't left half-width with dead space where the third button used to sit. */
  .hero-actions .btn-primary, .hero-actions .btn-ghost { grid-column:1 / -1; }
}

.hero-word-scale .accent-word { margin-left: -0.12em; }
.page-hero h1 .word-apps,
.page-hero h1 .word-operations,
.page-hero h1 .word-visibility,
.page-hero h1 .word-service,
.page-hero h1 .word-policy { margin-left: -0.12em; }
.page-hero h1 .word-pixels { margin-left: -0.03em; }
.word-unreal { margin-left: -0.03em; }

/* ---- services: category glass panels with simple flex rows (matches elevated demo) ---- */
.svc-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.svc-group { width: 100%; max-width: 640px; padding: 34px 34px 10px; }
.svc-grid-3 .svc-group { flex: 1 1 320px; max-width: 380px; }
@media (max-width: 900px) { .svc-grid-3 .svc-group { max-width: 640px; flex: 1 1 100%; } }
.svc-group.glass {
  /* .glass's backdrop-filter is the actual culprit behind the Safari bug (backdrop-filter
     has documented compositing-order bugs with fixed-position siblings) -- the About/Process
     .step cards never had this problem because they never used backdrop-filter to begin
     with, just a plain gradient. Match that here instead of guessing at more CSS hacks. */
  background: linear-gradient(160deg, var(--panel), var(--bg));
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.svc-group-title {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em;
  margin-bottom: 22px; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  position: relative;
}
.svc-group-title .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.7); flex-shrink: 0; }
/* category glyph, pinned to the card's top-right corner independent of the now-centered title text */
.svc-group-title .svc-group-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-shrink: 0; color: inherit; }
.svc-group-title .svc-group-icon svg { width: 33px; height: 33px; display: block; }
/* Narrow cards can't hold the desktop size: at 1.5rem "Business Essentials" starts
   wrapping too and the title rows grow to ~82px. Cap it so only the two longest
   titles wrap, which is what they already did at the previous size. Must sit after
   the base rule above -- the earlier max-width:900px block loses on source order. */
@media (max-width: 900px) {
  .svc-group-title { font-size: 1.32rem; }
  .svc-group-title .svc-group-icon svg { width: 28px; height: 28px; }
}
/* The <640px hide this replaces existed because a centred title ran the full card
   width and passed under the corner-pinned icon. With the title left-aligned the
   text ends well short of the right edge, so the glyph has its corner to itself and
   can stay on phones. Sized down to suit the smaller title. */
@media (max-width: 640px) {
  .svc-group-title .svc-group-icon svg { width: 24px; height: 24px; }
  /* The title now shares its row with the glyph rather than having the full card
     width, so it needs to scale with the card: at a fixed 1.32rem it wrapped to two
     lines on a 320px phone and came within 5px of the icon at 390px. */
  .svc-group-title { font-size: min(1.32rem, 4.6vw); }
}
.svc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 20px; margin: 0 -20px; border-top: 1px solid var(--border-soft); border-radius: 12px;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.svc-row:first-of-type { border-top: none; }
.svc-row:hover {
  background: rgba(255,255,255,0.06); border-top-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 34px rgba(255,255,255,0.22), 0 10px 28px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
.svc-row .s-name { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.96rem; color: #fff; }
.svc-row .s-hook { margin-top: 4px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; max-width: 380px; font-style: normal; }
.svc-row .s-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.svc-row .s-price-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.svc-row .s-price-amt { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; line-height: 1.2; }
.svc-row .s-price-unit { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; }
.svc-row .s-price-cta { flex-direction: row; align-items: center; justify-content: center; align-self: center; gap: 0.4rem; white-space: nowrap; min-width: 100px; }
.svc-row .s-price-cta-text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.86rem; color: #fff; }
.svc-row .s-price-cta-arrow { color: var(--cyan); font-size: 1rem; transition: transform 0.2s; }
.svc-row:hover .s-price-cta-arrow { transform: translateX(4px); }

/* ---- wide desktop only: a single 640px-wide card of stacked rows leaves huge dead
   space on either side. Above 1100px, widen the card and lay the 3 rows out as
   columns instead of stacked rows, so the card actually uses the row's width.
   Tablet/mobile (everything below) is untouched. ---- */
@media (min-width: 1100px) {
  .svc-group { max-width: 980px; }
  .svc-group-title .dot { display: none; }
  .svc-group-title { font-size: 1.9rem; }
  .svc-rows { display: flex; align-items: stretch; gap: 16px; margin-top: 4px; min-height: 220px; }
  .svc-rows .svc-row {
    flex: 1; flex-direction: column; align-items: flex-start; justify-content: center;
    border: 1px solid var(--border-soft); border-radius: 14px;
    background: rgba(255,255,255,0.025);
    margin: 0; padding: 24px 26px;
  }
  .svc-rows .svc-row .s-hook { max-width: none; }
  .svc-rows .svc-row .s-price-cta { align-self: flex-start; justify-content: flex-start; margin-top: 18px; min-width: 0; }
}

/* ---- mobile-only "View ->" hint — desktop relies on the hover glow instead ---- */
.svc-view-mobile { display: none; }
@media (max-width: 860px) {
  .svc-row { position: relative; padding-bottom: 34px; }
  .svc-row .s-price-cta { display: none; } /* .svc-view-mobile already shows the same "View ->" here */
  .svc-view-mobile {
    display: inline-flex; align-items: center; gap: 0.3em;
    position: absolute; right: 20px; bottom: 12px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.68rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  }
}

/* ---- contact: two-column layout matching elevated demo ---- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.audit-contact-callout {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  padding: 1.35rem 1.5rem; border: 1px solid rgba(255,255,255,.32); border-radius: 16px;
  background: linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 0 28px rgba(255,255,255,.06); overflow: hidden;
}
.audit-contact-copy { min-width: 0; }
.audit-contact-callout .eyebrow { margin-bottom: .45rem; }
.audit-contact-callout h3 { color: #fff; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.25; margin: 0 0 .35rem; }
.audit-contact-callout p { color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 760px; margin: 0; }
.audit-contact-action { white-space: nowrap; flex-shrink: 0; }
.audit-contact-action:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 30px rgba(255,255,255,.22); }
@media (max-width: 860px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .audit-contact-callout { grid-column: auto; grid-template-columns: 1fr; gap: 1.15rem; padding: 1.35rem; }
  .audit-contact-action { width: 100%; text-align: center; }
}
.cmethod-list { display: flex; flex-direction: column; gap: 12px; margin-top: 2rem; }
.cmethod {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border-soft);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: 0.25s;
}
.cmethod:hover { border-color: var(--border); }
.cmethod .ci { width: 32px; height: 32px; flex-shrink: 0; color: #fff; }
.cmethod .cl { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cmethod .cv { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.94rem; color: #fff; }

/* Final photographic background treatment */
.mesh { display: none; }

#services {
  background: var(--bg-2);
  -webkit-transform: none;
  transform: none;
}

/* Testimonials */
.testimonials-page main,
.testimonials-page #testimonials { background: transparent; }
.testimonials-hero { padding-bottom: 4.75rem; }
.testimonials-hero h1 { font-size:clamp(3rem,7vw,6.4rem); line-height:.98; letter-spacing:-.055em; }
.testimonials-title-line { display:block; }
.testimonials-hero p { max-width:680px; margin-top:1.35rem; }
.testimonials-wrap { max-width: 1180px; }
.reviews-heading { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:4rem; align-items:end; margin-bottom:2.5rem; }
.reviews-heading .eyebrow { margin-bottom:1rem; }
.reviews-heading h2 { margin:0; color:#fff; font-size:clamp(2.1rem,4.4vw,4.1rem); line-height:1.04; letter-spacing:-.04em; }
.reviews-heading > p { max-width:440px; margin:0 0 .35rem; color:var(--muted); font-size:1rem; line-height:1.75; }
.testimonial-card {
  position: relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:linear-gradient(135deg,#171717 0%,#101010 48%,#0b0b0b 100%);
  box-shadow:0 34px 100px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
.testimonial-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 0 68%,rgba(255,255,255,.045) 68.2%,transparent 68.5%);
}
.testimonial-card::after {
  content:""; position:absolute; right:-12%; bottom:-70%; width:56%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%); pointer-events:none;
}
.testimonial-index {
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between;
  min-height:100%; padding:2rem 1.75rem; border-right:1px solid rgba(255,255,255,.12);
  background:#0b0b0b; text-transform:uppercase;
}
.testimonial-index span { color:var(--muted-2); font:600 .62rem/1 'Inter',sans-serif; letter-spacing:.22em; }
.testimonial-index b { color:rgba(255,255,255,.16); font:800 4.5rem/.85 'Inter',sans-serif; letter-spacing:-.08em; }
.testimonial-content { position:relative; z-index:1; padding:clamp(2rem,5vw,4.5rem); }
.testimonial-topline { display:flex; gap:.65rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.testimonial-type {
  padding:.52rem .72rem; border:1px solid rgba(255,255,255,.13); border-radius:999px;
  color:rgba(255,255,255,.72); font:600 .62rem/1 'Inter',sans-serif; letter-spacing:.13em; text-transform:uppercase;
}
.testimonial-quote-mark {
  position:absolute; right:clamp(1.5rem,4vw,4rem); top:clamp(1.4rem,3vw,2.6rem);
  font:700 clamp(5rem,10vw,9rem)/1 Georgia,serif; color:rgba(255,255,255,.08);
}
.testimonial-card blockquote { position:relative; z-index:1; margin:0; }
.testimonial-card blockquote p {
  margin:0; max-width:900px; color:#fff;
  font:500 clamp(1.25rem,2.3vw,1.85rem)/1.6 'Inter',sans-serif; letter-spacing:-.018em;
}
.testimonial-attribution {
  position:relative; z-index:1; display:flex; align-items:center; gap:.9rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.13);
}
.testimonial-monogram { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:rgba(255,255,255,.05); font:700 1rem/1 'Inter',sans-serif; }
.testimonial-person { color:#fff; font:700 1rem/1.3 'Inter',sans-serif; }
.testimonial-company { margin-top:.22rem; color:var(--muted); font:500 .7rem/1.4 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.review-trust-strip { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1rem; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.018); }
.review-trust-strip > div { display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem; border-right:1px solid rgba(255,255,255,.1); }
.review-trust-strip > div:last-child { border-right:0; }
.review-trust-strip span { color:rgba(255,255,255,.3); font:700 .68rem/1 'Inter',sans-serif; }
.review-trust-strip b { color:rgba(255,255,255,.78); font:600 .76rem/1.3 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.testimonials-wrap .scope-cta { text-align:center; }
@media(max-width:760px){
  .testimonials-hero{padding-bottom:3rem}
  .testimonials-hero h1{font-size:clamp(1.95rem,9.2vw,2.65rem);letter-spacing:-.045em}
  .testimonials-title-line{white-space:nowrap}
  .reviews-heading{grid-template-columns:1fr;gap:1.15rem;margin-bottom:1.75rem}
  .reviews-heading > p{font-size:.92rem}
  .testimonial-card{grid-template-columns:1fr;border-radius:20px}
  .testimonial-index{min-height:auto;flex-direction:row;align-items:center;padding:1rem 1.25rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .testimonial-index b{font-size:1.4rem;letter-spacing:-.04em}
  .testimonial-content{padding:1.65rem 1.35rem 1.5rem}
  .testimonial-topline{margin-bottom:1.5rem}
  .testimonial-card blockquote p{font-size:1.08rem;line-height:1.65}
  .testimonial-attribution{margin-top:1.75rem;align-items:center;flex-wrap:wrap}
  .review-trust-strip{grid-template-columns:1fr}
  .review-trust-strip > div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .review-trust-strip > div:last-child{border-bottom:0}
}

.case-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.case-visual.lund {
  background-color: #0d0b08;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.58) 74%,rgba(0,0,0,.94) 100%),
    url('/images/case-lund-hero.jpg');
  background-position: center, left top;
  background-size: 100% 100%, auto 121%;
}
.case-visual.avalon {
  background-color: #2c2d4e;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.58) 74%,rgba(0,0,0,.94) 100%),
    url('/images/case-avalon-hero.jpg');
  background-position: center, center;
  background-size: 100% 100%, contain;
}
.case-cityscape { display: none; }
.case-visual .vlabel { display: none; }

/* Keep dropdown indicators comfortably inside the field edge. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bdbdbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 16px;
}
.cselect-trigger { padding-right: 1.25rem; }
.cs-arrow { margin-right: .35rem; }
/* Phase 3 accessibility and interaction safeguards */
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:#fff;color:#000;padding:.8rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status,.form-consent{color:var(--muted);font-size:.82rem;line-height:1.55}.form-status:not(:empty){padding:.75rem;border:1px solid var(--line);border-radius:.6rem}.search-result-type{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;color:var(--cyan);margin-right:.45rem}.search-result.active,.search-result:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;background:rgba(255,255,255,.06)}:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- "also available" note under the service grid (graphic design) ---- */
.svc-note {
  margin-top: 26px; padding: 1.5rem 1.8rem; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px dashed var(--border); border-radius: 16px;
}
.svc-note-tag {
  display: inline-block; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan-deep); margin-bottom: 0.6rem;
}
.svc-note p { color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; margin: 0 auto; }
.svc-note p b { color: #fff; font-weight: 700; }
.svc-note-link {
  display: inline-block; margin-top: 0.9rem; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.8rem; color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--border-soft); transition: border-color 0.2s;
}
.svc-note-link:hover { border-color: #fff; }
@media (max-width: 760px) {
  .svc-note { padding: 1.3rem 1.2rem; }
  .svc-note p { font-size: 0.96rem; }
}

/* Graphic design has no investment structure to pick, so the select is disabled while the
   box still reads "To Be Determined". Keep the disabled state visually identical to the
   enabled one apart from the cursor — browsers otherwise grey it out, which reads as broken. */
.investment-select-wrap #investmentStructure:disabled { opacity: 1; cursor: default; }

/* -------- Is This You? page -------- */
.ity-hero{padding-bottom:2.4rem}
.ity-hero .wrap{max-width:760px}
.ity-hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.ity-hero p{color:#fff}
.ity-intro{padding:1rem 0 2rem}
.ity-intro .wrap{max-width:680px;text-align:center}
.ity-intro p{color:var(--muted);font-size:1.15rem;line-height:1.7}

.ity-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.ity-jump a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;border:1px solid var(--border-soft);border-radius:999px;background:rgba(255,255,255,.02);color:var(--muted);font-size:.85rem;font-weight:600;transition:border-color .2s,color .2s,background-color .2s,transform .2s}
.ity-jump a svg{width:20px;height:20px;flex-shrink:0}
.ity-jump a:hover{color:#fff;border-color:var(--border);background:rgba(255,255,255,.05);transform:translateY(-2px)}

.ity-group{padding:1.1rem 0;scroll-margin-top:6.5rem}
.ity-group .wrap{border:1px solid var(--border-soft);border-radius:22px;background:linear-gradient(160deg,var(--panel),var(--bg));box-shadow:0 1px 0 rgba(255,255,255,.03) inset;overflow:hidden;transition:border-color .3s}
.ity-group .wrap:hover{border-color:rgba(255,255,255,.14)}
.ity-group-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:2.2rem 2.4rem;border-bottom:1px solid var(--border-soft)}
.ity-group-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff;display:flex;align-items:center;gap:1rem}
.ity-icon{display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;flex-shrink:0;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--border-soft);color:var(--text)}
.ity-icon svg{width:27px;height:27px}
.ity-group-head a{font-family:'Inter',sans-serif;font-weight:600;font-size:.82rem;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border-soft);padding-bottom:2px;transition:.2s}
.ity-group-head a:hover{color:#fff;border-color:#fff}
.ity-qgrid{display:grid;grid-template-columns:repeat(2,1fr)}
.ity-q{transition:background-color .3s ease}
.ity-q:hover{background-color:rgba(255,255,255,.03)}
.ity-q:nth-child(odd){border-right:1px solid var(--border-soft)}
.ity-q:nth-child(n+3){border-top:1px solid var(--border-soft)}
.ity-q summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;list-style:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:1.18rem;line-height:1.35;color:#fff;letter-spacing:-0.01em;transition:color .2s;padding:2rem 2.4rem}
.ity-q summary::-webkit-details-marker{display:none}
.ity-q summary:hover{color:var(--cyan)}
.ity-q summary::after{content:'';flex-shrink:0;margin-top:.5em;width:9px;height:9px;border-right:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);transform:rotate(45deg);transition:transform .25s}
.ity-q[open] summary{color:var(--cyan)}
.ity-q[open] summary::after{transform:rotate(225deg)}
.ity-q p{font-size:.98rem;color:var(--muted);line-height:1.65;margin:.9rem 0 0;padding:0 2.4rem 2rem}

.ity-final{position:relative;padding:5.5rem 0 6.5rem;text-align:center;overflow:hidden}
.ity-final-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:640px;height:640px;background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 72%);pointer-events:none}
.ity-final .wrap{position:relative;max-width:640px}
.ity-final h2{font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin:.6rem 0 1rem}
.ity-final p{color:#fff;font-size:1.08rem;margin-bottom:2.2rem}
.ity-final-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

@media(max-width:760px){
  .ity-jump{gap:.55rem}
  .ity-jump a{padding:.52rem .95rem;font-size:.78rem}
  .ity-qgrid{grid-template-columns:1fr}
  .ity-q{border-right:none!important}
  .ity-q summary{padding:1.6rem 1.4rem}
  .ity-q p{padding:0 1.4rem 1.6rem}
  .ity-q:nth-child(n+2){border-top:1px solid var(--border-soft)}
  .ity-group-head{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.8rem 1.4rem}
}

/* Homepage service cards: equal-height inner cards, top-aligned copy, "View" pinned to the same baseline */
@media (min-width: 1100px) {
  .svc-grid-3 .svc-group { display: flex; flex-direction: column; padding-bottom: 34px; }
  .svc-grid-3 .svc-rows { flex: 1; }
  .svc-grid-3 .svc-rows .svc-row { justify-content: flex-start; }
  .svc-grid-3 .svc-rows .svc-row .s-price-cta { margin-top: auto; padding-top: 18px; }
}

/* Page-hero eyebrow on phones: long labels break onto two lines at a set point (<br class="eb-br">),
   so the label is only as wide as its text and the dash sits beside it, centered between the lines. */
.page-hero .eyebrow .eb-br { display: none; }
@media (max-width: 700px) {
  .page-hero .eyebrow .eb-br { display: inline; }
  .page-hero .eyebrow .eb-text { text-align: center; line-height: 1.9; }
}

/* Contact: what happens after submitting, and reassurance under the button */
.next-steps { list-style: none; margin: -1.2rem 0 2.2rem; padding: 0; display: grid; gap: .9rem; counter-reset: step; max-width: 440px; }
.next-steps li { position: relative; display: grid; gap: .15rem; padding-left: 2.6rem; counter-increment: step; }
.next-steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #050505; font: 800 .8rem "Inter", system-ui, sans-serif; }
.next-steps b { color: #fff; font-size: .95rem; }
.next-steps span { color: var(--muted); font-size: .85rem; }
.form-micro { grid-column: 1 / -1; margin: .3rem 0 0; color: #a9a9a9; font-size: .78rem; text-align: center; }

/* Homepage Money / Time / Status icons: bill waves like a flag and clock hands turn (both SMIL in index.html, centered on the SVG's own
   coordinates so the hands meet exactly in the middle in every browser), two sparkles
   glint together on the diamond's lines (app.js moves them to random spots each cycle). */
.svc-group-title .svc-group-icon svg { overflow: visible; }
.ico-spark { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; color: #fff; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgba(255,255,255,.6)); animation: icoSpark 2s ease-in-out infinite; }
.ico-spark-b { animation-delay: .3s; }
@keyframes icoSpark {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  25% { opacity: 1; transform: scale(1.05) rotate(30deg); }
  45% { opacity: 1; transform: scale(.9) rotate(50deg); }
  70% { opacity: 0; transform: scale(.2) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ico-spark { animation: none; }
}