/* Miguel A. Navarro — site styles (Monograph 5.2)
   Palette: Stone #E6E3DA · Ink #262420 · Lichen #5F6450 · Walnut #4F3F2E
   Type: Neue Helvetica 45 Light (primary), 55 Roman, 77 Condensed Bold (titles).
   DECIDED 10/26 (Sabrina): launch without a webfont licence. Apple devices use their
   built-in Helvetica Neue; others fall back to Helvetica/Arial. If the licence is bought
   later, add the WOFF2 files to /fonts and put the url(...) lines back (see _setup/README.md). */

@font-face{font-family:"NH";font-weight:300;font-style:normal;font-display:swap;
  src:local("HelveticaNeue-Light"),local("Helvetica Neue Light")}
@font-face{font-family:"NH";font-weight:400;font-style:normal;font-display:swap;
  src:local("HelveticaNeue"),local("Helvetica Neue")}
@font-face{font-family:"NHC";font-weight:700;font-style:normal;font-display:swap;
  src:local("HelveticaNeue-CondensedBold"),local("Helvetica Neue Condensed Bold")}

:root{
  --stone:#E6E3DA;--ink:#262420;--lichen:#5F6450;--walnut:#4F3F2E;
  --muted:#5d5a53;--mat:#F4F1EA;--white:#FBFAF7;--tint:#DCD8CD;
  --g:64px;--gap:24px;--inset:40px;--sec:96px;--sub:64px;
  --sans:"NH","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cond:"NHC","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--stone);color:var(--ink)}
body{font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:300}
b,strong{font-weight:400}
.cb{font-family:var(--cond);font-weight:700;font-stretch:condensed;letter-spacing:-.005em}
.wrap{padding-left:var(--g);padding-right:var(--g)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.link{display:inline-block;font-size:17px;font-weight:400;color:var(--lichen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.link:hover{color:var(--ink)}
.body p{font-size:18px;line-height:1.6;margin:0 0 16px}
.body p:last-child{margin-bottom:0}
.btn{display:inline-block;background:var(--ink);color:var(--stone);font:400 17px/1.2 var(--sans);padding:17px 28px;border:0;cursor:pointer}
.btn:hover{background:#000}
:focus-visible{outline:2px solid var(--lichen);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--stone);padding:10px 14px;z-index:20}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{display:flex;justify-content:space-between;align-items:baseline;padding:28px var(--g);position:relative;z-index:5}
.site-header .n{font-size:17px;font-weight:400}
.site-header nav{display:flex;gap:32px;font-size:15px}
.site-header nav a:hover{color:var(--lichen)}
.site-header nav{align-items:baseline}
.site-header nav .nav-page{border-left:1px solid rgba(38,36,32,.35);padding-left:32px;font-weight:400}
.site-header nav a[aria-current=page] .lbl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.menu-btn{display:none;background:none;border:0;padding:0;font:300 15px var(--sans);color:var(--ink);cursor:pointer}
.site-footer{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;padding-top:28px;padding-bottom:40px;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;gap:28px}
.site-footer .privacy{flex-basis:100%;margin:0;font-size:12.5px;line-height:1.5}
.site-footer .fc{margin:0;display:flex;flex-wrap:wrap;gap:4px 0}
.site-footer .sw::before{content:"·";margin:0 10px}
@media (max-width:760px){.site-footer .fc{flex-direction:column}.site-footer .sw::before{content:none}}
.site-footer a:hover{color:var(--ink)}

/* ---------- media ---------- */
.mat{background:var(--mat);padding:var(--inset);display:flex;align-items:center;justify-content:center}
.mat img{width:100%;height:100%;object-fit:contain}
.cap{font-size:13px;line-height:1.45;color:var(--muted);margin-top:12px}

/* video: poster first, Vimeo player loads on click (nothing autoplays) */
.vid{position:relative;margin:0;background:#000;aspect-ratio:var(--ar,16/9);overflow:hidden}
.vid>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid.contain>img{object-fit:contain}
.vid .play{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:pointer;z-index:2}
.vid .play::before{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(230,227,218,.88);transition:transform .15s}
.vid .play::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -6px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.vid .play:hover::before{transform:scale(1.06)}
.vid .bar{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;background:rgba(38,36,32,.86);color:#F4F1EA;font-size:13px;font-weight:400;z-index:1;pointer-events:none}
.vid .bar::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #F4F1EA;flex:none}
.vid .bar>span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vid .bar .line{flex:1;min-width:12px;height:1px;background:rgba(244,241,234,.35)}
.vid .sound{position:absolute;top:14px;right:14px;z-index:3;background:rgba(230,227,218,.92);color:var(--ink);font-size:12.5px;font-weight:400;padding:6px 10px;display:flex;align-items:center;gap:7px;pointer-events:none}
.vid .sound::before{content:"";width:12px;height:10px;background:var(--ink);clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.vid .note{position:absolute;left:14px;bottom:52px;z-index:3;background:rgba(230,227,218,.95);color:var(--ink);font-size:13px;padding:8px 10px}

/* ================= HOMEPAGE ================= */
.home .hero-band{background:#fff}
.hero{padding:40px 0 92px}
.hero .art{width:min(86vw,1240px);margin:0 auto}
.hero .who{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 8.9% 0 10.5%}
.hero h1{font-size:clamp(34px,4.2vw,62px);line-height:1;letter-spacing:-.025em;font-weight:300}
.hero .role{text-align:right;font-size:clamp(16px,1.4vw,20px);line-height:1.5;padding-bottom:4px}
.hero .role span{display:block;color:var(--muted)}

.works{padding-top:120px}
.works>h2{font-size:40px;letter-spacing:-.015em;margin-bottom:80px}
.ptitle{font-size:clamp(34px,3.3vw,48px);line-height:1;letter-spacing:-.01em}
.pdesc{font-size:17px;line-height:1.6}
.pdesc+.pdesc{margin-top:14px}

.c2g{align-items:stretch}
.c2g .fig{grid-column:1/10}
.c2g .side{grid-column:10/13;display:flex;flex-direction:column}
.c2g .ptitle{margin-bottom:28px}
.c2g .side .inst{margin-top:auto;padding-top:32px}

.pair{display:flex;gap:var(--gap);align-items:flex-start}
.pair>*{min-width:0}
.pair .t{font-size:clamp(26px,2.2vw,32px);line-height:1.05;margin:20px 0 10px}

.ch{padding-top:180px}
.ch .ptitle{font-size:clamp(36px,3.5vw,50px)}
.ch .chi{font-size:22px;line-height:1.45;max-width:16em;margin:18px 0 52px}

.pw{background:var(--ink);color:#EDEAE2;margin-top:180px;padding:140px 0 150px}
.pw .ptitle{font-size:clamp(36px,3.5vw,50px)}
.pw .q{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.02em;max-width:13em;margin:20px 0 56px}
.pw .pdesc{max-width:40em;margin-top:44px;color:rgba(237,234,226,.88)}

.ao{padding-top:140px;align-items:start}
.ao .txt{grid-column:1/4}
.ao .ptitle{font-size:clamp(36px,3.5vw,50px)}
.ao .sub{font-size:24px;line-height:1.3;margin:24px 0 20px}
.ao .pdesc{font-size:16px}
.ao .v{grid-column:4/13}

.about{padding-top:200px;align-items:start}
.about .ph{grid-column:1/8}
.about .txt{grid-column:8/13}
.about h2{font-size:40px;letter-spacing:-.015em;margin:-8px 0 28px}
.about .lead{font-size:22px;line-height:1.5;margin-bottom:24px}
.about .body p{font-size:17px;line-height:1.65}

.teach{padding-top:180px}
.teach>h2{font-size:44px;letter-spacing:-.015em;margin-bottom:56px}
.teach .g12{align-items:start}
.teach .txt{grid-column:1/8;max-width:40em}
.teach h3{font-size:32px;line-height:1.1;margin-bottom:28px}
.teach .lead{font-size:22px;line-height:1.52;margin-bottom:32px}
.teach .body p{font-size:17px;line-height:1.75;margin-bottom:24px}
.teach .bridge{margin-top:44px}
.teach .bridge p{margin-bottom:12px}
.teach .phs{grid-column:9/13;display:grid;row-gap:24px;margin:0}
.teach .phs .cap{margin-top:-12px}

.contact{padding-top:180px;padding-bottom:140px;align-items:start}
.contact .ct{grid-column:1/6}
.contact .cform{grid-column:7/13;padding-top:8px}
.contact .form-note{font-size:14px;max-width:none;margin:16px 0 0}
.contact h2{font-size:40px;letter-spacing:-.015em;margin-bottom:22px}
.contact p{font-size:19px;line-height:1.55;max-width:22em;margin-bottom:32px}

/* ================= PORTFOLIO REVIEW & DEVELOPMENT ================= */
.cap2{font-size:16px;line-height:1.5;color:var(--muted);max-width:44ch}
.cap2 b{display:block;font-weight:400;color:var(--ink);font-size:16px;margin-bottom:4px}
.t{font-size:30px;line-height:1.05;margin-bottom:24px}
.sec{font-size:40px;letter-spacing:-.015em;line-height:1.1}

.op{padding-top:24px;grid-template-rows:auto 1fr auto;align-items:end}
.op .l{grid-column:1/8;grid-row:1;align-self:start}
.op h1{font-size:18px;font-weight:400;margin-bottom:22px}
.op h2{font-size:clamp(46px,4.9vw,70px);line-height:1;letter-spacing:-.03em;margin-bottom:18px}
.op .lead{font-size:23px;font-weight:400;line-height:1.35}
.op .credit{grid-column:1/4;grid-row:3;align-self:end;font-size:13.5px;line-height:1.45;color:var(--muted)}
.op .m1{grid-column:4/8;grid-row:2;aspect-ratio:421/410;margin-top:44px}
.op .m2{grid-column:8/13;grid-row:1/3;aspect-ratio:532/664;margin-top:40px}
.op .c1{grid-column:4/8;grid-row:3;margin-top:16px;align-self:start}
.op .c2{grid-column:8/13;grid-row:3;margin-top:16px;align-self:start}

.intro{padding-top:60px}
.intro .body{grid-column:1/9;column-count:2;column-gap:var(--gap)}
.intro .body p{break-inside:avoid}
.intro .j{margin-top:20px}

.ks{padding-top:var(--sec)}
.ks .h{grid-column:1/5}
.ks h2{font-size:40px;letter-spacing:-.015em;line-height:1.1}
.ks h3{font-size:24px;line-height:1.3;margin-top:10px;color:var(--muted)}
.ks .stmt{grid-column:5/12;font-size:clamp(36px,3.75vw,54px);line-height:1.02}
.start{padding-top:var(--sub);align-items:start}
.start .body{grid-column:1/6}
.start .w{grid-column:7/13;aspect-ratio:644/538}
.voice{padding-top:var(--sec)}
.voice h3{grid-column:1/9;font-size:40px;letter-spacing:-.015em}
.pour{padding-top:32px;align-items:start;grid-template-rows:auto 1fr}
.pour .lab{grid-column:1/6;grid-row:1}
.pour .rph{grid-column:1/5;grid-row:2;margin-top:36px}
.pour .fin{grid-column:7/13;grid-row:1/3;aspect-ratio:644/832}
.cart{padding-top:var(--sub);align-items:start;grid-template-rows:auto 1fr}
.cart .lab{grid-column:1/6;grid-row:1}
.cart .a{grid-column:1/5;grid-row:2;margin-top:36px}
.cart .mm{grid-column:8/13;grid-row:1/3;display:grid;row-gap:24px}
.cart .mm .mat{aspect-ratio:1/1}

.out{padding-top:var(--sec)}
.out .hd{grid-column:1/13;margin-bottom:20px}
.out .p1,.out .p3{grid-column:1/8;font-size:24px;line-height:1.42}
.out .big{grid-column:1/12;font-size:clamp(32px,3.2vw,46px);line-height:1.14;letter-spacing:-.02em;margin:40px 0}
.out .big b{font-family:var(--cond);font-weight:700;font-stretch:condensed;letter-spacing:-.008em}
.out .comp{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:80px;align-items:start}
.out .u{display:flex;flex-direction:column}
.out .u .cap2{margin-top:14px}
.out .hero{grid-column:1/7}
.out .hero .mat{aspect-ratio:644/832}
.out .stack{grid-column:8/13;display:grid;row-gap:40px}
.out .stack .mat{aspect-ratio:532/350}
.quote{padding-top:var(--sec);padding-bottom:var(--sec)}
.quote blockquote{margin:0;grid-column:1/11;font-size:clamp(32px,3.2vw,46px);line-height:1.2;letter-spacing:-.016em}
.quote .att{grid-column:1/11;font-size:16px;font-weight:400;margin-top:24px}

.svc{background:var(--white);padding:96px 0 104px}
.svc .intro2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-bottom:48px}
.svc h2.sec{grid-column:1/8}
.svc .two{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);grid-template-rows:auto auto auto auto 1fr auto}
.svc .s{display:grid;grid-row:span 6;grid-template-rows:subgrid;border-top:1px solid rgba(38,36,32,.35);padding-top:28px;padding-right:64px}
.svc h3{font-size:clamp(34px,3.2vw,46px);line-height:1;margin-bottom:16px}
.svc .promise{font-size:24px;line-height:1.3;margin-bottom:24px;max-width:24ch}
.svc .gain{font-size:18px;font-weight:400;margin:12px 0 6px}
.svc ul{margin:0 0 22px;padding:0;list-style:none}
.svc li{font-size:18px;line-height:1.5;padding:6px 0 6px 22px;position:relative}
.svc li::before{content:"–";position:absolute;left:0;color:var(--muted)}
.svc .end{font-size:18px;line-height:1.6;margin-bottom:28px}
.svc .cta{align-self:end}
.approach{padding-top:var(--sec)}
.approach h2{grid-column:1/5;font-size:34px;line-height:1.12;letter-spacing:-.012em}
.approach .body{grid-column:5/11}
.approach .body p:first-child{font-size:24px;line-height:1.42}
.svc-about{padding-top:80px;padding-bottom:var(--sec);align-items:start}
.svc-about .txt{grid-column:1/6}
.svc-about .ph{grid-column:7/13;padding-top:6px}
.svc-about .role{font-size:18px;font-weight:400;margin:12px 0 20px}
.svc-about .link{margin-top:20px}

.inq{padding:96px 0 104px;background:var(--tint)}
.inq .left{grid-column:1/6}
.inq .left p.intro2{font-size:21px;line-height:1.45;margin:18px 0 40px}
.inq blockquote{margin:0;font-size:24px;line-height:1.38;letter-spacing:-.006em}
.inq .att{font-size:16px;font-weight:400;margin-top:14px}
.inq form{grid-column:7/13}
.inq .fh{font-size:16px;font-weight:400;margin-bottom:24px;color:var(--muted)}
.f{margin:0 0 28px;padding:0;border:0;min-width:0}
.f label,.f legend{display:block;font-size:17px;font-weight:400;margin-bottom:10px;padding:0}
.f label span,.f legend span{color:var(--muted);font-weight:300}
.f input[type=text],.f input[type=email]{display:block;width:100%;height:52px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:300 18px var(--sans);color:var(--ink);padding:0;border-radius:0}
.f textarea{display:block;width:100%;height:148px;border:1px solid rgba(38,36,32,.5);background:transparent;font:300 18px/1.5 var(--sans);color:var(--ink);padding:12px 14px;border-radius:0;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--lichen);box-shadow:0 1px 0 0 var(--lichen)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{border:1px solid rgba(38,36,32,.6);padding:13px 18px;font-size:16px;font-weight:400;min-height:48px;display:inline-flex;align-items:center;cursor:pointer}
.chip input:checked+span{background:var(--ink);color:var(--stone);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--lichen);outline-offset:2px}
.form-note{font-size:14px;color:var(--muted);margin-top:16px;line-height:1.5}
.hp{display:none}
.ref{background:var(--white);padding-top:72px;padding-bottom:88px}
.ref h2{grid-column:1/5;font-size:26px;line-height:1.2}
.ref .rt{grid-column:5/11}
.ref .q2{font-size:20px;font-weight:400;margin-bottom:18px}
.ref .link{margin-top:24px}

/* ---------- simple pages (thanks / 404) ---------- */
.simple{min-height:70vh;padding-top:120px;padding-bottom:120px}
.simple h1{font-size:clamp(40px,4.5vw,64px);line-height:1.05;letter-spacing:-.025em;margin-bottom:24px}
.simple p{font-size:20px;line-height:1.5;max-width:30em;margin-bottom:32px}

/* ================= TABLET ================= */
@media (max-width:1100px){
  :root{--g:40px;--gap:20px;--inset:28px}
  .c2g .fig{grid-column:1/9}.c2g .side{grid-column:9/13}
  .ao .txt{grid-column:1/5}.ao .v{grid-column:5/13}
  .about .ph{grid-column:1/7}.about .txt{grid-column:7/13}
  .teach .txt{grid-column:1/8}.teach .phs{grid-column:8/13}
  .svc .s{padding-right:24px}
  .op .l{grid-column:1/9}
  .inq .left{grid-column:1/6}.inq form{grid-column:7/13}
}

/* ================= MOBILE ================= */
@media (max-width:760px){
  :root{--g:20px;--gap:12px;--inset:16px;--sec:64px;--sub:44px}
  .g12{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g12>*{grid-column:1/-1!important}
  .site-header{padding:18px var(--g)}
  .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--stone);padding:4px var(--g) 24px;height:100vh;height:100dvh;overflow-y:auto}
  .site-header nav a{padding:14px 0;font-size:18px;border-top:1px solid rgba(38,36,32,.15)}
  .site-header nav a:first-child{border-top:0}
  .site-header nav .nav-page{border-left:0;padding-left:0;border-top:1px solid var(--ink);margin-top:20px;padding-top:16px}
  .site-header.open{background:var(--stone)}
  .site-header.open nav{display:flex}
  .menu-btn{display:block}
  .body p{font-size:16px;line-height:1.55}

  /* home */
  .hero{padding:12px 0 44px}
  .hero .art{width:100%}
  .hero .who{display:block;padding:12px var(--g) 0 10.5%}
  .hero h1{font-size:32px;margin-bottom:12px}
  .hero .role{text-align:left;font-size:16px}
  .works{padding-top:64px}.works>h2{font-size:30px;margin-bottom:36px}
  .ptitle,.ch .ptitle,.pw .ptitle,.ao .ptitle{font-size:34px}
  .c2g .side{display:block;margin-top:22px}
  .c2g .ptitle{margin-bottom:18px}
  .c2g .side .inst{padding-top:28px}
  .pdesc{font-size:16px}
  .pair{display:block}
  .pair>*{width:100%}
  .pair>*+*{margin-top:40px}
  .pair .t{font-size:26px;margin:16px 0 8px}
  .ch{padding-top:96px}.ch .chi{font-size:19px;margin:14px 0 32px}
  .pw{margin-top:96px;padding:72px 0 80px}
  .pw .q{font-size:30px;margin:14px 0 32px}
  .pw .pdesc{margin-top:32px}
  .ao{padding-top:96px}.ao .sub{font-size:22px;margin:16px 0 14px}.ao .v{margin-top:24px}
  .vid .play::before{width:56px;height:56px;margin:-28px 0 0 -28px}
  .vid .bar{height:34px;font-size:12px;gap:10px}
  .about{padding-top:96px}.about .txt{margin-top:28px}
  .about h2{font-size:30px;margin:0 0 18px}.about .lead{font-size:19px}
  .about .body p{font-size:16px}
  .teach{padding-top:96px}.teach>h2{font-size:30px;margin-bottom:24px}
  .teach h3{font-size:26px;margin-bottom:18px}.teach .lead{font-size:19px;margin-bottom:24px}
  .teach .body p{font-size:16px;line-height:1.65}
  .teach .phs{margin-top:32px;row-gap:12px}
  .contact{padding-top:96px;padding-bottom:80px}.contact .cform{margin-top:36px}.contact .btn{display:block;width:100%;text-align:center;padding:18px}.contact h2{font-size:30px}.contact p{font-size:17px}

  /* services */
  .op{grid-template-rows:none;padding-top:8px}
  .op .l{grid-row:1;margin-bottom:28px}
  .op h1{font-size:15px;margin-bottom:16px}.op h2{font-size:44px;margin-bottom:14px}.op .lead{font-size:20px}
  .op .m2{grid-row:2;margin:0}.op .c2{grid-row:3;margin:12px 0 32px}
  .op .m1{grid-row:4;margin:0}.op .c1{grid-row:5;margin-top:12px}.op .credit{grid-row:6;margin-top:24px}
  .intro{padding-top:40px}.intro .body{column-count:1}
  .ks .h{margin-bottom:24px}.ks h2{font-size:30px}.ks h3{font-size:20px}.ks .stmt{font-size:34px}
  .start .w{margin-top:24px}
  .voice h3{font-size:30px}.t{font-size:26px}
  .pour{padding-top:20px;grid-template-rows:none}
  .pour .lab{grid-row:1}.pour .rph{grid-row:2;margin-top:20px;grid-column:1/4!important}.pour .fin{grid-row:3;margin-top:20px}
  .cart{grid-template-rows:none}
  .cart .lab{grid-row:1}.cart .a{grid-row:2;margin-top:20px;grid-column:1/3!important}.cart .mm{grid-row:3;margin-top:20px;row-gap:12px}
  .out .hd{margin-bottom:20px}.out .p1,.out .p3{font-size:19px}
  .out .big{font-size:28px;line-height:1.2;margin:28px 0}
  .out .comp{display:block;margin-top:44px}.out .stack{row-gap:32px;margin-top:32px}.out .u .cap2{margin-top:10px}
  .cap2,.cap2 b{font-size:15px}
  .quote blockquote{font-size:28px}
  .svc{padding:64px 0 72px}.svc .intro2{display:block;margin-bottom:32px}.svc h2.sec{font-size:30px}
  .svc .two{display:block}.svc .s{display:block;padding-right:0}.svc .s+.s{margin-top:64px}
  .svc h3{font-size:36px}.svc .promise{font-size:20px}.svc .cta .btn{display:block;text-align:center}
  .approach h2{font-size:28px;margin-bottom:20px}.approach .body p:first-child{font-size:20px}
  .svc-about{padding-top:52px}.svc-about .ph{grid-row:1;margin-bottom:24px}.svc-about .txt{grid-row:2}
  .inq{padding:64px 0 72px}.inq form{margin-top:44px}.inq blockquote{font-size:21px}.inq .left p.intro2{font-size:19px;margin-bottom:32px}
  .inq .btn{display:block;width:100%;text-align:center;padding:18px}
  .ref{padding-top:52px;padding-bottom:60px}.ref h2{margin-bottom:14px}
  .sec{font-size:30px}
  .simple{padding-top:64px}
}
/* 10/26 mobile fix: single-column grids must not grow to an image's full pixel width
   (Safari sizes an undefined grid column by the picture inside it, so large images
   like the Skateboard Chair and Room as Portrait spilled past the phone screen). */
.teach .phs,.cart .mm,.out .stack{grid-template-columns:minmax(0,1fr)}
.svc .two{grid-template-columns:repeat(2,minmax(0,1fr))}
.out .comp>*,.out .stack>*,.cart .mm>*,.teach .phs>*{min-width:0}
.mat{min-width:0}
.mat img{min-width:0;min-height:0;max-width:100%}
/* 10/29 video lightbox (Couch to Geisha, PileoToPenta, MesoToPenta) */
.lb{position:fixed;inset:0;z-index:100;background:#181714;display:flex;align-items:center;justify-content:center;padding:64px 16px 32px}
.lb[hidden]{display:none}
.lb-frame{position:relative;width:min(100%,calc((100vh - 112px) * 16 / 9));width:min(100%,calc((100dvh - 112px) * 16 / 9));aspect-ratio:16/9;background:#000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-title{position:absolute;top:22px;left:24px;margin:0;color:#F4F1EA;font-size:15px;font-weight:400}
.lb-close{position:absolute;top:12px;right:16px;background:none;border:0;color:#F4F1EA;font:inherit;font-size:16px;font-weight:400;padding:10px 8px;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.lb-close:focus-visible{outline:1px solid #F4F1EA;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 10/30 homepage updates (MP-97): Portfolio Development panel, Couch to Geisha videos, The Problem with… player */
.pd-band{margin-top:72px;background:var(--mat);padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.pd-band h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:12px}
.pd-band p{margin:0;max-width:34em;font-size:19px;line-height:1.45}
.pd-band .btn{flex:none}
.c2g-vids .vid+.vid{margin-top:20px}
.pw .q{margin-bottom:28px}
.pw-desc p{font-size:clamp(20px,1.8vw,26px);line-height:1.42;text-wrap:pretty;color:#EDEAE2;margin:0 0 16px}
.pw-desc p:last-child{margin-bottom:0}
.pw-thumbs{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pw-thumbs button{position:relative;display:block;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:#EDEAE2;font:400 15px/1.3 var(--sans)}
.pw-thumbs img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.82;transition:opacity .15s}
.pw-thumbs button:hover img,.pw-thumbs button:focus-visible img{opacity:1}
.pw-thumbs button:focus-visible{outline:1px solid #EDEAE2;outline-offset:6px}
@media (max-width:760px){
  .pd-band{flex-direction:column;align-items:stretch;padding:32px 24px;gap:24px;margin-top:48px}
  .pd-band .btn{display:block;text-align:center}
  .pw-desc p{font-size:18px}
  .pw-thumbs{gap:10px;margin-top:14px}
  .pw-thumbs button{font-size:12.5px}
  .site-footer nav{flex-wrap:wrap;gap:12px 24px}
}

/* 10/30 round 4: Problem with… text beside the still; series lightbox with thumbnails */
.pw-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.pw-top .pw-desc{grid-column:1/6;margin:0}
.pw-top .pw-main{grid-column:6/13;margin:0}
.lb-stage{width:min(100%,calc((100vh - 152px) / .745));width:min(100%,calc((100dvh - 152px) / .745))}
.lb-stage .lb-frame{width:100%}
.lb-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lb-list button{display:block;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:rgba(244,241,234,.6);font:400 13px/1.3 var(--sans)}
.lb-list img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.5;outline:1px solid transparent;outline-offset:2px}
.lb-list span{display:block;margin-top:6px}
.lb-list button[aria-current="true"]{color:#F4F1EA}
.lb-list button[aria-current="true"] img{opacity:1;outline-color:#F4F1EA}
.lb-list button:hover img,.lb-list button:focus-visible img{opacity:1}
@media (max-width:1100px){.pw-top .pw-desc{grid-column:1/13;margin-bottom:40px}.pw-top .pw-main{grid-column:1/13}}
@media (max-width:760px){.pw-top .pw-desc{margin-bottom:32px}.pw-thumbs{margin-top:16px}.lb-list{gap:8px}.lb-list button{font-size:11.5px}}
.lb-list[hidden]{display:none}

/* thumbnails: same label bar as the video players (play mark + label + line) */
.pw-thumbs .tbar{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;background:rgba(38,36,32,.86);color:#F4F1EA;font-size:13px;font-weight:400}
.pw-thumbs .tbar::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #F4F1EA;flex:none}
.pw-thumbs .tbar>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pw-thumbs .tbar .line{flex:1;min-width:12px;height:1px;background:rgba(244,241,234,.35)}
@media (max-width:760px){.pw-thumbs .tw{display:none}.pw-thumbs .tbar{height:24px;gap:6px;padding:0 7px;font-size:11px}.pw-thumbs .tbar::before{border-width:4px 0 4px 7px}.pw-thumbs .tbar .line{display:none}}