/* ==========================================================================
   Stabach Architects
   Static styles. State-driven values (opacity, transforms, hover colors set
   from the component logic) stay inline in the template as {{ bindings }}.
   ========================================================================== */

/* Tokens ----------------------------------------------------------------- */
/* Brand colours (Stabach brand guidelines) and the tints derived from them */
:root{
  --color-ink:#292E27;          /* Dark gray: headings, body text */
  --color-ink-rgb:41,46,39;     /* same, for rgba() */
  --color-body:#4B5048;         /* secondary body text */
  --color-navy:#364059;         /* Navy */
  --color-rust:#C45500;         /* Rust: accents, CTA background */
  --color-sand:#E7E3DA;         /* image placeholder background */
  --color-cream:#F6F3EE;        /* Markets band */
  --shade-rgb:10,16,24;         /* near-black for gradients and the popup backdrop */
  --overlay-navy:rgba(10,31,68,.65);  /* card hover wash (Team + Portfolio) */
  --overlay-fade:.3s ease;
}
/* Spacing: --container-width is the max content width, --gutter the side padding
   on every section, --section-space the top/bottom padding of content sections.
   --section-pad (smaller on narrow screens) sets the anchor scroll offset and the
   footer's inner spacing. */
:root{--container-width:1512px;--gutter:clamp(20px,5vw,72px);--section-space:64px;--section-pad:64px}
@media (max-width:1023px){:root{--section-pad:48px}}
@media (max-width:767px){:root{--section-pad:40px}}

/* Base ------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--color-ink);font-family:'Open Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--color-ink);text-decoration:none}
a:where(:hover){color:var(--color-rust)}
button{font-family:inherit}
:focus-visible{outline:1px solid var(--color-rust);outline-offset:4px}

/* Shared ----------------------------------------------------------------- */
.container{width:100%;max-width:var(--container-width);margin-inline:auto}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
section[id]:not(#top){scroll-margin-top:calc(100px - var(--section-pad))}

/* Nav -------------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:84px;padding:0 var(--gutter);background:transparent;transition:background .4s ease,box-shadow .4s ease}
.nav.is-solid{background:#FFFFFF;box-shadow:0 1px 0 rgba(var(--color-ink-rgb),.1)}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{position:relative;display:block;padding:9px;height:58px;width:198px;margin-left:-9px}
.nav-logo img{position:absolute;left:9px;top:9px;height:40px;width:auto;transition:opacity .5s ease}
/* "Menu" label + two-line icon; the 44px icon box keeps the original tap area and right alignment */
.burger{height:44px;margin-right:-8px;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.burger-label{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;line-height:1;transition:color .5s ease}
.burger-icon{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.burger-icon span{display:block;width:28px;height:1px;transition:background .5s ease}

/* Menu: slide-in panel from the right ---------------------------------- */
.menu-backdrop{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.menu-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
/* Hidden (and unfocusable) via visibility once the slide-out has finished */
.menu{position:fixed;top:0;right:0;z-index:1000;width:40vw;min-width:420px;max-width:600px;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--gutter) 40px clamp(32px,4vw,64px);background:#FFFFFF;color:var(--color-navy);box-shadow:-10px 0 40px rgba(0,0,0,.12);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.77,0,.175,1),visibility 0s linear .45s}
.menu.is-open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.77,0,.175,1),visibility 0s}
.menu :focus-visible{outline-color:var(--color-navy)}
/* Scroll lock while open; stable gutter keeps the page (and header) from shifting */
html.menu-open{overflow:hidden;scrollbar-gutter:stable}
/* Close button sits where the menu button is, top right */
.menu-bar{height:84px;flex:none;display:flex;align-items:center;justify-content:flex-end}
.menu-close{width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;position:relative}
.menu-close span{position:absolute;left:8px;top:21px;width:28px;height:1px;background:var(--color-navy)}
.menu-close span:first-child{transform:rotate(45deg)}
.menu-close span:last-child{transform:rotate(-45deg)}
.menu-nav{flex:1 0 auto;display:flex;align-items:center;padding:32px 0}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,28px)}
/* Hover: a thin underline draws in from the left (background-size), the link nudges right */
.menu-link{display:inline-block;padding-bottom:6px;color:var(--color-navy);font-weight:300;font-size:clamp(36px,3.6vw,56px);line-height:1.1;letter-spacing:-0.01em;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;opacity:0;transform:translateX(24px);transition:opacity .25s ease,transform .25s ease,background-size .35s ease}
.menu.is-open .menu-link{opacity:1;transform:none;transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1),background-size .35s ease}
/* Links come in one after another (60ms stagger) once the panel is mostly open */
.menu.is-open li:nth-child(1) .menu-link{transition-delay:.2s,.2s,0s}
.menu.is-open li:nth-child(2) .menu-link{transition-delay:.26s,.26s,0s}
.menu.is-open li:nth-child(3) .menu-link{transition-delay:.32s,.32s,0s}
.menu.is-open li:nth-child(4) .menu-link{transition-delay:.38s,.38s,0s}
.menu.is-open li:nth-child(5) .menu-link{transition-delay:.44s,.44s,0s}
.menu.is-open li:nth-child(6) .menu-link{transition-delay:.5s,.5s,0s}
/* Extra .menu-list li specificity so the stagger delays don't apply to hover */
.menu.is-open .menu-list li .menu-link:hover,.menu.is-open .menu-list li .menu-link:focus-visible{background-size:100% 1px;transform:translateX(6px);transition-delay:0s}
.menu-foot{flex:none;font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.menu-foot a{color:var(--color-navy)}
.menu-foot a:hover{color:var(--color-rust)}
@media (max-width:767px){
  .menu{width:100%;min-width:0;max-width:none;padding-left:var(--gutter)}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu.is-open{transition:none}
  .menu-backdrop,.menu-backdrop.is-open{transition:none}
  .menu-link,.menu.is-open .menu-link,.menu.is-open .menu-list li .menu-link:hover{transform:none;transition:opacity .2s linear,background-size 0s}
  .menu.is-open li .menu-link{transition-delay:0s}
}

/* 1. Hero: full-bleed image, centred text ------------------------------- */
.hero{position:relative;width:100%;height:100vh;height:100dvh;min-height:600px;overflow:hidden;background:var(--color-ink);display:flex;align-items:center;justify-content:center}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;animation:hero-settle 2.4s cubic-bezier(.2,.6,.2,1) both}
@keyframes hero-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.55) 100%)}
.hero-content{position:relative;z-index:2;width:100%;padding:0 var(--gutter);text-align:center;color:#FFFFFF;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero-headline{margin:0 auto;max-width:900px;font-weight:300;font-size:clamp(40px,5.5vw,80px);line-height:1.1;letter-spacing:-0.01em;text-wrap:balance}
.hero-subtitle{margin:24px auto 0;max-width:640px;font-size:20px;line-height:1.5;color:rgba(255,255,255,.85);text-wrap:balance}
/* Down arrow (same thin line style as the site's other arrows) that gently bobs */
.hero-scroll{position:absolute;left:50%;bottom:28px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:56px;margin-left:-22px;color:#FFFFFF;opacity:.85;transition:opacity .3s ease}
.hero-scroll:hover{color:#FFFFFF;opacity:1}
.hero-scroll svg{animation:hero-scroll 2.2s ease-in-out infinite}
@keyframes hero-scroll{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@media (max-width:767px){
  .hero-subtitle{font-size:18px}
  .hero-scroll{bottom:16px}
}
@media (prefers-reduced-motion:reduce){.hero-image,.hero-scroll svg{animation:none}}

/* 2. Firm: centred reading column ----------------------------------------- */
.intro{background:#FFFFFF;color:var(--color-ink);padding:var(--section-space) var(--gutter)}
.intro-col{max-width:880px;margin-inline:auto}
.intro-block+.intro-block{margin-top:22px}
.intro-head{text-align:center}
.intro-heading{margin:0;font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.2;letter-spacing:-0.005em;text-wrap:balance}
.intro-text{margin:0;font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--color-body);text-wrap:pretty;text-align:center}
.intro-text:first-child{color:var(--color-ink)}
.intro-text+.intro-text{margin-top:24px}
/* Markets: full-width light band with one sentence; the market names are dark with a soft orange underline */
.intro-markets{text-align:center;background:var(--color-cream);padding:var(--section-space) var(--gutter)}
.intro-markets-inner{max-width:1100px}
.intro-markets-text{margin:0;font-weight:300;font-size:clamp(24px,3vw,42px);line-height:1.5;letter-spacing:-0.01em;color:rgba(var(--color-ink-rgb),.5);text-wrap:balance}
/* Underline drawn as a 1px background line (instead of text-decoration) so it can animate in */
.intro-market{color:var(--color-ink);background:linear-gradient(rgba(196,85,0,.45),rgba(196,85,0,.45)) no-repeat 0 92%/100% 1px;padding-bottom:.08em}
@media (max-width:767px){
  .intro-block+.intro-block{margin-top:40px}
}

/* Shared card + section patterns (Team and Portfolio) ---------------------- */
/* Section intro: one centred lead paragraph above the cards */
.section-intro{margin-bottom:var(--section-space)}
.section-intro-text{max-width:1200px;margin:0 auto;font-weight:300;font-size:clamp(24px,2.5vw,36px);line-height:1.38;text-align:center;text-wrap:pretty}
/* Hover overlay: navy wash that fades in over a card's image */
.card-overlay{background:var(--overlay-navy);opacity:0;transition:opacity var(--overlay-fade)}
:is(.team-member,.project):is(:hover,:focus-within) .card-overlay{opacity:1}
.card-cta{display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid currentColor;color:#FFFFFF;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
/* The card's title button stretches over the whole card (::after), so the full card is clickable */
.card-open{all:unset;cursor:pointer}
.card-open::after{content:"";position:absolute;inset:0;z-index:4}
.card-open:focus-visible{outline:none}
:is(.team-member,.project):has(.card-open:focus-visible){outline:1px solid var(--color-rust);outline-offset:4px}
/* Image crop shared by card and popup photos. Per-item values come from the data:
   --img-position-x/y pick the focal point, --img-zoom zooms in toward it. */
.crop-img{object-position:var(--img-position-x,50%) var(--img-position-y,0%);transform:scale(var(--img-zoom,1));transform-origin:var(--img-position-x,50%) var(--img-position-y,0%);border-radius:0}
/* Bottom gradient that keeps the name readable on any photo */
.team-photo::after,.project-image::after{content:"";position:absolute;inset:auto 0 0;height:45%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--shade-rgb),0) 0%,rgba(var(--shade-rgb),.55) 55%,rgba(var(--shade-rgb),.8) 100%)}
@media (prefers-reduced-motion:reduce){.card-overlay{transition:none}}

/* 3. Team ---------------------------------------------------------------- */
.team{background:#FFFFFF;padding:var(--section-space) var(--gutter)}
/* 4 columns on desktop, 2 on tablet, 1 on phones, so the four cards always fill whole rows */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:64px clamp(20px,2.6vw,40px);align-items:start}
@media (max-width:1023px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.team-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
/* Team card: photo with name/title over a bottom gradient. Photo and caption
   share one grid cell, so the caption sits on the photo while the card stays
   the containing block for the stretched button. */
.team-member{position:relative;display:grid;min-width:0;border-radius:0;cursor:pointer}
.team-photo,.team-caption{grid-area:1/1}
.team-photo{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:0;background:var(--color-sand)}
.team-hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.team-caption{align-self:end;z-index:3;padding:24px;color:#FFFFFF}
.team-name{margin:0 0 8px;font-size:18px;font-weight:400;line-height:1.3}
.team-title{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* Job title text: light orange so it stays readable on the dark gradient */
.team-title span.sc-interp{color:#F0A070}

/* 4. Portfolio ----------------------------------------------------------- */
.portfolio{background:#FFFFFF;padding:var(--section-space) var(--gutter)}
/* Asymmetric grid: in every group of six, the 1st card is large on the left and
   the 5th large on the right (2 columns x 2 rows); the rest are single cells.
   Every card is 4:3, the large ones fill their 2x2 area. */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:24px}
.project{position:relative;display:grid;min-width:0;aspect-ratio:4/3;overflow:hidden;border-radius:0;background:var(--color-sand);cursor:pointer}
.project-grid>.project:nth-child(6n+1),.project-grid>.project:nth-child(6n+5){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.project-image,.project-caption{grid-area:1/1;min-height:0}
.project-image{position:relative;overflow:hidden}
.project-image .cover-img{transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.project:hover .project-image .cover-img{transform:scale(1.045)}
/* Layers inside the image: gradient (::after, z 1) < navy hover wash (z 2); caption sits above both (z 3) */
.project-hover{position:absolute;inset:0;z-index:2;pointer-events:none}
.project-caption{align-self:end;z-index:3;padding:clamp(20px,2.4vw,32px);color:#FFFFFF}
.project-name{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:300;line-height:1.25;text-wrap:balance}
.project-grid>.project:nth-child(6n+1) .project-name,.project-grid>.project:nth-child(6n+5) .project-name{font-size:clamp(24px,2.4vw,34px)}
/* Category + link: collapsed until hover/focus, then expand and fade in below the name */
.project-details{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--overlay-fade),opacity var(--overlay-fade)}
.project:is(:hover,:focus-within) .project-details{grid-template-rows:1fr;opacity:1}
.project-details-inner{min-height:0;overflow:hidden}
.project-meta{margin:10px 0 18px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85)}
@media (max-width:1023px){
  /* Tablet: 2 columns; every third card spans the full width */
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid>.project:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .project-grid>.project:nth-child(3n+1){grid-column:span 2}
}
@media (max-width:767px){
  .project-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .project-grid>.project:nth-child(n){grid-column:auto}
}
/* Touch screens have no hover: show the category under the name all the time */
@media (hover:none){
  .project-details{grid-template-rows:1fr;opacity:1}
  .project-details .card-cta{display:none}
  .project-meta{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.project-image .cover-img,.project-details{transition:none}}

/* Popup (shared by Team profiles and Portfolio projects) ------------------- */
html.modal-open{overflow:hidden;scrollbar-gutter:stable}
.modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(var(--shade-rgb),.7);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.modal-dialog{position:relative;width:100%;max-width:1040px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#FFFFFF;color:var(--color-ink);border-radius:0;transform:translateY(16px);transition:transform .3s ease}
.modal.is-open .modal-dialog{transform:none}
.modal-close{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;background:#FFFFFF;border:0;border-radius:0;cursor:pointer}
.modal-close span{position:absolute;left:10px;top:21px;width:24px;height:1px;background:var(--color-ink)}
.modal-close span:first-child{transform:rotate(45deg)}
.modal-close span:last-child{transform:rotate(-45deg)}
.modal-close:hover span{background:var(--color-rust)}
.modal-media{min-width:0;display:flex;flex-direction:column}
.modal-photo{position:relative;flex:1 0 auto;min-height:min(560px,75vh);overflow:hidden;background:var(--color-sand);border-radius:0}
.modal-photo-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--color-body)}
.modal-thumbs{display:flex;gap:8px;padding:12px 0 0;overflow-x:auto}
.modal-thumb{position:relative;flex:none;width:84px;aspect-ratio:4/3;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--color-sand);cursor:pointer;opacity:.55;transition:opacity .2s ease}
.modal-thumb:hover,.modal-thumb[aria-pressed="true"]{opacity:1}
.modal-thumb[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border:2px solid var(--color-rust)}
.modal-body{padding:clamp(32px,4vw,56px)}
.modal-title{margin:0 48px 10px 0;font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.2}
.modal-subtitle{margin:0 0 28px;font-size:10.5px;font-weight:600;letter-spacing:.24em;line-height:1.7;text-transform:uppercase;color:var(--color-rust)}
.modal-text{margin:0;font-size:15px;line-height:1.8;color:var(--color-body);text-wrap:pretty}
.modal-subhead{margin:32px 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--color-ink)}
.modal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.modal-list li{font-size:14px;line-height:1.6;color:var(--color-body)}
.modal-links{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.modal-link{display:inline-block;padding:8px 0;border-bottom:1px solid currentColor;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
/* Project popup: wide image (with gallery thumbnails) on the left, text on the right */
.modal-dialog--project{max-width:1200px;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.modal-dialog--project .modal-media{padding:clamp(16px,2vw,24px) 0 clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.modal-dialog--project .modal-photo{flex:none;min-height:0;aspect-ratio:4/3}
@media (max-width:767px){
  /* Full-screen on phones: image on top, text below, the whole sheet scrolls */
  .modal{padding:0}
  .modal-dialog,.modal-dialog--project{max-width:none;height:100%;display:block}
  .modal-photo{min-height:0;aspect-ratio:4/5}
  .modal-dialog--project .modal-media{padding:0}
  .modal-dialog--project .modal-photo{aspect-ratio:4/3}
  .modal-dialog--project .modal-thumbs{padding:8px var(--gutter) 0}
  .modal-body{padding:28px var(--gutter) 48px}
}
@media (prefers-reduced-motion:reduce){.modal,.modal.is-open,.modal-dialog{transition:none}}

/* 5. Contact ------------------------------------------------------------- */
/* Centred call to action on the brand rust. White text on it meets WCAG AA contrast (4.5:1). */
.contact{background:var(--color-rust);color:#FFFFFF;padding:112px var(--gutter)}
.contact :focus-visible{outline-color:#FFFFFF}
.contact-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.contact-heading{margin:0 0 24px;font-weight:300;font-size:50px;line-height:1.15;letter-spacing:-0.01em;color:#FFFFFF;text-wrap:balance}
.contact-subtext{margin:0 0 44px;font-size:20px;font-weight:400;line-height:1.5;color:#FFFFFF;text-wrap:balance}
/* Text link: white with an always-visible underline that drops a little on hover */
/* 12px vertical padding gives a 44px tap target; the negative margin keeps the layout unchanged */
.contact-link{display:inline-block;padding:12px 0;margin:-12px 0;color:#FFFFFF;font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-underline-offset .3s ease,opacity .3s ease}
.contact-link:hover{color:#FFFFFF;text-underline-offset:9px;opacity:.85}
.contact-link:focus-visible{outline:2px solid #FFFFFF;outline-offset:6px}
@media (max-width:1023px){
  .contact{padding:88px var(--gutter)}
  .contact-heading{font-size:40px}
}
@media (max-width:767px){
  .contact{padding:64px var(--gutter)}
  .contact-heading{font-size:32px}
  .contact-subtext{font-size:18px;margin-bottom:36px}
}
@media (prefers-reduced-motion:reduce){.contact-link{transition:none}}

/* 6. Footer -------------------------------------------------------------- */
/* A normal block in the page flow, directly after the Contact section */
.footer{background:#FFFFFF;color:var(--color-ink);padding:40px var(--gutter) 20px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:40px 64px}
/* Logo with the social icons in a row below it */
.footer-brand{display:flex;flex-direction:column;gap:20px}
.footer-logo{padding:9px;margin:-9px}
.footer-logo img{display:block;height:44px;width:auto}
/* Each 20px icon sits in a 44px tap area. Neighbouring areas overlap by 8px so the
   visible gap between icons stays 16px; the outer negative margins line the icons
   up with the logo edge without adding space */
.footer-social{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px 0;color:var(--color-ink);transition:color .3s ease}
.footer-social li:first-child .footer-social-link{margin-left:-12px}
.footer-social li+li .footer-social-link{margin-left:-8px}
.footer-social li:last-child .footer-social-link{margin-right:-12px}
.footer-social-link:hover{color:var(--color-rust)}
/* Page links in one row; they wrap onto more lines on narrow screens */
.footer-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 32px}
/* 44px+ tap area; the negative margins keep the row at its visual size */
.footer-nav-list a{display:inline-block;padding:15px 4px;margin:-8px -4px;color:var(--color-ink);font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;transition:color .3s ease}
.footer-nav-list a:hover{color:var(--color-rust)}
.footer-bottom{margin-top:var(--section-pad);padding-top:24px;border-top:1px solid rgba(var(--color-ink-rgb),.12)}
.footer-copyright{margin:0;font-size:13px;line-height:1.5;text-align:center;color:rgba(var(--color-ink-rgb),.7)}
@media (max-width:767px){
  /* Phones: logo, icons and menu centred; the menu wraps into evenly spaced rows */
  .footer-inner{flex-direction:column;align-items:center;gap:32px}
  .footer-brand{align-items:center}
  .footer-nav-list{justify-content:center;gap:8px 24px}
  .footer-bottom{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){.footer-social-link,.footer-nav-list a{transition:none}}

/* Motion ------------------------------------------------------------------ */
/* Everything below only runs when the visitor allows motion. Scroll reveals
   also need html.motion, which the page script adds (see setupReveal). */
@media (prefers-reduced-motion:no-preference){
  /* Hero: headline, subline and scroll arrow rise in one after another on load */
  @keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes fade-in{from{opacity:0}}
  .hero-headline{animation:rise-in 1.2s cubic-bezier(.2,.6,.2,1) .35s both}
  .hero-subtitle{animation:rise-in 1.2s cubic-bezier(.2,.6,.2,1) .6s both}
  .hero-scroll{animation:fade-in 1s ease 1.3s both}

  /* Scroll reveal: fade up; cards entering together are staggered from the script */
  .motion [data-reveal]{transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.2,1)}
  .motion [data-reveal].reveal-pending{opacity:0;transform:translateY(28px)}

  /* Project photos settle from a slight zoom as the card appears */
  .motion .project .project-image{transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
  .motion .project.reveal-pending .project-image{transform:scale(1.08)}

  /* Team photos are uncovered with an upward wipe */
  .motion .team-member .team-photo{transition:clip-path 1.2s cubic-bezier(.65,0,.35,1) .1s}
  .motion .team-member.reveal-pending .team-photo{clip-path:inset(100% 0 0 0)}

  /* Markets: the underline under each market draws in from the left, one after another */
  .motion .intro-market{transition:background-size .9s cubic-bezier(.65,0,.35,1)}
  .motion .intro-markets-inner.reveal-pending .intro-market{background-size:0 1px}
  .motion .intro-market:nth-of-type(2){transition-delay:.15s}
  .motion .intro-market:nth-of-type(3){transition-delay:.3s}
  .motion .intro-market:nth-of-type(4){transition-delay:.45s}
}

/* Phones: small uppercase labels are at least 11px so they stay legible */
@media (max-width:767px){
  .team-title,.project-meta,.modal-subtitle,.modal-subhead,.footer-nav-list a{font-size:11px}
}