/* ==========================================================================
   Splash Out: Build B, "Packed Window"
   Vinyl white ground, navy ink, six spot colours off the logo's own splat.
   Flat fills. Crisp corners. 2px house line. Hard offset shadows. No gradients.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* six vinyl spot colours, sampled from the logo */
  --vinyl-yellow: #E5C016;
  --vinyl-magenta: #CC1954;
  --vinyl-cyan: #11A8B7;
  --vinyl-blue: #0D6EA0;
  --vinyl-orange: #E16514;
  --vinyl-green: #1F8607;

  /* structural */
  --navy: #040C28;
  --white: #FFFFFF;
  --paper: #F1F0EC;
  --ink: #0B1020;
  --ink-soft: #4A5268;

  /* the house line */
  --line: 2px;
  --edge: var(--line) solid var(--navy);

  /* easing */
  --ease-vinyl: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-squeegee: cubic-bezier(0.65, 0, 0.35, 1);
  /* ease-out-quart. Was an overshoot curve; bounce reads dated on a trade
     shopfront, and real objects decelerate rather than spring past their mark. */
  --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);

  /* durations */
  --t-micro: 120ms;
  --t-ctl: 200ms;
  --t-panel: 420ms;
  --t-scene: 700ms;

  /* the pile's shared scroll progress: 1 = resolved. JS drives it down to 0. */
  --p: 1;
  --fx: 1;   /* horizontal travel factor  */
  --fy: 1;   /* vertical travel factor    */
  --fr: 1;   /* rotation factor           */

  --gut: clamp(16px, 5vw, 96px);
  --bar-h: 56px;

  color-scheme: light;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, figure, ul, address, table { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

a { color: inherit; }

::selection { background: var(--vinyl-yellow); color: var(--navy); }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 3. Focus ---------- */
/* Yellow ring backed by a navy band so it reads on the white ground too. */
:where(a, button, iframe, [tabindex]):focus-visible {
  outline: 3px solid var(--vinyl-yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--navy), var(--shadow, 0 0 #0000);
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 999;
  transform: translateY(-120%);
  background: var(--navy); color: var(--white);
  padding: 12px 20px;
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ---------- 4. Type roles ---------- */
.h2 {
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 900;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}

/* headline multiply-outline: three zero-blur copies, each offsetting the last,
   so the bands land at 3 / 6 / 9px: a screenprint out of registration. */
.h2--out {
  filter:
    drop-shadow(3px 3px 0 var(--vinyl-yellow))
    drop-shadow(3px 3px 0 var(--vinyl-magenta))
    drop-shadow(3px 3px 0 var(--vinyl-cyan));
}
@media (max-width: 719px) {
  .h2--out {
    filter:
      drop-shadow(2px 2px 0 var(--vinyl-yellow))
      drop-shadow(2px 2px 0 var(--vinyl-magenta))
      drop-shadow(2px 2px 0 var(--vinyl-cyan));
  }
}

.lbl {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700;
  font-variation-settings: "wdth" 75;
}

/* ---------- 5. Buttons ---------- */
.btn {
  --shadow: 4px 4px 0 var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: var(--edge);
  border-radius: 999px;              /* a die-cut sticker */
  box-shadow: var(--shadow);
  font-size: 1rem; font-weight: 800;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-ctl) var(--ease-snap),
    box-shadow var(--t-ctl) var(--ease-snap),
    background-color var(--t-micro) linear;
}
.btn--call { background: var(--vinyl-yellow); color: var(--navy); }
.btn--dir  { background: var(--white);        color: var(--navy); }

.btn .ic { width: 20px; height: 20px; flex: none; }

@media (hover: hover) {
  .btn:hover { transform: translate(-2px, -2px); --shadow: 6px 6px 0 var(--navy); box-shadow: var(--shadow); }
  .btn--dir:hover { background: var(--paper); }
}
.btn:active { transform: translate(2px, 2px); --shadow: 1px 1px 0 var(--navy); box-shadow: var(--shadow); }

.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- 6. Sticky bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: var(--white);
  border-bottom: var(--edge);
  transform: translateY(-101%);
  transition: transform var(--t-panel) var(--ease-vinyl);
}
.bar.is-up { transform: translateY(0); }
.bar__in {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--bar-h);
  padding: 6px var(--gut);
  max-width: 1720px; margin: 0 auto;
}
.bar__mark { flex: none; display: block; line-height: 0; border-radius: 999px; }
.bar__mark img { width: 40px; height: 40px; }
/* Shelf-edge stamp + till time. The state word is a hard vinyl price-gun label
   (sharp corners, navy edge, offset shadow, slight tilt): not a soft pill and
   not an underline. Colour names the state; the words name it too. */
.bar__status {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 auto; min-width: 0; margin-right: auto;
  color: var(--navy);
}
.bar__stamp {
  flex: none;
  display: inline-block;
  padding: 5px 10px 4px;
  border: var(--edge);
  background: var(--vinyl-green);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--navy);
  font-size: 0.8125rem;
  font-weight: 900;
  font-variation-settings: "wdth" 110;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.bar__status[data-open="soon"] .bar__stamp {
  background: var(--vinyl-orange);
  color: var(--navy);
}
.bar__status[data-open="no"] .bar__stamp {
  background: var(--vinyl-magenta);
  color: var(--white);
}
.bar__till {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
  font-variation-settings: "wdth" 82;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--ink-soft);
}

.bar__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.bar__link {
  display: none;
  padding: 10px 12px;
  font-weight: 700; font-size: 0.9375rem;
  color: var(--navy);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--vinyl-cyan);
}
.bar__call { min-height: 44px; padding: 8px 14px; --shadow: 3px 3px 0 var(--navy); }
.bar__call-t { display: none; }

@media (min-width: 720px) {
  :root { --bar-h: 64px; }
  .bar__mark img { width: 48px; height: 48px; }
  .bar__stamp { font-size: 0.875rem; padding: 6px 11px 5px; }
  .bar__till { font-size: 1rem; }
  .bar__link { display: inline-block; }
  .bar__call-t { display: inline; }
  .bar__call .vh { display: none; }
}

/* ==========================================================================
   7. HERO: the packed window
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vh, 120px) var(--gut) clamp(48px, 8vh, 96px);
  overflow: hidden;                 /* the window frame crops the display */
  background: var(--navy);          /* the seams read as shadow, not as gaps */
  border-bottom: var(--line) solid var(--navy);
}

/* --- the pile --- */
.pile { position: absolute; inset: 0; z-index: 0; }

.pn {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  z-index: var(--z);
  margin: 0;
  border: var(--line) solid var(--white);   /* a print stuck to the glass */
  border-radius: 2px;                        /* a guillotined print */
  box-shadow: 7px 7px 0 var(--navy);
  background: var(--navy);
  overflow: hidden;
  will-change: transform;
  transform:
    translateY(calc(var(--dy) * var(--fy) * (1 - var(--p))))
    rotate(calc(var(--rot) * var(--fr) * (1 - var(--p))))
    scale(calc(1 + 0.18 * var(--fr) * (1 - var(--p))));
}
.pn img { width: 100%; height: 100%; object-fit: cover; }

/* --- the vinyl plate: everything a customer needs, on white, never on a photo --- */
.plate {
  position: relative; z-index: 10;
  width: 100%;
  background: var(--white);
  border: var(--edge);
  box-shadow: 12px 12px 0 var(--vinyl-yellow);
  padding: clamp(20px, 4.5vw, 44px);
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2.2vw, 22px);
}

.mark { display: block; margin: 0; }
/* the multiply outline: four zero-blur drop-shadows, each offsetting the last */
.mark__img {
  width: min(100%, 200px);
  height: auto;
  /* The cutout is cropped tight to the ink, so the splat's drips reach the very
     edge of the file. Anything directly beneath it collides with them: hence
     real clearance under the mark rather than the 4px it had. */
  margin: clamp(-20px, -3.4vw, -8px) 0 clamp(14px, 2vw, 20px) clamp(-16px, -2.8vw, -6px);
  filter:
    drop-shadow(2px 2px 0 var(--vinyl-yellow))
    drop-shadow(2px 2px 0 var(--vinyl-magenta))
    drop-shadow(2px 2px 0 var(--vinyl-cyan))
    drop-shadow(2px 2px 0 var(--navy));
}
@media (min-width: 900px) {
  .mark__img {
    filter:
      drop-shadow(4px 4px 0 var(--vinyl-yellow))
      drop-shadow(4px 4px 0 var(--vinyl-magenta))
      drop-shadow(4px 4px 0 var(--vinyl-cyan))
      drop-shadow(4px 4px 0 var(--navy));
  }
}
.mark__desc {
  display: block;
  font-size: clamp(0.8125rem, 2.6vw, 1.0625rem);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
}

/* --- the live sign, as a die-cut price star --- */
/* Sits in the plate's top-right corner, inside the padding, balancing the
   wordmark across the top of the box. In the flow it sat stranded mid-box with
   dead white either side; overhanging the edge it just read as broken. */
.star {
  position: absolute;
  top: clamp(18px, 4.5vw, 40px);
  right: clamp(18px, 4.5vw, 40px);
  display: grid; place-content: center;
  width: clamp(88px, 23vw, 130px);
  aspect-ratio: 1;
  padding: 0 12%;
  background: var(--vinyl-yellow);
  color: var(--navy);
  text-align: center;
  transform: rotate(-7deg);
  clip-path: polygon(50.0% 0.0%, 56.8% 11.6%, 67.1% 3.0%, 69.5% 16.2%, 82.1% 11.7%, 79.9% 24.9%, 93.3% 25.0%, 86.6% 36.7%, 99.2% 41.3%, 89.0% 50.0%, 99.2% 58.7%, 86.6% 63.3%, 93.3% 75.0%, 79.9% 75.1%, 82.1% 88.3%, 69.5% 83.8%, 67.1% 97.0%, 56.8% 88.4%, 50.0% 100.0%, 43.2% 88.4%, 32.9% 97.0%, 30.5% 83.8%, 17.9% 88.3%, 20.1% 75.1%, 6.7% 75.0%, 13.4% 63.3%, 0.8% 58.7%, 11.0% 50.0%, 0.8% 41.3%, 13.4% 36.7%, 6.7% 25.0%, 20.1% 24.9%, 17.9% 11.7%, 30.5% 16.2%, 32.9% 3.0%, 43.2% 11.6%);
}
.star--closed { background: var(--vinyl-magenta); color: var(--white); }
.star__lead {
  display: block;
  font-size: clamp(0.9375rem, 2.6vw, 1.1875rem);
  font-weight: 900;
  font-variation-settings: "wdth" 108;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.star__sub {
  display: block;
  margin-top: 3px;
  font-size: clamp(0.75rem, 1.9vw, 0.875rem);
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.acts { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.acts .btn { flex: 1 1 160px; }

.lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}

.hero__end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* ---- scroll cue ----------------------------------------------------------
   The hero is a full-bleed mosaic, so at rest it can read as a poster rather
   than the top of a page. This is a die-cut vinyl tag in the same grammar as
   the brand tags: flat white, 2px navy, hard yellow offset. It is a real link
   to the first section, so it works by keyboard and with JS off: an arrow that
   only decorates would be a worse answer than one that goes somewhere. */
.cue {
  position: absolute;
  left: 50%; bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%) rotate(-2deg);
  z-index: 20;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 16px;
  background: var(--white);
  color: var(--navy);
  border: var(--edge);
  box-shadow: 4px 4px 0 var(--vinyl-yellow);
  text-decoration: none;
  transition: box-shadow var(--t-ctl) var(--ease-snap),
              opacity 320ms var(--ease-vinyl),
              visibility 0s linear 0s;
}
.cue__t {
  font-size: 0.75rem;
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cue__a {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  background: var(--navy);
  border-radius: 999px;
}
.cue__a svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--white); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: cue-bob 2.1s var(--ease-squeegee) infinite;
}
@keyframes cue-bob {
  0%, 62%, 100% { transform: translateY(-2px); }
  31%           { transform: translateY(2px); }
}
@media (hover: hover) {
  .cue:hover { box-shadow: 6px 6px 0 var(--vinyl-magenta); }
}
/* Once they have started scrolling the cue has done its job and gets out of
   the way: it must not linger over the content. */
.cue.is-gone {
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-vinyl), visibility 0s linear 240ms;
}
@media (prefers-reduced-motion: reduce) {
  .cue__a svg { animation: none; }
  .cue { transition: none; }
}
/* Short viewports: the plate already fills the frame, so the cue would crowd
   the call button. Hide it rather than stack it. */
@media (max-height: 620px) {
  .cue { display: none; }
}

/* From 900px up the plate becomes a small grid so the status star sits BESIDE
   the wordmark rather than stacking under it. Stacked, the plate ran ~850px
   tall and the lede fell off the bottom of a 900px viewport; side by side it
   lands around 590px and the whole opening fits one screen. Every vertical
   measure is also capped in vh so short/wide viewports stay whole. */
/* Tablets and narrow desktop windows (720–899px). Without this the plate ran
   the full width of the frame as one near-empty rectangle, because the mobile
   rules stop at 719px and the desktop rules do not start until 900px. */
@media (min-width: 720px) and (max-width: 899px) {
  .plate { width: min(100%, 580px); padding: clamp(26px, 3.4vw, 40px); }
  .mark__img { width: min(100%, 246px); }
  .mark { padding-right: clamp(104px, 15vw, 140px); }
  .star { top: clamp(24px, 3.2vw, 38px); right: clamp(24px, 3.2vw, 38px); width: clamp(104px, 13vw, 124px); }
}

@media (min-width: 900px) {
  .plate {
    width: min(50%, 552px);
    row-gap: clamp(14px, 1.9vh, 22px);
    padding: clamp(26px, 3.4vh, 44px) clamp(28px, 2.6vw, 44px) clamp(28px, 3.6vh, 46px);
  }
  /* The mark keeps clear of the corner star. */
  .mark { padding-right: clamp(96px, 12vh, 130px); }
  .mark__img { width: min(100%, clamp(180px, 25vh, 300px)); }
  .star { width: clamp(94px, 15vh, 132px); top: clamp(24px, 3vh, 40px); right: clamp(24px, 2.4vw, 40px); }
  .acts .btn { flex: 0 0 auto; }
  /* Keep the fascia line on one row: wrapped, it left a separator dangling at
     the end of the first line. */
  .mark__desc { font-size: clamp(0.75rem, 1vw, 0.9375rem); letter-spacing: 0.1em; }
  .lede { max-width: 42ch; }
}
@media (min-width: 1400px) {
  .plate { width: min(46%, 660px); }
}

/* Short desktop viewports (laptops at 1440x800 and below): pull the hero's own
   padding in so the plate keeps its breathing room instead of being crushed. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero { padding-top: clamp(56px, 8vh, 84px); padding-bottom: clamp(40px, 6vh, 64px); }
  .lede { font-size: 1rem; }
}

/* On phones the pile keeps its vertical stagger only: rotation and the swell
   are what push panels sideways at 375px, so both are switched off. */
@media (max-width: 719px) {
  .hero { --fx: 0; --fr: 0; }
  .pn { box-shadow: 5px 5px 0 var(--navy); }

  /* The plate was running ~610px tall and covering the mosaic almost entirely,
     so the "packed window" idea never reached a phone: you just saw a white
     card. Trimming the wordmark, the star and the rhythm brings it to ~470px
     and lets the shelves read around it. The buttons stay full-width: they are
     the point of the page and they keep their 44px+ target. */
  .hero { padding-top: clamp(48px, 7vh, 72px); padding-bottom: clamp(36px, 6vh, 64px); }
  .plate { gap: 10px; padding: 16px 16px 18px; box-shadow: 8px 8px 0 var(--vinyl-yellow); }
  .mark__img { width: min(100%, 186px); }
  .lede { font-size: 0.9375rem; line-height: 1.45; }
  .acts { gap: 10px; }
}

/* Small phones (iPhone SE / 375x667): the call button matters more than the
   wordmark, so the wordmark yields first. */
@media (max-width: 400px) and (max-height: 700px) {
  .mark__img { width: min(100%, 150px); }
  .star { width: 84px; }
  .lede { font-size: 0.875rem; }
}

/* ==========================================================================
   8. THE BRAND WALL
   ========================================================================== */
.wall {
  padding: clamp(64px, 10vw, 160px) var(--gut) clamp(56px, 8vw, 120px);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.wall__head { max-width: 1720px; margin: 0 auto clamp(40px, 6vw, 88px); }
.wall__sub {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.wall__band {
  display: flex; align-items: flex-start;
  max-width: 1720px; margin: 0 auto;
}
.wall__band--b { margin-top: -4%; }

.shot {
  position: relative;
  margin: 0;
  border: var(--edge);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--navy);
  background: var(--navy);
  transform: rotate(var(--rot));
}
.shot img { width: 100%; height: auto; }

.wall__band--a .shot:nth-child(1) { flex: 0 0 56%; margin-left: 4%;  z-index: 3; }
.wall__band--a .shot:nth-child(2) { flex: 0 0 22%; margin-left: -4%; margin-top: 9%; z-index: 4; }
.wall__band--a .shot:nth-child(3) { flex: 0 0 20%; margin-left: -2%; margin-top: 3%; z-index: 2; }

.wall__band--b .shot:nth-child(1) { flex: 0 0 52%; margin-left: 2%;  z-index: 5; }
.wall__band--b .shot:nth-child(2) { flex: 0 0 20%; margin-left: -3%; margin-top: 11%; z-index: 6; }
.wall__band--b .shot:nth-child(3) { flex: 0 0 26%; margin-left: -2%; margin-top: 4%;  z-index: 4; }

/* Leader lines: a true double stroke, not a filter halo. Each polyline is drawn
   twice: a fat white under-stroke, then the navy line over it. Photographs of
   a busy shop are visually noisy at every value, so a 2px navy line alone
   disappears against dark shelving; the white carrier gives it a hard edge to
   sit on and it reads over anything. */
.leaders {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ld {
  stroke: var(--navy);
  stroke-width: 2.75;
}
.ld--halo {
  stroke: #fff;
  stroke-width: 6;
  opacity: .96;
}

/* The pin needs the same treatment: navy diamond, white carrier ring, then a
   thin navy keyline so it still has an edge when it lands on a white product. */
.pin {
  position: absolute; left: var(--px); top: var(--py);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--navy);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 4.5px rgba(4, 12, 40, .55);
  transform: rotate(45deg);
  pointer-events: none;
}

.tags { margin: 0; }
.tag {
  position: absolute;
  left: var(--tx); top: var(--ty);
  transform: translate(0, -50%) rotate(var(--trot));
  background: var(--white);
  color: var(--navy);
  border: var(--edge);
  box-shadow: 4px 4px 0 var(--navy);
  padding: 5px 12px 6px;
  font-size: 0.8125rem;
  font-weight: 900;
  font-variation-settings: "wdth" 82;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Tablets: the composition holds, but the call-out furniture comes down a size
   so the tags do not swamp the smaller photographs. */
@media (min-width: 720px) and (max-width: 1023px) {
  .tag { font-size: 0.6875rem; padding: 4px 9px 5px; letter-spacing: 0.08em; box-shadow: 3px 3px 0 var(--navy); }
  .pin { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .shot { box-shadow: 6px 6px 0 var(--navy); }
  .wall__band--b { margin-top: -1%; }
  .wall__band--a .shot:nth-child(2) { margin-left: -2%; }
  .wall__band--a .shot:nth-child(3) { margin-left: -1%; }
  .wall__band--b .shot:nth-child(2) { margin-left: -1%; }
  .wall__band--b .shot:nth-child(3) { margin-left: -1%; }
  .h2--out {
    filter:
      drop-shadow(2px 2px 0 var(--vinyl-yellow))
      drop-shadow(2px 2px 0 var(--vinyl-magenta))
      drop-shadow(2px 2px 0 var(--vinyl-cyan));
  }
}

/* Phones: the leader-line composition does not shrink. Photos stack full
   width, brands become a wrapped row of tags underneath. */
@media (max-width: 719px) {
  .wall__band { display: block; }
  .wall__band--b { margin-top: 0; }
  .wall__band--a .shot:nth-child(1),
  .wall__band--a .shot:nth-child(2),
  .wall__band--a .shot:nth-child(3),
  .wall__band--b .shot:nth-child(1),
  .wall__band--b .shot:nth-child(2),
  .wall__band--b .shot:nth-child(3) {
    width: 100%; margin: 0 0 clamp(28px, 7vw, 40px);
    transform: none;
    box-shadow: 6px 6px 0 var(--navy);
  }
  .leaders, .pin { display: none; }
  .tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px;
    border-top: var(--edge);
    background: var(--white);
  }
  .tag {
    position: static;
    transform: none;
    box-shadow: 3px 3px 0 var(--navy);
  }
}

/* ==========================================================================
   9. WHAT WE DO: window tickets
   ========================================================================== */
.svc {
  padding: clamp(56px, 8vw, 120px) var(--gut) clamp(72px, 10vw, 150px);
  background: var(--paper);
  border-top: var(--edge);
  border-bottom: var(--edge);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.svc > .h2 { max-width: 1720px; margin: 0 auto clamp(36px, 5vw, 72px); }

.svc__band {
  display: flex; align-items: flex-start;
  max-width: 1720px; margin: 0 auto;
  position: relative;
}
.svc__band--b { margin-top: clamp(-64px, -3vw, -24px); }

/* Tickets never rotate: they carry body copy, and body copy never rotates.
   The density comes from size variance, packing and the shingled overlap. */
.tk {
  --tkpad: clamp(20px, 2.4vw, 32px);
  position: relative;
  border: var(--edge);
  border-radius: 2px;
  box-shadow: 10px 10px 0 var(--navy);
  padding: var(--tkpad);
  display: flex; flex-direction: column; gap: 12px;
}
.tk__ic { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
/* the sale-sticker italic: how a shop window actually labels itself */
.tk__h {
  font-size: clamp(1.1rem, 2vw, 1.625rem);
  line-height: 1.1;
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tk__p { font-size: 1rem; line-height: 1.55; max-width: 42ch; text-wrap: pretty; }
.tk__img {
  width: calc(100% + 2 * var(--tkpad));
  margin: 8px calc(-1 * var(--tkpad)) calc(-1 * var(--tkpad));
  height: clamp(130px, 17vw, 220px);
  object-fit: cover;
  object-position: 50% 42%;
  border-top: var(--edge);
}

.tk--paint  { background: var(--vinyl-yellow);  color: var(--navy);  }
.tk--blinds { background: var(--vinyl-cyan);    color: var(--navy);  }
.tk--trade  { background: var(--vinyl-blue);    color: var(--white); }
.tk--del    { background: var(--vinyl-magenta); color: var(--white); }

.svc__band--a .tk:nth-child(1) { flex: 0 0 56%; margin-left: 0;  margin-top: 0;   z-index: 2; }
.svc__band--a .tk:nth-child(2) { flex: 0 0 38%; margin-left: 4%; margin-top: 9%;  z-index: 1; }
.svc__band--b .tk:nth-child(1) { flex: 0 0 34%; margin-left: 6%; margin-top: 0;   z-index: 4; }
.svc__band--b .tk:nth-child(2) { flex: 0 0 50%; margin-left: 4%; margin-top: 7%;  z-index: 3; }

@media (max-width: 899px) {
  .svc__band { display: block; }
  .svc__band--b { margin-top: 0; }
  .svc__band--a .tk:nth-child(1),
  .svc__band--a .tk:nth-child(2),
  .svc__band--b .tk:nth-child(1),
  .svc__band--b .tk:nth-child(2) {
    width: 100%; margin: 0 0 clamp(24px, 5vw, 36px);
    box-shadow: 6px 6px 0 var(--navy);
  }
}

/* ==========================================================================
   10. THE CALM BREAK: total stillness
   ========================================================================== */
.calm { padding: clamp(72px, 10vw, 150px) 0 0; }
.calm__line {
  margin: 0 var(--gut) clamp(40px, 6vw, 72px);
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  font-weight: 800;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}
.calm__fields {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: clamp(140px, 22vh, 280px);
  border-top: var(--edge);
  border-bottom: var(--edge);
}
.fd--y { background: var(--vinyl-yellow); }
.fd--m { background: var(--vinyl-magenta); }
.fd--c { background: var(--vinyl-cyan); }
.fd--b { background: var(--vinyl-blue); }
.fd--o { background: var(--vinyl-orange); }
.fd--g { background: var(--vinyl-green); }

/* ==========================================================================
   11. FIND US: the density grammar deliberately drops away
   ========================================================================== */
.find {
  padding: clamp(64px, 10vw, 150px) var(--gut) clamp(64px, 9vw, 128px);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.find > .h2 { max-width: 1720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.find__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1720px; margin: 0 auto;
}
/* The shopfront photo now sits in the left column under the directions button -
   it belongs with the address ("this is the sign to look for"), and stacked
   under the map it ran ~630px tall and left the info column ending in about
   620px of dead white. With it moved, the map stretches to match the left
   column exactly, so both sides end level and neither has a hole in it. */
@media (min-width: 900px) {
  .find__grid { grid-template-columns: minmax(280px, 400px) 1fr; align-items: stretch; }
  .find__col--map { display: flex; }
}

.addr {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.hours {
  width: 100%;
  margin-top: clamp(24px, 3vw, 36px);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.hours th, .hours td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid #D6D4CD;
  font-size: 1rem;
}
.hours th { font-weight: 600; color: var(--ink); }
.hours td { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hours tr:first-child th, .hours tr:first-child td { border-top: var(--edge); }
.hours tr.is-today th, .hours tr.is-today td { background: var(--vinyl-yellow); color: var(--navy); font-weight: 800; }
.hours tr.is-today th::after {
  content: "· today";
  display: inline-block;
  margin-left: 0.55em;
  vertical-align: 0.06em;
  font-weight: 600;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  line-height: 1;
}

.contact { margin-top: clamp(24px, 3vw, 32px); display: grid; gap: 8px; }
.contact__a {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--vinyl-cyan);
  display: inline-block;
  padding: 6px 0;
}
@media (hover: hover) {
  .contact__a:hover { text-decoration-color: var(--vinyl-magenta); }
}
.find__dir { margin-top: clamp(20px, 3vw, 28px); }

/* The container owns the height and the iframe fills it. Sizing the iframe
   directly left the stretched container taller than its own content and put an
   empty grey box under the map. */
.map {
  border: var(--edge);
  background: var(--paper);
  height: clamp(280px, 42vh, 420px);
}
.map__f { display: block; width: 100%; height: 100%; border: 0; }

/* Desktop: the map grows to match the info column exactly, so the two sides of
   Find us end level. Must sit after the base rule above to win on order. */
@media (min-width: 900px) {
  .map { flex: 1; height: auto; min-height: clamp(420px, 50vh, 620px); }
}

.front { margin-top: clamp(24px, 3vw, 32px); }
.front img { width: 100%; border: var(--edge); border-radius: 2px; }
.front__cap {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.ft {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 0 0 clamp(22px, 2.6vw, 34px);
  border-top: var(--edge);
}

/* The six spot colours as one hard band across the top of the footer: the
   logo's own palette laid out flat, and a real close to a page that opened on
   a mosaic. Solid fields, no gradient, no fade. */
.ft__strip { display: flex; height: clamp(10px, 1.4vw, 16px); }
.ft__strip span { flex: 1; }
.ft__strip span:nth-child(1) { background: var(--vinyl-yellow); }
.ft__strip span:nth-child(2) { background: var(--vinyl-orange); }
.ft__strip span:nth-child(3) { background: var(--vinyl-magenta); }
.ft__strip span:nth-child(4) { background: var(--vinyl-cyan); }
.ft__strip span:nth-child(5) { background: var(--vinyl-blue); }
.ft__strip span:nth-child(6) { background: var(--vinyl-green); }

/* Three real columns of comparable weight. Previously the brand block carried
   the logo, the address AND the call button while the other two held three
   lines each, so the left ran long and the right half of the footer was empty.
   Moving the button under the phone number evens the columns out. */
.ft__in {
  display: grid; gap: clamp(32px, 4vw, 56px);
  max-width: 1280px; margin: 0 auto;
  padding: clamp(30px, 3.4vw, 50px) var(--gut) 0;
}
@media (min-width: 700px) {
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1000px) {
  .ft__in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ft__lead { display: grid; justify-items: start; gap: 12px; }
.ft__mark { width: clamp(72px, 8vw, 92px); height: auto; }
.ft__desc {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vinyl-yellow);
  margin: 0;
}
.ft__addr { line-height: 1.6; color: #C9CEDC; }
.ft__cta { margin-top: 14px; }

/* Hours as a definition list so day and time are actually associated, and the
   times line up on their own column instead of being one run-on line. */
.ft__hrs { margin: 0; font-variant-numeric: tabular-nums; max-width: 320px; }
.ft__hrs > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #1D2745;
}
.ft__hrs dt { color: #C9CEDC; }
.ft__hrs dd { margin: 0; font-weight: 600; white-space: nowrap; }

.ft__lbl {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700;
  font-variation-settings: "wdth" 75;
  color: var(--vinyl-yellow);
  margin-bottom: 10px;
}
.ft__a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--vinyl-cyan);
  display: inline-block; padding: 4px 0;
  font-weight: 600;
}
@media (hover: hover) { .ft__a:hover { text-decoration-color: var(--vinyl-yellow); } }
.ft__hrs { line-height: 1.7; color: #C9CEDC; font-variant-numeric: tabular-nums; }
.ft__legal {
  max-width: 1280px; margin: clamp(24px, 2.8vw, 40px) auto 0;
  padding: 18px var(--gut) 0;
  border-top: 1px solid #1D2745;
  font-size: 0.875rem; color: #9AA3BB;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.ft__copy { margin: 0; }

/* Studio credit: a small die-cut vinyl tag, same grammar as the rest of the
   page: flat fill, crisp corner, 2px line, hard offset. */
.madeby {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px;
  background: var(--white);
  border: var(--line) solid var(--navy);
  box-shadow: 3px 3px 0 var(--vinyl-yellow);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform var(--t-ctl) var(--ease-snap),
              box-shadow var(--t-ctl) var(--ease-snap);
}
.madeby__mk { width: 17px; height: 17px; flex: none; fill: var(--vinyl-magenta); }
.madeby__mk circle:nth-child(2) { fill: var(--vinyl-cyan); }
.madeby__mk circle:nth-child(3) { fill: var(--vinyl-yellow); }
.madeby__t { white-space: nowrap; }
.madeby strong { font-weight: 800; font-variation-settings: "wdth" 108; }
@media (hover: hover) {
  .madeby:hover { transform: rotate(-2deg) translate(-1px, -1px); box-shadow: 5px 5px 0 var(--vinyl-magenta); }
}
.madeby:focus-visible {
  outline: 3px solid var(--vinyl-yellow);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .madeby, .madeby:hover { transform: none; transition: none; }
}

/* ==========================================================================
   13. REVEAL CHOREOGRAPHY: always from an already-rendered baseline.
   Pre-states only apply when JS is running (html.js) and can restore them.
   ========================================================================== */
.js [data-reveal="shot"] {
  opacity: 0;
  transform: rotate(calc(var(--rot) + 2deg)) translateY(14px);
  transition:
    opacity var(--t-panel) var(--ease-vinyl) calc(var(--i, 0) * 60ms),
    transform var(--t-scene) var(--ease-vinyl) calc(var(--i, 0) * 60ms);
}
.js [data-reveal="shot"].is-in { opacity: 1; transform: rotate(var(--rot)); }

.js .shot .ld { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .shot.is-in .ld {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 500ms var(--ease-squeegee) 260ms;
}
.js .shot .pin { opacity: 0; transition: opacity var(--t-micro) linear 200ms; }
.js .shot.is-in .pin { opacity: 1; }
.js .shot .tag {
  opacity: 0;
  transform: translate(0, -50%) rotate(var(--trot)) scale(0.9);
  transition:
    opacity var(--t-ctl) var(--ease-snap) calc(760ms + var(--td, 0ms)),
    transform var(--t-panel) var(--ease-snap) calc(760ms + var(--td, 0ms));
}
.js .shot.is-in .tag { opacity: 1; transform: translate(0, -50%) rotate(var(--trot)); }

.js [data-reveal="tk"] {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--t-ctl) var(--ease-vinyl) calc(var(--i, 0) * 80ms),
    transform var(--t-panel) var(--ease-snap) calc(var(--i, 0) * 80ms);
}
.js [data-reveal="tk"].is-in { opacity: 1; transform: none; }

.js [data-reveal="fd"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-scene) var(--ease-squeegee) calc(var(--i, 0) * 50ms);
}
.js [data-reveal="fd"].is-in { clip-path: inset(0 0 0 0); }

@media (max-width: 719px) {
  .js [data-reveal="shot"] { transform: translateY(14px); }
  .js [data-reveal="shot"].is-in { transform: none; }
}

/* ==========================================================================
   14. REDUCED MOTION: every effect on this page, without exception.
   The pile renders in its resolved state and must look finished there.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --p: 1; }
  .hero { --fx: 0; --fy: 0; --fr: 0; }
  .pn { transform: none; will-change: auto; }

  .bar { transition: opacity 150ms linear; transform: none; opacity: 0; pointer-events: none; }
  .bar.is-up { opacity: 1; pointer-events: auto; }

  .btn { transition: background-color 120ms linear; }
  .btn:hover, .btn:active { transform: none; }

  .js [data-reveal="shot"] { opacity: 1; transform: rotate(var(--rot)); transition: opacity 150ms linear; }
  .js [data-reveal="tk"] { opacity: 1; transform: none; transition: opacity 150ms linear; }
  .js [data-reveal="fd"] { clip-path: none; transition: none; }
  .js .shot .ld { stroke-dashoffset: 0; transition: none; }
  .js .shot .pin { opacity: 1; transition: none; }
  .js .shot .tag { opacity: 1; transform: translate(0, -50%) rotate(var(--trot)); transition: none; }

  @media (max-width: 719px) {
    .js [data-reveal="shot"] { transform: none; }
  }
}

/* ---------- 15. prefers-contrast ---------- */
@media (prefers-contrast: more) {
  :root { --line: 3px; --ink-soft: #2A3145; }
  .front__cap, .ft__addr, .ft__hrs { color: var(--ink); }
  .ft__addr, .ft__hrs { color: #E4E7EF; }
  .hours th, .hours td { border-bottom-color: var(--navy); }
}

/* ---------- 16. print ---------- */
@media print {
  .bar, .pile, .calm__fields, .map { display: none; }
  .hero { min-height: 0; background: #fff; }
  .plate, .shot, .tk { box-shadow: none; }
  body { color: #000; }
}