:root{
    --paper:#F5F2EC;
    --paper-alt:#ECE6DB;
    --ink:#1C1B18;
    --ink-soft:#6B675E;
    --sage:#7E8E6E;
    --sage-deep:#5E6C50;
    --blush:#E3C9BE;
    --line: rgba(28,27,24,0.14);
    --line-soft: rgba(28,27,24,0.08);
    --radius: 2px;
    --maxw: 1280px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Manrope', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:500; margin:0; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-deep);
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--sage-deep);}
  section{padding:120px 0;}
  @media (max-width:720px){ section{padding:72px 0;} .wrap{padding:0 20px;} }

  :focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 40px;
    mix-blend-mode:difference;
    color:#fff;
  }
  header .logo{ font-family:'Fraunces', serif; font-size:20px; letter-spacing:0.02em; }
  nav.main-nav{ display:flex; gap:36px; }
  nav.main-nav a{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    text-decoration:none; position:relative; padding-bottom:4px;
  }
  nav.main-nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor;
    transition:width .35s var(--ease);
  }
  nav.main-nav a:hover::after{ width:100%; }
  .burger{ display:none; background:none; border:0; color:#fff; cursor:pointer; }
  @media (max-width: 860px){
    nav.main-nav{ display:none; }
    .burger{ display:block; }
  }
  nav.mobile-nav{
    position:fixed; inset:0; background:var(--ink); color:var(--paper);
    display:none; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:28px; padding:40px; z-index:99;
  }
  nav.mobile-nav.open{ display:flex; }
  nav.mobile-nav a{ font-family:'Fraunces', serif; font-size:32px; text-decoration:none; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; height:100vh; min-height:640px;
    display:flex; align-items:flex-end;
    overflow:hidden;
    padding:0;
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:grayscale(0.15) contrast(1.02);
    transform:scale(1.04);
    animation:heroIn 1.6s var(--ease) forwards;
  }
  @keyframes heroIn{ to{ transform:scale(1); } }
  .hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(28,27,24,0) 40%, rgba(28,27,24,0.55) 100%);
  }
  .hero-content{ position:relative; z-index:2; color:#fff; padding:0 40px 72px; width:100%; }
  .hero-content .eyebrow{ color:var(--blush); }
  .hero-content .eyebrow::before{ background:var(--blush); }
  .hero h1{
    font-size:clamp(48px, 9vw, 128px);
    line-height:0.92;
    font-weight:400;
  }
  .hero h1 em{ font-style:italic; font-weight:300; color:var(--blush); }
  .hero p.slogan{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px; letter-spacing:0.04em; max-width:420px; margin-top:20px; color:rgba(255,255,255,0.82);
  }
  .scroll-cue{
    position:absolute; right:40px; bottom:36px; z-index:2; color:#fff;
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
    writing-mode:vertical-rl; display:flex; align-items:center; gap:10px;
  }
  .scroll-cue::after{ content:''; width:1px; height:48px; background:rgba(255,255,255,0.5); }
  @media (max-width:720px){ .scroll-cue{ display:none; } }

  /* ---------- SECTION HEAD ---------- */
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
  .section-head h2{ font-size:clamp(32px,5vw,56px); }
  .section-head p{ max-width:360px; color:var(--ink-soft); font-size:15px; }

  /* ---------- PORTFOLIO ---------- */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
  .filter-btn{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
    background:none; border:1px solid var(--line); color:var(--ink-soft);
    padding:10px 18px; border-radius:999px; cursor:pointer; transition:all .25s var(--ease);
  }
  .filter-btn:hover{ border-color:var(--sage-deep); color:var(--ink); }
  .filter-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:16px;
  }
  .grid-item{
    position:relative; overflow:hidden; cursor:pointer; background:var(--paper-alt);
    grid-column:span 3;
  }
  .grid-item.tall{ grid-row:span 2; }
  .grid-item.wide{ grid-column:span 4; }
  .grid-item.narrow{ grid-column:span 2; }
  .grid-item img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s var(--ease), filter .5s var(--ease);
    filter:grayscale(0.35);
  }
  .grid-item:hover img{ transform:scale(1.06); filter:grayscale(0); }
  .grid-item .meta{
    position:absolute; left:0; right:0; bottom:0; padding:16px;
    background:linear-gradient(0deg, rgba(28,27,24,0.75), transparent);
    color:#fff; opacity:0; transform:translateY(8px);
    transition:all .35s var(--ease);
  }
  .grid-item:hover .meta{ opacity:1; transform:translateY(0); }
  .grid-item .meta .cat{ font-family:'Fraunces', serif; font-size:18px; }
  .grid-item .meta .exif{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em; color:var(--blush); margin-top:4px; }
  @media (max-width:900px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .grid-item, .grid-item.wide, .grid-item.narrow{ grid-column:span 1; grid-row:span 1; }
  }

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(17,16,14,0.96); z-index:200;
    display:none; align-items:center; justify-content:center; padding:40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox figure{ margin:0; max-width:1000px; max-height:86vh; text-align:center; }
  .lightbox img{ max-height:78vh; margin:0 auto; }
  .lightbox figcaption{ color:var(--blush); font-family:'IBM Plex Mono', monospace; font-size:12px; margin-top:14px; }
  .lightbox .lb-close, .lightbox .lb-nav{
    position:absolute; background:none; border:1px solid rgba(255,255,255,0.3); color:#fff;
    width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:18px;
  }
  .lightbox .lb-close{ top:28px; right:28px; }
  .lightbox .lb-prev{ left:28px; top:50%; transform:translateY(-50%); }
  .lightbox .lb-next{ right:28px; top:50%; transform:translateY(-50%); }

  /* ---------- PRICING ---------- */
  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .price-card{ background:var(--paper); padding:44px 32px; display:flex; flex-direction:column; }
  .price-card.featured{ background:var(--ink); color:var(--paper); }
  .price-card.featured .price-card-price, .price-card.featured h3{ color:var(--paper); }
  .price-card.featured li::before{ color:var(--blush); }
  .price-card h3{ font-size:26px; margin-bottom:6px; }
  .price-card .price-card-note{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); }
  .price-card.featured .price-card-note{ color:rgba(245,242,236,0.6); }
  .price-card-price{ font-family:'Fraunces', serif; font-size:44px; margin:24px 0; }
  .price-card-price span{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft); }
  .price-card ul{ list-style:none; margin:0 0 32px; padding:0; flex:1; }
  .price-card li{ padding:9px 0; border-top:1px solid var(--line-soft); font-size:14px; display:flex; gap:10px; }
  .price-card.featured li{ border-top:1px solid rgba(245,242,236,0.14); }
  .price-card li::before{ content:'—'; color:var(--sage-deep); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    padding:16px 24px; border:1px solid var(--ink); text-decoration:none; cursor:pointer;
    background:transparent; color:var(--ink); transition:all .3s var(--ease);
  }
  .btn:hover{ background:var(--ink); color:var(--paper); }
  .price-card.featured .btn{ border-color:var(--paper); color:var(--paper); }
  .price-card.featured .btn:hover{ background:var(--paper); color:var(--ink); }
  @media (max-width:860px){ .pricing-grid{ grid-template-columns:1fr; } }

  /* ---------- ABOUT ---------- */
  .about{ display:grid; grid-template-columns:0.8fr 1fr; gap:64px; align-items:center; }
  .about img{ width:100%; height:640px; object-fit:cover; filter:grayscale(0.4); }
  .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
  .about-stats .num{ font-family:'Fraunces', serif; font-size:34px; }
  .about-stats .label{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }
  .about p.bio{ color:var(--ink-soft); font-size:16px; max-width:520px; }
  @media (max-width:860px){ .about{ grid-template-columns:1fr; } .about img{ height:420px; } }

  /* ---------- TESTIMONIALS ---------- */
  .reviews-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; -webkit-overflow-scrolling:touch; }
  .reviews-track::-webkit-scrollbar{ height:4px; }
  .reviews-track::-webkit-scrollbar-thumb{ background:var(--line); }
  .review-card{
    flex:0 0 auto; width:min(420px, 82vw); scroll-snap-align:start;
    background:var(--paper-alt); padding:36px; border-top:2px solid var(--sage-deep);
  }
  .review-card p.quote{ font-family:'Fraunces', serif; font-size:20px; font-style:italic; line-height:1.4; margin-bottom:20px;}
  .review-card .who{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); }
  .review-card .stars{ color:var(--sage-deep); letter-spacing:2px; margin-bottom:14px; }

  /* ---------- FAQ ---------- */
  .faq-item{ border-top:1px solid var(--line); }
  .faq-item:last-child{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:0; cursor:pointer;
    padding:26px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-family:'Fraunces', serif; font-size:20px; color:var(--ink);
  }
  .faq-q .plus{ font-family:'IBM Plex Mono', monospace; font-size:20px; transition:transform .3s var(--ease); flex-shrink:0; }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
  .faq-a p{ padding:0 0 26px; color:var(--ink-soft); max-width:640px; }

  /* ---------- BOOKING ---------- */
  .booking{ background:var(--ink); color:var(--paper); }
  .booking .eyebrow{ color:var(--blush); }
  .booking .eyebrow::before{ background:var(--blush); }
  .booking .section-head p{ color:rgba(245,242,236,0.6); }
  form.booking-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(245,242,236,0.6); }
  .field input, .field select, .field textarea{
    background:transparent; border:0; border-bottom:1px solid rgba(245,242,236,0.3);
    color:var(--paper); font-family:'Manrope', sans-serif; font-size:16px; padding:10px 2px;
  }
  .field select option{ color:var(--ink); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blush); }
  .field textarea{ resize:vertical; min-height:90px; }
  .booking-form .btn{ border-color:var(--paper); color:var(--paper); margin-top:8px; width:fit-content; }
  .booking-form .btn:hover{ background:var(--paper); color:var(--ink); }
  .form-note{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blush); margin-top:14px; display:none; }
  .form-note.show{ display:block; }
  @media (max-width:720px){ form.booking-form{ grid-template-columns:1fr; } }

  /* ---------- CONTACT / FOOTER ---------- */
  footer{ padding:80px 0 32px; }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line); }
  .contact-grid h2{ font-size:clamp(30px,5vw,52px); margin-bottom:20px; }
  .contact-list a{ display:block; text-decoration:none; padding:10px 0; border-top:1px solid var(--line-soft); font-family:'IBM Plex Mono', monospace; font-size:14px; }
  .social-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
  .social-row a{
    display:flex; align-items:center; gap:8px; text-decoration:none;
    border:1px solid var(--line); padding:10px 18px; border-radius:999px;
    font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
    transition:all .25s var(--ease);
  }
  .social-row a:hover{ border-color:var(--sage-deep); background:var(--paper-alt); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; gap:12px;}
  @media (max-width:720px){ .contact-grid{ grid-template-columns:1fr; } }