@charset "UTF-8";
/* =========================================================================
   ILMS Guest help center · style.css

   CONTENTS
      1. Normalize.css
      2. Tokens
      3. Base
      4. Buttons
      5. Header
      6. Search
      7. Hero
      8. Section titles
      9. Sections
     10. Categories
     11. Cards
     12. Most asked carousel
     13. Still stuck band
     14. Footer
     15. Sky band on inner pages
     16. Sub navigation and breadcrumbs
     17. Page shells
     18. Article
     19. Related articles (same section)
     20. Search results
     21. Pagination
     22. Contact form
     23. Hotel partners
     24. Motion

   HOW THIS SHEET IS ORGANIZED
   - One section per part of the page, in the order above. A rule for a
     part lives in that part's section only; nothing later overrides it.
   - Colours and other theme settings come in once, as --ilms-* tokens in
     section 2. Everything else uses the tokens, never raw setting names.
   - Class names follow block__element--variant (ilms-card__title,
     ilms-button--primary). script.js finds things mainly by data-ilms-*
     attributes and ids; the few classes it also relies on are listed in
     README.md, so check there before renaming one.

   HOW IT SCALES
   - Sizes that should grow with the screen use clamp(): one rule covers a
     small Android phone, a MacBook and a wide monitor, with no jumps.
   - Components that sit in different widths (search, categories, carousel,
     cards) switch layout with container queries, so they respond to the
     room they actually have, not to a guess about the device.
   - Viewport media queries are kept for the few things that really depend
     on the screen: the hero picture crop and reduced motion.
   - Heights tied to the screen use svh/dvh (with a vh fallback) so mobile
     browser bars sliding in and out never make anything jump.
   - Notched phones in landscape: content keeps clear of the safe areas.

   STACKING ORDER (z-index), lowest to highest
       1-5   inside a component (hero layers, carousel rim, header)
       10    footer language menu
       100   skip-to-content link
       8990  page dimmer behind the hotel card
       9000  hotel card and its side tab

   KEPT IN STEP WITH OTHER FILES
   - Hero breakpoint 768px    = <source media> in templates/home_page.hbs
   - Docked hotel card 272px  = HotelCard CONFIG.DOCKED_WIDTH in script.js
   ========================================================================= */

/***** 1. Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/***** 2. Tokens *****/
/* Colours read the theme settings, so the Settings panel and the page stay
   in step; the request-form widget reads the same settings.
   Four brand colours, everything else is a tint of them:
     Charcoal  text, header, band, footer, buttons
     Lime      accents, focus rings, hover
     Forest    links, hotel card
     Cream     page and trays (white for cards) */
:root {
  --ilms-ink: #232427;
  --ilms-link: #527524;
  --ilms-link-hover: #232427;
  --ilms-link-visited: #527524;
  --ilms-lime: #8DC63F;
  --ilms-border: #E4DBD4;
  --ilms-sky: #F6EEE8;
  --ilms-surface: #FFFFFF;
  --ilms-page: #FBF8F5;
  --ilms-brand: #232427;
  --ilms-on-brand: #FFFFFF;
  --ilms-on-dark: #FFFFFF;
  --ilms-hotel-green: var(--ilms-link);

  /* Secondary text is ink at 70% (5.6:1 on the page), never a grey, so it
     clears 4.5:1 on every light surface. */
  --ilms-ink-deep: #18191B;
  --ilms-floor: #F1EAE4;
  --ilms-ink-78: rgba(35, 36, 39, 0.78);
  --ilms-ink-70: rgba(35, 36, 39, 0.7);
  --ilms-ink-62: rgba(35, 36, 39, 0.62);
  --ilms-ink-10: rgba(35, 36, 39, 0.1);
  --ilms-ink-07: rgba(35, 36, 39, 0.07);
  --ilms-on-dark-82: rgba(255, 255, 255, 0.82);
  --ilms-on-dark-30: rgba(255, 255, 255, 0.3);
  --ilms-on-dark-10: rgba(255, 255, 255, 0.1);
  --ilms-lime-ring: rgba(141, 198, 63, 0.35);
  --ilms-lime-edge: rgba(141, 198, 63, 0.6);

  --ilms-radius-card: 18px;
  --ilms-radius-control: 12px;
  --ilms-radius-pill: 999px;
  --ilms-radius-tray: clamp(20px, 2.5vw, 28px);

  /* Every box sits at the same depth. Shadows lean toward the banner's warm
     floor: a tight contact shadow plus a soft lift. */
  --ilms-shadow: 0 1px 2px rgba(60, 40, 25, 0.08), 0 12px 30px -12px rgba(60, 40, 25, 0.3);
  --ilms-shadow-hover: 0 2px 4px rgba(60, 40, 25, 0.06), 0 24px 44px -16px rgba(60, 40, 25, 0.3);
  --ilms-shadow-search: 0 1px 2px rgba(60, 40, 25, 0.08), 0 20px 50px -14px rgba(60, 40, 25, 0.32);
  --ilms-float: 0 2px 6px rgba(30, 40, 20, 0.12), 0 18px 40px -8px rgba(30, 40, 20, 0.35), 0 40px 80px -20px rgba(30, 40, 20, 0.45);
  --ilms-tray-inset: inset 0 0 16px rgba(60, 40, 25, 0.18), inset 0 0 3px rgba(60, 40, 25, 0.1);

  --ilms-font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ilms-font-label: "Oswald", "Source Sans 3", Helvetica, Arial, sans-serif;

  /* Fluid sizes: smallest phone value, a rate, and the desktop cap. vmin
     keeps the hero headline sensible on short landscape phones too. */
  --ilms-gutter: clamp(16px, 4vw, 40px);
  --ilms-measure: 680px;
  --ilms-section-y: clamp(44px, 7vw, 88px);
  --ilms-fs-hero: clamp(28px, calc(1rem + 2.6vmin + 1vw), 54px);
  --ilms-fs-title: clamp(24px, calc(1rem + 1vw), 30px);
  --ilms-fs-page: clamp(28px, calc(1.1rem + 1.2vw), 36px);
  --ilms-fs-band: clamp(26px, calc(1rem + 1.3vw), 34px);
  --ilms-fs-body: 17px;

  /* Safe areas (notches and rounded corners) on phones held sideways. */
  --ilms-safe-l: env(safe-area-inset-left, 0px);
  --ilms-safe-r: env(safe-area-inset-right, 0px);
  --ilms-safe-b: env(safe-area-inset-bottom, 0px);
}

/***** 3. Base *****/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* The footer stays at the bottom on short pages: body is a column, main
   takes the spare height, and the band drops to meet the footer. dvh is
   the visible height on phones; vh is the fallback. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--ilms-page);
  color: var(--ilms-ink);
  font-family: var(--ilms-font);
  font-size: var(--ilms-fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

body > main > * {
  flex: 0 0 auto;
}

body > main > .ilms-band {
  margin-top: auto;
}

h1,
h2,
h3,
h4 {
  color: var(--ilms-ink);
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

a {
  color: var(--ilms-link);
  text-decoration: none;
}

a:hover {
  color: var(--ilms-link-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--ilms-link-visited);
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

button {
  touch-action: manipulation;
}

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

.ilms-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ilms-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--ilms-surface);
  color: var(--ilms-ink);
  font-weight: 600;
}

.ilms-skip:focus {
  left: 16px;
  top: 16px;
}

.ilms-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(var(--ilms-gutter), var(--ilms-safe-l));
  padding-right: max(var(--ilms-gutter), var(--ilms-safe-r));
}

/***** 4. Buttons *****/
.ilms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--ilms-radius-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ilms-button:hover {
  text-decoration: none;
}

.ilms-button:active {
  transform: translateY(1px);
}

.ilms-button--large {
  min-height: 54px;
  padding: 0 clamp(24px, 3vw, 34px);
  font-size: 17px;
}

/* On light surfaces the primary action is charcoal, and flips to lime. */
.ilms-button--primary,
.ilms-button--primary:visited {
  background: var(--ilms-brand);
  color: var(--ilms-on-brand);
}

.ilms-button--primary:hover,
.ilms-button--primary:focus-visible {
  background: var(--ilms-lime);
  color: var(--ilms-ink);
}

/* On charcoal surfaces it is lime, and flips to white. */
.ilms-header .ilms-button--primary,
.ilms-header .ilms-button--primary:visited,
.ilms-band .ilms-button--primary,
.ilms-band .ilms-button--primary:visited {
  background: var(--ilms-lime);
  color: var(--ilms-ink);
}

.ilms-header .ilms-button--primary:hover,
.ilms-header .ilms-button--primary:focus-visible,
.ilms-band .ilms-button--primary:hover,
.ilms-band .ilms-button--primary:focus-visible {
  background: var(--ilms-on-dark);
  color: var(--ilms-ink);
}

.ilms-button--quiet,
.ilms-button--quiet:visited {
  background: var(--ilms-surface);
  border-color: var(--ilms-border);
  color: var(--ilms-ink);
}

.ilms-button--quiet:hover {
  background: var(--ilms-floor);
  color: var(--ilms-ink);
}

.ilms-button--quiet-light,
.ilms-button--quiet-light:visited {
  background: transparent;
  border-color: var(--ilms-on-dark-30);
  color: var(--ilms-on-dark);
}

.ilms-button--quiet-light:hover {
  background: var(--ilms-on-dark-10);
  color: var(--ilms-on-dark);
}

/* Focus on charcoal surfaces uses lime; deep lime would vanish there. */
.ilms-header :focus-visible,
.ilms-band :focus-visible,
.ilms-footer :focus-visible {
  outline-color: var(--ilms-lime);
}

/***** 5. Header *****/
.ilms-header {
  position: relative;
  z-index: 5;
  background: var(--ilms-ink);
  box-shadow: var(--ilms-shadow);
}

.ilms-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  min-height: clamp(60px, 4.2vw + 44px, 76px);
}

.ilms-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.ilms-header__logo img {
  display: block;
  width: auto;
  max-height: clamp(28px, 1.2vw + 24px, 40px);
}

.ilms-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  flex: 0 0 auto;
}

.ilms-header__back,
.ilms-header__back:visited {
  color: var(--ilms-on-dark-82);
  font-size: 16px;
  white-space: nowrap;
}

.ilms-header__back:hover {
  color: var(--ilms-on-dark);
}

.ilms-header .ilms-button {
  min-height: 44px;
  padding: 0 clamp(16px, 2vw, 24px);
  white-space: nowrap;
}

/* Too narrow for both: keep the contact button, drop the home link. */
@media (max-width: 479px) {
  .ilms-header__actions:has(.ilms-button) .ilms-header__back {
    display: none;
  }
}

/***** 6. Search *****/
/* Order inside every search box: input, clear, submit. */
form[role="search"].ilms-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 7px 7px 7px 24px;
  background: var(--ilms-surface);
  border: 1px solid var(--ilms-ink-10);
  border-radius: var(--ilms-radius-pill);
  box-shadow: var(--ilms-shadow);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

form[role="search"].ilms-search:focus-within {
  border-color: var(--ilms-ink);
  box-shadow: var(--ilms-shadow-search), 0 0 0 4px var(--ilms-lime-ring);
}

.ilms-search input[type="search"] {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  /* 16px or more, or iOS zooms the page when the box is tapped. */
  font-size: 17px;
  color: var(--ilms-ink);
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

.ilms-search input[type="search"]:focus {
  outline: none;
}

.ilms-search input[type="search"]::placeholder {
  color: var(--ilms-ink-62);
  opacity: 1;
}

.ilms-search input[type="search"]::-webkit-search-decoration,
.ilms-search input[type="search"]::-webkit-search-cancel-button,
.ilms-search input[type="search"]::-webkit-search-results-button,
.ilms-search input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.ilms-search .clear-button {
  order: 2;
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ilms-radius-pill);
  background: transparent;
  color: var(--ilms-ink-70);
  cursor: pointer;
}

.ilms-search .clear-button:hover {
  background: var(--ilms-floor);
  color: var(--ilms-ink);
}

.search-has-value .clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ilms-search input[type="submit"],
.ilms-search button[type="submit"] {
  order: 3;
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--ilms-radius-pill);
  background: var(--ilms-brand);
  color: var(--ilms-on-brand);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ilms-search input[type="submit"]:hover,
.ilms-search input[type="submit"]:focus-visible,
.ilms-search button[type="submit"]:hover,
.ilms-search button[type="submit"]:focus-visible {
  background: var(--ilms-lime);
  color: var(--ilms-ink);
}

form[role="search"].ilms-search--compact {
  min-height: 48px;
  max-width: 340px;
  padding: 4px 6px 4px 18px;
}

.ilms-search--compact input[type="search"] {
  height: 38px;
  font-size: 16px;
}

/***** 7. Hero *****/
/* The banner keeps its middle empty. The headline and search sit above it
   and the banner is pulled up underneath by --ilms-overlap.

   Everything here is tied to the screen width, so the picture, the text and
   the overlap all grow together and the layout looks the same on every
   screen shape:
   - Phones (under 768px) show the 1.8:1 mobile crop at its own shape,
     edge to edge, under the search. No overlap.
   - Wider screens show the 4:1 banner at its own shape until it reaches
     350px tall; past that the top is trimmed so the objects keep their
     floor. The overlap grows smoothly from nothing (small tablets) and
     stays inside the faded sky, so the search never sits on an object. */
.ilms-hero {
  --ilms-overlap: 0px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--ilms-page) 0%, var(--ilms-sky) 42%, var(--ilms-sky) 78%, var(--ilms-page) 100%);
}

.ilms-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vmin, 14px);
  padding-top: clamp(28px, 5vmin, 56px);
  padding-bottom: clamp(18px, 2.5vmin, 28px);
  text-align: center;
}

/* A soft pool of light behind the search lifts it clear of the scene. */
.ilms-hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -20%;
  width: min(900px, 96%);
  height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.ilms-hero__headline {
  max-width: 15.5em;
  font-size: var(--ilms-fs-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ilms-ink);
  text-wrap: balance;
}

.ilms-hero__subhead {
  max-width: 36em;
  font-size: clamp(16px, calc(0.9rem + 0.3vw), 19px);
  line-height: 1.5;
  color: var(--ilms-ink-78);
  text-wrap: balance;
}

.ilms-hero__search {
  container: ilms-search / inline-size;
  width: 100%;
  max-width: 650px;
  margin-top: clamp(4px, 1vmin, 12px);
}

.ilms-hero__scene {
  position: relative;
  z-index: 1;
  /* The mobile crop's own shape, so phones of every width see all of it. */
  aspect-ratio: 968 / 537;
  margin-top: calc(var(--ilms-overlap) * -1);
  pointer-events: none;
}

.ilms-hero__scene picture,
.ilms-hero__scene img {
  display: block;
  width: 100%;
  height: 100%;
}

.ilms-hero__scene img {
  object-fit: cover;
  /* If the box is shorter than the picture, trim the top so items keep
     their floor. */
  object-position: 50% 100%;
  /* The top dissolves into the sky and the last sliver of floor melts into
     the page below. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 94%, transparent 100%);
}

/* The width here matches the <source media> in home_page.hbs. */
@media (min-width: 768px) {
  .ilms-hero {
    /* 0 at 768px, about 70px on a 13" laptop, 200px cap on wide monitors. */
    --ilms-overlap: clamp(0px, calc(14vw - 108px), 200px);
  }

  .ilms-hero__scene {
    aspect-ratio: auto;
    /* The 4:1 banner at full width, trimmed from the top past 350px. */
    height: min(25vw, 350px);
  }

  .ilms-hero__scene img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 96%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 96%, transparent 100%);
  }
}

/* Hero search: bigger and bolder than the compact one, with a magnifier
   drawn into the input itself so it always lines up with the text. */
.ilms-hero__search form[role="search"].ilms-search {
  min-height: 0;
  padding: 6px;
  background: var(--ilms-surface);
  /* About 1.3px on phones, growing to 2px on desktops. */
  border: clamp(1.25px, calc(0.12vw + 0.9px), 2px) solid var(--ilms-ink);
  box-shadow: 0 10px 30px rgba(35, 36, 39, 0.18);
}

.ilms-hero__search form[role="search"].ilms-search:focus-within {
  border-color: var(--ilms-lime);
  box-shadow: 0 0 0 4px var(--ilms-lime-ring), 0 10px 30px rgba(35, 36, 39, 0.18);
}

.ilms-hero__search .ilms-search input[type="search"] {
  height: 56px;
  padding: 0 12px 0 54px;
  background: no-repeat 20px 50% / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232427' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  font-size: clamp(16px, calc(0.9rem + 0.35vw), 19px);
}

.ilms-hero__search .ilms-search input[type="submit"],
.ilms-hero__search .ilms-search button[type="submit"] {
  min-height: 56px;
  padding: 0 clamp(22px, 2.5vw, 30px);
  background: var(--ilms-ink);
  color: var(--ilms-on-brand);
  font-size: clamp(16px, calc(0.9rem + 0.25vw), 18px);
  font-weight: 700;
}

/* A narrow search box (most phones) stays one pill. The Search button turns
   into a round magnifier button at the end, and the magnifier inside the
   input goes, so the placeholder keeps its room. This follows the box, not
   the device. The button keeps its "Search" label for screen readers. */
@container ilms-search (max-width: 459px) {
  .ilms-hero__search form[role="search"].ilms-search {
    gap: 6px;
    padding: 5px;
  }

  .ilms-hero__search .ilms-search input[type="search"] {
    height: 46px;
    padding: 0 4px 0 16px;
    background-image: none;
  }

  .ilms-hero__search .ilms-search input[type="submit"],
  .ilms-hero__search .ilms-search button[type="submit"] {
    width: 46px;
    min-height: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    background: var(--ilms-ink) no-repeat 50% 50% / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  }

  .ilms-hero__search .ilms-search input[type="submit"]:hover,
  .ilms-hero__search .ilms-search input[type="submit"]:focus-visible,
  .ilms-hero__search .ilms-search button[type="submit"]:hover,
  .ilms-hero__search .ilms-search button[type="submit"]:focus-visible {
    color: transparent;
    background-color: var(--ilms-lime);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232427' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  }
}

/***** 8. Section titles *****/
/* Centred, with a short lime "staple" under the words. */
.ilms-section-title,
.ilms-carousel__head .ilms-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--ilms-font);
  font-size: var(--ilms-fs-title);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-transform: none;
  text-align: center;
  color: var(--ilms-ink);
}

.ilms-section-title::after,
.ilms-carousel__head .ilms-eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--ilms-lime);
}

.ilms-section-title {
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

/* The small uppercase label still used on inner pages. */
.ilms-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--ilms-font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ilms-link);
}

.ilms-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--ilms-lime);
}

.ilms-carousel__head .ilms-eyebrow::before {
  display: none;
}

/***** 9. Sections *****/
.ilms-section {
  padding-bottom: var(--ilms-section-y);
}

.ilms-section--asked {
  padding-top: clamp(24px, 3vw, 32px);
}

.ilms-section--topics {
  padding-bottom: calc(var(--ilms-section-y) + 16px);
}

/***** 10. Categories *****/
/* H-pattern in a recessed tray: two pills on each side and Privacy &
   security centred as the crossbar. When the tray gets narrow it becomes
   two columns with Privacy spanning the middle row. The switch follows the
   tray's own width, so it is right in any page width. */
.ilms-cats {
  container: ilms-cats / inline-size;
  margin-bottom: clamp(40px, 6vw, 64px);
}

nav.ilms-cats__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, auto);
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 4px 0 12px;
}

nav.ilms-cats__row a.ilms-cats__pill,
nav.ilms-cats__row a.ilms-cats__pill:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 6px 20px;
  border: 0;
  border-radius: var(--ilms-radius-pill);
  background: var(--ilms-surface);
  color: var(--ilms-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--ilms-shadow);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

nav.ilms-cats__row a.ilms-cats__pill:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

/* The H tray. */
nav.ilms-cats__row.ilms-cats__row--h {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "tl tl mid mid tr tr"
    ".  bl bl  br br .";
  gap: 16px 20px;
  max-width: 900px;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: var(--ilms-radius-tray);
  background: var(--ilms-page);
  box-shadow: var(--ilms-tray-inset);
}

/* Raised, embossed pills sitting in the tray. */
nav.ilms-cats__row--h a.ilms-cats__pill,
nav.ilms-cats__row--h a.ilms-cats__pill:visited {
  background: var(--ilms-page);
  box-shadow:
    0 0 12px rgba(60, 40, 25, 0.16),
    0 3px 6px rgba(60, 40, 25, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

nav.ilms-cats__row--h a.ilms-cats__pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 16px rgba(60, 40, 25, 0.2),
    0 5px 10px rgba(60, 40, 25, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

nav.ilms-cats__row--h a.ilms-cats__pill:active {
  transform: none;
  box-shadow: inset 0 0 8px rgba(60, 40, 25, 0.2);
}

nav.ilms-cats__row--h a.ilms-cats__pill:focus-visible {
  outline: 3px solid var(--ilms-lime-edge);
  outline-offset: 2px;
}

nav.ilms-cats__row--h .ilms-cats__pill--tl { grid-area: tl; }
nav.ilms-cats__row--h .ilms-cats__pill--bl { grid-area: bl; }
nav.ilms-cats__row--h .ilms-cats__pill--tr { grid-area: tr; }
nav.ilms-cats__row--h .ilms-cats__pill--br { grid-area: br; }
nav.ilms-cats__row--h .ilms-cats__pill--mid { grid-area: mid; }

/* Narrow tray: 2 / 2 / 1. Privacy & security sits alone on the last row,
   centred and the same width as every other pill, so the shape tapers
   while the tray stays a box. Four columns let the last pill span the
   middle two, which is exactly one pill's width. */
@container ilms-cats (max-width: 759px) {
  nav.ilms-cats__row.ilms-cats__row--h {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "tl  tl  tr  tr"
      "bl  bl  br  br"
      ".   mid mid .";
    gap: 12px;
  }

  nav.ilms-cats__row--h a.ilms-cats__pill {
    padding: 6px 12px;
    font-size: 15px;
  }
}

/***** 11. Cards *****/
.ilms-cards {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilms-cards--asked {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.ilms-cards--topics {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.ilms-card {
  display: flex;
}

.ilms-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 14px);
  width: 100%;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--ilms-surface);
  border: 1px solid var(--ilms-ink-10);
  border-radius: var(--ilms-radius-card);
  box-shadow: 0 2px 6px rgba(35, 36, 39, 0.08), 0 8px 24px rgba(35, 36, 39, 0.06);
  color: var(--ilms-ink);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.ilms-card__link:hover,
.ilms-card__link:focus-visible {
  border-color: var(--ilms-lime-edge);
  box-shadow: 0 6px 28px rgba(35, 36, 39, 0.16);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--ilms-ink);
}

.ilms-card__link:visited {
  color: var(--ilms-ink);
}

/* Lime disc with a faint top light and base shade, echoing the soft clay
   finish of the banner's objects. */
.ilms-card__icon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--ilms-radius-pill);
  background-color: var(--ilms-lime);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 6px rgba(35, 60, 10, 0.18),
    0 4px 10px -4px rgba(80, 110, 30, 0.45);
}

.ilms-card__title {
  display: block;
  font-size: clamp(18px, calc(1rem + 0.4vw), 22px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ilms-ink);
}

/* The teaser is the article's opening, up to three lines. */
.ilms-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(16px, calc(0.9rem + 0.15vw), 17px);
  line-height: 1.55;
  color: var(--ilms-ink-78);
}

.ilms-card__teaser * {
  display: inline;
  font: inherit;
  color: inherit;
  margin: 0;
}

.ilms-card__teaser:empty {
  display: none;
}

.ilms-card__description {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ilms-ink-70);
}

.ilms-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ilms-link);
}

.ilms-card__more::after {
  content: "\2192";
  transition: transform 180ms ease;
}

.ilms-card__link:hover .ilms-card__more::after {
  transform: translateX(4px);
}

.ilms-cards--topics .ilms-card__link {
  padding: clamp(22px, 2.8vw, 32px);
  gap: 16px;
}

.ilms-cards--topics .ilms-card__icon {
  width: 56px;
  height: 56px;
  background-size: 28px 28px;
}

/* Icon per card. Replace any of these in the Settings panel. The carousel
   stamps data-icon on each card (copies included); the nth-child rules
   cover the plain list before the script runs. */
.ilms-cards--asked > li:nth-child(1) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="1"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QDM44SPVDH6QHN4QZQVF); }
.ilms-cards--asked > li:nth-child(2) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="2"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QDZGQJHJAC7JKSR1P8EK); }
.ilms-cards--asked > li:nth-child(3) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="3"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QEBWE16H86X1KS8QAF3T); }
.ilms-cards--asked > li:nth-child(4) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="4"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QER8RDRTMN98JYZAE50S); }
.ilms-cards--asked > li:nth-child(5) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="5"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QF3DSVC3YZXV1QHYM9XG); }
.ilms-cards--asked > li:nth-child(6) .ilms-card__icon,
.ilms-cards--asked > li[data-icon="6"] .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QFFYV7SA8KFD7GMV27SB); }
.ilms-cards--topics > li:nth-child(1) .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QFWH81HYFRBXYWVRF6JA); }
.ilms-cards--topics > li:nth-child(2) .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QG79ANS94SZ47MZPARKW); }
.ilms-cards--topics > li:nth-child(3) .ilms-card__icon { background-image: url(/hc/theming_assets/01M520QGHP3AYYQZ53CVHAA7X1); }

/***** 12. Most asked carousel *****/
/* The row reaches past the page column on wide screens (up to 1600px) but
   always stops 80px short of each screen edge. The heading and arrows widen
   with it. On phones the row is simply the page column. */
.ilms-carousel {
  --ilms-row-w: max(100%, min(1600px, 100vw - 160px));
  container: ilms-carousel / inline-size;
}

.ilms-carousel__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 calc((100% - var(--ilms-row-w)) / 2) clamp(16px, 2.4vw, 28px);
}

/* Title centred, controls pinned to the right of the row. */
.ilms-carousel__controls {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Not enough room beside the centred title: controls go under it. */
@container ilms-carousel (max-width: 639px) {
  .ilms-carousel__head {
    flex-direction: column;
  }

  .ilms-carousel__controls {
    position: static;
    transform: none;
    gap: 8px;
  }
}

.ilms-carousel__controls[hidden],
.ilms-carousel__btn[hidden] {
  display: none;
}

.ilms-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ilms-ink-10);
  border-radius: var(--ilms-radius-pill);
  background: var(--ilms-surface);
  color: var(--ilms-ink);
  box-shadow: var(--ilms-shadow);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

@media (hover: hover) {
  .ilms-carousel__btn:hover {
    background: var(--ilms-ink);
    color: var(--ilms-on-dark);
  }
}

.ilms-carousel__btn:active {
  transform: scale(0.95);
}

.ilms-carousel__btn .ilms-icon-play,
.ilms-carousel__btn[aria-pressed="true"] .ilms-icon-pause {
  display: none;
}

.ilms-carousel__btn[aria-pressed="true"] .ilms-icon-play {
  display: block;
}

/* The row sits in a recessed tray that matches the Categories tray. The
   cards run under the tray's inset shadow and are clipped at its rounded
   edge, so they look like they slide behind the rim. The viewport is a size
   container, so card widths follow the tray, whatever the screen. */
.ilms-carousel__viewport {
  container: ilms-row / inline-size;
  position: relative;
  margin: 0 calc((100% - var(--ilms-row-w)) / 2);
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px) clamp(24px, 2.6vw, 30px);
  border-radius: var(--ilms-radius-tray);
  background: var(--ilms-page);
  /* Without JavaScript the row simply scrolls sideways. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* The inset shadow sits on an overlay above the cards, so cards pass under it. */
.ilms-carousel__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 30px rgba(60, 40, 25, 0.3),
    inset 0 0 6px rgba(60, 40, 25, 0.18),
    inset 28px 0 26px -14px rgba(60, 40, 25, 0.38),
    inset -28px 0 26px -14px rgba(60, 40, 25, 0.38);
}

/* About three and a third cards across, with the next always peeking in.
   A narrow tray shows one card and a sliver of the next. */
.ilms-cards.ilms-carousel__track {
  --ilms-gap: clamp(14px, 2cqi, 24px);
  --ilms-card-w: clamp(240px, calc((100cqi - 3 * var(--ilms-gap)) / 3.375), 693px);
  display: flex;
  gap: var(--ilms-gap);
}

@container ilms-row (max-width: 640px) {
  .ilms-cards.ilms-carousel__track {
    --ilms-card-w: 84cqi;
  }
}

.ilms-carousel__track > .ilms-card {
  /* Each card is its own size container so its picture and type follow
     the card, not the screen. */
  container: ilms-card / inline-size;
  flex: 0 0 var(--ilms-card-w);
  /* Flex items default to min-width: auto, and a long title would win over
     the basis above. */
  min-width: 0;
  scroll-snap-align: start;
}

/* Once the script takes over, the row is moved by transform, never by
   scrolling. "clip" cannot be scrolled at all ("hidden" still lets the
   browser nudge it sideways to bring a card into view); "hidden" stays as
   the fallback. Vertical swipes still scroll the page. */
.ilms-carousel.is-enhanced .ilms-carousel__viewport {
  overflow: hidden;
  overflow: clip;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
}

.ilms-carousel.is-enhanced.is-static .ilms-carousel__viewport {
  cursor: auto;
}

.ilms-carousel.is-enhanced .ilms-carousel__track {
  will-change: transform;
}

.ilms-carousel.is-dragging .ilms-carousel__viewport {
  cursor: grabbing;
}

.ilms-carousel.is-dragging .ilms-carousel__track {
  -webkit-user-select: none;
  user-select: none;
}

.ilms-carousel.is-dragging .ilms-card__link {
  transform: none;
  transition: none;
}

/* Carousel card: small icon beside the title, teaser under both. */
.ilms-carousel .ilms-card__link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  column-gap: 14px;
  row-gap: 12px;
  padding: clamp(16px, 6cqi, 20px);
  overflow: hidden;
  isolation: isolate;
  -webkit-user-drag: none;
}

.ilms-carousel .ilms-card__icon {
  width: 36px;
  height: 36px;
  background-size: 18px 18px;
}

.ilms-carousel .ilms-card__title {
  align-self: center;
  font-size: clamp(18px, 5.5cqi, 22px);
}

.ilms-carousel .ilms-card__teaser {
  grid-column: 1 / -1;
}

/* With a picture: the article's first image is a band across the top that
   fades down into the card, sized from the card's own width. */
.ilms-carousel .has-media .ilms-card__link {
  --ilms-media-h: clamp(120px, 42cqi, 200px);
  padding-top: calc(var(--ilms-media-h) - 8px);
}

.ilms-carousel .has-media .ilms-card__teaser {
  -webkit-line-clamp: 2;
}

.ilms-card__media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ilms-media-h, 156px);
  overflow: hidden;
  transform-origin: 50% 0;
  transition: transform 400ms ease;
  pointer-events: none;
}

/* The picture stops a little short of its box, under the solid end of the
   fade, so no sliver of it shows at the edge while it zooms. The fade is
   a gradient laid over the picture: much cheaper to draw than a mask
   while the row moves. */
.ilms-card__media img {
  display: block;
  width: 100%;
  height: calc(100% - 10px);
  object-fit: cover;
}

.ilms-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, var(--ilms-surface) calc(100% - 14px));
  pointer-events: none;
}

/* The whole picture box grows a little on hover (mouse only), so the fade
   always moves with the picture. */
@media (hover: hover) {
  .ilms-carousel .has-media .ilms-card__link:hover .ilms-card__media {
    transform: scale(1.04);
  }
}

/***** 13. Still stuck band *****/
.ilms-band {
  position: relative;
  background: var(--ilms-ink);
  padding: clamp(48px, 7vw, 80px) 0;
}

/* A hairline of lime along the top edge ties the band to the accent. */
.ilms-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ilms-lime);
}

.ilms-band__inner,
.ilms-band__inner--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 24px);
  text-align: center;
}

.ilms-band__text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 720px;
}

.ilms-band__heading {
  font-size: var(--ilms-fs-band);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ilms-on-dark);
  text-wrap: balance;
}

.ilms-band__body {
  font-size: 17px;
  color: var(--ilms-on-dark-82);
}

.ilms-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Small screens: band buttons fill the column so they are easy to hit. */
@media (max-width: 599px) {
  .ilms-band .ilms-button,
  .ilms-band__actions {
    width: 100%;
  }

  .ilms-band__actions .ilms-button {
    flex: 1 1 100%;
  }
}

/* The dead-end pages have little content, so the band carries the page
   instead of leaving the footer stranded mid screen. */
.ilms-band--error {
  display: flex;
  align-items: center;
  min-height: 52vh;
  min-height: 52svh;
  padding: clamp(56px, 8vw, 96px) 0;
}

/***** 14. Footer *****/
/* Shares the band's charcoal; a hairline keeps them apart. */
.ilms-footer {
  background: var(--ilms-ink);
  border-top: 1px solid var(--ilms-on-dark-10);
}

.ilms-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 24px);
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: calc(clamp(32px, 4vw, 40px) + var(--ilms-safe-b));
  text-align: center;
}

.ilms-footer__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 24px);
}

.ilms-footer__group:empty {
  display: none;
}

.ilms-footer a,
.ilms-footer a:visited {
  color: var(--ilms-on-dark-82);
  font-size: 16px;
}

.ilms-footer a:hover {
  color: var(--ilms-on-dark);
}

.ilms-locale {
  position: relative;
}

.ilms-locale__summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--ilms-on-dark-30);
  border-radius: var(--ilms-radius-control);
  color: var(--ilms-on-dark-82);
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

.ilms-locale__summary::-webkit-details-marker {
  display: none;
}

/* Opens upward from the footer and stays on screen at any width. */
.ilms-locale__list {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10;
  min-width: 180px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  max-height: 60svh;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  transform: translateX(-50%);
  background: var(--ilms-surface);
  border: 1px solid var(--ilms-ink-07);
  border-radius: var(--ilms-radius-control);
  box-shadow: var(--ilms-shadow-hover);
  text-align: left;
}

.ilms-footer .ilms-locale__list a,
.ilms-footer .ilms-locale__list a:visited {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ilms-ink);
}

.ilms-footer .ilms-locale__list a:hover {
  background: var(--ilms-floor);
  color: var(--ilms-ink);
}

/***** 15. Sky band on inner pages *****/
/* The same warm sky as the hero, so every page opens the way the home page
   does, then settles into the page colour. */
.ilms-subhead {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--ilms-sky) 0%, var(--ilms-page) 100%);
  margin-bottom: clamp(24px, 4vw, 40px);
}

.ilms-subhead .ilms-page__header {
  margin-bottom: 0;
  padding-bottom: clamp(28px, 3vw, 32px);
}

/* Contact page: heading lines up with the form card. */
.ilms-subhead:has(+ .ilms-page--form) .ilms-container {
  max-width: 860px;
}

/***** 16. Sub navigation and breadcrumbs *****/
.ilms-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(18px, 2.6vw, 28px);
  padding-bottom: clamp(18px, 2.6vw, 28px);
}

/* The search takes a full row once there is no room beside the crumbs. */
.ilms-subnav__search {
  flex: 1 1 260px;
  max-width: 340px;
  margin-left: auto;
}

.ilms-subnav__search form[role="search"].ilms-search--compact {
  max-width: none;
}

@media (max-width: 599px) {
  .ilms-subnav__search {
    flex-basis: 100%;
    max-width: none;
  }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--ilms-ink-70);
  overflow-wrap: anywhere;
}

.breadcrumbs li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--ilms-ink-62);
}

.breadcrumbs a,
.breadcrumbs a:visited {
  color: var(--ilms-ink-70);
}

.breadcrumbs a:hover {
  color: var(--ilms-ink);
}

/***** 17. Page shells *****/
.ilms-page {
  padding-bottom: var(--ilms-section-y);
}

.ilms-page--short {
  padding-bottom: 0;
}

.ilms-page--form {
  max-width: 860px;
}

.ilms-page__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.ilms-page__title {
  font-size: var(--ilms-fs-page);
  font-weight: 700;
  line-height: 1.15;
}

.ilms-page__description {
  font-size: 17px;
  color: var(--ilms-ink-70);
  max-width: var(--ilms-measure);
}

/* Category page: cards fill the row and an uneven last row sits in the
   middle. Each card is at least 280px (or the full width on a phone). */
.ilms-section-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}

.ilms-section-grid > * {
  flex: 1 1 min(100%, 280px);
  max-width: 100%;
}

@media (min-width: 640px) {
  .ilms-section-grid > * {
    max-width: calc((100% - clamp(14px, 2vw, 24px)) / 2);
  }
}

@media (min-width: 1000px) {
  .ilms-section-grid > * {
    max-width: calc((100% - 2 * clamp(14px, 2vw, 24px)) / 3);
  }
}

.ilms-section-card {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ilms-surface);
  border: 1px solid var(--ilms-floor);
  border-radius: var(--ilms-radius-card);
  box-shadow: var(--ilms-shadow);
}

.ilms-section-card__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
}

.ilms-section-card__title a,
.ilms-section-card__title a:visited {
  color: var(--ilms-ink);
}

.ilms-section-card__more {
  display: inline-block;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
}

.ilms-link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilms-link-list a {
  font-size: 17px;
}

.ilms-link-list--large {
  gap: 0;
  margin-bottom: 32px;
}

.ilms-link-list--large li {
  border-bottom: 1px solid var(--ilms-floor);
}

.ilms-link-list--large a {
  display: block;
  padding: clamp(14px, 1.8vw, 18px) 0;
  font-size: clamp(17px, calc(1rem + 0.2vw), 18px);
  font-weight: 600;
}

/***** 18. Article *****/
/* Two columns while there is room for both; one column (sidebar first and
   folded) below that. The sidebar meets the right edge, under the search. */
.ilms-article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--ilms-measure)) minmax(240px, 300px);
  justify-content: space-between;
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: var(--ilms-section-y);
}

.ilms-article {
  min-width: 0;
}

.ilms-article__title {
  font-size: var(--ilms-fs-page);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.ilms-article__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ilms-ink);
  overflow-wrap: break-word;
}

.ilms-article__body > * + * {
  margin-top: 1.1em;
}

.ilms-article__body h2 {
  font-size: clamp(22px, calc(1rem + 0.8vw), 26px);
  font-weight: 600;
  margin-top: 1.8em;
}

.ilms-article__body h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 1.5em;
}

.ilms-article__body img {
  border-radius: var(--ilms-radius-control);
}

/* Embedded videos keep their shape at any width. */
.ilms-article__body iframe,
.ilms-article__body video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ilms-radius-control);
}

.ilms-article__body ul,
.ilms-article__body ol {
  padding-left: 1.3em;
}

.ilms-article__body li + li {
  margin-top: 0.5em;
}

.ilms-article__body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.ilms-article__body th,
.ilms-article__body td {
  padding: 12px 14px;
  border: 1px solid var(--ilms-floor);
  text-align: left;
}

.ilms-article__body th {
  background: var(--ilms-floor);
  font-weight: 600;
}

.ilms-article__body blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ilms-lime);
  color: var(--ilms-ink-70);
}

.ilms-article__body code,
.ilms-article__body pre {
  font-size: 15px;
  background: var(--ilms-floor);
  border-radius: 8px;
}

.ilms-article__body code {
  padding: 2px 6px;
}

.ilms-article__body pre {
  padding: 16px;
  overflow-x: auto;
}

.ilms-attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 36px 0 0;
  padding: 20px;
  list-style: none;
  background: var(--ilms-floor);
  border-radius: var(--ilms-radius-card);
  overflow-wrap: anywhere;
}

.ilms-attachments__size {
  margin-left: 10px;
  font-size: 16px;
  color: var(--ilms-ink-70);
}

.ilms-votes {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--ilms-floor);
}

.ilms-votes__question {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ilms-votes__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ilms-article-aside {
  position: sticky;
  top: 24px;
  min-width: 0;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.ilms-collapsible__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ilms-ink);
  font-family: var(--ilms-font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: default;
}

.ilms-collapsible__toggle svg {
  display: none;
  flex: 0 0 auto;
  transition: transform 150ms ease;
}

.ilms-sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* Sidebar links stay grey once visited, so the list reads as one colour. */
.ilms-sidenav__item,
.ilms-sidenav__item:visited {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ilms-ink-70);
}

.ilms-sidenav__item:hover {
  background: var(--ilms-floor);
  color: var(--ilms-ink);
  text-decoration: none;
}

.ilms-sidenav__item.is-current,
.ilms-sidenav__item.is-current:visited {
  background: var(--ilms-floor);
  color: var(--ilms-ink);
  font-weight: 600;
}

.ilms-sidenav__more {
  display: inline-block;
  margin-top: 12px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .ilms-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ilms-article-aside {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
    padding: 18px;
    background: var(--ilms-floor);
    border-radius: var(--ilms-radius-card);
  }

  .ilms-collapsible__toggle {
    cursor: pointer;
  }

  .ilms-collapsible__toggle svg {
    display: block;
  }

  .ilms-collapsible__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .ilms-collapsible__toggle[aria-expanded="false"] + .ilms-collapsible__body {
    display: none;
  }
}

/***** 19. Related articles (same section) *****/
.ilms-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--ilms-floor);
}

.ilms-related__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ilms-related__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilms-related__link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ilms-link);
}

.ilms-related__link:hover {
  background: var(--ilms-floor);
  color: var(--ilms-link-hover);
  text-decoration: none;
}

.ilms-related__more {
  display: inline-block;
  margin-top: 12px;
  padding: 0 14px;
  font-weight: 600;
}

/***** 20. Search results *****/
.ilms-results > div:first-child:empty {
  margin-bottom: 8px;
}

.ilms-results__heading {
  font-size: clamp(22px, calc(1rem + 0.8vw), 26px);
  font-weight: 600;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.ilms-results__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilms-result {
  padding: clamp(18px, 2.2vw, 24px) 0;
  border-bottom: 1px solid var(--ilms-floor);
}

.ilms-result__title {
  font-size: clamp(18px, calc(1rem + 0.3vw), 20px);
  font-weight: 600;
  margin-bottom: 8px;
}

.ilms-result__snippet {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ilms-ink);
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.ilms-result__snippet em {
  font-style: normal;
  font-weight: 600;
  background: var(--ilms-lime-ring);
  border-radius: 3px;
  padding: 0 2px;
}

.ilms-result__path {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.ilms-result__path li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--ilms-ink-62);
}

.ilms-result__path a,
.ilms-result__path a:visited {
  color: var(--ilms-ink-70);
}

/* No-results message sits in the middle of the page. */
.ilms-empty {
  max-width: var(--ilms-measure);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ilms-empty__heading {
  font-size: clamp(26px, calc(1rem + 1.2vw), 32px);
  font-weight: 700;
}

.ilms-empty__body {
  font-size: 18px;
  color: var(--ilms-ink-70);
}

.ilms-empty .ilms-button {
  margin-top: 10px;
}

/***** 21. Pagination *****/
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.pagination li {
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 16px;
}

.pagination a:hover {
  background: var(--ilms-floor);
  text-decoration: none;
}

.pagination-current {
  background: var(--ilms-ink);
  color: var(--ilms-on-dark);
  font-weight: 600;
}

/***** 22. Contact form *****/
/* The form itself is Zendesk's React bundle; it themes itself from the
   colour settings. These rules only place it and match the buttons. */
.ilms-form {
  padding: clamp(20px, 3vw, 32px);
  background: var(--ilms-surface);
  border: 1px solid var(--ilms-floor);
  border-radius: var(--ilms-radius-card);
  box-shadow: var(--ilms-shadow);
}

.ilms-form .form-field ~ .form-field {
  margin-top: 24px;
}

.ilms-form button[type="submit"] {
  background: var(--ilms-ink);
  border-color: var(--ilms-ink);
  color: var(--ilms-on-brand);
}

.ilms-form button[type="submit"]:hover,
.ilms-form button[type="submit"]:focus-visible {
  background: var(--ilms-lime);
  border-color: var(--ilms-lime);
  color: var(--ilms-ink);
}

/***** 23. Hotel partners *****/
/* A sign-in card for hotel staff with a side tab to bring it back.
   script.js picks the mode from the room actually on the page, so the same
   rule holds on every screen:
   - Docked (html.ilms-hotel-docked): there is a clear margin beside the
     content, so the card sits in it just under the hero and scrolls away
     with the page. Open by default.
   - Tab (everything else: phones, tablets, laptops without that margin):
     the card and tab are fixed to the left edge so they stay in reach. The
     card is closed by default; opening it dims the page.
   html.ilms-hotel-open says whether the card is showing in either mode. */
.ilms-hotel {
  position: fixed;
  z-index: 9000;
  top: 50%;
  left: max(12px, var(--ilms-safe-l));
  width: min(300px, calc(100vw - 64px));
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
  background: var(--ilms-hotel-green);
  color: var(--ilms-on-dark);
  box-shadow: var(--ilms-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(calc(-100% - 40px), -50%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

html.ilms-hotel-open .ilms-hotel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
}

.ilms-hotel__img {
  position: relative;
  height: clamp(120px, 22vh, 170px);
  height: clamp(120px, 22svh, 170px);
  background-size: cover;
  background-position: center 30%;
}

.ilms-hotel__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(82, 117, 36, 0) 35%, rgba(82, 117, 36, 0.8) 80%, var(--ilms-hotel-green) 100%);
}

.ilms-hotel__body {
  position: relative;
  margin-top: -22px;
  padding: 0 22px 24px;
}

.ilms-hotel__kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--ilms-hotel-green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ilms-hotel__title {
  margin: 0 0 6px;
  color: var(--ilms-on-dark);
  font-size: clamp(20px, calc(1rem + 0.5vw), 23px);
  font-weight: 700;
  line-height: 1.15;
}

.ilms-hotel__text {
  margin: 0 0 18px;
  color: var(--ilms-on-dark-82);
  font-size: 15px;
  line-height: 1.4;
}

.ilms-hotel__go,
.ilms-hotel__go:link,
.ilms-hotel__go:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ilms-ink);
  color: var(--ilms-on-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.ilms-hotel__go:hover,
.ilms-hotel__go:focus-visible {
  background: var(--ilms-lime);
  color: var(--ilms-ink);
  text-decoration: none;
}

.ilms-hotel__tuck {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ilms-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* The side tab. It reaches a little past the screen edge so it can pull
   out now and then (script.js adds .is-peeking) without lifting off the
   edge. Fixed size so its letters always sit inside it. It sits low on
   the screen so it does not cover the search when the page opens. */
.ilms-hotel-tab {
  position: fixed;
  z-index: 9000;
  top: clamp(72px, 64vh - 75px, 100vh - 166px);
  top: clamp(72px, 64svh - 75px, 100svh - 166px);
  left: calc(-14px + var(--ilms-safe-l));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 150px;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-radius: 0 14px 14px 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--ilms-hotel-green);
  color: var(--ilms-on-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--ilms-float);
  transform: none;
  transition: transform 0.3s ease;
}

.ilms-hotel-tab span {
  display: block;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ilms-hotel-tab:hover {
  background: var(--ilms-ink);
}

html.ilms-hotel-open .ilms-hotel-tab {
  transform: translateX(-110%);
  animation: none;
}

.ilms-hotel-tab.is-peeking {
  animation: ilms-peek 1.2s ease-in-out;
}

/* Docked: placed in the page under the hero (script.js sets the top). */
html.ilms-hotel-docked .ilms-hotel,
html.ilms-hotel-docked .ilms-hotel-tab {
  position: absolute;
}

html.ilms-hotel-docked .ilms-hotel {
  left: 24px;
  width: 272px; /* = DOCKED_WIDTH in script.js */
  max-height: none;
  overflow: hidden;
  transform: translateX(calc(-100% - 40px));
}

html.ilms-hotel-docked.ilms-hotel-open .ilms-hotel {
  transform: none;
}

html.ilms-hotel-docked .ilms-hotel-tab {
  left: 0;
  width: auto;
  height: auto;
  padding: 18px 10px;
  font-size: 13px;
}

html.ilms-hotel-docked .ilms-hotel__tuck {
  width: 28px;
  height: 28px;
  font-size: 20px;
}

/* Darkens the page: briefly for the docked intro, and behind the open card
   in tab mode, where it also takes the tap that closes the card so that tap
   never opens a link underneath. */
.ilms-dim {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: rgba(18, 20, 16, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
}

html.ilms-intro .ilms-dim {
  opacity: 1;
  transition: opacity 0.5s ease;
}

html.ilms-hotel-open:not(.ilms-hotel-docked) .ilms-dim {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

@keyframes ilms-shake {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -4deg; }
  30% { rotate: 3.5deg; }
  45% { rotate: -2.5deg; }
  60% { rotate: 2deg; }
  75% { rotate: -1deg; }
}

.ilms-hotel.is-shaking,
.ilms-hotel-tab.is-shaking {
  animation: ilms-shake 0.8s ease-in-out;
}

@keyframes ilms-peek {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(14px); }
  45% { transform: translateX(6px); }
  65% { transform: translateX(14px); }
}

/***** 24. Motion *****/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ilms-hotel.is-shaking,
  .ilms-hotel-tab.is-shaking,
  .ilms-hotel-tab.is-peeking {
    animation: none;
  }

  .ilms-carousel .has-media .ilms-card__link:hover .ilms-card__media {
    transform: none;
  }
}