/* ============================================================
   NEAL VISUALS — design tokens
   Palette: warm near-black · parchment · antique brass · deep pine
============================================================ */
:root{
  --ink:        #13110C;   /* warm near-black background */
  --ink-2:      #1A1712;   /* raised surface */
  --ink-3:      #211D16;   /* card surface */
  --parchment:  #EAE2D0;   /* primary cream text */
  --parchment-2:#B4AB94;   /* muted text */
  --parchment-3:#847C68;   /* faint / captions */
  --brass:      #C2A15C;   /* gold accent */
  --brass-2:    #DBBB7C;   /* gold hover / bright */
  --pine:       #2C4635;   /* deep green */
  --pine-2:     #7E9A7F;   /* sage accent */
  --line:       #322C21;   /* hairline */
  --line-2:     #443C2C;   /* stronger hairline */

  --display: "Fraunces", Georgia, serif;
  --body: "Archivo", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle paper grain over the whole page */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 1;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- shared type helpers ---- */
.eyebrow{
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--brass);
  display:inline-block;
}
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.01em; }

/* ============================================================
   HEADER
============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(15,13,9,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-block:12px;
}
.brandmark{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  letter-spacing:.02em;
  color:var(--parchment);
  display:flex; align-items:center; gap:.55ch;
  white-space:nowrap;
}
.brandmark .dot{ color:var(--brass); }
.brand-ic{ width:32px; height:32px; display:block; flex-shrink:0; }
.foot-logo{ display:inline-block; }
.foot-logo img{ width:320px; max-width:74vw; height:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--parchment-2);
  transition:color .25s;
  position:relative;
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--parchment); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--brass); transition:width .3s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ width:100%; }
.header-right{ display:flex; align-items:center; gap:22px; }
.socials{ display:flex; align-items:center; gap:14px; }
.socials a{
  color:var(--parchment-2);
  display:grid; place-items:center;
  transition:color .25s, transform .25s;
}
.socials a:hover,.socials a:focus-visible{ color:var(--brass); transform:translateY(-2px); }
.socials svg{ width:19px; height:19px; }

.menu-btn{
  display:none;
  background:none; border:1px solid var(--line-2); color:var(--parchment);
  width:42px; height:42px; border-radius:2px; cursor:pointer;
}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:120px; padding-bottom:80px;
  border-bottom:1px solid var(--line);
}
/* matte frame lines that "mat" the hero like a framed print */
.hero::before,.hero::after{
  content:""; position:absolute; pointer-events:none; z-index:2;
}
.hero-inner{ position:relative; z-index:3; width:100%; }
.hero-eyebrow{ margin-bottom:28px; }
.hero h1{
  font-size:clamp(52px, 9vw, 132px);
  line-height:.95;
  letter-spacing:-.025em;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--brass);
}
.hero-sub{
  margin-top:30px;
  max-width:52ch;
  font-size:clamp(16px,2vw,19px);
  color:var(--parchment-2);
  line-height:1.65;
}
.hero-cta{ margin-top:44px; display:flex; flex-wrap:wrap; gap:16px; }

.btn{
  font-family:var(--body);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid var(--brass);
  color:var(--ink);
  background:var(--brass);
  border-radius:2px;
  cursor:pointer;
  transition:background .28s, color .28s, transform .28s, border-color .28s;
  display:inline-flex; align-items:center; gap:.7em;
}
.btn:hover,.btn:focus-visible{ background:var(--brass-2); border-color:var(--brass-2); transform:translateY(-2px); }
.btn-ghost{
  background:transparent; color:var(--parchment);
  border-color:var(--line-2);
}
.btn-ghost:hover,.btn-ghost:focus-visible{ background:transparent; border-color:var(--brass); color:var(--brass); transform:translateY(-2px); }
.btn-pay{
  display:flex; justify-content:center; align-items:center; gap:.6em;
  margin-top:10px;
  font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 24px;
  border:1px solid #2C4635; background:#2C4635; color:#EAE2D0;
  border-radius:2px; text-decoration:none;
  transition:background .28s, border-color .28s, transform .28s;
}
.btn-pay:hover,.btn-pay:focus-visible{ background:#37583f; border-color:#37583f; transform:translateY(-2px); }

.hero-locale{
  position:absolute; z-index:3; bottom:40px; right:var(--gutter);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3);
  text-align:right; line-height:1.9;
  display:flex; flex-direction:column;
}
.hero-locale span:first-child{ color:var(--brass); }
@media (max-width:760px){ .hero-locale{ display:none; } }

/* ============================================================
   SECTION SHELL
============================================================ */
.section{ position:relative; z-index:3; padding-block:clamp(80px,12vh,140px); border-bottom:1px solid var(--line); }
.section-head{ display:flex; flex-direction:column; gap:22px; margin-bottom:64px; max-width:var(--wrap); }
.section-head h2{ font-size:clamp(34px,5vw,60px); max-width:16ch; }
.section-head .lead{ color:var(--parchment-2); max-width:56ch; font-size:18px; }

/* ============================================================
   SELECTED WORK — contact sheet
============================================================ */
.work-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.chip{
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 18px;
  background:transparent; color:var(--parchment-2);
  border:1px solid var(--line-2); border-radius:100px; cursor:pointer;
  transition:all .25s;
}
.chip:hover{ color:var(--parchment); border-color:var(--parchment-3); }
.chip.active{ background:var(--parchment); color:var(--ink); border-color:var(--parchment); }

.contact-sheet{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);
}
@media (max-width:900px){ .contact-sheet{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .contact-sheet{ grid-template-columns:1fr; } }

.frame{
  position:relative;
  aspect-ratio:4/5;
  background:var(--ink-3);
  border:1px solid var(--line-2);
  padding:10px;
  overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.frame:hover{ border-color:var(--brass); transform:translateY(-4px); }
/* sprocket strip — the contact-sheet signature */
.frame::before{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,transparent 0 6px,var(--ink) 6px 12px);
  opacity:.5;
}
.frame-inner{
  position:relative; width:100%; height:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(126,154,127,.14), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(194,161,92,.14), transparent 55%),
    var(--ink-2);
  display:grid; place-items:center;
}
.frame-inner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
}
.frame:hover .frame-inner img{ transform:scale(1.05); }
.frame-inner img.missing{ display:none; }
.frame-ph{ /* placeholder label shown until a photo is dropped in */
  text-align:center; padding:16px; pointer-events:none;
}
.frame-ph .cat{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--parchment-2); }
.frame-ph .num{ margin-top:8px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--parchment-3); }
.frame-caption{
  position:absolute; bottom:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-2);
  padding:8px 10px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(transparent, rgba(15,13,9,.72));
}
.frame-caption .tag{ color:var(--brass); }

/* ============================================================
   WHAT I SHOOT — services
============================================================ */
.services{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
}
@media (max-width:900px){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .services{ grid-template-columns:1fr; } }
.svc{
  padding:38px 30px 44px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .35s;
}
.services .svc:nth-child(4n){ border-right:none; }
.svc:hover{ background:var(--ink-2); }
.svc .idx{
  font-family:var(--display); font-size:14px; color:var(--brass); letter-spacing:.1em;
}
.svc h3{ font-size:26px; margin:22px 0 12px; }
.svc p{ color:var(--parchment-2); font-size:15px; line-height:1.6; }
.svc .lead-tag{
  display:inline-block; margin-top:18px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--pine-2);
}

/* ============================================================
   PACKAGES
============================================================ */
.pkg-group-label{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
  margin:8px 0 26px; display:flex; align-items:center; gap:14px;
}
.pkg-group-label::after{ content:""; flex:1; height:1px; background:var(--line); }

.packages{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:60px;
}
@media (max-width:900px){ .packages{ grid-template-columns:1fr; max-width:460px; } }

.pkg{
  background:var(--ink-2);
  border:1px solid var(--line-2);
  padding:34px 30px 34px;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .3s, border-color .3s;
}
.pkg:hover{ transform:translateY(-5px); border-color:var(--parchment-3); }
.pkg.featured{
  border-color:var(--brass);
  background:linear-gradient(180deg, rgba(194,161,92,.06), var(--ink-2) 40%);
}
.pkg.featured::before{
  content:"Most booked";
  position:absolute; top:0; right:24px; transform:translateY(-50%);
  background:var(--brass); color:var(--ink);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}
.pkg-name{ font-family:var(--display); font-size:28px; }
.pkg-for{ margin-top:6px; font-size:13px; letter-spacing:.06em; color:var(--parchment-3); text-transform:uppercase; }
.pkg-price{ margin:22px 0 4px; font-family:var(--display); font-size:46px; color:var(--parchment); line-height:1; }
.pkg-price .cur{ font-size:22px; color:var(--brass); vertical-align:top; margin-right:2px; }
.pkg-price .per{ font-family:var(--body); font-size:14px; color:var(--parchment-3); letter-spacing:.04em; }
.pkg-rule{ height:1px; background:var(--line-2); margin:26px 0 22px; }
.pkg ul{ list-style:none; display:flex; flex-direction:column; gap:13px; flex:1; }
.pkg li{ display:flex; gap:12px; font-size:15px; color:var(--parchment-2); line-height:1.45; }
.pkg li svg{ flex-shrink:0; width:16px; height:16px; margin-top:3px; color:var(--brass); }
.pkg .btn{ margin-top:30px; justify-content:center; }
.pkg.featured .btn{ }
.pkg:not(.featured) .btn{ background:transparent; color:var(--parchment); border-color:var(--line-2); }
.pkg:not(.featured) .btn:hover{ border-color:var(--brass); color:var(--brass); }

.pkg-note{
  text-align:center; color:var(--parchment-2); font-size:16px; max-width:60ch; margin:0 auto;
}
.pkg-note a{ color:var(--brass); border-bottom:1px solid var(--line-2); }
.pkg-note a:hover{ border-color:var(--brass); }

/* ============================================================
   ABOUT
============================================================ */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-copy h2{ font-size:clamp(30px,4.5vw,52px); margin-bottom:26px; }
.about-copy p{ color:var(--parchment-2); margin-bottom:20px; font-size:17px; }
.about-copy strong{ color:var(--parchment); font-weight:600; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--ink); padding:34px 26px; }
.stat .n{ font-family:var(--display); font-size:44px; color:var(--brass); line-height:1; }
.stat .l{ margin-top:10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-2); }

/* ============================================================
   CONTACT / BOOK
============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-copy h2{ font-size:clamp(32px,5vw,56px); margin-bottom:24px; }
.contact-copy p{ color:var(--parchment-2); font-size:17px; margin-bottom:34px; max-width:44ch; }
.contact-lines{ display:flex; flex-direction:column; gap:20px; margin-bottom:36px; }
.contact-line{ display:flex; align-items:center; gap:16px; }
.contact-line .ic{ width:40px; height:40px; border:1px solid var(--line-2); border-radius:2px; display:grid; place-items:center; color:var(--brass); flex-shrink:0; }
.contact-line .ic svg{ width:18px; height:18px; }
.contact-line a,.contact-line span{ font-size:16px; color:var(--parchment); }
.contact-line small{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-3); }
.contact-socials{ display:flex; gap:14px; }
.contact-socials a{
  width:46px; height:46px; border:1px solid var(--line-2); border-radius:2px;
  display:grid; place-items:center; color:var(--parchment-2); transition:all .25s;
}
.contact-socials a:hover{ color:var(--brass); border-color:var(--brass); transform:translateY(-3px); }
.contact-socials svg{ width:20px; height:20px; }

/* two booking doors */
.book-paths{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.path{
  display:block; padding:22px 24px; border-radius:2px;
  border:1px solid var(--line-2); background:var(--ink-2);
  transition:border-color .3s, transform .3s, background .3s;
}
.path:hover{ transform:translateY(-3px); }
.path-a{ border-color:var(--brass); background:linear-gradient(180deg, rgba(194,161,92,.07), var(--ink-2) 60%); }
.path-a:hover{ border-color:var(--brass-2); }
.path-b:hover{ border-color:var(--parchment-3); }
.path-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; }
.path-name{ font-family:var(--display); font-size:22px; color:var(--parchment); }
.path-badge{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; white-space:nowrap;
}
.path-a .path-badge{ background:var(--brass); color:var(--ink); }
.path-b .path-badge{ background:transparent; color:var(--parchment-3); border:1px solid var(--line-2); }
.path p{ color:var(--parchment-2); font-size:14px; line-height:1.5; margin:0; max-width:none; }
.path-arrow{ color:var(--brass); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-top:12px; display:inline-flex; align-items:center; gap:.5em; }
.form-kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; display:block; }

.form{ background:var(--ink-2); border:1px solid var(--line-2); padding:clamp(26px,4vw,42px); }
.form .field{ margin-bottom:20px; }
.form label{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-2); margin-bottom:9px; }
.form input,.form select,.form textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-2); color:var(--parchment);
  font-family:var(--body); font-size:15px; padding:14px 15px; border-radius:2px;
  transition:border-color .25s;
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--brass); }
.form textarea{ resize:vertical; min-height:110px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form .row{ grid-template-columns:1fr; } }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-hp{ position:absolute; left:-9999px; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer{
  position:relative; z-index:3;
  padding:60px var(--gutter) 40px;
  display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between;
}
.site-footer .brandmark{ font-size:26px; }
.foot-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-nav a{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment-2); }
.foot-nav a:hover{ color:var(--brass); }
.foot-legal{ width:100%; border-top:1px solid var(--line); padding-top:26px; margin-top:10px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:12px; letter-spacing:.08em; color:var(--parchment-3); }

/* ============================================================
   REVEAL ANIMATION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .frame:hover .frame-inner img{ transform:none; }
}

/* ---- mobile nav ---- */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--ink-2); border-left:1px solid var(--line-2);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:28px; padding:0 40px;
    transform:translateX(100%); transition:transform .4s ease; z-index:60;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:16px; }
  .menu-btn{ display:grid; place-items:center; z-index:61; }
  .header-right .socials{ display:none; }
}

/* ============================================================
   CATEGORY SUBPAGES
============================================================ */
.subpage{ padding-top:110px; }
.page-hero{ padding-block:clamp(50px,9vh,100px) 20px; }
.backlink{ display:inline-flex; align-items:center; gap:.5em; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--parchment-2); margin-bottom:26px; }
.backlink:hover{ color:var(--brass); }
.pkg-norush{ margin:-2px 0 0; font-size:13px; font-style:italic; color:var(--parchment-3); }
.pkg-flag{ display:inline-flex; align-items:center; gap:.4em; margin-top:2px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.infobox{ border:1px solid var(--line-2); border-radius:4px; padding:24px 26px; margin-top:34px; background:var(--ink-2); }
.infobox h3{ font-family:var(--display); font-size:20px; margin-bottom:12px; }
.infobox p{ color:var(--parchment-2); font-size:15px; }
.infobox .pill{ display:inline-block; margin:6px 8px 0 0; padding:6px 13px; border:1px solid var(--line-2);
  border-radius:100px; font-size:13px; color:var(--parchment); }
.infobox .pill b{ color:var(--brass); }
.travel-grid{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:6px; }
.travel-grid span{ font-size:15px; color:var(--parchment-2); }
.travel-grid b{ color:var(--parchment); }
/* category tiles on home */
.cat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); }
@media (max-width:960px){ .cat-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cat-tiles{ grid-template-columns:1fr; max-width:420px; } }
.cat-tile{ display:flex; flex-direction:column; padding:30px 26px; border:1px solid var(--line-2);
  border-radius:6px; background:var(--ink-3); transition:transform .3s, border-color .3s; }
.cat-tile:hover{ transform:translateY(-5px); border-color:var(--parchment-3); }
.cat-tile .ct-name{ font-family:var(--display); font-size:26px; }
.cat-tile .ct-desc{ color:var(--parchment-2); font-size:14.5px; margin:12px 0 18px; flex:1; line-height:1.55; }
.cat-tile .ct-from{ font-size:13px; letter-spacing:.04em; color:var(--parchment-3); margin-bottom:20px; }
.cat-tile .ct-from b{ font-family:var(--display); font-size:24px; color:var(--parchment); letter-spacing:0; }