/* =========================================================
   ASG DESIGN FIRM — DESIGN SYSTEM
   "Architectural editorial meets construction intelligence."

   COLOR
   --bone:      #F2EBDF   base ivory ground
   --espresso:  #241D17   near-black warm ink
   --espresso-2:#3A2E24   lifted espresso (panels on espresso)
   --clay:      #A8532E   muted terracotta accent (CTAs, emphasis)
   --clay-dark: #8A4324   pressed / hover state of clay
   --taupe:     #C9BCA9   soft taupe (rules, quiet surfaces)
   --brass:     #9C7C43   restrained brass (fine lines, icons, labels)
   --linen:     #EAE1D2   secondary warm surface, card backgrounds

   TYPE
   Display / editorial serif: "Fraunces" — expressive, high-fashion,
     used ONLY for headlines and pull-quotes, set big, never for UI chrome.
   Text: "Public Sans" — clean, legible, used for body copy, nav, labels,
     pricing, forms, and all technical/interface content.
========================================================= */

:root{
  --bone:#F2EBDF;
  --espresso:#241D17;
  --espresso-2:#3A2E24;
  --clay:#A8532E;
  --clay-dark:#8A4324;
  --taupe:#C9BCA9;
  --brass:#9C7C43;
  --linen:#EAE1D2;

  --font-display:'Fraunces', Georgia, serif;
  --font-text:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bone);
  color:var(--espresso);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.6rem, 5.4vw, 5.4rem); line-height:1.02; }
h2{ font-size:clamp(2rem, 3.6vw, 3.4rem); line-height:1.08; }
h3{ font-size:clamp(1.4rem, 2vw, 1.9rem); line-height:1.2; }
p{ margin:0; }

.container{ max-width:var(--max-w); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ padding:clamp(3.5rem,8vw,7.5rem) 0; }
.section-tight{ padding:clamp(2.5rem,5vw,4.5rem) 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--clay); outline-offset:3px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--espresso); color:var(--bone);
  padding:.75rem 1.25rem; z-index:200; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eyebrow{
  font-family:var(--font-text); font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--clay); margin-bottom:.9rem; display:inline-block;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.95rem 1.9rem; font-size:.95rem; font-weight:600; border-radius:2px;
  border:1px solid transparent; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--clay); color:var(--bone); }
.btn-primary:hover{ background:var(--clay-dark); }
.btn-secondary{ background:transparent; color:var(--espresso); border-color:var(--espresso); }
.btn-secondary:hover{ background:var(--espresso); color:var(--bone); }
.btn-ghost-light{ background:transparent; color:var(--bone); border-color:rgba(242,235,223,.55); }
.btn-ghost-light:hover{ background:var(--bone); color:var(--espresso); border-color:var(--bone); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.announce{
  background:var(--espresso); color:var(--linen); text-align:center;
  font-size:.82rem; letter-spacing:.02em; padding:.6rem var(--gutter);
}
.announce a{ text-decoration:underline; text-underline-offset:3px; }

.site-header{
  position:sticky; top:0; z-index:100; width:100%;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-transparent{ background:transparent; }
.site-header.is-solid{ background:var(--bone); border-color:rgba(36,29,23,.1); box-shadow:0 4px 24px rgba(36,29,23,.05); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; padding:1.1rem var(--gutter);
}
.logo{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:.01em; }
.logo span{ color:var(--clay); }
.site-header.on-dark .logo, .site-header.on-dark .nav-link{ color:var(--bone); }
.nav-links{ display:flex; gap:2.1rem; align-items:center; }
.nav-link{ font-size:.92rem; font-weight:500; position:relative; padding:.3rem 0; }
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-link:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1.4rem; }
.nav-toggle{ display:none; background:none; border:0; padding:.4rem; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(84vw,380px); height:100vh; background:var(--espresso); color:var(--bone);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.8rem; padding:3rem var(--gutter);
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:99;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links .nav-link{ color:var(--bone); font-size:1.3rem; font-family:var(--font-display); }
  .nav-toggle{ display:inline-flex; }
  .site-header .nav-cta .btn{ display:none; }
  .nav-toggle svg{ color:var(--espresso); }
  .site-header.is-transparent .nav-toggle svg{ color:var(--bone); }
}

.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(36,29,23,.15), rgba(36,29,23,.72)), var(--espresso-2);
  background-size:cover; background-position:center; color:var(--bone); margin-top:-1px;
}
.hero-media-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(242,235,223,.35); font-size:.8rem; letter-spacing:.05em; pointer-events:none; text-align:center; padding:2rem;
}
.hero-inner{ position:relative; padding:0 var(--gutter) 4.5rem; max-width:900px; }
.hero-eyebrow{ font-size:.85rem; letter-spacing:.08em; color:var(--taupe); margin-bottom:1.4rem; }
.hero h1{ color:var(--bone); }
.hero-sub{ font-size:1.15rem; color:var(--linen); max-width:540px; margin-top:1.6rem; line-height:1.6; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }
.scroll-cue{ position:absolute; right:var(--gutter); bottom:2.2rem; writing-mode:vertical-rl; font-size:.75rem; letter-spacing:.1em; color:var(--taupe); display:flex; align-items:center; gap:.6rem; }
.scroll-cue::after{ content:''; width:1px; height:38px; background:var(--taupe); display:block; }

.pathway-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--taupe); margin-top:3rem; }
.pathway-card{
  background:var(--bone); padding:2.4rem 1.8rem; min-height:230px; display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.pathway-card:hover{ background:var(--espresso); color:var(--bone); }
.pathway-card .arrow{ transition:transform .3s var(--ease); }
.pathway-card:hover .arrow{ transform:translateX(6px); }
.pathway-card h3{ font-size:1.25rem; }
@media (max-width:900px){ .pathway-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pathway-grid{ grid-template-columns:1fr; } }

.work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.5rem; margin-top:3rem; }
.work-card{ position:relative; overflow:hidden; background:var(--linen); }
.work-card .frame{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--espresso-2); }
.work-card img, .work-card .placeholder-media{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.work-card:hover img, .work-card:hover .placeholder-media{ transform:scale(1.045); }
.work-card .meta{ padding:1.1rem .2rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.work-card .meta h3{ font-size:1.15rem; }
.work-card .meta .tag{ font-size:.78rem; color:var(--brass); letter-spacing:.02em; white-space:nowrap; }
.work-span-7{ grid-column:span 7; }
.work-span-5{ grid-column:span 5; }
.work-span-4{ grid-column:span 4; }
.work-span-8{ grid-column:span 8; }
.work-card.landscape .frame{ aspect-ratio:16/10; }
@media (max-width:900px){
  .work-grid{ grid-template-columns:1fr; }
  .work-span-7,.work-span-5,.work-span-4,.work-span-8{ grid-column:1/-1; }
}
.placeholder-media{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  background:repeating-linear-gradient(135deg, var(--espresso-2), var(--espresso-2) 12px, #30261e 12px, #30261e 24px);
  color:rgba(242,235,223,.55); font-size:.78rem; letter-spacing:.03em; line-height:1.5;
}

.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--taupe); margin-top:3rem; }
.service-card{ background:var(--bone); padding:2.4rem 2rem; }
.service-card h3{ font-size:1.15rem; margin-bottom:.7rem; }
.service-card ul{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.5rem; font-size:.92rem; color:var(--espresso-2); }
.service-card li::before{ content:'—'; color:var(--brass); margin-right:.5rem; }
@media (max-width:900px){ .service-grid{ grid-template-columns:1fr; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.tag-pill{ border:1px solid var(--taupe); color:var(--espresso-2); font-size:.82rem; padding:.5rem 1rem; border-radius:999px; }

.panel-dark{ background:var(--espresso); color:var(--bone); }
.panel-dark .eyebrow{ color:var(--brass); }
.panel-dark .tag-pill{ border-color:rgba(242,235,223,.3); color:var(--linen); }

.shop-toolbar{ display:flex; flex-wrap:wrap; gap:.75rem; margin:2.5rem 0 2.5rem; align-items:center; }
.shop-toolbar select, .shop-toolbar input[type="text"]{
  border:1px solid var(--taupe); background:var(--bone); padding:.65rem 1rem; border-radius:2px; font-size:.88rem; min-width:150px;
}
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
@media (max-width:1000px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{ background:var(--linen); display:flex; flex-direction:column; }
.plan-card .frame{ aspect-ratio:4/3; overflow:hidden; }
.plan-card .body{ padding:1.4rem 1.3rem 1.6rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.plan-card h3{ font-size:1.1rem; }
.plan-card .specs{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.8rem; color:var(--espresso-2); }
.plan-card .price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--taupe); }
.plan-card .price{ font-family:var(--font-display); font-size:1.3rem; }
.plan-card.is-hidden{ display:none; }
.chip{ font-size:.72rem; color:var(--brass); border:1px solid var(--brass); padding:.15rem .55rem; border-radius:999px; align-self:flex-start; }

.product-layout{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:900px){ .product-layout{ grid-template-columns:1fr; } }
.product-gallery .main-frame{ aspect-ratio:4/3; overflow:hidden; margin-bottom:1rem; }
.thumb-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.thumb-row .frame{ aspect-ratio:1; overflow:hidden; }
.spec-table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.spec-table tr{ border-bottom:1px solid var(--taupe); }
.spec-table td{ padding:.6rem 0; }
.spec-table td:first-child{ color:var(--espresso-2); width:45%; }
.accordion-item{ border-top:1px solid var(--taupe); }
.accordion-item:last-child{ border-bottom:1px solid var(--taupe); }
.accordion-trigger{ width:100%; text-align:left; background:none; border:0; padding:1.2rem 0; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:.98rem; color:inherit; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); font-size:.92rem; color:var(--espresso-2); }
.accordion-panel-inner{ padding-bottom:1.2rem; }
.accordion-trigger .plus{ transition:transform .3s var(--ease); }
.accordion-item.is-open .accordion-trigger .plus{ transform:rotate(45deg); }
.disclaimer-box{ background:var(--linen); border-left:3px solid var(--brass); padding:1.1rem 1.3rem; font-size:.86rem; color:var(--espresso-2); margin:1.5rem 0; }

.process-list{ margin-top:3rem; display:flex; flex-direction:column; }
.process-item{ display:grid; grid-template-columns:90px 1fr; gap:1.5rem; padding:1.8rem 0; border-top:1px solid rgba(242,235,223,.18); }
.process-item:last-child{ border-bottom:1px solid rgba(242,235,223,.18); }
.process-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--brass); }
.process-item h3{ margin-bottom:.4rem; color:var(--bone); }
.process-item p{ color:var(--linen); max-width:640px; }


.reason-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:3rem; }
@media (max-width:760px){ .reason-grid{ grid-template-columns:1fr; } }
.reason-card h3{ font-size:1.05rem; margin-bottom:.6rem; }
.reason-card p{ font-size:.92rem; color:var(--espresso-2); }

.cta-band{ background:var(--clay); color:var(--bone); text-align:center; padding:clamp(3.5rem,7vw,6rem) var(--gutter); }
.cta-band h2{ color:var(--bone); max-width:820px; margin:0 auto; }
.cta-band p{ color:var(--linen); max-width:600px; margin:1.3rem auto 0; }
.cta-band .hero-actions{ justify-content:center; margin-top:2.2rem; }
.cta-band .btn-secondary{ border-color:var(--bone); color:var(--bone); }
.cta-band .btn-secondary:hover{ background:var(--bone); color:var(--clay); }

.site-footer{ background:var(--espresso); color:var(--linen); padding:4.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2.5rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
.footer-grid h4{ font-family:var(--font-text); font-size:.82rem; letter-spacing:.04em; color:var(--brass); margin-bottom:1rem; }
.footer-grid ul{ display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; }
.footer-grid a:hover{ color:var(--bone); }
.footer-bottom{ margin-top:3.5rem; padding-top:1.8rem; border-top:1px solid rgba(242,235,223,.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--taupe); }
.social-row{ display:flex; gap:1rem; margin-top:1.2rem; }
.newsletter-form{ display:flex; gap:.5rem; margin-top:.5rem; }
.newsletter-form input{ flex:1; padding:.7rem .9rem; border:1px solid rgba(242,235,223,.3); background:transparent; color:var(--bone); border-radius:2px; }
.newsletter-form input::placeholder{ color:var(--taupe); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.85rem; font-weight:600; }
.field .hint{ font-size:.78rem; color:var(--espresso-2); font-weight:400; }
.field input, .field select, .field textarea{
  border:1px solid var(--taupe); background:var(--bone); padding:.8rem .9rem; border-radius:2px;
}
.field input:invalid[data-touched="true"], .field select:invalid[data-touched="true"]{ border-color:var(--clay); }
.error-text{ font-size:.78rem; color:var(--clay-dark); min-height:1em; }
fieldset{ border:0; padding:0; margin:0; }
.consent-row{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; }
.consent-row input{ margin-top:.25rem; }

.stepper{ display:flex; gap:.5rem; margin-bottom:2.2rem; }
.stepper .dot{ flex:1; height:3px; background:var(--taupe); }
.stepper .dot.is-active,.stepper .dot.is-done{ background:var(--clay); }
.form-step{ display:none; }
.form-step.is-active{ display:block; }
.step-actions{ display:flex; justify-content:space-between; margin-top:2rem; }

.status-banner{ padding:1rem 1.2rem; border-radius:2px; font-size:.9rem; display:none; margin-top:1rem; }
.status-banner.is-visible{ display:block; }
.status-banner.success{ background:#E4EAD8; color:#3E5326; }
.status-banner.error{ background:#F4DCD3; color:var(--clay-dark); }
.spinner{ width:16px; height:16px; border:2px solid rgba(242,235,223,.5); border-top-color:var(--bone); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.faq-category{ margin-top:3rem; }
.faq-category h3{ margin-bottom:.5rem; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(36,29,23,.6); display:none; align-items:center; justify-content:center; z-index:300; padding:1.2rem;
}
.modal-overlay.is-open{ display:flex; }
.modal-box{ background:var(--bone); max-width:520px; width:100%; padding:clamp(1.8rem,4vw,2.8rem); position:relative; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:0; font-size:1.4rem; line-height:1; }
.slideup{
  position:fixed; left:0; right:0; bottom:-100%; background:var(--espresso); color:var(--bone);
  padding:1.4rem var(--gutter) 1.6rem; z-index:300; transition:bottom .4s var(--ease); display:flex; flex-direction:column; gap:.8rem;
}
.slideup.is-open{ bottom:0; }

.marquee-wrap{ overflow:hidden; border-top:1px solid var(--taupe); border-bottom:1px solid var(--taupe); padding:1rem 0; }
.marquee-track{ display:flex; gap:3rem; white-space:nowrap; animation:marquee 28s linear infinite; width:max-content; }
.marquee-track span{ font-family:var(--font-display); font-size:1.3rem; color:var(--espresso-2); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.breadcrumb{ font-size:.82rem; color:var(--espresso-2); margin-bottom:1.5rem; }
.breadcrumb a:hover{ color:var(--clay); }

.legal-content h2{ font-size:1.5rem; margin-top:2.4rem; margin-bottom:.8rem; }
.legal-content p, .legal-content li{ font-size:.95rem; color:var(--espresso-2); margin-bottom:.9rem; }
.legal-content li{ margin-left:1.4rem; list-style:disc; }
.needs-info{ background:var(--linen); border:1px dashed var(--brass); padding:.15rem .5rem; font-size:.85em; }

.text-center{ text-align:center; }
.mt-lg{ margin-top:3rem; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
.lede{ font-size:1.15rem; color:var(--espresso-2); max-width:640px; }
.divider{ height:1px; background:var(--taupe); border:0; margin:0; }

.plan-collection .collection-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--espresso);
}
.plan-collection .collection-hero > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.plan-collection .collection-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, var(--espresso));
}
.plan-collection .collection-hero-content{
  position:relative; z-index:1; padding:4rem var(--gutter); color:var(--bone); max-width:820px;
}
.plan-collection .collection-eyebrow{ font-size:.85rem; color:var(--bone); margin-bottom:1.1rem; }
.plan-collection .collection-hero h1{
  font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:400; line-height:1.03; margin-bottom:1.4rem;
}
.plan-collection .collection-hero p{ font-size:1.05rem; line-height:1.6; max-width:520px; margin-bottom:1.75rem; }
.plan-collection .collection-hero-cta{
  display:inline-block; padding:.9rem 1.6rem; background:var(--bone); color:var(--espresso);
  font-size:.92rem; font-weight:600; transition:background .25s var(--ease);
}
.plan-collection .collection-hero-cta:hover{ background:var(--linen); }
.plan-collection .collection-intro{ padding:6rem var(--gutter) 2.5rem; max-width:900px; }
.plan-collection .collection-intro h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.35; margin-bottom:1.25rem; }
.plan-collection .collection-intro p{ color:var(--espresso-2); line-height:1.75; max-width:640px; }
.plan-collection .collection-list{ padding:2.5rem 0 3.75rem; scroll-margin-top:6rem; }
.plan-collection .collection-item{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-top:1px solid var(--taupe); padding:4rem var(--gutter);
  gap:clamp(2rem,4.5vw,3.75rem); align-items:center;
}
.plan-collection .collection-reverse .collection-visual{ grid-column:2; grid-row:1; }
.plan-collection .collection-reverse .collection-copy{ grid-column:1; grid-row:1; }
.plan-collection .collection-visual > img{ width:100%; height:420px; object-fit:cover; }
.plan-collection .collection-interior{ margin:1rem 0 0; }
.plan-collection .collection-interior img{ width:100%; height:240px; object-fit:cover; }
.plan-collection .collection-interior figcaption{ color:var(--espresso-2); font-size:.8rem; margin-top:.5rem; }
.plan-collection .collection-number{ font-family:var(--font-display); font-size:.95rem; color:var(--clay); margin-bottom:.9rem; }
.plan-collection .collection-copy h2{ font-size:clamp(1.5rem,2.4vw,2.05rem); font-weight:400; margin-bottom:.4rem; line-height:1.2; }
.plan-collection .collection-area{ color:var(--espresso-2); font-size:.95rem; margin-bottom:1.1rem; }
.plan-collection .collection-description{ color:var(--espresso-2); line-height:1.7; font-size:.98rem; max-width:46ch; margin-bottom:1.4rem; }
.plan-collection .collection-specs{ display:flex; flex-wrap:wrap; gap:.65rem 1.4rem; margin-bottom:1.6rem; }
.plan-collection .collection-specs div{ font-size:.86rem; color:var(--espresso-2); border-left:2px solid var(--taupe); padding-left:.65rem; }
.plan-collection .collection-specs b{ color:var(--espresso); display:block; font-size:.95rem; font-weight:600; }
.plan-collection .collection-price-row{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.plan-collection .collection-price{ font-family:var(--font-display); font-size:1.5rem; }
.plan-collection .collection-inquire{
  display:inline-block; padding:.75rem 1.4rem; border:1px solid var(--espresso);
  font-size:.88rem; font-weight:600; color:var(--espresso); overflow-wrap:anywhere;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.plan-collection .collection-inquire:hover{ background:var(--espresso); color:var(--bone); }
.plan-collection .collection-note{ padding:1.25rem var(--gutter) 6.25rem; max-width:900px; }
.plan-collection .collection-note p{ color:var(--espresso-2); font-size:.9rem; line-height:1.7; }
.plan-collection .collection-contact{ background:var(--espresso); color:var(--bone); padding:7rem var(--gutter); scroll-margin-top:6rem; }
.plan-collection .collection-contact h2{ font-size:clamp(2rem,4vw,3rem); max-width:620px; margin-bottom:1.5rem; }
.plan-collection .collection-contact p{ color:var(--taupe); max-width:480px; line-height:1.7; margin-bottom:2.1rem; }
.plan-collection .collection-contact .collection-inquire{ border-color:var(--bone); color:var(--bone); }
.plan-collection .collection-contact .collection-inquire:hover{ background:var(--bone); color:var(--espresso); }
.plan-collection .collection-hero a:focus-visible,
.plan-collection .collection-contact a:focus-visible{ outline-color:var(--bone); }
@media (max-width:860px){
  .plan-collection .collection-item{ grid-template-columns:minmax(0,1fr); padding:3rem var(--gutter); gap:1.75rem; }
  .plan-collection .collection-reverse .collection-visual,
  .plan-collection .collection-reverse .collection-copy{ grid-column:auto; grid-row:auto; }
  .plan-collection .collection-visual > img{ height:280px; }
  .plan-collection .collection-interior img{ height:220px; }
  .plan-collection .collection-intro{ padding-top:3.5rem; }
  .plan-collection .collection-contact{ padding:4rem var(--gutter); }
}

.hero-with-rendering{ isolation:isolate; }
.hero-with-rendering > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-with-rendering::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, var(--espresso));
}
.hero-with-rendering .hero-inner, .hero-with-rendering .scroll-cue{ z-index:1; }
.work-span-12{ grid-column:1/-1; }
.work-card.is-hidden{ display:none; }
.rendering-card .frame{ aspect-ratio:4/3; }
.rendering-card.work-span-12 .frame{ aspect-ratio:16/9; }
.rendering-card .meta{ padding:1.1rem 1.2rem 1.3rem; flex-wrap:wrap; }
.rendering-card .meta .tag{ white-space:normal; }
.rendering-card:focus-within img{ transform:scale(1.045); }
.rendered-plan-card .frame{ display:block; }
.rendered-plan-card .frame img{ width:100%; height:100%; object-fit:cover; }
.rendered-plan-card .plan-area{ font-size:.85rem; color:var(--espresso-2); }
.rendered-plan-card .price-row{ flex-wrap:wrap; gap:.75rem; }
.plan-collection .collection-item[id]{ scroll-margin-top:6rem; }
@media (max-width:600px){
  .hero-with-rendering .hero-inner{ padding-bottom:3rem; }
  .hero-with-rendering .scroll-cue{ display:none; }
  .rendering-card.work-span-12 .frame{ aspect-ratio:4/3; }
}

.section-photo{ width:100%; height:auto; }

.rendering-card .portrait-rendering-frame,
.rendered-plan-card .portrait-rendering-frame{ aspect-ratio:5/6; }
.plan-collection .collection-visual > img.hyperrealistic-rendering{ height:auto; }
.hero-with-rendering > img.hyperrealistic-rendering,
.plan-collection .collection-hero > img.hyperrealistic-rendering{
  object-fit:contain; object-position:right center;
}
@media (max-width:860px){
  .hero-with-rendering > img.hyperrealistic-rendering,
  .plan-collection .collection-hero > img.hyperrealistic-rendering{
    object-fit:cover; object-position:center;
  }
}