/*
Theme Name: Wright Building Systems
Theme URI: https://www.wrightbuildingsystems.com/
Author: Wright Building Systems
Author URI: https://www.wrightbuildingsystems.com/
Description: Classic (PHP) theme ported from the Wright Building Systems homepage design. Woman-owned, family-operated full-service commercial general contractor, certified secure construction (SCIF / SAPF, NSTI / ICD 705) alongside ground-up builds, renovation, consulting and restoration. Includes a Projects custom post type.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: wbs
*/

/* =========================================================================
   1. Base styles  (extracted verbatim from the original <style> block)
   ========================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Scroll reveal. `.wbs-anim` is set on <html> before first paint (header inline
   script), so these start at opacity:0 with no flash; JS then adds `.wbs-in` to
   fade each one in as it enters view. No-JS / reduced-motion never get `.wbs-anim`,
   so content is always fully visible, and a load failsafe un-arms if JS fails. */
.wbs-anim [data-reveal],
.wbs-anim section h2,
.wbs-anim section h3,
.wbs-anim section h4,
.wbs-anim section p,
.wbs-anim section ul,
.wbs-anim section ol{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .7s cubic-bezier(.25,1,.5,1);will-change:opacity,transform}
.wbs-anim [data-reveal].wbs-in,
.wbs-anim section h2.wbs-in,
.wbs-anim section h3.wbs-in,
.wbs-anim section h4.wbs-in,
.wbs-anim section p.wbs-in,
.wbs-anim section ul.wbs-in,
.wbs-anim section ol.wbs-in{opacity:1;transform:none}
/* Elements inside a reveal card (e.g. a project card's title) ride the card's
   single fade, not their own, so the whole card reveals as one uniform unit
   instead of the title lagging behind or never appearing. */
.wbs-anim [data-reveal] h2,
.wbs-anim [data-reveal] h3,
.wbs-anim [data-reveal] h4,
.wbs-anim [data-reveal] p,
.wbs-anim [data-reveal] ul,
.wbs-anim [data-reveal] ol{opacity:1;transform:none;transition:none}
body{margin:0;background:#fff;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;color:#15181C;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:#FB1D1D;color:#fff}
a:focus{outline:none}
a:focus-visible,button:focus-visible{outline:2px solid #FB1D1D;outline-offset:3px}
.nlink:hover{color:#fff !important;background-size:100% 1px !important}
.wbs-cluster-wrap{background:none;border:0}
.wbs-cluster{width:42px;height:42px;border-radius:50%;background:#FB1D1D;border:2px solid #fff;color:#fff;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5);transition:transform .15s;transform-origin:50% 50%}
.wbs-cluster-wrap:hover .wbs-cluster,.wbs-cluster-wrap.hot .wbs-cluster{transform:scale(1.14)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
@keyframes wipe{from{background-size:0 .12em}to{background-size:100% .12em}}
/* Respect users who ask for less motion: settle every animation/transition to its end state. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.leaflet-container{background:#0f1216;font-family:"IBM Plex Mono",monospace}
.leaflet-tile{filter:brightness(1.42) contrast(0.95)}
.pin{background:none;border:0}
.pin .pin-i{display:block;width:24px;height:24px;border-radius:50%;background:#FB1D1D;border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.5);transition:transform .15s ease;animation:pop .4s ease both;transform-origin:50% 50%;position:relative}
.pin .pin-i::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:#fff}
.pin:hover .pin-i{transform:scale(1.18)}
.pin.hot .pin-i{transform:scale(1.42)}
.pin.hot{z-index:1000 !important}
/* Hero prev/next arrows are vertically centered at the viewport edges, but the
   near-full-bleed headline starts right at the left margin, so below ~1400px the
   left arrow lands on the headline (the "E" in ENVIRONMENTS). Only show the arrows
   where the centered content box leaves clear margin for them; the slide dots stay
   available for navigation at every width below that. */
@media (max-width:1400px){.heroarrow{display:none !important}}
/* Hero caption links to the slide's project page; underline the name on hover. */
.hcap-link{cursor:pointer}
.hcap-link:hover .hcap-name,.hcap-link:focus-visible .hcap-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---- Client logo wall -------------------------------------------------------
   Six across, filling the full content width (was a 168px centred flex that left
   side gutters and orphaned two logos on their own row). 22 logos only tile evenly
   at 2 or 11 per row, so six is the least-orphaned count: three full rows plus a
   centred row of four. Mapped logos link to their project; the rest are static. */
.wbs-logowall{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px 22px}
.wbs-logo{flex:0 0 calc((100% - 5 * 22px) / 6);min-width:0;height:92px;display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid transparent;transition:border-color .2s,background .2s}
a.wbs-logo{cursor:pointer}
.wbs-logo img{max-height:84px;max-width:78%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s,transform .25s}
.wbs-logo:hover img,a.wbs-logo:focus-visible img{filter:none;opacity:1;transform:scale(1.06)}
@media (max-width:1080px){ .wbs-logo{flex:0 0 calc((100% - 3 * 22px) / 4)} }   /* 4 across */
@media (max-width:720px){  .wbs-logo{flex:0 0 calc((100% - 2 * 18px) / 3);height:80px} .wbs-logowall{gap:12px 18px} }  /* 3 across */
@media (max-width:460px){  .wbs-logowall{gap:10px 14px} .wbs-logo{flex:0 0 calc((100% - 14px) / 2);height:72px} }  /* 2 across */

/* Image-fills-cell helper for 2-col image+text rows. The ::before spacer sets a
   height FLOOR from the photo's natural ratio (--arp = height/width as a %),
   so the row ends up max(text height, image ratio height): the columns always
   match AND the photo never squashes to a letterbox when the copy is short.
   Percentage padding resolves against the element's own width, so unlike
   aspect-ratio it can never derive a width and blow out the grid track.
   The image is absolute, so it fills whichever height wins, at any breakpoint
   (including the stacked single-column layout). */
.wbs-fill{position:relative;height:100%;min-width:0;overflow:hidden}
.wbs-fill::before{content:"";display:block;padding-top:var(--arp,75%)}
.wbs-fill > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* On very narrow phones the headline's clamp floor (46px) keeps a single word
   ("TRANSFORMING"/"ENVIRONMENTS") wider than the content column, which forces the
   whole hero block past the viewport and clips the eyebrow, subhead, and buttons.
   Drop the floor so the longest word fits and everything wraps normally. */
@media (max-width:480px){#top h1{font-size:clamp(30px,8.6vw,42px) !important}}
@media (max-width:768px){.mstack{grid-template-columns:1fr !important}.mstack>div{position:static !important}.r-1{grid-template-columns:1fr !important}.r-2to1{grid-template-columns:repeat(2,1fr) !important}.hstrip{flex-wrap:wrap}.hstrip>span{flex:1 0 50% !important;white-space:normal !important;padding:10px 12px !important}.heroarrow,.heroscroll,.herometa{display:none !important}.header-cta{display:none !important}
/* Mobile hero: keep it focused on eyebrow + headline + subhead + CTA. Hide the
   rotating slide caption/counter, and trim the credential strip to the two
   strongest items (Accredited SCIF/SAPF + Building Nationwide). */
#hcap{display:none !important}
.hstrip>span:nth-child(1),.hstrip>span:nth-child(3){display:none !important}
.hstrip>span:nth-child(2),.hstrip>span:nth-child(4){flex:1 0 50% !important}
/* Homepage projects map: the 807px map + 740px list is far too tall stacked on a
   phone. Shrink the map and cap the list to a compact scroll. */
#map{height:clamp(320px,54vw,380px) !important}
#rows{max-height:460px !important}}
@media (max-width:600px){.r-2to1{grid-template-columns:1fr !important}}
/* Very small phones (<=400px): the hero project rows can't compress the fixed
   thumb + longest project word + "Classified" tag below the viewport, so tighten
   the thumb and gaps here to keep the row within a 320px screen. */
@media (max-width:400px){
  #rows .prow{gap:10px;padding:13px 6px}
  #rows .prow>*:first-child{width:52px !important;height:42px !important}
}
/* Leaflet panes/controls go up to z-index 1000, which would paint over the fixed
   header (z-index 50) as the map scrolls under it. Give each map its own stacking
   context so its internal z-indexes stay contained below the header. */
#map,#projmap{position:relative;z-index:0}
.leaflet-popup-content-wrapper{background:#15181C;color:#fff;border-radius:0;border-top:3px solid #FB1D1D;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.leaflet-popup-content{margin:12px 16px}
.leaflet-popup-tip{background:#15181C}
.poptitle{display:block;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:18px;font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.popmeta{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9BA3AD;margin-top:6px}
.leaflet-bar a{background:#15181C;color:#fff;border-color:#353C46}
.leaflet-bar a:hover{background:#2B313A;color:#fff}
.leaflet-control-attribution{background:rgba(15,18,22,.5)!important;color:#646b74!important;font-size:10px!important;line-height:1.4!important;padding:1px 6px!important}
.leaflet-control-attribution a{color:#7c838c!important}
#rows::-webkit-scrollbar{width:6px}
#rows::-webkit-scrollbar-thumb{background:#2B313A;border-radius:3px}
#rows::-webkit-scrollbar-thumb:hover{background:#FB1D1D}
.scard .scard-img{transition:transform .55s ease}
.scard .scard-line{transition:transform .32s cubic-bezier(.22,.8,.3,1)}
.scard:hover .scard-img,.scard:focus-visible .scard-img{transform:scale(1.06)!important}
.scard:hover .scard-line,.scard:focus-visible .scard-line{transform:scaleX(1)!important}
.fhov{overflow:hidden}
.fhov .fhov-img{transition:transform .6s ease}
.fhov .fhov-line{transition:transform .34s cubic-bezier(.22,.8,.3,1)}
.fhov:hover .fhov-img,.fhov:focus-visible .fhov-img{transform:scale(1.05)!important}
.fhov:hover .fhov-line,.fhov:focus-visible .fhov-line{transform:scaleX(1)!important}
.navtoggle{display:none}
.navcta{display:none}
.navinfo{display:none}
@media (max-width:860px){
  /* Once the hamburger appears, drop the header Contact button so both never show. */
  .header-cta{display:none !important}
  header img{width:200px !important}
  header > a:first-child{position:relative;z-index:55}
  .navtoggle{display:flex;margin-left:auto;margin-right:0;width:46px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(15,18,22,.5);border:1px solid #4A525E;cursor:pointer;padding:0;position:relative;z-index:60;transition:border-color .15s}
  header.navopen .navtoggle{border-color:#FB1D1D}
  .navtoggle span{display:block;width:22px;height:2px;background:#fff;transition:.2s}
  header.navopen .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.navopen .navtoggle span:nth-child(2){opacity:0}
  header.navopen .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.navopen{background:#15181C !important;box-shadow:none !important}
  #navmenu{position:fixed;inset:0;z-index:40;background:#15181C;flex-direction:column !important;justify-content:flex-start !important;align-items:stretch !important;gap:0 !important;margin:0 !important;padding:clamp(84px,13vh,110px) clamp(26px,7vw,40px) clamp(26px,5vh,38px);display:flex !important;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;counter-reset:nav;overflow-y:auto}
  header.navopen #navmenu{opacity:1;visibility:visible}
  #navmenu .nlink{flex:1 1 auto;min-height:60px;display:flex;align-items:center;gap:clamp(14px,4vw,20px);padding:8px 0;border-top:1px solid #262C34;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(34px,9.4vw,46px);font-weight:700;line-height:.98;letter-spacing:.01em;text-transform:uppercase;color:#fff;background:none;text-align:left;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease,color .18s}
  #navmenu .nlink:last-of-type{border-bottom:1px solid #262C34}
  #navmenu .nlink:first-of-type{border-top:0 !important}
  #navmenu .nlink::before{counter-increment:nav;content:counter(nav,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;color:#FB1D1D;letter-spacing:.1em;min-width:24px}
  #navmenu .nlink::after{content:'\2192';margin-left:auto;font-size:.5em;font-weight:700;color:#FB1D1D;opacity:.45;transform:translateX(-5px);transition:transform .3s ease,opacity .3s ease}
  #navmenu .nlink:active,#navmenu .nlink.current-menu-item{color:#FB1D1D}
  #navmenu .nlink:active::after,#navmenu .nlink.current-menu-item::after{opacity:1;transform:translateX(0)}
  header.navopen #navmenu .nlink{opacity:1;transform:none}
  header.navopen #navmenu .nlink:nth-child(1){transition-delay:.08s}
  header.navopen #navmenu .nlink:nth-child(2){transition-delay:.12s}
  header.navopen #navmenu .nlink:nth-child(3){transition-delay:.16s}
  header.navopen #navmenu .nlink:nth-child(4){transition-delay:.20s}
  header.navopen #navmenu .nlink:nth-child(5){transition-delay:.24s}
  .navcta{display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(22px,3.4vh,32px) 0 0;padding:20px;text-align:center;background:#FB1D1D;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:600}
  .navinfo{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(18px,2.6vh,24px);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em}
  .navinfo a{color:#C3C9D0;text-decoration:none}
  .navinfo .navinfo-soc{display:flex;gap:18px;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#9BA3AD}
}

/* =========================================================================
   2. Hover rules  (converted from the runtime-only `style-hover="…"` attrs)
   The dc-runtime applied these on mouseenter; without it they do nothing,
   so they are reproduced here as real :hover rules keyed off the same
   class names used in the markup. (Per CLAUDE.md conversion note.)
   ========================================================================= */

/* Every button goes red + lifts on hover: outline buttons fill red, and
   already-red buttons stay red and just rise. */
.btn-red:hover,.btn-red:focus-visible,
.btn-ghost:hover,.btn-ghost:focus-visible,
.header-cta:hover,.header-cta:focus-visible{background:#FB1D1D !important;color:#fff !important;border-color:#FB1D1D !important;transform:translateY(-2px) !important}

/* Footer links + simple light-on-dark links: brighten to white */
.foot-link:hover,.foot-link:focus-visible{color:#fff !important}

/* Project list rows: tint + red left edge */
.prow:hover,.prow:focus-visible{background:#2B313A !important;border-left-color:#FB1D1D !important}

/* A globally-injected reset (WP/plugin) gives elements a solid currentColor
   border, which renders WHITE in the dark, white-text Projects panel. Pin the
   list container + each row to ONLY the borders the design intends. */
#rows{border:0 !important}
#rows .prow{border-width:0 0 1px 3px !important;border-style:solid !important;border-color:transparent transparent #353C46 transparent !important}
#rows .prow:hover,#rows .prow:focus-visible{border-left-color:#FB1D1D !important;background:#2B313A !important}

/* Hero prev/next arrows */
.heroarrow:hover,.heroarrow:focus-visible{border-color:#FB1D1D !important;background:rgba(15,18,22,.72) !important}

/* When logged in, the WP admin toolbar is fixed at top:0, push our fixed
   header below it so it doesn't cover the logo. (Inline top:0 needs override.) */
.admin-bar header{top:32px !important}
@media screen and (max-width:782px){.admin-bar header{top:46px !important}}

/* Base nav-link look for links rendered by wp_nav_menu (the hard-coded
   fallback anchors carry these as inline styles; menu items need the rule). */
@media (min-width:861px){
  #navmenu .nlink{color:#C3C9D0;text-decoration:none;background:linear-gradient(#fff,#fff) left bottom/0% 1px no-repeat;padding-bottom:3px;transition:background-size .22s ease,color .2s}
}

/* =========================================================================
   3. Project CPT templates  (archive grid + single), reuse homepage tokens
   ========================================================================= */
.wbs-wrap{max-width:1280px;margin:0 auto;padding:clamp(64px,7vw,104px) clamp(22px,5vw,64px)}
.wbs-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#FB1D1D;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.wbs-eyebrow span{color:#A6ADB6}
.wbs-h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(34px,4.2vw,52px);font-weight:700;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0}
.wbs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
@media (max-width:860px){.wbs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.wbs-grid{grid-template-columns:1fr}}
.wbs-grid .scard{position:relative;display:flex;flex-direction:column;background:#EEEFF0;border-radius:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.wbs-grid .scard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(21,24,28,.32)}
.wbs-grid .scard .scard-imgwrap{aspect-ratio:16/10;overflow:hidden;background:#2B313A}
.wbs-grid .scard .scard-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03)}
.wbs-grid .scard .scard-body{padding:22px 24px 24px}
.wbs-card-meta{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5B626C;margin-bottom:10px}
.wbs-card-title{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:22px;font-weight:700;line-height:1.08;text-transform:uppercase;letter-spacing:.01em;margin:0 0 12px}
.wbs-card-more{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#FB1D1D}

/* Single project layout */
.wbs-single-hero{position:relative;background:#15181C;color:#fff}
.wbs-single-hero .wbs-wrap{padding-top:clamp(120px,12vw,160px)}
.wbs-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#D9DCE0;border:1px solid #D9DCE0;margin:38px 0}
@media (max-width:768px){.wbs-meta-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.wbs-meta-grid{grid-template-columns:1fr}}
.wbs-meta-grid > div{background:#fff;padding:22px 24px}
.wbs-meta-grid .k{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5B626C;margin-bottom:8px}
.wbs-meta-grid .v{display:block;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;line-height:1.1}
.wbs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
@media (max-width:860px){.wbs-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.wbs-gallery{grid-template-columns:1fr}}
.wbs-gallery-item{position:relative;display:block;overflow:hidden;cursor:zoom-in;background:#2B313A}
.wbs-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease}
.wbs-gallery-item:hover img{transform:scale(1.05)}

/* Fullscreen photo lightbox */
.wbs-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(15,18,22,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.wbs-lightbox.open{opacity:1;visibility:visible}
.wbs-lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.wbs-lb-btn{position:absolute;background:none;border:0;color:#fff;cursor:pointer;opacity:.75;transition:opacity .15s;line-height:1}
.wbs-lb-btn:hover{opacity:1}
.wbs-lb-prev,.wbs-lb-next{top:0;height:100%;width:64px;font-size:42px}
.wbs-lb-prev{left:0}
.wbs-lb-next{right:0}
.wbs-lb-close{top:16px;right:22px;font-size:34px}
.wbs-lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#C3C9D0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em}
.wbs-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:38px 0}
@media (max-width:760px){.wbs-videos{grid-template-columns:1fr}}
.wbs-video-embed{position:relative;aspect-ratio:16/9;background:#0F1216}
.wbs-video-embed iframe,.wbs-video-embed > *{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Centred, like the blog body: a 72ch measure pinned left inside a 1280px wrap
   left the right half of the page empty. Only the legal pages use this template. */
.wbs-content{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:#3A414B;max-width:none;overflow-wrap:break-word}
.wbs-content a{overflow-wrap:break-word;word-break:break-word}
.wbs-content h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.08;letter-spacing:.01em;text-transform:uppercase;color:#15181C;margin:1.5em 0 .35em}
.wbs-content h2:first-child{margin-top:0}
.wbs-content h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;color:#15181C;margin:1.3em 0 .3em}
.wbs-content p{margin:0 0 1.1em}
.wbs-content ul,.wbs-content ol{margin:0 0 1.2em;padding-left:1.2em}
.wbs-content li{margin:0 0 .5em}
.wbs-content a{color:#FB1D1D;text-decoration:underline;text-underline-offset:2px}
.wbs-content strong{color:#15181C;font-weight:700}
.wbs-svc-body{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start}
@media (max-width:860px){.wbs-svc-body{grid-template-columns:1fr}}
.wbs-empty{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.05em;color:#5B626C;padding:40px 0}

/* =========================================================================
   4. Services Overview + Detail (ported design)
   ========================================================================= */
/* Quick-jump bar: all services on one row (shared width), scrolls on mobile */
.svc-jumpbar{display:flex;flex-wrap:nowrap}
.svc-jump{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:9px;padding:16px 13px;border-right:1px solid #353C46;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;line-height:1.3;text-transform:uppercase;color:#C3C9D0;text-decoration:none;transition:background .15s,color .15s}
.svc-jump:last-child{border-right:0}
.svc-jump-n{color:#FB1D1D;flex:none}
.svc-jump:hover{background:#2B313A;color:#fff}
@media (max-width:760px){
  .svc-jumpbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .svc-jump{flex:0 0 auto;min-width:148px}
  .svc-row{grid-template-columns:1fr !important;gap:20px !important}
  .svc-row > div{order:0 !important}
  .svc-overview,.svc-section,.svc-incl,.svc-contact{grid-template-columns:1fr !important}
}
@media (max-width:520px){
  .svc-incl-grid{grid-template-columns:1fr !important}
}

/* =========================================================================
   5. Projects Overview (filter) + Case Study (facts, masonry)
   ========================================================================= */
/* Project filter bar is static (not sticky). */
.fbtn{cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:0;border:1px solid #C7CCD2;background:#fff;color:#5B626C;transition:all .16s}
.fbtn:hover{border-color:#FB1D1D;color:#15181C}
.fbtn[data-on="1"]{background:#15181C;color:#fff;border-color:#15181C}
.projcard:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(21,24,28,.5)}
.projcard:hover .scard-line{transform:scaleX(1) !important}
.proj-next-link:hover{color:#FB1D1D !important}
/* Project page: shared centered containers + one vertical rhythm, so every section
   lines up with even gaps. `.pwrap` holds the text at a readable width; `.pwrap-wide`
   lets the visual blocks (slider, video, gallery) break wider for impact, using the
   same side gutters so all the widened sections still align to each other. */
.pwrap{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:clamp(22px,5vw,64px);padding-right:clamp(22px,5vw,64px)}
.pwrap-wide{max-width:1560px;margin-left:auto;margin-right:auto;padding-left:clamp(22px,5vw,64px);padding-right:clamp(22px,5vw,64px)}
.psec{padding-top:clamp(48px,5.5vw,80px);padding-bottom:clamp(48px,5.5vw,80px)}
@media (max-width:760px){
  .proj-write{grid-template-columns:1fr !important;align-items:start !important}
}
/* No dangling divider after the final spec cell (works for any field count) */
.proj-facts>div:last-child{border-right:0 !important}
@media (max-width:640px){
  /* Full-bleed 2-col grid so every divider (top / vertical / horizontal) reaches
     the section edges. The outer gutter moves off the container and onto the
     outer side of each cell, keeping the content inset the same. */
  .proj-facts{grid-template-columns:repeat(2,1fr) !important;padding-left:0 !important;padding-right:0 !important}
  .proj-facts>div:nth-child(2n-1){padding-left:clamp(26px,5vw,64px) !important}
  .proj-facts>div:nth-child(2n){padding-right:clamp(26px,5vw,64px) !important}
  .proj-facts>div:nth-child(2n){border-right:0 !important}
  .proj-facts>div{border-bottom:1px solid #353C46}
  .proj-facts>div:nth-last-child(-n+2){border-bottom:0 !important}
}

/* Gallery: balanced masonry. JS distributes photos into equal-width columns by
   shortest-column-first (see initMosaic), so column heights stay even with no
   holes or trailing gaps at any photo count or aspect ratio. Even gutters via gap.
   Pre-JS / no-JS falls back to a single stacked column. */
.wbs-mosaic{gap:14px;align-items:flex-start}
.wbs-mosaic.is-built{display:flex}
.wbs-mosaic:not(.is-built) .wbs-mosaic-item{margin-bottom:14px}
.wbs-mosaic-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.wbs-mosaic-item{position:relative;display:block;overflow:hidden;background:#2B313A;cursor:zoom-in;line-height:0}
.wbs-mosaic-item img{width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.03);transition:transform .55s ease}
.wbs-mosaic-item:hover img{transform:scale(1.04)}
/* One full-width feature photo above the masonry, so the gallery reads editorial, not a uniform grid */
.wbs-mosaic-feature{position:relative;display:block;overflow:hidden;background:#2B313A;cursor:zoom-in;line-height:0;margin-bottom:14px;aspect-ratio:21/9}
.wbs-mosaic-feature img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);transition:transform .6s ease}
.wbs-mosaic-feature:hover img{transform:scale(1.03)}
@media (max-width:640px){.wbs-mosaic-feature{aspect-ratio:16/10}}
/* "More videos" disclosure on project pages */
.wbs-more-videos{border-top:1px solid #353C46;padding-top:22px}
.wbs-more-videos>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C3C9D0;transition:color .15s}
.wbs-more-videos>summary::-webkit-details-marker{display:none}
.wbs-more-videos>summary::before{content:"+";display:inline-block;color:#FB1D1D;font-size:17px;line-height:1;transition:transform .2s ease}
.wbs-more-videos[open]>summary::before{transform:rotate(45deg)}
.wbs-more-videos>summary:hover{color:#fff}
/* Before / after comparison slider (drag the red handle to reveal each side) */
/* Blog post body (single.php). Posts are normal WP content, so style the raw
   HTML the editor produces: readable measure, condensed subheads, red links. */
/* ---- Homepage: Why Wright ---------------------------------------------------
   Headline + lede + CTA on the left, the four protections as a ledger on the
   right. The eyebrow sits above both so the headline and the ledger's top rule
   start on the same line. Responsive in three steps:
     >=1181px  side by side, ledger as a 1x4 (label beside copy)
     761-1180  stacked, ledger as a 2x2 (label above copy)
     <=760px   stacked, ledger as a single column
   The middle step exists because a side-by-side ledger below ~1180px squeezes
   the descriptions to three lines. */
.wbs-why-wrap{max-width:1280px;margin:0 auto;padding:clamp(64px,7vw,104px) clamp(22px,5vw,64px)}
.wbs-why-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#FB1D1D;margin:0 0 26px;display:flex;align-items:center;gap:12px;line-height:1}
.wbs-why-eyebrow span{color:#A6ADB6}
.wbs-why-cols{display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);gap:clamp(34px,4vw,64px);align-items:stretch}
/* Left column fills the ledger's height: headline/lede at top, CTA anchored to
   the bottom so it lines up with the last row (keeps the two sides balanced now
   that the ledger runs six rows). */
.wbs-why-cols > div:first-child{display:flex;flex-direction:column;justify-content:flex-start}
.wbs-why-hl{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,56px);line-height:1.0;letter-spacing:.01em;text-transform:uppercase;color:#15181C;margin:0 0 24px;text-wrap:balance}
.wbs-why-hl em{font-style:normal;color:#FB1D1D;display:block;text-wrap:balance}
.wbs-why-lede{color:#5B626C;margin:0;font-size:16px;line-height:1.7;text-wrap:pretty}
.wbs-why-cta{margin:clamp(30px,3.2vw,42px) 0 0}
.wbs-why-cta a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#FB1D1D;text-decoration:none;border-bottom:1px solid rgba(251,29,29,.35);padding-bottom:3px}
.wbs-why-cta a:hover,.wbs-why-cta a:focus-visible{border-bottom-color:#FB1D1D}
.wbs-why-rows{margin-top:6px}
.wbs-why-row{display:grid;grid-template-columns:158px 1fr;gap:26px;align-items:baseline;border-bottom:1px solid #E4E6E9;padding:16px 0}
.wbs-why-row:first-child{border-top:2px solid #15181C}
.wbs-why-row:last-child{border-bottom:0}
/* top:1px puts the 19px all-caps label's optical centre on the 16px sentence's,
   and .79em centres the tick on that same line (both measured, not guessed). */
.wbs-why-k{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#15181C;margin:0;position:relative;top:1px;padding-left:24px;white-space:nowrap;line-height:1.5}
.wbs-why-k::before{content:"";position:absolute;left:0;top:.79em;width:13px;height:3px;background:#FB1D1D}
.wbs-why-v{margin:0;color:#5B626C;font-size:16px;line-height:1.65;text-wrap:pretty;position:relative;top:-1px}
@media (max-width:1180px){
  .wbs-why-cols{grid-template-columns:1fr;gap:clamp(30px,4.5vw,46px)}
  .wbs-why-rows{margin-top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px);row-gap:0}
  .wbs-why-row{grid-template-columns:1fr;gap:8px;align-items:start;padding:20px 0;border-bottom:1px solid #E4E6E9}
  .wbs-why-row:first-child{padding-top:20px}
  .wbs-why-row:nth-child(1),.wbs-why-row:nth-child(2){border-top:2px solid #15181C}
  .wbs-why-row:nth-last-child(1),.wbs-why-row:nth-last-child(2){border-bottom:0}
  .wbs-why-k{padding-left:22px;white-space:normal;font-size:22px}
}
@media (max-width:760px){
  .wbs-why-rows{grid-template-columns:1fr;column-gap:0}
  .wbs-why-row{padding:18px 0}
  .wbs-why-row:first-child{padding-top:18px}
  .wbs-why-row:nth-child(2){border-top:0}
  .wbs-why-row:nth-child(3){border-bottom:1px solid #E4E6E9}
  .wbs-why-row:last-child{border-bottom:0}
  .wbs-why-v{max-width:52ch}
  /* Stacked: the flex-fill band has no column height to fill, so give it a
     proper responsive height instead of collapsing to its desktop min. */
  .wbs-why-img{min-height:clamp(210px,52vw,320px)}
}

/* ---- Blog post: ink title band + full (uncropped) featured image -----------
   Featured images range from 16:9 to portrait, so any cover/crop treatment
   mangled some of them. Instead the title sits on an ink band and the image is
   presented whole on the same ink: wide images fill the width, tall images cap
   in height and centre with ink to the sides. Nothing is ever cropped. */
/* One shared content width for the whole post. Title, image and body all resolve
   to the same left and right edges: shell minus padding, with border-box sizing.
   Previously they were three different widths (984 / 900 / 893) on three
   different left edges, and the image width even shifted with window height. */
.bpost{--post-shell:1280px;--post-pad:clamp(22px,5vw,64px)}
.bpost-head{background:#15181C;color:#fff}
.bpost-head-inner{max-width:var(--post-shell);margin:0 auto;padding:clamp(96px,12vw,132px) var(--post-pad) clamp(26px,3.2vw,38px)}
.bpost-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C3C9D0;margin:0 0 16px}
.bpost-meta a{color:#C3C9D0;text-decoration:none}
.bpost-meta a:hover,.bpost-meta a:focus-visible{color:#fff}
.bpost-sep{color:#6F7884;margin:0 6px}
.bpost-date{color:#FB1D1D}
.bpost-h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(34px,5vw,64px);font-weight:700;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0;max-width:none;text-wrap:balance}
.bpost-tick{display:block;width:46px;height:3px;background:#FB1D1D;margin-top:clamp(16px,2vw,24px)}
/* The image band: same ink, image contained (never cropped) and centred, sharing
   the title's content width. The ink continues below the photo so the band closes
   deliberately instead of the white body butting straight up against the image.
   The height cap only binds on portrait/square images; wide ones fill the width. */
.bpost-figure{margin:0;background:#15181C;padding:0 0 clamp(30px,3.8vw,52px)}
.bpost-figure-inner{max-width:var(--post-shell);margin:0 auto;padding:0 var(--post-pad);text-align:center;line-height:0}
.bpost-figure img{display:block;width:100%;max-width:100%;height:auto;
  max-height:760px;object-fit:contain}

/* ---- Blog pagination -------------------------------------------------------
   WordPress ships this unstyled, which rendered as default blue links. Square
   corners, mono labels, red current page: same language as the rest of the site. */
/* Two shapes to support: page-blog.php calls paginate_links() (links are direct
   children of .pagination), home.php/index.php call the_posts_pagination()
   (links are wrapped in .nav-links). Centre both. */
.pagination{margin-top:clamp(44px,5vw,68px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;border:1px solid #D9DCE0;background:#fff;color:#5B626C;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:0;transition:background .16s,color .16s,border-color .16s}
.pagination a.page-numbers:hover,.pagination a.page-numbers:focus-visible{background:#15181C;border-color:#15181C;color:#fff}
.pagination .page-numbers.current{background:#FB1D1D;border-color:#FB1D1D;color:#fff;font-weight:700}
.pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:22px;padding:0}
.pagination .prev,.pagination .next{letter-spacing:.12em}
@media (max-width:520px){
  .pagination .page-numbers{min-width:40px;height:40px;padding:0 10px;font-size:11px}
}

/* Post body: a 72ch measure left-aligned in a 1280px container left the right
   half of the page empty. Narrow the container so the measure is centred and
   the prev/next footer lines up with the text. */
/* Body shares the post shell so it lines up with the title and image above it. */
.pwrap-post{max-width:var(--post-shell);padding-left:var(--post-pad);padding-right:var(--post-pad)}
.wbs-post{max-width:none;font-size:clamp(17px,1.35vw,19px);line-height:1.75;color:#3A414B}
.wbs-post > *:first-child{margin-top:0}
.wbs-post p{margin:0 0 1.25em}
.wbs-post h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:#15181C;margin:1.9em 0 .55em}
.wbs-post h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:#15181C;margin:1.6em 0 .5em}
.wbs-post h4{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:19px;text-transform:uppercase;color:#15181C;margin:1.4em 0 .45em}
.wbs-post ul,.wbs-post ol{margin:0 0 1.25em;padding-left:1.35em}
.wbs-post li{margin:0 0 .55em}
.wbs-post ul li::marker{color:#FB1D1D}
.wbs-post a{color:#FB1D1D;text-decoration:none}
.wbs-post a:hover,.wbs-post a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.wbs-post strong,.wbs-post b{color:#15181C;font-weight:600}
.wbs-post blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid #FB1D1D;color:#15181C;font-size:1.06em}
.wbs-post img{max-width:100%;height:auto;display:block;margin:1.6em 0}
/* Inline sector links in service copy: subtle in prose, red accent underline. */
.svc-link{color:#FB1D1D;text-decoration:none;transition:color .15s,opacity .15s}
.svc-link:hover,.svc-link:focus-visible{text-decoration:underline;text-decoration-color:#FB1D1D;text-underline-offset:3px;text-decoration-thickness:2px}
.svc-title-link:hover,.svc-title-link:focus-visible{color:#FB1D1D}
.wbs-ba{position:relative;overflow:hidden;background:#20252C;border:1px solid #20252C;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.wbs-ba:focus-visible{outline:2px solid #FB1D1D;outline-offset:3px}
.wbs-ba-img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.wbs-ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 0)}
.wbs-ba-tag{position:absolute;top:14px;z-index:4;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;color:#fff;pointer-events:none}
.wbs-ba-tag--before{left:14px;background:#20252C;border:1px solid rgba(255,255,255,.2)}
.wbs-ba-tag--after{right:14px;background:#FB1D1D}
.wbs-ba-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#FB1D1D;z-index:5;pointer-events:none}
.wbs-ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#FB1D1D;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.wbs-ba-handle::before,.wbs-ba-handle::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateY(-50%)}
.wbs-ba-handle::before{left:11px;border-right:7px solid #fff}
.wbs-ba-handle::after{right:11px;border-left:7px solid #fff}

