:root{
  --bg: #000000;
  --ink: #ffffff;
  --teal: #bcfffc;
  --red: #ff5959;
  --muted: #cacaca;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

img{ max-width: 100%; }

/* ---- persistent home link, top-left ---- */
.cs-home{
  position: fixed;
  top: 28px;
  left: 28px;
  width: 60px;
  height: 60px;
  z-index: 10;
}
.cs-home img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-container{
  --cs-pad-l: 16.4vw;
  --cs-pad-r: 13.4vw;
  --cs-bleed-pad: 9.7vw;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(120px, 15vw, 190px) var(--cs-pad-r) 8rem var(--cs-pad-l);
}

/* Images ignore the text column's margins — they get their own, narrower ones,
   so pictures can run wider than body copy instead of being squeezed to match it.
   Both sets of margins are driven by custom properties so they shrink together
   at narrower widths (see the media queries below). */
.cs-bleed{
  margin-left: calc(-1 * var(--cs-pad-l));
  margin-right: calc(-1 * var(--cs-pad-r));
  padding-left: var(--cs-bleed-pad);
  padding-right: var(--cs-bleed-pad);
}

.cs-section{
  position: relative;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---- decorative doodles ---- */
.cs-doodle{
  position: absolute;
  pointer-events: none;
}

.cs-hero{
  padding-top: clamp(90px, 12vw, 150px);
}

.cs-doodle-shrug{
  width: clamp(90px, 11vw, 150px);
  aspect-ratio: 161 / 144;
  top: 0;
  right: 0%;
}
.cs-shrug-body{ position: absolute; left: 0; top: 5.24%; width: 100%; height: 94.77%; }
.cs-shrug-accent{ position: absolute; left: 65.27%; top: 0; width: 25.56%; height: 20.84%; }

/* ---- headings & copy ---- */
.cs-heading{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.5vw, 3.125rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.cs-heading em{
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.cs-heading-center{ text-align: center; }
.cs-red{ color: var(--red); }

.cs-heading-with-mark{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.cs-wordmark{
  height: 1.56em;
  width: auto;
  display: block;
}

.cs-copy{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.55vw, 1.375rem);
  line-height: 1.7;
  color: var(--ink);
}
.cs-copy p{ margin: 0 0 1.55em; }
.cs-copy p:last-child{ margin-bottom: 0; }
.cs-copy a{ color: var(--teal); text-decoration: underline; }
.cs-copy a:hover{ text-decoration: none; }
.cs-copy-narrow{ max-width: 570px; flex: 1 1 320px; }

/* ---- two-column: mission text + team photo ---- */
.cs-two-col{
  display: flex;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}

.cs-photo{
  flex: 1 1 320px;
  max-width: 453px;
  margin: 0;
}
.cs-photo figcaption{
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.375rem);
  margin-bottom: 0.6rem;
}
.cs-photo img{
  width: 100%;
  height: auto;
  aspect-ratio: 453 / 375;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

/* ---- "this turned into this" ---- */
.cs-transform{ padding-top: 1rem; }

.cs-arrow{
  position: absolute;
  width: clamp(28px, 3.2vw, 46px);
  height: auto;
  pointer-events: none;
}
.cs-arrow-1{ left: 24%; top: 4.4rem; }
.cs-arrow-2{ left: 66%; top: 5.6rem; transform: rotate(180deg) scaleY(-1); }

.cs-before-after{
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5rem;
  margin-bottom: 3rem;
}
.cs-sketch{
  width: clamp(200px, 21.5vw, 310px);
  height: auto;
  display: block;
  border-radius: 4px;
}
.cs-product{
  width: clamp(320px, 52vw, 747px);
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ---- summer + signature ---- */

.cs-signature{
  position: relative;
  width: clamp(280px, 31vw, 447px);
  aspect-ratio: 447.5 / 118.91;
  margin-top: 3rem;
}
.cs-signature img{ position: absolute; display: block; }
.cs-signature img:nth-child(1){ left: 0%;     top: 24.33%; width: 13.48%; height: 4.56%; }
.cs-signature img:nth-child(2){ left: 14.57%; top: 14.14%; width: 13.74%; height: 85.86%; }
.cs-signature img:nth-child(3){ left: 27.22%; top: 32.80%; width: 72.51%; height: 41.82%; }
.cs-signature img:nth-child(4){ left: 58.23%; top: 10.39%; width: 6.18%;  height: 29.75%; }
.cs-signature img:nth-child(5){ left: 80.65%; top: 0%;     width: 1.12%;  height: 25.55%; }
.cs-signature img:nth-child(6){ left: 93.76%; top: 5.57%;  width: 6.24%;  height: 17.48%; }

/* ---- dividers ---- */
.cs-divider{
  border: none;
  border-top: 4px solid var(--ink);
  width: 92%;
  max-width: 820px;
  margin: 3rem auto;
}

/* ===================== RESPONSIVE ===================== */
/* Margins shrink in two steps as the viewport narrows, rather than jumping
   straight from the wide-desktop values to a mobile layout — this keeps
   images (and text) from being squeezed into wrapping/stacking earlier than
   they need to. Because .cs-bleed derives its margins from the same custom
   properties, it stays in sync automatically at every step. */

@media (max-width: 1200px){
  .cs-container{
    --cs-pad-l: 9vw;
    --cs-pad-r: 8vw;
    --cs-bleed-pad: 4vw;
  }

  /* Below this width, the image bleed margin (4vw/3vw) can shrink under the
     home logo's own footprint (28px + 60px = 88px), so full-bleed images can
     pass directly beneath it as the page scrolls. Simplest fix: hide it. */
  .cs-home{ display: none; }
}

@media (max-width: 820px){

  .cs-container{
    --cs-pad-l: 7vw;
    --cs-pad-r: 7vw;
    --cs-bleed-pad: 3vw;
    padding-top: clamp(90px, 26vw, 130px);
    padding-bottom: 6rem;
  }

  .cs-doodle{ display: none; }

  .cs-heading{ font-size: 1.7rem; }

  .cs-arrow{ display: none; }

  .cs-two-col{ margin: 1.5rem 0 2rem; }
  .cs-photo{ max-width: 420px; }

  .cs-before-after{ margin-top: 2.5rem; margin-bottom: 2rem; }
}