/* Williams West Construction — site styles
   Layout: quiet, architectural. Wide white and timber-black bands, generous air,
   Montserrat per the brand guide (ExtraBold headlines, Medium body), Canyon Orange used
   sparingly as a hairline rule, an eyebrow, and the primary button. */
:root{
  --orange:#C5602B;      /* Canyon Orange (brand) */
  --orange-deep:#A84F22;
  --black:#1A1A1A;       /* Timber Black (brand) */
  --white:#FFFFFF;
  --stone:#F4F2EE;       /* warm light surface */
  --stone-2:#E9E5DE;
  --ink:#1A1A1A;
  --ink-2:#5C5852;
  --ink-3:#8C877E;
  --line:#DCD7CF;
  --line-dark:#33302C;
  --fg-on-dark:#F4F2EE;
  --fg-on-dark-2:#A9A39A;
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:62ch;
  --gutter:clamp(18px,4vw,48px);
  --maxw:1440px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-weight:500;font-size:16.5px;line-height:1.6;overflow-x:hidden;overflow-wrap:break-word}
a[href^="mailto:"],.booking-alt,.when-step p{overflow-wrap:anywhere}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.05;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.6rem,6.2vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding-left:1.2rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--orange);flex:none}
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--ink-2);font-weight:500}
.dark .lede{color:var(--fg-on-dark-2)}
.muted{color:var(--ink-2)}
.dark .muted{color:var(--fg-on-dark-2)}
.stack{display:grid;gap:1.1rem}
.stack-lg{display:grid;gap:1.8rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1.05rem 1.6rem;border:1.5px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--white);border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.btn-dark{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-dark:hover{background:#000}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.dark .btn-outline{color:var(--fg-on-dark);border-color:var(--fg-on-dark)}
.dark .btn-outline:hover{background:var(--fg-on-dark);color:var(--black)}
.btn .arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}
.link{font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:.2rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px}
.logo{display:block;width:clamp(180px,20vw,236px);flex:none}
.logo img{width:100%}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2rem;align-items:center}
.nav a{text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
.nav .btn{padding:.8rem 1.2rem;font-size:.74rem}
.nav .btn-stack{flex-direction:column;gap:0;white-space:normal;text-align:center;line-height:1.3;padding:.5rem 1.2rem}
.nav .btn-stack span{display:block}
/* header CTA: bleeds to the right edge of the screen, full header height, black text */

.nav li.cta{width:172px;flex:none}
.nav li.cta .btn-stack{position:absolute;top:0;bottom:0;right:0;border:0;color:var(--black);justify-content:center;align-items:center;
  width:calc(172px + max(0px,(100vw - var(--maxw))/2) + var(--gutter));
  padding:0 1.25rem;font-size:.84rem;letter-spacing:.13em;line-height:1.45;
  background:transparent;color:var(--orange);box-shadow:none;transition:color .3s ease}
.nav li.cta .btn-stack:hover{color:var(--orange);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
@media (max-width:900px){.nav li.cta{width:100%}.nav li.cta .btn-stack{position:static;width:auto;padding:.9rem 1.2rem;background:transparent;color:var(--orange);border:1.5px solid var(--orange)}}
.nav-toggle{display:none;background:transparent;border:0;color:var(--black);transition:color 1.4s ease;padding:.55rem .8rem;font:inherit;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.5rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:.2rem}
  .nav li{width:100%}
  .nav a:not(.btn){display:block;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--black)}
  .nav-toggle{color:var(--black)}
  .nav .btn{margin-top:1rem}
  .site-header.on-dark .nav-toggle{color:var(--white)}
  .site-header.on-dark .nav{background:var(--black);border-bottom-color:rgba(255,255,255,.12)}
  .site-header.on-dark .nav ul li a:not(.btn){color:var(--white);border-bottom-color:rgba(255,255,255,.14)}
}

/* sections */
section{padding-block:clamp(4rem,9vw,7.5rem)}
.dark{background:var(--black);color:var(--fg-on-dark)}
.stone{background:var(--stone)}
.section-head{display:grid;gap:1.2rem;max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head.split{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:2rem}
@media (max-width:760px){.section-head.split{grid-template-columns:1fr}}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-dark)}

/* photo slots */
.photo{background:var(--stone-2);position:relative;overflow:hidden;max-width:100%}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#E4DFD6,#D3CDC2)}
.photo.ph::after{content:attr(data-label);position:absolute;left:1rem;bottom:1rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.8);padding:.4rem .7rem}
.dark .photo.ph::before{background:linear-gradient(160deg,#2B2925,#1F1D1A)}
.dark .photo.ph::after{color:var(--fg-on-dark-2);background:rgba(0,0,0,.5)}

/* hero */
.hero{padding-block:clamp(2rem,4.5vw,4rem) 0;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .photo{aspect-ratio:4/5;margin-bottom:0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;padding-block:1.5rem;border-top:1px solid var(--line-dark);margin-top:2.5rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-2);font-weight:700}
.hero-meta b{color:var(--fg-on-dark);font-weight:700}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero .photo{aspect-ratio:16/10}}

/* stat strip */
.strip{border-block:1px solid var(--line);background:var(--white)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding-inline:0;max-width:none}
.strip .cell{background:var(--white);padding:1.6rem var(--gutter);display:grid;gap:.25rem}
.strip b{font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.strip span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
@media (max-width:860px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}

/* plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.plan-card{display:grid;gap:1rem;text-decoration:none;min-width:0;color:inherit}
.plan-card .photo{aspect-ratio:4/3}
.plan-card .photo svg{width:100%;height:100%}
.plan-card .specs{display:flex;gap:1.2rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.dark .plan-card .specs{color:var(--fg-on-dark-2)}
.plan-card h3{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.plan-card h3 .arrow{color:var(--orange);font-weight:800;transition:transform .18s}
.plan-card:hover h3 .arrow{transform:translateX(4px)}
.plan-card p{color:var(--ink-2);font-size:.98rem}
.dark .plan-card p{color:var(--fg-on-dark-2)}
.badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .6rem;border:1.5px solid var(--orange);color:var(--orange);width:max-content}
.badge.solid{background:var(--orange);color:var(--white)}
@media (max-width:960px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plan-grid{grid-template-columns:1fr}}

/* elevation illustration */
.elev{background:var(--stone);padding:8%;display:flex;align-items:center;justify-content:center}
.elev svg{width:100%;height:auto;max-width:100%}
.elev .ln{fill:none;stroke:var(--black);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.elev .ln-thin{fill:none;stroke:var(--black);stroke-width:1.2;stroke-linejoin:round}
.elev .fill{fill:var(--white);stroke:var(--black);stroke-width:2.2;stroke-linejoin:round}
.elev .acc{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round}
.elev .ground{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 6}
.dark .elev{background:#232120}
.dark .elev .ln,.dark .elev .ln-thin{stroke:var(--fg-on-dark)}
.dark .elev .fill{fill:#2B2927;stroke:var(--fg-on-dark)}

/* feature list (two-column definition) */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem}
.features.four{grid-template-columns:repeat(4,1fr)}
.features.two{grid-template-columns:repeat(2,1fr)}
.feature{display:grid;gap:.6rem;border-top:1.5px solid var(--black);padding-top:1.2rem;min-width:0}
.dark .feature{border-top-color:var(--fg-on-dark)}
.feature h3{font-size:1.15rem}
.feature p{color:var(--ink-2);font-size:.98rem}
.dark .feature p{color:var(--fg-on-dark-2)}
@media (max-width:860px){.features,.features.four{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.features,.features.four,.features.two{grid-template-columns:1fr}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;counter-reset:s}
.step{display:grid;gap:.6rem;min-width:0}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.2em;color:var(--orange)}
.step h3{font-size:1.1rem}
.step p{font-size:.95rem;color:var(--fg-on-dark-2)}
.step .when{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2);font-weight:700;border-top:1px solid var(--line-dark);padding-top:.7rem;margin-top:.4rem}
@media (max-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.gallery .photo{min-width:0}
.gallery .g1{grid-column:span 7;aspect-ratio:16/10}
.gallery .g2{grid-column:span 5;aspect-ratio:4/5}
.gallery .g3{grid-column:span 4;aspect-ratio:4/3}
.gallery .g4{grid-column:span 4;aspect-ratio:4/3}
.gallery .g5{grid-column:span 4;aspect-ratio:4/3}
@media (max-width:700px){.gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5{grid-column:span 6;aspect-ratio:4/3}}
.project{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--line)}
.project:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.project:nth-child(even) .photo{order:2}
.project .photo{aspect-ratio:3/2}
.project .photo.portrait{aspect-ratio:4/5;max-width:440px;justify-self:center}
.project .photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.project .photo-pair .photo{aspect-ratio:4/5}
.project:nth-child(even) .photo-pair{order:2}
@media (max-width:760px){.project:nth-child(even) .photo-pair{order:0}}
.project dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.9rem;margin:0}
.project dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;padding-top:.15rem}
.project dd{margin:0}
@media (max-width:760px){.project,.project:nth-child(even){grid-template-columns:1fr}.project:nth-child(even) .photo{order:0}}

/* quote */
.quote{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:-.01em;max-width:30ch;text-wrap:balance}
.quote-who{margin-top:1.2rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:700}

/* CTA band */
.cta-band{background:var(--orange);color:var(--white)}
.cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.cta-band h2{color:var(--white)}
.cta-band .btn-outline{color:var(--white);border-color:var(--white)}
.cta-band .btn-outline:hover{background:var(--white);color:var(--orange)}
.cta-band p{color:rgba(255,255,255,.85);margin-top:.6rem}
@media (max-width:760px){.cta-band .wrap{grid-template-columns:1fr}}

/* plan detail */
.plan-hero{padding-block:clamp(3rem,6vw,5rem) 0}
.plan-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.spec-row{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:2.5rem}
.spec-row>div{padding:1.3rem 1rem;border-left:1px solid var(--line)}
.spec-row>div:first-child{border-left:0;padding-left:0}
.spec-row b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.spec-row span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;display:block;margin-top:.35rem}
@media (max-width:860px){.plan-hero-grid{grid-template-columns:1fr}.spec-row{grid-template-columns:1fr 1fr}.spec-row>div:nth-child(3){border-left:0;padding-left:0}}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.two-col.mid{align-items:center}
.about-photo{aspect-ratio:4/3}
.about-photo.portrait{aspect-ratio:4/5;max-width:480px}.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.two-col{grid-template-columns:minmax(0,1fr)}}
.sticky{position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.checklist{list-style:none;padding:0;display:grid;gap:.7rem}
.checklist li{display:grid;grid-template-columns:18px 1fr;gap:.8rem;align-items:start;font-size:.98rem}
.checklist li::before{content:"";width:18px;height:18px;border:1.5px solid var(--orange);margin-top:.25rem;background:linear-gradient(135deg,transparent 45%,var(--orange) 45% 55%,transparent 55%)}
.cost-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cost-table th,.cost-table td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.cost-table th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.cost-table td:last-child,.cost-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
@media (min-width:600px){.cost-table td:last-child,.cost-table th:last-child{white-space:nowrap}}
.cost-table{table-layout:fixed}
.note{font-size:.85rem;color:var(--ink-2);border-left:2px solid var(--orange);padding-left:1rem}
.dark .note{color:var(--fg-on-dark-2)}
.plan-nav{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.plan-nav a{text-decoration:none;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border:1.5px solid var(--line);padding:.6rem .9rem;color:var(--ink-2)}
.plan-nav a:hover,.plan-nav a[aria-current="page"]{border-color:var(--orange);color:var(--ink)}
.drawings{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.drawings .photo{aspect-ratio:4/3}
@media (max-width:600px){.drawings{grid-template-columns:1fr}}

/* guide */
.toc{display:grid;gap:.5rem;list-style:none;padding:0;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.toc a{text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:.5rem 0 .5rem 1rem;border-left:2px solid var(--line);display:block}
.toc a:hover{color:var(--ink);border-left-color:var(--orange)}
.guide-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:860px){.guide-grid{grid-template-columns:minmax(0,1fr)}.toc{position:static;display:flex;flex-wrap:wrap;gap:.4rem}.toc a{border:1.5px solid var(--line);padding:.5rem .8rem}}
.guide-section{padding-block:0 clamp(2.5rem,5vw,4rem);display:grid;gap:1rem;max-width:var(--measure)}
.guide-section h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:.4rem}
.guide-section h3{font-size:1.1rem;margin-top:.8rem}
.guide-section p,.guide-section li{color:var(--ink-2)}
.guide-section li{margin-bottom:.35rem}
.guide-section .cost-table{max-width:none}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-weight:800;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.8rem}

/* schedule / form */
.form-card{background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;min-width:0}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;min-width:0}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1.5px solid var(--line);padding:.85rem .9rem;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--black);outline:none}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.form-foot{font-size:.82rem;color:var(--ink-2)}
.booking{display:grid;gap:1rem}
.booking iframe{border:0}
.when-steps{display:grid;gap:1.6rem;counter-reset:w}
.when-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1rem;align-items:start}
.when-step>div{min-width:0}
.when-step::before{counter-increment:w;content:counter(w);width:44px;height:44px;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.when-step h3{font-size:1.05rem;margin-bottom:.3rem}
.when-step p{font-size:.95rem;color:var(--ink-2)}

/* page header (interior pages) */
.page-head{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--line)}
.page-head .wrap{display:grid;gap:1.2rem;max-width:var(--maxw)}
.page-head h1{font-size:clamp(2.4rem,5vw,4rem);max-width:16ch}

/* footer */
footer{background:var(--black);color:var(--fg-on-dark-2);padding-block:clamp(3rem,6vw,5rem) 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.foot-grid h4{color:var(--fg-on-dark);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.foot-grid ul{list-style:none;padding:0;display:grid;gap:.55rem;font-size:.92rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--fg-on-dark)}
.foot-logo{width:min(100%,260px);margin-bottom:1.2rem}
.foot-contact{display:grid;gap:.35rem;font-size:.95rem}
.foot-contact b{color:var(--fg-on-dark);font-weight:700}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--line-dark);margin-top:3rem;padding-top:1.5rem;font-size:.76rem;letter-spacing:.08em}
.foot-bottom .ccb{color:var(--fg-on-dark);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem}
.person h3{margin:1.25rem 0 .25rem;font-size:1.35rem}
.person .role{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 .75rem}
.person .photo{max-width:420px}
@media (max-width:760px){.team{grid-template-columns:1fr}}

/* plan photos */
.hero-photo{aspect-ratio:4/3}
.hero-photo img,.plan-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.plan-gallery .g1{grid-column:span 7;aspect-ratio:16/11}
.plan-gallery .g2{grid-column:span 5;aspect-ratio:1.04}
.plan-gallery .g3,.plan-gallery .g4,.plan-gallery .g5,.plan-gallery .g6{grid-column:span 6;aspect-ratio:16/10}
.plan-gallery .g5,.plan-gallery .g6{grid-column:span 6}
@media (max-width:760px){.plan-gallery .photo{grid-column:span 12 !important;aspect-ratio:16/11}}

.page-head-lite{padding-top:clamp(1.5rem,3vw,2.5rem)}

/* photo shadows */
.photo:not(.ph):not(.elev){box-shadow:0 18px 40px rgba(26,26,26,.22),0 4px 10px rgba(26,26,26,.12)}
.dark .photo:not(.ph):not(.elev){box-shadow:0 14px 34px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.3)}
.plan-gallery{gap:1.5rem}
.plan-gallery.two .g1,.plan-gallery.two .g2{grid-column:span 6;aspect-ratio:16/10}
.plan-gallery .photo{position:relative}
.plan-gallery .photo-label{position:absolute;left:0;bottom:0;background:var(--black);color:var(--white);font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem}
.team{gap:3.5rem}

/* drawing sheets */
.drawings{gap:1.5rem}
.drawings .sheet{display:block;aspect-ratio:4/3;background:var(--white);border:1px solid var(--line);position:relative;text-decoration:none}
.drawings .sheet img{width:100%;height:100%;object-fit:contain;display:block;background:var(--white)}
.drawings .sheet .sheet-label{position:absolute;left:0;bottom:0;background:var(--black);color:var(--white);font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem}
.drawings .sheet:hover{border-color:var(--orange)}
.plan-gallery .g5:last-child{grid-column:4 / span 6;aspect-ratio:16/10}

/* scroll reveal */
.reveal{opacity:0;transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.22,.61,.36,1)}
.reveal.from-left{transform:translateX(-72px)}
.reveal.from-right{transform:translateX(72px)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}


/* shadow line where section colors change */
main>section,footer{position:relative}
main>section::before,footer::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(to bottom,rgba(26,26,26,.10),rgba(26,26,26,0));pointer-events:none;z-index:1}
.dark::before,footer::before{background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0))}
main>section:first-child::before,.hero+section::before,.plan-hero+section::before,.page-head+section::before,.page-head-lite+section::before{display:none}

/* homepage header: black at the top of the page, fades to white on scroll */
.site-header{transition:background-color 1.4s ease}
.logo{position:relative}
.logo .logo-dark{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.logo .logo-light{transition:opacity 1.4s ease}
.site-header.on-dark{background:var(--black)}
.site-header.on-dark .logo .logo-dark{opacity:1}
.site-header.on-dark .logo .logo-light{opacity:0}
.site-header.on-dark .nav a:not(.btn){color:var(--fg-on-dark-2)}
.site-header.on-dark .nav a:not(.btn):hover,.site-header.on-dark .nav a[aria-current="page"]{color:var(--white)}
.nav a:not(.btn){transition:color 1.4s ease}

/* horizontal build timeline (homepage) */
.timeline{padding-block:0}
.timeline .tl-sticky{padding-block:clamp(3rem,6vw,5rem) clamp(3rem,6vw,5rem)}
.timeline .tl-hint{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tl-viewport{overflow:hidden;margin-top:clamp(2rem,4vw,3.5rem)}
.tl-track{position:relative;display:flex;gap:clamp(2rem,4vw,4rem);padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));padding-top:1.6rem;will-change:transform}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-dark)}
.tl-progress{position:absolute;left:0;top:0;height:2px;width:0;background:var(--orange);transition:width .12s linear}
.tl-step{position:relative;flex:0 0 clamp(280px,26vw,360px);display:grid;gap:.6rem;align-content:start;counter-increment:s}
.tl-step::before{content:"0" counter(s);font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.2em;color:var(--orange)}
.tl-dot{position:absolute;top:-1.6rem;left:0;width:14px;height:14px;border-radius:50%;background:var(--black);border:2px solid var(--orange);transform:translateY(-6px);transition:background .3s}
.tl-step.passed .tl-dot{background:var(--orange)}
.tl-progress{transition:width .08s linear}
.tl-when{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2);font-weight:700;margin:0}
.tl-step h3{font-size:1.15rem}
.tl-step p{font-size:.95rem;color:var(--fg-on-dark-2)}
.tl-photo{margin-top:.6rem;aspect-ratio:3/2;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.3)}
.tl-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tl-photo.sheet{background:var(--white);aspect-ratio:4/3}
.tl-photo.sheet img{object-fit:contain}
.tl-track{counter-reset:s}
/* sticky scroll-driven mode (added by JS on wide screens) */
.timeline.tl-active .tl-sticky{position:sticky;top:0;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:calc(78px + 2rem)}
.timeline.tl-active .tl-hint{transition:opacity .4s}
.timeline.tl-active.tl-end .tl-hint{opacity:0}
/* fallback: plain horizontal scroll on narrow screens / reduced motion */
.timeline:not(.tl-active) .tl-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:1rem}
.timeline:not(.tl-active) .tl-track{padding-inline:var(--gutter)}
.timeline:not(.tl-active) .tl-progress{display:none}
.timeline:not(.tl-active) .tl-hint span{display:inline}
@media (max-width:639px){.timeline .tl-hint{display:none}.tl-step{flex-basis:min(78vw,320px)}}
.timeline .tl-sticky>.wrap{width:100%;box-sizing:border-box}

.about-feats{grid-template-columns:1fr 1fr;gap:1.4rem 2rem}
@media (max-width:560px){.about-feats{grid-template-columns:1fr}}

.booking-frame{width:100%;height:min(1100px,calc(100vh - 120px));min-height:720px;border:1px solid var(--line);background:var(--white);display:block}
.booking-alt{margin-top:1rem;font-size:.9rem}

.booking-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;background:var(--stone);padding:clamp(1.5rem,4vw,3rem)}
.booking-cta h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.btn-lg{padding:1.1rem 1.6rem;font-size:.9rem}
.booking-embed{display:none}.booking-embed.on{display:block;margin-top:1.5rem}
@media (max-width:760px){.booking-cta{grid-template-columns:minmax(0,1fr)}.booking-cta .btn{white-space:normal;text-align:center;line-height:1.4}}

.price-table td:first-child a{color:inherit;font-weight:700;text-decoration:none}
.price-table td:first-child a:hover{color:var(--orange)}
.price-table td:last-child{font-weight:700;color:var(--ink)}
@media (max-width:600px){.price-table td:nth-child(2){font-size:.85rem}}