/* Depth and font options.

   Depth is a class on <html>:
     opt-depth-solid   hard offset shadows with no blur, in navy or maroon (on by default)
     opt-depth-lifted  deep layered shadows tinted navy or maroon, thicker button edges and wider spacing between the
                       hero chips
     opt-depth-soft    layered soft shadows tinted navy or maroon, and dimensional pink buttons
     (none of them)    v24's flat look, unchanged
   Lifted, soft and flat stay selectable: index.html?depth=lifted|soft|flat, or the Depth buttons on compare.html.
   Font is a class on <html>:
     font-jost        Jost for headings and body (on by default)
     font-fraunces    Fraunces headings, Jost body
     font-bricolage   Bricolage Grotesque headings, DM Sans body
     font-outfit      Outfit for both
     (none)           v24's stack: URW Geometric where installed, else Century Gothic or Jost
   The other fonts stay selectable: index.html?font=current|fraunces|bricolage|outfit, or the Font buttons on compare.html.
   Every rule below sits behind one of these classes, so a page with none of them looks exactly like v24. */

/* ================================================================ depth: shared */

/* Pink and navy buttons: the slanted shape is a ::before with a clip-path, so a box-shadow on it would be cut off.
   The shadow is a drop-shadow filter on the button itself, which follows the slanted shape. */
html.opt-depth-lifted .btn-pink,
html.opt-depth-lifted button.btn-outline-navy,
html.opt-depth-soft .btn-pink,
html.opt-depth-soft button.btn-outline-navy,
html.opt-depth-solid .btn-pink,
html.opt-depth-solid button.btn-outline-navy { --btn-shade: 122, 8, 73; }
html.opt-depth-lifted button.btn-outline-navy,
html.opt-depth-soft button.btn-outline-navy,
html.opt-depth-solid button.btn-outline-navy { --btn-shade: 46, 70, 104; }
html.opt-depth-lifted nav .btn-pink,
html.opt-depth-lifted .book-card .btn-pink,
html.opt-depth-soft nav .btn-pink,
html.opt-depth-soft .book-card .btn-pink { --btn-shade: 14, 28, 54; }

/* Cards with a cut corner: the fast-launch card (a 44px clip-path in packaging.css) and, with html.opt-cut-corners, the
   form and booking cards (a 24px triangle in the section colour, art.css). A box-shadow is always a rectangle and a
   clip-path cuts a shadow off, so under depth the card itself has no background, clip-path or shadow. Its fill is a
   ::before with the corner left transparent, and the shadow is a drop-shadow on that layer, which follows the cut.
   The card's text is not in that layer, so it casts no shadow, and focus outlines stay whole. */
html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card),
html.opt-depth-soft :is(.lane-fast, .form-card, .book-card),
html.opt-depth-solid :is(.lane-fast, .form-card, .book-card) {
  position: relative; isolation: isolate; background: none; clip-path: none; box-shadow: none; --aa: .5px;
}
@media (min-resolution: 2dppx) {
  html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card),
  html.opt-depth-soft :is(.lane-fast, .form-card, .book-card),
  html.opt-depth-solid :is(.lane-fast, .form-card, .book-card) { --aa: .25px; }
}
@media (min-resolution: 3dppx) {
  html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card),
  html.opt-depth-soft :is(.lane-fast, .form-card, .book-card),
  html.opt-depth-solid :is(.lane-fast, .form-card, .book-card) { --aa: .17px; }
}
html.opt-depth-lifted .lane-fast,
html.opt-depth-soft .lane-fast,
html.opt-depth-solid .lane-fast { --fill: var(--cream); --cut: 44px; }
html.opt-depth-lifted .form-card,
html.opt-depth-soft .form-card,
html.opt-depth-solid .form-card { --fill: #fff; --cut: 0px; }
html.opt-depth-lifted .book-card,
html.opt-depth-soft .book-card,
html.opt-depth-solid .book-card { --fill: var(--navy); --cut: 0px; }
html.opt-depth-lifted.opt-cut-corners :is(.form-card, .book-card),
html.opt-depth-soft.opt-cut-corners :is(.form-card, .book-card),
html.opt-depth-solid.opt-cut-corners :is(.form-card, .book-card) { --cut: 24px; }
html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card)::before,
html.opt-depth-soft :is(.lane-fast, .form-card, .book-card)::before,
html.opt-depth-solid :is(.lane-fast, .form-card, .book-card)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fill);
}
/* The cut: past a 45 degree line --cut px from the corner along each edge (.7071 --cut from the corner), the fill is
   transparent. The blend across the line (2 --aa) is one screen pixel wide, so the edge is smooth and as sharp as the
   card's other edges. */
html.opt-depth-lifted .lane-fast::before,
html.opt-depth-soft .lane-fast::before,
html.opt-depth-solid .lane-fast::before,
html.opt-depth-lifted.opt-cut-corners :is(.form-card, .book-card)::before,
html.opt-depth-soft.opt-cut-corners :is(.form-card, .book-card)::before,
html.opt-depth-solid.opt-cut-corners :is(.form-card, .book-card)::before {
  background: linear-gradient(315deg, transparent calc(var(--cut) * .7071 - var(--aa)), var(--fill) calc(var(--cut) * .7071 + var(--aa)));
}

/* ================================================================ depth: lifted */

/* Deeper than soft: longer offsets and wider blurs, a thicker dark edge on the buttons, and room between the hero chips.
   Every shadow colour is one of five tints: navy (46, 70, 104), dark navy (14, 28, 54), maroon (122, 8, 73) and the
   darker maroons (90, 6, 55) and (70, 4, 44). The class stands alone; it does not need opt-depth-soft. */

html.opt-depth-lifted .btn-pink,
html.opt-depth-lifted button.btn-outline-navy {
  filter: drop-shadow(0 2px 2px rgba(var(--btn-shade), .34)) drop-shadow(0 13px 15px rgba(var(--btn-shade), .34));
}
/* A thin light line on the top edge and a thick dark edge along the bottom, inside the slanted shape. */
html.opt-depth-lifted .btn-pink::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(122, 8, 73, .40);
}
html.opt-depth-lifted button.btn-outline-navy::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -4px 0 rgba(14, 28, 54, .48);
}
html.opt-depth-lifted .btn-pink:hover,
html.opt-depth-lifted button.btn-outline-navy:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 3px 3px rgba(var(--btn-shade), .30)) drop-shadow(0 22px 22px rgba(var(--btn-shade), .38));
}
html.opt-depth-lifted .btn-pink:active,
html.opt-depth-lifted button.btn-outline-navy:active {
  transform: translateY(1px);
  filter: drop-shadow(0 1px 1px rgba(var(--btn-shade), .40));
}

/* Cards: white surfaces on navy, cream, pink and light pink, each with a three-layer shadow tinted to its background. */
html.opt-depth-lifted .stat,
html.opt-depth-lifted .chip {
  box-shadow: 0 2px 3px rgba(46, 70, 104, .14), 0 14px 24px -8px rgba(46, 70, 104, .28), 0 40px 60px -22px rgba(46, 70, 104, .40);
}
/* The three hero chips sit 12px apart (8px at 600px and under) so each chip's shadow shows on every side; soft and
   solid keep them 2px apart. */
html.opt-depth-lifted .chip-row { gap: 12px; }
@media (max-width: 600px) {
  html.opt-depth-lifted .chip-row { gap: 8px; }
}
html.opt-depth-lifted .proof-card {
  background: #fff;
  padding: 28px 30px;
  box-shadow: 0 2px 3px rgba(122, 8, 73, .18), 0 16px 26px -10px rgba(122, 8, 73, .32), 0 40px 64px -26px rgba(90, 6, 55, .44);
}
/* Cut-corner cards (see depth: shared): the same three layers as soft, deeper. The fill casts the 2px contact shadow.
   The two larger shadows come from ::after, a copy of the card's shape 18px in from each edge (its cut moved in to
   match), under the fill, so only its shadows show, as a negative spread would. */
html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card)::after {
  content: ""; position: absolute; inset: 18px; width: auto; height: auto; border: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(315deg, transparent calc(var(--cut) * .7071 - 18px * .4142 - var(--aa)), #000 calc(var(--cut) * .7071 - 18px * .4142 + var(--aa)));
}
html.opt-depth-lifted :is(.form-card, .book-card)::before {
  filter: drop-shadow(0 2px 2px rgba(90, 6, 55, .22));
}
html.opt-depth-lifted :is(.form-card, .book-card)::after {
  filter: drop-shadow(0 30px 15px rgba(90, 6, 55, .38)) drop-shadow(0 44px 40px rgba(70, 4, 44, .42));
}
/* The fast-launch card also has a thin light line along its top edge. */
html.opt-depth-lifted .lane-fast::before {
  background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) top / 100% 1px no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - var(--aa)), var(--fill) calc(var(--cut) * .7071 + var(--aa)));
  filter: drop-shadow(0 2px 2px rgba(14, 28, 54, .42));
}
html.opt-depth-lifted .lane-fast::after {
  filter: drop-shadow(0 34px 16px rgba(14, 28, 54, .50)) drop-shadow(0 50px 46px rgba(14, 28, 54, .56));
}

/* ================================================================ depth: soft */

html.opt-depth-soft .btn-pink,
html.opt-depth-soft button.btn-outline-navy {
  filter: drop-shadow(0 1px 1px rgba(var(--btn-shade), .30)) drop-shadow(0 6px 9px rgba(var(--btn-shade), .26));
}
/* A thin light line on the top edge and a darker edge along the bottom, inside the slanted shape. */
html.opt-depth-soft .btn-pink::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -3px 0 rgba(122, 8, 73, .34);
}
html.opt-depth-soft button.btn-outline-navy::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(14, 28, 54, .42);
}
html.opt-depth-soft .btn-pink:hover,
html.opt-depth-soft button.btn-outline-navy:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 2px rgba(var(--btn-shade), .30)) drop-shadow(0 12px 14px rgba(var(--btn-shade), .30));
}
html.opt-depth-soft .btn-pink:active,
html.opt-depth-soft button.btn-outline-navy:active {
  transform: translateY(1px);
  filter: drop-shadow(0 0 1px rgba(var(--btn-shade), .38));
}

/* Cards: white or cream surfaces on navy, cream, pink and light pink, each with a shadow tinted to its background. */
html.opt-depth-soft .stat,
html.opt-depth-soft .chip {
  box-shadow: 0 1px 2px rgba(46, 70, 104, .10), 0 8px 16px -6px rgba(46, 70, 104, .16), 0 24px 40px -18px rgba(46, 70, 104, .22);
}
html.opt-depth-soft .proof-card {
  background: #fff;
  padding: 28px 30px;
  box-shadow: 0 1px 2px rgba(122, 8, 73, .14), 0 10px 18px -8px rgba(122, 8, 73, .26), 0 26px 44px -20px rgba(90, 6, 55, .34);
}
/* Cut-corner cards (see depth: shared): a soft shadow in three layers, tinted maroon on pink and dark navy on navy.
   A drop-shadow has no spread, and its blur is half a box-shadow's. The fill casts the 1px contact shadow. The two
   larger shadows come from ::after, a copy of the card's shape 14px in from each edge (its cut moved in to match),
   under the fill, so only its shadows show, as a negative spread would. */
html.opt-depth-soft :is(.lane-fast, .form-card, .book-card)::after {
  content: ""; position: absolute; inset: 14px; width: auto; height: auto; border: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(315deg, transparent calc(var(--cut) * .7071 - 14px * .4142 - var(--aa)), #000 calc(var(--cut) * .7071 - 14px * .4142 + var(--aa)));
}
html.opt-depth-soft :is(.form-card, .book-card)::before {
  filter: drop-shadow(0 1px 1px rgba(90, 6, 55, .18));
}
html.opt-depth-soft :is(.form-card, .book-card)::after {
  filter: drop-shadow(0 18px 11px rgba(90, 6, 55, .33)) drop-shadow(0 24px 26px rgba(70, 4, 44, .36));
}
/* The fast-launch card also has a thin light line along its top edge. */
html.opt-depth-soft .lane-fast::before {
  background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) top / 100% 1px no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - var(--aa)), var(--fill) calc(var(--cut) * .7071 + var(--aa)));
  filter: drop-shadow(0 1px 1px rgba(14, 28, 54, .34));
}
html.opt-depth-soft .lane-fast::after {
  filter: drop-shadow(0 20px 12px rgba(14, 28, 54, .46)) drop-shadow(0 28px 30px rgba(14, 28, 54, .48));
}

/* ================================================================ depth: solid */

html.opt-depth-solid .btn-pink,
html.opt-depth-solid button.btn-outline-navy {
  filter: drop-shadow(4px 4px 0 rgb(122, 8, 73));
}
html.opt-depth-solid .btn-pink:hover,
html.opt-depth-solid button.btn-outline-navy:hover {
  transform: translate(-2px, -2px);
  filter: drop-shadow(6px 6px 0 rgb(122, 8, 73));
}
html.opt-depth-solid .btn-pink:active,
html.opt-depth-solid button.btn-outline-navy:active {
  transform: translate(3px, 3px);
  filter: drop-shadow(1px 1px 0 rgb(122, 8, 73));
}
html.opt-depth-solid .stat {
  box-shadow: 6px 6px 0 #2E4668;
}
/* The three hero chips touch, so each gets a plinth under it and no shadow to its side. */
html.opt-depth-solid .chip {
  box-shadow: 0 6px 0 #2E4668;
}
html.opt-depth-solid .proof-card {
  background: #fff;
  padding: 28px 30px;
  box-shadow: 8px 8px 0 #2E4668;
}
/* Cut-corner cards (see depth: shared): the shadow is the card's shape, cut corner and all, offset. */
html.opt-depth-solid .form-card::before {
  filter: drop-shadow(8px 8px 0 #2E4668);
}
html.opt-depth-solid .book-card::before {
  filter: drop-shadow(8px 8px 0 #7A0849);
}
html.opt-depth-solid .lane-fast::before {
  filter: drop-shadow(10px 10px 0 #7A0849);
}
html.opt-depth-solid :is(.form-card, .book-card)::after { content: none; }

/* Stat cards (depth only): white tiles with space between them, in place of v24's ruled band. */
html.opt-depth-lifted .stat-grid,
html.opt-depth-soft .stat-grid,
html.opt-depth-solid .stat-grid { gap: 18px; }
html.opt-depth-lifted .stat,
html.opt-depth-soft .stat,
html.opt-depth-solid .stat { background: #fff; padding: 20px 24px; border-left: 0; }
@media (max-width: 600px) {
  html.opt-depth-lifted .stat,
  html.opt-depth-soft .stat,
  html.opt-depth-solid .stat { padding: 16px 14px; }
  html.opt-depth-lifted .stat .big,
  html.opt-depth-soft .stat .big,
  html.opt-depth-solid .stat .big { font-size: clamp(40px, 12vw, 54px); }
}

/* Motion for the buttons, only where the visitor has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  html.opt-depth-lifted .btn-pink,
  html.opt-depth-lifted button.btn-outline-navy,
  html.opt-depth-soft .btn-pink,
  html.opt-depth-soft button.btn-outline-navy,
  html.opt-depth-solid .btn-pink,
  html.opt-depth-solid button.btn-outline-navy { transition: transform .14s ease, filter .14s ease; }
}

/* ================================================================ forced colours */
/* Windows High Contrast removes backgrounds and shadows; the buttons get their border in a11y.css. */
@media (forced-colors: active) {
  html.opt-depth-lifted .btn-pink, html.opt-depth-lifted button.btn-outline-navy,
  html.opt-depth-lifted .btn-pink:hover, html.opt-depth-lifted button.btn-outline-navy:hover,
  html.opt-depth-lifted .btn-pink:active, html.opt-depth-lifted button.btn-outline-navy:active,
  html.opt-depth-soft .btn-pink, html.opt-depth-soft button.btn-outline-navy,
  html.opt-depth-soft .btn-pink:hover, html.opt-depth-soft button.btn-outline-navy:hover,
  html.opt-depth-soft .btn-pink:active, html.opt-depth-soft button.btn-outline-navy:active,
  html.opt-depth-solid .btn-pink, html.opt-depth-solid button.btn-outline-navy,
  html.opt-depth-solid .btn-pink:hover, html.opt-depth-solid button.btn-outline-navy:hover,
  html.opt-depth-solid .btn-pink:active, html.opt-depth-solid button.btn-outline-navy:active { filter: none; }
  html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card)::before,
  html.opt-depth-lifted :is(.lane-fast, .form-card, .book-card)::after,
  html.opt-depth-soft :is(.lane-fast, .form-card, .book-card)::before,
  html.opt-depth-soft :is(.lane-fast, .form-card, .book-card)::after,
  html.opt-depth-solid :is(.lane-fast, .form-card, .book-card)::before { filter: none; }
}

/* ================================================================ fonts */

/* Headings: h1 to h6, and the large stat figures. Body text, buttons, labels and form fields take the body family. */
html.font-jost body { font-family: 'Jost', 'URW Geometric', 'Century Gothic', -apple-system, sans-serif; }

html.font-fraunces body { font-family: 'Jost', 'URW Geometric', 'Century Gothic', -apple-system, sans-serif; }
html.font-fraunces :is(h1, h2, h3, h4, h5, h6, .stat .big) { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }

html.font-bricolage body { font-family: 'DM Sans', 'Jost', -apple-system, sans-serif; }
html.font-bricolage :is(h1, h2, h3, h4, h5, h6, .stat .big) { font-family: 'Bricolage Grotesque', 'DM Sans', 'Jost', -apple-system, sans-serif; }

html.font-outfit body { font-family: 'Outfit', 'Jost', -apple-system, sans-serif; }

/* The widest label on the page, "Request the product catalog", fits one line at 390 px in the brand font. Jost, Fraunces
   (Jost body), Bricolage Grotesque (DM Sans body) and Outfit run wider, so on a narrow screen it takes a smaller size. */
@media (max-width: 440px) {
  html.font-jost #products .cta-row .btn-outline-navy,
  html.font-fraunces #products .cta-row .btn-outline-navy,
  html.font-bricolage #products .cta-row .btn-outline-navy,
  html.font-outfit #products .cta-row .btn-outline-navy { font-size: 21.5px; }
}