/* ==========================================================================
   BON JEU — Collections

   Built against design/comp/collections.png, which is 941px wide. Every value
   below is a measured comp pixel expressed in `--u`, so at a 941px viewport
   one unit is one comp pixel and the page can be diffed against the comp
   directly (scripts/verify_collection.py). Above that the whole page scales
   as one, which keeps the proportions the comp establishes.

   Two deliberate departures from the comp, both recorded in
   design/MEASUREMENTS.md:
     · the hero's bottom edge wanders ±16px in the comp — a generation
       artefact, rebuilt here as a true 16:9 rectangle;
     · the nav mark is the supplied wordmark artwork rather than the comp's
       narrower approximation of it.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

.collections {
  /* Two scales, because one cannot serve both ends of this page.
     The comp is 941px wide; scaling everything by viewport/941 gives a
     correctly proportioned page but, on a 2680px display, a 188px logo and
     28px nav links. Capping instead leaves the hero at half the window.

     So: `--u` is the canvas — band widths, section heights, display type —
     and follows the viewport, because imagery and headlines should fill a
     large screen. `--t` is the chrome — nav, buttons, captions, body copy —
     and stops growing at 1560px, because 16px is 16px on any monitor.

     They are identical up to 1560px, so the comp match at 941 and the layout
     at 1440 are both untouched; they only diverge past that. */
  --gutter: clamp(20px, 3.6099vw, 104px);
  --content: calc(100vw - 2 * var(--gutter));
  --u: calc(var(--content) / 873);
  --t: calc(min(100vw, 1560px) / 941);
  --radius: calc(18 * var(--u));

  /* Collection accent. Measured off the comp's eyebrows and the pre-order
     ticket, which agree: a dusty rose that sits between the brand's coral and
     pink without being either. Scoped to this page — the core eleven in
     tokens.css are untouched. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rose: #e09aa4;
  --card: #fbf9f5;
  --serif: 'Playfair Display', 'Didot', 'Times New Roman', serif;

  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

.collections *,
.collections *::before,
.collections *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- nav ---- */

.cnav {
  display: flex;
  align-items: flex-start;
  padding: calc(17 * var(--t)) 0 0;
  /* The comp sets the mark 6u inside the gutter and the bag's ink 9u short
     of it — the nav is not on the same rail as the bands below. */
  margin: 0 calc(var(--gutter) + 9 * var(--t)) 0 calc(var(--gutter) - 6 * var(--t));
  gap: calc(28 * var(--t));
}

.cnav__home {
  display: block;
  width: calc(66 * var(--t));
  flex: none;
}
.cnav__home img { display: block; width: 100%; height: auto; }

.cnav__links {
  display: flex;
  margin-left: auto;
  margin-top: calc(4 * var(--t));
  gap: calc(58.5 * var(--t));
}

.cnav a,
.cnav__bag {
  color: var(--navy);
  text-decoration: none;
  font-size: calc(10 * var(--t));
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The French sits under the English, not beside it — same pairing the rest of
   the site uses, so the nav reads identically page to page. */
.cnav .alt {
  display: block;
  margin-top: calc(4 * var(--t));
  font-size: calc(8 * var(--t));
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(17, 46, 103, 0.5);
}

.cnav__links a:last-child { margin-left: calc(5 * var(--t)); }

.cnav__bag {
  margin-left: calc(78 * var(--t));
  margin-top: calc(4 * var(--t));
}

.cnav a:hover,
.cnav a:focus-visible { color: var(--cobalt); }

/* -------------------------------------------------------------- hero ---- */

.chero {
  position: relative;
  width: var(--content);
  /* The supplied hero is 2.30:1, which is what its box measured at on a
     ~1955px display. Matching it exactly means no crop at any width and no
     viewport-height clamp — and it still clears the fold everywhere from
     1280x720 up, with 106px to spare at the tightest.

     This supersedes the comp's 1.77:1 hero: the comp was a mockup, the
     photograph is the real thing. See design/MEASUREMENTS.md.

     2.8 rather than the photograph's own 2.3 because at 2.3 the hero ate 78%
     of the fold. The crop comes off the top only — the figures run to the
     very bottom edge of the frame, so bottom-aligning is the only direction
     that does not cut feet. 2.87 is the hard floor: the man's head starts
     19.8% down, and past that the crop reaches it. */
  aspect-ratio: 2.8;
  height: auto;
  margin: calc(16 * var(--u)) auto 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.chero img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.chero__vertical {
  position: absolute;
  left: calc(43 * var(--u));
  top: calc(156 * var(--u));
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: calc(10 * var(--t));
  font-weight: 500;
  letter-spacing: calc(-0.6 * var(--t));
  line-height: calc(15 * var(--t));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  /* White hairline type over bright sky needs a shadow, not more weight —
     the terrace plate on the home page taught the same lesson. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.chero__badge {
  position: absolute;
  right: calc(20 * var(--u));
  top: calc(21 * var(--u));
  width: calc(76 * var(--t));
  height: calc(76 * var(--t));
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.chero__badge svg { display: block; width: 100%; height: 100%; }
.chero__badge text { fill: currentColor; }
.chero__badge .badge__ring {
  font-size: 8.4px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.chero__badge .badge__num {
  font-family: var(--serif);
  font-size: 21px;
}
.chero__badge path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 0.9;
}

/* ----------------------------------------------------------- riviera ---- */

.criviera {
  position: relative;
  width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(441 * var(--u)) 1fr;
}

.criviera__text .ceyebrow { padding-top: calc(5 * var(--u)); }

/* The eyebrow and the cap-tops of the display line ride up onto the
   photograph. The clay under them measures #964F2B, where navy manages only
   2.1:1 — so the eyebrow, which sits wholly over the image, turns cream
   (5.4:1). The display line stays navy: only the top quarter of each cap
   crosses, and the letterforms are heavy enough that the eye completes them
   against the cream below. */
.criviera__text .ceyebrow {
  color: var(--cream);
  text-shadow: 0 calc(1 * var(--t)) calc(3 * var(--t)) rgba(20, 14, 10, 0.45);
}

.criviera__text {
  padding: calc(27 * var(--u)) 0 0 calc(28 * var(--u));
  margin-top: calc(-72 * var(--u));
}

.ceyebrow {
  margin: 0;
  font-size: calc(11 * var(--t));
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--rose);
}

.criviera__title {
  margin: calc(1 * var(--u)) 0 0 calc(-5 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(96.5 * var(--u));
  line-height: calc(81 * var(--u));
  text-transform: uppercase;
  letter-spacing: calc(-0.5 * var(--u));
  color: var(--navy);
}
.criviera__title span { display: block; }

.criviera__season {
  margin: calc(16 * var(--u)) 0 0 calc(3 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(11 * var(--t));
  font-variant-numeric: lining-nums;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.criviera__lede {
  margin: calc(16 * var(--u)) 0 0 calc(3 * var(--u));
  max-width: calc(202 * var(--t));
  font-size: calc(11.2 * var(--t));
  font-weight: 400;
  line-height: calc(18 * var(--t));
  color: var(--navy);
}

.cbuttons {
  display: flex;
  gap: calc(8 * var(--t));
  margin-top: calc(16 * var(--u));
}

.cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(39 * var(--t));
  padding: 0 calc(28 * var(--t));
  font-size: calc(10 * var(--t));
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms var(--ease, ease), color 220ms var(--ease, ease);
}
.cbtn--solid {
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--navy);
}
.cbtn--solid:hover { background: #0b1f47; }
.cbtn--ghost {
  border: 1px solid rgba(17, 46, 103, 0.55);
  color: var(--navy);
}
.cbtn--ghost:hover { background: var(--navy); color: var(--cream); }

.criviera__figure {
  position: relative;
  margin-top: calc(16 * var(--u));
  /* The plate's own ratio, so it is never cropped. That is what lets the
     figures be positioned in percentages and stay registered to the
     balustrade at every width, mobile included. */
  aspect-ratio: 1672 / 941;
  border-radius: var(--radius);
  overflow: hidden;
}

.scene__plate {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The cutouts go in exactly as supplied — outline and all. That cream edge is
   the point: it reads as a collage, not a retouch. An earlier version eroded
   the alpha to remove it and took her hair with it, because the wisps are
   thinner than the matte.

   The plate is used whole, at its native 1672x941. Cropping it to the page's
   portrait box made the balustrade enormous and the figures looked perched on
   a wall; cropping it to the campaign shot's framing pushed the balustrade
   out entirely. Each figure's cut edge is anchored to the rail, which runs
   `y = 0.66 + 0.33x` across the frame — which is why two women leaning on the
   same rail have different `top` values. */
.scene__figure {
  position: absolute;
  height: auto;
  /* -115% of its own height clears the top edge completely: each figure is
     about 92% of the box tall and sits 5-6% down, so -100% would leave her
     feet showing. Clipped by the frame, she is never seen outside the image. */
  transform: translate3d(0, calc(-115% * (1 - var(--in, 0))), 0);
  will-change: transform;
}
.scene__figure--navy  { width: 44.5%; left: 11.2%; top: 0.5%; }
.scene__figure--cream { width: 38.0%; left: 40.5%; top:   0%; }

@media (prefers-reduced-motion: reduce) {
  .scene__figure { transform: none; }
}

/* The ticket overlaps the photo's left edge, so it lives outside the figure —
   a rounded overflow:hidden frame would clip it. */
.cticket {
  position: absolute;
  left: calc(372 * var(--u));
  top: calc(198 * var(--u));
  width: calc(154 * var(--t));
  height: calc(68 * var(--t));
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--rose);
  transform: rotate(-8.1deg);
  clip-path: polygon(
    calc(5 * var(--u)) 0, calc(100% - 5 * var(--u)) 0,
    100% calc(5 * var(--u)), 100% calc(100% - 5 * var(--u)),
    calc(100% - 5 * var(--u)) 100%, calc(5 * var(--u)) 100%,
    0 calc(100% - 5 * var(--u)), 0 calc(5 * var(--u)));
  filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u))
                      calc(6 * var(--u)) rgba(24, 20, 18, 0.28));
}
.cticket::after {
  content: '';
  position: absolute;
  inset: calc(5 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.cticket span {
  display: block;
  position: relative;
  font-family: var(--serif);
  font-size: calc(17 * var(--t));
  line-height: calc(18.5 * var(--t));
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--navy);
}

/* ------------------------------------------------------------- tiles ---- */

.cedit .ceyebrow { font-size: calc(10.3 * var(--t)); }

.cedit {
  width: var(--content);
  margin: 0 auto;
  padding-top: calc(28 * var(--u));
  text-align: center;
}

.cedit__title {
  margin: calc(8 * var(--u)) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(33.9 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: calc(0.2 * var(--u));
}

.cedit__sub {
  margin: calc(10 * var(--u)) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(12.5 * var(--t));
  line-height: 1;
  color: rgba(17, 46, 103, 0.78);
}

.ctiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(11 * var(--u));
  width: calc(853 * var(--u));
  margin: calc(20 * var(--u)) auto 0;
  text-align: left;
}

.ctile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(280 * var(--u));
  padding: calc(14 * var(--t)) calc(13 * var(--t)) calc(27 * var(--t));
  background: var(--card);
  border-radius: calc(4 * var(--u));
  color: var(--navy);
  text-decoration: none;
  transition: transform 300ms var(--ease, ease),
              box-shadow 300ms var(--ease, ease);
}
.ctile:hover {
  transform: translateY(calc(-3 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u))
              rgba(17, 46, 103, 0.1);
}

.ctile__img {
  height: calc(200 * var(--u));
  margin: 0 calc(-3.5 * var(--t)) auto;
}
.ctile__img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

.ctile__name {
  margin: 0;
  max-width: calc(160 * var(--t));
  font-size: calc(10 * var(--t));
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: calc(13 * var(--t));
  text-transform: uppercase;
}

.ctile__colour {
  margin: calc(7 * var(--t)) 0 0;
  font-size: calc(8.2 * var(--t));
  font-style: italic;
  line-height: 1;
  color: rgba(17, 46, 103, 0.62);
}

.ctile__go {
  position: absolute;
  right: calc(13 * var(--t));
  bottom: calc(10 * var(--t));
  width: calc(11 * var(--t));
  height: calc(8 * var(--t));
  color: var(--navy);
  transition: transform 300ms var(--ease, ease);
}
.ctile__go svg { display: block; width: 100%; height: 100%; }
.ctile:hover .ctile__go { transform: translateX(calc(3 * var(--u))); }

/* ------------------------------------------------------------ banner ---- */

.cbanner {
  position: relative;
  width: var(--content);
  height: calc(222 * var(--u));
  margin: calc(17 * var(--u)) auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.cbanner img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The banner photograph is bright on the left where the navy type sits. A
   flat tint would grey the water; a one-sided wash keeps it and still buys
   the contrast the type needs. */
.cbanner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              rgba(228, 236, 244, 0.82) 0%,
              rgba(228, 236, 244, 0.55) 34%,
              rgba(228, 236, 244, 0) 58%);
}

.cbanner .ceyebrow { font-size: calc(10.3 * var(--t)); }

.cbanner__text { padding: calc(29 * var(--t)) 0 0 calc(72 * var(--u)); }

.cbanner__title {
  margin: calc(6 * var(--u)) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(22.6 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: calc(0.2 * var(--u));
}

.cbanner__italic {
  margin: calc(7 * var(--u)) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(12.6 * var(--t));
  line-height: 1;
}

.cbanner__copy {
  margin: calc(18 * var(--t)) 0 0;
  font-size: calc(11.6 * var(--t));
  line-height: calc(16 * var(--t));
}

.cbanner .cbtn {
  margin-top: calc(21 * var(--t));
  height: calc(28 * var(--t));
  padding: 0 calc(20 * var(--t));
  font-size: calc(9.5 * var(--t));
  letter-spacing: 0.07em;
}

/* ------------------------------------------------------------ footer ---- */

.cassure {
  width: var(--content);
  margin: calc(13 * var(--u)) auto 0;
  padding-top: calc(17 * var(--u));
  border-top: 1px solid rgba(17, 46, 103, 0.18);
  display: grid;
  grid-template-columns: repeat(4, calc(209.7 * var(--u)));
}

.cassure__item {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--t));
  padding: 0 calc(4 * var(--t)) 0 calc(32 * var(--t));
}
.cassure__item + .cassure__item {
  border-left: 1px solid rgba(17, 46, 103, 0.16);
}

.cassure__icon {
  flex: none;
  width: calc(17 * var(--t));
  height: calc(17 * var(--t));
  margin-top: calc(2 * var(--t));
  color: var(--navy);
}
.cassure__icon svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.cassure__label {
  margin: 0;
  font-size: calc(9.1 * var(--t));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.cassure__note {
  margin: calc(4 * var(--t)) 0 0;
  font-size: calc(8.4 * var(--t));
  font-style: italic;
  line-height: 1;
  color: rgba(17, 46, 103, 0.6);
}

.collections__foot { height: calc(30 * var(--u)); }

/* ------------------------------------------------------------ mobile ---- */

/* The comp is a desktop design, and its ratio of display type to body type
   (96u against 11u) only works at desktop scale. Scaling the whole page by
   `--u` alone would take the lede to 8px, so below 860px the display sizes
   keep scaling and everything that has to be *read* gets an absolute size. */
@media (max-width: 860px) {
  .collections {
    --gutter: 24px;
    --content: calc(100vw - 48px);
    --u: calc(100vw / 560);
    --t: calc(100vw / 560);
  }

  .cnav { padding: calc(20 * var(--u)) var(--gutter) 0; margin: 0; }
  .cnav__home { width: calc(74 * var(--u)); }
  .cnav a, .cnav__bag { font-size: 11px; letter-spacing: 0.1em; }
  .cnav .alt { font-size: 10px; margin-top: 5px; }
  .cnav__links { gap: calc(38 * var(--u)); }
  .cnav__links a:last-child { margin-left: 0; }
  .cnav__bag { margin-left: calc(34 * var(--u)); }

  /* 5:4 keeps roughly 70% of the frame's width, which is what it takes to
     hold all three figures. A portrait crop drops one of them. */
  .chero {
    width: calc(100vw - 2 * var(--gutter));
    height: auto;
    aspect-ratio: 5 / 4;
  }
  .chero img { object-position: 82% center; }
  .chero__vertical { left: calc(20 * var(--u)); top: calc(120 * var(--u)); font-size: 10px; }
  .chero__badge { right: calc(18 * var(--u)); top: calc(18 * var(--u)); width: 62px; height: 62px; }

  .criviera,
  .cedit,
  .cbanner,
  .cassure { width: calc(100vw - 2 * var(--gutter)); }

  .criviera { grid-template-columns: 1fr; }
  .criviera__text { padding: calc(30 * var(--u)) 0 0; margin-top: 0; }
  .criviera__text .ceyebrow { color: var(--rose); text-shadow: none; }
  .criviera__text .ceyebrow { padding-top: 0; }
  .ceyebrow { font-size: 11px; letter-spacing: 0.16em; }
  .criviera__title {
    margin: 10px 0 0;
    font-size: calc(104 * var(--u));
    line-height: calc(88 * var(--u));
  }
  .criviera__season { margin: 16px 0 0; font-size: 14px; }
  .criviera__lede {
    margin: 12px 0 0;
    max-width: 34em;
    font-size: 15px;
    line-height: 24px;
  }
  .cbuttons { margin-top: 22px; }
  .cbtn { height: 46px; font-size: 11px; letter-spacing: 0.14em; }

  .criviera__figure { margin-top: calc(30 * var(--u)); }
  /* Above the photo's top-right corner rather than over its left edge: at this
     width the left edge is where the figures are. */
  .cticket {
    left: auto;
    right: calc(14 * var(--u));
    top: calc(4 * var(--u));
    width: 150px;
    height: 66px;
  }
  .cticket span { font-size: 17px; line-height: 19px; }

  .cedit { padding-top: calc(40 * var(--u)); }
  .cedit .ceyebrow { font-size: 11px; }
  .cedit__title { margin-top: 12px; font-size: calc(58 * var(--u)); }
  .cedit__sub { margin-top: 12px; font-size: 15px; }

  .ctiles {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(14 * var(--u));
    margin-top: calc(30 * var(--u));
  }
  .ctile { height: auto; padding: 14px 13px 18px; }
  .ctile__img { height: calc(42vw); margin: 0 0 14px; }
  .ctile__name { max-width: none; font-size: 11px; line-height: 15px; }
  .ctile__colour { margin-top: 5px; font-size: 11px; }
  /* Bottom-aligned so a two-line product name does not lift its arrow out
     of line with the single-line cards beside it. */
  .ctile__go {
    position: static;
    margin-top: auto;
    padding-top: 14px;
    width: 15px;
    height: 11px;
  }

  /* At this width a cover crop of a 3.9:1 photograph shows a quarter of its
     width, which puts the BON JEU patch directly behind the headline. Stack
     instead: the photograph reads as a band, the type gets a clean ground. */
  .cbanner {
    height: auto;
    margin-top: calc(34 * var(--u));
    display: flex;
    flex-direction: column;
    background: #dfe7ef;
  }
  .cbanner::before { content: none; }
  .cbanner img {
    position: static;
    z-index: auto;
    height: 180px;
    object-position: 72% center;
  }
  .cbanner__text { padding: 24px 22px 30px; }
  .cbanner__title { margin-top: 10px; font-size: calc(46 * var(--u)); }
  .cbanner__italic { margin: 10px 0 0; font-size: 15px; }
  .cbanner__copy { margin-top: 16px; font-size: 14px; line-height: 21px; }
  .cbanner__copy br { display: none; }
  .cbanner .cbtn { margin-top: 22px; height: 44px; font-size: 11px; }

  .cassure {
    margin-top: calc(34 * var(--u));
    padding-top: 22px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 22px;
  }
  .cassure__item { padding: 0 10px 0 0; gap: 12px; }
  .cassure__item + .cassure__item { border-left: 0; }
  .cassure__icon { width: 19px; height: 19px; }
  .cassure__label { font-size: 11px; white-space: normal; }
  .cassure__note { font-size: 11px; margin-top: 5px; }

  .collections__foot { height: 40px; }
}

@media (max-width: 480px) {
  .cnav__links { display: none; }
  .cbuttons { flex-direction: column; align-items: stretch; gap: 10px; }
  .cassure { grid-template-columns: 1fr; row-gap: 18px; }
  .cticket { width: 132px; height: 58px; }
  .cticket span { font-size: 15px; line-height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ctile, .ctile__go, .cbtn { transition: none; }
  .ctile:hover { transform: none; }
}