/* About page (about.html). Scoped under .about so the rest of the site is untouched. */
.about{--about-space:clamp(88px,9vw,150px);--about-ease:cubic-bezier(.23,1,.32,1);--about-surface:#ece5da;--about-muted:#6b5c51;--about-header:96px;background:var(--ivory);color:var(--espresso);overflow-x:clip}
.about-wrap{width:88%;max-width:1320px;margin-inline:auto}
.about h1,.about h2,.about h3{margin:0;font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em}
.about p{line-height:1.95}
.about img{display:block}
.about :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.about-page ::selection{background:var(--gold);color:var(--espresso)}

/* Shared pieces: headings with a short gold line, pill buttons. */
.about-heading{display:flex;align-items:center;gap:22px;font-size:clamp(34px,3.4vw,52px);line-height:1.35}
.about-heading:after{content:'';flex:none;width:56px;height:2px;background:var(--gold)}
.about-heading--under{flex-direction:column;align-items:flex-start;gap:18px}
.about-pill{display:inline-flex;align-items:center;gap:22px;min-height:52px;padding:0 26px;border:1px solid var(--espresso);border-radius:999px;background:var(--espresso);color:var(--ivory);font-size:15px;font-weight:600;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--about-ease)}
.about-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--about-ease)}
.about-pill--outline{background:transparent;color:var(--espresso);border-color:var(--gold)}
.about-pill:active{transform:scale(.97)}

/* Hero: copy on one side, the room on the other with an arched corner. */
.about-hero{position:relative;display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);grid-template-areas:"photo copy";min-height:clamp(560px,86svh,860px);padding-top:var(--about-header)}
.about-hero-photo{grid-area:photo;position:relative;margin:0;overflow:hidden;border-top-left-radius:clamp(140px,16vw,260px)}
.about-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 60%}
.about-hero-copy{grid-area:copy;align-self:center;padding:56px 6vw 56px clamp(24px,4vw,64px);max-width:600px}
.about-hero h1{font-size:clamp(38px,3.9vw,64px);line-height:1.3;white-space:nowrap}
.about-hero-copy p{margin:24px 0 0;font-size:17px;max-width:440px}
.about-hero-copy p strong{font-weight:600}
.about-hero .about-pill{margin-top:34px}

/* Story: copy beside an arch-framed photograph, a leaf shadow in the corner. */
.about-story{position:relative;padding-block:var(--about-space);overflow:hidden}
.about-story:before{content:'';position:absolute;z-index:0;inset:-10% -15% 20% 35%;border-radius:0 0 0 60%;background:#f8f4ee;pointer-events:none}
.about-leaf{position:absolute;z-index:0;top:-70px;right:-80px;width:min(360px,32vw);aspect-ratio:1;background:url('../img/icons/leaf-shadow.svg') center/contain no-repeat;opacity:.07;filter:blur(4px);transform:rotate(24deg);pointer-events:none}
.about-story-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center}
.about-story-copy p{margin:28px 0 0;font-size:17px;max-width:56ch}
.about-story-copy p strong{font-weight:600}
.about-story .about-pill{margin-top:34px}
.about-arch{position:relative;margin:0;padding:16px;aspect-ratio:4/5;width:min(480px,100%);justify-self:center}
.about-arch-frame{position:absolute;inset:0;border:1px solid #c9b392;border-radius:1000px 1000px 6px 6px;transition:transform .5s var(--about-ease)}
.about-arch-image{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:1000px 1000px 4px 4px}
.about-arch-image img{width:100%;height:100%;object-fit:cover;object-position:48% 50%;transition:transform 1s var(--about-ease)}

/* Beliefs: dark field, connected icon list, a sofa arm breaking the corner. */
.about-beliefs{position:relative;padding-block:var(--about-space);background:#2d221d;color:var(--ivory);overflow:hidden;isolation:isolate}
.about-beliefs-light{display:none}
.about-beliefs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start;min-height:460px}
.about-beliefs .about-heading{color:var(--ivory)}
.about-belief-list{position:relative;display:grid;gap:44px;margin:0;padding:0;list-style:none}
.about-belief-list:before{content:'';position:absolute;top:24px;bottom:24px;right:23px;width:1px;background:#8d7458;transform-origin:top;transform:scaleY(var(--line,1))}
.about-belief-list li{position:relative;display:flex;align-items:flex-start;gap:24px}
.about-belief-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;background:#2d221d;color:var(--gold);transition:background-color .25s ease,color .25s ease,transform .25s var(--about-ease)}
.about-belief-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.about-belief-list h3{font-size:clamp(21px,1.7vw,26px);line-height:1.5}
.about-belief-list p{margin:6px 0 0;font-size:16px;color:#ddd2c4;max-width:40ch}
.about-beliefs-chair{position:absolute;z-index:-1;right:-14%;bottom:-24%;width:min(980px,68vw);height:auto;pointer-events:none}

/* Build sequence: the layer image holds while the matching step is read. */
.about-build{padding-block:var(--about-space);background:var(--about-surface)}
.about-build h2{font-size:clamp(34px,3.6vw,56px);line-height:1.3}
.about-build-head p{margin:16px 0 0;font-size:17px;max-width:52ch}
.about-build-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);margin-top:24px}
.about-build-figure{position:sticky;top:calc(50svh - 18vw);order:2;align-self:start;margin:0;aspect-ratio:624/452}
.about-build-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transform:scale(.97) translateY(8px);transition:opacity .3s var(--about-ease),transform .45s var(--about-ease)}
.about-build-figure img.is-active{opacity:1;transform:none}
.about-build-steps{margin:0;padding:0;list-style:none}
.about-build-steps li{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:48svh}
.about-build.is-enhanced .about-build-steps li{color:var(--about-muted);transition:color .25s ease}
.about-build.is-enhanced .about-build-steps li.is-active{color:var(--espresso)}
.about-build-steps h3{font-size:clamp(26px,2.6vw,40px);line-height:1.4}
.about-build-steps p{margin:12px 0 0;font-size:17px;max-width:40ch}
.about-build-steps .about-text-link{margin-top:18px}
.about-text-link{position:relative;display:inline-block;padding:6px 0;font-weight:600;color:inherit}
.about-text-link:after{content:'';position:absolute;right:0;bottom:2px;width:100%;height:1px;background:currentColor;transform-origin:right;transition:transform .25s var(--about-ease)}

/* Visit: a soft card on a photograph of a finished room. */
.about-visit{position:relative;display:flex;align-items:center;min-height:clamp(520px,78svh,760px);padding:56px 6%;overflow:hidden}
.about-visit-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.about-visit-card{position:relative;width:min(440px,100%);padding:38px 36px;border-radius:18px;background:rgba(243,239,231,.94);box-shadow:0 18px 50px rgba(36,25,20,.18)}
.about-visit-card h2{font-size:clamp(26px,2.2vw,34px);line-height:1.4}
.about-visit-card p{margin:12px 0 0;font-size:16px}
.about-visit-card .about-pill{margin-top:26px}

/* Hover only where a real pointer hovers. */
@media(hover:hover) and (pointer:fine){
 .about-pill:hover{background:var(--walnut);border-color:var(--walnut);color:var(--ivory)}
 .about-pill--outline:hover{background:var(--espresso);border-color:var(--espresso)}
 .about-pill:hover svg{transform:translateX(-4px)}
 .about-arch:hover .about-arch-image img{transform:scale(1.04)}
 .about-arch:hover .about-arch-frame{transform:translate(-8px,8px)}
 .about-belief-list li:hover .about-belief-icon{background:var(--gold);color:#2d221d;transform:scale(1.06)}
 .about-text-link:hover:after{transform:scaleX(.35)}
}

@media(max-width:991px){
 .about-hero{grid-template-columns:1fr;grid-template-areas:"copy" "photo";min-height:0}
 .about-hero-copy{max-width:none;padding:48px 6% 40px}
 .about-hero-photo{height:min(64svh,560px);margin-inline-start:6%}
 .about-story-grid,.about-beliefs-grid{grid-template-columns:1fr}
 .about-beliefs-grid{min-height:0}
 .about-beliefs-chair{position:relative;right:auto;bottom:auto;display:block;width:min(560px,80%);margin:40px auto 0}
}
@media(max-width:767px){
 .about{--about-header:78px}
 /* Hero: a one-line title, the text, the whole photograph, then the button. */
 .about-hero{display:flex;flex-direction:column;padding-bottom:32px}
 .about-hero-copy{display:contents}
 .about-hero h1{order:0;margin:32px 16px 0;font-size:clamp(20px,6.4vw,30px);white-space:nowrap}
 .about-hero h1 br{display:none}
 .about-hero-copy p{order:1;max-width:none;margin:16px 16px 24px}
 .about-hero-photo{order:2}
 .about-hero .about-pill{order:3;align-self:stretch;justify-content:center;margin:24px 16px 0}
 /* Story: the button moves under the arch. */
 .about-story-grid{display:flex;flex-direction:column;gap:0}
 .about-story-copy{display:contents}
 .about-story-copy .about-heading{order:0;align-self:stretch}
 .about-story-copy p{order:1;margin-top:20px}
 .about-arch{order:2;align-self:center;margin-top:28px}
 .about-story .about-pill{order:3;align-self:center;margin-top:24px}
 .about p{font-size:16px}
 .about-hero-photo{flex:none;height:auto;aspect-ratio:3/2;margin:0 16px;border-radius:72px 18px 18px 18px}
 .about-hero-photo img{object-position:50% 50%}
 .about-heading{gap:16px}
 .about-heading:after{width:40px}
 .about-arch{width:min(320px,88%)}
 .about-beliefs-chair{width:min(340px,78%);margin-top:32px}
 .about-belief-list{gap:32px}
 .about-belief-list li{gap:18px}
 .about-build-grid{grid-template-columns:1fr;gap:0}
 .about-build-figure{order:0;top:78px;z-index:2;height:34svh;aspect-ratio:auto;padding-block:8px;background:var(--about-surface)}
 .about-build-figure img{inset:8px 0}
 .about-build-steps li{min-height:48svh}
 .about-visit{display:block;min-height:0;padding:0 0 48px;background:var(--ivory)}
 .about-visit-photo{position:relative;height:60svh}
 .about-visit-card{width:auto;margin:-72px 16px 0;padding:28px 22px}
 .about-visit-card .about-pill{display:flex;width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .about *,.about *:before,.about *:after{transition-duration:.01ms!important}
 .about-build-figure img{transform:none;transition:opacity .2s ease!important}
}