:root{
  --bg:#ffffff; --ink:#333333; --deep:#666666; --mute:#666666; --soft:#999999; --line:#3333332e; --accent:#333333; --plate:#ffffff;
  --photo:grayscale(1) contrast(1.03);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#333333;--ink:#ffffff;--deep:#999999;--mute:#b5b5b5;--soft:#999999;--line:#ffffff33;--accent:#ffffff;--plate:#333333;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#333333;--ink:#ffffff;--deep:#999999;--mute:#b5b5b5;--soft:#999999;--line:#ffffff33;--accent:#ffffff;--plate:#333333;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1875rem/1.6 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{padding:0 clamp(1.25rem,4vw,3.5rem)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(.75rem,2vw,1.75rem)}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:baseline;padding:1rem clamp(1.25rem,4vw,3.5rem);background:var(--bg);font-family:"Barlow Semi Condensed",var(--display);font-size:.9rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
header::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
header .mark{font-weight:700;text-decoration:none}
.logo{display:block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;aspect-ratio:700/834}
header .mark{display:flex;align-items:center;gap:.7rem}
header .mark .logo{width:clamp(8rem,30vw,11rem);aspect-ratio:900/257;color:var(--ink);-webkit-mask-image:url(logo-full.png);mask-image:url(logo-full.png)}
.hero-logo{grid-column:1/4;grid-row:3;width:clamp(5rem,12vw,9rem);margin-top:clamp(2rem,5vw,4rem);color:var(--ink)}
.foot-logo{width:clamp(10rem,24vw,18rem);aspect-ratio:900/342;margin:0 0 clamp(2rem,4vw,3rem) 0;color:var(--bg);-webkit-mask-image:url(logo-hps.png);mask-image:url(logo-hps.png)}

header nav{display:flex;gap:clamp(1rem,3vw,2.25rem)}
header nav a{text-decoration:none;padding:.25rem 0;border-bottom:1px solid transparent}
header nav a:hover{border-color:var(--accent)}
@media (max-width:560px){header{flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-top:.75rem;padding-bottom:.6rem}header nav{width:100%;justify-content:space-between;gap:.5rem;font-size:.78rem;letter-spacing:.1em}}

/* hero */
.hero{padding-top:clamp(1.5rem,6vw,5rem);padding-bottom:clamp(3rem,8vw,7rem);position:relative}
h1{grid-column:1/11;margin:0;font:700 clamp(2.6rem,11.5vw,11rem)/.86 var(--display);letter-spacing:-.01em;text-transform:uppercase}
h1 span{display:block}
h1 span:nth-child(2){padding-left:clamp(1rem,9vw,9rem);color:var(--deep)}
h1 span:nth-child(3){padding-left:clamp(0rem,3vw,3rem)}
.hero-note{grid-column:7/13;margin-top:clamp(2rem,5vw,4rem);max-width:30rem;font-size:1.3rem;line-height:1.5}
.gonio{grid-column:6/13;grid-row:2;margin-top:clamp(-6rem,-8vw,-2rem);justify-self:end;width:100%;max-width:560px;align-self:end}
@media (max-width:820px){h1{grid-column:1/13}.hero-note{grid-column:1/13}.gonio{grid-column:1/13;grid-row:auto;margin-top:2rem;justify-self:start}}
.gonio svg{width:100%;height:auto;display:block;touch-action:none;cursor:ew-resize}
.gonio .arc,.gonio .tick{stroke:var(--ink);fill:none}
.gonio .fixed{stroke:var(--soft);stroke-width:3}
.gonio .arm{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.gonio .sweep{fill:var(--soft);opacity:.28}
.gonio .pivot{fill:var(--bg);stroke:var(--ink);stroke-width:3}
.readout{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--display);border-top:1px solid var(--ink);padding-top:.6rem}
.readout output{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.readout label{font-size:.95rem;color:var(--mute);max-width:15rem;text-align:right}
input[type=range]{width:100%;margin:.9rem 0 0;accent-color:var(--accent)}

/* statement */
.statement{padding:clamp(4rem,10vw,9rem) 0;border-top:1px solid var(--line)}
.statement p.big{grid-column:4/13;margin:0;font:500 clamp(2.2rem,5vw,4.2rem)/1.05 var(--display);letter-spacing:-.005em}
.statement p.small{grid-column:1/4;grid-row:1;font:600 .85rem/1.4 "Barlow Semi Condensed",var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:.6rem 0 0}
@media (max-width:820px){.statement p.big,.statement p.small{grid-column:1/13;grid-row:auto}.statement p.small{margin-bottom:1.5rem}}

/* disciplines */
.disc{padding-bottom:clamp(4rem,9vw,8rem)}
.disc h2,.work h2,.contact h2{font:700 clamp(2.4rem,5.5vw,4.5rem)/1 var(--display);letter-spacing:0;text-transform:uppercase;margin:0 0 2rem}
.disc ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.disc li{border-bottom:1px solid var(--ink)}
.disc button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(.75rem,2vw,1.75rem);width:100%;padding:1.1rem 0;align-items:baseline}
.disc button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.disc .name{grid-column:1/9;font:600 clamp(2.4rem,8vw,7rem)/.95 var(--display);letter-spacing:0;text-transform:uppercase;transition:padding .35s ease,color .2s}
.disc .tag{grid-column:9/12;font:600 .85rem/1.3 "Barlow Semi Condensed",var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.disc .sign{grid-column:12;justify-self:end;font:300 2rem/1 var(--display);transition:transform .3s}
.disc li:hover .name{color:var(--deep)}
.disc button[aria-expanded=true] .name{padding-left:clamp(1rem,6vw,6rem);color:var(--deep)}
.disc button[aria-expanded=true] .sign{transform:rotate(45deg);color:var(--accent)}
.disc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.disc .panel>div{overflow:hidden}
.disc button[aria-expanded=true]+.panel{grid-template-rows:1fr}
.disc .panel p{margin:0 0 1.6rem;max-width:36rem;margin-left:clamp(1rem,6vw,6rem)}
@media (max-width:700px){.disc .tag{display:none}.disc .name{grid-column:1/12}.disc .sign{grid-column:12}}

.also{margin:1.6rem 0 0;max-width:46rem;color:var(--mute)}
.also b{color:var(--ink);font-family:"Barlow Semi Condensed",var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
/* work */
.work{padding-bottom:clamp(4rem,9vw,8rem)}
.cases{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,4.5rem) clamp(.75rem,2vw,1.75rem)}
.case{margin:0}
.case .plate{background:var(--plate);display:flex;align-items:flex-end;padding:1rem;color:var(--mute);font:500 .85rem/1.2 var(--display);position:relative;overflow:hidden}
.case .plate svg{position:absolute;inset:0;width:100%;height:100%}
.case .plate svg *{stroke:var(--deep);fill:none;stroke-width:1.5}
.case h3{font:600 1.6rem/1.1 var(--display);letter-spacing:-.025em;margin:1rem 0 .4rem}
.case p{margin:0;max-width:30rem;color:var(--mute)}
.c1{grid-column:1/8}.c1 .plate{aspect-ratio:4/3}
.c2{grid-column:9/13;margin-top:clamp(0rem,9vw,8rem)}.c2 .plate{aspect-ratio:3/4}
.c3{grid-column:3/10}.c3 .plate{aspect-ratio:16/9}
@media (max-width:760px){.c1,.c2,.c3{grid-column:1/13;margin-top:0}}

/* move */
.move{padding-top:clamp(3rem,8vw,7rem);padding-bottom:clamp(4rem,9vw,8rem);border-top:1px solid var(--line)}
.move .grid{align-items:end;row-gap:2rem}
.move-h{grid-column:1/7;margin:0;font:700 clamp(3rem,8.5vw,8rem)/.9 var(--display);text-transform:uppercase}
.move-h span{display:block}
.move-h span:nth-child(2){padding-left:clamp(1rem,5vw,5rem);color:var(--deep)}
.move .gonio{grid-row:auto;margin-top:0;grid-column:8/13;align-self:end}
@media (max-width:820px){.move-h{grid-column:1/13}.move .gonio{grid-column:1/13;justify-self:start}}

/* photos */
.space{padding-bottom:clamp(4rem,9vw,8rem)}
.shots{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.25rem,3vw,2.75rem) clamp(.75rem,2vw,1.75rem)}
.shots figure,.pair figure{margin:0;background:var(--line);overflow:hidden}
.shots img,.pair img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--photo)}
.s1{grid-column:1/8;aspect-ratio:3/2}
.s2{grid-column:9/13;aspect-ratio:2/3;margin-top:clamp(0rem,8vw,7rem)}
.s3{grid-column:2/7;aspect-ratio:3/2}
.s4{grid-column:8/13;aspect-ratio:3/2;margin-top:clamp(0rem,6vw,5rem)}
.s5{grid-column:3/13;aspect-ratio:16/9}
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.25rem,3vw,2.75rem) clamp(.75rem,2vw,1.75rem);margin:0 0 clamp(2.5rem,6vw,5rem)}
.pair figure{aspect-ratio:16/9}
.pair .a{grid-column:1/8}
.pair .b{grid-column:8/13;margin-top:clamp(0rem,6vw,5rem)}
@media (max-width:760px){.s1,.s2,.s3,.s4,.s5,.pair .a,.pair .b{grid-column:1/13;margin-top:0}}

/* team */
.team{padding-bottom:clamp(4rem,9vw,8rem)}
.team h2{font:700 clamp(2.4rem,5.5vw,4.5rem)/1 var(--display);text-transform:uppercase;margin:0 0 .6rem}
.team .intro{max-width:34rem;margin:0 0 clamp(2rem,5vw,4rem);color:var(--mute)}
.people{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,6vw,5rem) clamp(.75rem,2vw,1.75rem)}
.person{margin:0}
.person .photo{background:var(--line);aspect-ratio:4/5;display:flex;align-items:flex-end;padding:.9rem;font:600 .8rem/1.2 "Barlow Semi Condensed",var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.person .photo{padding:0;overflow:hidden}
.person .photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:var(--photo)}
.person h3{font:600 clamp(1.7rem,3vw,2.4rem)/1 var(--display);text-transform:uppercase;margin:1rem 0 .2rem}
.person .role{font:600 .85rem/1.3 "Barlow Semi Condensed",var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 .8rem}
.person p.bio{margin:0;max-width:30rem}
.p1{grid-column:1/6}
.p2{grid-column:8/13;margin-top:clamp(0rem,8vw,7rem)}
.p3{grid-column:2/7}
.p4{grid-column:8/13;margin-top:clamp(0rem,5vw,4rem)}
.p5{grid-column:1/6}
.p6{grid-column:7/12;margin-top:clamp(0rem,6vw,5rem)}
.person .creds{font:500 .95rem/1.3 var(--text);color:var(--mute);margin:0 0 .9rem}
.person p.bio{margin:0 0 .8rem;font-size:1.05rem}
.person .fun{margin:1.1rem 0 0;font-size:1rem}
.person .fun b{display:block;font:600 .8rem/1.3 "Barlow Semi Condensed",var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.2rem}
.person blockquote{margin:1.1rem 0 0;padding-left:1rem;border-left:3px solid var(--ink);font:500 1.35rem/1.15 var(--display);text-transform:uppercase}
.mission{grid-column:4/13;margin:2rem 0 0;max-width:42rem;color:var(--mute);font-size:1.05rem}
@media (max-width:820px){.mission{grid-column:1/13}}
@media (max-width:760px){.p1,.p2,.p3,.p4,.p5,.p6{grid-column:1/13;margin-top:0}}

/* approach */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(.75rem,2vw,1.75rem);border-top:1px solid var(--line);padding:1.4rem 0 2.2rem}
.steps li::before{content:counter(s);grid-column:1/2;font:300 clamp(2rem,4vw,3.2rem)/1 var(--display);color:var(--accent)}
.steps h3{grid-column:2/7;margin:0;font:600 clamp(1.8rem,3.4vw,2.8rem)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.steps p{grid-column:7/13;margin:0;max-width:34rem}
.steps li:nth-child(even) h3{grid-column:3/8}
.steps li:nth-child(even) p{grid-column:8/13}
@media (max-width:760px){.steps h3,.steps li:nth-child(even) h3{grid-column:2/13}.steps p,.steps li:nth-child(even) p{grid-column:2/13;margin-top:.6rem}}

/* contact */
.contact{background:var(--ink);color:var(--bg);padding:clamp(4rem,9vw,8rem) 0 2rem}
.contact h2{font-size:clamp(3rem,11vw,9rem);line-height:.9;grid-column:1/12;margin-bottom:clamp(2rem,5vw,4rem);letter-spacing:0}
.contact .col{grid-column:span 4;font-family:var(--display);font-size:1.05rem;line-height:1.5}
.contact .col b{display:block;font-weight:600;margin-bottom:.3rem;color:var(--bg);opacity:.7}
.contact a{text-underline-offset:.25em}
.contact .col:first-of-type{grid-column:1/5}
@media (max-width:760px){.contact .col,.contact .col:first-of-type{grid-column:1/13;margin-bottom:1.5rem}}
.cta{display:inline-block;margin-top:.5rem;font:700 italic clamp(1.6rem,3.6vw,2.6rem)/1.1 var(--display);letter-spacing:0;text-transform:uppercase;text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:.15rem}
.cta:hover{opacity:.7}
.contact .cta{border-bottom-color:currentColor}
.contact :focus-visible{outline-color:var(--bg)}
.fine{margin-top:clamp(3rem,7vw,6rem);font:400 .9rem/1.4 var(--display);opacity:.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* inner pages */
.page-hero{padding-top:clamp(1.5rem,6vw,5rem);padding-bottom:clamp(2.5rem,6vw,5rem)}
.page-hero .eyebrow{grid-column:1/13;margin:0 0 1rem;font:600 .85rem/1.4 "Barlow Semi Condensed",var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.page-hero h1{grid-column:1/13;font-size:clamp(2.6rem,9vw,8rem)}
.page-hero .hero-note{grid-column:1/9;margin-top:clamp(1.5rem,4vw,3rem)}
@media (max-width:820px){.page-hero .hero-note{grid-column:1/13}}
.prose{padding:clamp(3rem,7vw,6rem) 0;border-top:1px solid var(--line)}
.prose h2{grid-column:1/5;margin:0 0 1.5rem;font:700 clamp(1.9rem,3.6vw,3rem)/1 var(--display);text-transform:uppercase}
.prose .body{grid-column:5/13;max-width:42rem}
.prose .body p{margin:0 0 1.1rem}
.prose .body ul{margin:0 0 1.1rem;padding-left:1.2rem}
.prose .body li{margin:0 0 .4rem}
@media (max-width:820px){.prose h2,.prose .body{grid-column:1/13}}
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.linklist li{border-bottom:1px solid var(--ink)}
.linklist a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;text-decoration:none;font:600 clamp(1.4rem,3vw,2.2rem)/1.1 var(--display);text-transform:uppercase}
.linklist a span{font:500 1rem/1.3 var(--text);text-transform:none;color:var(--mute)}
.linklist a:hover{color:var(--deep)}
.sitelinks{margin-top:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(.75rem,2vw,1.75rem);font-family:var(--display);font-size:1.05rem;line-height:1.7}
.sitelinks .col{grid-column:span 4}
.sitelinks b{display:block;font-weight:600;margin-bottom:.3rem;opacity:.7}
.sitelinks a{text-decoration:none}
.sitelinks a:hover{text-decoration:underline}
.contact .sitelinks .col,.contact .sitelinks .col:first-of-type{grid-column:span 3}
@media (max-width:1000px){.contact .sitelinks .col,.contact .sitelinks .col:first-of-type{grid-column:span 6;margin-bottom:1.5rem}}
@media (max-width:760px){.contact .sitelinks .col,.contact .sitelinks .col:first-of-type{grid-column:1/13;margin-bottom:1.5rem}}
@media (max-width:560px){.linklist a span{display:none}}

/* ---- aligned layout overrides ---- */
h1 span:nth-child(2),h1 span:nth-child(3),.move-h span:nth-child(2){padding-left:0}
.hero-note{grid-column:1/8}
.disc button[aria-expanded=true] .name{padding-left:0}
.disc .panel p{margin-left:0}
.s1,.s3{grid-column:1/7;aspect-ratio:3/2;margin-top:0}
.s2,.s4{grid-column:7/13;aspect-ratio:3/2;margin-top:0}
.s5{grid-column:1/13;aspect-ratio:21/9;margin-top:0}
.s2 img{object-position:center 15%}
.pair .a{grid-column:1/7;margin-top:0}
.pair .b{grid-column:7/13;margin-top:0}
.people{align-items:start}
.p1,.p2,.p3,.p4,.p5,.p6{grid-column:span 4;margin-top:0}
.steps h3,.steps li:nth-child(even) h3{grid-column:2/7}
.steps p,.steps li:nth-child(even) p{grid-column:7/13}
.mission{grid-column:4/13}
.prose-person{grid-column:7/13}
@media (max-width:1000px){.p1,.p2,.p3,.p4,.p5,.p6{grid-column:span 6}}
@media (max-width:820px){.hero-note,.mission{grid-column:1/13}}
@media (max-width:760px){.s1,.s2,.s3,.s4,.s5,.pair .a,.pair .b,.p1,.p2,.p3,.p4,.p5,.p6,.prose-person{grid-column:1/13}.steps h3,.steps li:nth-child(even) h3,.steps p,.steps li:nth-child(even) p{grid-column:2/13}}