/* =====================================================================
   B Safal Renewable Energies — design layer
   Loaded after style.css / custom.css. Gives every page one voice:
   a classical serif for headlines (three decades of building),
   a calm geometric sans for reading, the logo's green, white space.
   Layout: white header like bsafal.com · full-bleed photography ·
   generous margins · hairline rules instead of boxes.
   ===================================================================== */
:root{
  --ink:#1c2420;          /* headlines */
  --ink-soft:#46524b;     /* body text */
  --muted:#6e7a72;        /* captions, labels */
  --paper:#ffffff;
  --mist:#f2f5f1;         /* alternate section */
  --line:#dce3dc;         /* hairlines */
  --sage:#789C7E;         /* logo green */
  --sage-deep:#4f7357;    /* links, accents on white */
  --sage-light:#b9d2bd;   /* accents on dark */
  --forest:#1f3127;       /* footer, menu, dark panels */

  --f-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --f-body:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;

  --header-h:84px;
  --gutter:clamp(16px,3.2vw,48px);
  --sec:clamp(48px,5.5vw,84px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* keep the old variables in step so legacy rules inherit the new look */
  --tc-primary:var(--sage); --tc-info:var(--forest); --title-color:var(--ink);
  --section-py:var(--sec);
  --bs-body-font-family:var(--f-body);
}
@media (max-width:991px){ :root{ --header-h:68px; } }

/* ---------- Base ---------- */
html{scroll-behavior:auto;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-stopped{overflow:hidden;}
html.menu-open{overflow:hidden;}
body{font-family:var(--f-body);color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
p,li{font-family:var(--f-body);font-size:1.0625rem;font-weight:400;line-height:1.7;color:var(--ink-soft);}
h1,h2,h3,h5,h6{font-family:var(--f-display);font-weight:500;color:var(--ink);letter-spacing:-.005em;text-wrap:balance;}
h4{font-family:var(--f-body);}
strong{font-weight:600;}
a{transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);}
:after,:before,.card{transition:none;}
::selection{background:var(--sage);color:#fff;}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;}
img{max-width:100%;}
.bg-1{background:var(--paper);} .bg-2,.bg-mist{background:var(--mist);}
main{padding-top:var(--header-h);}
.homepage>section,.subpage>section{padding-top:var(--sec);padding-bottom:var(--sec);}
.container{--bs-gutter-x:2rem;}
@media (min-width:1400px){ .container{max-width:1240px;} }

.eyebrow{display:block;margin:0 0 1.1rem;font-family:var(--f-body);font-size:.78rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);line-height:1.4;}
.h-section{font-size:clamp(2.1rem,1.45rem + 2.4vw,3.5rem);line-height:1.08;margin:0 0 1.5rem;}
.body-lg{font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.75;max-width:62ch;}

/* ---------- Buttons ---------- */
.themebtn,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 1.9rem;border-radius:0;font-family:var(--f-body);font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1;text-decoration:none;cursor:pointer;}
.themebtn{background:var(--forest);color:#fff;border:1px solid var(--forest);outline:0 !important;overflow:visible;}
.themebtn::after{display:none !important;}
.themebtn:hover,.themebtn:focus-visible{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff !important;}
.themebtn.bdr,.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink);outline:0 !important;}
.themebtn.bdr:hover,.btn-line:hover,.btn-line:focus-visible,.btn-line.is-current{background:var(--ink);color:#fff !important;}
.btn-line.on-dark,.themebtn.bdr.on-dark{color:#fff;border-color:rgb(255 255 255 / 70%);}
.btn-line.on-dark:hover{background:#fff;color:var(--ink) !important;border-color:#fff;}
.btn-sm{min-height:42px;padding:0 1.4rem;font-size:.74rem;}
.themebtn svg,.btn-line svg{width:16px;height:16px;}
.buttons{gap:12px;}

/* ---------- Header (white bar, as on bsafal.com) ---------- */
.siteheader{position:fixed;top:0;left:0;right:0;z-index:1030;background:rgb(255 255 255 / 97%);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.siteheader.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgb(20 40 28 / 45%);}
.sitenav{height:var(--header-h);padding:0;}
.sitenav>.container-fluid{padding-inline:var(--gutter);height:100%;flex-wrap:nowrap;}
.sitenav .navbar-brand{padding:0;margin:0;display:flex;align-items:center;}
.sitenav .navbar-brand img{height:44px;width:auto;display:block;}
.sitenav .navbar-nav{gap:clamp(.5rem,2vw,2.4rem);}
.sitenav .nav-link{position:relative;padding:.6rem 0 !important;font-family:var(--f-body);font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink) !important;}
.sitenav .nav-link::before{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.sitenav .nav-link:hover::before,.sitenav .nav-link.active::before,.sitenav .show>.nav-link::before{transform:scaleX(1);}
.sitenav .dropdown-toggle::after{border:0;width:8px;height:8px;margin-left:.55em;vertical-align:.15em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);background:none;-webkit-mask:none;mask:none;}
.sitenav .dropdown-menu{margin-top:0 !important;padding:.6rem 0;min-width:260px;border:1px solid var(--line);border-radius:0;background:#fff;box-shadow:0 18px 40px -24px rgb(20 40 28 / 40%);}
.sitenav .dropdown-item{padding:.55rem 1.4rem;font-family:var(--f-body);font-size:.95rem;font-weight:400;color:var(--ink-soft);background:transparent;}
.sitenav .dropdown-item::before{display:none;}
.sitenav .dropdown-item:hover,.sitenav .dropdown-item:focus,.sitenav .dropdown-item.active{background:var(--mist);color:var(--ink);padding:.55rem 1.4rem;}
.sitenav-actions{display:flex;align-items:center;gap:1.4rem;margin-left:auto;}
.menu-toggle{position:relative;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;gap:7px;}
.menu-toggle span{display:block;height:1.5px;width:30px;margin-left:auto;background:var(--ink);transition:width .3s var(--ease);}
.menu-toggle span:last-child{width:20px;}
.menu-toggle:hover span:last-child{width:30px;}
@media (max-width:991px){ .sitenav .navbar-brand img{height:36px;} }

/* ---------- Full-screen menu ---------- */
.sitemenu.offcanvas{--bs-offcanvas-width:100%;width:100% !important;height:100% !important;top:0;left:0;right:0;bottom:0;border:0 !important;background:var(--forest) !important;color:#fff;transform:none !important;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease) !important;}
.sitemenu.offcanvas.showing,.sitemenu.offcanvas.show:not(.hiding){opacity:1;visibility:visible;}
.sitemenu::after{display:none !important;}
.sitemenu-head{position:absolute;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);border-bottom:1px solid rgb(255 255 255 / 12%);z-index:2;}
.sitemenu-logo img{height:44px;width:auto;display:block;}
.sitemenu-close{position:relative;width:40px;height:40px;border:0;background:transparent;cursor:pointer;}
.sitemenu-close span{position:absolute;left:6px;right:6px;top:50%;height:1.5px;background:#fff;}
.sitemenu-close span:first-child{transform:rotate(45deg);} .sitemenu-close span:last-child{transform:rotate(-45deg);}
.sitemenu-body{position:absolute;top:var(--header-h);left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.sitemenu-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);padding:clamp(2.5rem,6vh,5rem) var(--gutter) clamp(2.5rem,6vh,4rem);max-width:1320px;margin:0 auto;min-height:100%;}
.sitemenu-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-content:start;}
.sitemenu-primary{list-style:none;margin:0;padding:0;}
.sitemenu-primary li{margin:0;padding:0;font-size:inherit;}
.sitemenu-primary a{display:inline-block;padding:.15em 0;font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem);line-height:1.12;color:#fff;}
.sitemenu-primary a:hover,.sitemenu-primary a[aria-current]{color:var(--sage-light);}
.sitemenu .eyebrow{color:var(--sage-light);margin-bottom:1.2rem;}
.sitemenu-solutions ol{list-style:none;margin:0;padding:0;border-top:1px solid rgb(255 255 255 / 14%);}
.sitemenu-solutions li{margin:0;border-bottom:1px solid rgb(255 255 255 / 14%);font-size:inherit;}
.sitemenu-solutions a{display:flex;align-items:baseline;gap:1rem;padding:.72rem 0;font-family:var(--f-body);font-size:1.02rem;color:rgb(255 255 255 / 88%);}
.sitemenu-solutions a .num{font-size:.72rem;letter-spacing:.14em;color:var(--sage-light);font-variant-numeric:tabular-nums;min-width:1.6rem;}
.sitemenu-solutions a:hover,.sitemenu-solutions a[aria-current]{color:#fff;padding-left:.35rem;}
.sitemenu-contact{align-self:end;border-left:1px solid rgb(255 255 255 / 14%);padding-left:clamp(1.5rem,3vw,3rem);}
.sitemenu-tagline{font-family:var(--f-display);font-style:italic;font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);line-height:1.3;color:#fff;margin-bottom:1.6rem;}
.sitemenu-contact ul{list-style:none;padding:0;margin:0 0 1.6rem;}
.sitemenu-contact li,.sitemenu-group{color:rgb(255 255 255 / 75%);font-size:.98rem;line-height:1.7;margin:0;}
.sitemenu-contact a{color:rgb(255 255 255 / 92%);}
.sitemenu-contact a:hover{color:var(--sage-light);}
.sitemenu-group{padding-top:1.2rem;border-top:1px solid rgb(255 255 255 / 14%);}
/* one quiet entrance when the menu opens */
.sitemenu .sitemenu-primary li,.sitemenu .sitemenu-solutions,.sitemenu .sitemenu-contact{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.sitemenu.show .sitemenu-primary li,.sitemenu.showing .sitemenu-primary li,.sitemenu.show .sitemenu-solutions,.sitemenu.showing .sitemenu-solutions,.sitemenu.show .sitemenu-contact,.sitemenu.showing .sitemenu-contact{opacity:1;transform:none;}
.sitemenu .sitemenu-primary li:nth-child(2){transition-delay:.04s} .sitemenu .sitemenu-primary li:nth-child(3){transition-delay:.08s}
.sitemenu .sitemenu-primary li:nth-child(4){transition-delay:.12s} .sitemenu .sitemenu-primary li:nth-child(5){transition-delay:.16s}
.sitemenu .sitemenu-solutions{transition-delay:.12s} .sitemenu .sitemenu-contact{transition-delay:.2s}
.offcanvas-backdrop{display:none;}
@media (max-width:991px){
  .sitemenu-inner{grid-template-columns:1fr;gap:2.5rem;}
  .sitemenu-contact{border-left:0;padding-left:0;border-top:1px solid rgb(255 255 255 / 14%);padding-top:2rem;align-self:start;}
}
@media (max-width:575px){
  .sitemenu-nav{grid-template-columns:1fr;gap:2.2rem;}
  .sitemenu-logo img{height:34px;}
}

/* ---------- Page banners (all inner pages) ---------- */
.sub-banner{position:relative;height:auto;min-height:clamp(400px,64vh,660px);padding-top:clamp(7rem,14vh,10rem) !important;display:flex;align-items:flex-end;padding:0 0 clamp(2.5rem,5vw,4.5rem) !important;background:var(--forest);overflow:hidden;aspect-ratio:auto;}
.sub-banner .bgimg,.nextsolution .bgimg,.whatwe .bgimg,.home-contact .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.sub-banner::after{z-index:1;mix-blend-mode:normal !important;background:linear-gradient(180deg,rgb(12 20 16 / 10%) 0%,rgb(12 20 16 / 18%) 45%,rgb(12 20 16 / 68%) 100%) !important;}
.sub-banner .container{position:relative;z-index:2;}
.sub-banner .bothxgap{padding:0 !important;align-items:flex-end;}
.sub-banner .bannerlabel,.nextsolution .bannerlabel{font-family:var(--f-body);font-size:.78rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgb(255 255 255 / 85%);filter:none;margin-bottom:1rem;}
.sub-banner .bannerlabel strong,.nextsolution .bannerlabel strong{display:inline;margin:0 .6em 0 0;font-family:var(--f-display);font-size:1.05rem;font-weight:500;letter-spacing:.04em;color:var(--sage-light);-webkit-text-stroke:0;}
.sub-banner .bannertitle,.nextsolution .bannertitle{font-family:var(--f-display);font-weight:500;text-transform:none;font-size:clamp(2.5rem,1.6rem + 3.4vw,4.75rem);line-height:1.04;color:#fff;filter:none;margin:0;max-width:18ch;}
.sub-banner .snumber,.sub-banner .bannerpra{margin-left:auto;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;font-family:var(--f-body);font-size:.8rem;letter-spacing:.2em;color:rgb(255 255 255 / 80%);font-variant-numeric:tabular-nums;max-width:none;}
.sub-banner .bannerpra{max-width:440px;letter-spacing:0;}
.sub-banner .bannertitle.is-long{font-size:clamp(1.9rem,1.3rem + 2vw,3.2rem);max-width:24ch;line-height:1.12;}
.sub-banner .bannerpra p{color:#fff;font-size:1.0625rem;line-height:1.6;}
.sub-banner .breadcrumb{justify-content:flex-end;padding:0;gap:1.6rem;}
.sub-banner .breadcrumb li{padding:0;margin:0;font-family:var(--f-body);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgb(255 255 255 / 70%);}
.sub-banner .breadcrumb li::before{display:none;}
.sub-banner .breadcrumb li.active{color:#fff;text-decoration:none;border-bottom:1px solid var(--sage-light);padding-bottom:4px;}
.sub-banner .breadcrumb li a{color:inherit;font-size:inherit;}
.sub-banner .breadcrumb li:hover a{color:#fff;text-decoration:none;}
@media (max-width:991px){
  .sub-banner{height:auto;min-height:340px;aspect-ratio:auto;padding-top:120px !important;}
  .sub-banner .bothxgap{row-gap:1rem;}
  .sub-banner .snumber,.sub-banner .bannerpra{margin-left:0;}
  .sub-banner .breadcrumb{justify-content:flex-start;}
}

/* "Next" banner at the foot of each solution page */
.nextsolution{position:relative;padding:clamp(4rem,9vw,8rem) 0 !important;background:var(--forest);overflow:hidden;}
.nextsolution::after{z-index:1;mix-blend-mode:normal !important;background:linear-gradient(90deg,rgb(12 20 16 / 78%) 0%,rgb(12 20 16 / 40%) 70%) !important;}
.nextsolution .container{position:relative;z-index:2;}
.nextsolution .bothxgap{padding:0 !important;align-items:center;}
.arrowbtn{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:72px;height:72px;border-radius:50%;border:1px solid rgb(255 255 255 / 70%);color:#fff;animation:none !important;transition:background-color .3s var(--ease),color .3s var(--ease);}
.arrowbtn:hover{background:#fff;color:var(--ink);}
.arrowbtn svg{width:22px;height:22px;}

/* ---------- Content sections on inner pages ---------- */
.subtitle :is(h1,h2,h3,h4){font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(2rem,1.5rem + 1.8vw,3rem);line-height:1.1;}
.title :is(h1,h2,h3,h4){font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem);line-height:1.1;}
.solution .sectiondesc p:first-of-type,.about .sectiondesc p:first-of-type{font-family:var(--f-display);font-weight:500;font-size:clamp(1.45rem,1.15rem + 1vw,2rem);line-height:1.35;color:var(--ink);margin-bottom:1.4rem;}
.sectiondesc p{max-width:66ch;}
.scopeinfo{border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);}
.scopeinfo h4,.itembox h4{font-family:var(--f-body);font-size:.75rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:.9rem;}
.mil-list li{color:var(--ink);font-size:1.05rem;line-height:1.6;}
.mil-list li:after{color:var(--sage);}

/* About: "what we are building toward" */
.whatwe{position:relative;isolation:isolate;padding-block:var(--sec) !important;}
.whatwe::after{z-index:1 !important;mix-blend-mode:normal !important;background:linear-gradient(90deg,rgb(12 20 16 / 72%),rgb(12 20 16 / 35%)) !important;}
.whatwe .container{position:relative;z-index:2;}
.whatwe h3{color:#fff !important;padding:0 !important;margin:0 0 2rem !important;}
.whatwetext{background:rgb(31 49 39 / 92%);border-radius:0;padding:clamp(2rem,4vw,3.5rem);margin:0 0 0 auto;}
.whatwetext p,.whatwe .sectiondesc p:first-of-type{font-family:var(--f-display);font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);line-height:1.4;color:#fff;font-weight:500;margin:0;}
.bsgroupbox{align-items:center;gap:2rem;}
.bsgroupbox p{font-family:var(--f-display);font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);color:var(--ink);line-height:1.35;max-width:36ch;margin:0;}
.bsgroupbox .themebtn{flex-shrink:0;}

/* Projects */
.projects .card{background:transparent;border:0;}
.projects .cardpic{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--mist);}
.projects .cardpic img,.projects .cardpic .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.projects .card:hover .cardpic img{transform:scale(1.03);}
.projects .card-body{padding:1.5rem 0 0 !important;}
.cdate{position:static;transform:none;display:block;padding:0;margin:0 0 .6rem;background:none;box-shadow:none;border-radius:0;font-family:var(--f-body);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep);}
.projects .card h4{font-family:var(--f-display);font-size:clamp(1.6rem,1.3rem + .9vw,2.1rem);font-weight:500;color:var(--ink);margin-bottom:.35rem;}
.projects .location{font-size:.95rem;color:var(--muted);}
.capacity-row{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1rem;}
.capacity strong{font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,1.8rem + 1.2vw,2.8rem);color:var(--ink);font-variant-numeric:lining-nums;}
.capacity small{font-size:.9rem;color:var(--muted);letter-spacing:.06em;}
.capacity-row .mil-list li{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep);}

/* Forms */
.themeform .form-control,.themeform .form-select{height:76px;font-family:var(--f-body);font-size:1.05rem;font-weight:400;color:var(--ink);border-color:#c9d2ca;}
.themeform .form-control:focus,.themeform .form-select:focus{border-color:var(--sage-deep);}
.themeform label{font-family:var(--f-body);font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.themeform .form-select:valid{color:var(--ink);font-weight:400;}
.themeform .form-success{border-radius:0;font-family:var(--f-body);}
.file-drop-area .upload-icon{background:transparent;}
.contact .scopeinfo::after{background:var(--mist);}
.contact .itembox{border-bottom-color:var(--line);}
.contact .itembox li{color:var(--ink);}
.contact .fault p::before{animation:none;background:var(--sage);}
.contact .fault p{font-family:var(--f-display);font-size:1.3rem;color:var(--ink);}

/* ---------- Footer ---------- */
.footer{background:var(--forest);}
.footertop{padding:clamp(4rem,7vw,6rem) 0 clamp(3rem,5vw,4rem);}
.footerlogo img{height:46px;width:auto;}
.footertop .contlist p{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem);line-height:1.3;color:#fff;max-width:24ch;}
.footertop h4{font-family:var(--f-body);font-size:.72rem;font-weight:500;letter-spacing:.24em;color:var(--sage-light);margin-bottom:1.1rem;}
.footertop .navlist li{font-family:var(--f-body);font-size:.98rem;margin:.35rem 0;color:rgb(255 255 255 / 82%);letter-spacing:0;}
.footertop .navlist li>a:before{background:var(--sage-light);}
.copyrights{border-top-color:rgb(255 255 255 / 14%);padding-block:1.6rem 2rem;}
.copyrights p,.copyrights li{font-family:var(--f-body);font-size:.85rem;color:rgb(255 255 255 / 70%);letter-spacing:.02em;}
.copyrights a:hover{color:#fff;}

/* ---------- Homepage ---------- */
.homepage>section{overflow:clip;}
.hero{position:relative;padding:0 !important;height:calc(100svh - var(--header-h));min-height:560px;max-height:980px;display:flex;align-items:flex-end;background:var(--forest);color:#fff;}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(12 20 16 / 70%) 0%,rgb(12 20 16 / 38%) 48%,rgb(12 20 16 / 8%) 100%),linear-gradient(180deg,transparent 55%,rgb(12 20 16 / 45%));}
.hero-inner{position:relative;z-index:1;padding-bottom:clamp(3rem,8vh,6rem);}
.hero .eyebrow{color:rgb(255 255 255 / 85%);}
.hero .display{font-family:var(--f-display);font-weight:500;font-size:clamp(3rem,1.6rem + 5.2vw,6.75rem);line-height:.98;color:#fff;margin:0 0 1.5rem;max-width:12ch;}
.hero .lede{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);font-weight:300;color:rgb(255 255 255 / 92%);max-width:40ch;margin-bottom:2.2rem;}
.hero .themebtn{background:#fff;color:var(--ink);border-color:#fff;}
.hero .themebtn:hover{background:var(--sage-light);border-color:var(--sage-light);color:var(--ink) !important;}

.framed{position:relative;margin:0 0 0 0;padding:0 1.25rem 1.25rem 0;}
.framed::before{content:"";position:absolute;top:1.25rem;left:1.25rem;right:0;bottom:0;border:1px solid var(--sage);}
.framed img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
@media (max-width:991px){ .framed img{aspect-ratio:4/3;} }

.solution-index{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 clamp(2.5rem,5vw,3.5rem);padding:0;border-top:1px solid var(--line);}
.solution-index li{margin:0;border-bottom:1px solid var(--line);}
.solution-index a{display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1.4fr) 2rem;align-items:baseline;gap:1.5rem;padding:1.35rem .5rem 1.35rem 0;color:var(--ink);transition:background-color .35s var(--ease),padding .35s var(--ease);}
.solution-index .num{font-size:.75rem;letter-spacing:.16em;color:var(--sage-deep);font-variant-numeric:tabular-nums;}
.solution-index .name{font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem + .9vw,2rem);font-weight:500;line-height:1.15;}
.solution-index .desc{font-size:1rem;color:var(--muted);line-height:1.55;}
.solution-index .go{justify-self:end;align-self:center;width:18px;height:18px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease);color:var(--sage-deep);}
.solution-index a:hover{background:#fff;padding-left:1rem;}
.solution-index a:hover .name{color:var(--sage-deep);}
.solution-index a:hover .go{transform:translateX(4px) rotate(45deg);}
@media (max-width:767px){
  .solution-index a{grid-template-columns:2.6rem minmax(0,1fr) 1.2rem;gap:.25rem 1rem;}
  .solution-index .desc{grid-column:2 / 3;grid-row:2;}
  .solution-index .go{grid-column:3;grid-row:1 / span 2;width:12px;height:12px;}
}

.home-record{position:relative;background:var(--forest);color:#fff;padding:0 !important;}
.record-media{position:absolute;top:0;right:0;bottom:0;width:50%;}
.record-media img{width:100%;height:100%;object-fit:cover;}
.record-panel{width:50%;padding:var(--sec) clamp(2rem,5vw,5rem) var(--sec) 0;}
.home-record .eyebrow{color:var(--sage-light);}
.home-record .h-section{color:#fff;}
.home-record .body-lg,.home-record .note{color:rgb(255 255 255 / 85%);}
.home-record .body-lg{margin-bottom:2.2rem;}
.home-record .note{font-size:.95rem;margin:0 0 2.2rem;max-width:52ch;}
@media (max-width:991px){
  .record-media{position:relative;width:100%;height:auto;aspect-ratio:16/10;}
  .record-panel{width:100%;padding:3.5rem 0 4rem;}
}

.home-contact{position:relative;color:#fff;isolation:isolate;padding-block:clamp(5rem,10vw,9rem) !important;background:var(--forest);}
.home-contact::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgb(12 20 16 / 80%) 0%,rgb(12 20 16 / 45%) 70%);}
.home-contact .container{position:relative;z-index:1;}
.home-contact .eyebrow{color:var(--sage-light);}
.home-contact .h-section{color:#fff;}
.home-contact .body-lg{color:rgb(255 255 255 / 88%);margin-bottom:2.2rem;}
.home-contact .themebtn{background:#fff;color:var(--ink);border-color:#fff;}
.home-contact .themebtn:hover{background:var(--sage-light);border-color:var(--sage-light);}

/* ---------- Legal pages ---------- */
.legaltext h2{font-family:var(--f-display);font-size:clamp(1.6rem,1.35rem + .8vw,2.1rem);font-weight:500;color:var(--ink);}

/* ---------- One gentle reveal ---------- */
.can-reveal .rv-wait{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.can-reveal .rv-wait.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .can-reveal .rv-wait{opacity:1;transform:none;}
}

/* ---------- Small screens ---------- */
@media (max-width:991px){
  .siteheader{position:fixed;box-shadow:none;}
  .bsgroupbox{flex-direction:column;align-items:flex-start;}
}
@media (max-width:575px){
  .themebtn,.btn-line{min-height:46px;padding:0 1.4rem;font-size:.74rem;}
  .hero{min-height:520px;}
}

/* ---------- Refinements (DRAFT 3) ---------- */
.contact .fault p::before{top:.62em;}
.themeform .enquiry-select .form-select{padding-top:1.9rem;}
/* Careers: CV upload hint sits below its floating label, like the other fields */
.themeform .file-drop-area .file-message{padding-top:1.9rem;padding-bottom:0;align-items:center;color:var(--ink-soft);font-size:1rem;}

/* Every page banner fills the screen below the fixed header */
.sub-banner{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));}

/* Company banner: photo settles in slowly; lighter overlay; larger title */
.sub-banner.feature-banner .bgimg{animation:banner-settle 2.8s cubic-bezier(.2,.7,.2,1) both;}
.sub-banner.feature-banner::after{background:linear-gradient(180deg,rgb(12 20 16 / 0%) 0%,rgb(12 20 16 / 10%) 45%,rgb(12 20 16 / 62%) 100%) !important;}
.sub-banner.feature-banner .bannertitle{font-size:clamp(3rem,1.9rem + 4.4vw,6.25rem);}
@keyframes banner-settle{from{transform:scale(1.07);}to{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){ .sub-banner.feature-banner .bgimg{animation:none;} }

/* Company: link to the B Safal Group, with its logo */
.bsgroup{border-top:1px solid var(--line);}
.bsgroupbox{display:flex;justify-content:space-between;align-items:center;gap:clamp(1.5rem,4vw,4rem);}
.bsgroup-logo{flex-shrink:0;display:block;}
.bsgroup-logo img{display:block;width:clamp(150px,16vw,220px);height:auto;}
@media (max-width:767px){ .bsgroupbox{flex-direction:column;align-items:flex-start;} }

/* Projects: one project per row, full-width photo */
.projects .cardpic{aspect-ratio:16/10;}
@media (min-width:992px){
  .projects .cardpic{aspect-ratio:2/1;}
  .projects .projcard .card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:start;padding-top:2rem;}
  .projects .projcard .card-body>*{grid-column:1;}
  .projects .projcard .card-body>.capacity-row{grid-column:2;grid-row:1 / span 2;}
  .projects .projcard .card-body>p:not(.location){grid-column:2;grid-row:3;}
}

/* Team banner: the eleven functions as photo tiles */
.sub-banner.team-mosaic{padding:0 !important;display:block;background:var(--forest);}
.sub-banner.team-mosaic::after{display:none;}
.mosaic{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:560px;}
.mosaic .tile{position:relative;margin:0;overflow:hidden;background:var(--forest);}
.mosaic .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);}
.mosaic .tile:hover img{transform:scale(1.04);}
.mosaic .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(12 20 16 / 0%) 45%,rgb(12 20 16 / 62%) 100%);}
.mosaic figcaption{position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:1;display:flex;align-items:baseline;gap:.55rem;font-family:var(--f-display);font-weight:500;font-size:clamp(1.05rem,.85rem + .5vw,1.4rem);line-height:1.15;color:#fff;}
.mosaic figcaption span{font-family:var(--f-body);font-size:.68rem;letter-spacing:.2em;color:var(--sage-light);}
.mosaic-title{grid-column:1 / span 2;grid-row:2 / span 2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,3vw,3rem);background:var(--forest);}
.mosaic-title .bannertitle{font-size:clamp(2.6rem,1.6rem + 3.2vw,5rem);margin-bottom:1.6rem;}
.mosaic-title .breadcrumb{justify-content:flex-start;margin:0;}
.mosaic .tile:nth-child(1){grid-column:1;grid-row:1;}
@media (max-width:991px){
  .mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;height:auto;min-height:0;}
  .sub-banner.team-mosaic{min-height:0;}
  .mosaic .tile{aspect-ratio:1/1;}
  .mosaic-title{grid-column:1 / -1;grid-row:1;}
  .mosaic .tile:nth-child(1){grid-column:auto;grid-row:auto;}
  .mosaic .tile:nth-of-type(11){grid-column:span 2;aspect-ratio:auto;}
}
@media (max-width:575px){ .mosaic figcaption{left:.6rem;right:.6rem;bottom:.55rem;font-size:.95rem;flex-direction:column;gap:.1rem;} }

/* Team: "Our Team" text box over a grid of site photos (tiles the same size as the function tiles) */
.subpage>section.team-band{margin-top:clamp(3.5rem,7vw,7rem);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:560px;padding-block:clamp(2rem,5vw,4rem) !important;display:flex;align-items:flex-end;}
.team-band .container{width:100%;}
.team-band h2{font-family:var(--f-display);font-weight:500;font-size:clamp(2.4rem,1.6rem + 3vw,4.25rem);line-height:1.05;color:#fff;margin:0;}
.team-band .whatwetext p{font-family:var(--f-body);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.75;font-weight:400;color:rgb(255 255 255 / 92%);margin:0 0 1rem;}
.team-band .whatwetext p:first-child{font-family:var(--f-display);font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1.4;font-weight:500;color:#fff;}
.team-band .whatwetext p:last-child{margin-bottom:0;}
.band-grid{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;background:var(--forest);}
.band-grid img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:991px){
  .subpage>section.team-band{height:auto;min-height:0;}
  .band-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));}
}

/* Team: leadership closes the page */
.leadership{padding-block:clamp(4rem,8vw,7rem);}
.leadership .eyebrow{margin:0;}
.leadership .row{align-items:flex-start !important;}
.leader-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);}
.leader-list li{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;width:clamp(220px,24vw,320px);}
.leader-list img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;}
.leader-list h4{margin:0 0 .2rem;font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,1.25rem + .7vw,2rem);color:var(--ink);letter-spacing:0;text-transform:none;}
.leader-list p{margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);}
@media (max-width:575px){ .leader-list li{width:100%;} }

/* Footer in the logo green (a deeper shade of #789C7E so white text stays readable) */
.footer{background:#587c5f;}
.footertop h4{color:#fff;opacity:1;}
.footertop .navlist li,.footertop .navlist li a{color:#fff;}
.footertop .navlist li>a:before{background:#fff;}
.copyrights{border-top-color:rgb(255 255 255 / 28%);}
.copyrights p,.copyrights li,.copyrights a{color:#fff;}

/* Full-screen menu: navigation only */
.sitemenu-inner{grid-template-columns:1fr;max-width:1100px;}

/* Solution dropdown in the logo green */
.sitenav .nav-link:focus,.sitenav .nav-link:focus-visible,.sitenav .dropdown-toggle:focus{box-shadow:none !important;}
.sitenav .nav-link:focus-visible{outline:2px solid var(--sage-deep);outline-offset:4px;}
.sitenav .dropdown-menu{background:#587c5f;border:0;padding:.7rem 0;min-width:300px;box-shadow:0 22px 44px -22px rgb(20 40 28 / 55%);}
.sitenav .dropdown-item{color:rgb(255 255 255 / 90%);}
.sitenav .dropdown-item:hover,.sitenav .dropdown-item:focus{background:rgb(255 255 255 / 12%);color:#fff;}
.sitenav .dropdown-item.active{background:rgb(255 255 255 / 18%);color:#fff;box-shadow:inset 3px 0 0 #fff;}

/* First visit: logo intro (once per visit; skipped with reduced motion) */
.intro{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#fff;animation:intro-out .6s cubic-bezier(.65,0,.35,1) 1.5s forwards;pointer-events:none;}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.intro img{width:clamp(200px,24vw,300px);height:auto;clip-path:inset(0 100% 0 0);animation:intro-logo .9s cubic-bezier(.65,0,.35,1) .15s forwards;}
.intro-line{display:block;width:clamp(200px,24vw,300px);height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;animation:intro-line .8s cubic-bezier(.65,0,.35,1) .55s forwards;}
@keyframes intro-logo{to{clip-path:inset(0 0 0 0);}}
@keyframes intro-line{to{transform:scaleX(1);}}
@keyframes intro-out{to{opacity:0;visibility:hidden;}}
.no-intro .intro{display:none;}

/* Privacy and Terms: simple text header, no photo */
.sub-banner.is-plain{min-height:0;background:var(--paper);padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem) !important;border-bottom:1px solid var(--line);}
.sub-banner.is-plain::after{display:none;}
.sub-banner.is-plain .bannerlabel{color:var(--sage-deep);}
.sub-banner.is-plain .bannertitle{color:var(--ink);}
.sub-banner.is-plain .bannerpra p{color:var(--muted);}

/* Forms: required-field markers */
.themeform label .req{color:#b0413e;}
.themeform .form-note{margin:1.2rem 0 0;font-size:.8rem;color:var(--muted);}

/* Contact: map under the office address */
.map-frame{position:relative;margin-top:1.1rem;aspect-ratio:3/2;max-width:420px;background:var(--mist);border:1px solid var(--line);overflow:hidden;}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.map-open{display:inline-block;margin-top:.8rem;font-size:.85rem;color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;}
.map-open:hover{color:var(--ink);}

/* Lighter overlays so the photos keep their impact (text stays on the darker side) */
.nextsolution::after{background:linear-gradient(90deg,rgb(12 20 16 / 66%) 0%,rgb(12 20 16 / 28%) 45%,rgb(12 20 16 / 6%) 100%) !important;}
.whatwe:not(.team-band)::after{background:linear-gradient(180deg,rgb(12 20 16 / 60%) 0%,rgb(12 20 16 / 22%) 38%,rgb(12 20 16 / 4%) 100%) !important;}
.home-contact::after{background:linear-gradient(90deg,rgb(12 20 16 / 76%) 0%,rgb(12 20 16 / 34%) 70%);}

/* "Next" strip: whole strip is clickable */
.nextsolution.is-clickable{cursor:pointer;}
.nextsolution.is-clickable:hover .arrowbtn{background:#fff;color:var(--ink);}

/* WhatsApp chat button */
.wa-chat{position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:1040;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;box-shadow:0 10px 24px -8px rgb(0 0 0 / 45%);transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.wa-chat svg{width:30px;height:30px;}
.wa-chat:hover,.wa-chat:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -8px rgb(0 0 0 / 50%);}
body:has(.sitemenu.show) .wa-chat{opacity:0;pointer-events:none;}
@media print{ .wa-chat{display:none;} }

/* Visit-tracking notice (shown only when Clarity is switched on) */
.consent{position:fixed;left:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:1041;max-width:380px;padding:1.2rem 1.3rem;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -20px rgb(20 40 28 / 45%);}
.consent p{margin:0 0 1rem;font-size:.9rem;line-height:1.55;color:var(--ink-soft);}
.consent p a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;}
.consent-actions{display:flex;gap:.6rem;}
.consent-actions .themebtn,.consent-actions .btn-line{min-height:42px;padding:0 1.2rem;font-size:.72rem;}
@media (max-width:575px){ .consent{left:16px;right:88px;max-width:none;padding:1rem;} }

/* Header: links on the right; the menu icon is for phones/tablets only */
@media (min-width:992px){
  .sitenav-actions{display:none;}
  .sitenav .navbar-nav{margin-right:0;}
}

/* Spacing: no padding on top of the section padding (3.15) */
@media (min-width:1200px){
  main .py-xl-4,main .pt-xl-4{padding-top:0 !important;}
  main .py-xl-4,main .pb-xl-4,main .pb-xl-3{padding-bottom:0 !important;}
}
.scopeinfo{margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:clamp(1.5rem,2.5vw,2rem);}
.contact .scopeinfo{margin-top:0;padding-top:0;}
.home-solutions .solution-index{margin-bottom:0;}
.footertop{padding-top:clamp(2.75rem,4.5vw,4rem);}

/* Homepage: a white gap between the Track Record photo and the Get in Touch photo (3.20) */
.homepage>section.home-contact{margin-top:clamp(3rem,6vw,5rem);}


/* Company "What we are building toward" and Team "Our Team": heading left, box right.
   Box fills its column (right edge on the page's content edge), heading bottom lines up with the box bottom (3.23) */
.whatwe .whatwetext{margin:0 !important;max-width:none;}
.whatwe h3,.team-band h2{margin:0 !important;}
.whatwe:not(.team-band) h3{font-family:var(--f-display);font-weight:500;font-size:clamp(2.1rem,1.45rem + 2.4vw,3.5rem);line-height:1.08;color:#fff;}
.band-grid img{filter:grayscale(1) contrast(1.06);}

/* Phones: shorter banners so more of each photo shows (3.39). Laptops keep full-screen banners. */
@media (max-width:767px){
  .sub-banner:not(.is-plain):not(.team-mosaic){min-height:max(460px,60svh);}
  .hero{height:max(480px,64svh);min-height:0;}
  /* focus point per photo: the part that stays in frame */
  .sub-banner .bgimg[src$="site-company-banner.jpg"]{object-position:40% 50%;}
  .sub-banner .bgimg[src$="site-contact-banner.jpg"]{object-position:42% 50%;}
  .sub-banner .bgimg[src$="site-career-banner.jpg"]{object-position:28% 50%;}
  .sub-banner .bgimg[src$="bess-banner.jpg"]{object-position:42% 50%;}
  .sub-banner .bgimg[src$="t-and-d-banner.jpg"]{object-position:34% 50%;}
  .sub-banner .bgimg[src$="wind-banner.jpg"]{object-position:74% 50%;}
  .sub-banner .bgimg[src$="scada-ppc-and-ems-banner.jpg"]{object-position:38% 50%;}
  .sub-banner .bgimg[src$="site-projects-banner.jpg"]{object-position:45% 50%;}
  .sub-banner .bgimg[src$="site-land-banner.jpg"]{object-position:55% 50%;}
  .sub-banner .bgimg[src$="site-solar-banner.jpg"]{object-position:55% 50%;}
}

/* Phones: quick-contact bar at the bottom (3.39) */
.mobile-bar{display:none;}
@media (max-width:767px){
  .has-mobile-bar .wa-chat{display:none;}
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1040;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgb(0 0 0 / 25%);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;transform:translateY(110%);transition:transform .35s var(--ease);}
  .mobile-bar.is-shown{transform:none;}
  .mobile-bar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;font-family:var(--f-body);font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);text-decoration:none;}
  .mobile-bar a svg{width:18px;height:18px;color:var(--sage-deep);}
  .mobile-bar a.mobile-bar-main{flex:1.6 1 0;background:var(--sage-deep);border-color:var(--sage-deep);color:#fff;}
  .has-mobile-bar .footer{padding-bottom:70px;}
  body:has(.sitemenu.show) .mobile-bar{transform:translateY(110%);}
}

/* Homepage "Who we are": show the whole B Safal House photo (its own 5:7 shape), no crop (3.40) */
.home-intro .framed img{aspect-ratio:1400/1960;object-fit:cover;}
@media (max-width:991px){ .home-intro .framed img{aspect-ratio:1400/1960;max-width:520px;} }


/* 19-10-2026 */
@media (max-width:575px){
  .mobile-bar {gap: 4px;}
  .mobile-bar a{padding: 8px;}
}

@media (max-width:403px){
  .morenav{display: none; }
  .mobile-bar{padding-inline: 8px;}
  .mobile-bar a{gap: .25rem; padding: 7px; font-size: .75rem; min-height: 42px;}
}