/* JCK Acoustics Group — site.css
   Palette from JCKAG COLOR BRAND (updated 2026-10-09): #a12729 / #191919 / #f2f2f2 / #2e2e2e

   CONTENTS (search for the number and title, e.g. "7. INNER PAGES")
      1. BRAND COLORS, SIZES AND BASE STYLES
      2. LINKS
      3. HEADER AND FULL-SCREEN MENU
      4. HERO SLIDESHOW (home) AND PAGE HEROES
      5. HOME PAGE: SECTION HEADINGS, INTRO, SECTORS GRID, INSIGHTS
      6. FOOTER
      7. INNER PAGES: TITLE BAND, PORTFOLIO, CONTACT FORM
      8. ARTICLES (INSIGHTS POSTS) AND SHARE BAR
      9. SERVICE AND SECTOR ROWS (photo beside text)
     10. ABOUT PAGE
     11. HOME PAGE: BANDS, WHAT WE DO, SELECTED WORKS
     12. ROW BANDS (Services, Sectors, About, project pages)
     13. PROJECT PAGES: PHOTO GRID, WRITE-UP, DETAILS, PREVIOUS / NEXT
     14. WORLD MAP (About)
     15. RESPONSIVE (tablet and phone overrides)

   Rules are kept in their original order on purpose: a later rule overrides an
   earlier one, so moving blocks around can change the look.
*/

/* ========================================================================
   1. BRAND COLORS, SIZES AND BASE STYLES
   ======================================================================== */
:root{
  --bg:#191919;
  --bg-deep:#121212;
  --panel:#2e2e2e;
  --text:#f2f2f2;
  --muted:#a3a29d;
  --line:rgba(242,242,242,.14);
  /* brand red (John, 2026-10-09: every red on the site uses this one) */
  --rust:#a12729;
  --rust-hi:#a12729;

  --font:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Full-width layout like nbbj.com: no maximum width; content runs to a slim
     margin at the screen edges on any monitor. --gutter is that margin. */
  --wrap:100%;
  --gutter:clamp(20px, 2.4vw, 40px);
  --section:clamp(56px, 6vw, 96px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:clamp(16px, .3vw + 12px, 18px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,dl,dd,figure{ margin:0; padding:0; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--rust-hi); outline-offset:4px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--text); color:var(--bg); padding:10px 16px; }
.skip:focus{ left:16px; top:16px; }
.wrap{ width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

h1,h2,h3{ font-weight:400; letter-spacing:-.01em; line-height:1.2; }

/* ========================================================================
   2. LINKS
   ======================================================================== */
/* Links: no underline anywhere; they turn red on hover (John, 2026-10-07). */
.link{
  display:inline-flex; align-items:center; gap:.5em; font-size:.95rem;
  transition:color .2s;
}
.link:hover{ color:var(--rust-hi); }

/* ========================================================================
   3. HEADER AND FULL-SCREEN MENU
   ======================================================================== */
/* ---------- Header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; transition:background-color .35s; }
.site-header.is-solid{ background:rgba(18,18,18,.95); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand img{ height:22px; width:auto; }
.menu-btn{ width:44px; height:44px; display:grid; place-content:center; gap:7px; margin-right:-10px; }
.menu-btn span{ display:block; width:26px; height:2px; background:var(--text); transition:transform .35s var(--ease), background-color .2s; }
.menu-btn:hover span{ background:var(--rust-hi); }
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

/* Full-screen menu */
.menu{
  position:fixed; inset:0; z-index:45; background:var(--bg-deep);
  display:flex; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu .wrap{ width:var(--wrap); display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; }
.menu nav{ grid-column:1 / span 7; display:flex; flex-direction:column; }
.menu nav a{
  font-size:clamp(1.6rem, 2.6vw, 2.4rem); line-height:1.6; color:rgba(242,242,242,.85);
  transition:color .2s;
}
.menu nav a:hover{ color:var(--rust-hi); }
.menu-side{ grid-column:9 / span 4; align-self:end; display:grid; gap:20px; color:var(--muted); }
.menu-side a{ transition:color .2s; }
.menu-side a:hover{ color:var(--rust-hi); }

/* ========================================================================
   4. HERO SLIDESHOW (home) AND PAGE HEROES
   ======================================================================== */
/* ---------- Hero slideshow ---------- */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--bg-deep); }
.slides{ position:absolute; inset:0; }
/* --slide-fade must match FADE in site.js. The zoom lasts longer than a slide is
   shown (7s + fade), so the photo keeps moving through the crossfade. */
.slides{ --slide-fade:1.6s; --slide-zoom:10s; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity var(--slide-fade) ease-in-out; }
.slide.is-on{ opacity:1; }
/* will-change and the 3D transform keep the zoom on the graphics card, so a slow
   zoom glides instead of stepping pixel by pixel */
.slide img{ width:100%; height:100%; object-fit:cover; transform:scale3d(1, 1, 1); will-change:transform; backface-visibility:hidden; }
.slide.is-on img,.slide.is-leaving img{ animation:drift var(--slide-zoom) linear forwards; }
@keyframes drift{ from{ transform:scale3d(1, 1, 1); } to{ transform:scale3d(1.08, 1.08, 1); } }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,18,18,.5) 0%, rgba(18,18,18,0) 20%),
    linear-gradient(0deg, rgba(18,18,18,.85) 0%, rgba(18,18,18,.35) 30%, rgba(18,18,18,0) 55%);
}
.hero-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:clamp(36px, 5vw, 72px); }
.hero h1{ font-size:clamp(1.9rem, 3.2vw, 3.2rem); max-width:18ch; }

/* ========================================================================
   5. HOME PAGE: SECTION HEADINGS, INTRO, SECTORS GRID, INSIGHTS
   ======================================================================== */
/* ---------- Sections ---------- */
section{ scroll-margin-top:84px; }
.sec{ padding-top:var(--section); }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:clamp(20px, 2vw, 32px); }
.sec-head h2{ font-size:clamp(1.75rem, 2.7vw, 2.7rem); }

/* Intro */
.intro{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:48px; align-items:end; }
.intro--top{ align-items:start; }   /* red band on the home page: first lines level */
.intro h2{ grid-column:1 / span 7; font-size:clamp(1.5rem, 2.3vw, 2.3rem); line-height:1.3; max-width:26ch; }
.intro-side{ grid-column:9 / span 4; }
.intro-side p{ font-size:1.05rem; color:rgba(242,242,242,.8); max-width:34ch; margin-bottom:24px; }

/* Sectors */
.sector-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 24px; }
.sector .ph{ aspect-ratio:4/5; overflow:hidden; background:var(--panel); }
.sector img{ width:100%; height:100%; object-fit:cover; }
.sector h3{ margin-top:14px; font-size:1.05rem; transition:color .2s; }
.sector:hover h3{ color:var(--rust-hi); }

/* Insights */
/* Home: photo with the title below, three posts per row (room for a third).
   --post-columns sets posts per row. */
.insights{ --post-columns:3; display:grid; grid-template-columns:repeat(var(--post-columns), minmax(0, 1fr)); gap:32px 24px; }
.post .ph{ aspect-ratio:16/10; overflow:hidden; background:var(--panel); }
.insights .post .ph{ aspect-ratio:3/2; }
.post img{ width:100%; height:100%; object-fit:cover; }
.post h3{ margin-top:16px; font-size:1.15rem; max-width:36ch; transition:color .2s; }
.insights .post h3{ margin-top:12px; font-size:1.05rem; }
.post:hover h3{ color:var(--rust-hi); }

/* ========================================================================
   6. FOOTER
   ======================================================================== */
/* Footer */
.site-footer{ margin-top:var(--section); background:var(--bg-deep); padding:clamp(56px, 6vw, 96px) 0 28px; color:var(--muted); font-size:.95rem; }
.foot-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:40px; }
.foot-brand{ grid-column:1 / span 4; }
.foot-brand a{ display:inline-block; }
.foot-brand img{ height:22px; width:auto; }
.foot-col{ grid-column:span 2; }
.foot-brand + .foot-col{ grid-column:7 / span 2; }
.foot-col h2{ font-size:.95rem; color:var(--text); margin-bottom:10px; }
.foot-col li{ padding:2px 0; overflow-wrap:anywhere; }
.foot-col h2 + ul + h2{ margin-top:24px; }
.foot-col a{ transition:color .2s; }
.foot-col a:hover{ color:var(--rust-hi); }
.foot-bottom{ display:flex; justify-content:space-between; gap:16px; margin-top:clamp(48px, 5vw, 80px); padding-top:20px; border-top:1px solid var(--line); font-size:.88rem; }

/* ========================================================================
   7. INNER PAGES: TITLE BAND, PORTFOLIO, CONTACT FORM
   ======================================================================== */
/* ---------- Inner pages ---------- */
.page-hero{ height:72svh; min-height:520px; }
.page-hero .slide img{ object-position:50% 30%; }
/* Title band under the header (Portfolio, Insights, articles, project pages): the title
   sits just below the 84px header. --title-gap: space between header and title. */
.text-hero{ --title-gap:clamp(16px, 2vw, 28px); padding-top:calc(84px + var(--title-gap)); padding-bottom:clamp(20px, 2vw, 32px); }
.text-hero h1{ font-size:clamp(1.9rem, 3.2vw, 3.2rem); }

/* Plain text block (404 page). --topic-text-measure limits the line length. */
.topic-text{ --topic-text-measure:none; }
.topic-text p{ font-size:1.05rem; color:rgba(242,242,242,.85); max-width:var(--topic-text-measure); }
.topic-text p + p{ margin-top:1em; }
.topic-text a{ transition:color .2s; }
.topic-text a:hover{ color:var(--rust-hi); }

.filters{ display:flex; flex-wrap:wrap; gap:8px 28px; padding-bottom:20px; margin-bottom:clamp(32px, 4vw, 56px); border-bottom:1px solid var(--line); }
/* Portfolio filters: no underline; red on hover, and the selected filter stays red */
.filters button{ padding:4px 0; color:var(--muted); transition:color .2s; }
.filters button:hover{ color:var(--rust); }
.filters button[aria-pressed="true"]{ color:var(--rust); }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 24px; }
.tiles li[hidden]{ display:none; }
.tile .ph{ aspect-ratio:4/3; overflow:hidden; background:var(--panel); }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile h2,.post h2{ margin-top:14px; font-size:1.05rem; transition:color .2s; }
.post h2{ font-size:1.15rem; max-width:36ch; }
.tile:hover h2,.post:hover h2{ color:var(--rust-hi); }

/* Contact */
.contact{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:40px; padding-top:clamp(36px, 4vw, 56px); }
.contact-hero{ height:46svh; min-height:340px; }
main:has(.contact) + .site-footer{ margin-top:clamp(56px, 6vw, 96px); }
.contact-hero .slide img{ object-position:50% 50%; }
.contact-form{ grid-column:1 / span 7; }
.contact-side{ grid-column:9 / span 4; display:grid; gap:16px; align-content:start; }
.contact-side h2{ font-size:1rem; margin-bottom:6px; }
.contact-side p{ color:var(--muted); }
.contact-side a{ color:var(--text); transition:color .2s; }
.contact-side a:hover{ color:var(--rust-hi); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
/* Social icons (contact page, article share bar). Change size or spacing here. */
.social{ --social-size:22px; --social-gap:18px; display:flex; flex-wrap:wrap; gap:var(--social-gap); margin-top:8px; }
.social a,.social button{ display:block; width:var(--social-size); height:var(--social-size); padding:0; color:var(--text); background:none; border:0; cursor:pointer; transition:color .2s; }
.social a:hover,.social button:hover,.social .is-copied{ color:var(--rust-hi); }
.social svg{ display:block; width:100%; height:100%; }
/* WeChat QR code under the social icons (contact page) */
.wechat{ --qr-size:120px; margin-top:20px; width:var(--qr-size); }
.wechat img{ width:100%; aspect-ratio:1; padding:6px; background:#fff; }
.wechat figcaption{ margin-top:6px; color:var(--muted); font-size:.9rem; }
/* Contact form fields: solid dark grey boxes (the band grey), no lines; the box being
   typed in gets a thin red outline. --field-bg sets the box color (autofill uses it too). */
.field{ --field-bg:var(--panel); margin-bottom:16px; }
.field label{ display:block; margin-bottom:6px; color:var(--muted); font-size:.9rem; }
.field label span{ color:var(--rust-hi); }
.field input,.field textarea{
  width:100%; padding:11px 14px; font:inherit; color:var(--text);
  background:var(--field-bg); border:1px solid var(--field-bg); border-radius:2px;
  transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--rust-hi); }
/* Browser autofill: keep the grey box and light text instead of the browser's
   white/yellow fill. */
.field input,.field textarea{ color-scheme:dark; caret-color:var(--text); }
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,.field textarea:-webkit-autofill:hover,.field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;
  box-shadow:0 0 0 1000px var(--field-bg) inset;
  transition:background-color 9999s ease-out 0s, border-color .2s;
}
.field input:autofill,.field textarea:autofill{ box-shadow:0 0 0 1000px var(--field-bg) inset; -webkit-text-fill-color:var(--text); }
.g-recaptcha{ margin:4px 0 16px; min-height:78px; }
.form-error{ margin-bottom:20px; color:var(--rust-hi); }
/* Send button: brand red with off-white text; on hover it inverts to the page
   background with red text and border. The border is always there, so nothing shifts. */
.btn-submit{ --btn-pad-y:9px; --btn-pad-x:22px; padding:var(--btn-pad-y) var(--btn-pad-x); background:var(--rust); color:var(--text); border:1px solid var(--rust); font-size:.9rem; letter-spacing:.02em; border-radius:2px; transition:background-color .2s, color .2s; }
.btn-submit:hover{ background:var(--bg); color:var(--rust); }
.btn-submit:disabled{ opacity:.6; cursor:default; }
.form-success{ padding:24px 0; }
.form-success h2{ font-size:1.6rem; margin-bottom:10px; }
.form-success p{ color:var(--muted); }

/* ========================================================================
   8. ARTICLES (INSIGHTS POSTS) AND SHARE BAR
   ======================================================================== */
/* Articles */
.article{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; }
.article-lead{ grid-column:1 / -1; margin-bottom:clamp(40px, 5vw, 72px); }
.article-lead img{ width:100%; aspect-ratio:16/9; max-height:78vh; object-fit:cover; }
.article-body{ grid-column:3 / span 8; }
.article-body > p, .article-body > ul, .article-body > ol{ font-size:1.05rem; color:rgba(242,242,242,.86); max-width:68ch; }
.article-body > p + p, .article-body > * + p{ margin-top:1.1em; }
.article-body h2{ font-size:clamp(1.35rem, 1.8vw, 1.75rem); margin:2.4em 0 .8em; }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:1.15rem; font-weight:500; margin:2em 0 .6em; }
.article-body h3:empty{ display:none; }
.article-body ul{ margin-top:1em; padding-left:1.1em; list-style:disc; }
.article-body ul li{ padding:4px 0; }
.article-body ul li::marker{ color:var(--rust-hi); }
.article-body figure{ margin:2em 0; }
.article-body figure img{ width:100%; background:#fff; }
.article-body figcaption{ margin-top:10px; font-size:.92rem; color:var(--muted); max-width:68ch; }
.article-body a{ transition:color .2s; }
.article-body a:hover{ color:var(--rust-hi); }
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:2em; }
.gallery figure{ margin:0; }
.gallery figure:last-child:nth-child(odd){ grid-column:1 / -1; }
.gallery img{ background:none; aspect-ratio:4/3; object-fit:cover; }
/* Share bar at the end of an article */
.share{ grid-column:3 / span 8; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:clamp(48px, 5vw, 80px); color:var(--muted); }
.share .social{ --social-size:20px; --social-gap:20px; margin-top:0; }
.share-status:empty{ display:none; }
.share + .article-foot{ margin-top:24px; }
.article-foot{ grid-column:3 / span 8; display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-top:clamp(48px, 5vw, 80px); padding-top:20px; border-top:1px solid var(--line); color:var(--muted); }
.article-foot p a{ color:var(--text); transition:color .2s; }
.article-foot p a:hover{ color:var(--rust-hi); }

/* ========================================================================
   9. SERVICE AND SECTOR ROWS (photo beside text)
   ======================================================================== */
/* ---------- Service rows (services.html) ----------
   Heading sits with its text beside the photo; rows alternate sides and the photo
   width changes row to row, so the page doesn't repeat one block. No divider lines.
   --svc-space: gap between rows. --svc-media: photo columns (of 12) on plain rows;
   --svc-media-flip: on flipped rows. */
.svc{
  --svc-space:clamp(44px, 5vw, 80px); --svc-media:5; --svc-media-flip:4;
  display:grid; grid-template-columns:repeat(12, 1fr); column-gap:clamp(20px, 2.4vw, 40px);
  align-items:start; padding-top:var(--svc-space); scroll-margin-top:60px;
}
.svc-media{ grid-column:1 / span var(--svc-media); }
.svc-media img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--panel); }
.svc-text{ grid-column:span calc(12 - var(--svc-media)); }
.svc--flip .svc-media{ grid-column:calc(13 - var(--svc-media-flip)) / -1; grid-row:1; }
.svc--flip .svc-media img{ aspect-ratio:4/3; }
.svc--flip .svc-text{ grid-column:1 / span calc(12 - var(--svc-media-flip)); grid-row:1; }
.svc-text h2{ font-size:clamp(1.35rem, 1.8vw, 1.8rem); margin-bottom:16px; }
.svc-text p{ font-size:1.02rem; color:rgba(242,242,242,.85); }
.svc-text p + p{ margin-top:.9em; }
.svc-list{ margin-top:22px; columns:2; column-gap:24px; font-size:.95rem; color:var(--muted); line-height:1.45; }
.svc-list li{ break-inside:avoid; padding:3px 0; }
.svc-list a{ color:rgba(242,242,242,.85); transition:color .2s; }
.svc-list a:hover{ color:var(--rust-hi); }
@media (max-width:900px){
  .svc-media,.svc-text,.svc--flip .svc-media,.svc--flip .svc-text{ grid-column:1 / -1; grid-row:auto; }
  .svc--flip .svc-media img{ aspect-ratio:3/2; }
  .svc-text{ margin-top:20px; }
}
@media (max-width:560px){
  .svc-list{ columns:1; }
}

/* ========================================================================
   10. ABOUT PAGE
   ======================================================================== */
/* ---------- About blocks (about-us.html) ----------
   Heading above its text, no divider lines. --about-space: gap above each block.
   .about-pair puts two blocks side by side. .partner-grid: --partner-grid-columns. */
.about-block{ --about-space:clamp(44px, 5vw, 80px); padding-top:var(--about-space); }
.about-block h2{ font-size:clamp(1.35rem, 1.8vw, 1.8rem); margin-bottom:16px; }
.about-block p{ font-size:1.02rem; color:rgba(242,242,242,.85); }
.about-block p + p{ margin-top:.9em; }
.about-block__lead{ max-width:62ch; }
.about-block .world-map{ margin-top:clamp(28px, 3vw, 44px); }
.about-pair{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px, 4vw, 72px); row-gap:40px; }   /* row-gap: space between the two blocks when stacked on phones */
.partner-grid{ --partner-grid-columns:5; columns:var(--partner-grid-columns); column-gap:24px; font-size:1rem; line-height:1.45; }
.partner-grid li{ break-inside:avoid; padding:4px 0; text-align:center; color:rgba(242,242,242,.85); }
.partner-grid a{ transition:color .2s; }
.partner-grid a:hover{ color:var(--rust-hi); }
@media (max-width:1080px){
  .partner-grid{ --partner-grid-columns:3; }
}
@media (max-width:720px){
  .about-pair{ grid-template-columns:1fr; }
  .partner-grid{ --partner-grid-columns:2; }
}

/* ========================================================================
   11. HOME PAGE: BANDS, WHAT WE DO, SELECTED WORKS
   ======================================================================== */
/* ---------- Home page bands (index.html) ----------
   Full-width color bands in the brand colors: plain (#191919), --panel (#2e2e2e) and
   --rust (#a12729). Each band wraps one section; the section supplies the top padding
   and the band supplies the bottom padding. */
.band{ padding-bottom:var(--section); }
.band--panel{ background:var(--panel); }
.band--rust{ background:var(--rust); }
.band--rust .intro-side p{ color:var(--text); }
.band--rust .link:hover{ color:var(--bg); }

/* What we do: one block per service with hairlines between them.
   --block-columns sets blocks per row. */
.blocks{ --block-columns:4; display:grid; grid-template-columns:repeat(var(--block-columns), minmax(0, 1fr)); }
.block{ padding:clamp(24px, 2.4vw, 36px) clamp(16px, 2vw, 32px) clamp(28px, 3vw, 48px); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.block:nth-child(4n+1){ padding-left:0; border-left:0; }
.block h3{ font-size:clamp(1.1rem, 1.4vw, 1.3rem); line-height:1.25; min-height:2.5em; margin-bottom:14px; }
.block h3 a{ transition:color .2s; }
.block h3 a:hover{ color:var(--rust-hi); }
.block li{ color:var(--muted); font-size:.95rem; line-height:1.9; }

/* Selected works: one large photo beside two stacked ones. --show-row is the height of
   one small photo; the large photo spans two rows. Captions sit on the photo's bottom edge. */
.showcase{ --show-row:clamp(200px, 19vw, 320px); display:grid; grid-template-columns:1.35fr .85fr; grid-template-rows:repeat(2, var(--show-row)); gap:24px; }
.show{ position:relative; display:block; overflow:hidden; background:var(--panel); }
.show--main{ grid-row:1 / span 2; }
.show img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.show__caption{ position:absolute; inset:auto 0 0 0; padding:clamp(18px, 2vw, 28px); background:linear-gradient(0deg, rgba(18,18,18,.8), rgba(18,18,18,0)); }
.show__caption h3{ font-size:clamp(1.1rem, 1.5vw, 1.45rem); transition:color .2s; }
.show__caption p{ color:rgba(242,242,242,.8); font-size:.95rem; }
.show:hover .show__caption h3{ color:var(--rust-hi); }
@media (max-width:1080px){
  .blocks{ --block-columns:2; }
  .block:nth-child(4n+1){ padding-left:clamp(16px, 2vw, 32px); border-left:1px solid var(--line); }
  .block:nth-child(2n+1){ padding-left:0; border-left:0; }
}
@media (max-width:720px){
  .blocks{ --block-columns:1; }
  .block,.block:nth-child(4n+1),.block:nth-child(2n+1){ padding-left:0; border-left:0; }
  .block h3{ min-height:0; }
  .showcase{ grid-template-columns:1fr; grid-template-rows:none; }
  .show,.show--main{ grid-row:auto; aspect-ratio:4/3; }
}

/* ========================================================================
   12. ROW BANDS (Services, Sectors, About, project pages)
   ======================================================================== */
/* ---------- Row bands (services.html, sectors.html, about-us.html) ----------
   Each row is its own full-width band; bands alternate #191919 and --panel (#2e2e2e),
   plus one --rust band per page. --row-band-pad: space above and below each row. */
.row-band{ --row-band-pad:clamp(44px, 5vw, 80px); padding:var(--row-band-pad) 0; }
.row-band > .svc,.row-band > .about-block,.row-band > .about-pair > .about-block{ padding-top:0; }
.row-band.band--rust .about-block p{ color:var(--text); }
.row-band.band--rust .intro-side p{ color:var(--text); }
.row-band.band--rust .link:hover{ color:var(--bg); }

/* ========================================================================
   13. PROJECT PAGES: PHOTO GRID, WRITE-UP, DETAILS, PREVIOUS / NEXT
   ======================================================================== */
/* ---------- Photo grid ----------
   One component, four layouts. Use: <section class="photo-grid photo-grid--LAYOUT">
   with one <figure><img></figure> per photo, in order.
     single   one photo, full width
     dual     two photos side by side
     feature  one large photo left, two smaller stacked right
     quad     four photos, 2 x 2
   Change the look here: */
.photo-grid{
  --pg-gap:6px;                      /* space between photos */
  --pg-height:min(82svh, 900px);     /* height of the whole grid on desktop */
  --pg-min-height:420px;
  --pg-feature-split:2fr 1fr;        /* feature layout: large column vs small column */
  --pg-mobile-ratio:4 / 3;           /* shape of each photo when stacked on phones */
  display:grid;
  gap:var(--pg-gap);
  height:var(--pg-height);
  min-height:var(--pg-min-height);
  background:var(--bg-deep);
}
.photo-grid > figure{ margin:0; min-height:0; overflow:hidden; }
.photo-grid > figure img{ display:block; width:100%; height:100%; object-fit:cover; }

.photo-grid--single{ grid-template-areas:"a"; }
.photo-grid--dual{ grid-template-areas:"a b"; grid-template-columns:1fr 1fr; }
.photo-grid--feature{ grid-template-areas:"a b" "a c"; grid-template-columns:var(--pg-feature-split); grid-template-rows:1fr 1fr; }
.photo-grid--quad{ grid-template-areas:"a b" "c d"; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.photo-grid > figure:nth-child(1){ grid-area:a; }
.photo-grid > figure:nth-child(2){ grid-area:b; }
.photo-grid > figure:nth-child(3){ grid-area:c; }
.photo-grid > figure:nth-child(4){ grid-area:d; }

@media (max-width:720px){
  .photo-grid{ height:auto; min-height:0; grid-template-areas:none; grid-template-columns:1fr; grid-template-rows:none; }
  .photo-grid > figure{ grid-area:auto !important; aspect-ratio:var(--pg-mobile-ratio); }
}

/* Project pages: title band, photos, an optional black write-up band, then the grey
   details band (same on every project): facts | services | credits in three columns,
   labels on the left (--detail-label wide), no lines. Bands come from "Row bands". */
.project-writeup{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:24px; }
.project-writeup__text{ grid-column:1 / span 8; }
.project-writeup__text p{ font-size:1.05rem; color:rgba(242,242,242,.86); }
.project-writeup__text p + p{ margin-top:1em; }
.project-sheet{ --detail-label:8.5em; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px clamp(28px, 4vw, 72px); align-items:start; }
.project-sheet dl{ display:grid; gap:12px; }
.project-sheet dl > div{ display:grid; grid-template-columns:var(--detail-label) 1fr; column-gap:16px; }
.project-sheet dt,.project-sheet__services h2{ color:var(--muted); font-size:.88rem; font-weight:400; padding-top:.12em; }
.project-sheet dd,.project-sheet__services li{ font-size:1rem; line-height:1.45; }
.project-sheet__services h2{ margin-bottom:8px; padding-top:0; }
.project-sheet__services li{ padding:1px 0; }
.project-sheet a{ transition:color .2s; }
.project-sheet a:hover{ color:var(--rust-hi); }
.project-sheet .project-note{ grid-column:1 / -1; }
@media (max-width:900px){
  .project-writeup__text{ grid-column:1 / -1; }
  .project-sheet{ grid-template-columns:1fr; gap:28px; }
}

/* ========================================================================
   14. WORLD MAP (About)
   ======================================================================== */
/* World map ("Where we work"). The map file is images/world-map.svg (made by
   .build/worldmap.py). site.js places it inline and lights the countries one by one. */
.world-map{
  --map-land:#2e2e2e;          /* countries without projects */
  --map-work:var(--rust);      /* countries with projects */
  --map-edge:var(--bg);        /* border lines between countries */
  --map-step:180ms;            /* delay between one country lighting up and the next */
  --map-fade:600ms;            /* how long each country takes to fill */
  grid-column:1 / -1;
  margin:clamp(24px, 3vw, 40px) 0 0;
}
.world-map img, .world-map svg{ display:block; width:100%; height:auto; }
.world-map .land path{ fill:var(--map-land); stroke:var(--map-edge); }
.world-map .work path{ fill:var(--map-work); stroke:var(--map-edge); transition:fill var(--map-fade) ease; }
.world-map.is-waiting .work path:not(.lit){ fill:var(--map-land); }

.project-note{ color:var(--muted); font-size:.92rem; }
.project-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:24px; }
.project-nav a{ transition:color .2s; }
.project-nav a:hover{ color:var(--rust-hi); }
.project-nav a span{ display:block; color:var(--muted); font-size:.88rem; }
.project-nav a:last-child{ text-align:right; }

@media (max-width:1080px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .contact-form,.contact-side{ grid-column:1 / -1; }
  .article-body,.share,.article-foot{ grid-column:1 / -1; }
  .contact-side{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .tiles{ grid-template-columns:1fr; gap:36px; }
  .form-row{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .project-nav{ grid-template-columns:1fr 1fr; }
  .project-nav .all{ display:none; }
}

/* ========================================================================
   15. RESPONSIVE (tablet and phone overrides)
   ======================================================================== */
/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .intro h2,.intro-side{ grid-column:1 / -1; }
  .menu nav{ grid-column:1 / -1; }
  .menu-side{ grid-column:1 / -1; margin-top:48px; }
  .foot-brand{ grid-column:1 / -1; }
  .foot-col,.foot-brand + .foot-col{ grid-column:span 4; }
  .sector-grid{ grid-template-columns:repeat(2,1fr); }
  .insights{ --post-columns:2; }
}
@media (max-width:720px){
  .site-header .wrap{ height:72px; }
  .brand img{ height:19px; }
  .sector-grid{ grid-template-columns:1fr 1fr; gap:28px 16px; }
  .insights{ --post-columns:1; }
  .foot-col,.foot-brand + .foot-col{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}