/* ==========================================================================
   BRANDING DASK DESIGN SYSTEM (Pexnet engine)

   Colours and fonts are NOT set here. They come from
   Appearance > Theme Settings > Brand colours and fonts, printed as CSS
   variables in the page head. The values below are only the fallback for
   the moment before those load.

   Mobile first. Breakpoints: 768px tablet, 1200px laptop, 1600px desktop.
   ========================================================================== */

:root{
  --brand:#1c7844; --brand-ink:#1c7844; --on-brand:#fff;
  --brand-50:#f4f9f6; --brand-100:#e8f2ec; --brand-200:#c9e0d1;
  --accent:#b4e830; --on-accent:#0d3922; --accent-100:#f0fad6;
  --dark:#0d3922; --dark-2:#1b4a31; --dark-3:#2a5a40;
  --ink:#142418; --ink2:#2c3b30; --body:#445448; --mut:#5f6d62;
  --line:#e3ebe5; --line2:#d3ded6; --line3:#bccbc0;
  --panel:#f3f8f4; --panel2:#eaf3ed; --fill:#eef3ec; --card:#fff;
  --heading:#105834; --brand-deep:#144828; --tint:#e5f0e0; --tint-2:#eef3ec;
  --icon-bg:#e8f2ec; --dark-deep:#0a2e1b; --on-dark:#d9e6dc;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --headh:72px; --headh-s:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:#fff;font-family:var(--sans);color:var(--body);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:var(--brand-200);color:var(--ink)}
.navopen body{overflow:hidden}

/* --------------------------------------------------------- layout ------ */
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.sec{position:relative;padding:60px 0}
.sec.alt{background:var(--panel)}
.sec.dark{background:var(--dark);color:#c7ccda}
.sec.brandbg{background:var(--brand);color:var(--on-brand)}
.sec.alt + .sec.alt,.sec.dark + .sec.dark{padding-top:0}
.sec.hero{background:linear-gradient(180deg,var(--brand-50) 0%,#fff 100%);padding-top:44px}
.sec.hero.alt{background:var(--panel)}
.sec.hero.dark{background:var(--dark)}

/* ----------------------------------------------------- typography ------ */
h1,h2,h3,h4,.h-hero,.h-sec,.h-card,.h-sm{font-family:var(--head)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--brand-ink);letter-spacing:.01em}
.sec.dark .eyebrow{color:#fff}
.crumb{font-size:13px;color:var(--mut);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--body)}
.crumb a:hover{color:var(--brand-ink);text-decoration:underline}
.crumb .sep{opacity:.5}
.crumb + .eyebrow{display:flex;width:fit-content;max-width:100%}
.h-hero{font-size:36px;line-height:1.08;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin:14px 0 0;text-wrap:balance}
.h-sec{font-size:28px;line-height:1.15;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:10px 0 0;text-wrap:balance}
.h-card{font-size:19px;line-height:1.3;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
.h-sm{font-size:16px;font-weight:700;color:var(--ink);margin:0}
.lead{font-size:18px;line-height:1.6;color:var(--body);margin:16px 0 0;max-width:62ch}
.txt{font-size:16px;color:var(--body);margin:10px 0 0}
.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose a,.faqrow .a a,.txt a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cap{font-size:13.5px;color:var(--mut)}
.muted{color:var(--mut)}
.sec.dark .h-hero,.sec.dark .h-sec,.sec.dark .h-card,.sec.dark .h-sm{color:#fff}
.sec.dark .lead,.sec.dark .txt{color:#c7ccda}
.sec.dark .cap{color:#a3aabd}
.sec.dark .prose a,.sec.dark .txt a{color:#fff}
.linklike{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--brand-ink);margin-top:16px}
.linklike .arr{transition:transform .15s}
.sec.dark .linklike{color:#fff}

/* -------------------------------------------------------- buttons ------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand);font-size:16px;font-weight:700;border:1.5px solid var(--brand);cursor:pointer;font-family:inherit;text-align:center;line-height:1.2;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line3)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.sm{min-height:42px;padding:0 18px;font-size:15px}
.btn.wide{width:100%}
.sec.dark .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.sec.dark .btn:hover{filter:brightness(1.06)}
.sec.dark .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.sec.dark .btn.ghost:hover{border-color:#fff}
.btnrow{gap:12px}
.pill{display:inline-block;font-size:12.5px;font-weight:600;color:var(--brand-ink);background:var(--brand-100);border-radius:999px;padding:4px 11px}

/* The proof chip: the one element the whole brand leans on. */
.proofchip{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:14.5px;color:var(--ink2);box-shadow:0 1px 0 rgba(13,23,51,.04)}
.proofchip strong{color:var(--ink)}
.proofchip .stars{color:var(--accent);font-size:15px;letter-spacing:1px}
.proofchip:hover{border-color:var(--brand)}
.sec.dark .proofchip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#dfe3ec}
.sec.dark .proofchip strong{color:#fff}

/* ---------------------------------------------------------- media ------ */
.iconbox{width:50px;height:50px;border-radius:14px;background:var(--brand-100);color:var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.iconbox img{width:26px;height:26px;object-fit:contain}
.iconbox .glyph{width:25px;height:25px}
.sec.dark .iconbox{background:rgba(255,255,255,.08);color:#fff}
.media{position:relative;background:var(--fill);border-radius:var(--r-lg);overflow:hidden;min-height:100px}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.natural{background:none;min-height:0;border-radius:var(--r-lg)}
.media.natural img{height:auto;object-fit:contain;margin:0 auto}
.sec.dark .media{background:var(--dark-2)}

/* ---------------------------------------------------------- cards ------ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.card > .iconbox + .h-card,.card > .cardnum + .h-card{margin-top:18px}
.card.hi{border:2px solid var(--brand)}
.card.pad0{padding:0;overflow:hidden}
.sec.alt .card{border-color:var(--line)}
.sec.dark .card{background:var(--dark-2);border-color:var(--dark-3)}
.card-link{display:block;color:inherit;transition:border-color .15s}
a.card-link:hover{border-color:var(--brand)}
a.card-link:hover .arr{transform:translateX(3px)}
.sec.dark a.card-link:hover{border-color:rgba(255,255,255,.4)}
.cards-flat .card{border:0;background:transparent;padding:0}
.sec.alt .cards-flat .card,.sec.dark .cards-flat .card{background:transparent}
.cardnum{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--brand);color:var(--on-brand);font-weight:800;font-family:var(--head)}
.card-no{background:var(--panel)}
.card-no .tick{color:#b4232c}
.sec.dark .card-no{background:transparent}

/* ---------------------------------------------------------- lists ------ */
.list{margin:18px 0 0;padding:0;list-style:none}
.list li{display:flex;align-items:flex-start;gap:11px;font-size:16px;color:var(--body);margin-top:11px}
.tick{color:var(--brand);flex:none;margin-top:5px;width:16px;height:16px}
.sec.dark .list li{color:#dfe3ec}
.sec.dark .tick{color:var(--accent)}
.checkitem{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--body);margin-top:11px}
.addonrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.addonrow:first-child{border-top:0;padding-top:0}

/* ------------------------------------------------------ utilities ------ */
.center{text-align:center}
.mauto{margin-left:auto;margin-right:auto}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.row.top{align-items:flex-start}
.row.center,.center .btnrow{justify-content:center}
.between{justify-content:space-between}
.wrap-head{max-width:720px}
.wrap-head.center{max-width:760px}
.mt10{margin-top:10px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mt24{margin-top:24px}.mt28{margin-top:28px}.mt32{margin-top:32px}.mt40{margin-top:40px}

/* ---------------------------------------------------------- grids ------ */
.grid{display:grid;gap:20px;grid-template-columns:1fr}
.split{display:grid;gap:36px;grid-template-columns:1fr}
.split.top{align-items:start}
.split.rev .media{order:-1}
.grid.m2{grid-template-columns:1fr 1fr}
.grid.m3{grid-template-columns:repeat(3,1fr)}

/* ---------------------------------------------------------- stats ------ */
.stat{text-align:center}
.stat .num{font-family:var(--head);font-size:34px;font-weight:800;color:var(--brand-ink);line-height:1;letter-spacing:-.02em}
.sec.dark .stat .num{color:#fff}
.stat .lbl{font-size:14px;color:var(--mut);margin-top:8px}
.sec.dark .stat .lbl{color:#a3aabd}
a.stat:hover .num{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------------------------------------------------------- steps ------ */
.step .badge{width:44px;height:44px;border-radius:12px;background:var(--brand-100);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;margin-bottom:16px;font-family:var(--head)}
.sec.dark .step .badge{background:var(--accent);color:var(--on-accent)}

/* --------------------------------------------------- testimonials ------ */
.stars{display:flex;gap:2px;color:var(--accent);font-size:17px;line-height:1;letter-spacing:1px}
.review blockquote{font-size:16.5px;color:var(--ink2)}
.sec.dark .review blockquote{color:#e6e9f0}
.tavatar{display:flex;align-items:center;gap:12px;margin-top:20px}
.av{width:44px;height:44px;border-radius:50%;background:var(--brand-100);overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center}
.av img{width:100%;height:100%;object-fit:cover}
.avi{font-weight:800;color:var(--brand-ink);font-family:var(--head)}
.tavatar a.h-sm:hover{color:var(--brand-ink)}

/* ------------------------------------------------------------ faq ------ */
.faq{max-width:840px;margin:28px auto 0}
.faqrow{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 20px;margin-top:12px}
.faqrow summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;color:var(--ink);font-size:16.5px;cursor:pointer;list-style:none;padding:18px 0;font-family:var(--head)}
.faqrow summary::-webkit-details-marker{display:none}
.faqrow summary::after{content:"+";font-weight:500;font-size:22px;color:var(--brand-ink);flex:none;line-height:1}
.faqrow[open] summary::after{content:"\2212"}
.faqrow .a{font-size:16px;color:var(--body);padding:0 0 18px;margin-top:-4px}
.faqrow .a p{margin:0 0 10px}
.faqrow[open]{border-color:var(--brand-200)}
.sec.alt .faqrow{border-color:var(--line)}
.sec.dark .faqrow{background:var(--dark-2);border-color:var(--dark-3)}
.sec.dark .faqrow summary{color:#fff}

/* ----------------------------------------------------------- form ------ */
.formcard{padding:28px;border-color:var(--line2);box-shadow:0 18px 40px -24px rgba(13,23,51,.25)}
.fieldrow{display:grid;gap:0 14px;grid-template-columns:1fr}
.field{margin-top:14px}
.field label{display:block;font-size:14px;color:var(--ink2);font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--line2);border-radius:10px;background:#fff;padding:12px 14px;color:var(--ink);font-size:16px;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
.field textarea{min-height:120px;resize:vertical}
.subrow{display:flex;gap:12px;flex-direction:column;margin-top:18px}
.subrow input{flex:1;min-height:50px;border:1px solid var(--line2);border-radius:10px;padding:0 14px;font-size:16px;font-family:inherit}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 16px;border-radius:10px;font-size:15px;margin:0 0 14px}
.notice.ok{background:#e8f6ee;color:#185c32}
.notice.bad{background:#fdecec;color:#8a1f1f}
.details .detail{margin-top:18px}
.details .detail:first-child{margin-top:0}
.details a.h-sm:hover{color:var(--brand-ink)}

/* --------------------------------------------------------- header ------ */
.stickyhead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.stickyhead.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(13,23,51,.35)}
.admin-bar .stickyhead{top:32px}
@media (max-width:782px){.admin-bar .stickyhead{top:0}}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--headh);gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:18px;font-family:var(--head);flex:none}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.logo img{max-height:52px;height:auto;max-width:44vw}
.mainnav{display:none}
.navlinks{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.navlinks > li{position:relative;display:flex;align-items:center}
.navlinks > li > a{display:block;padding:10px 12px;font-size:15.5px;font-weight:600;color:var(--ink2);border-radius:8px}
.navlinks > li > a:hover,.navlinks > li.current-menu-item > a,.navlinks > li.current-menu-ancestor > a,.navlinks > li.current-page-ancestor > a{color:var(--brand-ink)}
.navlinks > li.menu-item-has-children > a{padding-right:2px}
.subtoggle{border:0;background:none;padding:6px;margin-right:4px;color:var(--mut);cursor:pointer;display:flex;border-radius:6px}
.subtoggle svg{width:16px;height:16px;transition:transform .15s}
.navlinks .sub-menu{position:absolute;top:100%;left:0;min-width:250px;list-style:none;margin:0;padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 48px -20px rgba(13,23,51,.3);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:70}
.navlinks > li:hover > .sub-menu,.navlinks > li:focus-within > .sub-menu,.navlinks > li.is-open > .sub-menu{opacity:1;visibility:visible;transform:none}
.navlinks > li:hover .subtoggle svg,.navlinks > li.is-open .subtoggle svg{transform:rotate(180deg)}
.navlinks > li.wide > .sub-menu{display:grid;grid-template-columns:1fr 1fr;width:580px;gap:2px}
.navlinks .sub-menu a{display:block;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink)}
.navlinks .sub-menu a:hover{background:var(--brand-50);color:var(--brand-ink)}
.mdesc{display:block;font-size:13px;font-weight:400;color:var(--mut);margin-top:2px;line-height:1.4}
.navend{display:flex;align-items:center;gap:10px}
.navcta{display:none}
.burger{width:46px;height:46px;border:1px solid var(--line2);border-radius:12px;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;flex:none}
.burger i{width:19px;height:2px;background:var(--ink);border-radius:2px;display:block;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line);padding:8px 0 22px;max-height:calc(100vh - 80px);overflow-y:auto}
.mobnav.open{display:block}
.mobnav ul{list-style:none;margin:0;padding:0}
.moblist > li{border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center}
.moblist > li > a{flex:1;display:block;padding:14px 0;font-size:17px;font-weight:600;color:var(--ink)}
.moblist .subtoggle{padding:12px;margin:0}
.moblist .sub-menu{display:none;width:100%;padding:0 0 12px 12px}
.moblist li.is-open > .sub-menu{display:block}
.moblist li.is-open .subtoggle svg{transform:rotate(180deg)}
.moblist .sub-menu a{display:block;padding:9px 0;font-size:15.5px;color:var(--body)}
.moblist .mdesc{display:none}
.mobnav > .btn{margin-top:18px;width:100%}

/* --------------------------------------------------------- footer ------ */
.sitefoot{padding-bottom:28px}
.footcta{display:flex;flex-direction:column;gap:18px;justify-content:space-between;padding:26px;border-radius:var(--r-md);background:var(--dark-2);margin-bottom:48px}
.footgrid{display:grid;gap:36px;grid-template-columns:1fr}
.footabout .logo img.onwhite{background:#fff;padding:8px 12px;border-radius:12px;box-sizing:content-box}
.footcontact{margin-top:18px;display:grid;gap:10px}
.footcontact a,.footcontact address{display:flex;gap:10px;align-items:flex-start;font-style:normal;font-size:15px;color:#c7ccda}
.footcontact a:hover{color:#fff}
.footcontact .glyph{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
.footlinks{display:grid;gap:28px;grid-template-columns:1fr 1fr}
.footcol h2{font-size:15px;font-weight:700;color:#fff;margin:0 0 12px}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol a{display:block;font-size:15px;color:#aeb5c7;padding:5px 0}
.footcol a:hover{color:#fff}
.footbottom{border-top:1px solid var(--dark-3);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:#8e96ab}
.footbottom ul{list-style:none;margin:0;padding:0;gap:18px}
.footbottom a:hover{color:#fff}
.social{display:flex;gap:8px;margin:20px 0 0;list-style:none;padding:0}
.social a{width:40px;height:40px;border-radius:10px;border:1px solid var(--dark-3);display:flex;align-items:center;justify-content:center;color:#dfe3ec}
.social a:hover{border-color:#fff;color:#fff}
.social img{width:18px;height:18px}

/* ------------------------------------------------ whatsapp float ------ */
.wafloat{position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.wafloat svg{width:30px;height:30px}
.wafloat:hover{filter:brightness(1.05)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:200;background:#fff;padding:10px 14px;border-radius:8px}

/* ------------------------------------------------------ blog list ------ */
.postgrid .card h2,.postgrid .card h3{font-size:19px}
.postmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pagination{display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.page-numbers{min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink)}
.page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
a.page-numbers:hover{border-color:var(--brand)}
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.catbar a{padding:8px 14px;border:1px solid var(--line2);border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink2);background:#fff}
.catbar a.on,.catbar a:hover{border-color:var(--brand);color:var(--brand-ink)}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width:767px){
  .grid.m2{gap:12px}
  .grid.m3{gap:10px}
  .grid.m2 > .card{padding:18px 14px}
  .grid.m3 > .card{padding:12px 8px}
  .grid.m2 .stat .num{font-size:26px}
  .grid.m2 .stat .lbl{font-size:13px}
  .m-center .card,.m-center .step{text-align:center}
  .m-center .iconbox,.m-center .step .badge{margin-left:auto;margin-right:auto}
  .btnrow .btn{flex:1 1 100%}
  .wafloat{right:14px;bottom:14px;width:52px;height:52px}
}

@media (min-width:768px){
  .container{padding:0 40px}
  .sec{padding:84px 0}
  .sec.hero{padding-top:60px}
  .burger{display:none}
  .mobnav{display:none !important}
  .navcta{display:inline-flex}
  .h-hero{font-size:48px}
  .h-sec{font-size:36px}
  .grid.cols2{grid-template-columns:1fr 1fr}
  .grid.cols3{grid-template-columns:1fr 1fr}
  .grid.cols4{grid-template-columns:1fr 1fr}
  .grid.cols6{grid-template-columns:repeat(3,1fr)}
  .grid.steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr 1fr;align-items:center;gap:56px}
  .subrow{flex-direction:row}
  .fieldrow{grid-template-columns:1fr 1fr}
  .footlinks{grid-template-columns:repeat(4,1fr)}
  .footcta{flex-direction:row;align-items:center}
  .formcard{padding:34px}
}

/* The desktop menu needs room for seven links plus the button. */
@media (min-width:1080px){
  .mainnav{display:flex;flex:1;justify-content:center}
}
@media (max-width:1079px){
  .burger{display:flex}
  .mobnav.open{display:block !important}
  .navcta{display:none}
}
@media (min-width:768px) and (max-width:1079px){
  .navend .navcta{display:inline-flex}
}

@media (min-width:1200px){
  .container{padding:0 56px}
  .sec{padding:100px 0}
  .sec.hero{padding-top:72px}
  .h-hero{font-size:58px}
  .h-sec{font-size:40px}
  .grid.cols3{grid-template-columns:repeat(3,1fr)}
  .grid.cols4{grid-template-columns:repeat(4,1fr)}
  .grid.cols6{grid-template-columns:repeat(6,1fr)}
  .grid.steps{grid-template-columns:repeat(3,1fr)}
  .grid.steps.n4{grid-template-columns:repeat(4,1fr)}
  .split.hero{grid-template-columns:1.08fr .92fr;gap:64px}
  .footgrid{grid-template-columns:1.3fr 2fr;gap:56px}
  .grid{gap:24px}
}

@media (min-width:1600px){ .sec{padding:112px 0} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* Text section without an image: one comfortable reading column. */
.solo{max-width:780px}
.solo .list{columns:1}
@media (min-width:768px){.solo .grid.cols3{grid-template-columns:repeat(3,1fr)}}
.anchor{display:block;position:relative;top:calc(-1 * (var(--headh) + 24px));visibility:hidden}
.h-sec.h-first{font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.025em}
.sitefoot{border-top:1px solid var(--dark-3)}

/* Linked cards: equal height, link text pinned to the bottom edge. */
.card.card-link{display:flex;flex-direction:column}
.card.card-link .linklike{margin-top:auto;padding-top:14px}
.navopen .wafloat{display:none}
@media print{.wafloat,.site-header,.stickyhead{display:none}}
/* Hero with no image: one readable column instead of an empty right half. */
.split.hero.noimg{grid-template-columns:1fr !important;max-width:860px}
/* Contact detail rows: icon stays beside its text even when the text wraps. */
.row.detail{flex-wrap:nowrap}
.row.detail > div{flex:1;min-width:0}
.row.detail .h-sm{overflow-wrap:anywhere}
.postgrid .card-link .pbody{display:flex;flex-direction:column;flex:1;align-items:flex-start}
.postgrid .card-link .pbody .linklike{margin-top:auto}

/* ==========================================================================
   SECTIONS ADDED IN 2.1 (tabs, video, timeline, tables, badges and more)
   ========================================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec.tight{padding-top:28px;padding-bottom:28px}

/* Tabs */
.tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tablist [role=tab]{font:inherit;font-weight:700;font-size:15px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.tablist [role=tab][aria-selected=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tablist [role=tab]:focus-visible{outline:3px solid var(--brand-200);outline-offset:2px}
.tabpanel[hidden]{display:none}
.tabpanel .split{align-items:center}

/* Lite video: nothing loads from YouTube until the visitor presses play */
.videobox{max-width:900px;margin-left:auto;margin-right:auto}
.litevid{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--dark);cursor:pointer}
.litevid img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.litevid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .15s}
.playbtn svg{width:34px;height:34px;margin-left:4px}
.litevid:hover .playbtn{transform:translate(-50%,-50%) scale(1.06)}

/* Timeline */
.timeline{list-style:none;margin-left:0;padding-left:0;position:relative;max-width:820px}
.timeline:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--brand-200)}
.timeline li{position:relative;padding:0 0 30px 40px}
.timeline li:last-child{padding-bottom:0}
.tdot{position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--card);border:4px solid var(--brand)}

/* Data and comparison tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.datatable{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.datatable th,.datatable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.datatable thead th{background:var(--dark);color:#fff;font-weight:700}
.datatable tbody th{color:var(--ink);font-weight:700}
.datatable tbody tr:nth-child(even){background:var(--brand-50)}
.datatable tr:last-child th,.datatable tr:last-child td{border-bottom:0}

/* Before and after slider */
.ba{position:relative;max-width:980px;margin-left:auto;margin-right:auto;border-radius:var(--r-lg);overflow:hidden;--pos:50%}
.ba img{display:block;width:100%;height:auto}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-before img{width:100%;height:100%;object-fit:cover}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba-line:after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba-tag{position:absolute;top:14px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:700}
.ba-l{left:14px}.ba-r{right:14px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba figcaption{position:static}

/* Review badges */
.badgerow{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.ratebadge{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:200px;text-align:center;color:inherit}
a.ratebadge:hover{border-color:var(--brand)}
.rblogo{width:40px;height:40px;object-fit:contain}
.rbname{font-weight:700;color:var(--ink)}
.rbscore{font-family:var(--head);font-size:26px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.rbscore .stars{font-size:15px}

/* Notice box */
.noticebox{display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:var(--r-md);border:1px solid var(--brand-200);background:var(--brand-50)}
.noticebox .nbbody{flex:1;min-width:0}
.noticebox .h-card{margin-bottom:4px}
.nb-warn{background:#fff8e6;border-color:#f4d58d}
.nb-success{background:#ecfdf3;border-color:#a6e4bf}
.nb-dark{background:var(--dark);border-color:var(--dark);color:#e6e9f0}
.nb-dark .h-card{color:#fff}
@media (max-width:640px){.noticebox{flex-direction:column;align-items:flex-start}}

/* Ticker */
.ticker{overflow:hidden;background:var(--dark);color:#fff;padding:16px 0;font-weight:700;font-size:17px}
.ticker.brand{background:var(--brand);color:var(--on-brand)}
.ticker.alt{background:var(--brand-50);color:var(--ink)}
.tickertrack{display:flex;width:max-content;animation:bdtick 38s linear infinite}
.sp-slow .tickertrack{animation-duration:60s}.sp-fast .tickertrack{animation-duration:22s}
.tickerrun{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap}
.tickerrun i{font-style:normal;opacity:.6}
.ticker:hover .tickertrack{animation-play-state:paused}
@keyframes bdtick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tickertrack{animation:none;flex-wrap:wrap;width:auto}.tickerrun+.tickerrun{display:none}.tickerrun{white-space:normal;flex-wrap:wrap;justify-content:center;padding:0 20px}}

/* Accordion reuses the FAQ look */
.accordion .faqrow{margin-bottom:10px}

/* Contact cards */
.contactcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.contactcard .h-sm{overflow-wrap:anywhere}

/* Team */
.person{display:flex;flex-direction:column;align-items:center}
.pphoto{width:112px;height:112px;border-radius:50%;object-fit:cover;background:var(--brand-100)}
.pphoto.initials{display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:var(--brand-ink)}
.person .linklike{margin-top:auto;padding-top:12px}

/* Zigzag rows */
.zig .zigh{font-size:clamp(24px,2.6vw,32px)}
.zig .txt p{margin-bottom:12px}

/* Map */
.mapsplit{align-items:center}
.mapframe{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--brand-50)}
.mapframe iframe{width:100%;height:100%;border:0;display:block}

/* Numbered list */
.numlist{list-style:none;margin-left:0;padding-left:0}
.numlist li{display:flex;gap:16px;align-items:flex-start}
.numbig{font-family:var(--head);font-size:34px;line-height:1;font-weight:800;color:var(--brand-ink);min-width:48px}

/* Quote banner */
.quoteband blockquote{max-width:880px;margin:0 auto}
.bigquote{font-family:var(--head);font-size:clamp(22px,3vw,34px);line-height:1.35;font-weight:700;color:inherit}
.qphoto{width:52px;height:52px;border-radius:50%;object-fit:cover}
.quoteband cite{font-style:normal}
.sec.brand .quoteband a,.quoteband.brand a{color:inherit}

/* Tag cloud and jump links */
.tagcloud,.jumplinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tagcloud.center{justify-content:center}
.chip{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;font-weight:600}
a.chip:hover{border-color:var(--brand);color:var(--brand-ink)}
.jumplinks{padding:14px 0;border-bottom:1px solid var(--line);background:var(--card)}
.jumplinks .container{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.jumplinks.sticky{position:sticky;top:var(--headh-s);z-index:40}
@media (max-width:760px){.jumplinks ul{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.jumplinks .chip{white-space:nowrap}}

/* Gallery */
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;border-radius:var(--r-md);display:block}
.gallery.crop img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{margin-top:6px}

/* Image banner */
.imgbanner{margin-top:0;margin-bottom:0}
.imgbanner img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.bannerfull img{border-radius:0}

/* Embed box */
.embedbox{max-width:100%;overflow:hidden}
.embedbox.narrow{max-width:760px}
.embedbox iframe{max-width:100%;border:0}
.embedfull{padding:0}

/* Split CTA, page header, hero with form, audit bar */
.ctasplit .split{align-items:center}
.pagehead{padding-bottom:40px}
.pagehead.center .wrap-crumb,.pagehead.center .crumbs{justify-content:center}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:0 24px 50px -30px rgba(11,36,71,.35)}
.auditform{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:860px;margin-left:auto;margin-right:auto}
.auditform input{flex:1 1 200px;min-width:0;padding:14px 16px;border-radius:var(--r-sm,10px);border:1px solid var(--line);font:inherit;font-size:16px;background:#fff;color:#111827}
.auditform .btn{flex:0 0 auto}
.auditbar .notice{max-width:760px;margin-left:auto;margin-right:auto}
.notice.err{background:#fdecec;color:#8a1f1f}
.faq.accordion{margin-left:0;margin-right:0}

/* Brand-coloured bands: text follows --on-brand (dark on orange/yellow,
   white on blue/green), and the button turns dark so it never melts into
   the background when accent and brand are the same colour. */
.sec.brandbg .eyebrow,.sec.brandbg .h-hero,.sec.brandbg .h-sec,.sec.brandbg .h-card,.sec.brandbg .h-sm,.sec.brandbg .lead,.sec.brandbg .txt,.sec.brandbg .cap,.sec.brandbg .linklike,.sec.brandbg .list li{color:var(--on-brand)}
.sec.brandbg .btn{background:var(--dark);color:#fff;border-color:var(--dark)}
.sec.brandbg .btn.ghost{background:transparent;color:var(--on-brand);border-color:currentColor}
.sec.brandbg .tick{color:var(--on-brand)}
.sec.brandbg .card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.sec.brandbg .proofchip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:var(--on-brand)}
.sec.brandbg .proofchip strong{color:var(--on-brand)}
.grid.cols1{grid-template-columns:minmax(0,440px)!important;justify-content:center}

/* ==========================================================================
   BRANDING DASK LIVE SKIN (2.2.0)
   Matches brandingdask.com.bd: forest and leaf green, lime rings on
   buttons, Fraunces headings, Plus Jakarta Sans text, green washes
   between sections. Colours come from the variables printed by
   inc/brand.php, so Theme Settings still controls them.
   ========================================================================== */

/* ---------------------------------------------------- base type ------ */
body{color:var(--body)}
.h-hero,.h-sec{color:var(--heading);font-weight:700;letter-spacing:-.01em}
.h-hero{line-height:1.1}
.h-sec{line-height:1.15}
.h-card,.h-sm,.faqrow summary{font-family:var(--sans)}
.h-card{color:var(--ink);font-weight:700;font-size:18.5px}
.lead{color:var(--body)}

/* Eyebrow: plain small label, no dash in front */
.eyebrow{display:inline-block;gap:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.sec.dark .eyebrow{color:var(--accent)}
.sec.brandbg .eyebrow{color:var(--on-brand)}
/* Hero eyebrow: dark green pill with a lime ring */
.eyebrow.herobrow{padding:6px 14px;border-radius:999px;background:var(--heading);color:#fff;border:2px solid var(--accent);font-size:12px;letter-spacing:.06em;line-height:1.3}

/* Every section heading block is centred */
.wrap-head.center{text-align:center;margin-left:auto;margin-right:auto}
.wrap-head.center .lead{margin-left:auto;margin-right:auto}
.btnrow.center{justify-content:center}

/* ------------------------------------------------------- buttons ------ */
.btn{border-radius:999px;background:var(--brand);color:#fff;border:2px solid var(--accent);font-weight:700;box-shadow:0 8px 18px -10px rgba(13,57,34,.6);transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--heading);border-color:var(--accent);color:#fff;box-shadow:0 10px 22px -10px rgba(13,57,34,.7)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--brand);box-shadow:0 8px 18px -12px rgba(13,57,34,.5)}
.btn.ghost:hover{background:var(--icon-bg);color:var(--heading);border-color:var(--brand)}
.sec.hero .btn:not(.ghost){background:var(--brand-deep)}
.sec.hero .btn:not(.ghost):hover{background:var(--heading)}
.navcta.btn,.mobnav > .btn{border-color:var(--brand)}
.sec.dark .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.sec.dark .btn:hover{filter:none;background:#c4f04a;border-color:#c4f04a;color:var(--on-accent)}
.sec.dark .btn.ghost{background:#fff;color:var(--ink);border-color:#fff}
.sec.dark .btn.ghost:hover{background:var(--icon-bg);border-color:var(--icon-bg);color:var(--heading)}
.sec.brandbg .btn{background:var(--dark);color:#fff;border-color:var(--accent)}

/* Card link text becomes the green pill button used on the live site */
.card-link .linklike{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 20px;border-radius:999px;background:var(--brand);color:#fff;border:2px solid var(--accent);font-size:14.5px;font-weight:700;box-shadow:0 8px 16px -10px rgba(13,57,34,.6);transition:background .15s}
.card-link .linklike .arr{display:none}
a.card-link:hover .linklike{background:var(--heading)}
.sec.dark .card-link .linklike{background:var(--accent);color:var(--on-accent)}

/* ------------------------------------------------ backgrounds ------ */
.sec.alt{background:var(--tint)}
.sec.soft{background:var(--tint-2)}
.sec.hero{background:var(--tint-2)}
.sec.hero.alt{background:var(--tint)}
.sec.dark,.sec.hero.dark{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--on-dark)}
.sec.brandbg{background:var(--brand)}
.sec.soft + .sec.soft{padding-top:0}
.sec.dark .lead,.sec.dark .txt{color:var(--on-dark)}
.sec.dark .cap{color:#a9c2b0}

/* -------------------------------------------------------- header ------ */
.stickyhead{background:rgba(255,255,255,.97)}
.logo{color:var(--heading)}
.navlinks > li > a{font-weight:500;color:var(--ink)}
.navlinks > li > a:hover,.navlinks > li.current-menu-item > a,.navlinks > li.current-menu-ancestor > a,.navlinks > li.current-page-ancestor > a{color:var(--brand)}
.navlinks .sub-menu a:hover{background:var(--icon-bg);color:var(--heading)}
.moblist > li > a{color:var(--ink)}

/* -------------------------------------------------------- media ------ */
.sec.hero .media{border-radius:16px;box-shadow:0 24px 50px -28px rgba(13,57,34,.6)}
.sec:not(.hero) .split > .media:not(.natural){border:2px solid var(--brand);border-radius:12px}

/* --------------------------------------------------------- cards ------ */
.card{border:1px solid rgba(13,57,34,.07);border-radius:16px;box-shadow:0 12px 30px -20px rgba(13,57,34,.4)}
.sec.alt .card,.sec.soft .card{border-color:rgba(13,57,34,.05)}
.cards-flat .card,.sec.alt .cards-flat .card{background:var(--card);border:1px solid rgba(13,57,34,.07);padding:26px}
.sec.dark .cards-flat .card{background:rgba(255,255,255,.05)}
a.card-link:hover{border-color:var(--brand)}
.iconbox{background:var(--icon-bg);color:var(--brand);border-radius:10px}
.sec.dark .iconbox{background:rgba(180,232,48,.12);color:var(--accent)}
.card.hi{border:2px solid var(--brand)}
.cardnum{background:var(--brand);border:2px solid var(--accent);border-radius:10px}
.pill{background:var(--icon-bg);color:var(--heading)}

/* Cards and their icons sit in the middle */
.grid > .card,.grid > .step,.grid > .person{text-align:center}
.grid > .card > .iconbox,.grid > .card > .cardnum,.grid > .step > .badge{margin-left:auto;margin-right:auto}
.grid > .card .list,.grid > .card .checkitem{text-align:left}
.grid > .card .list{display:inline-block}
.grid > .card .tavatar{justify-content:center;text-align:left}
.grid > .card .stars{justify-content:center}
.grid.postcards > .card{text-align:left}

/* --------------------------------------------------------- stats ------ */
.stat .num{color:var(--heading);font-weight:700}
.sec.dark .stat.card{background:transparent;border:2px solid rgba(255,255,255,.8);border-radius:4px;box-shadow:none}
.sec.dark .stat .num{color:#fff}
.sec.dark .stat .lbl{color:#fff;opacity:.9}

/* --------------------------------------------------------- steps ------ */
.step.card{position:relative;background:var(--tint-2);border:2px solid rgba(28,120,68,.35);box-shadow:0 10px 22px -14px rgba(13,57,34,.55)}
.sec:not(.alt) .step.card{background:#fff}
.step .badge{width:auto;min-width:48px;height:42px;padding:0 10px;border:2px solid var(--brand);background:transparent;color:var(--heading);border-radius:3px;font-family:var(--head);font-weight:700;font-size:20px}
.sec.dark .step .badge{background:transparent;border-color:var(--accent);color:var(--accent)}
/* Arrows between process cards, like the live site */
.grid.steps > .step::after{content:none;position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;background:var(--brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.sec.dark .grid.steps > .step::after{background:var(--accent)}
@media (min-width:768px) and (max-width:1199px){
  .grid.steps{column-gap:64px}
  .grid.steps > .step:nth-child(2n+1):not(:last-child)::after{content:"";right:-49px}
}
@media (min-width:1200px){
  .grid.steps{column-gap:72px}
  .grid.steps:not(.n4) > .step:not(:nth-child(3n)):not(:last-child)::after,
  .grid.steps.n4 > .step:not(:nth-child(4n)):not(:last-child)::after{content:"";right:-53px}
}

/* -------------------------------------------------- testimonials ------ */
.stars,.proofchip .stars{color:#e0457b}
.sec.dark .stars,.sec.dark .proofchip .stars{color:var(--accent)}
.review blockquote{font-family:var(--head);font-weight:600;font-size:18px;line-height:1.45;color:var(--heading)}
.sec.dark .review blockquote{color:#fff}
.sec.dark .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none}
.av{width:60px;height:60px;border-radius:6px;border:2px solid var(--accent);background:var(--icon-bg)}
.sec.dark .tavatar .h-sm{color:#fff}
.sec.dark .tavatar .cap{color:#a9c2b0}
.proofchip{border-color:var(--line2)}
.proofchip:hover{border-color:var(--brand)}

/* Logo wall on a dark band: white tiles with a lime hairline */
.sec.dark .grid.cols6 > .card{background:#fff;border:1px solid var(--accent);border-radius:6px}

/* ------------------------------------------------------------ faq ------ */
.faq{padding:8px;border-radius:10px;background:linear-gradient(180deg,var(--heading) 0%,var(--brand) 60%,#8cc63f 100%)}
.faqrow{background:#f1f3f0;border:2px solid var(--accent);border-radius:8px;margin-top:8px;padding:0 18px}
.faqrow:first-child{margin-top:0}
.faqrow[open]{border-color:var(--accent);background:#fff}
.faqrow summary{justify-content:flex-start;gap:14px;color:var(--heading);font-size:15.5px;font-weight:700}
.faqrow summary::before{content:"+";flex:none;width:16px;font-size:22px;font-weight:700;line-height:1;color:var(--heading)}
.faqrow[open] summary::before{content:"\2212"}
.faqrow summary::after,.faqrow[open] summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--heading);border-bottom:2px solid var(--heading);transform:rotate(-45deg);transition:transform .15s}
.faqrow[open] summary::after{transform:rotate(45deg)}
.faqrow .a{padding-left:30px;text-align:left}
.sec.dark .faqrow{background:#f1f3f0}
.sec.dark .faqrow summary{color:var(--heading)}

/* ------------------------------------------------------ blog cards ------ */
.grid.postcards{gap:12px;padding:10px;border-radius:14px;background:linear-gradient(135deg,var(--dark),var(--dark-deep));box-shadow:0 22px 44px -24px rgba(13,57,34,.7)}
.postcards .card{border:0;border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.postcards .h-card{font-family:var(--head);color:var(--ink);font-size:19px}
.postcards .pill{display:none}
.readmore{display:block;margin-top:8px;font-weight:700;color:var(--brand)}
.postgrid .card-link .linklike{align-self:flex-start}

/* ----------------------------------------------- CTA as a dark box ------ */
.sec.ctaband{background:var(--tint-2);color:var(--body);padding-top:56px;padding-bottom:56px}
.ctabox{max-width:1180px;margin:0 auto;padding:48px 22px;border-radius:24px;background:linear-gradient(135deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--on-dark);box-shadow:0 30px 60px -34px rgba(13,57,34,.8)}
.ctabox .h-sec{color:#fff}
.ctabox .lead,.ctabox .txt{color:var(--on-dark)}
.ctabox .eyebrow{color:var(--accent)}
.ctabox .cap{color:#a9c2b0}
.ctabox .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ctabox .btn.ghost{background:#fff;color:var(--ink);border-color:#fff}
@media (min-width:768px){.ctabox{padding:64px 48px}}

/* -------------------------------------------------------- footer ------ */
.sitefoot{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-deep) 100%);border-top:0}
.sitefoot .txt{color:var(--on-dark)}
.footcta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.footcta .h-card{font-family:var(--head);color:#fff}
.footcol h2{font-family:var(--head);font-size:16px}
.footcol a{color:#c9dccd}
.footcontact a,.footcontact address{color:#c9dccd}
.footcontact .glyph{color:var(--accent)}
.social a{border:0;background:rgba(255,255,255,.08);color:#fff}
.social a:hover{background:var(--brand)}
.footbottom{border-top-color:rgba(255,255,255,.1);color:#a9c2b0}
.footabout .logo span{font-family:var(--head)}

/* Forms and small bits in the brand colours */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--icon-bg)}
.page-numbers.current{background:var(--brand);border-color:var(--brand)}
.tablist [role=tab][aria-selected=true]{background:var(--brand);border-color:var(--brand)}
.datatable thead th{background:var(--dark)}
.datatable tbody tr:nth-child(even){background:var(--tint-2)}
::selection{background:var(--accent);color:var(--dark)}
:focus-visible{outline-color:var(--brand)}

/* ==========================================================================
   ALIGNMENT
   Headings, short descriptions, buttons and icons are centred everywhere.
   Desktop only: a text column that sits beside an image stays left, as on
   the live site. Phones and tablets: everything is centred.
   ========================================================================== */
.solo{margin-left:auto;margin-right:auto;text-align:center}
.solo .list{display:inline-block;text-align:left}
.solo .btnrow{justify-content:center}

@media (max-width:767px){
  .split > div{text-align:center}
  .split > div > .wrap-head,.split > div > .lead,.split > div > .txt{margin-left:auto;margin-right:auto}
  .split .btnrow,.split .row.center{justify-content:center}
  .split > div > .list,.split > div > ul.list{display:inline-block;text-align:left}
  .split .stat{text-align:center !important}
  .split .crumb{justify-content:center}
  .split .formcard,.split .row.detail,.split .details{text-align:left}
  .card-link .linklike{align-self:center}
  .h-card{font-size:17.5px}
  .footgrid,.footabout{text-align:center}
  .footabout .logo,.social,.footcontact a,.footcontact address{justify-content:center}
  .footlinks{text-align:center}
  .footbottom{justify-content:center;text-align:center}
  .footbottom ul{justify-content:center}
  .footcta{text-align:center;align-items:center}
}

@media (min-width:768px){
  .split > div > .wrap-head.center{text-align:left;margin-left:0}
  .split > div > .wrap-head.center .lead{margin-left:0}
  .split > div > .btnrow.center{justify-content:flex-start}
  .split.hero .btnrow{justify-content:flex-start}
}

/* Fixes: number box hugs its number, card button gets breathing room */
.step .badge{display:inline-flex}
.grid > .step > .badge{margin-left:0;margin-right:0}
.card.card-link > p.txt{padding-bottom:20px}
.card.card-link .linklike{margin-top:auto;padding-top:0}


/* ==========================================================================
   2.4.0 UPDATE
   Taller header, premium mega menu, chevron breadcrumbs, eyebrow pill that
   hugs its text, full-screen heroes on big monitors, premium FAQ, and
   stronger text contrast.
   ========================================================================== */

/* ------------------------------------------------ header height ------ */
@media (min-width:1080px){
  :root{--headh:78px;--headh-s:68px}
  .mainnav{align-self:stretch}
  .navlinks{height:100%}
  .navlinks > li{height:100%}
  .navlinks > li > a{font-size:16px;padding:10px 14px}
  .navcta.btn{min-height:46px;padding:0 24px;font-size:15.5px}
  .logo{font-size:20px}
  .logo .mark{width:38px;height:38px;border-radius:11px}
}

/* --------------------------------------------------- breadcrumb ------ */
/* No slashes: a small chevron sits between the steps. Works for the
   theme's own breadcrumb and for Rank Math's. */
.crumb{font-size:14px;gap:6px 8px;color:var(--body);line-height:1.4}
.crumb p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.crumb a{color:var(--body);font-weight:500;transition:color .15s}
.crumb a:hover{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.crumb [aria-current],.crumb .last{color:var(--heading);font-weight:600}
.crumb .sep,.crumb .separator{display:inline-block;flex:none;width:14px;height:14px;font-size:0;line-height:0;color:transparent;opacity:1;background:var(--brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.sec.dark .crumb,.sec.dark .crumb a{color:var(--on-dark)}
.sec.dark .crumb [aria-current]{color:#fff}
.sec.dark .crumb .sep,.sec.dark .crumb .separator{background:var(--accent)}

/* Eyebrow pill hugs its words, never stretches across the column */
.eyebrow.herobrow{display:inline-flex;align-items:center;width:fit-content;max-width:100%}
.crumb + .eyebrow.herobrow{margin-top:18px}
.pagehead.center .crumb + .eyebrow,.center > .crumb + .eyebrow{margin-left:auto;margin-right:auto}
@media (max-width:767px){
  .split > div > .crumb + .eyebrow{margin-left:auto;margin-right:auto}
}

/* ------------------------------------ full-screen hero, big screens ------ */
/* Laptops already look right. From 1200px wide and 720px tall, every hero
   (split, with form, centred) fills the screen under the header, so a
   21 to 27 inch monitor never shows the next section peeking in. */
@media (min-width:1200px) and (min-height:720px){
  .fullhero{min-height:calc(100vh - var(--headh));min-height:calc(100svh - var(--headh));display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:56px}
  .admin-bar .fullhero{min-height:calc(100vh - var(--headh) - 32px);min-height:calc(100svh - var(--headh) - 32px)}
  .fullhero > .container{width:100%}
}
@media (min-width:1600px){
  .container{max-width:1440px}
  .fullhero .h-hero{font-size:68px}
  .fullhero .lead{font-size:19.5px}
  .split.hero{gap:96px}
}
@media (min-width:1600px) and (min-height:1000px){
  .fullhero .h-hero{font-size:74px}
}

/* ------------------------------------------------- mega menu ------ */
@media (min-width:1080px){
  .navlinks .sub-menu{top:100%;padding:12px;border-radius:22px;border:1px solid rgba(13,57,34,.1);background:#fff;box-shadow:0 34px 70px -30px rgba(13,57,34,.5),0 3px 10px rgba(13,57,34,.06);min-width:320px}
  /* Lime to green line on top of every dropdown */
  .navlinks .sub-menu::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--brand),var(--accent))}

  .navlinks .sub-menu > li > a{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 16px;border-radius:16px;font-size:15.5px;font-weight:700;line-height:1.35;color:var(--ink);transition:background .18s,color .18s}
  .navlinks .sub-menu > li > a::before{content:"";grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;background:var(--icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7844' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/18px no-repeat;transition:background-color .18s,transform .25s var(--ease-out,ease)}
  .navlinks .sub-menu .mdesc{grid-column:2;font-size:13.5px;font-weight:400;color:var(--body);margin-top:3px;line-height:1.45}
  .navlinks .sub-menu > li > a:hover,.navlinks .sub-menu > li > a:focus-visible{background:var(--tint-2);color:var(--heading)}
  .navlinks .sub-menu > li > a:hover::before,.navlinks .sub-menu > li > a:focus-visible::before{background-color:var(--heading);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4e830' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");transform:rotate(-8deg) scale(1.05)}
  .navlinks .sub-menu > li > a:focus-visible{outline:2px solid var(--brand);outline-offset:0}
  .navlinks .sub-menu > li.current-menu-item > a{background:var(--brand-50);color:var(--brand)}

  /* Wide panel: full screen width, three columns, short and tidy.
     The parent item stops being the anchor, so the panel hangs from the
     whole header and lines up with the page container. */
  .navlinks > li.wide{position:static}
  .navlinks > li.wide > .sub-menu{left:0;right:0;width:auto;min-width:0;top:100%;border-radius:0 0 24px 24px;border-left:0;border-right:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:16px max(28px,calc((100% - 1240px) / 2 + 44px)) 18px;transform:translateY(6px)}
  .navlinks > li.wide:hover > .sub-menu,.navlinks > li.wide:focus-within > .sub-menu,.navlinks > li.wide.is-open > .sub-menu{transform:none}
  .navlinks > li.wide > .sub-menu::before{left:0;right:0;border-radius:0}
  .navlinks > li.wide > .sub-menu > li > a{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:11px 12px;border-radius:14px}
  .navlinks > li.wide > .sub-menu > li > a::before{width:36px;height:36px;border-radius:10px;background-size:16px}
  .navlinks > li.wide > .sub-menu .mdesc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

  /* "View all" becomes a dark green row across the bottom */
  .navlinks .sub-menu > li.menu-viewall{grid-column:1 / -1;margin-top:6px}
  .navlinks > li.wide > .sub-menu > li.menu-viewall > a{padding:10px 14px}
  .navlinks .sub-menu > li.menu-viewall > a{align-items:center;background:linear-gradient(135deg,var(--dark) 0%,var(--dark-deep) 100%);color:#fff}
  .navlinks .sub-menu > li.menu-viewall > a::before{background-color:rgba(180,232,48,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4e830' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E")}
  .navlinks .sub-menu > li.menu-viewall .mdesc{color:#cfe3d4}
  .navlinks .sub-menu > li.menu-viewall > a:hover,.navlinks .sub-menu > li.menu-viewall > a:focus-visible{background:var(--heading);color:#fff}
  .navlinks .sub-menu > li.menu-viewall > a:hover::before,.navlinks .sub-menu > li.menu-viewall > a:focus-visible::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3922' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E");transform:translateX(3px)}
}
/* Mobile list: view-all link in brand green */
.moblist .sub-menu .menu-viewall > a{font-weight:700;color:var(--brand)}

/* ----------------------------------------------------- premium FAQ ------ */
.faq{max-width:880px;margin:32px auto 0;padding:0;border-radius:0;background:none}
.faqrow{position:relative;background:#fff;border:1px solid rgba(13,57,34,.12);border-radius:18px;margin-top:12px;padding:0;box-shadow:0 1px 2px rgba(13,57,34,.05)}
.faqrow:first-child{margin-top:0}
.faqrow summary{display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:20px 20px 20px 26px;font-family:var(--head);font-size:18px;font-weight:700;line-height:1.35;color:var(--heading);letter-spacing:-.005em}
.faqrow summary::before,.faqrow[open] summary::before{content:none;display:none}
.faqrow summary::after,.faqrow[open] summary::after{content:"";flex:none;margin-left:auto;width:40px;height:40px;border:0;border-radius:50%;transform:none;background:var(--icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23105834' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/18px no-repeat;transition:background-color .2s,transform .3s var(--ease-out,ease)}
.faqrow:hover summary::after{background-color:var(--brand-200)}
.faqrow[open] summary::after{background-color:var(--heading);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4e830' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");transform:rotate(180deg)}
.faqrow summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:18px}
.faqrow:hover{border-color:var(--brand-200);box-shadow:0 14px 30px -24px rgba(13,57,34,.5)}
.faqrow[open]{background:#fff;border-color:var(--brand);box-shadow:0 26px 50px -32px rgba(13,57,34,.6)}
.faqrow[open]::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--accent),var(--brand))}
.faqrow .a{padding:0 84px 22px 26px;margin-top:-2px;font-size:16.5px;line-height:1.72;color:var(--body);text-align:left}
.faqrow .a p{margin:0 0 10px}
.faqrow .a p:last-child{margin-bottom:0}
@media (max-width:767px){
  .faqrow summary{font-size:16.5px;padding:16px 14px 16px 18px;gap:12px}
  .faqrow summary::after,.faqrow[open] summary::after{width:34px;height:34px;background-size:16px}
  .faqrow .a{padding:0 18px 18px}
}
/* FAQ on a dark band */
.sec.dark .faqrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.sec.dark .faqrow summary{color:#fff}
.sec.dark .faqrow .a{color:var(--on-dark)}
.sec.dark .faqrow .a a{color:#fff}
.sec.dark .faqrow summary::after{background-color:rgba(255,255,255,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4e830' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.sec.dark .faqrow[open]{background:rgba(255,255,255,.09);border-color:var(--accent)}
.sec.dark .faqrow[open] summary::after{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3922' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
/* FAQ on a brand band: white rows keep dark text readable */
.sec.brandbg .faqrow summary{color:var(--heading)}
.sec.brandbg .faqrow .a{color:var(--body)}

/* ------------------------------------------------- contrast fixes ------ */
.cap,.stat .lbl{color:var(--mut)}
.mdesc{color:var(--body)}
.sec.alt .cap,.sec.soft .cap{color:var(--body)}
.pill{color:var(--heading)}

@media (min-width:1600px){
  .navlinks > li.wide > .sub-menu{padding-left:max(28px,calc((100% - 1440px) / 2 + 44px));padding-right:max(28px,calc((100% - 1440px) / 2 + 44px))}
}
@media (min-width:1080px) and (max-width:1279px){
  .navlinks > li > a{font-size:15px;padding:10px 10px}
  .navlinks > li.wide > .sub-menu .mdesc{display:none}
}

/* ==========================================================================
   2.5.0 FINAL
   One blog card everywhere, centred blog list header, alignment fixes.
   ========================================================================== */

/* ------------------------------------------------- blog list head ------ */
.sec.archhead{background:var(--tint-2);padding:40px 0 36px}
.archwrap{max-width:860px;margin:0 auto;text-align:center}
.archwrap .crumb{justify-content:center}
.archwrap .h-hero{margin-top:14px;font-size:clamp(32px,4.2vw,56px)}
.archwrap .lead{margin-left:auto;margin-right:auto}
.archwrap .catbar{justify-content:center;margin-top:24px}
.catbar a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;transition:background .15s,color .15s,border-color .15s}
.catbar a.on{background:var(--heading);border-color:var(--heading);color:#fff}
.catbar a:hover:not(.on){border-color:var(--brand);color:var(--heading);background:#fff}
.archsearch{max-width:520px;margin:24px auto 0}
.sec.archlist{padding-top:48px}
@media (min-width:768px){.sec.archhead{padding:56px 0 44px}}

/* ------------------------------------------------------ blog card ------ */
.grid.postgrid{align-items:stretch}
.grid > .card.pcard,.postgrid > .card{text-align:left}
.pcard{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;border:1px solid rgba(13,57,34,.1);border-radius:18px;box-shadow:0 18px 40px -32px rgba(13,57,34,.55);transition:border-color .2s,box-shadow .25s,transform .25s}
a.pcard:hover{border-color:var(--brand);box-shadow:0 26px 50px -30px rgba(13,57,34,.6);transform:translateY(-4px)}
.pc-media{aspect-ratio:16/9;background:var(--icon-bg);overflow:hidden}
.pc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out,ease)}
a.pcard:hover .pc-media img{transform:scale(1.04)}
.pc-body{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1;padding:20px 22px 22px}
.pc-cat{display:inline-block;font-size:12.5px;font-weight:700;color:var(--heading);background:var(--icon-bg);border-radius:999px;padding:4px 12px}
.pc-title{margin:12px 0 0;font-family:var(--head);font-size:20px;line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:-.005em;text-align:left}
a.pcard:hover .pc-title{color:var(--heading)}
.pc-excerpt{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--body);text-align:left}
.pc-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--ink2)}
.pc-meta span{display:inline-flex;align-items:center;gap:6px}
.pc-meta svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:42px;padding:0 20px;border-radius:999px;background:var(--brand);color:#fff;border:2px solid var(--accent);font-size:14.5px;font-weight:700;box-shadow:0 8px 16px -10px rgba(13,57,34,.6);transition:background .15s}
.pc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
a.pcard:hover .pc-btn{background:var(--heading)}
a.pcard:hover .pc-btn svg{transform:translateX(3px)}
/* The home page "Latest posts" band keeps its dark frame */
.postcards .pcard{border:0;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.postcards .pc-cat{display:inline-block}
@media (max-width:767px){
  .grid > .card.pcard{text-align:left}
  .pc-title{font-size:18.5px}
}

/* ------------------------------------------- general alignment fixes ------ */
/* Pagination centred under any grid */
.pagination .nav-links{align-items:center}
/* Footer phone and contact rows keep icon and text together */
.footcontact a,.footcontact address{align-items:center}
.footcontact a span{overflow-wrap:anywhere}
/* Wide tables and embeds never push the page sideways on phones */
.article,.prose,.txt{overflow-wrap:break-word}
img,video,iframe{max-width:100%}
/* Header on small laptops: keep everything on one line */
@media (min-width:1080px) and (max-width:1199px){
  .nav{gap:12px}
  .navcta.btn{padding:0 16px;font-size:14.5px}
}

/* ==========================================================================
   2.6.0 ONE HERO FOR EVERY PAGE
   Home, services, industries, about, contact, page headers and older
   pages without sections all share this: text left, image right, both
   vertically centred, same heading scale. Long titles step down in size
   so they stay at two or three lines.
   ========================================================================== */
.split.hero{align-items:center}
.split.hero > div:first-child{min-width:0}
.split.hero > .media.natural{align-self:center}
.h-hero.h-long{font-size:32px}
.h-hero.h-xlong{font-size:28px}
.fullhero .lead{max-width:58ch}
.pagebody{max-width:820px;margin:0 auto}

@media (min-width:768px){
  .h-hero.h-long{font-size:42px}
  .h-hero.h-xlong{font-size:36px}
}
@media (min-width:1200px){
  .split.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}
  .fullhero .h-hero{font-size:58px}
  .fullhero .h-hero.h-long{font-size:50px}
  .fullhero .h-hero.h-xlong{font-size:42px}
  /* A tall photo never pushes the hero past the screen */
  .fullhero .split.hero > .media.natural img{max-height:calc(100vh - var(--headh) - 150px);max-height:calc(100svh - var(--headh) - 150px);width:auto;max-width:100%;margin:0 auto}
}
@media (min-width:1200px) and (min-height:720px){
  /* Text-only heroes (page header, pages without an image) are shorter */
  .fullhero.textonly{min-height:calc(70vh - var(--headh));min-height:calc(70svh - var(--headh))}
}
@media (min-width:1600px){
  .split.hero{gap:96px}
  .fullhero .h-hero{font-size:68px}
  .fullhero .h-hero.h-long{font-size:58px}
  .fullhero .h-hero.h-xlong{font-size:48px}
}
@media (min-width:1600px) and (min-height:1000px){
  .fullhero .h-hero.h-long{font-size:62px}
  .fullhero .h-hero.h-xlong{font-size:52px}
}

/* Page header: same look as the home hero, left aligned by default */
.pagehead{padding-bottom:0}
.sec.pagehead{padding-top:56px;padding-bottom:56px}
.pagehead .split.hero.noimg{max-width:900px}
.pagehead.center .split.hero.noimg{margin-left:auto;margin-right:auto;text-align:center}
.pagehead.center .crumb{justify-content:center}
.pagehead.center .lead{margin-left:auto;margin-right:auto}
.pagehead.center .btnrow{justify-content:center}

/* Phones: every hero centred, like the home page on a phone */
@media (max-width:767px){
  .split.hero > div{text-align:center}
  .split.hero .crumb{justify-content:center}
  .split.hero .eyebrow.herobrow{margin-left:auto;margin-right:auto}
  .split.hero .lead{margin-left:auto;margin-right:auto}
  .split.hero .btnrow{justify-content:center}
  .split.hero .list{display:inline-block;text-align:left}
  .sec.pagehead{padding-top:36px;padding-bottom:40px}
}


/* ==========================================================================
   2.7.0 AUTHOR PAGE
   ========================================================================== */
.sec.authorhead{background:var(--tint-2);padding:36px 0 48px}
.authorcard{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px;margin-top:22px;padding:28px 22px;background:#fff;border:1px solid rgba(13,57,34,.1);border-radius:24px;box-shadow:0 24px 50px -36px rgba(13,57,34,.55)}
.ac-photo{width:148px;height:148px;border-radius:50%;padding:4px;background:linear-gradient(135deg,var(--accent),var(--brand));flex:none}
.ac-photo img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid #fff;display:block}
.ac-kicker{margin:0;font-size:13.5px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.ac-name{margin:4px 0 0;font-family:var(--head);font-size:clamp(30px,3.4vw,46px);line-height:1.1;font-weight:700;color:var(--heading)}
.ac-title{margin:6px 0 0;font-size:16px;font-weight:600;color:var(--ink2)}
.ac-bio{margin:14px auto 0;max-width:62ch;font-size:16.5px;line-height:1.7;color:var(--body)}
.ac-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:20px}
.ac-count{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--heading);background:var(--icon-bg);border-radius:999px;padding:8px 16px}
.ac-count svg{width:17px;height:17px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-li{display:inline-flex;align-items:center;gap:8px}
.ab-li svg{width:16px;height:16px;flex:none}
.authorlist-head{font-size:clamp(24px,2.4vw,34px)}
@media (min-width:768px){
  .authorcard{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:36px;padding:40px 44px;align-items:center}
  .ac-bio{margin-left:0}
  .ac-foot{justify-content:flex-start}
  .sec.authorhead{padding:48px 0 60px}
}
@media (min-width:1200px){
  .ac-photo{width:188px;height:188px}
  .ac-photo img{width:180px;height:180px}
}