@charset "utf-8";

/*
Theme Name: Questora - Illustration & Concept Art Studio HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons
   1.5 Forms
   1.6 Live Marks & Toast
2. Preloader
3. Header
   3.1 Main Menu
   3.2 Side Panel
   3.3 Centre Logo
4. Offcanvas Menu
5. Custom Select
6. Language & Currency Pickers
7. Components
   7.1 Crumbs, Faces & Social
   7.2 Slider Controls
   7.3 Tabs, Search & Rows
   7.4 Choice Chips & Steppers
   7.5 Work Tiles
   7.6 Cards
8. Signature Rig
   8.1 Quadrant Gather
   8.2 Word Rise
   8.3 Palette Chips
   8.4 Floating Cut-Outs
9. Home 01
   9.1 Story Hero
   9.2 The Studio
   9.3 Selected Work
   9.4 The Paint-Over
   9.5 Services
   9.6 Estimate Teaser
   9.7 Clients & Voices
10. Home 02
   10.1 Concept Hero
   10.2 The Cast
   10.3 Colour Columns
   10.4 Depth Planes
   10.5 Spotlight
   10.6 Game Licensing
11. Home 03
   11.1 Book Hero
   11.2 The Shelf
   11.3 Colour Script
   11.4 Split Screen
   11.5 Open Calls
12. Studio Pages
   12.1 About
   12.2 The Roster
   12.3 Artist Profile
   12.4 Services & Process
13. Work Pages
   13.1 The Project
   13.2 Split Screen Project
14. Estimate
   14.1 Asset Rows
   14.2 The Builder
   14.3 Rate Tables
15. Licensing
   15.1 Calculator
   15.2 The Library
   15.3 Licence Page
   15.4 Bag & Checkout
16. Journal & FAQ
   16.1 The Journal
   16.2 The Article
   16.3 FAQ & Accordion
17. Contact, Account & Forms
   17.1 Contact
   17.2 Account
   17.3 Log In & Register
   17.4 Wizards
   17.5 Bare Pages
18. Subheader
19. Footer
20. Art Plates
21. Colour Script Keys
*/

/*======================
1. General
========================*/
:root {
  /* the base's own colours: ink, plum, the cream of the story pages and the grey paper bands */
  --il-ink: #303030;
  --il-ink-rgb: 48, 48, 48;
  --il-plum: #2C3A8C;
  --il-plum-rgb: 44, 58, 140;
  --il-cream: #EFE6D2;
  --il-cream-2: #FCF8EC;
  --il-white: #FFFFFF;
  /* the art's paint dabs (the logo's and the drawn icons'), the same in both themes */
  --il-coral: #FF7A66;
  --il-sun: #F7C548;
  --il-teal: #2FB7A4;
  /* semantic: white is the default (the base's own ground); [data-theme="dark"] is the dark mode */
  --il-bg: #FFFFFF;
  --il-bg-rgb: 255, 255, 255;
  --il-paper: #F7F7F7;
  --il-paper-2: #F2F2F2;
  --il-story: #EFE6D2;
  --il-surface: #FFFFFF;
  --il-raised: #F7F7F7;
  --il-plate: #F2F2F2;
  --il-heading: #303030;
  --il-heading-rgb: 48, 48, 48;
  --il-text: #565656;
  --il-muted: #6B6B6B;
  --il-line: #EBEBEB;
  --il-line-2: #F0F0F0;
  --il-field: #F4F4F4;
  --il-primary: #303030;
  --il-on-primary: #FFFFFF;
  /* plum: links, active marks, live states, the button's hover */
  --il-pop: #2C3A8C;
  --il-pop-rgb: 44, 58, 140;
  --il-on-pop: #FFFFFF;
  --il-pop-soft: #EDEEF6;
  --il-ok: #1F7A4D;
  --il-warn: #8A5A00;
  --il-shadow: 0 22px 50px rgba(48, 48, 48, 0.12);
  --il-shadow-sm: 0 10px 26px rgba(48, 48, 48, 0.08);
  --il-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --il-boing: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* type: the base's pair */
  --il-ff-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --il-ff-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --il-ff-mono: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --il-fs-h1: clamp(44px, 5.4vw, 88px);
  --il-fs-h2: clamp(32px, 3.2vw, 52px);
  --il-fs-h3: clamp(20px, 1.5vw, 25px);
  --il-fs-h4: 19px;
  --il-fs-h5: 17px;
  --il-fs-h6: 15px;
  --il-header-h: 96px;
  --il-side-w: 300px;
  /* WebGL Perspective Guides: the guide ink, the horizon ink, the paper */
  --gl-1: #2C3A8C;
  --gl-2: #303030;
  --gl-3: #F7F7F7;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --il-bg: #151215;
  --il-bg-rgb: 21, 18, 21;
  --il-paper: #1C181C;
  --il-paper-2: #221D22;
  --il-story: #221C20;
  --il-surface: #1E1A1E;
  --il-raised: #262126;
  --il-plate: #262126;
  --il-heading: #F3F3F7;
  --il-heading-rgb: 243, 243, 247;
  --il-text: rgba(243, 243, 247, 0.78);
  --il-muted: rgba(243, 243, 247, 0.64);
  --il-line: rgba(243, 243, 247, 0.13);
  --il-line-2: rgba(243, 243, 247, 0.07);
  --il-field: #262126;
  --il-primary: #F3F3F7;
  --il-on-primary: #151215;
  --il-pop: #B4B8E7;
  --il-pop-rgb: 180, 184, 231;
  --il-on-pop: #151215;
  --il-pop-soft: #323A46;
  --il-ok: #6FD3A0;
  --il-warn: #F2C46B;
  --il-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  --il-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.35);
  --gl-1: #B4B8E7;
  --gl-2: #F3F3F7;
  --gl-3: #1C181C;
  --gl-alpha: 0.45;
}
/* bands that stay dark in both themes (the footer, the plum and night bands) */
.is-night {
  --il-bg: #1E1E1E;
  --il-bg-rgb: 30, 30, 30;
  --il-paper: #262626;
  --il-surface: #262626;
  --il-raised: #2C2C2C;
  --il-plate: #2C2C2C;
  --il-heading: #FFFFFF;
  --il-heading-rgb: 255, 255, 255;
  --il-text: rgba(255, 255, 255, 0.76);
  --il-muted: rgba(255, 255, 255, 0.64);
  --il-line: rgba(255, 255, 255, 0.14);
  --il-line-2: rgba(255, 255, 255, 0.08);
  --il-field: #2C2C2C;
  --il-primary: #FFFFFF;
  --il-on-primary: #303030;
  --il-pop: #B4B8E7;
  --il-pop-rgb: 180, 184, 231;
  --il-on-pop: #1E1E1E;
  --il-pop-soft: rgba(180, 184, 231, 0.14);
  --il-ok: #6FD3A0;
  background-color: #1E1E1E;
  color: var(--il-text);
}
.is-plum {
  --il-bg: #2C3A8C;
  --il-heading: #FFFFFF;
  --il-heading-rgb: 255, 255, 255;
  --il-text: rgba(255, 255, 255, 0.84);
  --il-muted: rgba(255, 255, 255, 0.72);
  --il-line: rgba(255, 255, 255, 0.2);
  --il-line-2: rgba(255, 255, 255, 0.1);
  --il-field: rgba(255, 255, 255, 0.1);
  --il-primary: #FFFFFF;
  --il-on-primary: #2C3A8C;
  --il-pop: #E0DFFF;
  --il-on-pop: #2C3A8C;
  --il-pop-soft: rgba(255, 255, 255, 0.16);
  background-color: #2C3A8C;
  color: var(--il-text);
}
[data-theme="dark"] .is-plum {
  --il-bg: #1D265A;
  background-color: #1D265A;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--il-bg);
  color: var(--il-text);
  font-family: var(--il-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--il-ease), background-color 0.3s var(--il-ease);
}
a:hover {
  color: var(--il-pop);
}
::selection {
  background: var(--il-plum);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--il-pop);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Lato 900 titles in Title Case (giant caps only on the concept hero), EB Garamond for the
   artwork titles, quotes and the book home's display */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--il-heading);
  font-family: var(--il-ff-body);
  font-weight: 900;
  letter-spacing: -0.012em;
}
h1 {
  font-size: var(--il-fs-h1);
  line-height: 1.04;
}
h2 {
  font-size: var(--il-fs-h2);
  line-height: 1.1;
}
h3 {
  font-size: var(--il-fs-h3);
  font-weight: 700;
  line-height: 1.25;
}
h4 {
  font-size: var(--il-fs-h4);
  font-weight: 700;
  line-height: 1.3;
}
h5 {
  font-size: var(--il-fs-h5);
  font-weight: 700;
  line-height: 1.35;
}
h6 {
  font-size: var(--il-fs-h6);
  font-weight: 700;
  line-height: 1.4;
}
/* a heading at its outline level that looks like another level */
.il-h1 {
  font-size: var(--il-fs-h1);
  font-weight: 900;
  line-height: 1.04;
}
.il-h2 {
  font-size: var(--il-fs-h2);
  font-weight: 900;
  line-height: 1.1;
}
.il-h3 {
  font-size: var(--il-fs-h3);
  font-weight: 700;
  line-height: 1.25;
}
.il-h4 {
  font-size: var(--il-fs-h4);
  font-weight: 700;
  line-height: 1.3;
}
.il-h5 {
  font-size: var(--il-fs-h5);
  font-weight: 700;
  line-height: 1.35;
}
.il-h6 {
  font-size: var(--il-fs-h6);
  font-weight: 700;
  line-height: 1.4;
}
/* the serif voice: artwork titles, quotes, the book pages */
.il-serif {
  font-family: var(--il-ff-serif);
  font-weight: 500;
  letter-spacing: 0;
}
h1.il-serif,
h2.il-serif,
.il-h1.il-serif,
.il-h2.il-serif {
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.il-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--il-text);
}
/* the base's label: small Lato capitals, tracked */
.il-label {
  font-family: var(--il-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.il-mono {
  font-family: var(--il-ff-body);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.il-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.il-bg-paper {
  background-color: var(--il-paper);
}
.il-bg-story {
  background-color: var(--il-story);
}
.il-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/* the Perspective Guides canvas fills a band behind its copy */
.il-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* a band over a painting: the art under a wash from the copy side, white copy */
.il-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #1E1E1E;
  --il-heading: #FFFFFF;
  --il-heading-rgb: 255, 255, 255;
  --il-text: rgba(255, 255, 255, 0.86);
  --il-muted: rgba(255, 255, 255, 0.74);
  --il-line: rgba(255, 255, 255, 0.22);
  --il-line-2: rgba(255, 255, 255, 0.12);
  --il-primary: #FFFFFF;
  --il-on-primary: #303030;
  --il-pop: #CCCFF4;
  --il-on-pop: #303030;
  color: var(--il-text);
}
.il-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.il-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(26, 30, 50, 0.9) 0%, rgba(26, 30, 50, 0.66) 46%, rgba(26, 30, 50, 0.15) 100%);
}
.il-photo-band.is-center::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(26, 30, 50, 0.72) 0%, rgba(26, 30, 50, 0.55) 60%, rgba(26, 30, 50, 0.45) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a small tracked label, the Lato 900 title, a quiet lead */
.il-title {
  margin-bottom: 56px;
}
.il-title.is-center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.il-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--il-pop);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* three paint dabs before the label: the logo's colours */
.il-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 8px;
  background: radial-gradient(circle at 4px 4px, var(--il-coral) 3.4px, transparent 4px), radial-gradient(circle at 13px 4px, var(--il-sun) 3.4px, transparent 4px), radial-gradient(circle at 22px 4px, var(--il-teal) 3.4px, transparent 4px);
}
.il-title h2,
.il-title .il-h2 {
  margin-bottom: 18px;
}
.il-title .il-lead {
  max-width: 620px;
}
.il-title.is-center .il-lead {
  margin-inline: auto;
}
/* a title row with its action at the end */
.il-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 30px;
  margin-bottom: 52px;
}
.il-title-row .il-title {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/*----- 1.4 Buttons -----*/
/* the base's pill: an ink face with small white capitals; plum on hover; the arrow slides out and a second slides in */
.il-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 30px;
  background: var(--il-primary);
  color: var(--il-on-primary);
  font-family: var(--il-ff-body);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--il-ease), color 0.35s var(--il-ease), box-shadow 0.35s var(--il-ease), transform 0.35s var(--il-ease);
}
.il-btn i {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  font-size: 13px;
  text-align: center;
}
.il-btn i::before {
  display: inline-block;
  text-shadow: -1.6em 0 0 currentColor;
  transition: transform 0.45s var(--il-ease);
}
.il-btn:hover {
  background: var(--il-plum);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--il-plum-rgb), 0.28);
  transform: translateY(-2px);
}
.il-btn:hover i::before {
  transform: translateX(1.6em);
}
/* tonal: a soft face for the second action (no outline) */
.il-btn.is-tonal {
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-heading);
}
.il-btn.is-tonal:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-btn.is-light {
  background: #FFFFFF;
  color: #303030;
}
.il-btn.is-light:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-btn.is-plum {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-btn.is-plum:hover {
  background: #303030;
  box-shadow: 0 14px 30px rgba(48, 48, 48, 0.25);
}
[data-theme="dark"] .il-btn.is-plum:hover {
  background: #FFFFFF;
  color: #303030;
}
/* small: only inside compact cards */
.il-btn.is-sm {
  min-height: 40px;
  padding: 0 20px;
  font-size: 11.5px;
}
.il-btn.is-block {
  width: 100%;
}
.il-btn:disabled,
.il-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* a text link with the arrow */
.il-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--il-heading);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-link i {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  color: var(--il-pop);
}
.il-link i::before {
  display: inline-block;
  text-shadow: -1.6em 0 0 currentColor;
  transition: transform 0.45s var(--il-ease);
}
.il-link:hover i::before {
  transform: translateX(1.6em);
}
.il-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/*----- 1.5 Forms -----*/
/* every field: a label, an icon and a placeholder; tonal faces, a plum line under the field in focus */
.il-field {
  position: relative;
  margin-bottom: 22px;
}
.il-field > label,
.il-field > .field-label {
  display: block;
  margin-bottom: 9px;
  color: var(--il-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-input {
  position: relative;
}
.il-input > i {
  position: absolute;
  top: 50%;
  left: 18px;
  z-index: 2;
  color: var(--il-pop);
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.il-input.is-area > i {
  top: 22px;
  transform: none;
}
.il-input input,
.il-input textarea,
.il-input select,
.il-control {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0 20px 0 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  background: var(--il-field);
  color: var(--il-heading);
  font-family: var(--il-ff-body);
  font-size: 15.5px;
  outline: none;
  transition: border-color 0.3s var(--il-ease), background-color 0.3s var(--il-ease);
}
.il-input textarea {
  min-height: 150px;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}
.il-input input::placeholder,
.il-input textarea::placeholder {
  color: var(--il-muted);
  opacity: 1;
}
.il-input input:focus,
.il-input textarea:focus,
.il-input select:focus {
  border-bottom-color: var(--il-pop);
}
.il-input input[type="file"] {
  padding-top: 15px;
}
.il-input input[type="date"] {
  padding-right: 14px;
}
[data-theme="dark"] .il-input input[type="date"] {
  color-scheme: dark;
}
.il-field .field-note {
  margin-top: 8px;
  color: var(--il-muted);
  font-size: 13.5px;
}
.il-field.is-error .il-input input,
.il-field.is-error .il-input textarea {
  border-bottom-color: #C0392B;
}
.il-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--il-text);
  font-size: 15px;
  cursor: pointer;
}
.il-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--il-plum);
}
[data-theme="dark"] .il-check input {
  accent-color: #B4B8E7;
}
.form-status {
  margin-top: 16px;
  font-size: 15px;
}
.form-status:empty {
  display: none;
}
.form-status.is-ok {
  color: var(--il-ok);
}
.form-status.is-error {
  color: #C0392B;
}
[data-theme="dark"] .form-status.is-error {
  color: #FF8F80;
}

/*----- 1.6 Live Marks & Toast -----*/
/* the live dot: green while open, grey when closed */
.il-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--il-muted);
}
[data-state="open"] .il-dot {
  background: #2BB673;
  box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.5);
  animation: il-pulse 2.2s infinite;
}
@keyframes il-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(43, 182, 115, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(43, 182, 115, 0);
  }
}
.il-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--il-heading);
  font-size: 14.5px;
  font-weight: 700;
}
.il-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 30px;
  background: #303030;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.35s var(--il-ease), transform 0.35s var(--il-ease), visibility 0.35s;
}
.il-toast i {
  color: #CCCFF4;
}
.il-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-state="open"] .il-dot {
    animation: none;
  }
}

/*======================
2. Preloader
========================*/
/* Layer Stack: five sheets of the mark - sketch, flats, shadows, light, effects - fall one by one onto a tilted
   stack while the layers panel ticks; the stack flattens into the finished mark, the word rises, the panel lifts. */
.il-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}
.js .il-preloader {
  pointer-events: auto;
}
.no-js .il-preloader,
.il-preloader.is-done {
  display: none;
}
.pre-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--il-story);
  perspective: 1100px;
}
.pre-stage {
  position: relative;
  width: 380px;
  height: 305px;
  transform-style: preserve-3d;
}
.pre-sheet {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* each sheet: a pale transparent pane carrying its layer, like a layer lifted out of the paint program */
.pre-sheet::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(44, 58, 140, 0.12), 0 18px 34px rgba(44, 58, 140, 0.12);
  transition: opacity 0.4s ease;
}
.il-preloader.is-flat .pre-sheet::before {
  opacity: 0;
}
.pre-sheet img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.pre-word {
  overflow: hidden;
  padding: 0.12em 0.2em;
  margin: -0.12em -0.2em;
}
.pre-word span {
  display: block;
  color: #303030;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  transform: translateY(110%);
}
/* the layers panel: five rows, an eye on each, ticking as its sheet lands */
.pre-layers {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.pre-layers li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 20px;
  background: rgba(44, 58, 140, 0.07);
  color: rgba(48, 48, 48, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pre-layers li i {
  font-size: 10px;
  opacity: 0.35;
}
.pre-layers li.is-on {
  background: #2C3A8C;
  color: #FFFFFF;
}
.pre-layers li.is-on i {
  opacity: 1;
}
[data-theme="dark"] .pre-panel {
  background: #1E191D;
}
[data-theme="dark"] .pre-word span {
  color: #FFFFFF;
}
[data-theme="dark"] .pre-layers li {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .pre-sheet::before {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 34px rgba(0, 0, 0, 0.3);
}

/*======================
3. Header
========================*/
/* The base's white bar: the palette logo, the menu in small tracked capitals, the round icons and the ink pill.
   Four layouts: bar (inner pages), over (Home 01: laid over the cream hero, white once it sticks), side (Home 02:
   the base's white side panel from 1200 up) and center (Home 03: the logo between the two halves of the menu). */
.il-header {
  position: relative;
  z-index: 1000;
}
.header-bar {
  background: var(--il-bg);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-bar .container-fluid {
  padding-inline: 44px;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--il-header-h);
  transition: height 0.4s var(--il-ease);
}
.il-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.il-logo img {
  height: 42px;
  width: auto;
}
.il-logo .logo-light {
  display: none;
}
[data-theme="dark"] .il-logo .logo-light {
  display: block;
}
[data-theme="dark"] .il-logo .logo-main {
  display: none;
}
.bar-row > .il-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.hd-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--il-heading);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-pop);
}
.header-icon .count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--il-plum);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
/* the light / dark switch: the moon in the light theme, the sun in the dark */
.il-theme-toggle .ti-sun {
  display: none;
}
[data-theme="dark"] .il-theme-toggle .ti-sun {
  display: inline-block;
}
[data-theme="dark"] .il-theme-toggle .ti-moon {
  display: none;
}
.hd-cta {
  margin-inline-start: 10px;
}
/* the language, the currency and the wishlist sit in the bar on wide screens; the offcanvas carries them below */
.hd-actions .il-lang,
.hd-actions .il-cur,
.hd-actions .is-wish {
  display: none;
}
/* the base's menu mark: three lines, the middle one shorter */
.il-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-inline-start: 4px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.il-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--il-heading);
  transition: width 0.3s var(--il-ease), background-color 0.3s ease;
}
.il-menu-toggle span:nth-child(2) {
  width: 16px;
}
.il-menu-toggle:hover span {
  background: var(--il-pop);
}
.il-menu-toggle:hover span:nth-child(2) {
  width: 24px;
}
/* the bar laid over Home 01's cream hero */
.il-header.is-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.il-header.is-over .header-bar {
  background: transparent;
}
/* stuck to the top once the page scrolls */
.il-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: il-drop 0.5s var(--il-ease);
}
.il-header.is-fixed .header-bar,
.il-header.is-over.is-fixed .header-bar {
  background: var(--il-bg);
  box-shadow: 0 10px 30px rgba(48, 48, 48, 0.08);
}
.il-header.is-fixed .bar-row {
  height: 78px;
}
@keyframes il-drop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}

/*----- 3.1 Main Menu -----*/
/* small tracked Lato capitals; plum marks the hover and the current page - never an underline */
.il-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-nav li {
  position: relative;
}
.il-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 36px 12px;
  color: var(--il-heading);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.il-header.is-fixed .il-nav > ul > li > a {
  padding-block: 27px;
}
.il-nav > ul > li > a i {
  font-size: 9px;
  opacity: 0.55;
}
.il-nav > ul > li:hover > a,
.il-nav > ul > li.active > a {
  color: var(--il-pop);
}
.il-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -6px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-radius: 6px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--il-ease), transform 0.35s var(--il-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.il-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.il-nav li:hover > .sub-menu,
.il-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.il-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 26px;
  color: var(--il-text);
  font-size: 15px;
  white-space: nowrap;
  transition: color 0.25s ease, padding 0.3s var(--il-ease);
}
.il-nav .sub-menu a i {
  font-size: 10px;
  opacity: 0.6;
}
.il-nav .sub-menu li:hover > a,
.il-nav .sub-menu li.active > a {
  color: var(--il-pop);
  padding-inline-start: 32px;
}
/* the third level opens to the right */
.il-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
  margin-left: 8px;
}
.il-nav .sub-menu .sub-menu::before {
  top: 0;
  bottom: 0;
  left: -10px;
  right: auto;
  width: 10px;
  height: auto;
}
/* Home: a mega panel with the three homes */
.il-nav li.has-mega {
  position: static;
}
.il-nav .has-mega > a {
  position: relative;
}
.il-nav .mega-menu {
  position: absolute;
  top: calc(100% - 22px);
  left: 50%;
  z-index: 50;
  width: min(880px, 92vw);
  padding: 26px;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity 0.3s var(--il-ease), transform 0.35s var(--il-ease), visibility 0.3s;
}
.il-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 26px;
}
.il-nav .has-mega:hover > .mega-menu,
.il-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.header-style-side .mega-menu,
.header-style-center .mega-menu {
  display: none;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mega-card {
  display: block;
  color: var(--il-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 6px;
  background: var(--il-paper);
}
.mega-card .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s var(--il-ease);
}
.mega-card:hover .shot img {
  transform: scale(1.05);
}
.mega-meta {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}
.mega-meta small {
  color: var(--il-pop);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mega-meta b {
  font-size: 16px;
}
.mega-card.is-current .mega-meta b,
.mega-card:hover .mega-meta b {
  color: var(--il-pop);
}

/*----- 3.2 Side Panel -----*/
/* Home 02: the base's white panel down the left from 1200 up - the logo, the menu stacked, the studio line, the
   switches; menus fly out to the right. Below 1200 the bar stands in for it. */
.header-style-side .side-inner {
  display: none;
}
.header-style-side .side-bar .bar-row {
  justify-content: space-between;
}

/*----- 3.3 Centre Logo -----*/
/* Home 03: the menu split either side of the logo, the switches at the end */
.header-style-center .bar-row {
  justify-content: space-between;
}
.header-style-center .il-nav {
  flex: 1 1 0;
  display: flex;
}
.header-style-center .il-nav.is-left {
  justify-content: flex-end;
}
.header-style-center .il-nav.is-right {
  justify-content: flex-start;
}
.header-style-center .il-logo.is-center {
  margin-inline: 30px;
}
.header-style-center .il-nav.is-right .sub-menu {
  left: -6px;
}

/*======================
4. Offcanvas Menu
========================*/
/* a black column from the right, framed like the header: the logo, the live queue, every page by group, contact */
.il-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  border-inline-start: 1px solid var(--il-line);
  background: var(--il-bg);
  transform: translateX(105%);
  transition: transform 0.6s var(--il-ease);
  overflow-y: auto;
}
.il-offcanvas.open {
  transform: none;
}
.il-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.il-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--il-line);
}
.offcanvas-head .il-logo img {
  height: 38px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.1);
  color: var(--il-heading);
  font-size: 18px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--il-boing);
}
.offcanvas-close:hover {
  background: var(--il-sun);
  color: #000000;
  transform: rotate(90deg);
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--il-line);
  color: var(--il-heading);
  font-family: var(--il-ff-mono);
  font-size: 13px;
}
.offcanvas-nav {
  flex: 1;
  padding: 10px 28px 26px;
}
.oc-group {
  border-bottom: 1px solid var(--il-line-2);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  color: var(--il-heading);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}
.oc-group > button i {
  color: var(--il-pop);
  font-size: 13px;
  transition: transform 0.35s var(--il-boing);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 14px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--il-text);
  font-size: 16px;
}
.oc-group ul a::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--il-line-2);
  transition: background-color 0.3s ease;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  color: var(--il-heading);
}
.oc-group ul a:hover::before,
.oc-group ul a.is-current::before {
  background: var(--il-pop);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px 30px;
  border-top: 1px solid var(--il-line);
}
.offcanvas-foot .label {
  color: var(--il-pop);
  font-family: var(--il-ff-mono);
  font-size: 13px;
}
.oc-phone {
  color: var(--il-heading);
  font-size: 24px;
  font-weight: 600;
}
.oc-mail {
  color: var(--il-text);
  font-family: var(--il-ff-mono);
  font-size: 14px;
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.il-select {
  position: relative;
}
.il-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.il-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--il-field);
  font-size: 15px;
  text-align: left;
  color: var(--il-heading);
  transition: border-color 0.3s var(--il-ease);
}
.il-select.is-open .select-button,
.il-select .select-button:hover {
  border-color: var(--il-pop);
}
.il-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.il-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--il-pop);
  transition: transform 0.35s var(--il-ease);
}
.il-select.is-open .select-button i {
  transform: rotate(180deg);
}
.il-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--il-surface);
  border-top: 2px solid var(--il-pop);
  box-shadow: var(--il-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--il-ease), transform 0.3s var(--il-ease), visibility 0.3s;
}
.il-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--il-pop);
  transform: translateY(-10px);
}
.il-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.il-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--il-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--il-ease), color 0.2s var(--il-ease);
}
.il-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--il-pop);
}
.il-select .select-option .option-meta.is-none {
  color: var(--il-muted);
}
.il-select .select-option.is-focused,
.il-select .select-option:hover {
  background-color: var(--il-plate);
}
.il-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.il-select .select-option.is-selected {
  color: var(--il-pop);
}
.il-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--il-pop);
}
.il-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--il-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language & Currency Pickers
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. Tonal faces, framed menus. */
.il-lang,
.il-cur {
  position: relative;
  flex-shrink: 0;
}
.il-lang .lang-btn,
.il-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(var(--il-heading-rgb), 0.08);
  color: var(--il-heading);
  font-family: var(--il-ff-mono);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.il-lang .lang-btn:hover,
.il-lang .lang-btn[aria-expanded="true"],
.il-cur .cur-btn:hover,
.il-cur .cur-btn[aria-expanded="true"] {
  background: var(--il-primary);
  color: var(--il-on-primary);
}
.il-lang .lang-btn > i,
.il-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.il-lang .lang-btn[aria-expanded="true"] > i,
.il-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.il-cur .cur-btn b {
  font-weight: 500;
  color: var(--il-pop);
}
.il-cur .cur-btn:hover b,
.il-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.il-lang .flag {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}
.il-lang.is-up .lang-btn,
.il-cur.is-up .cur-btn {
  height: 44px;
  padding: 0 15px;
}
.il-lang .lang-menu,
.il-cur .cur-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border: 1px solid var(--il-line);
  background: var(--il-bg);
  box-shadow: var(--il-shadow);
  font-family: var(--il-ff-body);
  text-align: start;
  white-space: normal;
}
.il-cur .cur-menu {
  width: 232px;
}
.il-lang.is-up .lang-menu,
.il-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.il-lang .lang-menu[hidden],
.il-cur .cur-menu[hidden] {
  display: none;
}
.il-lang .lang-group,
.il-cur .lang-group {
  margin: 6px 10px;
  color: var(--il-muted);
  font-family: var(--il-ff-mono);
  font-size: 12px;
}
.il-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--il-line-2);
}
.il-lang .lang-item,
.il-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--il-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.il-lang .lang-item small {
  margin-inline-start: auto;
  color: var(--il-muted);
  font-family: var(--il-ff-mono);
  font-size: 11.5px;
}
.il-lang .lang-item i,
.il-cur .cur-item i {
  width: 12px;
  font-size: 11px;
  color: var(--il-pop);
  opacity: 0;
}
.il-cur .cur-item i {
  margin-inline-start: auto;
}
.il-cur .cur-item b {
  width: 18px;
  color: var(--il-pop);
  font-family: var(--il-ff-mono);
  font-weight: 500;
}
.il-lang .lang-item:hover,
.il-lang .lang-item[aria-pressed="true"],
.il-cur .cur-item:hover,
.il-cur .cur-item[aria-pressed="true"] {
  background: rgba(var(--il-heading-rgb), 0.08);
}
.il-lang .lang-item[aria-pressed="true"] i,
.il-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}
.il-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--il-line-2);
  color: var(--il-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/*======================
7. Components
========================*/
/*----- 7.1 Crumbs, Faces & Social -----*/
.il-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-crumbs i {
  font-size: 8px;
  opacity: 0.6;
}
.il-crumbs a:hover {
  color: var(--il-pop);
}
.il-crumbs span {
  color: var(--il-pop);
}
/* a round portrait: people are round */
.il-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
/* the avatar group: overlapping faces, a +N bubble, two short lines */
.il-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}
.il-avatars.is-centered {
  margin-inline: auto;
}
.il-avatars .faces {
  display: flex;
  align-items: center;
}
.il-avatars .faces img,
.il-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-inline-start: -12px;
  border: 3px solid var(--il-bg);
  border-radius: 50%;
  object-fit: cover;
}
.il-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.il-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--il-plum);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
}
.il-avatars .txt {
  display: flex;
  flex-direction: column;
  color: var(--il-text);
  font-size: 14px;
  line-height: 1.45;
}
.il-avatars .txt b {
  color: var(--il-heading);
  font-size: 15px;
}
.il-social {
  display: flex;
  gap: 8px;
}
.il-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--il-ease);
}
.il-social a:hover {
  background: var(--il-plum);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.il-back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--il-primary);
  color: var(--il-on-primary);
  box-shadow: var(--il-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s var(--il-ease), visibility 0.35s, background-color 0.3s ease;
}
.il-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.il-back-top:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
/* an illustrated icon: line art with a colour blob behind it */
.il-ico {
  display: inline-flex;
  width: 76px;
  height: 76px;
}
.il-ico img {
  width: 100%;
  height: 100%;
}
[data-theme="dark"] .il-ico img {
  filter: invert(1) hue-rotate(180deg);
}

/*----- 7.2 Slider Controls -----*/
.il-arrows {
  display: flex;
  gap: 10px;
}
.il-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-heading);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--il-ease);
}
.il-arrow:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-arrow.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* dashes: the base's pagination */
.il-dashes {
  display: flex;
  gap: 8px;
}
.il-dashes .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  margin: 0 !important;
  border-radius: 2px;
  background: rgba(var(--il-heading-rgb), 0.25);
  opacity: 1;
  transition: width 0.4s var(--il-ease), background-color 0.3s ease;
}
.il-dashes .swiper-pagination-bullet-active {
  width: 44px;
  background: var(--il-pop);
}

/*----- 7.3 Tabs, Search & Rows -----*/
/* the base's filter row: small tracked capitals; plum and a paint dab mark the current one */
.il-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
}
.il-tabs button {
  position: relative;
  padding: 12px 15px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--il-heading);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.il-tabs button small {
  margin-inline-start: 6px;
  color: var(--il-muted);
  font-weight: 700;
}
.il-tabs button:hover {
  color: var(--il-pop);
}
.il-tabs button.is-active {
  background: var(--il-pop-soft);
  color: var(--il-pop);
}
.il-search {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.il-search i {
  position: absolute;
  top: 50%;
  left: 20px;
  color: var(--il-pop);
  transform: translateY(-50%);
  pointer-events: none;
}
.il-search input {
  width: 100%;
  height: 52px;
  padding: 0 20px 0 48px;
  border: 0;
  border-radius: 30px;
  background: var(--il-field);
  color: var(--il-heading);
  font-size: 15px;
  outline: none;
}
.il-search input::placeholder {
  color: var(--il-muted);
  opacity: 1;
}
.il-search input:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--il-pop-rgb), 0.45);
}
.il-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 40px;
}
.il-empty {
  padding: 50px 20px;
  color: var(--il-muted);
  text-align: center;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
/* label / value rows: the base's info box (a rule under each row) */
.il-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--il-line);
  font-size: 15px;
}
.il-rows li span {
  color: var(--il-muted);
}
.il-rows li b {
  color: var(--il-heading);
  font-weight: 700;
  text-align: end;
}
.il-rows li a {
  color: var(--il-heading);
}
.il-rows li a:hover {
  color: var(--il-pop);
}
.il-rows.is-tight li {
  padding: 8px 0;
  font-size: 14.5px;
}
/* a panel: the white card the forms and summaries sit in */
.il-panel {
  padding: 40px;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
}
.il-panel.is-paper {
  background: var(--il-paper);
  box-shadow: none;
}
.il-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.il-pagination a,
.il-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.06);
  color: var(--il-heading);
  font-weight: 900;
}
.il-pagination .is-current,
.il-pagination a:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}

/*----- 7.4 Choice Chips & Steppers -----*/
/* radio and check choices drawn as tonal chips (the input itself is visually hidden) */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--il-field);
  color: var(--il-heading);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice b {
  font-size: 15px;
  font-weight: 700;
}
.chip-choice small {
  color: var(--il-muted);
  font-size: 13px;
  line-height: 1.4;
}
.chip-choice:hover {
  box-shadow: inset 0 0 0 2px rgba(var(--il-pop-rgb), 0.25);
}
.chip-choice.is-checked {
  background: var(--il-pop-soft);
  box-shadow: inset 0 0 0 2px var(--il-pop);
}
.chip-choice.is-checked b {
  color: var(--il-pop);
}
.chip-choice:focus-within {
  outline: 2px solid var(--il-pop);
  outline-offset: 2px;
}
.chip-group.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* a quantity stepper: minus, the count, plus */
.il-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 30px;
  background: var(--il-field);
}
.il-stepper button {
  width: 44px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--il-heading);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.il-stepper button:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-stepper input {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--il-heading);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.il-stepper input::-webkit-outer-spin-button,
.il-stepper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/*----- 7.5 Work Tiles -----*/
/* the base's masonry home: every piece on its own flat plate, the tiles set edge to edge */
.il-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 22vw;
  grid-auto-flow: dense;
}
.il-tiles.is-five {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 17.6vw;
}
.work-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--il-plate);
}
.work-tile.is-big {
  grid-column: span 2;
  grid-row: span 2;
}
.work-tile.is-tall {
  grid-row: span 2;
}
.work-tile.is-wide {
  grid-column: span 2;
}
.work-tile > a {
  position: absolute;
  inset: 0;
  display: block;
}
.work-tile .il-media {
  position: absolute;
  inset: 0;
}
.work-tile .il-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.9s var(--il-ease);
}
.work-tile.is-cover .il-media img {
  object-fit: cover;
}
.work-tile:hover .il-media img {
  transform: scale(1.06);
}
/* the caption: title in the serif, artist and project under it, rising on hover */
.tile-cap {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.tile-cap b {
  padding: 6px 12px 4px;
  border-radius: 4px 4px 4px 0;
  background: var(--il-bg);
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--il-ease), transform 0.5s var(--il-ease);
}
.tile-cap small {
  padding: 4px 12px 6px;
  border-radius: 0 0 4px 4px;
  background: var(--il-bg);
  color: var(--il-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--il-ease) 0.05s, transform 0.5s var(--il-ease) 0.05s;
}
.work-tile:hover .tile-cap b,
.work-tile:hover .tile-cap small,
.work-tile:focus-within .tile-cap b,
.work-tile:focus-within .tile-cap small {
  opacity: 1;
  transform: none;
}

/*----- 7.6 Cards -----*/
/* an artist: the round portrait, the name, the role, the styles and the week they are free */
.artist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px 30px 30px;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
  text-align: center;
  transition: transform 0.45s var(--il-ease), box-shadow 0.45s var(--il-ease);
}
.artist-card:hover {
  box-shadow: var(--il-shadow);
  transform: translateY(-6px);
}
.artist-card .ac-face {
  position: relative;
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 22px;
}
.artist-card .ac-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.6s var(--il-ease);
}
.artist-card:hover .ac-face img {
  transform: scale(1.04);
}
/* the artist's own paint dabs round the portrait */
.artist-card .ac-face .ac-free {
  position: absolute;
  right: 4px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--il-bg);
  box-shadow: var(--il-shadow-sm);
  color: var(--il-heading);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}
.artist-card h3 {
  margin-bottom: 4px;
}
.artist-card h3 a:hover {
  color: var(--il-pop);
}
.artist-card .ac-role {
  margin-bottom: 18px;
  color: var(--il-pop);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.artist-card .il-rows {
  margin-top: auto;
  text-align: start;
}
.artist-card .ac-works {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.artist-card .ac-works span {
  overflow: hidden;
  width: 54px;
  height: 54px;
  border-radius: 6px;
}
.artist-card .ac-works img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a project: the cover on its plate, the client's mark, the kind and the year */
.project-card {
  display: block;
  height: 100%;
  color: var(--il-heading);
}
.project-card .pc-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
}
.project-card .pc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--il-ease);
}
.project-card.is-contain .pc-media img {
  object-fit: contain;
}
.project-card:hover .pc-media img {
  transform: scale(1.05);
}
.project-card .pc-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
}
.project-card .pc-body h3 {
  font-family: var(--il-ff-serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0;
}
.project-card:hover h3 {
  color: var(--il-pop);
}
.project-card .pc-body p {
  margin: 4px 0 0;
  color: var(--il-muted);
  font-size: 14px;
}
.project-card .pc-client {
  flex-shrink: 0;
  height: 24px;
  width: auto;
  opacity: 0.8;
}
[data-theme="dark"] .project-card .pc-client,
.is-night .project-card .pc-client {
  filter: invert(1);
}
/* a journal post */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post-card .post-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 6px;
  background: var(--il-plate);
}
.post-card .post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--il-ease);
}
.post-card:hover .post-media img {
  transform: scale(1.05);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 22px 0 10px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-meta a {
  color: var(--il-pop);
}
.post-card h3 a:hover {
  color: var(--il-pop);
}
.post-card .post-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--il-heading);
  font-size: 14.5px;
  font-weight: 700;
}
.post-card .post-by img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
/* a client's word: the quote in the serif, the client's mark and the person */
.quote {
  margin: 0;
}
.quote blockquote {
  margin: 0 0 30px;
}
.quote blockquote p {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.35;
}
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.quote figcaption img {
  height: 26px;
  width: auto;
}
[data-theme="dark"] .quote figcaption img {
  filter: invert(1);
}
.quote figcaption span {
  display: flex;
  flex-direction: column;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--il-line);
  line-height: 1.4;
}
.quote figcaption b {
  color: var(--il-heading);
}
.quote figcaption small {
  color: var(--il-muted);
  font-size: 13.5px;
}
/* client marks in a row */
.il-clients {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 30px;
}
.il-clients img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.il-clients a:hover img {
  opacity: 1;
}
[data-theme="dark"] .il-clients img {
  filter: invert(1);
}
/* progress bars (the base's game home): a label, a figure, a thin bar */
.il-bars li {
  margin-bottom: 22px;
}
.il-bars .bar-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--il-heading);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-bars .bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--il-heading-rgb), 0.1);
}
.il-bars .bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--il-pop);
  transition: width 1.2s var(--il-ease);
}

/*======================
8. Signature Rig
========================*/
/*----- 8.1 Quadrant Gather -----*/
/* an artwork arrives as four quarters sliding in from its corners; they lock together and hand back to the image.
   The quarters are drawn by main.js as copies of the image clipped to each quarter. */
.il-media {
  position: relative;
  overflow: hidden;
}
.il-media .q-piece {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  will-change: transform;
}
.il-media .q-piece.is-1 {
  clip-path: inset(0 50% 50% 0);
}
.il-media .q-piece.is-2 {
  clip-path: inset(0 0 50% 50%);
}
.il-media .q-piece.is-3 {
  clip-path: inset(50% 50% 0 0);
}
.il-media .q-piece.is-4 {
  clip-path: inset(50% 0 0 50%);
}
/* the seams show for a moment while the quarters travel */
.il-media.is-gathering::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(var(--il-bg), var(--il-bg)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--il-bg), var(--il-bg)) 0 50% / 100% 2px no-repeat;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.il-media.is-locked::after {
  opacity: 0;
}

/*----- 8.2 Word Rise -----*/
/* R3: a title's words rise one after another from behind their own mask; the mask is padded on every side, so no
   ascender, descender or accent is cut */
.il-split .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0.08em 0.16em;
  margin: -0.12em -0.08em -0.16em;
  vertical-align: top;
}
.il-split .wi {
  display: inline-block;
}

/*----- 8.3 Palette Chips -----*/
/* hover: the piece's three key colours (from the data) slide out as round paint dabs, each with its hex */
.il-pal {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.il-pal .sw {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.35s var(--il-ease), transform 0.5s var(--il-boing);
}
.il-pal .sw:nth-child(2) {
  transition-delay: 0.06s;
}
.il-pal .sw:nth-child(3) {
  transition-delay: 0.12s;
}
.il-pal .sw i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 14px rgba(0, 0, 0, 0.18);
}
.il-pal .sw small {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #303030;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}
.has-pal:hover .il-pal .sw,
.has-pal:focus-within .il-pal .sw {
  opacity: 1;
  transform: none;
}
.has-pal:hover .il-pal .sw small {
  opacity: 1;
}

/*----- 8.4 Floating Cut-Outs -----*/
/* the base's floating objects round a character: each bobs on its own slow sine and leans from the pointer */
.il-float {
  will-change: transform;
}
.il-dots span {
  position: absolute;
  z-index: 0;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
}

/*======================
9. Home 01
========================*/
/*----- 9.1 Story Hero -----*/
/* the base's storytelling home: the cream ground, a character standing on its shadow, cut-outs and soft dots
   floating round it, the title on set lines; three slides with arrows, a counter and dashes */
.il-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.il-hero.is-story {
  background: var(--il-story);
}
.hero-swiper {
  position: relative;
  z-index: 1;
}
.hero-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: max(760px, 100vh);
  padding: calc(var(--il-header-h) + 30px) 0 130px;
}
.hero-copy .il-eyebrow {
  margin-bottom: 22px;
}
.hero-title {
  margin-bottom: 24px;
  font-size: clamp(44px, 4.4vw, 78px);
  line-height: 1.06;
}
.hero-copy .il-lead {
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-copy .il-avatars {
  margin-top: 40px;
}
.hero-art {
  position: relative;
  height: 600px;
}
.ha-hero {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 2;
  max-height: 470px;
  width: auto;
  transform: translateX(-50%);
}
.ha-hero.is-monster {
  max-height: 500px;
}
.ha-shadow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 1;
  width: 72%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(44, 58, 140, 0.2), rgba(44, 58, 140, 0));
  transform: translateX(-50%);
}
.hero-bit {
  position: absolute;
  z-index: 3;
  width: auto;
}
.hero-bit.hb-1 {
  top: 6%;
  left: 4%;
  max-width: 110px;
  max-height: 110px;
  rotate: -18deg;
}
.hero-bit.hb-2 {
  top: 2%;
  right: 6%;
  max-width: 130px;
  max-height: 120px;
}
.hero-bit.hb-3 {
  bottom: 34%;
  left: -4%;
  max-width: 100px;
  max-height: 110px;
}
.hero-bit.hb-4 {
  right: -2%;
  bottom: 30%;
  max-width: 120px;
  max-height: 110px;
  rotate: 12deg;
}
/* the base's soft dots: a few blurred, most crisp */
.il-hero .il-dots .d1 {
  top: 18%;
  left: 8%;
  background: var(--il-teal);
}
.il-hero .il-dots .d2 {
  top: 12%;
  left: 46%;
  background: var(--il-coral);
  filter: blur(1px);
}
.il-hero .il-dots .d3 {
  top: 30%;
  right: 4%;
  width: 22px;
  height: 22px;
  background: #2E6E97;
}
.il-hero .il-dots .d4 {
  bottom: 22%;
  left: 40%;
  background: #E8913A;
}
.il-hero .il-dots .d5 {
  bottom: 14%;
  right: 12%;
  width: 70px;
  height: 70px;
  background: rgba(247, 197, 72, 0.35);
  filter: blur(10px);
}
.il-hero .il-dots .d6 {
  top: 58%;
  left: 3%;
  width: 10px;
  height: 10px;
  background: var(--il-plum);
}
.il-hero .il-dots .d7 {
  top: 8%;
  right: 30%;
  width: 48px;
  height: 48px;
  background: rgba(47, 183, 164, 0.3);
  filter: blur(8px);
}
.il-hero .il-dots .d8 {
  bottom: 40%;
  left: 52%;
  width: 9px;
  height: 9px;
  background: #4D7A3A;
}
.hero-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 5;
}
.hero-ui-row {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hero-count {
  margin: 0;
  white-space: nowrap;
  color: var(--il-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hero-count b {
  color: var(--il-heading);
}

/*----- 9.2 The Studio -----*/
.intro-rows {
  margin-bottom: 36px;
}
.intro-btns {
  gap: 26px;
}
/* three plates pinned up, overlapping, each on its own colour */
.intro-board {
  position: relative;
  height: 600px;
}
.intro-board .il-plate {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--il-shadow);
}
.intro-board .il-plate .il-media {
  display: block;
  width: 100%;
  height: 100%;
}
.intro-board .il-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.intro-board .ib-1 {
  top: 0;
  left: 4%;
  width: 46%;
  height: 72%;
}
.intro-board .ib-2 {
  top: 12%;
  right: 0;
  width: 44%;
  height: 46%;
}
.intro-board .ib-3 {
  right: 10%;
  bottom: 0;
  width: 52%;
  height: 40%;
}
.intro-board .ib-3 img {
  object-fit: cover;
}
.intro-board .ib-bit {
  position: absolute;
  left: 0;
  bottom: 6%;
  z-index: 4;
  width: 150px;
}

/*----- 9.3 Selected Work -----*/
.il-work-sec .il-title-row {
  align-items: center;
}
.work-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 50px 0 0;
}
.work-more p {
  margin: 0;
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 24px;
}

/*----- 9.4 The Paint-Over -----*/
/* H1 moment: The Wanderer is painted over its grey blockout stroke by stroke as the section travels; the layers
   panel ticks each layer's eye and its share as it lands (scrubbed, never pinned) */
.po-layers li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--il-line);
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
.po-layers li.is-on {
  opacity: 1;
}
.pl-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-muted);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.po-layers li.is-on .pl-eye {
  background: var(--il-plum);
  color: #FFFFFF;
}
.pl-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.35;
}
.pl-name b {
  color: var(--il-heading);
}
.pl-name small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.pl-pct {
  color: var(--il-heading);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.po-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1600 / 917;
  border-radius: 8px;
  background: #3A3F48;
  box-shadow: var(--il-shadow);
}
.po-stage .po-final,
.po-stage .po-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.po-stage .po-canvas {
  display: none;
}
.po-stage.is-live .po-canvas {
  display: block;
}
.po-stage.is-live .po-final {
  visibility: hidden;
}
.po-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  color: #565656;
  font-size: 13px;
}
.po-tag b {
  color: #303030;
  font-family: var(--il-ff-serif);
  font-size: 16px;
  font-weight: 500;
}

/*----- 9.5 Services -----*/
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 36px 34px;
  border-radius: 8px;
  background: var(--il-paper);
  transition: background-color 0.4s var(--il-ease), box-shadow 0.4s var(--il-ease), transform 0.4s var(--il-ease);
}
.svc-card:hover {
  background: var(--il-surface);
  box-shadow: var(--il-shadow);
  transform: translateY(-6px);
}
.svc-card .il-ico {
  margin-bottom: 22px;
  transition: transform 0.5s var(--il-boing);
}
.svc-card:hover .il-ico {
  transform: rotate(-8deg) scale(1.06);
}
.svc-card h3 {
  margin-bottom: 10px;
}
.svc-card .il-rows {
  margin: 8px 0 24px;
}
.svc-card .il-link {
  margin-top: auto;
}

/*----- 9.6 Estimate Teaser -----*/
/* the character-design home's plum band with its scatter of small crosses */
.il-est-teaser {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.5px, transparent 2px);
  background-size: 34px 34px;
}
.est-mini {
  padding: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.est-mini .est-row {
  grid-template-columns: 1fr auto auto;
}
.est-mini .er-cx {
  display: none;
}
.est-mini .il-ico {
  filter: none;
}
.est-turn {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.est-turn legend {
  margin-bottom: 12px;
  color: var(--il-heading);
}
.est-turn .chip-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.est-mini-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--il-line);
}
.est-mini-total > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.est-mini-total small {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.est-mini-total b {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 34px;
  font-weight: 500;
}
.est-mini-total .il-btn {
  margin-inline-start: auto;
}

/*----- 9.7 Clients & Voices -----*/
.il-voices .il-clients {
  padding-bottom: 70px;
  margin-bottom: 70px;
  border-bottom: 1px solid rgba(var(--il-heading-rgb), 0.12);
}
.voices-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 50px;
}
.voices-row .swiper {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.voices-row .quote {
  max-width: 980px;
}

/*======================
10. Home 02
========================*/
/*----- 10.1 Concept Hero -----*/
/* the base's concept-artist home: a painting full bleed, the giant Lato capitals over it in white */
.il-hero.is-concept {
  min-height: max(760px, 100vh);
  background: #1E1E1E;
  --il-heading: #FFFFFF;
  --il-heading-rgb: 255, 255, 255;
  --il-text: rgba(255, 255, 255, 0.86);
  --il-muted: rgba(255, 255, 255, 0.7);
  --il-pop: #CCCFF4;
}
.il-hero.is-concept .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(760px, 100vh);
  padding: 120px 0 150px;
  overflow: hidden;
}
.il-hero.is-concept .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20, 16, 24, 0.72) 0%, rgba(20, 16, 24, 0.38) 50%, rgba(20, 16, 24, 0.05) 100%), linear-gradient(0deg, rgba(20, 16, 24, 0.55) 0%, rgba(20, 16, 24, 0) 38%);
}
.hc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s linear;
}
.swiper-slide-active .hc-img {
  transform: scale(1);
}
.il-hero.is-concept .container {
  position: relative;
  z-index: 2;
}
.il-hero.is-concept .hero-copy {
  max-width: 820px;
}
.hero-title.is-caps {
  font-size: clamp(54px, 7vw, 124px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-transform: uppercase;
}
/* the second action over a painting: a frosted face */
.il-btn.is-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.il-btn.is-glass:hover {
  background: var(--il-plum);
}
.il-hero.is-concept .il-arrow {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.il-hero.is-concept .il-arrow:hover {
  background: var(--il-plum);
}
.il-hero.is-concept .il-dashes .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35);
}
.il-hero.is-concept .il-dashes .swiper-pagination-bullet-active {
  background: #FFFFFF;
}

/*----- 10.2 The Cast -----*/
/* the base's character-design band: plum with a scatter of small crosses, three lines of white capitals, the
   characters standing in a line on the right; the joined character plates follow it with no gap */
.il-cast {
  padding: 100px 0 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.5px, transparent 2px);
  background-size: 34px 34px;
}
.cast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}
.cast-copy {
  padding-bottom: 100px;
}
.cast-title {
  margin-bottom: 22px;
  font-size: clamp(46px, 5vw, 86px);
  line-height: 0.98;
  text-transform: uppercase;
}
.cast-copy .il-lead {
  max-width: 470px;
  margin-bottom: 30px;
}
.cast-lineup {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 470px;
}
.cast-lineup img {
  position: relative;
  z-index: 1;
  width: auto;
  max-height: 420px;
  margin-inline: -24px;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.25));
}
.cast-lineup .cl-2 {
  z-index: 2;
  max-height: 460px;
}
.cast-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 30px;
  border-radius: 50% 50% 0 0;
  background: rgba(0, 0, 0, 0.16);
}
.il-tiles.is-portrait {
  grid-auto-rows: 30vw;
}

/*----- 10.3 Colour Columns -----*/
/* the base's game home: three columns, each its own flat colour, set edge to edge */
.il-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.col-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 70px 32px;
  color: #303030;
  text-align: center;
}
.col-block.is-coral {
  background: #F59A8E;
}
.col-block.is-teal {
  background: #7DD3CB;
}
.col-block.is-sun {
  background: #F8D27A;
}
.col-block h3 {
  margin-bottom: 14px;
  color: #303030;
}
.col-block p {
  max-width: 340px;
  color: rgba(48, 48, 48, 0.86);
}
.col-block .cb-from {
  margin-bottom: 26px;
  font-family: var(--il-ff-serif);
  font-size: 21px;
}
.col-block .cb-from b {
  font-weight: 500;
}

/*----- 10.4 Depth Planes -----*/
/* H2 moment: The Long Valley comes apart into its five planes - sky, far range, the castle, the wood, the
   foreground - turned a little so the gaps show, each labelled, then settles back (scrubbed, never pinned) */
.depth-stage {
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.depth-scene {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
}
.dp {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.dp img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.dp[data-plane="0"] img {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.dp-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  color: #565656;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
}
.dp-tag b {
  color: #303030;
}
.dp[data-plane="1"] .dp-tag {
  top: 34%;
  right: auto;
  left: 6%;
}
.dp[data-plane="2"] .dp-tag {
  top: 40%;
  right: 6%;
}
.dp[data-plane="3"] .dp-tag {
  top: 70%;
  right: auto;
  left: 40%;
}
.dp[data-plane="4"] .dp-tag {
  top: auto;
  bottom: 18%;
  right: auto;
  left: 4%;
}
.depth-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 60px auto 0;
}
.depth-legend li {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  border-top: 1px solid var(--il-line);
}
.depth-legend span {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.depth-legend b {
  color: var(--il-heading);
}

/*----- 10.5 Spotlight -----*/
.spot-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 620px;
  border-radius: 10px;
  background: var(--il-paper);
}
.spot-art .il-dots .d1 {
  top: 12%;
  left: 12%;
  background: #E8318A;
}
.spot-art .il-dots .d2 {
  top: 20%;
  right: 14%;
  width: 24px;
  height: 24px;
  background: var(--il-teal);
}
.spot-art .il-dots .d3 {
  bottom: 30%;
  left: 8%;
  width: 60px;
  height: 60px;
  background: rgba(247, 197, 72, 0.4);
  filter: blur(8px);
}
.spot-art .il-dots .d4 {
  top: 50%;
  right: 8%;
  background: var(--il-coral);
}
.spot-art .il-dots .d5,
.spot-art .il-dots .d6,
.spot-art .il-dots .d7,
.spot-art .il-dots .d8 {
  display: none;
}
.spot-monster {
  position: relative;
  z-index: 1;
  max-height: 540px;
  width: auto;
  margin-bottom: 34px;
}
.spot-shadow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 60%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(44, 58, 140, 0.22), rgba(44, 58, 140, 0));
  transform: translateX(-50%);
}
.il-spotlight .il-rows {
  margin-bottom: 34px;
}
.spot-bars-title {
  margin-bottom: 18px;
}
.il-spotlight .il-bars {
  margin-bottom: 34px;
}

/*----- 10.6 Game Licensing -----*/
.gl-plate {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--il-shadow);
}
.gl-plate .il-media {
  display: block;
  aspect-ratio: 16 / 11;
}
.gl-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.il-game-lic .il-rows {
  margin-bottom: 34px;
}
.gl-btns {
  gap: 26px;
}

/*======================
11. Home 03
========================*/
/*----- 11.1 Book Hero -----*/
/* the base's book home: a white page, the EB Garamond title centred, the character on its shadow with toys
   floating round it, the round plum badge at the corner */
.il-hero.is-book {
  background: var(--il-bg);
}
.il-hero.is-book .swiper-slide {
  padding: 70px 0 150px;
  text-align: center;
}
.il-hero.is-book .hero-copy {
  max-width: 760px;
  margin: 0 auto;
}
.il-hero.is-book .hero-title {
  margin-bottom: 18px;
  font-size: clamp(46px, 4.6vw, 80px);
  font-weight: 400;
  line-height: 1.05;
}
.il-hero.is-book .il-lead {
  max-width: 560px;
  margin: 0 auto;
}
.book-art {
  position: relative;
  max-width: 820px;
  height: 470px;
  margin: 20px auto 0;
}
.book-art .ha-hero {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  max-height: 380px;
  width: auto;
  transform: translateX(-50%);
}
.book-art .ha-hero.is-tall {
  max-height: 420px;
}
.ba-shadow {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 50%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(44, 58, 140, 0.18), rgba(44, 58, 140, 0));
  transform: translateX(-50%);
}
.book-art .hero-bit.hb-1 {
  top: 8%;
  left: 2%;
}
.book-art .hero-bit.hb-2 {
  top: 0;
  right: 4%;
}
.book-art .hero-bit.hb-3 {
  bottom: 22%;
  left: 12%;
}
.book-art .hero-bit.hb-4 {
  right: 10%;
  bottom: 28%;
}
.book-badge {
  position: absolute;
  top: 40px;
  right: 6%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--il-plum);
  color: #FFFFFF;
  text-align: center;
  line-height: 1.2;
  transform: rotate(-12deg);
  transition: transform 0.5s var(--il-boing), background-color 0.3s ease;
}
.book-badge:hover {
  color: #FFFFFF;
  transform: rotate(0deg) scale(1.05);
}
.book-badge .il-label {
  font-size: 10.5px;
  opacity: 0.8;
}
.book-badge b {
  font-family: var(--il-ff-serif);
  font-size: 21px;
  font-weight: 500;
}
.book-badge small {
  max-width: 110px;
  margin-top: 4px;
  font-size: 11.5px;
  opacity: 0.85;
}
.il-hero.is-book .hero-ui-row {
  justify-content: center;
}

/*----- 11.2 The Shelf -----*/
.shelf-row {
  row-gap: 40px;
}
.shelf-col {
  flex: 0 0 auto;
  width: 20%;
}
.book-card {
  display: block;
  color: var(--il-heading);
}
/* a cover: portrait, a little spine shadow at its left edge, lifting on hover */
.bk-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  border-radius: 3px 8px 8px 3px;
  box-shadow: 0 18px 34px rgba(48, 48, 48, 0.16);
  transition: transform 0.5s var(--il-ease), box-shadow 0.5s var(--il-ease);
}
.bk-cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}
.bk-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-card:hover .bk-cover {
  box-shadow: 0 28px 50px rgba(48, 48, 48, 0.24);
  transform: translateY(-8px) rotate(-1deg);
}
.bk-meta {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  text-align: center;
}
.bk-meta .il-label {
  color: var(--il-pop);
  font-size: 10.5px;
}
.bk-meta b {
  font-size: 22px;
  line-height: 1.25;
}
.bk-meta small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.book-card:hover b {
  color: var(--il-pop);
}

/*----- 11.3 Colour Script -----*/
/* H3 moment: twenty-four empty frames, numbered in pencil; as the section travels each fills with its colour key
   in a wash from the left, and the ribbon of main colours under the grid fills with it (scrubbed, never pinned) */
.script-head {
  margin-bottom: 40px;
}
.script-head .il-title {
  margin-bottom: 0;
}
.script-rows li b {
  font-variant-numeric: tabular-nums;
}
.script-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.sc-cell {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: var(--il-surface);
  box-shadow: inset 0 0 0 1px rgba(var(--il-heading-rgb), 0.12);
}
.sc-cell small {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  color: var(--il-muted);
  font-family: var(--il-ff-serif);
  font-size: 15px;
  transition: color 0.4s ease;
}
.sc-key {
  position: absolute;
  inset: 0;
  background-image: url("../img/script/keys.jpg");
  background-size: 600% 400%;
  clip-path: inset(0 0 0 0);
}
.sc-cell.is-filled small {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.script-ribbon {
  display: flex;
  height: 18px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(var(--il-heading-rgb), 0.06);
}
.script-ribbon .rb {
  flex: 1;
}

/*----- 11.4 Split Screen -----*/
/* the base's exhibition home: the copy centred on a white half, the poster filling the other half */
.il-split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px;
}
.ss-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 40px;
  background: var(--il-bg);
  text-align: center;
}
.ss-inner {
  max-width: 500px;
}
.ss-inner h2 {
  margin-bottom: 18px;
}
.ss-inner .il-rows {
  margin: 26px 0 34px;
  text-align: start;
}
.ss-art {
  position: relative;
  overflow: hidden;
}
.ss-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 11.5 Open Calls -----*/
.calls-band {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 50px;
  margin-top: 70px;
  padding: 44px 50px;
  border-radius: 10px;
  background: var(--il-paper);
}
.cb-copy h3 {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 500;
}
.cb-copy p {
  margin: 0;
}
.il-calls li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--il-line);
}
.il-calls li:last-child {
  border-bottom: 0;
}
.cr-name {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.cr-name b {
  color: var(--il-heading);
}
.cr-name small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.il-calls .il-status {
  font-size: 13px;
  font-weight: 700;
}

/*======================
12. Studio Pages
========================*/
/*----- 12.1 About -----*/
/* the base's about page: a sketchbook page at an angle beside tabbed copy, the clients strip, round portraits */
.il-about {
  overflow-x: clip;
}
.about-art {
  position: relative;
  padding: 40px 0 60px;
}
.about-art > img:first-child {
  display: block;
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--il-shadow);
  transform: rotate(-6deg);
}
.about-art .about-bit {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 190px;
}
.il-tabbed .tab-heads {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--il-line);
}
.il-tabbed [role="tab"] {
  position: relative;
  padding: 0 0 14px;
  color: var(--il-muted);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-tabbed [role="tab"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--il-pop);
  transform: scaleX(0);
  transition: transform 0.35s var(--il-ease);
}
.il-tabbed [role="tab"].is-active {
  color: var(--il-heading);
}
.il-tabbed [role="tab"].is-active::after {
  transform: scaleX(1);
}
.about-facts {
  margin-top: 28px;
}
.il-clients-strip {
  padding: 56px 0;
}
.team-round {
  text-align: center;
}
.team-round .tr-face {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 22px;
  overflow: hidden;
  border-radius: 50%;
}
.team-round .tr-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--il-ease);
}
.team-round:hover .tr-face img {
  transform: scale(1.06);
}
.team-round h3 {
  margin-bottom: 2px;
}
.team-round h3 a:hover {
  color: var(--il-pop);
}
.tr-role {
  margin-bottom: 12px;
  color: var(--il-muted);
  font-size: 14px;
}
.team-round p {
  max-width: 280px;
  margin-inline: auto;
}
.tr-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--il-heading);
  font-size: 13px;
  font-weight: 700;
}
.awards-rows li {
  padding: 16px 0;
}
.awards-rows li b {
  font-family: var(--il-ff-serif);
  font-size: 20px;
  font-weight: 500;
}

/*----- 12.2 The Roster -----*/
.roster-tools,
.lib-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.roster-sort,
.lib-sort {
  width: 240px;
}
.roster-sort .il-select .select-button,
.lib-sort .il-select .select-button {
  height: 52px;
  border-radius: 30px;
}
.roster-count {
  margin: -16px 0 30px;
  color: var(--il-muted);
}
.roster-count b {
  color: var(--il-heading);
}
.style-card {
  position: relative;
  height: 100%;
  padding-bottom: 6px;
}
.style-card .sc-media {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 18px;
  border-radius: 6px;
}
.style-card .sc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.style-card.is-cover .sc-media img {
  object-fit: cover;
}
.style-card h3 {
  margin-bottom: 6px;
}
.style-card p {
  margin-bottom: 8px;
  font-size: 15px;
}
.sc-who {
  color: var(--il-heading);
  font-weight: 700;
}
.sc-who .il-label {
  display: block;
  color: var(--il-pop);
  font-size: 10.5px;
}

/*----- 12.3 Artist Profile -----*/
.artist-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
}
.artist-portrait .ap-art {
  position: absolute;
  inset: 0 0 18% 18%;
  width: 82%;
  height: 82%;
  border-radius: 8px;
  object-fit: cover;
}
.artist-portrait .ap-face {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 1 / 1;
  border: 10px solid var(--il-bg);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--il-shadow);
}
.ap-free {
  position: absolute;
  right: 4%;
  bottom: 10%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  background: var(--il-bg);
  box-shadow: var(--il-shadow-sm);
  color: var(--il-heading);
  font-size: 13.5px;
  font-weight: 900;
}
.artist-btns {
  margin-top: 34px;
}
.il-artist-more h2 {
  margin-bottom: 18px;
}

/*----- 12.4 Services & Process -----*/
.steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  counter-reset: none;
}
.steps-row li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 26px;
  border-top: 3px solid var(--il-line);
}
.steps-row li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 40%;
  height: 3px;
  background: var(--il-pop);
}
.steps-row .st-no {
  color: var(--il-pop);
  font-family: var(--il-ff-serif);
  font-size: 30px;
  line-height: 1;
}
.steps-row b {
  color: var(--il-heading);
  font-size: 18px;
}
.steps-row small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.steps-more {
  margin-top: 50px;
}
.process-step {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 70px;
  padding: 50px 0;
}
.process-step + .process-step {
  border-top: 1px solid var(--il-line);
}
.process-step.is-flip .ps-media {
  order: 2;
}
.ps-media .il-media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
}
.ps-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-no {
  display: block;
  margin-bottom: 4px;
  color: var(--il-pop);
  font-family: var(--il-ff-serif);
  font-size: 54px;
  line-height: 1;
}
.ps-copy h3 {
  margin-bottom: 12px;
}
.ps-copy .il-rows {
  margin-top: 18px;
}
.sd-hero {
  margin: 0 0 40px;
}
.sd-hero .il-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.sd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-title {
  margin-bottom: 18px;
}
.sd-gets {
  margin: 40px 0;
  padding: 34px;
  border-radius: 8px;
  background: var(--il-paper);
}
.sd-gets h3 {
  margin-bottom: 10px;
}
.sd-plates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 50px;
}
.sd-plates .il-plate {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}
.sd-plates .il-media {
  display: block;
  aspect-ratio: 4 / 3;
}
.sd-plates img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-faq-title {
  margin-bottom: 18px;
}
/* a note: an icon, a title, a few words (estimate notes, what is included) */
.note-card {
  height: 100%;
  padding: 36px 32px;
  border-radius: 8px;
  background: var(--il-paper);
}
.note-card .il-ico {
  margin-bottom: 18px;
}
.note-card h2,
.note-card h3 {
  margin-bottom: 10px;
}
.note-card p {
  margin: 0;
}
/* the finishes: the same painting at each stage */
.cx-card {
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
}
.cx-media {
  display: block;
  aspect-ratio: 16 / 10;
}
.cx-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cx-body {
  padding: 28px 30px 30px;
}
.cx-body .il-label {
  color: var(--il-pop);
}
.cx-body h3 {
  margin: 6px 0 8px;
}
.turn-panel h3 {
  margin-bottom: 8px;
}
.turn-panel .turn-extras {
  margin-top: 30px;
}
.turn-panel .il-rows li span small,
.il-rows li span small {
  display: block;
  color: var(--il-muted);
  font-size: 13px;
}
.turn-panel .il-rows li span {
  color: var(--il-heading);
  font-weight: 700;
}
/* two calls to action side by side */
.cta-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 50px 46px;
  border-radius: 10px;
}
.cta-card.is-story {
  background: var(--il-story);
}
.cta-card h3 {
  max-width: 380px;
  margin-bottom: 10px;
}
.cta-card p {
  max-width: 400px;
  margin-bottom: 26px;
}
.cta-card .cta-art {
  position: absolute;
  right: 26px;
  bottom: 26px;
  width: 150px;
}

/*======================
13. Work Pages
========================*/
/*----- 13.1 The Project -----*/
/* the base's big-images single: copy and an info box, then each piece on its own plate across the page */
.project-h {
  margin-bottom: 18px;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 500;
}
.project-info {
  padding: 32px;
  border-radius: 8px;
  background: var(--il-paper);
}
.project-info h2 {
  margin-bottom: 8px;
}
.share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}
.il-plate {
  position: relative;
  margin: 0;
}
.il-plates .il-plate.is-big {
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 8px;
}
.il-plate.is-big .il-media {
  display: block;
  aspect-ratio: 2 / 1;
}
.il-plate.is-big img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 1s var(--il-ease);
}
.il-plate.is-big:hover img {
  transform: scale(1.04);
}
.il-book-pieces .il-tiles {
  margin-bottom: 0;
}
/* previous / next */
.il-post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  padding: 26px 0;
  border-top: 1px solid var(--il-line);
  border-bottom: 1px solid var(--il-line);
}
.il-post-nav a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--il-heading);
}
.il-post-nav a span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.il-post-nav a small {
  color: var(--il-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-post-nav a b {
  font-family: var(--il-ff-serif);
  font-size: 20px;
  font-weight: 500;
}
.il-post-nav .pn-next {
  text-align: end;
}
.il-post-nav a > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.06);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.il-post-nav a:hover > i {
  background: var(--il-plum);
  color: #FFFFFF;
}
.il-post-nav .pn-grid {
  font-size: 20px;
}
.il-post-nav .pn-grid:hover {
  color: var(--il-pop);
}

/*----- 13.2 Split Screen Project -----*/
/* the base's split-screen single: the copy holds still on the left while the paintings scroll on the right */
.split-info {
  position: sticky;
  top: 120px;
}
.split-info .il-rows {
  margin: 26px 0 30px;
}
.split-fig {
  margin: 0 0 30px;
}
.split-fig .il-media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.split-fig img {
  display: block;
  width: 100%;
  transition: transform 1s var(--il-ease);
}
.split-fig:hover img {
  transform: scale(1.03);
}
.split-fig figcaption {
  margin-top: 12px;
  color: var(--il-muted);
  font-size: 14px;
}
.split-fig figcaption b {
  margin-inline-end: 8px;
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 18px;
  font-weight: 500;
}
.split-passes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/*======================
14. Estimate
========================*/
/*----- 14.1 Asset Rows -----*/
/* one row per asset type: its icon and name, the count, the complexity and the row's subtotal */
.est-row {
  display: grid;
  grid-template-columns: 1fr auto 210px 120px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--il-line);
}
.est-row:first-child {
  padding-top: 0;
}
.er-name {
  display: flex;
  align-items: center;
  gap: 16px;
}
.er-name .il-ico {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
}
.er-name span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.er-name b {
  color: var(--il-heading);
  font-size: 17px;
}
.er-name small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.er-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.er-sum small {
  color: var(--il-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.er-sum b {
  color: var(--il-heading);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.er-cx .il-select .select-button {
  height: 46px;
  border-radius: 30px;
}

/*----- 14.2 The Builder -----*/
.est-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: start;
  gap: 50px;
}
.est-block {
  margin-bottom: 26px;
  padding: 36px;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
}
.est-block > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.est-block > h2 .step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--il-plum);
  color: #FFFFFF;
  font-size: 14px;
}
.est-block > p {
  margin-top: -12px;
  color: var(--il-muted);
}
/* the summary: sticky beside the builder */
.est-summary {
  position: sticky;
  top: 110px;
  padding: 36px;
  border-radius: 8px;
  background: var(--il-ink);
  color: rgba(255, 255, 255, 0.8);
  --il-heading: #FFFFFF;
  --il-heading-rgb: 255, 255, 255;
  --il-muted: rgba(255, 255, 255, 0.64);
  --il-line: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .est-summary {
  background: #262126;
}
.est-summary h2 {
  margin-bottom: 20px;
}
.est-summary .il-rows li {
  font-size: 14.5px;
}
.est-summary .il-rows li.is-off b {
  color: #9BE3BB;
}
.est-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 6px;
}
.est-total span {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.est-total b {
  color: #FFFFFF;
  font-family: var(--il-ff-serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
.est-dates {
  margin: 20px 0 24px;
  padding: 18px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}
.est-dates .il-rows li {
  border-color: rgba(255, 255, 255, 0.1);
}
.est-dates .il-rows li:last-child {
  border-bottom: 0;
}
.est-match {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.est-match .faces {
  display: flex;
}
.est-match .faces img {
  width: 40px;
  height: 40px;
  margin-inline-start: -10px;
  border: 2px solid var(--il-ink);
  border-radius: 50%;
  object-fit: cover;
}
.est-match .faces img:first-child {
  margin-inline-start: 0;
}
.est-match small {
  display: block;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
}
.est-match b {
  color: #FFFFFF;
  font-size: 14.5px;
}
.est-summary .il-btn {
  background: #FFFFFF;
  color: #303030;
}
.est-summary .il-btn:hover {
  background: var(--il-plum);
  color: #FFFFFF;
}
.est-summary .il-btn.is-tonal {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*----- 14.3 Rate Tables -----*/
.il-table-wrap {
  overflow: hidden;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
}
.il-table {
  width: 100%;
  border-collapse: collapse;
}
.il-table th,
.il-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--il-line);
  text-align: start;
  vertical-align: middle;
}
.il-table thead th {
  background: var(--il-paper);
  color: var(--il-heading);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.il-table thead th small {
  display: block;
  margin-top: 4px;
  color: var(--il-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}
.il-table tbody th b {
  display: block;
  color: var(--il-heading);
}
.il-table tbody th small {
  color: var(--il-muted);
  font-size: 13.5px;
  font-weight: 400;
}
.il-table td {
  color: var(--il-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.il-table tbody tr:last-child th,
.il-table tbody tr:last-child td {
  border-bottom: 0;
}
.il-table tbody tr:hover td,
.il-table tbody tr:hover th {
  background: var(--il-pop-soft);
}

/*======================
15. Licensing
========================*/
/*----- 15.1 Calculator -----*/
.lic-calc h2 {
  margin-bottom: 22px;
}
.lic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  align-items: start;
}
.lic-grid .il-check {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}
.lic-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--il-line);
}
.lic-out > span {
  display: flex;
  flex-direction: column;
  margin-inline-end: auto;
  line-height: 1.15;
}
.lic-out small {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lic-out b {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 42px;
  font-weight: 500;
}
.lic-terms {
  margin: 14px 0 0;
  color: var(--il-muted);
  font-size: 14px;
}
.lic-factors {
  margin-top: 30px;
}
.lf-box {
  height: 100%;
  padding: 28px 30px;
  border-radius: 8px;
  background: var(--il-surface);
}
.lf-box h3 {
  margin-bottom: 8px;
}

/*----- 15.2 The Library -----*/
.lib-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 260px;
}
.lib-range .il-label {
  color: var(--il-heading);
}
.il-range {
  width: 100%;
  accent-color: var(--il-plum);
}
[data-theme="dark"] .il-range {
  accent-color: #B4B8E7;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 0;
  color: var(--il-muted);
  font-size: 13px;
}
.range-ends b {
  color: var(--il-heading);
}
.lib-card {
  position: relative;
  height: 100%;
}
.lib-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
.lib-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.9s var(--il-ease);
}
.lib-card:hover .lib-media img {
  transform: scale(1.06);
}
.lib-wish {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #303030;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--il-boing);
}
.lib-wish:hover {
  transform: scale(1.1);
}
.lib-wish.is-on {
  background: var(--il-plum);
  color: #FFFFFF;
}
.lib-body {
  padding-top: 16px;
}
.lib-body h3 {
  margin-bottom: 2px;
  font-size: 23px;
}
.lib-body h3 a:hover {
  color: var(--il-pop);
}
.lib-body p {
  margin-bottom: 12px;
  color: var(--il-muted);
  font-size: 14px;
}
.lib-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lib-foot > span {
  color: var(--il-heading);
  font-size: 18px;
  font-weight: 900;
}
.lib-foot > span small {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
}

/*----- 15.3 Licence Page -----*/
.lic-gallery {
  position: relative;
}
.lic-gallery .swiper {
  overflow: hidden;
  border-radius: 8px;
}
.lic-plate .il-media {
  display: block;
  aspect-ratio: 1 / 1;
}
.lic-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lic-gallery .il-arrows {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
}
.lic-gallery .il-arrow {
  background: rgba(255, 255, 255, 0.9);
  color: #303030;
}
.lic-info h2 {
  margin: 4px 0 8px;
  font-weight: 400;
}
.lic-by {
  color: var(--il-muted);
}
.lic-by a {
  color: var(--il-pop);
}
.lic-price {
  margin-bottom: 26px;
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 30px;
}
.lic-price small {
  color: var(--il-muted);
  font-family: var(--il-ff-body);
  font-size: 14px;
}
.lic-form {
  padding: 30px;
  border-radius: 8px;
  background: var(--il-paper);
}
.lic-form .il-input select,
.lic-form .il-select .select-button {
  background: var(--il-surface);
}
.lic-wish.is-on {
  color: var(--il-pop);
}
.lic-meta {
  margin-top: 26px;
}
.lic-tabs {
  margin-top: 70px;
}

/*----- 15.4 Bag & Checkout -----*/
.bag-title {
  margin-bottom: 18px;
}
.bag-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--il-line);
}
.bag-line.is-small {
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 12px 0;
}
.bl-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
.bl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bl-main {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.bl-main b {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 21px;
  font-weight: 500;
}
.bl-main small {
  color: var(--il-muted);
  font-size: 13.5px;
}
.bl-price {
  color: var(--il-heading);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.bag-line.is-small .bl-main b {
  font-size: 17px;
}
.bag-line.is-small .bl-price {
  font-size: 15px;
}
.bag-empty {
  padding: 50px 20px;
  text-align: center;
}
.bag-empty img {
  width: 140px;
  margin-bottom: 18px;
}
.bag-empty h3 {
  margin-bottom: 6px;
}
.bag-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 520px;
  margin-top: 30px;
}
.bag-coupon .il-input {
  flex: 1 1 240px;
}
.bag-coupon .form-status {
  flex-basis: 100%;
  margin: 0;
}
.bag-summary h2,
.co-summary h2 {
  margin-bottom: 18px;
}
.bag-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 20px 0 24px;
}
.bag-total span {
  color: var(--il-heading);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bag-total b {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 36px;
  font-weight: 500;
}
.bag-note {
  margin: 16px 0 0;
  color: var(--il-muted);
  font-size: 13.5px;
  text-align: center;
}
.co-note {
  margin-top: -10px;
  color: var(--il-muted);
}
.co-pay-title {
  margin: 34px 0 16px;
}
.co-lines {
  margin-bottom: 14px;
}
.co-terms {
  margin-bottom: 20px;
}
.co-done {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.co-done img {
  width: 140px;
  margin-bottom: 14px;
}
.co-done h2 {
  margin-bottom: 10px;
}
.bag-summary,
.co-summary {
  position: sticky;
  top: 110px;
}

/*======================
16. Journal & FAQ
========================*/
/*----- 16.1 The Journal -----*/
.blog-post {
  margin-bottom: 60px;
}
.bp-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.bp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--il-ease);
}
.blog-post:hover .bp-media img {
  transform: scale(1.04);
}
.il-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--il-plum);
  font-size: 22px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.25);
  transition: transform 0.4s var(--il-boing);
}
.bp-media:hover .il-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.bp-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bp-gallery .il-arrows {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
}
.bp-gallery .il-arrow {
  background: rgba(255, 255, 255, 0.92);
  color: #303030;
}
.bp-body h3 {
  margin-bottom: 12px;
}
.bp-body h3 a:hover {
  color: var(--il-pop);
}
.post-meta .by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--il-heading);
}
.post-meta .il-face {
  width: 30px;
  height: 30px;
}
.blog-post.is-quote,
.blog-post.is-link {
  position: relative;
  padding: 50px 50px 40px;
  border-radius: 8px;
  background: var(--il-story);
}
.blog-post.is-link {
  background: var(--il-paper);
}
.bp-glyph {
  position: absolute;
  top: 34px;
  right: 40px;
  color: var(--il-pop);
  font-size: 46px;
  opacity: 0.25;
}
.blog-post.is-quote h3 {
  max-width: 640px;
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 500;
}
.blog-post.is-quote .post-meta,
.blog-post.is-link .post-meta {
  margin-bottom: 0;
}
/* the sidebar */
.il-sidebar .widget {
  margin-bottom: 30px;
  padding: 32px;
  border-radius: 8px;
  background: var(--il-paper);
}
.il-sidebar .widget > h2 {
  margin-bottom: 18px;
}
.widget-search {
  max-width: none;
}
.widget-search input {
  background: var(--il-surface);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.side-posts .thumb {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 6px;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-posts .il-label {
  color: var(--il-pop);
  font-size: 10.5px;
}
.side-posts h3 a:hover {
  color: var(--il-pop);
}
.widget-tags {
  margin: 0;
  line-height: 2;
}
.widget-tags a {
  color: var(--il-heading);
  font-weight: 700;
}
.widget-tags a:hover {
  color: var(--il-pop);
}
.widget-links li {
  border-bottom: 1px solid var(--il-line);
}
.widget-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: var(--il-heading);
  font-weight: 700;
}
.widget-links a i {
  color: var(--il-pop);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s var(--il-ease);
}
.widget-links li.is-current a,
.widget-links a:hover {
  color: var(--il-pop);
}
.widget-links li.is-current a i,
.widget-links a:hover i {
  opacity: 1;
  transform: none;
}
.widget-cta {
  position: relative;
  overflow: hidden;
}
.widget-cta .cta-art {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 110px;
  opacity: 0.9;
}
.widget-cta h2 {
  max-width: 220px;
  margin-bottom: 10px;
}
.widget-cta p {
  margin-bottom: 20px;
}
.il-sidebar .widget.is-plum {
  background: #2C3A8C;
}
[data-theme="dark"] .il-sidebar .widget.is-plum {
  background: #1D265A;
}

/*----- 16.2 The Article -----*/
.art-hero {
  margin: 0 0 26px;
}
.art-hero .il-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.art-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-title {
  margin-bottom: 18px;
}
.il-article h3 {
  margin: 34px 0 12px;
}
.art-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 30px 0;
}
.art-pair figure {
  margin: 0;
}
.art-pair .il-media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
}
.art-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-pair figcaption {
  margin-top: 8px;
  color: var(--il-muted);
  font-size: 14px;
}
.art-quote {
  position: relative;
  margin: 34px 0;
  padding: 34px 40px;
  border-inline-start: 4px solid var(--il-pop);
  border-radius: 0 8px 8px 0;
  background: var(--il-story);
}
.art-quote p {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 26px;
  line-height: 1.4;
}
.art-quote cite {
  color: var(--il-pop);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.art-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--il-line);
  border-bottom: 1px solid var(--il-line);
}
.art-foot .il-label {
  margin-inline-end: 10px;
  color: var(--il-muted);
}
.art-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-author {
  display: flex;
  gap: 26px;
  margin-top: 40px;
  padding: 34px;
  border-radius: 8px;
  background: var(--il-paper);
}
.art-author img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
.art-author h3 {
  margin: 2px 0 8px;
}
.art-author .il-label {
  color: var(--il-pop);
}
.art-comments {
  margin-top: 60px;
}
.art-comments > h3 {
  margin-bottom: 20px;
}
.comment {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--il-line);
}
.comment.is-reply {
  margin-inline-start: 70px;
}
.comment img {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
.comment b {
  display: block;
  color: var(--il-heading);
}
.comment .il-label {
  color: var(--il-muted);
  font-size: 10.5px;
}
.comment p {
  margin: 8px 0;
}
.art-form {
  margin-top: 50px;
}
.art-form h3 {
  margin: 0 0 20px;
}

/*----- 16.3 FAQ & Accordion -----*/
.il-accordion .acc-item {
  border-bottom: 1px solid var(--il-line);
}
.il-accordion .acc-title {
  margin: 0;
  font-size: inherit;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--il-heading);
  font-size: 18px;
  font-weight: 700;
  text-align: start;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.06);
  color: var(--il-pop);
  font-size: 12px;
  transition: transform 0.35s var(--il-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--il-plum);
  color: #FFFFFF;
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 50px 22px 0;
}
.faq-side {
  position: sticky;
  top: 110px;
}
.faq-search {
  max-width: none;
  margin-bottom: 24px;
}
.faq-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.faq-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--il-line);
  color: var(--il-heading);
  font-weight: 700;
}
.faq-nav a i {
  color: var(--il-pop);
  font-size: 12px;
}
.faq-nav a:hover {
  color: var(--il-pop);
}
.faq-ask {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 8px;
}
.faq-ask img {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 80px;
}
.faq-ask h2 {
  margin-bottom: 8px;
}
.faq-ask p {
  margin-bottom: 20px;
}
.faq-group {
  margin-bottom: 60px;
}
.faq-group > h2 {
  margin-bottom: 8px;
}

/*======================
17. Contact, Account & Forms
========================*/
/*----- 17.1 Contact -----*/
.contact-card {
  height: 100%;
  padding: 36px 34px;
  border-radius: 8px;
  background: var(--il-paper);
}
.cc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--il-pop-soft);
  color: var(--il-pop);
  font-size: 20px;
}
.contact-card h3 {
  margin-bottom: 10px;
}
.contact-card a:not(.il-link) {
  color: var(--il-heading);
}
.cc-note {
  color: var(--il-muted);
  font-size: 14px;
}
.contact-map {
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: var(--il-shadow-sm);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}
.contact-hours h2 {
  margin-bottom: 10px;
}
.il-contact-form h2 {
  margin-bottom: 24px;
}

/*----- 17.2 Account -----*/
.acc-me {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.acc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  padding: 12px;
  border-radius: 50%;
  background: var(--il-paper);
}
.acc-logo img {
  width: 100%;
}
[data-theme="dark"] .acc-logo img {
  filter: invert(1);
}
.acc-me b {
  display: block;
  color: var(--il-heading);
  font-size: 18px;
}
.acc-me small {
  color: var(--il-muted);
}
.acc-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
.acc-block {
  margin-bottom: 26px;
}
.acc-block h2 {
  margin-bottom: 16px;
}
.acc-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--il-line);
}
.acc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--il-story);
}
.acc-mark img {
  width: 34px;
}
.acc-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.4;
}
.acc-main .il-label {
  color: var(--il-pop);
  font-size: 10.5px;
}
.acc-main > span:last-child {
  color: var(--il-muted);
  font-size: 14px;
}
.acc-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--il-heading);
}
.acc-price small {
  color: var(--il-muted);
  font-size: 12.5px;
  font-weight: 400;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--il-line);
  font-size: 15px;
}
.acc-orders li b {
  color: var(--il-heading);
}

/*----- 17.3 Log In & Register -----*/
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 10px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow);
}
.auth-side {
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  padding: 50px;
}
.as-copy h2 {
  max-width: 420px;
  margin-bottom: 12px;
}
.as-copy p {
  max-width: 400px;
  margin-bottom: 26px;
}
.auth-side .il-avatars .faces img,
.auth-side .il-avatars .faces .more {
  border-color: rgba(255, 255, 255, 0.9);
}
.auth-form {
  padding: 60px 56px;
}
.auth-form > h2 {
  margin-bottom: 26px;
}
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 26px;
}
.auth-row a,
.auth-switch a {
  color: var(--il-pop);
  font-weight: 700;
}
.auth-switch {
  margin-top: 22px;
  text-align: center;
}
.auth-note {
  margin-top: -14px;
  color: var(--il-muted);
}
.auth-terms {
  margin-bottom: 24px;
}
.il-input.has-toggle input {
  padding-inline-end: 56px;
}
.pass-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--il-muted);
  transform: translateY(-50%);
}
.pass-toggle:hover {
  color: var(--il-pop);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--il-heading-rgb), 0.08);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--il-pop);
  transition: width 0.4s var(--il-ease);
}

/*----- 17.4 Wizards -----*/
.wz-title {
  margin-bottom: 26px;
}
.wz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.wz-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 40px;
  background: var(--il-surface);
  color: var(--il-muted);
  font-size: 13.5px;
  font-weight: 700;
  text-align: start;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.il-application .wz-steps button {
  background: var(--il-paper);
}
.wz-steps button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--il-heading-rgb), 0.07);
  color: var(--il-heading);
  font-weight: 900;
}
.wz-steps button.is-active {
  background: var(--il-plum);
  color: #FFFFFF;
}
.wz-steps button.is-active span {
  background: #FFFFFF;
  color: #2C3A8C;
}
.wz-steps button.is-done span {
  background: var(--il-pop-soft);
  color: var(--il-pop);
}
.wz-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: start;
  gap: 30px;
}
.wz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  margin-bottom: 20px;
}
.wz-note {
  margin-top: -10px;
  color: var(--il-muted);
}
.wz-more {
  margin-top: 16px;
}
.wz-link {
  margin-top: 16px;
}
.wz-terms {
  margin-top: 20px;
}
.wz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--il-line);
}
.wz-count {
  margin-inline: auto;
  color: var(--il-muted);
  font-size: 14px;
  font-weight: 700;
}
.wz-aside {
  position: sticky;
  top: 110px;
}
.wz-aside h3 {
  margin-bottom: 10px;
}
.wz-aside-note {
  margin-top: 18px;
}
.calls-band.is-solo {
  display: block;
  margin: 0;
}
.chip-group.is-two {
  grid-template-columns: 1fr 1fr;
}

/*----- 17.5 Bare Pages -----*/
/* coming soon and the 404: no header or footer; the Perspective Guides behind the copy */
.il-bare-page {
  min-height: 100vh;
}
.bare-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}
.bare-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 8%;
  background: var(--il-paper);
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-inner h1 {
  margin-bottom: 18px;
  font-size: clamp(40px, 4vw, 66px);
  font-weight: 400;
}
.bare-inner .il-lead {
  max-width: 520px;
  margin-bottom: 34px;
}
.launch-count {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 18px 12px;
  border-radius: 8px;
  background: var(--il-surface);
  box-shadow: var(--il-shadow-sm);
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.launch-count b {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.launch-count .is-pop b {
  color: var(--il-pop);
}
.bare-news {
  flex: none;
  width: 100%;
  max-width: 520px;
  margin-bottom: 30px;
}
.bare-art {
  position: relative;
  overflow: hidden;
}
.bare-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.il-bare-page.is-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--il-paper);
  text-align: center;
}
.e404 {
  position: relative;
  max-width: 760px;
}
.e404 .bare-logo {
  display: inline-flex;
  margin-bottom: 30px;
}
.e404-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.e404-no {
  color: var(--il-heading);
  font-family: var(--il-ff-serif);
  font-size: clamp(140px, 18vw, 260px);
  line-height: 1;
}
.e404-art img {
  width: clamp(120px, 14vw, 200px);
}
.e404 h1 {
  margin-bottom: 12px;
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 400;
}
.e404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 26px 0 34px;
}
.e404-links a {
  color: var(--il-heading);
  font-weight: 700;
}
.e404-links a:hover {
  color: var(--il-pop);
}
.e404-btns {
  justify-content: center;
}

/*======================
18. Subheader
========================*/
/* the base's grey title band (the portfolio single), the Perspective Guides drifting behind it and one of the
   studio's cut-outs floating at the end over its own shadow */
.il-subheader {
  padding: 70px 0 64px;
  background: var(--il-paper);
}
.il-subheader.is-story {
  background: var(--il-story);
}
.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 250px;
}
.sub-copy {
  max-width: 720px;
}
.sub-copy h1 {
  margin-bottom: 16px;
  font-size: clamp(40px, 4.2vw, 68px);
}
.sub-copy .il-lead {
  max-width: 560px;
}
.sub-art {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 300px;
  height: 250px;
}
.sub-art img {
  position: relative;
  z-index: 1;
  max-width: 260px;
  max-height: 230px;
  width: auto;
  height: auto;
}
.sub-shadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 190px;
  height: 18px;
  border-radius: 50%;
  background: rgba(48, 48, 48, 0.12);
  transform: translateX(-50%);
}
[data-theme="dark"] .sub-shadow {
  background: rgba(0, 0, 0, 0.4);
}

/*======================
19. Footer
========================*/
/* the base's dark footer: the studio letter on top, four columns (the studio, its hours, the journal, and in the
   base's statement column the clay creature turning), the copyright bar under them */
.il-footer {
  position: relative;
  padding-top: 90px;
}
.footer-letter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--il-line);
}
.letter-copy h2 {
  margin-bottom: 6px;
}
.letter-copy p {
  margin: 0;
}
.il-newsletter {
  position: relative;
  flex: 0 1 520px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.il-newsletter input {
  flex: 1 1 240px;
  height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 30px;
  background: var(--il-field);
  color: var(--il-heading);
  font-size: 15px;
  outline: none;
}
.il-newsletter input::placeholder {
  color: var(--il-muted);
  opacity: 1;
}
.il-newsletter input:focus {
  box-shadow: inset 0 0 0 2px var(--il-pop);
}
.il-newsletter .form-status {
  flex-basis: 100%;
  margin: 4px 0 0;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.25fr 1.1fr;
  gap: 50px;
  padding: 70px 0;
}
.fcol h2 {
  margin-bottom: 24px;
  font-size: 17px;
}
.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 24px;
}
.footer-brand p {
  margin-bottom: 22px;
}
.footer-contact li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 15px;
}
.footer-contact i {
  width: 16px;
  color: var(--il-pop);
}
.footer-contact a:hover {
  color: var(--il-pop);
}
.footer-brand .il-social {
  margin-top: 24px;
}
.footer-hours .il-status {
  margin-bottom: 16px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--il-line-2);
  font-size: 14.5px;
}
.hours-list li b {
  color: var(--il-heading);
  font-weight: 700;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--il-pop);
}
.foot-post {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.foot-post img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.foot-post b {
  display: block;
  color: var(--il-heading);
  font-size: 15px;
  line-height: 1.35;
  transition: color 0.3s ease;
}
.foot-post small {
  color: var(--il-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.foot-post:hover b {
  color: var(--il-pop);
}
.bust-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 280px;
  margin: -30px auto 0;
}
.bust-stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  filter: blur(6px);
}
.il-bust {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.bust-note {
  margin: 8px 0 0;
  color: var(--il-muted);
  font-size: 14px;
  text-align: center;
}
.bust-note .il-label {
  display: block;
  color: var(--il-pop);
}
.footer-bottom {
  padding: 26px 0;
  background: #171717;
}
.bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  font-size: 14px;
}
.bottom-row p {
  margin: 0;
}
.bottom-row a:hover {
  color: var(--il-pop);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

/*======================
20. Art Plates
========================*/
/* each piece's flat plate colour and its three key colours (generated from the files by gen_works.py) */
.plate-lion-at-rest {
  background-color: #FFFAEC;
}
.pal-lion-at-rest-0 {
  background-color: #EEAD6B;
}
.pal-lion-at-rest-1 {
  background-color: #82411C;
}
.pal-lion-at-rest-2 {
  background-color: #B46C3E;
}
.plate-red-fox {
  background-color: #FFFAEC;
}
.pal-red-fox-0 {
  background-color: #BC6309;
}
.pal-red-fox-1 {
  background-color: #B9AD61;
}
.pal-red-fox-2 {
  background-color: #FAE3C0;
}
.plate-proud-llama {
  background-color: #FFFAEC;
}
.pal-proud-llama-0 {
  background-color: #5D433C;
}
.pal-proud-llama-1 {
  background-color: #A29067;
}
.pal-proud-llama-2 {
  background-color: #4E3631;
}
.plate-tall-giraffe {
  background-color: #FFFAEC;
}
.pal-tall-giraffe-0 {
  background-color: #F1B169;
}
.pal-tall-giraffe-1 {
  background-color: #A65234;
}
.pal-tall-giraffe-2 {
  background-color: #D47C53;
}
.plate-old-elephant {
  background-color: #FFFAEC;
}
.pal-old-elephant-0 {
  background-color: #5D6E6C;
}
.pal-old-elephant-1 {
  background-color: #A5B1A4;
}
.pal-old-elephant-2 {
  background-color: #6F847D;
}
.plate-big-bear {
  background-color: #FFFAEC;
}
.pal-big-bear-0 {
  background-color: #482A1F;
}
.pal-big-bear-1 {
  background-color: #974527;
}
.pal-big-bear-2 {
  background-color: #888351;
}
.plate-rhino {
  background-color: #FFFAEC;
}
.pal-rhino-0 {
  background-color: #BBA291;
}
.pal-rhino-1 {
  background-color: #806C63;
}
.pal-rhino-2 {
  background-color: #A78F83;
}
.plate-zebra {
  background-color: #FFFAEC;
}
.pal-zebra-0 {
  background-color: #BBA390;
}
.pal-zebra-1 {
  background-color: #EDDCC6;
}
.pal-zebra-2 {
  background-color: #5C4437;
}
.plate-monkey-business {
  background-color: #FFFAEC;
}
.pal-monkey-business-0 {
  background-color: #A24D2E;
}
.pal-monkey-business-1 {
  background-color: #C99B81;
}
.pal-monkey-business-2 {
  background-color: #54251D;
}
.plate-hippo {
  background-color: #FFFAEC;
}
.pal-hippo-0 {
  background-color: #D7A08B;
}
.pal-hippo-1 {
  background-color: #6F434C;
}
.pal-hippo-2 {
  background-color: #D6B094;
}
.plate-mr-pemberton {
  background-color: #99867F;
}
.pal-mr-pemberton-0 {
  background-color: #F6CAB7;
}
.pal-mr-pemberton-1 {
  background-color: #463D3A;
}
.pal-mr-pemberton-2 {
  background-color: #84615B;
}
.plate-the-chef {
  background-color: #818294;
}
.pal-the-chef-0 {
  background-color: #F9EAD6;
}
.pal-the-chef-1 {
  background-color: #515673;
}
.pal-the-chef-2 {
  background-color: #C1B0B6;
}
.plate-the-commuter {
  background-color: #858289;
}
.pal-the-commuter-0 {
  background-color: #F2B59D;
}
.pal-the-commuter-1 {
  background-color: #665057;
}
.pal-the-commuter-2 {
  background-color: #3E4354;
}
.plate-the-farmer {
  background-color: #B08D79;
}
.pal-the-farmer-0 {
  background-color: #C9514C;
}
.pal-the-farmer-1 {
  background-color: #404758;
}
.pal-the-farmer-2 {
  background-color: #BA4244;
}
.plate-morning-stretch {
  background-color: #A28796;
}
.pal-morning-stretch-0 {
  background-color: #645FA9;
}
.pal-morning-stretch-1 {
  background-color: #E9C4A4;
}
.pal-morning-stretch-2 {
  background-color: #D69893;
}
.plate-the-burglar {
  background-color: #89839F;
}
.pal-the-burglar-0 {
  background-color: #C9937B;
}
.pal-the-burglar-1 {
  background-color: #4F3133;
}
.pal-the-burglar-2 {
  background-color: #956E69;
}
.plate-the-skater {
  background-color: #96949F;
}
.pal-the-skater-0 {
  background-color: #FEF9BA;
}
.pal-the-skater-1 {
  background-color: #C67774;
}
.pal-the-skater-2 {
  background-color: #5E3845;
}
.plate-dr-hale {
  background-color: #7F8B8B;
}
.pal-dr-hale-0 {
  background-color: #D9B79F;
}
.pal-dr-hale-1 {
  background-color: #FEF7D3;
}
.pal-dr-hale-2 {
  background-color: #324A57;
}
.plate-suit-bot {
  background-color: #BFAF8B;
}
.pal-suit-bot-0 {
  background-color: #527E90;
}
.pal-suit-bot-1 {
  background-color: #424C56;
}
.pal-suit-bot-2 {
  background-color: #516E7B;
}
.plate-spark-bot {
  background-color: #FFE8BC;
}
.pal-spark-bot-0 {
  background-color: #A05B52;
}
.pal-spark-bot-1 {
  background-color: #FFCC86;
}
.pal-spark-bot-2 {
  background-color: #AAA283;
}
.plate-dome-bot {
  background-color: #E2DCD0;
}
.pal-dome-bot-0 {
  background-color: #B3A393;
}
.pal-dome-bot-1 {
  background-color: #837265;
}
.pal-dome-bot-2 {
  background-color: #E2DCD0;
}
.plate-pilot-bot {
  background-color: #BFAF8B;
}
.pal-pilot-bot-0 {
  background-color: #F5EAB8;
}
.pal-pilot-bot-1 {
  background-color: #968964;
}
.pal-pilot-bot-2 {
  background-color: #4B4F4D;
}
.plate-cyclops-bot {
  background-color: #FFDFB0;
}
.pal-cyclops-bot-0 {
  background-color: #B84F4F;
}
.pal-cyclops-bot-1 {
  background-color: #B19F89;
}
.pal-cyclops-bot-2 {
  background-color: #FBF3E4;
}
.plate-gulp-bot {
  background-color: #BFAF8B;
}
.pal-gulp-bot-0 {
  background-color: #7A3331;
}
.pal-gulp-bot-1 {
  background-color: #DFCCAB;
}
.pal-gulp-bot-2 {
  background-color: #BA635A;
}
.plate-launch-engine {
  background-color: #1E313F;
}
.pal-launch-engine-0 {
  background-color: #A0897C;
}
.pal-launch-engine-1 {
  background-color: #DED4CF;
}
.pal-launch-engine-2 {
  background-color: #645855;
}
.plate-totem-engine {
  background-color: #EEDFCA;
}
.pal-totem-engine-0 {
  background-color: #C2263F;
}
.pal-totem-engine-1 {
  background-color: #F58341;
}
.pal-totem-engine-2 {
  background-color: #F5B375;
}
.plate-hubble {
  background-color: #ECE9F2;
}
.pal-hubble-0 {
  background-color: #E8318A;
}
.pal-hubble-1 {
  background-color: #F49BC4;
}
.pal-hubble-2 {
  background-color: #B0703F;
}
.plate-eye-cake {
  background-color: #AB5C86;
}
.pal-eye-cake-0 {
  background-color: #E07A51;
}
.pal-eye-cake-1 {
  background-color: #B6477A;
}
.pal-eye-cake-2 {
  background-color: #36BDF0;
}
.plate-brain-snack {
  background-color: #A44967;
}
.pal-brain-snack-0 {
  background-color: #7C2052;
}
.pal-brain-snack-1 {
  background-color: #EAAE74;
}
.pal-brain-snack-2 {
  background-color: #BD3668;
}
.plate-jolly-skull {
  background-color: #93525D;
}
.pal-jolly-skull-0 {
  background-color: #5A1C35;
}
.pal-jolly-skull-1 {
  background-color: #A3353A;
}
.pal-jolly-skull-2 {
  background-color: #F7DCC4;
}
.plate-moon-grin {
  background-color: #94475B;
}
.pal-moon-grin-0 {
  background-color: #B62A4D;
}
.pal-moon-grin-1 {
  background-color: #402151;
}
.pal-moon-grin-2 {
  background-color: #FCDD8F;
}
.plate-violet-world {
  background-color: #4543A5;
}
.pal-violet-world-0 {
  background-color: #6052BA;
}
.pal-violet-world-1 {
  background-color: #1F0935;
}
.pal-violet-world-2 {
  background-color: #3C39AC;
}
.plate-candy-rocks {
  background-color: #D7688F;
}
.pal-candy-rocks-0 {
  background-color: #EF7998;
}
.pal-candy-rocks-1 {
  background-color: #B53B7F;
}
.pal-candy-rocks-2 {
  background-color: #D26395;
}
.plate-the-wanderer {
  background-color: #5D6772;
}
.pal-the-wanderer-0 {
  background-color: #3A4960;
}
.pal-the-wanderer-1 {
  background-color: #6E7C84;
}
.pal-the-wanderer-2 {
  background-color: #5E6F7C;
}
.plate-dusk-valley {
  background-color: #6C62A1;
}
.pal-dusk-valley-0 {
  background-color: #E59AA0;
}
.pal-dusk-valley-1 {
  background-color: #9C88C0;
}
.pal-dusk-valley-2 {
  background-color: #45437C;
}
.plate-tug-at-dawn {
  background-color: #55768F;
}
.pal-tug-at-dawn-0 {
  background-color: #3D80B2;
}
.pal-tug-at-dawn-1 {
  background-color: #0F5270;
}
.pal-tug-at-dawn-2 {
  background-color: #73101B;
}
.plate-old-quarter {
  background-color: #AE777C;
}
.pal-old-quarter-0 {
  background-color: #8C3B47;
}
.pal-old-quarter-1 {
  background-color: #E29D82;
}
.pal-old-quarter-2 {
  background-color: #B9C9DE;
}
.plate-star-whale {
  background-color: #E6E6E6;
}
.pal-star-whale-0 {
  background-color: #1C222D;
}
.pal-star-whale-1 {
  background-color: #4E5560;
}
.pal-star-whale-2 {
  background-color: #BFBFB4;
}
.plate-jar-of-night {
  background-color: #D6D6D6;
}
.pal-jar-of-night-0 {
  background-color: #643B41;
}
.pal-jar-of-night-1 {
  background-color: #927270;
}
.pal-jar-of-night-2 {
  background-color: #B29F9D;
}
.plate-the-seer {
  background-color: #EFF3F2;
}
.pal-the-seer-0 {
  background-color: #7C5A5E;
}
.pal-the-seer-1 {
  background-color: #48232E;
}
.pal-the-seer-2 {
  background-color: #B49D9D;
}
.plate-many-eyes {
  background-color: #D6D6D6;
}
.pal-many-eyes-0 {
  background-color: #9F959D;
}
.pal-many-eyes-1 {
  background-color: #494862;
}
.pal-many-eyes-2 {
  background-color: #F9F9F9;
}
.plate-blue-planet {
  background-color: #287D9A;
}
.pal-blue-planet-0 {
  background-color: #0D3B4C;
}
.pal-blue-planet-1 {
  background-color: #A8C7D1;
}
.pal-blue-planet-2 {
  background-color: #287D9A;
}
.plate-paper-astronaut {
  background-color: #514741;
}
.pal-paper-astronaut-0 {
  background-color: #DACAAB;
}
.pal-paper-astronaut-1 {
  background-color: #55282A;
}
.pal-paper-astronaut-2 {
  background-color: #786966;
}
.plate-piggy-bank-run {
  background-color: #8E6B60;
}
.pal-piggy-bank-run-0 {
  background-color: #988268;
}
.pal-piggy-bank-run-1 {
  background-color: #C49A99;
}
.pal-piggy-bank-run-2 {
  background-color: #663E32;
}
.plate-tide-sphere {
  background-color: #F1F1F1;
}
.pal-tide-sphere-0 {
  background-color: #B2B1B4;
}
.pal-tide-sphere-1 {
  background-color: #0B0B14;
}
.pal-tide-sphere-2 {
  background-color: #848389;
}
.plate-tide-peak {
  background-color: #F1F1F1;
}
.pal-tide-peak-0 {
  background-color: #080814;
}
.pal-tide-peak-1 {
  background-color: #5B5A64;
}
.pal-tide-peak-2 {
  background-color: #9A99A0;
}
.plate-the-mask {
  background-color: #D6D6D6;
}
.pal-the-mask-0 {
  background-color: #3F2520;
}
.pal-the-mask-1 {
  background-color: #9E8D83;
}
.pal-the-mask-2 {
  background-color: #55352D;
}
.plate-sun-mask {
  background-color: #D6D6D6;
}
.pal-sun-mask-0 {
  background-color: #FEF1E3;
}
.pal-sun-mask-1 {
  background-color: #7A685F;
}
.pal-sun-mask-2 {
  background-color: #B2A69E;
}
.plate-rock-hand {
  background-color: #D6D6D6;
}
.pal-rock-hand-0 {
  background-color: #B4B2B3;
}
.pal-rock-hand-1 {
  background-color: #6E696B;
}
.pal-rock-hand-2 {
  background-color: #383334;
}
.plate-drone-hand {
  background-color: #94BAC5;
}
.pal-drone-hand-0 {
  background-color: #DADADA;
}
.pal-drone-hand-1 {
  background-color: #839195;
}
.pal-drone-hand-2 {
  background-color: #E1E1E1;
}
.plate-tug-of-bear {
  background-color: #FFCA2E;
}
.pal-tug-of-bear-0 {
  background-color: #D7AD2E;
}
.pal-tug-of-bear-1 {
  background-color: #A2661C;
}
.pal-tug-of-bear-2 {
  background-color: #CF981C;
}
.plate-pyramid-pal {
  background-color: #DEDBC8;
}
.pal-pyramid-pal-0 {
  background-color: #3D5D7D;
}
.pal-pyramid-pal-1 {
  background-color: #76A0AA;
}
.pal-pyramid-pal-2 {
  background-color: #DEDBC8;
}
.plate-birthday-pizza {
  background-color: #FF8552;
}
.pal-birthday-pizza-0 {
  background-color: #D45743;
}
.pal-birthday-pizza-1 {
  background-color: #FED486;
}
.pal-birthday-pizza-2 {
  background-color: #C7313D;
}
.plate-axe-and-stump {
  background-color: #FCFFC8;
}
.pal-axe-and-stump-0 {
  background-color: #B7724A;
}
.pal-axe-and-stump-1 {
  background-color: #E0C996;
}
.pal-axe-and-stump-2 {
  background-color: #4D3C39;
}
.plate-deck-chair-martini {
  background-color: #FFEED0;
}
.pal-deck-chair-martini-0 {
  background-color: #F48E6D;
}
.pal-deck-chair-martini-1 {
  background-color: #C85459;
}
.pal-deck-chair-martini-2 {
  background-color: #EDCCA9;
}
.plate-late-again {
  background-color: #E7E89A;
}
.pal-late-again-0 {
  background-color: #A87C6C;
}
.pal-late-again-1 {
  background-color: #F8F4D8;
}
.pal-late-again-2 {
  background-color: #C8BC9E;
}
.plate-rain-boots {
  background-color: #FFEFCE;
}
.pal-rain-boots-0 {
  background-color: #F4512C;
}
.pal-rain-boots-1 {
  background-color: #BFE9DE;
}
.pal-rain-boots-2 {
  background-color: #CD9E87;
}
.plate-boat-in-a-bowl {
  background-color: #FF8A86;
}
.pal-boat-in-a-bowl-0 {
  background-color: #54C6BA;
}
.pal-boat-in-a-bowl-1 {
  background-color: #FBFAEE;
}
.pal-boat-in-a-bowl-2 {
  background-color: #9EDBC7;
}
.plate-brain-jar {
  background-color: #004952;
}
.pal-brain-jar-0 {
  background-color: #EEAD8D;
}
.pal-brain-jar-1 {
  background-color: #28787D;
}
.pal-brain-jar-2 {
  background-color: #9F8C7E;
}
.plate-little-rocket {
  background-color: #272533;
}
.pal-little-rocket-0 {
  background-color: #F06D58;
}
.pal-little-rocket-1 {
  background-color: #CED0CD;
}
.pal-little-rocket-2 {
  background-color: #954245;
}
.plate-thumbs-up {
  background-color: #838A9D;
}
.pal-thumbs-up-0 {
  background-color: #FEB699;
}
.pal-thumbs-up-1 {
  background-color: #123349;
}
.pal-thumbs-up-2 {
  background-color: #F6D3BD;
}
.plate-dream-machine {
  background-color: #6B4F5E;
}
.pal-dream-machine-0 {
  background-color: #8C7579;
}
.pal-dream-machine-1 {
  background-color: #866E74;
}
.pal-dream-machine-2 {
  background-color: #978282;
}
.plate-parisian {
  background-color: #EAEAEA;
}
.pal-parisian-0 {
  background-color: #EBD077;
}
.pal-parisian-1 {
  background-color: #51787A;
}
.pal-parisian-2 {
  background-color: #5F3A47;
}
.plate-portlander {
  background-color: #EAEAEA;
}
.pal-portlander-0 {
  background-color: #DA5B44;
}
.pal-portlander-1 {
  background-color: #DAB878;
}
.pal-portlander-2 {
  background-color: #723541;
}
.plate-san-franciscan {
  background-color: #EAEAEA;
}
.pal-san-franciscan-0 {
  background-color: #D85B44;
}
.pal-san-franciscan-1 {
  background-color: #EBD077;
}
.pal-san-franciscan-2 {
  background-color: #662E3C;
}
.plate-seattleite {
  background-color: #EAEAEA;
}
.pal-seattleite-0 {
  background-color: #C22942;
}
.pal-seattleite-1 {
  background-color: #EBD077;
}
.pal-seattleite-2 {
  background-color: #74454D;
}
.plate-brooklynite {
  background-color: #EAEAEA;
}
.pal-brooklynite-0 {
  background-color: #EBD17B;
}
.pal-brooklynite-1 {
  background-color: #C95F49;
}
.pal-brooklynite-2 {
  background-color: #51797B;
}

/*======================
21. Colour Script Keys
========================*/
/* the 24 colour keys: each cell shows its part of the keys sheet; the ribbon shows each key's main colour (generated from the art) */
.sc-key.k1 {
  background-position: 0% 0%;
}
.rb.k1 {
  background-color: #4A90B6;
}
.sc-key.k2 {
  background-position: 20% 0%;
}
.rb.k2 {
  background-color: #90414C;
}
.sc-key.k3 {
  background-position: 40% 0%;
}
.rb.k3 {
  background-color: #FFEFCE;
}
.sc-key.k4 {
  background-position: 60% 0%;
}
.rb.k4 {
  background-color: #FF8A86;
}
.sc-key.k5 {
  background-position: 80% 0%;
}
.rb.k5 {
  background-color: #E7E89A;
}
.sc-key.k6 {
  background-position: 100% 0%;
}
.rb.k6 {
  background-color: #FF8552;
}
.sc-key.k7 {
  background-position: 0% 33.3333%;
}
.rb.k7 {
  background-color: #FFFAEC;
}
.sc-key.k8 {
  background-position: 20% 33.3333%;
}
.rb.k8 {
  background-color: #ED8199;
}
.sc-key.k9 {
  background-position: 40% 33.3333%;
}
.rb.k9 {
  background-color: #FFEED0;
}
.sc-key.k10 {
  background-position: 60% 33.3333%;
}
.rb.k10 {
  background-color: #FFCA2E;
}
.sc-key.k11 {
  background-position: 80% 33.3333%;
}
.rb.k11 {
  background-color: #B08C78;
}
.sc-key.k12 {
  background-position: 100% 33.3333%;
}
.rb.k12 {
  background-color: #5D6E6C;
}
.sc-key.k13 {
  background-position: 0% 66.6667%;
}
.rb.k13 {
  background-color: #4E49B5;
}
.sc-key.k14 {
  background-position: 20% 66.6667%;
}
.rb.k14 {
  background-color: #AD417B;
}
.sc-key.k15 {
  background-position: 40% 66.6667%;
}
.rb.k15 {
  background-color: #86224F;
}
.sc-key.k16 {
  background-position: 60% 66.6667%;
}
.rb.k16 {
  background-color: #8A274D;
}
.sc-key.k17 {
  background-position: 80% 66.6667%;
}
.rb.k17 {
  background-color: #702436;
}
.sc-key.k18 {
  background-position: 100% 66.6667%;
}
.rb.k18 {
  background-color: #5E6F7C;
}
.sc-key.k19 {
  background-position: 0% 100%;
}
.rb.k19 {
  background-color: #E6E6E6;
}
.sc-key.k20 {
  background-position: 20% 100%;
}
.rb.k20 {
  background-color: #287D9A;
}
.sc-key.k21 {
  background-position: 40% 100%;
}
.rb.k21 {
  background-color: #1B1717;
}
.sc-key.k22 {
  background-position: 60% 100%;
}
.rb.k22 {
  background-color: #004952;
}
.sc-key.k23 {
  background-position: 80% 100%;
}
.rb.k23 {
  background-color: #272533;
}
.sc-key.k24 {
  background-position: 100% 100%;
}
.rb.k24 {
  background-color: #FFFAEC;
}