/* ==========================================================================
   COLORCOS — the whole site, one stylesheet.
   Replaces 32 Elementor/plugin stylesheets.

   Line Seed ships as five named cuts. The original site wired 500 to Bold and
   600 to ExtraBold, then set nearly everything at 500-600, so body copy and
   headings were all bold and nothing could carry emphasis. Here the weights
   map honestly: 300 Thin, 400 Regular, 700 Bold, 800 ExtraBold. Large text is
   set light, small labels are set heavy, and the contrast between those two
   is what the page is built on.
   ========================================================================== */

/* LINE Seed, the COLORCOS corporate typeface, self-hosted from the official
   v1.003 release (seed.line.me, SIL OFL 1.1 — see /assets/fonts/LICENSE.txt).
   Two cuts, as the WordPress site had: the Latin-only EN cut for English
   pages and the TH cut for Thai. Declaring both and switching family by
   document language means a browser downloads only the cut that page uses
   — 55 KB of Latin on an English page instead of 117 KB of Thai. */

@font-face { font-family: "Line Seed EN"; font-weight: 300; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSans_W_Th.woff2") format("woff2"); }
@font-face { font-family: "Line Seed EN"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSans_W_Rg.woff2") format("woff2"); }
@font-face { font-family: "Line Seed EN"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSans_W_Bd.woff2") format("woff2"); }
@font-face { font-family: "Line Seed EN"; font-weight: 800; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSans_W_XBd.woff2") format("woff2"); }
@font-face { font-family: "Line Seed TH"; font-weight: 300; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSansTH_W_Th.woff2") format("woff2"); }
@font-face { font-family: "Line Seed TH"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSansTH_W_Rg.woff2") format("woff2"); }
@font-face { font-family: "Line Seed TH"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSansTH_W_Bd.woff2") format("woff2"); }
@font-face { font-family: "Line Seed TH"; font-weight: 800; font-style: normal;
  font-display: swap; src: url("/assets/fonts/LINESeedSansTH_W_XBd.woff2") format("woff2"); }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #16110F;   /* headings — warm near-black rather than pure #000 */
  --body:       #453D39;
  --muted:      #8A7F79;
  --accent:     #E0007A;   /* one pink, replacing the original four */
  --accent-ink: #B00060;
  --hairline:   #E6DFDA;
  --paper:      #FBF9F7;
  --white:      #FFFFFF;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --step-3:  clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  --step-4:  clamp(2.5rem, 1.2rem + 5.4vw, 5.25rem);

  --pad:  clamp(1.25rem, 5vw, 5rem);
  --gap:  clamp(1.5rem, 3vw, 3rem);
  --band: clamp(4rem, 8vw, 8rem);
  --maxw: 1240px;
  --header-h: 80px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The Latin cut on English pages, the Thai cut on Thai pages — the split the
   WordPress site used. A browser fetches only the faces the page's family
   names, so each language downloads one cut, not both. */
:root { --font: "Line Seed EN", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[lang="th"] { --font: "Line Seed TH", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* The Thai cut carries its own Latin, so Thai pages never name the EN cut:
   listing it as a fallback made them download both, 55 KB for a handful of
   glyphs the TH cut happens not to have. */

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* The <img> stays the grid/flex item; the wrapper contributes no box of its
   own, so every existing `.logos img` / `.cards img` rule keeps working. */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 300; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--step-4); line-height: 1.03; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); line-height: 1.1; }
h3 { font-size: var(--step-2); line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
p  { margin: 0 0 1.15em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
:lang(th) body, :lang(th) p, :lang(th) li { line-height: 1.95; }

::selection { background: var(--accent); color: #fff; }
: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-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: -100%; z-index: 100;
  background: var(--ink); color: #fff; padding: .9rem 1.4rem; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---- Layout ------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.band { padding-block: var(--band); }
.band--paper { background: var(--paper); }
.band--ink { background: var(--ink); color: rgba(255,255,255,.78); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: #fff; }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ---- Shared pieces ------------------------------------------------------ */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; flex: none; }
.band--ink .eyebrow { color: var(--accent); }

.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink); max-width: 60ch; }

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.15em 2.4em; border: 1px solid transparent; border-radius: 2px;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; line-height: 1;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn--ondark { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ondark:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }

.link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding-bottom: .35rem; border-bottom: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.link::after { content: "→"; transition: transform .3s var(--ease); }
.link:hover { color: var(--accent); border-color: currentColor; }
.link:hover::after { transform: translateX(4px); }
.band--ink .link { color: #fff; border-color: rgba(255,255,255,.3); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 13, 11, .9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* The header needs more room than the text column: the English nav is 134px
   wider than the Thai one, and at the body wrap's 77.5rem it did not fit. It
   used to "fit" by squeezing the logo — the logo was the only flex item that
   could shrink — so the same logo rendered 192px on Thai pages and 129px on
   English ones. Hence the wider wrap, the tighter padding, and flex:none. */
.site-header .wrap { max-width: 92rem; padding-inline: clamp(1.25rem, 3.4vw, 4rem); }
.site-header__inner {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2.25rem);
  min-height: var(--header-h);
}
.site-header__logo { flex: none; }
.site-header__logo img { width: clamp(9rem, 13vw, 12rem); }
.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex; align-items: center;
  gap: clamp(.8rem, 1.35vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
/* The prose rule `li { margin-bottom: .4em }` was reaching the nav, giving
   every menu item a 7.2px bottom margin. align-items centres an item's
   MARGIN box, so a 37.2px link inside a 44.5px margin box was pushed to the
   top of the row: the menu text sat 3.6px above the logo, the phone number
   and the button, all of which centre on 40. Reported as "เมนูดูไม่เท่ากัน". */
.site-nav li { margin: 0; }
.site-nav a {
  position: relative; display: block; padding: .4rem 0; white-space: nowrap;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.86);
  transition: color .25s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.site-header__aside { display: flex; align-items: center; gap: clamp(.6rem, 1.3vw, 1.25rem); flex: none; }
.lang { display: flex; gap: .5rem; align-items: center; }
.lang a {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-decoration: none;
  color: rgba(255,255,255,.55); transition: color .25s var(--ease);
}
.lang a:hover, .lang a[aria-current="true"] { color: #fff; }
.site-tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1); font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
}
.site-tel:hover { color: var(--accent); }
.btn--line { background: #06C755; color: #fff; padding: .95em 1.4em; font-size: .75rem; white-space: nowrap; }
.btn--line:hover { background: #05a648; transform: translateY(-2px); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: .6rem; color: #fff;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 68rem) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgba(18,13,11,.98); margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  }
  .site-nav[data-open="true"] { max-height: 80vh; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 1rem var(--pad) 2rem; }
  .site-nav a { padding: .9rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .site-header__aside .site-tel { display: none; }
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(18rem, 42vh, 28rem);
  background: #241b18 center/cover no-repeat; isolation: isolate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,13,11,.8) 0%, rgba(20,13,11,.5) 45%, rgba(20,13,11,.15) 100%);
}
.page-hero__inner { width: 100%; padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.page-hero h1 { color: #fff; max-width: 20ch; text-shadow: 0 2px 50px rgba(0,0,0,.4); }
.page-hero .eyebrow { color: #fff; opacity: .85; }
.page-hero--plain { background: var(--paper); min-height: 0; }
.page-hero--plain::after { display: none; }
.page-hero--plain h1 { color: var(--ink); text-shadow: none; }
.page-hero--plain .eyebrow { color: var(--accent); opacity: 1; }

/* Home hero is taller and carries a lead + actions. */
.home-hero { min-height: clamp(34rem, 82vh, 52rem); }
.home-hero h1 { max-width: 18ch; }
.home-hero__lead { max-width: 40rem; margin: 1.4rem 0 2.5rem; color: rgba(255,255,255,.9); font-size: var(--step-1); line-height: 1.65; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   Blocks
   ========================================================================== */
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }

.stats { border-bottom: 1px solid var(--hairline); }
.stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--gap); padding-block: clamp(2.5rem, 5vw, 4rem);
}
.stats__n { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stats__l { display: block; margin-top: .5rem; font-size: var(--step--1); line-height: 1.5; color: var(--muted); max-width: 20ch; }

.split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--mirror .split__media { order: 2; }
}
.split__media img { width: 100%; height: clamp(18rem, 42vh, 32rem); object-fit: cover; }
/* Graphics are shown whole: a cropped wordmark is a broken wordmark. */
.split__media--contain img {
  height: auto;
  max-height: clamp(14rem, 34vh, 26rem);
  object-fit: contain;
  object-position: left center;
}
.split__body .link { margin-top: 1.75rem; }

.quote { font-size: clamp(1.375rem, .95rem + 1.7vw, 2.25rem); font-weight: 300; line-height: 1.32; letter-spacing: -.02em; color: var(--ink); margin: 0; max-width: 22ch; }

/* Column counts come from the renderer, which knows how many items there are.
   auto-fit cannot tell the difference between "one card" and "one card that
   should fill the row", so three cards dropped to two-up while a lone card
   stretched the full width. */
.cards, .gallery, .logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 44rem) {
  .cards, .gallery { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cards, .gallery { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}
.cards:not([style*="--cols"]) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { display: block; text-decoration: none; color: inherit; }
.card__media { overflow: hidden; background: var(--paper); }
.card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card h3 { margin-top: 1.1rem; font-size: var(--step-1); transition: color .25s var(--ease); }
.card:hover h3 { color: var(--accent); }

.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 1px solid var(--hairline); }
.index a {
  padding: 1.15rem .25rem; border-bottom: 1px solid var(--hairline);
  font-size: .9375rem; text-decoration: none; color: var(--ink);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.index a:hover { color: var(--accent); padding-left: .6rem; }

/* A quiet row of sibling links, not a second navigation system. */
.index--compact {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  border: 0; margin-top: .5rem;
}
.index--compact a {
  padding: .2rem 0; border: 0; font-size: var(--step--1);
  color: var(--body); text-decoration: none;
}
.index--compact a:hover { color: var(--accent); padding-left: 0; }

.logos { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.logos img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  filter: saturate(.75) contrast(.95); opacity: .88;
  transition: filter .4s var(--ease), opacity .4s var(--ease);
}
.logos img:hover { filter: none; opacity: 1; }

.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Four certification marks in one 300x71 lockup. At the file's own size each
   mark is about 65px across and the text inside them is unreadable, so this
   is sized by what the marks need, not by what the file declares. */
.cert { width: min(100%, 30rem); height: auto; flex: 0 1 auto; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--gap); }
.testimonial { border-top: 2px solid var(--accent); padding-top: 1.5rem; }
.testimonial p { font-size: var(--step-0); line-height: 1.7; color: var(--body); }
.testimonial footer { margin-top: 1rem; font-size: var(--step--1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: .9fr 1.1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: 1.5rem; }
.contact-list b { display: block; font-size: var(--step--1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .3rem; }
.contact-list a { text-decoration: none; }
.contact-list span { display: block; }
/* on its own line: inline it ran straight into the end of the address */
.contact-list__action { display: inline-flex; margin-top: .9rem; }
.contact-list a:hover { color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding-block: clamp(3rem, 6vw, 5rem); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer img { width: 11rem; }
.site-footer h4 { color: #fff; font-size: var(--step--1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .25s var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--step--1); color: rgba(255,255,255,.45);
}
.social { display: flex; gap: 1rem; }
.social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.social a:hover { background: var(--accent); border-color: var(--accent); }
.social svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover, .card:hover .card__media img { transform: none; }
}

/* ==========================================================================
   Values doughnut (About)
   Rebuilt from a Chart.js widget as inline SVG: no library, no script, and the
   segments carry the value names instead of the demo's leftover month labels.
   ========================================================================== */
.values {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.values__chart { width: clamp(11rem, 26vw, 17rem); height: auto; flex: none; }
.values__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.values__key li {
  display: flex; align-items: center; gap: .9rem; margin: 0;
  font-size: var(--step-1); font-weight: 300; color: var(--ink); letter-spacing: -.01em;
}
.values__key span { width: .85rem; height: .85rem; border-radius: 50%; flex: none; }

/* ==========================================================================
   Values layout (About)
   The four values are a set, so they are laid out as one — beside the chart
   that counts them — rather than as a long column of very large headings.
   ========================================================================== */
.values { margin-top: clamp(2rem, 4vw, 3rem); }

/* The chart and its key are one object, centred as one. */
.values__figure {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}
.values__chart { width: clamp(10rem, 22vw, 15rem); height: auto; flex: none; }
.values__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 40rem) { .values__grid { grid-template-columns: 1fr 1fr; } }
.value h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.value p { margin-top: .6rem; font-size: var(--step-0); max-width: 34ch; }
.values__key { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
/* The key was set in the muted grey used for captions, which made the labels
   harder to read than the thing they were labelling. */
.values__key li {
  display: flex; align-items: center; gap: .8rem; margin: 0;
  font-size: var(--step-0); color: var(--ink); font-weight: 400;
}
.values__key span { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }

/* ==========================================================================
   Reveal on scroll
   Sections settle in as they enter and ease back out as they leave. Small
   distances and slow easing on purpose: the point is that the page feels
   composed, not that it performs.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Scoped to .js, set by an inline script in <head>. Without JavaScript
     nothing is ever hidden, so a failed or blocked script cannot leave the
     page blank. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* leaving upward: ease back rather than snapping */
  .js [data-reveal].is-out { opacity: 0; transform: translateY(-14px); }

  /* children stagger within a revealed block */
  .js [data-reveal] [data-reveal-item],
  .js [data-reveal] .card,
  .js [data-reveal] .stats__grid > *,
  .js [data-reveal] .logos img {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].is-in [data-reveal-item],
  .js [data-reveal].is-in .card,
  .js [data-reveal].is-in .stats__grid > *,
  .js [data-reveal].is-in .logos img { opacity: 1; transform: none; }

  /* the doughnut draws itself */
  .values__chart circle { stroke-dashoffset: var(--off); }
  .js [data-reveal] .values__chart circle {
    stroke-dasharray: 0 var(--circ);
    transition: stroke-dasharray 1.1s var(--ease);
    transition-delay: calc(.15s + var(--i, 0) * .12s);
  }
  .js [data-reveal].is-in .values__chart circle { stroke-dasharray: var(--seg) var(--rest); }
}

/* The hero should never start hidden: it is the first thing painted. */
.page-hero[data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   Map link (contact)
   The map is the one thing on the contact page a visitor wants to act on, so
   it opens the real one rather than sitting there as a picture of a place.
   ========================================================================== */
.map-link { display: block; position: relative; text-decoration: none; color: inherit; }
/* The map is a drawing, not a photograph: square-cropping it cut off the
   roads that make it readable. Its own proportions, whole. */
.map-link .gallery { display: block; }
.map-link img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
  transition: filter .4s var(--ease); }
.map-link:hover img { filter: brightness(.96); }
.map-link__cue {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: .35rem; border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.map-link__cue::after { content: "↗"; transition: transform .3s var(--ease); }
.map-link:hover .map-link__cue { color: var(--accent); border-color: currentColor; }
.map-link:hover .map-link__cue::after { transform: translate(2px, -2px); }

/* ==========================================================================
   Article foot — back link and share row
   ========================================================================== */
.article-foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hairline); padding-top: clamp(1.75rem, 3vw, 2.5rem);
}
.article-share { display: flex; align-items: center; gap: 1rem; }
.article-share > span {
  font-size: var(--step--1); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.article-share .social a { width: 2.2rem; height: 2.2rem; border-color: var(--hairline); color: var(--body); }
.article-share .social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }