/* Alag Perspective Architects – shared styles for every page */
*{margin:0}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* ================= CHANGE COLOURS AND FONTS HERE (the :root block below) – used by every page =================
   Every colour on the site comes from these few lines.
   Layout: quiet and spacious. Photos lead; teak is the only accent; Archivo for headings, Jost for text. */
:root{
  /* Warm minimal, taken from the Architect's Home photos:
     white walls, black steel, grey floors, teak joinery */
  --ground:#f6f4f0;     /* warm white wall: page background */
  --surface:#ece8e1;    /* soft band behind the home videos */
  --ink:#1e1e1d;        /* black steel: headings and text */
  --muted:#686661;      /* grey: secondary text */
  --brown:#8a5a2b;      /* teak: the only accent (buttons, links, numbers) */
  --rule:#dfdbd4;       /* thin lines between sections */
  --tone:#e7e3dc;       /* empty photo placeholder */
  --tone-line:#d4cec4;
  --on-brown:#ffffff;   /* text on teak buttons */
  --display:"Archivo","Century Gothic","Arial Black",sans-serif;  /* bold, wide: headings, menu, labels, buttons */
  --body:"Jost","Century Gothic","Helvetica Neue",Arial,sans-serif;  /* calm: body text */
  --g:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
html,body{overflow-x:clip}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brown);outline-offset:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--g)}
h1,h2,h3{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;margin:0;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(34px,5vw,66px);letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.01em}
h3{font-size:18px;font-weight:600;font-stretch:112%}
p{margin:0}
.label{display:block;font-family:var(--display);font-weight:600;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.muted{color:var(--muted)}
section{padding-block:clamp(72px,10vw,128px);border-top:1px solid var(--rule)}
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.head p{color:var(--muted);max-width:50ch}
@media (max-width:820px){.head{grid-template-columns:1fr}}

/* one button style + one text-link style */
.btn{font:inherit;font-family:var(--display);font-weight:600;font-stretch:112%;font-variation-settings:"wdth" 112;letter-spacing:.01em;font-size:14px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid var(--brown);background:var(--brown);color:var(--on-brown);text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{filter:brightness(1.07)}
.link{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--brown);padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.link:hover{color:var(--brown)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:10px}
.logo{text-decoration:none;font-family:var(--display);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:16px;letter-spacing:.02em}
.logo{display:block;line-height:0}
.logo img{height:58px;width:auto;display:block}
@media (max-width:440px){.logo img{height:46px}}
.menu{display:flex;gap:28px;font-family:var(--display);font-weight:600;font-stretch:112%;font-variation-settings:"wdth" 112;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.menu a{text-decoration:none;color:var(--muted)}
.menu a:hover,.menu a.on{color:var(--ink)}
.burger{display:none}
@media (max-width:960px){.menu{display:none}.burger{display:inline-flex}}
.drawer{position:fixed;inset:0;z-index:40;background:var(--ground);padding:calc(env(safe-area-inset-top,0px) + 20px) var(--g) 24px;display:grid;align-content:start}
.drawer a{padding:18px 0;border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:22px;text-decoration:none}
.drawer .link{justify-self:end;margin-bottom:12px}

/* placeholder image: quiet tone + faint perspective lines */
.ph{position:relative;background:var(--tone);overflow:hidden;max-width:100%}
.ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph em{position:absolute;left:14px;bottom:12px;font-style:normal;font-size:12px;color:var(--muted)}

/* hero: text-led opening (logo mark, headline, one line), then a wide photo */
.hero{padding-block:clamp(64px,9vw,120px) clamp(64px,9vw,112px);border-top:0}
.hero-text{display:grid;justify-items:center;text-align:center;gap:0}
.hero-mark{height:clamp(64px,7vw,92px);width:auto;margin-bottom:clamp(22px,3vw,34px);opacity:0;animation:heroIn 1s .1s ease forwards}
.hero-text .label{margin-bottom:16px;opacity:0;animation:heroIn 1s .25s ease forwards}
.hero h1{max-width:20ch;font-size:clamp(34px,5.2vw,70px);opacity:0;animation:heroIn 1s .4s ease forwards}
.hero-text p{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:52ch;margin-top:clamp(18px,2.4vw,26px);opacity:0;animation:heroIn 1s .55s ease forwards}
.hero .ctas{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center;margin-top:clamp(26px,3vw,38px);opacity:0;animation:heroIn 1s .7s ease forwards}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-photo{height:min(78vh,820px);min-height:420px;margin:clamp(48px,7vw,96px) clamp(12px,2vw,28px) 0}
.hero-photo img{z-index:0;transform:scale(1.06);transition:opacity .6s,transform 5s ease-out!important}
.hero-photo.go img{transform:scale(1)}
.hero-photo em{z-index:3;top:14px;bottom:auto}
.hero-scroll{position:absolute;z-index:3;left:50%;bottom:0;width:1px;height:64px;background:rgba(255,255,255,.45);overflow:hidden}
.hero-scroll::after{content:"";position:absolute;inset:0;background:#fff;animation:heroScroll 2s infinite}
@keyframes heroScroll{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero-mark,.hero-text .label,.hero h1,.hero-text p,.hero .ctas{opacity:1;animation:none}.hero-photo img{transform:none}}
@media (max-width:820px){.hero-photo{height:62vh;min-height:360px}}

/* inside the home: looping videos */
.inside{background:var(--surface)}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.reels figure{margin:0;display:grid;gap:10px}
.reels video{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--tone)}
.reels figcaption{font-size:14px;color:var(--muted)}
.inside .more{margin-top:28px}
.case .reels{margin-top:4px}
@media (max-width:820px){.reels{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.reels figure,.reels video{scroll-snap-align:start}}
/* projects */
/* project grid: bento layout. First project large, next two stacked beside it, the rest in threes.
   One cover photo per project; on hover the cover plays through that project's photos. */
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(220px,22vw,320px);grid-auto-flow:dense;gap:clamp(12px,1.6vw,20px)}
.pcard{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:var(--tone);grid-column:span 4;border-radius:2px;isolation:isolate}
.pcard.lead{grid-column:span 7;grid-row:span 2}
.pcard.side{grid-column:span 5}
.pcard.wide{grid-column:span 6}
.pcard .ph{position:absolute;inset:0;height:100%}
.pcard .ph img{transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)!important}
.pcard:hover .ph img,.pcard:focus-visible .ph img{transform:scale(1.04)}
.pcard .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;z-index:1}
.pcard .slide.on{opacity:1}
.pcard .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(20,18,16,.72) 0%,rgba(20,18,16,.18) 42%,rgba(20,18,16,0) 65%);transition:background .4s}
.pcard.empty .shade{background:linear-gradient(to top,rgba(20,18,16,.08),transparent 60%)}
.pcard.empty{color:var(--ink)}
.pcard .cap-in{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(16px,2vw,26px);display:grid;gap:6px}
.pcard .no{font-family:var(--display);font-weight:600;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.16em;opacity:.85}
.pcard h3{font-size:clamp(18px,1.8vw,24px);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;line-height:1.1}
.pcard.lead h3{font-size:clamp(24px,3vw,40px)}
.pcard .hook{font-size:15px;line-height:1.5;max-width:40ch;opacity:0;max-height:0;transform:translateY(6px);transition:opacity .4s,transform .4s,max-height .4s}
.pcard:hover .hook,.pcard:focus-visible .hook{opacity:.92;max-height:5em;transform:none}
.pcard .open{position:absolute;top:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px);z-index:3;font-family:var(--display);font-weight:600;font-stretch:112%;font-variation-settings:"wdth" 112;font-size:12px;letter-spacing:.04em;padding:7px 12px;background:rgba(246,244,240,.94);color:var(--ink);border-radius:2px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.pcard:hover .open,.pcard:focus-visible .open{opacity:1;transform:none}
.pcard .bars{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;gap:4px;padding:10px clamp(14px,1.6vw,20px) 0;opacity:0;transition:opacity .3s}
.pcard.playing .bars{opacity:1}
.pcard .bars i{flex:1;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.pcard .bars i::after{content:"";display:block;height:100%;width:0;background:#fff}
.pcard .bars i.done::after{width:100%}
.pcard .bars i.now::after{animation:fillbar var(--dur,1.4s) linear forwards}
@keyframes fillbar{to{width:100%}}
.pcard.playing .open{top:24px}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(200px,40vw,300px)}.pcard,.pcard.side,.pcard.wide{grid-column:span 1;grid-row:span 1}.pcard.lead{grid-column:1/-1;grid-row:span 1}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr;grid-auto-rows:auto}.pcard,.pcard.lead{grid-column:auto;aspect-ratio:4/3.4}.pcard .hook{opacity:.92;max-height:5em;transform:none}.pcard .open{display:none}}

/* services: four columns, always visible */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.svc div{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:10px;align-content:start}
.svc ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted);font-size:15px}
@media (max-width:960px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svc{grid-template-columns:1fr}}

/* enquiry form pieces */
.q{display:grid;gap:12px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.q .lab{font-size:14px;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:10px 22px}
.opts label{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-size:16px;min-height:36px}
.opts input{accent-color:var(--brown);width:18px;height:18px;margin:0}
.range{display:flex;align-items:center;gap:18px}
.range input{flex:1;accent-color:var(--brown)}
.range output{font-family:var(--display);font-weight:600;font-size:17px;min-width:8ch;text-align:right;font-variant-numeric:tabular-nums}
.result{background:var(--surface);padding:18px 20px;display:grid;gap:14px;margin-bottom:24px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:15px}
.stage:last-child{border-bottom:0}
.stage b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.need{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:15px;color:var(--muted)}
.need li::before{content:"— ";color:var(--brown)}
.small{font-size:13px;color:var(--muted)}

/* process: one row of text */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
.step{display:grid;gap:8px;align-content:start;border-top:1px solid var(--ink);padding-top:16px}
.step small{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;color:var(--brown);font-size:14px}
.step p{font-size:15px;color:var(--muted)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.about .ph{aspect-ratio:4/5}
.about .txt{display:grid;gap:18px;max-width:58ch}
.about blockquote{margin:0;font-family:var(--body);font-weight:400;font-size:clamp(21px,2.1vw,26px);line-height:1.45}
@media (max-width:820px){.about{grid-template-columns:1fr}.about .ph{aspect-ratio:4/3}}

/* reviews (from Google, filled from content.js) */
.revs{--gap:clamp(16px,3vw,36px);display:flex;align-items:flex-start;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.revs::-webkit-scrollbar{display:none}
.revs .rev{flex:0 0 calc((100% - 2*var(--gap))/3);scroll-snap-align:start}
.rev-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.rev-nav button{font:inherit;width:44px;height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:18px}
.rev-nav button:hover{background:var(--ink);color:var(--ground)}
.rev-nav button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink)}
.rev-dots{display:flex;gap:8px;margin-left:8px}
.rev-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--rule);cursor:pointer}
.rev-dots button[aria-current="true"]{background:var(--brown)}
.rev-dots button:hover{background:var(--muted)}
.rev-nav .link{margin-left:auto}
.rev{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:14px;align-content:start;margin:0}
.rev .stars{color:var(--brown);letter-spacing:.12em;font-size:15px}
.rev blockquote{margin:0;font-size:17px;line-height:1.6}
.rev figcaption{font-size:14px;color:var(--muted)}
.rev figcaption b{display:block;color:var(--ink);font-weight:500}
#reviews .more{margin-top:28px}
@media (max-width:900px){.revs .rev{flex-basis:calc((100% - var(--gap))/2)}}
@media (max-width:600px){.revs .rev{flex-basis:86%}.rev-nav .link{margin-left:0;flex-basis:100%;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.revs{scroll-behavior:auto}}
.revs.one .rev{flex-basis:100%;max-width:780px}.revs.one blockquote{font-size:clamp(20px,2.2vw,26px);line-height:1.5}
/* faq */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--body);font-weight:500;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brown)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:22px;color:var(--muted);max-width:64ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px)}
.direct{display:grid;gap:18px;margin-top:28px;font-size:16px}
.direct small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.direct span{user-select:all}
.map{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--surface);border:1px solid var(--rule);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}
.map .fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:14px;color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;align-content:start}
.f{display:grid;gap:4px;min-width:0}
.f.full{grid-column:1/-1}
.f label,.f .lab{font-size:13px;color:var(--muted)}
.f input,.f textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 0;border-radius:0;width:100%}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--brown)}
.f textarea{min-height:80px;resize:vertical}
.err{color:#a3402a;font-size:14px;min-height:1.2em}
.row{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--rule);padding-block:32px 96px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
footer a{text-decoration:none}

.wa{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:25;width:52px;height:52px;border-radius:50%;background:var(--brown);color:var(--on-brown);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.wa svg{width:24px;height:24px}
.top .btn{min-height:42px;padding:0 18px}
@media (max-width:960px){.top .btn{display:none}}
/* phone bottom bar: WhatsApp + Call */
.bar{display:none}
@media (max-width:820px){
  .wa{display:none}
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--ink);padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);gap:10px}
  .bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;text-decoration:none;font-family:var(--display);font-weight:600;font-stretch:112%;font-variation-settings:"wdth" 112;font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.35)}
  .bar a.primary{background:var(--brown);border-color:var(--brown)}
  .bar svg{width:18px;height:18px}
  footer{padding-bottom:110px}
}

/* project cards are links */

/* ================= PROJECT PAGES (project.html) ================= */
.ptop{padding-block:clamp(28px,4vw,48px) 0;border-top:1px solid var(--rule)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.crumbs ol a{text-decoration:none;color:var(--muted);font-family:var(--display);font-weight:600;font-stretch:112%;font-variation-settings:"wdth" 112;font-size:12px;letter-spacing:.04em}
.crumbs ol a[aria-current=page]{color:var(--ink);border-bottom:1px solid var(--brown)}
.case{display:grid;gap:clamp(36px,5vw,64px);padding-block:clamp(32px,5vw,56px) clamp(72px,9vw,120px)}
.case .intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end}
.case .intro .hook{font-size:19px;color:var(--muted);max-width:44ch;margin-top:14px}
.case .ph.big{aspect-ratio:16/8}
.facts{margin:0;display:grid;gap:0}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;text-align:right}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,48px)}
.story div{border-top:1px solid var(--ink);padding-top:14px;display:grid;gap:8px;align-content:start}
.story small,.sub{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;color:var(--brown);font-size:14px}
.story p{color:var(--muted)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);align-items:start}
.gallery figure{margin:0}
.gallery .ph{aspect-ratio:4/3}
.gallery figure.wide{grid-column:1/-1}
.gallery figure.wide .ph{aspect-ratio:16/8}
.cap{font-size:14px;color:var(--muted);margin-top:8px}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.item{display:grid;gap:10px;align-content:start}
.item .ph{aspect-ratio:4/3}
.item .meta{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.item .status{color:var(--brown);font-weight:500}
.item p{color:var(--muted);font-size:15px}
.todo{border:1px dashed var(--tone-line);color:var(--muted);font-size:14px;padding:14px 16px;border-radius:2px;background:transparent}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--rule);padding-top:28px}
.next .nx{display:grid;gap:4px;text-decoration:none}
.next .nx small{font-size:13px;color:var(--muted)}
.next .nx b{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(20px,2.4vw,28px)}
.next .nx:hover b{color:var(--brown)}
.notfound{padding-block:120px;display:grid;gap:20px;justify-items:start}
@media (max-width:900px){.items{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.case .intro,.story,.gallery,.items{grid-template-columns:1fr}.case .ph.big,.gallery figure.wide .ph{aspect-ratio:4/3}}
.pcard .ph em{top:14px;left:clamp(14px,1.6vw,20px);bottom:auto}

/* a single wide walk-through video on a project page */
.reels.one{display:block}
.reels.one video{aspect-ratio:16/9}

/* project page hero: full-screen video or cover photo with the title on it */
.phero{position:relative;height:min(88vh,920px);min-height:460px;overflow:hidden;background:#1e1e1d;color:#fff}
.phero-media{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phero .ph{background:#2a2927}
.phero .ph svg{opacity:.25}
.phero-over{position:absolute;inset:auto 0 0 0;z-index:2;padding-block:clamp(90px,14vw,180px) clamp(32px,5vw,64px);background:linear-gradient(180deg,rgba(20,20,19,0) 0%,rgba(20,20,19,.66) 72%)}
.phero-over .label{color:rgba(255,255,255,.82)}
.phero-over h1{font-size:clamp(38px,6vw,80px);max-width:14ch}
.phero-over p{font-size:clamp(17px,1.6vw,20px);max-width:46ch;margin-top:14px;color:rgba(255,255,255,.9)}
.phero-play{position:absolute;z-index:3;right:clamp(16px,3vw,32px);top:clamp(16px,3vw,28px);font:inherit;font-size:13px;font-weight:500;color:#fff;background:rgba(20,20,19,.45);border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(4px)}
.phero-down{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;padding-bottom:22px}
.phero-down::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:16px;background:rgba(255,255,255,.7);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.ptop{border-top:0}
/* key facts as a row under the hero */
.facts.row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 28px;border-top:1px solid var(--ink);align-items:start}
.facts.row div{display:grid;gap:4px;justify-content:start;border-bottom:0;padding:14px 0 0;align-content:start}
.facts.row dd{text-align:left;font-weight:500}
@media (max-width:760px){.phero{height:74vh;min-height:420px}.phero-down{display:none}}

/* competition entries */
.entry{display:grid;gap:clamp(24px,3.5vw,40px);padding-top:clamp(8px,2vw,16px)}
.entry+.entry{border-top:1px solid var(--rule);padding-top:clamp(40px,6vw,72px)}
.entry-head{display:grid;gap:10px;justify-items:start}
.entry-head h2{font-size:clamp(30px,4.4vw,56px)}
.badge{display:inline-block;font-family:var(--display);font-weight:600;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.story.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.entry-gal .ph{background:#fff}
.cert{max-width:560px}
.entry-jump{display:flex;flex-wrap:wrap;gap:12px}
.entry-jump a{display:grid;gap:2px;text-decoration:none;border:1px solid var(--rule);padding:12px 16px;font-weight:500}
.entry-jump span{font-size:13px;color:var(--muted);font-weight:400}
.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.lightbox::backdrop{background:rgba(20,20,19,.88)}
.lightbox img{display:block;max-width:96vw;max-height:84vh;object-fit:contain;background:#fff}
.lightbox .cap{color:#fff;text-align:center}
.lb-x{position:fixed;top:16px;right:16px;font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);padding:8px 14px;cursor:pointer;border-radius:2px}
@media (max-width:760px){.story.two{grid-template-columns:1fr}}
.lightbox{margin:auto}
.cert .ph{aspect-ratio:4/3}
.quiet{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.quiet:hover{color:var(--brown)}

/* competitions: one card per entry on the main page */
.ecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.ecard{display:grid;gap:10px;text-decoration:none;color:inherit;align-content:start}
.ecard .ph{aspect-ratio:4/3}
.ecard .ph img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.ecard:hover .ph img{transform:scale(1.03)}
.ecard h3{font-size:clamp(20px,2vw,26px);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125}
.ecard p{color:var(--muted);font-size:15px}
.ecard .badge{margin-top:4px}
@media (max-width:900px){.ecards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ecards{grid-template-columns:1fr}}

/* competition card with no details yet */
.ecard.soon{cursor:default}
.soon-box{aspect-ratio:4/3;display:grid;place-items:center;background:var(--tone);border:1px dashed var(--tone-line)}
.soon-box span{font-family:var(--display);font-weight:600;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* drawn diagrams on competition pages */
.diag{display:grid;gap:20px;padding:clamp(24px,3vw,40px);background:var(--surface);border-radius:2px}
.scen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.scard{display:grid;gap:12px;align-content:start;background:var(--ground);padding:16px;border-radius:2px}
.scard-h{display:flex;gap:10px;align-items:baseline}
.scard-h b{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;color:var(--brown);font-size:22px}
.scard-h h3{font-size:16px}
.scard p{font-size:14px;color:var(--muted);line-height:1.55}
.floors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.floor{margin:0}.floor svg{display:block;width:100%;height:auto}
.floor figcaption{font-size:11px;color:var(--muted);text-align:center;margin-top:4px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}.legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.mass{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);counter-reset:none}
.mass li{display:grid;gap:8px;justify-items:center;background:var(--ground);padding:14px;border-radius:2px}
.mass svg{width:100%;height:auto;display:block}
.mass span{font-size:14px;font-weight:500;display:flex;gap:8px;align-items:baseline}
.mass b{font-family:var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;color:var(--brown);font-size:12px}
@media (max-width:960px){.scen{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.scen{grid-template-columns:1fr}.mass{grid-template-columns:1fr 1fr}}
.scard{grid-template-rows:auto auto 1fr}
.scard-h{min-height:2.6em}

/* plan legends: small, two columns, under the plan */
.plegend{list-style:none;counter-reset:rm;padding:0;margin:10px 0 0;columns:2;column-gap:18px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.plegend li{counter-increment:rm;break-inside:avoid;padding:1px 0}
.plegend li::before{content:counter(rm) "  ";font-weight:600;color:var(--ink);display:inline-block;min-width:14px}

/* construction details: circles with notes */
.dets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.det{margin:0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--ground);padding:16px;border-radius:2px;cursor:zoom-in}
.det img{width:120px;height:120px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--rule)}
.det b{display:block;font-size:14px;margin-bottom:6px}
.det ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1000px){.dets{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dets{grid-template-columns:1fr}.det{grid-template-columns:96px 1fr}.det img{width:96px;height:96px}}

/* header shows the name only (the mark now opens the home page) */
.logo img[src*='logo-name']{height:30px}
@media (max-width:440px){.logo img[src*='logo-name']{height:24px}}

/* room cards without photos yet show their walk-through video */
.ecard-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* material lab: a sideways-moving strip of photos and videos */
.lab{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-top:clamp(8px,1vw,12px);cursor:grab;-webkit-overflow-scrolling:touch}
.lab::-webkit-scrollbar{display:none}
.lab.drag{cursor:grabbing;user-select:none}
.lab-track{display:flex;gap:clamp(12px,1.6vw,20px);width:max-content;padding-inline:var(--g)}
.lab figure{margin:0;display:grid;gap:10px;flex:none}
.lab img,.lab video{height:clamp(240px,30vw,420px);width:auto;display:block;object-fit:cover;background:var(--tone);pointer-events:none}
.lab video{aspect-ratio:1}
.lab img{max-width:80vw}
.lab figcaption{font-size:14px;color:var(--muted)}
.inside .more{margin-top:28px}
@media (max-width:600px){.lab img,.lab video{height:260px}}

/* architect's residence: areas of the house on one page */
.areas-nav{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:64px;z-index:5;background:var(--ground);padding:12px 0;border-bottom:1px solid var(--rule)}
.areas-nav a{padding:8px 14px;border:1px solid var(--rule);border-radius:999px;font-size:13px;text-decoration:none;color:inherit;white-space:nowrap}
.areas-nav a:hover,.areas-nav a:focus-visible{border-color:var(--brown);color:var(--brown)}
.area{display:grid;gap:clamp(32px,5vw,56px);scroll-margin-top:140px;padding-top:clamp(8px,2vw,16px)}
.area+.area{border-top:1px solid var(--rule);padding-top:clamp(40px,6vw,72px)}
.area-head{display:grid;gap:8px;max-width:640px}
.area-head h2{margin:0;font-size:clamp(26px,3.4vw,38px)}
.area-head p{margin:0;color:var(--muted)}
@media (max-width:900px){.areas-nav{top:44px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}.areas-nav::-webkit-scrollbar{display:none}.area{scroll-margin-top:120px}}

.floor-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,56px);align-items:start}
.floor-head.solo{grid-template-columns:1fr}
.floor-head .entry-jump{margin-top:12px}
.room{display:grid;gap:20px}
.room h3{margin:0;font-size:clamp(20px,2.4vw,26px)}
.draw .ph{background:#fff;border:1px solid var(--rule)}
.plan-fig{grid-template-columns:1fr}
.gallery figure.nocrop{grid-row:span 2}
@media (max-width:760px){.floor-head{grid-template-columns:1fr}.gallery figure.nocrop{grid-row:auto}}

/* hero slideshow */
.hero-slides{position:relative;overflow:hidden;background:var(--tone)}
.hero-slides .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease}
.hero-slides .slide.on{opacity:1;z-index:1}
.hero-slides .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 7.5s ease-out}
.hero-slides.go .slide.on img{transform:scale(1)}
.hero-slides figcaption{position:absolute;left:0;right:0;bottom:0;padding:64px clamp(16px,2.4vw,28px) clamp(16px,2vw,24px);background:linear-gradient(180deg,rgba(20,20,19,0),rgba(20,20,19,.5));font-size:14px}
.hero-slides figcaption a{color:#fff;text-decoration:none}
.hero-slides figcaption a:hover{text-decoration:underline}
.hero-bars{position:absolute;z-index:4;right:clamp(16px,2.4vw,28px);top:clamp(16px,2.4vw,26px);display:flex;gap:6px;pointer-events:none}
.hero-bars i{display:block;width:28px;height:12px;cursor:pointer;position:relative}
.hero-bars i::before,.hero-bars b{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:rgba(255,255,255,.4)}
.hero-bars b{right:auto;width:0;background:#fff}
.hero-bars i.done b{width:100%}
.hero-bars i.on b{width:100%;transition:width 6s linear}
.hero-slides .hero-scroll{z-index:4}
@media (prefers-reduced-motion:reduce){.hero-slides .slide img{transform:none;transition:none}.hero-bars{display:none}}
/* four clear steps: small line icons */
.step-ico{width:30px;height:30px;fill:none;stroke:var(--brown);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}

/* EDGE TO EDGE: photos run to the sides of the screen, with hairline gaps */
.hero-photo{margin-inline:0}
.pgrid{width:100vw;margin-inline:calc(50% - 50vw);gap:4px}
.pcard{border-radius:0}
#case:not([data-slug^="competition"]) .gallery:not(.draw):not(.plan-fig),
#case .reels.one{width:100vw;margin-inline:calc(50% - 50vw);gap:4px;row-gap:clamp(16px,2vw,24px)}
#case:not([data-slug^="competition"]) .gallery:not(.draw):not(.plan-fig) .cap,
#case .reels.one figcaption{padding-inline:clamp(14px,2vw,24px)}

/* drawing-to-photo slider (Architect's Residence) */
.cmp{position:relative;width:min(100%,620px);aspect-ratio:4/5;margin:0 auto;overflow:hidden;background:#fff;user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .cmp-draw{object-fit:contain;background:#fff;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-1px);pointer-events:none}
.cmp-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--brown);color:#fff;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:15px}
.cmp-tag{position:absolute;bottom:14px;padding:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(20,20,19,.6);color:#fff;pointer-events:none}
.cmp-tag.l{left:14px}.cmp-tag.r{right:14px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp-cap{text-align:center;margin-top:-12px}
/* material hotspots */
.hot{position:relative;margin:0;width:100vw;margin-inline:calc(50% - 50vw)}
.hot img{display:block;width:100%;height:auto}
.hot .cap{padding-inline:clamp(14px,2vw,24px)}
.hot .dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;z-index:2}
.hot .dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--brown)}
.hot .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);animation:hotPulse 2.4s ease-out infinite}
@keyframes hotPulse{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}
.hot .tip{position:absolute;z-index:3;width:min(260px,70vw);background:var(--ground);color:var(--ink);padding:14px 16px;font-size:14px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hot .tip b{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}
@media (max-width:600px){.hot .dot{width:26px;height:26px;margin:-13px 0 0 -13px}}
/* home: projects as a list with a floating preview */
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.plist li{border-bottom:1px solid var(--rule)}
.plist a{display:grid;grid-template-columns:4ch minmax(0,1fr) auto 2ch;gap:clamp(12px,2vw,24px);align-items:baseline;padding:clamp(18px,2.4vw,28px) 0;color:inherit;text-decoration:none;transition:padding .35s ease,color .25s}
.plist a:hover,.plist a:focus-visible{padding-left:16px;color:var(--brown)}
.plist .thumb{display:none}
.plist .n{font-family:var(--display);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;color:var(--brown)}
.plist .t{font-family:var(--display);font-weight:700;font-stretch:115%;font-variation-settings:"wdth" 115;font-size:clamp(24px,3.4vw,44px);line-height:1.05}
.plist .c{font-size:14px;color:var(--muted);text-align:right}
.plist .go{font-size:20px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.plist a:hover .go,.plist a:focus-visible .go{opacity:1;transform:none}
.pfloat{position:fixed;left:0;top:0;width:clamp(260px,24vw,360px);aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;overflow:hidden;transition:opacity .25s;will-change:transform}
.pfloat img{width:100%;height:100%;object-fit:cover;transform:scale(.92);transition:transform .35s ease}
.pfloat.on{opacity:1}.pfloat.on img{transform:scale(1)}
@media (hover:none),(max-width:760px){.pfloat{display:none}
  .plist a{grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:2px;padding:14px 0}
  .plist .thumb{display:block;grid-row:1/3;width:88px;aspect-ratio:1;object-fit:cover;background:var(--tone)}
  .plist .n,.plist .go{display:none}.plist .t{font-size:22px;align-self:end}.plist .c{text-align:left;align-self:start}}

/* sites in progress: one row per site, its photos side by side */
.sites{display:grid;margin-top:16px;border-top:1px solid var(--ink)}
.site{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(20px,3vw,40px);padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--rule);align-items:start}
.site-info{display:grid;gap:8px;align-content:start}
.site-info .status{font-size:13px;color:var(--brown);font-weight:500}
.site-info h3{font-size:clamp(22px,2.6vw,30px)}
.site-info .place{font-size:14px;color:var(--muted)}
.site-info p{color:var(--muted);font-size:15px;margin:0}
.site-photos{display:flex;gap:4px;height:clamp(240px,26vw,380px)}
.site-photos figure{margin:0;height:100%;cursor:zoom-in}
.site-photos figure.wide{flex:1.78 1 0}
.site-photos figure.tall{flex:.56 1 0}
.site-photos .ph{height:100%}
.site-photos .ph img{object-fit:cover}
@media (max-width:760px){.site{grid-template-columns:1fr}
  .site-photos{height:300px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--g));padding-inline:var(--g)}
  .site-photos::-webkit-scrollbar{display:none}
  .site-photos figure{scroll-snap-align:start}.site-photos figure.wide{flex:0 0 auto;width:533px;max-width:86vw}.site-photos figure.tall{flex:0 0 auto;width:169px}}