/* ── Renqore theme tokens (dark / black) ── */
  :root{
    --bg:#0c0c0c;
    --panel:#111111;
    --fg:#e8e8e8;
    --grey-1:#1a1a1a;
    --grey-2:#2a2a2a;
    --grey-3:#555555;
    --grey-4:#999999;
    --red:#ff4444;
    --line:#242424;
    --line-soft:#1c1c1c;
    --display:'Bebas Neue', sans-serif;
    --serif:'Cormorant Garamond', Georgia, serif;   /* the "letter" italic */
    --body:'DM Sans', system-ui, sans-serif;
    --mono:'Departure Mono', ui-monospace, Menlo, monospace;
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--body);
    font-size:14px;
    line-height:1.6;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ── drifting grid background (Renqore ascii-bg) ── */
  .grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    color:#e8e8e8;opacity:.05;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 18px, currentColor 18px, currentColor 19px),
      repeating-linear-gradient(90deg, transparent, transparent 18px, currentColor 18px, currentColor 19px);
    background-size:19px 19px;
    -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 38%, #000 0%, transparent 72%);
    mask-image:radial-gradient(ellipse 65% 55% at 50% 38%, #000 0%, transparent 72%);
    animation:drift 22s ease-in-out infinite alternate;
  }
  @keyframes drift{
    0%{background-position:0 0,0 0}
    50%{background-position:38px 19px,-19px 38px}
    100%{background-position:19px 38px,38px 19px}
  }

  .wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:clamp(40px,7vw,96px) clamp(20px,5vw,48px) 80px}

  /* ── masthead ── */
  .masthead{text-align:center;padding-bottom:44px;border-bottom:1px solid var(--line)}
  .logo{width:clamp(64px,11vw,92px);height:auto;color:var(--fg);display:block;margin:0 auto 18px}
  .wordmark{
    font-family:var(--display);
    font-size:clamp(44px,10vw,84px);
    letter-spacing:.08em;
    line-height:.9;
    text-indent:.08em;
  }
  .kicker{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--grey-4);
    margin-top:16px;
  }
  .kicker b{color:var(--red);font-weight:400}

  /* ── sections ── */
  section{margin-top:56px}
  .eyebrow{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--grey-4);
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
  }
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
  .eyebrow span{color:var(--grey-3)}
  h2{
    font-family:var(--serif);
    font-style:italic;
    font-weight:600;
    font-size:clamp(30px,5.4vw,52px);
    line-height:1.05;
    letter-spacing:.005em;
    margin-bottom:20px;
    position:relative;
    display:inline-block;
    padding-bottom:10px;
  }
  h2::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .1s;
  }
  .visible h2::after{transform:scaleX(1)}

  p{margin-bottom:16px;color:var(--grey-4)}
  p.lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.9vw,28px);line-height:1.4;color:var(--fg);margin-bottom:18px}
  .hl{color:var(--fg);font-weight:600}
  a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--grey-3);transition:border-color .3s,color .3s}
  a:hover{color:var(--red);border-color:var(--red)}

  /* ── status chip ── */
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .chip{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--grey-4);border:1px solid var(--grey-2);padding:5px 9px;
  }
  .chip.hot{color:var(--red);border-color:rgba(255,68,68,.5)}

  /* ── built / not-built ── */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:8px;background:var(--line)}
  .col{background:var(--bg);padding:22px 20px}
  .col h3{
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    margin-bottom:16px;display:flex;align-items:center;gap:8px;
  }
  .col.done h3{color:#7ee787}
  .col.pending h3{color:var(--red)}
  ul.tick{list-style:none}
  ul.tick li{
    position:relative;padding:6px 0 6px 20px;font-size:13px;line-height:1.45;color:var(--grey-4);
    border-bottom:1px solid var(--line-soft);
  }
  ul.tick li:last-child{border-bottom:none}
  ul.tick li::before{position:absolute;left:0;top:6px;font-family:var(--mono);font-size:11px}
  .done ul.tick li::before{content:"+";color:#7ee787}
  .pending ul.tick li::before{content:"–";color:var(--red)}

  /* ── cost table ── */
  table{width:100%;border-collapse:collapse;margin-top:8px}
  th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);font-size:13px}
  th{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3);border-bottom:1px solid var(--grey-3)}
  td{color:var(--grey-4)}
  td:first-child{color:var(--fg)}
  td:last-child{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--fg)}
  tr.total td{border-top:1px solid var(--grey-3);border-bottom:none;padding-top:16px}
  tr.total td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3)}
  tr.total td:last-child{color:var(--fg)}

  /* ── included list ── */
  ul.incl{list-style:none;margin-top:8px;border-top:1px solid var(--line)}
  ul.incl li{display:flex;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--grey-4)}
  ul.incl li .n{font-family:var(--mono);font-size:10px;color:var(--grey-3);padding-top:3px;min-width:22px}
  ul.incl li .t{color:var(--fg)}

  /* ── quote ── */
  .quote{
    margin-top:8px;padding:26px 0 26px 26px;border-left:1px solid var(--red);
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(24px,4vw,40px);line-height:1.28;color:var(--fg);
  }
  .quote .caret{display:inline-block;width:2px;height:1em;margin-left:3px;transform:translateY(2px);background:var(--red);animation:blink 1s steps(1) infinite}
  .quote .caret.done{animation:none;opacity:0;transition:opacity .6s .4s}
  @keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

  /* ── price ── */
  .price-card{
    margin-top:10px;border:1px solid var(--grey-2);padding:44px 28px 34px;text-align:center;
    position:relative;transition:border-color .5s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  }
  .price-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(255,68,68,.35)}
  .price-card .amount{font-family:var(--display);font-size:clamp(72px,17vw,140px);line-height:.85;letter-spacing:.02em}
  .price-card .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-4);margin-top:18px}
  .price-card .mark{position:absolute;top:16px;left:16px;width:30px;height:30px;color:var(--grey-3)}
  p.enquiry{margin-top:22px}
  p.cta{margin-top:22px;margin-bottom:0}
  p.cta a{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--fg);border-bottom:1px solid var(--grey-3);
  }
  p.cta a:hover{color:var(--red);border-color:var(--red)}

  /* ── footer ── */
  footer{margin-top:64px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
  footer .mono{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-3)}

  /* ── reveal ── */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  .reveal.visible{opacity:1;transform:none}

  @media (max-width:640px){
    .split{grid-template-columns:1fr}
    th:nth-child(2),td:nth-child(2){display:none}
  }

  @media print{
    .grid-bg{display:none}
    body{background:#fff;color:#111}
    .reveal{opacity:1!important;transform:none!important}
    h2::after{transform:scaleX(1)}
    .quote .caret{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
    h2::after{transform:scaleX(1)}
  }