:root{ --navy:#1C3F73; --navy-deep:#14294B; --green:#4A9E3F; --green-deep:#3B8433; --green-soft:#A7D89E; --red:#EE3B2E; --paper:#F6F8FB; --limestone:#EDF1F7; --card:#FFFFFF; --ink:#1B2A44; --ink-soft:#4A5875; --border:#E1E7F0; --border-deep:#C7D2E1; --sage:#6B86AD; --shadow:0 1px 2px rgba(20,40,80,.04), 0 8px 28px rgba(20,40,80,.08); --shadow-lg:0 18px 50px rgba(20,41,75,.18); --radius:16px; --radius-lg:26px; --wrap:1180px; --fb:"Hanken Grotesk", system-ui, -apple-system, sans-serif; --fd:"Fraunces", Georgia, serif; } section.hero .wrap { box-shadow: 10px 10px 20px #00000017; } section.hero { padding-bottom: 20px; } *{box-sizing:border-box} html,body{background:var(--paper);max-width:100%} /* Clip horizontal overflow on only. Using overflow-x:hidden on turns it into a scroll container and silently kills the sticky header. */ html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--fb);font-size:18px;line-height:1.62;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;overflow-x:clip} img{max-width:100%;display:block} img,svg,video,iframe,canvas{max-width:100%} video,iframe{display:block;width:100%;border:0} table{width:100%;max-width:100%;border-collapse:collapse} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.14;letter-spacing:-.015em;margin:0} p{margin:0} /* ---------- MAIN CONTAINER : max 1180px, always centred ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px} section[id],header,footer,span[id]{scroll-margin-top:96px} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px} .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:.6rem;max-width:100%} .eyebrow::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px;flex:0 0 26px} .eyebrow.dashes::after{content:"";width:26px;height:2px;background:var(--green);border-radius:2px;flex:0 0 26px} .on-dark .eyebrow{color:#fff} .on-dark .eyebrow::before,.on-dark .eyebrow.dashes::after{background:#fff} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:700;font-size:1.05rem;padding:1rem 1.9rem;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .18s,box-shadow .18s,background .18s;line-height:1;white-space:nowrap;max-width:100%} .btn svg{width:20px;height:20px;flex:0 0 auto} .btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(74,158,63,.32)} .btn-primary:hover{background:var(--green-deep);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--navy);border-color:var(--border-deep)} .btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)} .btn-light{background:#fff;color:var(--navy)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .nav-cta .btn-primary { border-radius: 14px; } .nav-btn{padding:.8rem 1.1rem;font-size:.9rem} .topbar{height:5px;background:linear-gradient(90deg,var(--navy) 0 55%,var(--green) 55%)} header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;gap:.9rem;height:80px;flex-wrap:nowrap} .brand{flex:0 0 auto} .brand img{height:56px;width:auto} .nav-links{display:flex;align-items:center;gap:30px;flex:1 1 auto;justify-content:center;min-width:0; flex-wrap: wrap;} .nav-links a{font-weight:600;font-size:.86rem;color:var(--navy);white-space:nowrap} .nav-links a:hover{color:var(--navy)} .nav-cta{display:flex;align-items:center;gap:.75rem;flex:0 0 auto} .nav-phone{display:flex;flex-direction:column;line-height:1.05;text-align:right;white-space:nowrap} .nav-phone small{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:700} .nav-phone strong{font-family:var(--fd);font-size:1.06rem;color:var(--navy)} .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--navy)} .burger svg{width:28px;height:28px} /* ---------- HERO ---------- */ .hero{padding:34px 0 0} /* The hero sits a step wider than the 1180px content container, capped at 1400px so it still stops growing on very wide screens and when zoomed out. Every other section stays at 1180. */ .hero .wrap{max-width:1400px} .hero-card{position:relative;background:#fff;border:1px solid rgba(20,41,75,.07);border-radius:22px;box-shadow:0 20px 60px rgba(20,41,75,.14),0 2px 8px rgba(20,41,75,.05);overflow:hidden} .hero-inner{position:relative;z-index:2;padding:34px 46px 30px;text-align:center} .hero-logo{position:absolute;left:46px;top:30px;height:126px;width:auto} .hero-head{max-width:610px;margin-right: auto; margin-left: 10em;} .hero h1{font-size:clamp(1.95rem,3.05vw,2.8rem);color:var(--navy);margin:.5rem 0 0} .hero h1 .g{color:var(--green-deep);display:block} .hero h1 .n{display:block} section#how-it-works .band-illus { max-width: 50%; margin: 40px auto 0; } .heart-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:.8rem 0 .9rem} .heart-rule i{height:1px;background:var(--border-deep);flex:0 1 150px} .heart-rule svg{width:20px;height:20px;color:#f73621;} .hero .lede{font-size:1.04rem;color:var(--ink-soft);max-width:46ch;margin:0 auto} .hero-lower{width:62%;margin-top:1.5rem} .callout{display:flex;gap:1rem;align-items:center;text-align:left;background:#EEF2F8;border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:1rem 1.2rem;margin:0; max-width: 83%;} .callout span:last-child { max-width: 75%; } .callout .ci{flex:0 0 auto;color:var(--green)} .callout .ci svg{width:50px;height:50px} .callout b{display:block;font-weight:700;color:var(--navy);font-size:1.01rem;line-height:1.35} .callout em{display:block;font-family:var(--fd);font-style:italic;font-weight:500;color:var(--navy);margin-top:.3rem;font-size:.97rem;line-height:1.4} /*.callout span em { max-width: 70%; }*/ .hero-checks{display:flex;justify-content:flex-start;gap:0;margin:1.15rem 0 0;flex-wrap:wrap} .hero-checks div{display:flex;gap:.55rem;align-items:flex-start;text-align:left;padding:0 1rem;border-right:1px solid var(--border-deep);max-width:215px} .hero-checks div:first-child{padding-left:.2rem} .hero-checks div:last-child{border-right:none} .hero-checks svg{width:20px;height:20px;color:var(--green);flex:0 0 auto;margin-top:1px} .hero-checks span{font-size:.9rem;font-weight:600;color:var(--ink)} .hero-cta{margin-top:1.3rem;text-align:center} .hero-phone{display:block;font-family:sans-serif;font-size:1.68rem;font-weight:700;color:var(--green-deep);margin-top:.4rem;letter-spacing:.01em} .hero-fine{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.84rem;color:var(--ink-soft);text-align:left} .hero-fine svg{width:17px;height:17px;color:var(--green);flex:0 0 auto} .hero-photo{position:absolute;top:0;right:0;bottom:0;width:47%;z-index:1;overflow:hidden} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:68% center} .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 15%,rgba(255,255,255,.55) 33%,rgba(255,255,255,0) 60%)} /* ---------- CONNECTOR BAND ---------- */ .connector{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:56px} .connector .wrap{padding-top:30px;padding-bottom:30px} .connector-title{text-align:center;font-weight:700;color:var(--navy);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:16px} .connector svg{width:100%;height:auto;display:block;max-width:1000px;margin:0 auto} .connector-m{display:none;text-align:center} .connector-m .pill{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;border-radius:999px;padding:.5rem 1.1rem;margin-bottom:12px} .connector-m .row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .connector-m .row span{border:1.5px solid var(--border-deep);background:var(--card);border-radius:999px;padding:.4rem .85rem;font-size:.85rem;font-weight:700;color:var(--navy)} section{padding:76px 0} .sec-head{max-width:700px;margin:0 auto 44px;text-align:center} .sec-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--navy);margin-top:.7rem} .sec-head p{font-size:1.08rem;color:var(--ink-soft);margin-top:.85rem} .on-dark .sec-head h2{color:#fff} .on-dark .sec-head p{color:#BDCCE6} /* ---------- SECTION 3 : ONE SOURCE ---------- */ .onesource{background:var(--card)} .os-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .eyebrow-check{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep)} .eyebrow-check .bar{width:24px;height:2px;background:var(--green);border-radius:2px} .eyebrow-check svg{width:19px;height:19px} .os-grid h2{font-size:clamp(1.95rem,3.3vw,2.75rem);color:var(--navy);margin-top:.85rem} .os-grid h2 .g{color:var(--green-deep)} .os-rule{width:56px;height:3px;background:var(--green);border-radius:3px;margin:1.1rem 0 1.3rem} .os-points{display:grid;gap:.35rem} .os-points p{font-weight:700;color:var(--navy);font-size:1.05rem} .os-body{margin-top:1.3rem;color:var(--ink-soft);font-size:1.02rem;max-width:56ch} .os-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4.3;box-shadow:var(--shadow-lg);background:var(--navy)} .os-photo img{width:100%;height:100%;object-fit:cover} .advocate{position:absolute;right:16px;bottom:16px;background:var(--navy);color:#fff;border-radius:14px;padding:1rem 1.2rem;max-width:230px;box-shadow:var(--shadow-lg)} .advocate b{font-family:var(--fd);font-size:1.1rem;display:block} .advocate .r{width:34px;height:2px;background:var(--green-soft);border-radius:2px;margin:.45rem 0 .55rem} .advocate span{display:block;font-size:.88rem;color:#C6D3E8;line-height:1.5} .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:52px;border-top:1px solid var(--border);padding-top:38px} .pillar{text-align:center;padding:0 18px;border-right:1px solid var(--border)} .pillar:last-child{border-right:none} .pillar .pi{width:56px;height:56px;border-radius:50%;background:#EDF1E9;display:grid;place-items:center;color:var(--navy);margin:0 auto 14px} .pillar .pi svg{width:27px;height:27px} .pillar h3{font-size:1.04rem;color:var(--navy)} .pillar .r{width:26px;height:2px;background:var(--green);border-radius:2px;margin:.55rem auto .6rem} .pillar p{font-size:.92rem;color:var(--ink-soft)} /* ---------- CHALLENGE ---------- */ .challenge{background:var(--limestone)} .ch-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center} .ch-photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);background:var(--sage)} .ch-photo img{width:100%;height:auto;object-fit:cover} .ch-grid h2{font-size:clamp(1.85rem,3.1vw,2.5rem);color:var(--navy);margin-top:.7rem} .ch-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem} .ch-list li{display:flex;gap:.65rem;align-items:flex-start;font-weight:500} .ch-list .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:0 0 auto;margin-top:.55rem} .ch-close{margin-top:1.6rem;font-family:var(--fd);font-size:1.2rem;font-style:italic;color:var(--navy);max-width:48ch} /* ---------- WHAT WE DO ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .card .ic{width:52px;height:52px;border-radius:50%;background:#EDF1E9;display:grid;place-items:center;color:var(--navy);margin-bottom:15px} .card .ic svg{width:26px;height:26px} .card h3{font-size:1.2rem;color:var(--navy)} .card p{margin-top:.5rem;color:var(--ink-soft);font-size:1rem} .heart-close{display:flex;align-items:center;gap:16px;margin-top:42px} .heart-close i{flex:1;height:1px;background:var(--border-deep)} .heart-close .hb{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#f73621;flex:0 0 auto} .heart-close .hb svg{width:19px;height:19px} .heart-close-text{text-align:center;font-family:var(--fd);font-size:1.2rem;font-style:italic;color:var(--navy);margin-top:18px} /* ---------- ROADBLOCKS ---------- */ .roadblocks{background:var(--card);border-top:1px solid var(--border)} .rb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .rb{padding:0 18px;border-right:1px solid var(--border);text-align:center} .rb:last-child{border-right:none} .rb .ri{width:64px;height:64px;display:grid;place-items:center;color:var(--green-deep);margin:0 auto 12px} .rb .ri svg{width:44px;height:44px} .rb h3{font-size:1.05rem;color:var(--navy)} .rb p{font-size:.9rem;color:var(--ink-soft);margin-top:.5rem} .rb-boxes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px} .rb-box{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px} .rb-box h3{text-align:center;font-size:1.2rem;color:var(--navy);margin-bottom:16px} .rb-box ul{list-style:none;padding:0;margin:0;display:grid;gap:.65rem} .rb-box li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem} .rb-box li svg{width:20px;height:20px;color:var(--green);flex:0 0 auto;margin-top:3px} /* ---------- SERVICE AREA ---------- */ .area{background:#3b8433;color:#EAF0FA} .area .sec-head h2{color:#fff} .cities{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .5rem;max-width:800px;margin:0 auto} .cities span{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.45rem 1rem;font-weight:600;font-size:.95rem} .cities svg{width:15px;height:15px;color:#14294b;} .partners{margin-top:38px;text-align:center;border-top:1px solid rgba(255,255,255,.14);padding-top:32px} .partners .lbl{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff} .partner-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px;margin-top:20px} .partner-row span{font-family:var(--fd);font-size:1.08rem;color:#fff;letter-spacing:.06em} .partners .more{margin-top:18px;font-size:.92rem;color:#fff;font-style:italic} /* ---------- STEPS ---------- */ .steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .steps::before{content:"";position:absolute;top:31px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,var(--border-deep) 0 8px,transparent 8px 16px)} .step{position:relative;z-index:1;text-align:center} .step .num{width:64px;height:64px;border-radius:50%;background:var(--card);border:2px solid var(--green);color:var(--navy);font-family:var(--fd);font-size:1.5rem;font-weight:600;display:grid;place-items:center;margin:0 auto 15px;box-shadow:var(--shadow)} .step h3{font-size:1.05rem;color:var(--navy)} .step p{margin-top:.4rem;color:var(--ink-soft);font-size:.93rem} .steps-close{margin-top:40px;text-align:center;font-size:1.06rem;color:var(--ink-soft)} /* ---------- WHEN TO CALL ---------- */ .wtc{background:var(--limestone)} /* How It Works and Contact are both paper-backed and now adjacent, so the boundary needs the same hairline .roadblocks already uses. */ #contact{border-top:1px solid var(--border)} .wtc-h2{font-size:clamp(1.85rem,3.1vw,2.5rem);color:var(--navy);margin-top:.7rem} .wtc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .wtc-list{display:grid;gap:13px;margin-top:1.4rem} .wtc-list div{display:flex;gap:.85rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;font-weight:500;box-shadow:var(--shadow)} .wtc-list .ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:#EDF1E9;display:grid;place-items:center;color:var(--green-deep)} .wtc-list .ic svg{width:21px;height:21px} .wtc-photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--shadow-lg);background:var(--sage)} .wtc-photo img{width:100%;height:100%;object-fit:cover} .whenbar{margin-top:52px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px 24px} .whenbar h3{text-align:center;font-size:1.24rem;color:var(--navy);margin-bottom:22px} .whenbar .row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .whenbar .row div{text-align:center} .whenbar .row .wi{width:50px;height:50px;border-radius:50%;background:#EDF1E9;display:grid;place-items:center;color:var(--navy);margin:0 auto 10px} .whenbar .row .wi svg{width:25px;height:25px} .whenbar .row p{font-size:.9rem;font-weight:600;color:var(--ink)} /* ---------- CONTACT ---------- */ .contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:start} .contact-copy h2{font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--navy);margin-top:.7rem} .contact-copy p{color:var(--ink-soft);margin-top:.9rem;font-size:1.06rem} .contact-lines{margin-top:1.7rem;display:grid;gap:1rem} .contact-lines a{display:flex;gap:.85rem;align-items:center;font-weight:600;color:var(--navy)} .contact-lines .ic{width:46px;height:46px;border-radius:12px;background:rgba(28,63,115,.09);display:grid;place-items:center;color:var(--navy);flex:0 0 auto} .contact-lines .ic svg{width:22px;height:22px} .contact-lines small{display:block;font-weight:700;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)} form.card-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-lg)} .field{margin-bottom:16px} .field label{display:block;font-weight:600;font-size:.89rem;margin-bottom:.4rem} .field input,.field textarea{width:100%;font-family:var(--fb);font-size:1rem;padding:.85rem 1rem;border:1.5px solid var(--border-deep);border-radius:12px;background:#FCFDFF;color:var(--ink)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(28,63,115,.12)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-note{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem} .form-ok{display:none;background:rgba(74,158,63,.13);border:1px solid var(--green);border-radius:12px;padding:1rem;color:var(--green-deep);font-weight:600;margin-top:1rem} footer{background:var(--navy-deep);color:#B6C6E0;padding:58px 0 26px} .foot-messages{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)} .foot-msg{display:flex;gap:.7rem;align-items:flex-start} .foot-msg svg{width:21px;height:21px;color:var(--green-soft);flex:0 0 auto;margin-top:2px} .foot-msg span{font-family:var(--fd);color:#E7EEFA;font-size:1rem;line-height:1.3} .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:38px 0 26px} .foot-cols h4{font-family:var(--fb);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:#8AA0C6;margin-bottom:14px} .foot-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .foot-cols a{color:#C4D3EC;font-weight:500} .foot-cols a:hover{color:#fff} .foot-brand img{height:110px;width:auto;background:#fff;border-radius:12px;padding:8px 12px} .foot-brand p{margin-top:.9rem;font-size:.94rem;max-width:36ch} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#8AA0C6} .foot-legal{display:flex;gap:1.2rem;flex-wrap:wrap} .foot-legal a{color:#C4D3EC} .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s} .reveal.in{opacity:1;transform:none} .callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(20,40,80,.12)} .callbar a{flex:1;justify-content:center;padding:.85rem;font-size:1rem;min-width:0} /* ---------- RESPONSIVE HARDENING (no visual change at any width) ---------- */ .os-grid>*,.ch-grid>*,.wtc-grid>*,.contact-grid>*, .cards>*,.pillars>*,.rb-grid>*,.rb-boxes>*,.steps>*, .foot-messages>*,.foot-cols>*,.whenbar .row>*,.row2>*{min-width:0} .step>*,.pillar>*,.rb>*,.foot-msg>span,.wtc-list div,.rb-box li, .hero-checks div,.callout>span,.contact-lines a>span{min-width:0} .eyebrow-check{max-width:100%} .eyebrow-check .bar{flex:0 0 24px} .eyebrow-check svg{flex:0 0 auto} .contact-lines a>span,.foot-cols a,.foot-brand p{overflow-wrap:anywhere} .os-photo,.ch-photo,.wtc-photo,.card,.rb-box,.whenbar,form.card-form{max-width:100%} .cities span,.partner-row span{max-width:100%} .mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch} .foot-bottom>*{min-width:0} .image_one_coordinator img { height: 312px; object-fit: cover; margin: 10px 0; } /* ============================================================ RESPONSIVE BREAKPOINTS Verified at 1920 / 1440 / 1366 / 1280 / 1024 / 991 / 768 / 480 / 375 / 320 ============================================================ */ /* ---------- <= 1280px : nav collapses to burger ---------- */ /* ---------- <= 1280px : layout grids reflow (nav links stay visible) ---------- */ @media(max-width:1280px){ .pillars,.rb-grid{grid-template-columns:repeat(3,1fr);gap:26px 0} .pillar,.rb{border-right:none} .whenbar .row{grid-template-columns:repeat(3,1fr);gap:24px 14px} } /* ---------- Nav links persist to 1060px by shrinking in two steps ---------- Previously the burger took over at 1280px, which dropped the links on any windowed browser. Measured need: 1189px at .86rem, 1097px at .78rem. */ @media(max-width:1280px) and (min-width:1140px){ .nav-links{gap:.7rem} .nav-links a{font-size:.82rem} .nav-btn{padding:.72rem .95rem;font-size:.86rem} .nav-phone strong{font-size:1rem} .nav-phone small{font-size:.57rem} .nav-cta{gap:.6rem} .nav{gap:.7rem} } @media(max-width:1139px) and (min-width:931px){ .nav-links{gap:.5rem} .nav-links a{font-size:.775rem} .nav-btn{padding:.66rem .8rem;font-size:.8rem} .nav-btn svg{width:16px;height:16px} .nav-phone strong{font-size:.94rem} .nav-phone small{font-size:.54rem;letter-spacing:.08em} .nav-cta{gap:.5rem} .nav{gap:.55rem} .brand img{height:48px} } /* ---------- <= 1059px : links no longer fit, burger takes over ---------- */ @media(max-width:1059px){ /*.nav-links{display:block}*/ .nav{justify-content:space-between;gap:1.3rem} .nav-cta{gap:1rem} .nav-btn{padding:.85rem 1.4rem;font-size:.98rem} .nav-phone small{font-size:.63rem;letter-spacing:.12em} .nav-phone strong{font-size:1.14rem} } /* ---------- >= 992px : two-column hero, rebalanced for the 1180 container ---------- The card is now capped at 1124px instead of running full-bleed, so the copy sits closer to the photo. The fade is carried further right to keep the heading on a light backdrop, and the photo trimmed to match. */ /* ---------- >= 992px : two-column hero, split 60/40 ---------- Copy takes its own 60% column and the photo 40%, so there is no blank gap between them and no text sitting on the picture. The logo stays anchored in the corner as originally designed, with the heading indented to clear it. */ @media(min-width:992px){ .hero-inner{width:60%;padding:34px 34px 30px} .hero-head{margin-left:120px;margin-right:auto;max-width:100%} .hero-lower{width:100%} .hero-photo{width:40%} .hero-photo::after{background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .55) 4%, rgba(255, 255, 255, 0) 20%);} .hero-logo{position:absolute;left:30px;top:26px;height:92px} /*NEW CSS ADDITION*/ .hero-logo { top: 40px; height: 300px; width: 30%; object-fit: contain; left: 4%; } .hero-head { margin-left: 32%; } .contact-lines{ width: fit-content; /*margin-left: auto;*/ } } /* ---------- <= 991px : hero stacks, photo moves under the copy ---------- */ @media(max-width:991px){ .hero-card{min-height:0} .hero-inner{width:100%;padding:34px 28px 40px;text-align:center} .hero-head{max-width:none;margin-left:auto;margin-right:auto} .hero-lower{width:100%;max-width:560px;margin:1.4rem auto 0} .hero-logo{position:static;display:block;height:104px;margin:0 auto 14px} .hero-photo{position:static;width:100%;height:320px} .hero-photo::after{display:none} .hero-photo img{object-position:center 32%} .hero-checks{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px} .hero-checks div{border-right:none;max-width:none;padding:0} .hero-checks div:first-child{padding-left:0} .hero-fine{justify-content:center;text-align:center} /*NEW CSS ADDITION*/ section#contact div.faded-bg-image{ display: none; } } @media(max-width:1100px){ .os-grid,.wtc-grid{gap:36px} .ch-grid{gap:38px} .contact-grid{gap:40px} .advocate{right:12px;bottom:12px;max-width:212px;padding:.9rem 1rem} .pillar,.rb{padding:0 12px} } /* ---------- <= 991px : two-column blocks stack ---------- */ @media(max-width:991px){ section{padding:64px 0} .sec-head{margin-bottom:36px} .os-grid,.ch-grid,.wtc-grid,.contact-grid{grid-template-columns:1fr;gap:34px} .hero-card{min-height:0} .hero-inner{width:100%;padding:34px 28px 40px;text-align:center} .hero-head{max-width:none;margin-left:auto;margin-right:auto} .hero-lower{width:100%;max-width:560px;margin:1.4rem auto 0} .hero-logo{position:static;display:block;height:104px;margin:0 auto 14px} .hero-photo{position:static;width:100%;height:320px} .hero-photo::after{display:none} .hero-photo img{object-position:center 32%} /* Stack the three checks in one left-aligned column so they share the same left edge as the callout instead of each centring at its own width. */ .hero-checks{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px} .hero-checks div{border-right:none;max-width:none;padding:0} .hero-checks div:first-child{padding-left:0} .hero-fine{justify-content:center;text-align:center} .os-photo,.ch-photo,.wtc-photo{max-width:520px;margin-left:auto;margin-right:auto} .advocate{right:16px;bottom:16px;max-width:230px;padding:1rem 1.2rem} .cards{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr;gap:0} .steps::before{display:none} .step{display:grid;grid-template-columns:64px 1fr;gap:18px;text-align:left;align-items:start;padding:16px 0;border-bottom:1px solid var(--border);width:100%;max-width:640px;margin-left:auto;margin-right:auto} .step:last-child{border-bottom:none} .step .num{margin:0} .connector svg{display:none} .connector-m{display:block} .rb-boxes{grid-template-columns:1fr} .foot-messages,.foot-cols{grid-template-columns:1fr 1fr} } @media(max-width:930px){ .burger{display:inline-flex} .nav-links { display: none; } /*NEW CSS ADDITION*/ .nav-cta{ /*width: 100%;*/ justify-content: space-between; flex-grow: 1; } } /* ---------- <= 768px : tablet portrait ---------- */ @media(max-width:768px){ .pillars,.rb-grid{grid-template-columns:repeat(2,1fr);gap:32px 26px} .pillar,.rb{padding:0} .whenbar .row{grid-template-columns:repeat(2,1fr);gap:26px 14px} .hero-photo{height:280px} .partner-row{gap:12px 24px} form.card-form{padding:28px 24px} } /* ---------- <= 620px : phones ---------- */ @media(max-width:620px){ body{font-size:17px;padding-bottom:74px} .wrap{padding-left:20px;padding-right:20px} section{padding:52px 0} .sec-head{margin-bottom:30px} .cards,.ch-list,.pillars,.rb-grid,.foot-messages,.foot-cols,.row2{grid-template-columns:1fr} .whenbar .row{grid-template-columns:1fr 1fr} .hero{padding:20px 0 0} .hero-card{border-radius:16px} .hero-inner{padding:28px 20px 34px} .hero-logo{height:88px} .hero-photo{height:240px} .nav{height:70px;gap:.7rem} .nav-phone{display:none} .nav-cta{gap:.55rem} .nav-btn{padding:.62rem .85rem;font-size:.82rem} .nav-cta .btn svg{width:16px;height:16px} .burger{padding:6px} .burger svg{width:26px;height:26px} .brand img{height:46px} .callbar{display:flex} .hero-checks{flex-direction:column;align-items:flex-start;gap:12px} .hero-checks div{border-right:none;max-width:none;padding:0} .hero-checks div:first-child{padding-left:0} .callout{flex-direction:column;align-items:flex-start;gap:.7rem} .callout .ci svg{width:42px;height:42px} .ch-list li{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 15px} .step{display:grid;grid-template-columns:64px 1fr;gap:16px;text-align:left;align-items:start;padding:16px 0;border-bottom:1px solid var(--border);max-width:none} .step:last-child{border-bottom:none} .step .num{margin:0} /* Icon occupies column 1 and spans all rows; heading, rule and copy stack in column 2. Without explicit placement the paragraph wrapped back into the narrow icon column. */ .pillar{padding:0;text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:14px;row-gap:0;align-items:start} .pillar .pi{grid-column:1;grid-row:1/span 3} .pillar h3{grid-column:2;grid-row:1} .pillar .r{grid-column:2;grid-row:2} .pillar p{grid-column:2;grid-row:3} .rb{padding:0;text-align:left;display:grid;grid-template-columns:64px 1fr;column-gap:14px;row-gap:0;align-items:start} .rb .ri{grid-column:1;grid-row:1/span 2} .rb h3{grid-column:2;grid-row:1} .rb p{grid-column:2;grid-row:2} .pillar .pi,.rb .ri{margin:0} .pillar .r{margin:.5rem 0 .6rem} .advocate{position:static;max-width:none;border-radius:0} .os-photo{aspect-ratio:auto} .whenbar{padding:26px 18px} form.card-form{padding:24px 20px} .heart-close{margin-top:32px} } /* ---------- <= 480px : small phones ---------- */ @media(max-width:480px){ body{font-size:16.5px} .wrap{padding-left:18px;padding-right:18px} section{padding:46px 0} .hero h1{font-size:clamp(1.6rem,6.6vw,2.1rem)} .sec-head h2{font-size:clamp(1.5rem,6.2vw,1.9rem)} .os-grid h2{font-size:clamp(1.55rem,6.4vw,1.95rem)} .ch-grid h2,.wtc-h2,.contact-copy h2{font-size:clamp(1.5rem,6.2vw,1.85rem)} .hero .lede{font-size:1rem} .hero-phone{font-size:1.45rem} .btn{font-size:1rem;padding:.9rem 1.35rem} .callbar a{padding:.8rem .6rem;font-size:.95rem} .whenbar .row{grid-template-columns:1fr 1fr;gap:20px 10px} .whenbar h3{font-size:1.12rem} .heart-close-text,.ch-close{font-size:1.08rem} .steps-close{font-size:1rem} .hero-photo{height:210px} .hero-logo{height:78px} .foot-brand img{height:52px} .contact-lines .ic{width:42px;height:42px} .contact-lines a{font-size:.96rem} .field input,.field textarea{font-size:16px} } /* ---------- <= 400px : 375px and 320px devices ---------- */ @media(max-width:400px){ .wrap{padding-left:15px;padding-right:15px} .nav{gap:.5rem} .nav-btn{padding:.55rem .7rem;font-size:.76rem} .brand img{height:42px} .burger svg{width:24px;height:24px} .hero-inner{padding:24px 15px 30px} .hero-photo{height:190px} .whenbar .row{grid-template-columns:1fr} .hero-phone{font-size:1.32rem} .btn{font-size:.95rem;padding:.85rem 1.05rem} .callbar{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));gap:8px} .callbar a{font-size:.88rem;padding:.75rem .45rem} .step{grid-template-columns:52px 1fr;gap:13px} .step .num{width:52px;height:52px;font-size:1.25rem} .pillar{grid-template-columns:48px 1fr;column-gap:12px} .pillar .pi{width:48px;height:48px} .pillar .pi svg{width:23px;height:23px} .rb{grid-template-columns:52px 1fr;column-gap:12px} .rb .ri{width:52px;height:52px} .rb .ri svg{width:34px;height:34px} .callout{padding:.9rem 1rem} .rb-box{padding:22px 18px} form.card-form{padding:20px 16px} .cities span,.partner-row span{font-size:.88rem} } .mobile-menu{position:fixed;inset:0;z-index:80;background:var(--paper);transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;padding:24px} .mobile-menu.open{transform:none} .mm-top{display:flex;justify-content:space-between;align-items:center} .mm-top img{height:46px} .mm-close{background:none;border:none;cursor:pointer;color:var(--navy);padding:8px} .mm-close svg{width:30px;height:30px} .mobile-menu nav{display:flex;flex-direction:column;gap:6px;margin-top:30px} .mobile-menu nav a{font-family:var(--fd);font-size:1.35rem;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--border)} .mobile-menu .btn{margin-top:22px;padding:1.1rem} @media(max-width:480px){ .mobile-menu{padding:20px} .mobile-menu nav{margin-top:22px} .mobile-menu nav a{font-size:1.22rem;padding:11px 0} } @media(max-width:400px){ .mobile-menu{padding:16px} .mobile-menu .mm-top img{height:42px} .mobile-menu nav a{font-size:1.12rem;padding:10px 0} .mobile-menu .btn{margin-top:18px;padding:1rem;font-size:.95rem} } @media(max-height:520px){ .mobile-menu nav{margin-top:16px;gap:0} .mobile-menu nav a{font-size:1.05rem;padding:8px 0} .mobile-menu .btn{margin-top:14px;padding:.85rem} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .reveal{opacity:1;transform:none;transition:none} .btn,.card{transition:none} } /*NEW CSS ADDITION*/ a.brand { /*display: none;*/ } .wrap.nav{ flex-direction: row-reverse; } section.hero .wrap{ max-width: 100%; padding: 0; } section.hero .wrap .hero-card{ border-radius: 0; } section.hero{ padding-top: 0px; } /* Contact Background image addition*/ section#contact{ position: relative; overflow: hidden; } section#contact .wrap{ position: relative; z-index: 5; } section#contact div.faded-bg-image img{ width: 100%; max-width: 100%; height: 100%; object-fit: cover; } section#contact div.faded-bg-image{ position: absolute; left: 0; top: 0; width: 15%; height: 100%; z-index: 2; } section#contact div.faded-bg-image::after{ content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: #282D3C; background: linear-gradient(90deg, rgb(40 45 60 / 0%) 0%, rgb(246 248 251) 100%) } .callout{ display: none; } .hero-checks{ display: none; } .hero-fine{ justify-content: center; } header{ background-color: #edefe6; top: 0px; } .topbar{ display: none; } .cities svg{ display: none; } .cities span{ background-color: #1b2a44; } .whenbar{ background-color: #1b2a44; } .whenbar .row p{ color: white; } .whenbar h3{ color: white; } @media(min-width: 991px){ section#contact .wrap{ padding: 0 100px; } } @media(max-width: 1399px){ section#contact div.faded-bg-image { /*width: 15%;*/ top: 150px; } } /* NEW CSS ADDITION - Section imagery (added for client) */ .band-illus{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-top:44px;aspect-ratio:21/7;background:var(--sage)} .band-illus img{width:100%;height:100%;object-fit:cover;display:block} .rb-split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:46px} .rb-split.rb-split-flip{grid-template-columns:.9fr 1.1fr} .rb-split .rb-box{text-align:left} .rb-split .rb-box h3{text-align:left} .rb-split-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--sage)} .rb-split-photo img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:768px){.band-illus{aspect-ratio:16/10}} @media(max-width:620px){.band-illus{margin-top:34px;aspect-ratio:4/3}} @media(max-width:991px){.rb-split,.rb-split.rb-split-flip{grid-template-columns:1fr;gap:26px}.rb-split-flip .rb-split-photo{order:-1}} section#what-we-do .band-illus{ aspect-ratio: 21 / 10; } section#roadblocks .band-illus { aspect-ratio: 21 / 10; } section#how-it-works .band-illus { aspect-ratio: 21 / 10; } section#what-we-do .cards.updated{ grid-template-columns: repeat(2, 1fr); gap: 10px; } section#what-we-do .cards.updated .card .card__image img{ width: 100%; max-width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } section#what-we-do .cards.updated .card__content{ display: flex; gap: 20px; } section#what-we-do .wrap{ max-width: 1400px; } section#what-we-do .card__text{ display: flex; flex-direction: column; padding-top: 15px; } section#what-we-do .cards.updated .card{ display: flex; gap: 0px; justify-content: space-between; padding: 20px; background-color: transparent; box-shadow: unset; } section#what-we-do .cards.updated .card__content{ flex: 0 0 calc(55% - 10px); } section#what-we-do .cards.updated .card__image{ flex: 0 0 calc(45% - 10px); overflow: hidden; } section#roadblocks .rb-split-photo{ aspect-ratio: unset; height: 100%; } section.hero .wrap .hero-card{ min-height: 100vh; box-shadow: unset; display: flex; align-items: center; } section.hero .wrap .hero-card{ box-shadow: unset; } section#when-to-call .wtc-grid{ margin-top: 44px; align-items: stretch; } section#when-to-call .wtc-grid .wtc-photo{ aspect-ratio: unset; height: 100%; } section#when-to-call .wtc-grid .wtc-list{ margin-top: 0; } section#challenge .ch-grid { grid-template-columns: 1.15fr .85fr; } section#challenge .ch-photo{ order: 2; } section#challenge .ch-photo{ height: 48%; } section:not(.hero) { padding-top: 10px !important; padding-bottom: 10px !important; } section.hero .hero-head{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; } section.hero .hero-head .eyebrow.dashes{ justify-content: center; } footer .social-media-icons{ display: flex; gap: 20px; margin-top: 30px; } footer .social-media-icons svg{ width: 25px; height: 25px; } @media(max-width: 1200px){ section#what-we-do .cards.updated .card__content { flex-direction: column; gap: 0; } } @media(max-width: 991px){ section#what-we-do .cards.updated { grid-template-columns: repeat(1, 1fr); } section#roadblocks .rb-split-photo{ aspect-ratio: 4/3; height: auto; } section.hero .wrap .hero-card{ flex-direction: column; } section.hero .wrap .hero-photo{ flex-grow: 1; } section#when-to-call .wtc-grid .wtc-photo{ aspect-ratio: 4 / 4.6; height: auto; max-width: 100%; width: 100%; } section#challenge .ch-grid { grid-template-columns: 1fr; } section#challenge .ch-photo { height: auto; } section.hero .hero-photo { height: auto; } } @media(max-width: 600px){ section#what-we-do .cards.updated .card { flex-direction: column; gap: 20px; } section#what-we-do .cards.updated .card__content { flex: 0 0 auto !important; } section#what-we-do .cards.updated .card__image { flex: 0 0 auto !important; } section#what-we-do .cards.updated .card .card__image img { height: 300px; } } /* =================================================================== WordPress integration — additions to the original static build. =================================================================== */ .sla-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .form-error{display:none;background:rgba(238,59,46,.1);border:1px solid var(--red);border-radius:12px;padding:1rem;color:#b32218;font-weight:600;margin-bottom:1rem} .form-error.is-visible{display:block} .form-ok.is-visible{display:block} form.card-form.is-sending{opacity:.7;pointer-events:none} .field-error{display:block;margin-top:.35rem;font-size:.85rem;font-weight:600;color:var(--red)} .nav-links a.is-current,.mobile-menu nav a.is-current{color:var(--green-deep)} .sla-page{padding:60px 0 80px} .sla-page .entry-title{margin-bottom:1.2rem} .sla-page .entry-content>*+*{margin-top:1.1rem} .sla-page .entry-content h2,.sla-page .entry-content h3{margin-top:2rem} .sla-page .entry-content ul,.sla-page .entry-content ol{padding-left:1.4rem} .sla-page .entry-content li+li{margin-top:.4rem} .sla-page .entry-content a{color:var(--navy);text-decoration:underline} .sla-archive-list{display:grid;gap:26px;margin-top:2rem} .sla-archive-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)} .sla-archive-item h2{font-size:1.5rem} .sla-archive-item .meta{color:var(--ink-soft);font-size:.9rem;margin:.4rem 0 .8rem} .sla-pagination{margin-top:2.4rem;display:flex;gap:.5rem;flex-wrap:wrap} .sla-pagination .page-numbers{padding:.5rem .9rem;border:1px solid var(--border-deep);border-radius:999px;font-weight:600} .sla-pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)} .sla-search{display:flex;gap:.6rem;max-width:520px} .sla-search input[type=search]{flex:1 1 auto;padding:.9rem 1.1rem;border:1px solid var(--border-deep);border-radius:12px;font:inherit} /* =================================================================== FOUNDERS — photo + background, alternating sides. Uses the same tokens as the rest of the page (navy / green / paper). =================================================================== */ .founders{background:var(--card);border-top:1px solid var(--border)} .founder{display:grid;grid-template-columns:.86fr 1.14fr;gap: 13px 52px;align-items:center} .founder + .founder{margin-top:64px;padding-top:64px;border-top:1px solid var(--border)} .founder-flip .founder-photo{order:2} /* Portrait card: white panel, navy arc sweep, green corner accent. */ .founder-photo{position:relative} .founder-frame{position:relative;overflow:hidden;background:var(--limestone);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:unset;display:grid;place-items:center} .founder-flip .founder-frame { aspect-ratio: 4 / 4 !important; } /* .founder-frame::before{content:"";position:absolute;left:-18%;top:-16%;width:56%;height:34%;border-radius:50%;background:var(--green-soft);opacity:.55} */ /* .founder-frame::after{content:"";position:absolute;right:-26%;bottom:-34%;width:118%;height:62%;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:linear-gradient(120deg,var(--navy) 0%,var(--sage) 100%);transform:rotate(-8deg)} */ .founder-frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center} .founder-initials{position:relative;z-index:1;font-family:var(--fd);font-size:clamp(3rem,7vw,4.6rem);font-weight:600;color:var(--navy);letter-spacing:.02em} /* Name plate sitting over the bottom of the portrait. */ .founder-plate{position:relative;z-index:2;margin:-56px 18px 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow)} .founder-plate b{display:block;font-family:var(--fd);font-size:1.35rem;color:var(--navy);line-height:1.2} .founder-plate .founder-credential{display:block;margin-top:.3rem;font-size:.9rem;font-weight:600;color:var(--navy);line-height:1.45} .founder-plate em{display:block;margin-top:.4rem;font-size:.82rem;color:var(--ink-soft);line-height:1.5} /* Copy column. */ .founder-body h3{font-size:clamp(1.6rem,2.6vw,2.15rem);color:var(--navy)} .founder-role{margin-top:.45rem;font-weight:700;font-size:.98rem;color:var(--green-deep)} .founder-body .r{width:54px;height:3px;background:var(--green);border-radius:2px;margin:1rem 0 1.1rem} .founder-bio p{color:var(--ink-soft);font-size:1.02rem} .founder-bio p + p{margin-top:.9rem} /* Awards list. */ .founder-creds{list-style:none;padding:10px 22px;margin:0 0 0;display:grid;gap:.95rem;border:1px solid var(--border);border-left:4px solid var(--green);border-radius:var(--radius);background:linear-gradient(90deg,var(--card) 0%,rgba(167,216,158,.42) 100%)} .founder-creds li{line-height:1.5} .founder-creds .fc-title{display:block;font-size:1rem;color:var(--ink)} .founder-creds .fc-title b{color:var(--navy)} .founder-creds .fc-detail{display:block;font-size:.92rem;font-weight:600;color:var(--green-deep);margin-top:.1rem} @media(max-width:991px){ .founder{grid-template-columns:1fr;gap:30px} .founder-flip .founder-photo{order:0} .founder + .founder{margin-top:46px;padding-top:46px} .founder-frame{aspect-ratio:1/1;max-width:420px;margin:0 auto} .founder-plate{max-width:420px;margin:-52px auto 0} } @media(max-width:620px){ .founder{gap:24px} .founder + .founder{margin-top:38px;padding-top:38px} .founder-frame{aspect-ratio:4/5} .founder-plate{margin:-46px 14px 0;padding:.9rem 1rem} .founder-plate b{font-size:1.2rem} .founder-creds{padding:18px 16px} } /* =================================================================== PARTNER LOGO STRIP — marquee / slider / static, all driven by the --ls-* custom properties written on the wrapper by the template. =================================================================== */ /* The original build clamps every non-hero section to 10px padding under 1400px with !important, so this section states its own spacing. */ .logos{background:var(--limestone);border-top:1px solid var(--border)} section.logos{padding-top:70px!important;padding-bottom:70px!important} .logo-slider{--ls-per:5;--ls-gap:56px;--ls-height:74px;--ls-duration:34s;--ls-copies:2;position:relative;display:flex;align-items:center;gap:14px} .ls-viewport{flex:1 1 auto;min-width:0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ls-track{display:flex;align-items:center;gap:var(--ls-gap)} .ls-slide{flex:0 0 calc((100% - (var(--ls-gap) * (var(--ls-per) - 1))) / var(--ls-per));display:grid;place-items:center;min-width:0} /* A fixed box plus object-fit:contain keeps every logo the same height no matter how large the source file is. A percentage max-height would not resolve here, which let big images overflow and get clipped. */ .ls-logo{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ls-height);text-decoration:none} .ls-logo img{width:100%;height:100%;object-fit:contain;object-position:center} .ls-name{font-family:var(--fd);font-weight:600;font-size:.95rem;line-height:1.3;color:var(--navy);text-align:center; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Muted until hovered. */ /* .logo-slider.is-muted .ls-logo{filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s} */ .logo-slider.is-muted .ls-logo:hover,.logo-slider.is-muted .ls-logo:focus-visible{filter:grayscale(0);opacity:1} /* --- Continuous scroll --------------------------------------------- */ .logo-slider--marquee .ls-track{width:max-content;animation:ls-marquee var(--ls-duration) linear infinite} /* The track is max-content wide, so a percentage basis would be circular: size the cell from the viewport instead, clamped to sane bounds. */ .logo-slider--marquee .ls-slide{flex:0 0 clamp(110px, calc((100vw - (var(--ls-gap) * var(--ls-per))) / var(--ls-per)), 250px)} .logo-slider--marquee.is-paused .ls-track, .logo-slider--marquee:hover .ls-track{animation-play-state:paused} @keyframes ls-marquee{ from{transform:translateX(0)} to{transform:translateX(calc(-100% / var(--ls-copies) - var(--ls-gap) / var(--ls-copies)))} } /* --- Paged slider ---------------------------------------------------- */ .logo-slider--slide .ls-track{transition:transform .55s cubic-bezier(.22,.61,.36,1)} .ls-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-deep);background:var(--card);color:var(--navy); display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .2s,opacity .2s;box-shadow:var(--shadow)} .ls-arrow svg{width:20px;height:20px} .ls-arrow:hover:not(:disabled){border-color:var(--navy);transform:translateY(-2px)} .ls-arrow:disabled{opacity:.35;cursor:default} .ls-dots{position:absolute;left:0;right:0;bottom:-30px;display:flex;justify-content:center;gap:.5rem} .ls-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--border-deep);cursor:pointer;transition:background .2s,transform .2s} .ls-dot.is-active{background:var(--green);transform:scale(1.25)} .logo-slider--slide:has(.ls-dots){margin-bottom:30px} /* --- Static grid ------------------------------------------------------ */ .logo-slider--static .ls-viewport{-webkit-mask-image:none;mask-image:none;overflow:visible} .logo-slider--static .ls-track{flex-wrap:wrap;justify-content:center;row-gap:calc(var(--ls-gap) / 1.6)} @media(max-width:991px){ .logo-slider{gap:8px} .logo-slider--marquee .ls-slide{flex-basis:clamp(100px, calc((100vw - (var(--ls-gap) * var(--ls-per))) / var(--ls-per)), 190px)} .ls-arrow{width:38px;height:38px} } @media(max-width:620px){ .logo-slider{--ls-gap:32px} .logo-slider--marquee .ls-slide{flex-basis:clamp(96px, calc((100vw - (var(--ls-gap) * var(--ls-per))) / var(--ls-per)), 150px)} .ls-viewport{-webkit-mask-image:none;mask-image:none} } @media(prefers-reduced-motion:reduce){ .logo-slider--marquee .ls-track{animation:none} .logo-slider--slide .ls-track{transition:none} }