/* Reset, page ground and the shared primitives: the pill and the icon plate.
 * Every value here resolves through design/tokens.css (measured) or
 * design/palette.css (authored). No literal colour lives in site/. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--resurs-font);
  font-size: var(--resurs-size-body);
  line-height: 1.45;
  color: var(--resurs-ink);
  background: var(--resurs-ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--resurs-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--resurs-gutter);
  z-index: 20;
  padding: 12px 18px;
  border-radius: var(--resurs-radius-plate);
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  font-size: var(--resurs-size-small);
}
.skip:focus { top: 14px; }

/* --- the pill ---------------------------------------------------------- */
/* One shape, two grounds: outlined on the photograph, solid on the panel. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--resurs-radius-pill);
  font-size: var(--resurs-size-small);
  white-space: nowrap;
  transition: background var(--resurs-quick) var(--resurs-ease),
              border-color var(--resurs-quick) var(--resurs-ease);
}
.pill .dot {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--resurs-accent);
  color: var(--resurs-on-photo);
  flex: none;
}

.pill-outline {
  padding: 7px 7px 7px 22px;
  border: 1px solid var(--resurs-glass-edge);
  color: var(--resurs-on-photo);
}
.pill-outline .dot { width: 30px; height: 30px; }
.pill-outline:hover { background: var(--resurs-glass-fill); }

.pill-solid {
  padding: 8px 8px 8px 26px;
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  font-size: var(--resurs-size-nav);
  height: var(--resurs-cta-height);
}
.pill-solid .dot { width: 36px; height: 36px; }
.pill-solid:hover { background: var(--resurs-surface); }

/* --- the icon object --------------------------------------------------- */
/* One square under every glyph, so one icon family reads the same on the grey
   tile and on the tinted card — and the one thing on the sheet that is not
   flat. Its face is lit along the top edge and falls away below; a tight
   shadow seats it, a wide one holds it off the ground. The tile beneath is
   untouched: the object floats, the surface does not. Both blocks that use a
   plate size it themselves; nothing about the depth belongs to either. */
.plate {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--resurs-radius-plate);
  background: linear-gradient(
    168deg, var(--resurs-plate-face-top), var(--resurs-plate-face-bottom));
  color: var(--resurs-ink);
  box-shadow:
    inset 0 1px 0 var(--resurs-plate-light),
    inset 0 0 0 1px var(--resurs-plate-edge),
    0 1px 1.5px var(--resurs-plate-seat),
    var(--resurs-plate-cast);
  transition: box-shadow var(--resurs-quick) var(--resurs-ease),
              transform var(--resurs-quick) var(--resurs-ease);
}
@media (prefers-reduced-motion: reduce) { .plate { transition: none; } }
.icon { display: block; }

/* The second tone. One element per glyph carries it, and it resolves through
   the palette like every other colour, so a scheme swap takes the accent with
   it. `accent-solid` beats the root fill="none" because a declaration always
   outranks a presentation attribute. */
.icon .accent { stroke: var(--resurs-accent); }
.icon .accent-solid { fill: var(--resurs-accent); stroke: none; }

/* Quiet catalogue entrance, with a full touch target at every placement. */
.all-services-entrance { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-size:14px; color:var(--resurs-accent); text-underline-offset:4px; }
.all-services-entrance:focus-visible { outline:2px solid var(--resurs-accent); outline-offset:3px; }
@media (min-width:861px) { .section-heading:has(+ .all-services-entrance) { display:inline; } }
@media (max-width:860px) { .all-services-entrance { display:flex; width:fit-content; padding-left:0; } }