:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  /* TYPE — taken from the live artistreehome.com, not from ANJO.
     ANJO is serif-led (Newsreader); Artistree is light geometric sans.
     proxima-nova (Adobe) carries labels on the live site; Montserrat stands
     in here because the artifact CSP only admits Google Fonts. */
  --display:'Josefin Sans','Century Gothic','Avenir Next',sans-serif;
  --sans:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --label:'Montserrat','Open Sans',Helvetica,Arial,sans-serif;

  /* COLOUR — Artistree keeps its existing copper. Sampled from the logo;
     confirm against the brand file before production. ANJO moves to green. */
  --accent:#a07050; --accent-deep:#87593c; --accent-dim:#cdae96;

  --ink:#1a1a18; --ink-2:#3a3a36; --muted:#77736c; --line:#e6e2da;
  --cream:#f5f3ed; --cream-2:#edeae2; --paper:#fcfbf7; --white:#fff;
  --dark:#16150f; --dark-2:#201e17;
  --wrap:1180px; --gut:34px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Single-theme on purpose: this prototypes one brand’s light identity, so it
   commits to that world. Every colour comes from a token on this bare :root and
   body paints its own ground, so the page holds on any host background. */
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.68;font-size:15px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:hover{transform:none}
  .bcard:hover .bg,.showcase:hover .bg,.tile:hover .bg{transform:none}
}

/* ---------- TYPE SCALE ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.018em;text-wrap:balance}
.eyebrow{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow.onDark{color:var(--accent-dim)}
.lede{font-size:17px;color:var(--ink-2);line-height:1.72;max-width:62ch}
.muted{color:var(--muted)}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(252,251,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hwrap{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);gap:20px}
.logo{cursor:pointer;display:flex;align-items:center}
.logo img{height:62px;width:auto}
nav{display:flex;gap:4px;align-items:center}
nav a{font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding:9px 15px;cursor:pointer;position:relative;transition:color .2s;white-space:nowrap}
nav a:hover{color:var(--accent)}
nav a::after{content:'';position:absolute;left:15px;right:15px;bottom:3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}
.hcta{display:flex;align-items:center;gap:10px}
.menuBtn{display:none;background:none;border:none;font-size:22px;cursor:pointer;line-height:1;padding:6px}
.mobonly{display:none}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:none;border-radius:0;padding:15px 26px;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.copper{background:var(--accent);color:#fff}
.btn.copper:hover{background:var(--accent-deep)}
.btn.dark{background:var(--ink);color:#fff}
.btn.light{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.light:hover{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65)}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.btn.sm{padding:11px 18px;font-size:10px}
.tlink{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:10px;align-items:center;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px;transition:gap .2s}
.tlink:hover{gap:15px}
.tlink.onDark{color:#fff;border-bottom-color:var(--accent-dim)}

/* ---------- LAYOUT ---------- */
.view{display:none;animation:fade .4s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section{padding:118px 0}
section.tight{padding:74px 0}

/* ARTISTREE STRUCTURE 1 — the centred statement block that sits directly under
   every hero on the live site. This is the single biggest structural departure
   from ANJO, which opens every page into a left-aligned contained grid. */
.intro{text-align:center;max-width:860px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.intro h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:24px}
.intro p{font-size:17.5px;color:var(--ink-2);line-height:1.75;max-width:68ch;margin:0 auto}
.intro p + p{margin-top:18px}
.intro .eyebrow{margin-bottom:20px}
/* LEAD BLOCK — the first statement section on a page. No eyebrow; the
   heading itself carries the brand colour instead of a label above it. */
.intro.lead .eyebrow{display:none}
.intro.lead h1,.intro.lead h2{color:var(--accent)}
.intro .acts{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ARTISTREE STRUCTURE 2 — full-bleed image bands. ANJO keeps a 1240px cage with
   gutters either side; the live Artistree site runs imagery edge to edge. */
.bleed{width:100%;position:relative}
.bleedimg{width:100%;min-height:clamp(360px,56vw,640px);background-size:cover;background-position:center}
.bleedsplit{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(400px,48vw,620px)}
.bleedsplit .im{background-size:cover;background-position:center}
.bleedsplit .tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,96px)}
.bleedsplit .tx h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.bleedsplit .tx p{color:var(--muted);font-size:16px;max-width:46ch}
.bleedsplit .tx .acts{margin-top:28px}
.bleedsplit.oncream{background:var(--cream)}
.bleedsplit.ondark{background:var(--dark);color:#fff}
.bleedsplit.ondark h2{color:#fff}
.bleedsplit.ondark p{color:rgba(255,255,255,.74)}


/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(82vh,720px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,8,.86) 0%,rgba(8,10,8,.34) 52%,rgba(8,10,8,.1) 100%)}
.hero .inner{position:relative;z-index:2;padding-bottom:64px;padding-top:100px;width:100%}
.hero h1{font-size:clamp(42px,6.4vw,84px);font-weight:200;letter-spacing:-.03em;line-height:1}
.hero .sub{font-family:var(--display);font-size:clamp(19px,2.1vw,26px);font-weight:300;margin-top:18px;color:rgba(255,255,255,.94);max-width:600px;line-height:1.24}
.hero .htxt{font-size:16px;max-width:520px;margin-top:16px;color:rgba(255,255,255,.8)}
.hero .ctas{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero .eyebrow{color:rgba(255,255,255,.78)}

/* ---------- TWO BIG CARDS (Residential / Commercial) ---------- */
.bcards{display:grid;grid-template-columns:1fr 1fr;gap:0}
.bcard{position:relative;overflow:hidden;min-height:clamp(420px,46vw,600px);display:flex;align-items:flex-end;color:#fff;cursor:pointer}
.bcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease}
.bcard:hover .bg{transform:scale(1.04)}
/* strong scrim: these cards sit over bright daylight shots, so a light
   gradient leaves the copy unreadable on the sunnier of the two */
.bcard::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,6,.94) 0%,rgba(6,8,6,.72) 30%,rgba(6,8,6,.16) 78%,rgba(6,8,6,.05) 100%)}
.bcard .c{position:relative;z-index:2;padding:clamp(30px,3.4vw,52px)}
.bcard h3{font-size:clamp(30px,3.4vw,44px);font-weight:200}
.bcard p{font-size:15.5px;color:rgba(255,255,255,.85);margin-top:14px;max-width:42ch}
.bcard .go{margin-top:22px;font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;gap:9px;align-items:center}

/* ---------- PROOF BAR ---------- */
/* RECOGNITION BAR — lifted from ANJO’s "Recognized in the Field" block:
   dark band, white cards in an auto-fit grid, tick / heading / body / source. */
.hfsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.hfstep{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:30px 26px}
.hfstep .n{font-family:var(--display);font-size:40px;color:var(--accent);font-weight:300;line-height:1}
.hfstep h3{font-family:var(--display);font-size:20px;font-weight:400;margin:12px 0 8px}
.hfstep p{font-size:13.5px;color:var(--muted);line-height:1.62}
.hfstep .src{margin-top:10px;font-size:11.5px;color:var(--muted);font-style:italic}
/* the cards sit on the dark band but are light themselves, so they have to
   win back the band’s white type colours */
.band .hfstep h3{color:var(--ink)}
.band .hfstep p{color:var(--muted)}

/* ---------- SHOWCASE (full-bleed alternating project rows) ---------- */
.showcase{position:relative;min-height:clamp(380px,44vw,560px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;cursor:pointer}
.showcase .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease}
.showcase:hover .bg{transform:scale(1.04)}
.showcase::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,6,.8),rgba(6,8,6,.02) 62%)}
.showcase .c{position:relative;z-index:2;padding:clamp(28px,3vw,46px);width:100%;max-width:var(--wrap);margin:0 auto}
.showcase h3{font-size:clamp(26px,3vw,38px);font-weight:200}
.showcase .meta{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:9px}
.showrow{display:grid;grid-template-columns:1fr 1fr;gap:0}

/* ---------- GRIDS ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.col h3{font-size:22px;margin-bottom:12px}
.col p{color:var(--muted);font-size:15px}

/* offer rows (what we build / what we do) */
.orow{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.orow:first-of-type{border-top:1px solid var(--line)}
.orow h4,.orow h3,.orow h2{font-size:24px}
.orow .sub{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:9px}
.orow p{color:var(--muted);font-size:15.5px}
.orow p .ev{color:var(--ink-2)}

/* narrative steps — deliberately lighter than a process table */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.step .n{font-family:var(--display);font-size:34px;font-weight:200;color:var(--accent);line-height:1;margin-bottom:14px}
.step h4,.step h3,.step h2{font-size:19px;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--muted)}

/* dark band */
.band{background:var(--dark);color:#e8e4dc}
/* image-backed closing band — ANJO pattern */
.band.img{position:relative;background:var(--dark);overflow:hidden}
.band.img>.bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.band.img>.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,10,.62) 0%,rgba(10,12,10,.74) 60%,rgba(10,12,10,.86) 100%)}
.band.img>.intro,.band.img>.wrap{position:relative;z-index:2}
.band h1,.band h2,.band h3,.band h4{color:#fff}
.band p{color:rgba(255,255,255,.72)}
.band .orow{border-color:rgba(255,255,255,.15)}
.band .orow p{color:rgba(255,255,255,.7)}
.band .orow p .ev{color:#fff}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.statband>div{background:var(--paper);padding:28px 18px;text-align:center}
.statband b{display:block;font-family:var(--display);font-size:34px;font-weight:200;color:var(--ink)}
.statband span{display:block;font-family:var(--label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:600}
.band .statband{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.band .statband>div{background:var(--dark)}
.band .statband b{color:#fff}
.band .statband span{color:#a9a397}

/* press strip */
.presslabel{font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:20px}
.pressrow{display:flex;gap:46px;align-items:center;flex-wrap:wrap}
.pressrow img{height:22px;width:auto;max-width:190px;object-fit:contain;filter:grayscale(1);opacity:.5;transition:opacity .25s}
.pressrow img:hover{opacity:.82}
/* neutral plate for an outlet whose logo file we do not have yet */
.pcard .plogo{height:26px;width:auto;max-width:190px;color:var(--ink);opacity:.9}
.pcard .plogo.tall{height:46px}
.pressrow .plogo{height:22px;width:auto;max-width:170px;color:var(--ink);opacity:.45;transition:opacity .25s}
.pressrow .plogo:hover{opacity:.85}
.pressrow .slot{height:22px;display:flex;align-items:center;padding:0 14px;border:1px dashed var(--line);font-family:var(--label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b3aea5;font-weight:600;white-space:nowrap}

/* legacy patterns retained by the untouched views */
.hero .kick{font-family:var(--label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:18px}
.ehero{position:relative;background:linear-gradient(180deg,#f8f6f0,#f1eee6);overflow:hidden}
.ehero .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;min-height:430px}
.ehero .txt{padding:92px 0}
.ehero h1{font-size:clamp(38px,5.2vw,66px);font-weight:200;letter-spacing:-.03em;color:var(--ink)}
.ehero .txt p.sub{font-family:var(--display);font-size:22px;font-weight:300;margin-top:14px;color:var(--ink-2);max-width:430px;line-height:1.3}
.ehero .txt p.body{margin-top:18px;color:var(--muted);font-size:15.5px;max-width:440px}
.ehero .img{align-self:stretch;background-size:cover;background-position:center;min-height:430px;margin-right:calc((100vw - var(--wrap))/-2)}
@media(max-width:1300px){.ehero .img{margin-right:calc(var(--gut) * -1)}}
@media(max-width:1000px){
  .ehero .grid{grid-template-columns:1fr;gap:0}
  .ehero .txt{padding:66px 0 38px}
  .ehero .img{margin-right:calc(var(--gut) * -1);margin-left:calc(var(--gut) * -1);min-height:300px}
}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.6vw,44px);max-width:640px}
.sec-head p{color:var(--muted);font-size:15px;max-width:380px}
.secnum{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.secnum.onDark{color:var(--accent-dim)}
.rule{width:46px;height:1px;background:var(--ink);opacity:.4;margin:22px 0}
.slist{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:70px 1fr 1.35fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.srow .n{font-family:var(--display);font-size:17px;color:var(--accent);padding-top:4px}
.srow h4,.srow h3,.srow h2{font-size:22px}
.srow .dur{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.srow p{color:var(--muted);font-size:15px}
.srow p .ev{color:var(--ink-2)}
.band .slist{border-top-color:rgba(255,255,255,.15)}
.band .srow{border-bottom-color:rgba(255,255,255,.15)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tile{position:relative;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff}
.tile .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s}
.tile:hover .bg{transform:scale(1.05)}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,6,.84),transparent 66%)}
.tile .c{position:relative;z-index:2;padding:26px}
.tile h4,.tile h3,.tile h2{font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tile p{font-size:14px;color:rgba(255,255,255,.83);margin-top:8px;line-height:1.5}
.ptile:hover .bg{transform:scale(1.05)}
.ptile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,6,.82),rgba(6,8,6,.02) 60%)}
.ptile .c{position:relative;z-index:2;padding:24px}
.ptile h4,.ptile h3,.ptile h2{font-size:23px;font-family:var(--display);font-weight:300;letter-spacing:-.01em;text-transform:none}
.ptile .meta{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:7px}
.ptile .tag{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--label);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(252,251,247,.93);color:var(--ink);padding:5px 10px}
.values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.val{padding:32px 26px 32px 0;border-right:1px solid var(--line)}
.val:last-child{border-right:none}
.val b{font-family:var(--display);font-size:20px;font-weight:300;display:block;margin-bottom:9px}
.val p{font-size:13.5px;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px}
.tmem .ph{aspect-ratio:1/1;background:var(--cream-2);background-size:cover;background-position:center;margin-bottom:16px}
.tmem .role{font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.tmem h4,.tmem h3,.tmem h2{font-size:21px;margin-bottom:9px}
.tmem p{font-size:13.5px;color:var(--muted);line-height:1.6}
.pcard{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:210px 1fr 150px;gap:30px;align-items:start}
.pcard:last-of-type{border-bottom:1px solid var(--line)}
.pcard .out{font-family:var(--display);font-size:21px;font-weight:300}
.pcard .dt{font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:600}
.pcard h4,.pcard h3,.pcard h2{font-size:19px;margin-bottom:9px}
.pcard p{font-size:14.5px;color:var(--muted)}
.pcard .act{text-align:right}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scard{border:1px solid var(--line);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.scard .ph{aspect-ratio:4/3;background-size:cover;background-position:center}
.scard .c{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.scard h4,.scard h3,.scard h2{font-size:21px}
.scard .loc{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.scard p{font-size:14px;color:var(--muted);flex:1}
.scard .specs{font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:11px}
.scard .acts{display:flex;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap}
.formgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:54px;align-items:start}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--sans);font-size:14.5px;padding:13px 14px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld .hint{font-size:12.5px;color:var(--muted);margin-top:7px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fside{border:1px solid var(--line);padding:28px;background:#fff}
.fside h4,.fside h3,.fside h2{font-size:19px;margin-bottom:11px}
.fside p{font-size:14px;color:var(--muted)}
.fside .ct{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.95}
.fside .ct b{font-family:var(--display);font-weight:400}
.quote{background:var(--cream);padding:28px;margin-top:24px}
.quote p{font-family:var(--display);font-size:21px;font-weight:300;line-height:1.4}
.quote span{font-size:12.5px;color:var(--muted);display:block;margin-top:12px}
/* PROJECT GRID — all 18 projects on one page, three up. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ptile{position:relative;min-height:clamp(260px,24vw,340px);overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;color:#fff}
.ptile .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ptile:hover .bg{transform:scale(1.05)}
.ptile .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,8,.68) 0%,rgba(8,10,8,.30) 17%,rgba(8,10,8,0) 44%)}
.ptile .c{position:relative;z-index:2;padding:18px 24px 16px;width:100%}
.ptile h3{font-size:24px;font-weight:300}
.ptile .meta{font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:8px;font-weight:600}
.specgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.specgrid>div{background:var(--paper);padding:24px 16px}
.specgrid span{display:block;font-family:var(--label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.specgrid b{font-family:var(--display);font-size:22px;font-weight:300}
.imgrow{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.imgrow div{background-size:cover;background-position:center;min-height:420px}
.pdhero{position:relative;min-height:560px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.pdhero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.pdhero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,6,.82),rgba(6,8,6,.05) 66%)}
.pdhero .inner{position:relative;z-index:2;padding-bottom:56px;width:100%}
.pdhero h1{font-size:clamp(38px,5.4vw,72px);font-weight:200}
.pdhero .loc{font-family:var(--label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:16px}
.pdhero .type{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:12px}
.acc .arow{border-top:1px solid var(--line);padding:18px 0;cursor:pointer}
.acc .arow:last-child{border-bottom:1px solid var(--line)}
.acc .q{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;font-weight:600}
.acc .pm{color:var(--accent);font-size:19px;transition:transform .3s;line-height:1}
.acc .a{font-size:14.5px;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .34s ease}
.acc .arow.open .a{max-height:520px;margin-top:12px}
.acc .arow.open .pm{transform:rotate(45deg)}

/* team headshot still to come */
.tmem .ph.tbd{display:flex;align-items:center;justify-content:center;background:var(--cream-2)}
.tmem .ph.tbd span{font-family:var(--display);font-size:38px;font-weight:200;color:var(--accent-dim);letter-spacing:.04em}

/* press card awaiting verification */
.pcard.review{background:#fdf9f0;border-left:3px solid #c9a227;padding-left:22px;margin-left:-22px}
.rflag{display:inline-block;margin-top:10px;font-family:var(--label);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a651a;background:#f6e9c9;padding:4px 9px}

/* checkbox / option groups on the contact form */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:4px}
.checks label{display:flex;gap:9px;align-items:flex-start;font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer;margin:0}
.checks input{width:15px;height:15px;margin-top:2px;flex:none;accent-color:var(--accent)}
@media(max-width:700px){.checks{grid-template-columns:1fr}}

/* review markers */
.draft{border:1px dashed #b8892a;background:#fdf8ec;padding:15px 19px;margin-bottom:26px;display:flex;gap:13px;align-items:flex-start}
.draft b{font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a651a;font-weight:700;white-space:nowrap;padding-top:2px}
.draft p{font-size:13px;color:#7a5c22;margin:0}
.band .draft{background:rgba(255,255,255,.07);border-color:rgba(214,170,86,.55)}
.band .draft b{color:#dcb872}
.band .draft p{color:rgba(233,215,178,.9)}
.pn{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--accent-deep);background:rgba(160,112,80,.08);border:1px solid rgba(160,112,80,.24);padding:7px 14px;margin-top:16px}

/* ---------- Buildertrend embed (contact) ----------
   A cross-origin iframe. Its typeface, colours and field list live inside
   Buildertrend and cannot be reached from this stylesheet — all we control is
   the box it sits in. .btstand is the stand-in that shows wherever the frame
   cannot load (this prototype's sandbox blocks buildertrend.net); it is
   swapped out for the real frame the moment the frame reports a live origin. */
.btsolo{max-width:940px;margin:0 auto}
.btwrap{position:relative;border:1px solid var(--line);background:#ebebeb;min-height:1320px}
.btwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.btwrap.btlive iframe{display:block}
.btwrap.btlive .btstand{display:none}
.btstand{padding:22px}
.btstand .bnote{border:1px dashed #b8892a;background:#fdf8ec;padding:12px 15px;margin-bottom:22px}
.btstand .bnote b{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a651a;margin-bottom:5px}
.btstand .bnote p{font-size:12.5px;color:#7a5c22;margin:0;line-height:1.6}
/* Buildertrend's own rendering: system sans, light grey ground, white inputs,
   red required stars, black submit. Reproduced, not restyled — this is what
   the embed will actually look like beside our type. */
.btform{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.btform .bfld{margin-bottom:16px}
.btform .bfld span{display:block;font-size:15px;line-height:1.3;color:#3d3d3d;margin-bottom:6px;letter-spacing:0;text-transform:none;font-weight:400}
.btform .bfld span i{color:#d33;font-style:normal;margin-left:4px}
.btform .bbox{height:38px;border:1px solid #ced4da;border-radius:5px;background:#fff;display:flex;align-items:center;padding:0 12px}
.btform .bbox.ta{height:150px;align-items:flex-start;padding-top:9px}
.btform .bbox.bsel{position:relative;padding-right:30px}
.btform .bbox.bsel::after{content:'';position:absolute;right:12px;top:16px;border:5px solid transparent;border-top-color:#444}
.btform .bbox em{font-style:normal;font-size:15px;color:#212529}
.btform .bbtn{display:inline-block;font-size:15px;color:#fff;background:#000;border-radius:3px;padding:11px 28px;margin-top:6px}
.btform .bcap{font-size:11px;color:#555;margin-top:14px;line-height:1.5}
.btform .bcap u{color:#0645ad}
@media(max-width:820px){.btwrap{min-height:1400px}}
/* the embed is four times the height of the sidebar, so the sidebar follows */
.formgrid > div:last-child{position:sticky;top:110px;align-self:start}
@media(max-width:1000px){.formgrid > div:last-child{position:static}}

/* ---------- form status line (glamping) ---------- */
.fmsg{font-size:13.5px;margin-top:14px;min-height:1px}
.fmsg.ok{color:#2c4529}
.fmsg.err{color:#8a2b1c}
.fdone{text-align:center;padding:26px 6px}
.fdone h4,.fdone h3,.fdone h2{font-size:24px;margin-bottom:10px}
.fdone p{font-size:14.5px;color:var(--muted)}

/* ---------- glamping hero ----------
   Half the height of every other hero on the site: this page exists to collect
   an email at a trade show, so the form has to be close to the fold. The
   heading steps down with it, and the top padding still clears the sticky
   header (91px desktop / 75px below 1000px). */
#v-glamping .hero{min-height:min(41vh,360px)}
#v-glamping .hero h1{font-size:clamp(32px,4.2vw,56px)}
#v-glamping .hero .inner{padding-top:96px;padding-bottom:44px}
@media(max-width:1000px){
  #v-glamping .hero{min-height:280px}
  #v-glamping .hero .inner{padding-top:84px;padding-bottom:34px}
}

/* footer */
footer{background:var(--dark);color:#a9a397;padding:78px 0 34px}
footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:42px}
footer .flogo img{height:56px;margin-bottom:20px}
footer p{font-size:13.5px;line-height:1.75}
footer h5{font-family:var(--label);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#dcd3c3;margin-bottom:16px;font-weight:600}
footer a{display:block;font-size:13.5px;padding:6px 0;cursor:pointer;transition:color .2s}
footer a:hover{color:#fff}
footer .legal{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:20px;font-size:12px;flex-wrap:wrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  :root{--gut:22px}
  nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 22px 16px;display:none;box-shadow:0 20px 40px rgba(0,0,0,.09)}
  nav.open{display:flex}
  .logo img{height:46px}
  nav a{padding:13px 0;font-size:12px}
  nav a::after{display:none}
  .mobonly{display:block}
  .menuBtn{display:block}
  .hcta .btn{display:none}
  section{padding:78px 0}
  .bcards,.bleedsplit,.showrow{grid-template-columns:1fr}
  .bleedsplit .im{min-height:300px}
  .hfsteps{grid-template-columns:1fr}
  .two-col,.three-col{grid-template-columns:1fr;gap:34px}
  .four-col,.steps{grid-template-columns:1fr 1fr;gap:28px}
  .orow{grid-template-columns:1fr;gap:10px}
  .srow{grid-template-columns:1fr;gap:8px}
  .pgrid{grid-template-columns:1fr}
  .ptile{min-height:280px}
  .tiles{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .sgrid{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr;gap:34px}
  .values{grid-template-columns:1fr 1fr}
  .val{border-bottom:1px solid var(--line);padding-right:20px}
  .statband,.specgrid{grid-template-columns:1fr 1fr}
  .imgrow{grid-template-columns:1fr}
  .imgrow div{min-height:280px}
  .pcard{grid-template-columns:1fr;gap:10px}
  .pcard .act{text-align:left}
  footer .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .hero{min-height:560px}
  .hero .inner{padding-top:64px;padding-bottom:48px}
}
@media(max-width:560px){
  .tgrid,.four-col,.steps{grid-template-columns:1fr}
  .statband,.specgrid,.values{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
}

:root{
--i-stay_hero:url("/assets/img/stay_hero.webp");
--i-pv_show:url("/assets/img/pv_show.webp");
--i-playaviva:url("/assets/img/playaviva.webp");
--i-card_kodama:url("/assets/img/card_kodama.webp");
--i-card_spyglass:url("/assets/img/card_spyglass.webp");
--i-card_strata:url("/assets/img/card_strata.webp");
--i-card_terra:url("/assets/img/card_terra.webp");
--i-canopy:url("/assets/img/canopy.jpg");
--i-chs:url("/assets/img/chs.jpg");
--i-cta_bridge:url("/assets/img/cta_bridge.jpg");
--i-cta_team:url("/assets/img/cta_team.jpg");
--i-deepwoods:url("/assets/img/deepwoods.jpg");
--i-detail:url("/assets/img/detail.jpg");
--i-forest:url("/assets/img/forest.jpg");
--i-home_hero:url("/assets/img/home_hero.webp");
--i-hero_spyglass:url("/assets/img/hero_spyglass.jpg");
--i-hs_alex:url("/assets/img/hs_alex.jpg");
--i-hs_amy:url("/assets/img/hs_amy.jpg");
--i-hs_chandra:url("/assets/img/hs_chandra.jpg");
--i-hs_jeff:url("/assets/img/hs_jeff.jpg");
--i-hs_will:url("/assets/img/hs_will.jpg");
--i-leaf:url("/assets/img/leaf.jpg");
--i-malibu_ext:url("/assets/img/malibu_ext.jpg");
--i-malibu_int:url("/assets/img/malibu_int.jpg");
--i-monarch:url("/assets/img/monarch.jpg");
--i-com_hero:url("/assets/img/com_hero.webp");
--i-onera_hero:url("/assets/img/onera_hero.jpg");
--i-anjo_suncatcher:url("/assets/img/anjo_suncatcher.webp");
--i-onera_unit:url("/assets/img/onera_unit.jpg");
--i-render:url("/assets/img/render.jpg");
--i-zenova:url("/assets/img/zenova.webp");--i-treehouse:url("/assets/img/treehouse.jpg");
--i-yoki:url("/assets/img/yoki.jpg");
--i-yoki_int:url("/assets/img/yoki_int.jpg");
  --i-res_hero:url("/assets/img/res_hero.webp");
  --i-phil_hero:url("/assets/img/phil_hero.webp");
  --i-home_res:url("/assets/img/home_res.jpg");
  --i-home_com:url("/assets/img/home_com.jpg");
  --i-hs_cedric:url("/assets/img/hs_cedric.jpg");
  --i-hs_nick:url("/assets/img/hs_nick.jpg");
  --i-hs_forest:url("/assets/img/hs_forest.jpg");
  --i-hs_michael:url("/assets/img/hs_michael.jpg");
}
/* ---------- RECOGNITION BAR ----------
   Recreated exactly from ANJO (anjohomes.com): same label, same nine logos,
   same order, same styling. Replaces the old 'Featured in' press strip.
   Declared after the legacy .presslabel rule so the bar matches ANJO. */
.presslabel{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:20px}
.presslogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 48px}
.presslogos img{height:24px;width:auto;object-fit:contain;filter:brightness(0);opacity:.45;transition:opacity .2s ease}
.presslogos img.badge{height:44px;filter:none;opacity:.85}
.presslogos img:hover{opacity:.8}
.presslogos img.badge:hover{opacity:1}
@media(max-width:820px){.presslogos{gap:28px 32px}.presslogos img{height:20px}.presslogos img.badge{height:39px}}

/* Recognition bar sits between the full-bleed philosophy split and the dark
   CTA band, so it needs symmetric room rather than ANJO’s tight 4px/44px,
   which suited a different neighbour. */
.recbar{padding-top:96px;padding-bottom:96px}
@media(max-width:820px){.recbar{padding-top:60px;padding-bottom:60px}}

/* ---------- ROUND-2 SPACING ---------- */
/* Closing CTA band: taller and airier than the 118px default section rhythm. */
.band.img.tight{padding-top:120px;padding-bottom:120px}
.band.img.tight .intro h2{margin-bottom:20px}
.band.img.tight .intro .acts{margin-top:44px}
@media(max-width:1000px){.band.img.tight{padding-top:86px;padding-bottom:86px}}

/* Footer: same layout, less height and tighter gaps between items. */
footer{padding:54px 0 26px}
footer .fgrid{gap:30px}
footer .flogo img{height:44px;margin-bottom:14px}
footer p{font-size:13px;line-height:1.6}
footer h5{margin-bottom:11px}
footer a{font-size:13px;padding:3px 0}
footer .legal{margin-top:34px;padding-top:16px;font-size:11.5px}

/* The recognition bar now sits directly under the studio statement, as proof
   for it. Its old 96px top padding stacked on the intro section’s 118px
   bottom padding and left a ~214px void, so the pair is rebalanced: tight
   above (attached to the statement), roomy below (separated from the cards). */
.introsec{padding-bottom:48px}
.recbar{padding-top:0;padding-bottom:104px}
@media(max-width:820px){.introsec{padding-bottom:34px}.recbar{padding-top:0;padding-bottom:68px}}

/* The Third-party proof band now closes the Press page, and it is the same
   dark as the footer — without a rule the two merge into one slab and the
   footer stops reading as a footer. Invisible where a light section sits
   above instead, since that edge is already a hard contrast boundary. */
footer{border-top:1px solid rgba(255,255,255,.14)}
.band + footer{border-top-color:rgba(255,255,255,.16)}

/* ---------- PROJECT FACT ROW ----------
   Replaces the 5-up .specgrid. That grid gave a long string ("Sonoma County,
   California") the same fifth-of-the-width cell as a four-digit year and set
   it in 22px display type, so it wrapped badly on every project. Location and
   Type already sit in the hero, so the row now carries only Year / Square feet
   / Host trees — value first, label under it, hairline rules between. */
.specrow{display:flex;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:38px 0;margin:0 auto;max-width:780px}
.specrow .sp{flex:1 1 0;min-width:150px;text-align:center;padding:4px 26px;
  border-left:1px solid var(--line)}
.specrow .sp:first-child{border-left:none}
.specrow .sp b{display:block;font-family:var(--display);font-size:34px;
  font-weight:300;line-height:1.1;color:var(--ink)}
.specrow .sp span{display:block;font-family:var(--label);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin-top:12px}
@media(max-width:640px){
  .specrow{padding:26px 0}
  .specrow .sp{padding:12px 14px;min-width:33%}
  .specrow .sp b{font-size:25px}
  .specrow .sp span{font-size:8.5px;margin-top:8px}
}

/* ---------- PROJECT GALLERY ----------
   Masonry columns so portrait and landscape frames sit together without
   cropping. Images are separate published files, lazily loaded. */
.galsec{padding-top:0}
.galhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-bottom:28px}
.galhead .ct{font-family:var(--label);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.galgrid{columns:3;column-gap:14px}
.galgrid figure{break-inside:avoid;margin:0 0 14px;overflow:hidden;
  cursor:zoom-in;background:var(--cream);position:relative}
.galgrid img{width:100%;display:block;transition:transform .6s ease}
.galgrid figure:hover img{transform:scale(1.04)}
@media(max-width:900px){.galgrid{columns:2}}
@media(max-width:560px){.galgrid{columns:1}}

/* lightbox */
.lbx{position:fixed;inset:0;background:rgba(14,13,10,.94);z-index:400;
  display:none;align-items:center;justify-content:center;padding:44px}
.lbx.open{display:flex}
.lbx img{max-width:92vw;max-height:88vh;object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lbx .x{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;font-weight:200;opacity:.8}
.lbx .x:hover{opacity:1}
.lbx .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;
  height:52px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;
  font-size:30px;line-height:1;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .2s;user-select:none}
.lbx .nav:hover{background:rgba(255,255,255,.28)}
.lbx .nav.p{left:24px}.lbx .nav.n{right:24px}
.lbx .cnt{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.62);font-family:var(--label);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase}
@media(max-width:640px){.lbx{padding:16px}.lbx .nav{width:42px;height:42px;font-size:24px}
  .lbx .nav.p{left:8px}.lbx .nav.n{right:8px}}

/* ================= RESPONSIVE PASS =================
   Found by auditing every view at 320–1920. Four real defects:

   1. .bleedsplit never collapsed. It is grid-template-columns:1fr 1fr with no
      mobile rule, so at 320px each column is 160px while .tx alone carries
      96px of padding — the content’s min-width then forced the page wider than
      the viewport. This was the 52px horizontal scroll on Commercial, and the
      same two-up split was being rendered on every other page that uses it.
   2. .draft is a flex row whose label has white-space:nowrap, which cannot fit
      beside its paragraph at 320–360. This was the 59px scroll on Press.
   3. .specrow labels were set at 8.5px — below a readable floor.
   4. .tlink text links render 22–23px tall, too small to tap reliably.
   ==================================================== */

@media(max-width:820px){
  .bleedsplit{grid-template-columns:1fr;min-height:0}
  .bleedsplit .im{min-height:300px;order:-1}
  .bleedsplit .tx{padding:46px var(--gut)}
  .bleedsplit .tx p{max-width:none}
  /* text links need a real tap area on touch screens: 44px minimum */
  .tlink{padding:13px 0}
  .btn.sm{padding:14px 18px}
}
@media(max-width:480px){
  .bleedsplit .im{min-height:220px}
  .bleedsplit .tx{padding:34px var(--gut)}
}

@media(max-width:560px){
  .draft{flex-direction:column;gap:8px}
  .draft b{white-space:normal;padding-top:0}
}

@media(max-width:640px){
  .specrow{padding:24px 0}
  .specrow .sp{flex:1 1 0;min-width:0;padding:10px 6px}
  .specrow .sp b{font-size:23px}
  .specrow .sp span{font-size:10px;letter-spacing:.1em;margin-top:8px}
}
@media(max-width:380px){
  .specrow .sp b{font-size:19px}
  .specrow .sp span{font-size:9.5px;letter-spacing:.05em}
}

/* The 1000px breakpoint takes .pgrid and .sgrid from three columns straight to
   one, so every tablet and small laptop showed a single enormous tile per row.
   These reinstate a two-up step across that range. Declared after the 1000px
   block so they win where both apply. */
@media(min-width:620px) and (max-width:1000px){
  .pgrid,.sgrid{grid-template-columns:1fr 1fr}
}
@media(min-width:820px) and (max-width:1000px){
  .bcards{grid-template-columns:1fr 1fr}
}

/* ---------- DARK SURFACE CONSISTENCY ----------
   Every flat dark surface on the site is var(--dark) #16150f — footer, .band,
   .bleedsplit.ondark ("Rooms to revenue"). The image bands were the odd ones
   out on two counts: their overlay only reached .62–.86 alpha, so the
   photograph lifted them to roughly 30–42 luminance against the flat 22, and
   the overlay was tinted rgba(10,12,10), a cooler hue than --dark. Both are
   corrected here: same hue, deep enough to sit at the same tone, with just
   enough transparency left that the image still registers as texture. */
.band.img>.bg::after{background:linear-gradient(180deg,rgba(22,21,15,.93) 0%,rgba(22,21,15,.95) 55%,rgba(22,21,15,.97) 100%)!important}

/* Two columns whose trailing link must sit on the same baseline even when the
   paragraphs above wrap to different line counts. Character-matching the copy
   only works at one viewport width; pushing the link to the bottom of its
   column works at all of them. */
.two-col.balance > div{display:flex;flex-direction:column}
.two-col.balance .lnk{margin-top:auto;padding-top:24px}
@media(max-width:1000px){.two-col.balance .lnk{padding-top:18px}}

/* ---------- BUILD-TYPE CARDS (Residential) ----------
   Amy’s replacement for the four-row offer list: a photograph per route, so
   the page shows what each one looks like instead of describing it. */
.bcardgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bcard2 .ph{aspect-ratio:4/3;background-size:cover;background-position:center;margin-bottom:16px}
.bcard2 h4,.bcard2 h3,.bcard2 h2{font-size:21px;margin-bottom:9px}
.bcard2 p{font-size:14.5px;color:var(--muted);line-height:1.6}
.bcard2{display:flex;flex-direction:column}
/* the four headings wrap to different depths, so pin the heading box and
   drop the credit to the card’s floor — labels and credits then line up */
@media(min-width:1000px){.bcard2 h4,.bcard2 h3,.bcard2 h2{min-height:2.1em}}
.bcard2 .src{margin-top:auto;padding-top:12px;font-family:var(--label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dim);font-weight:600}
@media(max-width:1000px){.bcardgrid{grid-template-columns:1fr 1fr;gap:26px 20px}}
@media(max-width:560px){.bcardgrid{grid-template-columns:1fr}}

/* ---------- HELP LIST (Residential) ----------
   Replaces the 01-04 step strip. Same four-up rhythm, but each item now
   carries a label line, which the numbered steps had no room for. */
.helpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 54px}
.helpitem h4,.helpitem h3,.helpitem h2{font-size:23px;margin-bottom:7px}
.helpitem .lab{font-family:var(--label);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
.helpitem p{font-size:15px;color:var(--muted)}
@media(max-width:820px){.helpgrid{grid-template-columns:1fr;gap:32px}}

/* ---------- PHILOSOPHY BLOCK ON LEAF GREEN ----------
   Amy: "The white from prior section to the white on right of leaf feels off.
   Maybe box the whole philosophy section in a color from the leaf." #2c4529 is
   sampled from the leaf’s mid-tone; white on it measures about 10:1. */
.bleedsplit.onleaf{background:#2c4529;color:#fff}
.bleedsplit.onleaf h2{color:#fff}
.bleedsplit.onleaf p{color:rgba(255,255,255,.82)}
.bleedsplit.onleaf .eyebrow{color:#cddac0}
.bleedsplit.onleaf .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

/* ---------- COMMERCIAL PROOF ROWS WITH IMAGERY ----------
   Amy: "I assume all of these will have photos... next to the words, not
   separate from them?" The 2x2 showcase grid below repeated four of these
   five projects, so it goes; the imagery now sits with the claim it proves. */
.prow{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:38px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:center}
.prow:first-of-type{border-top:1px solid var(--line)}
.prow .im{aspect-ratio:4/3;background-size:cover;background-position:center}
.prow h4,.prow h3,.prow h2{font-size:24px}
.prow .sub{font-family:var(--label);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-top:9px;font-weight:600}
/* Amy: the subcopy must not alternate between two greys. The .ev span still
   marks the evidence sentence for anyone reading the markup, but it no
   longer prints differently. */
.prow p{color:var(--ink-2);font-size:15.5px;margin-top:14px}
.prow p .ev{color:inherit}
@media(max-width:820px){.prow{grid-template-columns:1fr;gap:18px}
  .prow .im{max-height:260px}}

/* ---------------------------------------------------------------------
   PHOTOGRAPHY AS CONTENT
   Every photo used to be a CSS background: no alt text, invisible to
   screen readers and to image search. Each .bg/.im/.ph now holds a real
   <img>. The wrapper keeps its positioning, transforms and gradient
   ::after overlay, so nothing about the layout changes.
   --------------------------------------------------------------------- */
.im,.ph{position:relative;overflow:hidden}
.bg>img,.im>img,.ph>img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center;
  border:0;margin:0;max-width:none}
/* The gradient overlays are ::after on the wrapper, so they already paint
   above the image. This keeps that true if an img ever gets a z-index. */
.hero .bg::after,.band.img>.bg::after,.ptile .bg::after,.pdhero .bg::after{z-index:1}

/* ---------------------------------------------------------------------
   GALLERY — restored 25 Sep. The earlier package dropped this section
   because the image files did not exist yet; 143 of them now do.
   --------------------------------------------------------------------- */
.galsec{padding-top:0}
.galhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.galhead h2{font-size:clamp(26px,3vw,38px)}
.galhead .ct{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.galgrid{columns:3;column-gap:14px}
.galgrid figure{break-inside:avoid;margin:0 0 14px;overflow:hidden;cursor:zoom-in;background:var(--cream);position:relative}
.galgrid img{width:100%;display:block;transition:transform .6s ease}
.galgrid figure:hover img{transform:scale(1.04)}
@media(max-width:1000px){.galgrid{columns:2}}
@media(max-width:620px){.galgrid{columns:1}}

/* lightbox */
.lbx{position:fixed;inset:0;background:rgba(14,13,10,.94);z-index:400;display:none;align-items:center;justify-content:center;padding:44px}
.lbx.open{display:flex}
.lbx img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lbx .x{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;line-height:1;cursor:pointer;font-weight:200;opacity:.8}
.lbx .x:hover{opacity:1}
.lbx .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;user-select:none}
.lbx .nav:hover{background:rgba(255,255,255,.28)}
.lbx .nav.p{left:24px}
.lbx .nav.n{right:24px}
.lbx .cnt{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.62);font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:700px){
  .lbx{padding:16px}
  .lbx .nav{width:42px;height:42px;font-size:24px}
  .lbx .nav.p{left:8px}
  .lbx .nav.n{right:8px}
}

/* Outlet logos on the press cards are white-filled SVG files (they were drawn
   for a dark bar). The homepage strip forces them black with a filter; the
   press cards need the same or they render invisible on cream. */
.pcard img.plogo{height:26px;width:auto;max-width:190px;object-fit:contain;filter:brightness(0);opacity:.82}

/* ---- SIGNUP FORM (/glamping/) ---------------------------------------
   The Mailchimp embed was generated with "Remove CSS styles" on, so the
   form carries no styling of its own and picks these up instead. 16px on
   the inputs is deliberate: anything smaller and iOS zooms the page in
   when the field takes focus, which is exactly the wrong thing to happen
   to someone filling this in on a phone at a trade-show booth. */
.gform{display:flex;flex-direction:column}
.gform label{font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:18px;margin-bottom:6px}
.gform label:first-of-type{margin-top:0}
.gform input[type=text],.gform input[type=email]{font-family:inherit;font-size:16px;line-height:1.3;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:13px 14px;width:100%;transition:border-color .2s ease}
.gform input[type=text]:focus,.gform input[type=email]:focus{outline:none;border-color:var(--ink)}
.gform button{margin-top:24px;width:100%;justify-content:center}
/* The two brochure buttons carry long labels; .btn is nowrap by default,
   which pushed "Artistree Home — Company Overview" off the side of a
   390px phone. These wrap instead. */
.fside .btn[download]{white-space:normal;text-align:center;line-height:1.8;padding:13px 18px}

/* proxima-nova is the real label face; Montserrat was the stand-in while the
   prototype could not load Adobe Fonts. Montserrat stays behind it, so a
   Typekit outage falls back to what the site has looked like all along
   rather than to a system sans. */
:root{--label:'proxima-nova','Montserrat','Open Sans',Helvetica,Arial,sans-serif}

/* Footer links are 13.5px with 6px of padding, which makes a 28px tap target
   stacked directly against its neighbours. That clears WCAG 2.2 AA (24px)
   but not the 44px both Apple and Google ask for, and on a phone the footer
   is where people reach for Contact and Press with a thumb. Taller on small
   screens only — on desktop these are mouse targets and the tighter rhythm
   reads better. */
@media(max-width:1000px){
  footer a{padding:10px 0}
  footer .fgrid{gap:34px}
}

/* The underlined text links ("Read our philosophy →", "See the project →")
   are 11px type with a 4px underline gap, which lands at 22px — just under
   the 24px minimum in WCAG 2.2 AA 2.5.8. They are standalone calls to
   action rather than links inside a sentence, so the inline exemption does
   not cover them. This grows the hit area above and below without moving
   anything on the page, so the underline stays exactly where it was. */
.tlink{position:relative}
.tlink::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-3px}

/* Second heading inside a footer column needs air above it; the first one
   sits against the column top and has none. */
footer h5.fmore{margin-top:26px}