/* ==========================================================================
   Buku Lending v4 — shared system
   Tokens, base type, buttons, nav + mobile menu, curtain, grain, reveal
   states, shared sections (page head, stat band, final CTA, footer).
   Page-specific layout lives in each page's <style>.
   ========================================================================== */

:root{
  --ink:#101B30; --navy:#16263F; --navy-soft:#22344F; --navy-deep:#0F1B30;
  --slate:#5A6779; --faint:#8C96A5;
  --bone:#FAF8F3; --sand:#F2EDE3; --card:#FFFFFF; --paper:#EDE6D8;
  --bronze:#9A7B50; --bronze-deep:#7E6340; --bronze-bright:#C9A876;
  --line:rgba(16,27,48,.12); --line-dark:rgba(255,255,255,.14);
  --max:1240px; --pad:clamp(22px,5vw,64px);
  --r-btn:10px; --r-card:16px;
  --shadow:0 12px 32px rgba(16,27,48,.08);
  --nav-h:76px;

  /* motion tokens (motion.js mirrors these) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:.2s; --d-base:.9s; --d-slow:1.4s;
}
@media (max-width:680px){ :root{ --nav-h:64px } }

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* Navy canvas: iPhone Safari paints the page's base color behind the status bar and the floating address bar,
   so the strip below the footer and the overscroll match the nav and footer instead of showing cream */
html{-webkit-text-size-adjust:100%;background:var(--navy-deep)}
html:not(.lenis){scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16.5px;line-height:1.6;overflow-x:clip}
img,picture,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(80px,10vw,150px) 0;scroll-margin-top:calc(var(--nav-h) + 12px)}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:var(--bone);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px}
.skip:focus{top:12px}

/* Headings: clean grotesque with one editorial italic-serif accent */
h1,h2,h3{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em}
h1 em,h2 em,h3 em,.serif-em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:inherit;letter-spacing:0;font-size:1.05em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--bronze);margin-bottom:24px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;transform-origin:left}
.on-dark .eyebrow,.eyebrow.light{color:var(--bronze-bright)}
h2.sec{font-size:clamp(34px,3.9vw,56px);line-height:1.06;max-width:22ch}
p.lede{font-size:clamp(16.5px,1.3vw,19px);color:var(--slate);max-width:58ch;margin-top:20px}
.on-dark p.lede{color:rgba(255,255,255,.72)}
.stars{color:var(--bronze);letter-spacing:2px;font-size:14px}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-btn);padding:15px 24px;font-size:15px;font-weight:600;text-decoration:none;letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;
  transition:background var(--d-fast) ease, border-color var(--d-fast) ease, box-shadow .3s ease, color var(--d-fast) ease;will-change:transform}
.btn .lbl{display:inline-block;white-space:nowrap}
.btn .lbl .arr{margin-left:8px}
.btn .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn-navy{background:var(--navy);color:var(--bone)}
.btn-navy:hover{background:#1D3050;box-shadow:0 14px 34px rgba(16,27,48,.18)}
.btn-ghost{border-color:rgba(16,27,48,.18);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:rgba(16,27,48,.42);background:rgba(255,255,255,.5)}
.btn-bone{background:var(--bone);color:var(--navy)}
.btn-bone:hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.btn-ghost-d{border-color:rgba(255,255,255,.26);color:#fff;background:transparent}
.btn-ghost-d:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}

/* ── Lenis (inlined from lenis@1.3.26/dist/lenis.css) ─────────────────── */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ── Film grain — static, barely there ────────────────────────────────── */
/* Below the nav (60) so Safari reads the nav's navy for the status bar area */
body::after{content:"";position:fixed;inset:0;z-index:59;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (max-width:680px){body::after{opacity:.035}}

/* ── Reveal states (only when motion is allowed — html.anim set in <head>) ─ */
/* Hidden states only match until .is-in is added, so a revealed element falls back to its own
   component styles (hover lifts, tilt transforms) with no specificity fight. */
:where(html.anim) [data-r]:not(.is-in){opacity:0;transform:translate3d(0,26px,0)}
:where(html.anim) [data-r="fade"]:not(.is-in){transform:none}
:where(html.anim) [data-r="img"]:not(.is-in){opacity:0;transform:none;clip-path:inset(9% 7% 9% 7% round var(--r-card))}
:where(html.anim) [data-r="line"]:not(.is-in){opacity:1;transform:scaleX(0);transform-origin:left}
:where(html.anim) [data-split]:not(.is-in){visibility:hidden}
/* failsafe: libraries didn't load in time → show everything */
html.anim-off [data-r],html.anim-off [data-split]{opacity:1!important;visibility:visible!important;transform:none!important;clip-path:none!important}
.ln-mask{padding-bottom:.06em;margin-bottom:-.06em} /* keeps descenders inside SplitText line masks */

/* frame images: the inner image settles from a slight scale */
.frame{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--sand);isolation:isolate}
.frame>img,.frame>picture,.frame>picture>img{width:100%;height:100%;object-fit:cover}
.frame .inner{position:absolute;inset:-6% 0;will-change:transform}
.frame .inner picture,.frame .inner img{width:100%;height:100%;object-fit:cover}

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Navy bar + gold logo: Mike's round-one request (2026-10-08) */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);background:var(--navy);
  border-bottom:1px solid rgba(201,168,118,.16);transition:transform .55s var(--ease-out), background .3s ease, border-color .3s ease}
html.scrolled header.nav{background:var(--navy);border-bottom-color:rgba(201,168,118,.26);box-shadow:0 10px 30px rgba(16,27,48,.18)}
html.nav-hidden header.nav{transform:translateY(-102%)}
html.menu-open header.nav{transform:none;background:transparent;border-bottom-color:transparent;box-shadow:none}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;min-height:44px}
.logo img{height:44px;width:auto}
nav.links{display:flex;gap:32px;font-size:14.5px;font-weight:500}
nav.links a{position:relative;text-decoration:none;color:rgba(255,255,255,.74);transition:color .2s}
nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--bronze-bright);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
nav.links a:hover{color:#fff}
nav.links a:hover::after,nav.links a.active::after{transform:scaleX(1);transform-origin:left}
nav.links a.active{color:var(--bronze-bright)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-right .tel{font-size:14px;font-weight:600;text-decoration:none;color:var(--bone)}
.nav-right .tel:hover{color:var(--bronze-bright)}
.nav-right .btn{padding:11px 18px;font-size:13.5px}
header.nav .btn-navy{background:var(--bronze-bright);color:var(--navy)}
header.nav .btn-navy:hover{background:#D7B98A;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.menu-btn{display:none;align-items:center;gap:10px;height:44px;min-width:44px;justify-content:center;padding:0 4px 0 12px;font-size:13.5px;font-weight:600;color:#fff}
.menu-btn .bars{position:relative;width:22px;height:10px}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease-out), top .5s var(--ease-out)}
.menu-btn .bars::before{top:0}.menu-btn .bars::after{top:8.5px}
html.menu-open .menu-btn{color:#fff}
html.menu-open .menu-btn .bars::before{top:4.25px;transform:rotate(45deg)}
html.menu-open .menu-btn .bars::after{top:4.25px;transform:rotate(-45deg)}
html.menu-open .logo img{filter:none}
html.menu-open .nav-right .btn{opacity:0;pointer-events:none}
nav.links a,.nav-right .tel{white-space:nowrap}
@media (max-width:1100px){
  nav.links{display:none}
  .menu-btn{display:inline-flex}
  .nav-right .tel{display:none}
}
@media (max-width:680px){
  .logo img{height:36px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:10px 14px;font-size:13px}
}
@media (max-width:440px){
  .logo img{height:31px}
  .nav-right{gap:4px}
  .nav-right .btn{padding:9px 12px;font-size:12.5px}
  .nav-right .btn .long{display:none}
  .menu-btn{padding:0 2px 0 10px}
  .menu-btn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* Mobile menu — full-screen navy sheet */
.menu{position:fixed;inset:0;z-index:55;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 28px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease-io), visibility 0s .7s}
html.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-io), visibility 0s}
.menu ul{list-style:none}
.menu li{overflow:hidden}
.menu li a{display:flex;align-items:baseline;gap:14px;padding:10px 0;font-size:clamp(34px,9vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-decoration:none;
  transform:translateY(105%);transition:transform .8s var(--ease-out)}
.menu li a .n{font-family:'Instrument Sans',system-ui,sans-serif;font-style:normal;font-weight:600;font-size:13px;color:var(--bronze-bright);letter-spacing:.06em;font-variant-numeric:tabular-nums}
html.menu-open .menu li a{transform:none}
html.menu-open .menu li:nth-child(1) a{transition-delay:.18s}
html.menu-open .menu li:nth-child(2) a{transition-delay:.24s}
html.menu-open .menu li:nth-child(3) a{transition-delay:.30s}
html.menu-open .menu li:nth-child(4) a{transition-delay:.36s}
.menu .menu-foot{display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .5s ease}
html.menu-open .menu .menu-foot{opacity:1;transition-delay:.45s}
.menu .menu-foot .tel{font-size:20px;font-weight:600;text-decoration:none}
.menu .menu-foot small{font-size:12px;color:rgba(255,255,255,.5)}
@media (min-width:1021px){ .menu{display:none} }

/* ── Curtain: intro + page transitions ────────────────────────────────── */
.curtain{position:fixed;inset:0;z-index:90;background:var(--navy);display:none;align-items:center;justify-content:center;pointer-events:none}
html.curtain-on .curtain{display:flex}
.curtain .mark{position:relative;width:min(300px,62vw);aspect-ratio:856/200}
.curtain .mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
/* frame = logo box + 20px sides / 16px top-bottom at the 300px size; viewBox 340x102 keeps it proportional */
.curtain .mark svg{position:absolute;left:-6.667%;top:-22.857%;width:113.333%;height:145.714%;max-width:none;overflow:visible}
.curtain .mark rect{fill:none;stroke:var(--bronze-bright);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100}
html.curtain-quick .curtain .mark img{opacity:1}
html.curtain-quick .curtain .mark rect{stroke-dashoffset:0}

/* ── Shared: page head (inner pages) ──────────────────────────────────── */
.page-head{padding:calc(var(--nav-h) + clamp(56px,7vw,110px)) 0 clamp(40px,5vw,72px)}
.page-head h1{font-size:clamp(42px,5.4vw,80px);line-height:1.02;max-width:17ch}

/* ── Shared: stat band with odometer numerals ─────────────────────────── */
.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;position:relative}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.band .cell{position:relative;padding:34px 28px}
.band .cell:first-child{padding-left:0}
.band .cell+.cell::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line);transform-origin:top}
html.anim .band .cell+.cell::before{transform:scaleY(0);transition:transform 1.1s var(--ease-out)}
html.anim .band.is-in .cell+.cell::before{transform:scaleY(1)}
.band .cell:nth-child(3)::before{transition-delay:.12s!important}
.band .cell:nth-child(4)::before{transition-delay:.24s!important}
.band .v{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(36px,3.4vw,46px);line-height:1;letter-spacing:0;display:flex;align-items:baseline;gap:8px}
.band .v .stars{font-family:'Instrument Sans',sans-serif;font-size:12px;letter-spacing:2px}
.band .l{font-size:13px;color:var(--slate);margin-top:10px;max-width:26ch;line-height:1.5}
@media (max-width:1020px){
  .band .wrap{grid-template-columns:repeat(2,1fr)}
  .band .cell{padding:28px 0 28px 22px}
  .band .cell:nth-child(odd){padding-left:0}
  .band .cell:nth-child(3)::before{display:none}
  .band .cell:nth-child(n+3){border-top:1px solid var(--line)}
}

/* odometer digits */
.odo{display:inline-flex;align-items:baseline}
.odo-cell{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:bottom}
.odo-strip{display:block}
.odo-strip>span{display:block;height:1em;line-height:1}
.odo-ch{display:inline-block;line-height:1}

/* ── Shared: final CTA over photography ───────────────────────────────── */
.final{position:relative;overflow:hidden;background:var(--navy);color:#fff;text-align:center;padding:clamp(120px,15vw,210px) 0;isolation:isolate}
.final .bg{position:absolute;inset:-12% 0;z-index:-2}
.final .bg picture{height:100%}
.final .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,27,48,.58)}
.final .eyebrow{color:var(--bronze-bright);justify-content:center}
.final h2{font-size:clamp(38px,5vw,72px);line-height:1.04;max-width:18ch;margin:0 auto}
.final .lede{color:rgba(255,255,255,.78);margin:24px auto 40px;max-width:52ch;text-align:center}
.final .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .hours{margin-top:28px;font-size:13px;color:rgba(255,255,255,.6)}

/* ── Footer — traditional four-column layout ──────────────────────────── */
footer.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.6;padding:clamp(64px,7vw,96px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px 32px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.foot-brand .logo img{height:40px}
.foot-tag{margin-top:18px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px;line-height:1.15;color:rgba(255,255,255,.88)}
.foot-brand address{margin-top:16px;font-style:normal;line-height:1.8}
.foot-brand address a{color:rgba(255,255,255,.88);text-decoration:none;transition:color .2s}
.foot-brand address a:hover{color:var(--bronze-bright)}
.foot-col h4{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--bronze-bright);margin:6px 0 16px}
.foot-col ul{list-style:none;display:grid;gap:10px}
.foot-col a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-legal{padding:28px 0 34px}
.disc{line-height:1.7;max-width:100ch;font-size:12.5px;color:rgba(255,255,255,.5)}
.disc strong{color:rgba(255,255,255,.8);font-weight:600}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:rgba(255,255,255,.45)}
.foot-base a{color:rgba(255,255,255,.62);text-decoration:none}
.foot-base a:hover{color:#fff}
.eq{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:480px){ .foot-grid{gap:32px 20px} }

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

/* Tap target for the footer's small legal links (mobile audit 2026-10-08) */
.foot-base a{display:inline-block;padding:14px 4px;margin:-14px -4px}