/* DS-06 Sticker Playground -- Clover & Clip Grooming.
 *
 * The measured contrast of every pairing this stylesheet ships. Computed at
 * build time by css.contrast(), not asserted:
 *
 *   ink on the page ground          14.79:1
 *   ink on the raised plane         13.43:1
 *   ink in a form field             12.23:1
 *   muted text on the ground        6.27:1
 *   muted text on the plane         5.69:1
 *   link text on the ground         5.39:1
 *   link text on the plane          4.90:1
 *   secondary text on the ground    5.50:1
 *   ink on the primary action fill  5.35:1
 *   ink on the hovered action fill  4.58:1
 *   ink on the highlight fill       6.37:1
 *   ink on the accent fill          5.02:1
 *   the focus ring on the ground    3.85:1
 *   the focus ring on the plane     3.50:1
 *
 * THREE CORRECTIONS TO SECTION 4, stated plainly because they are deviations.
 *
 * Section 4 names a cream ground #FFF7D6 and three saturated tokens. Measured
 * against that ground the three are 2.76:1 (primary action), 3.60:1
 * (secondary accent) and 2.32:1 (highlight). None of them can carry text
 * of any size, and the highlight cannot even clear the 3:1 that a non-text
 * indicator needs.
 *
 *   1. The three tokens are used as FILLS, never as text. Ink sits on them at
 *      5.35:1, 5.02:1 and 6.37:1, all of which pass. That
 *      is also the honest reading of the design: a sticker is a filled shape
 *      with ink on it.
 *   2. Text that has to be coloured -- links, the secondary accent in prose --
 *      uses mix(token, ink), which keeps the hue and moves only the
 *      luminance: #A74553 at 5.39:1 and #2B64B0 at 5.50:1.
 *   3. THE FOCUS RING IS NOT #54B948. Section 4 names it explicitly -- "3px
 *      solid with 3px offset" in the highlight -- and #54B948 measures
 *      2.32:1 on the ground, under the 3:1 bar for a non-text indicator.
 *      The ring here is mix(highlight, ink, .30) = #458C3D, which measures
 *      3.85:1 on the ground and 3.50:1 on the raised plane. The
 *      3px width and the 3px offset are kept exactly as written.
 *
 * A LOAD-BEARING NOTE ON THE THICK OUTLINES.
 *
 * Every outline in this build is a box-shadow, never a border. A 3px border
 * adds 6px to the painted box, and the `sizes` attribute on every image is a
 * promise about that box; a border on a frame makes every one of those
 * promises wrong by six pixels. `box-shadow: 0 0 0 3px` draws the same line
 * and takes no layout space at all. The flat offset shadow beside it is a
 * second box-shadow for the same reason.
 *
 * A SECOND LOAD-BEARING NOTE, ON THE WOBBLE.
 *
 * The signature effect is a hover rotation, and a rotation on an ancestor of
 * an <img> inflates that image's getBoundingClientRect -- which is exactly
 * what the audit measures the `sizes` promise against. No element that
 * contains a photograph is ever rotated here. The wobble is carried by the
 * authored marks, the number chips and the pill items, all of which contain
 * no image, and by ::after stickers pinned to the picture frames, which
 * rotate without moving the picture.
 */




:root {
  --bg: #FFF7D6;
  --ink: #222222;
  --act: #FF5D73;
  --acc: #2F80ED;
  --hi: #54B948;
  --plane: #F4ECCD;
  --field: #E9E2C4;
  --muted: #386633;
  --act-t: #A74553;
  --acc-t: #2B64B0;
  --acc-f: #4E92EA;
  --ring: #458C3D;
  --act-h: #E9576B;
  --hi-h: #4FAA44;
  --on-act: #000000;

  /* Section 4's spacing scale, entire. No length here is off it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1180px;
  --measure: 68ch;
  --measure-s: 52ch;
  --radius: 0px;          /* section 4: standard radius 0 */
  --pill: 999px;          /* the one permitted departure, for pills */
  --head-h:var(--catalog-font-heading);         /* 56px at every width, section 4 */
  --band-pad: 72px;

  --line: 3px;            /* the thick ink outline */
  --drop: 6px;            /* the flat offset shadow */

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);

  --gutter: 16px;

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. */
  --focus-ring: #458C3D;
  --focus-width: 3px;
  --focus-offset: 3px;

  --stk-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 4 L71 34 L101 22 L89 52 L119 60 L89 68 L101 98 L71 86 L60 116 L49 86 L19 98 L31 68 L1 60 L31 52 L19 22 L49 34 Z' transform='translate(7,8)' fill='%232F80ED'/%3E%3Cpath d='M60 4 L71 34 L101 22 L89 52 L119 60 L89 68 L101 98 L71 86 L60 116 L49 86 L19 98 L31 68 L1 60 L31 52 L19 22 L49 34 Z' fill='%23FF5D73' stroke='%23222222' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --stk-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 120'%3E%3Cpath d='M18 58 C18 28 40 10 66 10 C96 10 116 30 116 58 C116 90 94 108 64 108 C36 108 18 88 18 58 Z' transform='translate(8,9)' fill='%23FF5D73'/%3E%3Cpath d='M18 58 C18 28 40 10 66 10 C96 10 116 30 116 58 C116 90 94 108 64 108 C36 108 18 88 18 58 Z' fill='%2354B948' stroke='%23222222' stroke-width='6'/%3E%3Ccircle cx='66' cy='58' r='18' fill='none' stroke='%23222222' stroke-width='6'/%3E%3C/svg%3E");
  --stk-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate(7,8)'%3E%3Ccircle cx='38' cy='38' r='30' fill='%23222222'/%3E%3Ccircle cx='82' cy='60' r='22' fill='%23222222'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%23222222'/%3E%3C/g%3E%3Ccircle cx='38' cy='38' r='30' fill='%2354B948' stroke='%23222222' stroke-width='6'/%3E%3Ccircle cx='82' cy='60' r='22' fill='none' stroke='%23222222' stroke-width='6'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%232F80ED' stroke='%23222222' stroke-width='6'/%3E%3C/svg%3E");
  --stk-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 96'%3E%3Cpath d='M6 74 L38 18 L70 74 L102 18 L134 74 L166 18 L198 74' transform='translate(0,10)' fill='none' stroke='%23222222' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 74 L38 18 L70 74 L102 18 L134 74 L166 18 L198 74' fill='none' stroke='%23FF5D73' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 360px) { :root { --gutter: 18px; } }
@media (min-width: 375px) { :root { --gutter: 20px; } }
@media (min-width: 414px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 36px; --band-pad: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --band-pad: 88px; } }

/* ---- the ground ------------------------------------------------------- */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3, .mark__h, .price__v, .rev__no, .gal__no, .how__no, .proc__no,
.faq__q, .nf__h1, .ft__mark-h {
  font-family: var(--font-h);
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; margin: 0; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; margin: 0; }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act-t); }
a:hover { color: var(--ink); }

/* ---- the sticker field over a strong grid ----------------------------- */
/*
 * The grid is deliberately ordinary: one content column, capped at 1180px,
 * with the same gutter everywhere. All of the freedom is in the layer above
 * it -- the authored marks, absolutely positioned inside the band, at angles
 * no grid would produce.
 *
 * `overflow: clip` is what makes that safe. A sticker pinned near the right
 * edge of a 320px viewport would otherwise open the document horizontally,
 * which is the responsive gate's first and loudest failure. Clip contains it
 * without creating a scroll container, which `hidden` would.
 *
 * The marks are PSEUDO-ELEMENTS, not markup, and that is a hard constraint
 * rather than a preference: a design module has exactly two HTML hooks, and
 * every other class in the document comes from the shared renderer. A class
 * invented in this stylesheet and emitted by nobody is a dead selector and
 * the audit refuses it. A pseudo-element is not a class, so the sticker field
 * can be as dense as it likes.
 */

.sec {
  position: relative;
  overflow: clip;
  padding-block: var(--band-pad);
}

.sec::before, .sec::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform var(--t);
}

/* Every sticker's resting angle is a CUSTOM PROPERTY rather than a literal
   inside its own transform, and that is what makes the animation-off state
   below one rule instead of twenty-six. The hover rule adds to whatever angle
   it finds; the reduced-motion rule puts that angle back. Neither has to know
   which band it is sitting in. */
.sec::before, .sec::after { --rot: 0deg; transform: rotate(var(--rot)); }

.sec > .wrap { position: relative; z-index: 1; }

/* Which band carries which mark, and where. Sizes are in the 4-to-128 scale
   doubled; positions are a per-cent of the band so they move with it. */
.hero::before {
  inset-block-start: 6%; inset-inline-end: -22px;
  width: 116px; height: 116px;
  background-image: var(--stk-a);
  --rot: -9deg;
}

.hero::after {
  inset-block-end: 4%; inset-inline-start: -26px;
  width: 128px; height: 118px;
  background-image: var(--stk-b);
  --rot: 12deg;
}

.svcp::before {
  inset-block-start: 24px; inset-inline-start: -30px;
  width: 112px; height: 112px;
  background-image: var(--stk-c);
  --rot: -14deg;
}

.appr::after {
  inset-block-end: 18px; inset-inline-end: -18px;
  width: 168px; height: 78px;
  background-image: var(--stk-d);
  --rot: 6deg;
}

.galp::before, .gal::before {
  inset-block-start: 20px; inset-inline-end: -24px;
  width: 120px; height: 110px;
  background-image: var(--stk-b);
  --rot: -7deg;
}

.stfp::after, .stf::after {
  inset-block-end: 24px; inset-inline-start: -28px;
  width: 108px; height: 108px;
  background-image: var(--stk-a);
  --rot: 15deg;
}

.rev::before, .revp::before {
  inset-block-start: 16px; inset-inline-start: -26px;
  width: 104px; height: 104px;
  background-image: var(--stk-c);
  --rot: 8deg;
}

.faqg::after, .faqp::after {
  inset-block-end: 20px; inset-inline-end: -20px;
  width: 176px; height: 82px;
  background-image: var(--stk-d);
  --rot: -5deg;
}

.prin::before, .proc::before {
  inset-block-start: 28px; inset-inline-end: -26px;
  width: 110px; height: 102px;
  background-image: var(--stk-b);
  --rot: 10deg;
}

.how::after, .limit::after, .focus::after {
  inset-block-end: 16px; inset-inline-end: -24px;
  width: 100px; height: 100px;
  background-image: var(--stk-a);
  --rot: -11deg;
}

.cta::before, .note::before, .alt::before {
  inset-block-start: -18px; inset-inline-start: -22px;
  width: 104px; height: 96px;
  background-image: var(--stk-c);
  --rot: 6deg;
}

.con::after, .abt::after, .place::after, .pv::after, .nf::after {
  inset-block-end: -20px; inset-inline-end: -22px;
  width: 160px; height: 74px;
  background-image: var(--stk-d);
  --rot: 4deg;
}

.phead::before {
  inset-block-start: 8px; inset-inline-end: -20px;
  width: 96px; height: 96px;
  background-image: var(--stk-a);
  --rot: 13deg;
}

/* Fingerprint row six: gentle sticker wobble on hover. The band's own marks
   answer to a hover anywhere in the band, which is what makes the field feel
   like one surface rather than a set of independent widgets. */
.sec:hover::before,
.sec:hover::after { transform: rotate(calc(var(--rot) + 3deg)) scale(1.04); }

/* Section 4's animation-off state, verbatim: "stickers keep deliberate
   rotations but do not wobble, float or enter". The rotations above are
   declarations, not animations, so switching the transition off is the whole
   of it -- and the hover rotation is suppressed with them. */
@media (prefers-reduced-motion: reduce) {
  .sec:hover::before,
  .sec:hover::after { transform: rotate(var(--rot)); }
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- the floating pill header ----------------------------------------- */
/*
 * 56px at every width, which section 4 states twice. The bar itself is not
 * the pill: `.hd` is a transparent strip that keeps the pill off the viewport
 * edge, and `.hd__in` is the pill, outlined and dropped in the flat shadow
 * that every sticker on the page carries.
 *
 * It is sticky rather than fixed. Fixed takes the header out of flow and
 * leaves a 56px hole at the top of every page that has to be padded back in
 * by hand; sticky keeps the flow intact, which is also why this build starts
 * at CLS 0 and stays there.
 */

.hd {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--bg);
  padding: var(--s3) var(--gutter);
}

.hd__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--head-h);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--s4);
  background: var(--plane);
  border-radius: var(--pill);
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.mark {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
}

.mark__h { font-size: 1.125rem; letter-spacing: -.01em; }

.mark__amp { color: var(--act-t); padding-inline: 1px; }

.mark__sub {
  display: none;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* The sub-label is the first thing to go. A 320px pill holds the wordmark, a
   44px Book action and a 44px toggle and nothing else. */
@media (min-width: 560px) { .mark__sub { display: inline; } }
@media (min-width: 768px) { .mark__h { font-size: 1.25rem; } }

/* ---- pill tabs, and the menu card that stands in for them ------------- */
/*
 * Fingerprint row five is "pill tabs plus menu card", so the wide navigation
 * is a row of real pills and the narrow one is a card, not a full-screen
 * overlay.
 *
 * The tabs begin at 1024 and are deliberately tight there. Nine pills, a
 * wordmark and a visible Book action have about 896px to share inside a
 * 1024px viewport once the gutters and the pill's own padding are taken out;
 * at the 1280 size they would wrap, and a wrapped row cannot hold a 44px
 * target inside a 56px bar. The 01..09 index the shared header emits is
 * hidden in the tabs -- a number inside a pill reads as a quantity -- and
 * kept in the card, where it is the only thing giving the links an order.
 */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--s2);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}

.nav__link:hover { background: var(--hi); color: var(--ink); }

/* The current page is marked twice: a filled pill and full ink. Colour on its
   own would be the only cue, and section 5 asks for a visual treatment beside
   aria-current. */
.nav__link[aria-current="page"] {
  background: var(--act);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}

.nav__link .nav__no { display: none; }

.drawer__link .nav__no {
  display: inline-block;
  min-width: 2.25em;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .drawer { display: none; }
}

@media (min-width: 1280px) {
  .nav__list { gap: var(--s2); }
  .nav__link { font-size: .75rem; padding-inline: var(--s3); min-height: 40px; }
}

/* ---- the menu card ---------------------------------------------------- */

.drawer { position: relative; }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s3);
  border-radius: var(--pill);
  background: var(--hi);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 0 0 2px var(--ink);
}

.drawer__toggle::-webkit-details-marker { display: none; }

.drawer[open] .drawer__toggle { background: var(--act); }

.drawer__bars {
  width: 16px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Below 375px the wordmark, the Book action and the toggle do not fit a
   320px viewport, and flex will not shrink a control that has declared a 44px
   floor. The toggle drops its word and becomes a square.

   The word is CLIPPED, never display:none. Hidden that way the summary is
   left with an aria-hidden icon and no accessible name at all, which is a
   worse failure than the one being fixed. */
@media (max-width: 374px) {
  .drawer__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.drawer__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s3));
  z-index: 40;
  width: min(20rem, calc(100vw - (var(--gutter) * 2) - var(--s6)));
  padding: var(--s3);
  background: var(--plane);
  border-radius: var(--s5);
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--s3);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.drawer__link:hover { background: var(--hi); }

.drawer__link[aria-current="page"] {
  background: var(--act);
  box-shadow: 0 0 0 2px var(--ink);
}

/* ---- actions ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);   /* section 4: 24px minimum on the primary */
  border: 0;
  border-radius: var(--pill);
  font-family: var(--font-h);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--ink);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}

.btn--primary, .btn--book, .btn--sub {
  background: var(--act);
  color: var(--ink);
}

/* The label stays ink in all four states, which is the point of choosing the
   fills this way: nothing has to flip colour mid-gesture. The press moves the
   button onto its own shadow, which is the flattest possible way to show a
   pressed state and costs no layout. */
.btn--primary:hover, .btn--book:hover, .btn--sub:hover,
.btn--primary:focus-visible, .btn--book:focus-visible,
.btn--sub:focus-visible {
  background: var(--act-h);
}

.btn--ghost {
  background: var(--bg);
  color: var(--ink);
}

.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--hi-h); }

.btn:active {
  transform: translate(var(--drop), var(--drop));
  box-shadow: 0 0 0 var(--line) var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---- the colour-block community footer -------------------------------- */

.ft {
  background: var(--plane);
  color: var(--ink);
  box-shadow: inset 0 var(--line) 0 var(--ink);
}

.ft a { color: var(--ink); }
.ft a:hover { color: var(--act-t); }

/* Three flat blocks of colour across the top of the footer, emitted by
   footer_mark(). At 320 they stack into three bands; from 560 they sit in a
   row and read as one block of colour. Nothing is written on them but the
   business name and the town, because section 10 allows nothing else here. */
.ft__mark {
  display: grid;
  gap: 0;
  border-block-end: var(--line) solid var(--ink);
}

.ft__mark-h {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--s5);
  background: var(--act);
  font-size: 1.75rem;
  line-height: 1.05;
  text-align: center;
}

.ft__mark-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--s4) var(--s5);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

.ft__mark-sub:nth-of-type(1) { background: var(--hi); }
.ft__mark-sub:nth-of-type(2) { background: var(--acc-f); }

@media (min-width: 560px) {
  .ft__mark { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ft__mark-h { min-height: 104px; }
  .ft__mark-sub { min-height: 104px; }
}

/* ---- the subscribe band ----------------------------------------------- */
/*
 * base.footer() emits this as a bare <section class="sub-band">, NOT as a
 * ".sec", so none of the sticker machinery above reaches it and it needs its
 * own. It is the last colour block before the footer's three, so it takes the
 * highlight and the two of them read as one run of colour down the foot of the
 * page.
 */

.sub-band {
  position: relative;
  overflow: clip;
  padding-block: var(--s8);
  background: var(--hi);
  box-shadow: inset 0 var(--line) 0 var(--ink),
              inset 0 calc(var(--line) * -1) 0 var(--ink);
}

.sub-band::before {
  content: "";
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: -22px;
  width: 118px;
  height: 108px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--stk-b);
  --rot: -8deg;
  transform: rotate(var(--rot));
  transition: transform var(--t);
}

.sub-band:hover::before {
  transform: rotate(calc(var(--rot) + 3deg)) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .sub-band:hover::before { transform: rotate(var(--rot)); }
}

.sub-band__in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 900px) {
  .sub-band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

.sub-band__h { margin: 0 0 var(--s3); }

.sub-band__p { margin: 0; max-width: var(--measure-s); }

.sub-form { display: grid; gap: var(--s3); }

.sub-form__status { margin: 0; font-size: .875rem; }

/* ---- forms ------------------------------------------------------------ */

.field label, .sub-band label {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea, .sub-band input {
  width: 100%;
  min-height: 44px;
  padding: var(--s3);
  border: 0;
  border-radius: var(--s3);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  box-shadow: 0 0 0 2px var(--ink);
}

.field textarea { min-height: 168px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus,
.sub-band input:focus { box-shadow: 0 0 0 var(--line) var(--ink); }

.field input::placeholder, .field textarea::placeholder,
.sub-band input::placeholder { color: var(--muted); }


/* PREMIUM REALISM PASS — DS01-09
   One unmistakable signature per design; shared selectors only provide polish. */
footer, .ft { position: relative; overflow: hidden; isolation: isolate; }
footer::before, .ft::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 88% 12%, rgba(255,91,72,.14), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(255,91,72,.14) 58% 59%, transparent 59%); }
footer a, .ft a { text-underline-offset: .28em; transition: color .2s ease, transform .2s ease; }
footer a:hover, footer a:focus-visible, .ft a:hover, .ft a:focus-visible { color: #FF5B48; }
.stf, .stf__card, [class*="staff-card"] { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: translateY(-5px) rotate(-.5deg); border-color: #FF5B48; box-shadow: 0 18px 48px rgba(255,91,72,.14); }
.field--intake { padding: 14px; border-inline-start: 3px solid #FF5B48; background: rgba(255,91,72,.14); }
.field--intake label { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stf, .stf__card, [class*="staff-card"] { transition: none; } .stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: none; } }


/* Each sticker hangs off its band by 18-30px and is 104-176px wide, so on a
   phone - where the gutter is 20px and the text runs the full width - roughly
   80px of every mark landed on a heading or a caption. The text paints above
   it, but near-black on an opaque mark reads as nothing there. Shrink the mark
   and push it further out so the part still on screen stays in the gutter.
   margin-inline moves it outward whichever edge it is anchored to, which is
   what keeps this one rule instead of twenty-six. */
@media (max-width: 700px) {
  .sec::before, .sec::after {
    width: 76px;
    height: 76px;
    margin-inline: -40px;
  }
}