/* ==========================================================================
   The Extramile Media — components
   ==========================================================================
   Structure ported from the approved reference design. Every colour resolves
   through a token in theme.css, so a rebrand is that one file.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-700);text-decoration:none;transition:color .18s ease}
/* Darker on hover. A link is body text, and the brighter --brand-600
   is 4.2:1 on white — pointing at a link would have taken it below AA. */
a:hover{color:var(--brand-800)}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink-900);line-height:1.22;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,2.9rem)}
h2{font-size:clamp(1.6rem,2.6vw,2.15rem)}
h3{font-size:1.25rem}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--ink-200);margin:2.5rem 0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px;border-radius:4px}

/* ---------- Layout helpers ---------- */
/* The hidden attribute, made to actually hide.
   A UA stylesheet sets [hidden]{display:none} at the lowest specificity, so
   any author rule with its own `display` silently beats it — which is how a
   full-screen dialog that was marked hidden ended up covering the page and
   its content. Every overlay here sets display, so this has to win. */
[hidden]{display:none !important}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.container--narrow{max-width:880px}
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section--tint{background:var(--ink-50)}
.section--brand{background:linear-gradient(135deg,var(--brand-800),var(--brand-900));color:rgba(255,255,255,.86)}
.section--brand h2,.section--brand h3{color:#fff}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stack>*+*{margin-top:1rem}
.text-center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-700);color:#fff;padding:12px 20px;z-index:2000}
.skip-link:focus{left:0}

/* ---------- Section headings ---------- */
.section-head{max-width:720px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section-head--left{margin-inline:0;text-align:left}
.eyebrow{
  display:inline-block;font-family:var(--font-head);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);
  margin-bottom:.75rem;
}
.section--brand .eyebrow{color:var(--accent-300)}
.section-head p{color:var(--ink-500);font-size:1.05rem;margin-bottom:0}
.rule{width:64px;height:4px;border-radius:99px;background:var(--brand-500);margin:1rem auto 0}
.section-head--left .rule{margin-inline:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;line-height:1;
  padding:.85em 1.5em;border-radius:99px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand-800);color:#fff;box-shadow:var(--shadow-s)}
.btn-primary:hover{background:var(--brand-700);color:#fff;box-shadow:var(--shadow-m)}
.btn-support{background:var(--support-700);color:#fff}
.btn-support:hover{background:var(--support-800);color:#fff}
.btn-outline{border-color:var(--brand-700);color:var(--brand-700);background:transparent}
.btn-outline:hover{background:var(--brand-700);color:#fff}
.btn-light{background:#fff;color:var(--brand-800)}
.btn-light:hover{background:var(--ink-100);color:var(--brand-900)}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--brand-800)}
.btn-sm{padding:.62em 1.15em;font-size:.86rem}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{background:var(--navy);color:rgba(255,255,255,.82);font-size:.82rem}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.82)}
.topbar a:hover{color:#fff}
.topbar__contact{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar__links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar__links a{position:relative}
.topbar__links a+a::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.28)}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.site-header{position:sticky;top:0;z-index:900;background:#fff;box-shadow:0 1px 0 var(--ink-200)}
.site-header.is-stuck{box-shadow:var(--shadow-m)}
.header__inner{display:flex;align-items:center;gap:24px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* The logo stands alone in the header, so it carries the brand on its
   own and is sized to do that. The header grows with it. */
.brand img{height:100px;width:auto;max-width:300px;object-fit:contain}
@media (max-width:1080px){.brand img{height:60px;max-width:240px}}
@media (max-width:600px){.brand img{height:50px;max-width:190px}}
.brand__text strong{white-space:nowrap}
.brand__text{font-family:var(--font-head);line-height:1.15}
.brand__text strong{display:block;font-size:1.02rem;color:var(--brand-800);font-weight:700}
.brand__text span{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}

/* ---------- Navigation ---------- */
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list>li{position:relative;margin:0}
.nav__link{
  display:flex;align-items:center;gap:.35em;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--ink-700);
  padding:.7em .85em;border-radius:var(--radius-s);white-space:nowrap;
}
.nav__link:hover,.nav__list>li:hover>.nav__link,.nav__link[aria-current="page"]{color:var(--brand-700);background:var(--brand-50)}
.nav__link .caret{width:9px;height:9px;stroke-width:2.5;transition:transform .2s ease}
.nav__list>li:hover .caret{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);
  box-shadow:var(--shadow-l);padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;
}
.submenu--right{left:auto;right:0}
.nav__list>li:hover>.submenu,.nav__list>li:focus-within>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li{margin:0}
.submenu a{
  display:flex;align-items:center;gap:.6em;padding:.6em .8em;border-radius:var(--radius-s);
  font-size:.9rem;color:var(--ink-700);font-weight:500;
}
.submenu a:hover{background:var(--brand-50);color:var(--brand-700)}
.submenu a .ico{color:var(--brand-700);flex-shrink:0}
.submenu__label{
  padding:.5em .8em .3em;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);
}
.ext::after{content:"↗";font-size:.75em;color:var(--ink-400);margin-left:auto}

.header__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--ink-200);background:#fff;color:var(--ink-700);cursor:pointer;
  transition:.16s ease;
}
.icon-btn:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50)}
.icon-btn .ico{width:18px;height:18px}
.nav-toggle{display:none}

/* search drop */
.searchbar{display:none;border-top:1px solid var(--ink-100);background:var(--ink-50);padding:16px 0}
.searchbar.is-open{display:block}
.searchbar form{display:flex;gap:10px;max-width:640px;margin:0 auto}
.searchbar input{
  flex:1;padding:.8em 1.1em;border:1px solid var(--ink-200);border-radius:99px;
  font:inherit;font-size:.95rem;background:#fff;
}
.searchbar input:focus{outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-ring)}

/* ---------- Mobile nav ---------- */
@media (max-width:1080px){
  .nav-toggle{display:grid}
  .nav{
    position:fixed;inset:calc(var(--header-h) + 40px) 0 0 auto;width:min(360px,88vw);
    background:#fff;box-shadow:var(--shadow-l);overflow-y:auto;padding:16px 16px 60px;
    transform:translateX(105%);transition:transform .28s ease;margin:0;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__link{padding:.85em .9em;font-size:1rem;justify-content:space-between}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--ink-100);border-radius:0;margin:0 0 6px 14px;
    padding:0 0 0 6px;display:none;
  }
  .submenu.is-open{display:block}
  .nav__list>li:hover>.submenu{opacity:1;visibility:visible}
  .topbar__contact{display:none}
}

/* ==========================================================================
   HERO SLIDER (home)
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;background:var(--navy);
  background-size:cover;background-position:center;
  min-height:min(80vh,660px);display:grid;align-items:center;
  /* The headline does not wrap, and it is sized to fit with room to spare.
     This is the belt to that braces: if a longer headline or a wider font
     ever outgrows the line, it is clipped here rather than making the whole
     page scroll sideways. */
  overflow:hidden;
}
/* The veil. Without it the type would be legible over the sky in this
   photograph and illegible over the faces, which is the same as illegible.

   It stays within .78–.92 rather than fading out at the top: the headline is
   centred now, so any part of the photograph can end up behind any part of
   the text, and the lightest point has to hold the smallest type. Measured
   against the worst case the veil admits — a pure white photograph — the
   badge is 5.1:1, the paragraph 5.4:1 and the cyan half of the headline
   3.6:1 at display size, where 3:1 is the bar. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--veil-2) 0%,var(--veil-1) 100%);
}
.hero__content{
  position:relative;z-index:2;max-width:100%;margin:0 auto;text-align:center;
  padding:clamp(4rem,12vw,7rem) 0 clamp(3.4rem,7vw,4.6rem);
}
/* The badge. A pill rather than a heading: it names the promise, and the
   headline under it is what the page is actually about. */
.hero__badge{
  display:inline-block;margin-bottom:clamp(1rem,2.4vw,1.6rem);
  padding:.4em 1.15em;border-radius:99px;
  background:var(--scrim);border:1px solid rgba(255,255,255,.3);
  color:var(--hero-badge-ink);
  font-family:var(--font-head);font-weight:700;font-size:.82rem;
  letter-spacing:.02em;
}
/* One line, no break between the white half and the coloured one. The size
   scales with the viewport rather than sitting at a fixed size, because "no
   wrap" and "fixed size" together are how a headline ends up wider than the
   screen. The floor is deliberately low: a 1.6rem floor stopped the scaling
   at 800px and the line overflowed everything narrower.

   Checked against every width from 621px to 1920px, allowing .60em per
   character for Poppins ExtraBold. Below 620px no size fits 44 characters on
   one line and is still a headline, so it wraps there instead — a
   sideways-scrolling page is worse than a two-line title. */
.hero h1{
  color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.15rem,3.2vw,2.5rem);line-height:1.15;
  letter-spacing:-.01em;margin-bottom:clamp(1.1rem,2.6vw,1.6rem);
  white-space:nowrap;
}
.hero h1 .hl{color:var(--hero-highlight)}

@media (max-width:620px){
  .hero h1{white-space:normal;font-size:clamp(1.5rem,6.6vw,2.1rem);text-wrap:balance}
}
.hero__sub{
  color:rgba(255,255,255,.86);font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.6;margin:0 auto 2rem;max-width:60ch;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- Quick action strip ---------- */
.quickbar{position:relative;z-index:10;margin-top:-46px}
.quickbar__inner{
  background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px;
}
.quick{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  padding:1.2rem .8rem;border-radius:var(--radius);color:var(--ink-700);
  font-family:var(--font-head);font-weight:600;font-size:.88rem;line-height:1.3;
  transition:.18s ease;
}
.quick:hover{background:var(--brand-50);color:var(--brand-700);transform:translateY(-3px)}
.quick .ico{width:26px;height:26px;color:var(--brand-700);stroke-width:1.7}
.quick:hover .ico{color:var(--brand-700)}

/* ---------- Project and service gallery ----------
   A stage with thumbnails under it. A thumbnail puts its image in the stage;
   clicking the stage image goes full screen. Full screen is the reader's
   choice, never something a thumbnail click springs on them. */
.pgallery{display:flex;flex-direction:column;gap:12px}

/* The image is contained, not cropped. A tall photograph is letterboxed
   against the dark stage rather than losing its top and bottom — which is
   what "fit the screen" has to mean when the images are whatever shape the
   client uploaded. */
.pgallery__stage{
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--ink-900);border-radius:var(--radius-l);overflow:hidden;
}
.pgallery__stage img{
  width:100%;height:100%;object-fit:contain;display:block;margin:0;
  cursor:zoom-in;
}

/* Full screen: the stage element itself fills the viewport, so the arrows,
   the caption and the counter come with it and still work. */
.pgallery__stage:fullscreen{
  aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;
  background:#000;
}
.pgallery__stage:fullscreen img{cursor:zoom-out}
.pgallery__stage:-webkit-full-screen{
  aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;background:#000;
}

.pgallery__full{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:var(--scrim-strong);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .16s ease;
}
.pgallery__full:hover{background:var(--brand-700)}
.pgallery__full .ico{width:17px;height:17px}

.pgallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--scrim-strong);color:#fff;display:grid;place-items:center;
  transition:background .16s ease;
}
.pgallery__nav:hover{background:var(--brand-700)}
.pgallery__nav .ico{width:22px;height:22px}
.pgallery__nav--prev{left:12px}
.pgallery__nav--next{right:12px}

.pgallery__count{
  position:absolute;top:16px;left:16px;padding:.2rem .6rem;border-radius:99px;
  background:var(--scrim-strong);color:#fff;font-size:.76rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pgallery__cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:2.4rem 1rem .9rem;color:#fff;font-size:.86rem;line-height:1.4;
  text-align:center;
  background:linear-gradient(to top,var(--veil-image),transparent);
  pointer-events:none;
}
.pgallery__cap:empty{display:none}

/* Thumbnails. These crop deliberately — a strip of even squares is easier to
   scan than a row of different shapes. */
.pgallery__thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;list-style:none;margin:0;padding:0;
}
.pgallery__thumb{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius-s);
  aspect-ratio:4/3;background:var(--ink-100);
  border:2px solid transparent;transition:border-color .16s ease;
}
.pgallery__thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.pgallery__thumb:hover{border-color:var(--brand-500)}
.pgallery__thumb.is-current{border-color:var(--brand-700)}

@media (prefers-reduced-motion:reduce){
  .pgallery__full,.pgallery__nav,.pgallery__thumb{transition:none}
}

.auth__aside{margin:1.1rem 0 0;text-align:center;font-size:.88rem}

/* A list of names rather than cards: target clients, partnership areas.
   They carry no explanation each, so a grid of near-empty cards would be
   mostly padding. */
.taglist{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  list-style:none;margin:0;padding:0;
}
.taglist li{
  padding:.5em 1.1em;border-radius:99px;background:var(--ink-50);
  border:1px solid var(--ink-100);color:var(--ink-700);
  font-size:.9rem;font-weight:600;
}
.taglist--brand li{
  background:var(--brand-50);border-color:transparent;color:var(--brand-700);
}
.taglist__head{
  text-align:center;margin:2rem 0 1rem;font-size:.78rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);
}

/* ---------- Service ticker ----------
   Two identical tracks side by side, the second aria-hidden, each scrolled
   the full width of one track. When the first has moved exactly its own
   width the second is where it started, so the loop has no seam and no
   JavaScript. Hover pauses it; reduced-motion stops it and lets the strip
   scroll by hand instead. */
.ticker{
  background:var(--navy);color:#fff;overflow:hidden;
  border-top:1px solid var(--navy-800);border-bottom:1px solid var(--navy-800);
}
.ticker__rail{display:flex;width:max-content}
.ticker__track{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
  animation:ticker-slide 46s linear infinite;
}
@keyframes ticker-slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}

.ticker__item{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.5rem;
  border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;
}
.ticker__name{
  display:inline-flex;align-items:center;gap:.5rem;color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:.9rem;
}
.ticker__name:hover{color:#fff;text-decoration:underline}
.ticker__name .ico{width:17px;height:17px;color:var(--brand-300);flex-shrink:0}
/* --brand-700 rather than the platform --brand-500: white type sits on this
   one, and the platform orange is 3.6:1 behind white where this is 5.0:1. */
.ticker__cta{
  background:var(--brand-700);color:#fff;border:0;border-radius:99px;
  padding:.32rem .95rem;font:inherit;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;cursor:pointer;transition:background .16s ease;
}
/* Darker on hover, not brighter: white type sits on this button, and
   --brand-600 would drop it to 4.2:1 — hovering would make the label
   harder to read, which is the wrong direction for feedback. */
.ticker__cta:hover{background:var(--brand-800)}
.ticker__cta:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ticker__rail{width:100%;overflow-x:auto;scrollbar-width:thin}
  .ticker__track{animation:none}
  .ticker__track[aria-hidden="true"]{display:none}
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);
  padding:1.9rem 1.6rem;transition:.22s ease;height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
.card h3{margin-bottom:.5rem;font-size:1.12rem}
.card p{color:var(--ink-500);font-size:.94rem;margin-bottom:0}
.card__icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-700);margin-bottom:1.1rem;
}
.card__icon .ico{width:24px;height:24px;stroke-width:1.8}
.card--support .card__icon{background:var(--support-50);color:var(--support-700)}
.card__link{
  display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;
  font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--brand-700);
}
.card__link .ico{width:14px;height:14px;transition:transform .18s ease}
.card:hover .card__link .ico{transform:translateX(4px)}

/* service card variant with top accent */
.card--service{position:relative;overflow:hidden}
.card--service::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.card--service:hover::before{transform:scaleX(1)}

/* ---------- Assistance band ---------- */
.assist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:2.4rem}
.assist__item{
  display:flex;flex-direction:column;gap:.7rem;padding:1.6rem;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:#fff;transition:.2s ease;
}
.assist__item:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateY(-4px)}
.assist__item .ico{width:26px;height:26px;color:var(--navy-800);flex-shrink:0}
.assist__item strong{font-family:var(--font-head);font-size:1.05rem}
.assist__item span{font-size:.9rem;color:rgba(255,255,255,.78)}

/* ---------- Stats ---------- */
/* Numbered process steps. The number is the ordering device, so it is
   drawn, not decorative: the connecting rule ties one step to the next. */
.steps{list-style:none;display:grid;gap:0;counter-reset:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:0 0 28px;position:relative}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:23px;top:52px;bottom:0;width:2px;
  background:var(--ink-100);
}
.step:last-child::before{display:none}
.step__num{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  background:var(--brand-700);color:#fff;position:relative;z-index:1;
}
.step h3{font-size:1.08rem;margin:.6rem 0 .35rem}
.step p{color:var(--ink-500);font-size:.94rem;margin:0}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(2,1fr);column-gap:40px}
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;text-align:center}
.stat__num{
  font-family:var(--font-head);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;
  color:var(--navy-800);line-height:1;display:block;
}
.stat__label{
  display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-100);
  border-radius:var(--radius);overflow:hidden;height:100%;transition:.22s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.news-card__media{position:relative;aspect-ratio:16/9;background:var(--ink-100);overflow:hidden}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-card:hover .news-card__media img{transform:scale(1.05)}
.news-card__date{
  position:absolute;top:14px;left:14px;background:var(--brand-700);color:#fff;
  border-radius:10px;padding:.5em .7em;text-align:center;line-height:1.05;
  font-family:var(--font-head);box-shadow:var(--shadow-s);
}
.news-card__date b{display:block;font-size:1.2rem;font-weight:700}
.news-card__date span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.news-card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.news-card__cat{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--support-700);margin-bottom:.5rem;
}
.news-card__body h3{font-size:1.05rem;margin-bottom:.55rem}
.news-card__body h3 a{color:inherit}
.news-card__body h3 a:hover{color:var(--brand-700)}
.news-card__body p{color:var(--ink-500);font-size:.92rem;flex:1}
.news-card__more{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-head);
  font-weight:600;font-size:.85rem;color:var(--brand-700);margin-top:.4rem;
}

/* news list (archive) */
.news-list{display:flex;flex-direction:column;gap:26px}
.news-item{
  display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;
  padding-bottom:26px;border-bottom:1px solid var(--ink-100);
}
.news-item:last-child{border-bottom:0}
.news-item__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--ink-100)}
.news-item__media img{width:100%;height:100%;object-fit:cover}
.news-item h3{font-size:1.28rem;margin-bottom:.4rem}
.news-item h3 a{color:inherit}
.news-item h3 a:hover{color:var(--brand-700)}
@media (max-width:720px){.news-item{grid-template-columns:1fr}}

.meta{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-size:.83rem;color:var(--ink-400);margin-bottom:.8rem;
}
.meta .ico{width:14px;height:14px;vertical-align:-.15em;margin-right:.35em}
.tag{
  display:inline-block;background:var(--support-50);color:var(--support-800);
  padding:.25em .7em;border-radius:99px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   PAGE HERO / BREADCRUMB
   ========================================================================== */
.page-hero{
  position:relative;background:linear-gradient(120deg,var(--brand-900),var(--brand-700));
  color:#fff;padding:clamp(2.6rem,6vw,4.2rem) 0;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:22px 22px;
}
/* With a banner picked in the dashboard. The veil is the same one the home
   hero uses and for the same reason: the type has to hold over whatever part
   of the photograph ends up behind it, not just over the easy parts. Against
   the worst case the veil admits — a pure white image — the heading is
   6.6:1 and the lede 5.0:1. The breadcrumb is lifted from .7 to .82 here
   because at .7 it measured 4.2:1, under the floor for text that small. */
.page-hero--image{
  background-size:cover;background-position:center;
}
.page-hero--image::before{
  background-image:linear-gradient(120deg,var(--veil-2),var(--veil-1));
  background-size:auto;opacity:1;
}
.page-hero--image .breadcrumb,
.page-hero--image .breadcrumb a{color:rgba(255,255,255,.82)}
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{color:#fff;margin-bottom:.3rem}
.page-hero p{color:rgba(255,255,255,.82);max-width:56em;margin-bottom:0}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:.5em;align-items:center;list-style:none;
  margin:0 0 .9rem;padding:0;font-size:.83rem;color:rgba(255,255,255,.7);
}
.breadcrumb li{margin:0}
.breadcrumb a{color:rgba(255,255,255,.86)}
.breadcrumb a:hover{color:#fff}
.breadcrumb li+li::before{content:"/";margin-right:.5em;color:rgba(255,255,255,.42)}

/* ---------- Content layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
@media (max-width:960px){.layout{grid-template-columns:1fr;gap:36px}}
.prose h2{margin-top:2.2rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8rem}
.prose ul li::marker{color:var(--brand-700)}
.prose img{border-radius:var(--radius);margin:1.6rem 0}
.prose blockquote{
  margin:1.8rem 0;padding:1.2rem 1.6rem;background:var(--brand-50);
  border-left:4px solid var(--brand-700);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.02rem;color:var(--ink-700);
}
.prose blockquote p:last-child{margin-bottom:0}
.lead{font-size:1.12rem;color:var(--ink-700)}

/* ---------- Sidebar ---------- */
.side-widget{
  background:var(--ink-50);border:1px solid var(--ink-100);
  border-radius:var(--radius);padding:1.5rem;margin-bottom:24px;
}
.side-widget h3{
  font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-700);
  margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--ink-200);
}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{margin:0;border-bottom:1px solid var(--ink-200)}
.side-list li:last-child{border-bottom:0}
.side-list a{
  display:flex;align-items:center;gap:.6em;padding:.68em 0;
  font-size:.92rem;font-weight:500;color:var(--ink-700);
}
.side-list a:hover{color:var(--brand-700);padding-left:.3em}
.side-list a[aria-current="page"]{color:var(--brand-700);font-weight:600}
.side-list .ico{width:15px;height:15px;color:var(--brand-700);flex-shrink:0}
.side-widget--cta{background:linear-gradient(140deg,var(--brand-800),var(--brand-900));border:0;color:rgba(255,255,255,.85)}
.side-widget--cta h3{color:#fff;border-color:rgba(255,255,255,.2)}
.side-widget--cta p{font-size:.92rem}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-block;padding:.4em .85em;background:#fff;border:1px solid var(--ink-200);
  border-radius:99px;font-size:.8rem;color:var(--ink-700);
}
.chip:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50)}

/* ==========================================================================
   STAFF
   ========================================================================== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:2.6rem}
.tab{
  font-family:var(--font-head);font-weight:600;font-size:.9rem;padding:.7em 1.5em;
  border-radius:99px;border:1px solid var(--ink-200);background:#fff;color:var(--ink-700);
  cursor:pointer;transition:.18s ease;
}
.tab:hover{border-color:var(--brand-700);color:var(--brand-700)}
.tab.is-active{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.staff-card{
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);
  overflow:hidden;text-align:center;transition:.22s ease;
}
.staff-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.staff-card__photo{aspect-ratio:1/1;background:var(--ink-100);overflow:hidden}
.staff-card__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.staff-card__body{padding:1.1rem .9rem 1.3rem}
.staff-card__name{font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--ink-900);margin-bottom:.2rem}
.staff-card__role{font-size:.81rem;color:var(--ink-500);min-height:2.4em;margin-bottom:.6rem;line-height:1.35}
.staff-card__mail{
  display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;
  color:var(--brand-700);word-break:break-all;
}
.staff-card__mail .ico{width:13px;height:13px;flex-shrink:0}
.staff-card--lead{grid-column:span 2}
@media (max-width:560px){.staff-card--lead{grid-column:span 1}}

.unit-title{
  font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--brand-800);
  margin:2.6rem 0 1.2rem;padding-bottom:.6rem;border-bottom:2px solid var(--brand-50);
}
.unit-title:first-child{margin-top:0}

/* ==========================================================================
   MISC BLOCKS
   ========================================================================== */
.feature-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2rem,5vw,4rem);align-items:center}
.feature-split img{border-radius:var(--radius-l);box-shadow:var(--shadow-m)}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:.8em;align-items:flex-start;margin-bottom:.85em;font-size:.98rem}
.checklist .ico{width:20px;height:20px;color:var(--support-700);flex-shrink:0;margin-top:.18em;stroke-width:2.4}

.doc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.doc-list li{margin:0}
.doc-list a{
  display:flex;align-items:center;gap:.85em;padding:1em 1.2em;background:#fff;
  border:1px solid var(--ink-100);border-radius:var(--radius);color:var(--ink-700);
  font-weight:500;font-size:.94rem;transition:.18s ease;height:100%;
}
.doc-list a:hover{border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-800);transform:translateX(3px)}
.doc-list .ico{width:20px;height:20px;color:var(--brand-700);flex-shrink:0}

.info-card{
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);
  padding:1.8rem;display:flex;gap:1.1rem;align-items:flex-start;
}
.info-card .ico{width:24px;height:24px;color:var(--brand-700);flex-shrink:0;margin-top:.2rem}
.info-card h3{font-size:1.02rem;margin-bottom:.3rem}
.info-card p{margin-bottom:0;font-size:.94rem;color:var(--ink-500)}
.info-card a{font-weight:500}

.callout{
  background:var(--support-50);border:1px solid var(--support-50);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin:1.8rem 0;
}
.callout p:last-child{margin-bottom:0}
.callout--warn{background:var(--warn-50);border-color:var(--accent-300)}

.table-wrap{overflow-x:auto;border:1px solid var(--ink-100);border-radius:var(--radius)}
.table-wrap table{min-width:520px;font-size:.93rem}
.table-wrap th,.table-wrap td{padding:.9em 1.1em;text-align:left;border-bottom:1px solid var(--ink-100)}
.table-wrap th{background:var(--ink-50);font-family:var(--font-head);font-weight:600;color:var(--ink-900)}
.table-wrap tr:last-child td{border-bottom:0}

.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.resource{
  display:flex;flex-direction:column;gap:.7rem;padding:1.7rem;border-radius:var(--radius);
  background:#fff;border:1px solid var(--ink-100);transition:.2s ease;height:100%;
}
.resource:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
.resource .ico{width:28px;height:28px;color:var(--brand-700)}
.resource strong{font-family:var(--font-head);font-size:1.05rem;color:var(--ink-900)}
.resource span{font-size:.9rem;color:var(--ink-500)}
.resource em{
  font-style:normal;margin-top:auto;padding-top:.6rem;font-size:.82rem;font-weight:600;
  color:var(--brand-700);display:inline-flex;align-items:center;gap:.35em;
}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;display:grid;place-items:center;padding:0 .8em;
  border:1px solid var(--ink-200);border-radius:var(--radius-s);font-size:.9rem;
  font-weight:600;color:var(--ink-700);
}
.pagination a:hover{border-color:var(--brand-700);color:var(--brand-700)}
.pagination .is-current{background:var(--brand-700);border-color:var(--brand-700);color:#fff}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-800);color:rgba(255,255,255,.66);padding:clamp(3rem,6vw,4.5rem) 0 0;font-size:.93rem}
.site-footer h4{
  color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:1.3rem;
}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
@media (max-width:900px){.footer__grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px}}
.footer__lockup{display:flex;align-items:center;gap:12px;margin-bottom:1.6rem}
.footer__lockup img{height:74px;width:auto;max-width:280px;object-fit:contain;background:#fff;border-radius:10px;padding:8px 10px}
.footer__lockup>span{font-family:var(--font-head);line-height:1.2}
.footer__lockup strong{display:block;color:#fff;font-size:1.05rem;font-weight:700}
.footer__lockup>span>span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.footer__list{list-style:none;margin:0;padding:0}
.footer__list li{margin-bottom:.6em}
.footer__list a{color:rgba(255,255,255,.66)}
.footer__list a:hover{color:#fff;padding-left:.25em}
.footer__list a{display:inline-block;transition:.16s ease}
.site-footer address{font-style:normal;line-height:1.8}
.footer__contact a{color:rgba(255,255,255,.86)}
.social{display:flex;gap:10px;margin-top:1.3rem}
.social a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;transition:.18s ease;
}
.social a:hover{background:var(--brand-700);transform:translateY(-2px)}
.social .ico{width:17px;height:17px}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--brand-900);
  padding:1.4rem 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.5);
}
.footer__bottom a{color:rgba(255,255,255,.7)}

.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--brand-800);color:#fff;border:0;display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-m);opacity:0;visibility:hidden;
  transform:translateY(12px);transition:.24s ease;z-index:800;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-700)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.site-header,.site-footer,.to-top,.hero__dots,.searchbar{display:none!important}
  body{color:#000}
  a{color:#000;text-decoration:underline}
}

/* ---------- Article thumbnail fallback (no featured image) ---------- */
.media-fallback{
  display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-900));
}
.media-fallback::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:18px 18px;
}
.media-mark{position:relative;z-index:1;display:grid;place-items:center}
.media-mark .ico{width:54px;height:54px;color:rgba(255,255,255,.55);stroke-width:1.3}
.news-item__media.media-fallback{aspect-ratio:4/3}
.news-item__media .news-card__date{display:none}

/* ==========================================================================
   EXTRAMILE ADDITIONS
   Blocks the reference design had no equivalent for.
   ========================================================================== */

/* ---------- Project state pill ---------- */
.state{
  display:inline-block;padding:.25em .7em;border-radius:99px;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.state--completed{background:var(--support-50);color:var(--support-800)}
.state--ongoing{background:var(--accent-50);color:var(--accent-700)}
.state--participated{background:var(--brand-50);color:var(--brand-800)}

/* ---------- Portfolio tile ---------- */
.work{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;background:var(--ink-100);box-shadow:var(--shadow-s);
  transition:.22s ease;
}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.work:hover img{transform:scale(1.05)}
.work__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--veil-image) 0%,var(--veil-image-soft) 48%,transparent 78%);
}
.work__body{position:absolute;inset:auto 0 0 0;padding:1.4rem;color:#fff}
.work__body h3{color:#fff;font-size:1.08rem;margin-bottom:.25rem}
.work__kicker{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-300);margin-bottom:.4rem;
}
.work__empty{position:absolute;inset:0;display:grid;place-items:center}
.work__empty .ico{width:46px;height:46px;color:var(--ink-400);stroke-width:1.3}

/* ---------- Video embed ---------- */
.video{
  border:1px solid var(--ink-100);border-radius:var(--radius);overflow:hidden;
  background:#fff;height:100%;display:flex;flex-direction:column;
}
.video__frame{aspect-ratio:16/9;background:var(--ink-100)}
.video__frame iframe{width:100%;height:100%;border:0;display:block}
.video__body{padding:1.3rem}
.video__body h3{font-size:1.02rem;margin-bottom:.3rem}
.video__body p{color:var(--ink-500);font-size:.92rem;margin-bottom:0}
.section--brand .video{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--brand .video__body h3{color:#fff}
.section--brand .video__body p{color:rgba(255,255,255,.72)}

/* ---------- Live strip (REQ-3) ---------- */
.livestrip{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--brand-500);color:#fff;padding:.6rem 0;font-size:.88rem;
}
.livestrip__inner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.livestrip__dot{
  width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.livestrip a{color:#fff;font-weight:600;text-decoration:underline}
.livestrip strong{font-family:var(--font-head)}

/* ---------- Insight (polled feed) ---------- */
.insight{border-left:3px solid var(--accent);padding-left:1.1rem;margin-bottom:1.4rem}
.insight__kind{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-700);
}
.insight__title{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--ink-900);margin:.25rem 0}
.insight__body{color:var(--ink-500);font-size:.93rem;margin:0}

/* ---------- Floating enquiry button (REQ-14) ---------- */
.fab{
  position:fixed;right:22px;bottom:80px;width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:var(--brand-900);border:0;display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-l);z-index:810;transition:.2s ease;
}
.fab:hover{background:var(--accent-300);color:var(--brand-900);transform:scale(1.06)}
.fab .ico{width:24px;height:24px;stroke-width:2}

/* ---------- Empty state ---------- */
.empty{
  grid-column:1/-1;text-align:center;padding:3.5rem 1rem;color:var(--ink-500);
  border:1px dashed var(--ink-200);border-radius:var(--radius);
}
.empty .ico{width:40px;height:40px;color:var(--ink-200);margin:0 auto 1rem;stroke-width:1.4}

/* ---------- Team card link ---------- */
.staff-card{display:block;color:inherit}
.staff-card:hover .staff-card__name{color:var(--brand-700)}

/* ---------- Auth ---------- */
.auth{min-height:70vh;display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 0;background:var(--ink-50)}
.auth__card{width:100%;max-width:440px;background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius-l);padding:clamp(1.75rem,4vw,2.5rem);box-shadow:var(--shadow-m)}
.auth__card h1{font-size:1.5rem;margin-bottom:.4rem}
.auth__card>p{color:var(--ink-500);font-size:.95rem;margin-bottom:1.6rem}
.auth__form{display:flex;flex-direction:column;gap:1.1rem}
.auth__field label{display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:.45rem}
.auth__field input{width:100%;padding:.8em 1.05em;border:1px solid var(--ink-200);border-radius:var(--radius-s);font:inherit;background:#fff;color:var(--ink-900)}
.auth__field input:focus{outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-ring)}
.auth__error{font-size:.85rem;color:var(--danger);margin-top:.35rem}
.auth__alert{font-size:.9rem;padding:.8rem 1rem;border-radius:var(--radius-s);background:var(--ink-50);border:1px solid var(--ink-200);color:var(--ink-700);margin-bottom:1rem}
.auth__alert--error{background:var(--danger-50);border-color:var(--danger);color:var(--danger)}
.auth__back{display:block;text-align:center;margin-top:1.4rem;font-size:.9rem;color:var(--ink-500)}

/* ==========================================================================
   DASHBOARD
   Same tokens as the public site (REQ-4) — one theme, two shells.
   ========================================================================== */
.dash{display:grid;grid-template-columns:264px 1fr;min-height:100vh;background:var(--ink-50)}
@media (max-width:1080px){.dash{grid-template-columns:1fr}}

.dash__side{
  background:var(--brand-900);color:rgba(255,255,255,.72);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
@media (max-width:1080px){
  .dash__side{
    position:fixed;inset:0 auto 0 0;width:min(280px,86vw);z-index:1000;
    transform:translateX(-105%);transition:transform .26s ease;
  }
  .dash__side.is-open{transform:none}
}
.dash__brand{display:flex;align-items:center;gap:10px;padding:1.1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.dash__brand img{height:46px;width:auto;max-width:170px;object-fit:contain;background:#fff;border-radius:8px;padding:4px 6px}
.dash__brand strong{font-family:var(--font-head);color:#fff;font-size:.95rem;display:block;line-height:1.2}
.dash__brand span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.dash__nav{flex:1;overflow-y:auto;padding:.9rem .7rem}
.dash__link{
  display:flex;align-items:center;gap:.75rem;padding:.65em .8em;border-radius:var(--radius-s);
  color:rgba(255,255,255,.72);font-family:var(--font-head);font-weight:500;font-size:.9rem;
  margin-bottom:2px;transition:.16s ease;
}
.dash__link:hover{background:rgba(255,255,255,.08);color:#fff}
.dash__link.is-active{background:var(--brand-700);color:#fff}
.dash__link .ico{width:17px;height:17px;flex-shrink:0}
.dash__foot{padding:.9rem .7rem;border-top:1px solid rgba(255,255,255,.1)}
.dash__foot .dash__link{width:100%;border:0;background:none;text-align:left;cursor:pointer;font:inherit}

.dash__main{display:flex;flex-direction:column;min-width:0}
.dash__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;border-bottom:1px solid var(--ink-200);padding:0 1.5rem;min-height:64px;
  position:sticky;top:0;z-index:500;
}
.dash__top h1{font-size:1.15rem;margin:0}
.dash__burger{display:none}
@media (max-width:1080px){.dash__burger{display:grid}}
.dash__who{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--ink-500)}
.dash__avatar{
  width:34px;height:34px;border-radius:50%;background:var(--brand-700);color:#fff;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.78rem;
}
.dash__body{padding:1.5rem;flex:1}
@media (min-width:1081px){.dash__body{padding:2rem}}
.dash__scrim{position:fixed;inset:0;background:var(--scrim);z-index:999;display:none}
.dash__scrim.is-open{display:block}
@media (min-width:1081px){.dash__scrim{display:none!important}}

.panel{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);overflow:hidden}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid var(--ink-100)}
.panel__head h2{font-size:1rem;margin:0}
.panel__body{padding:1.3rem}

.tile-stat{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:1.2rem;color:inherit}
.tile-stat:hover{border-color:var(--brand-700);color:inherit}
.tile-stat__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-700);flex-shrink:0}
.tile-stat__v{font-family:var(--font-head);font-size:1.6rem;font-weight:800;line-height:1;color:var(--ink-900)}
.tile-stat__l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);margin-top:.35rem}

/* modal + upload progress (REQ-19, REQ-26c) */
.modal-back{position:fixed;inset:0;background:var(--scrim-strong);z-index:1100;display:none;padding:1.5rem;overflow-y:auto}
.modal-back.is-open{display:grid;place-items:start center}
.modal-card{background:#fff;border-radius:var(--radius-l);width:100%;max-width:640px;margin-block:2rem;box-shadow:var(--shadow-l)}
.modal-card--wide{max-width:min(1100px,95vw)}
.modal-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--ink-100)}
.modal-card__head h2{margin:0;font-size:1.05rem}
.modal-card__body{padding:1.4rem}
.upload-progress{height:6px;border-radius:99px;background:var(--ink-100);overflow:hidden}
.upload-progress__bar{height:100%;width:0;background:var(--brand-700);transition:width .15s linear}
.toast-tray{position:fixed;top:1rem;right:1rem;z-index:1200;display:flex;flex-direction:column;gap:.6rem;max-width:min(380px,92vw)}
.toast{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border:1px solid var(--ink-200);border-left:4px solid var(--brand-700);border-radius:var(--radius-s);padding:.85rem 1rem;box-shadow:var(--shadow-m);font-size:.9rem}
.toast--success{border-left-color:var(--support-700)}
.toast--error{border-left-color:var(--danger)}
.toast--warning{border-left-color:var(--warn)}
.toast button{margin-left:auto;background:none;border:0;color:var(--ink-400);cursor:pointer;font-size:1.1rem;line-height:1}

/* ---------- Enquiry form (REQ-14, REQ-15) ---------- */
.enquiry__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin-bottom:1.3rem}
.enquiry__wide{grid-column:1/-1}
.enquiry textarea{resize:vertical;min-height:120px}
.enquiry .auth__field input,.enquiry .auth__field textarea{
  width:100%;padding:.8em 1.05em;border:1px solid var(--ink-200);border-radius:var(--radius-s);
  font:inherit;background:#fff;color:var(--ink-900);
}
.enquiry .auth__field input:focus,.enquiry .auth__field textarea:focus{
  outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-ring);
}
.enquiry__note{font-size:.85rem;color:var(--ink-400);margin:.9rem 0 0}

/* Floating enquiry panel */
.enquiry-panel{
  position:fixed;inset:auto 22px 80px auto;width:min(420px,calc(100vw - 44px));
  max-height:min(78vh,720px);overflow-y:auto;background:#fff;border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);z-index:820;display:none;
}
.enquiry-panel.is-open{display:block}
.enquiry-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--ink-100);
  position:sticky;top:0;background:#fff;border-radius:var(--radius-l) var(--radius-l) 0 0;
}
.enquiry-panel__head h2{margin:0;font-size:1.05rem}
.enquiry-panel__body{padding:1.3rem}
.enquiry-panel .enquiry__row{grid-template-columns:1fr}
@media (max-width:520px){
  .enquiry-panel{inset:auto 12px 78px 12px;width:auto}
}

/* ---------- Inbox ---------- */
.lead-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;
  padding:1rem 1.2rem;border-bottom:1px solid var(--ink-100);color:inherit;
}
.lead-row:last-child{border-bottom:0}
.lead-row:hover{background:var(--ink-50);color:inherit}
.lead-row--unread{background:var(--brand-50)}
.lead-row--unread:hover{background:var(--brand-50)}
.lead-row__dot{width:8px;height:8px;border-radius:50%;background:var(--brand-700);margin-top:.55rem}
.lead-row--read .lead-row__dot{background:var(--ink-200)}
.lead-row__who{font-family:var(--font-head);font-weight:600;color:var(--ink-900)}
.lead-row__sub{font-size:.92rem;color:var(--ink-700);margin:.15rem 0}
.lead-row__excerpt{font-size:.86rem;color:var(--ink-400)}
.lead-row__when{font-size:.78rem;color:var(--ink-400);white-space:nowrap;text-align:right}
.badge{
  display:inline-block;padding:.2em .6em;border-radius:99px;font-size:.68rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.badge--new{background:var(--brand-50);color:var(--brand-800)}
.badge--read{background:var(--ink-100);color:var(--ink-500)}
.badge--replied{background:var(--support-50);color:var(--support-800)}
.badge--closed{background:var(--ink-100);color:var(--ink-400)}
.badge--spam{background:var(--danger-50);color:var(--danger)}
.note{background:var(--ink-50);border-left:3px solid var(--brand-700);padding:.9rem 1.1rem;border-radius:0 var(--radius-s) var(--radius-s) 0;margin-bottom:.9rem}
.note__meta{font-size:.76rem;color:var(--ink-400);margin-bottom:.35rem}

/* ==========================================================================
   DASHBOARD CRUD (REQ-12, REQ-19, REQ-21d, REQ-22, REQ-26a-c)
   ========================================================================== */

/* ---------- Forms in modals ---------- */
.dash-form{display:flex;flex-direction:column;gap:1.3rem}
.dash-form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.dash-form__wide{grid-column:1/-1}
.dash-form__help{font-size:.83rem;color:var(--ink-400);margin:.35rem 0 0}
.dash-form__actions{
  display:flex;gap:.7rem;position:sticky;bottom:0;background:#fff;
  padding-top:1rem;margin-top:.2rem;border-top:1px solid var(--ink-100);
}
.dash-form input[type=text],.dash-form input[type=email],.dash-form input[type=url],
.dash-form input[type=number],.dash-form input[type=date],.dash-form textarea,
.dash-form select,.input{
  width:100%;padding:.75em 1em;border:1px solid var(--ink-200);border-radius:var(--radius-s);
  font:inherit;background:#fff;color:var(--ink-900);
}
.dash-form textarea{resize:vertical;min-height:90px}
.dash-form input:focus,.dash-form textarea:focus,.dash-form select:focus,.input:focus{
  outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-ring);
}
.dash-form input[type=checkbox]{width:auto;margin-right:.5rem}

/* ---------- Row controls ---------- */
.row-actions{display:flex;gap:.35rem;justify-content:flex-end}
.row-action{
  width:34px;height:34px;border-radius:var(--radius-s);border:1px solid var(--ink-200);
  background:#fff;color:var(--ink-500);display:grid;place-items:center;cursor:pointer;
  transition:.16s ease;
}
.row-action:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50)}
.row-action.is-on{background:var(--accent-50);border-color:var(--accent);color:var(--accent-700)}
.row-action--danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-50)}
.row-action .ico{width:15px;height:15px}
.row-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-700);
}
.row-thumb{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0}
td.drag{cursor:grab;color:var(--ink-200);width:32px}
td.drag:active{cursor:grabbing}
tr.is-dragging{opacity:.5;background:var(--brand-50)}

/* ---------- Media picker ---------- */
.picker{display:flex;gap:1rem;align-items:center}
.picker__preview{
  width:96px;height:72px;border-radius:var(--radius-s);overflow:hidden;flex-shrink:0;
  border:1px solid var(--ink-200);background:var(--ink-50);display:grid;place-items:center;
}
.picker__preview img{width:100%;height:100%;object-fit:cover}
.picker__empty{color:var(--ink-200)}
.picker__empty .ico{width:26px;height:26px}
.picker__controls{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}

.picker-panel__bar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.picker-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.7rem;
  max-height:52vh;overflow-y:auto;
}
.picker-item{
  aspect-ratio:4/3;border:2px solid transparent;border-radius:var(--radius-s);
  overflow:hidden;padding:0;background:var(--ink-50);cursor:pointer;
}
.picker-item:hover,.picker-item:focus-visible{border-color:var(--brand-700)}
.picker-item img{width:100%;height:100%;object-fit:cover}

/* ---------- Slot grid (REQ-26a) ---------- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.slot{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-s);overflow:hidden;
  border:2px dashed var(--ink-200);background:var(--ink-50);
}
.slot--filled{border-style:solid;border-color:var(--ink-100)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot__add{
  width:100%;height:100%;border:0;background:none;cursor:pointer;color:var(--ink-400);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  font:inherit;font-size:.8rem;
}
.slot__add:hover{color:var(--brand-700);background:var(--brand-50)}
.slot__add .ico{width:22px;height:22px}
.slot__actions{position:absolute;top:.35rem;right:.35rem;display:flex;gap:.3rem}
.slot__action{
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink-scrim);color:#fff;display:grid;place-items:center;font-size:.9rem;
}
.slot__action .ico{width:12px;height:12px}
.slot__action:hover{background:var(--brand-700)}
.slot__action--danger:hover{background:var(--danger)}

/* ---------- Media library grid ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.media-tile{
  position:relative;margin:0;border:1px solid var(--ink-100);border-radius:var(--radius);
  overflow:hidden;background:#fff;
}
.media-tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-tile figcaption{padding:.6rem .75rem;display:flex;flex-direction:column;gap:.35rem}
.media-tile__name{font-size:.82rem;color:var(--ink-700);word-break:break-word}
.media-tile__actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem;opacity:0;transition:.16s ease}
.media-tile:hover .media-tile__actions,.media-tile:focus-within .media-tile__actions{opacity:1}

/* ---------- Cropper (REQ-10) ---------- */
.cropper{position:relative;max-height:52vh;overflow:hidden;border-radius:var(--radius-s);background:var(--ink-900);user-select:none}
.cropper img{width:100%;display:block;opacity:.55}
.cropper__box{
  position:absolute;border:2px solid var(--accent);
  box-shadow:0 0 0 9999px var(--ink-scrim-strong);cursor:move;
}

/* ---------- Dashboard overview ---------- */
.notice-row{
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;
  background:#fff;border:1px solid var(--ink-100);border-left:3px solid var(--accent);
  border-radius:var(--radius-s);color:var(--ink-700);font-size:.93rem;
}
.notice-row:hover{background:var(--accent-50);color:var(--ink-900)}
.notice-row .ico{flex-shrink:0;color:var(--accent-700)}
.notice-row .ico:last-child{margin-left:auto;color:var(--ink-400)}
.notice-row span{flex:1}

.tile-stat--alert{border-color:var(--accent);background:var(--accent-50)}
.tile-stat--alert .tile-stat__icon{background:var(--accent);color:var(--brand-900)}

.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}
.quick-action{
  display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;cursor:pointer;
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-s);
  font:inherit;font-family:var(--font-head);font-weight:600;font-size:.9rem;
  color:var(--ink-700);text-align:left;transition:.16s ease;
}
.quick-action:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50);transform:translateY(-2px)}
.quick-action .ico{width:18px;height:18px;flex-shrink:0;color:var(--brand-700)}

/* ---------- Section header on list screens ---------- */
.screen-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.5rem;
}
.screen-head__text{display:flex;align-items:center;gap:.9rem;color:var(--ink-500);font-size:.94rem}
.screen-head__text .ico{width:20px;height:20px;color:var(--brand-700);flex-shrink:0}
.screen-head__actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------- Icon picker (REQ-26e) ---------- */
.icon-picker{display:flex;flex-direction:column;gap:1rem}
.icon-picker__group{display:flex;flex-direction:column;gap:.5rem}
.icon-picker__label{
  font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400);margin:0;
}
.icon-picker__grid{display:flex;flex-wrap:wrap;gap:.45rem}
.icon-choice{
  width:44px;height:44px;border-radius:var(--radius-s);cursor:pointer;
  border:1px solid var(--ink-200);background:#fff;color:var(--ink-500);
  display:grid;place-items:center;transition:.14s ease;
}
.icon-choice:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50)}
.icon-choice.is-chosen{
  border-color:var(--brand-700);background:var(--brand-700);color:#fff;
  box-shadow:0 0 0 3px var(--brand-ring);
}
.icon-choice .ico{width:20px;height:20px}

/* CKEditor sits inside a modal that scrolls; its own sticky toolbar must not
   float above the modal chrome. */
.dash-form .ck-editor__editable{min-height:260px}
.dash-form .ck.ck-editor{width:100%}
.dash-form .ck.ck-toolbar{border-radius:var(--radius-s) var(--radius-s) 0 0}
.dash-form .ck.ck-editor__main>.ck-editor__editable{border-radius:0 0 var(--radius-s) var(--radius-s)}
.ck.ck-balloon-panel{z-index:1400 !important}
.ck-body-wrapper{z-index:1400}

/* ==========================================================================
   CONTACT DIALOG (REQ-14, REQ-15)
   Centred on the viewport and above the sticky header, which sits at 900.
   ========================================================================== */
.cdialog{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;padding:24px;
  background:var(--scrim-strong);backdrop-filter:blur(3px);
  overflow-y:auto;
}
.cdialog__panel{
  position:relative;width:100%;max-width:940px;background:#fff;
  border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  /* Never taller than the viewport, so the submit button is always reachable
     however long the form gets on a short screen. */
  max-height:calc(100vh - 48px);overflow-y:auto;
  animation:cdialog-in .22s ease;
}
@keyframes cdialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cdialog__panel{animation:none}}

.cdialog__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--ink-200);background:#fff;color:var(--ink-500);
  display:grid;place-items:center;
}
.cdialog__close:hover{border-color:var(--brand-700);color:var(--brand-700);background:var(--brand-50)}

.cdialog__grid{display:grid;grid-template-columns:1.55fr 1fr}
@media (max-width:820px){.cdialog__grid{grid-template-columns:1fr}}

.cdialog__form{padding:clamp(1.5rem,4vw,2.4rem)}
.cdialog__form h2{font-size:1.5rem;margin:0 0 .5rem}
.cdialog__lede{color:var(--ink-500);font-size:.95rem;margin:0 0 1.5rem}

.cdialog__channels{
  padding:clamp(1.5rem,4vw,2.4rem);
  background:linear-gradient(150deg,var(--brand-800),var(--brand-900));
  color:rgba(255,255,255,.82);
  border-radius:0 var(--radius-l) var(--radius-l) 0;
}
@media (max-width:820px){.cdialog__channels{border-radius:0 0 var(--radius-l) var(--radius-l)}}
.cdialog__channels-head{
  font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-300);margin:0 0 1rem;
}

.channel{
  display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;margin-bottom:.6rem;
  border-radius:var(--radius-s);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:#fff;transition:.16s ease;
}
.channel:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateX(3px)}
.channel--plain:hover{background:rgba(255,255,255,.07);transform:none}
.channel .ico{width:20px;height:20px;flex-shrink:0;color:var(--accent-300)}
.channel--whatsapp .ico{color:var(--whatsapp)}
.channel strong{display:block;font-family:var(--font-head);font-size:.92rem;font-weight:600}
.channel small{display:block;font-size:.82rem;color:rgba(255,255,255,.68);word-break:break-word}

.cdialog__channels .social a{background:rgba(255,255,255,.1);color:#fff}
.cdialog__channels .social a:hover{background:var(--accent);color:var(--brand-900)}

/* The dialog form is one column: the panel is already narrow beside the
   channels, and two fields per row would be cramped. */
.cdialog .enquiry__row{grid-template-columns:1fr}
.enquiry-done{text-align:center;padding:2rem 0}
.enquiry-done strong{display:block;font-family:var(--font-head);font-size:1.15rem;color:var(--ink-900);margin-bottom:.5rem}
.enquiry-done p{color:var(--ink-500);margin:0}
.news-card__by{
  display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-400);
  margin:0 0 .5rem;
}
.news-card__by .ico{width:13px;height:13px}

/* ---------- Daraja callback addresses ---------- */
.callback-url{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;margin-bottom:.5rem;
  background:var(--ink-50);border:1px solid var(--ink-100);border-radius:var(--radius-s);
}
.callback-url__label{
  font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400);flex-shrink:0;width:64px;
}
.callback-url code{
  flex:1;font-size:.85rem;color:var(--ink-900);word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ==========================================================================
   Dashboard analytics
   ==========================================================================
   Charts are server-rendered SVG (apps/analytics/charts.py explains why), so
   everything visual about them is here rather than in a plotting library's
   defaults. Marks are thin, the grid is recessive, and the hover layer is
   pure CSS — it survives the live-region markup swap and works with
   JavaScript off. */

.rangepick{display:inline-flex;border:1px solid var(--ink-200);border-radius:999px;overflow:hidden}
.rangepick__opt{
  padding:.34rem .8rem;font-size:.78rem;font-weight:600;color:var(--ink-500);
  border-right:1px solid var(--ink-200);
}
.rangepick__opt:last-child{border-right:0}
.rangepick__opt:hover{background:var(--ink-50);color:var(--brand-700)}
.rangepick__opt.is-on{background:var(--brand-700);color:#fff}

/* --- KPI row --- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--ink-100);border:1px solid var(--ink-100);border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.4rem}
.kpi{background:#fff;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.kpi__head{display:flex;align-items:center;gap:.42rem;color:var(--ink-500)}
.kpi__head .ico{width:15px;height:15px}
.kpi__label{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kpi__hint{display:inline-flex;color:var(--ink-400);cursor:help}
.kpi__hint .ico{width:13px;height:13px}
.kpi__value{
  font-family:var(--font-head);font-size:1.9rem;font-weight:800;line-height:1;
  color:var(--ink-900);font-variant-numeric:tabular-nums;
}
.kpi__foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.75rem}
.kpi__vs{color:var(--ink-400)}
.trend{display:inline-flex;align-items:center;gap:.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.trend .ico{width:13px;height:13px}
.trend--up{color:var(--chart-good)}
.trend--down{color:var(--danger)}
.trend--flat{color:var(--ink-400)}
.spark{margin-left:auto;overflow:visible}
.spark__line{fill:none;stroke:var(--chart-series);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* --- Time series --- */
.chart{margin:0}
.chart__cap{font-size:.78rem;color:var(--ink-500);margin-bottom:.5rem}
.chart__svg{width:100%;height:auto;display:block;overflow:visible}
.chart__grid{stroke:var(--chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.chart__tick{font-size:10px;fill:var(--ink-400);font-variant-numeric:tabular-nums}
.chart__area{fill:var(--chart-series);fill-opacity:.13;stroke:none}
.chart__line{
  fill:none;stroke:var(--chart-series);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
/* The hover layer: one transparent column per day, each carrying its own
   crosshair and readout. Hidden until that column is pointed at. */
.chart__cross,.chart__dot,.chart__readout{opacity:0;transition:opacity .12s ease}
.chart__cross{stroke:var(--chart-muted);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.chart__dot{fill:var(--chart-series);stroke:#fff;stroke-width:2}
.chart__readout{font-size:11px;font-weight:700;fill:var(--ink-900);paint-order:stroke;
  stroke:#fff;stroke-width:4;stroke-linejoin:round}
.chart__hit:hover .chart__cross,
.chart__hit:hover .chart__dot,
.chart__hit:hover .chart__readout{opacity:1}

/* --- Ranked bars --- */
.barlist{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0}
.barlist__row{display:grid;grid-template-columns:1fr 96px auto;align-items:center;gap:.8rem}
.barlist__label{font-size:.88rem;color:var(--ink-700);display:flex;align-items:center;gap:.5rem;min-width:0}
.barlist__label > :last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barlist__kind{
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-700);background:var(--brand-50);padding:.14rem .4rem;
  border-radius:4px;flex-shrink:0;
}
.barlist__track{background:var(--ink-100);border-radius:4px;height:10px;overflow:hidden}
.barlist__fill{display:block;height:100%;background:var(--chart-series);border-radius:0 4px 4px 0}
.barlist__value{
  font-size:.86rem;font-weight:700;color:var(--ink-900);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.45rem;
}
.barlist__likes{display:inline-flex;align-items:center;gap:.15rem;color:var(--chart-alt);font-weight:700}
.barlist__likes .ico{width:12px;height:12px}
.barlist--plain .barlist__row{grid-template-columns:1fr 110px auto}

.subhead{
  display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);
  margin:1.4rem 0 .6rem;
}
.subhead .ico{width:14px;height:14px}
.ranklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ranklist li{
  display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;
  border-bottom:1px solid var(--ink-100);font-size:.86rem;
}
.ranklist li:last-child{border-bottom:0}
.ranklist li > :last-child{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-900)}

/* --- Insights --- */
.insights{margin-top:1.4rem;border-top:1px solid var(--ink-100);padding-top:1rem}
.insights__head{
  display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:.7rem;
}
.insights__head .ico{width:14px;height:14px}
.insights__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.insight{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--ink-700);line-height:1.45}
.insight .ico{width:16px;height:16px;flex-shrink:0;margin-top:.12rem;color:var(--ink-400)}
.insight--good .ico{color:var(--chart-good)}
.insight--warn .ico{color:var(--chart-warn)}

/* --- Activity feed --- */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feed__row{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--ink-100)}
.feed__row:last-child{border-bottom:0}
.feed__verb{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  flex-shrink:0;background:var(--ink-50);color:var(--ink-500);
}
.feed__verb .ico{width:14px;height:14px}
.feed__verb--created{background:var(--support-50);color:var(--support-700)}
.feed__verb--deleted{background:var(--danger-50);color:var(--danger)}
.feed__body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.feed__text{font-size:.88rem;color:var(--ink-700)}
.feed__text em{font-style:normal;color:var(--ink-900);font-weight:600}
.feed__when{font-size:.75rem;color:var(--ink-400)}
.panel__note{font-size:.78rem;color:var(--ink-400);display:inline-flex;align-items:center;gap:.3rem}
.panel__note .ico{width:13px;height:13px}
.muted-note{font-size:.78rem;color:var(--ink-400);margin:.8rem 0 0}

@media (prefers-reduced-motion:reduce){
  .chart__cross,.chart__dot,.chart__readout{transition:none}
}

/* --- Reader like button (public article) --- */
.likebar{display:flex;align-items:center;gap:1rem;margin:2rem 0 0;
  padding-top:1.4rem;border-top:1px solid var(--ink-100)}
.likebtn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;
  border:1px solid var(--ink-200);border-radius:999px;background:#fff;
  font:inherit;font-size:.88rem;font-weight:700;color:var(--ink-700);
  cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.likebtn:hover{border-color:var(--chart-alt);color:var(--chart-alt)}
.likebtn .ico{width:17px;height:17px;transition:transform .16s ease}
.likebtn:hover .ico{transform:scale(1.12)}
.likebtn[data-liked]{background:var(--support-50);border-color:var(--support-700);color:var(--support-700)}
.likebtn[data-liked] .ico{fill:currentColor}
.likebtn__count{
  font-variant-numeric:tabular-nums;background:var(--ink-50);border-radius:999px;
  padding:.05rem .5rem;font-size:.82rem;
}
.likebtn[data-liked] .likebtn__count{background:#fff}
.likebar__note{font-size:.8rem;color:var(--ink-400)}
@media (prefers-reduced-motion:reduce){.likebtn,.likebtn .ico{transition:none}}