/* ==========================================================================
   ATELIER FORME INTERIOR DESIGN — ARCHITECTURAL GALLERY MINIMALISM STYLESHEET
   ========================================================================== */

:root {
  /* Core Architectural Material Palette */
  --bg-linen: #F6F4F0;
  --bg-travertine: #EAE5DC;
  --bg-travertine-deep: #DFD8CA;
  --surface-card: #FAF8F5;
  --text-espresso: #262320;
  --text-muted: #5C554E;
  --accent-bronze: #9A7B4F;
  --accent-bronze-dark: #7D623C;
  --accent-terracotta: #B86B52;
  --border-grid: #D6CFC2;
  --border-strong: #262320;
  --error-clay: #A8382B;
  --success-olive: #4A6144;

  /* Typography Stack (Zero External Fonts Required) */
  --font-serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Layout & Spacing */
  --container-max: 1320px;
  --header-height: 78px;
  --transition-base: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 16px;
}

body {
  background-color: var(--bg-linen);
  color: var(--text-espresso);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--text-espresso);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--accent-bronze);
}

ul,
ol {
  list-style: none;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--text-espresso);
  color: var(--bg-linen);
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 0.75rem;
}

/* Structural Container & Architectural Grid Frame */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.architectural-frame {
  border-left: 1px solid var(--border-grid);
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
}

/* Typography Utilities */
.eyebrow-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bronze);
  margin-bottom: 0.85rem;
  font-weight: 600;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bronze-dark);
  display: inline-block;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--text-espresso);
  letter-spacing: -0.01em;
}

.sub-heading {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: var(--text-espresso);
}

/* ==========================================================================
   STICKY STUDIO HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(246, 244, 240, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-grid);
}

.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: 0 2rem;
  border-left: 1px solid var(--border-grid);
  border-right: 1px solid var(--border-grid);
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.brand-monogram {
  width: 40px;
  height: 40px;
  border: 1px solid var(--text-espresso);
  background-color: var(--text-espresso);
  color: var(--bg-linen);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-espresso);
  line-height: 1.2;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-espresso);
  padding: 0.35rem 0;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.nav-idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-bronze);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--accent-bronze);
  transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-cta {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--text-espresso);
  background-color: var(--text-espresso);
  color: var(--bg-linen);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all var(--transition-base);
}

.header-cta:hover {
  background-color: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: var(--bg-linen);
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-grid);
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.toggle-line {
  width: 20px;
  height: 1.5px;
  background-color: var(--text-espresso);
  transition: transform var(--transition-base);
}

/* ==========================================================================
   SECTION ARCHITECTURE & INDEX BAR
   ========================================================================== */
.section-block {
  border-bottom: 1px solid var(--border-grid);
}

.section-index-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2.5rem;
  background-color: var(--bg-travertine);
  border-bottom: 1px solid var(--border-grid);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.index-marker {
  color: var(--text-espresso);
  font-weight: 600;
}

.index-meta {
  color: var(--text-muted);
}

.section-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: 1px solid var(--border-grid);
}

.intro-title-col {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--border-grid);
}

.intro-copy-col {
  padding: 3.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  color: var(--text-muted);
  font-size: 1.02rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--text-espresso);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
}

.btn-primary {
  background-color: var(--text-espresso);
  color: var(--bg-linen);
}

.btn-primary:hover {
  background-color: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: var(--bg-linen);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-espresso);
  border-color: var(--text-espresso);
}

.btn-outline:hover {
  background-color: var(--bg-travertine);
  border-color: var(--accent-bronze);
  color: var(--text-espresso);
}

.btn-full {
  width: 100%;
}

/* ==========================================================================
   01 / 05 — HERO SECTION
   ========================================================================== */
.hero-asymmetric-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  border-bottom: 1px solid var(--border-grid);
}

.hero-editorial-col {
  padding: 4rem 2.75rem;
  border-right: 1px solid var(--border-grid);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.35rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: var(--text-espresso);
}

.hero-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 2.25rem;
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.75rem;
}

.spatial-statement-box {
  background-color: var(--bg-travertine);
  border: 1px solid var(--border-grid);
  border-left: 3px solid var(--accent-bronze);
  padding: 1.35rem 1.5rem;
}

.statement-code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--accent-bronze-dark);
  display: block;
  margin-bottom: 0.45rem;
}

.statement-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--text-espresso);
  line-height: 1.55;
}

.hero-gallery-col {
  padding: 2.5rem;
  background-color: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-artwork-frame {
  width: 100%;
  border: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
  padding: 1rem;
}

.hero-svg-illustration {
  width: 100%;
  border: 1px solid var(--border-grid);
}

.artwork-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Material Swatches Bar */
.material-swatches-bar {
  display: grid;
  grid-template-columns: 280px 1fr;
  background-color: var(--bg-linen);
}

.swatch-bar-label {
  padding: 1.5rem 2rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-travertine);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.swatch-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.swatch-chip-item {
  padding: 1.35rem 1.25rem;
  border-right: 1px solid var(--border-grid);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.swatch-chip-item:last-child {
  border-right: none;
}

.swatch-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--text-espresso);
  flex-shrink: 0;
}

.swatch-meta {
  display: flex;
  flex-direction: column;
}

.swatch-meta strong {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-espresso);
}

.swatch-meta span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}

/* ==========================================================================
   02 / 05 — ABOUT SECTION
   ========================================================================== */
.philosophy-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-grid);
}

.pillar-card {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
  transition: background-color var(--transition-base);
}

.pillar-card:last-child {
  border-right: none;
}

.pillar-card:hover {
  background-color: var(--surface-card);
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent-bronze);
  display: block;
  margin-bottom: 0.75rem;
}

.pillar-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.85rem;
  color: var(--text-espresso);
}

.pillar-text {
  font-size: 0.93rem;
  color: var(--text-muted);
}

/* Blueprint + 4-Phase Process */
.blueprint-process-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-bottom: 1px solid var(--border-grid);
}

.blueprint-visual-col {
  padding: 2.75rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--surface-card);
  display: flex;
  align-items: center;
}

.blueprint-frame {
  width: 100%;
  border: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
  padding: 1rem;
}

.process-steps-col {
  padding: 2.75rem 2.5rem;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.process-step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-grid);
}

.process-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--bg-linen);
  background-color: var(--text-espresso);
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-body h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  color: var(--text-espresso);
}

.step-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Editable Studio Profile Banner */
.studio-profile-banner {
  background-color: var(--bg-travertine);
}

.profile-banner-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.75rem 2.5rem;
  border-bottom: 1px solid var(--border-grid);
}

.profile-banner-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 0.25rem;
}

.profile-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.profile-details-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.profile-cell {
  padding: 1.65rem 1.5rem;
  border-right: 1px solid var(--border-grid);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.profile-cell:last-child {
  border-right: none;
}

.cell-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bronze-dark);
}

.cell-value {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-espresso);
  word-break: break-word;
}

.cell-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   03 / 05 — SERVICES & ARCHETYPES
   ========================================================================== */
.archetype-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border-grid);
}

.archetype-card {
  padding: 2rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--surface-card);
}

.archetype-card:last-child {
  border-right: none;
}

.archetype-card img {
  width: 100%;
  border: 1px solid var(--border-grid);
  margin-bottom: 1rem;
}

.archetype-caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.archetype-caption strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
}

/* 6 Services Grid */
.services-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border-grid);
}

.service-item-card {
  padding: 2.5rem 2.25rem;
  border-right: 1px solid var(--border-grid);
  border-bottom: 1px solid var(--border-grid);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-linen);
  transition: background-color var(--transition-base);
}

.service-item-card:nth-child(3n) {
  border-right: none;
}

.service-item-card:nth-last-child(-n+3) {
  border-bottom: none;
}

.service-item-card:hover {
  background-color: var(--surface-card);
}

.service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.service-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent-bronze-dark);
}

.pricing-badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.2rem 0.55rem;
  background-color: var(--bg-travertine);
  border: 1px solid var(--border-grid);
  color: var(--text-espresso);
}

.service-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.85rem;
  color: var(--text-espresso);
}

.service-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.service-deliverables {
  border-top: 1px solid var(--border-grid);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.service-deliverables li {
  font-size: 0.84rem;
  color: var(--text-espresso);
  position: relative;
  padding-left: 1rem;
}

.service-deliverables li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-bronze);
}

.service-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border-grid);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.service-link {
  color: var(--accent-bronze-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   03.B — INTERACTIVE MATERIAL PALETTE STUDIO & BUDGET ESTIMATOR
   ========================================================================== */
.palette-studio-container {
  background-color: var(--bg-travertine);
}

.palette-studio-header {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  padding: 3rem 2.5rem;
  border-bottom: 1px solid var(--border-grid);
  align-items: end;
}

.palette-studio-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  margin-top: 0.35rem;
}

.palette-studio-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* 4 Direction Tabs */
.palette-direction-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
}

.palette-tab {
  padding: 1.5rem 1.5rem;
  border: none;
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: all var(--transition-base);
  border-bottom: 3px solid transparent;
}

.palette-tab:last-child {
  border-right: none;
}

.palette-tab:hover {
  background-color: var(--surface-card);
}

.palette-tab.active {
  background-color: var(--surface-card);
  border-bottom-color: var(--accent-bronze);
}

.tab-idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent-bronze);
}

.tab-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-espresso);
}

.tab-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Palette Workspace Split */
.palette-workspace-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}

.palette-preview-panel {
  padding: 2.5rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
}

.live-room-canvas-wrap {
  border: 1px solid var(--border-grid);
  background-color: var(--surface-card);
  padding: 1.25rem;
}

.canvas-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lighting-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  background-color: var(--bg-travertine);
  border: 1px solid var(--border-grid);
  color: var(--text-espresso);
}

#liveRoomSvg {
  width: 100%;
  border: 1px solid var(--border-grid);
  margin-bottom: 1.25rem;
}

.live-swatches-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.live-swatch-card {
  border: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.live-swatch-color {
  width: 100%;
  height: 36px;
  border: 1px solid var(--text-espresso);
  margin-bottom: 0.25rem;
}

.live-swatch-role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.live-swatch-title {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-espresso);
}

.live-swatch-hex {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-bronze-dark);
}

.palette-curation-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border-top: 1px solid var(--border-grid);
  padding-top: 1.15rem;
}

.curation-note-col p {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Spatial Budget Estimator Panel */
.budget-estimator-panel {
  padding: 2.5rem;
  background-color: var(--bg-travertine);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.estimator-header h4 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0.35rem 0 0.5rem;
}

.estimator-header p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.estimator-controls {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-bottom: 1.5rem;
}

.control-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-espresso);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.arch-select,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text-espresso);
  background-color: var(--bg-linen);
  border: 1px solid var(--text-espresso);
  border-radius: 0;
  appearance: none;
}

.arch-select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent-bronze);
  outline-offset: 1px;
}

.slider-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sqft-readout {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-bronze-dark);
}

.arch-range {
  width: 100%;
  accent-color: var(--accent-bronze);
  cursor: pointer;
}

.range-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.tier-radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.tier-option {
  cursor: pointer;
  margin-bottom: 0 !important;
}

.tier-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tier-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--bg-linen);
  border: 1px solid var(--border-grid);
  transition: all var(--transition-base);
}

.tier-box strong {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
}

.tier-box small {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.tier-option input:checked + .tier-box {
  border-color: var(--text-espresso);
  border-left: 4px solid var(--accent-bronze);
  background-color: var(--surface-card);
}

/* Estimator Output Ledger */
.estimator-ledger {
  background-color: var(--bg-linen);
  border: 1px solid var(--text-espresso);
  padding: 1.5rem;
}

.ledger-top {
  border-bottom: 1px solid var(--border-grid);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.ledger-total-price {
  font-family: var(--font-serif);
  font-size: 1.95rem;
  color: var(--text-espresso);
  line-height: 1.2;
  margin: 0.25rem 0;
}

.ledger-palette-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-bronze-dark);
}

.ledger-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ledger-row dd {
  font-family: var(--font-mono);
  color: var(--text-espresso);
  font-weight: 600;
}

.estimator-disclaimer {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  text-align: center;
}

/* ==========================================================================
   04 / 05 — CONTACT & DESIGN BRIEF FORM
   ========================================================================== */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
}

.contact-info-col {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--border-grid);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.contact-lead {
  color: var(--text-muted);
  margin-top: 1rem;
}

.consultation-protocol-card {
  background-color: var(--bg-travertine);
  border: 1px solid var(--border-grid);
  padding: 1.5rem;
}

.protocol-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.protocol-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.protocol-list strong {
  font-family: var(--font-serif);
  font-size: 0.98rem;
}

.protocol-list span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.direct-coordinates-box {
  border-top: 1px solid var(--border-grid);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coord-row p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  margin-top: 0.2rem;
}

.contact-form-col {
  padding: 3.5rem 2.75rem;
  background-color: var(--surface-card);
}

.brief-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-grid);
}

.required-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-row-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--text-espresso);
}

.field-error {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--error-clay);
  margin-top: 0.35rem;
  min-height: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox-label input {
  margin-top: 0.25rem;
  accent-color: var(--accent-bronze);
}

.checkbox-label a {
  text-decoration: underline;
  color: var(--text-espresso);
}

/* Confirmation Dossier Box */
.brief-confirmation-dossier {
  border: 1px solid var(--text-espresso);
  background-color: var(--bg-linen);
  padding: 2.25rem;
}

.dossier-header {
  border-bottom: 1px solid var(--border-grid);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.dossier-header h4 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  margin: 0.35rem 0;
}

.dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  margin-bottom: 1.75rem;
}

.dossier-item {
  border-bottom: 1px solid var(--border-grid);
  padding-bottom: 0.65rem;
}

.dossier-item.full-span {
  grid-column: 1 / -1;
}

.dossier-item dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bronze-dark);
}

.dossier-item dd {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-espresso);
  margin-top: 0.2rem;
}

/* ==========================================================================
   05 / 05 — PRIVACY POLICY SECTION
   ========================================================================== */
.privacy-clauses-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.privacy-clause-card {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--border-grid);
  background-color: var(--bg-linen);
}

.privacy-clause-card:last-child {
  border-right: none;
}

.clause-index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent-bronze-dark);
  display: block;
  margin-bottom: 0.65rem;
}

.privacy-clause-card h3 {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-espresso);
}

.privacy-clause-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.privacy-clause-card a {
  text-decoration: underline;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--text-espresso);
  color: var(--bg-linen);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-left: 1px solid rgba(214, 207, 194, 0.2);
  border-right: 1px solid rgba(214, 207, 194, 0.2);
}

.footer-brand-col,
.footer-nav-col,
.footer-showroom-col {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid rgba(214, 207, 194, 0.2);
}

.footer-showroom-col {
  border-right: none;
}

.site-footer .brand-monogram {
  background-color: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: var(--text-espresso);
  font-weight: 700;
}

.site-footer .brand-name {
  color: var(--bg-linen);
}

.site-footer .brand-sub {
  color: var(--bg-travertine);
}

.footer-statement {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--bg-travertine);
  max-width: 46ch;
}

.footer-material-note {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--accent-bronze);
  font-size: 0.8rem;
  color: var(--bg-travertine);
}

.footer-material-note span {
  font-family: var(--font-mono);
  color: var(--accent-bronze);
  font-weight: 600;
}

.site-footer .cell-label {
  color: var(--accent-bronze);
  display: block;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a,
.footer-address a {
  color: var(--bg-travertine);
  font-size: 0.88rem;
}

.footer-links a:hover,
.footer-address a:hover {
  color: var(--accent-bronze);
}

.footer-address {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--bg-travertine);
  line-height: 1.7;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid rgba(214, 207, 194, 0.2);
  border-left: 1px solid rgba(214, 207, 194, 0.2);
  border-right: 1px solid rgba(214, 207, 194, 0.2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--bg-travertine);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1120px) {
  .hero-asymmetric-grid,
  .blueprint-process-grid,
  .palette-workspace-grid,
  .contact-layout-grid {
    grid-template-columns: 1fr;
  }

  .hero-editorial-col,
  .blueprint-visual-col,
  .palette-preview-panel,
  .contact-info-col {
    border-right: none;
    border-bottom: 1px solid var(--border-grid);
  }

  .material-swatches-bar {
    grid-template-columns: 1fr;
  }

  .swatch-bar-label {
    border-right: none;
    border-bottom: 1px solid var(--border-grid);
  }

  .philosophy-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillar-card:nth-child(2) {
    border-right: none;
  }

  .pillar-card:nth-child(1),
  .pillar-card:nth-child(2) {
    border-bottom: 1px solid var(--border-grid);
  }

  .services-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-item-card:nth-child(3n) {
    border-right: 1px solid var(--border-grid);
  }

  .service-item-card:nth-child(2n) {
    border-right: none;
  }

  .profile-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-cell {
    border-bottom: 1px solid var(--border-grid);
  }

  .privacy-clauses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .privacy-clause-card {
    border-bottom: 1px solid var(--border-grid);
  }
}

@media (max-width: 860px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--bg-linen);
    border-bottom: 1px solid var(--border-grid);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    gap: 1.25rem;
    display: none;
  }

  .primary-nav.open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
  }

  .section-intro-grid,
  .palette-studio-header,
  .archetype-gallery-grid,
  .palette-direction-tabs,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .intro-title-col,
  .archetype-card,
  .palette-tab,
  .footer-brand-col,
  .footer-nav-col {
    border-right: none;
    border-bottom: 1px solid var(--border-grid);
  }

  .swatch-strip-grid,
  .live-swatches-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .swatch-chip-item {
    border-bottom: 1px solid var(--border-grid);
  }

  .form-row-two,
  .form-row-three,
  .palette-curation-notes,
  .dossier-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .section-index-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem;
  }

  .hero-editorial-col,
  .hero-gallery-col,
  .intro-title-col,
  .intro-copy-col,
  .blueprint-visual-col,
  .process-steps-col,
  .palette-preview-panel,
  .budget-estimator-panel,
  .contact-info-col,
  .contact-form-col {
    padding: 2rem 1.25rem;
  }

  .philosophy-pillars-grid,
  .services-catalog-grid,
  .profile-details-grid,
  .privacy-clauses-grid,
  .swatch-strip-grid,
  .live-swatches-row {
    grid-template-columns: 1fr;
  }

  .pillar-card,
  .service-item-card,
  .profile-cell,
  .privacy-clause-card,
  .swatch-chip-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border-grid) !important;
  }
}