:root{--navy:#073b5d;--navy-dark:#052b45;--sky:#2786b2;--sky-light:#eaf4f8;--ink:#153c53;--muted:#587080;--line:#dce8ed;--white:#fff;--paper:#f9fbfb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit}button{font:inherit}p{line-height:1.75}.container{width:min(1170px,calc(100% - 64px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:10px;z-index:50;padding:10px 15px;background:#fff}.skip-link:focus{top:10px}:focus-visible{outline:3px solid #4ca9d1;outline-offset:4px}.site-header{background:#fff;border-bottom:1px solid #e7edf0;position:relative;z-index:5}.header-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:var(--navy);color:#fff;border-radius:13px;font-size:28px;font-weight:900;letter-spacing:-.12em;padding-right:3px}.brand-dot{color:#61b6dd}.brand-text{font-size:16px;font-weight:900;letter-spacing:.11em;line-height:1.1}.brand-sub{display:block;margin-top:5px;font-size:8px;font-weight:800;letter-spacing:.26em;color:#688798}.desktop-nav{display:flex;align-items:center;gap:31px}.desktop-nav a{font-size:13px;font-weight:700;text-decoration:none}.desktop-nav a:hover,.text-link:hover{color:var(--sky)}.desktop-nav .nav-contact{border:1px solid #ccdae2;border-radius:5px;padding:13px 20px}.desktop-nav .nav-contact span{margin-left:14px}.menu-toggle{display:none}.mobile-nav{display:none}.hero{background:linear-gradient(135deg,#f1f8fa 0%,#e8f4f8 55%,#dceef5 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:52% 48%;align-items:center;min-height:626px}.hero-content{position:relative;z-index:1;padding:80px 0 63px}.eyebrow{font-size:11px;letter-spacing:.19em;font-weight:900;color:var(--sky);line-height:1.5}.eyebrow-line{display:inline-block;vertical-align:middle;width:21px;height:2px;margin-right:9px;background:var(--sky)}h1,h2,h3{color:var(--navy);margin:0}h1,h2{font-weight:850;letter-spacing:-.065em}h1{font-size:clamp(65px,6.7vw,99px);line-height:1.04;margin:27px 0}h1 em{font-style:normal;color:var(--sky)}.hero-description{font-size:18px;max-width:500px;color:#4e6c7b;margin:0}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:29px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:17px 23px;font-size:13px;font-weight:800;text-decoration:none;border-radius:4px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--navy);color:#fff}.button-primary:hover{background:#17658e}.text-link{text-decoration:none;font-weight:800;font-size:13px}.text-link span{padding-left:13px}.hero-note{margin-top:78px;font-size:10px;font-weight:800;color:#598093;letter-spacing:.12em}.hero-note .dot{display:inline-block;border-radius:50%;height:7px;width:7px;background:var(--sky);margin-right:7px}.hero-note-sep{padding:0 10px;color:#a3c2d0}.hero-art{position:relative;display:grid;place-items:center;min-width:0;margin-left:-10px}.hero-art-halo{position:absolute;inset:7% -18% 9% 2%;border-radius:50%;background:radial-gradient(circle,#ffffff83 0%,#ffffff00 70%)}.hero-art img{position:relative;width:min(100%,540px);height:auto;border-radius:50%;filter:drop-shadow(0 27px 24px #073b5d15)}.hero-bottom{height:45px;display:flex;align-items:center;gap:24px;color:#698896;font-size:9px;font-weight:850;letter-spacing:.22em}.hero-bottom-line{height:1px;max-width:140px;background:#aac7d4;flex:1}.value-strip{background:var(--navy);color:white}.value-inner{min-height:64px;display:flex;align-items:center;justify-content:center;gap:54px}.value-inner span{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.value-inner .strip-star{font-size:16px;color:#62b2d4}.section{padding:110px 0}.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}.section-label{margin:0 0 22px}h2{font-size:clamp(46px,5vw,68px);line-height:1.1}.underline-accent{color:var(--sky)}.mission-body{padding-top:10px}.mission-body p{font-size:16px;color:var(--muted);margin:0 0 17px}.mission-body .lead{font-size:21px;font-weight:700;line-height:1.5;color:var(--navy);margin-bottom:25px}.mission-signoff{margin-top:33px;display:flex;align-items:center;gap:17px;font-size:14px;color:var(--navy)}.small-blue-line{width:33px;height:3px;background:var(--sky)}.approach-section{background:var(--paper);border-top:1px solid #f1f4f5}.approach-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px}.approach-head>p{max-width:260px;color:var(--muted);font-size:15px}.muted-h2{color:#7d9bab}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-card{border:1px solid var(--line);background:white;padding:34px 30px 37px;min-height:285px}.step-top{display:flex;align-items:start;justify-content:space-between}.step-num{font-size:12px;letter-spacing:.1em;font-weight:900;color:var(--sky)}.step-icon{font-size:30px;font-weight:300;color:var(--sky)}h3{font-size:22px;letter-spacing:-.035em}.step-card h3{margin-top:60px}.step-card p{font-size:14px;line-height:1.75;color:var(--muted);margin:12px 0 0}.activities-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:36px}.activities-heading>p{max-width:335px;color:var(--muted);font-size:15px}.activity-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}.activity-placeholder{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:end;min-height:316px;padding:35px;overflow:hidden;background:#e7f2f7;border:1px solid #d8e9f0}.activity-large{background:linear-gradient(140deg,#d4eaf4,#edf6fa 77%)}.activity-small{background:#eff3f5}.placeholder-symbol{position:absolute;top:20px;right:57px;font-size:230px;line-height:1;color:#a4d2e6;opacity:.48;transform:rotate(-14deg)}.activity-placeholder p{font-size:25px;line-height:1.2;color:var(--navy);font-weight:800;letter-spacing:-.04em;margin:0 0 12px;z-index:1}.activity-placeholder span{font-size:10px;font-weight:900;letter-spacing:.15em;color:var(--sky);z-index:1}.placeholder-lines{position:absolute;top:50px;right:45px;width:120px;transform:rotate(-16deg)}.placeholder-lines i{display:block;height:7px;margin:17px 0;background:#bfd5df;border-radius:20px}.activity-footnote{margin:17px 0 0;color:#7b929f;font-size:12px}.donate-section{background:#eef6f9}.donate-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px}.donate-copy>p:not(.eyebrow){max-width:490px;color:var(--muted)}.donate-copy h2{margin-bottom:25px}.donate-copy .button{margin-top:25px}.donate-panel{background:white;border:1px solid #d9e8ee;padding:36px 43px;box-shadow:0 18px 45px #0b40500a}.panel-label{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--sky);margin-bottom:10px}.donate-option{display:flex;gap:19px;border-bottom:1px solid var(--line);padding:23px 0}.donate-option:last-of-type{border-bottom:none}.option-number{font-size:12px;font-weight:850;color:var(--sky);padding-top:6px}.donate-option h3{font-size:19px}.donate-option p{font-size:13px;color:var(--muted);line-height:1.7;margin:7px 0 0}.panel-footer{display:flex;align-items:center;justify-content:space-between;color:var(--sky);font-size:10px;font-weight:900;letter-spacing:.15em;margin-top:18px}.panel-footer span{font-size:24px}.contact-section{padding:96px 0;background:var(--navy);color:white}.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.contact-label{color:#70c1e0}.contact-section h2{color:white}.contact-section p:not(.eyebrow){max-width:515px;color:#c7dbe5}.contact-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.email-link{color:white;text-decoration:none;border-bottom:1px solid #7eaec4;padding-bottom:16px;font-size:clamp(16px,2vw,23px);font-weight:750;white-space:nowrap}.email-link span{margin-left:25px}.contact-cta>span{color:#80b8d1;font-size:10px;letter-spacing:.14em;font-weight:850}.site-footer{background:var(--navy-dark);color:#a9c7d4}.footer-inner{padding-top:39px;padding-bottom:33px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand{font-size:16px;font-weight:900;letter-spacing:.1em;color:white}.footer-brand span{display:block;margin-top:6px;font-size:9px;letter-spacing:.15em;color:#a9c7d4}.footer-inner p{font-size:12px}.back-top{font-size:12px;font-weight:750;color:white;text-decoration:none}.footer-legal{border-top:1px solid #24475e;padding-top:19px;padding-bottom:23px;display:flex;justify-content:space-between;gap:20px;font-size:11px}@media(max-width:980px){.desktop-nav{gap:16px}.hero-grid{grid-template-columns:53% 47%;min-height:550px}h1{font-size:clamp(56px,6.9vw,75px)}.mission-grid,.donate-grid{gap:55px}.hero-note{margin-top:45px}}@media(max-width:720px){.container{width:min(100% - 38px,540px)}.header-inner{height:74px}.desktop-nav{display:none}.menu-toggle{display:flex;background:none;border:0;padding:10px;flex-direction:column;gap:5px;cursor:pointer}.menu-toggle span{display:block;width:23px;height:2px;background:var(--navy)}.mobile-nav:not([hidden]){display:flex;flex-direction:column;padding:10px 19px 20px;background:white;border-top:1px solid var(--line)}.mobile-nav a{font-size:14px;font-weight:750;text-decoration:none;padding:12px 5px}.hero-grid{grid-template-columns:1fr;min-height:unset}.hero-content{padding:66px 0 15px}.hero-content h1{font-size:clamp(57px,11vw,77px)}.hero-description{font-size:17px}.hero-actions{gap:24px}.hero-note{margin-top:40px}.hero-art{margin:0 auto -10px;width:100%;max-width:420px}.hero-bottom{height:50px}.value-inner{min-height:70px;gap:14px;flex-wrap:wrap;padding-block:14px}.value-inner span{font-size:9px;letter-spacing:.07em}.value-inner .strip-star{font-size:11px}.section{padding:75px 0}.mission-grid,.donate-grid{grid-template-columns:1fr;gap:28px}.section-label{margin-bottom:16px}h2{font-size:clamp(42px,9vw,58px)}.mission-body .lead{font-size:19px}.approach-head,.activities-heading{display:block}.approach-head>p,.activities-heading>p{max-width:450px}.step-grid{grid-template-columns:1fr;gap:12px}.step-card{min-height:0;padding:24px}.step-card h3{margin-top:25px}.activity-grid{grid-template-columns:1fr}.activity-large{min-height:300px}.activity-small{min-height:190px}.donate-panel{padding:25px}.contact-inner{display:block}.contact-cta{margin-top:38px}.footer-inner{flex-wrap:wrap}.footer-inner p{width:100%;order:3;margin:0}.footer-legal{flex-direction:column;gap:6px}}@media(max-width:380px){.container{width:calc(100% - 30px)}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-content h1{font-size:54px}.email-link{font-size:16px}.value-inner{gap:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* ===============================================
   THE SOCK BIKE — MOBILE REFINEMENTS
   This entire section applies ONLY to screens 720px and below.
   Desktop styling and ALL website content are preserved.
   =============================================== */
@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  .container { width: calc(100% - 40px); max-width: 540px; }

  /* Compact header and tap-friendly mobile menu */
  .header-inner { height: 68px; }
  .brand img { width: 54px !important; height: 54px !important; }
  .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .mobile-nav:not([hidden]) { padding: 8px 20px 14px; }
  .mobile-nav a { display: block; padding: 14px 8px; border-bottom: 1px solid var(--line); }
  .mobile-nav a:last-child { border-bottom: 0; }

  /* Clearer first screen: title, explanation, actions, then logo */
  .hero-content { padding: 39px 0 0; }
  .hero-content h1 { font-size: clamp(43px, 10vw, 60px); line-height: 1.08; margin: 16px 0 16px; letter-spacing: -.055em; }
  .eyebrow { font-size: 10px; letter-spacing: .13em; }
  .hero-description { font-size: 15px; line-height: 1.65; max-width: 38ch; }
  .hero-actions { gap: 16px; margin-top: 24px; }
  .hero-actions .button { min-height: 46px; padding: 13px 17px; gap: 15px; }
  .hero-actions .text-link { line-height: 1.5; }
  .hero-note { margin-top: 22px; font-size: 9px; letter-spacing: .07em; }
  .hero-art { width: min(84%, 340px); margin: 15px auto 4px; }
  .hero-art img { filter: drop-shadow(0 12px 12px #073b5d10); }
  .hero-bottom { height: 37px; gap: 12px; font-size: 8px; letter-spacing: .11em; }
  .hero-bottom-line { max-width: none; }
  .value-inner { min-height: 58px; padding: 12px 0; gap: 9px 13px; }
  .value-inner span { font-size: 9px; letter-spacing: .045em; }
  .value-inner .strip-star { font-size: 10px; }

  /* Consistent rhythm and readable type across sections */
  .section { padding: 54px 0; }
  .section-label { margin-bottom: 11px; }
  h2 { font-size: clamp(35px, 8vw, 47px); line-height: 1.12; letter-spacing: -.052em; }
  h3 { font-size: 19px; }
  p { line-height: 1.65; }
  .mission-grid, .donate-grid { gap: 22px; }
  .mission-body { padding-top: 0; }
  .mission-body .lead { font-size: 18px; line-height: 1.5; margin-bottom: 18px; }
  .mission-body p { font-size: 15px; line-height: 1.7; margin-bottom: 13px; }
  .mission-signoff { margin-top: 21px; }

  /* Step cards: same information, less wasted space */
  .approach-head, .activities-heading { margin-bottom: 23px; }
  .approach-head > p, .activities-heading > p { font-size: 14px; line-height: 1.65; margin: 13px 0 0; }
  .step-grid { gap: 10px; }
  .step-card { padding: 19px 21px 20px; min-height: 0; }
  .step-top { align-items: center; }
  .step-icon { font-size: 23px; }
  .step-card h3 { margin-top: 12px; }
  .step-card p { font-size: 14px; line-height: 1.6; margin-top: 7px; }

  /* Photo placeholders remain visible, but don't dominate mobile */
  .activity-grid { gap: 12px; }
  .activity-large { min-height: 200px; }
  .activity-small { min-height: 143px; }
  .activity-placeholder { padding: 23px; }
  .activity-placeholder p { font-size: 20px; }
  .activity-placeholder span { font-size: 9px; }
  .placeholder-symbol { font-size: 150px; right: 22px; }
  .placeholder-lines { top: 21px; right: 20px; }
  .activity-footnote { font-size: 12px; line-height: 1.6; }

  /* Donation information stays complete and easier to scan */
  .donate-copy h2 { margin-bottom: 17px; }
  .donate-copy > p:not(.eyebrow) { font-size: 15px; margin: 12px 0; }
  .donate-copy .button { margin-top: 15px; min-height: 46px; }
  .donate-panel { padding: 22px; }
  .donate-option { padding: 17px 0; gap: 14px; }
  .donate-option h3 { font-size: 17px; }
  .donate-option p { font-size: 13px; line-height: 1.6; }

  /* Contact and footer: prevent cramped lines on narrow screens */
  .contact-section { padding: 55px 0; }
  .contact-section p:not(.eyebrow) { font-size: 15px; }
  .contact-cta { margin-top: 26px; width: 100%; }
  .email-link { display: inline-block; max-width: 100%; font-size: clamp(14px, 4vw, 19px); white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
  .email-link span { margin-left: 5px; }
  .footer-inner { padding-top: 28px; padding-bottom: 25px; gap: 12px; }
  .footer-inner p { line-height: 1.5; }
  .footer-legal { padding-top: 15px; padding-bottom: 20px; font-size: 10px; }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 32px); }
  .hero-content h1 { font-size: 43px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }
  .hero-art { width: 88%; }
  .value-inner { gap: 7px 9px; }
  .value-inner span { font-size: 8px; }
  .hero-bottom { font-size: 7px; }
  .donate-copy .button { max-width: 100%; gap: 12px; }
}
/* Hide hero subtitle and line on mobile only */
@media (max-width: 720px) {
  .hero-content .eyebrow {
    display: none;
  }
}

/* Hide extra hero text on mobile only */
@media (max-width: 720px) {
  .hero-note,
  .hero-bottom {
    display: none;
  }
}

@media (max-width: 720px) {
  .section-label,
  .contact-label {
    display: none;
  }
}

/* Hide the entire activities/photos section */
.activities-section {
  display: none;
}

@media (max-width: 720px) {
  .hero-art {
    margin-top: 40px;
    margin-bottom: 40px;
  }

.strip-star {
  display: none !important;
}
   
.strip-star {
  display: inline-block !important;
  font-size: 0 !important;
}

.strip-star::after {
  content: "•";
  font-size: 16px;
  color: #8AC7E3;
}

.panel-footer {
  display: none !important;
}

.footer-legal span:last-child {
  display: none;
}