:root {
  --navy-950: #0a1728;
  --navy-900: #10233b;
  --navy-800: #18365b;
  --navy-700: #214a7c;
  --navy-600: #2d629f;
  --blue-soft: #d9e7f4;
  --slate: #526273;
  --ink: #1f2730;
  --cream: #f7f2ea;
  --ivory: #fcfaf6;
  --champagne: #d8c6aa;
  --line: rgba(16, 35, 59, 0.12);
  --line-strong: rgba(16, 35, 59, 0.2);
  --shadow-lg: 0 28px 60px rgba(9, 18, 31, 0.12);
  --shadow-md: 0 16px 40px rgba(9, 18, 31, 0.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --content: 1200px;
  --header-h: 90px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(33,74,124,0.08), transparent 30%),
    linear-gradient(180deg, #f9f7f2 0%, #f6f1e7 36%, #fbfaf7 100%);
  font-family: var(--sans);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.2rem; color: #36485a; }
ul { margin: 0; padding-left: 1.1rem; }
li { margin: 0 0 0.55rem; color: #36485a; }
input, textarea, button, select { font: inherit; }
.container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 1000;
  background: var(--navy-900);
  color: white;
  padding: 0.8rem 1rem;
  border-radius: 12px;
}
.skip-link:focus { left: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(16, 35, 59, 0.08);
  background: rgba(250, 247, 240, 0.84);
  backdrop-filter: blur(14px);
}
.nav-shell {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.brand img {
  width: clamp(86px, 10vw, 116px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.brand-copy small {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.brand-copy strong {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  color: var(--navy-950);
  font-weight: 600;
  line-height: 1;
}
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--line);
  color: var(--navy-900);
}
.nav-links {
  display: flex;
  gap: 1.35rem;
  align-items: center;
}
.nav-links a {
  position: relative;
  font-size: 0.95rem;
  color: var(--navy-900);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--navy-800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current='page']::after { transform: scaleX(1); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: white;
  box-shadow: 0 16px 28px rgba(16, 35, 59, 0.18);
}
.button-secondary {
  background: rgba(255,255,255,0.72);
  border-color: rgba(16, 35, 59, 0.15);
  color: var(--navy-900);
}
.button-ghost {
  color: var(--navy-800);
  border-color: rgba(16, 35, 59, 0.18);
  background: transparent;
}
main { overflow: clip; }
.section { padding: 5rem 0; position: relative; }
.section + .section { padding-top: 0; }
.hero {
  padding: 4.5rem 0 3rem;
}
.hero-grid,
.page-hero-grid,
.split-grid,
.contact-grid,
.story-grid,
.editorial-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 2rem;
  align-items: center;
}
.page-hero { padding: 4.25rem 0 2rem; }
.hero-panel,
.surface,
.service-card,
.metric,

.process-card,
.quote-card,
.faq-item,
.contact-panel,
.collection-card,
.thank-card,
.story-card,
.checklist-card,
.cta-banner,
.detail-card,
.editorial-card {
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.hero-panel,
.surface,
.service-card,
.metric,
.process-card,
.quote-card,
.faq-item,
.contact-panel,
.collection-card,
.thank-card,
.story-card,
.checklist-card,
.detail-card,
.editorial-card { padding: 1.55rem; }
.hero-panel {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.hero-panel::before,
.surface::before,
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(45,98,159,0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(216,198,170,0.22), transparent 28%);
  pointer-events: none;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.display,
h1, h2, h3, h4 {
  margin: 0 0 1rem;
  color: var(--navy-950);
  line-height: 1.05;
  font-family: var(--serif);
  font-weight: 600;
}
h1 { font-size: clamp(3rem, 6vw, 5.8rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); }
h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
h4 { font-size: 1.2rem; }
.lead { font-size: 1.1rem; max-width: 62ch; color: #33465a; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.7rem;
}
.hero-notes span {
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(16, 35, 59, 0.1);
  border-radius: 999px;
  color: var(--navy-900);
  font-size: 0.92rem;
}
.image-card {
  position: relative;
  padding: 1rem;
  overflow: hidden;
}
.image-card::after {
  content: '';
  position: absolute;
  inset: 1rem;
  border-radius: calc(var(--radius-xl) - 8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  pointer-events: none;
}
.photo {
  border-radius: calc(var(--radius-xl) - 8px);
  overflow: hidden;
  min-height: 540px;
  position: relative;
  background: linear-gradient(135deg, #dde6ee, #efe4d5);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,23,40,0.02), rgba(13,23,40,0.28));
}
.floating-card {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  max-width: 260px;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: rgba(250,247,240,0.9);
  border: 1px solid rgba(16, 35, 59, 0.1);
  box-shadow: var(--shadow-md);
}
.floating-card strong { display: block; color: var(--navy-950); margin-bottom: 0.35rem; }
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 1.8rem;
}
.section-head p { max-width: 58ch; }
.grid-2,
.grid-3,
.metrics-grid,
.services-grid,
.faq-grid,
.collection-grid,
.footer-grid,
.value-grid,
.detail-grid {
  display: grid;
  gap: 1.3rem;
}
.grid-2,
.faq-grid,
.footer-grid,
.value-grid,
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3,
.services-grid,
.collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric small,
.card-label {
  display: block;
  color: var(--navy-700);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  margin-bottom: 0.7rem;
}
.metric strong {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-family: var(--serif);
  color: var(--navy-950);
  margin-bottom: 0.3rem;
}
.service-card,
.collection-card,
.detail-card,
.story-card,
.process-card,
.faq-item,
.metric,
.editorial-card,
.quote-card,
.checklist-card { position: relative; overflow: hidden; }
.service-card::after,
.collection-card::after,
.detail-card::after,
.story-card::after,
.process-card::after,
.editorial-card::after {
  content: '';
  position: absolute;
  left: 1.55rem;
  right: 1.55rem;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--navy-700));
  opacity: 0.55;
}
.card-image {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #dce6ef, #efe6d7);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-clean { list-style: none; padding: 0; }
.list-clean li {
  padding-left: 1.2rem;
  position: relative;
}
.list-clean li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--navy-700);
}
.quote-card {
  border-left: 4px solid rgba(33,74,124,0.42);
}
.quote-card p:last-child { margin-bottom: 0; }
.split-grid.align-start,
.story-grid.align-start,
.contact-grid.align-start { align-items: start; }
.band {
  padding: 4rem 0;
}
.band-soft {
  background: linear-gradient(180deg, rgba(217,231,244,0.24), rgba(255,255,255,0));
}
.cta-banner {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  overflow: hidden;
}
.cta-banner .hero-actions { margin-top: 1rem; }
.contact-panel form { margin-top: 0.5rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field,
.field-full { display: flex; flex-direction: column; gap: 0.45rem; }
.field-full { grid-column: 1 / -1; }
label { font-size: 0.92rem; color: var(--navy-900); }
input,
textarea {
  width: 100%;
  border: 1px solid rgba(16, 35, 59, 0.15);
  border-radius: 14px;
  padding: 0.95rem 1rem;
  background: rgba(255,255,255,0.88);
  color: var(--ink);
}
textarea { min-height: 150px; resize: vertical; }
input:focus,
textarea:focus {
  outline: 2px solid rgba(45,98,159,0.18);
  border-color: var(--navy-700);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--navy-950);
  font-family: var(--serif);
  font-size: 1.3rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--navy-700);
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding-top: 1rem; }
.site-footer {
  padding: 4rem 0 2rem;
  background: linear-gradient(180deg, rgba(16,35,59,0.98), rgba(10,23,40,1));
  color: rgba(255,255,255,0.88);
  margin-top: 3rem;
}
.footer-grid { align-items: start; }
.footer-brand {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.footer-brand img {
  width: 116px;
  height: auto;
  filter: brightness(1.05);
  background: white;
  border-radius: 16px;
  padding: 0.35rem;
}
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer li { color: rgba(255,255,255,0.88); }
.site-footer h3,
.site-footer h4 { margin-bottom: 0.8rem; }
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}
.footer-note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}
.social-inline { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.centered { text-align: center; }
.muted { color: #647487; }
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
  .hero-grid,
  .page-hero-grid,
  .split-grid,
  .contact-grid,
  .story-grid,
  .editorial-grid,
  .grid-2,
  .grid-3,
  .value-grid,
  .detail-grid,
  .footer-grid,
  .footer-links,
  .metrics-grid,
  .services-grid,
  .faq-grid,
  .collection-grid { grid-template-columns: 1fr; }
  .photo { min-height: 460px; }
}
@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 1rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.7rem;
    background: rgba(252,250,246,0.98);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.9rem 0.8rem; }
  .hero { padding-top: 2.75rem; }
  .section { padding: 4rem 0; }
  h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .form-grid { grid-template-columns: 1fr; }
  .floating-card {
    position: static;
    margin: 1rem;
  }
  .brand-copy small { display: none; }
}


/* Deployment hardening: responsive form/layout safeguards */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
img,video,iframe{max-width:100%;height:auto;}
input,select,textarea,button{font:inherit;max-width:100%;}
textarea{min-height:140px;resize:vertical;}
@media(max-width:820px){body{overflow-x:hidden}.container{width:min(100% - 1.25rem,var(--max,1240px))}.section{padding:56px 0}.btn-row{width:100%}.btn,.button{width:100%;}.contact-wrap,.hero-grid,.grid-2,.services-grid,.trust-grid,.process-grid,.faq-grid,.gallery-grid,.palette-shell,.form-grid,form{grid-template-columns:1fr!important}.contact-form,.contact-panel,.hero-card,.card,.panel{padding:22px!important}.nav-links.open{display:flex!important}}


/* Mobile polish update: slimmer header, cleaner menu, stronger responsiveness */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }
.card, .service-card, .detail-card, .panel, .contact-card, .cta-banner, .page-hero, .photo { min-width: 0; }
@media (max-width: 780px) {
  :root { --header-h: 66px; }
  .site-header { background: rgba(252,250,246,0.96); box-shadow: 0 8px 24px rgba(10,23,40,0.06); }
  .nav-shell { min-height: 66px; padding: 0.45rem 0; gap: .65rem; }
  .brand { gap: .55rem; max-width: calc(100% - 54px); }
  .brand img { width: 70px; max-height: 44px; }
  .brand-copy strong { font-size: 1.18rem; letter-spacing: .01em; }
  .brand-copy small { display: none !important; }
  .nav-toggle {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(16,35,59,.08);
  }
  .nav-links {
    top: calc(100% + .45rem); left: .75rem; right: .75rem;
    border-radius: 18px; padding: .5rem; background: rgba(252,250,246,.985);
    box-shadow: 0 18px 36px rgba(10,23,40,.12);
  }
  .nav-links a { padding: .82rem .9rem; border-radius: 13px; font-size: .96rem; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(24,54,91,.07); }
  .container { width: min(calc(100% - 1.25rem), var(--content)); }
  .section { padding: 3.5rem 0; }
  .page-hero { padding: 3.35rem 0 2.4rem; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero-grid, .page-hero-grid, .split-grid, .contact-grid, .story-grid, .editorial-grid, .grid-2, .grid-3, .value-grid, .detail-grid, .footer-grid, .footer-links, .metrics-grid, .services-grid, .faq-grid, .collection-grid, .form-grid { grid-template-columns: 1fr !important; }
  h1 { font-size: clamp(2.35rem, 11vw, 3.45rem); line-height: .98; }
  h2 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1; }
  h3 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .lead { font-size: 1rem; }
  .photo, .hero-visual, .image-card, .hero-figure { min-height: 340px; border-radius: 22px; }
  .service-card, .detail-card, .panel, .contact-form, .contact-panel, .card, .cta-banner { padding: 1.35rem !important; border-radius: 20px; }
  .button, .btn { width: 100%; min-height: 48px; }
  .hero-actions, .btn-row { width: 100%; flex-direction: column; gap: .75rem; }
  .footer-note { gap: .6rem; text-align: left; }
}
@media (max-width: 420px) {
  .brand img { width: 62px; }
  .brand-copy strong { font-size: 1.05rem; }
  .nav-shell { min-height: 60px; }
  .nav-toggle { width: 39px; height: 39px; flex-basis: 39px; }
  .section { padding: 3rem 0; }
}


/* Final mobile elegance pass for interior design pages */
html,body{max-width:100%;overflow-x:hidden;}
@media(max-width:820px){
  :root{--header-h:64px;}
  .site-header{background:rgba(250,247,240,.96);box-shadow:0 10px 26px rgba(7,17,31,.07);}
  .nav-shell{min-height:64px;position:relative;gap:.75rem;}
  .brand{gap:.55rem;max-width:calc(100% - 52px);}
  .brand img{width:82px;max-height:42px;}
  .brand-copy small{display:none;}
  .brand-copy strong{font-size:1.05rem;}
  .nav-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:linear-gradient(180deg,#fff,#f5f1ea);box-shadow:0 10px 24px rgba(7,17,31,.10);}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:.35rem;padding:.75rem;border-radius:22px;background:rgba(255,255,255,.985);border:1px solid rgba(16,35,59,.10);box-shadow:0 24px 52px rgba(7,17,31,.16);z-index:90;}
  .nav-links.open{display:flex!important;}
  .nav-links a{padding:.78rem .9rem;border-radius:15px;background:rgba(247,242,234,.62);}
  .nav-links a.button{width:100%;min-height:46px;}
  .section,.page-hero{padding:3.25rem 0;}
  .hero-grid,.page-hero-grid,.split-grid,.contact-grid,.story-grid,.editorial-grid,.footer-grid{grid-template-columns:1fr!important;gap:1.25rem;}
  .surface,.service-card,.metric,.process-card,.quote-card,.faq-item,.contact-panel,.collection-card,.thank-card,.story-card,.checklist-card,.cta-banner,.detail-card,.editorial-card{border-radius:22px;padding:1.2rem;}
  .site-footer{text-align:center;}
  .footer-grid{justify-items:center;}
  .footer-brand{justify-content:center;}
  .footer-links{justify-content:center;}
  .footer-note{text-align:center;line-height:1.6;}
}