/* ===========================================================================
   Cherry On Top Services — hand-coded site
   ---------------------------------------------------------------------------
   Built on the SCE Event Group rebuild (the reference site the client named
   as the layout/type direction they wanted). ALL copy is now Cherry On Top's
   own, taken verbatim from their onboarding form. The canvas model below is
   inherited from that rebuild: a FIXED 1200px canvas,
   every section is a full-bleed band whose background spans the viewport,
   with a 1200px-wide centred canvas (.cv) inside it holding absolutely
   positioned elements. All geometry came from measuring the original's
   rendered DOM at an asserted 1200px viewport width.

   Files
     style.css      this file: palette, fonts, type scale, components
     css/home.css   per-section geometry (one block per section)
     script.js      the three behaviours: text rotator, sticky header,
                    dropdown menus, photo parallax

   Resizing a section: every .sec sets its own height through the --h
   custom property in css/home.css. Change that one number.
   =========================================================================== */

/* ---- fonts ---------------------------------------------------------------
   Anton (display) and Montserrat (everything else), the two families the
   original actually uses. Pulled locally so the sandbox works offline.     */
@font-face {
  font-family: 'Anton';
  src: url('fonts/anton-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- palette + canvas metrics ------------------------------------------ */
:root {
  /* Cherry On Top brand pink, read off the swatch supplied 2026-08-01.
     CONFIRM THE EXACT HEX: it was sampled by eye from a screenshot of a
     button, not from a brand file. Every pink on the page comes from
     these two variables, so correcting it is a one line change.      */
  --pink:    #8f2a52;  /* rgb(143,42,82)  the brand raspberry           */
  --pink-lt: #d26e9b;  /* the light tint, for pink text on black        */
  --ink:   #000;      /* section black                                  */
  --cream: #f5f4f0;   /* rgb(245,244,240) service-panel cream           */
  --band:  #e7e6e2;   /* rgb(231,230,226) darker band above/below cream */
  --body:  #4a4e57;   /* rgb(74,78,87)   body copy                      */
  --head:  #212934;   /* rgb(33,41,52)   dark headings                  */
  --pale:  #f9f9fb;   /* rgb(249,249,251) footer near-white             */

  --canvas: 1200px;
  /* Showit-style edge pinning: how much room is left outside the canvas.
     Used to bleed elements out to the viewport edge on wide screens.     */
  --gutter: max(0px, calc((100vw - var(--canvas)) / 2));

  --hdr-h: 117.4px;      /* static header height     */
  --hdr-sticky-h: 83.8px;/* compact sticky bar height */
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  /* full-bleed backgrounds and the wide marquee-ish rows must not create a
     horizontal scrollbar; sections themselves stay overflow:visible so
     nothing clips elements that poke outside their band. */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- the canvas model --------------------------------------------------
   .sec  full-bleed band, height driven by --h
   .cv   1200px centred canvas; its children are absolutely positioned    */
.sec {
  position: relative;
  width: 100%;
  height: var(--h);
  overflow: visible;
}
.cv {
  position: relative;
  width: var(--canvas);
  height: 100%;
  margin-inline: auto;
}
.cv > * { position: absolute; }

/* A section whose background image is pinned while the content scrolls.
   The original does this with JS; background-attachment gets us the same
   look on desktop (iOS ignores it, which is fine for a desktop build). */
.sec--parallax {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}
/* The 5px pink rule on top of each statement band. Drawn as an overlay
   rather than a border-top on purpose: a border would shrink .cv's content
   box by 5px, and the statement is centred against .cv, so it would land
   2.5px low. */
.sec--parallax::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 5px; background: var(--pink);
  z-index: 2;
}

/* ---- type scale (measured off the original) ---------------------------- */
.t-hero {
  font-family: 'Anton', Arial, sans-serif; font-weight: 400;
  font-size: 100px; line-height: 172px; letter-spacing: 0.24px;
  text-transform: uppercase; color: #fff;
}
.t-h1 {
  font-family: 'Anton', Arial, sans-serif; font-weight: 400;
  font-size: 45px; line-height: 54px; letter-spacing: 0.4px;
  text-transform: uppercase; color: #fff;
}
.t-h2 {
  font-family: 'Anton', Arial, sans-serif; font-weight: 400;
  font-size: 36px; line-height: 43.2px; color: var(--head);
}
.t-h3 {
  font-family: 'Anton', Arial, sans-serif; font-weight: 400;
  font-size: 46px; line-height: 55.2px; color: #fff;
  /* the pink halo behind the three full-bleed statements */
  text-shadow: 0 0 10px var(--pink);
}
.t-quote {
  font-family: 'Anton', Arial, sans-serif; font-weight: 400;
  font-size: 25px; line-height: 35px; letter-spacing: 0.24px;
  color: var(--pink);
}
.t-body {
  font-size: 16px; font-weight: 400; line-height: 27.52px;
  letter-spacing: 0.24px; color: var(--body);
}
.t-attr {
  font-size: 16px; font-weight: 400; line-height: 22.4px;
  letter-spacing: 0.24px; color: var(--body);
}
.t-small {
  font-size: 14px; font-weight: 400; line-height: 24.08px;
  letter-spacing: 0.24px; color: var(--pale);
}
.t-nav {
  font-size: 15px; font-weight: 600; line-height: 25.8px;
  letter-spacing: 0.225px; text-transform: uppercase; color: #fff;
}
.t-btn {
  font-size: 15px; font-weight: 600; line-height: 17px;
  text-transform: uppercase;
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
}
/* Most buttons in the original wrap their label in an inner span inset 29px
   each side; that inset is what decides where the label wraps, so match it
   with padding rather than letting the text use the full button width. */
.btn--inset { padding: 0 29px; }
.btn--pink  { background: var(--pink); color: #fff; }
.btn--white { background: #fff; color: var(--pink); }
.btn--pink:hover  { background: #a83461; }
.btn--white:hover { background: var(--cream); }

/* ---- header ------------------------------------------------------------
   The original reuses the same row twice: inline at the top of the page,
   then a shorter fixed bar once you scroll past it. Two elements here:
   .hdr (in flow) and .hdr-sticky (fixed, revealed by script.js).        */
.hdr { background: var(--ink); }
.hdr__logo img { width: 180px; height: 77.4px; object-fit: contain; }

.nav__link {
  display: block; white-space: nowrap;
  /* absolutely positioned single-line links shrink-wrap at the canvas
     edge and wrap unexpectedly without this. */
}
.nav__link:hover { color: var(--pink); }

/* dropdowns: hidden until the parent is hovered or focused.
   NB: do NOT set `position: relative` on .nav__item — it is a direct child
   of .cv, so `.cv > *{position:absolute}` already positions it (and an
   absolutely positioned box is a containing block for the submenu). Both
   selectors have the same specificity, so a `relative` here would win by
   source order and drop the whole nav back into normal flow. */
.nav__sub {
  position: absolute; top: 25.8px; left: 0; z-index: 40;
  min-width: 166.3px; padding: 6px 0;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; }
.nav__sub--wide { min-width: 231px; }
.nav__sub a {
  display: block; padding: 11px 16px;
  font-size: 15px; font-weight: 600; line-height: 26px;
  letter-spacing: 0.225px; color: #fff; white-space: nowrap;
}
.nav__sub a:hover { background: var(--pink); }
.nav__caret { display: inline-block; width: 10px; margin-left: 6px; }

.hdr-sticky {
  position: fixed; inset: 0 0 auto 0; z-index: 10011;
  height: var(--hdr-sticky-h); background: var(--ink);
  /* revealed by script.js once the static header has scrolled away */
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.hdr-sticky.is-on { transform: none; }
.hdr-sticky__logo img { width: 110px; height: 47.3px; object-fit: contain; }

/* ---- tilted photo frames ----------------------------------------------
   A 360x360 square with a 10px white mat, the photo cover-cropped inside.
   The tilt is a rotation about the centre, so position each frame by its
   CENTRE minus 180px. --par is the scroll parallax offset script.js sets;
   the two frames in a pair drift in opposite directions.               */
.tilt {
  width: 360px; height: 360px;
  border: 10px solid #fff;
  transform: translateY(var(--par, 0px)) rotate(var(--tilt, 0deg));
  will-change: transform;
}
.tilt img { width: 100%; height: 100%; object-fit: cover; }
.tilt--a { --tilt: 11deg; }
.tilt--b { --tilt: -13deg; }

/* ---- the cream service panels ----------------------------------------
   Sections 8 and 10 are cream with a slightly darker 80px band top and
   bottom (the cream under a ~5.7% black tint in the original).        */
.panel-band {
  left: calc(0px - var(--gutter));
  width: calc(100% + var(--gutter) * 2);
  height: 80px;
  background: var(--band);
}
.panel-band--top    { top: 0; }
.panel-band--bottom { bottom: 0; }

/* ---- footer ------------------------------------------------------------ */
.foot-link {
  display: block; white-space: nowrap;
  font-size: 15px; font-weight: 600; line-height: 17px;
  text-transform: uppercase; color: #fff;
}
.foot-link:hover { color: var(--pink); }
/* the wrapping, centred link cluster in the footer's right column */
.foot-links {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  column-gap: 20px; row-gap: 10.5px;
}
.foot-social { display: flex; justify-content: center; gap: 19.9px; }
.foot-social a { display: block; width: 20.3px; height: 20px; }
.foot-social svg { width: 100%; height: 100%; fill: #fff; }
.foot-social a:hover svg { fill: var(--pink); }
/* icon + label rows (client login / phone / email) */
.foot-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 33px;
  font-size: 15px; font-weight: 600; line-height: 17px;
  text-transform: uppercase; color: #fff;
}
.foot-row svg { width: 14px; height: 17px; fill: #fff; flex: none; }
.foot-row:hover { color: var(--pink); }
.foot-row:hover svg { fill: var(--pink); }
.foot-addr a { text-decoration: underline; }
.foot-addr a:hover { color: var(--pink); }

/* inline links inside the two closing paragraphs */
.inline-links a { color: var(--pale); text-decoration: underline; }
.inline-links a:hover { color: var(--pink); }

/* The hero's rotating headline lived here. The 2026-08-01 hero (the .hx-
   block in css/home.css) has no rotator, so the .rotator rules and their
   block in script.js went with it. The .t-hero / .t-h1 entries in the type
   scale above are kept: they are the measured record of the original. */

/* ===========================================================================
   MOBILE LAYER  (added 2026-08-03)
   ---------------------------------------------------------------------------
   Purely ADDITIVE. Everything below is either inside the one
   @media (max-width: 900px) block or is the base `.menu-toggle{display:none}`
   rule, so desktop rendering is byte-for-byte unchanged (proven by a
   per-segment pixel diff at 1440 and 1200).

   Split of responsibility: this file carries the shared plumbing only.
   Per-section re-layout lives in the matching block at the end of
   css/home.css, because that file loads LAST — an override here for anything
   home.css declares would lose on source order at equal specificity.
   =========================================================================== */

/* the hamburger does not exist as far as desktop is concerned */
.menu-toggle { display: none; }
/* Likewise the packages carousel chrome: on desktop the two packages sit side
   by side, so there is nothing to page through and no rule to draw. */
.pkg-nav, .pkg-rule { display: none; }

@media (max-width: 900px) {

  /* -- plumbing ---------------------------------------------------------- */
  :root {
    --canvas: 100%;   /* every *-cv wrapper is `width: var(--canvas)` */
    --gutter: 0px;    /* no room outside the canvas to bleed into      */
    /* 92px, up from 68 (2026-08-04): the wordmark is set much larger on
       mobile and needs the room. This also feeds .sec-2's
       calc(var(--app-vh) - var(--hdr-h)), so the hero gives back exactly
       what the header takes and the two still make one fold. */
    --hdr-h: 92px;
  }
  body { min-width: 0; overflow-x: hidden; }

  /* unlock the fixed canvases: --h heights become content heights */
  .sec, .cv { height: auto; }
  .cv { width: auto; }

  /* THE BLANKET. Flows every absolutely-positioned canvas child. The .sec
     prefix is load-bearing: (0,2,0) so it outranks the page stylesheet's
     single-class geometry rules (.pev-kick { left/top/width }, .foot__legal),
     which load after this file. A bare `.cv > *` is only (0,1,0) — the
     universal selector counts for nothing — and would silently lose. */
  .sec .cv > * {
    position: static;
    left: auto; top: auto; right: auto; bottom: auto;
    width: auto; height: auto;
  }
  /* buttons lose their box to the blanket; give it back */
  .sec .cv > .btn,
  .btn { align-self: center; }

  /* background-attachment: fixed is ignored on iOS and janks elsewhere */
  .sec--parallax { background-attachment: scroll; }

  /* -- header: nav collapses into a hamburger dropdown ------------------- */
  /* the compact scroll-in bar is a second full nav; one mobile header is
     enough, so it never appears */
  .hdr-sticky { display: none !important; }

  .menu-toggle {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; flex: none; margin-left: auto;
    width: 44px; height: 44px; padding: 0 10px;
  }
  .menu-toggle span {
    display: block; height: 2px; width: 100%; background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* the bars become an x */
  .hdr.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .hdr.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}