/* Theme Name: ILF Nigeria Theme URI: https://ilfnigeria.com Author: Built for International Leadership Foundation, Nigeria Description: Custom theme for ILF Nigeria — building leaders of integrity for sustainable societal transformation. Homepage sections are editable through Advanced Custom Fields; all other pages use the standard WordPress editor. Version: 1.2.2 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ilf-nigeria Tags: custom-menu, featured-images, translation-ready, block-styles, wide-blocks */ /* ═══════════════════════ TOKENS ═══════════════════════ */ :root{ --page:#FFFFFF; --surface:#FFFFFF; --panel:#F1F4F2; --panel-2:#E9EFEB; --heading:#0A1410; --text:#0A1410; --muted:#121A15; /* body copy — reads as black for legibility */ --faint:#57635C; /* captions and field labels, one step back */ --accent:#147A3C; --accent-hi:#1B9A4D; --accent-ink:#0E5C2C; --accent-soft:#E8F3EB; --on-accent:#FFFFFF; --gold:#C2911F; --gold-soft:#FAF2DE; --gold-ink:#8C6614; --blue:#0C6FA6; --blue-soft:#E4EFF6; --blue-ink:#08527C; --ink:#0A1410; --ink-deep:#05100B; --ink-2:#16241C; --on-ink:#F1F6F2; --on-ink-muted:#93A79A; --on-ink-line:rgba(241,246,242,.14); --line:rgba(10,20,16,.13); --line-soft:rgba(10,20,16,.07); --shadow-card:0 18px 40px -22px rgba(10,20,16,.28); --shadow-menu:0 22px 50px -16px rgba(10,20,16,.30); --f-disp:'Archivo Black','Arial Black','Helvetica Neue',sans-serif; --f-body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --wrap:1240px; --hdr:96px; --logo:url('assets/img/ilf-logo.png'); --img-1:url('assets/img/hero-1.webp'); --img-2:url('assets/img/hero-2.webp'); --img-3:url('assets/img/hero-3.webp'); --img-4:url('assets/img/hero-4.webp'); --img-5:url('assets/img/about-main.webp'); --img-6:url('assets/img/about-inset.webp'); --wave:repeating-radial-gradient(circle at 18% -10%, transparent 0 22px, rgba(241,246,242,.030) 22px 23px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --page:#070D0A; --surface:#0C1511; --panel:#0C1511; --panel-2:#111D16; --heading:#EAF1EC; --text:#EAF1EC; --muted:#93A79A; --faint:#66766C; --accent:#43C271; --accent-hi:#63D68C; --accent-ink:#63D68C; --accent-soft:#0F2617; --on-accent:#04120A; --gold:#DFB158; --gold-soft:#221A08; --gold-ink:#EDC77E; --blue:#5CB4E6; --blue-soft:#0B2231; --blue-ink:#8ACCF0; --line:rgba(234,241,236,.14); --line-soft:rgba(234,241,236,.07); --shadow-card:0 18px 40px -22px rgba(0,0,0,.75); --shadow-menu:0 22px 50px -16px rgba(0,0,0,.8); } } :root[data-theme="dark"]{ --page:#070D0A; --surface:#0C1511; --panel:#0C1511; --panel-2:#111D16; --heading:#EAF1EC; --text:#EAF1EC; --muted:#93A79A; --faint:#66766C; --accent:#43C271; --accent-hi:#63D68C; --accent-ink:#63D68C; --accent-soft:#0F2617; --on-accent:#04120A; --gold:#DFB158; --gold-soft:#221A08; --gold-ink:#EDC77E; --blue:#5CB4E6; --blue-soft:#0B2231; --blue-ink:#8ACCF0; --line:rgba(234,241,236,.14); --line-soft:rgba(234,241,236,.07); --shadow-card:0 18px 40px -22px rgba(0,0,0,.75); --shadow-menu:0 22px 50px -16px rgba(0,0,0,.8); } /* ═══════════════════════ BASE ═══════════════════════ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--page); color:var(--text); font-family:var(--f-body); font-size:16.5px; line-height:1.75; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%; display:block;} svg{display:block;} a{color:inherit; text-decoration:none;} p{margin:0;} h1,h2,h3,h4,h5{font-family:var(--f-disp); font-weight:400; margin:0; color:var(--heading); text-transform:uppercase; letter-spacing:-.01em; line-height:1.06;} button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; padding:0; appearance:none; -webkit-appearance:none;} ul{margin:0; padding:0;} ::selection{background:var(--accent); color:#fff;} :focus-visible{outline:2px solid var(--gold); outline-offset:3px;} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} } .wrap{max-width:var(--wrap); margin:0 auto; padding:0 30px;} .eyebrow{font-family:var(--f-body); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:12px;} .tnum{font-variant-numeric:tabular-nums;} /* ═══════════════════════ BUTTONS (square) ═══════════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 34px; border:0; border-radius:0; font-family:var(--f-body); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.18em; white-space:nowrap; position:relative; overflow:hidden; transition:color .3s ease, background .3s ease, border-color .3s ease; } .btn::after{content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .38s cubic-bezier(.5,0,.2,1); z-index:0;} .btn > *{position:relative; z-index:1;} .btn:hover::after{transform:translateY(0);} .btn-accent{background:var(--accent); color:#fff;} .btn-accent:hover{color:#fff;} .btn-gold{background:var(--gold); color:#1F1606;} .btn-gold:hover{color:#fff;} .btn-line{border:1.5px solid var(--line); color:var(--text);} .btn-line:hover{color:#fff; border-color:var(--ink);} .btn-on-dark{border:1.5px solid var(--on-ink-line); color:var(--on-ink);} .btn-on-dark::after{background:var(--accent);} .btn-on-dark:hover{color:#fff; border-color:var(--accent);} .btn-line-blue{border:1.5px solid var(--blue); color:var(--blue);} .btn-line-blue::after{background:var(--blue);} .btn-line-blue:hover{color:#fff;} .btn-sm{padding:12px 22px; font-size:11.5px; letter-spacing:.15em;} .btn svg{width:15px; height:15px;} .arrow-link{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px; font-family:var(--f-body); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:var(--accent-ink); } .arrow-link::after{content:""; width:26px; height:2px; background:currentColor; transition:width .3s ease;} .arrow-link:hover::after{width:48px;} .arrow-link svg{display:none;} .arrow-link.blue{color:var(--blue);} .on-ink .arrow-link{color:var(--on-ink-muted);} .on-ink .arrow-link:hover{color:var(--accent-hi);} /* ═══════════════════════ HEADER ═══════════════════════ */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:600; background:transparent; transition:background .35s ease, box-shadow .35s ease, transform .4s ease; } .site-header.solid{background:var(--ink); box-shadow:0 1px 0 var(--on-ink-line);} .site-header.hide{transform:translateY(-100%);} body.no-hero .site-header{background:var(--ink);} .nav-row{display:flex; align-items:stretch; height:var(--hdr); gap:0;} .nav-cell{display:flex; align-items:center; padding:0 30px; border-left:1px solid rgba(241,246,242,.10);} .nav-cell:first-child{border-left:0; padding-left:0;} .brand{display:flex; align-items:center; gap:12px; flex-shrink:0; padding-right:34px;} .logo-badge{ display:block; background:#fff; padding:7px 11px; flex-shrink:0; background-image:var(--logo); background-repeat:no-repeat; background-position:center; background-size:calc(100% - 22px) auto; width:74px; height:38px; } .logo-badge-lg{width:104px; height:52px; padding:9px 14px;} .brand-text{display:flex; flex-direction:column; line-height:1;} .brand-text .nm{font-family:var(--f-disp); font-size:19px; color:var(--on-ink); letter-spacing:-.01em;} .brand-text .sb{font-family:var(--f-body); font-weight:500; font-size:9px; letter-spacing:.2em; color:var(--on-ink-muted); text-transform:uppercase; margin-top:5px;} .nav-main{display:flex; align-items:stretch; margin-left:auto; border-left:1px solid rgba(241,246,242,.10); padding-left:14px;} .nav-item{position:relative; display:flex; align-items:center;} .nav-btn{ display:flex; align-items:center; gap:6px; padding:0 17px; height:100%; font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--on-ink); transition:color .2s ease; position:relative; } .nav-btn::after{content:""; position:absolute; bottom:34px; left:17px; width:0; height:2px; background:var(--accent-hi); transition:width .3s ease;} .nav-btn:hover::after,.nav-btn.active::after{width:20px;} .nav-btn .chev{width:8px; height:8px; opacity:.65; transition:transform .25s ease;} .nav-item.open .nav-btn .chev{transform:rotate(180deg);} .dropdown{ position:absolute; top:calc(100% - 18px); left:8px; min-width:330px; background:#fff; border-radius:0; box-shadow:var(--shadow-menu); padding:14px 0; z-index:50; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .26s ease, transform .26s ease, visibility .26s; } .dropdown.right{left:auto; right:8px;} .nav-item.open .dropdown{opacity:1; visibility:visible; transform:translateY(0);} .dd-link{display:block; width:100%; text-align:left; padding:11px 28px; transition:background .18s ease, padding .22s ease;} .dd-link:hover{background:#F1F4F2; padding-left:34px;} .dd-link .t{font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:#0A1410; display:flex; align-items:center; gap:8px;} .dd-link .d{font-family:var(--f-body); font-size:12.5px; color:#7C8A81; margin-top:3px; line-height:1.5; text-transform:none; letter-spacing:0;} .dd-link.is-active .t{color:var(--accent);} .dd-sep{height:1px; background:rgba(10,20,16,.09); margin:12px 28px;} .dd-head{font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#A3AFA8; padding:10px 28px 4px;} .dd-tag{font-family:var(--f-mono); font-size:9px; letter-spacing:.05em; padding:2px 6px; background:var(--gold-soft); color:var(--gold-ink);} .nav-tools{display:flex; align-items:center; gap:14px;} .icon-btn{width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--on-ink); transition:color .2s;} .icon-btn:hover{color:var(--accent-hi);} .icon-btn svg{width:20px; height:20px;} .i-sun{display:none;} :root[data-theme="dark"] .i-moon{display:none;} :root[data-theme="dark"] .i-sun{display:block;} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .i-moon{display:none;} :root:not([data-theme="light"]) .i-sun{display:block;} } .burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px;} .burger span{width:20px; height:2px; background:var(--on-ink);} /* compact the nav before collapsing it, so desktop keeps the full menu */ @media (max-width:1340px){ .nav-btn{padding:0 13px; font-size:12px; letter-spacing:.14em;} .brand{padding-right:22px;} .nav-cell{padding:0 18px;} } @media (max-width:1180px){ .nav-btn{padding:0 9px; font-size:11px; letter-spacing:.1em;} .brand-text .sb{display:none;} .brand-text .nm{font-size:17px;} .nav-main{padding-left:10px;} .nav-cell{padding:0 12px;} .icon-btn{width:34px; height:34px;} .icon-btn svg{width:18px; height:18px;} } /* one more compaction step so narrow laptops — and the WordPress Customizer preview, which loses ~285px to its control panel — still get the full menu */ @media (max-width:1023px){ .nav-btn{padding:0 7px; font-size:10.5px; letter-spacing:.06em;} .nav-main{padding-left:6px;} .nav-cell{padding:0 8px;} .logo-badge{width:56px; height:30px; padding:5px 8px;} .brand-text .nm{font-size:15px;} .brand{padding-right:12px;} .icon-btn{width:30px; height:30px;} .icon-btn svg{width:16px; height:16px;} :root{--hdr:86px;} } @media (max-width:899px){ .nav-main{display:none;} .burger{display:flex;} .nav-tools{margin-left:auto;} .nav-cell{border-left:0; padding:0;} .brand-text .sb{display:flex;} .brand-text .nm{font-size:17px;} .logo-badge{width:74px; height:38px; padding:7px 11px;} .icon-btn{width:40px; height:40px;} :root{--hdr:80px;} } /* mobile menu */ .m-menu{position:fixed; inset:0; z-index:900; background:var(--ink-deep); display:flex; flex-direction:column; transform:translateY(-101%); transition:transform .5s cubic-bezier(.6,0,.2,1);} .m-menu.open{transform:translateY(0);} .m-top{display:flex; align-items:center; justify-content:space-between; padding:20px 26px; border-bottom:1px solid var(--on-ink-line);} .m-close{width:42px; height:42px; border:1px solid var(--on-ink-line); color:var(--on-ink); display:flex; align-items:center; justify-content:center;} .m-scroll{flex:1; overflow-y:auto; padding:14px 26px 34px;} .m-group{border-bottom:1px solid var(--on-ink-line);} .m-group > button{width:100%; display:flex; align-items:center; justify-content:space-between; padding:17px 2px; color:var(--on-ink); font-family:var(--f-disp); font-size:19px; text-transform:uppercase; letter-spacing:-.01em;} .m-group > button .pm{font-family:var(--f-body); font-weight:400; font-size:22px; color:var(--accent-hi); transition:transform .3s ease;} .m-group.open > button .pm{transform:rotate(45deg);} .m-sub{max-height:0; overflow:hidden; transition:max-height .4s ease;} .m-group.open .m-sub{max-height:700px;} .m-sub button{display:block; width:100%; text-align:left; padding:11px 2px 11px 16px; color:var(--on-ink-muted); font-size:14.5px; border-left:1px solid var(--on-ink-line); margin-left:2px;} .m-sub button:hover{color:var(--accent-hi);} .m-foot{padding:20px 26px; border-top:1px solid var(--on-ink-line); color:var(--on-ink-muted); font-size:13px; display:flex; flex-direction:column; gap:5px;} /* ═══════════════════════ SECTIONS / ROUTER ═══════════════════════ */ section{padding:110px 0;} section.sm{padding:74px 0;} /* interior content wrapper (was the SPA page shell) */ .ilf-page{display:block;} .divider{border:none; border-top:1px solid var(--line-soft); margin:0;} @media (max-width:820px){ section{padding:72px 0;} section.sm{padding:54px 0;} } /* interior page banner */ .banner{ background:var(--ink); color:var(--on-ink); padding:calc(var(--hdr) + 84px) 0 84px; position:relative; overflow:hidden; } /* photograph behind every interior banner */ .banner .banner-pic{ position:absolute; inset:0; background-size:cover; background-position:center 42%; filter:saturate(1.06) contrast(1.03); } /* deliberately light so the photograph reads through, weighted left where the copy sits */ .banner .banner-tint{ position:absolute; inset:0; background: linear-gradient(180deg,rgba(5,16,11,.58) 0%,rgba(5,16,11,.10) 34%), linear-gradient(100deg,rgba(5,16,11,.80) 0%,rgba(5,16,11,.56) 46%,rgba(5,16,11,.24) 100%); } .banner::after{content:""; position:absolute; inset:0; background:var(--wave); pointer-events:none; z-index:1;} .banner .wrap{position:relative; z-index:2;} .banner .dgl{position:absolute; top:0; bottom:0; pointer-events:none; z-index:1;} .banner .wedge{position:absolute; top:0; bottom:0; right:0; width:26%; background:var(--accent); opacity:.42; clip-path:polygon(42% 0,100% 0,100% 100%,0 100%); pointer-events:none; z-index:1;} @media (max-width:820px){ .banner{padding:calc(var(--hdr) + 52px) 0 56px;} .banner .wedge{width:34%;} /* copy runs full width here, so darken evenly rather than left-weighted */ .banner .banner-tint{ background: linear-gradient(180deg,rgba(5,16,11,.72) 0%,rgba(5,16,11,.34) 40%), linear-gradient(100deg,rgba(5,16,11,.74) 0%,rgba(5,16,11,.62) 60%,rgba(5,16,11,.46) 100%); } } .crumb{font-family:var(--f-body); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-ink-muted); display:flex; align-items:center; gap:9px; flex-wrap:wrap;} .crumb button{color:var(--accent-hi); font:inherit; letter-spacing:inherit; text-transform:inherit;} .crumb button:hover{text-decoration:underline;} .banner h1{color:var(--on-ink); font-size:clamp(32px,5vw,60px); margin-top:20px; max-width:20ch;} .banner p{margin-top:20px; color:#CBD8D0; font-size:17px; max-width:60ch; text-shadow:0 1px 6px rgba(5,16,11,.75);} /* section heads */ .s-head{max-width:740px; margin-bottom:60px;} .s-head .eyebrow{color:var(--accent-ink); display:block; margin-bottom:18px;} .s-head h2{font-size:clamp(30px,4.6vw,54px);} .s-head .lede{margin-top:20px; font-size:17.5px; color:var(--muted); max-width:60ch; font-weight:300;} .s-head.ctr{margin-left:auto; margin-right:auto; text-align:center;} .s-head.ctr .lede{margin-left:auto; margin-right:auto;} .on-ink .s-head h2{color:var(--on-ink);} .on-ink .s-head .lede{color:var(--on-ink-muted);} .on-ink .s-head .eyebrow{color:var(--accent-hi);} /* reveals */ .rv{opacity:0; transform:translateY(38px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);} .rv.in{opacity:1; transform:none;} .rvs > *{opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);} .rvs.in > *{opacity:1; transform:none;} .rvs.in > *:nth-child(1){transition-delay:.04s} .rvs.in > *:nth-child(2){transition-delay:.13s} .rvs.in > *:nth-child(3){transition-delay:.22s} .rvs.in > *:nth-child(4){transition-delay:.31s} .rvs.in > *:nth-child(5){transition-delay:.40s} .rvs.in > *:nth-child(6){transition-delay:.49s} .rvs.in > *:nth-child(7){transition-delay:.58s} .rvs.in > *:nth-child(8){transition-delay:.67s} /* ═══════════════════════ PHOTO PLACEHOLDER ═══════════════════════ */ .ph{position:relative; overflow:hidden; background:var(--ink-2); background-image:linear-gradient(135deg,rgba(20,122,60,.20),transparent 55%),var(--wave); display:flex; align-items:center; justify-content:center;} .ph::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(241,246,242,.028) 0 2px,transparent 2px 9px);} .ph .lbl{position:relative; z-index:2; text-align:center; padding:16px; max-width:82%;} .slide-bg .ph{align-items:flex-end; justify-content:flex-end;} .slide-bg .ph .lbl{text-align:right; padding:26px 30px;} .mission > .ph{align-items:flex-end; justify-content:flex-end;} .mission > .ph .lbl{text-align:right; padding:22px 26px;} .ph .lbl svg{width:26px; height:26px; margin:0 auto 10px; color:rgba(241,246,242,.42);} .ph .lbl b{display:block; font-family:var(--f-body); font-weight:600; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(241,246,242,.72);} .ph .lbl i{display:block; font-family:var(--f-mono); font-style:normal; font-size:10px; color:rgba(241,246,242,.4); margin-top:6px; letter-spacing:.03em;} /* real photos — monochrome, matching the reference treatment */ .pic{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.06) contrast(1.03);} .slide-bg .pic{filter:saturate(1.08) contrast(1.04) brightness(.90);} .mission > .pic{filter:saturate(1.06) contrast(1.03) brightness(.86);} .pic-block{background-size:cover; background-position:center; filter:saturate(1.06) contrast(1.03);} .pic-1,.pb-1{background-image:var(--img-1);} .pic-2,.pb-2{background-image:var(--img-2);} .pic-3,.pb-3{background-image:var(--img-3);} .pic-4,.pb-4{background-image:var(--img-4);} .pic-5,.pb-5{background-image:var(--img-5);} .pic-6,.pb-6{background-image:var(--img-6);} .pic-2{background-position:60% center;} .pic-4{background-position:center 42%;} .pb-5{background-position:52% center;} .mono{filter:grayscale(1) contrast(1.06);} /* ═══════════════════════ HERO SLIDER ═══════════════════════ */ .hero{position:relative; height:100svh; min-height:620px; max-height:1000px; overflow:hidden; background:var(--ink-deep);} .slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease, visibility 1s;} .slide.on{opacity:1; visibility:visible;} .slide-bg{position:absolute; inset:0;} .slide-bg .ph{position:absolute; inset:0;} .slide.on .slide-bg{animation:kb 9s ease-out forwards;} @keyframes kb{from{transform:scale(1.0);} to{transform:scale(1.09);}} .slide-tint{position:absolute; inset:0; background: linear-gradient(180deg,rgba(5,16,11,.52) 0%,rgba(5,16,11,0) 20%), linear-gradient(100deg,rgba(5,16,11,.88) 0%,rgba(5,16,11,.72) 28%, rgba(5,16,11,.44) 52%,rgba(5,16,11,.10) 78%,rgba(5,16,11,.04) 100%);} .dgl{position:absolute; top:0; bottom:0; pointer-events:none;} .dgl-a{left:24%; width:44%; background:rgba(241,246,242,.055); clip-path:polygon(38% 0,100% 100%,62% 100%,0 0);} .dgl-b{left:34%; width:44%; background:rgba(241,246,242,.045); clip-path:polygon(0 100%,62% 0,100% 0,38% 100%);} .wedge{position:absolute; top:0; bottom:0; right:0; width:30%; background:var(--accent); opacity:.50; clip-path:polygon(38% 0,100% 0,100% 100%,0 100%); pointer-events:none;} .hero-inner{position:relative; z-index:3; height:100%; display:flex; align-items:center;} .hero-inner .wrap{width:100%;} .slide-eyebrow{display:inline-block; background:rgba(241,246,242,.13); padding:13px 26px; color:#fff; font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase;} .slide h1{color:#fff; font-size:clamp(38px,7.4vw,104px); line-height:.98; margin-top:30px; max-width:15ch;} .slide h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom;} .slide h1 .w i{display:inline-block; font-style:normal; transform:translateY(105%); opacity:0; transition:transform .9s cubic-bezier(.2,.8,.25,1), opacity .9s ease;} .slide.on h1 .w i{transform:translateY(0); opacity:1;} .slide.on h1 .w:nth-child(1) i{transition-delay:.22s} .slide.on h1 .w:nth-child(2) i{transition-delay:.32s} .slide.on h1 .w:nth-child(3) i{transition-delay:.42s} .slide.on h1 .w:nth-child(4) i{transition-delay:.52s} .slide.on h1 .w:nth-child(5) i{transition-delay:.62s} .slide.on h1 .w:nth-child(6) i{transition-delay:.72s} .slide.on h1 .w:nth-child(7) i{transition-delay:.82s} .slide-fade{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;} .slide.on .slide-fade{opacity:1; transform:none;} .slide.on .slide-eyebrow.slide-fade{transition-delay:.08s;} .slide.on .slide-cta{transition-delay:.95s;} .slide-cta{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap;} .hero-nav{position:absolute; z-index:5; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; color:#fff; font-family:var(--f-body); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.82; transition:opacity .25s, gap .25s;} .hero-nav:hover{opacity:1; gap:18px;} .hero-nav svg{width:34px; height:10px;} .hero-prev{left:30px;} .hero-next{right:30px;} .hero-dots{position:absolute; z-index:5; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:10px;} .hero-dots button{width:34px; height:3px; background:rgba(241,246,242,.3); transition:background .3s;} .hero-dots button.on{background:var(--accent-hi);} @media (max-width:1100px){ .wedge{width:38%;} .dgl-a,.dgl-b{left:14%; width:60%;} } @media (max-width:820px){ /* padding moves onto the slide so its photo covers the full hero, no seam */ .hero{height:auto; min-height:0; padding:0;} .slide{position:relative; inset:auto; display:none; padding:calc(var(--hdr) + 60px) 0 96px;} .slide.on{display:block;} .slide-bg{position:absolute; inset:0;} .hero-inner{position:relative; height:auto;} .slide h1{max-width:none;} .hero-nav{top:auto; bottom:32px; transform:none;} .hero-prev{left:30px;} .hero-next{right:30px;} .hero-dots{display:none;} } /* ═══════════════════════ GLOBAL NETWORK STRIP ═══════════════════════ */ .strip{background:var(--accent); color:#fff;} .strip .wrap{padding:22px 30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:15px;} .strip strong{font-weight:600;} .strip .pip{width:8px; height:8px; background:#fff; flex-shrink:0;} .strip a{font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;} /* ═══════════════════════ DARK BAND ═══════════════════════ */ .on-ink{background:var(--ink); color:var(--on-ink); position:relative; overflow:hidden;} .on-ink::before{content:""; position:absolute; inset:0; background:var(--wave); pointer-events:none;} .on-ink > .wrap{position:relative; z-index:1;} .on-ink h2,.on-ink h3,.on-ink h4{color:var(--on-ink);} .on-ink p{color:var(--on-ink-muted);} /* service cards (flush black) */ .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px;} @media (max-width:1080px){ .svc-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:600px){ .svc-grid{grid-template-columns:1fr;} } .svc{background:var(--ink-deep); padding:44px 34px 38px; position:relative; min-height:272px; display:flex; flex-direction:column; transition:background .35s ease, transform .35s ease;} .svc:hover{background:var(--accent); transform:translateY(-6px);} .svc .code{font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-hi); transition:color .3s;} .svc:hover .code{color:rgba(255,255,255,.85);} .svc h4{font-size:22px; margin-top:16px; color:var(--on-ink); max-width:14ch;} .svc .lk{margin-top:auto; padding-top:24px;} .svc .ic{position:absolute; right:26px; bottom:24px; width:56px; height:56px; color:var(--accent-hi); opacity:.9; transition:color .3s, transform .4s;} .svc:hover .ic{color:#fff; transform:translateY(-4px) scale(1.06);} .svc .arrow-link{color:var(--on-ink-muted);} .svc:hover .arrow-link{color:#fff;} /* ═══════════════════════ ABOUT / MEDIA STACK ═══════════════════════ */ .g2{display:grid; grid-template-columns:1fr 1fr; gap:64px;} .g2 > *,.g3 > *,.g4 > *,.svc-grid > *,.numgrid > *,.sect-grid > *,.stats > *{min-width:0;} .g3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} .g4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} @media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr);} } @media (max-width:980px){ .g3{grid-template-columns:repeat(2,1fr);} } @media (max-width:860px){ .g2{grid-template-columns:1fr; gap:44px;} } @media (max-width:620px){ .g3,.g4{grid-template-columns:1fr;} } .media-stack{position:relative; padding:0 0 96px 0;} .media-stack .m1{aspect-ratio:4/3;} .media-stack .m2{position:absolute; right:0; bottom:0; width:56%; aspect-ratio:4/3; border:9px solid var(--page);} .media-stack .play{position:absolute; left:-26px; top:47%; width:104px; height:104px; background:var(--accent); display:flex; align-items:center; justify-content:center; border:5px solid var(--page); transition:transform .3s ease;} .media-stack .play:hover{transform:scale(1.06);} .media-stack .play svg{width:26px; height:26px; color:#fff;} @media (max-width:520px){ .media-stack{padding-bottom:70px;} .media-stack .m2{width:62%; border-width:6px;} .media-stack .play{left:-12px; width:74px; height:74px; border-width:4px;} .media-stack .play svg{width:19px; height:19px;} } .lede-body p{color:var(--muted); font-size:16.5px; font-weight:300;} .lede-body p + p{margin-top:18px;} .accent-say{color:var(--accent); font-size:clamp(19px,2.2vw,25px); font-weight:400; line-height:1.5;} /* progress bars */ .bars{display:flex; flex-direction:column; gap:26px;} .bar-row .bar-track{height:11px; background:var(--panel-2); border-radius:99px; overflow:hidden;} .bar-row .bar-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width 1.5s cubic-bezier(.2,.8,.25,1);} .bar-row .bar-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:11px; font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;} .bar-row .bar-meta span:last-child{color:var(--muted); letter-spacing:.06em;} /* phone tile */ .phone-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;} .phone-row .tile{width:76px; height:76px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .phone-row .tile svg{width:31px; height:31px; color:var(--accent);} .phone-row .q{color:var(--muted); font-size:16px; font-weight:300;} .phone-row .n{font-family:var(--f-disp); font-size:22px; margin-top:2px; letter-spacing:-.01em;} /* ═══════════════════════ NUMBERED CARDS ═══════════════════════ */ .numwrap{margin-top:-86px; position:relative; z-index:4;} @media (max-width:860px){ .numwrap{margin-top:-60px;} } .numgrid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-soft); box-shadow:var(--shadow-card);} @media (max-width:760px){ .numgrid{grid-template-columns:1fr;} } .numcard{background:var(--surface); padding:46px 42px; display:flex; gap:26px; align-items:flex-start;} .numcard .no{width:74px; height:74px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-size:27px; flex-shrink:0;} .numcard h4{font-size:20px;} .numcard p{margin-top:11px; color:var(--muted); font-size:15px; font-weight:300;} @media (max-width:520px){ .numcard{padding:32px 26px; gap:18px;} .numcard .no{width:58px; height:58px; font-size:21px;} } /* ═══════════════════════ SECTOR CARDS (tall, active accent) ═══════════════════════ */ .sect-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:end;} @media (max-width:900px){ .sect-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .sect-grid{grid-template-columns:1fr;} } .sect{position:relative; aspect-ratio:3/4; overflow:hidden; display:flex; align-items:flex-end; transition:transform .45s cubic-bezier(.2,.8,.25,1);} .sect .ph{position:absolute; inset:0; align-items:flex-start;} .sect .ph .lbl{padding-top:30px;} .sect .veil{position:absolute; inset:0; background:linear-gradient(to top,rgba(5,16,11,.86),rgba(5,16,11,.08) 60%); transition:opacity .4s ease;} .sect .fill{position:absolute; inset:0; background:var(--accent); opacity:0; transition:opacity .45s ease;} .sect:hover .fill{opacity:.58;} .sect:hover .veil{opacity:.42;} .sect .body{position:relative; z-index:3; padding:38px 32px; color:#fff;} .sect .ic{width:52px; height:52px; color:#fff; margin-bottom:22px;} .sect .eyebrow{color:rgba(255,255,255,.86); display:block; margin-bottom:11px;} .sect h3{color:#fff; font-size:26px; max-width:13ch;} .sect .lk{margin-top:20px; opacity:0; max-height:0; overflow:hidden; transition:opacity .4s ease, max-height .4s ease;} .sect .lk .arrow-link{color:#fff;} .sect:hover{transform:translateY(-14px);} .sect:hover .lk{opacity:1; max-height:60px;} @media (hover:none){ .sect .lk{opacity:1; max-height:60px;} } /* ═══════════════════════ MISSION BAND ═══════════════════════ */ .mission{position:relative; overflow:hidden; padding:132px 0; text-align:center; background:var(--ink-deep);} .mission .ph{position:absolute; inset:0;} .mission .tint{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,20,16,.58),rgba(20,122,60,.40));} .mission .wrap{position:relative; z-index:3;} .mission h2{color:#fff; font-size:clamp(30px,5.2vw,62px); max-width:22ch; margin:0 auto;} .mission .btn-wrap{margin-top:44px;} @media (max-width:820px){ .mission{padding:88px 0;} } /* ═══════════════════════ TESTIMONIALS ═══════════════════════ */ .testi-wrap{display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; align-items:center;} .testi-wrap > *{min-width:0;} @media (max-width:960px){ .testi-wrap{grid-template-columns:1fr; gap:40px;} } .testi-arrows{display:flex; gap:14px; margin-top:38px;} .testi-arrows button{width:62px; height:62px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s, transform .3s;} .testi-arrows button:hover{background:var(--accent); color:#fff; transform:translateY(-3px);} .testi-arrows svg{width:22px; height:12px;} .testi-view{overflow:hidden; min-width:0; padding-bottom:52px;} .testi-track{display:flex; align-items:stretch; transition:transform .6s cubic-bezier(.2,.8,.25,1);} .testi-card{flex:0 0 50%; min-width:0; padding-right:26px; box-sizing:border-box;} @media (max-width:700px){ .testi-card{flex:0 0 100%; padding-right:0;} } .testi-card .inner{background:var(--surface); box-shadow:var(--shadow-card); padding:44px 38px 0; position:relative; min-height:330px; height:100%; display:flex; flex-direction:column;} .testi-card q{quotes:none; color:var(--muted); font-size:16.5px; font-weight:300; line-height:1.85; display:block;} .testi-card .mk{position:absolute; right:26px; bottom:96px; font-family:var(--f-disp); font-size:88px; color:var(--panel-2); line-height:.7; z-index:0;} .testi-card .who{margin-top:26px; position:relative; z-index:1;} .testi-card .who .nm{font-family:var(--f-body); font-weight:600; font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);} .testi-card .who .rl{font-family:var(--f-body); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-top:4px;} .testi-card .av{width:78px; height:78px; border-radius:50%; overflow:hidden; margin:auto 0 -39px; position:relative; z-index:2; background:var(--panel-2); border:4px solid var(--surface); flex-shrink:0;} .testi-card .av .ph{background:var(--panel-2); background-image:none;} .testi-card .av .ph::before{display:none;} .testi-card .av .ph{position:absolute; inset:0;} .testi-card .av .ph .lbl{display:none;} .testi-card.empty .inner{background:var(--panel); box-shadow:none; border:1px dashed var(--line);} /* ═══════════════════════ POST CARDS ═══════════════════════ */ .post{background:var(--surface); box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.8,.25,1);} .post:hover{transform:translateY(-10px);} .post .media{position:relative; aspect-ratio:4/3; overflow:hidden;} .post .media .ph{position:absolute; inset:0;} .post .media .dim{position:absolute; inset:0; background:rgba(20,122,60,.42); opacity:0; transition:opacity .4s;} .post:hover .media .dim{opacity:1;} .post .media .plus{position:absolute; left:50%; top:50%; width:52px; height:52px; transform:translate(-50%,-50%) scale(.4); opacity:0; transition:opacity .4s, transform .4s; color:var(--accent-hi); z-index:3;} .post:hover .media .plus{opacity:1; transform:translate(-50%,-50%) scale(1);} .post .media .plus{color:#fff;} .post .date{position:absolute; left:0; bottom:-1px; background:var(--accent); color:#fff; padding:12px 20px; z-index:4; font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;} .post .body{padding:30px 30px 34px;} .post .meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--f-body); font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);} .post .meta span{display:flex; align-items:center; gap:7px;} .post .meta svg{width:14px; height:14px; color:var(--accent);} .post h4{font-size:21px; margin-top:16px;} .post p{margin-top:13px; color:var(--muted); font-size:15px; font-weight:300;} .post .lk{margin-top:22px;} /* ═══════════════════════ STATS ═══════════════════════ */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-soft); border:1px solid var(--line-soft);} .stat{background:var(--surface); padding:40px 30px;} .stat .n{font-family:var(--f-disp); font-size:clamp(34px,4.4vw,50px); color:var(--accent); font-variant-numeric:tabular-nums; line-height:1;} .stat .l{margin-top:14px; font-size:14px; color:var(--muted); font-weight:300; line-height:1.55;} @media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr);} } .on-ink .stats{background:var(--on-ink-line); border-color:var(--on-ink-line);} .on-ink .stat{background:var(--ink-deep);} .on-ink .stat .n{color:var(--accent-hi);} .on-ink .stat .l{color:var(--on-ink-muted);} /* ═══════════════════════ GENERIC CARDS (interior pages) ═══════════════════════ */ .card{background:var(--surface); border:1px solid var(--line); padding:34px 30px; display:flex; flex-direction:column; gap:14px; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;} .card:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-card);} .card h3{font-size:21px;} .card h4{font-size:18px;} .card p{font-size:15px; color:var(--muted); font-weight:300;} .card .foot{margin-top:auto; padding-top:8px;} .card-flat:hover{transform:none; border-color:var(--line); box-shadow:none;} .chip{display:inline-flex; align-self:flex-start; font-family:var(--f-body); font-weight:600; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; padding:6px 12px;} .chip-green{background:var(--accent-soft); color:var(--accent-ink);} .chip-gold{background:var(--gold-soft); color:var(--gold-ink);} .chip-blue{background:var(--blue-soft); color:var(--blue-ink);} .tagpill{font-family:var(--f-body); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.14em; padding:6px 12px; border:1px solid var(--line); color:var(--muted);} .tagrow{display:flex; gap:9px; flex-wrap:wrap;} .pill-row{display:flex; gap:12px; flex-wrap:wrap;} .stack{display:flex; flex-direction:column; gap:14px;} .checks{list-style:none; display:flex; flex-direction:column; gap:12px;} .checks li{display:flex; gap:13px; font-size:15.5px; color:var(--muted); align-items:flex-start; font-weight:300;} .checks li svg{width:16px; height:16px; flex-shrink:0; margin-top:6px; color:var(--accent);} .tl{position:relative; padding-left:34px; display:flex; flex-direction:column; gap:38px;} .tl::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line);} .tl-i{position:relative;} .tl-i::before{content:""; position:absolute; left:-34px; top:7px; width:11px; height:11px; background:var(--accent);} .tl-d{font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);} .tl-i h4{margin-top:8px; font-size:19px;} .tl-i p{margin-top:10px; color:var(--muted); font-size:15px; font-weight:300; max-width:60ch;} .quote{background:var(--ink-deep); color:var(--on-ink); padding:64px; position:relative; overflow:hidden;} .quote q{quotes:none; font-family:var(--f-body); font-weight:300; font-size:clamp(21px,2.6vw,32px); line-height:1.5; max-width:44ch; display:block; color:#fff;} .quote .who{margin-top:30px; font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-hi);} .quote .mk{position:absolute; top:10px; right:40px; font-family:var(--f-disp); font-size:190px; color:rgba(241,246,242,.05); line-height:1;} @media (max-width:640px){ .quote{padding:40px 26px;} } .person{text-align:center;} .person .av{width:104px; height:104px; margin:0 auto 18px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-size:27px;} .person h4{font-size:17px;} .person .role{margin-top:6px; font-family:var(--f-body); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);} .person .bio{margin-top:12px; font-size:14px; color:var(--muted); font-weight:300;} .callout{background:var(--accent-soft); padding:44px; display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap;} .callout.blue{background:var(--blue-soft);} .callout.gold{background:var(--gold-soft);} .callout h3{font-size:23px; max-width:38ch;} .callout p{margin-top:11px; color:var(--muted); font-size:15px; font-weight:300; max-width:52ch;} .row-list{display:flex; flex-direction:column;} .row{display:flex; gap:28px; padding:30px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start;} .row:first-child{border-top:1px solid var(--line-soft);} .row .when{width:112px; flex-shrink:0; font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); padding-top:5px; line-height:1.5;} .row .body{flex:1;} .row .body h4{font-size:20px;} .row .body p{margin-top:9px; color:var(--muted); font-size:15px; font-weight:300; max-width:64ch;} .row .meta{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;} @media (max-width:620px){ .row{flex-direction:column; gap:12px;} .row .when{width:auto;} } .prow{display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; padding:58px 0; border-bottom:1px solid var(--line-soft);} .prow:last-child{border-bottom:none;} .prow.flip .pvis{order:2;} @media (max-width:880px){ .prow,.prow.flip{grid-template-columns:1fr; gap:26px; padding:40px 0;} .prow.flip .pvis{order:0;} } .pvis{aspect-ratio:4/3; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--panel);} .pvis svg{width:42%; opacity:.9;} .prow h3{font-size:clamp(23px,3vw,33px); margin-top:14px;} .prow .desc{margin-top:17px; color:var(--muted); font-size:16px; font-weight:300;} .gal{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} @media (max-width:900px){ .gal{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .gal{grid-template-columns:1fr;} } .gal .tile{position:relative; aspect-ratio:4/5; overflow:hidden; display:flex; align-items:flex-end;} .gal .tile .art{position:absolute; inset:0;} .gal .tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,16,11,.86),rgba(5,16,11,.04) 56%); z-index:1;} .gal .tile .cap{position:relative; z-index:2; padding:22px; color:#fff;} .gal .tile .cap .yr{font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:.2em; opacity:.85;} .gal .tile .cap h4{color:#fff; font-size:17px; margin-top:6px;} .acc{border-top:1px solid var(--line-soft);} .acc-i{border-bottom:1px solid var(--line-soft);} .acc-q{width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:22px; padding:24px 2px; text-align:left; font-family:var(--f-disp); font-size:17px; text-transform:uppercase; color:var(--heading); letter-spacing:-.005em; line-height:1.35;} .acc-q:hover{color:var(--accent);} .acc-q .pm{font-family:var(--f-body); font-weight:400; font-size:22px; color:var(--accent); flex-shrink:0; transition:transform .3s ease; line-height:1;} .acc-i.open .acc-q .pm{transform:rotate(45deg);} .acc-a{max-height:0; overflow:hidden; transition:max-height .38s ease;} .acc-i.open .acc-a{max-height:560px;} .acc-a p{padding:0 2px 26px; color:var(--muted); font-size:16px; font-weight:300; max-width:72ch;} .form{display:flex; flex-direction:column; gap:17px;} .frow{display:grid; grid-template-columns:1fr 1fr; gap:17px;} @media (max-width:560px){ .frow{grid-template-columns:1fr;} } .field label{display:block; font-family:var(--f-body); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); margin-bottom:8px;} .field input,.field select,.field textarea{width:100%; padding:15px 16px; border-radius:0; border:1px solid var(--line); background:var(--surface); color:var(--text); font-family:var(--f-body); font-size:15.5px;} .field textarea{resize:vertical; min-height:120px;} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent); border-color:transparent;} .note{font-size:13px; color:var(--faint); font-style:italic;} .ok-msg{display:none; background:var(--accent-soft); color:var(--accent-ink); padding:15px 17px; font-size:14.5px; font-weight:500;} .ok-msg.show{display:block;} .office{border:1px solid var(--line); padding:30px; background:var(--surface);} .office .city{font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);} .office h3{margin-top:10px; font-size:21px;} .office address{font-style:normal; margin-top:15px; color:var(--muted); font-size:15px; font-weight:300;} .office .ph2{margin-top:14px; font-family:var(--f-disp); font-size:17px;} .cmeth{display:flex; align-items:center; gap:16px; padding:17px; border:1px solid var(--line); background:var(--surface); transition:border-color .25s, transform .25s;} .cmeth:hover{border-color:var(--accent); transform:translateX(4px);} .cmeth .ic{width:44px; height:44px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .cmeth .ic svg{width:19px; height:19px;} .cmeth .lb{font-family:var(--f-body); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--faint);} .cmeth .vl{font-weight:500; margin-top:3px; font-size:15px;} .sdg{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} @media (max-width:980px){ .sdg{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .sdg{grid-template-columns:1fr;} } .sdg-c{border:1px solid var(--line); padding:28px; background:var(--surface); border-top:4px solid var(--sdgc,var(--accent));} .sdg-c .no{font-family:var(--f-disp); font-size:15px; color:var(--sdgc,var(--accent));} .sdg-c h4{margin-top:11px; font-size:17px;} .sdg-c p{margin-top:10px; font-size:14px; color:var(--muted); font-weight:300;} .inst{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;} .inst-c{border:1px solid var(--line); padding:20px; background:var(--surface); display:flex; gap:14px; align-items:flex-start;} .inst-c .mk{width:40px; height:40px; background:var(--panel-2); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-size:13px; flex-shrink:0;} .inst-c .nm{font-weight:500; font-size:15px; line-height:1.4;} .inst-c .kd{font-family:var(--f-body); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:5px;} .tpl{display:flex; gap:13px; align-items:flex-start; padding:18px 20px; background:var(--gold-soft); border-left:4px solid var(--gold); font-size:14px; color:var(--gold-ink); line-height:1.6; font-weight:300;} .tpl svg{width:17px; height:17px; flex-shrink:0; margin-top:4px;} .tpl b{font-weight:600;} .nl{background:var(--ink-deep); padding:48px; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;} .nl h3{font-size:23px; max-width:30ch; color:var(--on-ink);} .nl p{margin-top:10px; color:var(--on-ink-muted); font-size:15px; font-weight:300;} .nl form{display:flex; flex-wrap:wrap;} .nl input{padding:18px 20px; border:0; background:#fff; color:#0A1410; font-family:var(--f-body); font-size:15px; min-width:0; flex:1 1 160px;} .nl input:focus{outline:2px solid var(--accent);} .mt-s{margin-top:20px;} .mt-m{margin-top:34px;} .mt-l{margin-top:56px;} /* ═══════════════════════ FOOTER ═══════════════════════ */ footer{background:var(--ink); color:var(--on-ink); padding:96px 0 0; position:relative; overflow:hidden;} footer::before{content:""; position:absolute; inset:0; background:var(--wave); pointer-events:none;} footer .wrap{position:relative; z-index:1;} .f-grid{display:grid; grid-template-columns:1.25fr .7fr .7fr 1.35fr; gap:48px; padding-bottom:62px; border-bottom:1px solid var(--on-ink-line);} @media (max-width:1080px){ .f-grid{grid-template-columns:1fr 1fr; gap:44px;} } @media (max-width:620px){ .f-grid{grid-template-columns:1fr; gap:36px;} } .f-brand p{margin-top:22px; color:var(--on-ink-muted); font-size:15px; font-weight:300; max-width:34ch;} .f-contact{margin-top:26px; display:flex; flex-direction:column; gap:14px; padding-top:24px; border-top:1px solid var(--on-ink-line);} .f-contact a,.f-contact span{display:flex; gap:13px; align-items:flex-start; color:var(--on-ink-muted); font-size:14.5px; font-weight:300;} .f-contact svg{width:16px; height:16px; color:var(--accent-hi); flex-shrink:0; margin-top:5px;} .f-contact a:hover{color:var(--accent-hi);} .socials{display:flex; gap:12px; margin-top:24px;} .socials a{width:40px; height:40px; border:1px solid var(--on-ink-line); display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s, transform .25s;} .socials a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-3px);} .socials svg{width:16px; height:16px;} .f-col h5{font-family:var(--f-disp); font-size:15px; color:var(--on-ink); margin-bottom:24px; letter-spacing:0;} .f-col ul{list-style:none; display:flex; flex-direction:column; gap:13px;} .f-col button,.f-col a{color:var(--on-ink-muted); font-size:14.5px; font-weight:300; text-align:left; transition:color .2s, padding-left .25s;} .f-col button:hover,.f-col a:hover{color:var(--accent-hi); padding-left:5px;} .f-2col{display:grid; grid-template-columns:1fr 1fr; gap:13px 20px;} .f-bot{display:flex; justify-content:space-between; align-items:center; padding:26px 0; color:var(--on-ink-muted); font-size:13.5px; font-weight:300; flex-wrap:wrap; gap:10px;} .f-bot a{color:var(--accent-hi);} /* scroll to top */ .totop{position:fixed; right:26px; bottom:26px; z-index:500; width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s, visibility .3s, transform .3s, background .25s;} .totop.on{opacity:1; visibility:visible; transform:none;} .totop:hover{background:var(--ink);} .totop svg{width:19px; height:19px;} @media (max-width:600px){ .totop{right:16px; bottom:16px; width:46px; height:46px;} } /* ═══════════════════════ MOBILE / TABLET REFINEMENTS ═══════════════════════ */ @media (max-width:1023px){ .brand{padding-right:18px;} } @media (max-width:820px){ .strip .pip{display:none;} .strip .wrap{padding:18px 30px; font-size:14.5px;} .banner{padding:calc(var(--hdr) + 46px) 0 52px;} .banner p{font-size:16px;} .s-head{margin-bottom:40px;} .quote{padding:34px 26px;} .callout{padding:30px;} .nl{padding:32px;} .btn{padding:15px 26px; font-size:12px;} } @media (max-width:700px){ .svc{min-height:0; padding:32px 26px 30px;} .svc .ic{width:44px; height:44px; right:20px; bottom:20px;} .svc .lk{padding-top:20px;} .slide-cta{gap:10px;} .slide-cta .btn{flex:1 1 100%;} .slide-eyebrow{padding:11px 18px; font-size:11px; letter-spacing:.18em;} .testi-arrows button{width:52px; height:52px;} .mission{padding:74px 0;} .numcard{padding:28px 24px;} } @media (max-width:560px){ .nav-tools .icon-btn[data-nav]{display:none;} .brand-text .nm{font-size:16px;} .brand-text .sb{font-size:8px; letter-spacing:.16em;} .logo-badge{width:62px; height:33px; padding:6px 9px;} .wrap{padding:0 20px;} .hero-prev,.hero-next{font-size:10.5px; letter-spacing:.14em;} .hero-prev{left:20px;} .hero-next{right:20px;} .hero-nav svg{width:24px;} .sect{aspect-ratio:4/5;} .sect .body{padding:28px 24px;} .sect .ic{width:42px; height:42px; margin-bottom:16px;} .testi-card .inner{padding:32px 26px 0; min-height:0;} .post .body{padding:24px 24px 28px;} .m-group > button{font-size:17px; padding:15px 2px;} } @media (max-width:400px){ .slide h1{font-size:34px;} .banner h1{font-size:29px;} } /* ═══════════════════════ CTA BAND (interior pages) ═══════════════════════ */ .band{background:var(--ink); color:var(--on-ink); position:relative; overflow:hidden;} .band::before{content:""; position:absolute; inset:0; background:var(--wave); pointer-events:none;} .band > *{position:relative; z-index:1;} .band h2,.band h3,.band h4{color:var(--on-ink);} .band p{color:var(--on-ink-muted);} .band-ctr{text-align:center; padding:96px 30px;} .band-ctr h2{font-size:clamp(26px,4vw,46px); max-width:24ch; margin:0 auto;} .band-ctr p{margin-top:18px; font-size:16.5px; font-weight:300; max-width:56ch; margin-left:auto; margin-right:auto;} .ctas{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .btn-green{background:var(--accent); color:#fff;} .btn-green:hover{color:#fff;} @media (max-width:820px){ .band-ctr{padding:66px 24px;} } /* ═══════════════════════ DISPLAY TYPE GLOW ═══════════════════════ */ /* Headings glow rather than drop a shadow: a soft luminous halo at 40% intensity, tinted with the brand green so it blends instead of shouting. --glow-a is the master intensity — lower it to 0.25 for a whisper, raise it to 0.6 if it needs to carry further. */ :root{ --glow-a:.40; /* 40% intensity */ --glow-light:20,122,60; /* brand green, for glow on pale grounds */ --glow-dark:255,255,255; /* white, for glow on dark grounds */ } :root[data-theme="dark"]{ --glow-light:99,214,140; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --glow-light:99,214,140; } } /* pale grounds — a green bloom around the dark caps */ h1,h2,h3,.acc-q{ text-shadow: 0 0 14px rgba(var(--glow-light), calc(var(--glow-a) * .55)), 0 0 34px rgba(var(--glow-light), calc(var(--glow-a) * .30)); } h4,h5{ text-shadow:0 0 10px rgba(var(--glow-light), calc(var(--glow-a) * .35)); } /* dark grounds — white bloom with a green undertone */ .on-ink h2,.on-ink h3,.on-ink h4, .band h2,.band h3,.banner h1, .svc h4,.quote q,.nl h3,.f-col h5{ text-shadow: 0 0 16px rgba(var(--glow-dark), calc(var(--glow-a) * .55)), 0 0 40px rgba(var(--glow-dark), calc(var(--glow-a) * .28)), 0 0 64px rgba(20,122,60, calc(var(--glow-a) * .45)); } /* over photographs the glow stays dominant, with a minimal dark base purely so white type never dissolves into a bright patch of image */ .slide h1,.mission h2,.banner h1,.sect h3,.gal .tile .cap h4{ text-shadow: 0 1px 2px rgba(5,16,11,.42), 0 0 18px rgba(var(--glow-dark), calc(var(--glow-a) * .60)), 0 0 46px rgba(var(--glow-dark), calc(var(--glow-a) * .32)), 0 0 74px rgba(20,122,60, calc(var(--glow-a) * .50)); } .slide-eyebrow,.hero-nav{ text-shadow:0 0 12px rgba(var(--glow-dark), calc(var(--glow-a) * .5)); } /* big numerals read as graphic marks, so they glow too */ .stat .n{ text-shadow:0 0 16px rgba(var(--glow-light), calc(var(--glow-a) * .6)); } .numcard .no{ text-shadow:0 0 12px rgba(var(--glow-light), calc(var(--glow-a) * .5)); } /* a slow sheen sweeps the hero headline once it has landed */ .slide.on h1{ background-image:linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 62%); background-size:260% 100%; background-position:180% 0; -webkit-background-clip:text; background-clip:text; animation:sheen 3.6s cubic-bezier(.3,.6,.3,1) 1.15s 1 forwards; } @keyframes sheen{ from{background-position:180% 0;} to{background-position:-80% 0;} } @media (prefers-reduced-motion:reduce){ .slide.on h1{animation:none; background-image:none;} } @media (max-width:600px){ /* tighter radius on small screens so the glow does not smear */ :root{ --glow-a:.34; } } /* ═══════════════════════ CTA BAND (interior pages) ═══════════════════════ */ .band{background:var(--ink); color:var(--on-ink); position:relative; overflow:hidden;} .band::before{content:""; position:absolute; inset:0; background:var(--wave); pointer-events:none;} .band > *{position:relative; z-index:1;} .band h2,.band h3,.band h4{color:var(--on-ink);} .band p{color:var(--on-ink-muted);} .band-ctr{text-align:center; padding:96px 30px;} .band-ctr h2{font-size:clamp(26px,4vw,46px); max-width:24ch; margin:0 auto;} .band-ctr p{margin-top:18px; font-size:16.5px; font-weight:300; max-width:56ch; margin-left:auto; margin-right:auto;} .ctas{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .btn-green{background:var(--accent); color:#fff;} .btn-green:hover{color:#fff;} @media (max-width:820px){ .band-ctr{padding:66px 24px;} } /* ═══════════════════════ DISPLAY TYPE EFFECTS ═══════════════════════ */ /* Heavy caps get a layered lift: a tight accent offset for depth, then a soft ambient shadow. Over photography the same stack doubles as legibility. */ h1,h2,h3,.banner h1,.acc-q{ text-shadow: 0 1px 0 rgba(10,20,16,.06), 0 2px 0 rgba(20,122,60,.10), 0 8px 22px rgba(10,20,16,.07); } h4,h5{ text-shadow:0 1px 0 rgba(10,20,16,.05); } /* on dark grounds the lift inverts — green edge plus a deep ambient glow */ .on-ink h2,.on-ink h3,.on-ink h4, .band h2,.band h3,.banner h1, .svc h4,.quote q,.nl h3,.f-col h5{ text-shadow: 0 1px 1px rgba(0,0,0,.45), 2px 3px 0 rgba(20,122,60,.34), 0 10px 34px rgba(0,0,0,.55); } /* hero + mission sit directly on photographs — strongest treatment */ .slide h1,.mission h2{ text-shadow: 0 0 4px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.7), 3px 4px 0 rgba(20,122,60,.46), 0 4px 14px rgba(5,16,11,.85), 0 16px 48px rgba(5,16,11,.7); } .sect h3,.tile .cap h4,.gal .tile .cap h4{ text-shadow:0 1px 2px rgba(0,0,0,.55), 2px 3px 0 rgba(0,0,0,.25); } /* the eyebrow slab and hero labels get a matching soft lift */ .slide-eyebrow,.hero-nav{ text-shadow:0 1px 6px rgba(0,0,0,.5); } /* big numerals read as graphic marks, so they carry the accent offset too */ .stat .n{ text-shadow:0 2px 0 rgba(20,122,60,.14), 0 8px 20px rgba(10,20,16,.10); } .numcard .no{ text-shadow:0 2px 0 rgba(20,122,60,.16); } /* a slow sheen sweeps the hero headline once it has landed */ .slide.on h1{ background-image:linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 62%); background-size:260% 100%; background-position:180% 0; -webkit-background-clip:text; background-clip:text; animation:sheen 3.6s cubic-bezier(.3,.6,.3,1) 1.15s 1 forwards; } @keyframes sheen{ from{background-position:180% 0;} to{background-position:-80% 0;} } @media (prefers-reduced-motion:reduce){ .slide.on h1{animation:none; background-image:none;} } /* dark theme: soften the ambient halos so they don't smear on near-black */ :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3, :root[data-theme="dark"] .acc-q{ text-shadow:0 1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(67,194,113,.16), 0 10px 26px rgba(0,0,0,.5); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3,:root:not([data-theme="light"]) .acc-q{ text-shadow:0 1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(67,194,113,.16), 0 10px 26px rgba(0,0,0,.5); } } @media (max-width:600px){ .slide h1,.mission h2{ text-shadow:0 1px 1px rgba(0,0,0,.6), 2px 3px 0 rgba(20,122,60,.4), 0 8px 26px rgba(5,16,11,.6); } } /* ═══════════════════════ WORDPRESS CORE CLASSES ═══════════════════════ */ .screen-reader-text{ border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important; } .screen-reader-text:focus{ background:#fff; clip-path:none; color:var(--accent-ink); display:block; font-size:14px; font-weight:600; height:auto; left:6px; line-height:normal; padding:14px 22px; text-decoration:none; top:6px; width:auto; z-index:100000; } .skip-link{position:absolute; top:-100px; left:6px; z-index:100000;} .alignleft{float:left; margin:6px 26px 20px 0;} .alignright{float:right; margin:6px 0 20px 26px;} .aligncenter{margin-left:auto; margin-right:auto; display:block;} .alignwide{max-width:1400px; margin-left:auto; margin-right:auto;} .alignfull{max-width:none; width:100%;} .wp-caption{max-width:100%;} .wp-caption-text,.wp-element-caption,figcaption{ font-size:13.5px; color:var(--faint); margin-top:10px; font-style:italic; } .sticky,.bypostauthor{position:relative;} .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;} .gallery-columns-2{grid-template-columns:repeat(2,1fr);} .gallery-columns-4{grid-template-columns:repeat(4,1fr);} @media (max-width:700px){ .gallery{grid-template-columns:1fr 1fr;} } .gallery-item img{width:100%; height:auto;} /* ── the standard editor's output, styled to match the design ── */ .entry-content > *{max-width:820px; margin-left:auto; margin-right:auto;} .entry-content > .alignwide,.entry-content > .alignfull, .entry-content > .wrap,.entry-content > section,.entry-content > .band, .entry-content > .mission,.entry-content > .strip{max-width:none;} /* Editor typography is scoped to DIRECT children so it never overrides the design components that the installed page content is built from. */ .entry-content > p,.entry-content > .wp-block-group > p{color:var(--muted); font-weight:300; margin-bottom:20px;} .entry-content > h2,.entry-content > .wp-block-group > h2{font-size:clamp(25px,3.2vw,36px); margin:52px 0 20px;} .entry-content > h3,.entry-content > .wp-block-group > h3{font-size:clamp(21px,2.4vw,27px); margin:40px 0 16px;} .entry-content > h4,.entry-content > .wp-block-group > h4{font-size:19px; margin:32px 0 14px;} .entry-content > ul,.entry-content > ol, .entry-content > .wp-block-group > ul,.entry-content > .wp-block-group > ol{ margin:0 0 22px 22px; color:var(--muted); font-weight:300; } .entry-content > ul,.entry-content > .wp-block-group > ul{list-style:disc;} .entry-content > ol,.entry-content > .wp-block-group > ol{list-style:decimal;} .entry-content > ul > li,.entry-content > ol > li{margin-bottom:9px;} /* underline body links only — buttons and component links keep their own styling */ .entry-content a:not(.btn):not(.arrow-link):not(.cmeth):not(.dd-link):not(.tagpill){ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; } .entry-content a:not(.btn):not(.arrow-link):not(.cmeth):not(.dd-link):not(.tagpill):hover{color:var(--accent);} .entry-content .btn,.entry-content .arrow-link{text-decoration:none;} .entry-content .band a,.entry-content .mission a,.entry-content .on-ink a{color:inherit;} .entry-content img{height:auto;} .entry-content > *:first-child{margin-top:0;} .entry-content > blockquote{ border-left:4px solid var(--accent); padding:6px 0 6px 26px; margin:32px 0; font-size:19px; color:var(--text); font-weight:300; font-style:italic; } .entry-content > table{width:100%; border-collapse:collapse; margin-bottom:26px; font-size:15px;} .entry-content th,.entry-content td{border:1px solid var(--line); padding:12px 14px; text-align:left;} .entry-content th{background:var(--panel); font-weight:600;} .entry-content code,.entry-content pre{ font-family:var(--f-mono); font-size:14px; background:var(--panel); padding:2px 6px; } .entry-content pre{padding:20px; overflow-x:auto;} .entry-content > hr{border:none; border-top:1px solid var(--line-soft); margin:44px 0;} /* ── pagination / post meta ── */ .pager{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:60px;} .pager .page-numbers{ padding:12px 18px; border:1px solid var(--line); font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); transition:background .25s, color .25s, border-color .25s; } .pager .page-numbers:hover,.pager .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#fff; } .post-meta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:18px; font-family:var(--f-body); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-muted); } .post-thumb{margin:0 0 44px;} .post-thumb img{width:100%; height:auto;} .no-results{padding:80px 0; text-align:center;} /* ═══════════════════════ VIDEO LIGHTBOX ═══════════════════════ */ .ilf-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(5,16,11,.92); display:flex; align-items:center; justify-content:center; padding:30px; animation:lbIn .3s ease both; } @keyframes lbIn{from{opacity:0;} to{opacity:1;}} .ilf-lightbox-frame{width:100%; max-width:1000px; aspect-ratio:16/9; background:#000;} .ilf-lightbox-frame iframe{width:100%; height:100%; border:0; display:block;} .ilf-lightbox-close{ position:absolute; top:22px; right:26px; width:48px; height:48px; border:1px solid var(--on-ink-line); color:var(--on-ink); font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s; } .ilf-lightbox-close:hover{background:var(--accent); border-color:var(--accent); color:#fff;} /* ═══════════════════════ MOBILE MENU — LINK VARIANTS ═══════════════════════ */ /* wp_nav_menu outputs anchors where the static build used buttons. */ .m-group > a{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:17px 2px; color:var(--on-ink); font-family:var(--f-disp); font-size:19px; text-transform:uppercase; letter-spacing:-.01em; } .m-group > a:hover{color:var(--accent-hi);} .m-sub a{ display:block; width:100%; text-align:left; padding:11px 2px 11px 16px; color:var(--on-ink-muted); font-size:14.5px; border-left:1px solid var(--on-ink-line); margin-left:2px; } .m-sub a:hover{color:var(--accent-hi);} /* footer menus come out of wp_nav_menu as