
:root{
  --ink:#16181C; --paper:#F5F3EE; --white:#FFFFFF; --slate:#3E4148; --mist:#6B6E74; --linen:#D6D2C8; --linen-2:#E3DFD5;
  --elm:#1F4D3A; --elm-light:#8FB8A3; --dark-line:#33363C;
  --serif:'Iowan Old Style','Crimson Pro',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --photo-filter: grayscale(1) contrast(1.04);
  --gutter: clamp(20px, 5.5vw, 80px);
  color-scheme: light;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-0.005em;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.serif{font-family:var(--serif)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--elm);font-weight:600}
.eyebrow.on-dark{color:var(--elm-light)}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--slate)}
.muted{color:var(--mist)}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.rule{height:1px;background:var(--linen)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:2px;font-size:15px;font-weight:500;border:1px solid var(--ink);transition:background .2s,color .2s,border-color .2s;cursor:pointer;line-height:1.2}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--elm);border-color:var(--elm)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:var(--white)}
.btn.outline-light{border-color:var(--elm-light);color:var(--paper)}
.btn.outline-light:hover{background:rgba(255,255,255,.08)}
.link{font-size:14px;font-weight:600;color:var(--elm);display:inline-flex;align-items:center;gap:6px}
.link:hover{gap:10px}
.link.on-dark{color:var(--elm-light)}
.photo{position:relative;overflow:hidden;background:#2B2D31;border-radius:2px}
.photo img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform .8s ease}
.photo:hover img{transform:scale(1.025)}
.photo.color img{filter:none}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.mosaic .photo:first-child{grid-column:1/-1;aspect-ratio:16/9}
.mosaic .photo{aspect-ratio:4/3}
.logo-chip{height:64px;display:flex;align-items:center;justify-content:flex-start;padding:10px 12px;border:1px solid var(--linen-2);border-radius:2px;background:var(--white)}
.logo-chip.dark{background:var(--ink);border-color:var(--ink)}
.logo-chip img{max-height:100%;width:auto;max-width:200px;filter:none}
.co.wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.co.wide .photo{aspect-ratio:auto;min-height:300px;border-radius:0}
.co.wide .photo img{position:absolute;inset:0}
@media (max-width:900px){.co.wide{grid-template-columns:1fr}.co.wide .photo{aspect-ratio:16/10;min-height:0}.co.wide .photo img{position:static}}
.co .fields{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;color:var(--slate);padding-top:12px;border-top:1px solid var(--linen)}
.co .fields b{color:var(--mist);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.flag{background:#FFF4D6;color:#6B4E00;padding:0 4px;border-radius:2px;font-size:.92em}
.photo .credit{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);pointer-events:none}
.grid{display:grid;gap:32px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g57{grid-template-columns:5fr 7fr}
.g75{grid-template-columns:7fr 5fr}
.section{padding-block:clamp(64px,8vw,112px)}
.dark{background:var(--ink);color:var(--paper)}
.dark .lede{color:#C9CCD1}
.elm{background:var(--elm);color:var(--paper)}
.card{background:var(--white);border:1px solid var(--linen-2);border-radius:2px;display:flex;flex-direction:column}
.card .body{padding:28px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.num{width:28px;height:2px;background:var(--elm);margin-top:14px}
.dark .num{background:var(--elm-light)}
.stat .v{font-family:var(--serif);font-size:clamp(28px,2.6vw,36px);line-height:1.1}
.stat .l{font-size:13px;color:var(--mist);letter-spacing:.03em;margin-top:6px}
.hidden-page{display:none}
[data-group],#criteria{scroll-margin-top:110px}
.page{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reveal{opacity:1}
@media (prefers-reduced-motion:reduce){.page{animation:none}.photo img{transition:none}}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(245,243,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linen)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.nav .logo img{height:44px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:36px;font-size:14px;font-weight:500;letter-spacing:.02em}
.nav ul a{padding-bottom:4px;border-bottom:2px solid transparent}
.nav ul a.active{color:var(--elm);border-color:var(--elm)}
.nav ul a:hover{color:var(--elm)}
.nav .cta{padding:11px 18px;border:1px solid var(--ink);border-radius:2px}
.nav .cta:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:8px 0 20px}
.mobile-menu a{padding:12px 0;border-bottom:1px solid var(--linen);font-size:16px;font-weight:500}
.mobile-menu.open{display:flex}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:clamp(56px,7vw,96px)}
.hero h1{font-size:clamp(40px,5.2vw,74px);line-height:1.02}
.hero .photo{aspect-ratio:4/3.3;max-width:100%}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* page header */
.page-head{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end;padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.page-head h1{font-size:clamp(38px,4.6vw,64px);line-height:1.04}
.page-head .lede{padding-bottom:6px}

/* list rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:44px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--linen)}
.row:last-child{border-bottom:1px solid var(--linen)}
.row h3{font-size:24px}
.dark .row{border-color:var(--dark-line)}

/* principles */
.pillar{padding-top:24px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:12px}
.pillar h3{font-size:26px}
.dark .pillar{border-color:var(--paper)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--linen)}
.step .n{font-family:var(--serif);font-size:15px;color:var(--elm);font-weight:500}
.step h4{font-size:20px}
.step p{font-size:14px;color:var(--slate)}

/* criteria */
.crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.crit .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:600;margin-bottom:10px}
.crit .big{font-family:var(--serif);font-size:30px;line-height:1.2}
.crit ul{list-style:none;padding:0;margin:0;line-height:1.9}

/* portfolio */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--linen);border-radius:2px;padding:10px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--slate)}
.filters button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pf-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.pf-head h2{font-size:clamp(28px,3vw,36px)}
.co .photo{aspect-ratio:16/10}
.co h3{font-size:24px}
.co .meta{display:flex;flex-direction:column;gap:4px}
.co p{font-size:14.5px;color:var(--slate)}
.co .facts{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--mist);padding-top:8px;border-top:1px solid var(--linen)}
.co .facts b{color:var(--ink);font-weight:600}

/* team */
.person .photo{aspect-ratio:4/4.6}
.person h3{font-size:26px}
.person .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.person p{font-size:14.5px;color:var(--slate)}
.person .edu{font-size:13px;color:var(--mist);padding-top:10px;border-top:1px solid var(--linen)}
.initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:72px;color:#9DA1A8;background:linear-gradient(160deg,#2B2D31,#6B6E74)}

/* quote */
.quote{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.3;font-style:italic}
.quote-by{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-top:18px}

/* contact form */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);font-weight:600}
.form input,.form select,.form textarea{font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--linen);border-radius:2px;background:var(--white);color:var(--ink);letter-spacing:0;text-transform:none}
.form textarea{min-height:140px;resize:vertical}
.form .full{grid-column:1/-1}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--elm);outline-offset:1px;border-color:var(--elm)}

/* footer */
footer{padding-block:48px 40px;border-top:1px solid var(--linen)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;font-size:14px}
.foot h5{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a:hover{color:var(--elm)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;margin-top:36px;border-top:1px solid var(--linen);font-size:12.5px;color:var(--mist)}

@media (max-width:960px){
  .elm > .wrap{grid-template-columns:1fr !important;gap:28px !important}
  .g3,.g4,.foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero,.page-head,.g57,.g75{grid-template-columns:1fr}
  .page-head{align-items:start}
  .nav ul{display:none}
  .burger{display:block}
}
@media (max-width:600px){
  .g2,.g3,.g4,.crit,.form,.foot{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav .logo img{height:36px}
  .hero-actions .btn{width:100%}
  .row{grid-template-columns:40px 1fr;gap:14px}
}

.skip-link{position:absolute;left:16px;top:-100px;background:var(--paper);padding:12px;z-index:100}.skip-link:focus{top:12px}
.burger:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--elm);outline-offset:4px}
.btn:disabled{opacity:.55;cursor:wait}.form-status{font-size:15px;letter-spacing:0;text-transform:none;color:var(--slate)}
.form-status[data-error="true"]{color:#9e2626}.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page{animation:none}}
