:root{
    --paper:#F2EFE9; --section:#E8E1D4; --card:#FBFAF6;
    --ink:#2A2320; --ink-soft:#6E6B63; --ink-dim:#9A938A; --line:#DED7C9;
    --gold:#BD9558; --gold-deep:#8F6F3D; --gold-light:#DFC49A;
    --wood-dark:#37281A; --wood-mid:#927763;
    --t-bg:#191520; --t-panel:#211C29; --t-text:#E6E1DB; --t-soft:#A49C96;
    --t-gold:#DFC49A; --t-violet:#8A6BD0; --t-violet-glow:rgba(122,84,200,.28);
    --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
    --shadow:0 1px 2px rgba(42,35,32,.05), 0 16px 40px -18px rgba(42,35,32,.22);
    --ease:cubic-bezier(.2,.7,.2,1);
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--paper); color:var(--ink); font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.62;}
  .display{font-family:"Bricolage Grotesque","Manrope",sans-serif;}
  .mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
  img{max-width:100%;}
  a{color:inherit; text-decoration:none;}
  .wide{max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px;}

  .eyebrow{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;}

  /* ---------- HEADER ---------- */
  header.site{position:sticky; top:0; z-index:50; background:rgba(242,239,233,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; gap:22px; height:66px;}
  .logo{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:19px; letter-spacing:-.01em;}
  .logo sup{font-size:9px; color:var(--gold-deep); vertical-align:super;}
  .menu{display:flex; gap:4px; margin-left:14px;}
  .menu a{font-size:14px; color:var(--ink-soft); padding:8px 12px; border-radius:8px;}
  .menu a:hover{background:var(--section); color:var(--ink);}
  .menu a.on{color:var(--ink); font-weight:600;}
  .nav .right{margin-left:auto; display:flex; align-items:center; gap:14px;}
  .lang{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-dim); letter-spacing:.05em;}
  .lang b{color:var(--ink);}
  .btn{font-family:"Manrope",sans-serif; font-weight:700; font-size:14px; border-radius:var(--radius-sm); padding:10px 18px; border:1px solid transparent; cursor:pointer; display:inline-block; transition:filter .15s, background .15s;}
  .btn.primary{background:var(--gold); color:#fff;}
  .btn.primary:hover{filter:brightness(1.05);}
  .btn.ghost{background:transparent; border-color:var(--gold-deep); color:var(--gold-deep);}
  .btn.ghost:hover{background:var(--section);}
  .burger{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:9px; background:var(--card); align-items:center; justify-content:center; cursor:pointer;}
  .burger span{width:18px; height:2px; background:var(--ink); position:relative;}
  .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);}
  .burger span::before{top:-5px;} .burger span::after{top:5px;}
  @media (max-width:860px){ .menu,.nav .lang{display:none;} .burger{display:flex;} .nav .right .btn{display:none;} }

  /* ---------- HERO ---------- */
  .hero{padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,72px);}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center;}
  @media (max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:30px;} }
  .hero h1{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(40px,7vw,74px); line-height:.98; letter-spacing:-.035em; margin:16px 0 0; text-wrap:balance;}
  .hero h1 em{font-style:normal; color:var(--gold-deep);}
  .hero .sub{font-size:clamp(16px,2vw,19px); color:var(--ink-soft); max-width:46ch; margin:22px 0 28px;}
  .hero .cta{display:flex; flex-wrap:wrap; gap:12px;}
  .hero .btn{padding:13px 24px; font-size:15px;}
  .hero-visual{position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:
      linear-gradient(150deg,#cfc3b4,#a9967f 45%,#5c4a38 100%);
      box-shadow:var(--shadow); border:1px solid var(--line);}
  .hero-visual .ph{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px;}
  .hero-visual .ph small{font-family:"JetBrains Mono",monospace; font-size:11px; color:rgba(255,255,255,.85); letter-spacing:.05em; background:rgba(42,35,32,.35); padding:5px 9px; border-radius:6px; backdrop-filter:blur(2px);}
  .vr-pill{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; background:rgba(25,21,32,.72); color:#fff; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:999px; backdrop-filter:blur(4px);}
  .vr-pill .dot{width:9px; height:9px; border-radius:50%; background:var(--t-violet); box-shadow:0 0 0 4px rgba(138,107,208,.3);}
  .hero-stats{display:flex; gap:26px; margin-top:34px; flex-wrap:wrap;}
  .hstat .num{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:26px; color:var(--ink);}
  .hstat .lab{font-size:12.5px; color:var(--ink-soft);}

  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
  .d1{animation-delay:.05s;} .d2{animation-delay:.15s;} .d3{animation-delay:.25s;}
  @keyframes rise{to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion:reduce){ .reveal{animation:none; opacity:1; transform:none;} }

  /* ---------- SECTION SHELL ---------- */
  .band{padding:clamp(48px,7vw,88px) 0;}
  .band.tint{background:var(--section);}
  .band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap;}
  .band-head h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,40px); letter-spacing:-.025em; margin:8px 0 0; text-wrap:balance;}
  .band-head p{color:var(--ink-soft); font-size:15px; max-width:40ch; margin:0;}

  /* ---------- PORTFOLIO GRID ---------- */
  .work{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
  .wcard{border-radius:var(--radius-md); overflow:hidden; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column;}
  .wcard .thumb{aspect-ratio:4/3; position:relative;}
  .wcard .thumb small{position:absolute; left:12px; bottom:12px; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:rgba(255,255,255,.9); background:rgba(42,35,32,.4); padding:4px 8px; border-radius:6px; backdrop-filter:blur(2px);}
  .wcard .tp{position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:600; background:rgba(25,21,32,.72); color:#fff; padding:4px 9px; border-radius:999px; display:inline-flex; gap:6px; align-items:center;}
  .wcard .tp .dot{width:7px;height:7px;border-radius:50%;background:var(--t-violet);}
  .wcard .body{padding:14px 16px 16px;}
  .wcard h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; margin:0 0 3px;}
  .wcard .cat{font-size:12.5px; color:var(--ink-soft);}
  .col6{grid-column:span 6;} .col4{grid-column:span 4;} .col3{grid-column:span 3;} .col2{grid-column:span 2;}
  .wcard.feature .thumb{aspect-ratio:16/10;}
  @media (max-width:820px){ .work{grid-template-columns:repeat(2,1fr);} .col6,.col4,.col3,.col2{grid-column:span 1;} .wcard.feature{grid-column:span 2;} }
  /* material placeholders */
  .m1{background:linear-gradient(145deg,#d9cfc0,#8a745c);}
  .m2{background:linear-gradient(145deg,#3a3a3c,#6f6f6f);}
  .m3{background:linear-gradient(145deg,#e7ddcf,#b8a488);}
  .m4{background:linear-gradient(145deg,#4a4038,#2a2320);}
  .m5{background:linear-gradient(145deg,#cdbfae,#7d6a52);}
  .m6{background:linear-gradient(145deg,#b9c2c0,#6d7b74);}

  /* ---------- PACKAGES ---------- */
  .packs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:820px){ .packs{grid-template-columns:1fr;} }
  .pack{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); padding:26px 24px; display:flex; flex-direction:column;}
  .pack.hi{border-color:var(--gold-deep); box-shadow:var(--shadow);}
  .pack .nm{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--gold-deep); text-transform:uppercase;}
  .pack h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px; margin:8px 0 4px;}
  .pack .price{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; margin:14px 0 2px;}
  .pack .term{font-size:12.5px; color:var(--ink-soft);}
  .pack ul{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px;}
  .pack li{font-size:13.5px; color:var(--ink-soft); padding-left:20px; position:relative;}
  .pack li::before{content:"—"; position:absolute; left:0; color:var(--gold);}
  .pack .badge{align-self:flex-start; font-size:10.5px; font-weight:700; color:#fff; background:var(--gold); border-radius:999px; padding:3px 10px; margin-bottom:2px;}

  /* ---------- DARK VR BLOCK (tool layer) ---------- */
  .vr-band{position:relative; background:var(--t-bg); color:var(--t-text); border-radius:0; overflow:hidden;}
  .vr-band::before{content:""; position:absolute; top:-140px; right:-120px; width:520px; height:480px; background:radial-gradient(closest-side,var(--t-violet-glow),transparent 72%); pointer-events:none;}
  .vr-inner{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; padding:clamp(48px,7vw,84px) 0;}
  @media (max-width:820px){ .vr-inner{grid-template-columns:1fr; gap:28px;} }
  .vr-band .eyebrow{color:var(--t-gold);}
  .vr-band h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,40px); letter-spacing:-.025em; margin:10px 0 16px; color:var(--t-text); text-wrap:balance;}
  .vr-band p{color:var(--t-soft); font-size:15.5px; max-width:48ch;}
  .vr-band .btn.tp{background:linear-gradient(180deg,var(--t-gold),var(--gold)); color:var(--t-bg); margin-top:22px; padding:13px 24px; font-size:15px;}
  .acoustic{background:var(--t-panel); border:1px solid #2e2833; border-radius:var(--radius-lg); padding:24px;}
  .acoustic .row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #2e2833;}
  .acoustic .row:last-child{border-bottom:none;}
  .acoustic .k{font-size:13.5px; color:var(--t-soft);}
  .acoustic .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px; color:var(--t-gold);}
  .acoustic .v small{font-size:12px; color:var(--t-soft); font-family:"Manrope";}

  /* ---------- CTA BAND ---------- */
  .cta-band{text-align:center; padding:clamp(52px,7vw,88px) 0;}
  .cta-band h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(28px,4.4vw,46px); letter-spacing:-.03em; margin:0 auto 14px; max-width:18ch; text-wrap:balance;}
  .cta-band p{color:var(--ink-soft); font-size:16px; max-width:48ch; margin:0 auto 26px;}

  /* ---------- FOOTER ---------- */
  footer.site{background:var(--wood-dark); color:#e8ddcf;}
  .foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding:52px 0 32px;}
  @media (max-width:820px){ .foot{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .foot{grid-template-columns:1fr;} }
  footer .logo{color:#fff;}
  footer .about{font-size:13.5px; color:#bcae9c; max-width:34ch; margin:12px 0 0;}
  .fcol h4{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin:0 0 14px; font-weight:600;}
  .fcol a, .fcol div{display:block; font-size:13.5px; color:#d6c9b8; padding:4px 0;}
  .fcol a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#a8988660;}
  .foot-bottom span{color:#b0a291;}
  .proto-note{position:fixed; bottom:12px; left:12px; z-index:99; background:var(--t-bg); color:var(--t-gold); font-family:"JetBrains Mono",monospace; font-size:10.5px; padding:6px 11px; border-radius:8px; opacity:.85;}

/* ---------- multi-page additions: logo link, mobile menu ---------- */
a.logo{color:inherit; text-decoration:none;}
.burger{border:1px solid var(--line); background:var(--card);}
.mobile-menu{display:none; flex-direction:column; gap:2px; padding:12px 16px 20px; border-top:1px solid var(--line); background:var(--paper);}
.mobile-menu[hidden]{display:none;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:16px; color:var(--ink); padding:11px 10px; border-radius:8px;}
.mobile-menu a:hover{background:var(--section);}
.mobile-menu a.on{color:var(--gold-deep); font-weight:700;}
.mobile-menu a.btn{margin-top:8px; color:#fff; text-align:center;}
@media (min-width:861px){ .mobile-menu{display:none !important;} }
.menu a.on{color:var(--ink); font-weight:700; background:var(--section);}

/* ============ SERVICES page ============ */
.page-hero{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px);}
.page-hero h1{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(34px,5.5vw,56px); letter-spacing:-.03em; line-height:1.02; margin:12px 0 0; text-wrap:balance;}
.page-hero .sub{color:var(--ink-soft); font-size:clamp(16px,2vw,18px); max-width:52ch; margin:18px 0 0;}
.packs-full .pack{padding:28px 26px;}
.packs-full .pack .price{font-size:34px;}
.pack .cta-row{margin-top:auto; padding-top:20px;}
.pack .btn{width:100%; text-align:center;}
.pack.hi .btn.primary{}
/* calculator (native, replaces the Wix iframe) */
.calc-wrap{background:var(--t-bg); border-radius:var(--radius-lg); overflow:hidden; position:relative; margin-top:8px;}
.calc-wrap::before{content:""; position:absolute; top:-120px; left:-100px; width:440px; height:400px; background:radial-gradient(closest-side,var(--t-violet-glow),transparent 72%); pointer-events:none;}
.calc{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,44px); padding:clamp(26px,4vw,44px); align-items:center;}
@media (max-width:760px){ .calc{grid-template-columns:1fr; gap:24px;} }
.calc .eyebrow{color:var(--t-gold);}
.calc h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--t-text); letter-spacing:-.02em; margin:8px 0 18px;}
.calc label{display:block; font-size:13px; color:var(--t-soft); margin:0 0 8px;}
.calc-area{display:flex; align-items:center; gap:0; border:1px solid #34303c; border-radius:10px; overflow:hidden; background:var(--t-panel); width:fit-content;}
.calc-area button{width:44px; height:48px; border:none; background:transparent; color:var(--t-gold); font-size:20px; cursor:pointer;}
.calc-area button:hover{background:#2a2214;}
.calc-area input{width:90px; text-align:center; background:transparent; border:none; color:var(--t-text); font-size:20px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; -moz-appearance:textfield;}
.calc-area input::-webkit-outer-spin-button,.calc-area input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.calc-area .unit{padding:0 14px 0 4px; color:var(--t-soft); font-size:14px;}
.calc-opts{display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.calc-opt{display:flex; align-items:center; gap:11px; font-size:14px; color:var(--t-text); cursor:pointer;}
.calc-opt input{width:20px; height:20px; accent-color:var(--gold);}
.calc-panel{background:var(--t-panel); border:1px solid #2e2833; border-radius:var(--radius-lg); padding:26px;}
.calc-panel .rec-lab{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t-soft);}
.calc-panel .rec-pack{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; color:var(--t-gold); margin:4px 0 2px;}
.calc-panel .rec-price{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:40px; color:var(--t-text); margin:14px 0 2px;}
.calc-panel .rec-term{font-size:13px; color:var(--t-soft);}
.calc-panel .rec-note{font-size:12px; color:var(--t-soft); margin-top:14px; padding-top:14px; border-top:1px solid #2e2833; line-height:1.5;}
.calc-panel .btn{margin-top:18px; width:100%; text-align:center; background:linear-gradient(180deg,var(--t-gold),var(--gold)); color:var(--t-bg); border:none;}

/* ============ PORTFOLIO hub ============ */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px;}
.filters button{font-family:"Manrope",sans-serif; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer;}
.filters button:hover{border-color:var(--gold-deep);}
.filters button.on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:820px){ .hub-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .hub-grid{grid-template-columns:1fr;} }
.hub-card{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s;}
.hub-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.hub-card .thumb{aspect-ratio:4/3; position:relative;}
.hub-card .thumb small{position:absolute; left:12px; bottom:12px; font-family:"JetBrains Mono",monospace; font-size:10px; color:rgba(255,255,255,.9); background:rgba(42,35,32,.4); padding:4px 8px; border-radius:6px; backdrop-filter:blur(2px);}
.hub-card .tp{position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:600; background:rgba(25,21,32,.72); color:#fff; padding:4px 9px; border-radius:999px; display:inline-flex; gap:6px; align-items:center;}
.hub-card .tp .dot{width:7px; height:7px; border-radius:50%; background:var(--t-violet);}
.hub-card .body{padding:15px 17px 17px;}
.hub-card h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; margin:0 0 3px; color:var(--ink);}
.hub-card .cat{font-size:12.5px; color:var(--ink-soft);}
.hub-card.hide{display:none;}

/* ============ CASE (проєкт) page ============ */
.breadcrumb{font-size:13px; color:var(--ink-soft); padding:22px 0 0;}
.breadcrumb a{color:var(--ink-soft);} .breadcrumb a:hover{color:var(--gold-deep);}
.breadcrumb span{color:var(--ink-dim);}
.case-hero{padding:14px 0 clamp(24px,3vw,34px);}
.case-hero .cat{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;}
.case-hero h1{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(32px,5vw,54px); letter-spacing:-.03em; line-height:1.02; margin:10px 0 0; text-wrap:balance;}
.case-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px;}
.case-meta .m{display:flex; flex-direction:column;}
.case-meta .mk{font-size:11px; color:var(--ink-dim); font-family:"JetBrains Mono",monospace; letter-spacing:.05em; text-transform:uppercase;}
.case-meta .mv{font-size:15px; color:var(--ink); font-weight:600;}

/* tour frame — accepts a 3DVista embed URL via data-tour */
.tour{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--wood-dark); box-shadow:var(--shadow);}
.tour-frame{position:relative; aspect-ratio:16/9; width:100%;}
.tour-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.tour-poster{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; cursor:pointer;
  background:linear-gradient(150deg,#4a4038,#2a2320 70%,#1a140f);}
.tour-poster .play{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.12); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; transition:transform .18s, background .18s;}
.tour-poster:hover .play{transform:scale(1.06); background:rgba(255,255,255,.2);}
.tour-poster .play::before{content:""; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px;}
.tour-poster .plabel{color:#fff; font-weight:600; font-size:15px;}
.tour-poster .phint{font-family:"JetBrains Mono",monospace; font-size:11px; color:rgba(255,255,255,.6);}
.tour-bar{position:absolute; top:14px; right:14px; display:flex; gap:8px; z-index:3;}
.tour-fs{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#fff; background:rgba(25,21,32,.7); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:7px 12px; cursor:pointer; backdrop-filter:blur(4px);}
.tour-fs:hover{background:rgba(25,21,32,.9);}
.tour-vr-pill{position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:8px; background:rgba(25,21,32,.7); color:#fff; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; backdrop-filter:blur(4px);}
.tour-vr-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--t-violet); box-shadow:0 0 0 4px rgba(138,107,208,.3);}

.case-body{display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(28px,5vw,60px); padding:clamp(36px,5vw,56px) 0;}
@media (max-width:820px){ .case-body{grid-template-columns:1fr; gap:28px;} }
.case-story h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:26px; letter-spacing:-.02em; margin:0 0 14px;}
.case-story p{font-size:16px; color:var(--ink-soft); margin:0 0 16px; max-width:60ch; line-height:1.7;}
.case-story p b{color:var(--ink);}
.facts{align-self:start; position:sticky; top:86px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px;}
.facts h3{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 14px; font-weight:600;}
.facts .frow{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;}
.facts .frow:last-of-type{border-bottom:none;}
.facts .fk{color:var(--ink-soft);} .facts .fv{color:var(--ink); font-weight:600; text-align:right;}
.facts .btn{width:100%; text-align:center; margin-top:16px;}

.case-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:620px){ .case-gallery{grid-template-columns:repeat(2,1fr);} }
.case-gallery .g{aspect-ratio:4/3; border-radius:var(--radius-md); position:relative; border:1px solid var(--line);}
.case-gallery .g.tall{grid-row:span 2; aspect-ratio:auto;}
.case-gallery .g small{position:absolute; left:10px; bottom:10px; font-family:"JetBrains Mono",monospace; font-size:10px; color:rgba(255,255,255,.85); background:rgba(42,35,32,.4); padding:3px 7px; border-radius:5px;}

/* tour poster with a real lead photo behind it */
.tour-poster.photo{background:#2a2320;}
.tour-poster.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,21,32,.15),rgba(25,21,32,.55)); z-index:0;}
.tour-poster.photo > *{position:relative; z-index:1;}
.tour-poster .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
/* gallery real photos fill tiles */
.case-gallery .g.photo{overflow:hidden; border:1px solid var(--line);}
.case-gallery .g.photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- case LEAD image (portfolio pages = photos only, no tour) ---------- */
.case-lead{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:var(--wood-dark);}
.case-lead img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover;}
@media (max-width:620px){ .case-lead img{aspect-ratio:4/3;} }

/* ---------- lightbox: gallery photos open on click ---------- */
.case-gallery .g.photo, .case-lead{cursor:zoom-in;}
.lb{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(20,16,21,.94); padding:24px;}
.lb.open{display:flex;}
.lb img{max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55); object-fit:contain;}
.lb-btn{position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);}
.lb-btn:hover{background:rgba(255,255,255,.2);}
.lb-close{top:20px; right:22px;}
.lb-prev{left:18px; top:50%; transform:translateY(-50%);}
.lb-next{right:18px; top:50%; transform:translateY(-50%);}
.lb-count{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:"JetBrains Mono",monospace; font-size:12px; color:rgba(255,255,255,.7); letter-spacing:.05em;}
@media (max-width:620px){ .lb-prev{left:10px;} .lb-next{right:10px;} .lb-btn{width:40px; height:40px;} }

/* ---------- real logo (image) in header + footer ---------- */
.logo{display:inline-flex; align-items:center;}
.logo img{height:30px; width:auto; display:block;}
@media (max-width:520px){ .logo img{height:26px;} }
.foot-logo{height:34px; width:auto; display:block; filter:invert(1) brightness(1.6);}  /* black wordmark -> light on dark wood */
/* brand star mark as a nuance */
.mark{display:inline-block; color:var(--gold-deep); width:34px; height:34px; vertical-align:middle;}
.mark svg{width:100%; height:100%; display:block;}
.cta-band .mark{width:40px; height:40px; margin:0 auto 14px; color:var(--gold);}

/* ── About + Contact pages ─────────────────────────────── */
.about-lead{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,60px); align-items:center; padding:clamp(30px,5vw,52px) 0;}
@media (max-width:820px){ .about-lead{grid-template-columns:1fr; gap:26px;} }
.about-lead .txt p{color:var(--ink-soft); font-size:16px; line-height:1.7; margin:0 0 14px;}
.about-lead .txt p strong{color:var(--ink);}
.about-lead .shot{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);}
.about-lead .shot img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
@media (max-width:820px){ .values{grid-template-columns:1fr;} }
.value{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px;}
.value .mark{width:30px; height:30px; margin-bottom:12px;}
.value h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; margin:0 0 8px;}
.value p{color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0;}
.process{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px; counter-reset:st;}
@media (max-width:820px){ .process{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .process{grid-template-columns:1fr;} }
.pstep{position:relative; padding:22px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);}
.pstep .pnum{font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:600; color:var(--gold-deep); letter-spacing:.06em;}
.pstep h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; margin:8px 0 6px; letter-spacing:-.01em;}
.pstep p{color:var(--ink-soft); font-size:14px; line-height:1.55; margin:0;}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;}
@media (max-width:620px){ .stats-row{grid-template-columns:1fr 1fr;} }
.statc{text-align:center; padding:24px 14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);}
.statc .n{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(28px,4vw,40px); color:var(--ink); letter-spacing:-.02em;}
.statc .l{font-size:13px; color:var(--ink-soft); margin-top:4px;}
/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; padding:clamp(28px,4vw,48px) 0;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:28px;} }
.channels{display:flex; flex-direction:column; gap:14px;}
.chan{display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); text-decoration:none; color:inherit; transition:border-color .15s;}
.chan:hover{border-color:var(--gold);}
.chan .ic{font-size:22px; line-height:1;}
.chan h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16px; margin:0 0 3px;}
.chan p{color:var(--ink-soft); font-size:14px; margin:0;}
.cform{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px);}
.cform h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0 0 4px;}
.cform .hint{color:var(--ink-soft); font-size:14px; margin:0 0 18px;}
.cform label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:14px 0 6px;}
.cform input,.cform textarea{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--radius-md); padding:12px 14px; font:inherit; font-size:15px; background:#fff; color:var(--ink);}
.cform input:focus,.cform textarea:focus{outline:none; border-color:var(--gold);}
.cform textarea{min-height:110px; resize:vertical;}
.cform .btn{margin-top:18px; width:100%;}
.cform .msg{margin-top:14px; font-size:14px; padding:10px 14px; border-radius:var(--radius-md); display:none;}
.cform .msg.ok{display:block; background:#e8f3e8; color:#2f6b32; border:1px solid #bcdcbc;}
.cform .msg.err{display:block; background:#f6e6e6; color:#8a2f2f; border:1px solid #dcbcbc;}

/* ── Virtual tours page ─────────────────────────────── */
.tours-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:8px;}
@media (max-width:820px){ .tours-grid{grid-template-columns:1fr;} }
.tour-card .cap{margin-top:14px;}
.tour-card .cap h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.01em;}
.tour-card .cap p{color:var(--ink-soft); font-size:14px; margin-top:4px; font-family:"JetBrains Mono",monospace; letter-spacing:.02em;}
.tour-poster.has-img{background-size:cover; background-position:center;}
.tour-poster.has-img::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(26,20,15,.35),rgba(26,20,15,.72)); z-index:0;}
.tour-poster.has-img .play,.tour-poster.has-img .plabel,.tour-poster.has-img .phint{position:relative; z-index:1;}

/* ── VR tours: 360-poster variant + featured + videos ─────── */
.tour-poster.t360{justify-content:flex-end; align-items:flex-start; padding:0; background:transparent;}
.tour-poster.t360::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(20,15,10,.72)); z-index:0;}
.tour-poster.t360 .t360-cta{position:relative; z-index:1; margin:16px; display:inline-flex; align-items:center; gap:9px; background:rgba(20,15,10,.55); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:14px; font-weight:600; padding:9px 15px; border-radius:999px; backdrop-filter:blur(5px); transition:background .18s,border-color .18s;}
.tour-poster.t360 .t360-cta .tri{width:0; height:0; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;}
.tour:hover .tour-poster.t360 .t360-cta{background:var(--gold-deep); border-color:var(--gold-deep);}

.tour-featured{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center; margin-top:8px;}
@media (max-width:820px){ .tour-featured{grid-template-columns:1fr;} }
.tour-featured .tf-txt h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin:10px 0 12px;}
.tour-featured .tf-txt p{color:var(--ink-soft); font-size:16px; line-height:1.65; margin-bottom:14px;}

.media-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px;}
@media (max-width:760px){ .media-grid{grid-template-columns:1fr;} }
.reels-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px;}
@media (max-width:900px){ .reels-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .reels-grid{grid-template-columns:repeat(2,1fr);} }
.media{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--wood-dark); box-shadow:var(--shadow);}
.media .mframe{position:relative; width:100%;}
.media.land .mframe{aspect-ratio:16/9;}
.media.reel .mframe{aspect-ratio:9/16;}
.media video,.media iframe{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; display:block; background:#000;}
.media .mposter{position:absolute; inset:0; background-size:cover; background-position:center; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.media .mposter::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,15,10,.12),rgba(20,15,10,.5));}
.media .mplay{position:relative; z-index:1; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:transform .18s, background .18s;}
.media .mposter:hover .mplay{transform:scale(1.08); background:rgba(255,255,255,.28);}
.media .mplay::before{content:""; border-left:17px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px;}
.media .mcap{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:12px 14px; color:#fff; font-weight:600; font-size:13.5px; line-height:1.3; background:linear-gradient(0deg,rgba(20,15,10,.82),transparent); pointer-events:none;}

/* ── Legal / privacy page ─────────────────────────────── */
.legal h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.01em; margin:28px 0 10px;}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom:12px;}
.legal p strong{color:var(--ink);}
.legal ul{margin:0 0 14px; padding-left:22px; color:var(--ink-soft); font-size:16px; line-height:1.7;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--gold-deep); font-weight:600;}
.legal-upd{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink-dim); margin-top:26px;}

/* ── Home work cards as links ─────────────────────────── */
a.wcard{text-decoration:none; color:inherit; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s;}
a.wcard:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold-light);}
a.hero-visual{text-decoration:none; display:block;}

/* ================================================================
   DESIGN REFRESH · editorial-architectural type + accents + motion
   ================================================================ */

/* — accent serif for emphasis (echoes the serif wordmark) — */
.hero h1 em, .editorial-em{
  font-family:"Fraunces","Bricolage Grotesque",serif; font-style:italic; font-weight:500;
  font-optical-sizing:auto; letter-spacing:-.012em;
  background:linear-gradient(100deg,var(--gold-deep) 10%,var(--gold) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* — bolder editorial hero — */
.hero h1{ font-size:clamp(46px,8.2vw,90px); line-height:.93; letter-spacing:-.045em; }
.hero .sub{ max-width:54ch; }
@keyframes rise{ from{opacity:0; transform:translateY(20px); filter:blur(6px);} to{opacity:1; transform:none; filter:blur(0);} }

/* — eyebrow gets a gold hairline rule — */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:26px; height:1.5px; flex:0 0 auto;
  background:linear-gradient(90deg,currentColor,transparent); opacity:.9; }

/* — nav: sliding gold underline instead of pill — */
.menu a{ position:relative; background:transparent !important; }
.menu a::after{ content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1.5px;
  background:var(--gold-deep); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.menu a:hover::after, .menu a.on::after{ transform:scaleX(1); }
.menu a:hover{ color:var(--ink); }

/* — buttons: lift, sheen, ghost fill — */
.btn{ position:relative; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .25s var(--ease), color .25s, border-color .25s, filter .15s; }
.btn.primary{ box-shadow:0 1px 2px rgba(143,111,61,.25); }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(143,111,61,.7); filter:none; }
.btn.primary::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); transition:left .6s var(--ease); }
.btn.primary:hover::after{ left:140%; }
.btn.ghost:hover{ transform:translateY(-2px); background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }

/* — cards: lift + gold edge + image zoom — */
a.wcard .thumb, .hub-card .thumb, .tour-poster{ transition:transform .55s var(--ease); }
a.wcard:hover .thumb, .hub-card:hover .thumb{ transform:scale(1.06); }
.hub-card{ overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
a.wcard:hover, .hub-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -22px rgba(42,35,32,.5); border-color:var(--gold-light); }
.pack{ transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.pack:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -22px rgba(42,35,32,.4); border-color:var(--gold-light); }
.hero-visual{ transition:box-shadow .3s var(--ease); }
.hero-visual:hover{ box-shadow:0 26px 60px -26px rgba(42,35,32,.6); }

/* — the star mark rotates when its section is hovered — */
.mark{ transition:transform .6s var(--ease); }
.cta-band:hover .mark, .value:hover .mark{ transform:rotate(90deg); }

/* — in-content links: animated gold underline — */
.legal a, .story a{ border:0 !important; padding-bottom:1px;
  background-image:linear-gradient(var(--gold),var(--gold)); background-size:0% 1.5px;
  background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease); }
.legal a:hover, .story a:hover{ background-size:100% 1.5px; }

/* — hero atmosphere: warm radial glow behind the headline — */
.hero{ position:relative; }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 46% at 14% 22%, rgba(189,149,88,.12), transparent 70%); }
.hero .wide{ position:relative; z-index:1; }

/* — slightly tighter, more editorial section headings — */
.band-head h2, .display{ letter-spacing:-.03em; }

/* ================================================================
   ALWAYS-ON ACCENTS · visible without hover (incl. mobile)
   ================================================================ */

/* 1 — cards read as "designed" at rest: soft depth + gold hairline top */
a.wcard, .hub-card, .pack, .value, .statc, .tour-card, .chan{
  box-shadow:0 2px 14px -9px rgba(42,35,32,.28);
}
a.wcard, .hub-card{ position:relative; }
a.wcard::before, .hub-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg,var(--gold),var(--gold-light)); opacity:.55;
  transition:opacity .2s var(--ease);
}
a.wcard:hover::before, .hub-card:hover::before{ opacity:1; }
.pack.hi{ box-shadow:0 10px 30px -14px rgba(143,111,61,.45); }

/* 2 — hero: a gold rule draws itself in on load (plays once, mobile too) */
.hero h1::after{
  content:""; display:block; height:3px; width:148px; margin-top:26px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
  animation:heroDraw 1s .55s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroDraw{ from{ width:0; } to{ width:148px; } }

/* 3 — editorial index numbers beside section headings */
body{ counter-reset:secnum; }
.band-head .eyebrow::after{
  counter-increment:secnum; content:counter(secnum,decimal-leading-zero);
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.1em;
  color:var(--gold); opacity:.75; margin-left:2px;
}

@media (prefers-reduced-motion:reduce){
  .hero h1::after{ animation:none; width:148px; }
}

/* — VR tour card: link to standalone project/tour page — */
.tour-card .cap-link{ display:inline-block; margin-top:8px; font-family:"JetBrains Mono",monospace;
  font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--gold-deep); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease), gap .2s; }
.tour-card .cap-link:hover{ border-bottom-color:var(--gold-deep); }

/* — cta-band star mark: gentle continuous rotation — */
@keyframes spinMark{ to{ transform:rotate(360deg); } }
.cta-band .mark{ animation:spinMark 24s linear infinite; }
@media (prefers-reduced-motion:reduce){ .cta-band .mark{ animation:none; } }

/* — home SEO prose (two readable columns) — */
.prose-2col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); margin-top:8px; }
@media (max-width:760px){ .prose-2col{ grid-template-columns:1fr; gap:14px; } }
.prose-2col p{ color:var(--ink-soft); font-size:16px; line-height:1.75; margin-bottom:14px; }
.prose-2col p:last-child{ margin-bottom:0; }
.prose-2col strong{ color:var(--ink); font-weight:600; }

/* — detailed calculator additions — */
.calc{ align-items:start; }
.calc-types{ display:flex; gap:8px; flex-wrap:wrap; }
.calc-types .ct{ padding:9px 14px; border:1px solid #34303c; background:var(--t-panel); color:var(--t-soft);
  border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.calc-types .ct:hover{ color:var(--t-text); border-color:#48414f; }
.calc-types .ct.on{ background:var(--gold); color:#1a140f; border-color:var(--gold); }
.calc-panel .rec-includes{ margin-top:18px; padding-top:16px; border-top:1px solid #2e2833; }
.calc-panel .ri-title{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t-soft); margin-bottom:11px; }
.calc-panel #recList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.calc-panel #recList li{ position:relative; padding-left:25px; font-size:13.5px; color:var(--t-text); line-height:1.4; }
.calc-panel #recList li::before{ content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:var(--gold); }
.calc-panel #recList li::after{ content:""; position:absolute; left:4.5px; top:6px; width:6px; height:3px; border-left:1.6px solid #1a140f; border-bottom:1.6px solid #1a140f; transform:rotate(-45deg); }
.calc-panel .rec-breakdown{ margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.calc-panel .rec-breakdown .rb{ display:flex; justify-content:space-between; font-size:13px; color:var(--t-soft); }
.calc-panel .rec-breakdown .rb.total{ padding-top:8px; margin-top:2px; border-top:1px solid #2e2833; }
.calc-panel .rec-breakdown .rb span:last-child{ color:var(--t-text); font-weight:600; font-family:"JetBrains Mono",monospace; }
.calc-panel .rec-breakdown .rb.total span{ color:var(--t-gold); font-size:15px; }

/* ================================================================
   EDITORIAL PASS · film grain + atmosphere + serif display + big numerals
   ================================================================ */

/* 1a — filmic grain over the whole warm surface (very subtle) */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{ opacity:.035; } }

/* 1b — extra warm blob in the hero for depth */
.hero::after{ content:""; position:absolute; right:-6%; bottom:-20%; width:min(46vw,560px); height:min(46vw,560px);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(189,149,88,.10), transparent 70%); }

/* 1c — deeper, more dramatic shadows on the hero + lead images */
.hero-visual{ box-shadow:0 34px 74px -34px rgba(42,35,32,.6); }
.case-lead img{ box-shadow:0 32px 70px -36px rgba(42,35,32,.5); }

/* 2 — serif (Fraunces) for the large statement headings; UI stays grotesque */
.hero h1, .page-hero h1, .case-hero h1,
.band-head h2, .display, .vr-band h2{
  font-family:"Fraunces","Bricolage Grotesque",serif;
  font-weight:600; font-optical-sizing:auto;
}
.hero h1{ letter-spacing:-.02em; line-height:.98; font-weight:600; }
.page-hero h1, .case-hero h1{ letter-spacing:-.018em; }
.band-head h2, .display, .vr-band h2{ letter-spacing:-.015em; }

/* 3 — oversized editorial numerals */
.hstat .num{ font-family:"Fraunces","Bricolage Grotesque",serif; font-weight:600;
  font-size:clamp(32px,4.4vw,50px); letter-spacing:-.01em; line-height:1; }
.calc-panel .rec-price{ font-size:clamp(42px,5vw,56px); }
.band-head .eyebrow::after{ font-size:12px; }

/* serif override for element-scoped headings that out-specify .display */
.cta-band h2, .vr-band h2{ font-family:"Fraunces","Bricolage Grotesque",serif; font-weight:600; letter-spacing:-.015em; }

/* — home work card that fills the full row height (image goes vertical) — */
@media (min-width:821px){
  .wcard.tall-fill{ height:100%; }
  .wcard.tall-fill .thumb{ aspect-ratio:auto; flex:1 1 auto; min-height:260px; }
}

/* longer keyword-led H1 needs a smaller display size */
.hero h1{ font-size:clamp(34px,4.6vw,52px); line-height:1.04; }

/* case-body: restore horizontal padding (the shorthand above zeroed it) */
.case-body{ padding-left:24px; padding-right:24px; }

/* pack cards: two stacked full-width CTAs */
.pack .cta-row{ display:flex; flex-direction:column; gap:10px; }
.pack .cta-row .btn{ width:100%; text-align:center; box-sizing:border-box; }

/* ── FAQ accordion (GEO) ─────────────────────────────── */
.faq{ margin-top:8px; max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--gold-deep); transition:transform .2s var(--ease); }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{ color:var(--ink-soft); font-size:16px; line-height:1.65; margin:0 0 18px; max-width:70ch; }

/* ============ SCROLL ANIMATIONS (progressive, JS-gated, reduced-motion safe) ============ */
html.js .sr{opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease);}
html.js .sr.sr-in{opacity:1; transform:none;}
header.site{transition:background .25s ease, box-shadow .3s ease, border-color .25s ease;}
header.site.scrolled{background:rgba(242,239,233,.94); box-shadow:0 12px 30px -20px rgba(31,22,14,.55); border-bottom-color:transparent;}
.hero-visual{will-change:transform;}
@media (prefers-reduced-motion:reduce){
  html.js .sr{opacity:1 !important; transform:none !important; transition:none;}
  .hero-visual{will-change:auto; transform:none !important;}
}

/* ============ PINNED WALK-THROUGH (one signature case page) ============ */
.walk{position:relative; width:100vw; margin-left:calc(50% - 50vw);}
.walk-stage{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.walk-rail{display:flex; gap:16px; padding:6px clamp(16px,6vw,72px) 22px;}
.walk .frame{scroll-snap-align:center; position:relative; flex:0 0 min(640px,84vw);
  aspect-ratio:4/5; max-height:80vh; border-radius:16px; overflow:hidden;
  background:#17120f; cursor:zoom-in; box-shadow:0 30px 70px -46px rgba(20,14,8,.7);}
.walk .frame img{width:100%; height:100%; object-fit:cover; display:block;}
.walk .frame .idx{position:absolute; top:14px; right:16px; z-index:3;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(0,0,0,.7);}
.walk .hud{display:none;}
.walk-strip{display:block; text-align:center; color:var(--ink-soft); font-size:12.5px;
  letter-spacing:.05em; padding:6px 0 0;}

/* pinned mode — only when JS is active and motion is allowed */
html.js .walk.on{height:var(--travel,460vh);}
html.js .walk.on .walk-stage{position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; scroll-snap-type:none; background:#17120f;
  box-shadow:inset 0 0 0 1px #2a2019, inset 0 90px 120px -90px #0d0a07,
             inset 0 -90px 120px -90px #0d0a07;}
html.js .walk.on .walk-rail{padding:0 calc((100vw - min(640px,84vw)) / 2);
  gap:clamp(16px,3vw,40px); will-change:transform;
  transform:translate3d(calc(var(--sc-p,0) * (0px - var(--sc-overflow,0px))), 0, 0);}
html.js .walk.on .frame{transform:scale(.9); opacity:.5;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s cubic-bezier(.2,.7,.2,1);}
html.js .walk.on .frame.is-active{transform:none; opacity:1;}
html.js .walk.on .hud{position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:16px; padding:0 clamp(16px,5vw,48px) 22px;}
.walk .hud .count{font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.14em; color:#fff;}
.walk .hud .wk-total{color:rgba(255,255,255,.5);}
.walk .hud .track{flex:1; height:2px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden;}
.walk .hud .fill{height:100%; width:calc(var(--sc-p,0) * 100%);
  background:linear-gradient(90deg,var(--gold-deep),#c9a86b);}
html.js .walk.on ~ .walk-strip{display:none;}

/* ============ ABOUT — team portraits ============ */
.team-shots{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.team-shots figure{margin:0;}
.team-shots img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-lg);
  display:block; box-shadow:0 24px 50px -34px rgba(31,22,14,.55);}
.team-shots figcaption{margin-top:11px; font-size:14px; font-weight:600; color:var(--ink);
  text-align:center; letter-spacing:.01em;}

/* ============ animation-design audit: reduced-motion + touch guards ============ */
@media (prefers-reduced-motion:reduce){
  header.site{transition:none;}
  html.js .walk.on .frame{transition:none;}
}
@media (hover:none){
  a.wcard:hover, .hub-card:hover, .pack:hover{transform:none;}
  a.wcard:hover .thumb, .hub-card:hover .thumb{transform:none;}
}