@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

  :root{
    --ink:#1C1712;
    --paper:#FAF7F2;
    --paper-dim:#F1ECE1;
    --line:#DCD4C4;
    --muted:#6E6455;
    --accent:#8C6B3F; /* single muted brass — used sparingly, links & tiny labels only */
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:'Lora', Georgia, serif;
    --ease: cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font-body); font-size:20px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--font-display); color:var(--ink); margin:0; line-height:1.15; font-weight:500;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 40px;}
  .label{
    font-family:var(--font-body); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); font-weight:500;
  }

  .reveal{opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- floating book pill (top-right, over hero) ---------- */
  /* Solid ink fill on load for prominence, brass on hover. */
  .btn-pill{
    position:fixed; top:30px; right:40px; z-index:100;
    display:inline-flex; align-items:center; padding:13px 26px;
    border:1px solid var(--ink); border-radius:999px; background:var(--ink);
    color:var(--paper); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
    box-shadow:0 4px 18px rgba(20,16,12,.18);
    transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }
  .btn-pill:hover{background:var(--accent); border-color:var(--accent); color:var(--paper);}

  /* ---------- hero CTA — same treatment as the top-right pill, just positioned inline ---------- */
  .btn-hero{
    display:inline-flex; align-items:center; padding:15px 30px;
    border:1px solid var(--line); border-radius:999px; background:rgba(250,247,242,.7);
    color:var(--ink); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
    backdrop-filter:blur(4px);
    transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }
  .btn-hero:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  /* ---------- solid inline button (hero CTA, visit CTA) ---------- */
  .btn-solid{
    display:inline-flex; align-items:center; gap:8px; padding:15px 30px;
    background:var(--ink); color:var(--paper); border-radius:999px; border:1px solid var(--ink);
    font-size:15px; letter-spacing:.1em; text-transform:uppercase;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .btn-solid:hover{background:var(--accent); border-color:var(--accent);}

  /* ---------- persistent mini logo (fades in once you scroll past the hero) ---------- */
  .sticky-logo{
    position:fixed; top:0; left:0; right:0; z-index:99;
    display:flex; align-items:center; justify-content:center;
    padding:16px 0; background:var(--paper); border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .sticky-logo.visible{opacity:1; transform:translateY(0); pointer-events:auto;}
  .sticky-logo img{height:68px; width:auto; display:block;}

  /* ---------- hero ---------- */
  /* v2 hero photo is naturally light/warm, so this now reads dark-on-light instead of light-on-dark */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding-top:11vh;
    background:
      linear-gradient(180deg, rgba(250,247,242,.08) 0%, rgba(250,247,242,.02) 40%, rgba(20,16,12,.1) 100%),
      url(../assets/hero-desk.jpg);
    background-size:cover;
    background-position:center 32%;
    text-align:center;
  }
  .hero-inner{position:relative; z-index:2; width:100%; max-width:720px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; align-items:center;}
  .hero-logo{width:640px; max-width:78vw; height:auto; margin-bottom:40px; filter:drop-shadow(0 2px 14px rgba(250,247,242,.6));}
  .hero h1{font-size:clamp(28px,3.6vw,40px); color:var(--ink); font-weight:400; max-width:560px; text-shadow:0 1px 24px rgba(250,247,242,.5);}
  .scroll-cue{
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  @media (max-height:760px){ .scroll-cue{ display:none; } }


  section{padding:120px 0;}
  .divider{border:none; border-top:1px solid var(--line); margin:0;}

  /* ---------- intro ---------- */
  .intro-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center;}
  .intro-photo{
    aspect-ratio:4/5; overflow:hidden; background:var(--paper-dim);
  }
  .intro-photo img{width:100%; height:100%; object-fit:cover; object-position:68% 35%; display:block;}
  .intro-copy p{color:var(--ink); font-size:21px; line-height:1.75; margin:0 0 22px;}
  .intro-copy p.byline{font-size:17px; color:var(--muted); font-style:italic; margin-top:32px;}

  /* ---------- services ---------- */
  .services .label{margin-bottom:8px;}
  .services h2{font-size:32px; margin-bottom:56px;}
  .service-row{
    display:grid; grid-template-columns:1fr 2.4fr; gap:40px; padding:36px 0; border-top:1px solid var(--line);
    align-items:baseline;
  }
  .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row h3{font-size:22px; font-weight:400;}
  .service-row p{margin:0; color:var(--muted); font-size:19px; max-width:520px;}

  /* ---------- bench note ---------- */
  .bench{background:var(--ink); color:var(--paper);}
  .bench .label{color:rgba(250,247,242,.55);}
  .bench-copy{max-width:680px;}
  .bench p{font-size:22px; font-family:var(--font-display); font-weight:400; line-height:1.5; color:var(--paper); margin:22px 0 0;}

  /* ---------- brands ---------- */
  .brands-line{font-size:20px; color:var(--muted); max-width:760px; line-height:1.8;}
  .brands-line b{color:var(--ink); font-weight:500;}

  /* ---------- reviews carousel ---------- */
  .reviews{padding-top:56px; padding-bottom:64px;}
  .reviews-track-wrap{overflow:hidden; margin-top:48px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
  .reviews-track{display:flex; gap:24px; width:max-content; animation:reviewScroll 38s linear infinite;}
  .reviews-track:hover{animation-play-state:paused;}
  @keyframes reviewScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .review-card{
    flex:none; width:320px; background:var(--paper); border:1px solid var(--line); border-radius:6px;
    padding:28px 26px;
  }
  .review-stars{color:var(--accent); font-size:17px; letter-spacing:2px; margin-bottom:14px;}
  .review-text{font-size:18px; color:var(--ink); line-height:1.7; margin:0 0 18px;}
  .review-name{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

  /* ---------- faq ---------- */
  .faq-list{max-width:680px;}
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:26px 0; cursor:pointer; font-family:var(--font-display); font-size:21px; font-weight:400;
  }
  .faq-q .mk{font-family:var(--font-body); font-size:19px; color:var(--muted); transition:transform .3s var(--ease);}
  .faq-item.open .mk{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
  .faq-a p{padding:0 0 26px; margin:0; color:var(--muted); font-size:18px; max-width:560px;}

  /* ---------- visit ---------- */
  .visit{background:var(--paper-dim);}
  .visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
  .visit h2{font-size:32px; margin-bottom:24px;}
  .visit p.lede{color:var(--muted); font-size:20px; max-width:400px; margin:0 0 30px;}
  .detail-list{list-style:none; margin:0; padding:0;}
  .detail-list li{padding:18px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:100px 1fr; gap:16px;}
  .detail-list li:last-child{border-bottom:1px solid var(--line);}
  .detail-list .k{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
  .detail-list .v{font-size:19px;}
  .map-link{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
  .map-link:hover{text-decoration-color:var(--accent); color:var(--accent);}

  footer{padding:56px 0; border-top:1px solid var(--line);}
  .foot-row{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
  footer .mark{font-family:var(--font-display); font-size:19px;}
  footer .meta{font-size:16px; color:var(--muted); line-height:1.8;}
  .foot-links{display:flex; flex-direction:column; gap:4px; font-size:16px;}
  .foot-links a{color:var(--muted); transition:color .2s;}
  .foot-links a:hover{color:var(--ink);}
  .foot-social-label{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
  .foot-social-icons{display:flex; gap:16px; align-items:center;}
  .foot-social-icons a{color:var(--muted); display:inline-flex; transition:color .2s;}
  .foot-social-icons a:hover{color:var(--accent);}

  @media (max-width:820px){
    .btn-pill{
      top:auto; right:auto; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
      transform:translateX(-50%);
      padding:14px 34px; font-size:14px;
      transition:bottom .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    }
    body.cookie-visible .btn-pill{
      /* clears the cookie banner — height is measured live in JS via --cookie-banner-h,
         with a safe fallback in case that hasn't run yet */
      bottom:calc(var(--cookie-banner-h, 160px) + 16px + env(safe-area-inset-bottom));
    }
    .hero-logo{width:320px;}
    .hero{padding-top:8vh;}
    .intro-grid, .visit-grid{grid-template-columns:1fr; gap:40px;}
    .service-row{grid-template-columns:1fr; gap:8px;}
    section{padding:80px 0;}
    footer{padding-bottom:calc(100px + env(safe-area-inset-bottom));}
  }

  .proto-flag{
    display:none; /* set back to unset/remove this line to bring it back while reviewing */
    position:fixed; bottom:16px; right:16px; z-index:999; background:var(--ink); color:var(--paper);
    font-family:var(--font-body); font-size:14px; padding:9px 13px; border-radius:2px; max-width:220px; opacity:.85;
  }

  /* ---------- cookie consent banner ---------- */
  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:var(--paper); border-top:1px solid var(--line);
    box-shadow:0 -4px 24px rgba(20,16,12,.08);
    transform:translateY(100%); opacity:0;
    transition:transform .5s var(--ease), opacity .5s var(--ease);
  }
  .cookie-banner.visible{transform:translateY(0); opacity:1;}
  .cookie-inner{
    max-width:1080px; margin:0 auto; padding:22px 40px;
    display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  }
  .cookie-inner p{margin:0; font-size:17px; color:var(--ink); max-width:640px; line-height:1.6;}
  .cookie-inner a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
  .cookie-actions{display:flex; align-items:center; gap:14px; flex:none;}
  .btn-cookie-reject{
    background:none; border:none; padding:8px 4px; cursor:pointer;
    font-family:var(--font-body); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  }
  .btn-cookie-reject:hover{color:var(--ink);}
  .btn-cookie-accept{
    display:inline-flex; align-items:center; padding:12px 24px; cursor:pointer;
    background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:999px;
    font-family:var(--font-body); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
    transition:background .2s var(--ease);
  }
  .btn-cookie-accept:hover{background:var(--accent); border-color:var(--accent);}
  @media (max-width:640px){
    .cookie-inner{padding:20px 24px;}
    .cookie-actions{width:100%; justify-content:flex-end;}
  }

/* ---------- legal pages (privacy policy / terms of service) ---------- */
.legal-main{
  max-width:760px; margin:0 auto; padding:150px 40px 100px;
}
.legal-main .label{margin-bottom:14px;}
.legal-main h1{font-size:clamp(32px,4vw,44px); margin-bottom:8px;}
.legal-updated{font-size:16px; color:var(--muted); font-style:italic; margin-bottom:48px;}
.legal-main h2{font-size:21px; margin:40px 0 14px;}
.legal-main p{color:var(--ink); font-size:19px; line-height:1.75; margin:0 0 18px;}
.legal-main ul, .legal-main ol{margin:0 0 18px; padding-left:22px; color:var(--ink); font-size:19px; line-height:1.75;}
.legal-main li{margin-bottom:8px;}
.legal-main a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
.legal-main a:hover{text-decoration-color:var(--accent); color:var(--accent);}
.legal-notice{
  background:var(--paper-dim); border:1px solid var(--line); border-radius:6px;
  padding:20px 22px; margin-bottom:44px; font-size:17px; color:var(--muted); line-height:1.7;
}
.legal-notice strong{color:var(--ink);}

/* ---------- accessibility / SEO utility ---------- */
/* Visually hidden but readable by screen readers and search engines.
   Used for the homepage's h1 — the hero is logo-led by design with no
   visible headline text, but the page still needs a real text h1. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}