/* Red Earth — phones & tablets (Option B "Fold", agreed 28 Sep 2026). Touch screens only (pointer:coarse): laptops and
   desktops are untouched at any window size. Loads last on every page. Scope a rule to one page by its own classes. */
@media(max-width:1100px) and (pointer:coarse){
.container{padding-left:clamp(24px,5vw,48px)!important;padding-right:clamp(24px,5vw,48px)!important}
header.site .bar{padding:14px clamp(24px,5vw,48px)!important;transition:none!important}
header.site.scrolled .bar{padding-top:10px!important;padding-bottom:10px!important}
.brand-lock .logo{height:68px!important;transition:none!important}
header.site.scrolled .brand-lock .logo{height:52px!important}
.hero{margin-top:97px!important}
.svc .desc{font-size:17px!important;line-height:1.6!important;color:#D3CCC2!important}
.bodycorp .bc-lede{font-size:17px!important;line-height:1.6!important}
.bc-caps .ci p,.bodycorp .bc-caps .ci p{font-size:16px!important;line-height:1.6!important}
.bodycorp .bc-process .bc-caps .ci p{font-size:15.5px!important;line-height:1.55!important}
.bc-process .bc-ph p{font-size:15.5px!important}
.bc-process .bc-steps .ci .n{font-size:11px!important}
/* credentials: ragged wrapped line → an even grid with its labels back */
.creds-band--line .container{padding-top:0!important;padding-bottom:0!important}
.creds-band--line .hero-creds{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;align-items:stretch!important}
.creds-band--line .hero-creds .c{display:block!important;white-space:normal!important;padding:18px 16px 18px 0;border-left:1px solid var(--line-on-dark)}
.creds-band--line .hero-creds .c:not(:first-child){padding-left:16px}
.creds-band--line .hero-creds .c:first-child{border-left:0}
.creds-band--line .hero-creds .c:after{display:none!important}
.creds-band--line .hero-creds .k{display:block!important;font-size:10.5px!important;letter-spacing:.14em;color:var(--stone)!important;white-space:nowrap}
.creds-band--line .hero-creds .v{margin-top:6px!important;font-size:14.5px!important;line-height:1.35!important;color:var(--sand)!important;white-space:normal!important;text-wrap:balance!important}
.creds-band--line .hero-creds .v b{font-size:14.5px!important;color:var(--paper)!important}
@media(max-width:700px) and (pointer:coarse){
.creds-band--line .hero-creds{grid-template-columns:1fr 1fr}
.creds-band--line .hero-creds .c{padding:16px 14px 16px 0!important}
.creds-band--line .hero-creds .c:nth-child(even){padding-left:16px!important;border-left:1px solid var(--line-on-dark)}
.creds-band--line .hero-creds .c:nth-child(odd){border-left:0;padding-left:0!important}
.creds-band--line .hero-creds .c:nth-child(n+3){border-top:1px solid var(--line-on-dark)}
}
.tile .cap{opacity:1!important;transform:none!important}
.tile .cap .t{font-size:16px!important}
.tile .cap .k{font-size:11px!important;color:var(--sand)!important}
footer.site p{font-size:15.5px!important;line-height:1.6!important}
.filters button{font-size:12px!important}
/* story side-by-side on iPad so the photo isn't a 900px wall */
.story .media .cine{max-height:none}
}
@media(min-width:701px) and (max-width:1100px) and (pointer:coarse){
.story .grid{grid-template-columns:1.1fr .9fr!important;gap:44px!important;align-items:start!important}
.story .lead-h{font-size:36px!important}
.services .svc{grid-template-columns:1fr 1.6fr 28px!important;gap:28px!important}
.services .svc .idx{grid-column:1;grid-row:1;display:block;padding:0!important}
.services .svc .name{grid-column:1;grid-row:2;font-size:28px!important;line-height:1.15!important;margin-top:-18px}
.services .svc .desc{grid-column:2;grid-row:1/span 2}
.services .svc .chev{grid-column:3;grid-row:1/span 2;align-self:center}
.gallery{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:260px!important;gap:12px!important}
.bc-process .bc-steps{grid-template-columns:1fr 1fr!important}
}
@media(max-width:700px) and (pointer:coarse){
header.site .bar{padding:12px 24px!important}
header.site.scrolled .bar{padding-top:8px!important;padding-bottom:8px!important}
.brand-lock .logo{height:54px!important}
header.site.scrolled .brand-lock .logo{height:44px!important}
nav.main .btn{padding:11px 16px!important;font-size:14px!important}
.hero{margin-top:79px!important}
section.block:not(.galband){padding-top:72px!important;padding-bottom:72px!important}
section.services.block{padding-top:56px!important}
section.quote.block{padding-top:112px!important;padding-bottom:72px!important}
.lead-h{font-size:32px!important;line-height:1.1!important;text-wrap:balance}
.hero .sub{font-size:17px!important;line-height:1.55!important}
.services .top{margin-bottom:36px!important}
.services .top p{font-size:17px!important}
/* services: drop the 80px index column — number sits above the name, text runs full width */
.svc{grid-template-columns:1fr!important;gap:0!important;padding:28px 36px 28px 0!important}
.svc .idx{grid-column:1!important;grid-row:1!important;padding:0!important;margin-bottom:6px}
.svc .name{grid-column:1!important;grid-row:2!important;font-size:25px!important;line-height:1.2!important}
.svc .desc{grid-column:1!important;grid-row:3!important;margin-top:10px!important}
.svc .chev{top:50px!important}
.story .copy p{font-size:17.5px!important;line-height:1.65!important}
.quote blockquote{font-size:25px!important;line-height:1.3!important;text-wrap:pretty}
.bc-caps .ci h3{font-size:21px!important;line-height:1.2!important}
.bc-process{margin-left:-24px;margin-right:-24px;padding:28px 24px 12px!important}
.bc-ph{flex-direction:column;gap:6px!important;align-items:flex-start!important}
.contact h2{font-size:38px!important;line-height:1.05!important}
.contact .det a{font-size:17px!important;min-height:44px}
form label{font-size:12px!important}
/* footer: logo smaller, Explore + Connect side by side, legal stacked */
.foot-lock .logo{height:96px!important}
footer.site .strata-rule{margin-bottom:40px!important}
footer.site .cols{grid-template-columns:1fr 1fr!important;gap:36px 24px!important}
footer.site .cols>div:first-child{grid-column:1/-1}
footer.site ul{gap:0!important}
footer.site ul a{display:block;padding:10px 0!important;font-size:16px!important}
footer.site .legal{flex-direction:column;gap:6px!important;margin-top:36px!important;font-size:12px!important;line-height:1.6}
}

/* ---- fold: tap-to-open rows on phones (mobile.js adds the classes) ---- */
.svc-go{display:inline-flex;gap:8px;margin-top:14px;font-size:15px;font-weight:600;color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(247,243,237,.3);padding-bottom:4px}
.svc-go:hover{color:var(--paper);border-color:var(--terra-lift)}
.svc.fold .desc{display:block}
@media(min-width:701px){.svc.fold .svc-hd{display:contents}}
@media(min-width:1101px){.svc.fold .idx{grid-column:1;grid-row:1}.svc.fold .name{grid-column:2;grid-row:1}.svc.fold .desc{grid-column:3;grid-row:1}.svc.fold .chev{grid-column:4;grid-row:1}}
@media(max-width:700px) and (pointer:coarse){
.svc.fold{cursor:pointer;padding:0!important}
.svc.fold:hover{padding-left:0!important}
.svc.fold .svc-hd{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;min-height:72px;padding:14px 0;-webkit-tap-highlight-color:transparent}
.svc.fold .idx{margin:0!important;grid-column:auto!important;grid-row:auto!important}
.svc.fold .name{font-size:22px!important;line-height:1.2!important;grid-column:auto!important;grid-row:auto!important}
.svc.fold .chev{position:static!important;font-size:0!important;width:28px;height:28px;display:grid;place-items:center;justify-self:end}
.svc.fold .chev:before{content:"+";font-size:24px;font-weight:300;color:var(--bone-2);transition:transform .25s ease}
.svc.fold.open .chev:before{transform:rotate(45deg);color:var(--terra-lift)}
.svc.fold .desc{display:none;margin:0!important;padding:0 0 26px 34px}
.svc.fold.open .desc{display:block}
/* how we build + how we work: titles as rows, paragraph opens on tap */
.fold-ci{padding:0!important}
.fold-ci h3{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin:0!important;padding:14px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fold-ci h3:after{content:"+";font-size:24px;font-weight:300;color:var(--bone-2);transition:transform .25s ease;flex:none}
.bc-process .fold-ci h3:after{color:var(--stone)}
.fold-ci.open h3:after{transform:rotate(45deg);color:var(--terra-lift)}
.bc-process .fold-ci.open h3:after{color:var(--terra)}
.fold-ci p{display:none;padding-bottom:22px}
.fold-ci.open p{display:block}
.bc-process .fold-ci .n{padding-top:16px;margin-bottom:-12px}
.bc-process .bc-caps .ci{padding-bottom:0!important}
/* gallery: keeps the 2-up mosaic, captions always showing */
.gallery{gap:8px!important;grid-auto-rows:190px!important}
.tile{border-radius:0!important}
.tile .cap{padding:26px 12px 10px!important;flex-direction:column;align-items:flex-start!important;gap:2px}
.tile .cap .t{font-size:15px!important;font-weight:600}
.tile .cap .k{font-size:10.5px!important}
/* crew: three small portraits in a row */
.crew{grid-template-columns:repeat(3,1fr)!important;gap:10px!important;background:none!important}
.crew .fr{aspect-ratio:1/1!important}
.crew figure{padding:0!important}
.crew figcaption{font-size:0!important;padding-top:8px!important}
.crew figcaption b{font-size:14px!important}
.crew figcaption span{font-size:10px!important;letter-spacing:.1em!important}
}

/* ---- other pages: header offsets, readable body copy, folds ---- */
@media(max-width:1100px) and (pointer:coarse){
.brand-lock img{height:68px!important;transition:none!important}
header.site.scrolled .brand-lock img{height:52px!important}
.p-hero{margin-top:97px!important;min-height:calc(82svh - 97px)!important}
.mast{padding-top:calc(32px + 97px)!important}
footer.site img.logo{height:120px!important}
.cell .cap{opacity:1!important;transform:none!important}
.cell .cap .k{font-size:10.5px!important}
.caps .ci p{font-size:16.5px!important;line-height:1.6!important}
.intro .pts p{font-size:16.5px!important;line-height:1.55!important}
.proc .st p{font-size:16px!important;line-height:1.55!important}
.gal figcaption{font-size:11.5px!important}
.switch a .d{font-size:15.5px!important}
.art .body{font-size:16.5px!important;line-height:1.65!important}
.doc-top .meta .v{font-size:15.5px!important}
.doc-contact p{font-size:16.5px!important}
}
@media(min-width:701px) and (max-width:1100px) and (pointer:coarse){
footer.site .cols{grid-template-columns:1.4fr 1fr 1fr!important}
}
@media(max-width:700px) and (pointer:coarse){
.brand-lock img{height:54px!important}
header.site.scrolled .brand-lock img{height:44px!important}
.p-hero{margin-top:79px!important;min-height:calc(78svh - 79px)!important}
.mast{padding-top:calc(24px + 79px)!important}
.doc-top{padding-top:120px!important}
footer.site img.logo{height:96px!important}
.p-hero .sub,.cta-band p{font-size:17px!important;line-height:1.55!important}
.proof .stats .l{font-size:11px!important}
.intro p{font-size:17.5px!important;line-height:1.65!important}
.caps .ci{padding:0 22px!important}
.caps .grid .ci.fold-ci h3{margin:0!important}
.caps .fold-ci .n{display:block;padding-top:18px;margin-bottom:-10px}
.caps .fold-ci.open p{padding-bottom:26px}
.proc .st.fold-ci{padding:0 20px!important}
.proc .fold-ci .n{display:block;padding-top:18px;margin-bottom:-10px}
.proc .fold-ci h3:after,.light .fold-ci h3:after{color:var(--stone)}
.proc .fold-ci.open h3:after{color:var(--terra)}
.art{padding:24px 0!important}
}

/* ---- photo captions on touch (28 Sep): place name only, one small line — the section label ("Townhouses · completed",
   "Interiors") was crowding the frame on a phone. The full caption still shows in the Projects lightbox. ---- */
@media(max-width:1100px) and (pointer:coarse){
.tile .cap,.cell .cap{padding:22px 10px 8px!important;background:linear-gradient(0deg,rgba(15,17,19,.62),transparent)!important;display:block!important}
.tile .cap .k,.cell .cap .k{display:none!important}
.tile .cap .t,.cell .cap .t{display:block;font-family:var(--mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--sand)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(15,17,19,.8)}
}

/* ---- homepage hero on phones (28 Sep, Option C "Headline only"): only the headline sits on the photo, shaded at its foot;
   the paragraph and pathways drop below onto the charcoal ground. Eyebrow hidden on phones. ---- */
@media(max-width:700px) and (pointer:coarse){
.hero{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(40svh,auto) auto auto auto;min-height:0!important}
.hero > .container{display:contents!important}
.hero .bg,.hero .scrim{grid-row:1/3;grid-column:1;position:relative!important;inset:auto!important}
.hero .bg{overflow:hidden}
.hero-still{object-position:40% 22%!important}
.hero .scrim{background:linear-gradient(180deg,rgba(18,21,24,0) 0%,rgba(18,21,24,0) 32%,rgba(18,21,24,.58) 56%,rgba(18,21,24,.88) 80%,rgba(18,21,24,.96) 100%)!important}
.hero .eyebrow{display:none!important}
.hero h1{grid-row:2;grid-column:1;align-self:end;position:relative;z-index:2;padding:0 24px 26px;text-shadow:0 2px 20px rgba(18,21,24,.55)!important}
.hero .row{grid-row:3;grid-column:1;position:relative;z-index:2;margin-top:0!important;padding:22px 24px 0}
.hero .sub{text-shadow:none!important}
.hero-foot{grid-row:4;grid-column:1}
.hero .pathways a{text-shadow:none!important}
}