/* Flourish Home Studio — refined responsive website styles */
:root {
  --ink: #26231f;
  --soft-ink: #5d554c;
  --cream: #f7f0e7;
  --warm: #eadfce;
  --clay: #a7654d;
  --sage: #899477;
  --moss: #50593f;
  --linen: #fffaf3;
  --white: #ffffff;
  --charcoal: #171615;
  --shadow: 0 24px 80px rgba(35, 31, 26, 0.12);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--linen);
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--clay);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}

.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3,
.logo-text,
.hero-stat strong,
.quote-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 0.96;
}

h1 {
  margin: 0;
  font-size: clamp(4rem, 10vw, 9.4rem);
  letter-spacing: -0.08em;
}

h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6.2rem);
  letter-spacing: -0.055em;
}

h3 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: var(--soft-ink);
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 0;
  right: 0;
  pointer-events: none;
}

.nav-shell {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(38, 35, 31, 0.1);
  background: rgba(255, 250, 243, 0.78);
  backdrop-filter: blur(22px);
  border-radius: 999px;
  box-shadow: 0 14px 45px rgba(40, 35, 29, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--linen);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
}

.logo-text {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  color: var(--soft-ink);
  font-size: 0.92rem;
}

.nav-links a {
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-cta,
.button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.nav-cta {
  padding: 11px 18px;
  color: var(--linen);
  background: var(--ink);
}

.button {
  padding: 16px 24px;
  color: var(--linen);
  background: var(--clay);
  box-shadow: 0 15px 38px rgba(167, 101, 77, 0.24);
}

.secondary-button {
  padding: 15px 23px;
  color: var(--ink);
  border: 1px solid rgba(38, 35, 31, 0.18);
  background: rgba(255, 255, 255, 0.45);
}

.nav-cta:hover,
.button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 152px 0 82px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 22%, rgba(167, 101, 77, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf3 0%, #efe3d2 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -42% 45%;
  height: 72%;
  background: rgba(137, 148, 119, 0.18);
  border-radius: 999px 0 0 0;
  transform: rotate(-8deg);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
  gap: 56px;
  align-items: end;
}

.hero-copy {
  padding-bottom: 30px;
}

.hero-copy .lead {
  max-width: 670px;
  margin: 28px 0 34px;
  font-size: clamp(1.06rem, 1.6vw, 1.35rem);
  color: #4d463e;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 700px;
}

.hero-stat {
  padding: 18px;
  border-top: 1px solid rgba(38, 35, 31, 0.16);
}

.hero-stat strong {
  display: block;
  margin-bottom: 5px;
  font-size: 2.2rem;
  color: var(--ink);
}

.hero-stat span {
  color: var(--soft-ink);
  font-size: 0.92rem;
}

.hero-visual {
  position: relative;
  min-height: 620px;
}

.hero-card {
  position: absolute;
  overflow: hidden;
  border: 10px solid rgba(255, 250, 243, 0.86);
  border-radius: 44px;
  box-shadow: var(--shadow);
  background: var(--warm);
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card.large {
  inset: 24px 0 88px 42px;
}

.hero-card.small {
  width: 52%;
  height: 255px;
  left: 0;
  bottom: 0;
  border-radius: 32px;
}

.floating-note {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 28px;
  width: min(290px, 75%);
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 55px rgba(25, 22, 18, 0.12);
}

.floating-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--moss);
}

.section {
  padding: 110px 0;
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 54px;
}

.section-intro p {
  font-size: 1.08rem;
}

.services {
  background: var(--charcoal);
  color: var(--linen);
}

.services p,
.services .eyebrow {
  color: rgba(255, 250, 243, 0.74);
}

.services .eyebrow {
  color: #d8a58f;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  min-height: 365px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border: 1px solid rgba(255, 250, 243, 0.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 250, 243, 0.085), rgba(255, 250, 243, 0.025));
}

.service-card .number {
  color: #d8a58f;
  font-weight: 800;
}

.service-card p {
  color: rgba(255, 250, 243, 0.68);
}

.approach {
  background: var(--linen);
}

.approach-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.approach-image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: var(--shadow);
}

.approach-image img {
  width: 100%;
  height: 680px;
  object-fit: cover;
}

.steps {
  display: grid;
  gap: 18px;
}

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(38, 35, 31, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.52);
}

.step span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--linen);
  background: var(--moss);
  font-weight: 900;
}

.portfolio {
  background: #efe6d9;
}

.gallery {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: var(--radius-xl);
  background: #ddd;
}

.gallery-card.tall {
  min-height: 740px;
}

.gallery-stack {
  display: grid;
  gap: 20px;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.gallery-card:hover img {
  transform: scale(1.045);
}

.gallery-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 18px;
  border-radius: 20px;
  color: var(--linen);
  background: rgba(23, 22, 21, 0.58);
  backdrop-filter: blur(16px);
}

.gallery-label strong {
  display: block;
  font-size: 1.1rem;
}

.testimonial {
  background: var(--moss);
  color: var(--linen);
}

.quote-panel {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 30px;
  align-items: start;
  padding: clamp(30px, 6vw, 72px);
  border-radius: 44px;
  background: rgba(255, 250, 243, 0.08);
}

.quote-mark {
  color: #d8a58f;
  font-size: 9rem;
  line-height: 0.7;
}

.quote-panel blockquote {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4.3vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.quote-panel cite {
  display: block;
  margin-top: 26px;
  color: rgba(255, 250, 243, 0.7);
  font-style: normal;
}

.contact {
  position: relative;
  overflow: hidden;
  background: var(--linen);
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 40px;
  padding: clamp(34px, 6vw, 72px);
  border-radius: 46px;
  background: var(--ink);
  color: var(--linen);
  box-shadow: var(--shadow);
}

.contact-card p,
.contact-card .eyebrow {
  color: rgba(255, 250, 243, 0.72);
}

.contact-card .eyebrow {
  color: #d8a58f;
}

.contact-methods {
  display: grid;
  gap: 16px;
  align-content: center;
}

.contact-method {
  padding: 22px;
  border: 1px solid rgba(255, 250, 243, 0.12);
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.06);
}

.contact-method span {
  display: block;
  color: rgba(255, 250, 243, 0.58);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.contact-method strong {
  display: block;
  margin-top: 4px;
  font-size: 1.08rem;
}

.site-footer {
  padding: 36px 0;
  background: var(--charcoal);
  color: rgba(255, 250, 243, 0.62);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .hero-grid,
  .section-intro,
  .approach-grid,
  .contact-card,
  .quote-panel {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 560px;
  }

  .hero-card.large {
    left: 80px;
  }

  .service-grid,
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery-card.tall,
  .gallery-card {
    min-height: 430px;
  }

  .approach-image img {
    height: 520px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 26px, var(--max));
  }

  .site-header {
    top: 10px;
  }

  .nav-shell {
    border-radius: 24px;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    padding-top: 126px;
  }

  h1 {
    font-size: clamp(3.5rem, 18vw, 5.8rem);
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 460px;
  }

  .hero-card.large {
    inset: 0 0 86px 36px;
    border-radius: 32px;
  }

  .hero-card.small {
    width: 62%;
    height: 190px;
  }

  .floating-note {
    right: 6px;
    bottom: 8px;
  }

  .section {
    padding: 76px 0;
  }

  .service-card {
    min-height: 300px;
  }

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

  .quote-mark {
    font-size: 6rem;
  }

  .footer-inner {
    display: grid;
  }
}

/* Multi-page additions */
.nav-links a.active {
  color: var(--ink);
  font-weight: 800;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 178px 0 96px;
  background: linear-gradient(135deg, #fffaf3 0%, #eadfce 100%);
}

.page-hero::after {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  right: -18vw;
  bottom: -28vw;
  border-radius: 50%;
  background: rgba(137, 148, 119, 0.18);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.narrow {
  max-width: 940px;
}

.page-hero h1 {
  font-size: clamp(3.8rem, 8vw, 8.2rem);
}

.page-hero .lead {
  max-width: 760px;
  margin-top: 28px;
  color: #4d463e;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
}

.portfolio-hero {
  background:
    linear-gradient(rgba(239,230,217,.78), rgba(239,230,217,.78)),
    url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=82') center/cover;
}

.contact-hero {
  background:
    linear-gradient(rgba(38,35,31,.62), rgba(38,35,31,.62)),
    url('https://images.unsplash.com/photo-1618220179428-22790b461013?auto=format&fit=crop&w=1600&q=82') center/cover;
  color: var(--linen);
}

.contact-hero .lead {
  color: rgba(255,250,243,.8);
}

.contact-hero .eyebrow {
  color: #d8a58f;
}

.intro-panel {
  background: var(--linen);
}

.split-feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, .65fr);
  gap: 52px;
  align-items: end;
}

.preview-grid-section {
  padding-top: 0;
  background: var(--linen);
}

.page-card-grid {
  display: grid;
  gap: 20px;
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview-card {
  display: block;
  min-height: 320px;
  padding: 32px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(38,35,31,.1);
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 48px rgba(35,31,26,.06);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.preview-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  background: var(--white);
}

.preview-card span {
  display: inline-flex;
  margin-bottom: 76px;
  color: var(--clay);
  font-weight: 900;
}

.detail-list-section {
  background: var(--linen);
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, .8fr);
  gap: 54px;
  align-items: start;
}

.detail-items {
  display: grid;
  gap: 18px;
}

.detail-items p {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(38,35,31,.1);
}

.portfolio-page-section {
  padding-top: 82px;
}

.contact-page-section {
  background: var(--linen);
}

.contact-page-card {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  align-items: stretch;
}

.inquiry-form {
  display: grid;
  gap: 18px;
}

.inquiry-form label {
  display: grid;
  gap: 8px;
  color: rgba(255,250,243,.82);
  font-weight: 800;
  font-size: .9rem;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 1px solid rgba(255,250,243,.16);
  border-radius: 18px;
  padding: 15px 16px;
  color: var(--linen);
  background: rgba(255,250,243,.08);
  font: inherit;
  outline: none;
}

.inquiry-form textarea {
  resize: vertical;
}

.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: rgba(255,250,243,.42);
}

.inquiry-form select option {
  color: var(--ink);
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: rgba(216,165,143,.82);
  box-shadow: 0 0 0 4px rgba(216,165,143,.12);
}

.contact-note {
  padding: 22px;
  border-radius: 24px;
  color: rgba(255,250,243,.68) !important;
  background: rgba(255,250,243,.06);
}

body[data-page="contact.html"] .site-footer,
body[data-page="services.html"] .site-footer {
  border-top: 1px solid rgba(255,250,243,.08);
}

@media (max-width: 980px) {
  .split-feature,
  .detail-list,
  .three-up,
  .contact-page-card {
    grid-template-columns: 1fr;
  }

  .preview-card {
    min-height: 240px;
  }

  .preview-card span {
    margin-bottom: 34px;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding: 138px 0 72px;
  }

  .page-hero h1 {
    font-size: clamp(3rem, 15vw, 5.5rem);
  }
}

/* ---------- About page + studio photograph ---------- */
.about-hero {
  background:
    linear-gradient(rgba(255, 250, 243, .82), rgba(255, 250, 243, .9)),
    linear-gradient(135deg, #fffaf3 0%, #eadfce 100%);
}

.about-feature-section {
  background: var(--linen);
}

.about-feature {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.portrait-frame {
  display: block;
  overflow: hidden;
  border-radius: 40px;
  box-shadow: var(--shadow);
  background: var(--warm);
}

.portrait-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-portrait {
  position: relative;
}

.about-portrait::before {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  border-radius: 40px;
  background: rgba(137, 148, 119, .18);
  z-index: 0;
}

.about-portrait .portrait-frame {
  position: relative;
  z-index: 1;
  border: 10px solid rgba(255, 250, 243, .9);
}

.portrait-caption {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 18px;
  color: var(--soft-ink);
  font-size: .92rem;
  font-style: italic;
}

.about-copy h2 {
  margin-bottom: 22px;
}

.about-copy p {
  margin-bottom: 18px;
  font-size: 1.05rem;
}

.about-values {
  display: grid;
  gap: 14px;
  margin: 32px 0;
}

.about-values div {
  padding: 20px 22px;
  border-left: 2px solid var(--clay);
  border-radius: 0 18px 18px 0;
  background: rgba(255, 255, 255, .6);
}

.about-values strong {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}

.about-values span {
  color: var(--soft-ink);
  font-size: .95rem;
}

/* ---------- Contact page greeting block ---------- */
.contact-greeting-section {
  background: var(--linen);
  padding-bottom: 0;
}

.contact-greeting {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 62px);
  align-items: center;
}

.contact-greeting-photo .portrait-frame {
  border: 10px solid rgba(255, 250, 243, .9);
  border-radius: 36px;
}

.contact-greeting-copy h2 {
  margin-bottom: 20px;
}

.contact-greeting-copy p {
  font-size: 1.05rem;
}

.contact-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

@media (max-width: 980px) {
  .about-feature,
  .contact-greeting {
    grid-template-columns: 1fr;
  }

  .about-portrait::before {
    inset: 18px -14px -18px 18px;
  }
}

@media (max-width: 640px) {
  .portrait-frame,
  .about-portrait .portrait-frame,
  .contact-greeting-photo .portrait-frame {
    border-width: 7px;
    border-radius: 28px;
  }

  .about-portrait::before {
    display: none;
  }
}

/* ---------- Home hero carousel ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero.has-carousel .hero-grid {
  align-items: center;
}

.hero-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.carousel-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 10px solid rgba(255, 250, 243, .9);
  border-radius: 40px;
  background: var(--warm);
  box-shadow: var(--shadow);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 5s ease-out, visibility .9s step-end;
  will-change: opacity, transform;
}

.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .9s ease, transform 5s ease-out, visibility 0s;
}

.carousel-slide picture,
.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 20px;
  border-radius: 22px;
  color: var(--linen);
  background: rgba(23, 22, 21, .52);
  backdrop-filter: blur(16px);
  transition: opacity .5s ease .2s;
}

.carousel-caption strong {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.carousel-caption span {
  font-size: .93rem;
  color: rgba(255, 250, 243, .82);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(38, 35, 31, .12);
  border-radius: 50%;
  background: rgba(255, 250, 243, .82);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, transform .2s ease, background .2s ease;
  backdrop-filter: blur(10px);
}

.carousel-arrow.prev { left: 14px; }
.carousel-arrow.next { right: 14px; }

.hero-carousel:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity: 1;
}

.carousel-arrow:hover {
  background: var(--linen);
  transform: translateY(-50%) scale(1.06);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.carousel-dot {
  position: relative;
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(38, 35, 31, .18);
  cursor: pointer;
  overflow: hidden;
  transition: background .3s ease;
}

.carousel-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--clay);
  border-radius: 999px;
}

.carousel-dot.is-active::after {
  width: 100%;
  transition: width 3s linear;
}

.carousel-dot:hover {
  background: rgba(38, 35, 31, .32);
}

[data-carousel-paused="true"] .carousel-dot.is-active::after {
  transition: none;
}

@media (max-width: 980px) {
  .carousel-viewport {
    border-radius: 32px;
  }
}

@media (max-width: 640px) {
  .carousel-viewport {
    aspect-ratio: 4 / 5;
    border-width: 7px;
    border-radius: 26px;
  }

  .carousel-arrow {
    opacity: 1;
    width: 40px;
    height: 40px;
  }

  .carousel-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 13px 16px;
  }

  .carousel-caption strong {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-slide,
  .carousel-slide.is-active {
    transition: opacity .01ms;
    transform: none;
  }

  .carousel-dot.is-active::after {
    transition: none;
    width: 100%;
  }
}

/* ---------- Keep the carousel hero fully above the fold ---------- */
.hero.has-carousel {
  padding: 128px 0 56px;
  min-height: auto;
}

.hero.has-carousel .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 44px;
}

.hero.has-carousel .hero-copy {
  padding-bottom: 0;
}

/* The display size that works for a text-only hero is too tall once a
   carousel shares the fold, so tighten the type ramp here. */
.hero.has-carousel h1 {
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  letter-spacing: -.05em;
}

.hero.has-carousel .hero-copy .lead {
  max-width: 560px;
  margin: 20px 0 26px;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.hero.has-carousel .hero-actions {
  margin-bottom: 0;
}

/* Studio strengths move out of the fold and become their own band. */
.hero-strengths {
  padding: 0 0 84px;
  background: linear-gradient(180deg, #efe3d2 0%, var(--linen) 100%);
}

.hero-strengths .hero-stats {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 980px) {
  .hero.has-carousel {
    padding-top: 118px;
  }

  .hero.has-carousel .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-strengths .hero-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero.has-carousel {
    padding: 104px 0 40px;
  }

  .hero.has-carousel h1 {
    font-size: clamp(2.3rem, 10vw, 3.2rem);
  }

  .hero.has-carousel .hero-copy .lead {
    margin: 16px 0 22px;
  }
}

/* ---------------------------------------------------------------
   Mobile above-the-fold fix
   On phones the hero copy alone was ~600px tall, pushing the
   carousel well under the fold. Split the copy into a lead-in
   (eyebrow + h1) and a support block (lead + buttons), then use
   flex ordering so the running order becomes:
       headline -> carousel -> supporting copy
   That keeps the rotating images visible on entry, as intended.
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero.has-carousel .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .hero.has-carousel .hero-copy {
    display: contents;
  }

  .hero.has-carousel .hero-lead-in { order: 1; }
  .hero.has-carousel .hero-carousel { order: 2; }
  .hero.has-carousel .hero-support  { order: 3; }

  /* `display: contents` drops the shared reveal wrapper out of the
     box tree, so animate the two halves individually instead. */
  .hero.has-carousel .hero-copy.reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .hero.has-carousel {
    padding: 92px 0 36px;
  }

  .hero.has-carousel h1 {
    font-size: clamp(2rem, 8.4vw, 2.7rem);
    line-height: 1.06;
  }

  .hero.has-carousel .hero-lead-in .eyebrow {
    margin-bottom: 10px;
    font-size: .66rem;
  }

  .hero.has-carousel .hero-grid {
    gap: 18px;
  }

  .hero.has-carousel .hero-copy .lead {
    margin: 0 0 20px;
  }
}

/* Short viewports (e.g. iPhone SE, 375x667) need a little more
   headroom to fit the whole carousel; trim the top padding and
   eyebrow rather than shrinking the image. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero.has-carousel {
    padding-top: 80px;
  }

  .hero.has-carousel .hero-lead-in .eyebrow {
    margin-bottom: 8px;
  }

  .hero.has-carousel .hero-grid {
    gap: 14px;
  }

  .hero.has-carousel h1 {
    font-size: clamp(1.85rem, 7.6vw, 2.35rem);
  }
}

/* ---------------------------------------------------------------
   Mobile menu
   Below 980px the desktop nav links and CTA are hidden. Previously
   nothing replaced them, which left phone visitors with no way to
   reach any page except the logo link. This adds an accessible
   hamburger + slide-down drawer.
   --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(38, 35, 31, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.25s ease;
}

.nav-toggle:hover { background: rgba(255, 255, 255, 0.9); }

.nav-toggle:focus-visible {
  outline: 2px solid var(--clay, #9c5f45);
  outline-offset: 3px;
}

.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink, #26231f);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

/* Hamburger morphs into an X while the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  margin-top: 10px;
  padding: 18px;
  border: 1px solid rgba(38, 35, 31, 0.1);
  border-radius: 26px;
  background: rgba(255, 250, 243, 0.97);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 50px rgba(40, 35, 29, 0.13);
  pointer-events: auto;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu-links {
  display: grid;
  gap: 2px;
}

.mobile-menu-links a {
  padding: 13px 12px;
  border-radius: 14px;
  color: var(--ink, #26231f);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-menu-links a:hover { background: rgba(38, 35, 31, 0.05); }

.mobile-menu-links a.active {
  color: var(--clay, #9c5f45);
  background: rgba(156, 95, 69, 0.09);
  font-weight: 700;
}

.mobile-menu-cta {
  display: block;
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--ink, #26231f);
  color: #fffaf3;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .mobile-menu:not([hidden]) { display: block; }
}

/* The header is a fixed overlay; let the drawer scroll on very short
   screens rather than run off the bottom. */
@media (max-width: 980px) and (max-height: 620px) {
  .mobile-menu {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------
   Portfolio gallery + lightbox
   Small/medium thumbnails in a responsive grid. Each thumb is a
   real <button> so it is keyboard focusable and announced properly;
   clicking opens the lightbox, which pages side to side.
   --------------------------------------------------------------- */
.portfolio-gallery-section {
  padding-top: 8px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.gallery-thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #e8ded1;
  cursor: zoom-in;
  box-shadow: 0 10px 28px rgba(40, 35, 29, 0.09);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(40, 35, 29, 0.16);
}

.gallery-thumb:hover img {
  transform: scale(1.045);
}

.gallery-thumb:focus-visible {
  outline: 3px solid var(--clay, #9c5f45);
  outline-offset: 3px;
}

/* Caption sits in a gradient scrim so text stays legible on any photo. */
.gallery-thumb-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 14px 12px;
  background: linear-gradient(180deg, rgba(28, 24, 20, 0) 0%, rgba(28, 24, 20, 0.72) 100%);
  color: #fffaf3;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  text-align: left;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gallery-thumb:hover .gallery-thumb-label,
.gallery-thumb:focus-visible .gallery-thumb-label {
  opacity: 1;
}

/* Touch devices have no hover, so keep labels permanently visible. */
@media (hover: none) {
  .gallery-thumb-label { opacity: 1; }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .gallery-thumb { border-radius: 14px; }

  .gallery-thumb-label {
    padding: 26px 10px 9px;
    font-size: .9rem;
  }
}

/* ---------------- Lightbox ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 19, 16, 0.92);
  backdrop-filter: blur(6px);
  animation: lb-fade 0.28s ease;
}

@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 1180px);
  max-height: 100%;
  animation: lb-rise 0.3s ease;
}

@keyframes lb-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 12px;
  flex: 0 0 auto;
}

.lightbox-count {
  margin: 0;
  color: rgba(255, 250, 243, 0.72);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lightbox-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 250, 243, 0.28);
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.08);
  color: #fffaf3;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.lightbox-close:hover {
  background: rgba(255, 250, 243, 0.2);
  transform: rotate(90deg);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid #fffaf3;
  outline-offset: 3px;
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: stretch;   /* figure fills the row so the photo can size to it */
  justify-content: center;
  gap: 14px;
  min-height: 0;   /* lets the figure shrink inside a flex column */
  flex: 1 1 auto;
}

.lightbox-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Shrink to the photo's width so the arrows sit beside it rather than
     out at the far edges of the shell. */
  flex: 0 1 auto;
  margin: 0;
  min-height: 0;
  max-width: 100%;
}

.lightbox-figure picture {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.lightbox-figure img {
  display: block;
  max-width: 100%;
  /* Sized by the flex column above rather than a hand-tuned calc(), so
     the caption and hint can never overlap the photo. */
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: #2c2621;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  flex: 0 0 auto;
  padding: 12px 6px 0;
  color: #fffaf3;
  text-align: center;
}

.lightbox-caption strong {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
}

.lightbox-caption span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 250, 243, 0.7);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
}

.lightbox-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 250, 243, 0.26);
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.1);
  color: #fffaf3;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}

.lightbox-nav:hover { background: rgba(255, 250, 243, 0.24); }

.lightbox-hint {
  flex: 0 0 auto;
  margin: 10px 0 0;
  color: rgba(255, 250, 243, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  text-align: center;
}

/* On phones the arrows overlay the photo edges to save width. */
@media (max-width: 760px) {
  .lightbox { padding: 12px; }

  .lightbox-stage { gap: 0; }

  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    background: rgba(22, 19, 16, 0.6);
  }

  .lightbox-nav.prev { left: 2px; }
  .lightbox-nav.next { right: 2px; }

  .lightbox-caption strong { font-size: 1.15rem; }
  .lightbox-caption span { font-size: .85rem; }
  .lightbox-hint { display: none; }
}

/* Prevent background scroll while the viewer is open. */
body.lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-backdrop,
  .lightbox-shell { animation: none; }

  .gallery-thumb,
  .gallery-thumb img,
  .lightbox-close { transition: none; }

  .gallery-thumb:hover { transform: none; }
  .gallery-thumb:hover img { transform: none; }
  .lightbox-close:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Full-bleed hero band
   The carousel used to live in the right column of a two-column
   .hero-grid, which capped it at ~574px (only 30% of a 1920px
   viewport). It now sits outside the .container as a direct child
   of the hero, so it spans the full viewport width, and the copy
   runs above (headline) and below (lead + buttons).

   Heights are aspect-ratio driven but capped in vh so the band
   stays fully above the fold, which was an explicit requirement.
   --------------------------------------------------------------- */
.hero.has-carousel.is-fullbleed {
  padding: 112px 0 56px;
  overflow: hidden;
}

/* The hero's decorative ::after blob is absolutely positioned, so it
   paints above static children. The old .hero-grid opted out with a
   stacking context; these blocks now need the same protection. */
.hero.is-fullbleed .hero-lead-in,
.hero.is-fullbleed .hero-carousel,
.hero.is-fullbleed .hero-support {
  position: relative;
  z-index: 1;
}

.hero.is-fullbleed .hero-lead-in {
  margin-bottom: 28px;
}

.hero.is-fullbleed .hero-lead-in h1 {
  max-width: 20ch;
}

/* Full viewport width: the carousel is a direct child of the hero,
   which is already edge-to-edge, so 100% is all that's needed. */
.hero.is-fullbleed .hero-carousel {
  width: 100%;
  margin: 0;
}

/* Edge-to-edge means no inset frame or large corner radius. */
.hero.is-fullbleed .carousel-viewport {
  aspect-ratio: 12 / 5;
  max-height: 54vh;
  border: 0;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(35, 31, 26, .14);
}

/* Align the caption to the text column rather than the screen edge. */
.hero.is-fullbleed .carousel-caption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 40px));
  bottom: 24px;
}

.hero.is-fullbleed .carousel-arrow.prev { left: 24px; }
.hero.is-fullbleed .carousel-arrow.next { right: 24px; }

.hero.is-fullbleed .carousel-dots {
  margin-top: 18px;
}

/* .lead was previously styled via `.hero.has-carousel .hero-copy .lead`.
   That wrapper is gone, so restate the treatment here. */
.hero.is-fullbleed .hero-support {
  margin-top: 26px;
}

.hero.is-fullbleed .hero-support .lead {
  max-width: 640px;
  margin: 0 0 26px;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: #4d463e;
}

.hero.is-fullbleed .hero-actions {
  margin-bottom: 0;
}

/* Tablet / large phone: the mid tier is a 16:9 crop, shown at 3:2 so
   the band gains height with only a slight, safe side crop. */
@media (max-width: 1024px) {
  .hero.has-carousel.is-fullbleed {
    padding-top: 118px;
  }

  .hero.is-fullbleed .carousel-viewport {
    aspect-ratio: 3 / 2;
    max-height: 58vh;
  }
}

@media (max-width: 640px) {
  .hero.has-carousel.is-fullbleed {
    padding: 92px 0 36px;
  }

  .hero.is-fullbleed .hero-lead-in {
    margin-bottom: 18px;
  }

  .hero.is-fullbleed .carousel-viewport {
    aspect-ratio: 4 / 5;
    max-height: 62vh;
  }

  .hero.is-fullbleed .carousel-caption {
    bottom: 14px;
    width: calc(100% - 24px);
  }

  .hero.is-fullbleed .carousel-arrow.prev { left: 12px; }
  .hero.is-fullbleed .carousel-arrow.next { right: 12px; }

  .hero.is-fullbleed .hero-support {
    margin-top: 20px;
  }
}

/* Short phones (e.g. iPhone SE 375x667) need the vh cap to do the
   work so the whole band still clears the fold. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero.has-carousel.is-fullbleed {
    padding-top: 80px;
  }

  .hero.is-fullbleed .hero-lead-in {
    margin-bottom: 14px;
  }
}

/* ---------------------------------------------------------------
   Fix: make width authoritative, derive height from it.
   With `aspect-ratio` + `max-height`, the browser resolved height
   first and then shrank WIDTH to preserve the ratio, so the band
   rendered at only 73% of a 1920px viewport. Setting an explicit
   width plus a height of min(ratio-of-width, vh-cap) keeps the band
   edge-to-edge while the vh cap still protects the fold; object-fit
   cover absorbs the small ratio drift on very wide screens.
   --------------------------------------------------------------- */
.hero.is-fullbleed .carousel-viewport {
  aspect-ratio: auto;
  width: 100%;
  height: min(41.667vw, 58vh); /* 12:5 */
}

@media (max-width: 1024px) {
  .hero.is-fullbleed .carousel-viewport {
    height: min(66.667vw, 58vh); /* 3:2 */
    max-height: none;
  }
}

@media (max-width: 640px) {
  .hero.is-fullbleed .carousel-viewport {
    height: min(125vw, 62vh); /* 4:5 */
    max-height: none;
  }
}

/* Caption reads better as a contained card than a full-width bar
   once the band spans the viewport. Align it to the left edge of the
   text column and cap its measure. */
.hero.is-fullbleed .carousel-caption {
  left: max(20px, calc(50vw - var(--max) / 2));
  right: auto;
  transform: none;
  width: auto;
  max-width: min(430px, calc(100% - 40px));
}

@media (max-width: 640px) {
  .hero.is-fullbleed .carousel-caption {
    left: 12px;
    max-width: calc(100% - 24px);
  }
}

/* ===============================================================
   REDESIGN LAYER
   1. Full-width squared header (was a floating rounded pill)
   2. Darker overall colour theme
   3. Hero photos shown as fully as possible (16:9, no vh crop)
   4. Title-only portfolio / contact heroes
   =============================================================== */

/* ---------- 1. Header: full width, squared, flush to the top ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: auto;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(18px);
}

/* Square it off: no radius, no floating inset, edge-to-edge bar.
   The inner shell keeps content aligned to the text column. */
.site-header .nav-shell {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header .brand-mark {
  border-radius: 0; /* squared to match the header */
}

.nav-links {
  gap: clamp(18px, 2.4vw, 38px);
  font-size: .95rem;
  letter-spacing: .01em;
}

.nav-cta {
  border-radius: 0;
  padding: 12px 22px;
}

/* Mobile drawer squares off and spans the full width too. */
.mobile-menu {
  margin-top: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  background: var(--header-bg-solid);
}

/* ---------- 3. Hero: photos as full as possible ---------- */
/* Text between the header and the carousel is gone, so the hero only
   needs to clear the fixed header. The vh cap that was previously
   needed to protect the fold is removed, letting the 16:9 image show
   at its natural height instead of being cut off. */
.hero.has-carousel.is-fullbleed.is-bare {
  padding: var(--header-h) 0 0;
  min-height: 0;
  background: var(--hero-bg);
}

.hero.is-bare::after {
  display: none; /* decorative blob is not needed behind a full-bleed photo */
}

.hero.is-bare .carousel-viewport {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* With no vh cap the image can render at its true ratio, so the photo
   is shown in full rather than cropped by the container. */
.hero.is-bare .carousel-slide img {
  object-fit: cover;
  object-position: center;
}

.hero.is-bare .carousel-dots {
  margin: 0;
  padding: 18px 0 26px;
  background: var(--hero-bg);
}

@media (max-width: 1024px) {
  .hero.is-bare .carousel-viewport {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 640px) {
  .hero.has-carousel.is-fullbleed.is-bare {
    padding-top: var(--header-h-sm);
  }

  .hero.is-bare .carousel-viewport {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 4. Title-only page heroes ---------- */
.page-hero.is-title-only {
  padding: calc(var(--header-h) + 54px) 0 54px;
  background: var(--section-deep);
  color: var(--linen);
}

.page-hero.is-title-only::after {
  display: none;
}

.page-hero.is-title-only h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  letter-spacing: -.03em;
}

/* Contact hero: photo background removed per request. */
.contact-hero.is-title-only {
  background: var(--section-deep);
}

.portfolio-hero.is-title-only {
  background: var(--section-deep);
}

@media (max-width: 640px) {
  .page-hero.is-title-only {
    padding: calc(var(--header-h-sm) + 34px) 0 34px;
  }
}

/* ---------- 2. Darker colour theme ----------
   Shifted at the variable level so every surface, border, and shadow
   moves together. Backgrounds drop from near-white linen to a warm
   taupe/stone, and type darkens to keep contrast strong.            */
:root {
  /* Header sizing, referenced by the hero + page-hero offsets */
  --header-h: 74px;
  --header-h-sm: 66px;
  --header-bg: rgba(38, 34, 30, .92);
  --header-bg-solid: #262220;
  --header-border: rgba(255, 250, 243, .13);

  /* Darker surface ramp (previously #fffaf3 / #f7f0e7 / #eadfce) */
  --ink: #1d1a17;
  --soft-ink: #4a443c;
  --linen: #e8dfd3;
  --cream: #ded3c4;
  --warm: #cfc2b0;
  --white: #efe8de;
  --charcoal: #141311;
  --section-deep: #2b2723;
  --hero-bg: #211e1b;
  --clay: #97583f;
  --sage: #75806a;
  --shadow: 0 24px 80px rgba(18, 15, 12, .28);
}

body {
  background: var(--linen);
  color: var(--ink);
}

/* Header sits on a dark bar, so its contents invert. */
.site-header .brand,
.site-header .logo-text {
  color: var(--linen);
}

.site-header .brand-mark {
  background: var(--linen);
  color: var(--charcoal);
}

.site-header .nav-links {
  color: rgba(232, 223, 211, .78);
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #fff;
}

.site-header .nav-links a.active {
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
}

.site-header .nav-cta {
  background: var(--clay);
  color: #fff;
}

.site-header .nav-cta:hover {
  background: #a9634708;
  background: #a96347;
}

.nav-toggle-bar {
  background: var(--linen);
}

.mobile-menu-links a {
  color: rgba(232, 223, 211, .85);
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active {
  color: #fff;
  background: rgba(255, 250, 243, .07);
}

.mobile-menu-cta {
  background: var(--clay);
  color: #fff;
}

/* Section surfaces step down a shade. */
.intro-panel,
.about-feature-section,
.preview-grid-section,
.portfolio-gallery-section {
  background: var(--linen);
}

.hero-strengths {
  background: linear-gradient(180deg, var(--cream) 0%, var(--linen) 100%);
}

.page-hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--warm) 100%);
}

.about-hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--warm) 100%);
}

/* Cards and inputs need a touch more lift against the darker page. */
.preview-card,
.gallery-thumb,
.secondary-button {
  background: rgba(255, 252, 246, .5);
  border-color: rgba(29, 26, 23, .16);
}

.secondary-button {
  color: var(--ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255, 252, 246, .62);
  border-color: rgba(29, 26, 23, .2);
  color: var(--ink);
}

.site-footer {
  background: var(--charcoal);
  color: rgba(232, 223, 211, .6);
}

/* ---------- Dark-header contrast corrections ----------
   The header is now dark, so controls that were designed for a light
   pill need inverting: the hamburger had a pale circular background,
   and the carousel dots were 18%-opacity dark ink sitting on a
   near-black hero band, which made the inactive ones invisible. */
.nav-toggle {
  border-radius: 0;
  border-color: rgba(255, 250, 243, .28);
  background: transparent;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
  background: rgba(255, 250, 243, .1);
}

/* Dots live on the dark hero band, so light-on-dark. */
.hero.is-bare .carousel-dot {
  background: rgba(232, 223, 211, .3);
}

.hero.is-bare .carousel-dot:hover {
  background: rgba(232, 223, 211, .55);
}

.hero.is-bare .carousel-dot::after {
  background: var(--clay);
}

.hero.is-bare .carousel-dot.is-active {
  background: rgba(232, 223, 211, .45);
}

/* Arrows also need to read against photography on a dark surround. */
.hero.is-bare .carousel-arrow {
  background: rgba(20, 19, 17, .55);
  border-color: rgba(255, 250, 243, .22);
  color: var(--linen);
}

.hero.is-bare .carousel-arrow:hover {
  background: rgba(20, 19, 17, .78);
}

/* ---------- Crop + offset corrections ----------
   Two measured defects:
   1. Tablet showed only 84% of each photo because the container was
      3:2 while the mid rendition is 16:9. Matching the container to
      the image ratio removes the crop entirely.
   2. The real header measures ~79px, but --header-h was 74px, so the
      photo slid 5px under the bar. Corrected from measurement. */
:root {
  --header-h: 79px;
  --header-h-sm: 72px;
}

@media (max-width: 1024px) {
  .hero.is-bare .carousel-viewport {
    aspect-ratio: 16 / 9; /* match the mid rendition, no crop */
  }
}

/* The 16:9 tablet rule above was appended after the 641-1024 phone
   rule, so on phones it won on source order and squashed the band to
   45% visible. Re-scope it to a true 641-1024 window and restate the
   phone ratio so ordering can no longer matter. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero.is-bare .carousel-viewport {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .hero.is-bare .carousel-viewport {
    aspect-ratio: 4 / 5; /* matches the tall rendition exactly */
  }
}

/* ---------- Contrast fix for the darker theme ----------
   Measured: the clay accent (#97583f) fell to 4.21:1 against the new
   darker linen background, just under the WCAG AA floor of 4.5:1 for
   body text. Deepening it to #8d5139 gives 4.73:1 on the page and
   6.0:1 for white button text, so both clear AA. */
:root {
  --clay: #8d5139;
}

.button {
  box-shadow: 0 15px 38px rgba(120, 67, 46, .26);
}

/* Hero caption scrim strengthened. At rgba(23,22,21,.52) the caption
   measured only 2.76:1 over these bright white kitchens -- below the
   4.5:1 AA floor. rgba(18,17,16,.72) yields 5.77:1 even against a
   pure-white photo, while still reading as a translucent overlay. */
.hero.is-bare .carousel-caption {
  background: rgba(18, 17, 16, .72);
}

/* ---------------------------------------------------------------
   Keep the on-photo caption just above the fold.

   A full-width 16:9 photo is exactly viewport-height on a 16:9
   screen, so header (79px) + photo + dots always overflowed:
   measured +127px at 1920x1080 and +148px on a 1440x789 MacBook,
   putting the caption 55-76px BELOW the fold.

   Fix: cap the photo to the height actually available, leaving room
   for the header and the dots strip. Width stays 100%; object-fit
   cover absorbs the difference. The 16:9 aspect-ratio still applies
   whenever the viewport is tall enough not to need the cap, so on
   tall screens nothing is cropped.
   --------------------------------------------------------------- */
.hero.is-bare .carousel-viewport {
  /* --dots-space reserves the dot strip + a little breathing room so
     the caption lands just inside the fold rather than flush to it. */
  --dots-space: 62px;
  max-height: calc(100vh - var(--header-h) - var(--dots-space));
}

@media (max-width: 640px) {
  .hero.is-bare .carousel-viewport {
    --dots-space: 54px;
    max-height: calc(100vh - var(--header-h-sm) - var(--dots-space));
  }
}