/*
Theme Name: Kazagraphy Studio
Theme URI: https://kazagraphy.com
Author: You
Author URI: https://kazagraphy.com
Description: High-end minimalist photography studio theme. Architectural grid, ink/stone/bronze palette, Questrial + Raleway typography, sharp corners, full-bleed imagery. Replicates the Kazagraphy Studio design with slots for your own photography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kazagraphy
Tags: photography, portfolio, one-column, full-width-template, custom-menu
*/

/* =========================================================
   DESIGN TOKENS — from DESIGN.md
   ========================================================= */
:root {
  --canvas: #FFFFFF;
  --surface: #fdf9f1;
  --stone: #E5E1D9;
  --ink: #121212;
  --bronze: #836D58;
  --on-surface-variant: #444748;
  --ink-20: rgba(18, 18, 18, 0.20);
  --ink-05: rgba(18, 18, 18, 0.05);
  --outline-variant: #c4c7c7;
  --on-primary: #ffffff;
  --font-display: 'Questrial', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --margin-desktop: 80px;
  --margin-mobile: 24px;
  --section-gap: 160px;
  --gutter: 24px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

p {
  margin: 0 0 1em;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

/* Gallery label style */
.label-caps {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.bg-stone {
  background-color: var(--stone);
}

.rule {
  width: 48px;
  height: 1px;
  background-color: var(--bronze);
  opacity: 0.5;
}

/* Color utilities for black & white-ish layout variations */
.text-bronze { color: var(--bronze); }
.text-outline { color: var(--outline-variant); }
.text-ink { color: var(--ink); }
.text-canvas { color: var(--canvas); }
.bg-surface { background-color: var(--surface); }
.bg-surface-high { background-color: #ece8e0; }
.bg-surface-dim { background-color: #dddad2; }

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px var(--margin-mobile);
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
  color: var(--on-primary);
}

/* Without an uploaded hero photo the hero falls back to a light SVG
   placeholder, so keep a solid light background + ink text for readability. */
.no-photo-hero .site-header {
  background-color: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--ink-05);
}
.no-photo-hero .site-header .site-logo img {
  filter: none;
}

@media (min-width: 768px) {
  .site-header {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.site-header.nav-scrolled,
.no-photo-hero .site-header.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-05);
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--ink);
}
.no-photo-hero .site-header.nav-scrolled {
  color: var(--ink);
}

.site-header.nav-scrolled .site-logo img {
  filter: none;
}

/* Logo image (white version expected; invert handled per slot) */
.site-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) contrast(1); /* render any logo white over hero */
  transition: filter 0.3s ease;
}

.site-header.nav-scrolled .site-logo img {
  filter: none;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 48px;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 48px;
}

.main-navigation a {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

/* Header CTA (CONTACT button) */
.header-cta {
  display: none;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  border: 1px solid currentColor;
  padding: 12px 24px;
}

.header-cta:hover {
  background-color: var(--surface);
  color: var(--ink);
}

/* Mobile menu button */
.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .site-nav,
  .header-cta {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
}

/* Mobile dropdown */
.site-nav.mobile-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--surface);
  padding: 24px;
  border-bottom: 1px solid var(--ink-05);
}

.site-nav.mobile-open .main-navigation ul {
  flex-direction: column;
  gap: 20px;
}

.site-nav.mobile-open .main-navigation a {
  color: var(--ink);
}

@media (min-width: 768px) {
  .site-nav.mobile-open {
    display: flex;
    position: static;
    background-color: transparent;
    padding: 0;
    border-bottom: none;
  }
  .site-nav.mobile-open .main-navigation ul {
    flex-direction: row;
    gap: 48px;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0.1) 100%);
}

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 96px var(--margin-mobile) 0;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-content {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.hero-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--on-primary);
  max-width: 20ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

@media (min-width: 768px) {
  .philosophy-grid {
    flex-direction: row;
    gap: 96px;
  }
}

.philosophy-label,
.philosophy h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.philosophy h2 {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .philosophy-label {
    flex: 1;
  }
  .philosophy-body {
    flex: 2;
  }
}

.philosophy-body p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
}

.philosophy-link {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 4px;
}

.philosophy-link:hover {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-header {
  text-align: center;
  margin-bottom: 96px;
}

.services-header h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.services-header .label-caps {
  color: var(--on-surface-variant);
  margin-top: 16px;
  display: block;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  cursor: pointer;
}

.service-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--canvas);
  margin-bottom: 24px;
}

.service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.7s ease, transform 0.7s ease;
}

.service-card:hover .service-thumb img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

.service-card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
  margin: 0;
}

.services-footer {
  display: flex;
  justify-content: center;
  margin-top: 96px;
}

.btn-ghost {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 32px;
}

.btn-ghost:hover {
  background-color: var(--ink);
  color: var(--surface);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .contact-grid {
    flex-direction: row;
  }
}

.contact-media {
  display: none;
}

@media (min-width: 768px) {
  .contact-media {
    display: block;
    flex: 1;
    position: relative;
  }
}

.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  filter: grayscale(1);
}

.contact-form-col {
  flex: 1;
}

@media (min-width: 768px) {
  .contact-form-col {
    padding-left: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.contact-form-col h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 48px;
}

.contact-form .field {
  margin-bottom: 32px;
}

.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .contact-form .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-20);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 8px 0;
  outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(18, 18, 18, 0.3);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--ink);
}

.contact-form textarea {
  resize: none;
  min-height: 112px;
}

.btn-solid {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface);
  background-color: var(--ink);
  border: none;
  padding: 16px 32px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .btn-solid {
    width: auto;
  }
}

.btn-solid:hover {
  background-color: var(--bronze);
  color: var(--surface);
}

.contact-form .notice {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  margin-top: 24px;
}

.contact-form .notice.success {
  color: var(--bronze);
}

.contact-form .notice.error {
  color: #ba1a1a;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background-color: var(--ink);
  color: var(--on-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-brand img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) contrast(1);
  margin-bottom: 16px;
}

.footer-brand .label-caps {
  color: rgba(255, 255, 255, 0.7);
  max-width: 14ch;
  line-height: 22px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
}

.footer-col a:hover {
  color: var(--on-primary);
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.footer-social a {
  color: var(--on-primary);
}

.footer-social a:hover {
  color: var(--bronze);
}

.footer-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 96px;
  padding-top: 48px;
}

.footer-bottom .label-caps {
  color: rgba(255, 255, 255, 0.5);
}

/* =========================================================
   PAGE (blog / fallback)
   ========================================================= */
.page-template,
.single,
.archive {
  padding-top: 120px;
  min-height: 50vh;
}

.page-title,
.entry-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0;
}

.entry-content p,
.entry-content li {
  color: var(--on-surface-variant);
  line-height: 32px;
}

.entry-header .label-caps {
  color: var(--on-surface-variant);
  margin-top: 12px;
  display: block;
}

.rule-page {
  width: 48px;
  height: 1px;
  background-color: var(--bronze);
  opacity: 0.5;
  margin: 24px 0;
}

.entry-media {
  margin: 0 0 48px;
}

.entry-media .entry-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.7s ease;
}

.entry-media .entry-thumb:hover {
  filter: grayscale(0);
}

/* Pagination */
.pagination {
  display: flex;
  gap: 12px;
  margin: 64px 0;
}

.pagination .page-numbers {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 20px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: var(--ink);
  color: var(--surface);
}

/* Screen reader text */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Search form */
.search-form {
  display: flex;
  gap: 16px;
  max-width: 480px;
}

.search-form input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-20);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 8px 0;
  outline: none;
}

.search-form .search-submit {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface);
  background-color: var(--ink);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
}

.search-form .search-submit:hover {
  background-color: var(--bronze);
}

/* =========================================================
   PRICING PAGE
   ========================================================= */
.pricing-page {
  padding-top: 160px;
}

.pricing-header {
  margin-bottom: 96px;
}

.pricing-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .pricing-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.pricing-intro {
  margin-top: 32px;
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
  max-width: none;
  border-left: 1px solid var(--ink-20);
  padding-left: 24px;
}

.pricing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .pricing-layout {
    grid-template-columns: 3fr 9fr;
    gap: var(--gutter);
  }
}

.pricing-index {
  display: none;
}

@media (min-width: 768px) {
  .pricing-index {
    display: block;
    border-left: 1px solid var(--ink-20);
    padding-left: 24px;
  }
}

.pricing-index nav {
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-index a {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.pricing-index a:hover {
  color: var(--bronze);
}

.pricing-index a:first-child {
  color: var(--ink);
}

.pricing-content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.pricing-section-head {
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 16px;
  margin-bottom: 48px;
}

.pricing-section-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.pricing-card {
  background-color: var(--stone);
  padding: 48px;
  position: relative;
}

.pricing-card .label-caps {
  color: var(--ink);
  margin-bottom: 8px;
}

.pricing-card .price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.pricing-card ul {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-card ul li {
  color: var(--on-surface-variant);
}

.badge-popular {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--bronze);
  color: var(--on-primary);
  padding: 4px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
}

.pricing-card .btn-ghost.btn-solid {
  width: auto;
}

/* Videography */
.video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--stone);
  margin-bottom: 48px;
  overflow: hidden;
}

.video-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(1);
}

.play-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(18, 18, 18, 0.5);
  z-index: 2;
}

.split-only {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .split-only {
    grid-template-columns: 1fr 1fr;
  }
}

.pricing-aside .label-caps {
  color: var(--ink);
  margin-bottom: 8px;
}

.pricing-aside .price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.pricing-aside p {
  color: var(--on-surface-variant);
}

.pricing-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .pricing-split {
    grid-template-columns: 1fr 1fr;
    gap: 96px;
  }
}

@media (min-width: 1100px) {
  .pricing-split {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
  }
}

.pricing-split p {
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}

.pricing-split .price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.pricing-split .price .unit {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
  margin-left: 8px;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-page {
  padding-top: 96px;
}

@media (min-width: 768px) {
  .about-page {
    padding-top: 128px;
  }
}

.about-hero {
  margin-bottom: var(--section-gap);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
  min-height: 70vh;
  padding-bottom: 96px;
}

@media (min-width: 768px) {
  .about-hero-grid {
    grid-template-columns: 8fr 4fr;
    gap: var(--gutter);
  }
}

.about-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 12ch;
  margin: 0;
  text-align: left;
}

@media (min-width: 768px) {
  .about-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.about-hero-portrait {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background-color: var(--stone);
}

.about-hero-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) opacity(0.9);
}

.about-rule {
  width: 100%;
  height: 1px;
  background-color: var(--ink-20);
}

.about-narrative {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .about-narrative {
    grid-template-columns: 3fr 8fr;
    gap: var(--gutter);
  }
}

.about-narrative .about-narrative-label {
  position: sticky;
  top: 160px;
  align-self: start;
}

@media (min-width: 768px) {
  .about-narrative-label {
    grid-column: 1;
  }
}

.about-narrative-body {
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
  max-width: 56rem;
}

.about-narrative-body p {
  margin-bottom: 32px;
}

.about-narrative-body p:last-child {
  margin-bottom: 0;
}

.about-images {
  margin-bottom: var(--section-gap);
}

.about-images-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  position: relative;
}

@media (min-width: 768px) {
  .about-images-grid {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

@media (min-width: 768px) {
  .about-img.a {
    margin-top: 192px;
  }
}

.about-img {
  position: relative;
  overflow: hidden;
  background-color: var(--stone);
}

.about-img.a {
  aspect-ratio: 1 / 1;
}

.about-img.b {
  aspect-ratio: 4 / 5;
  background-color: #ece8e0;
}

.about-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) opacity(0.85);
}

.about-img figcaption {
  margin-top: 16px;
  color: var(--outline-variant);
  padding-left: 16px;
}

.about-img figcaption.right {
  text-align: right;
  padding-right: 16px;
  padding-left: 0;
}

.about-process {
  margin-bottom: 0;
}

.process-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 32px;
  margin-bottom: 64px;
}

.process-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.process-cell {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
}

.process-cell.wide {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .process-cell.wide {
    grid-column: span 2;
  }
}

.process-cell-head {
  margin-bottom: 16px;
}

.process-cell-head h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-top: 8px;
}

.process-cell p {
  color: var(--on-surface-variant);
  max-width: 40ch;
  margin: 0;
}

.process-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
}

.process-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: grayscale(1);
  transition: filter 0.7s ease, transform 0.7s ease;
}

.process-media:hover img {
  filter: grayscale(0);
  transform: scale(1.05);
}

/* =========================================================
   PORTFOLIO PAGE
   ========================================================= */
.portfolio-page {
  padding-top: 96px;
}

.portfolio-hero {
  margin-bottom: var(--section-gap);
}

.portfolio-hero-media {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .portfolio-hero-media {
    height: 80vh;
  }
}

.portfolio-hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.portfolio-hero-media:hover > img {
  transform: scale(1.05);
}

.portfolio-hero-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 64px;
  background: linear-gradient(to top, rgba(18,18,18,0.6) 0%, transparent 60%);
}

.portfolio-title {
  color: var(--on-primary);
  margin: 0 0 16px;
}

.portfolio-hero-caption p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 32px;
  max-width: 40ch;
  margin: 0;
}

.portfolio-filters {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ink-05);
  padding-bottom: 16px;
  margin-bottom: 96px;
}

.portfolio-filters::-webkit-scrollbar {
  display: none;
}

.portfolio-filters button {
  background: none;
  border: none;
  padding: 0 0 4px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-20);
  cursor: pointer;
  white-space: nowrap;
}

.portfolio-filters button:hover {
  color: var(--ink);
}

.portfolio-filters .filter-active {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.portfolio-grid-wrap {
  margin-bottom: var(--section-gap);
}

/* Masonry via CSS columns (matches Stitch) */
.portfolio-grid {
  column-count: 1;
  column-gap: 24px;
}

@media (min-width: 768px) {
  .portfolio-grid {
    column-count: 2;
  }
}

.portfolio-item {
  break-inside: avoid;
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--stone);
  margin-bottom: 24px;
  cursor: pointer;
}

.portfolio-item.hidden {
  display: none;
}

.portfolio-thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s ease;
}

.portfolio-item:hover .portfolio-thumb {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background: rgba(18, 18, 18, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay .label-caps {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.portfolio-overlay h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--on-primary);
}

/* Cinematic motion */
.portfolio-reel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .portfolio-reel {
    grid-template-columns: 4fr 8fr;
    gap: var(--gutter);
  }
}

.reel-copy h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.reel-copy p {
  color: rgba(18, 18, 18, 0.7);
  margin-bottom: 32px;
}

.reel-link {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.reel-link:hover {
  color: var(--bronze);
}

.reel-stage {
  position: relative;
  height: 50vh;
  overflow: hidden;
  background-color: var(--stone);
  cursor: pointer;
}

@media (min-width: 768px) {
  .reel-stage {
    height: 60vh;
  }
}

.reel-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 1s ease;
}

.reel-stage:hover img {
  transform: scale(1.05);
}

.reel-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 24px;
}

/* CTA */
.portfolio-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: var(--section-gap);
}

.portfolio-cta h2 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .portfolio-cta h2 {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.portfolio-cta p {
  color: rgba(18, 18, 18, 0.7);
  font-size: 18px;
  line-height: 32px;
  max-width: 40ch;
  margin-bottom: 48px;
}

/* =========================================================
   AIRBNB PRICING PAGE
   ========================================================= */
.airbnb-pricing-page {
  padding-top: 120px;
}

.airbnb-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .airbnb-hero {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
  }
}

.airbnb-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .airbnb-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.airbnb-intro {
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 32px;
  max-width: 30ch;
  margin: 0;
}

.airbnb-hero-image {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

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

.airbnb-tiers,
.airbnb-addons,
.airbnb-travel {
  margin-bottom: var(--section-gap);
}

.airbnb-tier-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ink-20);
  padding-top: 32px;
  margin-bottom: 32px;
}

.airbnb-tier-head .label-caps {
  color: var(--ink);
}

.airbnb-tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .airbnb-tiers-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.airbnb-tier {
  padding: 32px;
  border-bottom: 1px solid var(--ink-20);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.airbnb-tier .label-caps {
  color: var(--on-surface-variant);
}

.airbnb-price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.airbnb-select.label-caps {
  align-self: flex-start;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  padding: 12px 24px;
  cursor: pointer;
  margin-left: auto;
  margin-right: 0;
}

.airbnb-select.label-caps:hover {
  background-color: var(--ink);
  color: var(--surface);
}

.airbnb-addons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 24px;
}

@media (min-width: 768px) {
  .airbnb-addons-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.airbnb-addon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 16px;
}

.airbnb-addon span {
  color: var(--ink);
  font-size: 16px;
  line-height: 28px;
}

.airbnb-addon .airbnb-price {
  font-size: 32px;
  margin: 0;
}

.airbnb-travel-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.airbnb-travel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ink-05);
  padding-bottom: 16px;
}

.airbnb-travel-row span {
  color: var(--ink);
  font-size: 16px;
  line-height: 28px;
}

.airbnb-travel-row .label-caps {
  color: var(--bronze);
}

/* =========================================================
   BUILDERS & DESIGNERS PRICING PAGE
   ========================================================= */
.builders-pricing-page {
  padding-top: 96px;
}

.builders-header {
  padding-bottom: 96px;
}

.builders-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  .builders-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.builders-intro {
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 32px;
  max-width: 40ch;
  margin: 0;
}

.builders-tiers-wrap {
  background-color: var(--stone);
  padding: 64px 0;
  margin-bottom: var(--section-gap);
}

.builders-tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .builders-tiers-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.builders-col {
  background-color: var(--canvas);
  border: 1px solid var(--ink-05);
  padding: 48px 64px;
}

.builders-col-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}

.builders-tiers-grid .builders-col:nth-child(1) .builders-col-head::before {
  content: '◉';
  color: var(--bronze);
}

.builders-tiers-grid .builders-col:nth-child(2) .builders-col-head::before {
  content: '◉';
  color: var(--bronze);
}

.builders-col-head .label-caps {
  color: var(--bronze);
}

.builders-tier {
  border-bottom: 1px solid var(--ink-05);
  padding-bottom: 32px;
  margin-bottom: 48px;
}

.builders-tier:last-child {
  margin-bottom: 0;
}

.builders-tier h3 {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
  font-weight: 400;
}

.builders-price {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.builders-travel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .builders-travel {
    grid-template-columns: 3fr 7fr;
    gap: var(--gutter);
    align-items: start;
  }
}

.builders-travel-label h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.builders-travel-label p {
  color: var(--on-surface-variant);
}

.builders-travel-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.builders-travel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 16px;
}

.builders-travel-row span {
  color: var(--ink);
  font-size: 16px;
  line-height: 28px;
}

.builders-travel-row .label-caps {
  color: var(--bronze);
}

.builders-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .builders-gallery {
    grid-template-columns: 7fr 5fr;
    gap: var(--gutter);
    align-items: end;
  }
}

.builders-gallery-main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #ece8e0;
}

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

.builders-gallery-main:hover img {
  transform: scale(1.05);
}

.builders-gallery-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: var(--on-primary);
  background: linear-gradient(to top, rgba(18,18,18,0.7), transparent);
  padding: 16px 24px;
}

.builders-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.builders-gallery-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #ece8e0;
  margin-left: auto;
}

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

.builders-gallery-img:hover img {
  transform: scale(1.05);
}

.builders-quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
  border-left: 1px solid var(--bronze);
  padding: 8px 0 8px 24px;
  margin: 0 0 0 auto;
  max-width: 24ch;
}

/* =========================================================
   FLOOR PLAN PRICING PAGE
   ========================================================= */
.floorplan-pricing-page {
  padding-top: 96px;
}

.floorplan-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .floorplan-hero {
    grid-template-columns: 8fr 4fr;
    gap: var(--gutter);
  }
}

.floorplan-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  .floorplan-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.floorplan-intro {
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 32px;
  max-width: 40ch;
  margin: 0;
}

.floorplan-hero-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--stone);
}

.floorplan-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: grayscale(1);
}

.floorplan-rule {
  height: 1px;
  background-color: var(--ink-20);
  margin-bottom: var(--section-gap);
}

.floorplan-standard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .floorplan-standard {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
    align-items: center;
  }
}

.floorplan-standard-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--stone);
}

.floorplan-standard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: grayscale(1);
}

.floorplan-standard-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.floorplan-standard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 32px;
  margin-bottom: 48px;
}

.floorplan-standard-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.floorplan-price {
  font-family: var(--font-body);
  font-size: 40px;
  line-height: 44px;
  font-weight: 300;
  color: var(--bronze);
}

.floorplan-standard-intro {
  color: var(--on-surface-variant);
  margin-bottom: 48px;
}

.floorplan-features {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.floorplan-features li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-icon {
  color: var(--bronze);
  font-size: 20px;
  line-height: 28px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.floorplan-features h3 {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}

.floorplan-features p {
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}

.floorplan-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .floorplan-bento {
    grid-template-columns: 1fr 1fr;
  }
}

.bento-card {
  min-height: 500px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-card.bg-outline {
  border: 1px solid var(--ink-05);
  background-color: transparent;
}

.bento-card h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

.bento-card .label-caps.text-bronze {
  display: block;
  margin-bottom: 32px;
}

.bento-card p {
  color: var(--on-surface-variant);
  max-width: 36ch;
}

.bento-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--ink-10);
  padding-top: 24px;
  margin-top: 48px;
}

.bento-footer .reel-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bento-addons-head {
  margin-bottom: 32px;
}

.bento-addon {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-05);
}

.bento-addon h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.bento-addon h3::after {
  content: '+';
  color: rgba(18, 18, 18, 0.5);
  font-size: 20px;
}

.bento-addon p {
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 28px;
  max-width: 40ch;
}

.floorplan-travel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: var(--section-gap);
}

.floorplan-travel-head {
  text-align: center;
  margin-bottom: 48px;
}

.floorplan-travel-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

.floorplan-travel-head .label-caps {
  color: var(--on-surface-variant);
}

.floorplan-travel-list {
  width: 100%;
}

.floorplan-travel-headers,
.floorplan-travel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ink-05);
  padding: 16px 8px;
}

.floorplan-travel-headers {
  border-bottom-color: var(--ink-20);
}

.floorplan-travel-row:hover {
  background-color: rgba(229, 225, 217, 0.3);
}

.floorplan-travel-row span {
  font-size: 18px;
  line-height: 32px;
  color: var(--ink);
}

.floorplan-travel-row .text-bronze {
  color: var(--bronze);
}

/* =========================================================
   VIDEOGRAPHY PRICING PAGE
   ========================================================= */
.video-pricing-page {
  padding-top: 96px;
}

.video-pricing-hero {
  margin-bottom: var(--section-gap);
}

.video-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 96px;
}

@media (min-width: 768px) {
  .video-hero-top {
    grid-template-columns: 8fr 4fr;
    gap: var(--gutter);
  }
}

.video-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .video-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.video-intro {
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 32px;
  margin: 0;
}

.video-hero-stage {
  position: relative;
  height: 60vh;
  overflow: hidden;
  background-color: var(--stone);
}

@media (min-width: 768px) {
  .video-hero-stage {
    height: 70vh;
  }
}

.video-hero-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-size: 24px;
  background: rgba(0, 0, 0, 0.1);
}

.video-offerings {
  border-top: 1px solid var(--ink-20);
  padding-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .video-offerings {
    grid-template-columns: 3fr 9fr;
    gap: var(--gutter);
  }
}

.video-offerings .video-offerings-label {
  position: sticky;
  top: 160px;
  align-self: start;
}

.video-offerings-label .label-caps {
  color: var(--ink);
}

.video-offerings-body {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.offering {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .offering {
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
  }
}

.offering-copy .label-caps {
  color: var(--bronze);
  display: block;
  margin-bottom: 16px;
}

.offering-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.offering-copy p {
  color: var(--on-surface-variant);
  margin-bottom: 32px;
  max-width: 44ch;
}

.offering-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offering-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 18px;
}

.offering-features li span {
  color: var(--bronze);
}

.offering-media {
  height: 400px;
  overflow: hidden;
  background-color: var(--stone);
}

@media (min-width: 768px) {
  .offering:first-of-type .offering-media {
    order: 2;
  }
}

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

.offering:hover .offering-media img {
  transform: scale(1.05);
}

.offering-rule {
  width: 66%;
  height: 1px;
  background-color: var(--ink-20);
  margin-left: auto;
}

.video-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  padding-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .video-bottom {
    grid-template-columns: 1fr 1fr;
  }
}

.video-enhancements,
.video-travel {
  min-height: 400px;
  padding: 48px;
  display: flex;
  flex-direction: column;
}

.video-enhancements {
  background-color: var(--stone);
}

.video-travel {
  border: 1px solid var(--ink-20);
}

.video-bottom-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 32px;
}

.enhancement-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink-10);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.enhancement-row h4 {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 32px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 4px;
}

.enhancement-row .label-caps {
  color: var(--on-surface-variant);
  font-weight: 400;
}

.enhancement-row > .label-caps {
  color: var(--ink);
}

.video-travel p {
  color: var(--on-surface-variant);
  margin-bottom: 32px;
}

.video-travel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .video-travel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.travel-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}

.travel-cell .text-bronze {
  color: var(--bronze);
}
/* =========================================================
   PRICING — MATTERPORT
   ========================================================= */
.matterport-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  overflow: hidden;
  text-align: center;
}

.matterport-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.matterport-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.matterport-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(18, 18, 18, 0.4);
}

.matterport-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 24px;
}

.matterport-hero-copy .label-caps {
  margin-bottom: 24px;
  color: var(--canvas);
}

.matterport-hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--canvas);
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .matterport-hero-copy h1 {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.matterport-hero-copy p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 32px;
  color: var(--stone);
  font-weight: 300;
}

/* Investment + What's Included */
.matterport-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .matterport-layout {
    grid-template-columns: 7fr 4fr;
    gap: 24px;
  }
}

.matterport-tiers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 16px;
  margin-bottom: 8px;
}

.matterport-tiers-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0;
}

.tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 16px;
  border-bottom: 1px solid rgba(18, 18, 18, 0.1);
  transition: background-color 0.3s ease;
}

.tier-row:hover {
  background-color: rgba(221, 218, 210, 0.3);
}

.tier-name {
  font-size: 18px;
  line-height: 32px;
  color: var(--ink);
}

.tier-price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--bronze);
}

.matterport-includes {
  background-color: var(--stone);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.matterport-includes h3 {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.matterport-includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.matterport-includes ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
  margin-bottom: 16px;
}

.matterport-includes ul li span {
  color: var(--bronze);
  flex: 0 0 auto;
}

.matterport-includes-image {
  margin-top: auto;
  padding-top: 32px;
}

.matterport-includes-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Travel fees */
.matterport-travel {
  background-color: var(--surface-dim);
  padding: 0 0 var(--section-gap);
}

.matterport-travel .container {
  text-align: center;
}

.matterport-travel h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 48px;
  padding-top: var(--section-gap);
}

.matterport-travel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  text-align: left;
}

@media (min-width: 768px) {
  .matterport-travel-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    margin: 0 auto;
  }
}

.matterport-travel-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 8px;
}

.matterport-travel-row span {
  font-size: 16px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--ink);
}

.matterport-travel-row .label-caps {
  color: var(--bronze);
}

/* CTA */
.matterport-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.matterport-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .matterport-cta h2 {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.matterport-cta p {
  max-width: 560px;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
}

/* =========================================================
   PRICING — BROCHURES
   ========================================================= */
.brochure-hero {
  text-align: center;
}

.brochure-hero .page-title {
  margin-bottom: 32px;
}

.brochure-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
}

.brochure-break {
  width: 100%;
  margin-bottom: var(--section-gap);
}

.brochure-break img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
}

.brochure-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: var(--section-gap);
}

@media (min-width: 768px) {
  .brochure-services {
    grid-template-columns: 1fr 1fr;
  }
}

.brochure-card {
  background-color: var(--canvas);
  border: 1px solid #ece8e0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brochure-card.bg-stone {
  background-color: var(--stone);
}

.brochure-card h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 16px;
}

.brochure-card p {
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
  margin: 0 0 32px;
}

.brochure-card-foot .brochure-price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.brochure-card-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brochure-card-foot ul li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
  margin-bottom: 8px;
}

.brochure-card-foot ul li span {
  color: var(--bronze);
  flex: 0 0 auto;
}

/* Travel fees */
.brochure-travel {
  border-top: 1px solid var(--ink-20);
  padding-top: 64px;
}

.brochure-travel h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 32px;
}

.brochure-travel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}

@media (min-width: 768px) {
  .brochure-travel-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.brochure-travel-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 8px;
}

.brochure-travel-row span {
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
}

.brochure-travel-row span:last-child {
  color: var(--ink);
  font-weight: 500;
}

/* =========================================================
   CASE STUDY (portfolio project pages)
   ========================================================= */
.case-hero {
  position: relative;
  min-height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.case-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.case-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 40%);
}

.case-hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--margin-mobile) var(--margin-desktop);
}

.case-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--canvas);
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .case-hero-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}

.case-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.case-hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* Narrative + metadata */
.case-narrative {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-top: var(--section-gap);
}

@media (min-width: 768px) {
  .case-narrative {
    grid-template-columns: 3fr 2fr;
    gap: var(--gutter);
  }
}

.case-narrative-copy h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  .case-narrative-copy h2 {
    font-size: 48px;
    line-height: 56px;
  }
}

.case-narrative-copy p {
  font-size: 18px;
  line-height: 32px;
  color: var(--on-surface-variant);
  max-width: 60ch;
}

.case-meta {
  border-top: 1px solid var(--outline-variant);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .case-meta {
    border-top: none;
    border-left: 1px solid var(--outline-variant);
    padding-top: 0;
    padding-left: 24px;
    margin-left: 24px;
  }
}

.case-meta-block h3 {
  margin-bottom: 8px;
  color: var(--on-surface-variant);
}

.case-meta-block p {
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
  margin: 0;
}

/* Album gallery */
.case-album {
  padding-top: var(--section-gap);
}

.case-media {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.case-media-wide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.case-media.pair {
  flex-direction: column;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .case-media.pair {
    flex-direction: row;
  }
  .case-media.pair > * {
    flex: 1;
  }
}

.case-media-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.case-media.split {
  flex-direction: column;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .case-media.split {
    flex-direction: row;
  }
  .case-media-square img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .case-media-interior img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* Cinematic walkthrough */
.case-cinematic {
  padding-top: var(--section-gap);
}

.case-cinematic-head {
  text-align: center;
  margin-bottom: 48px;
}

.case-cinematic-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 16px;
}

.case-cinematic-head p {
  font-size: 16px;
  line-height: 28px;
  color: var(--on-surface-variant);
  margin: 0;
}

.case-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

.case-video-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s ease, transform 0.7s ease;
}

.case-video-stage:hover img {
  opacity: 0.6;
  transform: scale(1.05);
}

.case-play {
  position: absolute;
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--canvas);
  transition: transform 0.3s ease;
}

.case-video-stage:hover .case-play {
  transform: scale(1.1);
}

/* Next project */
.case-next {
  padding: var(--section-gap) 0;
  text-align: center;
}

.case-next-label {
  margin-bottom: 32px;
}

.case-next-card {
  position: relative;
  display: block;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

.case-next-card img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform 0.7s ease;
  opacity: 0.9;
}

.case-next-card:hover img {
  transform: scale(1.05);
  opacity: 1;
}

.case-next-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease;
}

.case-next-card:hover .case-next-mask {
  background-color: transparent;
}

.case-next-card h3 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--canvas);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  margin: 0;
}

@media (min-width: 768px) {
  .case-next-card h3 {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
  }
}