/* Cart Ignite ------------------------------------------------------------ Colour notes: --muted and --ember are tuned to clear WCAG AA (4.5:1) on both --bg and --surface. --ember2 is only ever used as a gradient END for large decorative fills, never as text colour on light backgrounds. ------------------------------------------------------------------------- */ /* Fonts are loaded from Google Fonts in with display=swap. TODO (perf): self-host these two families to remove the third-party render-blocking request. See "Self-hosting the fonts" in README.md — the @font-face block to paste is written out there, and swapping it in is the single biggest remaining LCP win on this site. */ :root{ --bg:#eef5f5;--fg:#0d2226;--muted:#4d666b;--surface:#ffffff;--surface2:#f4fafa; --border:#c3d6d6;--ember:#00625e;--ember2:#33a397; --grad:linear-gradient(135deg,#00625e 0%,#19827e 100%); --grad-soft:linear-gradient(135deg,#00706b 0%,#33a397 100%); --shadow-ember:0 20px 60px -20px rgba(31,138,134,.35); --shadow-card:inset 0 1px 0 rgba(255,255,255,.6),0 30px 60px -30px rgba(13,34,38,.18); --radius:1rem;--tap:44px; --border-strong:#749393; /* 3.31:1 on white, 3.0:1 on --bg (WCAG 1.4.11) */ --head-h:64px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ margin:0;background:var(--bg);color:var(--fg); font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;line-height:1.6; background-image:radial-gradient(1200px 600px at 80% -10%,rgba(47,166,162,.10),transparent 70%),radial-gradient(900px 500px at -10% 10%,rgba(31,138,134,.07),transparent 70%); background-attachment:fixed; overflow-x:hidden; /* belt and braces against stray wide children */ } h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;margin:0;line-height:1.15} p{margin:0} a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block;height:auto} ul,ol{margin:0} /* Visible focus for keyboard users on every interactive element. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--ember);outline-offset:2px;border-radius:4px } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ember);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600 } .skip-link:focus{left:0} .container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%} @media(min-width:640px){.container{padding:0 24px}} .muted{color:var(--muted)} .ember{color:var(--ember)} .u{text-decoration:underline;text-underline-offset:2px} .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--ember);font-weight:600;margin:0} .tag{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ember);font-weight:600;margin:0} /* Gradient text uses the darker gradient so it still clears AA as large text. */ .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} @supports not (background-clip:text){.grad-text{color:var(--ember);background:none}} /* Forced-colors / high-contrast users get real text, not a transparent fill. */ @media(forced-colors:active){.grad-text{color:CanvasText;background:none;-webkit-text-fill-color:CanvasText}} .section{padding:64px 0} .section-sm{padding:40px 0} @media(min-width:900px){.section{padding:80px 0}.section-sm{padding:48px 0}} /* ---------- buttons: min 44px tap target ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:999px;padding:12px 22px;font-size:15px;font-weight:600; min-height:var(--tap);border:1px solid transparent;cursor:pointer; transition:transform .15s ease,box-shadow .15s ease;text-align:center; max-width:100%; } .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-ember)} .btn-primary:hover{transform:translateY(-1px)} .btn-ghost{border-color:var(--border);background:rgba(255,255,255,.7);color:var(--fg)} .btn-ghost:hover{border-color:var(--ember)} .btn-sm{padding:9px 18px;font-size:14px;min-height:40px} .btn-lg{padding:14px 26px;font-size:16px} .btn-block{width:100%} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:24px;transition:border-color .15s,box-shadow .15s;min-width:0 } a.card:hover,.tile:hover{border-color:var(--ember);box-shadow:var(--shadow-ember)} .card-tint{background:linear-gradient(135deg,var(--surface),var(--surface2))} /* ---------- header ---------- */ header.site{ position:sticky;top:0;z-index:50;backdrop-filter:blur(16px); background:rgba(238,245,245,.9);border-bottom:1px solid var(--border) } header.site .row{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 20px;max-width:1200px;margin:0 auto } header.site .logo{height:44px;width:auto} @media(min-width:900px){header.site .row{padding:12px 24px}header.site .logo{height:52px}} header.site nav{display:none;gap:28px} header.site nav a{ font-size:15px;font-weight:600;color:var(--fg); display:inline-flex;align-items:center;min-height:var(--tap) } header.site nav a:hover{color:var(--ember)} header.site nav a[aria-current=page]{color:var(--ember);box-shadow:inset 0 -2px 0 var(--ember)} .head-actions{display:flex;align-items:center;gap:10px} /* Mobile menu button. Without this the nav is unreachable on phones. */ .nav-toggle{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:var(--tap);height:var(--tap);padding:10px;border:1px solid var(--border); border-radius:10px;background:rgba(255,255,255,.7);cursor:pointer } .nav-toggle span{display:block;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s,opacity .2s} .nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:899px){ header.site nav.open{ display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%; background:var(--bg);border-bottom:1px solid var(--border);padding:8px 20px 16px; box-shadow:0 20px 40px -24px rgba(13,34,38,.4) } header.site nav.open a{ width:100%;padding:4px 0;font-size:17px;border-bottom:1px solid var(--border) } header.site nav.open a:last-child{border-bottom:none} } @media(min-width:900px){ header.site nav{display:flex} .nav-toggle{display:none} } /* ---------- breadcrumbs ---------- */ .crumbs{margin-bottom:20px} .crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted)} .crumbs li+li::before{content:"/";margin-right:6px;color:var(--border)} .crumbs a{color:var(--muted);display:inline-block;padding:5px 0} .crumbs a:hover{color:var(--ember);text-decoration:underline} .crumbs [aria-current=page]{color:var(--fg)} /* ---------- hero ---------- */ .eyebrow-pill{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border); background:rgba(255,255,255,.7);padding:7px 14px;border-radius:999px; color:var(--muted);font-size:13px } .hero h1{font-size:clamp(2.2rem,7vw,5.2rem);font-weight:600;line-height:1.04;margin-top:20px} .hero-lede{font-size:clamp(1rem,2.2vw,1.2rem);max-width:680px;margin-top:20px} .hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px} .hero-note{font-size:13px;margin-top:16px} .h-page{font-size:clamp(2rem,5.5vw,4.2rem);font-weight:600;margin-top:8px;max-width:16ch} .h-post{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:600;margin-top:8px;max-width:22ch} .h-big{font-size:clamp(1.8rem,4vw,3.2rem);margin-top:8px;font-weight:600} .h-sec{font-size:clamp(1.5rem,3vw,2.4rem);margin-top:8px;font-weight:600} .h-card{font-size:1.25rem;font-weight:600;margin-bottom:4px} .lede{font-size:clamp(1rem,2vw,1.12rem);margin-top:20px;max-width:64ch} .lede-sm{margin-top:8px;max-width:64ch} .narrow-page{max-width:760px} .partner-strip{margin-top:40px} .ps-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:10px} .partner-strip ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px} .partner-strip li{ font-size:12px;color:var(--muted);border:1px solid var(--border); background:rgba(255,255,255,.6);padding:6px 14px;border-radius:999px } .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px} .sec-link{font-size:14px;white-space:nowrap} .sec-link:hover{color:var(--ember)} /* ---------- grids: auto-fit + a min that never exceeds a phone ---------- */ .row-2,.row-3,.row-4{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:760px){ .row-2{grid-template-columns:repeat(2,minmax(0,1fr))} .row-3{grid-template-columns:repeat(2,minmax(0,1fr))} .row-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:1000px){ .row-3{grid-template-columns:repeat(3,minmax(0,1fr))} .row-4{grid-template-columns:repeat(4,minmax(0,1fr))} } .case-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:48px} @media(min-width:820px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .post-grid,.svc-grid,.price-grid,.rel-grid,.metric-grid,.belief-cards,.faq-grid,.t-grid{margin-top:24px} .svc-grid{margin-top:48px} .brand-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:20px} /* ---------- bento ---------- */ .bento{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1000px){ .bento{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(190px,auto)} .tile-lg{grid-column:span 4;grid-row:span 2} .bento .tile:not(.tile-lg){grid-column:span 2} } .bento .tile{ display:flex;flex-direction:column;justify-content:space-between;gap:16px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:22px;transition:border-color .15s,box-shadow .15s;min-width:0 } .tile-body{display:block} .tile-h{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:600;display:block;letter-spacing:-.02em} .tile-lg .tile-h{font-size:clamp(1.4rem,2.5vw,1.9rem)} .tile-p{display:block;margin-top:8px;font-size:14px} .tile-cta{display:inline-block;margin-top:12px;font-size:13px;font-weight:600} /* ---------- stats ---------- */ .stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.5)} .stats .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);max-width:1200px;margin:0 auto} @media(min-width:900px){.stats .row{grid-template-columns:repeat(4,minmax(0,1fr))}} .stats .cell{background:var(--bg);padding:28px 20px} .stats .v{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stats .l{color:var(--muted);font-size:14px;margin-top:6px} /* ---------- why / beliefs ---------- */ .why{gap:40px;align-items:start} .why-p{margin-top:20px;font-size:1.02rem} .belief-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px} .belief{display:flex;gap:14px;padding:16px;font-size:14px;align-items:flex-start} .belief-ico{ flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px; background:var(--grad);color:#fff;font-weight:700;font-size:13px } .belief-cards .belief-ico{background:none;color:var(--ember);font-size:22px;display:block;width:auto;height:auto} /* ---------- cards: services, cases, posts ---------- */ .svc-top{display:flex;justify-content:space-between;gap:8px} .svc-h{font-size:1.35rem;font-weight:600;margin-top:14px} .svc-p{margin-top:8px;font-size:14px} .rel-h{font-size:1.05rem;font-weight:600;margin-top:8px} .rel-p{margin-top:8px;font-size:13px} .case-card,.case-teaser{display:block} .cc-top{display:flex;justify-content:space-between;gap:12px} .cc-sector{font-size:12px;margin-top:8px} .cc-name{font-size:1.4rem;font-weight:600;margin-top:8px} .cc-head{font-family:'Space Grotesk',sans-serif;font-size:1.12rem;margin-top:14px} .cc-sum{margin-top:12px;font-size:14px} .cc-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--border);padding-top:18px;margin-top:20px} .m-v{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;overflow-wrap:anywhere} .m-v-lg{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem)} .cc-cta,.ct-cta{display:inline-block;margin-top:18px;font-size:13px;font-weight:600} .ct-name{font-size:1.2rem;font-weight:600;margin-top:10px} .ct-head{font-family:'Space Grotesk',sans-serif;font-size:1rem;margin-top:10px} .ct-metric{font-size:13px;margin-top:8px} .case-head{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.2rem,2.5vw,1.7rem);margin-top:12px} .metric{text-align:center} .note-p{margin-top:12px;font-size:14px;max-width:60ch} .note .btn{margin-top:18px} .brand-card{padding:16px} .bc-n{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600} .bc-s{margin-top:4px;font-size:12px} .pc-top{display:flex;justify-content:space-between;gap:12px;font-size:12px} .pc-min{font-size:12px} .pc-h{font-size:1.25rem;font-weight:600;margin-top:14px} .pc-p{font-size:14px;margin-top:10px} .pc-meta{font-size:12px;margin-top:18px} /* ---------- pricing ---------- */ .price-card{display:flex;flex-direction:column;position:relative} .price-card.featured{border-color:var(--ember);box-shadow:var(--shadow-ember)} .price-badge{position:absolute;top:-10px;left:24px;background:var(--grad);color:#fff;padding:4px 12px;border-radius:999px;font-size:10px} .price-name{font-size:1.15rem;font-weight:600} .price-v{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:600;margin-top:10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .price-u{font-size:13px} .price-s{font-size:14px;margin-top:12px} .ticks{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:9px} .ticks li{display:flex;gap:10px;font-size:14px;align-items:flex-start} .ticks .ember{flex:0 0 auto;font-weight:700} .outcomes{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:10px} .outcomes li{border-left:2px solid var(--ember);padding-left:14px;color:var(--muted);font-size:14px} .fit-grid{list-style:none;padding:0} .fit-card{font-size:14px} .steps{list-style:none;padding:0;margin-top:28px;counter-reset:s} .step{display:block} .step-n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:600} .step-h{margin-top:14px;font-size:1.05rem;font-weight:600} .step-p{margin-top:8px;font-size:14px} /* ---------- FAQ ---------- */ .faq-grid{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:900px){.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} details.card{padding:0} details summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px; font-family:'Space Grotesk',sans-serif;font-weight:600;padding:18px 22px;min-height:var(--tap); align-items:center;font-size:1rem } details summary::-webkit-details-marker{display:none} details[open] summary .plus{transform:rotate(45deg)} details summary .plus{color:var(--ember);transition:transform .15s;font-size:20px;flex:0 0 auto;line-height:1} .details-body{padding:0 22px 20px} .details-body p{font-size:14px} /* ---------- CTA ---------- */ .cta-card{ position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--border); background:linear-gradient(135deg,var(--surface),var(--surface2));padding:32px; box-shadow:var(--shadow-card) } @media(min-width:760px){.cta-card{padding:44px}} .cta-h{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:600;max-width:22ch} .cta-p{max-width:56ch;margin-top:14px} .cta-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px} /* ---------- prose ---------- */ .prose{max-width:72ch;margin-top:32px} .prose p,.prose li{color:#173136;font-size:1.02rem} .prose p{margin:16px 0} .prose h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin:44px 0 8px;font-weight:600} .prose h3{font-size:1.2rem;margin:30px 0 4px;font-weight:600} .prose ul,.prose ol{padding-left:22px;margin:14px 0} .prose li{margin:8px 0} .prose ul li::marker,.prose ol li::marker{color:var(--ember)} .prose blockquote{border-left:3px solid var(--ember);padding-left:18px;color:var(--muted);font-style:italic;margin:24px 0} .prose .callout{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin:26px 0} .prose .callout .t{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ember);font-weight:600} .prose a{color:var(--ember);text-decoration:underline;text-underline-offset:2px} .prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px} .prose th,.prose td{border:1px solid var(--border);padding:10px;text-align:left} .post-meta{font-size:13px;margin-top:14px} .author-box{margin-top:48px} .ab-name{font-size:1.2rem;font-weight:600;margin-top:6px} .ab-p{margin-top:10px;font-size:14px} .author-box p:last-child{margin-top:12px} /* ---------- about / contact ---------- */ .about-split{gap:40px;align-items:start} .about-p{margin-top:16px} .founder{position:sticky;top:calc(var(--head-h) + 20px)} @media(max-width:759px){.founder{position:static}} .f-name{font-size:1.3rem;font-weight:600;margin-top:8px} .f-bio{margin-top:12px;font-size:14px} .f-meta{margin-top:20px;display:flex;flex-direction:column;gap:12px} .f-meta dt{margin-bottom:2px} .f-meta dd{margin:0;font-size:14px} .contact-split{gap:40px;align-items:start} .book-card{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:32px;border-color:var(--ember)} .bk-l{display:flex;align-items:center;gap:16px} .bk-ico{font-size:22px} .bk-h{font-family:'Space Grotesk',sans-serif;font-weight:600;display:block} .bk-p{display:block;font-size:12px;margin-top:4px} .contact-facts{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px} .contact-facts .card{padding:16px} .contact-facts p+p{margin-top:6px;font-size:14px} .contact-facts a{display:inline-block;padding:6px 0} /* ---------- forms ---------- */ .form{display:flex;flex-direction:column} .form .field{margin-bottom:18px;border:0;padding:0} .form label,.form legend{ display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em; color:var(--muted);margin-bottom:8px;font-weight:600;padding:0 } .form input,.form textarea,.form select{ width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px; padding:12px 14px;color:var(--fg);font:inherit;font-size:16px; /* 16px stops iOS zoom */ min-height:var(--tap) } .form textarea{min-height:120px;resize:vertical} .form input:focus,.form textarea:focus,.form select:focus{border-color:var(--ember)} .form input[aria-invalid=true],.form textarea[aria-invalid=true]{border-color:#b3261e} .err{color:#b3261e;font-size:13px;margin-top:6px} .chk-grid{display:grid;gap:8px;grid-template-columns:1fr} @media(min-width:520px){.chk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .chk{ display:flex;align-items:flex-start;gap:10px;font-size:14px;text-transform:none; letter-spacing:normal;color:var(--fg);font-weight:400;min-height:var(--tap); align-items:center;margin-bottom:0 } .chk input{width:24px;height:24px;min-height:24px;flex:0 0 24px;accent-color:var(--ember)} .consent .chk{align-items:flex-start;padding-top:4px} .consent .chk span{line-height:1.45} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{margin-top:14px;font-size:14px;min-height:1.2em} .form-status.ok{color:var(--ember);font-weight:600} .form-status.bad{color:#b3261e;font-weight:600} .form-note{font-size:13px;margin-top:12px} /* ---------- testimonials ---------- */ .t-card{margin:0} .t-card blockquote{margin:0;font-size:1.02rem} .t-card figcaption{margin-top:14px;font-size:13px} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--border);margin-top:96px;background:rgba(255,255,255,.45)} footer.site .grid{ display:grid;gap:36px;grid-template-columns:1fr;padding:48px 20px;max-width:1200px;margin:0 auto } @media(min-width:640px){footer.site .grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:56px 24px}} @media(min-width:1000px){footer.site .grid{grid-template-columns:2fr 1fr 1fr auto}} .f-logo{height:48px;width:auto} .f-desc{max-width:42ch;font-size:14px;margin-top:14px} .f-mail{font-size:14px;text-decoration:underline;text-underline-offset:2px;display:inline-block;margin-top:14px;min-height:var(--tap);display:inline-flex;align-items:center} .f-loc{font-size:13px;margin-top:6px} .f-h{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:12px;font-weight:600} footer.site ul{list-style:none;padding:0;display:flex;flex-direction:column} footer.site li a{ color:var(--muted);font-size:14px;display:inline-flex;align-items:center;min-height:var(--tap) } footer.site li a:hover{color:var(--ember);text-decoration:underline} .legal{border-top:1px solid var(--border);padding:20px;text-align:center;color:var(--muted);font-size:12px}