:root{
    --forest:        #1E5B3E;
    --forest-deep:   #143D2A;
    --forest-mid:    #24694A;
    --cream:         #FAF6EF;
    --cream-dim:     #F1ECE1;
    --pink:          #F78DA8;
    --pink-soft:     rgba(247,141,168,0.4);
    --pink-wash:     rgba(247,141,168,0.14);
    --ink:           #17331F;
    --ink-soft:      rgba(23,51,31,0.62);
    --paper:         #FFFFFF;

    --display: 'Fraunces', serif;
    --hand:    'Caveat', cursive;
    --body:    'Jost', sans-serif;

    --edge: 1px solid rgba(23,51,31,0.10);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    font-family: var(--body);
    color: var(--ink);
    background: var(--cream);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing: antialiased;
  }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
  }

  @media (max-width: 640px){
    .wrap{ padding: 0 22px; }
  }

  /* ---------- motion / accessibility ---------- */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  a:focus-visible,
  button:focus-visible{
    outline: 2px solid var(--pink);
    outline-offset: 4px;
    border-radius: 2px;
  }

  /* ================= NAV ================= */

  .nav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(20,61,42,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 18px 32px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .nav-mark{
    display:flex;
    align-items:center;
    gap:10px;
    color: var(--cream);
    font-family: var(--display);
    font-weight:600;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
  }
  .nav-mark svg{ width:26px; height:26px; }
  .nav-links{
    display:flex;
    gap: 30px;
    list-style:none;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-links a{
    color: rgba(250,246,239,0.82);
    transition: color 0.2s ease;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
  }
  .nav-links a:hover{ color: var(--pink); border-color: var(--pink); }
  .nav-links{ display:none; }
  @media (min-width: 760px){ .nav-links{ display:flex; } }

  .nav-cta{
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color: var(--forest-deep);
    background: var(--pink);
    padding: 10px 20px;
    border-radius: 999px;
    white-space:nowrap;
  }

  /* ================= SECTION / DIVIDER SYSTEM ================= */

  section{ position:relative; }

  .panel{
    padding: 108px 0 132px;
  }
  .panel--tight{ padding: 88px 0 108px; }

  .on-forest{ background: var(--forest); color: var(--cream); }
  .on-cream{  background: var(--cream); color: var(--ink); }

  /* angled divider between sections — drawn as a full-bleed svg sitting
     at the seam, coloured to match the section it's introducing */
  .divider{
    position:relative;
    height: 96px;
    margin-bottom: -1px;
  }
  .divider svg{ width:100%; height:100%; display:block; }
  @media (max-width: 640px){ .divider{ height:56px; } }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family: var(--hand);
    font-size: 1.5rem;
    color: var(--pink);
    margin-bottom: 6px;
  }
  .on-forest .eyebrow{ color: var(--pink); }
  .on-cream .eyebrow{ color: var(--forest); }

  h1,h2,h3{
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.12;
  }

  .lede{
    font-weight:300;
    font-size: 1.06rem;
    color: var(--ink-soft);
    max-width: 46ch;
  }
  .on-forest .lede{ color: rgba(250,246,239,0.78); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-size:0.86rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding: 15px 30px;
    border-radius: 999px;
    border: 1px solid currentColor;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .btn-solid{
    background: var(--pink);
    border-color: var(--pink);
    color: var(--forest-deep);
  }
  .btn-solid:hover{ transform: translateY(-2px); }
  .btn-line{
    color: var(--cream);
  }
  .btn-line:hover{ background: rgba(250,246,239,0.1); transform: translateY(-2px); }
  .on-cream .btn-line{ color: var(--forest); }
  .on-cream .btn-line:hover{ background: rgba(30,91,62,0.06); }

  /* ================= HERO ================= */

  .hero{
    padding: 92px 0 60px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    position: relative;
    overflow: hidden;
  }
  .hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
  }
  .hero > .wrap{
    position: relative;
    z-index: 1;
  }
  .hero-mark{ width: 118px; height:118px; margin-bottom: 30px; opacity:0.95; }
  .hero h1{
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    max-width: 15ch;
    margin: 0 auto;
  }
  .hero .accent-word{ font-family: var(--hand); font-weight:500; color: var(--pink); }
  .hero .lede{
    margin: 26px auto 40px;
    text-align:center;
    font-size: 1.12rem;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom: 64px; }

  .hero-strip{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width:100%;
    max-width: 760px;
  }
  .hero-strip .ph{
    aspect-ratio: 4/5;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
  }
  .hero-strip .ph:nth-child(2){ transform: translateY(22px); }
  @media (max-width: 640px){
    .hero-strip .ph:nth-child(2){ transform:none; }
  }

  /* placeholder image blocks — swap background-image later */
  .ph{
    background:
      linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px),
      var(--forest-mid);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(250,246,239,0.6);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform:uppercase;
    text-align:center;
    padding: 10px;
    border-radius: 10px;
  }
  .ph.light{
    background:
      linear-gradient(155deg, rgba(30,91,62,0.10), rgba(30,91,62,0) 55%),
      repeating-linear-gradient(135deg, rgba(30,91,62,0.05) 0 2px, transparent 2px 14px),
      var(--cream-dim);
    color: rgba(23,51,31,0.4);
  }

  /* ================= INTRO / QUOTE ================= */

  .intro{
    text-align:center;
  }
  .intro-inner{ max-width: 660px; margin: 0 auto; }
  .intro h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 22px; }
  .intro p{ font-size: 1.04rem; color: var(--ink-soft); }

  .quote{
    text-align:center;
    padding: 92px 0;
  }
  .quote blockquote{
    font-family: var(--hand);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    color: var(--forest);
    max-width: 18ch;
    margin: 0 auto 18px;
    line-height:1.35;
  }
  .quote cite{
    font-style:normal;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform:uppercase;
    color: var(--forest-mid);
  }

  /* ================= OFFER GRID ================= */

  .offer-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
  @media (max-width: 820px){ .offer-grid{ grid-template-columns: 1fr; max-width:440px; margin-left:auto; margin-right:auto; } }

  .offer-card{
    background: var(--paper);
    border-radius: 22px;
    padding: 38px 30px 34px;
    border: var(--edge);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
  }
  .offer-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -26px rgba(20,61,42,0.35);
  }
  .offer-mark{
    width:44px; height:44px;
    margin-bottom: 20px;
    color: var(--forest);
  }
  .offer-card h3{ font-size: 1.22rem; margin-bottom: 10px; color: var(--forest); }
  .offer-card p{ font-size: 0.94rem; color: var(--ink-soft); }

  .section-head{ max-width: 560px; }
  .section-head.center{ margin: 0 auto; text-align:center; }

  /* ================= ABOUT ================= */

  .about{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items:center;
  }
  @media (max-width: 820px){ .about{ grid-template-columns:1fr; gap:40px; } }
  .about-photo{ aspect-ratio: 3/4; border-radius: 26px; }
  .about h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 20px; }
  .about p + p{ margin-top: 16px; }
  .about-sign{
    font-family: var(--hand);
    font-size: 1.9rem;
    color: var(--forest);
    margin-top: 26px;
  }

  /* ================= GALLERY ================= */

  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 52px;
  }
  .gallery-grid .ph:nth-child(1){ grid-row: span 2; aspect-ratio: 3/4; }
  .gallery-grid .ph:nth-child(2){ aspect-ratio: 1/1; }
  .gallery-grid .ph:nth-child(3){ aspect-ratio: 1/1; }
  .gallery-grid .ph:nth-child(4){ grid-row: span 2; aspect-ratio: 3/4; }
  .gallery-grid .ph:nth-child(5){ aspect-ratio: 1/1; }
  .gallery-grid .ph:nth-child(6){ aspect-ratio: 1/1; }
  @media (max-width: 820px){
    .gallery-grid{ grid-template-columns: repeat(2,1fr); }
    .gallery-grid .ph{ grid-row: auto !important; aspect-ratio: 1/1 !important; }
  }

  /* ================= EVENTS / BLOG SNIPPET ================= */

  .split-two{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 54px;
  }
  @media (max-width: 760px){ .split-two{ grid-template-columns:1fr; } }

  .feature-card{
    background: var(--forest-deep);
    border-radius: 24px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .feature-card .ph{ border-radius:0; aspect-ratio: 16/10; }
  .feature-body{ padding: 28px 28px 32px; }
  .feature-tag{
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform:uppercase;
    color: var(--pink);
    margin-bottom: 10px;
    display:block;
  }
  .feature-card h3{ font-size: 1.3rem; color: var(--cream); margin-bottom: 10px; }
  .feature-card p{ font-size: 0.92rem; color: rgba(250,246,239,0.7); }

  /* ================= CONTACT / FOOTER ================= */

  .contact{
    text-align:center;
  }
  .contact-inner{ max-width: 560px; margin:0 auto; }
  .contact h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 18px; }
  .contact-methods{
    display:flex;
    flex-wrap:wrap;
    gap: 14px;
    justify-content:center;
    margin: 38px 0 8px;
  }
  .contact-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(250,246,239,0.06);
    border: 1px solid rgba(250,246,239,0.16);
    font-size: 0.92rem;
    color: var(--cream);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .contact-pill:hover{ background: rgba(247,141,168,0.14); border-color: var(--pink); }
  .contact-pill svg{ width:16px; height:16px; flex-shrink:0; }

  footer{
    background: var(--forest-deep);
    color: rgba(250,246,239,0.55);
    text-align:center;
    padding: 30px 0 40px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }
  footer .foot-mark{ font-family: var(--hand); color: var(--pink); font-size:1.1rem; display:block; margin-bottom:6px; }