:root{
    --cream:#f6f0ea;
    --paper:#f9f9f9;
    --ink:#1c1c1c;
    --rust:#ab5907;
    --rust-deep:#7c4105;

    --bg:var(--cream);
    --surface:var(--paper);
    --surface-alt:#e9e3de;
    --text:var(--ink);
    --text-soft: rgba(28,28,28,.66);
    --text-faint: rgba(28,28,28,.4);
    --accent:var(--rust);
    --accent-deep:var(--rust-deep);
    --accent-tint:#ebd9c8;
    --accent-tint-strong:#e0c6a6;
    --border:rgba(28,28,28,.14);
    --border-strong:rgba(28,28,28,.24);
    --shadow:rgba(28,28,28,.10);
    --tape-well:#e3dacd;
    --logo-img:url("../assets/logo.png");
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#17140f;
      --surface:#201a13;
      --surface-alt:#271f16;
      --text:#f6f0ea;
      --text-soft:rgba(246,240,234,.72);
      --text-faint:rgba(246,240,234,.46);
      --accent:#d98a3d;
      --accent-deep:#f0aa61;
      --accent-tint:rgba(171,89,7,.24);
      --accent-tint-strong:rgba(171,89,7,.36);
      --border:rgba(246,240,234,.16);
      --border-strong:rgba(246,240,234,.26);
      --shadow:rgba(0,0,0,.5);
      --tape-well:#2b2318;
    }
  }
  :root[data-theme="dark"]{
    --bg:#17140f;
    --surface:#201a13;
    --surface-alt:#271f16;
    --text:#f6f0ea;
    --text-soft:rgba(246,240,234,.72);
    --text-faint:rgba(246,240,234,.46);
    --accent:#d98a3d;
    --accent-deep:#f0aa61;
    --accent-tint:rgba(171,89,7,.24);
    --accent-tint-strong:rgba(171,89,7,.36);
    --border:rgba(246,240,234,.16);
    --border-strong:rgba(246,240,234,.26);
    --shadow:rgba(0,0,0,.5);
    --tape-well:#2b2318;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  img{max-width:100%;display:block;}

  ::selection{background:var(--accent); color:var(--paper);}

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  h1,h2,h3,h4{
    font-family:"Fraunces",Georgia,"Times New Roman",serif;
    font-weight:600;
    margin:0;
    text-wrap:balance;
    color:var(--text);
  }
  h1 em, h2 em, h3 em{font-style:italic; font-weight:500; color:var(--accent);}

  p{margin:0;}

  .eyebrow{
    font-family:"Space Mono",monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:.55em;
  }
  .rec-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-tint);
    animation:pulse 1.8s ease-in-out infinite;
    flex:none;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  .btn{
    font-family:"Karla",sans-serif;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.01em;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    padding:.85em 1.6em;
    border-radius:3px;
    border:1.5px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--accent); color:var(--paper); border-color:var(--accent);}
  .btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:0 6px 18px -6px var(--shadow);}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
  .btn-block{width:100%; justify-content:center;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    border-bottom:1px solid var(--border);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:14px 0;
  }
  .logo-chip{
    display:inline-flex; align-items:center;
    background:#f6f0ea;
    border-radius:6px;
    padding:8px 14px 6px;
    box-shadow:0 1px 0 var(--shadow);
    flex:none;
  }
  .logo-mark{
    width:150px; height:67.5px;
    background-image:var(--logo-img);
    background-size:contain; background-repeat:no-repeat; background-position:center;
  }
  nav.primary-nav{display:flex; align-items:center; gap:28px;}
  nav.primary-nav a{
    font-size:.92rem; font-weight:600; text-decoration:none; color:var(--text-soft);
    position:relative; padding:4px 0;
  }
  nav.primary-nav a:hover{color:var(--text);}
  nav.primary-nav a.nav-cta{
    color:var(--paper); background:var(--accent); padding:.6em 1.2em; border-radius:3px;
  }
  nav.primary-nav a.nav-cta:hover{background:var(--accent-deep);}
  .nav-links{display:flex; align-items:center; gap:26px;}
  .menu-toggle{display:none; background:none; border:1.5px solid var(--border-strong); border-radius:4px; padding:.5em .7em; cursor:pointer; color:var(--text);}
  .menu-toggle svg{display:block;}

  .insta-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; flex:none;
    color:var(--text-soft);
    transition:color .15s ease;
  }
  .insta-btn:hover{color:var(--accent);}
  .insta-btn svg{display:block;}
  .header-actions{display:flex; align-items:center; gap:14px;}
  .insta-btn-mobile{display:none;}

  @media (max-width:860px){
    .nav-links{
      position:absolute; top:calc(100% + 10px); left:20px; right:20px;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--surface); border:1px solid var(--border); border-radius:8px;
      box-shadow:0 16px 34px -14px var(--shadow);
      max-height:0; overflow:hidden; transition:max-height .25s ease;
    }
    .nav-links.open{max-height:440px;}
    .nav-links a{padding:16px 24px; border-top:1px solid var(--border);}
    .nav-links a:first-child{border-top:none;}
    .nav-links a.nav-cta{margin:16px 24px; text-align:center; border-radius:3px;}
    .nav-links .insta-btn-desktop{display:none;}
    .menu-toggle{display:inline-flex; margin-right:-2px;}
    .insta-btn-mobile{display:inline-flex;}
  }

  /* ---------- Section scaffolding ---------- */
  section{padding:96px 0;}
  section.tight{padding:64px 0;}
  .section-alt{background:var(--surface-alt);}
  .section-head{max-width:640px; margin:0 0 52px;}
  .section-head .eyebrow{margin-bottom:16px;}
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.15;}
  .section-head p{margin-top:16px; color:var(--text-soft); font-size:1.05rem;}
  .center{text-align:center; margin-left:auto; margin-right:auto;}

  hr.sprocket{
    border:none; height:14px; margin:0;
    background-image:radial-gradient(circle, var(--border-strong) 2px, transparent 2.4px);
    background-size:22px 14px; background-repeat:repeat-x; background-position:center;
    opacity:.7;
  }

  /* ---------- Hero ---------- */
  .hero{padding:72px 0 90px; position:relative; overflow:hidden;}
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(28,28,28,.035) 0px, rgba(28,28,28,.035) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
    opacity:.5;
  }
  :root:not([data-theme="light"]) .hero::before{ opacity:.25; }
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  }
  .hero h1{font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.08; margin-top:18px;}
  .hero-sub{margin-top:22px; font-size:1.12rem; color:var(--text-soft); max-width:52ch;}
  .hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

  .viewfinder{
    position:relative;
    aspect-ratio:4/5;
    background:
      radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
      linear-gradient(160deg, var(--surface-alt), var(--tape-well));
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 30px 60px -30px var(--shadow);
  }
  .viewfinder::after{
    content:"";
    position:absolute; inset:0;
    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)' opacity='0.35'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    opacity:.5;
    pointer-events:none;
  }
  .vf-corner{position:absolute; width:26px; height:26px; border-color:var(--accent); opacity:.85;}
  .vf-corner.tl{top:18px; left:18px; border-top:2px solid; border-left:2px solid;}
  .vf-corner.tr{top:18px; right:18px; border-top:2px solid; border-right:2px solid;}
  .vf-corner.bl{bottom:18px; left:18px; border-bottom:2px solid; border-left:2px solid;}
  .vf-corner.br{bottom:18px; right:18px; border-bottom:2px solid; border-right:2px solid;}
  .vf-osd{
    position:absolute; z-index:2;
    font-family:"Space Mono",monospace;
    font-size:.72rem; letter-spacing:.04em;
    color:var(--paper);
    text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  .vf-osd.top-left{top:20px; left:52px;}
  .vf-osd.top-right{top:20px; right:52px; text-align:right;}
  .vf-rec{display:flex; align-items:center; gap:6px;}
  .vf-rec .dot{width:7px; height:7px; border-radius:50%; background:#e0453a; animation:pulse 1.4s ease-in-out infinite;}
  .vf-mark{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .vf-mark .logo-mark{width:64%; height:auto; aspect-ratio:1146/517; opacity:.94; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));}

  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr;}
    .viewfinder{max-width:420px; margin:0 auto;}
  }

  /* ---------- Stat chips (What we do) ---------- */
  .what-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start;}
  .what-copy p + p{margin-top:16px;}
  .what-copy p{color:var(--text-soft); font-size:1.04rem;}
  .stat-stack{display:flex; flex-direction:column; gap:14px;}
  .stat-chip{
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:4px;
    padding:22px;
    min-height:80px;
    display:flex; align-items:center; gap:16px;
  }
  .stat-chip .num{
    font-family:"Fraunces",serif; font-style:italic; font-weight:600; font-size:1.5rem; color:var(--accent);
    flex:none; width:5.2rem;
  }
  .stat-chip .lbl{font-size:.98rem; color:var(--text-soft);}
  @media (max-width:860px){ .what-grid{grid-template-columns:1fr;} }

  /* ---------- How it works ---------- */
  .timeline{position:relative; max-width:820px;}
  .timeline::before{
    content:""; position:absolute; left:64px; top:10px; bottom:10px; width:1px;
    background:repeating-linear-gradient(0deg, var(--border-strong) 0 6px, transparent 6px 12px);
  }
  @media (max-width:640px){ .timeline::before{left:44px;} }
  .step{display:grid; grid-template-columns:64px 1fr; gap:28px; position:relative; padding:22px 0;}
  @media (max-width:640px){ .step{grid-template-columns:44px 1fr; gap:18px;} }
  .step-num{
    width:40px; height:40px; border-radius:50%;
    border:1.5px solid var(--accent);
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-family:"Fraunces",serif; font-style:italic; font-weight:600; font-size:1.1rem;
    color:var(--accent);
    justify-self:center;
    z-index:1;
  }
  @media (max-width:640px){ .step-num{width:32px; height:32px; font-size:.95rem;} }
  .step h3{font-size:1.16rem; margin-bottom:6px;}
  .step p{color:var(--text-soft); font-size:.99rem; max-width:56ch;}

  /* ---------- Cassette / comparison cards ---------- */
  .cassette-row{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  @media (max-width:820px){ .cassette-row{grid-template-columns:1fr;} }
  .cassette{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:30px 30px 28px;
  }
  .cassette.featured{border-color:var(--accent); box-shadow:0 18px 40px -24px var(--shadow);}
  .cassette-label{
    display:flex; justify-content:flex-end; align-items:center; margin-bottom:18px; min-height:24px;
  }
  .cassette-label .plain{
    font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-faint);
  }
  .tag{
    font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    background:var(--accent-tint); color:var(--accent-deep); padding:.35em .7em; border-radius:3px;
  }
  .cassette h3{font-size:1.5rem; margin-bottom:12px;}
  .cassette .reel-row{display:flex; gap:10px; margin-bottom:16px;}
  .reel{
    width:26px; height:26px; border-radius:50%; border:2px solid var(--border-strong);
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    color:var(--text-faint);
  }
  .reel svg{display:block;}
  .cassette p{color:var(--text-soft); font-size:.99rem;}
  .cassette p + p{margin-top:10px;}

  /* ---------- Extra days ---------- */
  .bside{
    max-width:760px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:48px;
  }
  @media (max-width:640px){ .bside{padding:32px;} }
  .bside h3{font-size:1.5rem; margin-bottom:14px; max-width:26ch;}
  .bside p{color:var(--text-soft); font-size:1.02rem;}
  .bside p + p{margin-top:12px;}
  .bside ul{margin:16px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
  .bside li{display:flex; gap:10px; font-size:.98rem; color:var(--text);}
  .bside li::before{content:"\2022"; color:var(--accent); flex:none;}

  /* ---------- Packages ---------- */
  .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:980px){ .pkg-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto;} }
  .pkg-card{
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:32px 28px; display:flex; flex-direction:column; gap:18px; position:relative;
  }
  .pkg-card.reco{border-color:var(--accent); box-shadow:0 22px 48px -28px var(--shadow);}
  .pkg-ribbon{
    position:absolute; top:-13px; left:28px;
    background:var(--accent); color:var(--paper);
    font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    padding:.4em .8em; border-radius:3px;
  }
  .pkg-name{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);}
  .pkg-card h3{font-size:1.55rem;}
  .pkg-card p.desc{color:var(--text-soft); font-size:.98rem; flex:1;}
  .pkg-includes{display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px dashed var(--border-strong);}
  .pkg-includes span{display:flex; gap:10px; font-size:.92rem; color:var(--text);}
  .pkg-includes span::before{content:"✓"; color:var(--accent); font-weight:700; flex:none;}
  .pkg-price-note{font-family:"Space Mono",monospace; font-size:.76rem; color:var(--text-faint);}

  /* ---------- Enquire ---------- */
  .enquire-panel{
    background:var(--ink); color:var(--cream);
    border-radius:10px; overflow:hidden;
    display:grid; grid-template-columns:.85fr 1.15fr;
  }
  :root:not([data-theme="light"]) .enquire-panel{ background:#0f0d09; }
  :root[data-theme="dark"] .enquire-panel{ background:#0f0d09; }
  @media (max-width:900px){ .enquire-panel{grid-template-columns:1fr;} }
  .enquire-copy{padding:52px 44px; display:flex; flex-direction:column; gap:18px;}
  .enquire-copy .eyebrow{color:var(--accent-deep);}
  .enquire-copy h2{color:var(--cream); font-size:clamp(1.8rem,3vw,2.3rem);}
  .enquire-copy p{color:rgba(246,240,234,.72); font-size:1.02rem;}
  .enquire-alt{
    margin-top:8px; padding-top:18px; border-top:1px solid rgba(246,240,234,.16);
    display:flex; flex-direction:column; gap:6px; font-size:.92rem; color:rgba(246,240,234,.6);
  }
  .enquire-alt a{color:var(--accent-deep); text-decoration:none; font-weight:600;}
  .enquire-alt a:hover{text-decoration:underline;}
  .enquire-form-wrap{
    background:var(--cream); padding:28px; display:flex; flex-direction:column; gap:16px;
  }
  .enquire-form-wrap iframe{
    width:100%; min-height:900px; border:none; border-radius:6px; background:var(--cream);
    flex:1;
  }
  .fallback-note{
    font-size:.85rem; color:rgba(28,28,28,.55); text-align:center;
  }

  /* ---------- Sticky enquiry bar ---------- */
  body{padding-bottom:82px;}
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ink);
    border-top:1px solid rgba(246,240,234,.14);
  }
  :root:not([data-theme="light"]) .sticky-cta{ background:#0f0d09; }
  :root[data-theme="dark"] .sticky-cta{ background:#0f0d09; }
  .sticky-cta-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 24px;
  }
  .sticky-cta-text{color:rgba(246,240,234,.75); font-size:.92rem; font-weight:600;}
  @media (max-width:560px){
    .sticky-cta-text{display:none;}
    .sticky-cta-row{justify-content:center;}
  }

  /* ---------- Footer ---------- */
  footer{padding:56px 0 40px; border-top:1px solid var(--border);}
  .footer-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
  .footer-tag{margin-top:14px; color:var(--text-soft); font-size:.92rem; max-width:32ch;}
  .footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
  .footer-col h4{font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; font-weight:700;}
  .footer-col a{display:block; text-decoration:none; color:var(--text-soft); font-size:.94rem; margin-bottom:9px;}
  .footer-col a:hover{color:var(--accent);}
  .footer-bottom{
    margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-family:"Space Mono",monospace; font-size:.74rem; color:var(--text-faint);
  }

  .skip-link{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--paper); padding:10px 16px; z-index:100;}
  .skip-link:focus{left:16px; top:16px;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}