/* Wiltshire Rugs — site.css
   Fonts: Adobe Fonts kit wju7bqz — ivypresto-display (display), neue-haas-grotesk-text (body) */

:root{
  --ground:#EFE8DA;      /* warm cream page */
  --ground-2:#F7F2E8;    /* lighter cream */
  --surface:#FBF8F1;     /* cards */
  --tan:#D9C8AC;         /* blob */
  --tan-2:#CBB897;
  --dark:#171A16;        /* near black, green tint */
  --dark-2:#1F241E;
  --green:#2F4A3A;       /* forest */
  --green-2:#3E5E4B;
  --sage:#8FA58F;
  --text:#1E211D;
  --muted:#6B6F66;
  --line:rgba(30,33,29,.12);
  --gap:24px;
  --r:28px;
  --r-sm:18px;
  --display:"ivypresto-display", Georgia, "Times New Roman", serif;
  --body:"neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
}
@media (max-width:820px){ :root{ --gap:14px; --r:20px; --r-sm:14px; } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:auto }
html.lenis{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto }
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; font-weight:400 }
p{ margin:0 0 1.2em }
p:last-child{ margin-bottom:0 }
svg{ display:block }
main{ position:relative }

.wrap{ width:100%; max-width:1680px; margin-inline:auto; padding-inline:clamp(20px,3vw,48px) }
.center{ display:flex; justify-content:center }

/* ---------- type ---------- */
.h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(38px,4.2vw,68px); line-height:1.02;
}
.h2--xl{ font-size:clamp(32px,3.6vw,58px); line-height:1.12; max-width:1100px; margin:0 auto var(--gap); text-align:center; color:#fff }
.h2 .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em }
.h2 .line > span{ display:block }
.section-head{ max-width:760px; margin:0 auto calc(var(--gap)*2); text-align:center }
.section-head p{ color:var(--muted); font-size:19px }
.section-head--light{ color:#fff }
.section-head--light p{ color:rgba(255,255,255,.7) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px; width:max-content;
  padding:8px 8px 8px 24px; border-radius:999px; border:0; cursor:pointer;
  font:500 15px/1 var(--body); letter-spacing:.01em; white-space:nowrap;
}
.btn--dark{ background:var(--dark); color:#fff }
.btn--light{ background:var(--ground-2); color:var(--dark) }
.btn__arrow{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff }
.btn--light .btn__arrow{ background:var(--green); color:#fff }
.btn__arrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.btn:hover .btn__arrow svg{ transform:translate(2px,-2px) }

/* ---------- loader ---------- */
.loader{ position:fixed; inset:0; z-index:100; background:var(--ground); display:grid; place-items:center; grid-auto-rows:max-content; align-content:center; gap:28px }
.loader__mark img{ width:120px; height:120px }
.loader__bar{ width:120px; height:2px; background:var(--line); overflow:hidden }
.loader__bar span{ display:block; height:100%; width:0; background:var(--green) }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 0; transition:transform .5s cubic-bezier(.2,.8,.2,1), background .4s }
.nav.is-hidden{ transform:translateY(-110%) }
.nav.is-solid{ background:rgba(239,232,218,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.nav__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1; text-transform:uppercase; padding:6px 0 }
.nav__word{ font-family:var(--display); font-size:24px; letter-spacing:.04em }
.nav__sub{ font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.32em; color:var(--green); padding-left:2px }
.nav__links{ display:flex; gap:32px; font-size:15px; font-weight:500 }
.nav__links a{ position:relative; padding:6px 0; color:var(--text) }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1) }
.nav__right{ display:flex; align-items:center; gap:14px }
.nav__burger{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; display:grid; grid-template-columns:repeat(2,6px); gap:5px; place-content:center; padding:0 }
.nav__burger span{ width:6px; height:6px; border-radius:50%; background:var(--dark); transition:transform .4s }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translate(3px,3px) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translate(-3px,3px) }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translate(3px,-3px) }
.nav__burger[aria-expanded="true"] span:nth-child(4){ transform:translate(-3px,-3px) }

.menu{ position:fixed; inset:0; z-index:40; background:var(--dark); color:#fff; clip-path:circle(0 at calc(100% - 44px) 44px); visibility:hidden }
.menu__inner{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 clamp(24px,8vw,120px) }
.menu__inner a{ font-family:var(--display); font-size:clamp(40px,7vw,84px); line-height:1.05; opacity:0; transform:translateY(20px) }
.menu__inner a:hover{ color:var(--sage) }
.menu__meta{ margin-top:32px; color:rgba(255,255,255,.6); font-size:16px; line-height:1.7 }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:96px; min-height:100svh; display:flex; align-items:flex-start; overflow:hidden }
.hero__wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; min-height:calc(100svh - 96px) }
.hero__title{
  grid-column:1/-1; grid-row:1; position:relative; z-index:1; max-width:100%; overflow:hidden;
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:-.02em;
  font-size:200px; line-height:.86; margin-top:.02em; white-space:nowrap;
  display:flex; justify-content:space-between; gap:.25em;
}
.hero__line{ display:block; flex:none; overflow:hidden; padding:0 .04em .14em; margin-bottom:-.14em }
.hero__line .ch{ display:inline-block; will-change:transform }
.hero__line--2{ margin-right:0 }
.hero__copy{ grid-column:1; grid-row:2; align-self:center; z-index:3; max-width:560px; padding:40px 0 56px }
.hero__proof{ display:flex; align-items:center; gap:14px; margin-bottom:22px }
.hero__avatars{ display:flex }
.hero__avatars img{ width:44px; height:44px; border-radius:50%; border:3px solid var(--ground); object-fit:cover; margin-left:-12px }
.hero__avatars img:first-child{ margin-left:0 }
.hero__proof strong{ display:block; font-family:var(--display); font-size:26px; line-height:1; letter-spacing:-.01em }
.hero__proof small{ display:block; font-size:13px; color:var(--muted); line-height:1.3; margin-top:4px }
.hero__sub{ font-family:var(--display); font-size:clamp(28px,2.6vw,40px); line-height:1.1; margin-bottom:16px }
.hero__copy p{ color:var(--muted); max-width:46ch; margin-bottom:26px }
.hero__media{ grid-column:2; grid-row:2; position:relative; z-index:2; align-self:start; justify-self:end; width:min(31vw,520px); margin:.5vw 7vw 0 0; pointer-events:none }
.hero__arch{ position:relative; aspect-ratio:9/11.5; border-radius:999px 999px var(--r) var(--r); overflow:hidden; background:var(--tan); box-shadow:0 50px 80px -30px rgba(30,33,29,.35); transform:translateZ(0) }
.hero__canvas,.hero__still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.hero__canvas{ opacity:0 }
.hero__hint{ position:absolute; left:0; bottom:-36px; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); opacity:0 }
.hero__hint span{ width:28px; height:1px; background:var(--muted) }
.hero__social{ position:absolute; right:clamp(20px,3vw,48px); top:50%; transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:10px; padding:10px; background:var(--dark); border-radius:999px }
.hero__social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:background .3s }
.hero__social a:hover{ background:var(--green) }
.hero__social svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.hero__social a:first-child svg{ fill:currentColor; stroke:none }

/* ---------- dark panel ---------- */
.panel{ padding:var(--gap) 0 }
.panel__box{ background:var(--dark); color:#fff; border-radius:var(--r); padding:clamp(28px,4vw,64px); display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(28px,4vw,64px); align-items:center; position:relative; overflow:hidden }
.panel__box::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 20% 30%, rgba(63,94,75,.35), transparent 70%); pointer-events:none }
.panel__copy{ position:relative; max-width:460px }
.panel__copy p{ color:rgba(255,255,255,.72); margin:0 0 28px }
.stat{ display:flex; align-items:center; gap:16px; margin:26px 0 22px }
.stat svg{ width:40px; height:40px; fill:none; stroke:var(--sage); stroke-width:1.5; stroke-linejoin:round }
.stat strong{ display:block; font-family:var(--display); font-size:34px; line-height:1 }
.stat small{ display:block; font-size:14px; color:rgba(255,255,255,.6); margin-top:4px }
.panel__cards{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.mini{ margin:0 }
.mini__img{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1.05; background:var(--surface) }
.mini__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1) }
.mini:hover .mini__img img{ transform:scale(1.05) }
.mini figcaption{ font-size:15px; color:rgba(255,255,255,.72); margin-top:14px; padding-right:12px }

/* ---------- feature (blob) ---------- */
.feature{ padding:calc(var(--gap)*3) 0 }
.feature__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,6vw,110px); align-items:center }
.feature--flip .feature__grid{ grid-template-columns:1fr 1.1fr }
.feature--flip .feature__media{ order:2 }
.feature__media{ position:relative; aspect-ratio:1/.92 }
.blob{ position:absolute; inset:6% 4%; background:var(--tan); border-radius:58% 42% 46% 54% / 47% 56% 44% 53%; }
.blob--b{ background:var(--sage); border-radius:42% 58% 55% 45% / 55% 44% 56% 45% }
.feature__img{ position:absolute; left:12%; top:2%; width:70%; height:96%; object-fit:cover; border-radius:44% 44% 40% 40% / 30% 30% 22% 22%; box-shadow:0 40px 70px rgba(30,33,29,.22) }
.feature--flip .feature__img{ left:18% }
.feature__copy p{ color:var(--muted); max-width:52ch }
.feature__copy .h2{ margin-bottom:22px }
.ticks{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:10px }
.ticks li{ position:relative; padding-left:30px }
.ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:16px; height:8px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg) translateY(-2px) }

/* ---------- products (dark, bg image) ---------- */
.products,.gallery{ position:relative; color:#fff; padding:calc(var(--gap)*4) 0 calc(var(--gap)*3); overflow:hidden; isolation:isolate }
.products__bg,.gallery__bg{ position:absolute; inset:-15% 0; z-index:-2; background:var(--img) center/cover no-repeat; }
.products::before,.gallery::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(23,26,22,.88), rgba(23,26,22,.86)) }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-bottom:calc(var(--gap)*2) }
.card{ background:var(--surface); color:var(--text); border-radius:var(--r-sm); padding:16px; display:flex; flex-direction:column; gap:14px }
.card__top{ display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.swatches{ display:flex; gap:4px }
.swatches i{ width:12px; height:12px; border-radius:50%; background:var(--c); border:1px solid rgba(0,0,0,.08) }
.card__img{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--ground) }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1) }
.card:hover .card__img img{ transform:scale(1.06) }
.card__foot{ display:flex; justify-content:space-between; align-items:center; gap:12px }
.card__foot h3{ font-family:var(--display); font-size:22px; line-height:1.1 }
.card__foot small{ display:block; color:var(--muted); font-size:14px; margin-top:4px }
.card__go{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--dark); color:#fff; display:grid; place-items:center; transition:background .3s }
.card__go:hover{ background:var(--green) }
.card__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ---------- pair ---------- */
.pair{ padding:calc(var(--gap)*3) 0 }
.pair__grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:var(--gap) clamp(32px,5vw,90px); align-items:center }
.pair__big{ grid-row:1/3; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1.05 }
.pair__big img,.pair__small img{ width:100%; height:100%; object-fit:cover }
.pair__copy{ align-self:end; padding-bottom:10px }
.pair__copy .h2{ margin-bottom:20px }
.pair__copy p{ color:var(--muted); max-width:54ch; margin-bottom:28px }
.pair__small{ border-radius:var(--r); overflow:hidden; aspect-ratio:16/10 }

/* ---------- gallery ---------- */
.gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start; margin-top:calc(var(--gap)*3) }
.shot{ margin:0 }
.shot img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm) }
.shot--tall img{ aspect-ratio:4/6.1 }
.shot figcaption{ font-size:15px; color:rgba(255,255,255,.7); margin-top:16px; line-height:1.5 }
.shot figcaption strong{ display:block; color:#fff; font-weight:500; margin-bottom:4px }

/* ---------- reviews ---------- */
.reviews{ padding:calc(var(--gap)*3) 0 }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.quote{ margin:0; background:var(--surface); border-radius:var(--r-sm); padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:240px }
.quote p{ font-family:var(--display); font-size:24px; line-height:1.3 }
.quote cite{ font-style:normal; font-size:14px; color:var(--muted); letter-spacing:.04em }
.quote--dark{ background:var(--dark); color:#fff }
.quote--dark cite{ color:rgba(255,255,255,.6) }
.quote--green{ background:var(--green); color:#fff }
.quote--green cite{ color:rgba(255,255,255,.7) }

/* ---------- contact ---------- */
.contact{ padding:0 0 var(--gap) }
.contact__box{ background:var(--dark); color:#fff; border-radius:var(--r); padding:clamp(28px,4vw,64px); display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,90px); align-items:start; width:calc(100% - 2*clamp(20px,3vw,48px)); max-width:calc(1680px - 2*clamp(20px,3vw,48px)); position:relative; overflow:hidden }
.contact__box::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 70% at 85% 90%, rgba(63,94,75,.4), transparent 70%); pointer-events:none }
.contact__copy,.form{ position:relative }
.contact__copy .h2{ margin-bottom:18px }
.contact__copy > p{ color:rgba(255,255,255,.72); margin-bottom:32px; max-width:46ch }
.contact__details{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:22px }
.contact__details dt{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px }
.contact__details dd{ margin:0; font-size:17px }
.contact__details a:hover{ color:var(--sage) }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form label{ display:grid; gap:8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6) }
.form input,.form select,.form textarea{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font:400 16px/1.4 var(--body); outline:none; transition:border-color .3s, background .3s }
.form select option{ color:var(--text) }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--sage); background:rgba(255,255,255,.1) }
.form textarea{ resize:vertical }
.form__full{ grid-column:1/-1 }
.form .btn{ justify-self:start; background:var(--ground-2); color:var(--dark) }
.form__note{ grid-column:1/-1; font-size:14px; color:var(--sage); min-height:1em; margin:0 }

/* ---------- footer ---------- */
.footer{ background:var(--dark); color:#fff; margin-top:var(--gap); padding:calc(var(--gap)*3) 0 var(--gap) }
.footer__top{ display:flex; align-items:center; gap:32px; padding-bottom:calc(var(--gap)*2); border-bottom:1px solid rgba(255,255,255,.1) }
.footer__logo{ width:110px; height:110px; flex:none }
.footer__top p{ color:rgba(255,255,255,.65); max-width:60ch; font-size:16px }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding:calc(var(--gap)*2) 0 }
.footer__cols h4{ font-family:var(--display); font-size:20px; margin-bottom:16px }
.footer__cols a,.footer__cols span{ display:block; font-size:15px; color:rgba(255,255,255,.65); line-height:1.5; margin-bottom:8px }
.footer__cols a:hover{ color:#fff }
.footer__fb{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid !important; place-items:center; margin-top:14px }
.footer__fb svg{ width:16px; height:16px; fill:#fff }
.footer__bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:var(--gap); border-top:1px solid rgba(255,255,255,.1); font-size:14px; color:rgba(255,255,255,.55) }
.footer__bottom a{ margin-left:20px }
.footer__bottom a:hover{ color:#fff }

/* ---------- reveals ---------- */
.reveal{ opacity:0; transform:translateY(40px) }
.reveal-box{ opacity:0; transform:translateY(60px) scale(.985) }
.parallax{ will-change:transform }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav__links{ display:none }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .reviews__grid{ grid-template-columns:repeat(2,1fr) }
  .footer__cols{ grid-template-columns:repeat(2,1fr) }
  .panel__box{ grid-template-columns:1fr }
  .panel__copy{ max-width:none }
}
@media (max-width:820px){
  body{ font-size:17px }
  .nav .btn{ display:none }
  .hero{ padding-top:84px; min-height:auto }
  .hero__wrap{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; min-height:0 }
  .hero__title{ flex-direction:column; gap:0; line-height:.9 }
  .hero__line--2{ margin-left:12vw }
  .hero__media{ grid-column:1; grid-row:2; width:min(64vw,340px); justify-self:center; margin:8px 0 0 }
  .hero__copy{ grid-row:3; padding:12px 0 40px }
  .hero__social{ display:none }
  .hero__hint{ display:none }
  .feature__grid,.feature--flip .feature__grid{ grid-template-columns:1fr }
  .feature--flip .feature__media{ order:0 }
  .feature__media{ width:100%; max-width:520px; margin:0 auto }
  .products,.gallery{ padding:calc(var(--gap)*4) 0 }
  .pair__grid{ grid-template-columns:1fr }
  .pair__big{ grid-row:auto }
  .gallery__grid{ grid-template-columns:1fr }
  .shot img,.shot--tall img{ aspect-ratio:4/5 }
  .contact__box{ grid-template-columns:1fr }
  .form{ grid-template-columns:1fr }
  .footer__top{ flex-direction:column; align-items:flex-start }
}
@media (max-width:560px){
  .cards,.reviews__grid,.footer__cols{ grid-template-columns:1fr }
  .contact__details{ grid-template-columns:1fr }
  .panel__cards{ grid-template-columns:1fr }
  .mini__img{ aspect-ratio:16/10 }
}

/* ============ inner pages ============ */
.page-head{ padding:140px 0 var(--gap) }
.page-head--tight{ padding-bottom:0 }
.page-head__grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:var(--gap) clamp(32px,6vw,120px); align-items:end; margin-bottom:calc(var(--gap)*2) }
.page-title{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; font-size:clamp(44px,5.8vw,100px); line-height:.98 }
.page-title .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em }
.page-title .line > span{ display:block }
.page-head__intro{ font-size:19px; color:var(--muted); max-width:46ch; margin:0; padding-bottom:.4em }
.band{ border-radius:var(--r); overflow:hidden; aspect-ratio:21/9; background:var(--tan) }
.band img{ width:100%; height:100%; object-fit:cover }

.intro{ padding:calc(var(--gap)*3) 0 var(--gap) }
.intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) clamp(32px,6vw,120px); align-items:start }
.intro__copy p{ color:var(--muted); font-size:19px; max-width:56ch }
.intro__copy .btn{ margin-top:8px }

.panel__box--stairs{ grid-template-columns:1fr 1fr }
.panel__duo{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:end }
.panel__duo .mini:first-child{ margin-bottom:48px }
.mini__img--tall{ aspect-ratio:4/5.2 }

.person{ padding:calc(var(--gap)*3) 0 }
.person__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--gap) clamp(32px,6vw,110px); align-items:center }
.person__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5 }
.person__img img{ width:100%; height:100%; object-fit:cover }
.person__copy .h2{ margin-bottom:20px }
.person__copy p{ color:var(--muted); max-width:56ch }
.facts{ margin:32px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-top:28px; border-top:1px solid var(--line) }
.facts dt{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.facts dd{ margin:0; font-family:var(--display); font-size:22px; line-height:1.15 }

.cta{ padding:var(--gap) 0 }
.cta__box{ position:relative; overflow:hidden; border-radius:var(--r); color:#fff; padding:clamp(48px,7vw,120px) clamp(28px,5vw,80px); text-align:center; isolation:isolate; display:flex; flex-direction:column; align-items:center }
.cta__bg{ position:absolute; inset:-15% 0; z-index:-2; background:var(--img) center/cover no-repeat }
.cta__box::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(23,26,22,.78), rgba(23,26,22,.86)) }
.cta__box .h2{ max-width:16ch; margin:0 auto 18px }
.cta__box p{ color:rgba(255,255,255,.75); max-width:52ch; margin:0 auto 30px; font-size:19px }

.services{ padding:calc(var(--gap)*3) 0 var(--gap) }
.service{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) clamp(32px,6vw,110px); align-items:center; padding:calc(var(--gap)*2) 0; border-top:1px solid var(--line); scroll-margin-top:100px }
.service:first-child{ border-top:0; padding-top:0 }
.service--flip .service__img{ order:2 }
.service__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/4.4 }
.service__img img{ width:100%; height:100%; object-fit:cover }
.service__copy .h2{ margin-bottom:18px }
.service__copy > p{ color:var(--muted); max-width:56ch }
.service__copy .ticks{ margin-top:22px }

.finishes{ position:relative; color:#fff; padding:calc(var(--gap)*4) 0; overflow:hidden; isolation:isolate; scroll-margin-top:80px }
.finishes__bg{ position:absolute; inset:-15% 0; z-index:-2; background:var(--img) center/cover no-repeat }
.finishes::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(23,26,22,.9), rgba(23,26,22,.88)) }
.finishes__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.finish{ background:var(--surface); color:var(--text); border-radius:var(--r-sm); padding:16px 16px 28px }
.finish__img{ aspect-ratio:16/10; border-radius:12px; overflow:hidden; margin-bottom:22px }
.finish__img img{ width:100%; height:100%; object-fit:cover }
.finish h3{ font-family:var(--display); font-size:30px; line-height:1.1; margin:0 8px 10px }
.finish p{ color:var(--muted); margin:0 8px }

.process{ padding:calc(var(--gap)*4) 0 var(--gap) }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) }
.step{ background:var(--surface); border-radius:var(--r-sm); padding:28px 26px 30px }
.step svg{ width:36px; height:36px; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:22px }
.step h3{ font-family:var(--display); font-size:26px; line-height:1.1; margin-bottom:10px }
.step p{ color:var(--muted); font-size:16px }

.faq{ padding:calc(var(--gap)*3) 0 var(--gap) }
.faq__grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--gap) clamp(32px,6vw,120px); align-items:start }
.faq__lead{ color:var(--muted); max-width:36ch; margin-top:18px }
.faq__list{ border-top:1px solid var(--line) }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--display); font-size:24px; line-height:1.2 }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:""; flex:none; width:12px; height:12px; border-right:1.5px solid var(--text); border-bottom:1.5px solid var(--text); transform:rotate(45deg); transition:transform .4s; margin-right:6px }
.faq__item[open] summary::after{ transform:rotate(-135deg) }
.faq__item > div{ overflow:hidden }
.faq__item p{ color:var(--muted); max-width:60ch; padding-bottom:22px }

.gal{ padding:var(--gap) 0 }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:calc(var(--gap)*1.5) }
.filter{ border:1px solid var(--line); background:transparent; color:var(--text); font:500 14px/1 var(--body); padding:12px 18px; border-radius:999px; cursor:pointer; transition:background .3s,color .3s,border-color .3s }
.filter:hover{ border-color:var(--text) }
.filter.is-active{ background:var(--dark); color:#fff; border-color:var(--dark) }
.gal__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,auto); grid-auto-flow:dense; gap:var(--gap) }
.tile{ position:relative; display:block; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/5; background:var(--tan) }
.tile--wide{ grid-column:span 2; aspect-ratio:8/5 }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1) }
.tile:hover img{ transform:scale(1.05) }
.tile span{ position:absolute; left:14px; bottom:12px; right:14px; color:#fff; font-size:14px; padding:8px 12px; border-radius:10px; background:rgba(23,26,22,.55); backdrop-filter:blur(6px); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s }
.tile:hover span{ opacity:1; transform:none }
.tile.is-hidden{ display:none }
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(23,26,22,.94); display:grid; place-items:center; padding:60px }
.lightbox[hidden]{ display:none }
.lightbox figure{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:16px }
.lightbox img{ max-width:100%; max-height:calc(100vh - 160px); border-radius:var(--r-sm); object-fit:contain }
.lightbox figcaption{ color:rgba(255,255,255,.7); font-size:15px }
.lightbox__close,.lightbox__nav{ position:absolute; border:0; background:rgba(255,255,255,.08); color:#fff; width:52px; height:52px; border-radius:50%; font-size:26px; cursor:pointer; display:grid; place-items:center; transition:background .3s }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--green) }
.lightbox__close{ top:24px; right:24px }
.lightbox__nav{ top:50%; transform:translateY(-50%) }
.lightbox__nav--prev{ left:24px } .lightbox__nav--next{ right:24px }

.reviews--page{ padding:calc(var(--gap)*2) 0 var(--gap) }
.reviews__grid--page{ grid-template-columns:repeat(3,1fr); grid-auto-flow:dense }
.quote strong{ display:block; font:500 13px/1.4 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:14px }
.quote--dark strong,.quote--green strong{ color:var(--sage) }
.quote--lead{ grid-column:span 2 }
.quote--lead p{ font-size:clamp(30px,3vw,46px) }
.quote--img{ padding:0; overflow:hidden; min-height:0; position:relative }
.quote--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.reviews__grid--page .quote p{ font-size:21px }
.quote--lead p{ font-size:clamp(30px,3vw,46px) !important }

.contact--page{ padding:calc(var(--gap)*2) 0 var(--gap) }
.areas{ padding:calc(var(--gap)*3) 0 var(--gap) }
.areas__grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--gap) clamp(32px,6vw,110px); align-items:center }
.areas__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/4.6 }
.areas__img img{ width:100%; height:100%; object-fit:cover }
.areas__copy .h2{ margin-bottom:18px }
.areas__copy p{ color:var(--muted); max-width:54ch }
.areas__list{ list-style:none; padding:0; margin:28px 0; display:grid; grid-template-columns:repeat(2,max-content); gap:10px 48px }
.areas__list li{ position:relative; padding-left:22px; font-size:18px }
.areas__list li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--green) }
.areas__note{ font-size:16px }

@media (max-width:1100px){
  .steps{ grid-template-columns:repeat(2,1fr) }
  .gal__grid{ grid-template-columns:repeat(3,1fr) }
  .reviews__grid--page{ grid-template-columns:repeat(2,1fr) }
  .panel__box--stairs{ grid-template-columns:1fr }
}
@media (max-width:820px){
  .page-head{ padding-top:110px }
  .page-head__grid,.intro__grid,.person__grid,.service,.service--flip,.finishes__grid,.faq__grid,.areas__grid{ grid-template-columns:1fr }
  .service--flip .service__img{ order:0 }
  .band{ aspect-ratio:4/3 }
  .facts{ grid-template-columns:1fr; gap:14px }
  .gal__grid{ grid-template-columns:repeat(2,1fr) }
  .tile--wide{ grid-column:span 2; aspect-ratio:4/3 }
  .lightbox{ padding:16px }
  .lightbox__nav{ top:auto; bottom:16px; transform:none }
  .lightbox__close{ top:16px; right:16px }
  .panel__duo .mini:first-child{ margin-bottom:0 }
}
@media (max-width:560px){
  .steps,.reviews__grid--page{ grid-template-columns:1fr }
  .quote--lead{ grid-column:auto }
  .areas__list{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-box{ opacity:1; transform:none }
  .loader{ display:none }
  .hero__line .ch{ transform:none !important }
}