/* =========================================================
   P&D Barrier Breaker Tanzania Ltd — Brand Design System
   Cobalt-blue (#0276B3) / charcoal-grey (#464646) / white — matched
   to the official P&D logo. Poppins + Public Sans + IBM Plex Mono.
   ========================================================= */

:root{
    --ink-navy:#464646;
    --ink-navy-2:#333333;
    --brass:#0276B3;
    --brass-light:#4FA8DA;
    --parchment:#F7F8FA;
    --parchment-2:#EEF1F4;
    --oxblood:#B3261E;
    --slate:#4A5568;
    --hairline:#DDE2E7;

    /* legacy variable names kept as aliases so any stray old class still resolves sanely */
    --primary-navy:#464646;
    --secondary-gold:#0276B3;
    --dark-gold:#025E8F;
    --light-bg:#F7F8FA;
    --card-bg:#FFFFFF;
    --dark-text:#2D3748;
    --muted-text:#4A5568;
    --light-text:#FFFFFF;
    --border-color:#DDE2E7;
}

*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body{font-family:'Public Sans',sans-serif;background:var(--parchment);color:var(--slate);line-height:1.65;overflow-x:hidden;}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif;color:var(--ink-navy);font-weight:700;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;}

.container{width:90%;max-width:1180px;margin:0 auto;padding:0 15px;}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-primary{
    background:var(--brass); color:#fff !important; padding:14px 28px; border-radius:2px;
    display:inline-block; text-decoration:none; font-weight:700; border:none; cursor:pointer;
    font-size:0.92rem; transition:background 0.25s ease;
}
.btn-primary:hover{background:var(--dark-gold);}
.btn-secondary{
    background:transparent; color:#D7DCE2; border:1px solid rgba(215,220,226,0.45);
    padding:13px 27px; border-radius:2px; text-decoration:none; font-weight:600;
    display:inline-block; transition:all 0.25s ease; margin-left:10px; font-size:0.92rem;
}
.btn-secondary:hover{background:#D7DCE2; color:var(--ink-navy);}
.btn-outline-navy{
    background:transparent; border:1px solid var(--ink-navy); color:var(--ink-navy);
    padding:12px 24px; border-radius:2px; font-weight:600; font-size:0.88rem; display:inline-block;
}
.btn-outline-navy:hover{border-color:var(--brass); color:var(--brass);}

/* ---------------------------------------------------------
   Top registry bar + Navbar + Mega menu
   --------------------------------------------------------- */
.navbar{background:var(--parchment); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:1000;}
.nav-container{display:flex; justify-content:space-between; align-items:center; padding:16px 0; flex-wrap:wrap; gap:10px;}
.logo-area{display:flex; align-items:center; gap:14px; text-decoration:none; padding:6px 0;}
.logo-area img.logo-mark-img{height:52px; width:auto; display:block; padding:4px;}
.logo-text-block{display:flex; flex-direction:column; line-height:1.15;}
.logo-title{font-family:'Poppins',sans-serif; font-size:1.2rem; font-weight:700; color:var(--ink-navy); display:block; line-height:1;}
.logo-subtitle{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:600; color:var(--brass); letter-spacing:0.1em;}

.nav-links{display:flex; gap:30px; align-items:center; font-weight:600; font-size:0.92rem; color:var(--ink-navy);}
.nav-links a.active, .nav-links a:hover{color:var(--brass);}
.nav-links a.btn-primary, .nav-links a.btn-primary:hover{color:#fff !important;}

.has-mega{position:relative; display:flex; align-items:center;}
.has-mega > a{display:flex; align-items:center; gap:6px; cursor:pointer;}
.has-mega .caret{font-size:0.62rem; color:var(--brass); transition:transform 0.2s ease; display:block;}
.mega-toggle{
    background:none; border:none; padding:4px 6px; margin-left:2px; cursor:pointer;
    pointer-events:none; /* decorative on desktop — hover drives the panel there; see mobile override below */
}
.mega-panel{
    position:absolute; top:calc(100% + 21px); right:0;
    width:min(900px, 92vw);
    background:var(--parchment); border:1px solid var(--hairline); border-top:3px solid var(--brass);
    box-shadow:0 24px 48px rgba(70,70,70,0.18);
    padding:0; display:none; z-index:50;
}
/* Desktop: pure CSS hover drives the mega menu. Scoped to min-width so it never
   fights with the mobile tap-to-expand behavior below. */
@media (min-width:821px){
    .has-mega:hover .caret{transform:rotate(180deg);}
    .has-mega:hover .mega-panel{display:block;}
}
.mega-grid{display:grid; grid-template-columns:repeat(3,1fr) 1.1fr;}
.mega-col{padding:28px 24px; border-right:1px solid var(--hairline);}
.mega-col .fno{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--brass); letter-spacing:0.08em; display:block; margin-bottom:8px;}
.mega-col h6{font-family:'Poppins',sans-serif; font-size:0.98rem; color:var(--ink-navy); margin-bottom:14px; line-height:1.3; min-height:38px;}
.mega-col ul{list-style:none;}
.mega-col li{margin-bottom:9px;}
.mega-col li a{font-size:0.83rem; color:var(--slate); font-weight:500;}
.mega-col li a:hover{color:var(--brass);}
.mega-cta{background:var(--ink-navy); padding:28px 24px; display:flex; flex-direction:column; justify-content:space-between;}
.mega-cta h6{font-family:'Poppins',sans-serif; color:#F5F6F8; font-size:1rem; margin-bottom:10px;}
.mega-cta p{color:#9FA9B8; font-size:0.82rem; margin-bottom:18px; line-height:1.55;}
.mega-cta a.mega-btn{background:var(--brass); color:#fff; text-align:center; padding:11px; font-weight:700; font-size:0.82rem; border-radius:2px; display:block;}
.mega-cta .mega-phone{margin-top:16px; font-family:'IBM Plex Mono',monospace; color:var(--brass-light); font-size:0.78rem;}
.mega-simple{padding:20px 26px; min-width:230px;}
.mega-simple li{margin-bottom:4px; border-bottom:1px solid var(--hairline); list-style:none;}
.mega-simple li a{display:block; padding:11px 4px; font-size:0.88rem; color:var(--ink-navy); font-weight:600;}
.mega-simple li a:hover{color:var(--brass); padding-left:8px;}
.mega-simple li:last-child{border-bottom:none;}

/* mobile nav toggle */
.nav-toggle{display:none; background:none; border:1px solid var(--ink-navy); border-radius:2px; padding:8px 12px; font-size:1.1rem; cursor:pointer; color:var(--ink-navy);}

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */
.breadcrumb-bar{background:var(--parchment-2); border-bottom:1px solid var(--hairline); padding:12px 0;}
.breadcrumb-bar .container{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.85rem;}
.breadcrumb-bar a{color:var(--slate); text-decoration:none; font-weight:600;}
.breadcrumb-bar a:hover{color:var(--brass);}
.breadcrumb-bar .sep{color:#A9AFB8;}
.breadcrumb-bar .current{color:var(--ink-navy); font-weight:700;}

/* ---------------------------------------------------------
   Hero (home) + Page banner (inner pages) + watermark + barrier divider
   --------------------------------------------------------- */
.hero, .page-banner{background:var(--ink-navy); color:#D7DCE2; position:relative; overflow:hidden;}
.hero::before, .page-banner::before{
    content:''; position:absolute; top:-15%; right:-8%; width:520px; height:520px;
    background-image:var(--watermark-url, none); background-size:contain; background-repeat:no-repeat;
    opacity:0.08; pointer-events:none; transform:rotate(-8deg);
}
.hero::after, .page-banner::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:repeating-linear-gradient(115deg, rgba(2,118,179,0.05) 0px, rgba(2,118,179,0.05) 2px, transparent 2px, transparent 60px);
}
.hero .container, .page-banner .container{position:relative; z-index:1;}

.hero{padding:100px 0 90px;}
.hero .container{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace; color:var(--brass-light); font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:12px;}
.hero-eyebrow::before{content:''; width:34px; height:1px; background:var(--brass-light); display:inline-block;}
.hero h1{color:#F5F6F8; font-size:2.9rem; line-height:1.15; margin-bottom:24px;}
.hero h1 em{font-style:normal; color:var(--brass-light);}
.tagline{font-size:1.1rem; color:var(--brass-light); font-weight:600; margin-bottom:20px;}
.hero-desc, .hero p{font-size:1.06rem; color:#B9C2CE; margin-bottom:36px;}
.hero-buttons, .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-image-slot{
    aspect-ratio:4/5; border:1px dashed rgba(2,118,179,0.55); border-radius:2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px;
    background:linear-gradient(160deg, rgba(2,118,179,0.06), rgba(2,118,179,0.02)); position:relative; overflow:hidden;
}
.hero-image-slot img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.hero-image-slot::before, .hero-image-slot::after{content:''; position:absolute; width:22px; height:22px; border:2px solid var(--brass-light); z-index:2;}
.hero-image-slot::before{top:14px; left:14px; border-right:0; border-bottom:0;}
.hero-image-slot::after{bottom:14px; right:14px; border-left:0; border-top:0;}
.hero-image-slot .slot-label{font-family:'IBM Plex Mono',monospace; color:var(--brass-light); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; position:relative; z-index:1;}
.hero-image-slot .slot-sub{color:#7C8695; font-size:0.78rem; max-width:220px; position:relative; z-index:1;}

.page-banner{padding:70px 0; text-align:center;}
.page-banner h1{color:#F5F6F8; font-size:2.6rem; margin-bottom:10px;}
.page-banner p{color:var(--brass-light); font-size:1.05rem; font-weight:600;}

.barrier-divider{background:var(--parchment); position:relative; height:60px; overflow:visible;}
.barrier-divider .bar{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-56%) rotate(-3deg);
    width:74%; height:24px;
    background:repeating-linear-gradient(135deg, var(--brass) 0 22px, var(--ink-navy) 22px 44px);
    border:3px solid var(--ink-navy); border-radius:3px; box-shadow:0 10px 24px rgba(70,70,70,0.18);
}
.barrier-divider .pivot{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:var(--ink-navy); border:3px solid var(--brass); transform:translateY(-50%);}
.barrier-divider .pivot.left{left:8%;}
.barrier-divider .pivot.right{right:8%;}

/* ---------------------------------------------------------
   Section header pattern (used everywhere)
   --------------------------------------------------------- */
section{padding:90px 0;}
.registry-head{max-width:680px; margin-bottom:50px;}
.registry-head.centered{margin-left:auto; margin-right:auto; text-align:center;}
.registry-head h2{font-size:2.1rem; margin-bottom:14px;}
.registry-head p{font-size:1rem;}
.registry-head.on-dark h2{color:#F5F6F8;}
.registry-head.on-dark p{color:#B9C2CE;}
.registry-head.on-dark .hero-eyebrow{color:var(--brass-light);}
.registry-head.on-dark .hero-eyebrow::before{background:var(--brass-light);}

/* legacy aliases so any old markup still looks correct */
.section-title{font-family:'Poppins',sans-serif; text-align:center; font-size:2.1rem; margin-bottom:14px; color:var(--ink-navy);}
.section-subtitle{text-align:center; color:var(--slate); max-width:680px; margin:0 auto 50px auto; font-size:1rem;}

/* ---------------------------------------------------------
   About page: overview grid + vision/mission cards
   --------------------------------------------------------- */
.about-grid, .overview-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;}
.about-copy p, .overview-text p{margin-bottom:18px; font-size:1rem;}
.vm-stack{display:flex; flex-direction:column; gap:20px;}
.vm-card, .vm-box, .commitment-card{background:var(--parchment-2); border:1px solid var(--hairline); border-left:3px solid var(--brass); padding:26px 28px;}
.vm-card .hero-eyebrow, .vm-box h3{color:var(--brass); margin-bottom:10px; font-size:0.98rem;}
.vm-card p, .vm-box p, .commitment-card p{font-size:0.92rem; margin:0; color:var(--slate);}
.commitment-card h4{margin-bottom:10px; font-size:1.05rem;}

/* on dark background variant (used on About's vision/mission strip) */
.vm-section{background:var(--ink-navy);}
.vm-section .vm-box{background:rgba(255,255,255,0.04); border:1px solid rgba(2,118,179,0.25); border-left:3px solid var(--brass);}
.vm-section .vm-box h3{color:var(--brass-light);}
.vm-section .vm-box p{color:#B9C2CE;}
.vm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px;}

/* ---------------------------------------------------------
   Core values (flat spec-sheet grid, no false numbering)
   --------------------------------------------------------- */
.values-band{background:var(--ink-navy);}
.values-flat, .values-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(2,118,179,0.25); border-left:1px solid rgba(2,118,179,0.25);}
.value-cell, .value-card{padding:26px 24px; border-right:1px solid rgba(2,118,179,0.25); border-bottom:1px solid rgba(2,118,179,0.25);}
.value-cell h5, .value-card h4{font-family:'Poppins',sans-serif; color:#F5F6F8; font-size:1rem; margin-bottom:8px;}
.value-cell p, .value-card p{color:#9FA9B8; font-size:0.85rem; margin:0;}
/* light-background variant of the same grid (used if values shown outside the dark band) */
.values-flat.on-light, .values-grid.on-light{border-color:var(--hairline);}
.values-flat.on-light .value-cell, .values-grid.on-light .value-card{border-color:var(--hairline);}
.values-flat.on-light h5, .values-grid.on-light h4{color:var(--ink-navy);}
.values-flat.on-light p{color:var(--slate);}

/* ---------------------------------------------------------
   File registry (services grid) — homepage flat + category listing
   --------------------------------------------------------- */
.file-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
.file-card.cta-span{grid-column:span 2;}
.file-card, .sub-service-card{background:var(--parchment); padding:32px; position:relative;}
.file-num{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:0.78rem; font-weight:600; letter-spacing:0.08em; margin-bottom:14px; display:block;}
.file-card h3, .sub-service-card h4{font-size:1.2rem; margin-bottom:12px; line-height:1.3;}
.file-card h3 a, .sub-service-card h4 a{color:var(--ink-navy); text-decoration:none;}
.file-card p, .sub-service-card p{font-size:0.92rem; color:var(--slate); margin-bottom:0;}
.file-card .tag{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-navy); background:rgba(168,124,62,0.14); padding:4px 10px; border-radius:2px; display:inline-block; margin-top:14px;}
.sub-services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}

/* Services listing page: category dossier blocks */
.service-category{margin-bottom:1px; scroll-margin-top:100px;}
.category-header{background:var(--ink-navy); color:#F5F6F8; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--brass);}
.category-header h3{color:#F5F6F8; font-size:1.3rem; margin:0;}
.category-header h3 a{color:inherit; text-decoration:none;}
.category-body{background:var(--parchment-2); border:1px solid var(--hairline); border-top:none; padding:0;}
.category-body .sub-services-grid{border:none; background:var(--hairline);}

/* ---------------------------------------------------------
   Ledger clause rows (why-us, process steps)
   --------------------------------------------------------- */
.ledger-section{background:var(--ink-navy);}
.ledger-rows{border-top:1px solid rgba(2,118,179,0.25);}
.ledger-row, .process-step{display:grid; grid-template-columns:60px minmax(220px,280px) 1fr; gap:24px; padding:22px 0; border-bottom:1px solid rgba(2,118,179,0.25); align-items:baseline;}
.ledger-row .rn{font-family:'IBM Plex Mono',monospace; color:var(--brass-light); font-size:0.85rem;}
.ledger-row h4{color:#F5F6F8; font-size:1.05rem; font-family:'Poppins',sans-serif; font-weight:600; white-space:nowrap;}
.ledger-row p{color:#9FA9B8; font-size:0.9rem; margin:0;}
.feature-item{background:rgba(255,255,255,0.04); border:1px solid rgba(2,118,179,0.2); border-radius:2px; padding:24px;}
.feature-item h4{color:var(--brass-light); margin-bottom:10px; font-size:1.02rem;}
.feature-item p{color:#9FA9B8; font-size:0.9rem;}
.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}

/* process steps on service detail pages (light background variant) */
.process-list{list-style:none; margin-top:10px;}
.process-list .process-step{
    display:flex; gap:20px; background:var(--parchment-2); padding:22px 24px;
    border:1px solid var(--hairline); border-bottom:none; margin:0; align-items:flex-start;
}
.process-list .process-step:last-child{border-bottom:1px solid var(--hairline);}
.process-list .process-step .rn{color:var(--brass); font-family:'IBM Plex Mono',monospace; font-size:0.85rem; flex-shrink:0; width:32px; padding-top:2px;}
.process-list .process-step .step-content{flex:1;}
.process-list .process-step h4{color:var(--ink-navy); margin-bottom:6px; font-size:1rem;}
.process-list .process-step p{color:var(--slate); margin:0; font-size:0.9rem;}

/* ---------------------------------------------------------
   Service detail page (category dossier)
   --------------------------------------------------------- */
.detail-grid{display:grid; grid-template-columns:2.1fr 1fr; gap:48px; align-items:start;}
.content-block h2{font-size:1.6rem; margin-bottom:16px;}
.content-block > div + h2, .content-block > h2{margin-top:36px;}
.sidebar-widget{background:var(--parchment-2); border:1px solid var(--hairline); padding:26px; margin-bottom:22px;}
.sidebar-widget h4{margin-bottom:16px; font-size:1.02rem;}
.sidebar-list{list-style:none;}
.sidebar-list li{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--hairline);}
.sidebar-list li:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.sidebar-list a{text-decoration:none; color:var(--ink-navy); font-weight:600; font-size:0.92rem;}
.sidebar-list a:hover, .sidebar-list a.active{color:var(--brass);}
.cta-widget{background:var(--ink-navy); color:#D7DCE2; padding:28px; text-align:left;}
.cta-widget h4{color:var(--brass-light); margin-bottom:10px; font-size:1.02rem;}
.cta-widget p{font-size:0.88rem; margin-bottom:18px; color:#B9C2CE;}
.cta-widget .btn-primary{width:100%; text-align:center; display:block;}
.cta-widget .btn-primary + .btn-primary{margin-top:10px; background:transparent; border:1px solid rgba(215,220,226,0.4); color:#D7DCE2 !important;}

/* generic dark CTA band (services page footer CTA, blog post footer CTA) */
.service-cta{background:var(--ink-navy); color:#D7DCE2; padding:56px 40px; text-align:center; margin-top:50px;}
.service-cta h3{color:var(--brass-light); font-size:1.6rem; margin-bottom:14px;}
.service-cta p{max-width:600px; margin:0 auto 25px auto; font-size:1rem; color:#B9C2CE;}

/* quick-jump pills */
.related-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.related-links a{padding:9px 18px; border:1px solid var(--hairline); border-radius:20px; text-decoration:none; color:var(--ink-navy); font-size:0.85rem; font-weight:600; background:var(--parchment);}
.related-links a:hover{border-color:var(--brass); color:var(--brass);}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq-section, section#faq{background:var(--parchment-2);}
.faq-rows{max-width:820px;}
.faq-row, .faq-item{border-bottom:1px solid var(--hairline); padding:24px 0;}
.faq-row .q, .faq-item h4{display:flex; gap:14px; align-items:baseline; margin-bottom:8px;}
.faq-row .q span{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:0.85rem; flex-shrink:0;}
.faq-row .q h4, .faq-item h4{font-size:1.02rem; margin:0;}
.faq-row .a, .faq-item p{color:var(--slate); font-size:0.92rem; padding-left:30px; margin:0;}
.faq-grid{display:block;}

/* ---------------------------------------------------------
   Contact / Case Intake form
   --------------------------------------------------------- */
.intake-grid, .contact-grid{display:grid; grid-template-columns:1fr 1.3fr;}
.intake-info, .contact-info-box, .contact-info-card{background:var(--ink-navy); color:#D7DCE2; padding:56px;}
.intake-info h2, .contact-info-box h3, .contact-info-card h3{color:#F5F6F8; font-size:1.7rem; margin-bottom:18px;}
.intake-info > p, .contact-info-box > p, .contact-info-card > p{color:#B9C2CE; font-size:0.95rem; margin-bottom:32px;}
.intake-field-label, .info-detail strong, .info-item strong{
    font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--brass-light);
    letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:6px;
}
.intake-value, .info-detail a, .info-detail p, .info-item a{font-size:1rem; color:#F5F6F8; margin-bottom:26px; display:block; text-decoration:none;}
.info-detail, .info-item{margin-bottom:0;}

.intake-form, .contact-form, .contact-form-container{background:var(--parchment); padding:56px;}
.intake-form h3{font-size:1.3rem; margin-bottom:6px;}
.form-sub{color:var(--slate); font-size:0.88rem; margin-bottom:32px;}
.intake-row, .form-row{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:26px;}
.intake-field label, .form-group label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--brass);
    letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; font-weight:600;
}
.intake-field input, .intake-field select, .intake-field textarea,
.form-group input, .form-group select, .form-group textarea{
    width:100%; border:none; border-bottom:1px solid var(--hairline); background:transparent;
    padding:8px 2px; font-family:'Public Sans',sans-serif; font-size:0.95rem; color:var(--ink-navy); border-radius:0;
}
.intake-field input:focus, .intake-field select:focus, .intake-field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-bottom-color:var(--brass);}
.intake-field.full{grid-column:1 / -1;}
.form-group{margin-bottom:24px;}
.intake-submit, .btn-submit{
    margin-top:12px; background:var(--brass); color:#fff; border:none; padding:14px 34px;
    font-weight:700; font-size:0.9rem; cursor:pointer; border-radius:2px; width:auto;
}
.form-status{margin-top:15px; padding:12px 15px; border-radius:2px; font-size:0.9rem; display:none;}
.form-status.success{display:block; background:#E9F1EA; color:#2F5233; border:1px solid #C7DBC9;}
.form-status.error{display:block; background:#F6E9E7; color:var(--oxblood); border:1px solid #E3C4BD;}

/* ---------------------------------------------------------
   Blog / Field Notes
   --------------------------------------------------------- */
.notes-section, .blog-grid-section{padding:90px 0;}
.notes-grid, .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
.note-card, .blog-card{background:var(--parchment); padding:0; transition:none;}
.note-card .note-meta, .blog-meta{padding:20px 24px 0; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--brass); letter-spacing:0.06em; text-transform:uppercase;}
.blog-card img{width:100%; height:190px; object-fit:cover; background:var(--parchment-2);}
.note-card h4, .blog-card h3{padding:10px 24px 0; font-size:1.08rem; line-height:1.35;}
.blog-card h3 a{color:var(--ink-navy);}
.note-card p, .blog-card p{padding:10px 24px 26px; font-size:0.88rem; color:var(--slate);}
.note-card .read-link, .blog-card .read-more{display:block; padding:0 24px 24px; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--ink-navy); font-weight:600;}
.blog-meta .cat-tag{color:var(--brass); font-weight:700;}

.blog-post-header{text-align:center; max-width:800px; margin:0 auto 30px auto;}
.blog-post-body{max-width:800px; margin:0 auto; font-size:1.05rem;}
.blog-post-body img{border-radius:2px; margin:20px 0;}
.blog-post-body h2, .blog-post-body h3{margin:30px 0 14px 0; font-family:'Poppins',sans-serif;}
.blog-post-body p{margin-bottom:16px;}
.blog-post-body ul, .blog-post-body ol{margin:0 0 16px 24px;}

.pagination{display:flex; justify-content:center; gap:10px; margin-top:40px;}
.pagination a, .pagination span{padding:8px 14px; border:1px solid var(--hairline); border-radius:2px; text-decoration:none; color:var(--ink-navy); font-weight:600; font-size:0.9rem; font-family:'IBM Plex Mono',monospace;}
.pagination a:hover{border-color:var(--brass);}
.pagination .current{background:var(--brass); color:#fff; border-color:var(--brass);}
.empty-state{text-align:center; color:var(--slate); padding:50px 0;}

/* ---------------------------------------------------------
   Leadership / board
   --------------------------------------------------------- */
.leadership-intro{text-align:center; max-width:750px; margin:0 auto 40px auto; color:var(--slate);}
.leadership-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
.leader-card{background:var(--parchment); border-top:3px solid var(--brass); padding:34px; text-align:center;}
.leader-card img{width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 16px auto; background:var(--parchment-2); border:3px solid #fff; box-shadow:0 2px 10px rgba(70,70,70,0.18);}
.leader-card h4{margin-bottom:4px; font-size:1.1rem;}
.leader-card .node-role{display:block; color:var(--brass); font-weight:600; font-size:0.8rem; font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em; margin-bottom:14px; text-transform:uppercase;}
.leader-card p{color:var(--slate); font-size:0.9rem; text-align:left; line-height:1.7;}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer{background:var(--ink-navy-2); color:#B9C2CE; padding:64px 0 28px; border-top:3px solid var(--brass);}
.footer-content{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:40px;}
.footer-brand{margin-bottom:18px;}
.footer-brand img{max-width:190px; height:auto; padding:10px 12px 10px 0;}
.footer-info h3{color:var(--brass-light); font-family:'Poppins',sans-serif; margin-bottom:10px;}
.footer-tagline{color:var(--brass-light); font-size:0.85rem; font-weight:600; margin-top:8px; font-family:'IBM Plex Mono',monospace;}
.footer-links h4, .footer-contact h4{
    color:var(--brass-light); font-family:'IBM Plex Mono',monospace; font-size:0.72rem;
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; font-weight:600;
}
.footer-links ul{list-style:none;}
.footer-links li{margin-bottom:10px; font-size:0.9rem;}
.footer-links a, .footer-contact a{color:#B9C2CE; text-decoration:none;}
.footer-links a:hover, .footer-contact a:hover{color:var(--brass-light);}
.social-icons{display:flex; gap:12px; margin-top:18px;}
.social-icons a{width:36px; height:36px; border-radius:50%; background:rgba(2,118,179,0.12); border:1px solid rgba(2,118,179,0.35); display:flex; align-items:center; justify-content:center; transition:background 0.25s ease;}
.social-icons a:hover{background:var(--brass);}
.social-icons svg{width:16px; height:16px; fill:var(--brass-light);}
.social-icons a:hover svg{fill:var(--ink-navy);}
.copyright{border-top:1px solid rgba(2,118,179,0.2); text-align:center; padding:20px 0; font-size:0.8rem; color:#7C8695; font-family:'IBM Plex Mono',monospace;}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:992px){
    .about-grid, .overview-grid, .detail-grid, .intake-grid, .contact-grid{grid-template-columns:1fr;}
    .footer-content{grid-template-columns:1fr 1fr;}
    .file-grid, .sub-services-grid, .notes-grid, .blog-grid{grid-template-columns:repeat(2,1fr);}
    .values-flat, .values-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
    .hero .container{grid-template-columns:1fr;}
    .hero-image-slot{aspect-ratio:16/9;}
    .hero h1{font-size:2.1rem;}
    .page-banner h1{font-size:2rem;}
    .file-grid, .sub-services-grid, .notes-grid, .blog-grid{grid-template-columns:1fr;}
    .file-card.cta-span{grid-column:span 1;}
    .ledger-row, .process-step{grid-template-columns:50px 1fr;}
    .ledger-row h4{white-space:normal;}
    .ledger-row p{grid-column:1 / -1;}

    /* Mobile mega menu: collapsed by default, expands only when tapped (see the
       mega-toggle JS in header.php) — deliberately different from desktop's
       hover-reveal, since hover isn't a real gesture on a touchscreen. */
    .has-mega{flex-wrap:wrap; width:100%; justify-content:space-between;}
    .mega-toggle{pointer-events:auto; padding:10px 14px; flex-shrink:0;}
    .mega-toggle .caret{font-size:0.9rem;}
    .has-mega.mega-open .mega-toggle .caret{transform:rotate(180deg);}
    .mega-panel{position:static; width:100%; transform:none; box-shadow:none; display:none; margin-top:10px;}
    .has-mega.mega-open .mega-panel{display:block;}
    .mega-grid{grid-template-columns:1fr;}
    .mega-col{border-right:none; border-bottom:1px solid var(--hairline);}

    .nav-links{display:none; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding-top:16px; padding-bottom:20px;}
    .nav-links.open{display:flex;}
    .nav-links > a{padding:10px 0; width:100%;}
    .nav-toggle{display:block;}
    .intake-row, .form-row{grid-template-columns:1fr;}
    .intake-info, .intake-form, .contact-info-box, .contact-form, .contact-info-card, .contact-form-container{padding:44px 28px;}
}
@media (max-width:600px){
    .footer-content{grid-template-columns:1fr;}
    .values-flat, .values-grid{grid-template-columns:1fr;}
    .btn-secondary{margin-left:0; margin-top:10px;}
    .hero::before, .page-banner::before{width:280px; height:280px;}
}

/* ---------------------------------------------------------
   Homepage hero — full-screen background image (replaces flat
   grey background). Scoped to home only via .hero-full so the
   plain dark .page-banner on inner pages is untouched.
   --------------------------------------------------------- */
.hero.hero-full{
    background-image:linear-gradient(rgba(9,13,20,0.82), rgba(9,13,20,0.88)), url('../img/hero-bg.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    min-height:100vh;
    display:flex;
    align-items:center;
}
@media (max-width:700px){
    .hero.hero-full{min-height:auto; padding:120px 0 90px;}
}