/* /services: the plate at the top, then the nine services as nine tiles of one size, and the
   six core capabilities as cards. The shared parts (the opening, sections, cards and the section
   menu) are in src/styles/components.css and the light behind the page in src/lure/lure.css; the
   plate and the tiles, which only this page has, are here. */

/* The plate is the subject of this page, so the title and its sentence are an introduction to it
   rather than a screen of their own: the opening sits close over the plate. */
.services-page .opening {
  padding-bottom: clamp(8px, 2svh, 24px);
}

/* ------------------------------------------------------------------------------- the plate */

/* The creature drawn as a line plate, with the four words labelled on it. The lamp's pool of
   light is wider than the drawing and is allowed to run off the sides of the page, so it fades
   out instead of stopping on an edge: this is what clips it. */
.plate {
  position: relative;
  overflow: hidden;
  margin: 0;
  /* The lamp reaches about 8% of the drawing's width above it, so the section starts at least
     that far above the drawing. Less than that and the clip cuts the glow on a straight line. */
  padding: max(56px, 8svh) var(--gutter) calc(var(--band) * 0.5);
}

.plate-stage {
  position: relative;
  max-width: 100rem;
  margin-inline: auto;
  /* how much of the width the drawing takes on a wide screen; the labels have the rest */
  --art: 100%;
}

.plate-art {
  position: relative;
  width: var(--art);
  margin-inline: auto;
  aspect-ratio: 1;
}

/* The lamp. A round pool centred on the lure, sized against the drawing so it holds its place
   at any width, and reaching zero at its own edge so it never stops on a straight line. */
.plate-glow {
  position: absolute;
  pointer-events: none;
  left: 85.5%;
  top: 57.5%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgb(255 216 158 / 0.5) 0%,
    rgb(236 168 70 / 0.24) 9%,
    rgb(221 154 51 / 0.08) 29%,
    rgb(221 154 51 / 0.028) 62%,
    rgb(221 154 51 / 0) 100%
  );
}

/* The one thing on the page that moves: the lamp breathes. Only while the site's own script is
   running, so the pause control in the header can stop it (lure-light.ts adds .js and
   .motion-paused), and never for a reader who has asked for stillness. */
@media (prefers-reduced-motion: no-preference) {
  .js .plate-glow,
  .js .plate-cup {
    animation: plate-breathe 7s ease-in-out infinite;
  }
  .js.motion-paused .plate-glow,
  .js.motion-paused .plate-cup {
    animation: none;
  }
}
/* The breath starts and ends at full, and dips in the middle. It has to start at the value the
   page shows with no script running, because the browser photographs an arriving page for the
   page change before the script adds .js: starting the breath at 0.84 dimmed this lamp by a sixth
   in the single frame after the change finished (Sep 15, docs/decisions.md). */
@keyframes plate-breathe {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.84;
  }
}

.plate-drawing {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* The creature, twice. The base copy is the quiet drawing; the warm copy is the same lines
   again, shown only where the lamp's mask lets it through, so the animal is lit by its own
   light. Hairlines in screen pixels, not in drawing units, so the line stays fine whether the
   plate is 350px wide or 900. */
.plate-fish path {
  fill: none;
  stroke: var(--text);
  stroke-width: 1;
  opacity: 0.3;
}
.plate-fish.is-lit path {
  stroke: var(--amber-lit);
  stroke-width: 1.2;
  opacity: 1;
}

.plate-leaders polyline {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1;
}

.plate-dot {
  fill: var(--text);
  r: 14;
}
.plate-dot.is-lit {
  fill: var(--amber);
}

/* ------------------------------------------------------------------- the labels on the plate */

.plate-keys {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate-key {
  margin: 0;
}

.plate-number {
  margin: 0;
  color: var(--amber);
  font-size: var(--t-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* The four words are the logo's own, so they keep the logo's compressed italic, the way the
   home headline and the group words below do. */
.plate-word {
  margin: var(--s-1) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-stretch: 62%;
  font-style: italic;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.01em;
}

/* Full strength, like every other line on this page that is meant to be read. The quiet tint
   holds 4.5:1 over the dark ground but not over the lit parts, and these names sit right beside
   the lamp: measured at 3.1:1 there (tools/qa/contrast.mjs). Rank comes from size and style
   instead, which is what the rest of the site does over the light. */
.plate-services {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  /* 16px until the screen is wide enough for the label column to hold a whole service name on
     one line, then --t-read like the rest of the page. Never below 16. */
  font-size: clamp(1rem, 1.2vw, var(--t-read));
  line-height: 1.45;
  text-wrap: pretty;
}

/* --------------------------------------------- narrow: the numbers go on the drawing itself */

/* Below the width where a label can sit beside the drawing, the plate becomes the pattern the
   phone board uses: four small numbers on the drawing, and the labels read as a list under it.
   Each number is placed clear of the lines it belongs to; they are decoration, and the list
   underneath carries the same numerals as text. */
.plate-marker {
  position: absolute;
  margin: 0;
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
}
.plate-marker.is-track {
  left: 95%;
  top: 51%;
}
.plate-marker.is-unveil {
  left: 40.5%;
  top: 32.5%;
}
.plate-marker.is-protect {
  left: 21.5%;
  top: 15.5%;
}
.plate-marker.is-prevail {
  left: 7%;
  top: 37.5%;
}

/* The labels as a list: a hairline on each and one under the last, like every other list on
   the site. */
@media (max-width: 62.4375em) {
  .plate-leaders {
    display: none;
  }
  .plate-dot {
    r: 28;
  }
  .plate-keys {
    margin-top: var(--s-6);
  }
  .plate-key {
    padding: var(--s-5) 0;
    border-top: 1px solid var(--line);
  }
  .plate-key:last-child {
    border-bottom: 1px solid var(--line);
  }
}

/* ------------------------------------------ wide: the labels sit to the left and right of it */

@media (min-width: 62.5em) {
  .plate-marker {
    display: none;
  }
  /* 52%, not the 57% the board drew: the labels carry whole service names, and at 57% the
     longest of them broke to a second line with one word on it. The second term is a floor
     under the label columns: at 1000px a plain 52% left them 184px wide, every name broke to
     two lines, and the Protect block grew down into the Prevail one. */
  .plate-stage {
    --art: min(52%, calc(100% - 28rem));
  }
  /* The labels hang off the drawing. Each sits at the height its leader line ends at, given as
     a fraction of the drawing's own box: the stage is exactly as tall as the square drawing, so
     a percentage down the stage is the same percentage down the drawing. The half-line pull
     puts the numeral's middle on the leader rather than its top.
     Left of the drawing: from the edge of the stage to a hair short of the art. Right of it:
     the mirror. Neither can reach past the stage, so nothing can push the page sideways. */
  .plate-key {
    position: absolute;
    transform: translateY(-0.55rem);
  }
  .plate-key.is-protect,
  .plate-key.is-prevail {
    left: 0;
    right: calc(50% + var(--art) / 2 + var(--s-6));
    text-align: right;
  }
  .plate-key.is-track,
  .plate-key.is-unveil {
    left: calc(50% + var(--art) / 2 + var(--s-6));
    right: 0;
  }
  .plate-key.is-protect {
    top: 18.7%;
  }
  .plate-key.is-prevail {
    top: 53%;
  }
  .plate-key.is-unveil {
    top: 28.7%;
  }
  .plate-key.is-track {
    top: 57.5%;
  }
}

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

/* Nine services, nine tiles of one size, in a tight grid with hairlines between them: the gaps
   are the grid's own background showing through. The lamp's light sits under the grid and
   shows through those gaps, so the lines nearest the reader glow. The pointer's place is kept
   in --mx and --my, registered so the light glides between readings and inherited so each tile
   reads the grid's copy. */
@property --mx {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 85%;
}
@property --my {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 40%;
}
.tiles {
  --mx: 85%;
  --my: 40%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  border-radius: var(--radius);
  background: var(--line);
  list-style: none;
  overflow: hidden;
  transition:
    --mx 0.16s linear,
    --my 0.16s linear;
}
/* Two columns from 640px, three from 1000px, and every row as tall as the tallest tile. */
@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}
@media (min-width: 1000px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tiles::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--mx) var(--my),
    rgb(255 216 158 / 1),
    rgb(236 168 70 / 0.6) 28%,
    rgb(221 154 51 / 0.14) 58%,
    transparent 74%
  );
}
/* With no pointer to follow (a phone), the light rides down the grid as the reader scrolls.
   Driven by the scroll, no script; still under reduced motion and while motion is paused. */
@supports (animation-timeline: view()) {
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    html.motion-ready:not(.motion-paused) .tiles {
      --mx: 50%;
      animation: tiles-ride linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      transition: none;
    }
    html.motion-paused .tiles {
      animation: none;
    }
  }
}
@keyframes tiles-ride {
  from {
    --my: -10%;
  }
  to {
    --my: 110%;
  }
}

.tile {
  position: relative;
  min-height: 19rem;
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--card-top);
}
/* One column on a phone: each tile is as tall as its own words. */
@media (max-width: 639px) {
  .tile {
    min-height: 0;
  }
}
/* Each tile's own warm pool, at the pointer, only while the pointer is over it. */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--tx, 50%) var(--ty, 50%),
    rgb(236 168 70 / 0.16),
    rgb(221 154 51 / 0.05) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--d-open);
}
@media (hover: hover) {
  .tile:hover::before,
  .tile:focus-within::before {
    opacity: 1;
  }
}
.tile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(20px, 2vw, 28px);
}
.tile-group {
  margin: 0;
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tile-number {
  margin-right: 6px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
/* The icon in a small lamp of its own, drawn like the chip every card on the site uses, and it
   warms with the tile. */
.tile-lamp {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 10px;
  border-radius: 12px;
  background: rgb(221 154 51 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(221 154 51 / 0.28);
  color: var(--amber);
  transition:
    background var(--d-open),
    box-shadow var(--d-open),
    color var(--d-open);
}
@media (hover: hover) {
  .tile:hover .tile-lamp,
  .tile:focus-within .tile-lamp {
    background: rgb(221 154 51 / 0.2);
    box-shadow:
      inset 0 0 0 1px rgb(243 180 90 / 0.6),
      0 0 32px rgb(221 154 51 / 0.28);
    color: var(--amber-lit);
  }
}
.tile-title {
  margin: 8px 0 0;
  font-size: clamp(1.1875rem, 1.45vw, 1.375rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.tile-sub {
  margin: 0;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.tile-more {
  margin-top: auto;
  padding-top: 10px;
}
.tile-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  list-style: none;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.tile-more > summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .tile-more > summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--text-3);
    text-underline-offset: 5px;
  }
}
.tile-more-chevron {
  color: var(--amber);
  transition: rotate var(--d-open);
}
.tile-more[open] .tile-more-chevron {
  rotate: 180deg;
}
.tile-more-hide,
.tile-more[open] .tile-more-read {
  display: none;
}
.tile-more[open] .tile-more-hide {
  display: inline;
}
/* Open, the paragraph takes the place of the icon and the one line, under the name, and the
   "Close" line stays at the foot of the tile where "Read" was. The tile grows to fit, and the
   tiles beside it grow with it, so the grid stays even. */
.tile:has(.tile-more[open]) .tile-lamp,
.tile:has(.tile-more[open]) .tile-sub {
  display: none;
}
.tile-more[open] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tile-more[open] > summary {
  order: 2;
  margin-top: auto;
}
.tile-body {
  order: 1;
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
  animation: tile-open var(--d-open) var(--e-standard) both;
}
@keyframes tile-open {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@media (forced-colors: active) {
  .tile,
  .tile-lamp {
    border: 1px solid CanvasText;
  }
}

/* On paper the page is a plain document: no plate, no light, and the nine services as a list
   with every paragraph shown. */
@media print {
  .plate {
    display: none;
  }
  .tiles {
    display: block;
    padding: 0;
    background: none;
  }
  .tiles::before,
  .tile-lamp,
  .tile-more > summary {
    display: none;
  }
  .tile {
    min-height: 0;
    background: none;
    box-shadow: none;
    border-top: 1px solid #999;
  }
  .tile-more::details-content {
    content-visibility: visible;
    display: block;
  }
}
.service-materials {
  --text: #eee9dd;
  --text-2: #c1bbaf;
  --text-3: #aaa292;
  --amber: #e7a42d;
  --amber-lit: #ffda91;
  --line: #49463c;
  --card: #22231f;
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-data: 'Archivo', sans-serif;
  --t-data: 0.875rem;
  --t-read: 1.0625rem;
  --s-1: 4px;
  --s-3: 12px;
  --s-5: 24px;
  --s-6: 32px;
  --d-open: 180ms;
  --e-standard: ease;
  --gutter: clamp(24px, 3.5vw, 56px);
  --band: 72px;
  position: relative;
}

.service-materials .service-cabinet {
  position: relative;
  width: min(1320px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: clamp(8px, 1.3vw, 18px);
  border: 1px solid #6d6858;
  border-radius: 13px;
  background: linear-gradient(150deg, #777264 0, #35352e 0.7%, #171914 12%, #474539 58%, #161714 85%, #5f594a 100%);
  box-shadow: 0 4px 0 #050605, 0 12px 0 -5px #2b2b23, 0 26px 70px #000b, inset 0 1px 1px #cfc2a287;
}

.service-materials .cabinet-anatomy {
  position: relative;
  overflow: clip;
  padding-block: 16px 28px;
  border: 1px solid #090a08;
  border-radius: 6px 6px 2px 2px;
  background:
    radial-gradient(ellipse at 79% 42%, #63513240, transparent 55%),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px),
    linear-gradient(140deg, #35372f, #20231e 46%, #151713);
  box-shadow: inset 0 2px 3px #000d, inset 0 -1px #716955, 0 1px #ffffff20;
}

.service-materials .cabinet-fastener {
  position: absolute;
  left: 16px;
  width: 9px;
  height: 9px;
  border: 1px solid #060705;
  border-radius: 50%;
  background: linear-gradient(135deg, #858171, #24271f 45%, #070907 48%, #838071 58%, #3f4135);
  box-shadow: 0 1px #ada68b40;
}

.service-materials .cabinet-fastener::after {
  content: '';
  position: absolute;
  left: calc(min(1320px, 100vw - 2 * var(--gutter)) - clamp(16px, 2.6vw, 36px) - 46px);
  top: -1px;
  width: 9px;
  height: 9px;
  border: inherit;
  border-radius: inherit;
  background: inherit;
  box-shadow: inherit;
}

.service-materials .cabinet-fastener-top { top: 16px; }
.service-materials .cabinet-fastener-bottom { bottom: 16px; }
.service-materials .plate { padding: 18px 38px 0; overflow: visible; }
.service-materials .plate-stage { max-width: none; }
.service-materials .plate-glow { opacity: 0.58; animation: none; }
.service-materials .cabinet-anatomy:not(.material-in-view) .plate-glow { animation-play-state: paused !important; }
.service-materials .plate-cup { animation: none; }
.service-materials .plate-fish path {
  fill: #20251e;
  stroke: #bab9a4;
  stroke-width: 1.1;
  opacity: 0.65;
  filter: drop-shadow(1px 2px 0 #030501);
}
.service-materials .plate-fish.is-lit path { fill: #303329; stroke: #e2c187; opacity: 1; }
.service-materials .plate-leaders polyline { stroke: #b6b19e; opacity: 0.65; }
.service-materials .plate-key-link { color: #eee9dd; text-decoration: none; }
.service-materials .plate-key-link:hover .plate-word { color: #ffda91; }
.service-materials .plate-key-link:focus-visible { outline: 2px solid #ffcf80; outline-offset: 8px; }
.service-materials .plate-word { font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
.service-materials .plate-services { font-size: 1rem; line-height: 1.5; }
.service-materials .plate-services li + li { margin-top: 4px; }
.service-materials .plate-marker { padding-inline: 3px; border-radius: 2px; background: #22271e; color: #f1b950; }

.service-materials .cabinet-drawers { margin-top: 16px; }
.service-materials .service-cabinet > .onpage { margin: 18px -2px 0; border-radius: 2px; background: #171a13f5; }
.service-materials .onpage .wrap { padding-inline: 20px; }
.service-materials .cabinet-drawers .sec { padding: 0; background: none; }
.service-materials .cabinet-drawers .wrap { width: auto; max-width: none; padding: 0; margin: 0; }
.service-materials .cabinet-drawers .sec-head { margin: 0; padding: 24px 22px 30px; }
.service-materials .cabinet-drawers .sec-title-row { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); }
.service-materials .cabinet-drawers .sec-title-row > .chip {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #e7a42d;
  background: rgb(221 154 51 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(221 154 51 / 0.18);
}
.service-materials .cabinet-drawers .sec-title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.25; }
.service-materials .tiles {
  gap: 8px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: #0a0c09;
  animation: none;
  transition: none;
}
.service-materials .tiles::before { display: none; }
.service-materials .tile {
  min-height: 23.5rem;
  border: 1px solid #5e5d4d;
  border-radius: 3px;
  background: linear-gradient(135deg, #373930, #242820 45%, #1b1e18);
  box-shadow: inset 0 2px 0 #9c9b8033, inset 2px 0 1px #7b7b6433, inset 0 -3px 1px #070a06, 0 3px 2px #000;
}
.service-materials .tile::before {
  inset: 1px;
  opacity: 0.3;
  border-radius: 2px;
  background: linear-gradient(115deg, #e7ba611f, transparent 54%);
  transition: none;
}
.service-materials .tile-inner { padding: clamp(24px, 2.5vw, 38px); gap: 12px; box-sizing: border-box; }
.service-materials .tile-group { letter-spacing: 0; color: #e7b964; }
.service-materials .tile-number { font-family: inherit; letter-spacing: 0; }
.service-materials .tile-lamp {
  width: 68px;
  height: 68px;
  margin-block: 9px 5px;
  border-radius: 50%;
  color: #d5c292;
  background: radial-gradient(circle at 36% 25%, #3c4033, #1d2219 67%);
  box-shadow: inset 2px 3px 4px #020400c9, inset -1px -1px 1px #bcac7138, 0 1px #9d956442;
}
.service-materials .tile-lamp svg { width: 31px; height: 31px; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #e5d9aa33); }
.service-materials .tile:hover .tile-lamp,
.service-materials .tile:focus-within .tile-lamp { color: #f4d391; background: #252a1e; box-shadow: inset 2px 3px 4px #020400c9, inset -1px -1px 1px #bcac7138, 0 1px #9d956442; }
.service-materials .tile-title { color: #f0ecdf; font-size: clamp(1.25rem, 1.65vw, 1.5rem); }
.service-materials .tile-sub { color: #c1bbaf; line-height: 1.55; }
.service-materials .tile-more > summary { min-height: 44px; padding: 0 6px; color: #f0ecdf; }
.service-materials .tile-more > summary:focus-visible { outline: 2px solid #ffcf80; outline-offset: 4px; }
.service-materials .tile:has(.tile-more[open]) {
  background: linear-gradient(145deg, #11170f, #1d2318);
  box-shadow: inset 2px 4px 12px #000, inset -1px -1px #8c886344;
}
.service-materials .tile:has(.tile-more[open])::before { opacity: 0; }
.service-materials .tile-body { color: #eee9dd; animation: none; }

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready:not(.motion-paused) .service-materials .tile::before {
    opacity: 1;
    background: radial-gradient(360px circle at var(--surface-light-x, 70%) var(--surface-light-y, 15%), #efd19428, transparent 75%);
  }
  html.motion-ready:not(.motion-paused) .service-materials .tile {
    transition: translate 180ms ease-out, box-shadow 180ms ease-out;
  }
  html.motion-ready:not(.motion-paused) .service-materials .tile:where(:hover, :focus-within) { translate: 0 -3px; }
  html.motion-ready:not(.motion-paused) .service-materials .tile:has(summary:active) { translate: 0 1px; }
  html.motion-ready:not(.motion-paused) .service-materials .cabinet-anatomy .plate-drawing {
    transform: perspective(1200px) rotateX(calc(var(--surface-y, 0) * -2deg)) rotateY(calc(var(--surface-x, 0) * 3deg));
    transition: transform 180ms ease-out;
  }
  html.motion-ready:not(.motion-paused) .service-materials .plate-glow {
    translate: calc(var(--surface-x, 0) * 14px) calc(var(--surface-y, 0) * 10px);
    animation: cabinet-lamp-breathe 8s ease-in-out infinite;
  }
  @supports (animation-timeline: view()) {
    html.motion-ready:not(.motion-paused) .service-materials .cabinet-anatomy { view-timeline-name: --cabinet-arrival; }
    html.motion-ready:not(.motion-paused) .service-materials .plate-fish.is-lit {
      animation: cabinet-engraving-arrives linear both;
      animation-timeline: --cabinet-arrival;
      animation-range: entry 0% cover 60%;
    }
  }
}
@keyframes cabinet-lamp-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.68; } }
@keyframes cabinet-engraving-arrives { from { opacity: 0.35; } to { opacity: 1; } }

@media (max-width: 999px) {
  .service-materials .plate { padding: 10px clamp(20px, 4vw, 40px) 0; }
  .service-materials .plate-art { max-width: 530px; }
  .service-materials .plate-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 12px; }
  .service-materials .plate-key { padding: 24px 0 0; }
  .service-materials .plate-key:last-child { border-bottom: 0; }
  .service-materials .plate-key-link { display: block; }
  .service-materials .cabinet-anatomy { padding-bottom: 24px; }
}

@media (max-width: 639px) {
  .service-materials { --gutter: 16px; }
  .service-materials .service-cabinet { padding: 8px; border-radius: 8px; }
  .service-materials .cabinet-fastener { left: 10px; }
  .service-materials .cabinet-fastener::after { display: none; }
  .service-materials .plate { padding-inline: 16px; }
  .service-materials .plate-keys { gap: 22px 20px; }
  .service-materials .plate-word { font-size: 1.75rem; }
  .service-materials .plate-services { font-size: 0.9375rem; }
  .service-materials .plate-number { font-size: 0.8125rem; }
  .service-materials .cabinet-drawers .sec-head { padding: 18px 14px 24px; }
  .service-materials .cabinet-drawers .sec-title-row > .chip { display: none; }
  .service-materials .tile { min-height: 0; }
  .service-materials .tile-inner { padding: 25px; }
  .service-materials .tile-more { margin-top: 7px; }
}

@media (forced-colors: active) {
  .service-materials .service-cabinet,
  .service-materials .cabinet-anatomy,
  .service-materials .tile { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .service-materials .cabinet-fastener,
  .service-materials .tile::before { display: none; }
}

@media print {
  .service-materials { color: black; min-height: 0; padding: 20px 0; }
  .service-materials .service-cabinet { width: 100%; padding: 0; background: white; color: black; box-shadow: none; border: 0; }
  .service-materials .cabinet-anatomy { display: none; }
  .service-materials .tile { min-height: 0; background: white; border: 0; box-shadow: none; }
  .service-materials .tile::before { display: none; }
  .service-materials .tile-title,
  .service-materials .tile-body,
  .service-materials .tile-group { color: black; }
}