/* ProofGallery 4.x — A.B Construction drawing-sheet skin (srpg). */
.srpg, .srpg *, .srpg *::before, .srpg *::after{ box-sizing:border-box; }
.srpg{ --navy:#14171A; --red:#D6005D; --line:rgba(20,23,26,.14); --mut:#5A626B;
  width:100% !important; max-width:1440px !important;
  margin-left:auto !important; margin-right:auto !important;
  float:none !important; inset-inline:auto !important;
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif; color:var(--navy); }
.srpg img{ max-width:100%; }
.srpg{ scroll-margin-top:110px; }

/* head */
.srpg-head{ margin:0 0 34px; max-width:640px; }
.srpg-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 12px;
  font:500 10.5px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mut); }
.srpg-eyebrow::before{ content:""; width:24px; height:1px; background:var(--red); }
.srpg-title{ margin:0; font-size:clamp(27px,3.2vw,40px); font-weight:800; letter-spacing:-1px;
  text-transform:uppercase; color:var(--navy); line-height:1.06; }
.srpg-title em{ font-style:italic; font-family:'Instrument Serif',Georgia,serif; font-weight:400;
  font-size:1.14em; letter-spacing:0; text-transform:none; color:var(--red); }
.srpg-sub{ margin:14px 0 0; font-size:15px; color:var(--mut); line-height:1.7; }

/* filters */
.srpg-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.srpg-filter{ position:relative; font:500 11px/1 'Archivo',sans-serif; letter-spacing:.07em;
  text-transform:uppercase; cursor:pointer; color:var(--mut); background:transparent;
  border:1px solid rgba(44,51,59,.28); border-radius:0; padding:11px 14px;
  transition:border-color .25s ease, color .25s ease, background-color .25s ease; }
.srpg-filter[aria-pressed="true"]{ background:rgba(224,100,13,.12); border-color:var(--red); color:var(--navy); }
.srpg-filter[aria-pressed="true"]::after{ content:""; position:absolute; top:0; right:0;
  border:5px solid transparent; border-top-color:var(--red); border-right-color:var(--red); }
.srpg-filter:hover{ border-color:rgba(44,51,59,.55); color:var(--navy); }

/* grid of project cards */
.srpg-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; align-items:start; }
.srpg-grid.srpg-msnry{ grid-auto-rows:10px; row-gap:0; align-items:stretch; }
.srpg-grid.srpg-msnry .srpg-card{ grid-row-end:span var(--sp, 40); }
.srpg-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:0;
  padding:22px 22px 20px; box-shadow:0 14px 34px rgba(23,28,34,.08); min-width:0;
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease; }
.srpg-card::before, .srpg-card::after{ content:""; position:absolute; width:12px; height:12px;
  pointer-events:none; border:0 solid var(--red); }
.srpg-card::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.srpg-card::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.srpg-card:hover{ box-shadow:0 20px 44px rgba(23,28,34,.13); transform:translateY(-4px);
  border-color:rgba(44,51,59,.3); }
.srpg-card[hidden]{ display:none !important; }

/* card header */
.srpg-bar{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 6px; }
.srpg-num{ font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--red); }
.srpg-h3{ margin:0; font-size:clamp(15px,1.6vw,18px); font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--navy); flex:1; min-width:0; text-wrap:balance; line-height:1.3; }
.srpg-count{ font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mut); background:transparent; border:1px solid var(--line); padding:6px 9px;
  border-radius:0; white-space:nowrap; }
.srpg-cap{ margin:0 0 14px; font-size:13.5px; color:var(--mut); line-height:1.6; }

/* media: natural photos in tight columns — no crops, no effects, no surprises */
.srpg-media{ display:block; columns:2; column-gap:12px; }
.srpg-ph{ position:relative; display:block; margin:0 0 12px; break-inside:avoid;
  border-radius:0; overflow:hidden; cursor:zoom-in; background:#E7E4DE;
  box-shadow:inset 0 0 0 1px rgba(44,51,59,.12);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.srpg-ph:hover{ transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(23,28,34,.16), inset 0 0 0 1px rgba(224,100,13,.45); }
.srpg-ph--feat{ column-span:all; box-shadow:inset 0 0 0 1px rgba(44,51,59,.12), 0 10px 26px rgba(23,28,34,.08); }
.srpg-ph img{ display:block; width:100%; height:auto; transition:filter .3s ease; }
.srpg-ph:hover img{ filter:brightness(1.04); }
.srpg-ph[hidden]{ display:none !important; }
.srpg-media--strip{ columns:3; }
.srpg-card.is-open .srpg-media{ columns:3; }
.srpg-card.is-open .srpg-ph[hidden]{ display:block !important; animation:srpg-in .45s ease both; }
@keyframes srpg-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* +N badge & photo toggle */
.srpg-plus{ position:absolute; z-index:2; right:12px; bottom:12px; display:inline-flex; align-items:baseline; gap:6px;
  color:#fff; font:500 12.5px/1 'IBM Plex Mono',monospace; letter-spacing:.06em;
  background:rgba(44,51,59,.74); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:9px 13px; border-radius:0;
  pointer-events:none; }
.srpg-plus small{ font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.srpg-card.is-open .srpg-plus{ display:none; }
.srpg-ptoggle{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; cursor:pointer;
  font:600 11px/1 'Archivo',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); background:transparent; border:1px solid rgba(44,51,59,.28);
  border-radius:0; padding:12px 16px; min-height:44px;
  transition:border-color .25s ease, background-color .25s ease; }
.srpg-ptoggle:hover{ border-color:var(--red); background:rgba(224,100,13,.07); }
.srpg-ptoggle:focus-visible, .srpg-more:focus-visible, .srpg-filter:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; }
.srpg-card.is-open .srpg-pt-open{ display:none; }
.srpg-pt-close{ display:none; }
.srpg-card.is-open .srpg-pt-close{ display:inline; }

/* before/after */
.srpg-ba{ position:relative; overflow:hidden; border-radius:0; margin:0 0 12px;
  aspect-ratio:16/10; background:#20262D; user-select:none; touch-action:none; cursor:ew-resize; }
.srpg-ba-a, .srpg-ba-b{ position:absolute; inset:0; }
.srpg-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,40%); pointer-events:none; }
.srpg-ba-b{ clip-path:inset(0 50% 0 0); }
.srpg-ba-lab{ position:absolute; z-index:3; top:10px; font:500 9px/1 'IBM Plex Mono',monospace;
  letter-spacing:.2em; text-transform:uppercase; color:#fff; background:rgba(44,51,59,.9);
  border:1px solid rgba(255,255,255,.2); padding:7px 10px; border-radius:0; }
.srpg-ba-lab--l{ left:10px } .srpg-ba-lab--r{ right:10px }
.srpg-ba-h{ position:absolute; z-index:2; top:0; bottom:0; left:50%; width:0; pointer-events:none; }
.srpg-ba-h::before{ content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.4); }
.srpg-ba-h::before{ width:3px; left:-1.5px; }
.srpg-ba-h i{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:40px; height:40px;
  border-radius:0; background:#FAF9F6; color:var(--red);
  box-shadow:0 8px 22px rgba(0,0,0,.3), 0 0 0 1px rgba(44,51,59,.2);
  display:grid; place-items:center; font-style:normal; font-weight:700; font-size:15px; letter-spacing:3px;
  padding-left:3px; transition:transform .25s ease; }
.srpg-ba:hover .srpg-ba-h i, .srpg-ba:focus .srpg-ba-h i{ transform:translate(-50%,-50%) scale(1.08); }

/* global see-more */
.srpg-morewrap{ display:flex; justify-content:center; margin-top:28px; }
.srpg-more{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; min-height:52px;
  font:600 14.5px/1 'Archivo',sans-serif; letter-spacing:.02em; color:#fff; background:var(--red);
  border:0; border-radius:0; padding:0 30px;
  outline:1px solid transparent; outline-offset:9px;
  transition:background-color .3s ease, outline-offset .35s cubic-bezier(.22,1,.36,1), outline-color .35s ease; }
.srpg-more:hover{ background:#C4570B; outline-color:rgba(224,100,13,.45); outline-offset:5px; }
.srpg-more b{ font-weight:400; }
.srpg-live{ position:absolute; left:-9999px; }

/* reveal on scroll (only when JS active) */
.srpg-js .srpg-card{ opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.srpg-js .srpg-card.srpg-vis{ opacity:1; transform:none; }

/* lightbox */
.srpg-lb{ position:fixed; inset:0; z-index:2147483000; background:rgba(24,29,35,.96);
  display:grid; grid-template-rows:auto 1fr; }
.srpg-lb[hidden]{ display:none; }
.srpg-lb-top{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; }
.srpg-lb-count{ color:#A7B0BA; font:500 12px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; }
.srpg-lb-x{ border:1px solid rgba(255,255,255,.2); cursor:pointer; color:#fff;
  background:rgba(51,59,68,.85); border-radius:0; padding:10px 18px; font-size:18px; line-height:1;
  transition:background-color .25s ease, border-color .25s ease; }
.srpg-lb-x:hover{ background:var(--red); border-color:var(--red); }
.srpg-lb-fig{ margin:0; display:grid; place-items:center; padding:0 60px 26px; min-height:0; }
.srpg-lb-fig img{ max-width:100%; max-height:calc(100dvh - 120px); border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.srpg-lb-nav{ position:fixed; top:50%; transform:translateY(-50%); border:1px solid rgba(255,255,255,.2);
  cursor:pointer; color:#fff; background:rgba(51,59,68,.7); width:48px; height:48px; border-radius:0;
  font-size:20px; transition:background-color .25s ease, border-color .25s ease; }
.srpg-lb-nav:hover{ background:var(--red); border-color:var(--red); }
.srpg-lb-prev{ left:12px } .srpg-lb-next{ right:12px }

/* responsive */
@media (max-width:1020px){
  .srpg-grid{ grid-template-columns:1fr; grid-auto-rows:auto; row-gap:0; }
  .srpg-grid .srpg-card{ grid-row-end:auto; }
  .srpg-card{ background:none; border:0; border-top:1px solid var(--line);
    padding:22px 0 26px; box-shadow:none; }
  .srpg-card:first-child{ border-top:0; padding-top:4px; }
  .srpg-card:hover{ transform:none; box-shadow:none; }

  /* Justified mosaic. Every photo is on screen at once and each row fills the
     full width exactly, because a tile flexes in proportion to its own aspect
     ratio (--r, written server-side from the real image dimensions). */
  .srpg-media, .srpg-media--strip, .srpg-card.is-open .srpg-media{
    display:flex !important; flex-wrap:wrap; gap:4px; columns:auto !important;
    overflow:visible; overflow-x:visible; margin:0; padding:0;
    scroll-snap-type:none; }
  .srpg-ph, .srpg-media--strip .srpg-ph{
    margin:0; min-width:88px; height:var(--pg-row,132px);
    flex:var(--r,1.4) 1 calc(var(--r,1.4) * var(--pg-row,132px));
    background:#EBE8E3; scroll-snap-align:none; }
  .srpg-ph img{ width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:var(--fx,50%) var(--fy,38%); }
  .srpg-ph--feat{ flex:0 0 100%; height:auto; aspect-ratio:16/10;
    min-width:0; column-span:none; }
  .srpg-ph[hidden]{ display:block !important; }
  .srpg-card.is-open .srpg-media{ --pg-row:112px; }

  .srpg-ptoggle{ display:inline-flex; }
  .srpg-plus{ display:inline-flex; }
  .srpg-filters{ flex-wrap:wrap; overflow:visible; margin:0 0 22px; padding:0; }
  .srpg-filter{ flex:0 0 auto; }
  .srpg-bar{ gap:12px; }
  .srpg-num{ font-size:24px; }
  .srpg-h3{ font-size:19px; }
  .srpg-num{ font-size:10px; }
  .srpg-count{ font-size:8.5px; padding:5px 8px; letter-spacing:.12em; }
  .srpg-cap{ font-size:13px; }
  .srpg-morewrap{ margin-top:22px; }
  .srpg-more{ width:100%; justify-content:center; }
  .srpg-lb-fig{ padding:0 8px 20px; }
  .srpg-lb-nav{ width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce){
  .srpg-ph, .srpg-ph img, .srpg-more{ transition:none !important; animation:none !important; }
  .srpg-card.is-open .srpg-ph[hidden]{ animation:none !important; }
}

/* mobile swipe dots */
.srpg-dots{ display:none; }
@media (max-width:1020px){
  .srpg-dots{ display:flex; justify-content:center; gap:7px; margin:0 0 4px; }
  .srpg-dots button{ width:16px; height:2px; padding:0; border:0; border-radius:0;
    cursor:pointer; background:rgba(44,51,59,.25);
    transition:background .25s ease, transform .25s ease; }
  .srpg-dots button.is-on{ background:var(--red); transform:scaleX(1.5); }
}

/* first-time swipe hint */
.srpg-swipehint{ display:none; }
@media (max-width:1020px){
  .srpg-swipehint{ display:block; margin:0 0 6px; text-align:center;
    color:var(--mut); font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.18em;
    text-transform:uppercase;
    animation:srpg-hintpulse 2.2s ease infinite; }
  .srpg-swipehint.is-done{ display:none; }
}
@keyframes srpg-hintpulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .srpg-swipehint{ animation:none; } }

/* =====================================================================
   4.7.6 — DESKTOP ONLY (1021px and up).
   Everything above this line is the untouched 4.7.3.4 stylesheet, so
   phones and tablets render exactly as they always have. The redesign
   lives entirely inside this one query and cannot leak below 1021px.
   ===================================================================== */
@media (min-width:1021px){

  .srpg{
    --pg-accent:#E0640D; --pg-ink:#2C333B; --pg-ink-dk:#1B2127; --pg-muted:#5A636D;
    --pg-line:rgba(44,51,59,.14); --pg-line-2:rgba(44,51,59,.30);
    --pg-photo-bg:#EBE8E3; --pg-row:230px; --pg-photo-gap:4px;
    --pg-mono:'IBM Plex Mono',ui-monospace,monospace;
  }

  /* section header */
  .srpg-head{ margin-bottom:34px; max-width:46rem; }
  .srpg-eyebrow{ color:var(--pg-accent); font-weight:600; font-size:11px; }
  .srpg-eyebrow::before{ width:26px; height:2px; }
  .srpg-title{ font-size:clamp(29px,3.6vw,46px); letter-spacing:-.022em; line-height:1.03; }
  .srpg-title em{ font-size:1.18em; }
  .srpg-sub{ margin-top:16px; font-size:16px; line-height:1.75; }
  .srpg-cta{
    display:inline-flex; align-items:center; gap:10px; margin-top:22px; min-height:52px;
    padding:0 30px; text-decoration:none; border-radius:0;
    font:700 12.5px/1 'Archivo',sans-serif; letter-spacing:.12em; text-transform:uppercase;
    color:#fff; background:var(--pg-accent); transition:background-color .28s ease;
  }
  .srpg-cta:hover{ background:var(--pg-ink); color:#fff; }

  /* filters — solid accent when active, matching the site's buttons */
  .srpg-filters{ margin-bottom:8px; }
  .srpg-filter{ min-height:42px; padding:12px 17px; letter-spacing:.1em; font-weight:600; }
  .srpg-filter[aria-pressed="true"]{ background:var(--pg-accent); border-color:var(--pg-accent); color:#fff; }
  .srpg-filter[aria-pressed="true"]::after{ display:none; }

  /* ONE PROJECT PER ROW — no second column to fall out of step with,
     so the masonry voids are structurally impossible */
  .srpg-grid, .srpg-grid.srpg-msnry{
    grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:0; align-items:start;
  }
  .srpg-grid.srpg-msnry .srpg-card{ grid-row-end:auto; }

  /* the boxed card is gone: a hairline rule and a big numeral carry each project */
  .srpg-card{
    background:none; border:0; border-top:1px solid var(--pg-line); border-radius:0;
    box-shadow:none; padding:26px 0 34px; transform:none;
  }
  .srpg-card:hover{ box-shadow:none; transform:none; border-color:var(--pg-line); }
  .srpg-card::before, .srpg-card::after{ display:none; content:none; }
  .srpg-card:first-child{ border-top:0; padding-top:6px; }

  .srpg-bar{ align-items:baseline; gap:14px; margin-bottom:8px; }
  .srpg-num{ font:600 26px/1 var(--pg-mono); letter-spacing:-.02em; color:var(--pg-accent); flex:0 0 auto; }
  .srpg-h3{ font-size:clamp(16px,1.7vw,20px); font-weight:800; letter-spacing:-.005em; line-height:1.24; }
  .srpg-count{ font:600 10px/1 var(--pg-mono); letter-spacing:.16em; color:var(--pg-muted);
    background:none; border:0; padding:0; }
  .srpg-cap{ margin-bottom:18px; font-size:14.5px; line-height:1.68; max-width:58ch; }

  /* gapless justified rows: each tile grows by its own aspect ratio (--r),
     so every row fills the full width exactly — no ragged column bottoms */
  .srpg-media, .srpg-media--strip, .srpg-card.is-open .srpg-media{
    display:flex; flex-wrap:wrap; gap:var(--pg-photo-gap); columns:auto;
  }
  .srpg-ph{
    margin:0; min-width:110px; height:var(--pg-row);
    flex:var(--r,1.33) 1 calc(var(--r,1.33) * var(--pg-row));
    background:var(--pg-photo-bg); box-shadow:none; transform:none;
  }
  .srpg-ph:hover{ transform:none; box-shadow:none; }
  .srpg-ph::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    box-shadow:inset 0 0 0 3px var(--pg-accent); transition:opacity .28s ease;
  }
  .srpg-ph:hover::after{ opacity:1; }
  .srpg-ph img{
    width:100%; height:100%; object-fit:cover;
    object-position:var(--fx,50%) var(--fy,38%);
  }
  .srpg-ph:hover img{ filter:none; opacity:.9; }
  .srpg-ph--feat{ flex:0 0 100%; height:auto; aspect-ratio:16/9; column-span:none; }
  .srpg-card.is-open .srpg-media{ --pg-row:200px; }

  .srpg-plus{
    right:0; bottom:0; background:var(--pg-accent); border:0;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    font:600 12.5px/1 var(--pg-mono); letter-spacing:.04em; padding:10px 14px;
  }
  .srpg-ptoggle{
    margin-top:16px; padding:0 0 8px; min-height:0; border:0;
    border-bottom:2px solid var(--pg-accent); background:none;
    font:700 11px/1 'Archivo',sans-serif; letter-spacing:.14em;
    transition:color .22s ease, gap .28s cubic-bezier(.22,1,.36,1);
  }
  .srpg-ptoggle:hover{ color:var(--pg-accent); background:none; border-color:var(--pg-accent); gap:14px; }
  .srpg-ptoggle b{ transition:transform .3s ease; }
  .srpg-card.is-open .srpg-ptoggle b{ transform:rotate(180deg); }

  /* before/after: wider frame, labels off the roofline, accent handle */
  .srpg-ba{ aspect-ratio:16/9; margin-bottom:var(--pg-photo-gap); }
  .srpg-ba-lab{ top:auto; bottom:12px; font-weight:700; letter-spacing:.22em; padding:8px 12px; border:0; }
  .srpg-ba-lab--l{ left:12px; background:rgba(27,33,39,.9); }
  .srpg-ba-lab--r{ right:12px; background:var(--pg-accent); }
  .srpg-ba-h i{ width:48px; height:48px; background:var(--pg-accent); color:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.34); font-weight:800; font-size:16px; }
  .srpg-ba:hover .srpg-ba-h i, .srpg-ba:focus .srpg-ba-h i{ transform:translate(-50%,-50%) scale(1.1); }

  .srpg-morewrap{ margin-top:10px; }
  .srpg-more{ min-height:54px; padding:0 34px; letter-spacing:.12em; text-transform:uppercase;
    font-size:12.5px; font-weight:700; outline:0; transition:background-color .28s ease, gap .3s cubic-bezier(.22,1,.36,1); }
  .srpg-more:hover{ background:var(--pg-ink); outline:0; gap:18px; }

  .srpg-lb-count{ color:#fff; letter-spacing:.24em; }
  .srpg-lb-x, .srpg-lb-nav{ border:0; background:rgba(255,255,255,.12); }
  .srpg-lb-x:hover, .srpg-lb-nav:hover{ background:var(--pg-accent); border:0; }
  .srpg-lb-fig img{ box-shadow:none; }
}

@media (min-width:1021px) and (prefers-reduced-motion:reduce){
  .srpg-ph::after, .srpg-ptoggle, .srpg-more{ transition:none !important; }
}


/* ---------- mosaic row heights by screen size ---------- */
@media (max-width:600px){
  .srpg{ --pg-row:118px; }
  .srpg-card.is-open .srpg-media{ --pg-row:104px; }
  .srpg-ph{ min-width:76px; }
}
@media (max-width:400px){
  .srpg{ --pg-row:104px; }
  .srpg-card.is-open .srpg-media{ --pg-row:96px; }
}

/* ============================================================
   EDITORIAL THEME 4.8.0
   Type, colour and controls aligned to a modern site design:
   one sans family, tracked small caps, hairlines, square corners,
   accent used sparingly. Everything still keys off the four CSS
   variables, so a different site can be re-themed in one place.
   ============================================================ */
.srpg{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  max-width:1440px; padding-left:clamp(20px,3.4vw,54px); padding-right:clamp(20px,3.4vw,54px);
  --ease:cubic-bezier(.22,.72,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
}
.srpg *{ font-family:inherit; }

/* section header */
.srpg-head{ max-width:760px; margin:0 0 clamp(30px,3.6vw,46px); }
.srpg-eyebrow{ font:700 10.5px/1 'Archivo',sans-serif; letter-spacing:.24em;
  text-transform:uppercase; color:#8A929B; gap:14px; margin:0 0 20px; }
.srpg-eyebrow::before{ width:38px; height:1px; background:var(--red); }
.srpg-title{ font-size:clamp(30px,3.4vw,50px); font-weight:700;
  line-height:1.06; letter-spacing:-.03em; color:var(--navy); }
.srpg-title em{ font-style:normal; font-family:inherit; font-weight:700; color:var(--red); }
.srpg-sub{ margin-top:18px; font-size:clamp(14.5px,1.05vw,15.8px); line-height:1.75;
  color:var(--mut); max-width:52ch; letter-spacing:-.003em; }

/* filter pills */
.srpg-filters{ gap:9px; margin-bottom:clamp(26px,3vw,38px); }
.srpg-filter{ font:700 10.5px/1 'Archivo',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; padding:12px 18px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--mut);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.srpg-filter:hover{ border-color:var(--navy); color:var(--navy); }
.srpg-filter[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }
.srpg-filter[aria-pressed="true"]::after{ display:none; }

/* project index row */
.srpg-bar{ align-items:center; gap:16px; margin:0 0 6px; }
.srpg-num{ font:700 clamp(24px,2.6vw,38px)/1 'Archivo',sans-serif; letter-spacing:-.03em;
  color:var(--red); font-variant-numeric:tabular-nums; }
.srpg-h3{ font-size:clamp(19px,2vw,28px); font-weight:700; letter-spacing:-.026em;
  text-transform:none; color:var(--navy); line-height:1.15; }
.srpg-count{ font:700 9.5px/1 'Archivo',sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mut); padding:7px 11px; border-radius:999px;
  background:rgba(20,23,26,.05); border:0; }
.srpg-cap{ margin:12px 0 20px; font-size:14.5px; line-height:1.7; color:var(--mut);
  max-width:60ch; letter-spacing:-.003em; }

/* photos */
.srpg-ph{ border-radius:0; background:#EBE8E3; box-shadow:none; }
.srpg-ph:hover{ transform:none; box-shadow:none; }
.srpg-ph img{ transition:transform .7s var(--out); }
.srpg-ph:hover img{ transform:scale(1.035); filter:none; }
.srpg-ph--feat{ box-shadow:none; }
.srpg-plus{ right:14px; bottom:14px; border-radius:999px;
  background:rgba(14,17,20,.82); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font:700 13px/1 'Archivo',sans-serif; letter-spacing:-.01em; padding:10px 14px; }
.srpg-plus small{ font-size:8.5px; letter-spacing:.18em; opacity:.7; }

/* view all / show fewer — underlined text action */
.srpg-ptoggle{ border:0; background:none; padding:0 0 11px; border-radius:0;
  margin-top:20px; position:relative; color:var(--navy);
  font:700 11.5px/1 'Archivo',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.srpg-ptoggle::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line); }
.srpg-ptoggle::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left; z-index:1;
  transition:transform .5s var(--out); }
.srpg-ptoggle:hover{ background:none; color:var(--red); }
.srpg-ptoggle:hover::before{ transform:scaleX(1); }
.srpg-ptoggle b{ color:var(--red); transition:transform .4s var(--out); }
.srpg-card.is-open .srpg-ptoggle b{ transform:rotate(180deg); }

/* see more projects — solid pill */
.srpg-morewrap{ margin-top:clamp(30px,3.4vw,44px); justify-content:flex-start; }
.srpg-more{ display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 30px;
  border-radius:999px; border:0; background:var(--navy); color:#fff;
  font:700 11.5px/1 'Archivo',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:transform .45s var(--out), background-color .35s var(--ease); }
.srpg-more:hover{ background:var(--red); transform:translateY(-2px); }
.srpg-more b{ color:var(--red); transition:color .35s var(--ease), transform .4s var(--out); }
.srpg-more:hover b{ color:#fff; transform:translateY(2px); }

/* before / after */
.srpg-ba{ border-radius:0; margin-bottom:4px; }
.srpg-ba-lab{ font:700 9.5px/1 'Archivo',sans-serif; letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px; padding:8px 12px; background:rgba(14,17,20,.72); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.srpg-ba-h i{ background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.35); border:0; color:var(--red); }

/* lightbox */
.srpg-lb-count{ font:700 11px/1 'Archivo',sans-serif; letter-spacing:.18em;
  font-variant-numeric:tabular-nums; }
.srpg-lb-x:hover, .srpg-lb-prev:hover, .srpg-lb-next:hover{
  background:var(--red); border-color:var(--red); color:#fff; }

@media (max-width:1020px){
  .srpg-more{ width:100%; justify-content:center; height:54px; }
}
@media (max-width:400px){
  .srpg-title{ font-size:clamp(25px,7.6vw,31px); }
}
@media (prefers-reduced-motion:reduce){
  .srpg-ph:hover img{ transform:none; }
}


/* ============================================================
   4.8.1 — desktop photo scale
   The lead photo no longer becomes a full-width 16:9 hero. At 1440px
   that produced a single 800px-tall image per project. Every photo now
   flows in the same justified rows, so a project reads as a balanced
   set rather than one giant picture followed by scraps.
   ============================================================ */
@media (min-width:1021px){
  .srpg{ --pg-row:260px; }
  .srpg-ph, .srpg-media--strip .srpg-ph{
    min-width:120px; height:var(--pg-row,260px);
    flex:var(--r,1.33) 1 calc(var(--r,1.33) * var(--pg-row,260px)); }
  .srpg-ph--feat{
    flex:var(--r,1.5) 1 calc(var(--r,1.5) * var(--pg-row,260px));
    height:var(--pg-row,260px); aspect-ratio:auto; min-width:150px; column-span:none; }
  .srpg-card.is-open .srpg-media{ --pg-row:215px; }
}
@media (min-width:1400px){
  .srpg{ --pg-row:290px; }
  .srpg-card.is-open .srpg-media{ --pg-row:235px; }
}