/* =========================================================
   Creative Lab — Theme layout
   Type and color come from creative-lab-type.css and
   creative-lab-colors.css. This file only builds the layout,
   using their tokens. Flat: no shadows, no gradients.
   ========================================================= */

:root {
  /* Spacing scale, 8px base */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 8rem;     /* 128 */

  /* Circles: one scale, steps of 24px, set by the mouse circle.
     S 24  the mouse dot
     M 48  the mouse over a link · service numbers · back to top
     L 72  the mouse over a picture ("View") · the opening coin · the sale coin on a card
     XL 96 the sale coin on a product photo */
  --circle-s: 1.5rem;
  --circle-m: 3rem;
  --circle-l: 4.5rem;
  --circle-xl: 6rem;

  /* Page frame */
  --pad: clamp(1rem, 4vw, 3.5rem);           /* side gutter, 16 to 56px */
  --gap: clamp(1rem, 2vw, 1.5rem);           /* column gap, 16 to 24px */
  --section: clamp(4rem, 9vw, 9rem);         /* space between sections */
  --header-h: 4.5rem;

  /* The video is shot on this light gray; the stage matches it so the
     edges of the clip disappear. It is part of the footage, not a brand color. */
  --cl-video-matte: #E7E6E9;

  --line: 1px solid var(--cl-black);

  /* The torn top edge of a note from the studio pad (On Our Desk, contact thanks) */
  --cl-torn: polygon(0.0% 2.3px, 2.94% 1.1px, 5.88% 4.6px, 8.82% 0.5px, 11.76% 3.8px, 14.71% 2.6px, 17.65% 0.4px, 20.59% 3.6px, 23.53% 0.3px, 26.47% 3.0px, 29.41% 0.5px, 32.35% 0.6px, 35.29% 3.0px, 38.24% 5.8px, 41.18% 0.9px, 44.12% 1.6px, 47.06% 4.4px, 50.0% 6.6px, 52.94% 4.0px, 55.88% 2.8px, 58.82% 6.8px, 61.76% 0.3px, 64.71% 6.0px, 67.65% 2.0px, 70.59% 1.0px, 73.53% 0.8px, 76.47% 2.2px, 79.41% 5.7px, 82.35% 1.3px, 85.29% 4.1px, 88.24% 4.5px, 91.18% 2.6px, 94.12% 3.8px, 97.06% 0.4px, 100.0% 1.2px, 100% 100%, 0% 100%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-3)); }
body { margin: 0; background: var(--cl-white); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
/* Selected text: the yellow marker behind black text, everywhere. Chrome and
   Safari fade a fully opaque selection color, which turns the yellow olive on
   black panels; a 0.99 alpha keeps the exact brand yellow on every surface. */
::selection { background: rgb(247 235 98 / 0.99); color: var(--cl-black); }
/* No gray flash when a link is tapped on a phone; links have their own states */
html { -webkit-tap-highlight-color: transparent; }
/* The page slides sideways during a page change; never let that make a sideways scroll */
html, body { overflow-x: clip; }

/* Checkboxes and radios, drawn flat in black instead of the system grays and blues */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.125rem; height: 1.125rem; margin: 0; vertical-align: -0.2em;
  border: 1px solid var(--cl-black); border-radius: 0; background: var(--cl-white);
  display: inline-grid; place-content: center; cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cl-black); transform: scale(0); transition: transform 0.15s var(--ease); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:checked { background: var(--cl-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--cl-ink-muted); cursor: not-allowed; }
input:focus-visible[type="checkbox"], input:focus-visible[type="radio"] { outline: 2px solid var(--cl-black); outline-offset: 2px; }
/* WooCommerce show-password eye: no gray box */
.show-password-input { background: transparent !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Focus: visible, flat, on every interactive element */
:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
.cl-on-black :focus-visible, .cl-footer :focus-visible { outline-color: var(--cl-white); }
.cl-main:focus { outline: none; }

.cl-skip {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  background: var(--cl-black); color: var(--cl-white); padding: var(--s-1) var(--s-2); text-decoration: none;
}
.cl-skip:focus { top: var(--s-1); }

/* ---------- Links ---------- */
.cl-content a:not(.cl-button):not(.wp-block-button__link),
.cl-link {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.2s var(--ease);
}
.cl-content a:not(.cl-button):not(.wp-block-button__link):hover,
.cl-link:hover { text-decoration-thickness: 2px; }

.cl-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
a:hover > .cl-arrow, a:focus-visible > .cl-arrow { transform: translateX(0.25em); }

/* ---------- Header ---------- */
.cl-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--cl-white);
  transition: transform 0.35s var(--ease);
}
.cl-header.is-hidden { transform: translateY(-100%); }
.cl-header__inner {
  height: var(--header-h);
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: var(--s-4);
}
.cl-logo { display: block; color: var(--cl-black); flex: none; }
/* The C: it turns like the pin in the hero, flat, around its vertical axis */
.cl-logo { perspective: 400px; padding: 0.375rem; margin: -0.375rem; }
.cl-logo__c { display: block; transform-style: preserve-3d; }
.cl-logo svg { width: auto; height: 2.25rem; }  /* 36px */
@keyframes cl-turn-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
@keyframes cl-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js .cl-logo:not(.has-entered) .cl-logo__c { animation: cl-turn-in 0.9s var(--ease) 0.15s both; }
  .cl-logo.has-entered.is-turning .cl-logo__c { animation: cl-turn 1s var(--ease); }
}

.cl-nav { margin-left: auto; }
.cl-menu { display: flex; gap: var(--s-4); }
.cl-menu a {
  display: inline-block; padding: 0.25rem 0.375rem; margin-inline: -0.375rem;
  text-decoration: none; color: var(--cl-black);
}
.cl-menu a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* The page you are on: its name in coral */
.cl-menu .is-current > a,
.cl-menu .current-menu-item > a { color: var(--cl-coral); }

.cl-header__end { display: flex; align-items: center; gap: var(--s-3); }

.cl-menu-toggle {
  display: none; width: 2.75rem; height: 2.75rem; margin-right: -0.625rem;
  background: none; border: 0; padding: 0; position: relative;
}
.cl-menu-toggle__lines,
.cl-menu-toggle__lines::before {
  position: absolute; left: 0.625rem; right: 0.625rem; height: 2px; background: var(--cl-black);
  transition: transform 0.3s var(--ease);
}
.cl-menu-toggle__lines { top: calc(50% - 4px); }
.cl-menu-toggle__lines::before { content: ""; left: 0; right: 0; top: 7px; }
.cl-menu-toggle[aria-expanded="true"] .cl-menu-toggle__lines { transform: translateY(3.5px) rotate(45deg); }
.cl-menu-toggle[aria-expanded="true"] .cl-menu-toggle__lines::before { transform: translateY(-7px) rotate(-90deg); }

@media (max-width: 767px) {
  .cl-header__end { margin-left: auto; }
  .cl-menu-toggle { display: block; }
  .cl-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 47;
    background: var(--cl-white);
    padding: var(--s-4) var(--pad);
    visibility: hidden; opacity: 0;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .cl-nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease); }
  .cl-menu { flex-direction: column; gap: var(--s-2); }
  .cl-menu a {
    font-size: var(--cl-size-headline); line-height: var(--cl-lead-headline);
    letter-spacing: var(--cl-track-headline);
    font-variation-settings: "opsz" var(--cl-opsz-display);
  }
  body.cl-menu-open { overflow: hidden; }
}

/* ---------- Page frame ---------- */
.cl-main { flex: 1; }
.cl-page-head {
  padding: clamp(3rem, 9vw, 9rem) var(--pad) clamp(2rem, 5vw, 5rem);
}
.cl-content > * { padding-inline: var(--pad); }
.cl-content > * + * { margin-top: var(--section); }
.cl-content > :last-child { margin-bottom: var(--section); }

/* Full-bleed blocks keep their own inner padding */
.cl-content > .cl-hero,
.cl-content > [class*="is-style-panel-"],
.cl-content > .wp-block-image.alignfull,
.cl-content > .wp-block-cover { padding-inline: 0; }

/* Blocks that sit next to each other without a big gap */
.cl-content > .is-tight { margin-top: var(--s-5); }

/* ---------- Block styles (registered in inc/setup.php) ---------- */
.is-style-lead {
  font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: pretty;
}
.is-style-label {
  font-size: var(--cl-size-label); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-label); letter-spacing: var(--cl-track-label);
}
.is-style-statement,
p.is-style-statement {
  font-size: var(--cl-size-headline); font-weight: var(--cl-medium);
  line-height: 1.15; letter-spacing: var(--cl-track-headline);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  max-width: 24em; text-wrap: pretty;
}
.is-style-display {
  font-size: var(--cl-size-display); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-display); letter-spacing: var(--cl-track-display);
  font-variation-settings: "opsz" var(--cl-opsz-display);
}
/* A section name: Subhead role */
.is-style-section {
  font-size: var(--cl-size-subhead); font-weight: var(--cl-semibold);
  line-height: var(--cl-lead-subhead); letter-spacing: var(--cl-track-subhead);
  font-variation-settings: "opsz" var(--cl-opsz-display);
}
.is-style-section a, .is-style-display a { text-decoration: none !important; }
.is-style-section a:hover, .is-style-display a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* Panels: flat brand surfaces, text always black (white only on black) */
[class*="is-style-panel-"] { padding-block: clamp(3rem, 6vw, 5rem); }   /* 48 to 80px */
[class*="is-style-panel-"] > * { padding-inline: var(--pad); }
.is-style-panel-green { background: var(--cl-green); color: var(--cl-black); }
.is-style-panel-tint  { background: var(--cl-green-tint); color: var(--cl-black); }
.is-style-panel-coral { background: var(--cl-coral); color: var(--cl-black); }
.is-style-panel-black { background: var(--cl-black); color: var(--cl-white); }
/* Panels sit flush against each other and against the footer */
.cl-content > [class*="is-style-panel-"] + [class*="is-style-panel-"] { margin-top: 0; }
.cl-content > [class*="is-style-panel-"]:last-child { margin-bottom: 0; }

/* ---------- Section: name on the left, content on the right ---------- */
/* Markup: .cl-section > heading.is-style-section + .cl-section__body */
.cl-section {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s-3);
  align-items: start;
}
.cl-section > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cl-section > .is-style-section { grid-column: 1 / span 4; }
  .cl-section > .cl-section__body { grid-column: 5 / -1; }
  /* Stacked: the name sits above full-width content */
  .cl-section--stack > .cl-section__body { grid-column: 1 / -1; }
}
.cl-section--stack { row-gap: var(--s-4); }
.cl-section__body > * + * { margin-top: var(--s-3); }
.cl-section__body > * + .cl-work-grid,
.cl-section__body > * + .cl-product-row,
.cl-section__body > * + .cl-services { margin-top: var(--s-5); }

/* A thin rule above a section, the Swiss way */
.cl-section.has-rule { border-top: var(--line); padding-top: var(--s-3); }

/* ---------- Hero: the 3D element ---------- */
.cl-hero {
  background: var(--cl-video-matte);   /* only until the first frame shows */
  overflow: hidden;
}
/* The clip is wide, with its own background carried to the edges, so it fills
   the stage edge to edge and no seam can show. On narrow screens it crops to a
   square around the centre. */
.cl-hero .wp-block-video { margin: 0; }
.cl-hero video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9 !important; /* WordPress sets the file's ratio inline */
  max-height: calc(100svh - var(--header-h));
  object-fit: cover;
  /* Some browsers draw a dark row on the outermost pixels of a video; scale
     just past the edges so the stage clips them. */
  transform: scale(1.012);
}
@media (max-width: 767px) {
  .cl-hero video { aspect-ratio: 1 / 1 !important; }
}
.cl-content > .cl-hero:first-child + * { margin-top: var(--section); }

/* ---------- Media ---------- */
.cl-content .wp-block-image img { width: 100%; height: auto; }
.cl-content figcaption { font-size: var(--cl-size-label); color: var(--cl-ink-muted); margin-top: var(--s-1); }
.cl-media-pair {
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
}
@media (min-width: 768px) { .cl-media-pair { grid-template-columns: 5fr 7fr; align-items: end; } }
.cl-media-pair .wp-block-image { margin: 0; }

/* ---------- Services ---------- */
.cl-services { display: grid; grid-template-columns: 1fr; column-gap: var(--gap); }
.cl-service {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  border-top: var(--line); padding-block: var(--s-3) var(--s-4);
}
/* Each row opens with a line; the last one is not closed with another, so a
   line, white, then the black footer never stack up. On the Services page the
   list ends the page: the last row sits right on the footer, whose black edge
   closes the list, and opening that row carries the footer down with it. */
.cl-content > .cl-services--full:last-child { margin-bottom: 0; }
.cl-service__num {
  grid-column: 1 / span 2;
  font-size: var(--cl-size-label); font-weight: var(--cl-medium); letter-spacing: var(--cl-track-label);
  font-variant-numeric: tabular-nums; padding-top: 0.35em;
}
.cl-service__name { grid-column: 3 / span 10; }
.cl-service__list { grid-column: 3 / span 10; margin-top: var(--s-2); }
.cl-service__list li { padding-block: 0.125rem; }
@media (min-width: 900px) {
  .cl-service__num { grid-column: 1 / span 1; }
  .cl-service__name { grid-column: 2 / span 5; }
  .cl-service__list { grid-column: 7 / span 6; margin-top: 0; }
}
/* Services page: names in the headline role */
.cl-services--full .cl-service__name {
  font-size: var(--cl-size-headline); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-headline); letter-spacing: var(--cl-track-headline);
}
.cl-services--full .cl-service__num { padding-top: 0.9em; }
.cl-services--full .cl-service__list { font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead); font-variation-settings: "opsz" var(--cl-opsz-display); letter-spacing: var(--cl-track-lead); }
@media (min-width: 900px) { .cl-services--full .cl-service__list { padding-top: 0.5em; } }

/* Home: a compact grid */
@media (min-width: 640px) {
  .cl-services--compact .cl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cl-services--compact .cl-services { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-4); }
}
.cl-services--compact .cl-service { display: block; padding-block: var(--s-2) var(--s-3); }
.cl-services--compact .cl-service__num { padding: 0 0 var(--s-1); }
.cl-services--compact .cl-service__name { font-size: var(--cl-size-subhead); }
.cl-services--compact .cl-service__list { margin-top: var(--s-1); color: var(--cl-ink-muted); }

/* ---------- Work grid ---------- */
.cl-work-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5) var(--gap);
}
@media (min-width: 768px) {
  .cl-work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* A calm rhythm: wide, narrow, narrow, wide */
  .cl-work-grid > .cl-tile:nth-child(4n+1),
  .cl-work-grid > .cl-tile:nth-child(4n+4) { grid-column: span 7; }
  .cl-work-grid > .cl-tile:nth-child(4n+2),
  .cl-work-grid > .cl-tile:nth-child(4n+3) { grid-column: span 5; }
  .cl-work-grid > .cl-tile:nth-child(4n+2) .cl-tile__media,
  .cl-work-grid > .cl-tile:nth-child(4n+3) .cl-tile__media { aspect-ratio: 4 / 5; }
}
.cl-tile__link { display: block; text-decoration: none !important; color: inherit; }
.cl-tile__media {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--cl-green-tint);
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.cl-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.cl-tile__link:hover img { transform: scale(1.02); }
.cl-tile__title { margin-top: var(--s-2); }
.cl-tile__link:hover .cl-tile__title { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-tile__meta { margin-top: 0.25rem; }
/* Placeholders follow the palette order: green tint, pink, blue */
.cl-tile--empty .cl-tile__media { padding: var(--s-2); }
.cl-tile--empty:nth-child(3n+2) .cl-tile__media { background: var(--cl-pink); }
.cl-tile--empty:nth-child(3n+3) .cl-tile__media { background: var(--cl-blue); }

/* ---------- Project page ---------- */
.cl-project__head { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .cl-project__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .cl-project__head h1 { grid-column: 1 / span 7; }
  .cl-project__intro { grid-column: 8 / -1; }
}
.cl-project__services { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.cl-project__cover { padding-inline: var(--pad); margin-bottom: var(--section); }
.cl-project__cover img { width: 100%; }
.cl-project__next { padding: 0 var(--pad) var(--section); }
.cl-project__next a { text-decoration: none; }
.cl-project__next a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }

/* ---------- Store preview (home) ---------- */
.cl-product-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gap); }
@media (min-width: 900px) { .cl-product-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-product-row a { display: block; text-decoration: none !important; }
.cl-product-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.8s var(--ease); }
.cl-product-row__media { display: block; position: relative; overflow: hidden; }
.cl-product-row__alt { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.45s var(--ease); }
@media (hover: hover) {
  .cl-product-row a:hover .cl-product-row__alt,
  .cl-product-row a:focus-visible .cl-product-row__alt { opacity: 1; }
}
@media (hover: none) { .cl-product-row__alt { display: none; } }
.cl-product-row a:hover .cl-product-row__name { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-product-row__name { display: block; margin-top: var(--s-2); }
.cl-product-row__price { display: block; margin-top: 0.25rem; }

/* ---------- Call to action (coral, once per screen) ---------- */
.cl-cta .is-style-display a { display: inline-block; }
.cl-cta > * + * { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.cl-button,
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  border: 1px solid var(--cl-black); border-radius: 0;
  background: var(--cl-black); color: var(--cl-white);
  font-size: var(--cl-size-ui); font-weight: var(--cl-medium); line-height: var(--cl-lead-ui);
  letter-spacing: var(--cl-track-ui); font-variation-settings: "opsz" var(--cl-opsz-text);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cl-button:hover, .wp-block-button__link:hover { background: var(--cl-white); color: var(--cl-black); }
.cl-button--coral { background: var(--cl-coral); color: var(--cl-black); border-color: var(--cl-coral); }
.cl-button--coral:hover { background: var(--cl-black); color: var(--cl-white); border-color: var(--cl-black); }
.cl-button--outline { background: transparent; color: var(--cl-black); }
.cl-button--outline:hover { background: var(--cl-black); color: var(--cl-white); }

/* ---------- Forms ---------- */
.cl-form { display: grid; gap: var(--s-3); max-width: 40rem; }
.cl-field { display: grid; gap: var(--s-1); }
.cl-field input, .cl-field textarea,
.cl-input {
  width: 100%; min-height: 3rem;
  font-size: max(1rem, var(--cl-size-body)); /* 16px+ so phones do not zoom */
  font-variation-settings: "opsz" var(--cl-opsz-text);
  padding: 0.75rem 0; border: 0; border-bottom: var(--line); border-radius: 0;
  background: transparent; color: var(--cl-black);
  transition: border-color 0.2s var(--ease);
}
.cl-field textarea { resize: vertical; min-height: 8rem; line-height: var(--cl-lead-body); }
.cl-field input:focus, .cl-field textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.75rem - 1px); }
.cl-field input:focus-visible, .cl-field textarea:focus-visible { outline: none; }
.cl-form .cl-button { justify-self: start; margin-top: var(--s-2); }
.cl-hp { position: absolute !important; left: -9999px; }
.cl-form-error { background: var(--cl-yellow); display: inline-block; padding: 0.25rem 0.5rem; margin-bottom: var(--s-3); }
.cl-form-thanks:focus { outline: none; }

/* Contact page: details and form side by side */
.cl-contact { display: grid; gap: var(--s-6) var(--gap); }
@media (min-width: 900px) {
  .cl-contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cl-contact > :first-child { grid-column: 1 / span 5; }
  .cl-contact > :last-child { grid-column: 7 / -1; }
}
.cl-contact > :first-child > * + * { margin-top: var(--s-5); }
.cl-details { display: grid; gap: var(--s-3); margin: 0; }
.cl-details dd { margin: 0.25rem 0 0; font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead); letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display); }
.cl-details a { text-decoration: none !important; }
.cl-details a:hover { text-decoration: underline !important; text-underline-offset: 0.18em; }

/* ---------- Footer ---------- */
.cl-footer {
  padding: clamp(3rem, 7vw, 6rem) var(--pad) var(--pad);
  display: grid; gap: clamp(3rem, 8vw, 7rem);
}
.cl-footer__grid { display: grid; gap: var(--s-4) var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cl-footer__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.cl-footer__label { margin-bottom: var(--s-1); }
.cl-footer a { text-decoration: none; }
.cl-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-footer__logo { display: block; color: var(--cl-white); }
.cl-footer__logo svg { width: 100%; height: auto; }

/* ---------- Reveal on scroll: one calm, flat fade ---------- */
.js .cl-reveal,
.js .cl-content > :not(.cl-hero),
.js .cl-page-head,
.js .cl-service { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .cl-reveal.is-visible,
.js .cl-content > .is-visible,
.js .cl-page-head.is-visible,
.js .cl-service.is-visible,
.js.cl-reveal-all .cl-reveal,
.js.cl-reveal-all .cl-content > *,
.js.cl-reveal-all .cl-page-head,
.js.cl-reveal-all .cl-service { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cl-reveal, .js .cl-content > *, .js .cl-page-head, .js .cl-service { opacity: 1; transform: none; }
}

/* ---------- Pagination ---------- */
.navigation.pagination { margin-top: var(--s-6); }
.nav-links { display: flex; gap: var(--s-2); }
.nav-links .current { background: var(--cl-yellow); padding-inline: 0.25rem; }

/* A portrait image sits in the content column, not full width */
.cl-content > .cl-image-portrait img { width: 100%; }
@media (min-width: 900px) {
  .cl-content > .cl-image-portrait {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  }
  .cl-content > .cl-image-portrait img { grid-column: 5 / span 5; }
}

/* ---------- Office clocks, right under the hero ---------- */
.cl-clocks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.cl-clock { display: grid; gap: 0.25rem; max-width: none; }
.cl-clock__time {
  font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
}
.cl-content > .cl-hero + .cl-clocks { margin-top: var(--s-4); }

/* Policy links under the footer logo */
.cl-footer { row-gap: var(--s-4); }
.cl-footer__logo { margin-top: clamp(1rem, 4vw, 3rem); }
.cl-footer__policies { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }

/* WordPress adds a 24px gap between blocks in a flow layout. Inside our own
   grids the gap comes from the grid, so items keep no outer margin. */
.cl-services > *,
.cl-section > *,
.cl-contact > *,
.cl-media-pair > * { margin-block: 0; }

/* A section name and the first line of its text share one baseline */
@media (min-width: 900px) {
  .cl-section:not(.cl-section--stack) { align-items: baseline; }
}

/* ---------- Services page: open and close with + ---------- */
.cl-services--full .cl-service.is-collapsible {
  align-items: baseline;
  padding-block: 0;
  transition: background-color 0.3s var(--ease);
}
.cl-services--full .is-collapsible .cl-service__num { padding-top: 0; transition: background-color 0.3s var(--ease); justify-self: start; padding-inline: 0.25rem; margin-inline: -0.25rem; }
.cl-services--full .is-collapsible .cl-service__name { grid-column: 3 / -1; }
@media (min-width: 900px) {
  .cl-services--full .is-collapsible .cl-service__name { grid-column: 2 / -1; }
}
.cl-service__toggle {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding-block: var(--s-3);
  font: inherit; letter-spacing: inherit; color: inherit;
}
.cl-service__toggle:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 4px; }

/* The +: two flat lines; the vertical one turns flat when open */
.cl-plus { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.cl-plus::before, .cl-plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px;
  background: var(--cl-black); transition: transform 0.35s var(--ease);
}
.cl-plus::after { transform: rotate(90deg); }
.is-open .cl-plus::after { transform: rotate(0deg); }

/* What each area covers: slides open */
.cl-services--full .is-collapsible .cl-service__panel {
  grid-column: 3 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
@media (min-width: 900px) {
  .cl-services--full .is-collapsible .cl-service__panel { grid-column: 2 / -1; }
}
.cl-services--full .is-collapsible .cl-service__panel > .cl-service__list {
  overflow: hidden; min-height: 0; margin: 0; padding: 0;
  color: var(--cl-ink-muted);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cl-services--full .is-open .cl-service__panel { grid-template-rows: 1fr; }
.cl-services--full .is-open .cl-service__panel > .cl-service__list { opacity: 1; padding-bottom: var(--s-4); }

/* Green comes in on hover and stays while open; the number is marked in yellow */
@media (hover: hover) {
  .cl-services--full .is-collapsible:hover { background: var(--cl-green-tint); }
}
.cl-services--full .is-collapsible.is-open { background: var(--cl-green-tint); }
.cl-services--full .is-open .cl-service__num { background: var(--cl-yellow); }
.cl-services--full .is-collapsible { margin-inline: calc(var(--s-2) * -1); padding-inline: var(--s-2); }
.cl-services--full .is-collapsible .cl-service__panel > .cl-service__list { grid-column: auto; }

/* ---------- Service numbers: small pink circles, like the pin ----------
   Pink is an accent for small shapes (Color System). Yellow stays the one
   marker, for the open service; green is kept for the Store panel below. */
.cl-services .cl-service__num,
.cl-services--full .is-collapsible .cl-service__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle-m); height: var(--circle-m); padding: 0; margin: 0;
  border-radius: 50%;
  background: var(--cl-pink); color: var(--cl-black);
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color 0.3s var(--ease), transform 0.5s var(--ease);
}
.cl-services--compact .cl-service__num { margin-bottom: var(--s-2); }
.cl-services--full .is-collapsible .cl-service__num { align-self: center; justify-self: start; }
.cl-services--full .cl-service.is-collapsible { align-items: center; }
/* Open: the circle turns once, like the C, and is marked in yellow */
.cl-services--full .is-open .cl-service__num { background: var(--cl-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .cl-services--full .is-open .cl-service__num { transform: rotateY(360deg); }
}

/* ---------- The circle that follows the mouse (site.js) ----------
   Two sizes, on the circle scale (24px and 72px):
     dot   24px   follows the mouse
     view  72px   over an image that opens something: says "View"
   Over links, buttons and fields it steps aside.
   The C lives in the header and the first-visit coin only. */
.cl-pin {
  --pin-dot: var(--circle-s); --pin-view: var(--circle-l);
  --d: var(--pin-dot);
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cl-pin.is-on { opacity: 1; }
.cl-pin[data-state="view"] { --d: var(--pin-view); }
/* Over links, buttons and fields the circle shrinks away: each has its own
   hover (an underline, or black), and a circle on top would cover or tint it */
.cl-pin[data-state="hide"] { --d: 0px; }
.cl-pin__face {
  position: absolute; left: 0; top: 0;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--cl-green);
  display: flex; align-items: center; justify-content: center;
  transition-property: width, height, margin, background-color, transform;
  transition-duration: 0.4s, 0.4s, 0.4s, 0.3s, 0.2s;
  transition-timing-function: var(--ease);
}

/* On color panels the circle changes so it stays visible, in palette colors only */
.cl-pin[data-tone="green"] .cl-pin__face { background: var(--cl-pink); }
.cl-pin[data-tone="coral"] .cl-pin__face { background: var(--cl-black); }

/* View: green with "View" in black (pink on the green panel, white on coral) */
.cl-pin[data-state="view"] .cl-pin__face { background: var(--cl-green); }
.cl-pin[data-state="view"][data-tone="green"] .cl-pin__face { background: var(--cl-pink); }
.cl-pin[data-state="view"][data-tone="coral"] .cl-pin__face { background: var(--cl-white); }
.cl-pin__label {
  position: absolute; opacity: 0;
  font-size: var(--cl-size-label); font-weight: var(--cl-medium); line-height: 1;
  letter-spacing: var(--cl-track-label); color: var(--cl-black);
  font-variation-settings: "opsz" var(--cl-opsz-text);
  transition: opacity 0.25s var(--ease);
}
.cl-pin[data-state="view"] .cl-pin__label { opacity: 1; transition-delay: 0.12s; }

.cl-pin.is-down .cl-pin__face { transform: scale(0.85); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cl-pin { display: none; }
}

/* ---------- On Our Desk: a sticky note torn from the studio pad ----------
   Brand yellow paper with black text only (yellow is a fill behind black
   text, and this is the one yellow note on the page), a torn top edge cut
   with clip-path, and a slight tilt, like a note left on the desk. */
.cl-desk {
  position: fixed; left: var(--pad); bottom: var(--pad); z-index: 60;
  width: min(21rem, calc(100vw - 2 * var(--pad)));
  background: var(--cl-yellow); color: var(--cl-black);
  padding: calc(var(--s-3) + 0.5rem) var(--s-3) var(--s-3);
  display: grid; gap: var(--s-2);
  clip-path: var(--cl-torn);
  transform-origin: 20% 100%;
  /* It slides up from below the screen, solid all the way: no fade, so the
     yellow never turns olive over a dark section */
  transform: translateY(calc(100% + var(--pad) + 2rem)) rotate(-1.5deg);
  transition: transform 0.7s var(--ease);
}
.cl-desk.is-in { transform: rotate(-1.5deg); }
.cl-desk[hidden] { display: none; }
.cl-desk__head { display: flex; align-items: center; gap: var(--s-1); }
.cl-desk__title { margin: 0; }
.cl-desk__close {
  margin-left: auto; width: 2.75rem; height: 2.75rem; margin-right: -0.75rem; margin-block: -0.75rem;
  background: none; border: 0; padding: 0; position: relative;
}
.cl-desk__x::before, .cl-desk__x::after {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: calc(50% - 1px); height: 2px;
  background: var(--cl-black); transform: rotate(45deg);
}
.cl-desk__x::after { transform: rotate(-45deg); }
.cl-desk__lines { display: grid; gap: var(--s-2); margin: 0; }
.cl-desk__lines div { display: grid; gap: 0.125rem; }
.cl-desk__lines dd { margin: 0; }
.cl-desk__lines a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* A ruled line before the note, like the lines on a pad */
.cl-desk__note { border-top: var(--line); padding-top: var(--s-2); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .cl-desk, .cl-desk.is-in { transform: rotate(-1.5deg); transition: none; }
}

/* Phones: a slim bar along the bottom */
@media (max-width: 599px) {
  .cl-desk { left: 0; right: 0; bottom: 0; width: auto; padding: calc(var(--s-2) + 0.5rem) var(--pad) var(--s-2); }
  .cl-desk { transform: translateY(100%); }
  .cl-desk.is-in { transform: none; }
  .cl-desk__lines { display: none; }
  .cl-desk__note { border: 0; padding: 0; }
}
/* Text on a brand color is always black, labels included */
.cl-desk .cl-muted { color: var(--cl-black); }

/* Footer base: copyright, then the policies */
/* Footer base: the legal name and CR together on the left, policies on the right,
   both on the logo's edges. On phones: policies first, legal line last. */
.cl-footer__base { display: flex; flex-direction: column-reverse; gap: var(--s-3); }
.cl-footer__base p, .cl-footer__base li { margin: 0; font: inherit; letter-spacing: inherit; }  /* one size: the label role */
.cl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }  /* same rhythm as the policy links */
@media (min-width: 640px) {
  .cl-footer__base { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .cl-footer__policies { justify-content: flex-end; }
}

/* ---------- Contact: the thank-you, on a yellow note ---------- */
.cl-note {
  background: var(--cl-yellow); color: var(--cl-black);
  padding: calc(var(--s-4) + 0.5rem) var(--s-4) var(--s-4);
  clip-path: var(--cl-torn);
  max-width: 30rem;
  transform: rotate(-1.5deg); transform-origin: 20% 100%;
  display: grid; gap: var(--s-2);
}
.cl-note p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cl-note { animation: cl-note-in 0.7s var(--ease) both; }
}
@keyframes cl-note-in {
  from { opacity: 0; transform: translateY(-1.5rem) rotate(2deg); }
  to { opacity: 1; transform: rotate(-1.5deg); }
}

/* ---------- 404: a yellow note on the studio door ----------
   Brand yellow behind black text only, the one yellow thing on the page. */
.cl-404 { padding: clamp(3rem, 9vw, 8rem) var(--pad) var(--section); }
.cl-404__door { display: grid; gap: var(--s-6); justify-items: start; }
.cl-note--door {
  max-width: 34rem; width: 100%;
  padding: calc(var(--s-5) + 0.75rem) var(--s-5) var(--s-5);
  gap: var(--s-3);
}
.cl-note--door h1 { margin: 0; }
.cl-404__after > * + * { margin-top: var(--s-3); }
.cl-404__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.cl-404__links a { text-decoration: none; }
.cl-404__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Smooth scrolling (GSAP ScrollSmoother) ----------
   The header and anything fixed sit outside the smooth wrapper. Without
   scripts, the wrappers are plain blocks and the page scrolls natively. */
#smooth-content { display: flex; flex-direction: column; min-height: 100vh; }
#smooth-content > .cl-main { flex: 1; padding-top: var(--header-h); }

/* ---------- The coin: the first-visit preloader ----------
   A white curtain with the pin turning like a coin. At each edge-on moment
   its face changes, in the brand order, like the 3D element in the hero. */
.cl-curtain {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cl-white);
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
  visibility: hidden; pointer-events: none;
}
html.cl-preload .cl-curtain,
.cl-curtain.is-on { visibility: visible; pointer-events: auto; }
.cl-coin {
  width: var(--circle-l); height: var(--circle-l); border-radius: 50%;
  background: var(--cl-coral); color: var(--cl-black);   /* the hero video opens on coral */
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.cl-coin svg { width: calc(var(--circle-l) * 0.55); height: auto; }   /* 55% of the coin, like the real pin */
@media (prefers-reduced-motion: reduce) { .cl-curtain { display: none; } }

/* With GSAP, reveals are tweened by script; no CSS transition in the way.
   The selectors mirror the hiding rule above one for one (same weight, later
   in the file), or that rule would keep its transition and fight the script. */
.has-gsap .cl-reveal,
.has-gsap .cl-content > :not(.cl-hero),
.has-gsap .cl-page-head,
.has-gsap .cl-service { transition: none; }
.has-gsap .cl-services--full .cl-service.is-collapsible { transition: background-color 0.3s var(--ease); }

/* ---------- Page transitions: a flat yellow sheet ----------
   Brand yellow with straight, sharp edges wipes in from the left when you
   leave and carries on to the right when the next page opens, the way we read. The coin stays for
   the first visit only. */
/* The sheet runs under the header (z 50), so the white header with the logo
   and menu stays put and the top edge of the window is always white. Safari 26
   tints its toolbar with whatever fixed color sits at that edge; a yellow sheet
   there made the toolbar snap back to white, upward and sideways alike. */
.cl-sheet {
  position: fixed; inset: 0; z-index: 49;
  background: var(--cl-yellow);
  visibility: hidden; pointer-events: none;
  will-change: transform;
}
/* The sheet never takes pointer events, even while it shows. Safari 26 tints
   its toolbar with the color of a fixed element it finds at the top edge, by
   hit testing; a sheet that takes pointer events turns the toolbar yellow, then
   it snaps back to white once the sheet leaves. Without pointer events Safari
   keeps reading the white header. Clicks during the wipe are guarded in JS. */
html.cl-arrive .cl-sheet,
.cl-sheet.is-on { visibility: visible; }
/* While the page changes, the header stays in view and the desk note steps aside */
html.cl-leaving .cl-header, html.cl-arrive .cl-header { transform: none !important; }
html.cl-leaving .cl-desk { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cl-sheet { display: none; } }


/* Contact form: the privacy line under Send */
.cl-form__privacy { margin: 0; }
.cl-form__privacy a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Same edge fix for the store row on the home page and work tiles */
.cl-product-row__media img { transform: scale(1.01); backface-visibility: hidden; }
.cl-tile__media img { backface-visibility: hidden; transform: scale(1.01); }
.cl-tile__link:hover .cl-tile__media img { transform: scale(1.03); }

/* ---------- Home feature: caption left, lettering right ----------
   The whole feature sits on a black panel, as on Instagram: the lettering's fine
   lines are cut out of the letters, so they need a dark surface, and the caption
   shares it so the two read as one block. White on black is the one place white
   is allowed; the letters can also take any brand color. */
.cl-feature {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5) var(--gap); align-items: center;
}
@media (min-width: 900px) {
  .cl-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cl-feature > .cl-feature__copy { grid-column: 1 / span 6; }
  .cl-feature > .cl-lettering { grid-column: 7 / -1; }
}
.cl-feature > * { margin-block: 0; }
.cl-feature__text { max-width: 22em; }
.cl-feature__copy > * + * { margin-top: var(--s-2); }
/* The label is a touch bigger than other labels: the header menu size, 16px */
.cl-feature__copy > .is-style-label {
  /* White, like every other label on black (the footer). Text on the site carries
     no color: hierarchy comes from size and space, and the color here belongs
     to the lettering, which takes the brand colors on hover. */
  /* The Lead role (20 to 24px, Regular), the same as the clock times above it
     and the line under the Store headline: larger, but still light */
  font-size: var(--cl-size-lead); font-weight: var(--cl-regular); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
}

/* The lettering takes the same 6 columns as the caption, edge to edge, so the
   two halves mirror each other; its height follows the artwork's own shape. */
.cl-lettering {
  margin: 0; background: var(--cl-black); color: var(--cl-white);
  transition: color 0.45s var(--ease);
}
.cl-lettering svg { display: block; width: 100%; height: auto; }
/* Revealed right to left, the way Arabic is read */
.js .cl-lettering svg { clip-path: inset(0 0 0 100%); }
.js .cl-lettering.is-drawn svg { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .cl-lettering svg { clip-path: none; } }



/* ---------- Sale: a coin and a crossed-out price ----------
   A yellow coin in the corner of the photo, "20%" over "Off": the shape of
   our pin and of the coin that opens the site, and it turns in the same way
   when it comes into view. Pointing at the piece spins it once. The old price
   is crossed out with a thin coral line. Flat colors, no fades. */
.cl-card__media, .cl-product-row__media, .cl-gallery, .cl-qv__main { position: relative; }
.cl-sale {
  --coin: var(--circle-l);
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2;
  width: var(--coin); height: var(--coin); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; row-gap: 0.15em;
  text-align: center;
  background: var(--cl-yellow); color: var(--cl-black);
  pointer-events: none;
}
.cl-gallery > .cl-sale, .cl-qv__main > .cl-sale { --coin: var(--circle-xl); top: var(--s-3); right: var(--s-3); }
/* Phones: cards sit two across, so the card coin steps down one size (L to M);
   the text never goes under 14px */
@media (max-width: 599px) {
  .cl-card__media > .cl-sale, .cl-product-row__media > .cl-sale { --coin: var(--circle-m); top: var(--s-1); right: var(--s-1); }
}
/* "20%" in Semibold over "Off" in Regular, close in size, both on the same
   center line. No letter-spacing (it adds space after the last letter and
   pulls a word off center), and each line is trimmed to its cap height so the
   pair sits in the optical middle of the coin, not the middle of line boxes. */
.cl-sale__num, .cl-sale__off { display: block; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic; }
.cl-sale { row-gap: calc(var(--coin) * 0.07); }
/* Optical center: the % sign is light on its right, so "20%" carries its
   weight about 0.07em left of its box (measured on the glyphs); move it right
   by that much so it lines up with "Off" by eye, not just by box. */
/* Coin type, one rule for every coin with a figure and a word (the sale coin,
   the cart coin): the figure in Semibold at 30% of the coin, the word in
   Regular at 29%, never under 14px. Same size coin, same size type. */
.cl-sale__num, .cl-cart-coin__num { font-size: max(0.875rem, calc(var(--coin) * 0.3)); font-weight: var(--cl-semibold); font-variation-settings: "opsz" var(--cl-opsz-display); }
.cl-sale__off, .cl-cart-coin__label { font-size: max(0.875rem, calc(var(--coin) * 0.29)); font-weight: var(--cl-regular); font-variation-settings: "opsz" var(--cl-opsz-display); }
.cl-sale__num { transform: translateX(0.07em); }   /* optical: the % sign is light on its right */
.js .cl-sale { visibility: hidden; }
.js .cl-sale.is-stuck { visibility: visible; animation: cl-coin-in 0.7s var(--ease) both; }
@keyframes cl-coin-in {
  0%   { transform: perspective(400px) rotateY(90deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}
a:hover .cl-sale.is-stuck { animation: cl-coin-spin 0.8s var(--ease) both; }
@keyframes cl-coin-spin {
  0%   { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

/* The old price in coral, crossed out by a thin coral line that stays exactly
   on the text (the browser's own line-through, so it sits on the numbers).
   Coral on white is light (2.2:1), which suits a price that no longer counts;
   screen readers hear "Original price was" from WooCommerce. */
.price del, .cl-product-row__price del {
  color: var(--cl-coral); margin-right: 0.4em;
  text-decoration: line-through; text-decoration-color: var(--cl-coral);
  text-decoration-thickness: 1.5px;
}
/* On a brand color, text is black: the old price is crossed out in black */
.is-style-panel-green .cl-product-row__price del { color: var(--cl-black); text-decoration-color: var(--cl-black); }
.price ins { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cl-sale { visibility: visible; animation: none !important; }
}

/* ---------- Back to top ----------
   Near the end of a long page, a green coin turns in at the bottom right, the
   same coin as the pin and the mouse circle, with a black arrow. One click
   takes you to the top. It sits on the right, clear of the On Our Desk note. */
.cl-top {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 61;
  width: var(--circle-m); height: var(--circle-m); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--cl-green); color: var(--cl-black); cursor: pointer;
  font-size: var(--cl-size-subhead); font-weight: var(--cl-medium); line-height: 1;
  font-variation-settings: "opsz" var(--cl-opsz-display);
  transform: perspective(400px) rotateY(90deg);
  transition: transform 0.45s var(--ease), background-color 0.2s var(--ease);
}
.cl-top[hidden] { display: none; }
.cl-top.is-in { transform: perspective(400px) rotateY(0deg); }
.cl-top:hover,
.cl-top.is-on-green { background: var(--cl-black); color: var(--cl-white); }
.cl-top:hover .cl-top__arrow { transform: translateY(-0.15em); }
.cl-top__arrow { display: block; transition: transform 0.25s var(--ease); }
.cl-top:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
/* On pages long enough to have the button, the footer keeps a row of room
   under its last line, so the coin never sits on the policy links. */
html.has-top .cl-footer { padding-bottom: calc(var(--pad) + var(--circle-m) + var(--s-3)); }
/* On phones the On Our Desk note runs along the bottom: the coin sits above it
   (same breakpoint as the note's phone layout) */
@media (max-width: 599px) {
  .cl-top { transition: transform 0.45s var(--ease), background-color 0.2s var(--ease), bottom 0.4s var(--ease); }
  html.desk-open .cl-top { bottom: calc(var(--desk-h, 0px) + var(--s-2)); }
}
@media (prefers-reduced-motion: reduce) { .cl-top { transition: none; } }

/* ---------- The cart coin (store only) ----------
   A blue coin in the bottom right: the L circle, the same size as the sale
   coin on a card, with the number of pieces over the word Cart, set with the
   same coin type. Blue is the cart's own color, shown only when it holds
   something, "now and then" as the Color System asks of blue. It shows once a piece is in
   the cart, turns in like the opening coin (again each time the cart changes),
   and opens the cart note. The header bar stays the same as the site's. */
.cl-cart-coin {
  --coin: var(--circle-l);
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 62;
  width: var(--coin); height: var(--coin); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-content: center; justify-items: center; row-gap: calc(var(--coin) * 0.07);
  background: var(--cl-blue); color: var(--cl-black); cursor: pointer;
  animation: cl-coin-in 0.7s var(--ease) both;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cl-cart-coin[hidden] { display: none; }
.cl-cart-coin:hover { background: var(--cl-black); color: var(--cl-white); }
.cl-cart-coin:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
.cl-cart-coin__num, .cl-cart-coin__label { display: block; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic; }
/* Back to top sits above the cart coin when both show */
html.has-cart-coin .cl-top { bottom: calc(var(--pad) + var(--circle-l) + var(--s-2)); }
html.cl-leaving .cl-cart-coin { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cl-cart-coin { animation: none; } }