/* ==========================================================================
   BlueDiamond Construction Supply — proof.css
   Direct port of design/assets/site.css (the approved HTML proof) to the
   WordPress front end. The proof is the source of truth: values here should
   match design/assets/site.css 1:1 unless a comment says otherwise.

   Load order: this file loads LAST so it wins over GeneratePress.
   ========================================================================== */

:root{
  --navy:#2B375B; --blue:#579AD1; --sky:#5EA6DD; --pale:#C2DFF5;
  --ink:#1A1A1A; --paper:#FFFFFF; --mist:#F4F7FB; --line:#E2E8F2;
  --steel:#5B6770;
  --display:"Barlow Condensed",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --wrap:1180px;
  --gutter:24px;
}

/* --- Reset ---------------------------------------------------------------
   The proof used a blanket `*{margin:0;padding:0}`. Scoped here to the page
   body so it cannot reach #wpadminbar or block-editor UI. */
.bd-page *,
.bd-page *::before,
.bd-page *::after{box-sizing:border-box}
.bd-page h1,.bd-page h2,.bd-page h3,.bd-page h4,.bd-page h5,.bd-page h6,
.bd-page p,.bd-page ul,.bd-page ol,.bd-page li,.bd-page figure,
.bd-page blockquote,.bd-page dl,.bd-page dd,.bd-page form{margin:0;padding:0}
.bd-page ul,.bd-page ol{list-style:none}

html{scroll-behavior:smooth}

body.bd-page{
  font-family:var(--body);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Base element rules are scoped with :where() so they keep the SAME specificity
   they had in the proof (0,0,1). Scoping with a plain `.bd-page` prefix would
   raise them to (0,1,1) and quietly beat every component class — e.g.
   `.bd-page a{color:blue}` overriding `.btn-primary{color:#fff}`.
   Do NOT try to reach the editor canvas from here by adding
   `.editor-styles-wrapper` to this :where() — WordPress auto-prefixes every
   add_editor_style() sheet with `.editor-styles-wrapper `, so the selector
   becomes `.editor-styles-wrapper :where(.bd-page, .editor-styles-wrapper)`,
   which needs a SECOND nested wrapper and can never match. Editor typography
   is handled separately in editor.css with bare element selectors, which WP
   prefixes correctly to a single `.editor-styles-wrapper h1` etc. */
:where(.bd-page) h1,
:where(.bd-page) h2,
:where(.bd-page) h3,
:where(.bd-page) .eyebrow{font-family:var(--display);letter-spacing:.01em;line-height:1.05;color:var(--navy)}
:where(.bd-page) h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:700;text-transform:uppercase}
:where(.bd-page) h3{font-size:1.35rem;font-weight:600}
:where(.bd-page) p{color:#33384a}
:where(.bd-page) a{color:var(--blue);text-decoration:none}

.eyebrow{display:inline-block;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--blue);margin-bottom:.6rem}

.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:.95rem;padding:.8rem 1.5rem;border-radius:4px;transition:.18s;cursor:pointer;border:2px solid transparent;text-align:center;line-height:1.2;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-white{background:#fff;color:var(--navy);border-color:#fff}
.btn-white:hover{background:var(--pale);border-color:var(--pale);color:var(--navy)}

body.bd-page section{padding:76px 0}
.lede{font-size:1.15rem;max-width:60ch}
.center{text-align:center}
.mt1{margin-top:1rem}

.bd-skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.bd-skip:focus{left:8px;top:8px;color:#fff}

/* --- Header --------------------------------------------------------------- */
.bd-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
body.admin-bar .bd-header{top:32px}
/* `gap` sets a floor on the space between the three header zones. Without it,
   space-between lets the logo, the links and the buttons butt up against each
   other the moment the row runs out of slack. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px}
.nav .logo{display:block;line-height:0}
.nav .logo img{height:44px;width:auto;display:block;max-width:none}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links ul{display:flex;gap:30px;align-items:center;margin:0;padding:0;list-style:none}
.nav-links a,
.nav-links a.navlink{color:var(--navy);font-weight:600;font-size:.95rem;font-family:var(--body);text-transform:none;letter-spacing:normal;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.nav-links a:hover,
.nav-links a.navlink:hover,
.nav-links a.navlink.active,
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a{color:var(--blue)}
.nav-cta{display:flex;gap:12px;align-items:center}
.menu-btn{display:none;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--navy);cursor:pointer;padding:6px 4px}

/* Mobile drawer (proof shipped the button only; behavior added for the live site) */
.bd-mobile{display:none;border-top:1px solid var(--line);background:#fff}
.bd-mobile.is-open{display:block}
.bd-mobile .wrap{padding-top:14px;padding-bottom:20px}
.bd-mobile a{display:block;padding:12px 0;color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.bd-mobile .btn{display:block;margin-top:14px}

/* --- Hero (home) ---------------------------------------------------------- */
.hero{background:linear-gradient(115deg,var(--navy) 0%,#33436f 55%,var(--blue) 130%);color:#fff;padding:110px 0 96px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(194,223,245,.22),transparent 62%);border-radius:50%}
.hero > .wrap{position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;text-transform:uppercase;max-width:16ch}
.hero .sub{color:#e6eefb;font-size:1.25rem;max-width:54ch;margin:1.4rem 0 2.2rem}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.tag{display:inline-flex;gap:10px;align-items:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--pale);margin-bottom:1.2rem;font-size:.95rem}
.tag::before{content:"";width:34px;height:3px;background:var(--sky);flex:0 0 auto}

/* --- Interior page hero --------------------------------------------------- */
.page-hero{background:linear-gradient(115deg,var(--navy) 0%,#33436f 60%,var(--blue) 135%);color:#fff;padding:76px 0 68px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-100px;top:-70px;width:420px;height:420px;background:radial-gradient(circle,rgba(194,223,245,.20),transparent 62%);border-radius:50%}
.page-hero > .wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;text-transform:uppercase;max-width:20ch}
.page-hero .sub{color:#e6eefb;font-size:1.15rem;max-width:60ch;margin-top:1.1rem}
.page-hero .tag{margin-bottom:1rem}

/* --- Prose / content blocks ---------------------------------------------- */
.prose h2{margin-bottom:.4rem}
.prose p+p{margin-top:1rem}
.section-alt{background:var(--mist)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.wide-left{grid-template-columns:1.2fr .8fr}

/* --- Panels & stats ------------------------------------------------------- */
.panel{background:var(--mist);border-left:5px solid var(--blue);border-radius:6px;padding:34px}
.stat-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.stat{flex:1;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px}
.stat b{font-family:var(--display);font-size:1.7rem;color:var(--navy);display:block;line-height:1.1}
.stat span{font-size:.85rem;color:var(--steel)}

/* --- Card grids ----------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px;transition:.18s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(43,55,91,.10);border-color:var(--sky)}
.card .ico{width:46px;height:46px;border-radius:8px;background:var(--pale);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ico svg{width:24px;height:24px;stroke:var(--navy);fill:none}
.card h3{font-size:1.1rem;margin-bottom:.4rem}
.card p{font-size:.95rem}

/* --- Advantage pillars ---------------------------------------------------- */
.adv{background:var(--navy);color:#fff}
.adv h2,.adv .eyebrow{color:#fff}
.adv .eyebrow{color:var(--pale)}
.adv .intro{color:#d7e2f4;max-width:62ch;margin-top:.4rem}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.pillars.p3{grid-template-columns:repeat(3,1fr)}
.pillar{background:rgba(255,255,255,.06);border:1px solid rgba(194,223,245,.18);border-radius:8px;padding:24px}
.pillar .n{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--sky);line-height:1}
.pillar h3{color:#fff;font-size:1.15rem;margin:.5rem 0 .4rem}
.pillar p{color:#c9d5ea;font-size:.9rem}

/* --- Product line cards --------------------------------------------------- */
.line-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.lc{border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.18s;background:#fff}
.lc:hover{box-shadow:0 14px 30px rgba(43,55,91,.10);transform:translateY(-4px)}
.lc .top{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:22px 24px}
.lc .top .brand{font-family:var(--display);font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.lc .body{padding:22px 24px}
.lc .body p{font-size:.95rem}
.note{margin-top:22px;font-size:.9rem;color:var(--steel);font-style:italic}

/* --- Interactive rollout -------------------------------------------------- */
.rollout{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.ro{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:.2s}
.ro:hover{border-color:var(--sky);box-shadow:0 14px 30px rgba(43,55,91,.10)}
.ro summary{list-style:none;cursor:pointer;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ro summary::-webkit-details-marker{display:none}
.ro .brand{font-family:var(--display);font-size:1.7rem;font-weight:700;text-transform:uppercase;color:var(--navy);line-height:1.05}
.ro .tagline{color:var(--steel);font-size:.95rem;margin-top:2px}
.ro .plus{width:34px;height:34px;border-radius:50%;background:var(--pale);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:0 0 auto;transition:.2s}
.ro[open] .plus{background:var(--navy);color:#fff;transform:rotate(45deg)}
.ro .detail{padding:0 28px 26px;border-top:1px solid var(--line)}
.ro .detail p{margin-top:14px;font-size:.98rem}

/* --- Markets split cards -------------------------------------------------- */
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.m-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;border-top:4px solid var(--sky)}
.m-card h3{margin-bottom:.4rem}
.m-card.dark{background:var(--navy);border-top-color:var(--sky);border-color:var(--navy)}
.m-card.dark h3,.m-card.dark p{color:#fff}
.m-card.dark p{color:#d0dcef}

/* --- Customer logo slots -------------------------------------------------- */
.logos{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.slot{width:150px;height:70px;border:1px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#aab4c6;font-size:.8rem;background:var(--mist);text-align:center;line-height:1.25}
.slot .dim{font-size:.66rem;letter-spacing:.06em;color:#b9c2d2;margin-top:2px}

/* --- Contact form --------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;margin-top:40px;align-items:start}
.info-card{background:var(--navy);color:#fff;border-radius:10px;padding:34px}
.info-card h3{color:#fff;margin-bottom:14px}
.info-card .line{margin-bottom:8px;color:#d0dcef}
.info-card a{color:var(--pale)}
.info-card .divide{height:1px;background:rgba(255,255,255,.14);margin:22px 0}
form.bd{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:6px;font-family:var(--body);font-size:.95rem;background:var(--mist);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
.field textarea{min-height:110px;resize:vertical}

/* --- CTA band ------------------------------------------------------------- */
.cta{background:linear-gradient(115deg,var(--blue),var(--navy));color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#e6eefb;max-width:56ch;margin:1rem auto 2rem}
.cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- Footer --------------------------------------------------------------- */
.bd-footer{background:#1b2340;color:#c9d5ea;padding:60px 0 28px}
.bd-footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.bd-footer img{height:40px;width:auto;margin-bottom:16px;display:block}
.bd-footer h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:#fff;font-size:1rem;margin-bottom:14px}
.bd-footer a{color:#c9d5ea;display:block;margin-bottom:8px;font-size:.95rem}
.bd-footer a:hover{color:#fff}
.bd-footer .fintro{color:#aeb9d3;max-width:34ch}
.contact-line{margin-bottom:6px;font-size:.95rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#8b96b3}

.proto-badge{position:fixed;bottom:14px;right:14px;z-index:99;background:var(--navy);color:#fff;font-size:.72rem;letter-spacing:.06em;padding:7px 12px;border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:.9}

/* ==========================================================================
   Image placeholders — NOT in the proof. Added so missing art is visible and
   specced on the front end. Every slot states its ratio and the recommended
   upload size in pixels. Drop a real <img> inside and the chrome falls away.
   ========================================================================== */
.bd-imgslot{
  position:relative;
  background:
    repeating-linear-gradient(135deg,rgba(87,154,209,.06) 0 12px,rgba(87,154,209,0) 12px 24px),
    var(--pale);
  border:2px dashed var(--blue);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:28px;overflow:hidden;
}
/* Full-bleed feature band. Height is set directly rather than via the ratio:
   with `aspect-ratio` still active, capping the height makes the box shrink
   its WIDTH to keep the ratio, and the band stops short of the viewport edge.
   The label still states the 21:9 crop that should be uploaded. */
.bd-imgslot--band{margin:0;width:100%;aspect-ratio:auto;height:clamp(280px,32vw,460px)}
.bd-imgslot--inline{margin:1.6rem 0}            /* inside a content column  */
/* Top of a card. `align-self:start` stops a grid row from stretching the box
   and breaking its ratio. */
.bd-imgslot--card{margin:0 0 18px;align-self:start}
.bd-imgslot--dark{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,0) 12px 24px),
    rgba(255,255,255,.06);
  border-color:rgba(194,223,245,.45);
}

/* Ratio is enforced so the box previews the real crop. */
.bd-imgslot[data-ratio="21:9"]{aspect-ratio:21/9}
.bd-imgslot[data-ratio="16:9"]{aspect-ratio:16/9}
.bd-imgslot[data-ratio="4:3"]{aspect-ratio:4/3}
.bd-imgslot[data-ratio="3:2"]{aspect-ratio:3/2}
.bd-imgslot[data-ratio="1:1"]{aspect-ratio:1/1}

.bd-imgslot-label{
  font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  color:var(--navy);font-size:.92rem;max-width:52ch;line-height:1.35;
}
.bd-imgslot-label::before{content:"\25C7";display:block;font-size:1.9rem;line-height:1;margin-bottom:.55rem;color:var(--blue)}
.bd-imgslot--dark .bd-imgslot-label{color:var(--pale)}
.bd-imgslot--dark .bd-imgslot-label::before{color:var(--sky)}

/* The spec line: ratio + recommended pixel dimensions. */
.bd-imgslot-spec{
  display:inline-block;margin-top:.6rem;
  font-family:var(--body);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:none;
  color:var(--navy);background:rgba(255,255,255,.7);
  border:1px solid rgba(43,55,91,.18);border-radius:999px;
  padding:5px 12px;
}
.bd-imgslot--dark .bd-imgslot-spec{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(194,223,245,.35)}
.bd-imgslot-spec .sep{opacity:.45;padding:0 6px}

/* Real image supplied: drop all placeholder chrome. */
.bd-imgslot:has(img){padding:0;border-style:solid;border-color:transparent;background:none}
.bd-imgslot:has(img) .bd-imgslot-label{display:none}
.bd-imgslot img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}

/* --- Responsive ----------------------------------------------------------- */
/* Between the desktop row and the mobile drawer the header needs one step of
   tightening, otherwise the nav labels wrap before the drawer takes over. */
@media(max-width:1240px){
  .nav-links,.nav-links ul{gap:22px}
  .nav-cta .btn{padding:.72rem 1.05rem;font-size:.9rem}
}
@media(max-width:1080px){
  .nav-cta .btn-ghost{display:none}
}
@media(max-width:960px){
  .cards,.line-cards,.pillars,.rollout{grid-template-columns:repeat(2,1fr)}
  .split,.m-grid,.form-grid,.split.wide-left{grid-template-columns:1fr}
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .bd-footer .fgrid{grid-template-columns:1fr}
}
@media(max-width:782px){
  body.admin-bar .bd-header{top:46px}
}
@media(max-width:560px){
  .cards,.line-cards,.pillars,.m-grid,.rollout,.cards.c3,.pillars.p3{grid-template-columns:1fr}
  .field.two{grid-template-columns:1fr;gap:0}
  body.bd-page section{padding:54px 0}
  .hero{padding:72px 0 64px}
  .bd-imgslot{padding:18px}
  .bd-imgslot-label{font-size:.8rem}
}
@media(max-width:600px){
  body.admin-bar .bd-header{position:static}
}

/* ==========================================================================
   Block editor conversion — added when the six page templates moved from
   hardcoded PHP markup to editable core/group + core/paragraph block content.
   Two kinds of rules below: (1) class-based equivalents for things core
   blocks can't attribute (data-ratio, arbitrary inline style), and (2) a
   block-bridge section that neutralizes core block wrappers that intrude on
   the proof layout. Every rule is commented with the exact problem it solves.
   ========================================================================== */

/* core/group cannot carry the data-ratio attribute bd_imgslot() used to key
   off of. Class equivalents, kept alongside the original [data-ratio]
   selectors below (not replacing them) since bd_imgslot() is still used by
   any page not yet converted. */
.bd-imgslot--ratio-21x9{aspect-ratio:21/9}
.bd-imgslot--ratio-16x9{aspect-ratio:16/9}
.bd-imgslot--ratio-3x2{aspect-ratio:3/2}
.bd-imgslot--ratio-1x1{aspect-ratio:1/1}

/* Narrow utility classes standing in for one-off inline `style=""` attributes
   the original PHP templates used. Core paragraph/heading blocks don't carry
   arbitrary inline styles through the editor round-trip cleanly (re-saving
   can drop or flag them as invalid), so each gets a small dedicated class
   instead. Values are copied verbatim from the inline styles they replace. */
.lede--mt1-0{margin:1rem auto 0}
.lede--mt1-b{margin:1rem auto 1.5rem}
.eyebrow--pale{color:var(--pale)}
.mt-tight{margin-top:.3rem}
.panel--map{max-width:820px;margin:0 auto;border-left:none;border-top:5px solid var(--blue);text-align:center}

/* ---- Block bridge: neutralize core block wrappers ---------------------- */
/* NOTE on core/buttons: the original plan here was
   `.cta-row .wp-block-button{display:contents}` to strip the extra wrapper
   div core/button adds. Deliberately NOT added: core/button puts the
   block's className ("btn btn-white" etc.) on that same wrapper div, not on
   the inner <a>. display:contents suppresses box rendering (background,
   padding, border-radius) on the element it's applied to, so combining the
   two would silently strip all visual button styling — the wrapper carries
   the classes that produce the pill look, and contents-izing it throws that
   away. Not needed anyway: .btn already sets display:inline-block on
   whatever element carries it, so the wrapper participates in the .cta-row
   flex layout correctly as a normal flex item without any bridge rule.
   Left here as a comment in case a future edit changes where the proof
   classes land and this needs revisiting. */

/* Contact page: narrow utility classes for one-off inline styles, same
   reasoning as the markets-page block above. */
.cta-row--sidebar{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.note--mt26{margin-top:26px}
.panel--mt22{margin-top:22px}

/* ==========================================================================
   Revision round 1 (Sep 25 2026) - Judy/Riley feedback. New components and
   grid variants for the restructured Home, About and Products & Services
   sections. Every multi-column modifier is repeated in the media queries:
   `.pillars.p4` is (0,2,0) and would otherwise beat the (0,1,0) responsive
   `.pillars` rule and stay 4-up on a phone (same trap `.pillars.p3` has).
   ========================================================================== */

/* core/image inside a placeholder slot. core/image wraps the <img> in a
   <figure>; the slot is a flex container, so the figure shrinks to content
   and the img's width/height:100% resolve against nothing. Make the figure
   fill the slot so `.bd-imgslot img{object-fit:cover}` crops correctly. */
.bd-imgslot > .wp-block-image{margin:0;width:100%;height:100%;align-self:stretch}
.bd-imgslot .wp-block-image img{width:100%;height:100%;object-fit:cover;max-width:none}
.bd-imgslot--band .wp-block-image img{border-radius:0}

/* Grid variants */
.pillars.p4{grid-template-columns:repeat(4,1fr)}
.cards.c5{grid-template-columns:repeat(5,1fr);gap:18px}
.cards.c5 .card{padding:22px}
.m-grid.m3{grid-template-columns:repeat(3,1fr)}

/* Button row under a card grid (Home > What We Offer) */
.cta-under{margin-top:36px}

/* Home > Ready to Get Started: one prompt + one button per audience */
.cta-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
.cta-choice{background:rgba(255,255,255,.07);border:1px solid rgba(194,223,245,.28);border-radius:8px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
.cta .cta-choice p{margin:0;color:#fff;font-weight:600;font-size:1.02rem;max-width:none}

/* Checklist (P&S equipment + mission-critical bullets) */
.checks{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px;font-weight:600;color:var(--navy)}
.checks li::before{content:"\2713";position:absolute;left:0;top:.15em;width:21px;height:21px;border-radius:50%;background:var(--pale);color:var(--blue);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.split > .bd-imgslot{margin:0}
.split + .cta-under,.checks + p{margin-top:1.6rem}

/* About > What You Can Expect: four titled items in the side panel */
.expect h3{font-size:1.1rem;margin:1.2rem 0 .3rem}
.expect h3:first-child{margin-top:0}
.expect p{font-size:.95rem}

/* About graphics (client-supplied diagrams) */
.bd-graphic{margin:36px 0 0}
.bd-graphic img{width:100%;height:auto;display:block}
.bd-graphic-head{margin-top:44px}
.adv .bd-graphic{background:#fff;border-radius:10px;padding:18px;max-width:980px;margin:40px auto 0}

/* About > Leadership: portrait + name + title, then a text-only staff list */
.team-card .bd-imgslot--card{margin-bottom:14px}
.team-card h3{font-size:1.15rem;margin-bottom:.15rem}
.team-card p{font-size:.92rem;color:var(--steel)}
.staff-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.staff-list h3{font-size:1.02rem;margin-bottom:.15rem}
.staff-list p{font-size:.9rem;color:var(--steel)}

@media(max-width:1100px){
  .cards.c5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .pillars.p4,.cards.c5,.staff-list{grid-template-columns:repeat(2,1fr)}
  .m-grid.m3,.cta-choices{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pillars.p4,.cards.c5,.staff-list{grid-template-columns:1fr}
}

/* --- Reset-specificity repair (Sep 25 2026) ------------------------------
   The scoped reset near the top (`.bd-page p, .bd-page h3, .bd-page ul,
   .bd-page figure ...{margin:0}`) is (0,1,1). It silently beats every
   single-class margin utility (0,1,0) placed on those elements, so since the
   Aug 6 conversion `.mt1`, `.eyebrow`, `.note`, the centered `.lede--mt1-0`
   and others have rendered with zero margin. The proof's reset was `*`
   (0,0,0), so these all worked there.
   Do NOT fix this by lowering the reset to `:where(.bd-page) p`: WordPress's
   layout rule `:root :where(.is-layout-flow) > *` is (0,1,0) and would then
   add block-gap margins between every block on every page. Lift the
   affected utilities to (0,2,0) instead. Values are unchanged. */
.bd-page .eyebrow{margin-bottom:.6rem}
.bd-page .mt1{margin-top:1rem}
.bd-page .hero .tag{margin-bottom:1.2rem}
.bd-page .note{margin-top:22px}
.bd-page .note--mt26{margin-top:26px}
.bd-page .lede--mt1-0{margin:1rem auto 0}
.bd-page .lede--mt1-b{margin:1rem auto 1.5rem}
.bd-page .mt-tight{margin-top:.3rem}
.bd-page .cta-under{margin-top:36px}
.bd-page .checks{margin:1.3rem 0 0}
.bd-page .bd-graphic{margin:36px 0 0}
.bd-page .adv .bd-graphic{margin:40px auto 0}
.bd-page .bd-graphic-head{margin-top:44px}

/* ==========================================================================
   Revision round 2 (Oct 6 2026) - Judy's tracker notes.
   Margin utilities on paragraphs, headings, lists and figures are written as
   `.bd-page .x` to beat
   the scoped reset (see "Reset-specificity repair" above).
   ========================================================================== */

/* Home hero fills the first screen on desktop so the photo band starts on
   the first scroll (header is 78px + 1px border). */
@media(min-width:961px){
  body.home .hero{min-height:calc(100svh - 79px);display:flex;flex-direction:column;justify-content:center;padding:72px 0}
  body.home.admin-bar .hero{min-height:calc(100svh - 79px - 32px)}
}

/* Home intro: single column, wider measure than .lede's 60ch but still
   readable (full 1180px lines would run ~150 characters). */
.lede--wide{max-width:80ch}

/* About > leadership: section subheads, bio expanders, 3-up support list */
.bd-page .team-head{font-size:1.3rem;margin:44px 0 0}
.bd-page .team-head--first{margin-top:36px}
.team-card .role{display:block;font-size:.92rem;color:var(--steel)}
.team-card .bd-imgslot{width:100%}
.team-bio summary{list-style:none;cursor:pointer;display:block;border-radius:8px}
.team-bio summary::-webkit-details-marker{display:none}
.team-bio summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.team-bio summary:hover h3{color:var(--blue)}
.bio-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:.88rem;font-weight:600;color:var(--blue)}
.bio-toggle::after{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--pale);color:var(--navy);font-size:1rem;line-height:1;transition:.2s}
.team-bio[open] .bio-toggle::after{transform:rotate(45deg);background:var(--navy);color:#fff}
.bd-page .team-bio .bio{margin-top:12px;font-size:.92rem;line-height:1.6;color:var(--ink)}
.staff-list{grid-template-columns:repeat(3,1fr)}
.staff-list a{display:inline-block;margin-top:2px;font-size:.88rem;color:var(--blue);overflow-wrap:anywhere}

/* Request an Account form */
.req{color:#b42318;font-weight:700}
.bd-page .form-required-note{margin:4px 0 14px;font-size:.82rem;color:var(--steel)}
.btn-block{display:block;width:100%}
.bd-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.bd-page .form-notice{margin:0 0 18px;padding:12px 14px;border-radius:6px;font-size:.95rem}
.form-notice--ok{background:#ecf7ef;color:#1e6b34;border:1px solid #b7e0c2}
.form-notice--err{background:#fdf0ef;color:#9b1c13;border:1px solid #f2c5c0}
form.bd{position:relative}

@media(max-width:960px){
  .staff-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .staff-list{grid-template-columns:1fr}
}
.team-cards{align-items:start}

/* theme.json styles.spacing.padding (24px left and right) lands on <body>
   because useRootPaddingAwareAlignments is false, which insets every
   alignfull hero and photo band 24px from the viewport edge. The approved
   proof is edge to edge and .wrap already supplies the 24px content gutter.
   Front end only: the block editor keeps its canvas padding. */
body.bd-page{padding-left:0;padding-right:0}

/* Round 2 polish (Oct 6): full-width bio panel, Support Team divider above
   the heading, and filled photo bands flush and square. */
@media(min-width:961px){
  .has-bio-panel .team-cards .team-bio .bio{display:none}
}
.bd-page .team-bio-panel{margin-top:26px;padding:26px 30px;background:var(--mist);border-left:5px solid var(--blue);border-radius:6px}
.bd-page .team-bio-panel h3{font-size:1.25rem;margin:0}
.team-bio-panel .role{display:block;font-size:.92rem;color:var(--steel);margin-top:2px}
.bd-page .team-bio-panel .bio{margin-top:12px;font-size:1rem;line-height:1.65;max-width:85ch;color:var(--ink)}
@media(max-width:960px){
  .team-bio-panel{display:none!important}
}
.bd-page .team-head:not(.team-head--first){padding-top:32px;border-top:1px solid var(--line)}
.bd-page .team-head + .staff-list{margin-top:18px;padding-top:0;border-top:0}
.bd-imgslot--band:has(img){border:0;border-radius:0}
/* Contact banner (Oct 22 2026): keep the loader's BlueDiamond decal in frame on wide screens */
.bd-imgslot--band img[src*="bd-contact-band-fods"]{object-position:50% 5%}
/* Final edits (Oct 23 2026): white BlueDiamond logo above the Home hero tag */
body.home .hero .wrap::before{content:"";display:block;width:240px;aspect-ratio:432/118.22;background:url("../img/bluediamond-logo-white.svg?v=20261023") left center/contain no-repeat;margin:0 0 26px}
@media(max-width:560px){
  body.home .hero .wrap::before{width:180px;margin-bottom:18px}
}