/* ============================================================
   Neighborhood Swing — landing page
   Rebuilt to the Illustrator artboard (1179 x 5756 px).

   Sizes are written as calc(N * var(--px)), where N is the number
   measured off the artboard. --px is 1px at the design width and
   shrinks with the viewport below it, so the page holds its exact
   proportions down to the phone breakpoint, where a hand-set
   layout takes over.

   The artboard is set entirely in Archivo SemiBold (600) with the
   width axis varied: ~125% for display, ~102% for section heads,
   ~98-110% for body, ~92% for the italic accents. Those widths
   were solved by matching measured ink widths and cap heights.
   ============================================================ */

:root{
  --px: 1px;

  --cream:      #FFFFF0;
  --cream-ink:  #FBFBEC;
  --ink:        #3B382C;
  --green:      #5D873B;
  --green-lift: #6B9A45;
  --marquee:    #999A90;

  --card1-a:#516937; --card1-b:#6D8551;
  --card2-a:#7C945F; --card2-b:#91AA75;
  --card3-a:#98B17D; --card3-b:#9DB783;
  --card4:  #9DB783;

  --field: rgba(93,135,59,.30);
}

/* Below the artboard width the whole page scales in proportion — the
   artboard is 1179 device pixels, which is 393 CSS px on the iPhone it
   was drawn for, so phones get the design at exactly 1/3 scale. */
@media (max-width:1178.98px){
  :root{ --px: 0.0848176vw; }        /* 1179 x this = 100vw */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  font-stretch:98%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

.shell{
  width:100%;
  max-width:calc(1179 * var(--px));
  margin-inline:auto;
  padding-inline:calc(111 * var(--px));
}

/* big caps are set ~21px left of the body column on the artboard so
   their stems align optically rather than mathematically */

/* ---------------- header ---------------- */
.hdr{
  background:var(--cream);
  height:calc(210 * var(--px));
  display:flex;align-items:center;
}
.hdr__in{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:calc(72 * var(--px)) calc(60 * var(--px));
  gap:calc(24 * var(--px));
}
.hdr__in > a{flex:0 0 auto}
.hdr__logo{width:calc(330 * var(--px));max-width:none;margin:calc(-18 * var(--px)) 0 0 calc(-16 * var(--px))}
.hdr__addr{
  margin:0;text-align:right;
  font-size:calc(23 * var(--px));
  line-height:calc(29 * var(--px));
  font-stretch:108%;
}

/* ---------------- dark block ----------------
   One plate lifted from the artboard: the low-poly mesh, the fade to
   black and the simulator photograph, all still in register. Black
   underneath, so anything past the plate matches seamlessly.      */
.dark{
  /* width stretches to fill, height pinned to the artboard so this band always
     ends exactly where the photograph block begins — otherwise a wide window
     leaves a visible step between the two. The mesh is abstract, so stretching
     it horizontally reads as nothing. */
  background:url("../img/dark-top.jpg") top center / 100% calc(408 * var(--px)) no-repeat, #000;
  color:var(--cream-ink);
}
/* The photograph, as its own block so it can stack below the form on a
   phone. On the artboard it begins 23px above this block's top edge, so
   the background is nudged up to keep the screen where it was drawn. */
.turf{
  /* flow-root stops the first child's margin collapsing through and
     dragging the photograph out of register */
  display:flow-root;
  /* Locked to the design width. At 100% the photograph would keep growing
     past 1179px while the text stays put, and the band of words would ride
     up onto the simulator screen. Black behind it, so the wider the window
     the more black surrounds the shot — which is how the artboard reads. */
  background:url("../img/turf.jpg") center calc(-23 * var(--px)) / calc(1179 * var(--px)) auto no-repeat, #000;
  padding-bottom:calc(182 * var(--px));
}

.hero__h1{
  margin-block:0;padding-top:calc(71 * var(--px));
  font-size:calc(65 * var(--px));
  font-stretch:125%;
  line-height:1;
  color:var(--cream-ink);
}
.hero__kick{
  margin:calc(9 * var(--px)) 0 0;
  font-size:calc(42 * var(--px));
  font-stretch:92%;
  font-style:italic;
  line-height:1;
  color:var(--green);
}
.hero__intro{
  scroll-margin-top:calc(36 * var(--px));
  margin:calc(50 * var(--px)) 0 0;
  font-size:calc(19 * var(--px));
  line-height:calc(28 * var(--px));
  max-width:calc(420 * var(--px));
}

/* ---------------- form ---------------- */
.form{margin-top:calc(2 * var(--px))}
.form__grid{
  display:grid;
  grid-template-columns:calc(452 * var(--px)) calc(452 * var(--px));
  justify-content:space-between;
  gap:calc(26 * var(--px)) calc(63 * var(--px));
  align-items:start;
}
.fld{
  width:100%;height:calc(56 * var(--px));
  background:var(--field);
  border:0;border-radius:calc(8 * var(--px));
  padding-inline:calc(24 * var(--px));
  font-family:inherit;font-weight:600;font-stretch:98%;
  font-size:calc(19 * var(--px));
  color:var(--cream-ink);
}
.fld::placeholder{color:#C8CCC0;opacity:1}
.fld:focus{outline:calc(3 * var(--px)) solid var(--green);outline-offset:calc(2 * var(--px))}

.consent{display:flex;align-items:flex-start;gap:calc(18 * var(--px));cursor:pointer}
.consent input{
  flex:0 0 auto;
  width:calc(50 * var(--px));height:calc(50 * var(--px));
  margin:0;appearance:none;-webkit-appearance:none;
  background:var(--field);
  border:0;border-radius:calc(6 * var(--px));
  cursor:pointer;position:relative;
}
.consent input:checked::after{
  content:"";position:absolute;
  left:calc(17 * var(--px));top:calc(9 * var(--px));
  width:calc(13 * var(--px));height:calc(25 * var(--px));
  border:solid var(--cream-ink);
  border-width:0 calc(4 * var(--px)) calc(4 * var(--px)) 0;
  transform:rotate(45deg);
}
.consent input:focus-visible{outline:calc(3 * var(--px)) solid var(--green);outline-offset:calc(2 * var(--px))}
.consent span{
  /* sized so the whole disclosure sits within the checkbox's vertical span */
  font-size:calc(12 * var(--px));
  line-height:calc(16 * var(--px));
}

.formnote{margin:calc(16 * var(--px)) 0 0;font-size:calc(18 * var(--px));color:#E8A87C}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--cream-ink);
  border:0;border-radius:calc(8 * var(--px));
  font-family:inherit;font-weight:600;
  line-height:1;text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--green-lift)}
.btn:focus-visible{outline:calc(3 * var(--px)) solid var(--cream-ink);outline-offset:calc(3 * var(--px))}

.btn--submit{
  width:calc(284 * var(--px));height:calc(63 * var(--px));
  font-size:calc(38 * var(--px));font-stretch:120%;
}
/* the artboard centres the button on the form area, 7px right of the
   text column's midpoint */
.form__submit{display:flex;justify-content:center;margin-top:calc(67 * var(--px))}
.form__submit .btn{margin-left:calc(14 * var(--px))}

/* ---------------- band over the turf ---------------- */
.band{
  margin:calc(449 * var(--px)) 0 0;
  display:flex;justify-content:space-between;
  padding-inline:calc(31 * var(--px));
  font-size:calc(32 * var(--px));font-stretch:96%;
  line-height:1;color:var(--cream-ink);
}

/* ---------------- what do we offer ---------------- */
.offer__h2{
  margin-block:calc(230 * var(--px)) 0;
  font-size:calc(55 * var(--px));font-stretch:101%;
  line-height:1;color:var(--cream-ink);
}
.offer{
  /* two lists pushed to the outer edges and sized to their own text,
     which is how the artboard sets them (left col x108-587, right x644-1080) */
  display:flex;justify-content:space-between;gap:calc(24 * var(--px));
  margin-inline:calc(-3 * var(--px)) calc(-12 * var(--px));
  margin-top:calc(33 * var(--px));
  font-size:calc(40 * var(--px));font-stretch:91%;
  font-style:italic;color:var(--green);
  line-height:calc(80 * var(--px));
}
.offer ul{list-style:none;margin:0;padding:0}
/* one line each, as drawn. Clipped rather than allowed to widen the page,
   so a slow or failed webfont can never cause sideways scroll. */
.offer{overflow:hidden}
.offer li{white-space:nowrap}
.offer ul:last-child{text-align:right}

.soon{
  /* breaks out of the 111px text column: the artboard runs it x27-1156 */
  margin:calc(170 * var(--px)) calc(-84 * var(--px)) 0;
  font-size:calc(52 * var(--px));font-stretch:96%;
  font-style:italic;
  line-height:calc(58 * var(--px));
  color:var(--marquee);text-align:center;white-space:nowrap;
  /* one line per row. Clipped rather than allowed to widen the page,
     so a slow or failed webfont can never cause sideways scroll. */
  overflow:hidden;
}
.soon b{font-weight:inherit;color:var(--green)}

/* ---------------- ways to play ----------------
   The artboard fades black into cream over roughly 1300px, with the
   mesh continuing underneath the whole way down.                   */
.ways{
  background:
    linear-gradient(180deg,#000 0, rgba(0,0,0,.97) calc(60 * var(--px)), rgba(0,0,0,0) calc(1300 * var(--px))),
    url("../img/cream-tex.jpg") top center / 100% auto repeat-y,
    var(--cream);
  padding-bottom:calc(166 * var(--px));
}
.ways__h2{
  margin-block:0;padding-top:calc(34 * var(--px));
  font-size:calc(54 * var(--px));font-stretch:103%;
  line-height:1;color:var(--cream-ink);
}
.ways__intro{
  margin:calc(38 * var(--px)) 0 0;
  font-size:calc(30 * var(--px));font-stretch:105%;
  line-height:calc(40 * var(--px));
  color:var(--cream-ink);
}
.ways__intro em{font-style:normal;color:var(--green)}

/* the cards step a little further right as they go down, as drawn */
.cards{margin-top:calc(160 * var(--px))}
.card{
  width:calc(885 * var(--px));
  min-height:calc(316 * var(--px));
  border-radius:calc(20 * var(--px));
  padding:calc(66 * var(--px)) calc(65 * var(--px)) calc(40 * var(--px)) calc(104 * var(--px));
  color:var(--cream-ink);
}
.card + .card{margin-top:calc(129 * var(--px))}
.card h3{
  margin:0;text-align:center;
  font-size:calc(42 * var(--px));font-stretch:118%;
  line-height:1;
}
.card p{
  /* stops a single word being left alone on the last line */
  text-wrap:pretty;
  margin:calc(32 * var(--px)) 0 0;
  font-size:calc(29 * var(--px));font-stretch:110%;
  line-height:calc(40 * var(--px));
}
.card--1{margin-left:calc(29 * var(--px));background:linear-gradient(180deg,var(--card1-a),var(--card1-b))}
.card--2{margin-left:calc(36 * var(--px));background:linear-gradient(180deg,var(--card2-a),var(--card2-b))}
.card--3{margin-left:calc(37 * var(--px));background:linear-gradient(180deg,var(--card3-a),var(--card3-b))}
.card--4{margin-left:calc(45 * var(--px));background:var(--card4)}

/* ---------------- closing ---------------- */
.close{
  background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);
  text-align:center;
}
.close__h2{
  margin:0 calc(-30 * var(--px));padding-top:0;
  white-space:nowrap;
  font-size:calc(65 * var(--px));font-stretch:122%;
  line-height:1;color:var(--ink);
}
.btn--claim{
  width:calc(496 * var(--px));height:calc(87 * var(--px));
  /* 38px puts ~25px of space on every side of the label inside the 496x87
     button; at 40px the sides were 14px against 24px top and bottom */
  font-size:calc(38 * var(--px));font-stretch:123%;
  margin-top:calc(91 * var(--px));
}

/* ---------------- footer ---------------- */
.ftr{
  background:url("../img/cream-tex.jpg") bottom center / 100% auto repeat-y, var(--cream);
  padding:calc(197 * var(--px)) calc(72 * var(--px)) calc(150 * var(--px));
}
.ftr__logo{width:calc(433 * var(--px));margin-left:calc(-21 * var(--px))}
.ftr__txt{
  margin:calc(23 * var(--px)) 0 0;
  font-size:calc(23 * var(--px));
  line-height:calc(29 * var(--px));
  font-stretch:109%;
}
.ftr__txt a{text-decoration:none}
.ftr__txt a:hover{color:var(--green)}
.ftr__txt + .ftr__txt{margin-top:calc(27 * var(--px))}

/* the contact block and the icons sit on one row, icons pinned to the
   bottom right so they occupy the empty half of the footer */
.ftr__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:calc(32 * var(--px))}
/* margin-left:auto keeps the icons hard right even on the narrowest phones,
   where they drop onto a line of their own rather than squeezing the address */
.social{display:flex;gap:calc(20 * var(--px));flex:0 0 auto;margin-left:auto}

/* thank-you page: the whole footer stacks and centres, icons underneath */
.ftr--center .ftr__in{flex-direction:column;align-items:center;text-align:center}
.ftr--center .ftr__logo{margin-left:0;margin-inline:auto}
.ftr--center .social{margin-left:0;justify-content:center}
.social a{
  width:calc(76 * var(--px));height:calc(76 * var(--px));
  display:grid;place-items:center;
  border:calc(2 * var(--px)) solid var(--ink);
  border-radius:calc(8 * var(--px));
  color:var(--ink);
  transition:background .15s,color .15s,border-color .15s;
}
.social a:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.social svg{width:calc(36 * var(--px));height:calc(36 * var(--px))}

/* ---------------- thank-you page ---------------- */
.ty{
  background:url("../img/dark-top.jpg") top center / 100% calc(408 * var(--px)) no-repeat, #000;
  color:var(--cream-ink);text-align:center;
  padding:calc(150 * var(--px)) calc(111 * var(--px)) calc(150 * var(--px));
}
.ty h1{margin:0;font-size:calc(65 * var(--px));font-stretch:125%;line-height:1;color:var(--cream-ink)}
.ty__kick{margin:calc(29 * var(--px)) 0 0;font-size:calc(42 * var(--px));font-stretch:92%;font-style:italic;line-height:1;color:var(--green)}
.ty__body{
  margin:calc(52 * var(--px)) auto 0;
  font-size:calc(30 * var(--px));font-stretch:105%;
  line-height:calc(40 * var(--px));
  max-width:calc(930 * var(--px));
}
.ty__body--2{margin-top:calc(26 * var(--px))}
.ty__row{display:flex;gap:calc(24 * var(--px));justify-content:center;margin-top:calc(64 * var(--px));flex-wrap:wrap}
.btn--ghost{
  background:transparent;color:var(--cream-ink);
  border:calc(2 * var(--px)) solid var(--green);
  height:calc(76 * var(--px));
  padding-inline:calc(34 * var(--px));
  font-size:calc(26 * var(--px));font-stretch:118%;
}
.btn--ghost:hover{background:var(--green)}

/* ============================================================
   Phones. Below this width the two-column artboard can't hold its
   proportions and stay readable, so it stacks and the type is set
   at absolute sizes instead of scaled ones.
   ============================================================ */


/* placed last so it wins over the element rules above */
.optical{margin-left:calc(-21 * var(--px))}