/* Appandainathan Architects — site styles */
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --bg:#f4efe6;
  --paper:#f9f5ee;
  --ink:#121110;
  --soft:#4d4a45;
  --mute:#7b766e;
  --line:rgba(18,17,16,.17);
  --line-2:rgba(18,17,16,.32);
  --brick:#a8502c;
  --warm:#f3d3b0;
  --r:clamp(10px,1.05vw,18px);            /* soft corner for project photos */
  --g:clamp(16px,4.64vw,84px);          /* outer gutter: page edge to frame line */
  --pad:clamp(14px,2.2vw,38px);          /* frame line to content */
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Tight","Figtree",ui-sans-serif,system-ui,Arial,sans-serif;
  --serif:"Playfair Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- frame ---------- */
.site{position:relative;max-width:1760px;margin:0 auto;overflow:hidden;background:var(--bg)}
.site::before,.site::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:6;pointer-events:none}
.site::before{left:var(--g)}
.site::after{right:var(--g)}
.wrap{padding-inline:calc(var(--g) + var(--pad))}
.rule{border-top:1px solid var(--line)}

/* ---------- type ---------- */
.eyebrow,.label,.kicker{font-size:clamp(10.5px,.82vw,13px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.5}
.label{letter-spacing:.2em;font-size:clamp(11px,.86vw,13.5px)}
.kicker{color:var(--soft);font-size:clamp(9.5px,.7vw,11.5px)}
.serif{font-family:var(--serif);letter-spacing:-.035em;line-height:1.02;font-weight:400}
.serif em{font-style:italic;letter-spacing:-.03em}
.body{color:var(--soft);font-size:clamp(14px,.96vw,15.5px);line-height:1.5}
.lnk{display:inline-flex;align-items:center;gap:14px;font-weight:500;font-size:clamp(13.5px,.93vw,15px);padding-bottom:6px;border-bottom:1px solid var(--ink);line-height:1.2}
.lnk svg{width:18px;height:12px;flex:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lnk:hover svg{transform:translateX(5px)}
.lnk.ne svg{width:12px;height:12px}
.lnk.ne:hover svg{transform:translate(3px,-3px)}
.lnk-s{display:inline-flex;align-items:center;gap:10px;font-size:clamp(12.5px,.92vw,15px);font-weight:500}
.lnk-s svg{width:15px;height:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lnk-s:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:clamp(64px,6.95vw,108px);padding-inline:calc(var(--g) + var(--pad));border-bottom:1px solid var(--line)}
.hdr::after{content:"";position:absolute;left:27.75%;top:0;height:calc(100% + clamp(10px,1.4vw,22px));width:1px;background:var(--line);pointer-events:none}
.brand{display:inline-flex;flex-direction:column;gap:5px;line-height:1;justify-self:start}
.brand b{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.5vw,23px);letter-spacing:-.045em}
.brand span{font-size:clamp(7.5px,.64vw,10px);letter-spacing:.36em;font-weight:500;padding-left:1px}
.nav{display:flex;gap:clamp(18px,2.9vw,46px);font-size:clamp(13px,.93vw,15px);font-weight:500}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .nav-cta{display:none}
.btn{justify-self:end;display:inline-flex;align-items:center;gap:clamp(12px,1.5vw,24px);border:1px solid var(--ink);padding:clamp(8px,.75vw,12px) clamp(14px,1.2vw,19px);font-size:clamp(13px,.93vw,15px);font-weight:500;background:transparent;transition:background .3s,color .3s}
.btn svg{width:11px;height:11px}
.btn:hover{background:var(--ink);color:var(--bg)}
.menu-btn{display:none;justify-self:end;background:none;border:1px solid var(--ink);padding:9px 14px;font-size:13px;font-weight:500;letter-spacing:.04em;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(480px,49.2vw,800px);background:linear-gradient(100deg,var(--bg) 0%,var(--bg) 30%,#f6e4cf 62%,#f4cfa6 100%);border-bottom:1px solid var(--line);isolation:isolate}
.hero-media{position:absolute;inset:0 0 0 30%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 13%,rgba(0,0,0,.85) 27%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 13%,rgba(0,0,0,.85) 27%,#000 38%)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity 1.4s ease;filter:sepia(.14) saturate(1.04) contrast(1.02)}
.hero-media img.on{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,214,168,.42) 0%,rgba(250,214,168,.12) 38%,rgba(250,214,168,0) 62%),linear-gradient(0deg,rgba(244,239,230,.55) 0%,rgba(244,239,230,0) 16%);mix-blend-mode:normal;pointer-events:none}
.hero-copy{position:relative;padding:clamp(26px,3.5vw,58px) calc(var(--g) + var(--pad)) clamp(28px,3.2vw,52px);max-width:calc(var(--g) + var(--pad) + 46ch);display:flex;flex-direction:column;min-height:inherit}
.hero h1{margin-top:clamp(22px,3.3vw,56px)}
.h-display{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,4.55vw,78px);letter-spacing:-.06em;line-height:.88;white-space:nowrap}
.h-serif{display:block;font-family:var(--serif);font-size:clamp(24px,2.85vw,48px);letter-spacing:-.035em;line-height:1.04;margin-top:clamp(12px,1.4vw,24px);white-space:nowrap}
.h-serif em{font-style:italic}
.hero .body{margin-top:clamp(16px,1.9vw,32px);max-width:clamp(220px,21.5vw,24em);color:var(--ink)}
.hero .lnk{margin-top:clamp(16px,1.7vw,28px);align-self:flex-start}
.hero-base{margin-top:auto;padding-top:clamp(28px,3vw,52px);font-size:clamp(9px,.74vw,11.5px);letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--soft);position:relative}
.hero-base::before{content:"";position:absolute;left:calc(-1*(var(--pad) + clamp(10px,2.1vw,34px)));top:clamp(10px,1.1vw,18px);width:clamp(26px,4vw,62px);height:1px;background:var(--line-2)}
.coords{position:absolute;right:calc(var(--g) + clamp(10px,1.2vw,22px));top:clamp(22px,3.3vw,56px);display:flex;gap:clamp(10px,1.2vw,20px);align-items:center;font-size:clamp(10px,.84vw,13px);letter-spacing:.06em;line-height:1.5;font-weight:500;z-index:2}
.coords svg{width:clamp(22px,2.4vw,38px);height:clamp(28px,3vw,48px);flex:none}
.chip{position:absolute;right:var(--g);bottom:clamp(10px,1vw,18px);z-index:3;display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,40px);background:var(--paper);padding:clamp(10px,1vw,16px) clamp(14px,1.3vw,22px);font-size:clamp(11.5px,.92vw,14.5px);font-weight:500;border:1px solid rgba(18,17,16,.08);transition:background .3s,color .3s}
.chip svg{width:10px;height:10px}
.chip:hover{background:var(--ink);color:var(--paper)}
.chip i{font-style:normal;color:var(--mute);margin-right:.5em;transition:color .3s}
.chip:hover i{color:rgba(255,255,255,.6)}

/* ---------- selected homes ---------- */
.homes{position:relative;padding-bottom:clamp(18px,1.7vw,30px)}
.sec-head{display:flex;justify-content:space-between;align-items:center;padding:clamp(18px,2.2vw,38px) calc(var(--g) + var(--pad)) clamp(12px,1.1vw,20px);position:relative}
.sec-head::after{content:"";position:absolute;left:34%;right:calc(var(--g) - clamp(8px,1.6vw,26px));top:clamp(14px,1.6vw,26px);height:1px;background:var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,34px);margin-inline:var(--g);padding-inline:var(--pad)}
.card{padding:0 0 clamp(10px,1vw,18px);display:flex;flex-direction:column;min-width:0}
.card-img{display:block;overflow:hidden;height:clamp(200px,21.5vw,380px);background:#e7dfd2;border-radius:var(--r)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.035)}
.card-txt{display:flex;flex-direction:column;flex:1;padding:clamp(14px,1.5vw,26px) 2px 0}
.card h3{font-family:var(--serif);font-size:clamp(22px,2.15vw,36px);letter-spacing:-.035em;line-height:1.04;margin-top:clamp(10px,1vw,18px)}
.card .body{margin-top:clamp(10px,1vw,18px);max-width:25em;color:var(--ink)}
.card .lnk{margin-top:clamp(12px,1.15vw,20px);align-self:flex-start}
.card .meta{margin-top:auto}
.meta{font-size:clamp(11px,.82vw,13px);color:var(--soft);letter-spacing:.02em}
.card .meta span{display:block;border-top:1px solid var(--line);margin-top:clamp(14px,1.5vw,24px);padding-top:clamp(9px,.85vw,14px)}
.meta b{font-weight:400;margin:0 .5em;color:var(--mute)}

/* ---------- approach band ---------- */
.approach{display:grid;grid-template-columns:32.05% 30.2% 1fr;border-top:1px solid var(--line);position:relative}
.ap-copy{padding:clamp(22px,2.6vw,44px) clamp(8px,.8vw,14px) clamp(26px,2.8vw,48px) calc(var(--g) + var(--pad));display:flex;flex-direction:column;align-items:flex-start}
.ap-copy h2{font-family:var(--serif);white-space:nowrap;font-size:clamp(24px,2.35vw,40px);letter-spacing:-.035em;line-height:1.05;margin-top:clamp(14px,1.9vw,32px)}
.ap-copy h2 em{font-style:italic}
.ap-copy .body{margin-top:clamp(14px,1.7vw,28px);max-width:25em;padding-right:var(--pad);color:var(--ink)}
.ap-copy .lnk{margin-top:clamp(16px,1.6vw,26px)}
.ap-img{position:relative;min-height:clamp(260px,29.4vw,500px);background:#e2d8c8;overflow:hidden}
.ap-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-side{display:flex;flex-direction:column;min-width:0}
.ap-sketch{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,2vw,34px) calc(var(--g) + var(--pad)) clamp(12px,1.4vw,22px) clamp(18px,2.2vw,36px)}
.ap-sketch svg{width:min(48%,230px);height:auto;color:var(--soft);opacity:.75}
.ap-list{list-style:none;margin:0;padding:0 0 clamp(8px,.9vw,14px);font-size:clamp(9px,.72vw,11.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);line-height:2.05;border-bottom:1px solid var(--line);min-width:7.5em}
.cta{position:relative;margin-left:-15.6%;z-index:2;min-height:clamp(150px,17.3vw,290px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(20px,2.4vw,40px) calc(var(--g) + var(--pad)) clamp(20px,2.4vw,40px) clamp(22px,2.7vw,46px);background:#f2d9bd;overflow:hidden;isolation:isolate}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(248,232,212,.97) 0%,rgba(248,226,200,.9) 42%,rgba(246,214,180,.42) 78%,rgba(246,214,180,.18) 100%)}
.cta h2{font-family:var(--serif);font-size:clamp(22px,2.2vw,38px);letter-spacing:-.035em;line-height:1.06}
.cta .lnk{margin-top:clamp(14px,1.5vw,26px)}

/* ---------- contact band (footer) ---------- */
.foot{display:grid;grid-template-columns:26.7% 21.1% 1fr;border-top:1px solid var(--line)}
.ft-a{padding:clamp(24px,2.9vw,50px) var(--pad) clamp(28px,3vw,52px) calc(var(--g) + var(--pad));display:flex;flex-direction:column;align-items:flex-start}
.ft-a .brand b{font-size:clamp(13px,1.28vw,20px)}
.ft-a .brand span{font-size:clamp(7.5px,.62vw,9.5px)}
.ft-a h2{font-family:var(--serif);font-size:clamp(24px,2.4vw,42px);white-space:nowrap;letter-spacing:-.035em;line-height:1.05;margin-top:clamp(22px,2.9vw,50px)}
.ft-a .body{margin-top:clamp(12px,1.5vw,26px);max-width:21em;color:var(--ink);font-size:clamp(13px,.9vw,14.5px)}
.ft-a .lnk{margin-top:clamp(14px,1.6vw,28px)}
.ft-b{border-left:1px solid var(--line);padding:clamp(40px,5.3vw,90px) clamp(14px,1.6vw,28px) clamp(26px,3vw,50px) clamp(18px,3.6vw,62px);font-size:clamp(12.5px,.9vw,14.5px)}
.ft-b .eyebrow{font-size:clamp(9.5px,.78vw,12px)}
.ft-b address{font-style:normal;margin-top:clamp(12px,1.3vw,22px);line-height:1.5}
.ft-links{list-style:none;margin:clamp(18px,2.2vw,38px) 0 0;padding:0;display:grid;gap:clamp(10px,1.1vw,18px)}
.ft-links a{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,20px);font-weight:500}
.ft-links svg.ic{width:clamp(15px,1.3vw,21px);height:clamp(15px,1.3vw,21px);flex:none}
.ft-links svg.ar{width:14px;height:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ft-links a:hover svg.ar{transform:translateX(4px)}
.ft-map{position:relative;border-left:1px solid var(--line);min-height:clamp(240px,29vw,500px);background:#efe8dc;overflow:hidden;display:block}
.ft-map svg.map{position:absolute;inset:0;width:100%;height:100%}
.map-card{position:absolute;left:58.5%;top:22%;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(60,40,20,.45);padding:clamp(8px,.9vw,15px) clamp(10px,1.1vw,18px);line-height:1.15}
.map-card b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(10.5px,1.02vw,16.5px)}
.map-card i{display:block;font-style:normal;font-size:clamp(6.5px,.56vw,9px);letter-spacing:.34em;margin-top:3px}
.map-card small{display:block;margin-top:clamp(5px,.6vw,10px);font-size:clamp(8.5px,.72vw,11.5px);color:var(--soft);line-height:1.4}
.map-open{position:absolute;left:clamp(12px,1.4vw,22px);top:clamp(10px,1.2vw,20px);background:var(--paper);border:1px solid var(--line);padding:6px 10px;font-size:clamp(10px,.76vw,12px);font-weight:500;display:inline-flex;gap:8px;align-items:center;transition:background .3s,color .3s}
.map-open svg{width:9px;height:9px}
.ft-map:hover .map-open{background:var(--ink);color:var(--paper)}
.map-note{position:absolute;right:calc(var(--g) + 10px);bottom:8px;font-size:clamp(8px,.6vw,10px);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-top:1px solid var(--line);padding:clamp(16px,1.9vw,32px) calc(var(--g) + var(--pad));font-size:clamp(10.5px,.8vw,13px);color:var(--soft)}
.base nav{justify-self:end;display:flex;gap:clamp(14px,2.3vw,38px)}
.base nav a:hover{color:var(--ink)}
.base .socials{display:flex;gap:14px;margin-top:6px}
.base .socials a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.base .socials a:hover{color:var(--ink)}

/* ---------- inner pages ---------- */
.phero{display:grid;grid-template-columns:1.05fr .95fr;border-bottom:1px solid var(--line);position:relative}
.phero-copy{padding:clamp(30px,4.4vw,76px) var(--pad) clamp(34px,4.4vw,76px) calc(var(--g) + var(--pad));display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.phero h1{font-family:var(--serif);font-size:clamp(30px,3.9vw,66px);letter-spacing:-.04em;line-height:1.02;margin-top:clamp(16px,2vw,34px)}
.phero h1 em{font-style:italic}
.phero .body{margin-top:clamp(16px,2vw,34px);max-width:30em;color:var(--ink);font-size:clamp(14.5px,1.02vw,16.5px)}
.phero-img{position:relative;min-height:clamp(260px,36vw,620px);background:#e2d8c8;overflow:hidden;margin-right:var(--g)}
.phero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero.plain{grid-template-columns:1fr}
.phero.plain .phero-copy{padding-block:clamp(40px,6vw,104px)}
.crumb{font-size:clamp(11px,.84vw,13.5px);letter-spacing:.12em;text-transform:uppercase;font-weight:500;display:inline-flex;gap:.9em;align-items:center;flex-wrap:wrap}
.crumb a{display:inline-flex;gap:.7em;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:2px}
.crumb svg{width:14px;height:9px;transform:scaleX(-1)}
.crumb span{color:var(--mute)}

.split{display:grid;grid-template-columns:32.05% 1fr;border-bottom:1px solid var(--line)}
.split > :first-child{padding:clamp(24px,3vw,52px) var(--pad) clamp(24px,3vw,52px) calc(var(--g) + var(--pad))}
.split > :last-child{border-left:1px solid var(--line);padding:clamp(24px,3vw,52px) calc(var(--g) + var(--pad)) clamp(28px,3.4vw,58px) clamp(20px,3.4vw,58px)}
.h2{font-family:var(--serif);font-size:clamp(23px,2.5vw,42px);letter-spacing:-.035em;line-height:1.06}
.h2 em{font-style:italic}
.h3{font-family:var(--serif);font-size:clamp(20px,1.9vw,32px);letter-spacing:-.03em;line-height:1.08}
.prose{font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.55;max-width:38em;color:var(--ink)}
.prose + .prose{margin-top:1em}
.note{font-size:clamp(12px,.86vw,14px);color:var(--mute);margin-top:1.4em;max-width:44em}
.facts{list-style:none;margin:clamp(22px,2.6vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--line)}
.facts li{padding:clamp(12px,1.2vw,20px) 16px clamp(12px,1.2vw,20px) 0;border-bottom:1px solid var(--line)}
.facts span{display:block;font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.facts b{font-weight:500;font-size:clamp(13.5px,.95vw,15.5px)}
.facts a{border-bottom:1px solid var(--line-2)}
.facts a:hover{border-color:var(--ink)}

/* project hero */
.pj-hero{position:relative;margin-inline:calc(var(--g) + var(--pad));background:#e2d8c8;overflow:hidden;height:min(44vw,86vh);min-height:230px;border-radius:var(--r)}
.pj-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,70px);align-items:end;padding:clamp(26px,3.4vw,58px) calc(var(--g) + var(--pad)) clamp(24px,3vw,50px)}
.pj-head h1{font-family:var(--serif);font-size:clamp(32px,4.4vw,76px);letter-spacing:-.045em;line-height:.98;margin-top:clamp(16px,2vw,34px)}
.pj-head .body{color:var(--ink);font-size:clamp(14.5px,1.02vw,16.5px);max-width:30em;padding-bottom:.5em}

/* gallery */
.gal-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(22px,2.6vw,44px) calc(var(--g) + var(--pad)) clamp(14px,1.5vw,26px)}
.gal{margin-inline:var(--g);padding:0 var(--pad) clamp(22px,2.6vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.15vw,20px);grid-auto-flow:dense}
.gal a{display:block;position:relative;overflow:hidden;background:#e7dfd2;cursor:zoom-in;aspect-ratio:3/2;border-radius:var(--r)}
.gal a.tall{grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s}
.gal a:hover img{transform:scale(1.03)}
.gal figcaption,.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;font-size:12.5px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0));opacity:0;transition:opacity .35s;pointer-events:none}
.gal a:hover .cap,.gal a:focus-visible .cap{opacity:1}
.pj-next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pj-next a{padding:clamp(22px,2.8vw,48px) calc(var(--g) + var(--pad));display:flex;flex-direction:column;gap:10px;transition:background .35s}
.pj-next a + a{border-left:1px solid var(--line);text-align:right;align-items:flex-end}
.pj-next a:hover{background:rgba(18,17,16,.045)}
.pj-next b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,34px);letter-spacing:-.035em;line-height:1}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,13,12,.96);display:none;align-items:center;justify-content:center;flex-direction:column;color:#f4efe6}
.lb.open{display:flex}
.lb img{max-width:min(94vw,1800px);max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px -30px #000}
.lb-cap{margin-top:16px;font-size:13.5px;letter-spacing:.03em;display:flex;gap:1.2em;color:rgba(244,239,230,.82);padding:0 20px;text-align:center}
.lb-cap b{font-weight:400;color:rgba(244,239,230,.5)}
.lb button{position:absolute;background:none;border:1px solid rgba(244,239,230,.35);color:inherit;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.lb button:hover{background:#f4efe6;color:#121110}
.lb button svg{width:16px;height:12px}
.lb-x{top:18px;right:18px}
.lb-x svg{width:13px!important;height:13px!important}
.lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lb-p svg{transform:scaleX(-1)}
.lb-n{right:18px;top:50%;transform:translateY(-50%)}

/* projects index */
.plist{border-bottom:0}
.prow{display:grid;grid-template-columns:1.3fr 1fr;border-bottom:1px solid var(--line)}
.prow:nth-child(even){grid-template-columns:1fr 1.3fr}
.prow:nth-child(even) .prow-img{order:2;margin-left:0;margin-right:calc(var(--g) + var(--pad))}
.prow:nth-child(even) .prow-txt{padding-left:calc(var(--g) + var(--pad));padding-right:clamp(20px,3.4vw,58px)}
.prow-img{display:block;position:relative;margin:var(--pad) 0 var(--pad) calc(var(--g) + var(--pad));overflow:hidden;background:#e2d8c8;aspect-ratio:16/10;border-radius:var(--r)}
.prow-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.prow:hover .prow-img img{transform:scale(1.03)}
.prow-txt{padding:clamp(22px,3vw,52px) calc(var(--g) + var(--pad)) clamp(22px,3vw,52px) clamp(20px,3.4vw,58px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.prow-txt h2{font-family:var(--serif);font-size:clamp(26px,3.1vw,54px);letter-spacing:-.04em;line-height:1.02;margin-top:clamp(12px,1.4vw,24px)}
.prow-txt .body{margin-top:clamp(12px,1.5vw,26px);max-width:27em;color:var(--ink)}
.prow-txt .lnk{margin-top:clamp(16px,1.8vw,30px)}
.prow-txt .meta{margin-top:clamp(18px,2.2vw,38px);padding-top:12px;border-top:1px solid var(--line);align-self:stretch}

/* studio */
.arch{display:grid;grid-template-columns:32.05% 1fr;border-bottom:1px solid var(--line)}
.arch-photo{position:relative;margin-left:var(--g);background:#e2d8c8;overflow:hidden;aspect-ratio:4/5}
.arch-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.arch-txt{padding:clamp(26px,4vw,70px) calc(var(--g) + var(--pad)) clamp(26px,4vw,70px) clamp(22px,4.4vw,76px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.arch-txt h2{font-family:var(--serif);font-size:clamp(30px,3.8vw,66px);letter-spacing:-.04em;line-height:1;margin-top:clamp(14px,1.8vw,30px)}
.arch-txt .role{margin-top:clamp(10px,1.1vw,18px);font-size:clamp(11px,.86vw,13.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.arch-txt .prose{margin-top:clamp(18px,2.2vw,38px)}
.arch-txt .prose + .prose{margin-top:.9em}
.arch.flip{grid-template-columns:1fr 32.05%}
.arch.flip .arch-photo{order:2;margin-left:0;margin-right:var(--g)}
.arch.flip .arch-txt{padding-left:calc(var(--g) + var(--pad));padding-right:clamp(22px,4.4vw,76px)}
.trio{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line);margin-inline:var(--g)}
.trio > div{padding:clamp(24px,3vw,52px) var(--pad) clamp(28px,3.4vw,58px)}
.trio > div + div{border-left:1px solid var(--line)}
.trio .h3{margin-top:clamp(12px,1.4vw,24px)}
.trio .prose{margin-top:clamp(12px,1.4vw,24px);font-size:clamp(14px,.96vw,15.5px)}
.trio .lnk{margin-top:clamp(16px,1.8vw,30px)}
.band{display:grid;grid-template-columns:1fr 1.25fr;border-bottom:1px solid var(--line)}
.band-txt{padding:clamp(30px,4.4vw,76px) var(--pad) clamp(30px,4.4vw,76px) calc(var(--g) + var(--pad));display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.band-txt .h2{font-size:clamp(26px,3.1vw,54px);margin-top:clamp(14px,1.8vw,30px);line-height:1.04}
.band-img{position:relative;min-height:clamp(240px,30vw,520px);margin-right:var(--g);background:#e2d8c8;overflow:hidden}
.band-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* approach page */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-inline:var(--g);border-bottom:1px solid var(--line)}
.step{padding:clamp(22px,2.6vw,44px) var(--pad) clamp(28px,3.2vw,56px);display:flex;flex-direction:column}
.step{border-left:1px solid var(--line)}
.step:nth-child(3n+1){border-left:0}
.step:nth-child(n+4){border-top:1px solid var(--line)}
.step .num{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,58px);letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--line-2)}
.step .kicker{margin-top:clamp(16px,2vw,34px)}
.step .h3{margin-top:clamp(8px,.9vw,14px);font-size:clamp(20px,1.75vw,29px)}
.step .prose{margin-top:clamp(10px,1.2vw,20px);font-size:clamp(13.5px,.93vw,15px)}
.study{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,40px);padding:clamp(20px,3vw,50px);margin-right:var(--g);border-left:1px solid var(--line);flex-direction:column}
.study svg{width:min(78%,420px);height:auto;color:var(--soft)}
.study p{font-size:clamp(9px,.72vw,11.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--soft);display:flex;gap:2.2em;flex-wrap:wrap;justify-content:center}

/* contact page */
.contact{display:grid;grid-template-columns:38% 1fr;border-bottom:1px solid var(--line)}
.c-info{padding:clamp(24px,3vw,52px) var(--pad) clamp(28px,3.4vw,58px) calc(var(--g) + var(--pad))}
.c-info dl{margin:clamp(18px,2.2vw,38px) 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.c-info dl > div{padding:clamp(14px,1.4vw,24px) 0;border-bottom:1px solid var(--line)}
.c-info dt{font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.c-info dd{margin:0;font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.45}
.c-info dd a{display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.c-info dd a + a{margin-top:8px}
.c-info dd a:hover{border-color:var(--ink)}
.c-info dd svg{width:10px;height:10px}
.c-info .small{margin-top:clamp(14px,1.6vw,26px);font-size:clamp(12px,.86vw,14px);color:var(--mute)}
.c-form{border-left:1px solid var(--line);padding:clamp(24px,3vw,52px) calc(var(--g) + var(--pad)) clamp(28px,3.4vw,58px) clamp(20px,3.4vw,58px)}
.c-form .h2{margin-top:clamp(12px,1.4vw,24px)}
form.brief{margin-top:clamp(20px,2.6vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,34px) clamp(18px,2.4vw,40px);max-width:900px}
.fld{display:flex;flex-direction:column;gap:9px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label,.fld legend{font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);padding:0}
.fld input[type=text],.fld textarea{font:inherit;font-size:clamp(15px,1vw,16.5px);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:8px 0 10px;border-radius:0;width:100%;outline:none;transition:border-color .25s}
.fld textarea{min-height:110px;resize:vertical;line-height:1.5}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
fieldset.fld{border:0;margin:0;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px}
.opts label{position:relative;cursor:pointer;letter-spacing:0;text-transform:none;font-size:clamp(13.5px,1vw,16px);color:var(--ink)}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opts span{display:block;border:1px solid var(--line-2);padding:9px 16px;transition:background .25s,color .25s,border-color .25s}
.opts input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opts input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.send{grid-column:1/-1;display:flex;align-items:center;gap:clamp(14px,2vw,32px);flex-wrap:wrap}
.btn-solid{display:inline-flex;align-items:center;gap:18px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:13px 20px;font-size:clamp(13.5px,.93vw,15px);font-weight:500;cursor:pointer;transition:background .3s,color .3s}
.btn-solid svg{width:11px;height:11px}
.btn-solid:hover{background:transparent;color:var(--ink)}
.send p{font-size:clamp(12px,.86vw,14px);color:var(--mute);max-width:30em}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-media img{transition:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(n){border-left:1px solid var(--line)}
  .step:nth-child(2n+1){border-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:900px){
  :root{--g:14px;--pad:16px}
  .hdr{grid-template-columns:1fr auto;height:66px}
  .hdr::after{display:none}
  .hdr > .btn{display:none}
  .menu-btn{display:inline-block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;gap:0;padding:6px calc(var(--g) + var(--pad)) 18px;border-bottom:1px solid var(--line);font-size:17px;display:none;z-index:30;box-shadow:0 24px 40px -30px rgba(0,0,0,.4)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .nav-cta{display:block;border-bottom:0;font-weight:600}

  .hero{min-height:0;background:var(--bg);display:flex;flex-direction:column}
  .hero-media{position:relative;inset:auto;order:2;height:68vw;min-height:250px;margin-inline:var(--g);-webkit-mask-image:none;mask-image:none}
  .hero-copy{max-width:none;min-height:0;padding-top:26px;padding-bottom:26px}
  .hero .body{max-width:27em}
  .h-display{font-size:clamp(32px,10.2vw,78px)}
  .h-serif{font-size:clamp(24px,6.7vw,48px)}
  .hero-base{margin-top:26px;padding-top:0}
  .hero-base::before{display:none}
  .coords{position:static;order:3;padding:14px calc(var(--g) + var(--pad)) 0;justify-content:flex-start}
  .chip{position:static;order:4;margin:12px var(--g) 18px;justify-content:space-between}

  .sec-head::after{display:none}
  .cards{grid-template-columns:1fr;gap:34px}
  .card{padding:0}
  .card-img{height:auto;aspect-ratio:6/5}
  .card h3{font-size:clamp(25px,6.8vw,38px)}
  .card .meta{margin-top:0}

  .approach{grid-template-columns:1fr}
  .ap-img{min-height:74vw;margin-inline:var(--g)}
  .ap-sketch{padding-inline:calc(var(--g) + var(--pad))}
  .cta{margin-left:var(--g);margin-right:var(--g);padding-inline:var(--pad);min-height:52vw}
  .ap-copy h2,.cta h2,.ft-a h2{font-size:clamp(25px,6.9vw,42px)}
  .ap-copy{padding-right:var(--pad)}

  .foot{grid-template-columns:1fr}
  .ft-b{border-left:0;border-top:1px solid var(--line);padding:26px calc(var(--g) + var(--pad))}
  .ft-links{gap:16px}
  .ft-map{border-left:0;border-top:1px solid var(--line);min-height:60vw}
  .base{grid-template-columns:1fr;gap:12px;text-align:left}
  .base nav{justify-self:start;flex-wrap:wrap}

  .phero,.split,.pj-head,.prow,.prow:nth-child(even),.arch,.band,.contact,.trio{grid-template-columns:1fr}
  .phero-img{margin-inline:var(--g);min-height:66vw}
  .split > :last-child,.c-form{border-left:0;border-top:1px solid var(--line);padding-inline:calc(var(--g) + var(--pad))}
  .pj-hero{height:70vw}
  .gal{grid-template-columns:repeat(2,1fr)}
  .prow-img,.prow:nth-child(even) .prow-img{order:0;margin:var(--pad) calc(var(--g) + var(--pad)) 0}
  .prow-txt,.prow:nth-child(even) .prow-txt{padding-inline:calc(var(--g) + var(--pad))}
  .arch-photo{margin-inline:var(--g)}
  .arch-txt{padding-inline:calc(var(--g) + var(--pad))}
  .arch.flip{grid-template-columns:1fr}
  .arch.flip .arch-photo{order:0;margin-inline:var(--g)}
  .arch.flip .arch-txt{padding-inline:calc(var(--g) + var(--pad))}
  .trio > div + div{border-left:0;border-top:1px solid var(--line)}
  .band-img{margin-inline:var(--g);min-height:70vw}
  .study{margin-inline:var(--g);border-left:0;border-top:1px solid var(--line)}
  .pj-next{grid-template-columns:1fr}
  .pj-next a + a{border-left:0;border-top:1px solid var(--line)}
  form.brief{grid-template-columns:1fr}
  .phero h1,.pj-head h1,.arch-txt h2{font-size:clamp(30px,8.4vw,54px)}
  .prow-txt h2,.band-txt .h2{font-size:clamp(27px,7.4vw,46px)}
  .h2{font-size:clamp(24px,6.6vw,40px)}
  .lb button{width:40px;height:40px}
  .lb-p{left:8px}.lb-n{right:8px}.lb-x{right:8px;top:8px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step:nth-child(n){border-left:0}
  .step + .step{border-top:1px solid var(--line)}
  .map-note{display:none}
  .gal{grid-template-columns:1fr}
  .gal a.tall{grid-row:auto;aspect-ratio:4/5}
  .lnk{font-size:14.5px}
  .body{font-size:15px}
}

/* ---------- process: the journey ---------- */
.flow-sec{border-bottom:1px solid var(--line);padding:clamp(26px,3.4vw,58px) calc(var(--g) + var(--pad)) clamp(32px,4vw,68px)}
.flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(30px,3.8vw,64px)}
.flow-head .h2{margin-top:clamp(10px,1.2vw,20px)}
.flow-head .note{margin:0;max-width:27em;font-size:clamp(13.5px,.96vw,15.5px);color:var(--soft)}
.flow{--c:clamp(60px,6.6vw,108px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.flow::before,.flow::after{content:"";position:absolute;left:8.333%;right:8.333%;top:calc(var(--c)/2);height:1px;background:var(--line-2)}
.flow::after{background:var(--ink);height:1.500px;transform-origin:0 50%}
.flow li{min-width:0}
.flow a{display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:6px}
.flow-c{position:relative;z-index:1;width:var(--c);height:var(--c);border-radius:50%;border:1px solid var(--line-2);background:var(--bg);display:grid;place-items:center;transition:background .4s var(--ease),color .4s ease,border-color .4s ease,transform .5s var(--ease)}
.flow-c svg{width:48%;height:48%}
.flow-c b{position:absolute;right:-2%;top:-2%;width:clamp(20px,1.9vw,28px);height:clamp(20px,1.9vw,28px);border-radius:50%;background:var(--ink);color:var(--bg);font-size:clamp(9px,.72vw,11px);font-weight:600;letter-spacing:.04em;display:grid;place-items:center;transition:background .4s ease,color .4s ease}
.flow a:hover .flow-c{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-4px)}
.flow a:hover .flow-c b{background:var(--brick)}
.flow .t{margin-top:clamp(12px,1.3vw,20px);font-weight:500;font-size:clamp(12.5px,.98vw,15.5px);line-height:1.25}
.step{scroll-margin-top:20px}
.step-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.step-ic{width:clamp(52px,5.2vw,84px);height:auto;flex:none;color:var(--ink)}
.step-out{margin-top:auto;padding-top:clamp(14px,1.6vw,26px);font-size:clamp(13.5px,.96vw,15.5px);font-weight:500;line-height:1.4}
.step-out span{display:block;font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:6px;padding-top:clamp(12px,1.2vw,18px);border-top:1px solid var(--line)}
.step .prose{margin-bottom:clamp(16px,1.8vw,28px)}
@media (max-width:900px){
  .flow{--c:66px;grid-template-columns:repeat(3,1fr);row-gap:28px}
  .flow::before,.flow::after{display:none}
  .flow-sec{padding-inline:calc(var(--g) + var(--pad))}
}
.study.scene svg{width:min(92%,560px)}
.study.scene{padding-block:clamp(26px,3.6vw,60px)}
.h-display{word-spacing:.09em}
.hero .body{text-wrap:balance}
/* ---------- real logo ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand{display:block;line-height:0}
.brand .logo{display:block;height:clamp(44px,4.9vw,72px);width:auto}
.ft-a .brand .logo{height:clamp(46px,4.4vw,64px)}
/* ---------- one team ---------- */
.firms{border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,58px)}
.firms .flow-head{padding-inline:calc(var(--g) + var(--pad));margin-bottom:clamp(22px,2.8vw,46px)}
.firm-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-inline:var(--g);border-top:1px solid var(--line)}
.firm{padding:clamp(20px,2.2vw,36px) var(--pad) clamp(26px,2.8vw,48px);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.firm + .firm{border-left:1px solid var(--line)}
.firm .step-top{align-self:stretch;align-items:center}
.firm .step-ic{width:clamp(40px,3.5vw,56px)}
.firm .h3{margin-top:clamp(16px,2vw,32px)}
.firm .prose{margin-top:clamp(10px,1.1vw,18px);font-size:clamp(14px,.96vw,15.5px);margin-bottom:clamp(18px,2vw,32px)}
.firm .lnk,.firm .firm-tag{margin-top:auto}
.firm-tag{font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-bottom:8px}
/* ---------- WhatsApp button ---------- */
.wa-float{position:fixed;right:max(8px,calc((var(--g) - 46px)/2));bottom:clamp(14px,2vw,26px);z-index:80;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:0 10px 26px -12px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s ease}
.wa-float svg{width:22px;height:22px}
.wa-float span{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:500;line-height:1;padding:9px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.wa-float:hover{transform:translateY(-3px);background:#1d8a4b}
.wa-float:hover span,.wa-float:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (max-width:900px){
  .firm-grid{grid-template-columns:1fr}
  .firm + .firm{border-left:0;border-top:1px solid var(--line)}
  .brand .logo{height:46px}
  .wa-float{right:14px;width:50px;height:50px}
}
/* ---------- client words (Google reviews) ---------- */
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin-inline:var(--g);border-top:1px solid var(--line)}
.voice-side{padding:clamp(26px,3.4vw,58px) var(--pad) clamp(26px,2.8vw,48px);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.voice-side .h2{margin-top:clamp(10px,1.2vw,20px)}
.rate{margin-top:auto;padding-top:clamp(28px,4vw,72px);display:flex;align-items:center;gap:clamp(12px,1.3vw,22px)}
.rate-n{font-family:var(--serif);font-size:clamp(46px,5.4vw,92px);line-height:.86;letter-spacing:-.045em}
.rate-b{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(7px,.7vw,11px)}
.stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.stars > span{display:inline-flex;gap:3px}
.stars svg{width:clamp(14px,1.15vw,18px);height:auto;flex:none;fill:rgba(18,17,16,.16)}
.stars .on{position:absolute;left:0;top:0;overflow:hidden}
.stars .on svg{fill:var(--brick)}
.rate-t{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:clamp(13px,.93vw,15px);line-height:1.2;padding-bottom:5px;border-bottom:1px solid var(--ink)}
.rate-t svg{width:10px;height:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rate:hover .rate-t svg{transform:translate(2px,-2px)}
.rate-note{margin-top:clamp(12px,1.2vw,18px);font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line)}
.voice{margin:0;padding:clamp(22px,2.4vw,40px) var(--pad) clamp(22px,2.4vw,40px);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.voice:nth-child(even){border-left:1px solid var(--line)}
.voice:nth-child(n+3){border-top:1px solid var(--line)}
.voice blockquote{margin:0;position:relative;padding-top:clamp(22px,2.1vw,34px)}
.voice blockquote::before{content:"\201C";position:absolute;left:-.04em;top:0;font-family:var(--serif);font-size:clamp(38px,3.6vw,60px);line-height:.8;color:var(--brick)}
.voice blockquote p{margin:0;font-family:var(--serif);font-size:clamp(17px,1.42vw,23px);line-height:1.32;letter-spacing:-.02em;text-wrap:pretty}
.voice figcaption{margin-top:auto;padding-top:clamp(20px,2.2vw,36px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.voice figcaption b{font-weight:500;font-size:clamp(13px,.93vw,15px)}
.voice figcaption span{font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
@media (max-width:900px){
  .voices{grid-template-columns:1fr}
  .voice-side{padding-bottom:26px}
  .rate{padding-top:26px}
  .voice-grid{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--line)}
  .voice:nth-child(even){border-left:0}
  .voice:nth-child(n+2){border-top:1px solid var(--line)}
}
/* ---------- step inside (expanding photo strips) ---------- */
.walk{border-top:1px solid var(--line);padding:clamp(26px,3.4vw,58px) 0 clamp(30px,3.6vw,62px)}
.walk .flow-head{padding-inline:calc(var(--g) + var(--pad));margin-bottom:clamp(22px,2.8vw,46px)}
.walk .flow-head .lnk{align-self:flex-end;margin:0 0 4px}
.strips{--sg:clamp(6px,.75vw,12px);display:flex;gap:var(--sg);height:clamp(340px,39vw,620px);margin-inline:calc(var(--g) + var(--pad));container-type:inline-size}
.strip{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:#d9d2c5;color:#fff;font:inherit;text-align:left;cursor:pointer;position:relative;overflow:hidden;flex:1 1 0;min-width:0;border-radius:var(--r);transition:flex-grow .8s cubic-bezier(.2,.7,.2,1)}
.strip.is-on{flex-grow:6.5;cursor:default}
.strip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.strip img{position:absolute;left:50%;top:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:translateX(-50%);filter:brightness(.84) saturate(.92);transition:filter .7s ease}
@supports (width:1cqw){.strip img{width:calc((100cqw - 5 * var(--sg)) * .5652)}}
.strip.is-on img,.strip:hover img{filter:none}
.strip::after{content:"";position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(to top,rgba(12,11,10,.64),rgba(12,11,10,0));pointer-events:none}
.strip-v{position:absolute;left:50%;bottom:clamp(14px,1.5vw,24px);z-index:2;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;font-weight:500;font-size:clamp(12.5px,1vw,15.5px);letter-spacing:.03em;line-height:1;transition:opacity .3s ease}
.strip-h{position:absolute;left:clamp(16px,1.8vw,30px);bottom:clamp(14px,1.6vw,26px);z-index:2;display:flex;flex-direction:column;gap:7px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.strip-h small{font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.18em;text-transform:uppercase;opacity:.86}
.strip-h b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,32px);letter-spacing:-.03em;line-height:1.05}
.strip.is-on .strip-v{opacity:0}
.strip.is-on .strip-h{opacity:1;transform:none;transition-delay:.28s}
@media (max-width:700px){
  .strips{--oh:min(74vw,340px);flex-direction:column;height:auto}
  .strip{flex:none;height:54px;transition:height .65s cubic-bezier(.2,.7,.2,1)}
  .strip.is-on{height:var(--oh)}
  .strip img{left:0;top:50%;width:100%;height:var(--oh);transform:translateY(-50%)}
  .strip::after{height:100%;background:linear-gradient(to right,rgba(12,11,10,.58),rgba(12,11,10,.08))}
  .strip.is-on::after{height:60%;background:linear-gradient(to top,rgba(12,11,10,.64),rgba(12,11,10,0))}
  .strip-v{writing-mode:horizontal-tb;left:16px;bottom:50%;transform:translateY(50%);font-size:14.5px}
  .strip-h{left:16px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){.strip,.strip img,.strip-v,.strip-h{transition:none}}
/* ---------- on Instagram (reels) ---------- */
.reels{border-top:1px solid var(--line);padding:clamp(26px,3.4vw,58px) 0 clamp(30px,3.6vw,62px)}
.reels .flow-head{padding-inline:calc(var(--g) + var(--pad));margin-bottom:clamp(22px,2.8vw,46px)}
.reels-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.reels-side .lnk{margin:0;align-self:flex-end}
.reels-side .lnk svg{width:10px;height:10px}
.reels-side .rate-note{margin-top:10px}
.reel-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,18px);margin-inline:calc(var(--g) + var(--pad))}
.reel{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:#d9d2c5;color:#fff;isolation:isolate}
.reel-img,.reel-img img{position:absolute;inset:0;width:100%;height:100%}
.reel-img img{object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,11,10,.72),rgba(12,11,10,0) 46%),linear-gradient(to bottom,rgba(12,11,10,.34),rgba(12,11,10,0) 22%);pointer-events:none}
.reel:hover .reel-img img,.reel:focus-visible .reel-img img{transform:scale(1.045)}
.reel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.reel-views{position:absolute;z-index:2;left:clamp(10px,1.1vw,16px);top:clamp(10px,1.1vw,16px);display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px;background:rgba(18,17,16,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:clamp(11px,.82vw,13px);font-weight:500;line-height:1;letter-spacing:.01em}
.reel-views svg{width:15px;height:15px}
.reel-play{position:absolute;z-index:2;left:50%;top:50%;width:clamp(46px,4.2vw,64px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(244,239,230,.94);color:var(--ink);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s ease}
.reel-play svg{width:42%;height:42%;margin-left:6%}
.reel:hover .reel-play{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.reel-meta{position:absolute;z-index:2;left:clamp(12px,1.3vw,20px);right:clamp(12px,1.3vw,20px);bottom:clamp(12px,1.4vw,22px);display:flex;flex-direction:column;gap:5px}
.reel-meta b{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.55vw,26px);letter-spacing:-.03em;line-height:1.08}
.reel-meta small{font-size:clamp(11px,.8vw,12.5px);line-height:1.35;opacity:.86}
@media (max-width:900px){
  .reels-side{align-items:flex-start}
  .reels-side .lnk{align-self:flex-start}
  .reel-row{display:flex;gap:10px;margin-inline:0;padding-inline:calc(var(--g) + var(--pad));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc(var(--g) + var(--pad));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel-row::-webkit-scrollbar{display:none}
  .reel{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}
/* reel pop-up player */
.rp{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:rgba(14,13,12,.9);color:#f4efe6;opacity:0;transition:opacity .3s ease}
.rp.on{opacity:1}
.rp-box{--w:max(326px,min(400px,92vw,calc((100vh - 330px) / 1.25)));width:var(--w);max-width:100%;height:min(calc(100vh - 110px),calc(var(--w) * 1.25 + 220px));border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.rp-box iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.rp-x{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,239,230,.4);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.rp-x svg{width:13px;height:13px}
.rp-x:hover{background:rgba(244,239,230,.12)}
.rp-open{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;padding-bottom:5px;border-bottom:1px solid rgba(244,239,230,.6)}
.rp-open svg{width:10px;height:10px}
@media (prefers-reduced-motion:reduce){.rp,.reel-img img,.reel-play{transition:none}}
/* ---------- services page ---------- */
.svc-sec{border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,58px)}
.svc-sec .flow-head,.faq .flow-head{padding-inline:calc(var(--g) + var(--pad));margin-bottom:clamp(22px,2.8vw,46px)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:var(--g);border-top:1px solid var(--line)}
.svc{padding:clamp(20px,2.2vw,36px) var(--pad) clamp(26px,2.8vw,48px);display:flex;flex-direction:column;min-width:0;border-bottom:1px solid var(--line)}
.svc:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
.svc:nth-last-child(-n+3){border-bottom:0}
.svc .step-ic{width:clamp(40px,3.5vw,56px)}
.svc .h3{margin-top:clamp(16px,2vw,32px)}
.svc .prose{margin-top:clamp(10px,1.1vw,18px);font-size:clamp(14px,.96vw,15.5px);color:var(--soft)}
.facts.sis{grid-template-columns:1fr;gap:0;margin-top:0}
.facts.sis li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:baseline;gap:8px 24px;padding:clamp(14px,1.4vw,22px) 0}
.facts.sis span{margin:0}
.facts.sis b{font-weight:400}
.facts.sis .lnk{margin:0;white-space:nowrap}
.facts.sis .lnk svg{width:10px;height:10px}
.where-list{display:flex;flex-wrap:wrap;gap:10px}
.where-list span{font-family:var(--serif);font-size:clamp(18px,1.6vw,26px);letter-spacing:-.02em;padding:8px 18px;border:1px solid var(--line);border-radius:999px}
.faq{border-top:1px solid var(--line);padding:clamp(26px,3.4vw,58px) 0 clamp(30px,3.6vw,62px)}
.qa-list{margin-inline:calc(var(--g) + var(--pad));border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(16px,1.6vw,26px) 0;font-family:var(--serif);font-size:clamp(18px,1.55vw,26px);letter-spacing:-.025em;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.qa summary i{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa .prose{max-width:46em;padding:0 0 clamp(18px,1.8vw,30px);margin-top:-4px;color:var(--soft)}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr}
  .svc:not(:nth-child(3n+1)){border-left:0}
  .svc:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .svc:last-child{border-bottom:0}
  .facts.sis li{grid-template-columns:1fr;gap:6px}
  .facts.sis .lnk{justify-self:start;margin-top:4px}
}

/* ================= MOTION ================= */
:root{--intro:0s;--ease:cubic-bezier(.2,.7,.2,1)}
.intro{display:none}
.ln{display:block}
.coords b{font-weight:inherit;font-variant-numeric:tabular-nums}
.map .pulse{display:none}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:90;pointer-events:none}
.step{position:relative}
.step::before{content:"";position:absolute;left:var(--pad);top:-1px;width:36px;height:2px;background:var(--ink)}
/* hover fill sweeps from the left */
.btn{background:transparent linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%;transition:background-size .5s var(--ease),color .35s ease}
.btn:hover{background:transparent linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/100% 100%;color:var(--bg)}
.chip{background:var(--paper) linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%;transition:background-size .5s var(--ease),color .35s ease}
.chip:hover{background:var(--paper) linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/100% 100%;color:var(--paper)}
/* safety net: if the script never runs, show everything */
.rv-all .rv{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:no-preference){
  html:not(.no-intro){--intro:2.75s}
  html.intro-skip{--intro:0s}

  /* ---- opening logo ---- */
  html:not(.no-intro) .intro{display:flex;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;background:var(--bg);cursor:pointer;animation:introOut .85s cubic-bezier(.75,0,.2,1) 2.65s both}
  .intro.skip{animation:introSkip .45s ease both!important}
  .intro-logo{width:min(58vw,380px);height:auto;overflow:visible;animation:introLogoOut .4s ease 2.38s both}
  @keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}
  @keyframes introSkip{to{opacity:0;visibility:hidden}}
  @keyframes introLogoOut{to{opacity:0;transform:translateY(-16px)}}
  .i-m1,.i-m2,.i-m3,.i-wave{stroke-dasharray:1 1.3;stroke-dashoffset:1}
  .i-wave{animation:iDraw 1.05s cubic-bezier(.45,0,.2,1) .15s forwards}
  .i-m1{animation:iDraw .62s cubic-bezier(.5,0,.3,1) .3s forwards}
  .i-m2{animation:iDraw .68s cubic-bezier(.4,0,.2,1) .82s forwards}
  .i-m3{animation:iDraw .45s cubic-bezier(.4,0,.2,1) .86s forwards}
  @keyframes iDraw{to{stroke-dashoffset:0}}
  .i-bar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:iBar .75s var(--ease) 1.15s forwards}
  @keyframes iBar{to{transform:scaleX(1)}}
  .i-w1,.i-w2{transform-box:fill-box;transform:translateY(114%);animation:iUp .8s var(--ease) forwards}
  .i-w1{animation-delay:1.25s}
  .i-w2{animation-delay:1.4s}
  @keyframes iUp{to{transform:none}}
  .i-tag{opacity:0;animation:iFade .55s ease 1.9s forwards}
  @keyframes iFade{to{opacity:1}}

  /* ---- first load: frame and header settle in ---- */
  html:not(.no-intro) .site::before,html:not(.no-intro) .site::after{transform-origin:50% 0;animation:growY 1.7s var(--ease) var(--intro) both}
  @keyframes growY{from{transform:scaleY(0)}}
  html:not(.no-intro) .hdr .brand,html:not(.no-intro) .hdr .nav a,html:not(.no-intro) .hdr > .btn,html:not(.no-intro) .hdr .menu-btn{animation:fadeDown .8s var(--ease) calc(var(--intro) + var(--d,0ms)) both}
  .hdr .nav a:nth-child(1){--d:80ms}.hdr .nav a:nth-child(2){--d:140ms}.hdr .nav a:nth-child(3){--d:200ms}.hdr .nav a:nth-child(4){--d:260ms}.hdr > .btn,.hdr .menu-btn{--d:340ms}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}

  /* ---- home hero ---- */
  .ln{overflow:hidden;width:max-content;max-width:none;padding:0 .08em .2em 0;margin-bottom:-.2em}
  .ln > span{display:block;transform:translateY(112%);animation:lnUp 1.05s var(--ease) calc(var(--intro) + 80ms + var(--i,0)*110ms) forwards}
  @keyframes lnUp{to{transform:none}}
  .hero .eyebrow,.hero .body,.hero .lnk,.hero-base,.coords,.chip{animation:fadeUp .95s var(--ease) calc(var(--intro) + var(--d,0ms)) both}
  .hero .body{--d:520ms}.hero .lnk{--d:620ms}.hero-base{--d:760ms}.coords{--d:480ms}.chip{--d:860ms}
  .coords svg{animation:crossIn 1.5s var(--ease) calc(var(--intro) + 480ms) both}
  @keyframes crossIn{from{transform:rotate(-90deg) scale(.5);opacity:0}}
  .hero-media{overflow:hidden;animation:heroIn 1.7s var(--ease) calc(var(--intro) + 60ms) both}
  @keyframes heroIn{from{opacity:0;transform:scale(1.035)}}
  .hero-media img.on{animation:kb 6.5s ease-out both}
  @keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
  .chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brick);transform:scaleX(0);transform-origin:0 50%}
  .chip.run::after{animation:chipRun 6.5s linear forwards}
  @keyframes chipRun{to{transform:scaleX(1)}}

  .wa-float{animation:fadeUp .8s var(--ease) calc(var(--intro) + 1.1s) both}
  /* ---- inner page headings ---- */
  .phero-copy > *,.pj-head > div > *,.pj-head > .body{animation:fadeUp .85s var(--ease) calc(var(--intro) + var(--d,0ms)) both}
  .phero-copy > :nth-child(2),.pj-head > div > :nth-child(2){--d:90ms}
  .phero-copy > :nth-child(3),.pj-head > .body{--d:190ms}

  /* ---- reveal on scroll ---- */
  .rv{transition-delay:var(--rd,0ms)}
  /* photos wipe in from the top (the wipe sits on the image, so the frame itself can still be detected) */
  .js :is(.card-img,.prow-img,.gal a,.pj-hero,.phero-img,.arch-photo,.ap-img,.band-img):not(.in){background-color:transparent}
  .js :is(.card-img,.prow-img,.gal a,.pj-hero,.phero-img,.arch-photo,.ap-img,.band-img) > img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.65,0,.2,1) var(--rd,0ms),transform 1.6s var(--ease) var(--rd,0ms)}
  .js :is(.card-img,.prow-img,.gal a,.pj-hero,.phero-img,.arch-photo,.ap-img,.band-img).in > img{clip-path:inset(0 0 0 0)}
  .js :is(.card-img,.prow-img,.gal a,.pj-hero,.phero-img,.arch-photo):not(.in) > img{transform:scale(1.14)}
  .rv-all :is(.card-img,.prow-img,.gal a,.pj-hero,.phero-img,.arch-photo,.ap-img,.band-img) > img{clip-path:none!important;transform:none!important}

  /* line drawings draw themselves */
  .js .ap-sketch svg :is(path,circle){stroke-dasharray:1 1.2;stroke-dashoffset:1}
  .js .ap-sketch.in svg :is(path,circle){animation:iDraw 2s cubic-bezier(.5,0,.2,1) forwards}
  .js .ap-sketch.in svg > :nth-child(1) > *{animation-duration:1.5s}
  .js .ap-sketch.in svg > :nth-child(2){animation-delay:.3s}
  .js .ap-sketch.in svg > :nth-child(3){animation-delay:.65s}
  .js .ap-sketch.in svg > :nth-child(4){animation-delay:.95s}
  .js .ap-sketch.in svg > :nth-child(n+5),.js .ap-sketch.in svg > :nth-child(n+5) > *{animation-delay:1.25s}
  .rv-all .ap-sketch svg :is(path,circle){stroke-dashoffset:0!important}
  /* approach page: the house is built line by line, then the windows light up */
  .js .study svg .b{stroke-dasharray:1 1.2;stroke-dashoffset:1}
  .js .study.in svg .b{animation:iDraw 1.05s cubic-bezier(.5,0,.2,1) calc(var(--k)*230ms) forwards}
  .js .study svg .f{opacity:0}
  .js .study.in svg .f{animation:iFade 1s ease calc(var(--k)*230ms + 500ms) forwards}
  .study svg .cmp{transform-box:fill-box;transform-origin:50% 50%}
  .js .study.in svg .cmp{animation:spin 26s linear 4s infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .js .study p{opacity:0;transition:opacity 1s ease 3.2s}
  .js .study.in p,.rv-all .study p{opacity:1}
  .rv-all .study svg .b{stroke-dashoffset:0!important}
  .rv-all .study svg .f{opacity:1!important}
  .js .ap-list li{opacity:0;transform:translateX(-8px);transition:opacity .7s ease,transform .7s var(--ease)}
  .js .ap-sketch.in .ap-list li,.rv-all .ap-list li{opacity:1;transform:none}
  .ap-list li:nth-child(1){transition-delay:.5s}.ap-list li:nth-child(2){transition-delay:.62s}.ap-list li:nth-child(3){transition-delay:.74s}.ap-list li:nth-child(4){transition-delay:.86s}.ap-list li:nth-child(5){transition-delay:.98s}

  .js .step::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) calc(var(--rd,0ms) + 300ms)}
  .js .step.in::before,.rv-all .step::before{transform:scaleX(1)}

  /* small line icons draw themselves; the journey line fills in */
  .js .dr :is(path,circle){stroke-dasharray:1 1.2;stroke-dashoffset:1}
  .js .in .dr :is(path,circle){animation:iDraw 1.5s cubic-bezier(.5,0,.2,1) calc(var(--rd,0ms) + 250ms) forwards}
  .rv-all .dr :is(path,circle){stroke-dashoffset:0!important}
  .js .flow::after{transform:scaleX(0);transition:transform 2s var(--ease) .25s}
  .js .flow.in::after,.rv-all .flow::after{transform:scaleX(1)}

  /* gentle depth while scrolling (where the browser supports it) */
  @supports (animation-timeline:view()){
    .ap-img img,.band-img img{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes par{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
  }

  /* map pin */
  .map .pulse{display:inline;fill:none;stroke:#a8502c;stroke-width:1.4;transform-box:fill-box;transform-origin:50% 50%;animation:pulse 2.8s ease-out infinite}
  @keyframes pulse{from{transform:scale(.5);opacity:.85}70%,to{transform:scale(3.4);opacity:0}}

  /* photo viewer */
  .lb.open{animation:lbIn .35s ease both}
  .lb.open img{animation:lbImg .55s var(--ease) both}
  @keyframes lbIn{from{opacity:0}}
  @keyframes lbImg{from{opacity:0;transform:scale(.97)}}

  /* soft cross-fade between pages */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .22s ease both}
  ::view-transition-new(root){animation:vtIn .5s var(--ease) both}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
  .hdr{view-transition-name:hdr}
}
@media (max-width:900px){
  .chip{position:relative}
}