/* JPAX Media. One visual world: a warm night. Single theme by design.
     Color roles: green = the system, amber = Julian, stone = everything else, purple = atmosphere (glow and haze only, never text or buttons). */
  :root {
    color-scheme: dark;
    --night: #0C0B0A;
    --night-2: #100E0C;
    --soil: #161310;
    --soil-2: #1B1915;
    --border: #2A2622;
    --border-2: #38332D;
    --paper: #ECE6DA;
    --stone: #A79E90;
    --dim: #857C6F; /* lifted from #6F675D so small text meets WCAG AA (4.5:1) on night */
    --green: #8BE8A6;
    --green-deep: #29392C;
    --amber: #D9A066;
    --violet: 138, 104, 214;
    --rule: rgba(236, 230, 218, 0.12);
    --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --gutter: max(20px, 4.7vw, calc((100vw - 1440px) / 2));
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { background: var(--night); scroll-behavior: smooth; }
  body { margin: 0; background: var(--night); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  p { margin: 0; text-wrap: pretty; }
  button { font: inherit; }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
  ::selection { background: var(--green); color: var(--night); }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  }

  /* ---------- Type ---------- */
  h1, h2, h3, .serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.05em; line-height: 1.04; margin: 0; text-wrap: balance; }
  h1 em, h2 em, h3 em { font-style: italic; }
  .eyebrow { display: flex; align-items: center; gap: 11px; color: var(--stone); text-transform: uppercase; font-size: 11px; font-weight: 500; letter-spacing: .17em; line-height: 1.5; }
  .eyebrow .line { width: 23px; height: 1px; background: var(--green); flex: none; }
  .eyebrow .dot { color: var(--dim); }
  .g { color: var(--green); }
  .a { color: var(--amber); }
  .muted { color: var(--stone); }
  .fine { color: var(--dim); font-size: 11px; line-height: 1.5; }

  /* ---------- Buttons & links ---------- */
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
  .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 56px; padding: 0 22px; border-radius: 3px; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s var(--ease); color: #102018; background: var(--green); }
  .button:hover { transform: translateY(-2px); background: #AAEFBC; }
  .button span { font-size: 20px; font-weight: 400; line-height: 1; }
  .text-link { font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 7px; transition: text-decoration-color .2s; }
  .text-link:hover { text-decoration-color: var(--green); }
  .text-link span { margin-left: 8px; color: var(--green); }

  /* ---------- Header ---------- */
  .progress { position: fixed; z-index: 70; top: 0; left: 0; width: 100%; height: 2px; background: var(--green); transform: scaleX(var(--sp, 0)); transform-origin: left; pointer-events: none; }
  .bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(to bottom, rgba(12,11,10,.92), rgba(12,11,10,.55) 70%, rgba(12,11,10,0)); }
  .bar-in { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 82px; padding-inline: var(--gutter); }
  .brand { font-size: 18px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
  .brand span { font-weight: 400; color: var(--stone); letter-spacing: -.01em; }
  .nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 50px); font-size: 13px; }
  .nav a { color: var(--stone); transition: color .2s; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
  .nav .cta { color: var(--paper); font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--green); }
  .nav .cta span { color: var(--green); padding-left: 12px; }
  .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: 3px; background: none; color: var(--paper); cursor: pointer; }
  .menu-btn i { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; }
  .menu { display: none; padding: 6px var(--gutter) 22px; background: rgba(12,11,10,.98); border-bottom: 1px solid var(--rule); }
  .menu a { display: block; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 17px; }
  .menu a.cta { color: var(--green); }
  .bar.open .menu { display: block; }

  /* ---------- Layout ---------- */
  .section { padding: clamp(96px, 10vw, 160px) var(--gutter); }
  .head { max-width: 1000px; display: grid; gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
  .head h2 { font-size: clamp(44px, 5.1vw, 77px); line-height: 1.08; }
  .head h2 em { color: var(--green); }
  .head > p { color: var(--stone); font-size: 17px; line-height: 1.65; max-width: 565px; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }

  /* Reveal on scroll where the browser supports scroll-driven animation; everything is visible otherwise */
  @keyframes rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
    }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; min-height: min(900px, 100svh); display: grid; grid-template-columns: minmax(0, 56%) minmax(0, 44%); overflow: hidden; border-bottom: 1px solid var(--border); }
  .hero-copy { position: relative; z-index: 2; align-self: center; padding: 150px 4vw 70px var(--gutter); display: grid; gap: 30px; }
  .hero h1 { font-size: clamp(56px, 6vw, 98px); line-height: 1.0; max-width: 860px; }
  .hero h1 em { color: var(--green); display: block; }
  .hero h1 .l { display: block; }
  .hero-intro { color: var(--stone); font-size: clamp(17px, 1.42vw, 20px); line-height: 1.7; max-width: 590px; }
  .hero-foot { display: flex; align-items: center; gap: 13px; margin-top: clamp(28px, 5vw, 70px); color: var(--dim); font-size: 12px; }
  .hero-foot i { width: 26px; height: 1px; background: var(--dim); }
  .hero-foot a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 5px; transition: text-decoration-color .2s; }
  .hero-foot a:hover { text-decoration-color: var(--green); }
  .hero-foot span { color: var(--green); }
  .hero-portrait { position: relative; margin: 0; min-height: 640px; overflow: hidden; background: #140F18; }
  .hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.04) translateY(var(--py, 0px)); transition: transform 1.2s var(--ease); }
  .hero-portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--night) 0%, rgba(12,11,10,.55) 14%, transparent 38%), linear-gradient(0deg, rgba(12,11,10,.9), transparent 34%), linear-gradient(180deg, rgba(12,11,10,.7), transparent 22%); }
  .hero-portrait::before, .julian-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(60% 50% at 96% 18%, rgba(var(--violet), .34), transparent 70%), radial-gradient(45% 40% at 88% 92%, rgba(var(--violet), .22), transparent 70%); }
  .hero-portrait figcaption { position: absolute; z-index: 2; left: clamp(28px, 4vw, 64px); bottom: 44px; display: grid; gap: 5px; }
  .hero-portrait figcaption span { color: var(--amber); font-size: 10px; letter-spacing: .19em; }
  .hero-portrait figcaption strong { font: 300 clamp(30px, 3vw, 44px)/1.05 var(--serif); letter-spacing: -.045em; }
  .hero-portrait figcaption small { color: #D2C6B7; font-size: 12px; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes enter { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
    .hero .enter { animation: enter 1.1s var(--ease) both; }
    .hero .d1 { animation-delay: .15s; } .hero .d2 { animation-delay: .35s; } .hero .d3 { animation-delay: .6s; } .hero .d4 { animation-delay: .8s; } .hero .d5 { animation-delay: 1s; }
    @keyframes unveil { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1.04); } }
    .hero-portrait img { animation: unveil 2.2s var(--ease) both; }
  }

  /* ---------- The gap / handoff explorer ---------- */
  .gap { background: var(--night-2); }
  .explorer { border: 1px solid var(--border-2); background: #181511; }
  .ex-head { padding: clamp(24px, 4vw, 44px); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
  .ex-head h3 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.1; margin-top: 16px; }
  .ex-head > span { color: var(--dim); font-size: 10px; letter-spacing: .13em; white-space: nowrap; }
  .ex-head > span b { color: var(--green); font-size: 20px; font-weight: 400; margin-left: 8px; }
  .ex-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--border-2); }
  .ex-tab { position: relative; min-height: 66px; border: 0; border-right: 1px solid var(--border-2); background: #1E1A16; color: var(--stone); text-align: left; cursor: pointer; padding: 15px clamp(14px, 2.4vw, 32px); font-size: 14px; transition: background .25s, color .25s; overflow: hidden; }
  .ex-tab:last-child { border-right: 0; }
  .ex-tab:hover { color: var(--paper); background: #28221D; }
  .ex-tab span { color: var(--dim); font-size: 10px; margin-right: 18px; }
  .ex-tab[aria-pressed="true"] { background: var(--green-deep); color: var(--paper); }
  .ex-tab[aria-pressed="true"] span { color: var(--green); }
  .ex-tab::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--green); }
  .ex-tab[aria-pressed="true"]::after { width: 100%; }
  .explorer.auto .ex-tab[aria-pressed="true"]::after { width: 0; animation: fillbar var(--cycle, 6s) linear forwards; }
  @keyframes fillbar { to { width: 100%; } }
  .ex-stage { display: grid; grid-template-columns: 1fr 110px 1fr; padding: clamp(24px, 4vw, 52px); min-height: 310px; }
  .ex-col { display: flex; flex-direction: column; align-items: flex-start; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .ex-stage.swap .ex-col { opacity: 0; transform: translateY(10px); }
  .ex-label { font-size: 10px; letter-spacing: .16em; color: var(--dim); display: flex; align-items: center; gap: 8px; }
  .ex-label i { width: 7px; height: 7px; border-radius: 50%; background: #E07A5F; }
  .ex-after .ex-label { color: var(--green); }
  .ex-after .ex-label i { background: var(--green); box-shadow: 0 0 10px rgba(139,232,166,.6); }
  .ex-col small { color: var(--stone); font-size: 11px; letter-spacing: .09em; margin-top: 28px; }
  .ex-col strong { font: 300 clamp(29px, 3.2vw, 46px)/1.1 var(--serif); letter-spacing: -.04em; margin-top: 12px; }
  .ex-before strong { color: #CFC7B9; }
  .ex-col p { color: var(--stone); font-size: 15px; line-height: 1.55; max-width: 320px; margin-top: 14px; }
  .ex-link { display: flex; align-items: center; justify-content: center; position: relative; }
  .ex-link::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(139,232,166,.1), var(--green)); }
  .ex-link b { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #181511; border: 1px solid var(--green); color: var(--green); font-weight: 400; }
  .ex-note { padding: 0 clamp(24px, 4vw, 52px) 24px; }

  /* ---------- Leak calculator ---------- */
  .calc { background: linear-gradient(180deg, var(--night-2), #12100D); border-top: 1px solid var(--border); }
  #calc { scroll-margin-top: 110px; }
  .calc-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); border: 1px solid var(--border-2); background: #15120F; }
  .calc-in { padding: clamp(26px, 4vw, 52px); display: grid; gap: 34px; border-right: 1px solid var(--border-2); }
  .slider { display: grid; gap: 12px; }
  .slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .slider label { font-size: 15px; color: #D8D1C4; }
  .slider output { font: 300 30px/1 var(--serif); letter-spacing: -.03em; color: var(--paper); font-variant-numeric: tabular-nums; }
  .slider .hint { color: var(--dim); font-size: 12px; }
  input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --fill: 50%; }
  input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--green) var(--fill), var(--border-2) var(--fill)); }
  input[type=range]::-moz-range-track { height: 2px; background: var(--border-2); }
  input[type=range]::-moz-range-progress { height: 2px; background: var(--green); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--night); border: 2px solid var(--green); box-shadow: 0 0 0 6px rgba(139,232,166,.08); }
  input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 2px solid var(--green); }
  .calc-out { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; background: radial-gradient(120% 90% at 100% 100%, rgba(139,232,166,.10), transparent 60%), #181511; }
  .calc-out .big { font: 300 clamp(58px, 7vw, 108px)/.95 var(--serif); letter-spacing: -.055em; color: var(--green); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(139,232,166,.18); }
  .calc-out .per { color: var(--stone); font-size: 15px; margin-top: 14px; }
  .calc-out .per b { color: var(--paper); font-weight: 500; font-variant-numeric: tabular-nums; }
  .calc-math { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); padding-top: 16px; }

  /* ---------- Journey: the road ---------- */
  .journey { position: relative; }
  .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 56% 30%; transform: scale(calc(1.02 + var(--p, 0) * .42)); will-change: transform; }
  .stage .veil { position: absolute; inset: 0; background: #282C30; mix-blend-mode: soft-light; opacity: calc(.9 - var(--p, 0) * .9); }
  .stage .fog { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.62) 44%, rgba(12,11,10,.1) 80%), linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 80%, var(--night) 100%); }
  .trail { position: absolute; left: calc(var(--gutter) * .45); top: 14%; bottom: 14%; width: 2px; background: var(--rule); }
  .trail i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, rgba(139,232,166,.15), var(--green)); box-shadow: 0 0 14px 1px rgba(139,232,166,.55); }
  .trail i::after { content: ""; position: absolute; bottom: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px 4px rgba(139,232,166,.7); }
  .stops { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
  .stops span { font-size: 10px; letter-spacing: .2em; color: rgba(236,230,218,.35); transition: color .4s; text-align: right; }
  .stops span.on { color: var(--green); }
  .panels { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 2; }
  .panel { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 14vh var(--gutter); }
  .panel-in { display: grid; gap: 22px; max-width: 620px; }
  .panel h2 { font-size: clamp(46px, 5.4vw, 84px); line-height: 1.02; }
  .panel h2 em { color: var(--green); }
  .panel p.lead { color: #D8D1C4; font-size: 17px; line-height: 1.65; }
  .stop-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--stone); }
  .stop-tag b { color: var(--green); font: 300 30px/1 var(--serif); letter-spacing: -.02em; text-transform: none; }
  .price { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .price strong { font: 300 38px/1 var(--serif); letter-spacing: -.04em; }
  .price span { color: var(--stone); font-size: 13px; }
  .list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
  .list li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 4px 20px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
  .list b { font-weight: 600; }
  .list span { color: var(--stone); }
  .score { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .score li { border-top: 2px solid var(--green); padding-top: 12px; display: grid; gap: 2px; font-size: 15px; }
  .score span { color: var(--stone); font-size: 13px; }

  /* Report card (audit example) */
  .report { background: rgba(27,25,21,.9); border: 1px solid #363229; padding: clamp(20px, 2.6vw, 34px); box-shadow: 0 32px 90px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
  .report-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--stone); font-size: 9px; letter-spacing: .13em; }
  .report-head span:last-child { color: var(--dim); }
  .report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 7rem; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .report-row b { text-align: right; font-weight: 500; }
  .dot { display: inline-flex; align-items: center; gap: 7px; font-style: normal; font-size: 12px; font-weight: 600; }
  .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .dot.leak { color: #E07A5F; } .dot.watch { color: #E3C06B; } .dot.good { color: var(--green); }
  .report-total { margin-top: 18px; padding: 20px; background: #222820; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
  .report-total span { color: var(--green); font-size: 9px; letter-spacing: .14em; }
  .report-total strong { font: 300 clamp(34px, 3.4vw, 50px)/1 var(--serif); letter-spacing: -.045em; color: var(--green); }

  /* ---------- System views ---------- */
  .views { background: var(--night-2); border-block: 1px solid var(--border); }
  .views-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .view { margin: 0; min-width: 0; }
  .view.wide { grid-column: 1 / -1; }
  .view button { display: block; width: 100%; padding: 0; border: 1px solid #38342E; background: var(--soil); overflow: hidden; cursor: zoom-in; }
  .view img { width: 100%; aspect-ratio: 1586 / 992; object-fit: cover; transition: transform .6s var(--ease); }
  .view button:hover img { transform: scale(1.02); }
  .view figcaption { display: grid; grid-template-columns: 145px minmax(0, 1fr); column-gap: 28px; padding-top: 22px; }
  .view figcaption span { color: var(--dim); font-size: 10px; letter-spacing: .15em; padding-top: 7px; }
  .view figcaption strong { font: 300 clamp(24px, 2.5vw, 38px)/1.1 var(--serif); letter-spacing: -.04em; }
  .view figcaption p { grid-column: 2; color: var(--stone); font-size: 14px; margin-top: 10px; }
  dialog.lightbox { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: 94vh; padding: 0; border: 1px solid #564D42; color: var(--paper); background: #11100E; box-shadow: 0 50px 130px rgba(0,0,0,.65); }
  dialog.lightbox::backdrop { background: rgba(4,4,4,.88); backdrop-filter: blur(8px); }
  .lb-img { max-height: calc(94vh - 80px); overflow: auto; }
  .lb-img img { width: 100%; }
  .lb-bar { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 12px; min-height: 76px; padding: 10px 22px; border-top: 1px solid var(--border); }
  .lb-count { color: var(--green); font-size: 10px; letter-spacing: .18em; }
  .lb-title { font: 300 clamp(19px, 2vw, 28px) var(--serif); letter-spacing: -.03em; }
  .lb-bar div { display: flex; gap: 8px; }
  .lb-bar button, .lb-close { width: 42px; height: 42px; border: 1px solid #595248; background: rgba(12,11,10,.7); color: var(--paper); font-size: 20px; cursor: pointer; border-radius: 3px; }
  .lb-bar button:hover, .lb-close:hover { border-color: var(--green); color: var(--green); }
  .lb-close { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 26px; line-height: 1; }


  /* ---------- Interactive owner view demo ---------- */
  .demo { position: relative; border: 1px solid #3A352E; border-radius: 8px; overflow: hidden; background: #110F0D; box-shadow: 0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(139,232,166,.04); font-variant-numeric: tabular-nums; margin-bottom: 44px; }
  .d-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #2E2A25; background: #15130F; font-size: 12px; }
  .d-brand { color: var(--stone); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .d-brand b { color: var(--paper); letter-spacing: .12em; font-weight: 600; }
  .d-tag { font-size: 9px; letter-spacing: .14em; color: var(--dim); border: 1px solid #38332D; padding: 3px 7px; border-radius: 3px; }
  .d-live { display: flex; align-items: center; gap: 8px; color: #CFE9D6; }
  .d-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(139,232,166,.14); }
  .d-live.alert { color: #F2C9B8; } .d-live.alert i { background: #E07A5F; box-shadow: 0 0 0 4px rgba(224,122,95,.18); }
  @media (prefers-reduced-motion: no-preference) { .d-live i { animation: blink 2s ease-in-out infinite; } @keyframes blink { 50% { opacity: .35; } } }
  .d-body { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 560px; }
  .d-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid #2E2A25; background: #13110E; }
  .d-side button { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 6px; background: none; color: var(--dim); cursor: pointer; transition: background .2s, color .2s; }
  .d-side button:hover { color: var(--paper); background: #1E1A16; }
  .d-side button[aria-pressed="true"] { color: #102018; background: var(--green); }
  .d-ic { font-size: 18px; line-height: 1; }
  .d-side em { font-style: normal; font-size: 10px; letter-spacing: .02em; }
  .d-main { padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 20px; align-content: start; min-width: 0; }
  .d-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
  .d-clock { color: var(--dim); font-size: 10px; letter-spacing: .16em; }
  .d-head h3 { font-size: clamp(24px, 2.4vw, 34px); margin-top: 6px; }
  .d-sim { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(139,232,166,.5); border-radius: 3px; background: rgba(139,232,166,.08); color: var(--green); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
  .d-sim:hover { background: rgba(139,232,166,.16); }
  .d-sim:disabled { opacity: .5; cursor: default; }
  .d-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .d-kpis div { padding: 14px 16px; border: 1px solid #2E2A25; border-radius: 6px; background: #16130F; display: grid; gap: 4px; }
  .d-kpis b { font: 300 30px/1 var(--serif); letter-spacing: -.03em; transition: color .4s; }
  .d-kpis b.bump { color: var(--green); }
  .d-kpis span { color: var(--dim); font-size: 11px; }
  .d-colhead { display: flex; justify-content: space-between; align-items: center; color: var(--stone); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 10px; }
  .d-colhead span { color: var(--dim); }
  .d-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: 14px; align-items: start; }
  .d-list, .d-sched, .d-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .d-card { width: 100%; text-align: left; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px; border: 1px solid transparent; border-radius: 6px; background: #EDE7DB; color: #26221C; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
  .d-card:hover { transform: translateY(-1px); }
  .d-card[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,232,166,.25); }
  .d-card .src { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #D9D1C1; font-size: 13px; }
  .d-card b { font-weight: 600; font-size: 14px; }
  .d-card small { color: #6B6358; font-size: 12px; grid-column: 2; }
  .d-card .st { grid-row: 1; grid-column: 3; font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 3px 7px; border-radius: 99px; background: #D9D1C1; color: #4A443B; white-space: nowrap; }
  .d-card .st.new { background: #26221C; color: var(--green); }
  .d-card .st.texted { background: #DCEBDD; color: #1F5E36; }
  .d-card .st.booked { background: #1F5E36; color: #EAF6EC; }
  .d-card .t { grid-column: 3; font-size: 11px; color: #8A8174; text-align: right; }
  .d-card.fresh { animation: fresh 1.8s var(--ease); }
  @keyframes fresh { 0% { transform: translateY(-14px); opacity: 0; box-shadow: 0 0 0 0 rgba(139,232,166,.8); } 30% { transform: none; opacity: 1; } 100% { box-shadow: 0 0 0 14px rgba(139,232,166,0); } }
  .d-detail { border: 1px solid #2E2A25; border-radius: 6px; background: #16130F; padding: 18px; min-height: 330px; display: flex; flex-direction: column; gap: 14px; }
  .d-detail h4 { margin: 0; font: 300 26px/1.1 var(--serif); letter-spacing: -.03em; }
  .d-detail .what { color: var(--stone); font-size: 14px; }
  .d-tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid #3A352E; display: grid; gap: 12px; }
  .d-tl li { position: relative; font-size: 13px; color: #CFC7B9; display: grid; gap: 2px; }
  .d-tl li::before { content: ""; position: absolute; left: -20.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #3A352E; }
  .d-tl li.sys::before { background: var(--green); box-shadow: 0 0 8px rgba(139,232,166,.6); }
  .d-tl li.cust::before { background: var(--amber); }
  .d-tl time { color: var(--dim); font-size: 10px; letter-spacing: .1em; }
  .d-tl li.new-line { animation: fresh 1.4s var(--ease); }
  .d-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  .d-btn { padding: 10px 14px; border-radius: 3px; border: 1px solid #3A352E; background: none; color: var(--paper); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
  .d-btn:hover { border-color: var(--green); }
  .d-btn.primary { background: var(--green); border-color: var(--green); color: #102018; }
  .d-btn.primary:hover { background: #AAEFBC; }
  .d-btn:disabled { opacity: .45; cursor: default; }
  .d-empty { color: var(--dim); font-size: 14px; margin: auto; text-align: center; }
  .d-sched li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid #2E2A25; border-radius: 6px; font-size: 13px; }
  .d-sched li span { color: var(--dim); font-size: 10px; letter-spacing: .1em; padding-top: 2px; }
  .d-sched li.fresh { border-color: var(--green); animation: fresh 1.6s var(--ease); }
  .d-rows li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border: 1px solid #2E2A25; border-radius: 6px; background: #16130F; font-size: 14px; }
  .d-rows li small { color: var(--dim); display: block; font-size: 12px; margin-top: 2px; }
  .d-pill { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; white-space: nowrap; justify-self: start; }
  .d-pill.ok { background: rgba(139,232,166,.14); color: var(--green); }
  .d-pill.saved { background: rgba(227,192,107,.14); color: #E3C06B; }
  .d-pill.bad { background: rgba(224,122,95,.14); color: #E07A5F; }
  .d-steps { display: flex; gap: 6px; align-items: center; }
  .d-steps span { font-size: 10px; padding: 4px 7px; border-radius: 3px; border: 1px solid #3A352E; color: var(--dim); }
  .d-steps span.done { background: rgba(139,232,166,.14); border-color: transparent; color: var(--green); }
  .d-steps span.now { border-color: var(--green); color: var(--paper); }
  .d-rows li.flash { animation: fresh 1.4s var(--ease); }
  .d-outcome { font-size: 13px; }
  .d-toasts { position: absolute; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 5; pointer-events: none; max-width: min(340px, calc(100% - 32px)); }
  .d-toast { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 6px; background: #1E1B17; border: 1px solid #3A352E; box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; color: #E3DCCF; animation: toastIn .35s var(--ease); }
  .d-toast i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--green); }
  .d-toast.warn i { background: #E07A5F; }
  .d-toast small { display: block; color: var(--dim); font-size: 11px; }
  .d-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (max-width: 1100px) { .d-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .d-week { grid-column: 1 / -1; } .d-sched { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
  @media (max-width: 760px) {
    .d-body { grid-template-columns: minmax(0, 1fr); }
    .d-side { flex-direction: row; border-right: 0; border-bottom: 1px solid #2E2A25; overflow-x: auto; }
    .d-side button { flex: 1; min-width: 70px; }
    .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-cols { grid-template-columns: minmax(0, 1fr); }
    .d-rows li { grid-template-columns: minmax(0, 1fr); }
    .d-top { flex-direction: column; align-items: flex-start; }
    .d-toasts { left: 12px; right: 12px; max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) { .d-card.fresh, .d-sched li.fresh, .d-tl li.new-line, .d-rows li.flash, .d-toast { animation: none; } }

  /* ---------- Southern Pavers system map ---------- */
  .proof { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: clamp(50px, 8vw, 125px); align-items: center; }
  .map { margin: 0; min-width: 0; }
  .map-art { padding: clamp(18px, 2.2vw, 32px); background: radial-gradient(circle at 11% 10%, #344137 0, #18221E 35%, #101714 76%); border: 1px solid #435347; box-shadow: 20px 20px 0 #171E19; }
  .map-top { display: flex; align-items: center; gap: 12px; padding-bottom: 26px; color: #CEDBC8; font-size: 9px; letter-spacing: .16em; white-space: nowrap; }
  .map-top > span:last-child { margin-left: auto; color: #8BA394; }
  .map-mark { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #8EA48E; border-radius: 50%; color: #F1E9D8; font: 600 13px var(--sans); letter-spacing: -.04em; }
  .map-panels { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .map-panel { min-width: 0; min-height: 380px; padding: clamp(16px, 2vw, 26px); display: flex; flex-direction: column; }
  .map-home { background: #E9E3D6; color: #242820; }
  .map-ops { background: #0C1820; color: #F0EADF; border: 1px solid #52625C; }
  .map-idx { color: #687467; font-size: 9px; font-weight: 600; letter-spacing: .13em; white-space: nowrap; }
  .map-ops .map-idx { color: #A4B8AD; }
  .map-panel > strong { display: block; margin: 22px 0 18px; font: 350 clamp(26px, 2.6vw, 40px)/1.04 var(--serif); letter-spacing: -.045em; }
  .map-art-svg { position: relative; margin-top: auto; border: 1px solid #AAA994; overflow: hidden; }
  .map-art-svg svg { display: block; width: 100%; height: auto; }
  .map-art-svg span { position: absolute; left: 0; bottom: 0; padding: 7px 10px; background: #F0EEE3; font-size: 8px; font-weight: 600; letter-spacing: .12em; }
  .map-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; }
  .map-foot span { padding: 5px 7px; border: 1px solid currentColor; color: #747C6F; font-size: 7px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
  .map-ops .map-foot span { color: #94C9A4; border-color: #4B6B58; }
  .map-list { margin-top: auto; border-top: 1px solid #31433F; }
  .map-list > div { display: grid; grid-template-columns: 22px 1fr 8px; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #31433F; }
  .map-list span { color: #8BA394; font-size: 9px; }
  .map-list b { font-size: 11px; font-weight: 500; }
  .map-list i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(139,232,166,.6); }
  .map-link { position: absolute; z-index: 2; top: 52%; left: 50%; width: 72px; height: 72px; display: grid; place-items: center; align-content: center; transform: translate(-50%, -50%); background: #D7A468; border: 5px solid #16231D; border-radius: 50%; color: #17231E; box-shadow: 0 5px 24px rgba(11,16,13,.4); }
  .map-link span { font-size: 6px; font-weight: 600; line-height: 1.1; letter-spacing: .08em; text-align: center; }
  .map-link b { font-size: 20px; line-height: 1; font-weight: 400; }
  .map-bottom { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 39px); padding-top: 24px; color: #CAD8CC; font-size: 9px; letter-spacing: .18em; }
  .map-bottom b { color: var(--green); font-weight: 400; font-size: 18px; line-height: 0; }
  .map figcaption { margin-top: 26px; }
  .screens { margin: 0; display: grid; gap: 14px; }
  .screens-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
  .scr { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #08121C; border: 1px solid rgba(236,230,218,.09); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
  .scr img { display: block; width: 100%; height: auto; }
  .scr-tall { grid-row: span 2; align-self: stretch; }
  .scr-tall img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 0; }
  @media (max-width: 760px) { .screens-grid { grid-template-columns: minmax(0, 1fr); } .scr-tall { grid-row: auto; } .scr-tall img { position: static; height: auto; } }
  /* ---------- Proof (home, compact) + case page ---------- */
  .proof-lite { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
  .proof-lite .ad-film { grid-row: auto; }
  .lite-stats { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--border); padding-top: 22px; }
  .lite-stats li { display: grid; gap: 6px; }
  .lite-stats b { font: 300 clamp(32px, 3vw, 46px)/1 var(--serif); letter-spacing: -.04em; }
  .lite-stats li:nth-child(2) b { color: var(--green); }
  .lite-stats span { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
  .proof-lite .actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
  .case-hero { padding-top: clamp(150px, 14vw, 200px); padding-bottom: 20px; display: grid; gap: 26px; }
  .case-hero h1 { font-size: clamp(54px, 6.4vw, 104px); line-height: 1; max-width: 14ch; }
  .case-hero h1 em { color: var(--green); display: block; }
  .case-hero .lead { color: var(--stone); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; max-width: 62ch; }
  @media (max-width: 760px) { .proof-lite { grid-template-columns: minmax(0, 1fr); } .proof-lite .ad-film { width: min(100%, 300px); justify-self: center; } .lite-stats { grid-template-columns: minmax(0, 1fr); } }
  .funnel { display: grid; gap: 0; }
  .sig { list-style: none; margin: 0; padding: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-bottom: 1px solid var(--border); }
  .sig li { display: grid; gap: 4px; }
  .sig b { font: 300 clamp(28px, 2.6vw, 38px)/1 var(--serif); letter-spacing: -.04em; }
  .sig span { color: var(--dim); font-size: 12px; }
  .funnel-k { color: var(--stone); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; margin: 22px 0 6px; }
  .fstep { padding: 12px 0; display: grid; gap: 10px; }
  .fl { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
  .fl span { flex: 1; }
  .fl b { font-weight: 500; min-width: 2.5ch; text-align: right; }
  .fl em { font-style: normal; color: #E07A5F; font-size: 12px; font-weight: 600; }
  .fstep i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) var(--w), #2A2622 var(--w)); }
  .fstep.drop i { background: linear-gradient(90deg, #E07A5F var(--w), #2A2622 var(--w)); }
  .case-system .report-total strong { color: var(--paper); }
  .case-system .report-total strong { white-space: nowrap; }
  .proof-copy > p.fine { font-size: 12px; color: var(--dim); }
  /* ---------- Campaigns page ---------- */
  .camp-hero { padding-top: clamp(140px, 13vw, 190px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: clamp(40px, 7vw, 110px); align-items: center; border-bottom: 1px solid var(--border); margin-bottom: clamp(96px, 10vw, 160px); padding-bottom: clamp(64px, 7vw, 100px); }
  .camp-copy { display: grid; gap: 28px; }
  .camp-hero h1 { font-size: clamp(52px, 6vw, 96px); line-height: 1; }
  .camp-hero h1 em { color: var(--green); display: block; }
  .camp-hero .intro { color: var(--stone); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; max-width: 58ch; }
  .camp-hero .actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
  .camp-hero .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--border); padding-top: 24px; }
  .camp-hero .facts div { display: grid; gap: 4px; }
  .camp-hero .facts strong { font: 300 clamp(20px, 1.8vw, 26px)/1.1 var(--serif); letter-spacing: -.03em; }
  .camp-hero .facts span { color: var(--dim); font-size: 12px; }
  .camp-hero .ad-film { grid-row: auto; }
  .camp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 0; }
  @media (max-width: 900px) { .camp-hero { grid-template-columns: minmax(0, 1fr); } .camp-hero > .ad-film { width: min(100%, 300px); justify-self: center; order: -1; } .camp-hero .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .film-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .film-pair .ad-film { grid-row: auto; align-self: start; align-content: start; overflow: visible; background: none; box-shadow: none; aspect-ratio: auto; display: grid; gap: 10px; }
  .film-pair .ad-film video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 10px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(236,230,218,.08); }
  .film-pair .ad-film:nth-child(2) { margin-top: 70px; }
  .film-pair .ad-film .play { bottom: 12px; left: 10px; right: 10px; font-size: 12px; padding: 9px 10px; }
  .film-pair figcaption { order: -1; color: var(--dim); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
  .camp-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
  .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .work-card { border: 1px solid var(--border); border-radius: 8px; background: #12100D; padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
  .work-card .k { color: var(--stone); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
  .work-card h3 { font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); letter-spacing: -.04em; margin: 0; }
  .work-card > p { color: var(--stone); margin: 0; }
  .work-card .lite-stats { margin: 4px 0 0; }
  .tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .tags li { font-size: 12px; padding: 6px 12px; border: 1px solid #3A352E; border-radius: 99px; color: #CFC7B9; }
  @media (max-width: 900px) { .camp-hero { grid-template-columns: minmax(0, 1fr); } .camp-hero .film-pair { width: min(100%, 460px); justify-self: center; order: -1; } .work-grid { grid-template-columns: minmax(0, 1fr); } }
  .proof-copy { display: grid; gap: 22px; }
  .proof-copy h2 { font-size: clamp(44px, 4.2vw, 70px); }
  .proof-copy h2 em { color: var(--green); }
  .proof-copy > p { color: var(--stone); font-size: 17px; line-height: 1.65; }
  @media (prefers-reduced-motion: no-preference) {
    .map-list i { animation: pulse 2.4s ease-in-out infinite; }
    .map-list > div:nth-child(2) i { animation-delay: .6s; } .map-list > div:nth-child(3) i { animation-delay: 1.2s; } .map-list > div:nth-child(4) i { animation-delay: 1.8s; }
    @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  }

  /* ---------- Julian ---------- */
  .julian { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); min-height: 780px; background: #15110E; border-block: 1px solid #32281F; }
  .julian-photo { position: relative; margin: 0; overflow: hidden; background: #17111C; min-height: 560px; }
  .julian-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
  .julian-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, #15110E 0%, rgba(21,17,14,.4) 16%, transparent 36%), linear-gradient(0deg, rgba(12,11,10,.7), transparent 30%); }
  .julian-photo::before { background: radial-gradient(60% 50% at 6% 16%, rgba(var(--violet), .32), transparent 70%), radial-gradient(45% 40% at 14% 90%, rgba(var(--violet), .2), transparent 70%); }
  .julian-photo figcaption { position: absolute; z-index: 2; bottom: 36px; left: clamp(24px, 4.7vw, 72px); color: #ECE2D5; font-size: 10px; letter-spacing: .17em; }
  .julian-photo figcaption span { color: var(--amber); padding-inline: 6px; }
  .julian-copy { padding: clamp(80px, 9vw, 140px) clamp(28px, 7vw, 120px); display: grid; gap: 28px; align-content: center; max-width: 820px; }
  .julian-copy .eyebrow { color: var(--amber); }
  .julian-copy .eyebrow .line { background: var(--amber); }
  .julian-copy h2 { font-size: clamp(48px, 5.2vw, 78px); line-height: 1.06; }
  .julian-copy h2 em { color: var(--amber); }
  .julian-copy .lead { color: var(--paper); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
  .julian-copy p { color: var(--stone); font-size: 16px; line-height: 1.7; max-width: 590px; }
  .note { border-left: 1px solid var(--amber); padding: 4px 0 4px 22px; display: grid; gap: 12px; }
  .note span { color: var(--amber); font-size: 10px; letter-spacing: .17em; }
  .note strong { font: 300 clamp(23px, 2.2vw, 32px)/1.3 var(--serif); letter-spacing: -.03em; }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .split div { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid var(--rule); }
  .split h3 { font: 600 14px/1.3 var(--sans); letter-spacing: 0; }
  .split .me h3 { color: var(--amber); } .split .ai h3 { color: var(--green); }
  .split p { font-size: 14px !important; }
  .julian-copy .text-link:hover { text-decoration-color: var(--amber); }
  .julian-copy .text-link span { color: var(--amber); }

  /* ---------- Closing ---------- */
  .close { position: relative; isolation: isolate; overflow: hidden; min-height: 860px; padding: clamp(110px, 11vw, 160px) var(--gutter) 70px; display: flex; flex-direction: column; justify-content: flex-end; gap: 30px; background: #15111C; }
  .close > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
  .close::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,.9) 0%, rgba(12,11,10,.6) 50%, rgba(12,11,10,.25) 100%), linear-gradient(0deg, rgba(12,11,10,.9), transparent 45%), linear-gradient(180deg, var(--night), transparent 25%); }
  .close h2 { font-size: clamp(76px, 10vw, 150px); line-height: .88; }
  .close h2 em { color: var(--green); display: block; text-shadow: 0 0 40px rgba(139,232,166,.25); }
  .close > p { color: #D1C7C8; font-size: 18px; line-height: 1.65; max-width: 560px; }
  .terms { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 40px; color: #B8ACAE; font-size: 12px; }
  .terms span + span::before { content: "·"; padding-right: 26px; color: var(--green); }

  /* ---------- Inner pages ---------- */
  .page-hero { position: relative; overflow: hidden; padding: clamp(150px, 17vw, 210px) var(--gutter) clamp(64px, 8vw, 100px); border-bottom: 1px solid var(--border); }
  .page-hero .bg { position: absolute; inset: 0; z-index: -1; }
  .page-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
  .page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,.95) 0%, rgba(12,11,10,.78) 38%, rgba(12,11,10,.18) 72%, rgba(12,11,10,.06) 100%), linear-gradient(180deg, rgba(12,11,10,.45) 0%, transparent 30%, transparent 70%, var(--night) 100%); }
  .page-hero { isolation: isolate; }
  .page-hero .in { display: grid; gap: 26px; max-width: 900px; }
  .page-hero h1 { font-size: clamp(56px, 6.4vw, 104px); line-height: 1; }
  .page-hero h1 em { color: var(--green); }
  .page-hero .intro { color: #D8D1C4; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; max-width: 600px; }
  .facts { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: 10px; }
  .facts div { display: grid; gap: 4px; }
  .facts strong { font: 300 clamp(28px, 2.6vw, 40px)/1 var(--serif); letter-spacing: -.04em; }
  .facts span { color: var(--stone); font-size: 13px; }
  .measure { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 6vw, 90px); }
  .measure li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-top: 1px solid var(--rule); }
  .measure li > span { grid-row: span 2; color: var(--dim); font: 300 22px/1.2 var(--serif); }
  .measure b { font-weight: 600; }
  .measure p { color: var(--stone); font-size: 15px; }
  .measure li.rollup b { color: var(--green); }
  .timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; }
  .timeline::before { content: ""; position: absolute; left: 5px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, rgba(139,232,166,.2), var(--green)); box-shadow: 0 0 10px rgba(139,232,166,.35); }
  .timeline li { position: relative; padding: 16px 0 16px 38px; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 22px; }
  .timeline li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--green); }
  .timeline li:last-child::before { background: var(--green); box-shadow: 0 0 14px 2px rgba(139,232,166,.6); }
  .timeline .when { font-weight: 600; }
  .timeline .what { color: #CFC7B9; }
  .timeline .what b { color: var(--paper); font-weight: 600; }
  .faq { border-top: 1px solid var(--rule); }
  .faq details { border-bottom: 1px solid var(--rule); }
  .faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 300 clamp(21px, 1.9vw, 27px)/1.25 var(--serif); letter-spacing: -.03em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--green); font: 400 24px var(--sans); transition: transform .25s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { color: var(--stone); padding-bottom: 24px; max-width: 560px; }
  .book { background: linear-gradient(180deg, var(--night), var(--soil)); border-top: 1px solid var(--border); scroll-margin-top: 70px; }
  .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .field { display: grid; gap: 8px; align-content: start; }
  .field.full { grid-column: 1 / -1; }
  .field label { font-size: 14px; color: #D8D1C4; font-weight: 500; }
  .field label small { color: var(--dim); font-weight: 400; }
  .field input, .field select, .field textarea { width: 100%; background: var(--night); color: var(--paper); border: 1px solid var(--border-2); border-radius: 3px; padding: 14px; font: 400 16px var(--sans); color-scheme: dark; }
  .field textarea { min-height: 110px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(139,232,166,.14); }
  .form .actions { grid-column: 1 / -1; }
  .done { display: grid; gap: 12px; padding: 30px; border: 1px solid var(--border-2); background: var(--night); }
  .done h3 { font-size: clamp(32px, 3vw, 44px); }
  .done h3 em { color: var(--green); }
  .next { border-left: 1px solid var(--amber); padding: 4px 0 4px 22px; display: grid; gap: 14px; }
  .next > span { color: var(--amber); font-size: 10px; letter-spacing: .17em; }
  .next ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #D8D1C4; }
  .placeholder { display: grid; place-items: center; text-align: center; padding: 28px; border: 1px dashed rgba(236,230,218,.28); color: var(--stone); background: repeating-linear-gradient(135deg, rgba(236,230,218,.025) 0 12px, transparent 12px 24px); font-size: 15px; min-height: 220px; }
  .placeholder b { display: block; color: var(--paper); font-weight: 500; margin-bottom: 4px; }
  .rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 6vw, 90px); }
  .rules li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--rule); }
  .rules b { font: 300 clamp(22px, 2vw, 30px)/1.15 var(--serif); letter-spacing: -.03em; }
  .rules span { color: var(--stone); font-size: 15px; }
  /* ---------- Standalone ads (secondary offer) ---------- */
  .aside-offer { padding: clamp(56px, 6vw, 90px) var(--gutter); }
  .aside-in { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px 56px; align-items: end; padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(120deg, rgba(139,232,166,.05), transparent 55%), #12100D; }
  .aside-in .eyebrow { margin-bottom: 14px; }
  .aside-in h3 { font: 300 clamp(30px, 3vw, 46px)/1.05 var(--serif); letter-spacing: -.045em; margin: 0 0 14px; }
  .aside-in h3 em { color: var(--green); }
  .aside-in p { color: var(--stone); max-width: 60ch; margin: 0; }
  .aside-side { display: grid; gap: 8px; justify-items: start; }
  .aside-side strong { font: 300 clamp(34px, 3.2vw, 48px)/1 var(--serif); letter-spacing: -.04em; }
  .aside-side span { color: var(--dim); font-size: 13px; }
  .aside-side .text-link { margin-top: 10px; }
  .ad-film { grid-row: span 2; margin: 0; position: relative; align-self: stretch; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(236,230,218,.08); }
  .ad-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ad-film .play { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border: 0; border-radius: 99px; background: rgba(12,11,10,.72); backdrop-filter: blur(8px); color: var(--paper); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
  .ad-film .play:hover { background: rgba(12,11,10,.9); }
  .ad-film .play i { width: 0; height: 0; border-left: 9px solid var(--green); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .ad-film.full .play { display: none; }
  .aside-in .ads-proof { grid-column: 2 / -1; }
  @media (max-width: 1000px) { .aside-in { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); } .aside-side { grid-column: 2; } .ad-film { grid-row: span 3; } }
  @media (max-width: 1000px) and (min-width: 761px) { .aside-in .ads-proof { grid-column: 1 / -1; } }
  @media (max-width: 760px) { .aside-in { grid-template-columns: minmax(0, 1fr); } .aside-side, .aside-in .ads-proof { grid-column: auto; } .ad-film { grid-row: auto; width: min(100%, 300px); justify-self: center; } }
  .ads-proof { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 26px; display: grid; gap: 18px; }
  .ads-proof > p.k { color: var(--stone); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
  .ads-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .ads-proof li { display: grid; gap: 6px; }
  .ads-proof b { font: 300 clamp(30px, 2.8vw, 42px)/1 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .ads-proof li:nth-child(3) b { color: var(--green); }
  .ads-proof span { color: var(--dim); font-size: 12px; }
  .ads-proof .fine { color: var(--dim); font-size: 11px; line-height: 1.6; max-width: 90ch; }
  @media (max-width: 760px) { .ads-proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cta-band { padding: clamp(80px, 9vw, 130px) var(--gutter); border-top: 1px solid var(--border); display: grid; gap: 28px; }
  .cta-band h2 { font-size: clamp(44px, 5vw, 76px); max-width: 16ch; }
  .cta-band h2 em { color: var(--green); }


  /* ---------- Responsive ---------- */
  @media (max-width: 1060px) {
    .proof, .two { grid-template-columns: minmax(0, 1fr); }
    .calc-box { grid-template-columns: minmax(0, 1fr); }
    .calc-in { border-right: 0; border-bottom: 1px solid var(--border-2); }
  }
  @media (max-width: 900px) {
    .nav { display: none; }
    .menu-btn { display: block; }
    .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .hero-portrait { order: -1; min-height: 0; aspect-ratio: 4 / 4.2; }
    .hero-portrait::after { background: linear-gradient(0deg, var(--night) 0%, rgba(12,11,10,.5) 22%, transparent 45%), linear-gradient(180deg, rgba(12,11,10,.75), transparent 24%); }
    .hero-copy { padding: 10px var(--gutter) 70px; }
    .julian { grid-template-columns: minmax(0, 1fr); }
    .julian-photo { min-height: 0; aspect-ratio: 4 / 4.4; }
    .julian-photo::after { background: linear-gradient(0deg, #15110E 0%, rgba(21,17,14,.4) 20%, transparent 42%); }
    .views-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .view.wide { grid-column: auto; }
    .view figcaption { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .view figcaption p { grid-column: 1; margin-top: 0; }
    .stage .fog { background: linear-gradient(180deg, var(--night) 0%, rgba(12,11,10,.5) 20%, rgba(12,11,10,.7) 60%, var(--night) 100%); }
    .stops { display: none; }
    .trail { left: 8px; }
    .ex-stage { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .ex-link { height: 40px; }
    .ex-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(139,232,166,.1), var(--green)); }
    .ex-link b { transform: rotate(90deg); }
    .ex-head > span { display: none; }
    .measure, .rules { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 600px) {
    .ex-tabs { grid-template-columns: minmax(0, 1fr); }
    .ex-tab { border-right: 0; border-bottom: 1px solid var(--border-2); min-height: 54px; }
    .list li { grid-template-columns: minmax(0, 1fr); }
    .score { grid-template-columns: minmax(0, 1fr); }
    .split { grid-template-columns: minmax(0, 1fr); }
    .form { grid-template-columns: minmax(0, 1fr); }
    .timeline li { grid-template-columns: minmax(0, 1fr); }
    .report-row { grid-template-columns: minmax(0, 1fr) auto; }
    .report-row > span:first-child { grid-column: 1 / -1; }
    .map-top { font-size: 7px; gap: 8px; }
    .map-top > span:last-child { display: none; }
    .map-panels { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .map-panel { min-height: 0; }
    .map-link { position: relative; top: auto; left: auto; transform: none; width: 60px; height: 60px; margin: -10px auto; }
    .close { min-height: 720px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stage img { transform: scale(1.12); }
    .stage .veil { opacity: .3; }
    .ex-col, .button, .view img { transition: none; }
  }

  /* ---------- Footer ---------- */
  .site-foot { position: relative; padding: clamp(72px, 8vw, 112px) var(--gutter) 36px; border-top: 1px solid var(--border); background: radial-gradient(70% 120% at 0% 0%, rgba(217,160,102,.045), transparent 60%), var(--night); color: var(--stone); font-size: 14px; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 80px); padding-bottom: clamp(56px, 6vw, 84px); }
  .foot-home { display: inline-flex; align-items: center; gap: 18px; }
  .foot-home img { width: 74px; height: auto; transition: opacity .2s; }
  .foot-home:hover img { opacity: .85; }
  .foot-home .brand { font-size: 18px; color: var(--paper); }
  .foot-brand { display: grid; gap: 26px; align-content: start; }
  .foot-brand p { font: 300 clamp(20px, 1.7vw, 25px)/1.35 var(--serif); letter-spacing: -.02em; color: #CFC7B9; }
  @media (min-width: 601px) { .foot-brand p span { white-space: nowrap; } }
  .foot-col { display: grid; gap: 12px; align-content: start; }
  .foot-label { color: var(--dim); font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .foot-col > a:not(.text-link) { color: var(--stone); width: fit-content; transition: color .2s; }
  .foot-col > a:not(.text-link):hover { color: var(--paper); }
  .foot-col > span:not(.fine) { color: var(--dim); }
  .foot-start .text-link { width: fit-content; color: var(--paper); font-size: 14px; }
  .foot-bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding-top: 26px; border-top: 1px solid var(--rule); color: var(--dim); font-size: 12px; }
  .foot-bottom a { transition: color .2s; }
  .foot-bottom a:hover { color: var(--paper); }
  .foot-bottom em { margin-left: auto; font: italic 300 17px/1 var(--serif); letter-spacing: -.01em; color: var(--stone); }
  @media (max-width: 1240px) {
    .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
    .foot-start { grid-column: 1 / -1; }
    .foot-bottom em { margin-left: 0; flex-basis: 100%; order: -1; margin-bottom: 6px; }
  }

  /* ---------- Additions for the multi-page build ---------- */
  .journey { scroll-margin-top: 0; }
  .form-error { grid-column: 1 / -1; color: #F2C9B8; font-size: 14px; }
  .form-error a { text-decoration: underline; text-underline-offset: 4px; }
  .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
  .jupiter-home { border-top: 1px solid var(--border); }
  .jupiter-home .two { align-items: center; }
  .jupiter-home .head { margin-bottom: 0; }
  .nova .report-total strong { white-space: nowrap; }
  .jupiter-hero { min-height: min(100svh, 980px); display: flex; align-items: center; }
  .jupiter-hero .bg img { object-position: 100% 78%; }
  @media (max-width: 760px) { .jupiter-hero .bg img { object-position: 70% 100%; } }
  .demo-note { margin-top: 0; }
  .prose { max-width: 720px; display: grid; gap: 18px; color: var(--stone); font-size: 16px; line-height: 1.7; }
  .prose h2 { font-size: clamp(28px, 2.6vw, 38px); color: var(--paper); margin-top: 26px; }
  .prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
  .prose b { color: var(--paper); font-weight: 600; }
  .prose a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 5px; }
  .prose a:hover { text-decoration-color: var(--green); }
  .skip { position: fixed; z-index: 80; top: 10px; left: 10px; padding: 12px 16px; border-radius: 3px; background: var(--green); color: #102018; font-size: 13px; font-weight: 600; transform: translateY(-160%); }
  .skip:focus { transform: none; }
  .aside-in h2 { font: 300 clamp(30px, 3vw, 46px)/1.05 var(--serif); letter-spacing: -.045em; margin: 0 0 14px; }
  .aside-in h2 em { color: var(--green); }
  main:focus { outline: none; }