/* ==========================================================================
   Notable Supplies Limited
   assets/css/notable.css
   Design system: editorial grid, ink on warm paper, single orange accent.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var-latin-ext.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink:          #12151d;
  --ink-2:        #1a1f2b;
  --ink-3:        #262c3b;
  --ink-soft:     #4a5164;
  --ink-mute:     #767d91;

  --paper:        #fbfaf8;
  --paper-2:      #f4f2ed;
  --paper-3:      #eae6de;

  --accent:       #fe5804;
  --accent-deep:  #d34503;
  --accent-wash:  #fff1e9;

  --line:         rgba(18, 21, 29, .13);
  --line-2:       rgba(18, 21, 29, .26);
  --line-dark:    rgba(251, 250, 248, .15);
  --line-dark-2:  rgba(251, 250, 248, .30);

  --display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap:    1280px;
  --gutter:  clamp(20px, 5vw, 64px);

  --ease:    cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  --header-h: 78px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  font-variation-settings: 'opsz' 18;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

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

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

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 3px;
  font-size: 14px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }
.wrap--wide   { max-width: 1560px; }

.section { padding-block: clamp(72px, 11vw, 148px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }
.section--flush-top { padding-top: 0; }

.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink .eyebrow { color: var(--ink-mute); }
.section--ink a:not(.btn) { color: var(--paper); }

.section--tone { background: var(--paper-2); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.section--ink .rule { background: var(--line-dark); }

/* ------------------------------------------------------------ typography -- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.display,
h1.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.03;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  text-wrap: balance;
}

.h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.032em; line-height: 1.06; font-size: clamp(2.25rem, 5vw, 4rem); text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;  line-height: 1.09; font-size: clamp(1.85rem, 3.6vw, 3rem);  text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.024em; line-height: 1.18; font-size: clamp(1.3rem, 2.1vw, 1.72rem); }
.h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.018em; line-height: 1.28; font-size: 1.12rem; }

.lede {
  font-size: clamp(1.09rem, 1.7vw, 1.34rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 62ch;
  text-wrap: pretty;
}
.section--ink .lede { color: #a9b0c2; }

.body-lg { font-size: 1.06rem; line-height: 1.72; color: var(--ink-soft); max-width: 68ch; }
.muted   { color: var(--ink-soft); }
.section--ink .muted { color: #a9b0c2; }

.prose p + p { margin-top: 1.15em; }
.prose { max-width: 68ch; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }

.accent-text { color: var(--accent); }

.index-num {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-family: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              background-color .35s var(--ease), transform .25s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-io);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover { border-color: var(--accent); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { color: #fff; }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn--light:hover { color: #fff; }

.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--line-dark-2); }
.btn--outline-light:hover { color: #fff; }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent::after { background: var(--ink); }
.btn--accent:hover { border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* text link with a rule that draws in */
.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding-bottom: 4px;
  position: relative;
  color: var(--ink);
}
.link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .4s var(--ease-io);
}
.link:hover { color: var(--accent); }
.link:hover::after { transform: scaleX(0); }
.link .arrow { transition: transform .35s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              height .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  max-width: var(--wrap);
}

.site-header.is-solid {
  background: rgba(251, 250, 248, .92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  height: 66px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; transition: height .4s var(--ease); }
.is-solid .brand img { height: 27px; }

/* logo swap: light mark over dark hero, dark mark once scrolled */
.brand .logo-light { display: block; }
.brand .logo-dark  { display: none; }
.site-header.is-solid .brand .logo-light,
.site-header.on-paper .brand .logo-light { display: none; }
.site-header.is-solid .brand .logo-dark,
.site-header.on-paper .brand .logo-dark  { display: block; }

.nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
  position: relative;
  padding: 9px 15px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--paper);
  border-radius: 2px;
  transition: color .3s var(--ease), opacity .3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header.is-solid .nav-link,
.site-header.on-paper .nav-link { color: var(--ink); }
.nav-link:hover { color: var(--accent); }

.nav-link::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease-io);
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); }
.nav-link.is-current { color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  padding: 8px 4px;
  transition: color .3s var(--ease);
}
.site-header.is-solid .nav-tel,
.site-header.on-paper .nav-tel { color: var(--ink); }
.nav-tel:hover { color: var(--accent); }
.nav-tel svg { flex: none; }

.header-cta { padding: 12px 20px; font-size: 13.5px; }

/* ---- capabilities dropdown */
.has-menu { position: relative; }

.menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(760px, 88vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 60px -18px rgba(18, 21, 29, .28);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.has-menu:hover .menu-panel,
.has-menu:focus-within .menu-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}

.menu-item {
  display: flex;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 2px;
  transition: background-color .25s var(--ease);
}
.menu-item:hover { background: var(--paper-2); }
.menu-item .index-num { padding-top: 4px; }
.menu-item strong {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 2px;
}
.menu-item span {
  display: block;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--ink-mute);
}

.menu-foot {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.menu-foot p { font-size: 13px; color: var(--ink-mute); margin: 0; }

/* ---- mobile */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--paper);
}
.site-header.is-solid .nav-toggle,
.site-header.on-paper .nav-toggle,
body.nav-open .nav-toggle { color: var(--ink); }
.nav-toggle span {
  display: block; position: relative;
  width: 22px; height: 1.6px; background: currentColor;
  transition: transform .35s var(--ease), background-color .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 1.6px; background: currentColor;
  transition: transform .35s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s var(--ease-io), visibility .5s;
  display: flex;
  flex-direction: column;
}
body.nav-open .mobile-nav { transform: translateY(0); visibility: visible; }
body.nav-open { overflow: hidden; }

.mobile-nav a.m-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.024em;
}
.mobile-nav a.m-link.is-current { color: var(--accent); }
.mobile-nav .m-group-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 30px 0 6px;
}

/* Collapsible drawer groups. The two long lists stay folded away until
   tapped, so the drawer opens to a single screen on a phone. */
.mobile-nav .m-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 0 13px; margin: 12px 0 0;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: inherit; color: var(--ink-mute); cursor: pointer;
  text-align: left; -webkit-appearance: none; appearance: none;
}
.mobile-nav .m-group-toggle svg { transition: transform .3s var(--ease-io); flex: none; }
.mobile-nav .m-group[data-open="true"] .m-group-toggle { color: var(--accent); }
.mobile-nav .m-group[data-open="true"] .m-group-toggle svg { transform: rotate(180deg); }
.mobile-nav .m-group-body { display: none; padding-top: 4px; }
.mobile-nav .m-group[data-open="true"] .m-group-body { display: block; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav .m-group-toggle svg { transition: none; }
}
.mobile-nav a.m-sub {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 500;
}
.mobile-nav .m-foot { margin-top: 34px; display: grid; gap: 12px; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .30;
  transform: scale(1.04);
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,21,29,.94) 0%, rgba(18,21,29,.60) 42%, rgba(18,21,29,.96) 100%),
    linear-gradient(90deg, rgba(18,21,29,.92) 0%, rgba(18,21,29,.30) 65%);
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
}

.hero--home { min-height: min(100vh, 940px); display: flex; align-items: flex-end; }
.hero--home .wrap { width: 100%; padding-block: clamp(120px, 16vh, 190px) clamp(52px, 7vh, 84px); }

.hero__inner { max-width: 960px; }
.hero .display { color: var(--paper); }
.hero .lede { color: #b4bbcd; margin-top: 26px; }

.hero__foot {
  margin-top: clamp(38px, 6vh, 62px);
  padding-top: 30px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 54px);
}
.hero-facts div span {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
.hero-facts div strong {
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--paper);
}

/* page hero (interior pages) */
.hero--page { padding-block: calc(var(--header-h) + clamp(66px, 11vh, 118px)) clamp(60px, 9vh, 104px); }
.hero--page .h1 { color: var(--paper); }

.crumbs {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--ink-mute);
  margin-bottom: 26px; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-mute); transition: color .25s; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--paper); }
.crumbs .sep { opacity: .5; }

/* -------------------------------------------------------- editorial grid -- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: start;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--rev > *:first-child { order: 2; }

.sticky-col { position: sticky; top: calc(var(--header-h) + 34px); }

.stack-lg { display: grid; gap: clamp(30px, 4vw, 46px); }
.stack-md { display: grid; gap: 22px; }
.stack-sm { display: grid; gap: 12px; }

/* numbered editorial list */
.index-list { border-top: 1px solid var(--line); }
.section--ink .index-list { border-color: var(--line-dark); }

.index-list > li {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0 20px;
  padding: clamp(22px, 3vw, 32px) 0;
  align-items: start;
}
.section--ink .index-list > li { border-color: var(--line-dark); }
.index-list h3 { margin-bottom: 9px; }
.index-list p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.62; max-width: 60ch; }
.section--ink .index-list p { color: #a9b0c2; }

/* value / fact tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.section--ink .tiles { background: var(--line-dark); border-color: var(--line-dark); }
.tile {
  background: var(--paper);
  padding: clamp(24px, 3vw, 34px);
}
.section--ink .tile { background: var(--ink); }
.section--tone .tile { background: var(--paper-2); }
.tile .index-num { display: block; margin-bottom: 16px; }
.tile h3 { font-size: 1.06rem; margin-bottom: 9px; }
.tile p { font-size: 14.6px; line-height: 1.6; color: var(--ink-soft); }
.section--ink .tile p { color: #a9b0c2; }

/* ------------------------------------------------------------- figures -- */
.figure {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border-radius: 2px;
}
/* <picture> is inline by default, which would stop the img filling the box */
.figure picture,
.hero__media picture,
.cat-card__media picture,
.product__media picture { display: block; width: 100%; height: 100%; }

.figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
/* an inline svg with only a viewBox falls back to 300x150 without this */
.figure > svg { display: block; width: 100%; height: 100%; }
.figure--16x9  { aspect-ratio: 16 / 9; }
.figure--4x3   { aspect-ratio: 4 / 3; }
.figure--3x2   { aspect-ratio: 3 / 2; }
.figure--1x1   { aspect-ratio: 1 / 1; }
.figure--tall  { aspect-ratio: 4 / 5; }

.figure__cap {
  margin-top: 13px;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: .01em;
}

/* --------------------------------------------------------- category grid -- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.cat-card:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -26px rgba(18, 21, 29, .34);
}
.cat-card:hover .figure img { transform: scale(1.055); }

.cat-card__media { position: relative; }
.cat-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(251, 250, 248, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 11px;
  border-radius: 2px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}

.cat-card__body {
  padding: clamp(22px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 11px;
}
.cat-card__body h3 { font-size: 1.24rem; }
.cat-card__body p { font-size: 14.8px; line-height: 1.6; color: var(--ink-soft); flex: 1; }

.cat-card__foot {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  padding-top: 6px;
}
.cat-card:hover .cat-card__foot { color: var(--accent); }
.cat-card:hover .cat-card__foot .arrow { transform: translateX(4px); }
.cat-card__foot .arrow { transition: transform .35s var(--ease); }

/* card variant for the technology categories (svg artifact instead of photo) */
.cat-card__art {
  aspect-ratio: 3 / 2;
  background: var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.cat-card__art svg { display: block; width: 100%; height: 100%; }

.hero__art, .cta-band__art { width: 100%; height: 100%; }

/* ---------------------------------------------------------- product grid -- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
              transform .35s var(--ease);
}
.product:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(18, 21, 29, .3);
}
.product:hover .figure img { transform: scale(1.05); }

.product__media { position: relative; background: var(--paper-2); }
.product__zoom {
  position: absolute; inset: 0;
  width: 100%; border: 0; background: none; cursor: zoom-in; padding: 0;
}
.product__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product__body h3 { font-size: 1.02rem; letter-spacing: -.018em; }
.product__body p { font-size: 14.2px; line-height: 1.58; color: var(--ink-soft); flex: 1; }

.spec-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- specs -- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  width: 38%;
  font-weight: 600;
  color: var(--ink);
  padding-right: 24px;
}
.spec-table td { color: var(--ink-soft); }

/* checklist */
.checks { display: grid; gap: 13px; }
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 15.4px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.checks li::before {
  content: '';
  width: 15px; height: 15px;
  margin-top: 6px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--accent) 0 3px, transparent 3.5px);
}
.section--ink .checks li { color: #a9b0c2; }

/* ------------------------------------------------------------- markets -- */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.market {
  background: var(--ink);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color .4s var(--ease);
}
.market:hover { background: var(--ink-2); }
.market h3 { font-size: 1rem; color: var(--paper); line-height: 1.35; }
.market p { font-size: 13.8px; color: #949bb0; line-height: 1.55; }

/* ------------------------------------------------------------ quote/pull -- */
.pull {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  text-wrap: balance;
}
.pull-attrib {
  margin-top: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ cta -- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band__art { position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none; }
.cta-band .h2 { color: var(--paper); }

.contact-lines { display: grid; gap: 20px; }
.contact-line { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; }
.contact-line svg { margin-top: 4px; color: var(--accent); }
.contact-line span {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 4px;
}
.contact-line a, .contact-line p {
  font-family: var(--display);
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: color .25s;
}
.contact-line a:hover { color: var(--accent); }

/* ----------------------------------------------------------------- form -- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 15px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(254, 88, 4, .14);
}
.field input::placeholder, .field textarea::placeholder { color: #a4a9b5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234a5164' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-note { font-size: 13px; color: var(--ink-mute); line-height: 1.55; }
.form-status {
  font-size: 14.5px;
  padding: 13px 16px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-ok { border-color: #1d7a4c; background: #edf8f2; color: #14603a; }
.form-status.is-err { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink);
  color: #9aa1b4;
  padding-block: clamp(56px, 7vw, 88px) 34px;
  font-size: 14.5px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { height: 34px; width: auto; margin-bottom: 20px; }
.footer-brand p { font-size: 14.5px; line-height: 1.62; max-width: 34ch; color: #9aa1b4; }

.footer-col h4 {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 18px;
  font-family: var(--text);
}
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: #9aa1b4; font-size: 14.3px; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #767d91;
}
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ------------------------------------------------------ floating whatsapp -- */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 17px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .62),
              0 4px 12px rgba(18, 21, 29, .18);
  transition: gap .42s var(--ease), padding .42s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
  overflow: hidden;
  transform: translateY(90px) scale(.9);
  opacity: 0;
  pointer-events: none;
}
.wa-float.is-in { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.wa-float svg { flex: none; width: 26px; height: 26px; }
.wa-float b {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width .42s var(--ease), opacity .3s var(--ease), margin .42s var(--ease);
}
.wa-float:hover { gap: 10px; box-shadow: 0 18px 40px -10px rgba(37, 211, 102, .7); }
.wa-float:hover b { max-width: 190px; opacity: 1; }
.wa-float:active { transform: scale(.97); }

/* --------------------------------------------------------------- lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 14, 20, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  border-radius: 2px;
  transform: scale(.97);
  transition: transform .4s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox figcaption {
  margin-top: 18px; text-align: center;
  color: #b4bbcd; font-size: 14px;
}
.lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(251, 250, 248, .1);
  border: 1px solid var(--line-dark-2);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: background-color .25s;
}
.lightbox__close:hover { background: rgba(251, 250, 248, .2); }

/* ------------------------------------------------------------- artifacts -- */
/* hand drawn svg motifs used as section marks and page furniture */
.artifact { display: block; color: var(--accent); }
.artifact--mark { width: 40px; height: 40px; }

.art-line { stroke: currentColor; fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.art-line--soft { stroke: var(--line); }
.section--ink .art-line--soft { stroke: var(--line-dark); }

/* drawn-on-scroll stroke */
.draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.1s var(--ease);
}
.is-revealed .draw { stroke-dashoffset: 0; }

/* slow drift for hero artwork */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -14px, 0) rotate(.6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.drift    { animation: drift 17s var(--ease-io) infinite; transform-origin: center; }
.drift--2 { animation-duration: 23s; animation-delay: -6s; }
.drift--3 { animation-duration: 29s; animation-delay: -11s; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 62s linear infinite; transform-origin: center; }

@keyframes pulse-dot {
  0%, 100% { opacity: .25; r: 2; }
  50%      { opacity: 1;   r: 3.4; }
}
.pulse-dot { animation: pulse-dot 4.2s var(--ease-io) infinite; }

/* --------------------------------------------------------------- reveals -- */
/* Scoped to .js-motion so that if the script never runs, nothing is hidden.
   The class is set by a one line inline script in the head, before paint. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-motion .reveal.is-revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 42px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
  :root { --header-h: 66px; }
  .nav, .nav-tel, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .split, .split--even { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
  .sticky-col { position: static; }
  .hero--home { min-height: 88vh; }
  .index-list > li { grid-template-columns: 44px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16.2px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-facts { gap: 20px 34px; }
  .wa-float { height: 54px; padding: 0 15px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .btn { padding: 14px 22px; font-size: 14px; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-motion .reveal { opacity: 1; transform: none; }
  .draw { stroke-dashoffset: 0; }
}

/* ----------------------------------------------------------------- print -- */
@media print {
  .site-header, .wa-float, .mobile-nav, .lightbox, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 18pt; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
}


/* ==========================================================================
   AESTHETIC LAYER
   Softer geometry, ambient light, and the small interactions that make a
   page feel handled rather than generated. Loaded last so it wins.
   ========================================================================== */

:root {
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-soft: 0 22px 60px -30px rgba(18, 21, 29, .34);
  --shadow-lift: 0 34px 80px -32px rgba(18, 21, 29, .42);
}

/* ------------------------------------------------------------- roundness -- */
.btn                { border-radius: 999px; padding-inline: 30px; }
.btn--ghost,
.btn--outline-light { border-radius: 999px; }
.header-cta         { padding-inline: 24px; }

.chip               { border-radius: 999px; padding: 5px 12px; }
.cat-card__badge    { border-radius: 999px; }

.cat-card, .product { border-radius: var(--r-lg); }
.figure             { border-radius: var(--r-md); }
.cat-card .figure,
.cat-card__art,
.product .figure    { border-radius: 0; }        /* the card clips them */

.menu-panel         { border-radius: var(--r-lg); }
.menu-item          { border-radius: var(--r-sm); }
.nav-link           { border-radius: 999px; }

.field input,
.field select,
.field textarea     { border-radius: var(--r-sm); }
.form-status        { border-radius: var(--r-sm); }
.lightbox img       { border-radius: var(--r-md); }
.skip-link          { border-radius: 999px; }

/* hairline grids keep their internal rules but round on the outside */
.tiles, .market-grid { border-radius: var(--r-lg); overflow: hidden; }

/* the big editorial visual on interior pages */
.figure--wipe { border-radius: var(--r-xl); }

/* ---------------------------------------------------------- ambient light -- */
/* A slow warm glow behind dark sections. Deliberately faint: it should read
   as studio lighting, not as decoration. */
.aurora {
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(70px);
  opacity: .55;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.aurora i:nth-child(1) {
  width: 46%; height: 62%; left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(254, 88, 4, .40), transparent 68%);
  animation: float-a 24s var(--ease-io) infinite;
}
.aurora i:nth-child(2) {
  width: 52%; height: 58%; right: 2%; top: 22%;
  background: radial-gradient(circle, rgba(72, 116, 214, .30), transparent 70%);
  animation: float-b 31s var(--ease-io) infinite;
}
.aurora i:nth-child(3) {
  width: 38%; height: 46%; left: 38%; bottom: -6%;
  background: radial-gradient(circle, rgba(254, 138, 4, .24), transparent 72%);
  animation: float-c 27s var(--ease-io) infinite;
}
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-8%, 10%, 0) scale(.92); }
}
@keyframes float-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50%      { transform: translate3d(6%, -9%, 0) scale(1.12); }
}

.hero, .cta-band, .section--ink { position: relative; isolation: isolate; }

/* ------------------------------------------------------- scroll progress -- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, var(--accent), #ff9a4d);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ------------------------------------------------------- card behaviour -- */
.cat-card, .product { position: relative; isolation: isolate; }

/* a pointer tracked highlight, so the card feels lit rather than flat */
.cat-card::after, .product::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              rgba(254, 88, 4, .10), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.cat-card:hover::after, .product:hover::after { opacity: 1; }

/* an accent rule that draws across the top edge on approach */
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 4;
  background: linear-gradient(90deg, var(--accent), #ff9a4d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-io);
}
.cat-card:hover::before { transform: scaleX(1); }

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line);
}
.product:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.tile { transition: background-color .4s var(--ease), transform .4s var(--ease); }
.tile:hover { background: var(--paper); transform: translateY(-2px); }
.section--ink .tile:hover { background: var(--ink-2); }
a.tile { text-decoration: none; }
a.tile:hover h3 { color: var(--accent); }

/* ---------------------------------------------------------- image reveal -- */
/* <picture> is inline by default. Clipping an inline box collapses it, so it
   must be made a block before the wipe is applied to it. */
.figure--wipe picture,
.portrait picture { display: block; width: 100%; height: 100%; }

.js-motion .figure--wipe picture {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-io);
}
.js-motion .is-revealed .figure--wipe picture,
.js-motion .figure--wipe.is-revealed picture { clip-path: inset(0 0 0 0); }

.js-motion .figure--wipe img { transform: scale(1.06); transition: transform 1.4s var(--ease); }
.js-motion .is-revealed .figure--wipe img,
.js-motion .figure--wipe.is-revealed img { transform: scale(1); }

/* ---------------------------------------------------------------- ticker -- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.section--ink .ticker { border-color: var(--line-dark); }

.ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: ticker 52s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-inline: 26px;
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
  white-space: nowrap;
}
.section--ink .ticker__track span { color: var(--paper); }
.ticker__track span::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------- portrait -- */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-3);
}
.portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(18, 21, 29, .55) 74%, rgba(18, 21, 29, .88));
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 28px;
  color: var(--paper);
}
.portrait figcaption strong {
  display: block;
  text-shadow: 0 1px 12px rgba(18, 21, 29, .5);
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.022em;
}
.portrait figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c3c9d8;
}

.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.signature .index-num { font-size: 11px; letter-spacing: .16em; }
.signature strong {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--paper);
}
.signature span { display: block; font-size: 12.5px; color: var(--ink-mute); }

/* ----------------------------------------------------------------- grain -- */
/* A trace of texture over everything. Not visible on its own, but the page
   feels less like flat vector without it. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- magnetic pull -- */
.btn, .cat-card__foot { will-change: transform; }
.btn[data-magnet] { transition: transform .35s var(--ease), color .35s var(--ease),
                                border-color .35s var(--ease); }

/* ------------------------------------------------------------ hero polish -- */
.hero--page { overflow: hidden; }
.hero--page .h1 { position: relative; }

.hero__glow {
  position: absolute;
  z-index: -1;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  right: -12%;
  top: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 88, 4, .22), transparent 66%);
  filter: blur(40px);
  pointer-events: none;
  animation: breathe 14s var(--ease-io) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .85; }
  50%      { transform: scale(1.16) translate3d(-3%, 4%, 0); opacity: 1; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero__glow, .ticker__track { animation: none !important; }
  .figure--wipe picture { clip-path: none !important; }
  .figure--wipe img { transform: none !important; }
  .progress { display: none; }
}

/* ------------------------------------------------- five column footer + menu */
.footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }

.menu-panel--sm {
  width: min(430px, 88vw);
  grid-template-columns: 1fr;
}

@media (max-width: 1180px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; row-gap: 42px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE TAGLINE, HIGHLIGHTED
   A marker pass over "Make every detail notable." Hand drawn path, wipes in
   from the left, and the text flips from paper to ink as the pass crosses it.
   ========================================================================== */

.tagline-mark {
  margin-top: clamp(22px, 3vh, 34px);
  line-height: 1;
}

.marker {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: .10em .52em .16em;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.022em;
  font-size: clamp(1.05rem, 3.4vw, 2.05rem);
  white-space: nowrap;
}

/* Painted before the text in document order and given no z-index, so the text
   sits on top without depending on negative stacking. */
.marker__stroke {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.52em;
  transform: translateY(-50%) rotate(-.75deg);
  overflow: visible;
}

.marker__pass { fill: var(--accent); }
.marker__pass--under { opacity: .92; }
.marker__pass--over  { opacity: .55; }

.marker__text {
  position: relative;
  z-index: 1;
  color: var(--ink);
}

/* Before the pass, the line reads as plain paper coloured text. */
.js-motion .marker__stroke {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s cubic-bezier(.62, .03, .30, 1) .45s;
}
.js-motion .marker.is-drawn .marker__stroke { clip-path: inset(0 0 0 0); }

.js-motion .marker__text {
  color: var(--paper);
  transition: color .45s var(--ease) .95s;
}
.js-motion .marker.is-drawn .marker__text { color: var(--ink); }

/* A marker on a paper background needs the text to stay ink either way. */
.section--tone .marker__text,
body > main > .section:not(.section--ink) .marker__text { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .marker__stroke { clip-path: none !important; transition: none !important; }
  .js-motion .marker__text { color: var(--ink) !important; transition: none !important; }
}

/* ==========================================================================
   HERO FIELD + NUMBERED POINTS
   ========================================================================== */

.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero--page { position: relative; }

/* The motif drifts very slowly. Nothing else in the hero moves. */
.hero__motif { transform-box: view-box; }

/* ---- the numbered points carry a small orange highlight ------------------ */
.tile .index-num,
.index-list .index-num,
.market .index-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 23px;
  padding-inline: 8px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 11.5px;
  letter-spacing: .08em;
  line-height: 1;
}

.section--ink .tile .index-num,
.section--ink .index-list .index-num,
.market .index-num,
.cta-band .index-num {
  background: rgba(254, 88, 4, .15);
  color: #ff8a4a;
}

/* the highlight brightens as you approach the point it marks */
.tile, .index-list > li, .market { transition: background-color .4s var(--ease); }
.tile .index-num,
.index-list .index-num,
.market .index-num { transition: background-color .35s var(--ease), color .35s var(--ease); }

.tile:hover .index-num,
.index-list > li:hover .index-num,
.market:hover .index-num {
  background: var(--accent);
  color: #fff;
}

.index-list > li { padding-inline: 4px; }

/* ==========================================================================
   The small orange dash before each section label is removed. The label now
   stands on its own letterspacing.
   ========================================================================== */
.eyebrow::before { display: none !important; }
.eyebrow { gap: 0; }

/* ==========================================================================
   THE CIRCLED WORD
   A pen loop around the first word of the headline. Drawn before the
   tagline marker, so the eye is led down the page in order.
   ========================================================================== */

.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.circled__ring {
  position: absolute;
  left: -8%;
  top: -14%;
  width: 116%;
  height: 134%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.js-motion .pen {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  transition: stroke-dashoffset 1.05s cubic-bezier(.55, .12, .35, 1) .28s;
}
.js-motion .circled.is-drawn .pen,
.js-motion .underlined.is-drawn .pen,
.js-motion .scribble-arrow.is-drawn .pen { stroke-dashoffset: 0; }

/* the tagline marker now follows the circle rather than competing with it */
.js-motion .marker__stroke { transition-delay: 1.25s; }
.js-motion .marker__text  { transition-delay: 1.75s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .pen { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* A circled word needs a little more air between the two headline lines,
   otherwise the loop crosses into the line beneath it. */
.hero--home .display { line-height: 1.14; }

/* ==========================================================================
   PEN MARKS, corrected
   ========================================================================== */

/* The loop now runs wider and shallower so it encloses the whole word. */
/* An oval has to be roughly 1.4 times the size of what it encloses, or the
   curve has already turned in by the time it reaches the first and last
   letters. That is why this sits so much wider than the word. */
.circled__ring {
  left: -24%;
  top: -9%;
  width: 148%;
  height: 119%;
}
/* and the headline is given the room for it to land in */
.hero--home .display { line-height: 1.36; }

/* ---- a hand pulled underline ------------------------------------------- */
.underlined {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underlined__rule {
  position: absolute;
  left: -2%;
  bottom: -.14em;
  width: 104%;
  height: .30em;
  overflow: visible;
  pointer-events: none;
}

/* ---- a single word lifted into the accent ------------------------------- */
.hl { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   INLINE MARKER + GLASS CAPSULE
   ========================================================================== */

/* The tagline marker, shrunk to sit inside running text. It inherits the
   surrounding type rather than carrying the display face and size. */
.marker--inline {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  padding: .04em .34em .1em;
}
.marker--inline .marker__stroke { height: 1.36em; }

/* ---- the glass capsule -------------------------------------------------- */
.glass {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  padding: .13em .34em .19em;
  border-radius: .42em;
  color: var(--ink);
  isolation: isolate;

  /* tinted translucency, warm and light */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 52%),
    linear-gradient(150deg, rgba(254, 88, 4, .30), rgba(254, 138, 4, .16));

  -webkit-backdrop-filter: blur(8px) saturate(190%);
  backdrop-filter: blur(8px) saturate(190%);

  /* a bright edge along the top, a warm one underneath, and a low glow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(254, 88, 4, .28),
    0 0 0 1px rgba(254, 88, 4, .20),
    0 14px 34px -14px rgba(254, 88, 4, .50);
}

/* the sheen: clipped by its own inherited radius, so no overflow clipping is
   needed and descenders stay intact */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 42%, rgba(255, 255, 255, .70) 50%, transparent 58%);
  background-size: 300% 100%;
  background-position: 210% 0;
}
.js-motion .glass.is-drawn::after {
  animation: sheen 1.35s cubic-bezier(.38, 0, .2, 1) .35s both;
}
@keyframes sheen {
  from { background-position: 210% 0; }
  to   { background-position: -110% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .glass.is-drawn::after { animation: none; }
}

/* A heading carrying a capsule needs leading, or the capsule touches the
   line beneath it. */
.has-mark { line-height: 1.34; }

/* ==========================================================================
   TEXT SELECTION
   The phone gesture, borrowed: a flat tinted block, a caret bar at each end,
   and the two round handles. Orange in place of the system blue.
   ========================================================================== */

.select {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: .05em .07em .10em;
  color: var(--ink);

  /* the caret bars stay legible at body size and stay proportionate on a
     heading, rather than being a fixed hairline at every scale */
  border-left: max(2px, .052em) solid var(--accent);
  border-right: max(2px, .052em) solid var(--accent);

  background-image: linear-gradient(rgba(254, 88, 4, .22), rgba(254, 88, 4, .22));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* the grab handles: one above the start, one below the end */
.select::before,
.select::after {
  content: '';
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: var(--accent);
}
.select::before { left:  calc(-.125em - 1px); top:    -.19em; }
.select::after  { right: calc(-.125em - 1px); bottom: -.19em; }

/* the drag: block sweeps open, bars land, then the handles snap on */
.js-motion .select {
  background-size: 0% 100%;
  border-color: transparent;
  transition: background-size .5s cubic-bezier(.32, .72, .3, 1) .15s,
              border-color .01s linear .62s;
}
.js-motion .select::before,
.js-motion .select::after {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s var(--ease) .66s, transform .26s cubic-bezier(.34, 1.56, .64, 1) .66s;
}
.js-motion .select.is-drawn {
  background-size: 100% 100%;
  border-color: var(--accent);
}
.js-motion .select.is-drawn::before,
.js-motion .select.is-drawn::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .select { background-size: 100% 100%; border-color: var(--accent); transition: none; }
  .js-motion .select::before, .js-motion .select::after {
    opacity: 1; transform: none; transition: none;
  }
}

/* ==========================================================================
   THE ARROW
   ========================================================================== */
.scribble-arrow {
  display: inline-block;
  width: 2.05em;
  height: .8em;
  margin-left: .16em;
  vertical-align: .10em;
}
.scribble-arrow svg { width: 100%; height: 100%; overflow: visible; }
.scribble-arrow svg path { vector-effect: non-scaling-stroke; }

/* the shaft draws first, then the two barbs land */
.js-motion .scribble-arrow .pen { transition-delay: 1.5s; }
.js-motion .scribble-arrow .pen:nth-child(2) { transition-delay: 2.05s; transition-duration: .2s; }
.js-motion .scribble-arrow .pen:nth-child(3) { transition-delay: 2.15s; transition-duration: .2s; }

/* ==========================================================================
   INKED EMPHASIS
   No box, no rule. The letters themselves take the accent, left to right,
   with a soft bloom rising behind them as the colour passes through.
   ========================================================================== */
.inked {
  position: relative;
  display: inline;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

.inked__bloom {
  position: absolute;
  inset: -.42em -.5em -.42em -.5em;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%,
              rgba(254, 138, 4, .30), rgba(254, 88, 4, .10) 58%, transparent 76%);
  filter: blur(9px);
  opacity: 0;
  pointer-events: none;
}

.inked__text { position: relative; }

.js-motion .inked__text {
  background-image: linear-gradient(100deg,
      var(--accent) 0%, var(--accent) 40%,
      var(--ink-soft) 58%, var(--ink-soft) 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 1.25s cubic-bezier(.36, 0, .18, 1) .25s;
}
.js-motion .inked.is-drawn .inked__text { background-position: 0 0; }

.js-motion .inked__bloom { transition: opacity .9s var(--ease) .55s; }
.js-motion .inked.is-drawn .inked__bloom { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .inked__text {
    background: none;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    transition: none;
  }
  .js-motion .inked__bloom { opacity: 1; transition: none; }
}

/* The global reset caps every svg at max-width:100%. The annotation marks are
   meant to sit wider than the word they mark, so they opt out of that. */
.circled__ring,
.underlined__rule,
.marker__stroke { max-width: none; }

/* ==========================================================================
   STICKY NOTES
   Real paper: warmer than the page so it lifts off it, a gradient because
   paper catches light unevenly, faint rule lines on some, a dog eared corner
   on others, and the number ringed by the same pen that circles the headline.
   ========================================================================== */

.tiles--notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 3.2vw, 46px);
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding-top: 20px;
}

.tiles--notes .tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 224px;
  padding: clamp(28px, 2.8vw, 36px) clamp(24px, 2.4vw, 30px) clamp(30px, 2.8vw, 36px);
  border: 0;
  border-radius: 2px 2px 3px 3px;
  box-shadow:
    0 1px 1px rgba(18, 21, 29, .12),
    0 14px 30px -14px rgba(18, 21, 29, .42);
  transition: rotate .5s var(--ease), translate .5s var(--ease),
              box-shadow .5s var(--ease), filter .5s var(--ease);
}

/* --- the paper ---------------------------------------------------------- */
/* Two layers: a shade gathering at the foot the way paper does when it is
   not lying flat, and the sheet itself with light falling from the top left.
   A background colour sits under both so a note can never fall through to
   the page tone behind it. */
.tiles--notes .tile {
  background-color: #ffeecd;
  background-image:
    linear-gradient(180deg, rgba(120, 92, 48, 0) 58%, rgba(120, 92, 48, .13) 100%),
    linear-gradient(155deg, #fffbf0 0%, #ffefd0 52%, #ffe2b4 100%);
}

.tiles--notes .tile:nth-child(4n+2) {
  background-color: #ffdfc4;
  background-image:
    linear-gradient(180deg, rgba(140, 78, 30, 0) 60%, rgba(140, 78, 30, .14) 100%),
    linear-gradient(160deg, #fff4e8 0%, #ffe0c6 55%, #ffcfa6 100%);
}

.tiles--notes .tile:nth-child(4n+3) {
  background-color: #fff2d9;
  background-image:
    linear-gradient(180deg, rgba(120, 92, 48, 0) 60%, rgba(120, 92, 48, .13) 100%),
    linear-gradient(150deg, #fffdf7 0%, #fff4de 52%, #ffe8c2 100%);
}

.tiles--notes .tile:nth-child(4n+4) {
  background-color: #ffdcbd;
  background-image:
    linear-gradient(180deg, rgba(140, 78, 30, 0) 62%, rgba(140, 78, 30, .14) 100%),
    linear-gradient(165deg, #fff1e4 0%, #ffddbf 54%, #ffcb9d 100%);
}

/* --- no two go up straight ---------------------------------------------- */
.tiles--notes .tile:nth-child(4n+1) { rotate: -2.1deg; }
.tiles--notes .tile:nth-child(4n+2) { rotate:  1.4deg; }
.tiles--notes .tile:nth-child(4n+3) { rotate: -0.7deg; }
.tiles--notes .tile:nth-child(4n+4) { rotate:  1.9deg; }

/* --- the tape ------------------------------------------------------------ */
.tiles--notes .tile::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  width: 94px;
  height: 28px;
  translate: -50% 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, rgba(254, 138, 4, .38), rgba(254, 88, 4, .30));
  border-left: 1px solid rgba(255, 255, 255, .45);
  border-right: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 2px 3px -1px rgba(18, 21, 29, .16);
}
.tiles--notes .tile:nth-child(4n+1)::before { rotate: -3.4deg; }
.tiles--notes .tile:nth-child(4n+2)::before { rotate:  2.6deg; width: 82px; }
.tiles--notes .tile:nth-child(4n+3)::before { rotate:  3.8deg; width: 104px; }

/* the fourth is taped across a corner instead of the top */
.tiles--notes .tile:nth-child(4n+4)::before {
  top: -13px;
  left: -13px;
  translate: 0 0;
  width: 82px;
  height: 26px;
  rotate: -45deg;
  transform-origin: center;
}

/* --- a dog eared corner on two of them ----------------------------------- */
.tiles--notes .tile:nth-child(4n+2)::after,
.tiles--notes .tile:nth-child(4n+3)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-bottom: 26px solid #f3d9b4;
  filter: drop-shadow(-2px -2px 2px rgba(18, 21, 29, .20));
}

/* --- the number, ringed by hand ------------------------------------------ */
.tiles--notes .tile .index-num {
  align-self: flex-start;
  flex: none;
  min-width: 0;
  height: auto;
  padding: .62em .95em .68em;
  margin-bottom: 20px;
  border-radius: 0;
  color: var(--accent-deep);
  font-size: 12.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M9 41 C4 19 31 6 55 5 C81 4 96 15 97 33 C98 53 73 66 47 66 C23 66 8 56 6 37 C5 25 15 14 31 8' fill='none' stroke='%23fe5804' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
              center / 100% 100% no-repeat;
}

.tiles--notes .tile h3 { color: #241d12; margin-bottom: 10px; }
.tiles--notes .tile p  { color: #5c4a30; position: relative; z-index: 1; }
.section--ink .tiles--notes .tile p { color: #5c4a30; }

/* --- picking one off the wall -------------------------------------------- */
.tiles--notes .tile:hover {
  rotate: 0deg;
  translate: 0 -9px;
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    0 2px 3px rgba(18, 21, 29, .10),
    0 30px 52px -18px rgba(18, 21, 29, .48);
  z-index: 3;
}
.tiles--notes .tile:hover .index-num { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tiles--notes .tile { transition: none; }
}

/* ==========================================================================
   CATEGORY CARDS, TIGHTENED
   The grid was doing three things that made it long: cropping native 16:9
   photography to 3:2, repeating "Explore this category" on a card that is
   already a link, and letting descriptions run to different lengths so no
   two cards matched height.
   ========================================================================== */

.cat-grid { gap: clamp(18px, 2vw, 26px); }

.cat-card__art { aspect-ratio: 16 / 9; }

.cat-card__body {
  padding: clamp(17px, 1.8vw, 21px) clamp(18px, 1.9vw, 22px) clamp(19px, 2vw, 23px);
  gap: 7px;
}

.cat-card__body h3 {
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  letter-spacing: -.02em;
  line-height: 1.22;
}

/* every description settles at two lines, so the cards align in clean rows */
.cat-card__body p {
  font-size: 13.9px;
  line-height: 1.5;
  flex: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the arrow moves onto the image, opposite the number */
.cat-card__go {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(251, 250, 248, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  box-shadow: 0 2px 8px -3px rgba(18, 21, 29, .3);
  transition: background-color .35s var(--ease), color .35s var(--ease),
              translate .35s var(--ease);
}
.cat-card:hover .cat-card__go {
  background: var(--accent);
  color: #fff;
  translate: 3px -3px;
}
.cat-card__go .arrow { transition: none; }

@media (max-width: 620px) {
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ==========================================================================
   CARD AND NOTE SIZING, CORRECTED
   The card image was sized purely by aspect ratio, so the wider the card
   got the taller the image grew. On a mid width screen that produced two
   very large cards per row. The image now has a height of its own and the
   grid reaches three columns much earlier.
   ========================================================================== */

.cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

/* the image no longer grows with the card */
.cat-card__media,
.cat-card .figure--16x9,
.cat-card__art {
  aspect-ratio: auto;
  height: clamp(126px, 13.5vw, 172px);
}
.cat-card .figure--16x9 { border-radius: 0; }
.cat-card__media picture,
.cat-card__media img,
.cat-card__art svg { height: 100%; width: 100%; object-fit: cover; }

.cat-card__body {
  padding: 15px 16px 17px;
  gap: 5px;
}
.cat-card__body h3 { font-size: 1rem; line-height: 1.24; }
.cat-card__body p  { font-size: 13.2px; line-height: 1.46; }

.cat-card__badge { top: 10px; left: 10px; padding: 5px 9px; font-size: 10px; }
.cat-card__go { top: 10px; right: 10px; width: 27px; height: 27px; }

/* --- the notes come down in scale too ------------------------------------ */
.tiles--notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  padding-top: 16px;
}
@media (min-width: 1080px) {
  .tiles--notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tiles--notes { grid-template-columns: minmax(0, 1fr); }
}

.tiles--notes .tile {
  min-height: 0;
  padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 22px) clamp(22px, 2vw, 26px);
}
.tiles--notes .tile .index-num {
  padding: .5em .8em .56em;
  margin-bottom: 14px;
  font-size: 11.5px;
}
.tiles--notes .tile h3 { font-size: 1.02rem; margin-bottom: 7px; }
.tiles--notes .tile p  { font-size: 13.4px; line-height: 1.5; }

.tiles--notes .tile::before { top: -12px; height: 23px; width: 78px; }
.tiles--notes .tile:nth-child(4n+2)::before { width: 68px; }
.tiles--notes .tile:nth-child(4n+3)::before { width: 86px; }
.tiles--notes .tile:nth-child(4n+4)::before { width: 68px; height: 22px; top: -11px; left: -11px; }

.tiles--notes .tile:nth-child(4n+2)::after,
.tiles--notes .tile:nth-child(4n+3)::after {
  border-left-width: 20px;
  border-bottom-width: 20px;
}

/* ==========================================================================
   THE CLIENT STRIP
   The institutions already supplied, sitting directly under the hero where
   a procurement officer looks for proof. Two names, standing still. Motion
   here would only be filling space that does not need filling.
   ========================================================================== */

.clients {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(24px, 3vw, 40px);
}

.eyebrow--centre {
  justify-content: center;
  text-align: center;
  margin-bottom: clamp(16px, 2.1vw, 26px);
}

.clients__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vw, 92px);
}

.clients__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

/* A fixed media box so the two marks, which are different shapes, sit on a
   shared centre line and their captions land on the same baseline. */
.clients__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(44px, 4.4vw, 58px);
}

/* Set in sentence case, not caps: MoFPED is the ministry's own form and
   flattening it to MOFPED would lose that. */
.clients__name {
  font-family: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* The global reset caps every image at the width of its container. These
   marks are sized by height instead, so they opt out of that. */
.clients__logo img {
  display: block;
  width: auto;
  max-width: none;
  filter: saturate(.94);
}

/* A circular seal and a horizontal wordmark set to the same height do not
   read as the same size. Each is sized to its own optical weight. */
.clients__logo--mofped img { height: clamp(40px, 4.1vw, 54px); }
.clients__logo--utel   img { height: clamp(32px, 3.4vw, 44px); }

/* ==========================================================================
   Folding category block (home page)
   --------------------------------------------------------------------------
   The nine category cards are a quarter of the home page on a phone. Below
   940px they collapse behind a single tappable bar, using the same chevron
   and folding behaviour as the mobile drawer. Above 940px the grid is three
   columns and costs nothing, so the toggle is removed entirely and the grid
   is always shown -- the desktop layout is untouched.
   ========================================================================== */

.cat-fold__toggle { display: none; }

@media (max-width: 940px) {
  .cat-fold__toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; width: 100%;
    padding: 17px 20px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--display);
    font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
    color: inherit; text-align: left; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: border-color .25s var(--ease-io), color .25s var(--ease-io);
  }
  .cat-fold__toggle svg { flex: none; transition: transform .3s var(--ease-io); }
  .cat-fold[data-open="true"] .cat-fold__toggle { color: var(--accent); border-color: var(--accent); }
  .cat-fold[data-open="true"] .cat-fold__toggle svg { transform: rotate(180deg); }

  .cat-fold__body { display: none; padding-top: clamp(20px, 4vw, 30px); }
  .cat-fold[data-open="true"] .cat-fold__body { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-fold__toggle, .cat-fold__toggle svg { transition: none; }
}