/*
Theme Name: Zoha Socials
Theme URI: https://zohasocials.com
Author: Zoha Socials
Author URI: https://zohasocials.com
Description: The Zoha Socials WordPress theme — dark editorial one-page layout with a Services content type and full Customizer control over every heading, paragraph, and image.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zoha-socials
Tags: one-column, dark, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* NOTE: all values below are DEFAULTS only. Every color, font, and layout
   dimension listed under :root is overridden live from the WordPress
   Customizer (see inc/customizer.php) via an inline <style> block printed
   in the document <head>. Changing these defaults just changes what a
   fresh install looks like before anyone touches the Customizer. */
:root{
  --bg:#0E1312;
  --card-bg:#131D16;
  --card-border:#223733;
  --band-bg:#1F3833;
  --accent:#92AE82;
  --accent-dim:#71876a;
  --text:#ECEEE9;
  --text-muted:#9CA79E;
  --line:#223733;

  --font-display:'Libre Baskerville', Georgia, serif;
  --font-serif:'Libre Baskerville', Georgia, serif;
  --font-sans:'IBM Plex Sans', system-ui, sans-serif;

  --wrap-width:1160px;
  --nav-h:92px;
  --ease:ease-in-out;
  --duration-fast:150ms;
  --duration-slow:450ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--wrap-width);margin:0 auto;padding:0 24px;position:relative}

h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--text);letter-spacing:0.01em}
p{font-family:var(--font-sans);font-size:15px;font-weight:300;line-height:1.65;color:var(--text-muted)}

.eyebrow{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted)}

.btn{font-family:var(--font-sans);font-size:16px;font-weight:400;padding:16px 32px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:none;transition:transform .25s ease,background .25s ease}
.btn-solid{background:var(--accent);color:#08110A}
.btn-solid:hover{background:#b8d0a5;transform:translateY(-2px)}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#08110A;padding:10px 16px;z-index:9999}
.skip-link:focus{left:0}

/* ===== Logo mark: bone circle badge with two dark arcs ("B1 The Meet") ===== */
.zs-mark{display:block;flex-shrink:0;object-fit:contain}

/* ===== PAGE LOADER ===== */
.page-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.page-loader.is-loaded{opacity:0;visibility:hidden;pointer-events:none}
.page-loader-mark{width:64px;height:64px;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;animation:loaderMark 2.8s linear infinite}
.page-loader-mark .zs-mark{width:64px;height:64px}
@keyframes loaderMark{to{transform:rotate(360deg)}}

/* ===== NAV ===== */
nav.site{height:var(--nav-h);display:flex;align-items:center}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img.custom-logo{max-height:32px;width:auto}
.brand-name,.footer-brand-name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.footer-brand{display:flex;align-items:center;gap:12px}
.brand .zs-mark{width:38px;height:38px}
.footer-brand .zs-mark{width:28px;height:28px}
.footer-brand-name{font-size:11px;font-weight:400;letter-spacing:.08em;opacity:.65;line-height:1}

.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0.05em;color:var(--text-muted)}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-size:16px;color:var(--text);cursor:pointer}

/* ===== HERO ===== */
section.hero{position:relative;min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;overflow:visible;text-align:left}
section.hero:before,section.hero:after{display:none}
section.hero:before{width:920px;height:920px;top:-250px;left:-270px}
section.hero:after{width:690px;height:690px;top:-135px;left:-150px}
.hero-rings{position:absolute;top:48%;left:91%;transform:translate(-50%,-50%);width:min(470px,60vw);aspect-ratio:1/1;pointer-events:none;z-index:0;overflow:visible}
.hero-rings .ring-outline{fill:none;stroke:rgba(146,174,130,0.12)}
.hero-rings .ring-segment{fill:none;stroke:rgba(146,174,130,0.24);stroke-linecap:round}
.hero-rings .ring-center{fill:none;stroke:rgba(146,174,130,0.38);stroke-linecap:round}
.ring-track{transform-origin:200px 200px;animation:zsSpin linear infinite}
.ring-track.outer{animation-duration:56s}
.ring-track.middle{animation-duration:42s;animation-direction:reverse}
.ring-track.inner{animation-duration:34s}
.ring-track.core{animation-duration:26s;animation-direction:reverse;transform-origin:240px 200px}
@keyframes zsSpin{to{transform:rotate(360deg)}}
.hero-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;max-width:1160px;margin:0 auto;padding:32px 24px}
.hero-inner > *:not(.hero-rings){max-width:470px}
.hero-inner .eyebrow,.hero-inner .hero-h1,.hero-inner .hero-sub,.hero-inner .hero-lede,.hero-inner .hero-actions{opacity:0;transform:translateY(16px);transition:opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease)}
.hero-inner.in .eyebrow,.hero-inner.in .hero-h1,.hero-inner.in .hero-sub,.hero-inner.in .hero-lede,.hero-inner.in .hero-actions{opacity:1;transform:translateY(0)}
.hero-inner.in .eyebrow{transition-delay:.03s}
.hero-inner.in .hero-h1{transition-delay:.12s}
.hero-inner.in .hero-sub{transition-delay:.21s}
.hero-inner.in .hero-lede{transition-delay:2.05s}
.hero-inner.in .hero-actions{transition-delay:2.25s}
.hero-word{display:inline-block;opacity:0;transform:translateY(30px)}
.hero-inner.in .hero-word{animation:heroWordRise 650ms var(--ease) forwards}
.hero-inner.in .hero-word-1{animation-delay:.28s}
.hero-inner.in .hero-word-2{animation-delay:.42s}
.hero-inner.in .hero-word-3{animation-delay:.56s}
.hero-inner.in .hero-word-4{animation-delay:.70s}
.hero-inner.in .hero-word-5{animation-delay:.84s}
.hero-inner.in .hero-word-6{animation-delay:.98s}
.hero-inner.in .hero-word-7{animation-delay:1.12s}
.hero-inner.in .hero-word-8{animation-delay:1.26s}
@keyframes heroWordRise{to{opacity:1;transform:translateY(0)}}
h1.hero-h1{font-family:var(--font-serif);font-size:clamp(42px,5.4vw,76px);font-weight:400;line-height:0.98;letter-spacing:-0.04em;margin:16px 0 18px;color:var(--text)}
.hero-h1 .accent-line{display:block;color:var(--accent)}
.hero-sub{font-family:var(--font-sans);font-size:clamp(12.5px,1.4vw,14.5px);font-weight:600;color:var(--accent);margin-bottom:14px}
.hero-lede{font-family:var(--font-sans);font-size:13px;line-height:1.6;color:var(--text-muted);max-width:44ch;margin:0 0 26px}
.hero-actions{display:flex;align-items:center;justify-content:flex-start;gap:18px;position:relative;z-index:1}
.hero-actions .plus{color:var(--text-muted);font-size:14px}

.marquee{position:relative;z-index:60;border-top:1px solid var(--line);overflow:hidden;padding:15px 0;-webkit-mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent)}
.marquee-track{display:flex;align-items:center;gap:34px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.marquee-track span{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted)}
.marquee-track .sep{color:var(--accent-dim);font-size:10px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.proof-section,.portfolio-section,.process-section,.audience-section,.contact-section{border-top:1px solid var(--line)}
.proof-section{padding:88px 0}
.proof-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.proof-divider-ring{position:absolute;left:calc(50% - 24px);top:50%;width:550px;height:550px;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.proof-divider-ring svg{display:block;width:100%;height:100%;animation:zsSpin 24s linear infinite}
.proof-divider-ring circle{fill:none;stroke:rgba(157,179,140,0.06);stroke-width:1.6;stroke-dasharray:42 28;stroke-linecap:round;transform-origin:200px 200px}
.proof-grid > .proof-divider-ring{position:absolute;z-index:0}
.proof-grid > *{position:relative;z-index:1}
.proof-number{font-family:var(--font-serif);font-size:clamp(72px,9vw,124px);font-weight:400;line-height:.8;letter-spacing:-.06em;color:var(--text)}
.proof-caption{display:block;margin-top:22px;font-size:11px;color:var(--accent);letter-spacing:.04em}
.proof-note{font-size:9px;line-height:1.5;color:var(--text-muted);margin-top:8px}
.proof-copy{font-size:13px;line-height:1.7;color:var(--text-muted);max-width:42ch}
.proof-metrics{display:flex;gap:18px;margin-top:24px}
.proof-metric{width:58px;text-align:center;color:var(--text);font-family:var(--font-serif);font-size:13px}
.proof-metric strong{width:58px;height:58px;border-radius:50%;background:var(--band-bg);display:flex;align-items:center;justify-content:center;font-weight:400}
.proof-metric span{display:block;font-family:var(--font-sans);font-size:6px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:10px}
.portfolio-section{padding:88px 0}
.portfolio-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px}
.portfolio-head .sec-head{margin:0}
.platform-switch{display:flex;border:1px solid var(--card-border);border-radius:100px;padding:2px;gap:2px}
.platform-switch button{border:0;background:transparent;color:var(--text-muted);font-family:var(--font-sans);font-size:9px;padding:7px 12px;border-radius:100px}
.platform-switch button.active{background:var(--accent);color:#08110A}
.growth-chart{height:330px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-bg);padding:20px;position:relative;overflow:hidden}
.growth-chart:before{content:'WEEK 1';position:absolute;top:20px;left:20px;font-size:7px;letter-spacing:.2em;color:var(--text-muted)}
.growth-chart:after{content:'WEEK 12';position:absolute;top:20px;right:20px;font-size:7px;letter-spacing:.2em;color:var(--text-muted)}
.growth-line{position:absolute;left:20px;right:20px;bottom:20px;height:80%;background:linear-gradient(145deg,transparent 0 47%,rgba(146,174,130,.16) 48% 100%);clip-path:polygon(0 92%,20% 87%,40% 76%,60% 59%,80% 39%,100% 0,100% 100%,0 100%)}
.growth-line:after{content:'Instagram · followers over 12 weeks';position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.04em;color:var(--accent)}
.portfolio-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.portfolio-stat{border:1px solid var(--card-border);border-radius:8px;background:var(--card-bg);padding:14px}
.portfolio-stat strong{display:block;font-family:var(--font-serif);font-size:22px;font-weight:400}
.portfolio-stat span{font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.portfolio-note{font-size:9px;color:var(--text-muted);margin-top:12px}
.process-section{padding:88px 0}
.process-section .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.process-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:hidden}
.process-grid.in:after{content:'';position:absolute;z-index:3;top:-25%;bottom:-25%;left:-18%;width:12%;background:rgba(0,0,0,.42);box-shadow:0 0 34px 18px rgba(0,0,0,.28);transform:skewX(-14deg);pointer-events:none;animation:processShadowSweep 700ms var(--ease) 1.65s forwards}
@keyframes processShadowSweep{to{left:108%}}
.process-section .sec-head.reveal{transform:translateY(30px);transition-duration:1.1s}
.process-section .sec-head.reveal.in{transform:translateY(0)}
.process-section .process-card.reveal{transform:translateY(30px);transition-duration:900ms}
.process-section .process-card.reveal.in{transform:translateY(0)}
.process-section .process-card.reveal:nth-child(1){transition-delay:0s}
.process-section .process-card.reveal:nth-child(2){transition-delay:.18s}
.process-section .process-card.reveal:nth-child(3){transition-delay:.36s}
.process-card{position:relative;min-height:120px;padding:18px 16px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-bg);overflow:hidden;transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.process-card:hover{background:#1b2820;border-color:rgba(157,179,140,0.4)}
.process-card:before{content:attr(data-step);position:absolute;right:8px;top:0;font-family:var(--font-serif);font-size:100px;line-height:1;color:rgba(31,56,51,.7)}
.process-card h3,.process-card p,.process-card span{position:relative;z-index:1}
.process-card h3{font-family:var(--font-serif);font-size:16px;font-weight:400;margin-bottom:10px}
.process-card p{font-size:10px;line-height:1.5;color:var(--text-muted);max-width:24ch}
.process-card span{display:block;width:20px;border-top:1px solid var(--accent);margin-top:14px;transition:width 300ms var(--ease)}
.process-card:hover span{width:100%}
.audience-section{padding:116px 0;text-align:center;border-top:0}
.audience-section.reveal{transition-duration:900ms}
.audience-mark{width:30px;height:16px;border:1px solid var(--accent);border-bottom:0;border-radius:30px 30px 0 0;margin:0 auto 16px}
.audience-section h2,.contact-section h2{font-family:var(--font-serif);font-size:clamp(28px,4vw,46px);font-weight:400;line-height:1.05}
.audience-section h2 span,.contact-section h2 span{display:block;color:var(--accent)}
.audience-section p,.contact-section p{font-size:10px;color:var(--text-muted);margin:16px auto 0;max-width:52ch}
.contact-section{padding:116px 0;text-align:center;position:relative}
.contact-content{position:relative}
.contact-content.reveal{transform:translateY(30px);transition-duration:1.1s}
.contact-content.reveal.in{transform:translateY(0)}
.contact-line{display:block;opacity:0;transform:translateY(26px)}
.contact-content.in .contact-line{animation:contactLineRise 700ms var(--ease) forwards}
.contact-content.in .contact-line:nth-child(1){animation-delay:.2s}
.contact-content.in .contact-line:nth-child(2){animation-delay:.64s}
.contact-content.in .contact-line:nth-child(3){animation-delay:.86s}
@keyframes contactLineRise{to{opacity:1;transform:translateY(0)}}
.contact-content .btn{margin-top:24px}
.contact-email{font-size:9px!important;margin-top:14px!important}

/* ===== SECTION shared ===== */
section{padding:min(9vw,88px) 0}
.sec-head{max-width:640px;margin:0 0 40px;text-align:left}
.sec-head .eyebrow{margin-bottom:14px}
h2.sec-h2{font-family:var(--font-serif);font-size:clamp(28px,3.4vw,42px);font-weight:400;line-height:1.08;letter-spacing:-0.02em}
.sec-lead{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-muted);max-width:56ch;margin:14px auto 0}

/* ===== PROOF / STAT ===== */
.proof-inner{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;text-align:left}
.stat-circle{width:170px;height:170px;border-radius:50%;background:var(--band-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.stat-circle .num{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--text)}
.stat-circle .lbl{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.proof-text h2{font-size:clamp(20px,3vw,28px);line-height:1.3;text-transform:uppercase}
.proof-text p{font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--text-muted);margin-top:14px;max-width:60ch}

/* ===== SERVICES GRID ===== */
.services-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:hidden}
.services-grid.in:after{content:'';position:absolute;z-index:3;top:-25%;bottom:-25%;left:-18%;width:12%;background:rgba(0,0,0,.42);box-shadow:0 0 34px 18px rgba(0,0,0,.28);transform:skewX(-14deg);pointer-events:none;animation:serviceShadowSweep 700ms var(--ease) 1.65s forwards}
@keyframes serviceShadowSweep{to{left:108%}}
.svc-card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;padding:17px 14px;min-height:68px;cursor:default;transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.svc-card:hover{background:#1b2820;border-color:rgba(157,179,140,0.4)}
.svc-card .eyebrow{display:none}
.svc-card h3{font-family:var(--font-serif);font-size:15px;font-weight:400;margin:0;color:var(--text)}
.svc-card h3:after{content:'+';font-family:var(--font-sans);color:#64715f;font-size:16px;float:right;margin-left:20px;transition:transform 300ms var(--ease),color 300ms var(--ease)}
.svc-card:hover h3:after{color:var(--accent);transform:rotate(45deg)}
.svc-card p{position:absolute;left:26px;right:26px;bottom:25px;font-family:var(--font-sans);font-size:12px;line-height:1.3;color:var(--accent);margin:0;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);transition:max-height 300ms var(--ease),opacity 300ms var(--ease),transform 300ms var(--ease)}
.svc-card:hover p{max-height:20px;opacity:1;transform:translateY(0)}

/* ===== WHY US ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:left}
.why-item .plus-ic{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);margin-bottom:20px}
.why-item h3{font-size:17px;margin-bottom:8px}
.why-item p{font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--text-muted)}

/* ===== CLIENT TESTIMONIALS ===== */
.client-testimonials{border-top:1px solid var(--line);background:var(--bg)}
.client-testimonials .testimonials-wrap{max-width:1180px;margin:0 auto}
.client-testimonials .testimonials-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.client-testimonials .testimonials-eyebrow strong{font-family:var(--font-serif);font-size:13px;font-weight:400;letter-spacing:0;color:var(--accent)}
.client-testimonials .testimonials-eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.client-testimonials .sec-head{margin-bottom:42px}
.client-testimonials .eyebrow{color:var(--accent)}
.client-testimonials h2{font-family:var(--font-serif);font-size:33px;font-weight:400;line-height:1.2;color:var(--text);margin-bottom:0}
.client-testimonials .testimonials-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:hidden}
.client-testimonials .testimonials-grid.in:after{content:'';position:absolute;z-index:3;top:-25%;bottom:-25%;left:-18%;width:12%;background:rgba(0,0,0,.42);box-shadow:0 0 34px 18px rgba(0,0,0,.28);transform:skewX(-14deg);pointer-events:none;animation:testimonialShadowSweep 700ms var(--ease) 1.65s forwards}
@keyframes testimonialShadowSweep{to{left:108%}}
.client-testimonials .sec-head.reveal{transform:translateY(30px);transition-duration:1.1s}
.client-testimonials .sec-head.reveal.in{transform:translateY(0)}
.client-testimonials .testimonial-card.reveal{transform:translateY(30px);transition-duration:900ms}
.client-testimonials .testimonial-card.reveal.in{transform:translateY(0)}
.client-testimonials .testimonial-card.reveal:nth-child(1){transition-delay:0s}
.client-testimonials .testimonial-card.reveal:nth-child(2){transition-delay:.18s}
.client-testimonials .testimonial-card.reveal:nth-child(3){transition-delay:.36s}
.client-testimonials .testimonial-card{background:var(--card-bg);border:1px solid var(--card-border);padding:30px 24px 24px;display:flex;flex-direction:column;min-height:280px}
.client-testimonials .quote-mark{font-family:var(--font-serif);font-size:44px;line-height:1;color:var(--card-border);margin-bottom:14px}
.client-testimonials blockquote{font-family:var(--font-serif);font-size:16px;font-style:italic;line-height:1.55;color:var(--text-muted);flex:1}
.client-testimonials .testimonial-author{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.client-testimonials .author-name{display:block;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--text);margin-bottom:3px}
.client-testimonials .author-role{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.client-testimonials .client-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--band-bg);border:1px solid var(--accent-dim);font-family:var(--font-serif);font-size:16px;color:var(--text)}

@media (max-width:900px){
  .client-testimonials .testimonials-grid{grid-template-columns:1fr}
}

/* ===== PROCESS BAND ===== */
section.process{background:var(--band-bg)}
.steps-row{display:flex;align-items:flex-start;justify-content:center;max-width:520px;margin:40px auto 0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 auto;width:110px}
.step .circle{width:56px;height:56px;border-radius:50%;border:1.4px solid rgba(236,238,233,0.55);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text)}
.step .lbl{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.step-line{flex:1 1 auto;height:1px;background:rgba(236,238,233,0.35);margin-top:28px;min-width:20px}

/* ===== FINAL CTA ===== */
section.final-cta{text-align:center}
.final-cta h2{font-size:clamp(24px,4.2vw,38px);line-height:1.25;text-transform:uppercase;max-width:16ch;margin:16px auto 0}
.final-cta p{font-family:var(--font-sans);font-size:14.5px;color:var(--text-muted);margin:16px auto 28px}

/* ===== FOOTER ===== */
footer.site{padding:32px 0;border-top:1px solid var(--line);text-align:center}
footer.site p{font-family:var(--font-sans);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
footer.site a{color:var(--text-muted)}
footer.site a:hover{color:var(--text)}
.footer-nav{display:flex;align-items:center;gap:40px}
.footer-nav a{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.3px}

.alignwide{max-width:var(--wrap-width);margin-left:auto;margin-right:auto}
.alignfull{max-width:100%}
.aligncenter{margin-left:auto;margin-right:auto;display:block}

/* ===== Responsive ===== */
@media (max-width:980px){
  :root{--nav-h:78px}
  .wrap{padding:0 22px}
  nav.site{padding:0}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{display:flex;position:static;align-items:center;gap:18px;background:none;border-bottom:0}
  .nav-links a{width:auto;padding:0;border-bottom:0}

  .hero-rings{left:94%;width:min(470px,62vw)}
  .hero-inner{padding:48px 22px 56px}

  .proof-inner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:32px}
  .proof-text p{margin-left:auto;margin-right:auto}
  .services-grid{grid-template-columns:1fr 1fr;gap:14px}
  .why-grid{grid-template-columns:1fr;gap:28px;text-align:center}
  .why-item .plus-ic{margin-left:auto;margin-right:auto}
  .steps-row{max-width:100%}
}

@media (max-width:680px){
  :root{--nav-h:68px}
  .proof-grid{grid-template-columns:1fr;gap:36px}
  .proof-section,.portfolio-section,.process-section{padding:64px 0}
  .portfolio-head{display:block}
  .platform-switch{margin-top:20px;width:max-content}
  .growth-chart{height:240px}
  .process-grid{grid-template-columns:1fr}
  .audience-section{padding:72px 0}
  .contact-section{padding:72px 0}
  .wrap{padding:0 20px}
  section{padding:44px 0}
  .hero-inner{padding:24px 20px}
  .hero-rings{left:102%;width:min(360px,78vw)}
  section.hero:before{width:620px;height:620px;top:-80px;left:-300px}
  section.hero:after{width:470px;height:470px;top:0;left:-205px}
  h1.hero-h1{font-size:clamp(40px,11vw,58px)}
  .hero-inner > *:not(.hero-rings){max-width:360px}
  .marquee{padding:18px 0}
  .marquee-track{gap:26px;animation-duration:20s}
  .marquee-track span{font-size:11px;letter-spacing:0.12em}
  .services-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .plus{display:none}
  .hero-actions .btn{justify-content:center}
  .stat-circle{width:132px;height:132px}
  .stat-circle .num{font-size:26px}
  .steps-row{gap:4px}
  .step{width:76px}
  .step .circle{width:44px;height:44px;font-size:15px}
  .step .lbl{font-size:10px}
  .step-line{margin-top:26px;min-width:10px}
  .final-cta h2{max-width:100%}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .ring-track{animation:none}
  .page-loader-mark{animation:none}
  .proof-divider-ring svg{animation:none}
  .services-grid.in:after,.process-grid.in:after,.client-testimonials .testimonials-grid.in:after{display:none}
  .contact-content .contact-line{animation:none!important;opacity:1;transform:none}
  .reveal,.hero-inner .eyebrow,.hero-inner .hero-h1,.hero-inner .hero-sub,.hero-inner .hero-lede,.hero-inner .hero-actions{opacity:1!important;transform:none!important;transition:none!important}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease)}
#services .sec-head.reveal{transform:translateY(30px);transition-duration:1.1s}
#services .svc-card.reveal{transform:translateY(30px);transition-duration:900ms}
#services .sec-head.reveal.in,#services .svc-card.reveal.in{transform:translateY(0)}
.proof-section .proof-summary.reveal,.proof-section .proof-detail.reveal{transform:translateY(30px);transition-duration:1s}
.proof-section .proof-summary.reveal.in,.proof-section .proof-detail.reveal.in{transform:translateY(0)}
.proof-section .proof-detail.reveal{transition-delay:.18s}
#services .svc-card.reveal:nth-child(1){transition-delay:0s}
#services .svc-card.reveal:nth-child(2){transition-delay:.12s}
#services .svc-card.reveal:nth-child(3){transition-delay:.24s}
#services .svc-card.reveal:nth-child(4){transition-delay:.36s}
#services .svc-card.reveal:nth-child(5){transition-delay:.48s}
#services .svc-card.reveal:nth-child(6){transition-delay:.60s}
.reveal.in{opacity:1;transform:translateY(0)}

/* Fallback styling for other WP pages */
.site-content{padding:64px 0;max-width:720px;margin:0 auto}
.site-content article{margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.site-content article:last-child{border-bottom:none}
.site-content h1.page-title,.site-content h1.entry-title{font-family:var(--font-display);font-size:28px;margin-bottom:16px}
.site-content .entry-content p{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-muted);margin-bottom:16px}

.hero-rings .ring-outline{stroke:rgba(157,179,140,0.12)}
.hero-rings .ring-outline-primary{stroke:rgba(157,179,140,0.3);filter:drop-shadow(0 0 14px rgba(157,179,140,0.7))}
.hero-rings .ring-dotted{fill:none;stroke:rgba(157,179,140,0.2);stroke-dasharray:28 24;stroke-linecap:round;transform-origin:240px 200px;animation:zsSpin 24s linear infinite}
.hero-rings .ring-segment{stroke:rgba(157,179,140,0.18)}
.hero-rings .ring-center{stroke:rgba(92,112,87,0.62)}

/* ===== Growth chart core styling (applies at every screen size — the
   chart must render and be interactive on mobile too, not just desktop) ===== */
.growth-chart .chart-head{position:relative;z-index:1;display:flex;justify-content:center;font-size:10px;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px}
.growth-chart .chart-title{font-size:13px;letter-spacing:normal;color:var(--accent)}
.growth-chart:before,.growth-chart:after{display:none}
.chart-svg{display:block;width:100%;height:100%}
.chart-area{fill:var(--band-bg)}
.chart-path{fill:none;stroke:var(--accent);stroke-width:2}
.chart-svg circle{fill:var(--text)}
.chart-point{cursor:pointer;fill:var(--accent)!important;opacity:.35;transition:r 150ms ease,opacity 150ms ease}
.chart-point:hover{opacity:1}
.chart-tooltip{position:absolute;z-index:2;display:none;min-width:92px;padding:8px 10px;border:1px solid var(--card-border);border-radius:6px;background:var(--card-bg);box-shadow:0 8px 20px rgba(0,0,0,.18);font-size:11px;line-height:1.35;color:var(--text);pointer-events:none}
.chart-tooltip.is-visible{display:block}
.chart-tooltip strong{display:block;color:var(--accent);font-weight:400}

/* ===== Desktop-only refinements =====
   Everything from here to the end of the file is large-screen polish
   (wide nav padding, bigger hero, wider sections, etc.). It's gated
   behind min-width:901px so phones and tablets keep using the earlier,
   already-responsive rules above and never see oversized fonts or
   cropped/overflowing layout. */
@media (min-width: 901px) {
header,nav.site{position:sticky;top:0;z-index:50}
nav.site{position:relative;z-index:70;background:linear-gradient(var(--bg),rgba(14,20,19,.85) 80%,transparent);height:auto;padding:28px 240px}
nav.site .wrap{max-width:none;padding:0}
.brand-name{font-family:var(--font-sans);font-size:15px;letter-spacing:2px}
.nav-links{gap:40px}
.nav-links a{font-size:12px;letter-spacing:.08em}
.hero-inner{max-width:1300px;padding:0 96px}
.hero-inner > *:not(.hero-rings){max-width:640px}
.hero-rings{right:-10%;left:auto;top:50%;width:780px;height:780px;transform:translateY(-50%);z-index:80;overflow:visible;clip-path:inset(-100% -100% -100% -100%)}
.hero-rings svg{animation:zsSpin 40s linear infinite}
.hero-bg-line{position:absolute;top:-10%;left:30%;width:140%;height:220%;border:1px solid rgba(157,179,140,.15);border-radius:50%;transform:rotate(8deg);pointer-events:none}
h1.hero-h1{font-size:60px;line-height:1.15;letter-spacing:0;font-weight:400;max-width:560px;margin:0 0 24px}
.hero-lede{font-size:17px;line-height:1.65;max-width:460px;margin-bottom:24px}
.btn{font-size:16px;padding:16px 32px;border-radius:100px}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;background:var(--bg)}
.marquee-track{animation-duration:22s;gap:0}
.marquee-track span{font-size:13px;letter-spacing:2px;padding:0 24px}
.marquee-track .sep{font-size:13px;margin-left:24px}
section#services{position:relative;z-index:1;background:var(--bg);padding:120px 64px 140px;max-width:1300px;margin:0 auto}
section#services > .wrap{max-width:none;padding:0}
section#services .sec-head{margin:0 0 56px}
section#services .sec-head .eyebrow{color:var(--accent)}
h2.sec-h2{font-size:33px;line-height:1.2;font-weight:400;max-width:620px;margin:0 0 20px}
.portfolio-title{font-size:33px!important}
.sec-lead{font-size:14px;line-height:1.7;max-width:560px;margin:0}
.services-grid{gap:16px}
.svc-card{border-radius:10px;padding:25px 26px;min-height:98px;display:flex;flex-direction:column;justify-content:flex-start}
.svc-card h3{font-size:19px}
.proof-section,.portfolio-section,.process-section{padding:100px 0}
.proof-grid{gap:60px}
.proof-grid > .proof-summary .eyebrow{font-size:12.5px;color:var(--accent)}
.proof-grid > .proof-summary .proof-caption{font-size:18px;color:var(--accent)}
.proof-grid > .proof-summary .proof-note{font-size:14px;color:var(--text-muted)}
@media (min-width:901px){.proof-grid > .proof-summary{padding-left:80px}.proof-grid > div.reveal{position:relative;top:-4px}.proof-grid > div.reveal .proof-metrics{position:relative;top:12px}}
.proof-number{font-size:120px;font-weight:700;line-height:1;margin:20px 0 18px}
.proof-detail{display:flex;flex-direction:column;gap:24px}
.proof-copy{font-size:15px;line-height:1.65;max-width:460px;margin-bottom:0}
.proof-detail .proof-metrics{margin-top:0;position:static;top:auto}
.proof-cta{align-self:flex-start;margin-top:24px;background:var(--accent);color:#08110A;border:0;border-radius:100px}.proof-summary .proof-cta{display:inline-flex}
.proof-cta:hover{background:#b8d0a5;transform:translateY(-2px)}
.proof-source-note{font-size:9px;line-height:1.5;color:var(--text-muted);margin-top:0}
.proof-metrics{gap:34px}
.proof-metric{width:72px;font-size:18px}
.proof-metric strong{width:72px;height:72px;background:#203935;font-size:18px}
.portfolio-head{margin-bottom:44px}
.portfolio-head .eyebrow{color:var(--accent)}
.platform-switch{padding:4px;gap:4px}
.platform-switch button{font-size:13px;padding:11px 20px}
.growth-chart{height:384px;border-radius:16px;padding:32px}
@media (min-width:901px){.growth-chart{height:440px}.growth-chart .chart-svg{height:376px}}
.portfolio-stats{gap:16px;margin-top:16px}
.portfolio-stat{padding:26px 24px}
.portfolio-stat strong{font-size:26px;font-weight:400}
.portfolio-stat span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.portfolio-note{font-size:13px}
.process-section{text-align:center}
.process-section .sec-head{margin:0 auto 52px;text-align:center}
.process-section .sec-h2{font-size:33px}
.process-grid{gap:16px;text-align:left}
.process-card{border-radius:12px;padding:30px 28px;min-height:170px}
.process-card h3{font-size:18px}
.process-card p{font-size:14.5px;line-height:1.6;max-width:24ch}
.audience-section{padding:140px 0}
.audience-mark{width:64px;height:32px;border:4px solid var(--accent);border-bottom:0;margin:0 auto 24px}
.audience-section h2,.contact-section h2{font-size:34px;line-height:1.25;margin:0 auto 24px}
.audience-section h2{font-weight:700}
.contact-section h2{font-size:36px;font-weight:400;line-height:1.15;letter-spacing:-0.02em;margin:0 auto 24px}
.audience-section .eyebrow{color:var(--accent);font-size:12.5px;letter-spacing:0.12em;margin-bottom:24px}
.audience-section p,.contact-section p{font-size:15px;max-width:560px;margin:0 auto}
.contact-section p{letter-spacing:-0.02em;margin:0 auto 24px}
@media (min-width:901px){.audience-section h2{font-size:42px}.audience-section p,.contact-section p{max-width:none;white-space:nowrap}}
.audience-section{position:relative;overflow:hidden;text-align:left;background:var(--bg);padding:100px 0}
.audience-section .wrap{position:relative;z-index:1}
.audience-background-arc{position:absolute;top:-180px;right:-220px;width:640px;height:640px;pointer-events:none;opacity:.15}
.audience-background-arc svg{display:block;width:100%;height:100%}
.audience-intro{max-width:640px;margin-bottom:40px}
.audience-section .audience-intro h2{font-size:33px;line-height:1.2;font-weight:400;color:var(--text);margin:0}
.audience-section .audience-intro h2 em{font-style:italic;color:var(--accent)}
.audience-lede{font-size:15px!important;line-height:1.6!important;font-weight:300;margin:14px 0 0!important;color:var(--text-muted)!important;max-width:56ch!important}
.audience-list{border-top:1px solid var(--line)}
.audience-row{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);text-align:left}
.audience-row.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.audience-row.reveal.in{opacity:1;transform:none}
.audience-row-number{font-family:var(--font-serif);font-size:13px;color:var(--text-muted);padding-top:3px}
.audience-row-body{display:block}
.audience-row-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 18px}
.audience-row-title{font-family:var(--font-serif);font-size:18px;font-weight:400;color:var(--text)}
.audience-row-flag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);padding:4px 10px;line-height:1;white-space:nowrap}
.audience-row-description{display:block;font-size:14.5px;line-height:1.6;font-weight:300;margin:6px 0 0;color:var(--text-muted);max-width:60ch;white-space:normal}
@media (max-width:720px){
  .audience-section{padding:64px 0}
  .audience-intro{margin-bottom:32px}
  .audience-section .audience-intro h2{font-size:30px}
  .audience-row{grid-template-columns:1fr;gap:10px}
  .audience-background-arc{width:420px;height:420px;top:-120px;right:-160px}
}
.contact-section{padding:140px 0}
.contact-content .contact-email{font-size:13px!important;margin-top:24px!important;margin-bottom:0!important}
.contact-content .btn{margin-top:0}
/* .contact-line sets display:block for the reveal animation, which stretched the CTA full-width. Keep it an inline pill. */
.contact-content .btn.contact-line{display:inline-flex;width:auto}
footer.site{padding:28px 240px;display:flex;justify-content:space-between;text-align:left}
.hero-inner .eyebrow{font-size:12px;letter-spacing:2.5px;color:var(--accent);margin-bottom:24px}
}
@media (max-width:900px){
  nav.site{padding:22px 24px}
  .hero-inner{padding:140px 24px 80px}
  .hero-rings{width:420px;height:420px;right:-30%;opacity:.6}
  section#services{padding:80px 24px 100px}
  .proof-grid,.process-grid{grid-template-columns:1fr}
  .portfolio-stats{grid-template-columns:1fr}
  footer.site{padding:22px 24px;flex-direction:column;gap:10px;text-align:center}
}
@media (max-width:560px){
  nav.site .wrap{gap:12px}
  .brand{gap:8px}
  .brand .zs-mark{width:32px;height:32px}
  .brand-name{font-size:11px;letter-spacing:.12em}
  .nav-links{display:flex;gap:12px}
  .nav-links a{font-size:10px}
  .services-grid{grid-template-columns:1fr}
  h1.hero-h1{font-size:30px}
  .proof-metrics{gap:18px}
}
section.hero{min-height:calc(100vh - var(--nav-h));overflow:visible;clip-path:inset(-100% 0 0 0);z-index:71}
@media (max-width:900px){
  section.hero{min-height:auto}
  .hero-inner{padding-top:140px;padding-bottom:80px}
  h1.hero-h1{font-size:56px;line-height:1.15;letter-spacing:0;max-width:540px}
  .hero-rings{right:-70%;left:auto;top:30%;width:420px;height:420px;z-index:80;overflow:visible!important;clip-path:inset(-100% -100% -100% -100%)}
  .hero-rings circle{overflow:visible}
}

/* =====================================================================
   MOBILE FIX PACK
   Desktop is untouched — everything above stays exactly as it was.
   The rules below only fire under max-width breakpoints and correct:
   1) hamburger nav (was showing full nav + no toggle)
   2) service card heading/paragraph overlap + tap-to-reveal
   3) "Proof, Not Promises" number overlapping the label above it
   4) the "See the account" link losing its button styling
   5) portfolio stat numbers breaking card alignment
   6) the growth chart getting clipped at the bottom
   7) the audience section's background circle rendering as empty space
   8) the contact section's ring graphic + CTA button
   9) the footer being squeezed into a desktop-width row
   Placed last on purpose so it wins the cascade over the older,
   conflicting mobile rules earlier in this file.
   ===================================================================== */

/* ---- 1) Real hamburger nav ---- */
@media (max-width:900px){
  nav.site{position:relative}
  .nav-right{display:flex;align-items:center;gap:14px}
  .menu-toggle{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:38px;
    height:34px;
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    padding:0;
  }
  .menu-toggle-bar{display:block;width:16px;height:1.5px;background:var(--text);transition:transform .25s var(--ease),opacity .25s var(--ease)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:auto;
    background:var(--card-bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.25);
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 24px;
    transition:max-height .3s var(--ease),opacity .3s var(--ease),padding .3s var(--ease);
    z-index:60;
  }
  .nav-links.is-open{max-height:420px;opacity:1;padding:10px 24px 18px}
  .nav-links li{width:100%}
  .nav-links a{display:block;width:100%;padding:12px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0}
}

/* ---- 2) Service cards: tap-to-reveal instead of hover (hover doesn't exist
   on touch, which is why the paragraph used to sit hidden-but-overlapping).
   JS in main.js toggles .is-open on tap; only one card open at a time. ---- */
@media (max-width:900px){
  .svc-card{position:relative;min-height:auto;padding:20px 20px 22px;display:block;cursor:pointer}
  .svc-card p{
    position:static;
    display:block;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:none;
    left:auto;right:auto;bottom:auto;
    margin:0;
    color:var(--text-muted);
    transition:max-height .3s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease);
  }
  .svc-card.is-open p{max-height:120px;opacity:1;margin-top:10px}
  .svc-card.is-open h3:after{color:var(--accent);transform:rotate(45deg)}

  /* The shadow-sweep reveal animation was built for a short, multi-column
     desktop grid. On a tall single-column phone stack it never finishes
     travelling across the whole height and just looks like a stuck dark
     smear — so it's switched off below 900px. */
  .services-grid.in:after,
  .process-grid.in:after,
  .client-testimonials .testimonials-grid.in:after{
    display:none;
  }
}

/* ---- 3) Proof number: stop it hugging "Proof, Not Promises" ---- */
@media (max-width:900px){
  .proof-number{font-size:clamp(48px,16vw,84px);line-height:.95;margin:14px 0 10px}
  .proof-divider-ring{width:min(300px,70vw);height:min(300px,70vw)}
}

/* ---- 4) "See the account, not a screenshot" — keep this copy's own accent-pill
   button style, just sized to fit one line with breathing room below it ---- */
@media (max-width:900px){
  .proof-cta{
    display:inline-flex;
    align-self:flex-start;
    margin-top:20px;
    margin-bottom:18px;
    font-size:12px;
    letter-spacing:.02em;
    padding:14px 22px;
    max-width:100%;
    white-space:nowrap;
    background:var(--accent);
    color:#08110A;
    border:0;
    border-radius:100px;
  }
  .proof-cta:hover{background:#b8d0a5;transform:translateY(-2px)}
  .proof-source-note{margin-top:0}
}
@media (max-width:380px){
  .proof-cta{font-size:11px;padding:13px 18px}
}

/* ---- 5) Portfolio stat numbers: shrink so cards stay aligned ---- */
@media (max-width:680px){
  .portfolio-stats{grid-template-columns:1fr;gap:10px}
  .portfolio-stat{padding:16px;text-align:left}
  .portfolio-stat strong{font-size:18px;line-height:1.25;word-break:break-word}
  .portfolio-stat span{font-size:8px}
}

/* ---- 5b) Growth chart was getting clipped at the bottom on mobile/tablet:
   the svg had height:100% while sitting *below* the chart-head row inside a
   fixed-height, overflow:hidden box, so head + svg together were taller
   than the box and the bottom of the line graph got cut off. Flexbox lets
   the head take only the space it needs and the svg fill the rest. ---- */
@media (max-width:900px){
  .growth-chart{display:flex;flex-direction:column}
  .growth-chart .chart-head{flex:0 0 auto}
  .growth-chart .chart-svg{flex:1 1 auto;min-height:0;height:auto;width:100%}
}
@media (max-width:680px){
  .growth-chart{height:300px;padding:18px 16px 16px}
  .growth-chart .chart-head{margin-bottom:14px}
}

/* This is the actual fix for the "big empty gap above the audience section"
   report: .audience-section's overflow:hidden and the arc's own
   position:absolute were declared ONLY inside the desktop (min-width:901px)
   block, so on mobile the arc rendered as a normal in-flow 640x640 box
   sitting above the heading — that box WAS the empty gap. Restating both
   declarations here (not gated to any width) makes the arc float behind
   the content everywhere, exactly like it does on desktop, just smaller. */
/* The row-description misalignment is now fixed at the markup level (see
   front-page.php): the description is a plain sibling block of the
   title/flag wrapper instead of a flex item competing with them on the
   same line, so it always starts its own line with no CSS trickery
   needed. The rules below only handle the background arc. */
.audience-section{position:relative;overflow:hidden}
.audience-background-arc{position:absolute;pointer-events:none}
@media (max-width:900px){
  .audience-background-arc{width:200px;height:200px;top:-60px;right:-80px;opacity:.08}
}

/* ---- 7) Contact section: scaled type + CTA sizing for narrower screens.
   Section padding/sizing now follows the same rules as the other sections
   (see the base and 680px/901px rules above) instead of its own values. ---- */
@media (max-width:900px){
  .contact-section h2{font-size:clamp(22px,6vw,30px);line-height:1.2;margin:0 auto 16px}
  .contact-section p{font-size:13px}
  .contact-content{padding:0 20px;max-width:100%}
  .contact-content .btn{
    font-size:12px;
    padding:14px 22px;
    max-width:100%;
    white-space:normal;
    text-align:center;
    justify-content:center;
  }
}
@media (max-width:380px){
  .contact-section h2{font-size:20px}
  .contact-content .btn{font-size:11px;padding:13px 18px}
}

/* ---- 8) Footer: give it room to breathe in its own column instead of a
   cramped, 40px-gapped desktop-width row squeezed onto a phone ---- */
@media (max-width:900px){
  footer.site{align-items:center}
  .footer-nav{flex-wrap:wrap;justify-content:center;row-gap:10px;column-gap:22px}
}
@media (max-width:480px){
  .footer-brand{flex-direction:column;text-align:center;gap:8px}
}

/* ---- 9) "Who this is for" on mobile.
   ROOT CAUSE: the audience section's real styles (grid rows, left alignment,
   heading/lede sizes) live between the `@media (min-width:901px){` that opens
   in the "large-screen polish" block and its closing brace further down, so
   they never applied on phones. The generic `.audience-section p` rule
   (10px, centered, nowrap) and the section's own text-align:center were all
   a phone got. Restating the layout here, scoped to <=900px, so desktop is
   untouched. ---- */
@media (max-width:900px){
  .audience-section{position:relative;overflow:hidden;text-align:left;background:var(--bg);padding:64px 0}
  .audience-section .wrap{position:relative;z-index:1}
  .audience-intro{max-width:none;margin-bottom:32px;text-align:left}
  .audience-section .eyebrow{display:block;color:var(--accent);font-size:11.5px;letter-spacing:.12em;margin-bottom:18px;text-align:left}
  .audience-section .audience-intro h2{font-family:var(--font-serif);font-size:clamp(26px,7.4vw,32px);line-height:1.2;font-weight:400;color:var(--text);margin:0;text-align:left}
  .audience-section .audience-intro h2 em{font-style:italic;color:var(--accent)}
  .audience-section .audience-lede{font-size:14px!important;line-height:1.6!important;font-weight:300;margin:14px 0 0!important;color:var(--text-muted)!important;max-width:none!important;white-space:normal;text-align:left}
  .audience-list{border-top:1px solid var(--line)}
  .audience-row{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);text-align:left}
  .audience-row-number{font-family:var(--font-serif);font-size:13px;color:var(--text-muted);padding-top:3px}
  .audience-row-body{display:block;min-width:0}
  .audience-row-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
  .audience-row-title{font-family:var(--font-serif);font-size:17px;font-weight:400;line-height:1.3;color:var(--text)}
  .audience-row-flag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);padding:4px 9px;line-height:1;white-space:nowrap}
  .audience-section .audience-row-description{display:block;font-size:13.5px;line-height:1.6;font-weight:300;margin:6px 0 0;color:var(--text-muted);max-width:none;white-space:normal;text-align:left}
  .audience-background-arc{width:260px;height:260px;top:-70px;right:-100px;opacity:.1}
}

/* ---- 10) Footer on mobile: a clean, centered stack.
   The older mobile rules set flex-direction/align-items on footer.site, but
   display:flex itself only exists in the desktop-only block, so on phones the
   brand hugged the left while the links were centered. This sets the whole
   footer up as one centered column: logo, tagline, divider, then links. ---- */
@media (max-width:900px){
  footer.site{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:36px 24px 40px;
    text-align:center;
  }
  footer.site .footer-brand{
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
  }
  footer.site .footer-brand .zs-mark,
  footer.site .footer-brand .custom-logo{width:32px;height:32px;object-fit:contain}
  footer.site .footer-brand-name{
    white-space:normal;
    font-size:11px;
    letter-spacing:.08em;
    line-height:1.5;
    text-align:center;
  }
  footer.site .footer-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px 24px;
    width:100%;
    max-width:320px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  footer.site .footer-nav a{font-size:12px;letter-spacing:.04em;padding:4px 0}
}