:root{
    /* brighter tropical palette — 006d6f · 3dbca8 · ffc857 · ff6f61 · ff4d8d */
    --bg: oklch(0.985 0.014 190);
    --surface: oklch(0.998 0.008 190);
    --ink: oklch(0.42 0.085 195);          /* 006d6f deep teal, richer */
    --ink-soft: oklch(0.55 0.060 190);
    --line: oklch(0.90 0.030 188);
    --accent: oklch(0.73 0.135 178);       /* 3dbca8 bright turquoise */
    --accent-press: oklch(0.64 0.135 182);
    --on-accent: oklch(0.26 0.050 200);
    --sun: oklch(0.84 0.145 84);           /* ffc857 amber */
    --coral: oklch(0.70 0.175 30);         /* ff6f61 coral */
    --pink: oklch(0.66 0.205 5);           /* ff4d8d pink */
    --amber: oklch(0.84 0.145 84);
    --ph: oklch(0.70 0.020 200);           /* placeholder grey text */
    --ph-block: oklch(0.93 0.022 190);     /* placeholder block fill */
    --font-display:"Bricolage Grotesque",sans-serif;
    --font-body:"Instrument Sans",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",monospace;
    --container: min(1140px, 92vw);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit}
  .container{width:var(--container);margin-inline:auto}
  main>section{padding-block:clamp(3.5rem,7vw,5.5rem)}

  /* ── typographic roles ── */
  .mono{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft)}
  h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-0.01em;color:var(--ink)}
  h2{font-size:clamp(2rem,4.5vw,3rem)}
  h3{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:700}
  .ph-copy{color:var(--ph)}
  .ph-tag{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:2px 7px;border-radius:5px;display:inline-block}

  /* ── buttons ── */
  .btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-body);font-weight:600;font-size:0.9rem;letter-spacing:0.02em;text-decoration:none;padding:0.85rem 1.5rem;border-radius:999px;transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
  .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 24px -12px oklch(0.64 0.115 190 / .8)}
  .btn-primary:hover{transform:translateY(-2px);background:var(--accent-press);box-shadow:0 16px 30px -14px oklch(0.64 0.115 190 / .9)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn-ghost:hover{transform:translateY(-2px)}
  :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

  /* ── signature: horizon rule + coordinates ── */
  .horizon{display:flex;align-items:center;gap:1rem;margin:0}
  .horizon svg{flex:1;height:10px;color:var(--accent)}
  .horizon .mono{white-space:nowrap;color:var(--ink-soft)}

  /* ── placeholder block ── */
  .block{position:relative;background:
      repeating-linear-gradient(135deg, var(--ph-block) 0 14px, oklch(0.95 0.014 195) 14px 28px);
    border:1px solid var(--line);border-radius:16px;display:grid;place-items:center;color:var(--ink-soft);overflow:hidden}
  .block .label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--surface);border:1px solid var(--line);padding:4px 10px;border-radius:6px}
  .block img,.block iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}

  /* ── NAV ── */
  .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    padding:0.7rem clamp(1rem,4vw,2.5rem);background:oklch(0.985 0.014 190 / .82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav-logo img{height:40px;width:auto}
  .nav-links{display:flex;align-items:center;gap:clamp(0.8rem,2vw,1.6rem)}
  .nav-links a:not(.btn){text-decoration:none;font-weight:600;font-size:0.92rem;color:var(--ink)}
  .nav-links a:not(.btn):hover{color:var(--accent-press)}
  .nav .btn{padding:0.55rem 1.15rem;font-size:0.82rem}
  .nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:0.4rem;cursor:pointer}
  @media(max-width:820px){
    .nav-toggle{display:grid;place-items:center}
    .nav-links{position:fixed;top:56px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:0.6rem 1.2rem 1.2rem;display:none}
    .nav-links.open{display:flex}
    .nav-links a:not(.btn){padding:0.8rem 0.3rem;border-bottom:1px solid var(--line)}
    .nav-links .btn{margin-top:0.7rem;justify-content:center}
  }

  /* ── HERO ── */
  .hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:7rem 0 4rem;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
  .hero-eyebrow{margin-bottom:1.4rem}
  .hero h1{font-size:clamp(2.8rem,7vw,5.4rem);margin-bottom:1.3rem}
  .hero .thesis{font-weight:600;font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.28;max-width:22ch;margin-bottom:1.4rem}
  .hero .lede{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft);max-width:52ch;margin-bottom:2rem}
  .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
  .hero-media{position:relative}
  .hero-media .block{aspect-ratio:4/5}
  .hero-parallax{will-change:transform}

  /* ── THESIS MOMENT ── */
  .statement{padding:clamp(4rem,9vw,7rem) 0}
  .statement .big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;max-width:20ch}
  .statement .big em{font-style:normal;color:var(--accent)}

  /* ── SERVICES (numbered rows) ── */
  .services{padding:clamp(3rem,7vw,6rem) 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .services .head{margin-bottom:2.5rem}
  .srow{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,2rem);align-items:center;padding:1.6rem 0;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .25s ease}
  .srow:last-child{border-bottom:1px solid var(--line)}
  .srow:hover{padding-left:0.6rem}
  .srow .idx{font-family:var(--font-mono);font-size:0.85rem;color:var(--accent)}
  .srow .st{display:flex;flex-direction:column;gap:0.25rem}
  .srow .price{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-soft);white-space:nowrap}
  .srow .arrow{color:var(--accent);font-size:1.3rem;transition:transform .25s ease}
  .srow:hover .arrow{transform:translateX(6px)}
  @media(max-width:640px){.srow{grid-template-columns:auto 1fr auto;gap:0.6rem 1.2rem}.srow .arrow{display:none}}

  /* ── GALLERY ── */
  .gallery{padding:clamp(3rem,7vw,6rem) 0}
  .gallery .head{margin-bottom:2rem}
  .gwrap{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:1rem}
  .gwrap .block{border-radius:14px}
  .g1{grid-column:span 2;grid-row:span 2}
  .g2{grid-column:span 2}
  .g5{grid-column:span 2}
  @media(max-width:820px){.gwrap{grid-template-columns:repeat(2,1fr)}.g1{grid-column:span 2}.g2,.g5{grid-column:span 1}}

  /* ── PLACE / PEOPLE ── */
  .place{padding:clamp(3rem,7vw,6rem) 0;background:var(--surface);border-top:1px solid var(--line)}
  .place-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  @media(max-width:820px){.place-grid{grid-template-columns:1fr}}
  .place .block{aspect-ratio:5/4}
  .place p{color:var(--ph);margin-bottom:1rem;max-width:52ch}

  /* ── REVIEWS ── */
  .reviews{padding:clamp(3rem,7vw,6rem) 0}
  .rbadge{font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.06em;color:var(--ink-soft);margin:0.4rem 0 2.2rem}
  .rbadge b{color:var(--accent)}
  .rgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.3rem}
  @media(max-width:820px){.rgrid{grid-template-columns:1fr}}
  .rcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem}
  .rcard .stars{color:var(--amber);letter-spacing:0.15em;margin-bottom:0.7rem}
  .rcard p{color:var(--ph);margin-bottom:0.8rem}
  .rcard cite{font-style:normal;font-weight:600;font-size:0.85rem;color:var(--ink)}

  /* ── BOOKING BAND ── */
  .booking{padding:clamp(3rem,7vw,6rem) 0}
  .bband{background:var(--ink);color:var(--bg);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,3rem)}
  @media(max-width:820px){.bband{grid-template-columns:1fr}}
  .bband h2{color:var(--bg)}
  .bband .sub{color:oklch(0.85 0.03 195);margin:0.7rem 0 1.6rem;max-width:40ch}
  .bband .btn-primary{background:var(--accent);color:var(--on-accent)}
  .bband .btn-ghost{border-color:oklch(0.75 0.03 195);color:var(--bg)}
  .binfo{display:grid;gap:1.1rem;align-content:start}
  .binfo .row .mono{color:oklch(0.78 0.03 195);margin-bottom:0.2rem}
  .binfo .row div:last-child{font-size:1.02rem}
  .bmap{grid-column:1/-1}
  .bmap .block{aspect-ratio:16/6;background:repeating-linear-gradient(135deg, oklch(0.28 0.05 205) 0 14px, oklch(0.31 0.05 205) 14px 28px);border-color:oklch(0.40 0.05 205);color:oklch(0.8 0.03 195)}
  .bmap .block .label{background:oklch(0.28 0.05 205);border-color:oklch(0.42 0.05 205);color:oklch(0.85 0.03 195)}

  /* ── FOOTER ── */
  .footer{background:var(--ink);color:oklch(0.85 0.03 195);padding:3rem 0 2rem;border-top:1px solid oklch(0.42 0.05 205)}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
  @media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
  .footer img{height:52px;margin-bottom:0.8rem;filter:brightness(0) invert(1);opacity:0.9}
  .footer h4{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.8rem}
  .footer ul{list-style:none;display:grid;gap:0.4rem;font-size:0.92rem}
  .footer a{color:inherit;text-decoration:none}
  .footer a:hover{color:var(--bg)}
  .foot-bottom{border-top:1px solid oklch(0.42 0.05 205);padding-top:1.2rem;font-size:0.8rem;opacity:0.6;text-align:center}

  /* ── section heads ── */
  .shead{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.5rem}

  /* ── MOTION: smooth & premium ── */
  .reveal{opacity:0;transform:translateY(20px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
  .hero .reveal{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .hero .r1{animation-delay:.05s}.hero .r2{animation-delay:.16s}.hero .r3{animation-delay:.28s}.hero .r4{animation-delay:.4s}.hero .r5{animation-delay:.52s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal,.hero .reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
    .hero-parallax{transform:none!important}
  }

  /* ── PAGE HERO (subpages) ── */
  .page-hero{padding:8.5rem 0 3rem;background:var(--surface);border-bottom:1px solid var(--line)}
  .page-hero .eyebrow{margin-bottom:1rem}
  .page-hero h1{font-size:clamp(2.4rem,6vw,4rem);max-width:20ch;margin-bottom:1.1rem}
  .page-hero .lead{color:var(--ink-soft);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:60ch}
  .page-hero .btnrow{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap}

  /* ── PROSE / two-column ── */
  .split{display:grid;grid-template-columns:1.4fr 0.9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
  @media(max-width:860px){.split{grid-template-columns:1fr}}
  .prose p{color:var(--ink-soft);margin-bottom:1rem;font-size:1.06rem;max-width:62ch}
  .prose h2{margin:2rem 0 0.6rem}
  .prose h3{color:var(--accent);font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;margin:1.8rem 0 0.4rem}
  .prose .motto{font-family:var(--font-script,var(--font-display));color:var(--ink);font-size:1.4rem;font-weight:700;margin:1.5rem 0;line-height:1.3}
  .prose ul{margin:0.4rem 0 1rem 0;list-style:none;display:grid;gap:0.5rem}
  .prose ul li{padding-left:1.5rem;position:relative;color:var(--ink-soft)}
  .prose ul li::before{content:"";position:absolute;left:0;top:0.6em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .aside-card{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.6rem}
  .aside-card h3{font-size:1.2rem;margin-bottom:0.5rem}
  .aside-card p{color:var(--ink-soft);font-size:0.95rem;margin-bottom:1.1rem}
  .aside-card .btn{display:flex;justify-content:center;margin-bottom:0.6rem}

  /* ── CONTACT ── */
  .channels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
  @media(max-width:480px){.channels{grid-template-columns:1fr}}
  .channel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;text-decoration:none;display:grid;gap:0.15rem;transition:transform .2s ease}
  .channel:hover{transform:translateY(-3px)}
  .channel strong{color:var(--ink)}
  .channel span{color:var(--ink-soft);font-size:0.9rem}
  .checklist{list-style:none;display:grid;gap:0.55rem;margin-top:0.6rem}
  .checklist li{padding-left:1.6rem;position:relative;color:var(--ink-soft)}
  .checklist li::before{content:"";position:absolute;left:0;top:0.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
  address.nap{font-style:normal;line-height:1.8;font-size:1.08rem;margin-bottom:1.2rem}
  .policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
  @media(max-width:860px){.policy-grid{grid-template-columns:1fr}}
  .policy{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem}
  .policy h3{font-size:1.25rem;margin-bottom:0.5rem}
  .policy p{color:var(--ink-soft);font-size:0.95rem}

  /* ── CTA BAND (reused) ── */
  .cta-band{background:var(--ink);color:var(--bg);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);text-align:center}
  .cta-band h2{color:var(--bg);margin-bottom:0.6rem}
  .cta-band p{color:oklch(0.85 0.03 195);margin-bottom:1.6rem;max-width:46ch;margin-inline:auto}
  .cta-band .btn-primary{background:var(--accent);color:var(--on-accent)}

  /* ── STEP 5 POLISH ── */
  /* film grain */
  .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.045;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  @media(prefers-reduced-motion:reduce){.grain{animation:none}}
  /* custom cursor */
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
  .cur-dot{width:7px;height:7px;background:var(--accent)}
  .cur-ring{width:34px;height:34px;border:1.5px solid var(--accent);opacity:0.5;transition:width .2s ease,height .2s ease,opacity .2s ease,background .2s ease}
  .cur-ring.grow{width:56px;height:56px;opacity:0.9;background:oklch(0.64 0.115 190 / .08)}
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button{cursor:none}
  /* nav settle */
  .nav{transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
  .nav.scrolled{background:oklch(0.985 0.014 190 / .9);box-shadow:0 8px 30px -18px rgba(4,63,66,.4)}
  /* micro-interactions */
  .rcard{transition:transform .25s ease,box-shadow .25s ease}
  .rcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(4,63,66,.3)}
  .nav-links a:not(.btn){position:relative}
  .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--accent);transition:right .25s ease}
  .nav-links a:not(.btn):hover::after{right:0}
  .btn-primary.magnetic{will-change:transform}

  /* ── STEP 6 fixes: spacing + subpage CTA ── */
  .split{padding-block:1rem}
  .page-hero{padding-bottom:3.5rem}
  section.subsection{padding:clamp(4rem,8vw,6.5rem) 0}
  .aside{align-self:start}
  .aside-card{top:100px}
  @media(max-width:860px){.aside-card{position:static;top:auto}}
  /* per-style gallery */
  .style-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem}
  @media(max-width:820px){.style-gal{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.style-gal{grid-template-columns:1fr}}
  .style-gal .block{aspect-ratio:4/5;border-radius:14px}
  /* Come say aloha CTA */
  .aloha-cta{padding:clamp(4rem,8vw,6rem) 0}
  .aloha-band{background:var(--ink);color:var(--bg);border-radius:24px;padding:clamp(2.4rem,5vw,4rem);text-align:center}
  .aloha-band h2{color:var(--bg);font-size:clamp(2rem,4.5vw,3rem);margin-bottom:0.7rem}
  .aloha-band p{color:oklch(0.85 0.03 195);max-width:48ch;margin:0 auto 1.8rem}
  .aloha-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .aloha-band .btn-primary{background:var(--accent);color:var(--on-accent)}
  .aloha-band .btn-msgr{background:var(--sun);color:var(--on-accent)}
  .aloha-band .btn-ghost{border-color:oklch(0.75 0.03 195);color:var(--bg)}
  /* read-more on service rows */
  .srow .more{font-family:var(--font-body);font-weight:700;font-size:0.82rem;color:var(--accent);white-space:nowrap;letter-spacing:0.02em}
  @media(max-width:640px){.srow .more{display:none}}


  /* icon action buttons (Come say aloha) */
  .icon-btn{width:54px;height:54px;border-radius:50%;background:#fbfdfd;display:grid;place-items:center;color:var(--deeper,oklch(0.30 0.05 205));box-shadow:0 8px 20px -10px rgba(0,0,0,.4);transition:transform .2s ease}
  .icon-btn:hover{transform:translateY(-3px)}
  .icon-btn svg{width:26px;height:26px}
  .aloha-actions{align-items:center}

  /* ── cookie banner ── */
  .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:9997;max-width:560px;margin-inline:auto;
    background:var(--ink);color:var(--bg);border-radius:16px;padding:1.1rem 1.3rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
    display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:0.9rem}
  .cookie p{flex:1;min-width:200px;color:oklch(0.88 0.02 195)}
  .cookie a{color:var(--sun)}
  .cookie .btns{display:flex;gap:0.5rem}
  .cookie button{font-family:var(--font-body);font-weight:700;font-size:0.82rem;border:0;border-radius:999px;padding:0.55rem 1.1rem;cursor:pointer}
  .cookie .accept{background:var(--accent);color:var(--on-accent)}
  .cookie .decline{background:transparent;color:var(--bg);border:1.5px solid oklch(0.6 0.03 195)}
  /* map placeholder load button */
  .map-load{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
  .map-load button{font-family:var(--font-body);font-weight:700;font-size:0.85rem;border:0;border-radius:999px;padding:0.7rem 1.3rem;background:var(--accent);color:var(--on-accent);cursor:pointer}

  /* ── sticky mobile CTA ── */
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:9996;display:none;gap:0.6rem;
    padding:0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
    background:oklch(0.985 0.014 190 / .95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mobile-cta .btn{flex:1;justify-content:center;padding:0.85rem 1rem}
  .mobile-cta .m-ic{flex:0 0 auto;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--sun);color:var(--on-accent)}
  .mobile-cta .m-ic svg{width:24px;height:24px}
  @media(max-width:820px){ .mobile-cta{display:flex} body{padding-bottom:76px} }