/*
Theme Name: Architectural Systems
Theme URI: https://arch-systems.net
Author: Architectural Systems LLC
Description: Custom theme for Architectural Systems LLC — a manufacturers' representative for daylighting and operable partition systems. Includes Case Studies, a Line Card, Team, and Updates as editable content. No page builder, no plugin dependencies.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arch-systems
Tags: business, custom-logo, custom-menu, featured-images, translation-ready
*/


/* ============================================================
   1. TOKENS
   Palette is locked to the Architectural Systems identity:
   charcoal #26292E + amber #F5A623.
   ============================================================ */
:root{
  --char:#26292E;          /* brand charcoal */
  --char-2:#3A4048;        /* softer charcoal for dark surfaces */
  --graphite:#6A727C;      /* muted body text */
  --amber:#F5A623;         /* brand amber */
  --amber-ink:#8A5A08;     /* amber, darkened for legible text on light */
  --diffuse:#EDF0F3;       /* cool diffused-light page ground */
  --paper:#FFFFFF;
  --rule:rgba(38,41,46,.14);
  --rule-dk:rgba(255,255,255,.16);

  --maxw:1180px;
  --pad:clamp(20px,5vw,56px);

  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--diffuse);
  color:var(--char);
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:700; line-height:1.02; letter-spacing:-.015em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}

:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:2px}

/* Expanded-width display type — the wordmark's own setting */
.xw{font-family:var(--f-display); font-variation-settings:'wdth' 125,'wght' 700}
.xw-med{font-family:var(--f-display); font-variation-settings:'wdth' 125,'wght' 500}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.band{padding-block:clamp(76px,9vw,132px)}
.band--tight{padding-block:clamp(52px,6vw,88px)}
.band--dark{background:var(--char); color:var(--diffuse)}
.band--paper{background:var(--paper)}

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-ink); margin:0 0 18px;
}
.band--dark .eyebrow{color:var(--amber)}

.h2{font-size:clamp(1.85rem,1.1rem + 2.6vw,2.9rem); font-variation-settings:'wdth' 112,'wght' 700}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.24rem); color:var(--graphite); max-width:62ch}
.band--dark .lede{color:rgba(237,240,243,.74)}

.rule-amber{width:56px; height:4px; background:var(--amber); border:0; margin:0 0 26px}

/* ============================================================
   4. WORDMARK
   CSS-drawn stand-in for the stacked lockup.
   Swap for the real SVG — see the note in the header markup.
   ============================================================ */
.mark{display:inline-flex; flex-direction:column; gap:5px; text-decoration:none; line-height:1}
.mark__top{
  font-family:var(--f-display); font-variation-settings:'wdth' 125,'wght' 700;
  font-size:clamp(.92rem,.82rem + .4vw,1.12rem); letter-spacing:.05em; color:var(--char);
}
.mark__rule{display:block; height:3px; background:var(--amber); width:100%}
.mark__bot{
  font-family:var(--f-display); font-variation-settings:'wdth' 125,'wght' 500;
  font-size:clamp(.72rem,.66rem + .26vw,.86rem); letter-spacing:.34em; color:var(--char);
}
.band--dark .mark__top,.band--dark .mark__bot,
.site-foot .mark__top,.site-foot .mark__bot{color:var(--diffuse)}

/* ============================================================
   5. HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(237,240,243,.9);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head__in{display:flex; align-items:center; gap:28px; min-height:76px}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:clamp(16px,2.2vw,32px)}
.site-nav a{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--char); padding:6px 0; border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.site-nav a:hover{border-bottom-color:var(--amber)}
.nav-cta{
  font-family:var(--f-mono)!important; background:var(--char); color:var(--diffuse)!important;
  padding:11px 18px!important; border:0!important; text-decoration:none;
  transition:background .18s ease;
}
.nav-cta:hover{background:var(--amber-ink)}
.nav-hide{display:inline}
@media (max-width:860px){ html:not(.has-js) .nav-hide{display:none} }

/* ============================================================
   6. HERO + SIGNATURE SECTION DRAWING
   ============================================================ */
.hero{padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,96px); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(28px,5vw,68px); align-items:center}
@media (max-width:940px){ .hero__grid{grid-template-columns:1fr; gap:36px} }

.hero h1{
  font-size:clamp(2.5rem,1.2rem + 5.4vw,4.6rem);
  font-variation-settings:'wdth' 118,'wght' 700;
  line-height:.98; letter-spacing:-.025em; margin:0 0 24px;
}
.hero h1 em{font-style:normal; color:var(--amber-ink)}
.hero__sub{font-size:clamp(1.06rem,1rem + .45vw,1.26rem); color:var(--graphite); max-width:52ch}
.hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

.btn{
  display:inline-block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; padding:15px 26px; border:2px solid var(--char);
  background:var(--char); color:var(--diffuse); cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{background:var(--amber-ink); border-color:var(--amber-ink)}
.btn--ghost{background:transparent; color:var(--char)}
.btn--ghost:hover{background:var(--char); color:var(--diffuse); border-color:var(--char)}

/* --- the drawing --- */
.section-fig{position:relative}
.section-fig svg{display:block; width:100%; height:auto}
.fig-cap{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--graphite); margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
}
.fig-cap b{font-weight:500; color:var(--char)}

.toggle{display:inline-flex; border:2px solid var(--char); margin-bottom:18px}
.toggle button{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  padding:10px 18px; background:transparent; color:var(--char); border:0; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.toggle button[aria-pressed="true"]{background:var(--char); color:var(--diffuse)}

/* drawing internals */
.dw-struct{fill:none; stroke:var(--char); stroke-width:2}
.dw-thin{fill:none; stroke:var(--char); stroke-width:1.2}
.dw-solid{fill:var(--char)}
.dw-hatch{stroke:var(--char); stroke-width:1; opacity:.45}
.dw-dash{fill:none; stroke:var(--char); stroke-width:1.2; stroke-dasharray:5 5; opacity:.5}
.dw-amber{fill:var(--amber)}
.dw-ray{stroke:var(--amber); stroke-width:1.4; opacity:.55}
.dw-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; fill:var(--char); text-transform:uppercase}
.dw-label--amber{fill:var(--amber-ink)}
.dw-leader{stroke:var(--char); stroke-width:1; opacity:.55}

.dw-cone{opacity:.92; animation:daylight 9s ease-in-out infinite}
@keyframes daylight{0%,100%{opacity:.78} 50%{opacity:1}}

.kw-panel{
  fill:var(--paper); stroke:var(--char); stroke-width:1.6;
  transform:translateX(var(--stow));
  transition:transform .85s cubic-bezier(.4,0,.2,1);
}
.kw-panel:nth-of-type(2){transition-delay:.05s}
.kw-panel:nth-of-type(3){transition-delay:.1s}
.kw-panel:nth-of-type(4){transition-delay:.15s}
.kw-panel:nth-of-type(5){transition-delay:.2s}
.is-divided .kw-panel{transform:translateX(0)}

@media (max-width:760px){
  .dw-label,.dw-leader{display:none}
}

/* ============================================================
   7. MANUFACTURER PANELS — equal billing, deliberately
   ============================================================ */
.mfr-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end; margin-bottom:clamp(36px,4vw,56px)}
@media (max-width:860px){ .mfr-head{grid-template-columns:1fr; align-items:start} }

.mfr{border-top:4px solid var(--amber); padding-top:30px; margin-bottom:clamp(52px,6vw,84px)}
.mfr:last-of-type{margin-bottom:0}
.mfr__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px)}
@media (max-width:860px){ .mfr__grid{grid-template-columns:1fr; gap:26px} }

.mfr__name{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.5rem); font-variation-settings:'wdth' 118,'wght' 700; margin:0 0 10px}
.mfr__kind{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); margin:0 0 20px}

.series{border-top:1px solid var(--rule)}
.series li{padding:19px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:minmax(0,1fr); gap:4px}
.series__n{font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700; font-size:1.02rem; letter-spacing:.005em}
.series__d{color:var(--graphite); font-size:.98rem}

.specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.specs li{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em;
  border:1px solid var(--rule); padding:7px 11px; color:var(--char); background:var(--paper);
}
.band--paper .specs li{background:var(--diffuse)}

.pullnote{
  margin-top:24px; padding-left:18px; border-left:3px solid var(--amber);
  font-size:1rem; color:var(--char);
}

/* ============================================================
   8. PHASES — a real sequence, so it gets real numbers
   ============================================================ */
.phases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule-dk); border:1px solid var(--rule-dk)}
@media (max-width:900px){ .phases{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .phases{grid-template-columns:1fr} }
.phase{background:var(--char); padding:clamp(24px,3vw,34px)}
.phase__n{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--amber); display:block; margin-bottom:14px}
.phase__t{font-size:1.16rem; font-variation-settings:'wdth' 110,'wght' 700; margin:0 0 9px}
.phase__d{color:rgba(237,240,243,.7); font-size:.97rem; margin:0}

/* ============================================================
   9. MARKETS
   ============================================================ */
.markets{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(30px,4vw,44px)}
@media (max-width:880px){ .markets{grid-template-columns:repeat(2,minmax(0,1fr))} }
.market{background:var(--paper); padding:26px 22px}
.market__t{font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700; font-size:1.02rem; margin:0 0 7px}
.market__d{margin:0; font-size:.92rem; color:var(--graphite); line-height:1.55}

/* ============================================================
   10. TERRITORY
   ============================================================ */
.terr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,36px); margin-top:clamp(30px,4vw,44px)}
@media (max-width:760px){ .terr{grid-template-columns:1fr} }
.terr__card{border:1px solid var(--rule-dk); padding:clamp(26px,3vw,38px)}
.terr__reg{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--amber); margin:0 0 14px}
.terr__t{font-size:1.5rem; font-variation-settings:'wdth' 114,'wght' 700; margin:0 0 12px}
.terr__d{color:rgba(237,240,243,.72); margin:0}

/* ============================================================
   11. CONTACT
   ============================================================ */
.contact{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(28px,5vw,64px)}
@media (max-width:900px){ .contact{grid-template-columns:1fr} }

.dl{border-top:1px solid var(--rule); margin-top:28px}
.dl div{padding:16px 0; border-bottom:1px solid var(--rule)}
.dl dt{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); margin-bottom:5px}
.dl dd{margin:0; font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 500; font-size:1.05rem}
.dl dd a{text-decoration:none; border-bottom:2px solid var(--amber)}

.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:600px){ .form{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite)}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--char);
  background:var(--paper); border:1px solid var(--rule); border-radius:0; padding:13px 14px; width:100%;
}
.field textarea{min-height:128px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--char)}
.form-note{
  grid-column:1/-1; font-family:var(--f-mono); font-size:.75rem; line-height:1.7;
  border-left:3px solid var(--amber); padding-left:14px; color:var(--graphite);
}
.form-note[hidden]{display:none}

/* ============================================================
   12. FOOTER
   ============================================================ */
.site-foot{background:var(--char); color:var(--diffuse); padding-block:clamp(48px,5vw,72px) 34px}
.foot__top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:760px){ .foot__top{grid-template-columns:1fr} }
.foot__links{display:flex; flex-wrap:wrap; gap:12px 28px}
.foot__links a{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; opacity:.8}
.foot__links a:hover{opacity:1; color:var(--amber)}
.legal{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--rule-dk);
  font-family:var(--f-mono); font-size:.68rem; line-height:1.85; color:rgba(237,240,243,.5);
}
.legal p{margin:0 0 8px}

/* ============================================================
   13. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* ============================================================
   14. PROJECTS GALLERY
   ============================================================ */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.chip{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 15px; background:transparent; color:var(--char);
  border:1px solid var(--rule); cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover{border-color:var(--char)}
.chip[aria-pressed="true"]{background:var(--char); color:var(--diffuse); border-color:var(--char)}

.gal{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px); margin-top:clamp(30px,4vw,44px);
}
@media (max-width:900px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .gal{grid-template-columns:1fr} }

.gal__fig{margin:0; background:var(--paper); border:1px solid var(--rule); display:flex; flex-direction:column}
.gal__fig[hidden]{display:none}

/* Photo slot. Replace the whole .gal__ph div with:
   <img class="gal__img" src="assets/projects/name.jpg" alt="Short description"> */
.gal__ph{
  aspect-ratio:4/3; position:relative; background:var(--diffuse);
  background-image:repeating-linear-gradient(135deg,
    rgba(38,41,46,.05) 0 1px, transparent 1px 9px);
  display:flex; align-items:center; justify-content:center;
}
.gal__ph::after{
  content:attr(data-slot);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--graphite); border:1px dashed var(--rule); padding:8px 13px; background:var(--paper);
}
.gal__img{aspect-ratio:4/3; width:100%; object-fit:cover; display:block}

.gal__meta{padding:20px 20px 24px; border-top:1px solid var(--rule)}
.gal__mkt{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink); margin:0 0 9px}
.gal__t{font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700; font-size:1.08rem; margin:0 0 4px}
.gal__loc{font-size:.9rem; color:var(--graphite); margin:0 0 13px}
.gal__sys{display:flex; flex-wrap:wrap; gap:6px; margin:0}
.gal__sys li{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; border:1px solid var(--rule); padding:5px 9px; color:var(--char)}
.tbf{color:var(--graphite); font-style:italic}

.gal-empty{
  grid-column:1/-1; font-family:var(--f-mono); font-size:.8rem; color:var(--graphite);
  border:1px dashed var(--rule); padding:34px; text-align:center;
}
.gal-empty[hidden]{display:none}

/* ============================================================
   15. SERVICE PAGE
   ============================================================ */
.pagehero{padding-block:clamp(52px,6vw,92px) clamp(34px,4vw,54px); border-bottom:1px solid var(--rule)}
.pagehero h1{font-size:clamp(2.2rem,1.2rem + 4.2vw,3.8rem); font-variation-settings:'wdth' 116,'wght' 700; line-height:1; letter-spacing:-.022em; margin:0 0 22px}
.pagehero h1 em{font-style:normal; color:var(--amber-ink)}

.two{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,60px); align-items:start}
@media (max-width:860px){ .two{grid-template-columns:1fr; gap:28px} }

.check{border-top:1px solid var(--rule)}
.check li{padding:15px 0 15px 30px; border-bottom:1px solid var(--rule); position:relative; font-size:1rem}
.check li::before{
  content:""; position:absolute; left:0; top:23px; width:14px; height:3px; background:var(--amber);
}
.band--dark .check,.band--dark .check li{border-color:var(--rule-dk)}

.qa{border-top:1px solid var(--rule); margin-top:clamp(28px,3vw,40px)}
.qa__row{border-bottom:1px solid var(--rule); padding:22px 0}
.qa__q{font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700; font-size:1.06rem; margin:0 0 8px}
.qa__a{margin:0; color:var(--graphite); font-size:.99rem; max-width:70ch}
.qa__tag{
  display:inline-block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber-ink); border:1px solid var(--rule);
  padding:3px 8px; margin-bottom:10px;
}

.callout{
  background:var(--char); color:var(--diffuse); padding:clamp(28px,4vw,44px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center;
}
@media (max-width:760px){ .callout{grid-template-columns:1fr} }
.callout h3{font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem); font-variation-settings:'wdth' 112,'wght' 700; margin:0 0 10px}
.callout p{margin:0; color:rgba(237,240,243,.72)}
.callout .btn{background:var(--amber); border-color:var(--amber); color:var(--char)}
.callout .btn:hover{background:var(--diffuse); border-color:var(--diffuse)}

/* ============================================================
   16. ABOUT PAGE
   ============================================================ */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(30px,4vw,44px)}
@media (max-width:820px){ .values{grid-template-columns:1fr} }
.value{background:var(--paper); padding:clamp(26px,3vw,36px)}
.value__n{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--amber-ink); display:block; margin-bottom:14px}
.value__t{font-size:1.2rem; font-variation-settings:'wdth' 110,'wght' 700; margin:0 0 10px}
.value__d{margin:0; color:var(--graphite); font-size:.97rem}

.team{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); margin-top:clamp(30px,4vw,44px)}
@media (max-width:820px){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .team{grid-template-columns:1fr} }
.person{border:1px solid var(--rule-dk); padding:26px}
.person__ph{
  width:74px; height:74px; margin-bottom:18px; background:rgba(255,255,255,.06);
  border:1px solid var(--rule-dk); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; color:rgba(237,240,243,.45);
}
.person__n{font-size:1.1rem; font-variation-settings:'wdth' 110,'wght' 700; margin:0 0 5px}
.person__r{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:0 0 12px}
.person__d{margin:0; font-size:.94rem; color:rgba(237,240,243,.7)}

/* ============================================================
   17. HEADER CTA — shortens on phones so it stops wrapping
   ============================================================ */
.cta-short{display:none}
@media (max-width:600px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .nav-cta{padding:10px 15px!important; font-size:.72rem!important}
  .site-head__in{gap:14px; min-height:66px}
  .site-nav{gap:14px}
}

/* ============================================================
   19. MOBILE MENU
   Progressive enhancement: the toggle only appears once JS has
   added .has-js to <html>. With JS off, the nav stays inline
   and reachable rather than being locked behind a dead button.
   ============================================================ */
.nav-toggle{display:none}
.nav-foot{display:none}
.nt-close{display:none}

@media (max-width:860px){

  /* no JS: fall back to the old behaviour — hide secondary items */
  html:not(.has-js) .nav-hide{display:none}
  html:not(.has-js) .site-nav li:not(:first-child){display:none}

  .has-js .nav-toggle{
    display:inline-flex; align-items:center; gap:10px; margin-left:auto;
    position:relative; z-index:80;
    background:transparent; border:0; padding:12px 0; cursor:pointer;
    font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--char);
  }
  .nav-toggle__bars{position:relative; display:block; width:22px; height:14px}
  .nav-toggle__bars i{
    position:absolute; left:0; right:0; height:2px; background:var(--char);
    transition:transform .22s ease, opacity .16s ease;
  }
  .nav-toggle__bars i:nth-child(1){top:0}
  .nav-toggle__bars i:nth-child(2){top:6px}
  .nav-toggle__bars i:nth-child(3){top:12px}

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-toggle[aria-expanded="true"] .nt-open{display:none}
  .nav-toggle[aria-expanded="true"] .nt-close{display:inline}

  /* backdrop-filter on the header would make it the containing block for
     position:fixed children, which collapses the panel to header height.
     Drop it at this breakpoint and go fully opaque instead. */
  .has-js .site-head{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--diffuse);
  }

  /* the panel */
  .has-js .site-nav{
    position:fixed; top:76px; left:0; right:0; bottom:0; z-index:60;
    margin:0; padding:8px var(--pad) calc(var(--pad) + 20px);
    background:var(--char); color:var(--diffuse);
    flex-direction:column; align-items:stretch; gap:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .has-js .site-nav[data-open="true"]{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }

  .has-js .site-nav li{display:block}
  .has-js .site-nav a,
  .has-js .site-nav li a{
    display:block; padding:22px 0; border-bottom:1px solid var(--rule-dk);
    color:var(--diffuse); text-decoration:none; text-transform:none;
    font-family:var(--f-display); font-variation-settings:'wdth' 112,'wght' 700;
    font-size:1.45rem; letter-spacing:-.01em; line-height:1.1;
  }
  .has-js .site-nav a:hover,
  .has-js .site-nav li a:hover,
  .has-js .site-nav li.current-menu-item a{border-bottom-color:var(--amber); color:var(--amber)}

  /* the amber call-to-action sits below the links, not in the row */
  .has-js .site-nav .nav-cta{
    order:5; margin-top:28px; border:0; text-align:center;
    background:var(--amber)!important; color:var(--char)!important;
    padding:19px 22px!important; font-family:var(--f-mono)!important;
    font-size:.78rem!important; letter-spacing:.14em; text-transform:uppercase;
  }
  .has-js .site-nav .cta-long{display:inline}
  .has-js .site-nav .cta-short{display:none}

  /* tap-to-call block pinned to the bottom of the panel */
  .has-js .site-nav .nav-foot{
    display:block; order:6; margin-top:auto; padding-top:34px;
  }
  .has-js .site-nav .nav-foot a{
    display:block; padding:9px 0; border:0;
    font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em;
    color:rgba(237,240,243,.72); text-transform:none;
  }
  .has-js .site-nav .nav-foot a:hover{color:var(--amber)}
  .nav-foot__label{
    display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--amber); margin-bottom:8px;
  }
}

@media (max-width:600px){
  .has-js .site-nav{top:66px}
  .has-js .site-nav a,
  .has-js .site-nav li a{font-size:1.3rem; padding:19px 0}
}
/* ============================================================
   18. WORDPRESS INTEGRATION
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--char);color:var(--diffuse);
  padding:12px 18px;font-family:var(--f-mono);font-size:.78rem}
.skip:focus{left:0}

/* nav menu items come from wp_nav_menu as <li> */
.site-nav ul,.foot__links ul{display:contents;list-style:none;margin:0;padding:0}
.site-nav li,.foot__links li{display:inline-flex}
.site-nav li a{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--char);padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.site-nav li a:hover,.site-nav li.current-menu-item a{border-bottom-color:var(--amber)}
.foot__links li a{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;opacity:.8;
}
.foot__links li a:hover{opacity:1;color:var(--amber)}

.mark-img{max-height:58px;width:auto;display:block}

/* gallery tiles are links now */
.gal__link{display:block;text-decoration:none}
.gal__t a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .16s ease}
.gal__fig:hover .gal__t a{border-bottom-color:var(--amber)}

/* case-study / update hero image */
.cs-hero{width:100%;max-height:640px;overflow:hidden;background:var(--char)}
.cs-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* long-form editor content */
.prose{max-width:72ch;font-size:1.06rem}
.prose h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);font-variation-settings:'wdth' 112,'wght' 700;margin:2em 0 .5em}
.prose h3{font-size:1.25rem;font-variation-settings:'wdth' 108,'wght' 700;margin:1.7em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.3em 1.2em;padding:0}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.45em}
.prose a{color:var(--amber-ink);text-decoration:none;border-bottom:2px solid var(--amber)}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:3px solid var(--amber);font-size:1.1rem}
.prose img,.prose figure{max-width:100%;height:auto;margin:1.6em 0}
.prose figcaption{font-family:var(--f-mono);font-size:.72rem;color:var(--graphite);margin-top:8px}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--rule);padding:10px 12px;text-align:left}
.prose th{font-family:var(--f-display);font-variation-settings:'wdth' 106,'wght' 700}

/* updates list */
.upd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(30px,4vw,44px)}
@media (max-width:860px){ .upd{grid-template-columns:1fr} }
.upd--list{grid-template-columns:1fr;max-width:80ch}
.upd__item{border-top:2px solid var(--amber);padding-top:20px}
.upd--list .upd__item{padding-bottom:26px}
.upd__date{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);margin:0 0 9px}
.upd__t{font-family:var(--f-display);font-variation-settings:'wdth' 110,'wght' 700;
  font-size:1.18rem;margin:0 0 8px;line-height:1.2}
.upd__t a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .16s ease}
.upd__t a:hover{border-bottom-color:var(--amber)}
.upd__d{margin:0;color:var(--graphite);font-size:.96rem}

/* pagination */
.pager{margin-top:clamp(32px,4vw,48px)}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pager .page-numbers{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;
  border:1px solid var(--rule);padding:10px 15px;text-decoration:none;color:var(--char);
}
.pager .page-numbers:hover{border-color:var(--char)}
.pager .page-numbers.current{background:var(--char);color:var(--diffuse);border-color:var(--char)}
.pager .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* search */
.searchform{display:flex;gap:10px;margin-top:20px}
.searchform input[type=search]{
  font-family:var(--f-body);font-size:1rem;padding:13px 14px;border:1px solid var(--rule);
  background:var(--paper);flex:1;border-radius:0;
}

/* admin bar clearance handled inline in functions.php */
.alignwide,.alignfull{max-width:100%}


/* ============================================================
   20. PROJECT GALLERY + LIGHTBOX
   ============================================================ */
.pgal{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px); margin-top:clamp(28px,3.5vw,40px);
}
@media (max-width:820px){ .pgal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .pgal{grid-template-columns:1fr} }

.pgal__item{
  display:block; padding:0; border:1px solid var(--rule); background:var(--diffuse);
  cursor:zoom-in; overflow:hidden; position:relative;
}
.pgal__item img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .4s cubic-bezier(.2,0,.2,1), opacity .2s ease;
}
.pgal__item:hover img{transform:scale(1.03); opacity:.92}
.pgal__item::after{
  content:""; position:absolute; inset:0; border:0 solid var(--amber);
  transition:border-width .16s ease; pointer-events:none;
}
.pgal__item:hover::after{border-width:3px}

/* ---- lightbox ---- */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(22,24,27,.97);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(8px,2vw,24px);
  padding:clamp(56px,7vw,80px) clamp(12px,3vw,40px) clamp(48px,6vw,64px);
}
.lb[hidden]{display:none}

.lb__fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0}
.lb__img{
  max-width:100%; max-height:calc(100vh - 190px);
  width:auto; height:auto; object-fit:contain; display:block;
}
.lb__cap{
  font-family:var(--f-mono); font-size:.76rem; line-height:1.6; letter-spacing:.04em;
  color:rgba(237,240,243,.72); text-align:center; max-width:70ch; margin:0;
}
.lb__cap[hidden]{display:none}

.lb__close,.lb__nav{
  background:transparent; border:1px solid var(--rule-dk); color:var(--diffuse);
  cursor:pointer; line-height:1; padding:0;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.lb__close:hover,.lb__nav:hover{background:var(--amber); border-color:var(--amber); color:var(--char)}

.lb__close{
  position:absolute; top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px);
  width:48px; height:48px; font-size:30px;
}
.lb__nav{width:clamp(42px,5vw,56px); height:clamp(56px,7vw,76px); font-size:clamp(26px,3vw,34px)}
.lb__nav[hidden]{visibility:hidden; display:block}

.lb__count{
  position:absolute; left:0; right:0; bottom:clamp(16px,2.4vw,26px); margin:0; text-align:center;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--amber);
}

@media (max-width:600px){
  .lb{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; padding-bottom:96px}
  .lb__fig{grid-row:1}
  .lb__nav{grid-row:2; width:100%; height:52px}
  .lb__nav--prev{grid-column:1; justify-self:start; width:46%}
  .lb__nav--next{grid-column:1; justify-self:end; width:46%; margin-top:-52px}
  .lb__img{max-height:calc(100vh - 260px)}
}

@media (prefers-reduced-motion:reduce){
  .pgal__item img{transition:none}
  .pgal__item:hover img{transform:none}
}