/* SiteComms — header, menu and the phone/tablet layer.
   Breakpoints: phone < 700, tablet 700–1099, desktop 1100+. The header and menu follow
   Site Programs V4 and SiteProductions: the pill never moves, one button opens and closes. */

/* ============ line breaks (every size) ============ */
.h2,h3,blockquote,.sv-t,.pr-n,.pn,.ct-n,.lead-n,.nx-n,.pm-card b,.pm-list b{text-wrap:balance}
p,li,.sv-d,.pm-card span,.pm-list span,.pb,.cf-v,.qw-l{text-wrap:pretty}
.nw{white-space:nowrap;display:inline !important;margin:0 !important;padding:0 !important;font:inherit !important;color:inherit !important;letter-spacing:inherit !important}

/* ============ header ============ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.hdr-in{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.mark{justify-self:start;font-weight:650;font-size:24px;line-height:.9;letter-spacing:-.04em;color:#000;text-decoration:none}
.pill{grid-column:2;justify-self:center;position:relative;display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#fafafa;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.pill>.nv{transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),opacity var(--t-base) var(--e-out)}
.menu-btn{position:relative;display:grid;place-items:center;width:40px;height:36px;padding:0;border:0;border-radius:999px;background:#ffffff;color:#000;cursor:pointer;font:inherit;transition:background var(--t-fast) var(--e-out)}
.menu-btn:hover{background:#f2f2f2}
.menu-btn svg{grid-area:1/1;transition:opacity 160ms var(--e-out),transform var(--t-base) var(--e-kt)}
.menu-btn .ic-x{opacity:0;transform:rotate(-45deg) scale(.7)}
.mb-t{display:none}
.call{grid-column:3;justify-self:end;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#000;color:#fff;transition:background var(--t-base) var(--e-out),transform var(--t-fast) var(--e-out)}
.call:active{transform:scale(.94)}
.call-dot{position:absolute;top:9px;right:9px;width:6px;height:6px;background:#F46A22}
.js .call-dot{transform:scale(0);opacity:0;transition:transform 420ms cubic-bezier(.34,1.56,.64,1),opacity 160ms linear}
.js.nudge .call-dot{transform:scale(1);opacity:1}
.js.nudge .call-dot::after{content:"";position:absolute;inset:0;background:inherit;animation:dot-ring 1.4s cubic-bezier(.22,1,.36,1) 420ms 2}
@keyframes dot-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.js .call-dot{transition:none}.js.nudge .call-dot::after{animation:none}}

/* open: the header rides above the menu; links fade, the icon turns to a cross in place */
body.menu-open .hdr{z-index:95;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.menu-open .hdr::after{opacity:0 !important}
body.menu-open .pill>.nv{opacity:0;pointer-events:none}
body.menu-open .menu-btn .ic-m{opacity:0;transform:rotate(45deg) scale(.7)}
body.menu-open .menu-btn .ic-x{opacity:1;transform:none}

/* ============ menu (desktop) ============ */
.mn-d{padding:88px 60px 84px;min-height:100%}
.mn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding-top:40px}
.mn-links{grid-column:1/span 7}
.mn-aside{grid-column:9/span 4;padding-top:6px}
.mn-desk{background:#f7f7f7;border-radius:20px;padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mn-em{overflow-wrap:anywhere}
.mn-foot{position:absolute;left:60px;right:60px;bottom:0;height:84px;border-top:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:22px;font-weight:650;font-size:14px;letter-spacing:-.02em}
@media (min-width:900px) and (max-width:1199px){
  .mn-links{grid-column:1/span 6}
  .mn-aside{grid-column:8/span 5}
  .mn-links a>span{font-size:60px !important}
}

/* ============ tablet + phone shared (< 900): V4 / SiteProductions mobile header ============ */
@media (max-width:899px){
  .hdr{-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
  .hdr-in{height:66px;grid-template-columns:1fr auto auto;gap:8px}
  .mark{font-size:21px}
  .pill{grid-column:2;padding:0;background:transparent;box-shadow:none}
  .menu-btn{width:auto;height:40px;padding:0 18px;background:#f4f4f4;font-family:'Inter',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.01em}
  .menu-btn:hover{background:#ececec}
  .menu-btn svg{display:none}
  .mb-t{display:grid}
  .mb-o,.mb-c{grid-area:1/1;transition:opacity 160ms var(--e-out),transform var(--t-base) var(--e-kt)}
  .mb-c{opacity:0;transform:translateY(6px)}
  body.menu-open .mb-o{opacity:0;transform:translateY(-6px)}
  body.menu-open .mb-c{opacity:1;transform:none}
  .call{width:40px;height:40px}
  .call svg{width:16px;height:16px}
  .call-dot{top:8px;right:8px;width:5px;height:5px}

  .mn-m{padding:66px 15px 28px;box-sizing:border-box}
  .mn-m .mn-links{padding:22px 0 0}
  .mn-m .mn-links a{padding:4px 0 !important}
  .mn-m .mn-links a>span{font-size:clamp(44px,13vw,56px) !important;line-height:1.02 !important}
  .mn-call{align-self:flex-start;display:inline-flex;align-items:center;gap:11px;height:50px;margin-top:28px;padding:0 24px;border-radius:999px;background:#000;color:#fff;text-decoration:none;font-family:'Inter',sans-serif;font-weight:500;font-size:17px}
  .mn-m .mn-aside{margin-top:auto;padding-top:44px;display:flex;flex-direction:column}
  .mn-h{margin:0 0 12px;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;color:#8a8f8f}
  .mn-h+*{margin-bottom:28px}
  .mn-deskm{display:grid;gap:10px}
  .mp{display:flex;align-items:center;gap:14px;padding:10px;border-radius:15px;background:#f7f7f7}
  .mp img{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;display:block}
  .mp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mp-n{font-weight:650;font-size:16px;letter-spacing:-.02em}
  .mp-tel{font-weight:650;font-size:16px;color:#000;text-decoration:none;font-variant-numeric:tabular-nums}
  .mp-em{font-family:'Inter',sans-serif;font-size:13px;color:#5f5855;text-decoration:none;overflow-wrap:anywhere}
  .mn-net{display:flex;flex-wrap:wrap;gap:8px 16px;font-weight:650;font-size:14px;letter-spacing:-.02em;color:rgba(0,0,0,.55)}
  body.menu-open .mn-call{animation:rise var(--t-slow) var(--e-out) 160ms backwards}
}

/* ============ tablet (700–1099) ============ */
@media (min-width:700px) and (max-width:1099px){
  .wrap{padding-left:32px !important;padding-right:32px !important}
  .mn-d{padding-left:32px;padding-right:32px}.mn-foot{left:32px;right:32px}
  .h1{font-size:clamp(64px,8.6vw,84px) !important}
  .h2{font-size:clamp(40px,5vw,48px) !important}
  main>section:not(:first-child){padding-top:112px !important}
  /* roles: three cards, quieter */
  .rl{gap:14px !important}
  .rl-c{padding:24px !important;gap:44px !important;min-height:0 !important}
  .rl-c svg{width:44px;height:44px}
  .rl-t{font-size:26px !important}
  .rl-c p{font-size:15px !important}
  /* quotes and people */
  .qt-q{font-size:22px !important}
  .qt-in{padding:22px !important}
  .pp-n{font-size:88px !important}
  .pp-l{font-size:19px !important}
  .pp-ten{padding:24px !important}
  .sv-t{font-size:34px !important}
  .sc .sv-t{font-size:28px !important}
  .sv-d{font-size:17px !important}
}
@media (min-width:700px) and (max-width:899px){
  .rl{grid-template-columns:minmax(0,1fr) !important}
  .rl-c{flex-direction:row !important;align-items:flex-start;gap:24px !important}
  .qt{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -32px;padding:0 32px;scroll-padding:0 32px;scrollbar-width:none;gap:14px !important}
  .qt::-webkit-scrollbar{display:none}
  .qt>figure{flex:0 0 46%;scroll-snap-align:start}
}

/* ============ map: one strategy per size ============ */
.pm-lbl,.pm-all-m{display:none}
/* desktop 1100–1399: the west cards are clamped inside the frame */
@media (min-width:1100px) and (max-width:1399px){
  .pm-card{padding:14px 16px 15px !important}
  .pm-card b{font-size:16px}
  .pm-card span{font-size:13px}
  .pm-card:nth-of-type(1){left:max(16px,calc(20.03% - 248px)) !important;transform:translate(0,-100%) !important;margin:-16px 0 0 0 !important;width:min(236px,calc(20.03% - 30px)) !important}
  .pm-card:nth-of-type(2){width:268px !important}
  .pm-card:nth-of-type(3){width:250px !important}
}
/* tablet and phone: pins and place names on the map, the three projects underneath */
@media (max-width:1099px){
  .pm-card{display:none !important}
  .pm-town{display:none}
  .pm-lbl{display:block;position:absolute;left:var(--x);transform:translate(10px,-50%);z-index:1;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(15,26,31,.08);font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:1;color:#000;white-space:nowrap;margin-top:-30px}
  .pm-lbl-r{transform:translate(calc(-100% - 10px),-50%);margin-top:0}
  .pm-list{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
  .pm-list>div{padding:20px 20px 22px !important;border:0 !important;border-radius:15px;background:#f7f7f7}
  .pm-list b{font-size:19px !important}
}
@media (max-width:699px){
  /* the map crops to 3:2 around the pins; pin x is re-mapped to the crop (--xm) */
  .pm{aspect-ratio:3 / 2 !important;border-radius:15px !important}
  .pm>img{object-fit:cover !important;object-position:15% 50% !important;width:100% !important}
  .pm-pin,.pm-lbl{left:var(--xm) !important}
  .pm-pin{width:12px !important;height:12px !important;margin:-6px 0 0 -6px !important;box-shadow:0 0 0 2.5px #fff,0 2px 6px rgba(0,0,0,.2) !important}
  .pm-lbl{font-size:12px;padding:5px 8px;transform:translate(-6px,-50%)}
  .pm-lbl-r{transform:translate(calc(-100% + 6px),-50%);margin-top:22px}
  .pm-all{display:none !important}
  .pm-list{grid-template-columns:minmax(0,1fr);gap:10px}
  .pm-list>div{padding:18px 18px 20px !important}
  .pm-list b{font-size:18px !important}
  .pm-list span{margin-top:8px !important}
  .pm-all-m{display:inline-flex;align-items:center;gap:11px;height:47px;margin-top:20px;padding:0 24px;border-radius:999px;background:#000;color:#fff !important;text-decoration:none;font-family:'Inter',sans-serif;font-weight:500;font-size:17px}
}


/* ============ touch and narrow: the services slider swipes natively; each card says what it is ============ */
@media (max-width:899px), (hover:none){
  #services .stack>div:last-child>.sx-btn{display:none !important}
  /* services slider: native swipe with a peek; the line under each title says what it is */
  .sx-vp{margin:28px calc(-1 * var(--gut,16px)) 0 !important;padding:0 var(--gut,16px);overflow-x:auto !important;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut,16px);scrollbar-width:none;overscroll-behavior-x:contain}
  .sx-vp::-webkit-scrollbar{display:none}
  .sx-track{--cw:min(78vw,320px) !important;transform:none !important;transition:none !important;gap:12px !important;padding-right:var(--gut,16px)}
  .sx{scroll-snap-align:start;border-radius:15px !important;aspect-ratio:4 / 5 !important}
  .sx-p{display:none !important}
  .sx::after{height:70% !important;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0)) !important}
  .sx-t{left:20px !important;right:20px !important;bottom:20px !important;font-size:26px !important;line-height:1.02 !important}
  .sx-t::after{content:attr(data-d);display:block;margin-top:10px;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:1.4;letter-spacing:0;color:rgba(255,255,255,.82)}

}
@media (max-width:699px){ #services .stack>div:last-child{display:none !important} :root{--gut:16px} }
@media (min-width:700px) and (max-width:1099px){ :root{--gut:32px} .sx-track{--cw:300px !important} .sx-t,.sx-n{font-size:30px !important;left:24px !important;right:24px !important} .sx-p{padding:24px !important} .sx-d{font-size:19px !important} }
@media (min-width:1100px){ :root{--gut:60px} }
@media (min-width:1100px) and (hover:none){ .sx-vp{margin-right:calc(50% - 50vw) !important;margin-left:0 !important;padding-left:0} }

/* ============ tablet portrait (700–899): sensible groupings instead of one tall column ============ */
@media (min-width:700px) and (max-width:899px){
  .qw .g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;row-gap:0 !important;gap:0 24px !important}
  .qw-n{font-size:52px !important}
  .pp{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 16px !important}
  .pp-ten{grid-column:1/-1;flex-direction:row !important;align-items:flex-end;justify-content:space-between !important}
  #people .g3:not(.pp){grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:40px 16px !important}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .pn{font-size:21px !important}
  .ct{grid-template-columns:minmax(0,1fr) !important}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .sv,.sv:nth-child(even){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px !important;padding:12px 28px 12px 12px !important}
  .sv:nth-child(even){padding:12px 12px 12px 28px !important}
  .sv:nth-child(even) .sv-m{order:2 !important}
  .cfs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 24px !important}
}

/* ============ phone (< 700) ============ */
@media (max-width:699px){
  .wrap{padding-left:16px !important;padding-right:16px !important}
  .br-d{display:none}
  /* type: two sizes of headline, never an orphan word */
  .h1{font-size:clamp(36px,10.4vw,48px) !important;line-height:.98 !important;letter-spacing:-.035em !important}
  .h2{font-size:clamp(30px,8.6vw,36px) !important;line-height:1.04 !important}
  main>section:first-child{padding-top:20px !important}
  main>section:first-child>p{margin-top:18px !important;font-size:18px !important;line-height:1.45 !important}
  main>section:not(:first-child){padding-top:80px !important}
  main>section.mq-sec{padding-top:44px !important}
  .stack{gap:22px !important}
  [style*="margin-top: 48px"]{margin-top:28px !important}
  [style*="text-align: center"].h2{text-align:left !important}

  /* hero */
  .hero-media{min-height:0 !important;aspect-ratio:4 / 5;margin-top:26px !important;border-radius:15px !important}
  .hero-media figcaption{left:12px !important;bottom:12px !important;height:30px !important;font-size:13px !important}

  /* logos: larger, tighter, no rules */
  .mq{padding:22px 0 !important;margin-top:14px !important}
  .mq-track>div{gap:52px !important;padding-right:52px !important}
  .mq-track img{zoom:.8}

  /* roles: compact, icon beside the words */
  .rl{gap:10px !important}
  .rl-c{flex-direction:row !important;align-items:flex-start;gap:18px !important;min-height:0 !important;padding:20px 20px 22px !important;border-radius:15px !important}
  .rl-c svg{flex:none;width:36px;height:36px}
  .rl-k{margin-bottom:6px !important;font-size:13px !important}
  .rl-t{font-size:22px !important;line-height:1.1 !important}
  .rl-c p{margin-top:6px !important;font-size:15px !important;line-height:1.45 !important;max-width:none !important}

  /* the dark proof card */
  .qw{padding:20px 20px 24px !important;border-radius:15px !important}
  .qw .h2{font-size:clamp(28px,8vw,32px) !important;margin-top:14px !important}
  .qw-top{gap:20px !important}
  .qw-top figure{border-radius:10px !important}
  .qw-top p{font-size:15px !important}
  .qw .g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 14px !important;margin-top:24px !important;row-gap:0 !important}
  .qw .g3>div{padding-top:14px !important;gap:8px !important}
  .qw-n{font-size:clamp(30px,9vw,38px) !important}
  .qw .g3>div>span:last-child{font-size:13px !important;line-height:1.3 !important;font-weight:500 !important}

  /* quotes: one swipeable row */
  .qt{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scroll-padding:0 16px;scrollbar-width:none;gap:12px !important}
  .qt::-webkit-scrollbar{display:none}
  .qt>figure{flex:0 0 min(82vw,330px);scroll-snap-align:start;aspect-ratio:4 / 5 !important;border-radius:15px !important}
  .qt-in{padding:22px !important}
  .qt-q{font-size:22px !important;line-height:1.18 !important}

  /* people on home: two portraits side by side, the standard underneath */
  .pp{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:24px 12px !important}
  .pp>div:not(.pp-ten){gap:12px !important}
  .pp>div:not(.pp-ten) img{border-radius:12px !important}
  .pp .pp-name{font-size:18px !important}
  .pp .pp-role{font-size:13px !important;line-height:1.35}
  .pp-ten{grid-column:1/-1;padding:22px !important;gap:24px !important;border-radius:15px !important}
  .pp-n{font-size:72px !important}
  .pp-l{font-size:18px !important;margin-top:12px !important}
  .pp-ten .btn{align-self:flex-start !important}

  /* closing card */
  .cta-box{padding:24px 22px 26px !important;border-radius:15px !important}
  .cta-box .h2{font-size:clamp(30px,8.8vw,36px) !important}
  .cta-box .stack{margin-top:24px !important}
  .cta-box .btn{height:50px !important;font-size:17px !important;padding:0 24px !important}

  /* footer */
  footer.wrap{padding-top:72px !important}
  footer.wrap>.stack>span:first-child{font-size:40px !important}
  footer .dots{height:110px}

  /* ---- services page ---- */
  .sv,.sc{border-radius:15px !important}
  .sv{padding:10px 10px 22px !important;gap:18px !important}
  .sc{padding:10px !important}
  .sv-m img,.sc-m img,.sv img,.sc img{aspect-ratio:16 / 11 !important;border-radius:10px !important}
  .sv-b{padding:0 10px !important}
  .sc .sv-b{padding:14px 10px 12px !important}
  .sv-t,.sc .sv-t{font-size:28px !important}
  .sv-d,.sc .sv-d{font-size:16px !important;margin-top:10px !important}
  .sv-l{margin-top:18px !important;font-size:15px !important}
  .sv-l li{padding:11px 0 !important}

  /* ---- projects list: name, then place and client on one line, then our role ---- */
  .pr{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:0 !important;padding:18px 0 19px !important}
  .pr-n{flex-basis:100%;font-size:21px !important;line-height:1.12 !important;margin-bottom:6px}
  .pr-c{font-size:14px !important}
  .pr-n+.pr-c::after{content:"·";margin:0 6px;color:#9a9c9c}
  .pr-r{flex-basis:100%;margin-top:4px;font-size:14px !important}
  a.pr .pr-n::after{content:"";display:inline-block;width:9px;height:9px;margin-left:8px;vertical-align:.18em;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,2px)}

  /* ---- people page: two across ---- */
  #people .g3:not(.pp){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 12px !important}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 12px !important}
  .pc img{border-radius:12px !important}
  .pn{font-size:18px !important;margin-top:12px !important}
  .pt{font-size:13px !important;line-height:1.35}
  .pb{font-size:14px !important;margin-top:8px !important;line-height:1.45 !important}

  /* ---- contact ---- */
  .ct{gap:12px !important}
  .ct-f{padding:22px 20px 24px !important;gap:24px !important;border-radius:15px !important}
  .ct-g{gap:22px !important}
  .fl input,.fl textarea{font-size:19px !important}
  .ct-d,.ct-m{border-radius:15px !important}
  .ct-d{padding:20px !important;gap:18px !important}
  .ct-h{font-size:26px !important}
  .ct-pp{gap:12px !important}
  .ct-em{overflow-wrap:anywhere;font-size:13px !important}
  .ct-tel{font-size:16px !important}
  .ct-m{padding:14px 14px 14px 20px !important}
  .ct-mail{font-size:17px !important}

  /* ---- case pages ---- */
  figure.vg[style*="16 / 7"]{aspect-ratio:4 / 3 !important;margin-top:24px !important;border-radius:15px !important}
  .cfs{margin-top:24px !important}
  .cf{padding:12px 0 !important}
  .cf-v{font-size:16px !important}
  .imp{gap:8px !important;margin-top:24px !important}
  .imp span{height:36px !important;padding:0 14px !important;font-size:14px !important}
  .g2{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
  .cw{border-radius:12px !important}
  .lead{grid-template-columns:120px minmax(0,1fr) !important;gap:16px !important;align-items:center !important;border-radius:15px !important}
  .lead-n{font-size:20px !important}
  .lead-p{font-size:15px !important;margin-top:8px !important}
  .lead-tel{font-size:17px !important;margin-top:10px !important;padding-top:10px !important}
  .wl{font-size:28px !important}
  .nx{padding:24px 0 !important}
}
@media (max-width:374px){
  .h1{font-size:36px !important}
  .qw .g3{grid-template-columns:minmax(0,1fr) !important;row-gap:14px !important}
}