/* ── Reset & Base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #FAF9F6;
  --white:    #FFFFFF;
  --ink:      #1A1A1A;
  --ink-mid:  #4A4A4A;
  --ink-soft: #7A7878;
  --accent:   #B8977E;
  --border:   #E5DED6;
  --gold:     #A67C46;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --display:  'Libre Bodoni', Georgia, serif;
  --wordmark: 'Montserrat', system-ui, sans-serif;
  --sans:     'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography ──────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(3rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }

em { font-style: italic; }

p { color: var(--ink-mid); font-weight: 300; }

.section-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: background 0.25s, color 0.25s;
  cursor: pointer;
}
.btn-light {
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-light:hover {
  background: var(--white);
  color: var(--ink);
}
.btn-dark {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
  width: 100%;
}
.btn-dark:hover {
  background: var(--ink);
  color: var(--white);
}

/* ── Nav ─────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 4rem;
  transition: background 0.3s, padding 0.3s, box-shadow 0.3s;
}
/* Scrim so the logo and links stay legible over light areas of the hero photo.
   Fades out once the nav gets its own solid background on scroll. */
#nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0));
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: -1;
}
#nav.scrolled::before { opacity: 0; }
#nav.scrolled {
  background: rgba(250, 249, 246, 0.97);
  backdrop-filter: blur(8px);
  padding: 1rem 4rem;
  box-shadow: 0 1px 0 var(--border);
}

.nav-logo {
  display: block;
  position: relative;
  line-height: 0;
}
.nav-logo img {
  height: 42px;
  width: auto;
  transition: opacity 0.3s;
}
.nav-logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#nav.scrolled .nav-logo-light { opacity: 0; }
#nav.scrolled .nav-logo-dark  { opacity: 1; }
.nav-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.nav-links {
  display: flex;
  gap: 2.5rem;
}
.nav-links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--white); }
#nav.scrolled .nav-links a { color: var(--ink-soft); }
#nav.scrolled .nav-links a:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--white);
}
#nav.scrolled .nav-toggle { color: var(--ink); }

/* ── Hero ────────────────────────────────────── */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.6) 100%
  );
}
.hero-content {
  position: relative;
  text-align: center;
  color: var(--white);
  padding: 0 2rem;
  max-width: 800px;
}
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.25rem;
}
.hero-content h1 {
  color: var(--white);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.5);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6); }
}

/* ── About ───────────────────────────────────── */
#about {
  padding: 7rem 4rem;
  max-width: 1300px;
  margin: 0 auto;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.about-text h2 { margin-bottom: 2rem; }
.about-text p { margin-bottom: 1.25rem; }
blockquote {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.5;
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.service-item {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.about-image img {
  width: 100%;
  height: auto;
  /* Matches the collage's real 1395x2000 so the box is reserved at the
     right shape before the image loads, and never distorts. */
  aspect-ratio: 1395 / 2000;
  object-fit: cover;
}

/* ── Portfolio ───────────────────────────────── */
#portfolio {
  background: var(--ink);
  padding: 6rem 4rem;
}
.portfolio-header {
  text-align: center;
  margin-bottom: 3rem;
}
.portfolio-header .section-label { color: var(--accent); }
.portfolio-header h2 { color: var(--white); }

/* ── Level 1: one tile per client ── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 1400px;
  margin: 0 auto;
}
.project-tile {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.project-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-tile:hover img,
.project-tile:focus-visible img { transform: scale(1.045); }
.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%);
  transition: opacity 0.4s ease;
}
.project-tile:hover::after { opacity: 0.85; }
.project-tile-meta {
  position: absolute;
  left: 1.5rem;
  bottom: 1.35rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.project-tile-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
}
.project-tile-count {
  font-family: var(--wordmark);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.project-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Level 2: one client's photographs ── */
.project-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.project-detail-head .section-label { color: var(--accent); margin-bottom: 0.4rem; }
.project-detail-head h3 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.1;
}
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  font-family: var(--wordmark);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7rem 1.35rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.project-back:hover {
  border-color: rgba(255,255,255,0.65);
  color: var(--white);
}
.project-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.project-back-x { font-size: 0.9rem; line-height: 1; }

.portfolio-grid {
  columns: 3;
  column-gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}
.grid-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  cursor: pointer;
}
.grid-item img {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.grid-item:hover img { transform: scale(1.04); }
.grid-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  transition: background 0.3s;
}
.grid-item:hover .grid-item-overlay { background: rgba(0,0,0,0.3); }
.grid-item-overlay span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s;
}
.grid-item:hover .grid-item-overlay span {
  opacity: 1;
  transform: translateY(0);
}
.grid-item.hidden { display: none; }

/* ── Contact ─────────────────────────────────── */
#contact {
  padding: 7rem 4rem;
  max-width: 1300px;
  margin: 0 auto;
}
.contact-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.contact-text h2 { margin-bottom: 1.5rem; }
.contact-text p { margin-bottom: 0; max-width: 44ch; }
/* No top padding: the Tally iframe carries its own internal padding above
   the first field, so any added here reads as the form sitting low
   relative to the "Get In Touch" label on the left. */
.contact-meta { padding-top: 0; }
.contact-details { display: flex; flex-direction: column; gap: 2.25rem; }
.contact-details li { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-details a, .contact-details span {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 300;
}
.contact-details a:hover { color: var(--accent); }

/* ── Contact form (HubSpot, via share URL) ───── */
/* The form renders on HubSpot's origin, so it can't be styled from here —
   its colours and fonts are set in HubSpot's form editor. */
/* Height is fixed because the share URL doesn't post resize messages the
   way an embed script would. 790px is measured to the bottom of HubSpot's
   form card at this column width — taller than that and their pale page
   background shows below the Submit button. Narrow screens stack the
   name fields, so the form grows and needs more room. */
.contact-meta iframe {
  width: 100%;
  border: 0;
  display: block;
}
@media (max-width: 620px) {
  .contact-meta iframe { height: 860px; }
}
.contact-details { margin-top: 2.5rem; }

.form-fallback { font-size: 0.9rem; color: var(--ink-mid); }
.form-fallback a { color: var(--accent); text-decoration: underline; }

/* ── Footer ──────────────────────────────────── */
footer {
  text-align: center;
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* ── Lightbox ────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.95);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}
.lightbox-content img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  margin: 0 auto;
}
#lightboxCaption {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-top: 1rem;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 2rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.lightbox-close:hover { color: white; }
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;
  transition: color 0.2s;
}
.lightbox-prev:hover, .lightbox-next:hover { color: white; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .portfolio-grid { columns: 2; }
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

@media (max-width: 620px) {
  .project-grid { grid-template-columns: 1fr; }
  .project-detail-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-tile img { transition: none; }
  .project-tile:hover img,
  .project-tile:focus-visible img { transform: none; }
}

@media (max-width: 768px) {
  #nav { padding: 1.25rem 1.5rem; }
  #nav.scrolled { padding: 0.85rem 1.5rem; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cream);
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 99;
  }
  .nav-links.open a { color: var(--ink); font-size: 1rem; }
  .nav-toggle { display: block; }

  #about, #contact { padding: 5rem 1.5rem; }
  .about-inner, .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* No fixed height here: it dated from the landscape interior photo that
     used to sit in this slot. The portrait collage that replaced it was
     being squashed, since a fixed height with width:100% and no object-fit
     distorts the image. Let it scale on its own ratio instead. */

  #portfolio { padding: 5rem 1rem; }
  .portfolio-grid { columns: 1; }

  .services-grid { grid-template-columns: 1fr; }

  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}