:root{
    --ink:#16232C;
    --ink-soft:#233642;
    --chart:#2B4C5E;
    --chart-soft:#3A5F73;
    --brass:#C89B3C;
    --brass-soft:#E0B85C;
    --coral:#E2664B;
    --fog:#EDE7DC;
    --fog-dim:#E2DBCC;
    --foam:#9FB8AE;
    --paper:#FBFAF6;

    --font-display:'Fraunces', serif;
    --font-body:'Public Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --gauge-width:34px;
    --nav-height:76px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:600; }
  p{ margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; cursor:pointer; }

  :focus-visible{
    outline:3px solid var(--coral);
    outline-offset:3px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:0.5em;
  }
  .eyebrow::before{
    content:"";
    width:14px;
    height:1px;
    background:currentColor;
    display:inline-block;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 6vw;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5vw;
    padding-right:calc(5vw + var(--gauge-width));
    background:rgba(22,35,44,0.92);
    backdrop-filter:blur(6px);
    z-index:100;
    transition:background 0.3s ease;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:0.65rem;
    color:var(--fog);
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:0.01em;
  }
  .brand img{
    width:34px;
    height:34px;
    flex-shrink:0;
  }
  .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  .brand-text .word-main{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.08rem;
    letter-spacing:0.015em;
    text-transform:uppercase;
    color:var(--fog);
  }
  .brand-text .word-sub{
    display:flex;
    align-items:center;
    gap:0.45em;
    margin-top:0.22rem;
    font-family:var(--font-mono);
    font-size:0.6rem;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--brass-soft);
  }
  .brand-text .word-sub::before,
  .brand-text .word-sub::after{
    content:"";
    width:13px;
    height:1px;
    background:var(--brass-soft);
    opacity:0.75;
    flex-shrink:0;
  }
  nav.links{
    display:flex;
    gap:2.1rem;
  }
  nav.links a{
    font-size:0.86rem;
    color:var(--fog-dim);
    position:relative;
    padding:0.3rem 0;
    transition:color 0.2s ease;
  }
  nav.links a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:1px;
    background:var(--brass-soft);
    transition:right 0.25s ease;
  }
  nav.links a:hover,
  nav.links a.active{
    color:var(--paper);
  }
  nav.links a.active::after,
  nav.links a:hover::after{
    right:0;
  }
  .nav-cta{
    display:none;
  }
  @media (min-width:1000px){
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      background:var(--coral);
      color:var(--paper);
      font-size:0.82rem;
      font-weight:600;
      padding:0.6rem 1.1rem;
      border-radius:100px;
      margin-left:2rem;
    }
  }

  .hamburger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px;
    height:34px;
    background:none;
    border:none;
    padding:0;
  }
  .hamburger span{
    height:2px;
    background:var(--fog);
    border-radius:2px;
  }
  @media (min-width:1000px){ .hamburger{ display:none; } }
  @media (max-width:999px){ nav.links{ display:none; } }

  .mobile-menu{
    position:fixed;
    top:var(--nav-height); left:0; right:0;
    background:var(--ink);
    border-top:1px solid rgba(237,231,220,0.15);
    z-index:99;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .mobile-menu.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .mobile-menu ul{ padding:1rem 5vw 1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
  .mobile-menu a{ color:var(--fog); font-size:1rem; }

  /* ---------- TIDE GAUGE (signature nav element) ---------- */
  .tide-gauge{
    position:fixed;
    top:var(--nav-height);
    right:0;
    bottom:0;
    width:var(--gauge-width);
    z-index:90;
    background:var(--ink-soft);
    border-left:1px solid rgba(237,231,220,0.12);
  }
  .tide-gauge .track{
    position:relative;
    height:100%;
    width:100%;
  }
  .tide-gauge .water{
    position:absolute;
    bottom:0; left:0; right:0;
    height:0%;
    background:linear-gradient(180deg, var(--foam), var(--chart-soft) 55%, var(--chart) 100%);
    transition:height 0.15s linear;
  }
  .tide-gauge .water::before{
    content:"";
    position:absolute;
    top:-3px; left:0; right:0;
    height:6px;
    background:var(--foam);
    opacity:0.6;
    border-radius:50%;
  }
  .tide-gauge .ticks{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:14px 0;
  }
  .tide-gauge .tick{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tide-gauge .tick .dot{
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(237,231,220,0.4);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .tide-gauge .tick.active .dot{
    background:var(--coral);
    transform:scale(1.6);
  }
  .tide-gauge .tick .label{
    position:absolute;
    right:calc(var(--gauge-width) + 10px);
    white-space:nowrap;
    font-family:var(--font-mono);
    font-size:0.66rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--fog);
    background:var(--ink);
    padding:3px 8px;
    border-radius:4px;
    opacity:0;
    transform:translateX(6px);
    transition:opacity 0.2s ease, transform 0.2s ease;
    pointer-events:none;
  }
  .tide-gauge .tick.active .label{
    opacity:1;
    transform:translateX(0);
  }
  @media (max-width:999px){
    .tide-gauge{
      top:var(--nav-height);
      right:0; left:0; bottom:auto;
      height:3px;
      width:auto;
      border-left:none;
      border-bottom:1px solid rgba(237,231,220,0.12);
    }
    .tide-gauge .track{ height:3px; }
    .tide-gauge .water{
      left:0; bottom:auto; top:0; right:auto; height:100% !important;
      width:0%;
      transition:width 0.15s linear;
    }
    .tide-gauge .ticks{ display:none; }
    header.nav{ padding-right:5vw; }
  }

  /* ---------- WAVE DIVIDER ---------- */
  .wave{
    display:block;
    width:100%;
    height:60px;
    margin-bottom:-1px;
  }

  /* ---------- HERO ---------- */
  .hero{
    background:var(--ink);
    color:var(--fog);
    padding-top:calc(var(--nav-height) + 5.5rem);
    padding-bottom:4.5rem;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(237,231,220,0.045) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(237,231,220,0.045) 0 1px, transparent 1px 64px);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:3rem;
    align-items:center;
  }
  @media (max-width:900px){
    .hero-inner{ grid-template-columns:1fr; }
  }
  .hero h1{
    font-size:clamp(2.4rem, 5vw, 4rem);
    line-height:1.05;
    letter-spacing:-0.01em;
    max-width:14ch;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--brass-soft);
  }
  .hero .eyebrow{ color:var(--foam); margin-bottom:1.3rem; }
  .hero p.lede{
    margin-top:1.4rem;
    font-size:1.08rem;
    line-height:1.6;
    max-width:42ch;
    color:var(--fog-dim);
  }
  .hero-ctas{
    margin-top:2.2rem;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  .hero-ctas-label{
    margin-top:2.6rem;
    margin-bottom:0.8rem;
    font-family:var(--font-mono);
    font-size:1rem;
    font-weight:700;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--brass-soft);
  }
  .hero-ctas-row{
    display:flex;
    gap:0.9rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:0.4rem;
  }
  .hero-ctas-row .btn{ flex:0 0 auto; }
  @media (max-width: 640px){
    .hero-ctas-row{ flex-wrap:wrap; overflow-x:visible; }
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.85rem 1.5rem;
    border-radius:100px;
    font-weight:600;
    font-size:0.92rem;
    border:1px solid transparent;
    transition:transform 0.15s ease, background 0.2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-coral{ background:var(--coral); color:var(--paper); }
  .btn-ghost{ border-color:rgba(237,231,220,0.35); color:var(--fog); }
  .btn-ghost:hover{ background:rgba(237,231,220,0.08); }
  .btn-chart{ background:var(--chart); color:var(--paper); }
  .btn-brass{ background:var(--brass); color:var(--ink); }
  .btn-paper{ background:var(--paper); color:var(--ink); border-color:rgba(22,35,44,0.12); }

  /* compass rose */
  .compass{
    position:relative;
    width:min(320px, 80vw);
    margin:0 auto;
    aspect-ratio:1;
  }
  .compass svg{ width:100%; height:100%; }
  .compass .bearing{
    cursor:pointer;
  }
  .compass .bearing text{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:0.05em;
    fill:var(--fog-dim);
    transition:fill 0.2s ease;
  }
  .compass .bearing:hover text{ fill:var(--brass-soft); }

  /* ---------- SECTION SCAFFOLD ---------- */
  section{ position:relative; scroll-margin-top:calc(var(--nav-height) + 10px); }
  .section-pad{ padding:5.5rem 0 6rem; }
  .section-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-bottom:3rem;
    align-items:end;
  }
  @media (max-width:800px){
    .section-head{ grid-template-columns:1fr; }
  }
  .section-head h2{
    font-size:clamp(1.9rem, 3.4vw, 2.6rem);
    line-height:1.1;
  }

  /* ---------- WAFFLES ---------- */
  .waffles{ background:var(--fog); }
  .waffle-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.4rem;
  }
  @media (max-width:800px){ .waffle-grid{ grid-template-columns:1fr; } }
  .waffle-card{
    background:var(--paper);
    border:1px solid var(--fog-dim);
    border-radius:14px;
    padding:1.8rem;
  }
  .waffle-icon{
    width:44px; height:44px;
    margin-bottom:1.1rem;
  }
  .waffle-card h3{ font-size:1.15rem; margin-bottom:0.5rem; }
  .waffle-card p{ font-size:0.92rem; line-height:1.55; color:var(--ink-soft); }
  .waffle-note{
    margin-top:2.6rem;
    display:flex;
    gap:1.2rem;
    align-items:flex-start;
    background:var(--paper);
    border-left:3px solid var(--brass);
    border-radius:4px;
    padding:1.3rem 1.6rem;
  }
  .waffle-note p{ font-size:0.95rem; line-height:1.6; color:var(--ink-soft); }
  .waffle-note strong{ color:var(--ink); }

  /* ---------- EVENTS / WEDDINGS ---------- */
  .events{ background:var(--chart); color:var(--fog); }
  .events .section-head p{ color:var(--foam); font-size:1rem; line-height:1.6; max-width:46ch; }
  .events-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.5rem;
  }
  @media (max-width:800px){ .events-grid{ grid-template-columns:1fr; } }

  .services-grid-4{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
  }
  @media (max-width:900px){ .services-grid-4{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .services-grid-4{ grid-template-columns:1fr; } }

  .services-grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.5rem;
  }
  @media (max-width:900px){ .services-grid-3{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .services-grid-3{ grid-template-columns:1fr; } }
  .event-card{
    background:rgba(251,250,246,0.05);
    border:1px solid rgba(251,250,246,0.15);
    border-radius:14px;
    padding:2rem;
    scroll-margin-top:calc(var(--nav-height) + 10px);
  }
  .event-card .eyebrow{ color:var(--foam); margin-bottom:0.9rem; }
  .event-card h3{ font-size:1.4rem; color:var(--paper); margin-bottom:0.7rem; }
  .event-card p{ font-size:0.95rem; line-height:1.6; color:var(--fog-dim); }
  .event-card ul{ margin-top:1.1rem; display:flex; flex-direction:column; gap:0.55rem; }
  .event-card li{ font-size:0.88rem; color:var(--fog-dim); display:flex; gap:0.6rem; }
  .event-card li::before{ content:"—"; color:var(--brass-soft); }

  /* ---------- CATERING ---------- */
  .catering{ background:var(--paper); }
  .catering-card{
    background:var(--paper);
    border:1px solid rgba(22,35,44,0.1);
    box-shadow:0 1px 2px rgba(22,35,44,0.04);
  }
  .catering-card .eyebrow{ margin-bottom:0.9rem; }
  .catering-card h3{ color:var(--ink); }
  .catering-card p{ color:var(--ink-soft); }
  .catering-card li{ color:var(--ink-soft); }
  .kids-card{
    border:1px solid rgba(226,102,75,0.28);
    background:rgba(226,102,75,0.04);
  }

  .photo-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:1rem;
    margin-top:2rem;
  }
  .photo-slot{
    border:1px dashed rgba(22,35,44,0.2);
    border-radius:10px;
    background:rgba(22,35,44,0.03);
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-align:center;
    padding:0.5rem;
  }

  /* ---------- PAT TESTING ---------- */
  .pat{ background:var(--paper); }
  .pat-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
    align-items:start;
  }
  @media (max-width:900px){ .pat-inner{ grid-template-columns:1fr; } }
  .pat-copy .eyebrow{ color:var(--chart); margin-bottom:1rem; }
  .pat-copy h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.12; margin-bottom:1.2rem; }
  .pat-copy p{ font-size:1rem; line-height:1.65; color:var(--ink-soft); margin-bottom:1.1rem; }
  .pat-person{
    display:flex;
    gap:1rem;
    align-items:center;
    margin-top:1.6rem;
    padding:1.1rem 1.3rem;
    background:var(--fog);
    border-radius:12px;
  }
  .pat-avatar{
    width:46px; height:46px;
    border-radius:50%;
    background:var(--chart);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--paper);
    font-family:var(--font-display);
    font-weight:600;
  }
  .pat-person p{ font-size:0.86rem; line-height:1.5; color:var(--ink-soft); margin:0; }
  .pat-person strong{ color:var(--ink); }

  .pat-panel{
    background:var(--ink);
    border-radius:16px;
    padding:2.2rem;
    color:var(--fog);
  }
  .pat-panel .eyebrow{ color:var(--foam); }
  .pat-panel h3{
    font-family:var(--font-mono);
    font-size:0.95rem;
    letter-spacing:0.04em;
    margin:1rem 0 1.4rem;
    color:var(--brass-soft);
  }
  .pat-checklist{ display:flex; flex-direction:column; gap:0.9rem; }
  .pat-checklist li{
    display:flex;
    gap:0.75rem;
    font-size:0.9rem;
    line-height:1.5;
    color:var(--fog-dim);
    align-items:flex-start;
  }
  .pat-checklist svg{ flex-shrink:0; margin-top:2px; }
  .pat-panel .divider{
    height:1px;
    background:rgba(237,231,220,0.15);
    margin:1.6rem 0;
  }
  .pat-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .pat-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--paper); }
  .pat-stats .stat span{ font-size:0.78rem; color:var(--fog-dim); }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--ink); color:var(--fog); }
  .about-inner{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:3rem;
    align-items:center;
  }
  @media (max-width:900px){ .about-inner{ grid-template-columns:1fr; } }
  .about h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:1.3rem; }
  .about p{ font-size:1rem; line-height:1.7; color:var(--fog-dim); margin-bottom:1rem; }
  .about-mark{
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.3rem;
    color:var(--brass-soft);
    line-height:1.5;
    border-left:2px solid var(--brass);
    padding-left:1.4rem;
  }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--fog); }
  .contact-inner{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:3rem;
  }
  @media (max-width:900px){ .contact-inner{ grid-template-columns:1fr; } }
  .contact-info h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:1.1rem; }
  .contact-info p{ font-size:1rem; line-height:1.65; color:var(--ink-soft); margin-bottom:1.6rem; }
  .contact-methods{ display:flex; flex-direction:column; gap:1rem; }
  .contact-methods a{
    display:flex; align-items:center; gap:0.8rem;
    font-size:0.95rem; font-weight:600;
    padding:0.9rem 1.1rem;
    background:var(--paper);
    border:1px solid var(--fog-dim);
    border-radius:10px;
  }
  form.enquiry{
    background:var(--paper);
    border:1px solid var(--fog-dim);
    border-radius:16px;
    padding:2rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
  }
  .field{ display:flex; flex-direction:column; gap:0.4rem; }
  .field label{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); }
  .field input, .field select, .field textarea{
    font-family:inherit;
    font-size:0.94rem;
    padding:0.75rem 0.9rem;
    border:1px solid var(--fog-dim);
    border-radius:8px;
    background:var(--paper);
    color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:100px; }
  .field-hint{ font-size:0.8rem; color:var(--ink-soft); line-height:1.5; margin:-0.15rem 0 0; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
  .enquiry .btn{ align-self:flex-start; border:none; }
  .form-note{ font-size:0.78rem; color:var(--ink-soft); }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:var(--fog-dim);
    padding:2.6rem 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
  }
  .footer-inner .brand{ font-size:1.05rem; }
  footer .fine{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; color:rgba(237,231,220,0.5); }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
  }

  /* ---------------- Gallery ---------------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.1rem;
  }
  @media (max-width:1100px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:800px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

  .gallery-item{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    margin:0;
    border:none;
    background:var(--ink);
    cursor:zoom-in;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:4/3;
  }
  .gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
  }
  .gallery-item:hover img{ transform:scale(1.06); }
  .gallery-item .gallery-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:0.9rem 1rem 0.7rem;
    background:linear-gradient(to top, rgba(22,35,44,0.85), transparent);
    color:var(--paper);
    font-family:var(--font-mono);
    font-size:0.78rem;
    text-align:left;
    letter-spacing:0.02em;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .gallery-item:hover .gallery-caption,
  .gallery-item:focus-visible .gallery-caption{
    opacity:1;
    transform:translateY(0);
  }

  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(22,35,44,0.94);
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index:500;
    padding:2rem;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{
    max-width:90vw;
    max-height:78vh;
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .lightbox-caption{
    color:var(--fog);
    margin-top:1.1rem;
    font-family:var(--font-mono);
    font-size:0.85rem;
    text-align:center;
    max-width:60ch;
  }
  .lightbox-close{
    position:absolute;
    top:1.4rem;
    right:1.6rem;
    background:none;
    border:none;
    color:var(--fog);
    font-size:2.4rem;
    line-height:1;
    cursor:pointer;
    padding:0.4rem 0.7rem;
  }
  .lightbox-close:hover{ color:var(--coral); }