/* The marathon landing page, and only that page. Generated by
   _nycmarathon/to_theme.py from the approved draft. Do not edit here:
   edit the draft and re-run, or the next build overwrites you. */
/* DM Sans, from the theme rather than from Google.

   The draft pulled the font off fonts.googleapis.com, which was right for a
   file somebody opens by double-clicking and wrong for a page on Positive
   Directions' own site: it is a third-party request on every load, it blocks
   the first paint, and it hands a visitor's IP to Google on a page about
   mental health. The same four weights already ship in the theme.

   pd-lp.css is linked rather than printed inline, so these relative paths
   resolve against the stylesheet, which is what we want. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/DMSans-Regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/DMSans-Medium.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/DMSans-Bold.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/DMSans-ExtraBold.woff2') format('woff2')}
:root{--navy:#1B2559;--navy2:#2B3990;--mint:#5DCAA5;--mintl:#A8E6CF;--cloud:#ECEDF1;--body:#4A5568;--ink:#1E2B5C}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section.wrap{padding-top:78px;padding-bottom:78px}

/* ---------- TOP STRIPE — light, so the Team PD badge reads ---------- */
.teamstripe{background:#fff;border-bottom:4px solid var(--mint)}
.tsin{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 24px}
.tsleft{display:flex;flex-direction:column;gap:10px;min-width:0}
.tslogos{display:flex;align-items:center;gap:21px}
.tspd{width:198px;flex-shrink:0}
.tsrule{width:1px;height:36px;background:#D5DBE8;flex-shrink:0}
.tspartner{font-size:12.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#7C89AE;font-weight:600}
.tsright{display:flex;align-items:center;gap:22px}
.tstcs{width:104px}
/* ROUND 13. There was no way off this page and back to the site.

   Carlos, 16 September: "There's no way to return to the PD website from the
   landing page, there must be a button plus the PD logo on the header to go
   back." Both, so the lockup does what people already try to click and the
   button says it out loud for anyone who does not try.

   Every href here is "/" rather than the live address on purpose. This page
   ships inside the Positive Directions site, so a root relative link lands on
   whichever host it is being served from. A hardcoded https://positivedirections.org
   would send somebody reviewing on staging out to the live site mid review,
   which is exactly the kind of thing nobody notices until a client does. */
.tshome{display:inline-block;border-radius:6px;transition:opacity .2s}
.tshome:hover{opacity:.78}
.tshome:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
/* The house button, not a browser link. First pass was a grey outline pill
   and Carlos was right that it read as nothing: the page already has a button
   language, the navy pill with white type that .cbtn uses further down, and a
   navigation control that matters should speak it. Mint arrow so the brand's
   second colour is in it, and the same lift on hover the other buttons have. */
.tsback{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#fff;
  background:var(--navy);text-decoration:none;padding:11px 20px;border:0;
  border-radius:60px;box-shadow:0 6px 18px rgba(19,26,66,.22);
  transition:background .2s, transform .2s, box-shadow .2s}
.tsback .ar{color:var(--mint);font-weight:700;transition:transform .2s}
.tsback:hover{background:var(--navy2);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(19,26,66,.30)}
.tsback:hover .ar{transform:translateX(3px)}
.tsback:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.fhome{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.fhome:hover{border-bottom-color:currentColor}
.tsdate{font-size:12.5px;line-height:1.25;letter-spacing:.15em;text-transform:uppercase;color:#8A93AB;font-weight:600;text-align:right}
.tsdate b{display:block;color:var(--navy);font-weight:800}

/* ---------- HERO ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background-color:#151D48;
  /* The five runner strip, lifted out of the hero-1-band poster. Carlos, 16
     September: "put that same hero image of the runners on the live marathon
     landing page, I like it." Rendered wide at 2400x1000 rather than reused at
     the poster's 1080, because this goes in as a background-size:cover layer
     and at 1080 the panels stretch across a 1440 viewport and go soft. The
     poster's own headline, logos and QR are not in it: the page already says
     all three underneath, and a second headline baked into the picture would
     sit directly above the real one.

     The runners' names are not in it either, and that is a judgement I made
     rather than one Carlos asked for. Rendered at 1440x560 under this page's
     own gradient, they land on the bottom edge, go grey in the wash, and clip
     outright on a taller hero. The page names all five further down anyway.
     The version with names is beside this one as runners-strip.jpg and it is
     a one line swap.

     18 per cent, not 42. The hero is wider than the strip's 2.4:1 at every
     width the site sees, so cover scales to the width and takes the excess off
     the top. At 42 that was 79 pixels at Carlos's window and every head was
     clipped. At 18 the clearance above the heads is 95px on a laptop, 108 at
     his width and 90 on an ultrawide, which is the worst case. Measured, not
     nudged until it looked right. */
  --shot:url("../img/lp/11-runners-strip.jpg");
  background-image:
    linear-gradient(96deg, rgba(19,26,66,.80) 0%, rgba(19,26,66,.74) 46%, rgba(19,26,66,.52) 100%),
    var(--shot);
  background-size:cover,cover;
  background-position:center,center 18%;
  background-repeat:no-repeat,no-repeat}
.hglow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(780px 580px at 80% 6%, rgba(93,202,165,.13), transparent 62%),
   radial-gradient(640px 500px at 2% 96%, rgba(93,202,165,.08), transparent 66%);
  animation:breathe 15s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.72;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}
.hero>*{position:relative;z-index:1}
.hmain{padding:60px 24px 66px}
.hgrid{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center}
.hwho{color:var(--mint);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:15px}
h1{font-size:clamp(34px,4.4vw,56px);font-weight:800;line-height:1.04;letter-spacing:-.025em}
h1 .g{color:var(--mint)}
.hsub{font-size:clamp(15.5px,1.65vw,18.5px);color:#C6CDE2;margin-top:24px;max-width:34em}
.never{display:inline-block;margin-top:22px;background:rgba(93,202,165,.14);border:1px solid rgba(93,202,165,.46);
  color:var(--mintl);font-weight:600;font-size:15px;padding:11px 18px;border-radius:11px}
.qrcard{background:#fff;border-radius:22px;padding:24px 24px 22px;text-align:center;box-shadow:0 26px 68px rgba(0,0,0,.44)}
.qrcard img{width:100%;max-width:250px;margin:0 auto 13px}
.qrlab{color:var(--navy);font-weight:800;font-size:16.5px;letter-spacing:.05em}
.qrsub{color:var(--body);font-size:13px;margin-top:4px}
.cta{display:block;margin-top:16px;background:var(--mint);color:#08331F;font-weight:800;font-size:16.5px;
  padding:15px 24px;border-radius:60px;text-decoration:none;transition:.2s}
.cta:hover{background:#3FB48C;transform:translateY(-2px)}

/* ---------- PROGRESS ---------- */
.prog{background:var(--cloud);padding:40px 0}
.pinner{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.pnum{font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--navy);white-space:nowrap}
/* DIRECT children only, and the raised total keeps the big size.
   The static page was <div class="pnum">$X <span>of $Y</span></div>, one span
   deep, so a bare ".pnum span" was right. The WordPress import wrapped the
   total in a span of its own and nested the goal inside the "of" span, so this
   rule hit three elements instead of one and compounded on the innermost: the
   total fell to 21px and the goal to 10px, half the size of the word "of" in
   front of it. Measured on the live page, not guessed. */
.pnum>span{font-size:.48em;font-weight:500;color:var(--body)}
.pnum>span[data-pd="raised"]{font-size:1em;font-weight:800;color:var(--navy)}
.pnum span span{font-size:1em;font-weight:inherit;color:inherit}
.pbar{flex:1;min-width:250px;height:16px;background:#DCE0E9;border-radius:10px;overflow:hidden}
.pfill{height:100%;width:0;background:linear-gradient(90deg,var(--mint),#3FB48C);border-radius:10px;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.pmeta{width:100%;font-size:13.5px;color:var(--body)}

/* ---------- SECTIONS ---------- */
section{padding:78px 0}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.018em;margin-bottom:13px;color:var(--navy)}
.lede{font-size:17.5px;color:var(--body);max-width:62ch;margin-bottom:14px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

.runner{display:grid;grid-template-columns:450px 1fr;gap:46px;align-items:center;padding:46px 0;border-top:1px solid #E6E9F0}
.runner:nth-of-type(even){direction:rtl} .runner:nth-of-type(even)>*{direction:ltr}
.rphoto{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(27,37,89,.16)}
.rphoto img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.rphoto:hover img{transform:scale(1.04)}
.play{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;background:rgba(27,37,89,.86);
  backdrop-filter:blur(7px);color:#fff;border:none;border-radius:50px;padding:11px 19px 11px 13px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;transition:.2s}
.play:hover{background:var(--mint);color:#08331F}
.play svg{width:19px;height:19px;fill:currentColor}
.runner h3{font-size:29px;font-weight:800;color:var(--navy);letter-spacing:-.015em}
.rmeta{color:var(--mint);font-weight:700;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;margin:5px 0 14px}
.runner p{color:var(--body);font-size:16.5px;max-width:56ch}
.rlink{display:inline-block;margin-top:18px;font-size:15px;font-weight:700;text-decoration:none;color:var(--navy2);
  border-bottom:2px solid var(--mint);padding-bottom:2px;transition:.18s}
.rlink:hover{color:var(--mint)}

.why{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.why::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-220px;top:-220px;
  background:radial-gradient(circle,rgba(93,202,165,.20),transparent 68%)}
.why .wrap{position:relative}
.why h2{color:#fff} .why p{color:#C6CDE2;font-size:17.5px;max-width:60ch;margin-bottom:16px}
.never2{color:var(--mintl);font-weight:700;font-size:20px;margin-top:10px}
.gives{margin-top:38px;border-top:1px solid rgba(255,255,255,.16);padding-top:28px}
.gives h4{color:var(--mint);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:15px}
.gives ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.gives li{color:#C6CDE2;font-size:15.5px;padding-left:23px;position:relative}
.gives li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--mint)}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.way{background:var(--cloud);border-radius:17px;padding:34px 32px;transition:.25s}
.way:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(27,37,89,.12)}
.way h4{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:8px}
.way p{font-size:14.5px;color:var(--body)}

/* The client read the old second box as the same offer in a different
   colour, so the get-in-touch line is now a quiet footer to the three
   ways rather than a section competing with them. */
/* ROUND 13, second pass. This band was a sentence and a button; once the form
   went into it, it became a sentence marooned beside a tall white card with a
   great deal of nothing in between. Carlos: "forms boundaries small, copy
   alongside is too stale, increase size, brand, make it look beautiful, how
   about an image and a logo."

   So it is a two column panel now: the lockup, a line that says what the form
   is for, the existing sentence and the team photograph, against the form on
   the right.

   The copy column is the wider of the two. The form sits comfortably at 445
   and the photograph is the thing that wants room, so the split is 1.14 to 1
   rather than even. The stack is centred against the form, which is 884 tall
   and always will be taller than five lines of type and a landscape
   photograph: bottom aligning it left 596 pixels of empty cloud above the
   lockup, and centring splits that into 217 above and 217 below, which reads
   as the panel's own padding instead of as a hole. Measured on staging at
   1723, not guessed. */
.waysfoot{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  align-items:stretch;gap:40px;margin-top:34px;padding:40px;
  background:var(--cloud);border-radius:24px}
.wfcopy{display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding-right:8px}
.wflogo{width:214px;height:auto;margin-bottom:26px}
.wfcopy h3{font-size:30px;line-height:1.16;letter-spacing:-.4px;color:var(--navy);
  margin:0 0 14px}
.wfcopy p{font-size:16.5px;line-height:1.66;color:var(--body);margin:0}
/* The photograph keeps its own shape. It is a three panel collage, 1800 x 820,
   and object-fit:cover in a tall box cropped 42 per cent off the width, which
   took the outer two runners with it. Carlos: "runners not centred". Nothing
   is cropped now: the box is the picture's own aspect ratio.

   flex is nailed to 0 0 auto on purpose. This is a flex item in a column, and
   an earlier version of this rule said flex:1 1 auto so the picture would fill
   the leftover height. Left in place it beats aspect-ratio, because growing
   happens after the preferred size is worked out: the box went to 774 tall,
   cover cropped 73 per cent off the width, and the outer runners were gone
   again. Watched it happen on staging. */
.wfshot{width:100%;flex:0 0 auto;aspect-ratio:1800/820;height:auto;
  object-fit:cover;border-radius:16px;margin-top:28px}
.wfform{min-width:0;display:flex;flex-direction:column}
.waysfoot p{font-size:16.5px;color:var(--body);margin:0;max-width:48ch}
/* Build notes. Deliberately loud, because anything this colour on a client
   draft has to be impossible to mistake for finished copy. Stripped by
   passing --final to this script. */
.cbtn{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:16px;
  padding:16px 34px;border-radius:40px;text-decoration:none;transition:.2s}
.cbtn:hover{background:var(--navy2);transform:translateY(-2px)}
.promise{margin-top:38px;background:rgba(93,202,165,.13);border:1px solid rgba(93,202,165,.42);
  border-left:5px solid var(--mint);border-radius:14px;padding:26px 30px}
.promise b{display:block;color:var(--mint);font-size:20.5px;font-weight:800;margin-bottom:7px;letter-spacing:-.01em}
.promise span{display:block;color:#C6CDE2;font-size:16px}

footer{background:#141C44;color:#93A0C4;padding:52px 0;font-size:13.5px;text-align:center}
.flogos{display:flex;align-items:center;justify-content:center;gap:30px;margin-bottom:28px;flex-wrap:wrap}
.flogos .pd{width:230px} .flogos .tcs{width:104px;opacity:.9}
.crisis{max-width:60ch;margin:22px auto 0;padding:17px 21px;background:rgba(255,255,255,.06);border-radius:12px;
  border-left:3px solid var(--mint);color:#B9C3DE;font-size:13px;line-height:1.65;text-align:left}
.crisis b{color:#fff}
.disc{max-width:62ch;margin:18px auto 0;line-height:1.65;font-size:12.5px;color:#7C89AE}

/* ---------- VIDEO LIGHTBOX ---------- */
.lb{position:fixed;inset:0;background:rgba(10,14,36,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.lb.on{display:flex}
.lbin{width:min(420px,92vw);aspect-ratio:9/16;background:#000;border-radius:16px;overflow:hidden;position:relative}
.lbin iframe{width:100%;height:100%;border:0}

/* THE VIDEO NEEDED ITS OWN RULE AND DID NOT HAVE ONE.

   This lightbox was built for a YouTube iframe, and an iframe has no natural
   size, so `width:100%` was enough. A <video> does: it reports the size of the
   film, 1080x1916 here. With no rule to constrain it, it rendered at 1080x1916
   inside a 420x747 box with overflow:hidden, and you saw the middle third of
   the picture. It read as a crop and a heavy zoom, which is exactly what it
   was.

   Absolutely positioned, so it fills .lbin and ignores .lbmsg's 32px padding,
   which is there for the text case. object-fit:contain rather than cover: the
   film is 1080/1916 and the box is 9/16, which are within a fifth of a percent
   of each other, so this fills the frame either way. contain is the one that
   cannot crop if a future film is cut to a different shape. */
.lbin video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;background:#000}
.lbmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#C6CDE2;font-size:14.5px;padding:32px;line-height:1.6}
.lbx{position:absolute;top:-46px;right:0;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1}

.note{position:fixed;left:16px;bottom:16px;background:#FFE08A;color:#6B4C00;font-size:11.5px;font-weight:700;
  padding:9px 15px;border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:150;max-width:300px;line-height:1.5}

@media(max-width:900px){
 .hgrid{grid-template-columns:1fr;gap:34px}
 .hero{background-size:cover,100% auto;background-position:center,top center;
   background-image:
     linear-gradient(180deg, rgba(19,26,66,.78) 0%, rgba(19,26,66,.88) 26%, rgba(21,29,72,.99) 52%),
     var(--shot)}
 .tspd{width:164px} .tslogos{gap:16px} .tspartner{font-size:11.5px}
 .tsin{flex-direction:column;align-items:flex-start;gap:14px}
 .tsright{width:100%;justify-content:space-between} .tsdate{text-align:left}
 .tsback{font-size:12px;padding:8px 14px}
 .waysfoot{grid-template-columns:1fr;gap:26px;padding:24px}
 .wfshot{min-height:220px;max-height:280px}
 .wfcopy h3{font-size:25px}
 .runner,.runner:nth-of-type(even){grid-template-columns:1fr;gap:22px;direction:ltr}
 .ways{grid-template-columns:1fr} .gives ul{grid-template-columns:1fr}
 section.wrap{padding-top:56px;padding-bottom:56px} .waysfoot{padding:22px 24px;margin-top:28px}

 .topbar .pd{width:200px}
}
@media(prefers-reduced-motion:reduce){.hbg img{animation:none} .reveal{opacity:1;transform:none}}

/* ---- the hero give card, which used to be a QR code -------------------
   Robin sent a QR so we would have the destination. On a web page the
   destination is the thing that belongs; a QR asks somebody to point a
   second device at the one already in their hand. The card keeps the
   shape and the weight the QR card had so the hero composition is
   unchanged. */
.givecard{background:#fff;border-radius:22px;padding:30px 26px 24px;text-align:center;
  box-shadow:0 26px 68px rgba(0,0,0,.44)}
.gclab{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.gcsub{margin:9px auto 0;max-width:26ch;font-size:14.5px;line-height:1.5;color:var(--body)}
.gcalt{display:block;margin-top:12px;font-size:14px;font-weight:700;color:var(--navy);
  text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.gcalt:hover{border-bottom-color:var(--navy)}

/* The total has to be updated by hand, so it says when it was true and
   links to the page that is always right. */
.pasof{color:var(--body);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.22)}
.pasof:hover{border-bottom-color:var(--navy);color:var(--navy)}

/* Where the GoHighLevel form lands. Sized so the layout does not jump
   when the embed arrives, and it collapses to nothing while empty so the
   section does not carry a hole. */
/* ROUND 13. The sign-up form, dressed so it belongs to the page.

   What CSS here can and cannot do, because the difference matters. The form's
   fields live in an iframe on Amaury's GoHighLevel host, which is a different
   origin, so nothing in this stylesheet can reach a label, an input or the
   submit button. Those are set inside GoHighLevel's own form builder. What
   this does is make the container the form sits in look like the give card
   opposite it: same white, same 22px radius, same shadow, so the seam between
   our page and their iframe falls on a card edge instead of in mid air.

   :empty is doing real work in the second rule. Until a form link is saved the
   slot holds nothing but an HTML comment, and comments do not count for
   :empty, so the card would otherwise render as a white rectangle with nothing
   in it. That is how this section launches today. */
/* overflow:hidden was cutting the form off at the bottom of the card. The
   radius is on the iframe instead, so nothing needs clipping. */
.signup{flex:0 0 auto;min-width:0;background:#fff;border-radius:20px;padding:12px;
  box-shadow:0 20px 52px rgba(19,26,66,.16);display:flex}
.signup:empty{display:none;padding:0;box-shadow:none;background:none}
.signup iframe{display:block;width:100%;border:0;border-radius:12px;background:#fff}
.signupalt{width:100%;margin:14px 0 0;font-size:14.5px;color:var(--body)}
.wfform .signupalt{text-align:center;margin-top:18px}
.signupalt a{color:var(--navy);font-weight:700}