/* Studio Loom — shared stylesheet. Extracted from the original one-page site and
   extended with components needed for a multi-page architecture (breadcrumbs, FAQ
   accordion, services dropdown, calculator panel, multi-column footer). Brand
   palette, type, and existing component patterns are preserved, not redesigned. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --text-body: 0.95rem;  /* the one paragraph size, used everywhere */
  --umber: #211A14;
  --bone: #FAF7F2;
  --sand: #E8DFD0;
  --terracotta: #BC6044;
  --greige: #A09080;
  --espresso: #4A3F35;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --pad-h: 4rem;
  --pad-v: 5rem;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bone);
  color: var(--umber);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }

/* ============ NAV ============ */
/* Scoped to #navbar (not the bare `nav` element) so page-level <nav class="breadcrumb">
   elements elsewhere on the page don't inherit the fixed site-header positioning. */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem var(--pad-h);
  background: transparent;
  transition: padding 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled, #navbar.solid {
  padding: 1rem var(--pad-h);
  background: var(--bone);
  border-bottom-color: rgba(33,26,20,0.1);
}
.nav-logo { display: flex; flex-direction: row; align-items: center; gap: 0.9rem; text-decoration: none; }
.nav-logo-mark { width: 36px; height: 36px; transition: filter 0.4s; filter: invert(1) brightness(0.9); }
#navbar.scrolled .nav-logo-mark, #navbar.solid .nav-logo-mark { filter: invert(0) brightness(0.15); }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-logo-studio {
  font-family: var(--font-body); font-weight: 400; font-size: 0.6rem;
  letter-spacing: 0.35em; text-transform: uppercase; color: rgba(250,247,242,0.8); line-height: 1;
  transition: color 0.4s;
}
#navbar.scrolled .nav-logo-studio, #navbar.solid .nav-logo-studio { color: var(--umber); }
.nav-logo-loom {
  font-family: var(--font-display); font-weight: 300; font-size: 1.6rem;
  color: var(--bone); line-height: 1; letter-spacing: 0.02em; transition: color 0.4s;
}
#navbar.scrolled .nav-logo-loom, #navbar.solid .nav-logo-loom { color: var(--umber); }

.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a {
  font-family: var(--font-body); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,242,0.85);
  text-decoration: none; transition: color 0.25s;
}
#navbar.scrolled .nav-links a, #navbar.solid .nav-links a { color: var(--espresso); }
.nav-links a:hover { color: var(--terracotta) !important; }

.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 1.4rem;
  background: var(--bone);
  border: 1px solid rgba(33,26,20,0.1);
  box-shadow: 0 20px 40px rgba(33,26,20,0.12);
  min-width: 300px;
  padding: 0.6rem 0;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-links > li:hover .nav-dropdown,
.nav-links > li:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown a {
  display: block; padding: 0.85rem 1.6rem;
  color: var(--espresso) !important; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: none; font-family: var(--font-display); font-size: 0.98rem; font-weight: 400;
}
.nav-dropdown a:hover { background: var(--sand); color: var(--terracotta) !important; }

.nav-cta {
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone);
  border: 1px solid var(--terracotta); padding: 0.75rem 1.6rem;
  text-decoration: none; transition: all 0.25s; background: var(--terracotta);
}
#navbar.scrolled .nav-cta, #navbar.solid .nav-cta { background: var(--terracotta); border-color: var(--terracotta); color: var(--bone); }
.nav-cta:hover, #navbar.scrolled .nav-cta:hover, #navbar.solid .nav-cta:hover { background: #a0503a !important; border-color: #a0503a !important; }

.nav-toggle { display: none; }

/* ============ HERO — full bleed (homepage) ============ */
.hero-full {
  position: relative;
  min-height: 100vh; /* fallback for browsers without dvh support */
  min-height: 100dvh; /* avoids the mobile address-bar jump 100vh causes on load */
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slideshow { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(15,10,6,0.55) 0%, rgba(15,10,6,0.52) 40%, rgba(15,10,6,0.72) 100%);
}
.hero-content { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad-h) 5rem; }
.hero-tag {
  font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--bone); margin-bottom: 2rem;
  display: block; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 14px rgba(0,0,0,0.4);
}
.hero-headline {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 6vw, 6.5rem); line-height: 1.05;
  color: var(--bone); margin-bottom: 1.5rem; letter-spacing: -0.01em;
  max-width: 900px;
}
.hero-headline em { font-style: italic; color: rgba(250,247,242,0.88); }
.hero-subtext {
  font-family: var(--font-body); font-weight: 300; font-size: var(--text-body);
  line-height: 1.8; color: rgba(250,247,242,0.82); max-width: 560px; margin-bottom: 2.5rem;
}
.hero-actions { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }

/* ============ HERO — page hero (interior pages, shorter, static image) ============ */
.page-hero {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end;
  padding: 0; overflow: hidden; margin-top: 0;
}
.page-hero .hero-content { padding: 0 var(--pad-h) 4rem; }
/* Full-frame hero: the section takes the photo's own 16:9 ratio, so the image is never cropped */
.page-hero.hero-full-frame { min-height: 0; aspect-ratio: 16 / 9; }
.hero-full-frame .hero-bg img { object-fit: contain; }
/* 3:2 photos: the banner is exactly the photo's own 3:2 shape at full width, so nothing is cropped and there are no side bands.
   Text sits bottom-left like every other banner. */
.page-hero.hero-ratio-32 { width: 100%; aspect-ratio: 3 / 2; }
/* The 3:2 banner can be taller than the screen, so the title block is anchored to the bottom of the first screen
   (or the bottom of the banner, if that comes first) and never falls below the fold. */
@media (min-width: 769px) {
  /* bottom offset = how far the banner extends past the first screen (0 when it fits) */
  .hero-ratio-32 .hero-content { position: absolute; left: 0; right: 0; bottom: max(0px, calc(100% - 100vh)); bottom: max(0px, calc(100% - 100svh)); }
}
@media (max-width: 768px) {
  /* Narrow screens: photo sits at its own ratio, title block follows below it */
  .page-hero.hero-full-frame { aspect-ratio: auto; flex-direction: column; align-items: stretch; background: var(--umber); }
  .hero-full-frame .hero-bg { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .hero-ratio-32 .hero-bg { aspect-ratio: 3 / 2; }
  .hero-full-frame .hero-overlay { display: none; }
  .hero-full-frame .hero-content { padding-top: 2rem; }
}
.page-hero .hero-headline { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.page-hero .hero-headline em { font-size: 0.5em; }

/* Breadcrumb */
.breadcrumb {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(250,247,242,0.6); margin-bottom: 1.6rem;
}
.breadcrumb a { text-decoration: none; color: rgba(250,247,242,0.6); }
.breadcrumb a:hover { color: var(--terracotta); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb.on-light { color: var(--greige); }
.breadcrumb.on-light a { color: var(--espresso); }

/* ============ BUTTONS ============ */
.btn-primary {
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone);
  background: var(--terracotta); padding: 1rem 2.2rem; text-decoration: none;
  transition: background 0.25s; display: inline-block; border: none; cursor: pointer;
}
.btn-primary:hover { background: #a0503a; }
/* Nav "Get in touch" and the link-style "Send a brief" button share one box: same padding, border, line-height, and min-width (font size untouched) */
.nav-cta, a.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 11.5rem; padding: 0.75rem 1.6rem; line-height: 1.2; border: 1px solid var(--terracotta); text-align: center;
}
a.btn-primary:hover { border-color: #a0503a; }
.btn-ghost {
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,242,0.85);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.7rem;
  transition: color 0.25s; background: none; border: none; cursor: pointer;
}
.btn-ghost::before { content: '→'; letter-spacing: -0.1em; font-size: 0.75rem; }
.btn-ghost:hover { color: var(--bone); }
.btn-ghost.on-dark-bg { color: var(--umber); }
.btn-ghost.on-dark-bg:hover { color: var(--terracotta); }
.btn-outline {
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--umber);
  background: transparent; border: 1px solid rgba(33,26,20,0.35);
  padding: 1rem 2.2rem; text-decoration: none; display: inline-block;
  transition: all 0.25s; cursor: pointer;
}
.btn-outline:hover { background: var(--umber); color: var(--bone); border-color: var(--umber); }
.btn-outline.on-dark { color: var(--bone); border-color: rgba(250,247,242,0.5); }
.btn-outline.on-dark:hover { background: var(--bone); color: var(--umber); border-color: var(--bone); }

/* ============ SECTIONS ============ */
section { padding: var(--pad-v) var(--pad-h); }
.section-label {
  font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 1.1rem;
  display: block;
}
.section-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 3.5vw, 3.4rem); line-height: 1.1; color: var(--umber); letter-spacing: -0.01em;
}
.section-title em { font-style: italic; color: var(--terracotta); }
.section-title.on-dark { color: var(--bone); }
.body-copy {
  font-family: var(--font-body); font-weight: 300; font-size: var(--text-body);
  line-height: 1.8; color: var(--espresso); max-width: 620px;
}
.body-copy + .body-copy { margin-top: 1.2rem; }
.body-copy.on-dark { color: rgba(250,247,242,0.72); }

/* ============ SPLIT SECTION (about-style, image + text) ============ */
.split-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; padding: 0;
}
.split-section.dark { background: var(--umber); color: var(--bone); }
.split-section .split-text { padding: var(--pad-v) var(--pad-h); display: flex; flex-direction: column; justify-content: center; }
.split-section .split-text .body-copy { max-width: 520px; }
.split-section.dark .section-label { color: var(--terracotta); }
.split-section.dark .section-title { color: var(--bone); }
.split-img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 600px; }
/* When .split-img is wrapped in <picture> (for AVIF/WebP sources), the picture becomes the
   direct grid item in place of the img — blockify it so the grid's align-items:stretch still
   fills the cell the way the bare img used to. */
.split-section > picture { display: block; width: 100%; height: 100%; }
/* Inset variant — image is framed with equal breathing room on all sides instead of full-bleed */
.split-img-inset { width: 100%; height: 100%; padding: var(--pad-v) var(--pad-h); box-sizing: border-box; display: flex; align-items: center; }
/* <picture> defaults to display:inline (shrink-to-fit); without this it won't fill the
   padded box the way the bare <img> used to, and object-fit:cover on the img would have
   nothing to fill. */
.split-img-inset picture { display: block; width: 100%; }
/* Images are 3:2 — render at their own ratio, centred in the cell, never cropped */
.split-img-inset img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
.split-img-inset img.portrait { aspect-ratio: 4 / 5; }  /* fills the cell width */
.split-img-inset:has(img.portrait) { align-items: flex-start; }  /* top-aligned with the form */
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }

/* Gallery placeholder tile — used where a project's gallery has fewer real photos than slots */
.gallery-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--sand);
  color: var(--greige);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Philosophy grid */
.about-philosophy { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3.5rem; }
.philosophy-item { border-top: 1px solid rgba(250,247,242,0.12); padding-top: 1.5rem; }
.split-section:not(.dark) .philosophy-item { border-top-color: rgba(33,26,20,0.12); }
.philosophy-title { font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); margin-bottom: 0.5rem; }
.split-section:not(.dark) .philosophy-title { color: var(--umber); }
.philosophy-desc { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: rgba(250,247,242,0.65); }
.split-section:not(.dark) .philosophy-desc { color: var(--espresso); }

/* ============ SERVICE / CARD GRIDS ============ */
.services-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3.5rem; max-width: 700px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(33,26,20,0.12); border-left: 1px solid rgba(33,26,20,0.12); }
.cards-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.service-card {
  padding: 3rem 2.5rem; border-right: 1px solid rgba(33,26,20,0.12); border-bottom: 1px solid rgba(33,26,20,0.12);
  transition: background 0.3s; text-decoration: none; color: inherit; display: block;
}
.service-card:hover { background: var(--sand); }
.service-name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--umber); margin-bottom: 1rem; }
.service-desc { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: var(--espresso); }
.service-card .learn-more { display: inline-block; margin-top: 1.6rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); transition: color 0.2s; }
.service-card:hover .learn-more { color: #a0503a; }
/* Equal-height cards with the Learn more link pinned to the same baseline */
.cards-grid > a.service-card { display: flex; flex-direction: column; align-items: flex-start; }
.cards-grid > a.service-card .learn-more { margin-top: auto; }
.cards-grid > a.service-card .service-desc { margin-bottom: 1.6rem; }

/* ============ WORK / PORTFOLIO GRID ============ */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pg-item { overflow: hidden; position: relative; aspect-ratio: 4 / 3; text-decoration: none; display: block; }
.pg-item.wide { grid-column: span 2; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.pg-item:hover img { transform: scale(1.04); }
.pg-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.4rem;
  background: linear-gradient(to top, rgba(15,10,6,0.75), transparent);
  color: var(--bone); font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.08em;
  opacity: 0; transition: opacity 0.3s;
}
.pg-item:hover .pg-caption { opacity: 1; }

/* ============ PROJECT CATEGORY ROWS (work page — one row of 3 per project) ============ */
.project-category { padding: var(--pad-v) var(--pad-h); border-top: 1px solid rgba(33,26,20,0.08); }
.project-category:first-child { border-top: none; }
.project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.project-item { display: flex; flex-direction: column; }
.project-row-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.project-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.project-row-img:hover img { transform: scale(1.04); }
.project-name {
  display: inline-block; margin-top: 1rem; font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; color: var(--umber); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s;
}
a.project-name:hover { border-color: var(--terracotta); color: var(--terracotta); }
span.project-name { color: var(--espresso); }

/* ============ PROCESS ============ */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3.5rem; border-top: 1px solid rgba(250,247,242,0.12); border-left: 1px solid rgba(250,247,242,0.12); }
.process-step { padding: 3rem 2.5rem; border-right: 1px solid rgba(250,247,242,0.12); border-bottom: 1px solid rgba(250,247,242,0.12); }
.process-name { font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.8rem; }
.process-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--bone); margin-bottom: 1rem; line-height: 1.2; }
.process-desc { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: rgba(250,247,242,0.65); }

/* ============ LISTS (who it's for / what's included) ============ */
.spec-list { margin-top: 1rem; max-width: 620px; }
.spec-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.7rem;
  font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: var(--espresso);
}
.spec-list li::before { content: '—'; position: absolute; left: 0; color: var(--terracotta); }

/* ============ STATEMENT (full-bleed dark editorial section) ============ */
.statement-section { background: var(--umber); color: var(--bone); text-align: left; padding: 6rem var(--pad-h); }
.lead-copy {
  font-family: var(--font-body); font-weight: 300; font-size: var(--text-body);
  line-height: 1.8; color: rgba(250,247,242,0.88); max-width: 680px; margin: 0;
}
.lead-copy + .lead-copy { margin-top: 1.6rem; }
.lead-copy em { font-style: italic; color: var(--bone); }

/* ============ PROCESS CARDS (full-width numbered grid — service page "how it works") ============ */
.process-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid rgba(250,247,242,0.12); border-left: 1px solid rgba(250,247,242,0.12); margin-top: 3rem;
}
.process-card { padding: 3rem 2.5rem; border-right: 1px solid rgba(250,247,242,0.12); border-bottom: 1px solid rgba(250,247,242,0.12); }
.process-card-desc { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: rgba(250,247,242,0.65); }

/* ============ INCLUDED (service pages): a quiet vertical sequence under the heading ============ */
.included-head { margin-bottom: 3.5rem; max-width: 900px; }
/* Ordered steps: a single hairline runs through small terracotta nodes, so the sequence reads top to bottom */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 760px; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 0.9rem; bottom: 0.9rem; width: 1px; background: rgba(250,247,242,0.18); }
.timeline li { position: relative; padding: 0 0 0 2.6rem; font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; line-height: 1.4; color: var(--bone); }
.timeline li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); }
/* Steps on the left, photo on the right (photos are 3:2 and shown whole) */
.included-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: stretch; }
.included-media picture { display: block; }
.included-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
/* Non-sequential group (e.g. "Suited to"): plain text columns with a thin rule above each */
.included-sub { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin: 4.5rem 0 1.6rem; }
.suited-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.suited-list li { padding-top: 1.2rem; border-top: 1px solid rgba(250,247,242,0.18); font-family: var(--font-display); font-weight: 300; font-size: 1.2rem; line-height: 1.4; color: var(--bone); }

/* ============ BUTTON ROW + OUTLINE BUTTON (Studio Loom Consult page and its footer CTA) ============ */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row > a { min-width: 11.5rem; padding-left: 1rem; padding-right: 1rem; }  /* same box as the nav 'Get in touch' button */
a.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 11.5rem; padding: 0.75rem 1.6rem; line-height: 1.2;
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--bone); border: 1px solid rgba(250,247,242,0.6); background: transparent; transition: background 0.25s, border-color 0.25s;
}
a.btn-outline:hover { background: var(--terracotta); border-color: var(--terracotta); }
.statement-section .btn-row { margin-top: 2.2rem; }

/* ============ CONSULT PAGE: all details in one column beside a portrait photo (same pattern as Contact) ============ */
.consult-body { padding-top: 5rem; padding-bottom: 5rem; }
.consult-block + .consult-block { margin-top: 3.2rem; }
.block-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--umber); letter-spacing: -0.01em; margin-bottom: 1.1rem; }
.block-title em { font-style: italic; color: var(--terracotta); }
.consult-body .body-copy + .body-copy { margin-top: 0.9rem; }
.text-link { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
/* Photo stays in view while the longer text column scrolls */
.split-img-inset.sticky picture { position: sticky; top: 7rem; }

/* ============ PROJECT PAGE (editorial layout): text beside a lead image, then a rhythm of full / paired / offset photos ============ */
.pj-intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem 5rem; align-items: center; padding: 8rem var(--pad-h) 2rem; }
.pj-text { max-width: 480px; }
.pj-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.1; color: var(--umber); letter-spacing: -0.01em; }
.pj-meta { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin: 1.2rem 0 1.8rem; line-height: 1.9; }
.pj-meta span { display: block; color: var(--greige); }
.pj-text .body-copy + .body-copy { margin-top: 1rem; }
.pj-intro-img picture, .pj-gallery picture { display: block; }
.pj-intro-img img, .pj-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
/* Every photo keeps its own 3:2 frame; rows share the page margins and a slim gutter */
.pj-gallery { display: flex; flex-direction: column; gap: 1.5rem; padding: 0 var(--pad-h) 5rem; }
.pj-gallery figure { margin: 0; }
.pj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ============ PROJECT GALLERY CAROUSEL ============ */
.gallery-carousel { background: var(--umber); padding: 4rem 0; overflow: hidden; }
.gallery-heading { text-align: left; padding: 0 var(--pad-h); margin-bottom: 2.5rem; }
.gallery-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--pad-h); scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
/* The carousel's direct flex/scroll-snap children are <picture> wrappers (for AVIF/WebP
   sources) that each hold one <img>; sizing/snap must live on the <picture>, not the img. */
.gallery-track picture { display: block; flex: 0 0 auto; scroll-snap-align: start; width: min(36vw, 480px); }
.gallery-track img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
.gallery-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.gallery-btn {
  width: 46px; height: 46px; border-radius: 50%; background: var(--terracotta); color: var(--bone);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-family: var(--font-body); transition: background 0.2s;
}
.gallery-btn:hover { background: #a0503a; }

/* ============ FAQ ACCORDION ============ */
.faq-list { max-width: 760px; margin-top: 1.5rem; border-top: 1px solid rgba(33,26,20,0.12); }
.faq-item { border-bottom: 1px solid rgba(33,26,20,0.12); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.5rem 0;
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--umber);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--terracotta); flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 0 1.6rem; font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: 1.8; color: var(--espresso); max-width: 640px; }

/* Compact split variant — FAQ paired with an image, shorter than the full-width version */
.split-section.faq-split .split-img-inset { min-height: 460px; }
.split-section.faq-split .split-text { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.faq-split .faq-list { margin-top: 1.2rem; max-width: 100%; }
.faq-split .faq-item summary { padding: 1.15rem 0; font-size: 1.02rem; }
.faq-split .faq-answer { padding: 0 0 1.15rem; }

/* ============ CONTACT / FORM ============ */
.enquiry-form { display: grid; gap: 1.4rem; max-width: 480px; margin-top: 2rem; }
.enquiry-form label { font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--greige); display: block; margin-bottom: 0.5rem; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-body); color: var(--umber);
  background: transparent; border: none; border-bottom: 1px solid rgba(33,26,20,0.25);
  padding: 0.7rem 0; outline: none; transition: border-color 0.2s;
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--terracotta); }
.enquiry-form textarea { resize: vertical; min-height: 90px; }
.form-success { display: none; margin-top: 0.5rem; outline: none; }
.form-success .body-copy { margin-top: 1rem; }
/* After a successful send: the heading and form give way to the confirmation */
#contact.is-sent .split-text > .section-label,
#contact.is-sent .split-text > .section-title,
#contact.is-sent .enquiry-form { display: none; }
#contact.is-sent .form-success { display: block; }
.form-note { font-size: 0.76rem; color: var(--greige); margin-top: 0.4rem; }
.form-status { font-size: 0.82rem; margin-top: 1rem; display: none; }
.form-status.visible { display: block; }
.form-status.success { color: #4d7a4d; }
.form-status.error { color: var(--terracotta); }

/* ============ FOOTER ============ */
/* Single-row footer: brand on one side, Address/Phone/Email/Social on the other,
   then a slim copyright bar — no nav-link columns. */
footer { background: var(--umber); padding-top: 4rem; }
.footer-cta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem 3rem;
  padding: 0 var(--pad-h) 4rem;
}
.footer-cta-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.1; color: var(--bone); letter-spacing: -0.01em; }
.footer-cta-title em { font-style: italic; color: var(--terracotta); }
.footer-cta-copy { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); color: rgba(250,247,242,0.65); margin-top: 0.6rem; }
.footer-main {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr auto; column-gap: 3rem; row-gap: 2rem; align-items: start;
  padding: 0 var(--pad-h) 3.5rem;
}
.footer-brand { max-width: 280px; }
.footer-contact { display: contents; }  /* items sit directly on the footer grid, aligned to its columns */
.footer-logo-row { display: flex; align-items: center; gap: 0.7rem; }
.footer-logo-row .nav-logo-mark { filter: invert(1) brightness(0.9); }
.footer-logo-studio { font-family: var(--font-body); font-weight: 400; font-size: 0.55rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(250,247,242,0.4); display: block; line-height: 1; margin-bottom: 3px; }
.footer-logo-loom { font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; color: var(--bone); display: block; line-height: 1; }
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: rgba(250,247,242,0.35); margin-top: 0.5rem; }
.footer-contact-item { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.35rem; }
.footer-contact-item:last-child { align-items: flex-end; }  /* social icons end on the right margin, level with the CTA button */
.footer-contact-label { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(250,247,242,0.5); }
.footer-contact-value { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); color: rgba(250,247,242,0.85); text-decoration: none; transition: color 0.2s; }
a.footer-contact-value:hover { color: var(--terracotta); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 1.4rem var(--pad-h);
}
.footer-copy { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(250,247,242,0.35); }
.footer-legal-link { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(250,247,242,0.35); text-decoration: none; transition: color 0.2s; }
.footer-legal-link:hover { color: var(--terracotta); }
.footer-social { display: flex; align-items: center; gap: 1.1rem; }
.footer-social a, .footer-social-pending { display: flex; color: rgba(250,247,242,0.75); transition: color 0.2s; }
.footer-social a:hover { color: var(--terracotta); }
.footer-social-pending { color: rgba(250,247,242,0.35); }

/* ============ 404 ============ */
.error-page { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.error-code { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 8rem); color: var(--sand); line-height: 1; }

/* ============ FADE UP ============ */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  #navbar { padding: 1.2rem 2rem; }
  #navbar.scrolled, #navbar.solid { padding: 0.8rem 2rem; }
  .nav-links {
    display: none; position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw);
    background: var(--umber); flex-direction: column; align-items: flex-start;
    padding: 6rem 2rem 2rem; gap: 1.6rem; z-index: 99;
  }
  .nav-links.mobile-open { display: flex; }
  .nav-links a { color: rgba(250,247,242,0.9) !important; font-size: 0.85rem; }
  .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; background: transparent;
    border: none; box-shadow: none; min-width: 0; padding: 0.8rem 0 0 1rem; display: none;
  }
  .nav-links > li:hover .nav-dropdown, .nav-links > li.mobile-open-sub .nav-dropdown { display: block; }
  .nav-dropdown a { color: rgba(250,247,242,0.65) !important; font-size: 0.8rem; padding: 0.6rem 0; }
  .nav-toggle {
    display: block; background: none; border: none; cursor: pointer; z-index: 101;
    width: 28px; height: 20px; position: relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: var(--bone); transition: background 0.3s;
  }
  #navbar.scrolled .nav-toggle span, #navbar.scrolled .nav-toggle span::before, #navbar.scrolled .nav-toggle span::after,
  #navbar.solid .nav-toggle span, #navbar.solid .nav-toggle span::before, #navbar.solid .nav-toggle span::after { background: var(--umber); }
  .nav-toggle span { top: 9px; }
  .nav-toggle span::before { content: ''; top: -8px; }
  .nav-toggle span::after { content: ''; top: 8px; }
  section { padding: 3rem 2rem; }
  .hero-content, .page-hero .hero-content { padding: 0 2rem 4rem; }
  .split-section { grid-template-columns: 1fr; }
  .split-section .split-text { padding: 3rem 2rem; }
  .split-img { min-height: 60vw; }
  .split-img-inset { padding: 0; min-height: 60vw; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .suited-list { grid-template-columns: 1fr; gap: 1.8rem; }
  .included-row { grid-template-columns: 1fr; }
  .split-img-inset.sticky picture { position: static; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .pg-item.wide { grid-column: span 2; }
  .pj-intro { grid-template-columns: 1fr; padding: 8rem 2rem 2rem; }
  .pj-gallery { gap: 1rem; padding: 0 2rem 3rem; }
  .pj-pair { grid-template-columns: 1fr; gap: 1rem; }
  .footer-main { padding: 0 2rem 2.5rem; grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact-item:last-child { align-items: flex-start; }
  .footer-cta { padding: 0 2rem 2.5rem; }
  .footer-bottom { padding: 1.2rem 2rem; }
  .statement-section { padding: 4rem 2rem; }
  .gallery-track { padding: 0 2rem; }
}
@media (max-width: 640px) {
  /* Phone width: let the nav button shrink so it doesn't cover the logo */
  .nav-cta { min-width: 0; padding: 0.65rem 1rem; }
  .btn-row > a { min-width: 0; padding: 0.65rem 1rem; }  /* same height and padding as the phone nav button */
  .about-philosophy { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .pg-item.wide { grid-column: span 1; }
  .gallery-track picture { width: 82vw; }
  .gallery-track img { height: 300px; }
  .project-row { grid-template-columns: 1fr; gap: 0.8rem; }
}