:root{
    --ink:#16213E;
    --ink-soft:#3B4664;
    --paper:#F5F6F1;
    --surface:#FFFFFF;
    --line:#DBDFDA;
    --accent:#FF6B47;
    --accent-ink:#FFFFFF;
    --gold:#E8A93B;
    --radius:14px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#F2F1EA;
      --ink-soft:#B9BFCE;
      --paper:#12141C;
      --surface:#1B1E29;
      --line:#2C3040;
      --accent:#FF7C57;
      --accent-ink:#12141C;
      --gold:#F0B94D;
    }
  }
  :root[data-theme="dark"]{
    --ink:#F2F1EA;
    --ink-soft:#B9BFCE;
    --paper:#12141C;
    --surface:#1B1E29;
    --line:#2C3040;
    --accent:#FF7C57;
    --accent-ink:#12141C;
    --gold:#F0B94D;
  }

  * { box-sizing: border-box; }
  html, body{ margin: 0; }
  [hidden]{ display: none !important; }
  body{
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
  }
  h1,h2,h3{
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
  }
  .mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; }
  p{ margin: 0; color: var(--ink-soft); }
  a{ color: inherit; }
  section{ padding: 64px 0; }
  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: 24px;
  }
  .eyebrow{
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }

  /* Header */
  header.site-header{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-row{
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .brand{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 19px;
  }
  .brand .pin{ width: 26px; height: 26px; flex: none; }
  nav.links{
    display: flex;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
  }
  nav.links a{ text-decoration: none; color: var(--ink-soft); }
  nav.links a:hover{ color: var(--ink); }
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn.ghost{
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }
  @media (max-width: 980px){
    nav.links{ display: none; }
  }
  /* Header must never push the page wider than the screen */
  html, body{ overflow-x: clip; }
  .brand{ min-width: 0; }
  .brand > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-row .btn{ flex: none; }
  .nav-row .btn .short{ display: none; }
  @media (max-width: 480px){
    .nav-row .btn .long{ display: none; }
    .nav-row .btn .short{ display: inline; }
  }

  /* Hero */
  .hero .wrap{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  @media (max-width: 800px){
    .hero .wrap{ grid-template-columns: 1fr; }
  }
  .hero h1{ font-size: clamp(32px, 5vw, 52px); margin-top: 14px; }
  .hero .sub{ margin-top: 18px; font-size: 17px; max-width: 46ch; }
  .hero .actions{ display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .hero .note{ margin-top: 14px; font-size: 13px; }
  .hero-art{
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin-inline: auto;
    display: block;
  }

  /* Trust strip */
  .trust{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }
  .trust .wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
  }
  @media (max-width: 640px){ .trust .wrap{ grid-template-columns: 1fr; gap: 20px; } }
  .trust .num{ font-family: "Fraunces", serif; font-size: 30px; font-weight: 600; }
  .trust .label{ font-size: 13px; margin-top: 4px; }

  /* How it works */
  .steps{
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
  }
  @media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
  .step{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px;
  }
  .step .idx{
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
  }
  .step h3{ font-size: 17px; margin-top: 10px; }
  .step p{ margin-top: 8px; font-size: 14px; }

  /* Pricing */
  .pricing-grid{
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  @media (max-width: 640px){ .pricing-grid{ grid-template-columns: 1fr; } }
  .price-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .price-card.featured{
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .price-card .tag{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .price-card h3{ font-size: 18px; margin-top: 2px; }
  .price-card .amount{
    font-family: "Fraunces", serif;
    font-size: 32px;
    font-weight: 600;
    margin-top: 4px;
  }
  .price-card .amount .cur{ font-size: 16px; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; color: var(--ink-soft); }
  .price-card .once{ font-size: 12px; color: var(--ink-soft); }
  .price-card ul{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
  .price-card li{ display: flex; gap: 8px; }
  .price-card li::before{ content: "✓"; color: var(--accent); font-weight: 600; flex: none; }
  .pricing-foot{
    margin-top: 18px;
    font-size: 13px;
  }

  /* CTA band */
  .cta-band{
    background: var(--ink);
    color: var(--paper);
    border-radius: 20px;
    padding: 44px 32px;
    margin-inline: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .cta-band h2{ color: var(--paper); font-size: 26px; max-width: 30ch; }
  .cta-band p{ color: color-mix(in srgb, var(--paper) 70%, transparent); margin-top: 8px; }

  /* FAQ */
  .faq-list{ margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
  details{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 20px;
  }
  details summary{
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    font-weight: 600;
    font-size: 15.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  details summary::-webkit-details-marker{ display: none; }
  details summary .chev{ flex: none; transition: transform 0.2s ease; color: var(--accent); }
  details[open] summary .chev{ transform: rotate(45deg); }
  details p{ padding-bottom: 18px; font-size: 14.5px; max-width: 64ch; }

  footer{
    border-top: 1px solid var(--line);
    padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px));
    margin-top: 40px;
  }
  footer .wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
  }
  footer .brand{ font-size: 16px; }
  footer .contact{ color: var(--ink-soft); }
  footer .contact div{ margin-top: 4px; }

  .placeholder{
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    border-radius: 4px;
    padding: 0 4px;
  }


  /* About */
  .about-grid{
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
  }
  @media (max-width: 800px){ .about-grid{ grid-template-columns: 1fr; gap: 28px; } }
  .about-copy{ display: flex; flex-direction: column; gap: 16px; font-size: 16px; max-width: 62ch; }
  .about-copy strong{ color: var(--ink); font-weight: 600; }
  .who{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
  }
  .who h3{ font-size: 17px; }
  .who ul{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .who li{
    font-size: 13.5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
  }
  .towns{ margin-top: 18px; font-size: 13.5px; }

  /* Contact */
  .contact-grid{
    margin-top: 32px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
    align-items: stretch;
  }
  @media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }
  .contact-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .contact-row .k{
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .contact-row .v{
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--ink);
    user-select: all;
    font-variant-numeric: tabular-nums;
  }
  .contact-card .actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
  .btn.wa{ background: #1FA855; color: #fff; }
  .btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
  .map-box{
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 300px;
    background: var(--surface);
  }
  .map-box iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .map-fallback{
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
    background:
      repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px),
      repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px),
      var(--paper);
  }
  .map-fallback svg{ width: 44px; height: 44px; }
  .map-open{
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    font-size: 13px; padding: 9px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }

  @media (max-width: 440px){
    .nav-row{ padding: 12px 16px; gap: 10px; }
    .brand{ font-size: 16px; gap: 8px; }
    .brand .pin{ width: 22px; height: 22px; }
    .nav-row .btn{ padding: 9px 14px; font-size: 13px; }
    .wrap{ padding-inline: 16px; }
    .cta-band{ margin-inline: 0; padding: 32px 22px; }
  }

  details{ transition: border-color .2s ease; }
  details[open]{ border-color: var(--accent); }
  details summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

  /* ---------- Blog ---------- */
  .post-grid{
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
  .post-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease;
  }
  .post-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
  .post-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
  .post-card .cover{ aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--paper); display: block; }
  .post-card .cover.blank{
    background:
      repeating-linear-gradient(0deg, transparent 0 23px, var(--line) 23px 24px),
      repeating-linear-gradient(90deg, transparent 0 23px, var(--line) 23px 24px),
      var(--paper);
  }
  .post-card .body{ padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .post-card .meta{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
  .post-card h3{ font-size: 19px; line-height: 1.3; }
  .post-card p{ font-size: 14px; }
  .post-card .more{ margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
  .all-link{ display: inline-block; margin-top: 24px; font-weight: 600; color: var(--accent); text-decoration: none; }
  .all-link:hover{ text-decoration: underline; }

  .page-head{ padding: 56px 0 8px; }
  .page-head h1{ font-size: clamp(30px, 4.6vw, 44px); margin-top: 10px; }
  .page-head .sub{ margin-top: 12px; font-size: 17px; max-width: 58ch; }
  .crumbs{ font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
  .crumbs a{ color: var(--ink-soft); }
  .empty{ margin-top: 28px; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); }

  .article{ max-width: 720px; margin: 0 auto; }
  .article header{ padding: 48px 0 8px; }
  .article h1{ font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin-top: 12px; }
  .article .lede{ margin-top: 16px; font-size: 18px; }
  .article .byline{ margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); font-family: "IBM Plex Mono", ui-monospace, monospace; }
  .article .hero-img{ margin-top: 28px; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
  .prose{ margin-top: 32px; font-size: 17px; line-height: 1.7; color: var(--ink); }
  .prose > * + *{ margin-top: 1.05em; }
  .prose p, .prose li{ color: var(--ink); }
  .prose h2{ font-size: 27px; margin-top: 1.8em; line-height: 1.25; }
  .prose h3{ font-size: 21px; margin-top: 1.5em; line-height: 1.3; }
  .prose h4{ font-size: 17px; margin-top: 1.4em; font-family: "IBM Plex Sans", sans-serif; }
  .prose a{ color: var(--accent); text-underline-offset: 3px; }
  .prose ul, .prose ol{ padding-left: 1.3em; }
  .prose li + li{ margin-top: .4em; }
  .prose blockquote{ margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--ink-soft); }
  .prose blockquote p{ color: var(--ink-soft); }
  .prose img{ border-radius: 10px; border: 1px solid var(--line); height: auto; }
  .prose code{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .9em; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
  .prose pre{ overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
  .prose pre code{ border: 0; padding: 0; background: none; }
  .prose hr{ border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
  .prose .table-wrap{ overflow-x: auto; }
  .prose table{ border-collapse: collapse; width: 100%; font-size: 15px; }
  .prose th, .prose td{ border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
  .prose th{ background: var(--surface); }

  .cta-box{
    margin-top: 48px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 18px;
    padding: 30px 28px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  }
  .cta-box h2{ color: var(--paper); font-size: 23px; }
  .cta-box p{ color: color-mix(in srgb, var(--paper) 72%, transparent); margin-top: 6px; }
  .preview-bar{
    position: sticky; top: 0; z-index: 30;
    background: var(--gold); color: #16213E; font-weight: 600; font-size: 13.5px;
    padding: 10px 16px; text-align: center;
  }

  /* ---------- Mobile menu ---------- */
  .nav-row{ position: relative; }
  details.mnav{ display: none; background: none; border: 0; border-radius: 0; padding: 0; }
  details.mnav[open]{ border-color: transparent; }
  details.mnav > summary{
    list-style: none; cursor: pointer; padding: 0;
    width: 42px; height: 42px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink); background: var(--surface);
  }
  details.mnav > summary::-webkit-details-marker{ display: none; }
  details.mnav > summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  details.mnav .i-close{ display: none; }
  details.mnav[open] .i-open{ display: none; }
  details.mnav[open] .i-close{ display: block; }
  .mnav-panel{
    position: absolute; right: 16px; top: calc(100% + 6px);
    min-width: 220px; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 33, 62, .16);
  }
  .mnav-panel a{ padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px; }
  .mnav-panel a:hover, .mnav-panel a:focus-visible{ background: var(--paper); outline: none; }
  @media (max-width: 980px){
    details.mnav{ display: block; }
    .nav-row{ gap: 10px; }
    .nav-row > .btn{ margin-left: auto; }
  }