/* ============================================================
   AniMed Djursjukhus – combined stylesheet
   Ported from the Claude Design system (colors_and_type.css +
   ui_kits/web/styles.css + responsive.css) and extended with the
   static behaviours that replace the DC runtime (nav dropdowns,
   mobile menu, image-slot placeholders, animation library).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ---- Teal (brand identity) ---- */
  --animed-teal-50:  #F0F7F7;
  --animed-teal-100: #DDEBEC;
  --animed-teal-300: #B6DADA;
  --animed-teal-500: #84C0C1;
  --animed-teal-700: #429597;
  --animed-teal-800: #2E6868;
  --animed-teal-900: #1B3D3E;

  /* ---- Amber (action accent) ---- */
  --animed-amber-50:  #FEF5E0;
  --animed-amber-100: #FCEAC5;
  --animed-amber-300: #F9D38C;
  --animed-amber-500: #F3B549;
  --animed-amber-700: #C8902E;

  /* ---- Red (emergency only) ---- */
  --animed-red-100: #FBE4DD;
  --animed-red-500: #D9614A;
  --animed-red-700: #B14530;

  /* ---- Cream neutrals ---- */
  --animed-cream-50:  #FBF8F2;
  --animed-cream-100: #F6F2EA;
  --animed-cream-200: #ECE6D8;
  --animed-cream-300: #DDD4C0;

  /* ---- Ink ---- */
  --animed-ink-900: #0E2A2A;
  --animed-ink-700: #2A3B3A;
  --animed-ink-500: #5F6968;
  --animed-ink-300: #919C9B;
  --animed-ink-100: #C5CCCC;

  --animed-white: #FFFFFF;

  --animed-success: var(--animed-teal-700);
  --animed-warning: var(--animed-amber-500);
  --animed-danger:  var(--animed-red-700);
  --animed-info:    var(--animed-teal-700);

  /* ---- Semantic surface & text ---- */
  --bg-page:        var(--animed-cream-50);
  --bg-surface:     var(--animed-white);
  --bg-sunken:      var(--animed-cream-100);
  --bg-tint:        var(--animed-teal-100);
  --bg-inverse:     var(--animed-teal-900);
  --bg-brand:       var(--animed-teal-500);
  --bg-accent:      var(--animed-amber-500);

  --fg-default:     var(--animed-ink-900);
  --fg-muted:       var(--animed-ink-500);
  --fg-subtle:      var(--animed-ink-300);
  --fg-inverse:     var(--animed-cream-50);
  --fg-brand:       var(--animed-teal-800);
  --fg-accent:      var(--animed-amber-700);
  --fg-link:        var(--animed-teal-800);
  --fg-link-hover:  var(--animed-teal-900);

  --border-subtle:  var(--animed-cream-200);
  --border-default: var(--animed-cream-300);
  --border-strong:  var(--animed-ink-300);
  --border-focus:   var(--animed-teal-800);

  /* ---- Type ---- */
  --font-display: 'Sora', 'Mona Sans', 'Inter Tight', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;    --fs-18: 1.125rem;
  --fs-20: 1.25rem;  --fs-24: 1.5rem;   --fs-30: 1.875rem;--fs-38: 2.375rem;
  --fs-48: 3rem;     --fs-64: 4rem;     --fs-80: 5rem;

  --lh-tight: 1.05; --lh-snug: 1.18; --lh-base: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mega: 0.12em;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800;

  /* ---- Spacing / radius / shadow / motion ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem; --space-32: 8rem;

  --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem;
  --radius-xl: 1.75rem; --radius-2xl: 2.5rem; --radius-pill: 999px;

  --shadow-xs: 0 1px 0 rgba(14, 56, 55, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 56, 55, 0.05), 0 1px 2px rgba(14, 56, 55, 0.04);
  --shadow-md: 0 8px 20px rgba(14, 56, 55, 0.07), 0 2px 6px rgba(14, 56, 55, 0.04);
  --shadow-lg: 0 18px 40px rgba(14, 56, 55, 0.10), 0 4px 10px rgba(14, 56, 55, 0.05);
  --shadow-focus: 0 0 0 3px rgba(118, 213, 211, 0.45);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}

/* ============================================================ TYPE */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body, .am-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-page);
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.am-display { font-family: var(--font-display); font-size: var(--fs-80); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-heavy); color: var(--fg-default); }
h1, .am-h1 { font-family: var(--font-display); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); color: var(--fg-default); text-wrap: balance; }
h2, .am-h2 { font-family: var(--font-display); font-size: var(--fs-38); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); text-wrap: balance; }
h3, .am-h3 { font-family: var(--font-display); font-size: var(--fs-30); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semi); }
h4, .am-h4 { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-snug); font-weight: var(--fw-semi); }
.am-lead { font-family: var(--font-body); font-size: var(--fs-20); line-height: var(--lh-loose); color: var(--fg-muted); font-weight: var(--fw-regular); text-wrap: pretty; }
p, .am-p { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-default); text-wrap: pretty; }
small, .am-small { font-size: var(--fs-14); line-height: var(--lh-base); color: var(--fg-muted); }
.am-eyebrow { font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: var(--tracking-mega); text-transform: uppercase; font-weight: var(--fw-semi); color: var(--fg-brand); }
code, .am-code, pre { font-family: var(--font-mono); font-size: 0.92em; }
a, .am-link { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease-out); }
a:hover, .am-link:hover { color: var(--fg-link-hover); }

/* Visible keyboard focus (accessibility) */
:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; }

/* ============================================================ LAYOUT */
.uk-app { min-height: 100vh; display: flex; flex-direction: column; }
main { display: block; }
.uk-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); container-type: inline-size; }
.uk-section { padding: var(--space-20) 0; }
@media (max-width: 720px) { .uk-section { padding: var(--space-12) 0; } }

/* ============================================================ TOP STRIP + HEADER */
.uk-topstrip { background: var(--animed-teal-800); color: var(--animed-cream-50); font-size: 0.7812rem; letter-spacing: 0.01em; }
.uk-topstrip-inner { display: flex; gap: var(--space-6); padding: 10px var(--space-6); max-width: 1200px; margin: 0 auto; align-items: center; }
.uk-topstrip a { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.uk-topstrip a:hover { color: #fff; }
/* The language switcher marks the current language with aria-current, and the
   weight is driven off that attribute rather than a separate class — so the
   thing screen readers announce and the thing you see can never disagree. */
.uk-lang a[aria-current="true"] { font-weight: 700; }
@media (max-width: 900px) { .uk-topstrip { display: none; } }

.uk-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 248, 242, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); transition: transform 320ms var(--ease-out); will-change: transform; }
.uk-header-inner { max-width: 1200px; margin: 0 auto; padding: 14px var(--space-6); display: flex; align-items: center; gap: var(--space-8); }
.uk-logo { color: var(--animed-teal-900); height: 32px; display: block; text-decoration: none; }
.uk-logo img, .uk-logo svg { height: 32px; width: auto; display: block; }

.uk-nav { display: flex; gap: var(--space-6); flex: 1; justify-content: center; align-items: center; }
.uk-nav-item { font-family: var(--font-body); font-size: 0.9062rem; font-weight: 500; color: var(--fg-default); background: transparent; border: 0; padding: 8px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color var(--dur-fast) var(--ease-out); text-decoration: none; }
.uk-nav-item:hover { color: var(--fg-brand); }
.uk-nav-item.is-active { color: var(--fg-brand); font-weight: 600; }

/* nav dropdowns */
.uk-hasmenu { position: relative; }
.uk-dropdown { position: absolute; top: 100%; left: -16px; padding-top: 12px; z-index: 60; display: none; }
.uk-hasmenu:hover > .uk-dropdown, .uk-hasmenu:focus-within > .uk-dropdown { display: block; }
.uk-hasmenu--right .uk-dropdown { left: auto; right: -60px; }
.uk-dd-inner { background: #fff; border: 1px solid var(--animed-cream-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; display: grid; grid-template-columns: 240px 260px; gap: 14px; animation: ddIn 200ms var(--ease-out) both; }
.uk-dd-list { display: flex; flex-direction: column; gap: 2px; }
.uk-dd-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--animed-ink-900); transition: background var(--dur-fast) var(--ease-out); }
.uk-dd-link:hover, .uk-dd-link.is-hover { background: var(--animed-cream-100); }
.uk-dd-link .n { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.uk-dd-link .d { display: block; font-size: 0.7812rem; color: var(--fg-muted); margin-top: 2px; font-family: var(--font-body); font-weight: 400; }
.uk-dd-link svg { color: var(--animed-teal-700); flex-shrink: 0; }
.uk-dd-media { display: flex; flex-direction: column; gap: 10px; }
.uk-dd-frame { position: relative; width: 100%; height: 200px; border-radius: var(--radius-md); overflow: hidden; background: var(--animed-cream-100); }
.uk-dd-cap-name { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--animed-teal-800); }
.uk-dd-cap-desc { font-size: 0.7812rem; line-height: 1.45; color: var(--fg-muted); margin-top: 2px; }

/* Header actions: Remittering (secondary) + Boka tid (primary). The desktop
   pair sits outside the nav; the mobile panel carries its own copy in
   .uk-nav-actions, because the desktop pair is hidden under the burger. */
.uk-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.uk-nav-actions { display: none; }
.uk-nav-item { white-space: nowrap; }
/* Narrow desktop (above the burger breakpoint): two buttons plus five nav
   items do not fit at the default spacing, so tighten gaps and button padding
   instead of letting nav labels wrap onto two lines. */
@media (min-width: 901px) and (max-width: 1100px) {
  .uk-header-inner { gap: var(--space-4); }
  .uk-nav { gap: var(--space-4); }
  .uk-header-actions .uk-btn { padding: 11px 14px; font-size: 0.875rem; }
}

/* hamburger */
.uk-navtoggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border-subtle); background: #fff; border-radius: var(--radius-md); cursor: pointer; align-items: center; justify-content: center; color: var(--animed-teal-900); }
.uk-navtoggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .uk-navtoggle { display: inline-flex; }
  .uk-header-inner { gap: var(--space-4); }
  .uk-header-actions { display: none; }
  .uk-nav { display: none; }
  .uk-header.nav-open .uk-nav-actions { display: flex; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }
  .uk-header.nav-open .uk-nav-actions .uk-btn { flex: 1 1 0; padding-left: 12px; padding-right: 12px; }
  /* Touch devices have no hover, so the "current link" highlight the desktop
     mega-menu paints (hover + the is-hover class header.js sets on the first
     link) just reads as a stray background in the accordion. Drop it here. */
  .uk-dd-link:hover, .uk-dd-link.is-hover { background: transparent; }
  .uk-header.nav-open .uk-nav { display: flex; position: fixed; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); flex-direction: column; justify-content: flex-start; align-items: stretch; background: var(--bg-page); padding: var(--space-6); gap: var(--space-2); overflow-y: auto; z-index: 90; }
  .uk-header.nav-open .uk-nav-item { font-size: 1.125rem; padding: 14px 8px; justify-content: space-between; }
  /* the panel is display:none until .nav-open, so it opens with an animation rather than a transition */
  .uk-header.nav-open .uk-nav { animation: navPanelIn 260ms var(--ease-out) both; }
  .uk-header.nav-open .uk-nav > .uk-nav-item,
  .uk-header.nav-open .uk-nav > .uk-hasmenu,
  .uk-header.nav-open .uk-nav > .uk-nav-actions { animation: navItemIn 180ms var(--ease-out) both; }
  .uk-header.nav-open .uk-nav > :nth-child(2) { animation-delay: 30ms; }
  .uk-header.nav-open .uk-nav > :nth-child(3) { animation-delay: 60ms; }
  .uk-header.nav-open .uk-nav > :nth-child(4) { animation-delay: 90ms; }
  .uk-header.nav-open .uk-nav > :nth-child(5) { animation-delay: 120ms; }
  .uk-header.nav-open .uk-nav > :nth-child(n+6) { animation-delay: 150ms; }
  .uk-hasmenu { position: static; }
  .uk-dropdown { position: static; display: none; padding-top: 0; }
  .uk-hasmenu:hover > .uk-dropdown, .uk-hasmenu:focus-within > .uk-dropdown { display: none; }
  .uk-hasmenu.is-open > .uk-dropdown { display: block; animation: navAccordionIn 220ms var(--ease-out) both; }
  .uk-hasmenu > button.uk-nav-item svg { transition: transform 220ms var(--ease-out); }
  .uk-hasmenu.is-open > button.uk-nav-item svg { transform: rotate(180deg); }
  .uk-dd-inner { grid-template-columns: 1fr; box-shadow: none; border: none; padding: 0 0 var(--space-4) var(--space-4); animation: none; }
  .uk-dd-media { display: none; }
  .uk-dd-link { padding: 12px 8px; }
}

/* ============================================================ BUTTONS */
.uk-btn { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1; padding: 13px 22px; border-radius: var(--radius-pill); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--dur-base) var(--ease-out); text-decoration: none; position: relative; overflow: hidden; z-index: 0; }
.uk-btn:active { transform: scale(0.98); }
.uk-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translateX(-100%); transition: transform 460ms var(--ease-out); z-index: -1; }
.uk-btn:hover::before { transform: translateX(0); }
.uk-btn--primary { background: var(--animed-amber-500); color: var(--animed-teal-900); }
.uk-btn--primary::before { background: var(--animed-ink-900); }
.uk-btn--primary:hover { background: var(--animed-amber-500); color: #fff; }
.uk-btn--secondary { background: transparent; color: var(--animed-teal-800); border: 1.5px solid var(--animed-teal-800); }
.uk-btn--secondary::before { background: var(--animed-teal-800); }
.uk-btn--secondary:hover { background: transparent; color: #fff; }
.uk-btn--dark { background: var(--animed-teal-800); color: #fff; }
.uk-btn--dark::before { background: var(--animed-teal-900); }
.uk-btn--ghost { background: transparent; color: var(--animed-teal-800); padding: 12px 14px; }
.uk-btn--ghost::before { background: var(--animed-teal-100); }
.uk-btn--lg { padding: 16px 28px; font-size: 1rem; }
.uk-btn--sm { padding: 10px 16px; font-size: 0.8125rem; }

/* ============================================================ EYEBROW / HEADINGS */
.uk-eyebrow { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--fg-brand); margin: 0 0 var(--space-4) 0; }
.uk-h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; color: var(--fg-default); text-wrap: balance; margin: 0 0 var(--space-6) 0; }
.uk-h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 var(--space-5) 0; text-wrap: balance; }
.uk-h3 { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 var(--space-3) 0; }
.uk-lead { font-size: 1.18rem; line-height: 1.5; color: var(--fg-muted); margin: 0 0 var(--space-6) 0; text-wrap: pretty; max-width: 56ch; }
.uk-p { font-size: 1rem; line-height: 1.65; margin: 0 0 var(--space-4) 0; max-width: 64ch; text-wrap: pretty; }

/* ============================================================ HERO */
.uk-hero { position: relative; padding: var(--space-12) 0 var(--space-24); overflow: hidden; }
.uk-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 500px at 95% 10%, var(--animed-teal-50), transparent 60%); pointer-events: none; }
.uk-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; position: relative; }
@container (max-width: 880px) { .uk-hero-grid { grid-template-columns: 1fr; } }
.uk-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 720px) { .uk-hero { padding: var(--space-3) 0 var(--space-12); } }

/* ============================================================ GRID / CARDS */
.uk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.uk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@container (max-width: 880px) { .uk-grid-3, .uk-grid-4 { grid-template-columns: 1fr 1fr; } }
@container (max-width: 540px) { .uk-grid-3, .uk-grid-4 { grid-template-columns: 1fr; } }

.uk-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: var(--space-3); min-height: 220px; text-decoration: none; }
.uk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.uk-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--animed-teal-500); color: var(--animed-teal-900); display: inline-flex; align-items: center; justify-content: center; }
.uk-card-icon--coral { background: var(--animed-amber-100); color: var(--animed-amber-700); }
.uk-card-icon--cream { background: var(--animed-cream-200); color: var(--animed-ink-700); }
.uk-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.uk-card-body { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.55; flex: 1; }
.uk-card-link { color: var(--animed-teal-800); font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.uk-bg-cream { background: var(--animed-cream-100); }

/* ============================================================ ABOUT ROW */
.uk-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: center; }
@container (max-width: 880px) { .uk-about { grid-template-columns: 1fr; } }

/* ============================================================ QUICK CONTACT */
.uk-quick { background: var(--animed-teal-800); color: #fff; border-radius: var(--radius-2xl); padding: var(--space-10); display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
@container (max-width: 720px) { .uk-quick { grid-template-columns: 1fr; text-align: left; } }
.uk-quick h2 { color: #fff; margin: 0 0 8px 0; }
.uk-quick p { color: rgba(255,255,255,0.78); margin: 0; max-width: 50ch; }
.uk-quick .uk-btn--primary { background: var(--animed-amber-500); }
.uk-quick .uk-btn--ghost { color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.uk-quick .uk-btn--ghost::before { background: rgba(255,255,255,0.16); }

/* ============================================================ FOOTER */
.uk-footer { background: var(--animed-teal-800); color: var(--animed-cream-50); padding: var(--space-16) 0 var(--space-8); margin-top: auto; }
.uk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); }
@container (max-width: 720px) { .uk-footer-grid { grid-template-columns: 1fr 1fr; } }
.uk-footer h4 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; margin: 0 0 var(--space-3) 0; color: #fff; }
.uk-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; color: rgba(255,255,255,0.75); }
.uk-footer ul a { color: inherit; text-decoration: none; }
.uk-footer ul a:hover { color: #fff; }
.uk-footer-logo { color: var(--animed-cream-50); width: 180px; margin-bottom: var(--space-4); }
.uk-footer-logo img, .uk-footer-logo svg { width: 100%; height: auto; display: block; }
.uk-footer-bottom { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.10); font-size: 0.75rem; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.uk-footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.uk-footer-bottom a:hover { color: #fff; }
.uk-footer-bottom button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: rgba(255,255,255,0.7); transition: color var(--dur-fast) var(--ease-out); }
.uk-footer-bottom button:hover { color: #fff; }

/* ============================================================ SOCIAL ICONS (top strip, contact block, footer)
   Layout and size are untouched: the halo is drawn with box-shadow spread,
   which takes no space in the flow. */
.uk-topstrip-social a,
.uk-footer-grid a[aria-label] { border-radius: 50%; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.uk-topstrip-social a:hover, .uk-topstrip-social a:focus-visible,
.uk-footer-grid a[aria-label]:hover, .uk-footer-grid a[aria-label]:focus-visible {
  background: var(--animed-teal-500);
  color: var(--animed-teal-900) !important;
  box-shadow: 0 0 0 0.5rem var(--animed-teal-500);
}
/* the contact block already draws its own circle, so only the fill and the icon shift */
[data-wl-component="contact"] a[aria-label] { transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
[data-wl-component="contact"] a[aria-label]:hover,
[data-wl-component="contact"] a[aria-label]:focus-visible { background: var(--animed-teal-500) !important; color: var(--animed-teal-900) !important; }

/* ============================================================ SERVICE DETAIL */
.uk-breadcrumb { font-size: 0.8125rem; color: var(--fg-muted); margin: var(--space-8) 0 var(--space-4); }
.uk-breadcrumb a { color: inherit; }
.uk-detail { display: grid; grid-template-columns: 0.95fr 1fr; gap: var(--space-10); margin-top: var(--space-4); }
@media (max-width: 880px) { .uk-detail { grid-template-columns: 1fr; } }
.uk-info-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0; padding: 0; list-style: none; }
.uk-info-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }
.uk-info-list li svg { color: var(--animed-teal-800); flex-shrink: 0; margin-top: 2px; }

/* ============================================================ HOURS */
.uk-hours { background: #fff; border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.uk-hours h4 { margin: 0 0 var(--space-3) 0; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--animed-teal-800); }
.uk-hours-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.875rem; }
.uk-hours-row .d { color: var(--fg-muted); }
.uk-hours-row .t { color: var(--fg-default); font-variant-numeric: tabular-nums; }

/* ============================================================ TEAM
   grid-auto-rows: 1fr makes EVERY row as tall as the tallest card, so all
   cards are the same size whatever the column count. The card is a <button>;
   its layout lives on the inner .uk-team-card-inner because WebKit does not
   reliably stretch or centre flex/grid children of a button (names were
   rendering left-aligned on iOS). Badge and avatar share one grid cell so the
   badge can overlap the avatar's corner on small screens. */
.uk-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: var(--space-5); }
@container (max-width: 880px) { .uk-team-grid { grid-template-columns: 1fr 1fr; } }
.uk-team-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; }
.uk-team-card-inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "text" "badge"; justify-items: center; align-content: start; text-align: center; width: 100%; }
.uk-team-avatar { grid-area: avatar; width: 84px; height: 84px; border-radius: 50%; margin: 0 0 var(--space-3); background: var(--animed-teal-500); display: flex; align-items: center; justify-content: center; color: var(--animed-teal-700); font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; }
.uk-team-text { grid-area: text; width: 100%; min-width: 0; }
.uk-team-card .name { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.uk-team-card .role { font-size: 0.75rem; color: var(--fg-muted); margin-top: 2px; }
@container (max-width: 520px) {
  /* single column: portrait left, text top-aligned beside it, badge tucked
     over the portrait's bottom-right corner */
  .uk-team-card { text-align: left; }
  .uk-team-card-inner { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "avatar text"; column-gap: var(--space-4); justify-items: stretch; align-items: start; text-align: left; }
  .uk-team-avatar { margin: 0; }
  .uk-team-text { align-self: start; }
  .uk-team-card .name { font-size: 1.0625rem; }
  .uk-team-card .role { font-size: 0.8125rem; margin-top: 3px; }
  /* two classes on purpose: the base .am-team-badge rule further down would
     otherwise win on source order and put the badge back under the text */
  .uk-team-card-inner .am-team-badge { grid-area: avatar; align-self: end; justify-self: end; width: 2rem; margin: 0 -0.375rem -0.375rem 0; padding: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(14, 56, 55, 0.18); position: relative; z-index: 1; }
}

/* small utilities */
.uk-mt-0 { margin-top: 0; } .uk-mb-0 { margin-bottom: 0; }
.uk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* arrow link */
.uk-arrowlink { color: var(--fg-brand); text-decoration: none; }
.uk-arrowlink .uk-arrow-wrap { display: inline-block; overflow: hidden; width: 0.9em; }
.uk-arrowlink .uk-arrow { display: inline-block; }
.uk-arrowlink:hover .uk-arrow { animation: arrowThrough 480ms var(--ease-out); }

/* ============================================================ IMAGE-SLOT PLACEHOLDER (replaces DC image-slot) */
.am-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-6); background: linear-gradient(135deg, var(--animed-teal-100) 0%, var(--animed-cream-200) 100%); color: var(--animed-teal-800); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; }
.am-slot::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(31,111,109,0.10) 1px, transparent 0); background-size: 16px 16px; pointer-events: none; }
.am-slot span { position: relative; z-index: 1; max-width: 24ch; }
.am-slot--amber { background: linear-gradient(135deg, var(--animed-amber-100), var(--animed-amber-300)); color: var(--animed-amber-700); }
.am-slot--cream { background: linear-gradient(135deg, var(--animed-cream-200), var(--animed-cream-300)); color: var(--animed-ink-700); }

/* home services carousel */
.am-svc-row { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 15px 14px; text-decoration: none; border-radius: var(--radius-md); transition: background 140ms ease; color: inherit; }
.am-svc-row + .am-svc-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border-subtle); }
.am-svc-row.is-active::before, .am-svc-row.is-active + .am-svc-row::before { display: none; }
.am-svc-row .num { font-size: 0.8125rem; font-weight: 600; color: var(--animed-teal-800); font-variant-numeric: tabular-nums; }
.am-svc-row .nm { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; transition: color 140ms ease; color: var(--animed-ink-900); }
.am-svc-row.is-active { background: var(--animed-cream-100); }
.am-svc-row.is-active .nm { color: var(--animed-teal-800); }
.am-svc-row svg { transition: opacity 140ms ease; opacity: 0.35; color: var(--animed-teal-800); flex-shrink: 0; }
.am-svc-dots { display: flex; gap: 5px; flex-shrink: 0; margin-top: 8px; }
.am-svc-dot { display: inline-block; height: 4px; width: 10px; border-radius: 999px; background: var(--animed-cream-300); transition: all 220ms ease; }
.am-svc-dot.is-active { width: 22px; background: var(--animed-teal-700); }

/* generic responsive grid helpers (container-query driven below) */
.cq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.cq-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }

/* service pills ("Fler tjänster") – aqua sweep on hover */
.uk-svc-pill { position: relative; overflow: hidden; z-index: 0; }
.uk-svc-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--animed-teal-500); transform: translateX(-100%); transition: transform 460ms var(--ease-out); z-index: -1; }
.uk-svc-pill:hover::before { transform: translateX(0); }

/* credential badge on a team card (ECVS and similar European titles) */
.am-team-badge { grid-area: badge; display: block; width: 2.5rem; height: auto; margin: var(--space-3) 0 0; }
.am-panel-badge { margin: var(--space-3) 0 0; }
.am-panel-badge img { display: block; width: 3.25rem; height: auto; }

/* container-query refinements (relative to .uk-container) */
@container (max-width: 820px) { .cq-2col { grid-template-columns: 1fr !important; gap: var(--space-10) !important; } }
@container (max-width: 860px) { .cq-3col { grid-template-columns: 1fr 1fr !important; } }
@container (max-width: 540px) { .cq-3col { grid-template-columns: 1fr !important; } }
@container (max-width: 900px) { .uk-team-grid { grid-template-columns: 1fr 1fr !important; } }
@container (max-width: 520px) { .uk-team-grid { grid-template-columns: 1fr !important; } }
@container (max-width: 760px) { .cq-founders { grid-template-columns: 1fr !important; } }
@container (max-width: 480px) { .cq-fcard { grid-template-columns: 1fr !important; } .cq-fcard .cq-fimg { aspect-ratio: 16 / 9; min-height: 0 !important; } }
@container (max-width: 900px) { .cq-bento { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; } .cq-bento .cq-btall { grid-row: auto !important; } .cq-bento .cq-bimg { aspect-ratio: 4 / 3; } }
@container (max-width: 560px) { .cq-bento { grid-template-columns: 1fr !important; } .cq-bento > * { grid-column: 1 / -1 !important; } }
@container (max-width: 820px) { .cq-feature { grid-template-columns: 1fr !important; gap: var(--space-6) !important; } .cq-feature > * { order: 0 !important; } }
@container (max-width: 600px) { .cq-tldetail { grid-template-columns: 1fr !important; } }
/* ---- Home services showcase (.am-svc) ----
   Desktop: list of rows on the left, one tall cross-fading image stage on the
   right with a shared caption + dots beneath. The stage's resting state is
   pure CSS (first slide visible) so the section is right before JS runs.
   Stacked (container <= 820px): the same slides become a horizontal
   scroll-snap slider, each slide carrying its own caption + link (built by
   animed.js from the rows), and the row list is hidden once JS confirms the
   slider is live (.is-ready) so links are never lost without JS. The mode is
   exposed as --svc-mode so the script reads the layout instead of guessing
   a breakpoint. */
.am-svc { --svc-mode: stage; display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr; column-gap: var(--space-16); row-gap: var(--space-5); align-items: start; }
.am-svc-media { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.am-svc-more { grid-column: 1; grid-row: 2; color: var(--fg-muted); font-size: 0.875rem; margin: 0; }
.am-svc-stage { position: relative; height: 560px; border-radius: var(--radius-2xl); overflow: hidden; background: var(--animed-cream-100); }
.am-svc-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-out); }
.am-svc-slide:first-child, .am-svc-slide.is-active { opacity: 1; pointer-events: auto; }
.am-svc.is-ready .am-svc-slide:not(.is-active) { opacity: 0; pointer-events: none; }
.am-svc-img { position: absolute; inset: 0; }
.am-svc-cap { display: none; }
.am-svc-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); padding: 0 6px; }
.am-svc-caption-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--animed-teal-800); }
.am-svc-caption-desc { font-size: 0.9062rem; line-height: 1.5; color: var(--fg-muted); margin-top: 3px; max-width: 52ch; }
/* The live description and an invisible copy of every description (added by
   animed.js) share one grid cell, so the caption always has the height of the
   longest one and the auto-advance never resizes the page. */
.am-svc-caption-text { display: grid; }
.am-svc-caption-desc { grid-area: 2 / 1; }
.am-svc-caption-sizer { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .am-svc-slide { transition: none; } }
@container (max-width: 820px) {
  .am-svc { --svc-mode: slider; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .am-svc-media, .am-svc-more { grid-column: auto; grid-row: auto; }
  .am-svc.is-ready [data-svc-listwrap] { display: none; }
  .am-svc-stage { display: flex; gap: var(--space-4); height: auto; overflow-x: auto; overflow-y: hidden; border-radius: 0; background: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .am-svc-stage::-webkit-scrollbar { display: none; }
  .am-svc-slide, .am-svc-slide:first-child, .am-svc-slide.is-active, .am-svc.is-ready .am-svc-slide:not(.is-active) { position: relative; inset: auto; opacity: 1; pointer-events: auto; transition: none; flex: 0 0 min(86%, 26rem); scroll-snap-align: start; }
  .am-svc-img { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--animed-cream-100); }
  .am-svc-cap { display: block; padding: var(--space-3) 4px 0; }
  .am-svc-cap-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; color: var(--animed-teal-800); text-decoration: none; }
  .am-svc-cap-link svg { flex-shrink: 0; color: var(--animed-teal-700); }
  .am-svc-cap-desc { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); }
  .am-svc.is-ready .am-svc-caption-text { display: none; }
  .am-svc-caption { justify-content: center; margin-top: var(--space-3); }
  .am-svc-dots { margin-top: 0; }
}

/* ============================================================ ANIMATION LIBRARY */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arrowThrough { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(160%); opacity: 0; } 46% { transform: translateX(-160%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes announceOut { 0% { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } 78% { opacity: 1; } 100% { clip-path: inset(0 50% 0 50% round 999px); opacity: 0; } }
@keyframes ddIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cookieIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes navPanelIn { from { opacity: 0; transform: translateY(-0.75rem); } to { opacity: 1; transform: none; } }
@keyframes navItemIn { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
@keyframes navAccordionIn { from { opacity: 0; transform: translateY(-0.375rem); } to { opacity: 1; transform: none; } }

/* scroll reveal */
.am-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.am-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .am-reveal { opacity: 1; transform: none; }
  /* mobile nav panel, its staggered rows and the dropdown accordions open instantly */
  .uk-header.nav-open .uk-nav,
  .uk-header.nav-open .uk-nav > .uk-nav-item,
  .uk-header.nav-open .uk-nav > .uk-hasmenu,
  .uk-header.nav-open .uk-nav > .uk-nav-actions,
  .uk-hasmenu.is-open > .uk-dropdown { animation: none !important; animation-delay: 0ms !important; opacity: 1; transform: none; }
}

/* ============================================================ ANNOUNCE BAR */
.am-announce { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 150; width: min(720px, calc(100vw - 40px)); box-sizing: border-box; background: var(--animed-teal-800); color: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; }
.am-announce[hidden] { display: none; }
.am-announce.is-closing { animation: announceOut 520ms var(--ease-out) forwards; }
.am-announce-tag { flex-shrink: 0; background: var(--animed-amber-500); color: var(--animed-ink-900); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--radius-pill); }
.am-announce-track { flex: 1; min-width: 0; overflow: hidden; text-decoration: none; color: inherit; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.am-announce-marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.am-announce:hover .am-announce-marquee { animation-play-state: paused; }
.am-announce-marquee > span { display: inline-flex; gap: 48px; padding-right: 48px; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.92); }
.am-announce-close { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out); }
.am-announce-close:hover { background: rgba(255,255,255,0.24); }

/* ============================================================ COOKIE
   The Weblooks consent runtime owns the LIFECYCLE: it clones the
   <template data-wl-consent-ui> into the page ONLY when a decision is
   needed, and removes the whole element once one is made. So the panel is
   simply visible whenever it exists — there is no open/closed state for CSS
   to model, and template content is inert until cloned, so it cannot flash.
   Reopening afterwards goes through window.weblooksConsent.show(), wired in
   components/footer/footer.js. */
.am-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; box-sizing: border-box; background: #fff; color: var(--animed-ink-900); border-top: 1px solid var(--border-subtle); box-shadow: 0 -10px 50px rgba(14,56,55,0.14); animation: cookieIn 360ms var(--ease-out) both; }
.am-cookie-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-10) var(--space-8); box-sizing: border-box; container-type: inline-size; }
.am-cookie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@container (max-width: 820px) { .am-cookie-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.am-cookie-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.am-cookie-intro { margin: 0 0 var(--space-4); font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); max-width: 52ch; }
.am-cookie-legal { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.am-toggle-list { margin-bottom: var(--space-6); }
.am-toggle-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding: 14px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.am-toggle-row--last { border-bottom: none; }
.am-toggle-name { display: block; font-weight: 600; font-size: 15px; }
.am-toggle-desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); margin-top: 2px; }
.am-cookie-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* The checkbox IS the control the consent runtime reads. .am-switch is only
   its skin, so the input lies over the graphic at full size: focus, keyboard
   and pointer behaviour stay the browser's, never a re-implementation. */
.am-switch-wrap { position: relative; flex-shrink: 0; width: 46px; height: 26px; margin-top: 2px; }
.am-switch-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.am-switch-input:disabled { cursor: default; }
.am-switch { position: absolute; inset: 0; border-radius: 999px; border: none; padding: 0; background: var(--animed-cream-300); transition: background var(--dur-base) var(--ease-out); }
.am-switch-input:checked + .am-switch { background: var(--animed-teal-800); }
.am-switch-input:disabled + .am-switch { opacity: 0.6; }
.am-switch-input:focus-visible + .am-switch { outline: 2px solid var(--animed-teal-800); outline-offset: 3px; }
.am-switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14,56,55,0.3); transition: transform var(--dur-base) var(--ease-out); }
.am-switch-input:checked + .am-switch .knob { transform: translateX(20px); }
/* The reopen tab lives in the FOOTER, not in the consent template: the
   runtime deletes the template's clone the moment a choice is made, which is
   exactly when a way back in is needed. footer.js shows it once a choice
   exists and hides it while the banner is up. */
.am-cookie-tab { position: fixed; left: 20px; bottom: 20px; z-index: 190; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--animed-teal-800); color: #fff; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.am-cookie-tab:hover { transform: translateY(-2px); background: var(--animed-teal-900); }
.am-cookie-tab[hidden] { display: none; }

/* ============================================================ FAQ (details/summary) */
.uk-faq details { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.uk-faq details + details { margin-top: var(--space-3); }
.uk-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--animed-ink-900); transition: background var(--dur-fast) var(--ease-out); }
.uk-faq summary::-webkit-details-marker { display: none; }
.uk-faq summary:hover { background: var(--animed-cream-100); }
.uk-faq summary svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); color: var(--animed-teal-800); }
.uk-faq details[open] summary svg { transform: rotate(180deg); }
.uk-faq-body { padding: 0 var(--space-6) var(--space-5); font-size: 0.9375rem; line-height: 1.65; color: var(--fg-muted); }

/* bento / founders / feature container-query grids (fallbacks; responsive.css refines) */
.cq-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: var(--space-4); }
.cq-founders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.cq-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }

/* ============================================================ 404 / SEARCH / STYLEGUIDE */
.am-center-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-20) var(--space-6); }
.am-search-field { display: flex; gap: var(--space-3); max-width: 560px; margin: var(--space-6) 0; }
.am-search-field input { flex: 1; padding: 14px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); font: inherit; font-size: 1rem; background: #fff; color: var(--fg-default); }
.am-search-field input:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.am-swatch { height: 64px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.am-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }

.am-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mega-menu cross-fade RESTING STATE. This lives in CSS, not in header.js,
   because the page has to be correct before any JS runs: the first photo of
   each menu shows, the rest are stacked behind it. header.js only moves the
   opacity between them on hover. */
.uk-dd-frame .am-slot { opacity: 0; transition: opacity 420ms cubic-bezier(0.22,0.61,0.36,1); }
.uk-dd-frame .am-slot:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .uk-dd-frame .am-slot { transition: none; } }

.am-slot:has(> img.am-photo) { background: none; padding: 0; }
.am-slot:has(> img.am-photo)::after { display: none; }

/* ---- Team cards as buttons + detail side panel ---- */
.uk-team-card { border: 1px solid transparent; cursor: pointer; font: inherit; color: inherit; width: 100%; display: block; box-shadow: var(--shadow-sm); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.uk-team-card:hover { transform: translateY(-2px); border-color: var(--animed-teal-300); box-shadow: var(--shadow-md); }
.uk-team-card:focus-visible { outline: 2px solid var(--animed-teal-800); outline-offset: 3px; }
.uk-team-avatar { position: relative; overflow: hidden; }
.uk-team-avatar img.am-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.am-team-detail { display: none; }

.am-panel[hidden] { display: none; }
.am-panel { position: fixed; inset: 0; z-index: 200; }
.am-panel-overlay { position: absolute; inset: 0; background: rgba(16, 56, 56, 0.45); opacity: 0; transition: opacity 260ms var(--ease-out); }
.am-panel.is-open .am-panel-overlay { opacity: 1; }
.am-panel-card { position: absolute; top: 0; right: 0; height: 100%; width: min(28rem, 100%); background: var(--bg-page); box-shadow: var(--shadow-lg); padding: var(--space-8); overflow-y: auto; transform: translateX(100%); transition: transform 300ms var(--ease-out); }
.am-panel.is-open .am-panel-card { transform: translateX(0); }
.am-panel-close { position: absolute; top: var(--space-5); right: var(--space-5); width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border-subtle); background: #fff; color: var(--animed-teal-900); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.am-panel-close:hover { background: var(--animed-cream-100); }
.am-panel-avatar { width: 12rem; height: 12rem; border-radius: 50%; background: var(--animed-teal-500); margin-bottom: var(--space-5); position: relative; overflow: hidden; }
.am-panel-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.am-panel-name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; }
.am-panel-role { font-size: 0.9375rem; color: var(--animed-teal-800); font-weight: 600; margin: var(--space-1) 0 var(--space-5); }
.am-panel-bio { font-size: 0.9375rem; line-height: 1.65; color: var(--fg-muted); }
.am-panel-bio p { margin: 0 0 var(--space-3); }
.am-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-6); }
.am-panel-chips:empty { display: none; }
.am-panel-chip { background: var(--animed-cream-100); border: 1px solid var(--border-subtle); color: var(--animed-ink-900); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); }
@media (prefers-reduced-motion: reduce) { .am-panel-card, .am-panel-overlay { transition: none; } }

/* ---- Map embed: container-query responsive ---- */
.am-map { container-type: inline-size; width: 100%; }
.am-map-frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-2xl); overflow: hidden; background: var(--animed-cream-200); }
.am-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@container (max-width: 48rem) { .am-map-frame { aspect-ratio: 4 / 3; } }
@container (max-width: 30rem) { .am-map-frame { aspect-ratio: 1 / 1; } }