/* Second Wind Sites: arcade variant (arcade.html only, loaded after site.css).
   An arcade cabinet around the results on a 70s stripe mural, a zine cover on a wallpaper panel in About, and
   scroll fade-ins. Same tokens as the kit: 3px ink outlines, 6px hard shadows, Sunrise / Burner / Night Run /
   Arcade Cream. Textures are SVG (assets/patterns, inline data URIs), not CSS gradients, so the style audit stays clean. */

/* ---------- page width: the sections run 1300 px wide here (Hov 2026-11-05); the approved page keeps 1240 ---------- */
.arcade { --wrap: 1300px; }

/* ---------- scroll fade-ins: one motion, once, short stagger (Apple-level, not more) ----------
   The rise uses the separate `translate` property, so it never cancels an element's own transform or rotate. */
.js .reveal, .fx [data-fx] {
  opacity: .02; transform: none; translate: 0 28px;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), translate .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.js .reveal.is-in, .fx [data-fx].is-in { opacity: 1; translate: none; }

/* ---------- Results: a wavy 70s stripe mural on the wall, the arcade cabinet in front of it ---------- */
.arcade .sec--results {
  --top: clamp(48px, 6vw, 88px);
  padding-top: var(--top);
  background-image: url("../assets/patterns/waves.svg");
  background-repeat: repeat-x; background-size: auto clamp(300px, 38vw, 520px);
  background-position: center calc(var(--top) + clamp(120px, 14vw, 200px));
}
.cabinet { position: relative; padding: 0 clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px); background: var(--sun); border: var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.cabinet__marquee {
  position: relative; margin: 0 calc(-1 * clamp(12px, 2vw, 24px)) clamp(12px, 2vw, 20px); padding: 22px 16px;
  background-color: var(--ink); border-bottom: var(--line); border-radius: 11px 11px 0 0; text-align: center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Ccircle cx='13' cy='6' r='3.4' fill='%23F6EAD2' stroke='%23F26B1F' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Ccircle cx='13' cy='6' r='3.4' fill='%23F6EAD2' stroke='%23F26B1F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: space no-repeat; background-position: 0 4px, 0 calc(100% - 4px); background-size: 26px 12px;
}
.cabinet__title { font: 400 clamp(18px, 1.8vw, 24px)/1 var(--f-d); letter-spacing: .24em; text-transform: uppercase; color: var(--sun); }
/* the scanlines sit behind the text (an overlay would stripe the numbers) */
.cabinet__screen {
  position: relative; padding: clamp(8px, 1.2vw, 14px); background-color: var(--ink); border: var(--line); border-radius: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='3'%3E%3Crect width='4' height='1' fill='%23F6EAD2' fill-opacity='.06'/%3E%3C/svg%3E");
  background-size: 4px 3px;
}
.cabinet .results { box-shadow: none; border-color: transparent; background-color: transparent; padding: clamp(22px, 3.2vw, 44px); }
.cabinet .results__head .eyebrow { display: none; }
.cabinet .stat__fig { font-size: clamp(34px, 3.2vw, 46px); }
/* the line under the cabinet sits on a cream plate, so the mural never runs under its text */
.arcade .sec--results .cta-line { position: relative; padding: 18px 22px; background: var(--cream); border-radius: var(--r-card); }

/* ---------- About: a zine cover (the wrapper only places it; Hov 2026-11-05: no panel behind it) ---------- */
.mag-wall { --tilt: -1.5deg; position: relative; padding: 6px 8px 8px 4px; }
/* The zine is tilted, so the browser anti-aliases its edges, and the light photo and page under the dark quote panel
   showed through as a hairline just inside the border (Hov 2026-11-05). So the frame and the shadow are drawn by the
   wrapper, outside the card's clipping, with the same box (the inset matches the wrapper's padding) and the same tilt:
   - ::before is the shadow, a solid ink plate under the card, offset 6/6 in the card's own tilted frame. A real
     box-shadow is clipped at the edge, and on a tilted box that clip leaves its own faint line.
   - ::after is the visible 3 px frame, on top of the card. The card clips its content at 2 px, so that clip edge
     always sits under solid ink, at every screen scaling. */
.mag-wall::before, .mag-wall::after { content: ""; position: absolute; inset: 6px 8px 8px 4px; border-radius: var(--r-card); pointer-events: none; }
.mag-wall::before { transform: rotate(var(--tilt)) translate(var(--sh), var(--sh)); background: var(--ink); }
.mag-wall::after { rotate: var(--tilt); border: var(--line); }
.mag { position: relative; margin: 0; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-card); overflow: hidden; rotate: var(--tilt); }
.mag__mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; background: var(--sun); border-bottom: var(--line); }
.mag__name { font: 400 clamp(28px, 2.9vw, 40px)/.92 var(--f-d); text-transform: uppercase; white-space: nowrap; }
.mag__issue { flex: none; padding-bottom: 4px; font: 600 12.5px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; }
.mag__cover { position: relative; aspect-ratio: 4 / 4.6; background: var(--sand); }
.mag__cover > picture { position: absolute; inset: 0; }
.mag__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.mag__kicker { position: absolute; top: 14px; left: 14px; padding: 6px 12px; background: var(--ink); color: var(--cream); border-radius: var(--r-pill); font: 600 12.5px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; }
/* cover lines in the magazine's own voice: marker-highlighted type, not UI chips */
.mag__lines { position: absolute; top: 52px; left: 14px; display: grid; gap: 4px; justify-items: start; max-width: 64%; }
.mag__lines span { padding: 2px 7px; background: var(--sun); font: 400 clamp(15px, 1.3vw, 18px)/1.4 var(--f-d); text-transform: uppercase; letter-spacing: .02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mag__barcode { position: absolute; top: 14px; right: 14px; width: 60px; height: auto; padding: 6px 7px 5px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 10px; box-sizing: content-box; }
.mag__story { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: var(--ink); color: var(--cream); border-top: var(--line); }
.mag__quote { margin: 0; }
.mag__quote p { font: 400 clamp(20px, 1.9vw, 25px)/1.12 var(--f-d); text-wrap: pretty; }
.mag__quote p::before { content: "\201C"; } .mag__quote p::after { content: "\201D"; }
.mag__by { margin-top: 7px; font: 600 13px/1.2 var(--f-b); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
/* desktop: the fact pills sit right under the text, with the zine panel beside both */
@media (min-width: 961px) {
  .arcade .about { grid-template-rows: auto 1fr; row-gap: 22px; }
  .arcade .about__side { display: contents; }
  .arcade .mag-wall { grid-column: 1; grid-row: 1 / span 2; }
  .arcade .about__text { grid-column: 2; grid-row: 1; }
  /* two pills a row: a 600 px column fit three, which left "On Eastern Time" alone on the second row */
  .arcade .about__facts { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; max-width: 560px; }
  /* the 1300 px width pushed the hero photo onto the orange stripes at 1440; start-aligned it sits where it did */
  .arcade .hero__photo { justify-self: start; }
}
.arcade .hero__copy .lead { text-wrap: pretty; }

/* ---------- Process: five across, with more air (Hov 2026-11-05: the step text looked squished; a 3 + 2 split was a no) ----------
   Titles a size down so most fit on one line, body type a touch smaller with more leading, every body starting on the same
   line across the row (each step is a subgrid of the number, title and body rows), and a little more room between columns. */
@media (min-width: 641px) {
  .arcade .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .arcade .step h3 { font-size: 20px; line-height: 1.2; text-wrap: balance; }
  .arcade .step p { font-size: 15px; line-height: 1.6; }
}
@media (min-width: 1101px) {
  .arcade .steps { column-gap: 24px; }
  .arcade .steps::before { right: calc((100% - 96px) / 5 - 26px); }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .js .case.reveal { translate: none; }
  /* phones and tablets: text, then the pills, then the zine */
  .arcade .about__side { display: contents; }
  .arcade .about__facts { order: 0; margin-top: -8px; }
  .mag-wall { order: 1; max-width: 480px; justify-self: center; width: 100%; }
}
@media (max-width: 640px) {
  .cabinet { padding: 0 6px 6px; }
  .cabinet__marquee { margin-inline: -6px; margin-bottom: 6px; }
  .cabinet__screen { padding: 0; }
  .cabinet .results { padding: 26px 20px; }
  .cabinet .stat__fig { font-size: 38px; }
  .mag__name { font-size: clamp(24px, 7.6vw, 30px); }
}
@media (max-width: 400px) {
  /* small phones: the quote sits under the art instead of over it */
  .mag__cover { aspect-ratio: auto; }
  .mag__cover > picture { position: relative; inset: auto; display: block; aspect-ratio: 4 / 4.6; }
  .mag__story { position: relative; }
}
@media (max-width: 380px) {
  .cabinet .results { padding-inline: 16px; }
  .cabinet .stat__fig { font-size: clamp(30px, 9.4vw, 34px); }
}
@media (max-width: 360px) {
  .mag__barcode { width: 46px; }
  .mag__lines { top: 48px; }
}

/* ---------- phones: Hov's review of the live site, 2026-11-06 (numbers = his list). Only at 640 px and under:
   tablets and desktop are untouched. The pieces that exist only on phones are switched off everywhere else first. ---------- */
.quickbar, .field--phone, .service__toggle { display: none; }
.service__more { display: contents; } /* wider screens: the summary, list and link stay plain children of the card body */

@media (max-width: 640px) {
  /* 13. less air: sections 72 -> 52 px a side, a little less under the section heads */
  :root { --sec: 52px; }
  .sec-head { margin-bottom: 28px; }
  .contact__head { margin-bottom: 26px; }
  .site-foot__grid { padding-block: 44px 32px; }

  /* 1. hero badges on one line: type, icons and padding scale with the screen (11 to 14 px); under ~350 px they wrap */
  .hero__trust { gap: .45em; margin-top: 26px; font-size: clamp(11px, calc(3.7vw - 1.9px), 14px); }
  .hero__trust .chip { gap: .38em; min-height: 32px; padding: 4px .7em; font-size: 1em; }
  .hero__trust .chip .icon { width: 1.15em; height: 1.15em; }

  /* 4 + 5. work: no tick lists (each card's "How I helped" dialog has them all), every card as tall as the tallest
     with its button on the bottom line, and less space down to the results */
  .case .ticks { display: none; }
  .cases { align-items: stretch; }
  .case { grid-template-rows: auto 1fr; }
  .case__body { justify-content: flex-start; }
  .case__actions { margin-top: auto; padding-top: 4px; }
  #work { padding-bottom: 28px; }
  .arcade .sec--results { --top: 28px; }

  /* 6. the line under the results cabinet sits closer to it (the one under Process a little closer too) */
  .cta-line { margin-top: 30px; }
  .arcade .sec--results .cta-line { margin-top: 18px; padding: 14px 16px; }

  /* 7. About: the four pills on one line that swipes, like the work row. The edge that has more to show fades out
     (site.js marks the ends), so the row never looks finished when a pill happens to stop right at the screen edge. */
  .arcade .about__facts {
    --fade-l: 0px; --fade-r: 48px;
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 3px var(--gut) 5px; scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
  .arcade .about__facts.is-scrolled { --fade-l: 32px; }
  .arcade .about__facts.is-end { --fade-r: 0px; }
  .arcade .about__facts::-webkit-scrollbar { display: none; }
  .about__facts .chip { flex: none; min-height: 32px; padding: 4px 12px; font-size: 14px; }
  .about__facts:focus-visible { outline-offset: -3px; }

  /* 11. services fold to their name and title, and the FAQ's plus says they open (no "tap to open" text).
     Closed, the whole card is the button; open, the top bar folds it back (site.js lets the title do it too). */
  .js .service { position: relative; }
  .js .service__icon { display: none; }
  .js .service__toggle {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -5px -6px -5px 0; padding: 0;
    border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .js .service__toggle::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .js .service:not(.is-closed) .service__top { position: relative; }
  .js .service__toggle:focus-visible { outline: 0; }
  .js .service__toggle:focus-visible::after { outline: 3px solid var(--ink); outline-offset: -7px; border-radius: 10px; }
  .service__toggle .plus { position: relative; width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--white); }
  .service__toggle .plus::before, .service__toggle .plus::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; background: var(--ink);
    transform: translate(-50%, -50%); transition: transform .18s var(--ease);
  }
  .service.is-closed .service__toggle .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .js .service__title { cursor: pointer; }
  .js .service__more { display: flex; flex-direction: column; gap: 16px; }
  .js .service.is-closed .service__more { display: none; }
  .js .service.is-closed .service__body { padding-block: 18px 20px; }

  /* 8. "What do you need?": two columns of option tiles instead of one pill a row */
  .form-card { padding: 20px 16px 22px; }
  .pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pick label { min-height: 44px; padding: 7px 11px; border-radius: var(--r-ctl); font-size: 15px; line-height: 1.2; }

  /* 9. phone number (optional; checked by site.js with the same rule as the form endpoint) */
  .field--phone { display: grid; }

  /* 10. "Book a call" and "Message me", pinned to the bottom once the hero's buttons scroll away (site.js) */
  .quickbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: 10px var(--gut) calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--cream); border-top: var(--line);
    transform: translateY(calc(100% + 10px)); visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .quickbar.is-shown { transform: none; visibility: visible; transition: transform .28s var(--ease), visibility 0s; }
  .quickbar .btn { min-height: 48px; padding: 0 10px; gap: 8px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .fx [data-fx] { opacity: 1; translate: none; transition: none; }
  .quickbar, .quickbar.is-shown, .service__toggle .plus::before, .service__toggle .plus::after { transition: none; }
}
@media print {
  .js .reveal, .fx [data-fx] { opacity: 1 !important; translate: none !important; }
  .quickbar { display: none !important; }
}