/* ============================================================
   Changing Nepal — redesign theme

   Loaded only on pages that declare @section('cn'). Every class
   is prefixed cn- so it cannot collide with the legacy
   style.css, which still serves the pages not yet rebuilt.
   ============================================================ */

:root {
  color-scheme: light;

  --cn-bg:         #FFFFFF;
  --cn-bg-soft:    #F5F5F6;

  /* Black grounds, kept a shade off pure black on large fields so
     type edges do not buzz, with true black underneath. */
  --cn-ink-bg:     #0A0A0C;
  --cn-ink-deep:   #000000;
  --cn-ink-soft:   #17171A;
  --cn-on-ink:     #FFFFFF;
  --cn-on-ink-dim: #A6A6AC;
  --cn-ink-line:   #2C2C31;

  --cn-fg:         #000000;
  --cn-fg-muted:   #55555A;
  --cn-line:       #E2E2E4;
  --cn-line-hard:  #B8B8BC;

  /* Official brand values. The -deep variants are the ones that
     clear 4.5:1 as text on white. */
  --cn-brand:      #00A3E0;
  --cn-brand-hov:  #0090C7;
  --cn-brand-deep: #00769F;
  --cn-green:      #3EB149;
  --cn-green-deep: #1F7A2B;
  --cn-on-brand:   #000000;

  --cn-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --cn-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --cn-data:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --cn-t-hero: clamp(2.6rem, 8vw, 7.5rem);
  --cn-t-h2:   clamp(1.9rem, 4vw, 3.4rem);
  --cn-t-h3:   clamp(1.1rem, 1.6vw, 1.4rem);
  --cn-t-sm:   0.875rem;
  --cn-t-xs:   0.75rem;

  --cn-gutter: clamp(1.15rem, 2.6vw, 2.75rem);
  --cn-maxw:   108rem;
  --cn-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --cn-dur:    260ms;
  --cn-head-h: 5.75rem;
}

/* --- reset ------------------------------------------------- */
.cn *, .cn *::before, .cn *::after { box-sizing: border-box; }

body.cn {
  margin: 0;
  background: var(--cn-bg);
  color: var(--cn-fg);
  font-family: var(--cn-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cn img, .cn video, .cn svg { display: block; max-width: 100%; }
/* Zero specificity via :where(), so a component that sets an explicit
   height is not outranked by the reset. `.cn img` is 0,1,1 and was
   beating single-class rules like .cn-foot__logo and .cn-mini__shot —
   the footer logo rendered at its natural 420x249 and, inverted to
   white, read as a large blank box. */
:where(.cn) :where(img, video) { height: auto; }
.cn a { color: inherit; text-decoration: none; }
/* Zero specificity via :where(), for the same reason as the img rule
   above: `.cn p` is 0,1,1 and silently beat every single-class
   component rule that tried to set a margin — .cn-shero__lead and
   .cn-phead__lead were both being flattened to 0. The reset still
   wins over user-agent defaults, which is all it was ever for. */
:where(.cn) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.cn) :where(h1, h2, h3, h4, p, figure) { margin: 0; }
/* Zero specificity, same reason as the margin and img resets above:
   `.cn button` is 0,1,1 and was beating every single-class component
   rule, so EVERY button in the theme computed to border-width 0 with a
   transparent background — the enquiry options, Back/Next, the office
   tabs and the journal year chips were all rendering as bare text while
   the identical `<a class="cn-btn">` beside them drew its border fine.
   The reset still overrides the user-agent button styling, which is all
   it was for. */
:where(.cn) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.cn :focus-visible {
  outline: 2px solid var(--cn-brand-deep);
  outline-offset: 3px;
}

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

.cn-skip {
  position: absolute; left: var(--cn-gutter); top: -100px; z-index: 200;
  background: var(--cn-ink-deep); color: var(--cn-on-ink);
  padding: 0.7rem 1.1rem; font-size: var(--cn-t-sm);
  transition: top 160ms var(--cn-ease);
}
.cn-skip:focus { top: 0.75rem; }

/* --- layout ------------------------------------------------ */
.cn-wrap {
  width: 100%;
  max-width: var(--cn-maxw);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
}

.cn-rule { height: 1px; background: var(--cn-line); border: 0; margin: 0; transform-origin: left center; }
.cn-ink .cn-rule { background: var(--cn-ink-line); }

/* --- type -------------------------------------------------- */
.cn-eyebrow {
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-fg-muted);
}
.cn-ink .cn-eyebrow { color: var(--cn-on-ink-dim); }
.cn-eyebrow b { color: var(--cn-brand-deep); font-weight: 600; }
.cn-ink .cn-eyebrow b { color: var(--cn-brand); }

.cn-h2 {
  font-family: var(--cn-display);
  font-size: var(--cn-t-h2);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cn-lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--cn-fg-muted);
  max-width: 46ch;
}
.cn-ink .cn-lead { color: var(--cn-on-ink-dim); }

/* Masked line — the child span is what animates up. */
.cn-line { display: block; overflow: hidden; }
.cn-line > span { display: block; }

/* --- buttons ----------------------------------------------- */
/* The fill sweeps up from the bottom edge. isolation + a z-index
   of -1 keeps it behind the label without needing a wrapper. */
.cn-btn {
  --cn-btn-fill: var(--cn-ink-deep);
  --cn-btn-on: var(--cn-on-ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: color var(--cn-dur) var(--cn-ease);
}
.cn-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cn-btn-fill);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 380ms var(--cn-ease);
}
.cn-btn::after { content: "\2197"; font-size: 1em; line-height: 1; }
.cn-btn:hover::before, .cn-btn:focus-visible::before { transform: scaleY(1); }
.cn-btn:hover, .cn-btn:focus-visible { color: var(--cn-btn-on); }

/* Scoped with .cn so these beat the `.cn a { color: inherit }` reset,
   which is specificity 0,1,1 and would otherwise win on anchors —
   painting a solid button's label black on a black ground. */
.cn .cn-btn--brand { --cn-btn-fill: var(--cn-brand); --cn-btn-on: var(--cn-on-brand); color: var(--cn-brand-deep); }
.cn .cn-btn--solid {
  background: var(--cn-ink-deep); color: var(--cn-on-ink);
  border-color: var(--cn-ink-deep);
  --cn-btn-fill: var(--cn-brand); --cn-btn-on: var(--cn-on-brand);
}
.cn-ink .cn-btn { --cn-btn-fill: var(--cn-on-ink); --cn-btn-on: var(--cn-ink-deep); }
/* Genuinely plain, now that the reset is no longer flattening it: it
   carried `border: 1px solid currentColor` from .cn-btn, which was
   invisible while `.cn button { border: 0 }` won — so "Back" sat as an
   equal-weight outlined button beside "Next". It is the quiet half of
   that pair and should read that way. */
.cn .cn-btn--plain {
  border-color: transparent;
  color: var(--cn-fg-muted);
  padding-inline: 0.75rem;
  --cn-btn-fill: transparent;
  --cn-btn-on: var(--cn-fg);
}
.cn .cn-btn--plain:hover, .cn .cn-btn--plain:focus-visible { color: var(--cn-fg); }
.cn-btn--plain::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .cn-btn::before { transition: none; }
}

/* --- icons ------------------------------------------------- */
.cn-ico {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* Brand logos are solid shapes, not line drawings. A CSS declaration
   always beats an SVG presentation attribute, so `fill="currentColor"`
   on the element was being overridden by the rule above — every social
   mark rendered as a thin hollow outline. */
.cn .cn-ico--brand { fill: currentColor; stroke: none; }

/* ============================================================
   Header
   ============================================================ */
.cn-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  background: var(--cn-bg);
  border-bottom: 1px solid var(--cn-line);
  transition: transform 420ms var(--cn-ease),
              background var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease);
}
/* Sitting over the hero video: transparent, white ink. */
.cn-head.is-over {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--cn-on-ink);
}
.cn-head.is-hidden { transform: translateY(-100%); }

.cn-head__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--cn-head-h);
}

.cn-brand { flex: none; display: flex; align-items: center; }
.cn-brand img {
  height: clamp(2.6rem, 3.4vw, 3.4rem);
  width: auto;
  transition: filter var(--cn-dur) var(--cn-ease);
}
/* White while the header sits over the hero. The flatten is only
   legible because the asset is now 420px wide — at the original 140px
   the gear and wordmark ran together into one shape. */
.cn-head.is-over .cn-brand img { filter: brightness(0) invert(1); }

.cn-nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); margin-left: auto; }
.cn-nav__list { display: flex; align-items: center; gap: clamp(0.4rem, 1.3vw, 1.35rem); }
.cn-nav__item { position: static; }

.cn-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.15rem;
  font-size: var(--cn-t-sm);
  font-weight: 500;
  white-space: nowrap;
}
.cn-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--cn-ease);
}
.cn-nav__link:hover::after,
.cn-nav__link:focus-visible::after,
.cn-nav__link.is-on::after { transform: scaleX(1); }
.cn-nav__link.is-on { color: var(--cn-brand-deep); }
.cn-head.is-over .cn-nav__link.is-on { color: var(--cn-brand); }

.cn-nav__caret { transition: transform var(--cn-dur) var(--cn-ease); }
.cn-nav__item.is-open .cn-nav__caret { transform: rotate(180deg); }

.cn-nav__actions { display: flex; align-items: center; gap: 0.5rem; }

.cn-iconbtn {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--cn-line);
  font-size: 1.05rem;
  transition: background var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease);
}
.cn-head.is-over .cn-iconbtn { border-color: rgba(255,255,255,0.35); }

/* The search control sits directly beside "Get a quote" in the header, so
   it matches that button's height rather than the 2.5rem the icon buttons
   use elsewhere — side by side, a 40px square against a 52px button read
   as two different sizes of the same thing. Kept square so it stays an
   icon rather than becoming a second button competing with the CTA. */
/* Matches the Get a quote button's height only while that button is
   actually there. Below 68rem the CTA is hidden and the search control
   sits next to the 2.5rem burger, where a 3.25rem square looked like a
   mistake. */
@media (min-width: 68rem) {
  .cn-searchbtn { width: 3.25rem; height: 3.25rem; }
}
.cn-iconbtn:hover, .cn-iconbtn:focus-visible {
  background: var(--cn-ink-deep);
  border-color: var(--cn-ink-deep);
  color: var(--cn-on-ink);
}

.cn-head__cta { display: none; }
@media (min-width: 68rem) { .cn-head__cta { display: inline-flex; } }

/* --- mega panel -------------------------------------------- */
.cn-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--cn-bg);
  color: var(--cn-fg);
  border-top: 1px solid var(--cn-line);
  border-bottom: 1px solid var(--cn-line);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--cn-dur) var(--cn-ease),
              transform var(--cn-dur) var(--cn-ease),
              visibility 0s linear var(--cn-dur);
}
.cn-mega.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--cn-dur) var(--cn-ease),
              transform var(--cn-dur) var(--cn-ease),
              visibility 0s linear 0s;
}

.cn-mega__inner {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) { .cn-mega__inner { grid-template-columns: 15rem 1fr; } }

.cn-mega__aside .cn-h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin-block: 0.5rem 0.9rem; }

/* ---------- drawer search field ----------
   The header dropdown was removed: search lives beside the machine
   cards it filters, so the icon links there instead. The drawer keeps
   an inline field because a phone menu has nowhere better to put it. */
.cn-search__ico { display: grid; place-items: center; color: var(--cn-fg-muted); flex: none; }
.cn-search__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cn-line);
  border-radius: 0;
}
.cn-search__field:focus { outline: none; border-bottom-color: var(--cn-brand); }
.cn-search__field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.cn-mega__grid {
  display: grid;
  gap: 1px;
  background: var(--cn-line);
  border: 1px solid var(--cn-line);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.cn-cat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--cn-bg);
  transition: background var(--cn-dur) var(--cn-ease);
}
.cn-cat:hover, .cn-cat:focus-visible { background: var(--cn-bg-soft); }

/* A drawn mark in a ruled square, so every row weighs the same
   regardless of what artwork the category happens to carry. */
.cn-cat__mark {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border: 1px solid var(--cn-line);
  /* Full-strength ink, not the muted grey: these are the only thing
     identifying each row at a glance, so they carry the same weight
     as the label beside them. */
  color: var(--cn-fg);
  transition: background var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease);
}
.cn-cat__mark .cn-ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.75; }
.cn-cat:hover .cn-cat__mark, .cn-cat:focus-visible .cn-cat__mark {
  background: var(--cn-brand);
  border-color: var(--cn-brand);
  color: var(--cn-on-brand);
}
.cn-cat__name { font-size: var(--cn-t-sm); font-weight: 600; line-height: 1.25; }

/* --- mobile drawer ----------------------------------------- */
.cn-burger { display: grid; }
@media (min-width: 68rem) { .cn-burger { display: none; } }
@media (max-width: 67.99rem) { .cn-nav__list { display: none; } }

.cn-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cn-ink-deep);
  color: var(--cn-on-ink);
  transform: translateY(-100%);
  transition: transform 480ms var(--cn-ease);
  overflow-y: auto;
}
.cn-drawer.is-open { transform: none; }

.cn-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--cn-head-h);
  border-bottom: 1px solid var(--cn-ink-line);
}
.cn-drawer__top img { height: 2.6rem; width: auto; filter: brightness(0) invert(1); }
.cn-drawer__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--cn-ink-line); font-size: 1.1rem; }

.cn-drawer__list { padding-block: clamp(1.5rem, 5vw, 3rem); }
.cn-drawer__list > li { border-bottom: 1px solid var(--cn-ink-line); }
.cn-drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
  font-family: var(--cn-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  width: 100%;
  text-align: left;
}
.cn-drawer__link.is-on { color: var(--cn-brand); }
.cn-drawer__meta { padding-block: 1.5rem 3rem; display: grid; gap: 0.6rem; font-size: var(--cn-t-sm); color: var(--cn-on-ink-dim); }

/* --- search overlay ---------------------------------------- */
.cn-search {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10,10,12,0.96);
  color: var(--cn-on-ink);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  /* Opening flips visibility immediately so the field can take focus
     on the next frame; closing holds it visible until the fade ends. */
  transition: opacity var(--cn-dur) var(--cn-ease), visibility 0s linear var(--cn-dur);
}
.cn-search.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--cn-dur) var(--cn-ease), visibility 0s linear 0s;
}
.cn-search__form { display: flex; align-items: center; gap: 1rem; width: min(46rem, 88vw); border-bottom: 1px solid var(--cn-ink-line); }
.cn-search__form input {
  flex: 1; background: none; border: 0; color: inherit;
  font-family: var(--cn-display); font-size: clamp(1.5rem, 5vw, 2.6rem);
  padding: 0.75rem 0;
}
.cn-search__form input::placeholder { color: var(--cn-on-ink-dim); }
.cn-search__close { position: absolute; top: 1.5rem; right: var(--cn-gutter); font-size: 1.4rem; }

/* ============================================================
   Footer
   ============================================================ */
.cn-foot { background: var(--cn-ink-deep); color: var(--cn-on-ink); }

/* ---------- the band is the button ----------
   The whole strip is one link. It inverts to brand blue on hover, so
   the target is the full width of the page rather than a small button
   somebody has to aim at. */
.cn-blast {
  display: block;
  background: #0B1F26;
  color: var(--cn-on-ink);
  transition: background var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease);
}
.cn-blast:hover, .cn-blast:focus-visible {
  background: var(--cn-brand);
  color: var(--cn-on-brand);
}

.cn-blast__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Set on its side down the left, the way a spine label reads. */
.cn-blast__label {
  flex: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cn-blast__type {
  font-family: var(--cn-display);
  font-size: clamp(2.4rem, 9vw, 7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.cn-blast__arrow {
  flex: none;
  margin-left: auto;
  display: grid; place-items: center;
  width: clamp(3rem, 5.5vw, 4.5rem);
  height: clamp(3rem, 5.5vw, 4.5rem);
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease),
              transform 380ms var(--cn-ease);
}
.cn-blast__arrow .cn-ico { width: 42%; height: 42%; stroke-width: 1.6; }
.cn-blast:hover .cn-blast__arrow,
.cn-blast:focus-visible .cn-blast__arrow {
  background: var(--cn-ink-deep);
  color: var(--cn-on-ink);
  transform: translate(4px, -4px);
}
@media (prefers-reduced-motion: reduce) {
  .cn-blast, .cn-blast__arrow { transition: none; }
  .cn-blast:hover .cn-blast__arrow { transform: none; }
}

/* ---------- the promise + contact facts ---------- */
.cn-foot__say {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 62rem) { .cn-foot__say { grid-template-columns: 1fr 1fr; } }

.cn-foot__claim {
  font-family: var(--cn-display);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.cn-foot__facts { display: grid; gap: 0.6rem; margin: 0; align-content: start; }
.cn-foot__facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
}
@media (min-width: 34rem) {
  .cn-foot__facts > div { grid-template-columns: 7rem 1fr; gap: 1rem; align-items: baseline; }
}
.cn-foot__facts dt {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cn-on-ink-dim);
}
.cn-foot__facts dd { margin: 0; font-size: var(--cn-t-sm); }
.cn-foot__facts a { display: block; }
.cn-foot__facts a:hover { color: var(--cn-brand); }

/* ---------- numbered columns ---------- */
.cn-foot__cols {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 62rem) { .cn-foot__cols { grid-template-columns: repeat(4, 1fr); } }
.cn-foot__cols > * { min-width: 0; }

.cn-foot__col { border-top: 1px solid var(--cn-ink-line); padding-top: 1rem; }
.cn-foot__n {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.14em; color: var(--cn-brand);
}
.cn-foot__col h3 {
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-on-ink-dim);
  margin-bottom: 1rem;
}
.cn-foot__col li { font-size: var(--cn-t-sm); }
.cn-foot__col li + li { margin-top: 0.5rem; }
.cn-foot__plain li { color: var(--cn-brand); }

/* Swap links — the label slides up and a brand-coloured copy
   takes its place. */
.cn-swap a {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.5em;
  font-size: var(--cn-t-sm);
}
.cn-swap a span {
  display: block;
  transition: transform 340ms var(--cn-ease);
}
.cn-swap a span::after {
  content: attr(data-label);
  position: absolute;
  left: 0; top: 100%;
  color: var(--cn-brand);
}
.cn-swap a:hover span, .cn-swap a:focus-visible span { transform: translateY(-100%); }

/* ---------- socials (kept for other surfaces) ---------- */
.cn-socials { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.cn-socials a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--cn-ink-line);
  transition: background var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease);
}
.cn-socials a:hover, .cn-socials a:focus-visible { background: var(--cn-brand); color: var(--cn-on-brand); border-color: var(--cn-brand); }

.cn-foot__contact { display: grid; gap: 1rem; font-size: var(--cn-t-sm); }
.cn-foot__contact .cn-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.cn-foot__contact .cn-ico { margin-top: 0.35em; color: var(--cn-brand); }
.cn-foot__contact a { color: var(--cn-on-ink-dim); display: block; }
.cn-foot__contact a:hover { color: var(--cn-on-ink); }
.cn-foot__title {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cn-on-ink-dim); margin-bottom: 1.15rem;
}

/* --- marquee strip ----------------------------------------- */
.cn-strip {
  border-top: 1px solid var(--cn-ink-line);
  overflow: hidden;
  padding-block: 0.9rem;
}
.cn-strip__track { display: flex; width: max-content; animation: cn-slide 38s linear infinite; }
.cn-strip__track > span {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cn-on-ink-dim);
  white-space: nowrap;
}
.cn-strip__track > span i { font-style: normal; color: var(--cn-brand); }
.cn-strip:hover .cn-strip__track { animation-play-state: paused; }
@keyframes cn-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cn-strip__track { animation: none; } }

.cn-foot__base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--cn-ink-line);
  font-size: var(--cn-t-xs);
  color: var(--cn-on-ink-dim);
}
.cn-foot__base a:hover { color: var(--cn-on-ink); }

/* --- whatsapp ---------------------------------------------- */
.cn-wa {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 80;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: #25D366; color: #000;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  transition: transform var(--cn-dur) var(--cn-ease);
}
.cn-wa:hover { transform: translateY(-3px); }
.cn-wa .cn-ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }

/* ============================================================
   Shared page furniture — sections, rails and cards.
   Lives here rather than in cn-home.css because the product,
   category and journal pages all build from the same parts.
   ============================================================ */

/* ---------- section scaffolding ---------- */
.cn-sec { padding-block: clamp(3.5rem, 8vw, 8rem); }
.cn-sec--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.cn-sec--ink { background: var(--cn-ink-bg); color: var(--cn-on-ink); }

.cn-sec__head {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
  grid-template-columns: 1fr;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 62rem) {
  .cn-sec__head { grid-template-columns: minmax(0, 1fr) auto; }
}
.cn-sec__head .cn-eyebrow { margin-bottom: 0.75rem; }


/* ============================================================
   Horizontal rail
   ============================================================ */
.cn-rail { position: relative; }
.cn-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* The resting scrollLeft must be a true 0, otherwise the Prev
     button can never disable itself. */
  scroll-padding-inline: 0;
  padding-bottom: 1rem;
  /* The progress bar under the rail reports position now, so the
     native bar is just a second, uglier copy of the same thing. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cn-rail__track > * { scroll-snap-align: start; }
.cn-rail__track::-webkit-scrollbar { display: none; }

.cn-rail__nav { display: flex; gap: 0.5rem; align-items: center; }
.cn-rail__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--cn-line);
  transition: background var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease), opacity var(--cn-dur);
}
.cn-rail__btn:hover:not(:disabled) { background: var(--cn-ink-deep); border-color: var(--cn-ink-deep); color: var(--cn-on-ink); }
.cn-rail__btn:disabled { opacity: 0.3; cursor: default; }
.cn-sec--ink .cn-rail__btn { border-color: var(--cn-ink-line); }
.cn-sec--ink .cn-rail__btn:hover:not(:disabled) { background: var(--cn-on-ink); border-color: var(--cn-on-ink); color: var(--cn-ink-deep); }
.cn-rail__btn .cn-ico { width: 1.15rem; height: 1.15rem; }

/* ---------- category card ---------- */
.cn-tile { position: relative; display: block; overflow: hidden; background: var(--cn-bg-soft); }
.cn-tile__shot { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; transition: transform 700ms var(--cn-ease); }
.cn-tile:hover .cn-tile__shot { transform: scale(1.05); }
.cn-tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.15rem;
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0));
  color: #fff;
}
.cn-tile__name { font-family: var(--cn-display); font-size: var(--cn-t-h3); font-weight: 700; line-height: 1.1; }
.cn-tile__n { font-family: var(--cn-data); font-size: var(--cn-t-xs); color: rgba(255,255,255,0.75); }

/* ---------- machine card ---------- */
.cn-card { display: flex; flex-direction: column; background: var(--cn-bg); border: 1px solid var(--cn-line); height: 100%; }
.cn-sec--ink .cn-card { background: var(--cn-ink-soft); border-color: var(--cn-ink-line); }
/* Same reasoning as the home rail: these are posters with a branded
   header and set text, at ratios from 0.59 to 1.84. Cropping them to a
   fixed frame cuts the header off some and the caption off others, so
   they are contained whole on a soft ground. */
.cn-card__shot {
  position: relative; overflow: hidden;
  background: #f3f3f3;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.cn-card__shot img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--cn-ease); }
.cn-card:hover .cn-card__shot img { transform: scale(1.04); }
.cn-card { transition: border-color var(--cn-dur) var(--cn-ease), transform 380ms var(--cn-ease), box-shadow 380ms var(--cn-ease); }
.cn-card:hover, .cn-card:focus-visible {
  border-color: var(--cn-brand);
  transform: translateY(-5px);
  box-shadow: 0 20px 36px -24px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .cn-card { transition: none; }
  .cn-card:hover { transform: none; }
}
.cn-card__flag {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: var(--cn-brand); color: var(--cn-on-brand);
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.55rem;
}
.cn-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.15rem; flex: 1; }
.cn-card__name { font-family: var(--cn-display); font-size: var(--cn-t-h3); font-weight: 700; line-height: 1.15; }
.cn-card__desc { font-size: var(--cn-t-sm); color: var(--cn-fg-muted); }
.cn-sec--ink .cn-card__desc { color: var(--cn-on-ink-dim); }

/* Specs only render for the fields a machine actually has, so the
   row count varies — a flex list, not a fixed grid. */
.cn-spec { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.cn-spec span {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  border: 1px solid var(--cn-line); padding: 0.2rem 0.5rem;
  color: var(--cn-fg-muted);
}
.cn-sec--ink .cn-spec span { border-color: var(--cn-ink-line); color: var(--cn-on-ink-dim); }
.cn-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-top: 1px solid var(--cn-line);
  padding: 0.85rem 1.15rem;
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cn-sec--ink .cn-card__foot { border-color: var(--cn-ink-line); }
.cn-card__price { color: var(--cn-brand-deep); font-weight: 500; }
.cn-sec--ink .cn-card__price { color: var(--cn-brand); }
.cn-card__go { display: inline-flex; align-items: center; gap: 0.4rem; }
.cn-card:hover .cn-card__go { color: var(--cn-brand-deep); }
.cn-sec--ink .cn-card:hover .cn-card__go { color: var(--cn-brand); }


/* ============================================================
   Journal
   ============================================================ */
.cn-posts { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cn-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cn-posts { grid-template-columns: repeat(3, 1fr); } }
.cn-post { display: flex; flex-direction: column; gap: 0.85rem; }
.cn-post__shot { overflow: hidden; background: var(--cn-bg-soft); aspect-ratio: 3 / 2; }
.cn-post__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--cn-ease); }
.cn-post:hover .cn-post__shot img { transform: scale(1.05); }
.cn-post__date { font-family: var(--cn-data); font-size: var(--cn-t-xs); color: var(--cn-fg-muted); letter-spacing: 0.1em; }
.cn-post__t { font-family: var(--cn-display); font-size: var(--cn-t-h3); font-weight: 700; line-height: 1.2; }
.cn-post:hover .cn-post__t { color: var(--cn-brand-deep); }
.cn-post__d { font-size: var(--cn-t-sm); color: var(--cn-fg-muted); }


/* Grid items default to min-width:auto, so a child wider than its
   track pushes the grid past the page and the document scrolls
   sideways. Applies wherever these grids are used. */
.cn-posts > *, .cn-steps > *, .cn-mega__grid > *, .cn-grid > * { min-width: 0; }

/* ============================================================
   Enquiry form — shared

   Lives here rather than in cn-page.css because the guided form
   appears both on the contact page and as the closing call to
   action on the home page, and home does not load cn-page.css.
   ============================================================ */

/* ---------- plain form ----------
   Hidden by default. It is here so the page still works without
   JavaScript and so the wizard has real inputs to write into — but
   it used to start visible and rely on JS to hide it, which meant a
   slow or failed script left two forms on the page. --------------- */
.cn-fields { display: none; gap: 1.15rem; max-width: 34rem; }

/* Server-side validation bounced the submission back: show the plain
   form with its messages rather than a wizard the visitor would have
   to walk through again. */
.cn-enquiry--errors .cn-ask { display: none; }
.cn-enquiry--errors .cn-fields { display: grid; }
.cn-field { display: grid; gap: 0.4rem; margin: 0; }
.cn-field label {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-fg-muted);
}
.cn-field input, .cn-field textarea {
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cn-line-hard);
  background: var(--cn-bg);
  color: var(--cn-fg);
  border-radius: 0;
  width: 100%;
}
.cn-field input:focus-visible, .cn-field textarea:focus-visible { border-color: var(--cn-brand-deep); }
.cn-field textarea { resize: vertical; }

.cn-alert {
  border-left: 2px solid var(--cn-crit, #C0392B);
  background: var(--cn-bg-soft);
  padding: 0.9rem 1.15rem;
  font-size: var(--cn-t-sm);
}
.cn-alert ul { list-style: disc; padding-left: 1.1rem; }

/* ============================================================
   Guided enquiry

   One question per screen. Options are real buttons, not radios:
   a click and a keyboard Enter then do the same thing — select and
   advance — instead of arrow-keys skipping someone forward.
   ============================================================ */
.cn-ask { border: 1px solid var(--cn-line); max-width: 42rem; }

.cn-ask__bar { padding: 1.15rem 1.35rem 0; }
.cn-ask__count {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-fg-muted);
  margin-bottom: 0.6rem;
}
.cn-ask__track { display: block; height: 2px; background: var(--cn-line); }
.cn-ask__fill {
  display: block; height: 100%; width: 0;
  background: var(--cn-brand);
  transition: width 380ms var(--cn-ease);
}
@media (prefers-reduced-motion: reduce) { .cn-ask__fill { transition: none; } }

.cn-ask__body { padding: clamp(1.35rem, 3vw, 2rem) 1.35rem; }
.cn-ask__q {
  font-family: var(--cn-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.cn-ask__q:focus-visible { outline: none; }
.cn-ask__help { font-size: var(--cn-t-sm); color: var(--cn-fg-muted); margin-top: 0.6rem; }

.cn-ask__options { display: grid; gap: 0.5rem; margin-top: 1.35rem; }
.cn-ask__opt {
  display: grid; gap: 0.15rem;
  text-align: left;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cn-line);
  transition: border-color var(--cn-dur) var(--cn-ease), background var(--cn-dur) var(--cn-ease);
}
.cn-ask__opt:hover, .cn-ask__opt:focus-visible { border-color: var(--cn-fg); background: var(--cn-bg-soft); }
.cn-ask__opt.is-picked { border-color: var(--cn-brand); background: rgba(0,163,224,0.07); }
.cn-ask__opt b { font-weight: 600; font-size: var(--cn-t-sm); }
.cn-ask__opt span { font-size: var(--cn-t-xs); color: var(--cn-fg-muted); }

.cn-ask__set { display: grid; gap: 1rem; margin-top: 1.35rem; }
.cn-ask__err { font-size: var(--cn-t-xs); color: var(--cn-crit, #C0392B); }

.cn-ask__review { display: grid; gap: 0; margin-top: 1.35rem; border-top: 1px solid var(--cn-line); }
.cn-ask__review > div {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem;
  align-items: baseline;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--cn-line);
}
.cn-ask__review dt {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-fg-muted);
}
.cn-ask__review dd { margin: 0; font-size: var(--cn-t-sm); grid-column: 1; }
.cn-ask__edit {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cn-brand-deep);
  text-decoration: underline; text-underline-offset: 0.2em;
}

.cn-ask__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-top: 1px solid var(--cn-line);
}
.cn-ask__nav .cn-btn[disabled] { opacity: 0.35; pointer-events: none; }


/* ============================================================
   Guided enquiry — presence

   The first pass was a hairline box on white, which read as an
   unfinished wireframe. It now sits on its own raised surface with
   a brand rail, and every option behaves like something you can
   press.
   ============================================================ */
.cn-ask {
  position: relative;
  border: 1px solid var(--cn-line-hard);
  background: var(--cn-bg);
  box-shadow: 0 26px 50px -34px rgba(0,0,0,0.45);
  overflow: hidden;
}
/* A brand edge down the left so the panel reads as active. */
.cn-ask::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--cn-brand), var(--cn-green));
}

.cn-ask__bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem clamp(1.35rem, 3vw, 2rem) 0;
}
.cn-ask__count { margin: 0; flex: none; }
.cn-ask__count span { color: var(--cn-brand-deep); font-weight: 600; }
.cn-ask__track { flex: 1; height: 3px; background: var(--cn-line); }
.cn-ask__fill { background: linear-gradient(to right, var(--cn-brand), var(--cn-green)); }

.cn-ask__body { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.35rem, 3vw, 2rem); }
.cn-ask__q { text-wrap: balance; }

/* Options: a lettered chip, the label, and an arrow that arrives on
   hover so the whole row reads as pressable. */
.cn-ask__options { counter-reset: opt; }
.cn-ask__opt {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.25rem 0.9rem;
  padding: 0.95rem 1.05rem;
  background: var(--cn-bg);
  counter-increment: opt;
}
.cn-ask__opt::before {
  content: counter(opt, upper-alpha);
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--cn-line-hard);
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  color: var(--cn-fg-muted);
  transition: background var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease);
}
.cn-ask__opt::after {
  content: '\2197';
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 0.9rem;
  color: var(--cn-brand-deep);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--cn-dur) var(--cn-ease), transform var(--cn-dur) var(--cn-ease);
}
.cn-ask__opt b { grid-column: 2; }
.cn-ask__opt span { grid-column: 2; }
.cn-ask__opt:hover, .cn-ask__opt:focus-visible {
  border-color: var(--cn-brand);
  background: var(--cn-bg);
  transform: translateX(2px);
}
.cn-ask__opt:hover::before, .cn-ask__opt:focus-visible::before {
  background: var(--cn-brand); border-color: var(--cn-brand); color: var(--cn-on-brand);
}
.cn-ask__opt:hover::after, .cn-ask__opt:focus-visible::after { opacity: 1; transform: none; }
.cn-ask__opt.is-picked::before {
  background: var(--cn-green); border-color: var(--cn-green); color: #fff; content: '\2713';
}
.cn-ask__opt { transition: border-color var(--cn-dur) var(--cn-ease), background var(--cn-dur) var(--cn-ease), transform var(--cn-dur) var(--cn-ease); }

.cn-ask__nav { background: var(--cn-bg-soft); }
.cn-ask__nav .cn-btn { min-width: 8rem; justify-content: center; }

/* Review rows read as a receipt, not a form. */
.cn-ask__review > div { align-items: start; }
.cn-ask__review dd { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cn-ask__opt, .cn-ask__opt::before, .cn-ask__opt::after { transition: none; }
  .cn-ask__opt:hover { transform: none; }
}

/* ============================================================
   Guided enquiry — readability and height

   Two problems, and they pull against each other. The option
   labels were 14px over a 12px sub-label, which is too small for
   the primary control on the page; and the panel ran to 674px,
   which clears a 1000px viewport but not a laptop once the page
   head is above it.

   So the type goes up and the spacing comes down, and the panel
   is then capped to the viewport with the question area taking
   the scroll — that way it fits regardless of how many options a
   step has, instead of fitting only the steps that happen to be
   short.
   ============================================================ */
.cn-ask {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--cn-head-h) - 2rem);
}
/* dvh where it exists: on mobile the browser chrome makes 100vh
   taller than what is actually on screen. */
@supports (height: 100dvh) {
  .cn-ask { max-height: calc(100dvh - var(--cn-head-h) - 2rem); }
}

/* The progress bar and the buttons stay put; only the middle moves. */
.cn-ask__bar, .cn-ask__nav { flex: none; }
.cn-ask__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.6vw, 1.75rem);
}

.cn-ask__options { gap: 0.45rem; margin-top: 1.1rem; }
.cn-ask__opt { padding: 0.8rem 1rem; gap: 0.2rem 0.85rem; }

/* Up from 14px/12px. These are the buttons the whole flow runs on. */
.cn-ask__opt b { font-size: 1rem; line-height: 1.35; }
.cn-ask__opt span { font-size: var(--cn-t-sm); line-height: 1.45; }

.cn-ask__q { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.cn-ask__help { font-size: var(--cn-t-sm); margin-top: 0.5rem; }

.cn-ask__nav { padding: 0.85rem clamp(1.25rem, 2.6vw, 1.75rem); }

/* A hairline once the content is taller than the frame, so it is
   obvious the panel scrolls rather than ends. */
.cn-ask__body { border-bottom: 1px solid transparent; }
.cn-ask.is-scrollable .cn-ask__body { border-bottom-color: var(--cn-line); }

/* ---------- option surfaces ----------

   With the button reset fixed the options finally draw their border,
   but white boxes on a white panel behind a #E2E2E4 hairline still
   read flat. They sit on their own soft ground instead and come
   forward — white, brand edge, a nudge — when pointed at, so the
   resting state says "list" and the active state says "button". */
.cn-ask__opt {
  background: var(--cn-bg-soft);
  /* Tint and edge together: #F5F5F6 on white is only a 1.09 ratio, which
     separates the block but does not define where it stops. */
  border-color: var(--cn-line);
}
.cn-ask__opt:hover,
.cn-ask__opt:focus-visible {
  background: var(--cn-bg);
  border-color: var(--cn-brand);
  box-shadow: 0 8px 18px -12px rgba(0,0,0,0.35);
}
.cn-ask__opt.is-picked {
  background: rgba(0,163,224,0.08);
  border-color: var(--cn-brand);
}

/* The lettered chip needs to lift off the new ground. */
.cn-ask__opt::before { background: var(--cn-bg); }

/* The arrow was hover-only, which tells a touch user nothing — there
   is no hover on a phone. It now rests visible but quiet. */
.cn-ask__opt::after { opacity: 0.3; transform: none; }
.cn-ask__opt:hover::after, .cn-ask__opt:focus-visible::after { opacity: 1; }

.cn-ask__options { gap: 0.5rem; }

/* ---------- bottom bar ---------- */
.cn-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 1.25rem;
  border-top: 1px solid var(--cn-ink-line);
  font-size: var(--cn-t-xs);
  color: var(--cn-on-ink-dim);
}
.cn-foot__logo { height: 2.4rem; width: auto; filter: brightness(0) invert(1); }

.cn-foot__status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--cn-data); letter-spacing: 0.08em;
}
/* Amber until the clock has run, so it never claims "open" before it
   has actually checked. */
.cn-foot__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: #C9A227;
  transition: background var(--cn-dur) var(--cn-ease);
}
.cn-foot__dot.is-open { background: var(--cn-green); }
.cn-foot__time { color: var(--cn-on-ink); }

/* The legal line used to push Top over; it does that itself now. */
.cn-foot__top { margin-left: auto; }
.cn-foot__legal { color: var(--cn-on-ink-dim); }
.cn-foot__legal a:hover { color: var(--cn-on-ink); }

.cn-foot__top {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--cn-ink-line);
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cn-on-ink);
  transition: background var(--cn-dur) var(--cn-ease), border-color var(--cn-dur) var(--cn-ease), color var(--cn-dur) var(--cn-ease);
}
.cn-foot__top:hover { background: var(--cn-on-ink); border-color: var(--cn-on-ink); color: var(--cn-ink-deep); }

/* ============================================================
   Long-form copy — CKEditor output, so element selectors
   rather than classes.
   ============================================================ */
.cn-prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; }
.cn-prose > * + * { margin-top: 1.15rem; }
.cn-prose h2, .cn-prose h3, .cn-prose h4 {
  font-family: var(--cn-display); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.015em;
  margin-top: 2.25rem;
}
.cn-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.cn-prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.cn-prose h4 { font-size: 1.1rem; }
.cn-prose a { color: var(--cn-brand-deep); text-decoration: underline; text-underline-offset: 0.15em; }
.cn-prose a:hover { color: var(--cn-fg); }
.cn-prose ul, .cn-prose ol { padding-left: 1.35rem; }
.cn-prose ul { list-style: disc; }
.cn-prose ol { list-style: decimal; }
.cn-prose li + li { margin-top: 0.4rem; }
.cn-prose img { margin-block: 1.5rem; width: 100%; height: auto; }
.cn-prose blockquote {
  border-left: 2px solid var(--cn-brand);
  padding-left: 1.15rem;
  font-size: 1.15rem;
  color: var(--cn-fg-muted);
}
.cn-prose table { width: 100%; border-collapse: collapse; font-size: var(--cn-t-sm); }
.cn-prose th, .cn-prose td { border: 1px solid var(--cn-line); padding: 0.6rem 0.75rem; text-align: left; }
.cn-prose th { background: var(--cn-bg-soft); font-family: var(--cn-data); font-size: var(--cn-t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
/* Wide editor tables must scroll inside their own box, never
   push the page sideways. */
.cn-prose__scroll { overflow-x: auto; }

/* Shared: the home hero and the about hero both run this band. */
/* ============================================================
   Capability marquee
   ============================================================ */
.cn-band {
  background: var(--cn-ink-deep);
  color: var(--cn-on-ink);
  border-block: 1px solid var(--cn-ink-line);
  overflow: hidden;
  padding-block: 1.15rem;
}
.cn-band__track { display: flex; width: max-content; animation: cn-slide 45s linear infinite; }
.cn-band__track > span {
  display: inline-flex; align-items: center; gap: 1.75rem; padding-right: 1.75rem;
  font-family: var(--cn-display); font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  white-space: nowrap;
}
.cn-band__track i { font-style: normal; color: var(--cn-brand); font-size: 0.7em; }
.cn-band:hover .cn-band__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cn-band__track { animation: none; } }

/* Shared: the about page and the team page both use this grid. */
/* ============================================================
   Team

   Portraits are served at source size and cropped here: the resize
   helper pads to a fixed canvas, and these photos run 0.78 to 1.08
   in ratio, so that padding showed as mismatched grey bars. Cropping
   with a high object-position keeps every sitter's head in the same
   place regardless of how the original was framed.
   ============================================================ */
.cn-people {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 46rem) { .cn-people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .cn-people { grid-template-columns: repeat(4, 1fr); } }
.cn-people > * { min-width: 0; }

.cn-person { display: grid; gap: 0.15rem; }

.cn-person__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cn-bg-soft);
  margin-bottom: 0.85rem;
  position: relative;
}
/* A hairline that draws across the foot of the portrait on hover. */
.cn-person__frame::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--cn-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--cn-ease);
}
.cn-person:hover .cn-person__frame::after { transform: scaleX(1); }

.cn-person__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 700ms var(--cn-ease);
}
.cn-person:hover .cn-person__frame img { transform: scale(1.045); }

.cn-person__name {
  font-family: var(--cn-display);
  font-size: var(--cn-t-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cn-person__role {
  font-family: var(--cn-data);
  font-size: var(--cn-t-xs);
  letter-spacing: 0.08em;
  color: var(--cn-fg-muted);
  transition: color var(--cn-dur) var(--cn-ease);
}
.cn-person:hover .cn-person__role { color: var(--cn-brand-deep); }

@media (prefers-reduced-motion: reduce) {
  .cn-person__frame img, .cn-person__frame::after { transition: none; }
}


/* ============================================================
   Small nav dropdown

   Distinct from the products mega panel: a short list hanging off
   one nav item rather than a band across the header.
   ============================================================ */
.cn-nav__item--drop { position: relative; }
.cn-nav__item--drop[data-drop] { position: relative; }

.cn-drop {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, -8px);
  min-width: 17rem;
  background: var(--cn-bg);
  color: var(--cn-fg);
  border: 1px solid var(--cn-line);
  box-shadow: 0 24px 44px -28px rgba(0,0,0,0.35);
  padding: 0.4rem;
  display: grid;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cn-dur) var(--cn-ease),
              transform var(--cn-dur) var(--cn-ease),
              visibility 0s linear var(--cn-dur);
}
.cn-nav__item--drop.is-open .cn-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--cn-dur) var(--cn-ease),
              transform var(--cn-dur) var(--cn-ease),
              visibility 0s linear 0s;
}
.cn-nav__item--drop.is-open .cn-nav__caret { transform: rotate(180deg); }

.cn-drop a {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  transition: background var(--cn-dur) var(--cn-ease);
}
.cn-drop a:hover, .cn-drop a:focus-visible { background: var(--cn-bg-soft); }
.cn-drop__t { font-size: var(--cn-t-sm); font-weight: 600; }
.cn-drop a:hover .cn-drop__t { color: var(--cn-brand-deep); }
.cn-drop__d {
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  color: var(--cn-fg-muted); letter-spacing: 0.04em;
}

/* Shared: the about hero uses the same crumb as the page headers. */
.cn-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--cn-data); font-size: var(--cn-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cn-fg-muted);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.cn-crumb a:hover { color: var(--cn-fg); }
.cn-crumb span[aria-current] { color: var(--cn-brand-deep); }
.cn-crumb i { font-style: normal; opacity: 0.5; }


/* ============================================================
   Phones and tablets: content reads from the left edge

   Several rows centre their contents, which is right on a wide
   screen where they sit under a centred measure and wrong below
   it: on a 768 iPad a centred row of buttons floats in the middle
   of the column while every heading beside it starts at the left,
   so the eye has two different margins to track.

   Only rows carrying text or controls are changed. Icon buttons,
   logo tiles and image frames keep their centring, because a glyph
   centred inside its own square is not the same thing.
   ============================================================ */
@media (max-width: 64rem) {
  .cn-ask__bar,
  .cn-ask__nav,
  .cn-rail__nav { justify-content: flex-start; }

  /* The wizard's answer buttons centred their label and caption.
     They are full-width targets, so the text belongs at the left. */
  .cn-ask__opt {
    justify-items: start;
    justify-content: flex-start;
    text-align: left;
  }

  /* Empty states stop being centred cards and become plain notices. */
  .cn-empty { text-align: left; }
}

/* The floating WhatsApp button is desktop only. On a phone it covered
   the bottom-right of every page — over pagination, over the enquiry
   wizard's Next button — and the same number is already in the hero,
   in the footer and on the contact page. */
@media (max-width: 48rem) {
  .cn-wa { display: none; }
}

/* The drawer is a full-height sheet; on iOS a transformed scroll
   container needs the height pinned to the visual viewport or the last
   items sit below the fold with nothing to scroll. */
.cn-drawer {
  max-height: 100vh;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
  .cn-drawer { max-height: 100dvh; }
}