/* Compiled from assets/src/styles/main.css — do not edit directly. */

/* Front-end manifest. Import order matters: tokens, base, components, blocks.
   Adding a block means dropping blocks/<name>.css and adding one line below. */

/* ---- base/fonts.css ---- */
/* Self-hosted webfonts.
   Subsets: latin + latin-ext (latin covers the Danish letters; latin-ext is
   only fetched when a page actually needs it). Weights match the set the
   original design requested, so rendering is unchanged.

   Files come from Google Fonts and are licensed under the SIL Open Font
   License 1.1 - see assets/fonts/LICENSE.txt. */

/* Open Sans 400 - latin */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sans 400 - latin-ext */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/open-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Open Sans 500 - latin */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/open-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sans 500 - latin-ext */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/open-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Open Sans 600 - latin */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/open-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sans 600 - latin-ext */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/open-sans-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 400 - latin */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/raleway-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway 400 - latin-ext */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/raleway-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 500 - latin */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/raleway-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway 500 - latin-ext */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/raleway-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 600 - latin */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/raleway-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway 600 - latin-ext */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/raleway-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 700 - latin */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/raleway-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway 700 - latin-ext */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/raleway-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway 800 - latin */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/raleway-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway 800 - latin-ext */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/raleway-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- base/tokens.css ---- */
/* Design tokens. Everything references these — no hard-coded colours in components. */
:root{
  /* Brand */
  --dafolo-purple:#3c1053;
  --dafolo-purple-deep:#2a0b3d;
  --dafolo-purple-600:#5a2b78;
  --dafolo-blue:#499dd7;
  --dafolo-mint:#79dbd5;
  --dafolo-gold:#ffd892;

  /* Ink and surfaces */
  --dafolo-ink:#1c1526;
  --dafolo-ink-soft:#6a6475;
  --dafolo-line:rgba(28,21,38,.12);
  --dafolo-paper:#ffffff;
  --dafolo-paper-2:#f6f3f0;
  --dafolo-grey:#eceef1;
  --dafolo-tint:#f2edf6;

  /* Feedback. One red, used by the error summary, the field messages and the
     errored control borders, so they cannot drift apart. */
  --dafolo-danger:#b32d2e;
  --dafolo-danger-deep:#8f2324;
  --dafolo-danger-line:rgba(179,45,46,.32);
  --dafolo-danger-tint:#fcf4f4;

  /* Text on dark (purple) surfaces */
  --dafolo-on-dark:rgba(255,255,255,.9);
  --dafolo-on-dark-soft:#cbb6da;
  --dafolo-on-dark-dim:#c9b3d9;
  --dafolo-on-dark-muted:#b79fca;
  --dafolo-on-dark-faint:#8d76a4;

  /* Layout */
  --dafolo-maxw:1760px;
  --dafolo-pad:clamp(20px,4vw,64px);
  --dafolo-gutter:max(var(--dafolo-pad), calc((100vw - var(--dafolo-maxw))/2 + var(--dafolo-pad)));
  --dafolo-pad-y:clamp(74px,9.5vh,124px);

  /* Radii */
  --dafolo-r-sm:12px;
  --dafolo-r-md:14px;
  --dafolo-r-lg:18px;
  --dafolo-r-xl:24px;
  --dafolo-r-pill:100px;

  /* Elevation */
  --dafolo-shadow-drop:0 26px 46px -30px rgba(42,11,61,.5);
  --dafolo-shadow-mega:0 30px 50px -34px rgba(42,11,61,.4);

  /* Type scale.
     Every component sizes text through these rather than its own clamp(), so
     the editor canvas can dial the whole scale down in one place. Any new block
     that hard-codes a font size will simply not respond to that. */
  --dafolo-fs-body:clamp(16px,1.05vw,18px);
  --dafolo-fs-hero:clamp(2.7rem,6vw,5.4rem);
  --dafolo-fs-hero-lead:clamp(1.2rem,1.8vw,1.7rem);
  --dafolo-fs-hero-sub:clamp(2.05rem,4.2vw,3.7rem);
  --dafolo-fs-hero-sub-lead:clamp(1.08rem,1.4vw,1.38rem);
  --dafolo-fs-h2:clamp(1.85rem,3vw,2.7rem);
  --dafolo-fs-h3:clamp(1.35rem,1.7vw,1.65rem);
  --dafolo-fs-cta-lead:1.15rem;
  --dafolo-fs-stat:clamp(3.4rem,6vw,6rem);
  --dafolo-fs-quote:clamp(1.35rem,2.4vw,2.15rem);
  --dafolo-fs-lead:clamp(1.08rem,1.3vw,1.3rem);
  --dafolo-fs-card-title:clamp(1.18rem,1.3vw,1.34rem);
  --dafolo-fs-prose:clamp(1.02rem,1.2vw,1.12rem);
  --dafolo-fs-prose-h2:clamp(1.5rem,2.2vw,2rem);
  --dafolo-fs-prose-h3:clamp(1.2rem,1.6vw,1.45rem);

  /* Type */
  --dafolo-font-head:"Raleway",system-ui,sans-serif;
  --dafolo-font-body:"Open Sans",system-ui,sans-serif;

  /* Motion */
  --dafolo-ease:cubic-bezier(.2,.7,.2,1);
  --dafolo-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- base/globals.css ---- */
/* Reset, typography and the section shell.
   Section rhythm lives here and nowhere else: blocks never set their own
   vertical section padding, so spacing changes in one place. */

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  font-family:var(--dafolo-font-body);
  font-size:var(--dafolo-fs-body);
  line-height:1.7;
  color:var(--dafolo-ink);
  background:var(--dafolo-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--dafolo-font-head);
  font-weight:800;
  letter-spacing:.02rem;
  line-height:1.14;
}

h2{font-size:var(--dafolo-fs-h2)}

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

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

button{font:inherit}

/* --- Section shell --- */

.wrap{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding-inline:var(--dafolo-pad);
}

.section{padding-block:var(--dafolo-pad-y)}

.lead{
  font-size:var(--dafolo-fs-lead);
  line-height:1.55;
  color:var(--dafolo-ink-soft);
}

/* Shared section head used by every block with a heading */
.head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(36px,4.5vh,54px);
  flex-wrap:wrap;
}
/* 680px, as every design page except the front page has it. The front page
   is the one exception, so it keeps its narrower measure below. */
.head{max-width:680px}
.home .head{max-width:640px}
.head h2{margin-bottom:16px}

/* .site-main scrolls over the sticky footer, so it needs its own
   stacking context and an opaque background. */
.site-main{
  position:relative;
  z-index:1;
  background:var(--dafolo-paper);
}

/* --- Plain content (pages without blocks) --- */

.prose{
  max-width:860px;
  font-size:var(--dafolo-fs-prose);
  line-height:1.72;
}
.prose>*+*{margin-top:1.35em}
.prose h2{font-size:var(--dafolo-fs-prose-h2);margin-top:2em}
.prose h3{font-size:var(--dafolo-fs-prose-h3);margin-top:1.8em}
.prose p{color:var(--dafolo-ink-soft)}
.prose a{color:var(--dafolo-purple);font-weight:600}
.prose a:hover{color:var(--dafolo-purple-600)}
.prose ul,.prose ol{padding-left:1.4em;color:var(--dafolo-ink-soft)}
.prose li+li{margin-top:.5em}
.prose img{border-radius:var(--dafolo-r-lg)}
.prose blockquote{
  border-left:2px solid var(--dafolo-gold);
  padding-left:20px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.2rem;
  line-height:1.4;
}

/* --- Accessibility --- */

.screen-reader-text{
  border:0;
  clip-path:inset(50%);
  height:1px;
  width:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  white-space:nowrap;
}

.skip-link:focus{
  clip-path:none;
  height:auto;
  width:auto;
  margin:0;
  top:8px;
  left:8px;
  z-index:1000;
  padding:12px 20px;
  background:#fff;
  color:var(--dafolo-purple);
  border-radius:var(--dafolo-r-pill);
  font-family:var(--dafolo-font-head);
  font-weight:700;
  box-shadow:var(--dafolo-shadow-drop);
}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--dafolo-purple);
  outline-offset:3px;
}

/* --- Pagination (fallback templates) --- */

.pagination{margin-top:clamp(40px,5vh,64px)}
.pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination a,.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 14px;
  border-radius:var(--dafolo-r-pill);
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.92rem;
  background:var(--dafolo-paper-2);
  color:var(--dafolo-ink);
  transition:background .22s,color .22s;
}
.pagination a:hover{background:var(--dafolo-tint);color:var(--dafolo-purple)}
.pagination .current{background:var(--dafolo-purple);color:#fff}

/* ---- base/animations.css ---- */
/* Scroll reveal. Blocks place .reveal on the elements the design animates;
   assets/js/reveal.js toggles .in. See the threshold note in reveal.js. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s var(--dafolo-ease-out),transform .8s var(--dafolo-ease-out);
}
.js .reveal.fresh{
  opacity:0;
  transform:translateY(46px);
  transition:opacity .75s var(--dafolo-ease-out),transform 1s var(--dafolo-ease-out);
}
.js .reveal.in{opacity:1;transform:none}

@keyframes dafolo-kin{to{opacity:1;transform:none}}
@keyframes dafolo-kfade{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---- components/buttons.css ---- */
/* Buttons and arrow links. */

.btn{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1rem;
  padding:16px 34px;
  border-radius:var(--dafolo-r-pill);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  cursor:pointer;
  border:none;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--dafolo-purple);color:#fff}
.btn-primary:hover{background:var(--dafolo-purple-deep)}

.btn-light{background:var(--dafolo-gold);color:var(--dafolo-purple)}
.btn-light:hover{background:#fff}

.btn-outline{
  background:transparent;
  color:var(--dafolo-purple);
  border:1.5px solid rgba(60,16,83,.35);
}
.btn-outline:hover{background:var(--dafolo-purple);color:#fff;border-color:var(--dafolo-purple)}

.btn-outline-light{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline-light:hover{background:#fff;color:var(--dafolo-purple);border-color:#fff}

.alink{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  color:var(--dafolo-purple);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:1rem;
  transition:gap .25s,color .25s;
}
.alink svg{width:18px;height:18px;flex:none;transition:transform .25s}
.alink:hover{color:var(--dafolo-purple-600)}
.alink:hover svg{transform:translateX(4px)}

/* ---- components/rail.css ---- */
/* Horizontal scroll rail with snap, plus its prev/next controls.
   The ::before/::after spacers align the first and last card with the page
   gutter without breaking scroll-snap. */

.rail{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-padding-left:var(--dafolo-gutter);
  padding-bottom:6px;
}
.rail::-webkit-scrollbar{display:none}
.rail::before,.rail::after{
  content:"";
  flex:0 0 max(0px, calc(var(--dafolo-gutter) - 24px));
  pointer-events:none;
}

.rnav{display:flex;gap:12px}
.rnav button{
  width:52px;
  height:52px;
  border-radius:var(--dafolo-r-pill);
  border:none;
  background:var(--dafolo-tint);
  color:var(--dafolo-purple);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,color .2s;
}
.rnav button:hover{background:var(--dafolo-purple);color:#fff}
.rnav svg{width:22px;height:22px}
.rnav button:disabled{opacity:.35;cursor:default}
.rnav button:disabled:hover{background:var(--dafolo-tint);color:var(--dafolo-purple)}

/* scroll-behavior:smooth is not covered by prefers-reduced-motion on its own,
   so an animated scroll would still run for someone who asked for no motion.
   The arrows still work; they just jump. */
@media(prefers-reduced-motion:reduce){
  .rail{scroll-behavior:auto}
}

/* ---- components/section-bg.css ---- */
/* Shared section background variants.

   The modifier classes set a custom property only; each block's own rule reads
   it with its design default as the fallback:

     .faq { background: var(--dafolo-section-bg, var(--dafolo-paper)) }

   Doing it through a variable rather than a competing background declaration
   means import order is irrelevant. A modifier at the same specificity as the
   block's own rule would otherwise win or lose depending on which stylesheet
   happened to come last.

   Only light backgrounds are offered. A dark variant would need contrast
   overrides for every heading, lead, link and card inside each block, and the
   cards in these sections are light by design. Purple sections are the stats
   and CTA blocks, which are built for it. */

.dafolo-bg-paper{--dafolo-section-bg:var(--dafolo-paper)}
.dafolo-bg-paper-2{--dafolo-section-bg:var(--dafolo-paper-2)}
.dafolo-bg-tint{--dafolo-section-bg:var(--dafolo-tint)}

/* ---- components/header.css ---- */
/* Utility bar, sticky header, main nav, mega panel, help dropdown, burger. */

/* --- Utility bar --- */

.util{
  background:var(--dafolo-purple-deep);
  color:var(--dafolo-on-dark-dim);
  font-size:.8rem;
}
.util .bar{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding:9px var(--dafolo-pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.util a{
  color:var(--dafolo-on-dark-dim);
  display:inline-flex;
  align-items:center;
  gap:.4em;
  transition:color .2s;
}
.util a:hover{color:#fff}
.util-en svg{width:13px;height:13px}
.util-links{display:flex;gap:22px}

/* --- Header shell --- */

header.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  transition:box-shadow .3s;
}
header.nav.scrolled{box-shadow:0 1px 0 var(--dafolo-line)}

.nav .bar{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding:18px var(--dafolo-pad);
  display:flex;
  align-items:center;
  gap:36px;
}

.logo{color:var(--dafolo-purple);height:33px;flex:none;display:block}
.logo img{height:100%;width:auto;display:block;object-fit:contain}
.logo--text{
  display:inline-flex;
  align-items:center;
  height:auto;
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
}

/* Area label, shown when a page opts into area navigation */
.area-tag{
  display:inline-flex;
  align-items:center;
  margin-left:-10px;
  padding-right:26px;
  border-right:1px solid var(--dafolo-line);
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.92rem;
  color:var(--dafolo-purple-600);
  white-space:nowrap;
  letter-spacing:-.01em;
  flex:none;
  line-height:1;
}

/* --- Main nav --- */

.mainnav{display:flex;align-items:center;gap:30px}

.mainnav>a,
.has-drop>button,
.has-mega>button{
  position:relative;
  font-family:var(--dafolo-font-head);
  font-weight:600;
  font-size:.98rem;
  color:var(--dafolo-ink);
  background:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:8px 0;
  white-space:nowrap;
}

/* Bridges the gap between trigger and panel so hover does not drop out */
.has-drop>button::before,
.has-mega>button::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:100%;
  height:26px;
}

.mainnav a:hover,
.has-drop:hover>button,
.has-mega:hover>button{color:var(--dafolo-purple)}

/* Underline sweep */
.mainnav>a::after,
.has-drop>button::after,
.has-mega>button::after{
  content:"";
  position:absolute;
  left:0;
  bottom:1px;
  height:2px;
  width:0;
  background:var(--dafolo-purple);
  transition:width .32s cubic-bezier(.4,0,.2,1);
}
.mainnav>a:hover::after,
.has-drop:hover>button::after,
.has-mega:hover>button::after{width:100%}
.has-mega.current>button,
.has-drop.current>button{color:var(--dafolo-purple)}
.has-mega.current>button::after,
.has-drop.current>button::after{width:100%}

.mainnav>a .ext{width:14px;height:14px;opacity:.8;flex:none}
.chev{width:14px;height:14px;transition:transform .25s}
.has-drop:hover .chev,
.has-mega:hover .chev{transform:rotate(180deg)}

.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  flex:none;
}

.icon-btn{
  color:var(--dafolo-ink);
  background:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  padding:5px;
}
.icon-btn:hover{color:var(--dafolo-purple)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.search svg{width:24px;height:24px}

/* --- Dropdown and mega panels --- */

.has-drop,.has-mega{position:relative}
.has-mega{position:static}

.drop{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border-radius:var(--dafolo-r-md);
  box-shadow:var(--dafolo-shadow-drop);
  padding:22px 24px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:.2s;
  min-width:250px;
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:none}

.drop ul{list-style:none;display:grid;gap:12px}
.drop a{font-size:.95rem;color:var(--dafolo-ink);white-space:nowrap;transition:color .18s}
.drop a:hover{color:var(--dafolo-purple)}

.drop .dh,
.mega .dh{
  font-family:var(--dafolo-font-head);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  font-weight:700;
  margin-bottom:16px;
}
.drop .dh:not(:first-child),
.mega .dh:not(:first-child){margin-top:22px}

.mega{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  border-top:1px solid var(--dafolo-line);
  box-shadow:var(--dafolo-shadow-mega);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;
  z-index:101;
}
.has-mega:hover .mega,
.mega:hover{opacity:1;visibility:visible;transform:none}

.mega-in{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding:46px var(--dafolo-pad);
  display:grid;
  grid-template-columns:1fr;
}
.mega ul{list-style:none;display:grid;gap:13px}
.mega .col-dig ul{grid-template-columns:repeat(3,1fr);gap:14px 44px;max-width:1040px}
.mega ul a{font-size:.96rem;color:var(--dafolo-ink);transition:color .18s}
.mega ul a:hover{color:var(--dafolo-purple)}
.mega .dh.cur{
  display:inline-block;
  color:var(--dafolo-purple);
  border-bottom:2px solid var(--dafolo-purple);
  padding-bottom:5px;
}

/* --- Help dropdown (click-toggled, not hover) --- */

.nav-right .help-btn{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1rem;
  height:46px;
  padding:0 22px;
  border-radius:var(--dafolo-r-pill);
  border:1.5px solid rgba(60,16,83,.35);
  background:transparent;
  color:var(--dafolo-purple);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
.nav-right .help-btn svg{width:18px;height:18px;flex:none}
.nav-right .help-btn::after{display:none}
.nav-right .help-btn:hover,
.has-drop.help.open .help-btn{
  background:var(--dafolo-purple);
  color:#fff;
  border-color:var(--dafolo-purple);
}

/* Hover must not open this one — only the .open class does. */
.has-drop.help:hover .drop{opacity:0;visibility:hidden;transform:translateY(-6px)}
.has-drop.help.open .drop{opacity:1;visibility:visible;transform:none}
.has-drop.help{position:static;margin-right:-6px}

.help-drop{
  left:auto;
  right:var(--dafolo-gutter);
  min-width:300px;
  border:1px solid var(--dafolo-line);
  padding:20px 22px;
}
.help-drop ul{gap:8px}
.help-drop a{display:inline-flex;align-items:center;gap:.4em}
.help-drop .ext{width:13px;height:13px;opacity:.8;flex:none}

.nav-right .hdr-btn{height:46px;padding:0 24px;line-height:1}
.nav-right .btn-primary{transition:opacity .25s,background .25s,color .25s,transform .25s}

/* --- Burger --- */

.burger{
  display:none;
  width:46px;
  height:46px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  position:relative;
}
.burger span{
  display:block;
  width:25px;
  height:2px;
  background:var(--dafolo-purple);
  border-radius:2px;
  transition:transform .34s var(--dafolo-ease),opacity .18s;
}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- Open-drawer state --- */

body.menu-open{overflow:hidden}
body.menu-open header.nav{background:#fff}
body.menu-open .nav-right .btn-primary,
body.menu-open .nav-right .help-btn{opacity:0;pointer-events:none}

/* ---- components/drawer.css ---- */
/* Mobile drawer. Built from the same menu trees as the desktop header. */

.drawer{
  position:fixed;
  inset:0;
  z-index:90;
  background:#fff;
  padding:calc(env(safe-area-inset-top) + 88px) var(--dafolo-pad) calc(env(safe-area-inset-bottom) + 32px);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .34s ease,transform .4s var(--dafolo-ease),visibility .34s;
}
.drawer.open{opacity:1;visibility:visible;transform:none}

.mm-nav{display:flex;flex-direction:column}

.mm-area{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  padding-bottom:14px;
}

.mm-link,
.mm-parent{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:-.01em;
  color:var(--dafolo-ink);
  background:none;
  border:none;
  border-top:1px solid var(--dafolo-line);
  padding:19px 2px;
  cursor:pointer;
  text-align:left;
  transition:color .2s;
}
.mm-nav>:last-child{border-bottom:1px solid var(--dafolo-line)}
.mm-link:hover,
.mm-parent:hover,
.mm-group.open>.mm-parent{color:var(--dafolo-purple)}
.mm-link>svg{width:22px;height:22px;flex:none;color:var(--dafolo-purple)}
.mm-link>svg.ext{width:17px;height:17px}

.mm-chev{
  width:22px;
  height:22px;
  flex:none;
  color:var(--dafolo-purple);
  transition:transform .32s var(--dafolo-ease);
}
.mm-group.open .mm-chev{transform:rotate(180deg)}

/* Height is animated from JS using the measured inner height. */
.mm-sub{height:0;overflow:hidden;transition:height .36s var(--dafolo-ease)}
.mm-sub-in{padding-bottom:12px}

.mm-cat{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  padding:16px 2px 4px;
}
.mm-sub-in>.mm-cat:first-child{padding-top:4px}
.mm-sub a{display:block;font-size:1.02rem;color:var(--dafolo-ink-soft);padding:10px 2px;transition:color .18s}
.mm-sub a:hover{color:var(--dafolo-purple)}
.mm-sub a .ext{width:13px;height:13px;margin-left:.3em;vertical-align:-1px;opacity:.8}

.mm-foot{margin-top:auto;padding-top:36px}

.mm-util{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:22px}
.mm-util a{
  font-family:var(--dafolo-font-head);
  font-weight:600;
  font-size:.98rem;
  color:var(--dafolo-ink-soft);
  transition:color .18s;
}
.mm-util a:hover{color:var(--dafolo-purple)}

.mm-lang{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.mm-lang a{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-size:.98rem;
  color:var(--dafolo-ink-soft);
  transition:color .18s;
}
.mm-lang a:hover{color:var(--dafolo-purple)}
.mm-lang a.active{color:var(--dafolo-purple);font-weight:700}
.mm-lang svg{width:15px;height:15px}

.mm-cta{width:100%;justify-content:center;font-size:1.05rem;padding:16px 24px}

/* Staggered entrance */
.drawer .mm-nav>*,
.drawer .mm-foot>*{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease,transform .45s var(--dafolo-ease);
}
.drawer.open .mm-nav>*,
.drawer.open .mm-foot>*{opacity:1;transform:none}
.drawer.open .mm-nav>:nth-child(1){transition-delay:.06s}
.drawer.open .mm-nav>:nth-child(2){transition-delay:.11s}
.drawer.open .mm-nav>:nth-child(3){transition-delay:.16s}
.drawer.open .mm-nav>:nth-child(4){transition-delay:.21s}
.drawer.open .mm-nav>:nth-child(5){transition-delay:.26s}
.drawer.open .mm-nav>:nth-child(6){transition-delay:.3s}
.drawer.open .mm-foot>:nth-child(1){transition-delay:.3s}
.drawer.open .mm-foot>:nth-child(2){transition-delay:.34s}
.drawer.open .mm-foot>:nth-child(3){transition-delay:.38s}

@media(prefers-reduced-motion:reduce){
  .drawer,
  .drawer .mm-nav>*,
  .drawer .mm-foot>*{transition:none}
}

/* ---- components/footer.css ---- */
/* Sticky-reveal footer: it sits behind .site-main and is uncovered as the page
   scrolls to the bottom. Order in the DOM matters — see footer.php. */

footer{
  background:var(--dafolo-purple-deep);
  color:var(--dafolo-on-dark-muted);
  position:sticky;
  bottom:0;
  z-index:0;
}

.foot-in{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding:clamp(60px,7vh,96px) var(--dafolo-pad) 36px;
}

.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.foot-logo{color:#fff;height:34px;margin-bottom:22px}
.foot-logo img{height:100%;width:auto;object-fit:contain}
.foot-logo--text{
  height:auto;
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:1.5rem;
  color:#fff;
}

.foot-contact{
  display:grid;
  gap:12px;
  font-size:.92rem;
  color:var(--dafolo-on-dark-dim);
  line-height:1.5;
}
.foot-contact a{color:var(--dafolo-on-dark-dim)}
.foot-contact a:hover{color:#fff}
.foot-contact b{
  color:#fff;
  font-family:var(--dafolo-font-head);
  font-weight:600;
  display:block;
  margin-bottom:2px;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

footer h5{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{color:var(--dafolo-on-dark-muted);transition:color .18s;font-size:.92rem}
footer ul a:hover{color:#fff}

.foot-addr{display:grid;gap:15px;font-size:.9rem;color:#a98cbd;line-height:1.45}
.foot-addr b{
  color:#fff;
  font-family:var(--dafolo-font-head);
  font-weight:600;
  display:block;
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.foot-bot{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:26px;
  font-size:.85rem;
  color:var(--dafolo-on-dark-faint);
}
.foot-bot a{color:inherit}
.foot-bot a:hover{color:#fff}

/* ---- components/totop.css ---- */
/* Back-to-top button with a scroll-progress ring. */

.totop{
  position:fixed;
  right:clamp(18px,3vw,40px);
  bottom:clamp(18px,3vw,40px);
  width:56px;
  height:56px;
  border:none;
  background:var(--dafolo-purple);
  color:#fff;
  border-radius:var(--dafolo-r-pill);
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:300;
  opacity:0;
  transform:translateY(16px) scale(.92);
  pointer-events:none;
  transition:opacity .45s ease,transform .45s var(--dafolo-ease),background .25s;
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--dafolo-purple-deep)}
.totop .arrow{width:19px;height:19px;position:relative;z-index:1}
.totop .ring{position:absolute;inset:0;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke-width:2.4}
.totop .ring .track{stroke:rgba(255,255,255,.2)}
.totop .ring .fill{
  stroke:rgba(255,255,255,.5);
  stroke-linecap:round;
  stroke-dasharray:125.6;
  stroke-dashoffset:125.6;
  transition:stroke-dashoffset .1s linear;
}

/* ---- components/hero.css ---- */
/* Hero base, shared by the hero block and the template-rendered page headers. */

.hero{
  position:relative;
  min-height:clamp(520px,82vh,820px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--dafolo-purple-deep) center/cover no-repeat;
}

.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* A still placeholder while an image attachment is resolving in the editor. */
.hero-media--pending{position:absolute;inset:0;background:var(--dafolo-purple-600);opacity:.4;z-index:0}

.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(28,8,42,.2) 0%,rgba(28,8,42,.5) 55%,rgba(28,8,42,.72) 100%);
  z-index:1;
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:1080px;
  padding:40px var(--dafolo-pad);
  color:#fff;
  will-change:opacity,transform;
}
.hero-inner h1{
  font-size:var(--dafolo-fs-hero);
  color:#fff;
  line-height:1.1;
  margin-bottom:22px;
  letter-spacing:.02rem;
}
.hero-inner p{
  font-size:var(--dafolo-fs-hero-lead);
  color:var(--dafolo-on-dark);
  margin:0 auto 38px;
  font-weight:400;
}
.hero-inner .btn{padding:17px 40px;font-size:1.05rem}

/* --- Sub-page hero --- */

.hero.sub{min-height:clamp(300px,34vh,400px);text-align:left}
.hero.sub .hero-inner{
  max-width:var(--dafolo-maxw);
  width:100%;
  padding-block:clamp(64px,8vh,104px);
}
.hero.sub h1{font-size:var(--dafolo-fs-hero-sub);max-width:26ch}
.hero.sub p{font-size:var(--dafolo-fs-hero-sub-lead);max-width:62ch;margin:0 0 34px}
.hero.sub .hero-inner>p:last-child{margin-bottom:0}

/* The sub hero is left-aligned, so its scrim is too: dark under the text and
   clear on the right, where the photograph is meant to show. The centred front
   hero keeps the vertical scrim defined above. Every sub page in the design
   does it this way; only the front page does not.

   Below 900px the column is too narrow for a sideways fade to read as anything
   but a muted image, so it becomes vertical, as the design has it.

   :not(.hero--plain) rather than leaning on rule order, which would decide this
   silently: with no image there is nothing to reveal, and a one-sided gradient
   over flat purple just looks lopsided. */
.hero.sub:not(.hero--plain) .hero-scrim{
  background:linear-gradient(90deg,rgba(28,8,42,.84) 0%,rgba(28,8,42,.58) 38%,rgba(28,8,42,.1) 72%,rgba(28,8,42,0) 100%);
}

@media(max-width:900px){
  .hero.sub:not(.hero--plain) .hero-scrim{
    background:linear-gradient(180deg,rgba(28,8,42,.3) 0%,rgba(28,8,42,.62) 55%,rgba(28,8,42,.78) 100%);
  }
}

/* No media uploaded: the purple base plus the scrim is the intended fallback. */
.hero--plain .hero-scrim{
  background:linear-gradient(180deg,rgba(60,16,83,.35) 0%,rgba(28,8,42,.55) 100%);
}

/* The front hero is centred, so its actions are too. A flex container ignores
   the inherited text-align, which is what the surrounding copy is centred by. */
.hero-actions{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.hero.sub .hero-actions{justify-content:flex-start}

/* --- Breadcrumbs --- */

.hero-crumbs{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.55em;
  font-family:var(--dafolo-font-head);
  font-weight:600;
  font-size:.82rem;
  color:rgba(255,255,255,.72);
  margin-bottom:22px;
  letter-spacing:.02em;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hero-crumbs::-webkit-scrollbar{display:none}
.hero-crumbs>*{flex:none;white-space:nowrap}
.hero-crumbs::after{content:"";flex:0 0 var(--dafolo-pad)}
.hero-crumbs a{color:rgba(255,255,255,.72);transition:color .2s}
.hero-crumbs a:hover{color:#fff}
.hero-crumbs .cur{color:#fff}
.hero-crumbs svg{width:11px;height:11px;opacity:.5;flex:none}

/* --- Entrance animation --- */

.js .hero-crumbs{opacity:0;animation:dafolo-kfade .7s ease .05s forwards}
.js .hero-inner h1 .kw{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:dafolo-kin .85s cubic-bezier(.2,.75,.25,1) forwards;
}
.js .hero-inner h1 .kw{animation-delay:calc(.15s + var(--kw,0) * .085s)}
.js .hero-inner p{opacity:0;animation:dafolo-kin .85s cubic-bezier(.2,.75,.25,1) .66s forwards}
.js .hero-inner .btn{opacity:0;animation:dafolo-kfade .7s ease .82s forwards}

@media(prefers-reduced-motion:reduce){
  .js .hero-crumbs,
  .js .hero-inner h1 .kw,
  .js .hero-inner p,
  .js .hero-inner .btn{opacity:1;animation:none;transform:none}
  video.hero-media{display:none}
}

/* A news post's hero heading is smaller than a page's, at every width. The
   design sets this on the article page itself; the theme has one hero, so it
   is scoped to the post. Jobs keep the full size, as their comp does. */
.single-post .hero.sub h1{
  font-size:clamp(1.7rem,3vw,2.65rem);
  max-width:34ch;
  line-height:1.16;
}

/* ---- components/news-card.css ---- */
/* News card, used by the news rail, the news grid and the fallback post list. */

.ncard{
  flex:0 0 clamp(280px,26vw,380px);
  scroll-snap-align:start;
  cursor:pointer;
  transition:transform .3s;
}
.ncard:hover{transform:translateY(-4px)}
.ncard .thumb{
  border-radius:var(--dafolo-r-lg);
  overflow:hidden;
  aspect-ratio:16/11;
  margin-bottom:18px;
  background:var(--dafolo-tint);
}
.ncard .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--dafolo-ease);
}
.ncard:hover .thumb img{transform:scale(1.05)}
.ncard .meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  font-size:.76rem;
}
.ncard .cat{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
}
.ncard .date{color:var(--dafolo-ink-soft)}
.ncard h3{font-size:1.2rem;line-height:1.28;transition:color .25s}
.ncard:hover h3{color:var(--dafolo-purple)}

/* Grid layout */
.nyh-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,4vh,52px) clamp(20px,2.2vw,32px);
}
.nyh-grid .ncard{flex:none;min-width:0;display:flex;flex-direction:column}
.nyh-grid .ncard .thumb{margin-bottom:20px}
.nyh-grid .ncard h3{font-size:var(--dafolo-fs-card-title);line-height:1.3}
.nyh-cell{min-width:0}

/* [hidden] alone loses to an author display rule, so it is overridden here. */
.nyh-cell[hidden]{display:none}

.nyh-grid .nyh-cell:nth-child(3n+2){transition-delay:.08s}
.nyh-grid .nyh-cell:nth-child(3n+3){transition-delay:.16s}

.nyh-ex{color:var(--dafolo-ink-soft);font-size:.95rem;line-height:1.55;margin-top:10px}

.nyh-empty{
  color:var(--dafolo-ink-soft);
  font-size:1.05rem;
  padding:clamp(40px,6vh,72px) 0;
  text-align:center;
  border-top:1px solid var(--dafolo-line);
  border-bottom:1px solid var(--dafolo-line);
}

.news-foot{margin-top:20px}

/* ---- components/article.css ---- */
/* Article body and job posting layout. */

.art{
  padding-block:clamp(48px,6.5vh,80px) var(--dafolo-pad-y);
  background:var(--dafolo-paper);
}

/* Three-column grid: content sits in the middle track, and .art-wide elements
   break out across all three. */
.art-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) min(100%,720px) minmax(0,1fr);
  font-size:clamp(1.05rem,1.28vw,1.15rem);
  line-height:1.72;
}
.art-body>*{grid-column:2;min-width:0}
.art-body>.art-wide,
.art-body>.alignwide,
.art-body>.alignfull{grid-column:1/-1;width:min(100%,980px);justify-self:center}

/* Article prose is the full ink colour. The soft grey belongs to leads and
   supporting text; using it for body copy washed the whole article out and
   read as a lighter font weight. The design sets no colour here at all, so it
   inherits --dafolo-ink from body. */
.art-body p{margin:0 0 1.35em}
.art-body h2{
  font-size:var(--dafolo-fs-prose-h2);
  margin:clamp(14px,2.5vh,26px) 0 16px;
  letter-spacing:-.01em;
}
.art-body h3{font-size:var(--dafolo-fs-prose-h3);margin:1.6em 0 .6em}
.art-body a{color:var(--dafolo-purple);font-weight:600}
.art-body a:hover{color:var(--dafolo-purple-600)}
.art-body ul,.art-body ol{padding-left:1.4em;margin:0 0 1.35em}
.art-body li+li{margin-top:.5em}

.art-datel{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dafolo-ink-soft);
  margin:0 0 clamp(22px,3vh,34px);
}

.art-tag{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-bottom:22px;
  font-family:var(--dafolo-font-head);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
}
.js .art-tag{opacity:0;animation:dafolo-kfade .7s ease .08s forwards}

.art-fig,
.art-body figure{margin:clamp(20px,3vh,32px) 0 clamp(40px,5.5vh,60px)}
/* 16/10 and 18px, which is what the design's own figure resolves to after its
   later overrides, and 16/10 is also the dafolo-wide crop (1760x1100) that the
   editor inserts. Forcing 16/9 here would have re-cropped a correctly sized
   image in the browser. */
.art-fig img,
.art-body figure img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:18px;
  background:var(--dafolo-tint);
}
.art-fig figcaption,
.art-body figcaption{
  margin:16px auto 0;
  max-width:720px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--dafolo-ink-soft);
  padding-left:16px;
  border-left:2px solid var(--dafolo-gold);
}

.art-rail{background:var(--dafolo-paper-2)}
.art-rail .rnav button{background:#fff}
.art-rail .rnav button:hover{background:var(--dafolo-purple);color:#fff}
.art-rail .rnav button:disabled:hover{background:#fff;color:var(--dafolo-purple)}

/* --- Job posting --- */

.jb-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(340px,28vw,420px);
  gap:clamp(40px,6vw,120px);
  align-items:start;
}
.jb-read{max-width:720px}
.jb-read h2{font-size:clamp(1.5rem,2vw,1.95rem);margin:0 0 16px}
.jb-read h2:not(:first-child){margin-top:clamp(40px,4vw,54px)}
.jb-read p{color:var(--dafolo-ink-soft);margin-bottom:18px}
.jb-read p a{color:var(--dafolo-purple);font-weight:600;transition:color .18s}
.jb-read p a:hover{color:var(--dafolo-purple-600)}
.jb-read ul{list-style:none;display:grid;gap:12px;margin-bottom:18px}
.jb-read li{position:relative;padding-left:30px;color:var(--dafolo-ink-soft)}
.jb-read li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:9px;
  height:9px;
  border-radius:var(--dafolo-r-pill);
  background:var(--dafolo-purple);
}
.jb-read>*:last-child{margin-bottom:0}

.jb-side{position:sticky;top:108px}
.jb-card{background:var(--dafolo-paper-2);border-radius:var(--dafolo-r-xl);padding:clamp(26px,2.2vw,34px)}
.jb-lbl{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  margin-bottom:12px;
}
.jb-facts{display:grid;margin:0 0 24px}
.jb-facts>div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:12px 0;
  border-top:1px solid var(--dafolo-line);
}
.jb-facts dt{color:var(--dafolo-ink-soft);font-size:.92rem}
.jb-facts dd{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  color:var(--dafolo-ink);
  font-size:.98rem;
  text-align:right;
}
.jb-card-btn{width:100%;justify-content:center}
.jb-note{margin-top:14px;text-align:center;font-size:.88rem;line-height:1.5;color:var(--dafolo-ink-soft)}
.jb-note a{color:var(--dafolo-purple);font-weight:600;transition:color .18s}
.jb-note a:hover{color:var(--dafolo-purple-600)}

.jb-contact{margin-top:28px;padding-top:26px;border-top:1px solid var(--dafolo-line)}
.jb-person{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
.jb-person-txt{width:100%}
.jb-person-txt b{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.02rem;
  color:var(--dafolo-ink);
  line-height:1.3;
}
.jb-person-txt span{display:block;color:var(--dafolo-ink-soft);font-size:.9rem;line-height:1.4}
.jb-contact-links{display:flex;flex-direction:column;gap:4px}
.jb-contact-links a{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.96rem;
  color:var(--dafolo-purple);
  transition:color .18s;
  padding:2px 0;
}
.jb-contact-links a svg{width:17px;height:17px;color:var(--dafolo-purple);flex:none}
.jb-contact-links a:hover{color:var(--dafolo-purple-600)}

/* A job posting ends with the shared benefits section. The design separates it
   from the posting with a hairline, which belongs to the job layout rather than
   to feature-cards: the same block carries no border anywhere else. */
.single-stilling .wp-block-dafolo-feature-cards{
  border-top:1px solid var(--dafolo-line);
}

/* The category label in an article hero is a pill, not bare text. */
.art-cat{
  display:inline-flex;
  align-items:center;
  background:var(--dafolo-gold);
  color:var(--dafolo-purple);
  border-radius:var(--dafolo-r-pill);
  padding:8px 15px;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}

/* Back to the news index, above the date. */
.art-back{font-size:.95rem;margin-bottom:clamp(26px,4vh,40px);justify-self:start}
.art-back:hover svg{transform:translateX(-4px)}

/* Contacts and share row at the foot of an article. */
.art-more{
  margin-top:clamp(44px,6vh,64px);
  padding-top:clamp(34px,4.5vh,48px);
  border-top:1px solid var(--dafolo-line);
}
.art-more h2{margin:0 0 22px;font-size:clamp(1.4rem,2vw,1.8rem)}

.art-people{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}

.art-share{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.art-share-lbl{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dafolo-ink-soft);
  flex-basis:100%;
  margin:0 0 2px;
}
.art-share a,
.art-share button{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.78rem;
  padding:9px 12px;
  border-radius:var(--dafolo-r-pill);
  border:1.5px solid rgba(60,16,83,.3);
  color:var(--dafolo-purple);
  display:inline-flex;
  align-items:center;
  gap:.45em;
  line-height:1;
  white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s;
}
.art-share a:hover,
.art-share button:hover{
  background:var(--dafolo-purple);
  color:#fff;
  border-color:var(--dafolo-purple);
}
.art-share svg{width:14px;height:14px;flex:none}
/* The brand marks are filled rather than stroked, so they read heavier at the
   same box size. */
.art-share svg[fill="currentColor"]{width:13px;height:13px;transform:translateY(-.5px)}

/* Only when contacts are above it does the share row need its own rule. */
.art-share-in{margin-top:26px;padding-top:22px;border-top:1px solid var(--dafolo-line)}

/* ---- components/forms.css ---- */
/* Shared form controls.

   The site search field is .sf-field. It deliberately does not reuse
   .kt-search: the staff directory takes that name from the design for a
   different structure, where the label is a positioning context with an
   absolutely placed icon and the border sits on the input. Here the label
   itself is the bordered box. Sharing one class gave the directory two borders
   and a misaligned icon. */

.searchform{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.sf-field{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 320px;
  min-width:0;
  background:#fff;
  border:1px solid var(--dafolo-line);
  border-radius:var(--dafolo-r-sm);
  padding:0 18px;
  height:58px;
  transition:box-shadow .2s,border-color .2s;
}
.sf-field:focus-within{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--dafolo-purple)}
.sf-field svg{width:19px;height:19px;color:var(--dafolo-purple);flex:none}
.sf-field input{
  flex:1;
  min-width:0;
  border:none;
  background:none;
  font-family:inherit;
  font-size:1rem;
  color:var(--dafolo-ink);
  height:100%;
}
.sf-field input:focus{outline:none}

/* The native clear button does not match the design. */
input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}

/* ---- components/gravity-forms.css ---- */
/* Gravity Forms 3.x, "orbital" theme framework.

   Orbital is token-driven: the plugin prints an inline <style> block that sets
   a long list of --gf-* custom properties on the form wrapper. That means most
   of the restyling is remapping those tokens to the Dafolo ones, rather than
   overriding component rules one by one.

   The inline block is scoped to
       #gform_wrapper_N[data-form-index="0"].gform-theme
   which is an ID selector, so an author rule cannot out-specify it generically.
   The token declarations below therefore use !important. That is deliberate and
   limited to custom properties: everything downstream resolves from them
   normally, so no component rule needs !important. */

.gform_wrapper.gform-theme{
  /* Brand */
  --gf-color-primary:var(--dafolo-purple) !important;
  --gf-color-primary-rgb:60, 16, 83 !important;
  --gf-color-primary-contrast:#fff !important;
  --gf-color-primary-contrast-rgb:255, 255, 255 !important;
  --gf-color-primary-darker:var(--dafolo-purple-deep) !important;
  --gf-color-primary-lighter:var(--dafolo-purple-600) !important;

  /* Inside controls: focus ring and selection colour */
  --gf-color-in-ctrl-primary:var(--dafolo-purple) !important;
  --gf-color-in-ctrl-primary-rgb:60, 16, 83 !important;
  --gf-color-in-ctrl-primary-contrast:#fff !important;
  --gf-color-in-ctrl-primary-darker:var(--dafolo-purple-deep) !important;
  --gf-color-in-ctrl-primary-lighter:var(--dafolo-purple-600) !important;
  --gf-color-in-ctrl-contrast:var(--dafolo-ink) !important;

  /* Borders and outlines */
  --gf-color-out-ctrl-light:var(--dafolo-line) !important;
  --gf-color-out-ctrl-dark:var(--dafolo-ink-soft) !important;
  --gf-color-in-ctrl-light:var(--dafolo-line) !important;
  --gf-color-in-ctrl-dark:var(--dafolo-ink-soft) !important;

  /* The select arrow is swapped per state by the framework
     (--gf-ctrl-select-icon-hover / -focus / -disabled). Overriding only the
     rest state leaves the framework icon reappearing on hover, drawn at our
     width and so visibly oversized. All four states point at our chevron. */
  --gf-ctrl-select-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c1053' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  --gf-ctrl-select-icon-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c1053' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  --gf-ctrl-select-icon-focus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c1053' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  --gf-ctrl-select-icon-disabled:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6475' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  --gf-ctrl-select-icon-size:18px !important;

  /* Field spacing. The framework defaults to a 40px row gap; the design uses
     20px both ways. Set through the tokens so the grid stays the plugin's. */
  --gf-form-gap-y:20px !important;
  --gf-form-gap-x:20px !important;

  /* Gap between a control and the description or validation message under it.
     The framework owns this as a margin on the message, so it is set here
     rather than as padding on our side of the same gap. Default is 8px. */
  --gf-desc-space:6px !important;

  /* The validation banner's heading. These have to be tokens, not rules: the
     framework styles that <h2> with .gform-theme--framework .gform_validation_errors
     .gform_submission_error, three classes, and its stylesheet is enqueued
     after the theme's, so a three-class rule of ours loses the tie. */
  --gf-form-validation-heading-color:var(--dafolo-danger-deep) !important;
  --gf-form-validation-heading-font-family:var(--dafolo-font-head) !important;
  --gf-form-validation-heading-font-size:.95rem !important;
  --gf-form-validation-heading-font-weight:700 !important;
  --gf-form-validation-heading-line-height:1.45 !important;
  --gf-form-validation-heading-gap:10px !important;
  --gf-form-validation-heading-icon-font-size:20px !important;

  /* Shape and type */
  --gf-radius:var(--dafolo-r-sm) !important;
  --gf-font-size-secondary:14px !important;
  --gf-font-size-tertiary:13px !important;

  /* The required indicator. The framework sizes it from these tokens, so set
     it here rather than fighting its .gform-field-label > .gfield_required
     rule, which is a class heavier than anything we can write generically.
     24px looks large next to a 14.4px label, but an asterisk only inks about
     a third of its em box, so it reads as roughly 8px on screen.
     line-height 0 keeps the taller glyph out of the label's line box. */
  --gf-ctrl-label-color-req:var(--dafolo-purple-600) !important;
  --gf-ctrl-label-font-size-req:24px !important;
  --gf-ctrl-label-line-height-req:0 !important;
}

/* The block prints its own heading and lead, and with the title and
   description switched off at the call site the form header holds nothing but
   the '"*" indikerer påkrævede felter' legend, so the whole header goes.
   Nothing is lost for assistive tech: every required input already carries
   aria-required="true", which is what screen readers actually announce. */
.gform_wrapper .gform_heading{display:none}

/* Inputs, matching the design's field treatment. */
.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="url"],
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select{
  /* background-color, not the shorthand: the shorthand resets background-image
     to none, which wipes the select arrow the framework draws from its token. */
  background-color:#fff;
  border:1px solid var(--dafolo-line);
  border-radius:var(--dafolo-r-sm);
  padding:16px 18px;
  font-family:var(--dafolo-font-body);
  font-size:1rem;
  color:var(--dafolo-ink);
  transition:box-shadow .2s,border-color .2s;
  /* The framework sets a fixed control height, which box-sizing then eats the
     padding into. Let the padding decide the height, as the design does. */
  height:auto;
  line-height:1.4;
}

/* The design sizes the message box by min-height rather than a row count. */
.gform_wrapper.gform-theme textarea{
  min-height:132px !important;
  height:132px !important;
  resize:vertical;
}

/* Custom chevron, matching the design's select. The native arrow is removed,
   so the replacement is drawn as a background image. */
.gform_wrapper.gform-theme select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:50px;
  cursor:pointer;
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:18px auto;
}
.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder{color:var(--dafolo-ink-soft);opacity:1}

.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme textarea:focus,
.gform_wrapper.gform-theme select:focus{
  outline:none;
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--dafolo-purple);
}

/* Submit button: the theme's .btn-primary, without needing the class.

   Every declaration here is forced. The orbital framework styles its submit
   button from a rule we cannot out-specify at author level, because the plugin
   prints an inline <style> scoped to #gform_wrapper_N. Without !important only
   the colour came through, from the token remap above, and the button kept the
   framework's font, height and padding. */
.gform_wrapper.gform-theme .gform_button{
  font-family:var(--dafolo-font-head) !important;
  font-weight:700 !important;
  font-size:1rem !important;
  padding:16px 34px !important;
  border-radius:var(--dafolo-r-pill) !important;
  border:none !important;
  background:var(--dafolo-purple) !important;
  color:#fff !important;
  cursor:pointer;
  height:auto !important;
  line-height:1 !important;
  transition:background .25s,transform .25s;
}
.gform_wrapper.gform-theme .gform_button:hover{
  background:var(--dafolo-purple-deep) !important;
  transform:translateY(-2px);
}

/* Gravity Forms 3 still prints the .hidden_label class but no longer hides the
   label itself, so a form set to hidden labels renders them anyway. Hidden
   visually, kept for screen readers. */
.gform_wrapper.gform-theme .gform_fields.hidden_label .gfield_label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Labels, matching the design's .kt-lbl: plain sentence case, not an eyebrow. */
.gform_wrapper.gform-theme .gform-field-label{
  font-family:var(--dafolo-font-head) !important;
  font-weight:700 !important;
  font-size:.9rem !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  color:var(--dafolo-ink) !important;
  margin-bottom:8px !important;
}

/* Required marker. Colour and size come from the tokens above; the only thing
   left to set is the vertical position.

   An asterisk is drawn at cap height, so at the label's own size it floated
   above the text and read as a stray footnote mark. This drops it onto the
   x-height. No left margin: at 24px the glyph's own side bearing is the gap,
   and anything added on top reads as a space before the marker. */
.gform_wrapper.gform-theme .gfield_required_asterisk{
  vertical-align:-.35em;
}

/* The "(Required)" wording, for a form set to that indicator instead. */
.gform_wrapper.gform-theme .gfield_required_text{
  font-weight:400;
  font-size:.8rem;
  color:var(--dafolo-ink-soft);
}

/* --- Validation ---

   Two things here are form settings rather than CSS, and both forms are set
   accordingly under Formularer -> Indstillinger:

     Validation Message Placement = Below inputs
     Validation Summary           = off

   New forms default to "Above inputs" with the summary on, so a form added
   later needs both changed to match. The styling below assumes them: the
   summary is a one-line banner, and each message sits under its own field. */

/* The banner above the form. With the summary list off this is a single
   sentence, so it is sized as a notice, not a panel. */
.gform_wrapper.gform-theme .gform_validation_errors{
  background:var(--dafolo-danger-tint);
  border:1px solid var(--dafolo-danger-line);
  border-radius:var(--dafolo-r-sm);
  padding:14px 18px;
  margin:0 0 24px;
  box-shadow:none;
}
/* Everything about that heading except its margin comes from the tokens above.
   The margin has to be a rule because section styles reach their headings by
   descendant selector (.nl h2, .derfor h2) and the banner is an <h2> sitting
   inside those sections, so it was picking up their bottom margin. Four
   classes, so this does not depend on stylesheet order either. */
.gform_wrapper.gform-theme .gform_validation_errors h2{
  margin:0;
}

/* The errored control. A 1px inset ring on top of the border reads as a
   2px border without changing the box, so nothing shifts when it appears. */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error textarea,
.gform_wrapper.gform-theme .gfield_error select{
  border-color:var(--dafolo-danger);
  box-shadow:inset 0 0 0 1px var(--dafolo-danger);
}

/* The message under the field. The gap above it is the framework's own
   margin-block-start, driven by --gf-desc-space above, so nothing here may set
   padding or a margin shorthand: either would close that gap back up. */
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message{
  background:transparent;
  border:none;
  padding:0;
  color:var(--dafolo-danger);
  font-size:.84rem;
  line-height:1.4;
}

/* Confirmation message after a successful submit. */
.gform_confirmation_message{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.1rem;
  color:var(--dafolo-purple);
}

/* --- Inline newsletter layout ---

   The design puts name, email and button on one row. Gravity Forms renders the
   fields and the footer as siblings, so the <form> itself becomes the grid:
   fields take the free space and the footer sits beside them. */

.nl .gform_wrapper.gform-theme form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.nl .gform_wrapper.gform-theme .gform-body{min-width:0}

.nl .gform_wrapper.gform-theme .gform_fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  row-gap:12px;
}
.nl .gform_wrapper.gform-theme{--gf-form-gap-y:12px !important;--gf-form-gap-x:12px !important}
.nl .gform_wrapper.gform-theme .gfield{grid-column:auto !important}

.nl .gform_wrapper.gform-theme .gform-footer{margin:0;padding:0}
.nl .gform_wrapper.gform-theme .gform_button{white-space:nowrap}

/* The newsletter sits on the tinted panel, where the inputs read better flush. */
.nl .gform_wrapper.gform-theme input{width:100%}

@media(max-width:1180px){
  .nl .gform_wrapper.gform-theme form{grid-template-columns:1fr}
  .nl .gform_wrapper.gform-theme .gform_fields{grid-template-columns:1fr}
  .nl .gform_wrapper.gform-theme .gform_button{width:100%;justify-content:center}
}

/* ---- components/news-archive.css ---- */
/* News archive: a filter bar over a grid of news cards.

   The card itself is .ncard from news-card.css, shared with the rail. Only the
   things the grid needs differently live here. */

.nyh-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px 32px;
  flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vh,28px);
}

.nyh-filters{display:flex;flex-wrap:wrap;gap:10px}

.nyh-pill{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.88rem;
  line-height:1;
  padding:13px 20px;
  border-radius:var(--dafolo-r-pill);
  border:none;
  background:var(--dafolo-paper-2);
  color:var(--dafolo-ink);
  text-decoration:none;
  white-space:nowrap;
  transition:background .22s,color .22s;
}
.nyh-pill:hover{background:var(--dafolo-tint);color:var(--dafolo-purple)}
.nyh-pill.on{background:var(--dafolo-purple);color:#fff}
.nyh-pill:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--dafolo-purple),0 0 0 3px var(--dafolo-tint);
}

/* The select is the narrow-screen replacement for the pills, so it is hidden
   until the pills go. Its submit button is the no-JS path: with the script
   running the select submits on change, so the button is only clutter. */
.nyh-selwrap{display:none}
.js .nyh-selbtn{display:none}

.nyh-sellbl{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  margin-bottom:10px;
}
.nyh-select{
  width:100%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c1053' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px;
  border:1px solid var(--dafolo-line);
  border-radius:var(--dafolo-r-sm);
  padding:16px 48px 16px 18px;
  font-family:inherit;
  font-size:1rem;
  color:var(--dafolo-ink);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:box-shadow .2s,border-color .2s;
}
.nyh-select:focus{
  outline:none;
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--dafolo-purple);
}

.nyh-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,4vh,52px) clamp(20px,2.2vw,32px);
}
.nyh-cell{min-width:0}
.nyh-cell[hidden]{display:none}

/* The rail lays cards out in a row with a fixed width; in the grid the track
   decides the width and the card fills the cell's height. */
.nyh-grid .ncard{flex:none;min-width:0;display:flex;flex-direction:column}
.nyh-grid .ncard .thumb{margin-bottom:20px}
.nyh-grid .ncard h3{font-size:clamp(1.18rem,1.3vw,1.34rem);line-height:1.3;transition:color .25s}

/* Stagger the reveal across a row rather than down the list. */
.nyh-grid .nyh-cell:nth-child(3n+2){transition-delay:.08s}
.nyh-grid .nyh-cell:nth-child(3n+3){transition-delay:.16s}

.nyh-ex{color:var(--dafolo-ink-soft);font-size:.95rem;line-height:1.55;margin-top:10px}

/* Cards appended by the load-more script, which never meets the reveal
   observer and so animates itself in. */
.nyh-cell.pop .ncard{animation:nyhin .55s cubic-bezier(.16,1,.3,1) backwards}
@keyframes nyhin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.nyh-empty{
  color:var(--dafolo-ink-soft);
  font-size:1.05rem;
  padding:clamp(40px,6vh,72px) 0;
  text-align:center;
  border-top:1px solid var(--dafolo-line);
  border-bottom:1px solid var(--dafolo-line);
}

.nyh-more{display:flex;justify-content:center;margin-top:clamp(44px,6vh,72px)}
.nyh-more[hidden]{display:none}
.nyh-more a[aria-busy="true"]{opacity:.6;pointer-events:none}

@media(max-width:1024px){
  .nyh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .nyh-bar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:28px}
  .nyh-filters{display:none}
  .nyh-selwrap{display:block}
  .nyh-grid{grid-template-columns:1fr;gap:34px}
  .nyh-grid .ncard .thumb{margin-bottom:16px}
}

/* While a filter is loading the old grid stays in place and dims, so the page
   does not collapse to nothing and bounce back. The section is replaced only
   once the response has arrived. */
.nyh[aria-busy="true"] .nyh-grid,
.nyh[aria-busy="true"] .nyh-empty{opacity:.4}
.nyh[aria-busy="true"] .nyh-filters{pointer-events:none}
.nyh-grid,.nyh-empty{transition:opacity .18s ease}

/* Block stylesheets go here, one @import per block. */
/* ---- blocks/area-cards.css ---- */
/* Area cards: image card grid. */

/* .areas is shared with feature-cards. No background in the design, so the
   fallback is transparent and the page colour shows through. */
.areas{background:var(--dafolo-section-bg,transparent)}

.agrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px,2vw,28px);
}
.agrid--3{grid-template-columns:repeat(3,1fr)}

.abox{
  display:flex;
  flex-direction:column;
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-xl);
  overflow:hidden;
  transition:transform .3s;
}
.abox:hover{transform:translateY(-4px)}

.abox .thumb{aspect-ratio:16/8;overflow:hidden}
.abox .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--dafolo-ease);
}
.abox:hover .thumb img{transform:scale(1.04)}

.abox .bx{
  padding:clamp(28px,2.2vw,38px);
  display:flex;
  flex-direction:column;
  flex:1;
}
.abox h3{
  font-size:var(--dafolo-fs-h3);
  margin-bottom:12px;
  transition:color .25s;
}
.abox:hover h3{color:var(--dafolo-purple)}

/* flex:1 pushes the link to the bottom so cards of differing text length
   still line their links up. */
.abox p{color:var(--dafolo-ink-soft);margin-bottom:20px;flex:1}
.abox .alink{margin-top:auto}

@media(max-width:900px){
  .agrid--3{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .agrid,
  .agrid--3{grid-template-columns:1fr}
}

/* ---- blocks/contact-form.css ---- */
/* Contact section: heading and facts on the left, the form card on the right. */

.kt-form{background:var(--dafolo-section-bg,var(--dafolo-paper-2))}

.kt-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  grid-template-rows:auto 1fr;
  gap:0 clamp(40px,5.5vw,104px);
  align-items:start;
}
.kt-head{grid-column:1;grid-row:1}
.kt-head h2{margin-bottom:16px;max-width:14ch}
.kt-head .lead{max-width:38ch}

/* The card spans both rows so the facts can sit at the bottom of column one. */
.kt-card{
  grid-column:2;
  grid-row:1/3;
  background:#fff;
  border-radius:var(--dafolo-r-xl);
  padding:clamp(26px,3vw,46px);
  scroll-margin-top:106px;
}

.kt-facts{
  grid-column:1;
  grid-row:2;
  list-style:none;
  margin-top:38px;
  align-self:end;
}
.kt-fact{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--dafolo-line);
}
.kt-fact:last-child{border-bottom:1px solid var(--dafolo-line)}
.kt-fic{
  flex:none;
  width:52px;
  height:52px;
  border-radius:15px;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--dafolo-purple);
}
.kt-fic svg{width:22px;height:22px;stroke-width:1.7}
.kt-fact b{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dafolo-ink-soft);
  margin-bottom:3px;
}
.kt-fact a,
.kt-fact strong{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.08rem;
  line-height:1.3;
  color:var(--dafolo-ink);
}
.kt-fact a{color:var(--dafolo-purple);transition:color .2s}
.kt-fact a:hover{color:var(--dafolo-purple-600)}
.kt-fact small{display:block;color:var(--dafolo-ink-soft);font-size:.86rem;margin-top:3px}

/* Confirmation panel, styled to the design's .kt-done. */
.kt-card .gform_confirmation_wrapper,
.kt-done-msg{
  text-align:center;
  max-width:42ch;
  margin-inline:auto;
}
.kt-done-ic{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--dafolo-tint);
  color:var(--dafolo-purple);
  display:grid;
  place-items:center;
  margin:0 auto 22px;
}
.kt-done-ic svg{width:28px;height:28px}
.kt-done-msg h3{font-size:1.5rem;margin-bottom:12px}
.kt-done-msg p{color:var(--dafolo-ink-soft);line-height:1.55;margin-bottom:0}

@media(max-width:1000px){
  .kt-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:32px}
  .kt-head,
  .kt-card,
  .kt-facts{grid-column:1}
  .kt-head{grid-row:1}
  .kt-card{grid-row:2}
  .kt-facts{grid-row:3;margin-top:0}
  .kt-head h2,
  .kt-head .lead{max-width:none}
}

/* ---- blocks/cta.css ---- */
/* CTA band. Two variants: centred copy, or copy beside a contact card. */

.cta{
  background:var(--dafolo-purple);
  color:#fff;
  position:relative;
  overflow:hidden;
  text-align:center;
}

/* Decorative watermark, uploaded in the Customizer. Absent when unset. */
.cta .mk{
  position:absolute;
  color:#fff;
  opacity:.05;
  width:560px;
  height:560px;
  right:-120px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.cta .mk img,
.cta .mk svg{width:100%;height:100%;object-fit:contain;fill:currentColor}

.cta>.wrap{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:20px}
.cta p{
  color:var(--dafolo-on-dark-soft);
  font-size:var(--dafolo-fs-cta-lead);
  max-width:46ch;
  margin:0 auto 36px;
}

.cta-actions{
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.cta-phone{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:1.1rem;
  transition:color .25s,transform .25s;
}
.cta-phone svg{width:20px;height:20px;color:var(--dafolo-mint);flex:none}
.cta-phone:hover{color:var(--dafolo-gold);transform:translateY(-2px)}

/* --- Centred variant --- */

.cta-in{position:relative;z-index:1;max-width:840px;margin-inline:auto}

/* --- Contact-card variant --- */

.cta-grid{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;
  gap:clamp(44px,5.5vw,104px);
  align-items:center;
  text-align:left;
}
.cta-copy{max-width:520px}
.cta-copy h2{color:#fff;margin-bottom:20px}
.cta-copy p{color:var(--dafolo-on-dark-soft);font-size:var(--dafolo-fs-cta-lead);margin:0 0 34px}
.cta-copy .cta-actions{justify-content:flex-start}

.spec{
  background:#fff;
  border-radius:22px;
  padding:16px;
  width:384px;
  max-width:100%;
  display:flex;
  flex-direction:column;
}
.spec-photo{
  border-radius:var(--dafolo-r-md);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--dafolo-tint);
  margin-bottom:14px;
}
/* Faces sit high in a portrait crop, so the frame favours the top. */
.spec-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

.spec-body{padding:0 4px 4px}
.spec-role{color:var(--dafolo-ink-soft);font-size:.88rem;display:block}
.spec-name{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  color:var(--dafolo-ink);
  font-size:1.2rem;
  display:block;
  margin:1px 0 8px;
}
.spec-body a{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.98rem;
  padding:2px 0;
  transition:color .18s;
}
.spec-body a svg{width:16px;height:16px;color:var(--dafolo-purple-600);flex:none}
.spec-row{display:flex;flex-direction:column;gap:2px}
.spec-body a.spec-tel{color:var(--dafolo-ink-soft)}
.spec-body a.spec-tel:hover{color:var(--dafolo-ink)}
.spec-body a.spec-mail{color:var(--dafolo-purple)}
.spec-body a.spec-mail:hover{color:var(--dafolo-purple-600)}

/* Initials fallback when a team member has no photo. */
.spec-photo--initials{
  display:grid;
  place-items:center;
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:2.4rem;
  color:var(--dafolo-purple-600);
}

@media(max-width:900px){
  .cta-grid{grid-template-columns:1fr;gap:34px;text-align:center;justify-items:center}
  .cta-copy{max-width:none}
  .cta-copy .cta-actions{justify-content:center}
  .spec{width:100%;max-width:392px;margin-inline:auto;text-align:left}
}

@media(max-width:1180px){
  .cta h2,.cta-copy h2{margin-bottom:18px}
}

/* ---- blocks/faq.css ---- */
/* FAQ: heading on the left, a list of <details> on the right. */

.faq{background:var(--dafolo-section-bg,var(--dafolo-paper))}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.faq-head h2{margin:0 0 16px;max-width:14ch}
.faq-head .lead{max-width:36ch}

.faq-list{display:grid;gap:12px}
.faq-list details{
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-lg);
  overflow:hidden;
}

.faq-list summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.08rem;
  line-height:1.35;
  color:var(--dafolo-ink);
  transition:color .2s;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--dafolo-purple)}
.faq-list summary svg{
  width:22px;
  height:22px;
  flex:none;
  color:var(--dafolo-purple);
  transition:transform .28s var(--dafolo-ease);
}
/* The plus icon becomes a cross when the panel is open. */
.faq-list details[open] summary svg{transform:rotate(45deg)}

.faq-list .faq-a{overflow:hidden;transition:height .32s var(--dafolo-ease)}
.faq-a-in{padding:0 26px 24px;color:var(--dafolo-ink-soft);line-height:1.65}
.faq-a-in a{color:var(--dafolo-purple);font-weight:600}
.faq-a-in a:hover{color:var(--dafolo-purple-600)}

@media(max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:24px}
  .faq-head h2,
  .faq-head .lead{max-width:none}
}
@media(max-width:640px){
  .faq-list summary{padding:18px 20px;font-size:1rem}
  .faq-a-in{padding:0 20px 20px}
}

/* ---- blocks/feature-cards.css ---- */
/* Feature cards: an icon, a heading and a short text. Used both as a scrolling
   rail and as a static grid; the same card class serves both, because flex
   properties are ignored on a grid item. */

.scard{
  flex:0 0 clamp(278px,29vw,384px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-xl);
  padding:clamp(30px,2.4vw,40px);
  transition:transform .3s;
}
.scard:hover{transform:translateY(-4px)}

.scard .sic{
  width:58px;
  height:58px;
  border-radius:16px;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--dafolo-purple);
  margin-bottom:26px;
  flex:none;
}
.scard .sic svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.scard h3{font-size:1.28rem;margin-bottom:12px;transition:color .25s}
.scard:hover h3{color:var(--dafolo-purple)}
.scard p{color:var(--dafolo-ink-soft);font-size:.98rem;margin-bottom:22px;flex:1}
.scard .alink{margin-top:auto;font-size:.95rem}

/* .info is a card with no link: nothing to click, so nothing should react. */
.scard.info{cursor:default}
.scard.info:hover{transform:none}
.scard.info:hover h3{color:var(--dafolo-ink)}
.scard.info p{flex:none;margin-bottom:0}

/* Static grid layout. */
.sgrid{display:grid;gap:clamp(18px,2vw,28px)}
.sgrid--2{grid-template-columns:repeat(2,1fr)}
.sgrid--3{grid-template-columns:repeat(3,1fr)}
.sgrid--4{grid-template-columns:repeat(4,1fr)}

/* Both drop to two at 1000px, which is where the design puts the four-up
   grid's first break. 1180 was this theme's own guess and collapsed the row a
   step early. */
@media(max-width:1000px){
  .sgrid--3,
  .sgrid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .scard{flex:0 0 80vw}
  .sgrid--2,
  .sgrid--3,
  .sgrid--4{grid-template-columns:1fr}
}

/* ---- blocks/intro.css ---- */
/* Intro: an icon and heading on the left, body copy on the right. */

.wp-block-dafolo-intro{background:var(--dafolo-section-bg,transparent)}

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.intro-grid h2{margin:0;max-width:18ch}

.intro-ic{display:block;color:var(--dafolo-purple);margin-bottom:18px}
.intro-ic svg{width:46px;height:46px;display:block}

.intro-grid p{
  color:var(--dafolo-ink-soft);
  font-size:var(--dafolo-fs-lead);
  line-height:1.6;
}
/* 14px, as the design sets it. Fixed rather than em: the body copy is the
   lead size, so 1.1em came out at 19px and the paragraphs sat too loose. */
.intro-body>*+*{margin-top:14px}
/* Prose lists from the inner blocks. The pill list is also a ul inside
   .intro-body, and a descendant selector would out-specify .intro-pts and
   re-indent it, so it is excluded explicitly. */
.intro-body ul:not(.intro-pts),
.intro-body ol:not(.intro-pts){
  color:var(--dafolo-ink-soft);
  padding-left:1.3em;
}
.intro-body ul:not(.intro-pts) li+li,
.intro-body ol:not(.intro-pts) li+li{margin-top:.5em}

/* Pill list of short benefit statements under the body copy. */
.intro-pts{
  list-style:none;
  padding:0;
  margin:26px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.intro-pts li{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  background:var(--dafolo-tint);
  color:var(--dafolo-purple);
  border-radius:var(--dafolo-r-pill);
  padding:10px 18px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.88rem;
}
.intro-pts svg{width:15px;height:15px;flex:none}

@media(max-width:820px){
  .intro-grid{grid-template-columns:1fr;gap:18px}
  .intro-grid h2{max-width:none}
}

/* ---- blocks/newsletter.css ---- */
/* Newsletter: the split-feature shell with a signup form in the panel. */

.nl .panel{background:var(--dafolo-tint)}
.nl h2{margin-bottom:16px}
.nl-lead{color:var(--dafolo-ink-soft);font-size:1.08rem;margin-bottom:28px}
.nl .panel-in>*:last-child{margin-bottom:0}

.nl-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:center;
}
.nl-form input{
  width:100%;
  background:#fff;
  border:1px solid var(--dafolo-line);
  border-radius:var(--dafolo-r-sm);
  padding:16px 18px;
  font-family:inherit;
  font-size:1rem;
  color:var(--dafolo-ink);
  transition:box-shadow .2s,border-color .2s;
}
.nl-form input::placeholder{color:var(--dafolo-ink-soft)}
.nl-form input:focus{
  outline:none;
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--dafolo-purple);
}
.nl-form .btn{white-space:nowrap}

.nl-consent{font-size:.8rem;color:var(--dafolo-ink-soft);line-height:1.5;margin-top:18px}
.nl-consent a{color:var(--dafolo-purple);text-decoration:underline;text-underline-offset:2px}

@media(max-width:1180px){
  .nl-form{grid-template-columns:1fr}
  .nl-form .btn{justify-content:center;width:100%}
  .nl h2{margin-bottom:18px}
}

/* ---- blocks/job-list.css ---- */
/* Job list: one row per open position.

   Each row is a single link, so the cells are spans inside the anchor rather
   than a table. The headings above are decorative for that reason, and every
   row repeats its own labels for assistive tech in .kar-lbl. */

.kar-jobs{background:var(--dafolo-section-bg,var(--dafolo-paper-2))}

.kar-cols,
.kar-job{
  display:grid;
  grid-template-columns:minmax(280px,3fr) minmax(0,.9fr) minmax(0,.6fr) minmax(0,1fr) 48px;
  gap:24px;
  align-items:center;
}

.kar-cols{
  padding:0 31px 14px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dafolo-ink-soft);
}

.kar-list{display:grid;gap:10px}

.kar-job{
  background:var(--dafolo-paper);
  border:1px solid transparent;
  border-radius:var(--dafolo-r-lg);
  padding:24px 30px;
  color:var(--dafolo-ink);
  text-decoration:none;
  transition:border-color .2s;
}
.kar-job:hover{border-color:rgba(60,16,83,.35)}
.kar-job:focus-visible{outline:2px solid var(--dafolo-purple);outline-offset:3px}

.kar-job h3{font-size:1.18rem;line-height:1.25;transition:color .2s}
.kar-job:hover h3{color:var(--dafolo-purple)}

/* display:contents so the two cells become grid items of the row itself,
   lining up under their headings. It is re-set to flex below 1180px, where
   the row stacks and they share one line. */
.kar-meta{display:contents}

.kar-cell{font-size:.95rem;color:var(--dafolo-ink-soft);line-height:1.4}
.kar-dl{white-space:nowrap}

/* The visible column heading already says "Ansøgningsfrist", so the per-row
   label is for screen readers only — until the headings go at 1180px. */
.kar-lbl{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.kar-arr{
  width:48px;
  height:48px;
  border-radius:var(--dafolo-r-pill);
  background:var(--dafolo-tint);
  color:var(--dafolo-purple);
  display:grid;
  place-items:center;
  transition:background .2s,color .2s;
}
.kar-arr svg{width:20px;height:20px}
.kar-job:hover .kar-arr{background:var(--dafolo-purple);color:#fff}

.kar-open h3{color:var(--dafolo-purple)}
.kar-open p{
  grid-column:2/5;
  font-size:.95rem;
  color:var(--dafolo-purple-600);
  line-height:1.5;
  max-width:60ch;
}

.kar-empty{
  color:var(--dafolo-ink-soft);
  font-size:1.05rem;
  margin-bottom:20px;
}

@media(max-width:1180px){
  .kar-cols{display:none}

  .kar-job{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"t a" "m a" "d a";
    gap:6px 18px;
    padding:22px;
  }
  .kar-job h3{grid-area:t;font-size:1.1rem}

  .kar-meta{display:flex;flex-wrap:wrap;gap:2px 0;grid-area:m}
  .kar-meta .kar-cell{white-space:nowrap}
  .kar-meta .kar-cell+.kar-cell::before{content:"·";margin:0 8px;opacity:.6}

  .kar-dl{grid-area:d;font-size:.88rem;white-space:normal}

  /* With the headings gone the row has to say what the date is. */
  .kar-lbl{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip-path:none;
    white-space:normal;
  }

  .kar-arr{grid-area:a;width:44px;height:44px}
  .kar-open p{grid-area:m;grid-column:auto}
}

/* ---- blocks/locations.css ---- */
/* Locations: address cards beside an embedded map. */

.kt-loc{
  background:var(--dafolo-section-bg,transparent);
  border-top:1px solid var(--dafolo-line);
  scroll-margin-top:82px;
}
.kt-head-row{margin-bottom:clamp(32px,4.5vh,54px)}
.kt-head-row h2{margin-bottom:16px}
.kt-head-row .lead{max-width:58ch}

.kt-loc-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(20px,2.4vw,36px);
  align-items:stretch;
}
.kt-addr{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.6vw,24px);
  align-content:start;
  min-width:0;
}

.kt-acard{
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-xl);
  padding:clamp(24px,2vw,32px);
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:transform .3s;
}
.kt-acard:hover{transform:translateY(-4px)}
.kt-aic{
  width:52px;
  height:52px;
  border-radius:15px;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--dafolo-purple);
  margin-bottom:20px;
  flex:none;
}
.kt-aic svg{width:22px;height:22px;stroke-width:1.7}
.kt-acard h3{
  font-size:1.22rem;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.kt-acard p{color:var(--dafolo-ink-soft);font-size:.96rem;line-height:1.5;margin-bottom:18px;flex:1}
.kt-acard .alink{font-size:.95rem;margin-top:auto}
.kt-acard .alink .ext{width:13px;height:13px}

.kt-map{
  position:relative;
  border-radius:var(--dafolo-r-xl);
  overflow:hidden;
  background:var(--dafolo-tint);
  min-height:440px;
  min-width:0;
}
/* Shown behind the iframe, so the panel is never an empty box while the embed
   loads or if it is blocked. */
.kt-map-bg{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--dafolo-purple);
  opacity:.55;
  text-align:center;
  padding:24px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.9rem;
}
.kt-map-bg svg{width:40px;height:40px}
.kt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}

@media(max-width:1000px){
  .kt-loc-grid{grid-template-columns:1fr}
  .kt-map{min-height:0;aspect-ratio:16/10}
}
@media(max-width:640px){
  .kt-addr{grid-template-columns:1fr}
  .kt-map{aspect-ratio:4/3}
}

/* ---- blocks/news-rail.css ---- */
/* News rail. The card itself lives in components/news-card.css, shared with
   the archive; the rail mechanics live in components/rail.css. */

.news .news-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(32px,4vh,50px);
  flex-wrap:wrap;
}

/* The rail reads the shared section background; .art-rail is kept as the
   design's own name for the tinted treatment on article pages. */
.news{background:var(--dafolo-section-bg,transparent)}
.news.art-rail{--dafolo-section-bg:var(--dafolo-paper-2)}
.news.art-rail .rnav button{background:#fff}
.news.art-rail .rnav button:hover{background:var(--dafolo-purple);color:#fff}
.news.art-rail .rnav button:disabled:hover{background:#fff;color:var(--dafolo-purple)}

@media(max-width:640px){
  .news .news-head{margin-bottom:24px}
}

/* ---- blocks/reasons.css ---- */
/* Reasons: an intro with a call to action beside a numbered list. */

.forum{background:var(--dafolo-section-bg,var(--dafolo-paper-2))}

.forum-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.forum-intro h2{margin-bottom:20px}
.forum-intro p{color:var(--dafolo-ink-soft);margin-bottom:30px;max-width:42ch}

.freason{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 0;
  border-top:1px solid var(--dafolo-line);
}
.freason:first-child{border-top:none;padding-top:0}

.freason .fic{flex:none;width:34px;height:34px;color:var(--dafolo-purple)}
.freason .fic svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.freason p{flex:1;color:var(--dafolo-ink);font-size:1.05rem;line-height:1.4}
.freason .n{
  flex:none;
  font-family:var(--dafolo-font-head);
  font-weight:800;
  color:var(--dafolo-purple);
  opacity:.4;
  font-size:1.05rem;
}

@media(max-width:900px){
  .forum-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:1180px){
  .forum-intro p{font-size:1.08rem}
  .forum-intro h2{margin-bottom:18px}
}

/* ---- blocks/split-feature.css ---- */
/* Split feature: full-bleed media beside a text panel.

   This block deliberately has no .section class. It spans the viewport and
   supplies its own padding, because the panel's outer padding is the page
   gutter: the text lines up with the page grid while the media runs to the
   screen edge. */

.derfor{display:grid;grid-template-columns:1fr 1fr}

.derfor .media{
  position:relative;
  min-height:clamp(380px,54vh,600px);
  overflow:hidden;
}
/* No image chosen yet. A tint reads as a pending placeholder rather than a
   broken white gap, and costs nothing once an image is in place. */
.derfor .media:empty{background:var(--dafolo-tint)}

.derfor .media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.derfor .panel{
  background:var(--dafolo-paper-2);
  color:var(--dafolo-ink);
  /* Outer side uses the page gutter so the copy aligns with the page grid. */
  padding:clamp(46px,5.5vw,88px) var(--dafolo-gutter) clamp(46px,5.5vw,88px) clamp(38px,4.5vw,80px);
  display:flex;
  align-items:center;
}
.derfor .panel-in{max-width:none;width:100%}

/* min-width:0 stops a long word in either column from blowing out the grid. */
.derfor .media,
.derfor .panel{min-width:0}

.derfor h2{margin-bottom:34px}

/* Media on the right. Both cells are placed in row 1 so the order swaps
   visually without changing the DOM order, which keeps the heading first for
   screen readers and on mobile. */
.derfor.flip .media{grid-column:2;grid-row:1}
.derfor.flip .panel{
  grid-column:1;
  grid-row:1;
  padding-left:var(--dafolo-gutter);
  padding-right:clamp(38px,4.5vw,80px);
}

.feat h2{margin-bottom:24px}
.feat p{color:var(--dafolo-ink-soft);margin-bottom:26px}
.feat p:last-child{margin-bottom:0}
.feat ul,.feat ol{color:var(--dafolo-ink-soft);padding-left:1.3em;margin-bottom:26px}
.feat li+li{margin-top:.5em}

@media(max-width:1180px){
  .feat h2{hyphens:auto;hyphenate-limit-chars:12 6 4}
  .feat p{font-size:1.08rem}
  .derfor h2,.feat h2{margin-bottom:18px}
}

@media(max-width:900px){
  /* Single column: the panel is below the media in both variants, so the
     flipped placement has to be unwound. */
  .derfor{grid-template-columns:1fr}
  .derfor .media,
  .derfor.flip .media{grid-column:1;grid-row:auto;min-height:clamp(300px,44vh,460px)}
  .derfor .panel,
  .derfor.flip .panel{
    grid-column:1;
    grid-row:auto;
    padding:clamp(38px,7vw,56px) var(--dafolo-pad) var(--dafolo-pad-y);
  }
}

/* --- Contained variant (a video in the media slot) ---

   The full-bleed layout is built for a photograph: it can be cropped to any
   shape, and running it to the screen edge is the point. A video has a fixed
   aspect ratio and is something to click, so it sits inside the page grid with
   a boundary, and the panel loses the sand background that only existed to
   carry the bleed. */

.derfor.feat--contained{
  max-width:var(--dafolo-maxw);
  margin-inline:auto;
  padding:var(--dafolo-pad-y) var(--dafolo-pad);
  gap:clamp(30px,4.5vw,72px);
  align-items:center;
}

.feat--contained .media{
  min-height:0;
  border-radius:var(--dafolo-r-xl);
  overflow:hidden;
}

.feat--contained .panel{
  background:transparent;
  padding:0;
}

/* Back to the video's own ratio: there is no column height to fill any more. */
.feat--contained .media--video .vid-frame,
.feat--contained .media--video .vid-embed{
  min-height:0;
  aspect-ratio:16/9;
  border-radius:var(--dafolo-r-xl);
}

/* ---- blocks/support-hub.css ---- */
/* Support hub: a tab bar over one panel per area.

   The bar only appears once the script is running. Without JS every panel is
   shown, each under its own heading, which is a better fallback than a row of
   buttons that cannot switch anything. */

.ks-hub{scroll-margin-top:80px;background:var(--dafolo-section-bg,transparent)}

.ks-top{margin-bottom:clamp(40px,5vh,64px);display:none}
.js .ks-top{display:block}

.ks-eyebrow{
  display:block;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dafolo-purple-600);
  margin-bottom:18px;
}

.ks-tabs{display:flex;flex-wrap:wrap;gap:12px}

.ks-tab{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.05rem;
  line-height:1;
  padding:0 30px;
  height:62px;
  border-radius:var(--dafolo-r-pill);
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  background:var(--dafolo-tint);
  color:var(--dafolo-purple);
  white-space:nowrap;
  transition:background .25s,color .25s;
}
.ks-tab svg{width:20px;height:20px;flex:none}
.ks-tab:hover{background:color-mix(in srgb,var(--dafolo-tint),var(--dafolo-purple) 8%)}
.ks-tab[aria-selected="true"]{background:var(--dafolo-purple);color:#fff}
.ks-tab:focus-visible{outline:2px solid var(--dafolo-purple);outline-offset:3px}

.ks-panel{animation:ksin .55s cubic-bezier(.2,.7,.2,1)}
.ks-panel[hidden]{display:none}
.ks-panel:focus{outline:none}

/* Without JS the panels stack, so they need separating from each other. */
.ks-panel + .ks-panel{margin-top:clamp(48px,6vh,72px)}
.js .ks-panel + .ks-panel{margin-top:0}

@keyframes ksin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.ks-phead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px 40px;
  flex-wrap:wrap;
  margin-bottom:clamp(30px,4vh,44px);
}
.ks-phead-copy{max-width:680px}
.ks-phead-copy h2{margin-bottom:16px}

.ks-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}

.ks-card{
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-xl);
  padding:clamp(28px,2.4vw,40px);
  display:flex;
  flex-direction:column;
  min-width:0;
  color:inherit;
  text-decoration:none;
  transition:transform .3s;
}
/* The element selector is doing real work: a card only lifts when it is an
   anchor. The opening-hours card is a div with nowhere to go, so hovering it
   must not suggest otherwise. */
a.ks-card:hover{transform:translateY(-4px)}
.ks-card .alink{margin-top:auto;padding-top:28px;align-self:flex-start;font-size:.95rem}
a.ks-card:hover .alink{color:var(--dafolo-purple-600)}
a.ks-card:hover .alink svg{transform:translateX(4px)}

.ks-ic{
  width:58px;
  height:58px;
  border-radius:16px;
  background:var(--dafolo-paper);
  display:grid;
  place-items:center;
  color:var(--dafolo-purple);
  margin-bottom:26px;
  flex:none;
}
.ks-ic svg{width:26px;height:26px}

.ks-card h3{
  font-size:1rem;
  font-weight:700;
  color:var(--dafolo-ink-soft);
  letter-spacing:.01em;
  margin-bottom:8px;
}

.ks-val{
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:clamp(1.4rem,1.8vw,1.8rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--dafolo-purple);
  display:inline-block;
  align-self:flex-start;
  margin-bottom:14px;
  /* Long email addresses must break rather than widen the grid track. */
  overflow-wrap:anywhere;
  transition:color .25s;
}
a.ks-card:hover .ks-val{color:var(--dafolo-purple-600)}

.ks-card p{color:var(--dafolo-ink-soft);font-size:.95rem;line-height:1.55}

.ks-hours{list-style:none;margin:2px 0 16px;padding:0}
.ks-hours li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:8px 0;
  border-top:1px solid var(--dafolo-line);
  font-size:.98rem;
  color:var(--dafolo-ink);
}
.ks-hours li:first-child{border-top:none;padding-top:0}
.ks-hours b{
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:1.25rem;
  color:var(--dafolo-purple);
  letter-spacing:-.01em;
  flex:none;
}

.ks-cols{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(30px,5vw,80px);
  margin-top:clamp(48px,6vh,72px);
  align-items:start;
}
.ks-h3{font-size:clamp(1.3rem,1.6vw,1.55rem);margin-bottom:18px}

.ks-links{list-style:none;margin:0;padding:0}
.ks-links li{border-top:1px solid var(--dafolo-line)}
.ks-links li:last-child{border-bottom:1px solid var(--dafolo-line)}
.ks-links a{display:flex;flex-direction:column;gap:3px;padding:18px 0;text-decoration:none}
.ks-lt{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.05rem;
  color:var(--dafolo-ink);
  display:inline-flex;
  align-items:center;
  gap:.4em;
  transition:color .2s;
}
.ks-lt .ext{width:13px;height:13px;flex:none;color:var(--dafolo-purple);opacity:.8}
.ks-ld{color:var(--dafolo-ink-soft);font-size:.95rem;line-height:1.5}
.ks-links a:hover .ks-lt{color:var(--dafolo-purple)}

/* The section straight after the hub continues it, so it opens with a rule
   inside the gutter rather than the usual run of section padding. Matched by
   adjacency rather than a class: 'the one right after the hub' is exactly what
   the design means, and it needs nothing added to the block. */
.ks-hub + .wp-block-dafolo-area-cards{padding-top:0}
.ks-hub + .wp-block-dafolo-area-cards>.wrap{
  position:relative;
  padding-top:var(--dafolo-pad-y);
}
.ks-hub + .wp-block-dafolo-area-cards>.wrap::before{
  content:"";
  position:absolute;
  left:var(--dafolo-pad);
  right:var(--dafolo-pad);
  top:0;
  height:1px;
  background:var(--dafolo-line);
}
.ks-hub + .wp-block-dafolo-area-cards .alink .ext{width:13px;height:13px}

@media(max-width:1180px){
  .ks-phead-copy h2{margin-bottom:18px}
}
@media(max-width:1000px){
  .ks-cards{grid-template-columns:1fr 1fr}
  .ks-card:last-child{grid-column:1/-1}
  .ks-card:last-child .ks-hours{max-width:440px}
}
@media(max-width:900px){
  .ks-cols{grid-template-columns:1fr;gap:40px}
}
@media(max-width:640px){
  .ks-top{margin-bottom:34px}
  .ks-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ks-tab{
    height:auto;
    min-height:54px;
    padding:12px;
    font-size:.92rem;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.15;
  }
  .ks-tab svg{display:none}
  .ks-phead{margin-bottom:24px}
  .ks-cards{grid-template-columns:1fr;gap:14px}
  .ks-card{padding:24px}
  .ks-card .alink{padding-top:22px}
  .ks-ic{margin-bottom:20px}
  .ks-cols{margin-top:40px;gap:34px}
  .ks-links a{padding:15px 0}
}
@media(prefers-reduced-motion:reduce){
  .ks-panel{animation:none}
}

/* ---- blocks/staff-directory.css ---- */
/* Staff directory: filters above a grid of employee cards.
   Filtering is client-side, so every card is in the DOM and the section works
   without JavaScript (the filters simply do nothing). */

.kt-team{background:var(--dafolo-section-bg,var(--dafolo-paper))}
.kt-team .head{max-width:820px}
.kt-team .head h2{margin-bottom:16px}
.kt-team .head-row{margin-bottom:clamp(28px,3.5vh,40px)}

.kt-filters{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  margin-bottom:clamp(28px,3.5vh,40px);
}
.kt-filters input,
.kt-filters select{
  width:100%;
  background:#fff;
  border:1px solid var(--dafolo-line);
  border-radius:var(--dafolo-r-sm);
  padding:16px 18px;
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
  color:var(--dafolo-ink);
  appearance:none;
  -webkit-appearance:none;
  transition:box-shadow .2s,border-color .2s;
}
.kt-filters input:focus,
.kt-filters select:focus{
  outline:none;
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--dafolo-purple);
}
.kt-filters select{padding-right:50px;cursor:pointer}
.kt-filters select:disabled{color:var(--dafolo-ink-soft);background-color:#fbfaf9;cursor:not-allowed}

.kt-search{position:relative;display:block}
.kt-search input{padding-left:50px}
.kt-search input::placeholder{color:var(--dafolo-ink-soft)}
.kt-search svg{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:19px;
  height:19px;
  color:var(--dafolo-purple);
  pointer-events:none;
}

.kt-sel{position:relative;display:block}
.kt-sel svg{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--dafolo-purple);
  pointer-events:none;
}

/* The submit button only matters without JavaScript. */
.js .kt-apply{display:none}

.kt-staff{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}

.kt-emp{
  background:var(--dafolo-paper-2);
  border-radius:var(--dafolo-r-lg);
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
/* [hidden] loses to the author display rule above, so it is restated. */
.kt-emp[hidden]{display:none}

.kt-ava{
  position:relative;
  width:128px;
  height:128px;
  border-radius:var(--dafolo-r-pill);
  overflow:hidden;
  margin-bottom:20px;
  flex:none;
}
.kt-ava img{display:block;width:100%;height:100%;object-fit:cover}
.kt-ava span{display:none}
/* No photo: a purple disc with the person's initials. */
.kt-ava.noimg{background:var(--dafolo-purple)}
.kt-ava.noimg span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:1.7rem;
  letter-spacing:.04em;
}

.kt-emp h3{font-size:1.1rem;line-height:1.3;margin:0 0 4px}
.kt-role{color:var(--dafolo-ink);font-size:.92rem;line-height:1.4;margin:0}
.kt-dept{color:var(--dafolo-ink-soft);font-size:.84rem;line-height:1.4;margin:3px 0 0}

.kt-links{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:16px}
.kt-links a{
  display:flex;
  align-items:center;
  gap:.5em;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.9rem;
  color:var(--dafolo-purple);
  transition:color .18s;
  min-width:0;
}
/* Long addresses must wrap rather than widen the card. */
.kt-links a span{min-width:0;overflow-wrap:anywhere}
.kt-links a svg{width:15px;height:15px;flex:none}
.kt-links a:hover{color:var(--dafolo-purple-600)}

.kt-empty{color:var(--dafolo-ink-soft);padding:12px 0}
.kt-empty[hidden]{display:none}

@media(max-width:1180px){.kt-staff{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .kt-staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-filters{grid-template-columns:1fr 1fr}
  .kt-search{grid-column:1/-1}
  .kt-ava{width:104px;height:104px}
}
@media(max-width:520px){
  .kt-staff{grid-template-columns:1fr}
  .kt-filters{grid-template-columns:1fr}
}

/* ---- blocks/stats.css ---- */
/* Statistics band: heading beside a row of large numbers, on purple. */

.stats{
  background:var(--dafolo-purple);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.stats .mk{
  position:absolute;
  color:#fff;
  opacity:.05;
  width:560px;
  height:560px;
  right:-120px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.stats .mk img,
.stats .mk svg{width:100%;height:100%;object-fit:contain;fill:currentColor}

.stats-in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.stats h2{color:#fff;max-width:13ch}

.stats-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}

.num{
  font-family:var(--dafolo-font-head);
  font-weight:800;
  font-size:var(--dafolo-fs-stat);
  line-height:.86;
  letter-spacing:-.035em;
  color:#fff;
}
/* The counted part is mint; the suffix stays white. */
.num b{color:var(--dafolo-mint)}
.num i{font-style:normal;font-size:.42em;font-weight:700}

.num+.lbl{
  margin-top:16px;
  color:var(--dafolo-on-dark-soft);
  font-size:1rem;
  line-height:1.4;
  max-width:22ch;
}

@media(max-width:1180px){
  .stats-in{grid-template-columns:1fr;gap:24px}
}
@media(max-width:640px){
  .stats-nums{grid-template-columns:1fr;gap:28px}
}

/* ---- blocks/testimonials.css ---- */
/* Testimonial slider, with an optional logo marquee below it. */

/* The section background is a custom property so the marquee edge fades can be
   built from it. Hardcoding the fade colour, as the comp does, means changing
   the background leaves a coloured smear over the logos. */
.testi{
  --dafolo-testi-bg:var(--dafolo-tint);
  background:var(--dafolo-testi-bg);
  text-align:center;
  position:relative;
  overflow:hidden;
  padding-block:clamp(96px,13vh,166px);
}

/* Background variants. */
.testi--paper{--dafolo-testi-bg:var(--dafolo-paper)}
.testi--paper-2{--dafolo-testi-bg:var(--dafolo-paper-2)}
.testi--purple{--dafolo-testi-bg:var(--dafolo-purple)}

/* The original used :has(.logos-band). A modifier class is set by render.php
   instead, so the editor preview and the front end agree without relying on
   the logo band being present in the same DOM shape. */
.testi--logos{padding-block:clamp(70px,9vh,112px)}
.testi--logos .testi-wrap{min-height:clamp(226px,24vh,290px)}
.testi--logos .tdots{margin-top:32px}

/* Slides are stacked in one grid cell and cross-faded, so the section does not
   change height between quotes of different lengths. */
.testi-wrap{
  position:relative;
  z-index:1;
  max-width:1000px;
  margin-inline:auto;
  display:grid;
  min-height:clamp(288px,33vh,392px);
  align-content:center;
}

.tslide{
  grid-area:1/1;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease,transform .7s var(--dafolo-ease);
  display:flex;
  flex-direction:column;
  justify-content:center;
  pointer-events:none;
}
.tslide.on{opacity:1;transform:none;pointer-events:auto}

.tslide blockquote{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:var(--dafolo-fs-quote);
  line-height:1.34;
  letter-spacing:-.015em;
  color:var(--dafolo-ink);
  margin-bottom:34px;
}
.tslide .who b{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1.05rem;
  display:block;
}
.tslide .who span{color:var(--dafolo-ink-soft);font-size:.95rem}

.tdots{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:44px;
  position:relative;
  z-index:1;
}
.tdots button{
  width:9px;
  height:9px;
  border-radius:var(--dafolo-r-pill);
  border:none;
  background:rgba(60,16,83,.22);
  cursor:pointer;
  transition:.25s;
  padding:0;
}
.tdots button.on{background:var(--dafolo-purple);width:28px}

/* --- Logo marquee --- */

.logos-band{margin-top:clamp(44px,5.5vh,70px);text-align:center}

.logos-lbl{
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dafolo-ink-soft);
  margin-bottom:30px;
}

.logos-marquee{position:relative;overflow:hidden;max-width:1080px;margin-inline:auto}
.logos-marquee::before,
.logos-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(40px,7vw,110px);
  z-index:2;
  pointer-events:none;
}
.logos-marquee::before{left:0;background:linear-gradient(90deg,var(--dafolo-testi-bg) 16%,transparent)}
.logos-marquee::after{right:0;background:linear-gradient(270deg,var(--dafolo-testi-bg) 16%,transparent)}

/* The track holds an even number of copies of the logo set, so translating by
   exactly half lands copy n+1 where copy n started and the loop is seamless. */
.logos-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:dafolo-logoscroll 40s linear infinite;
}
.logos-track img{
  height:clamp(34px,3.6vw,50px);
  width:auto;
  max-width:210px;
  margin-right:clamp(40px,4.6vw,74px);
  object-fit:contain;
  filter:brightness(0);
  opacity:.44;
  flex:none;
}

@keyframes dafolo-logoscroll{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  /* Without motion the duplicate copies are just repetition. */
  .logos-track .logos-dup{display:none}
}

@media(max-width:1180px){
  .testi,
  .testi--logos{padding-block:var(--dafolo-pad-y)}
}

/* Dark background variant: the quote, attribution and dots all invert. */
.testi--purple{color:#fff}
.testi--purple .tslide blockquote{color:#fff}
.testi--purple .tslide .who b{color:#fff}
.testi--purple .tslide .who span{color:var(--dafolo-on-dark-soft)}
.testi--purple .logos-lbl{color:var(--dafolo-on-dark-soft)}
.testi--purple .tdots button{background:rgba(255,255,255,.3)}
.testi--purple .tdots button.on{background:#fff}
/* Logos are darkened to a flat silhouette, which disappears on purple. */
.testi--purple .logos-track img{filter:brightness(0) invert(1);opacity:.6}

/* ---- blocks/video.css ---- */
/* Video: a poster and a play button until the visitor asks for the video.

   The frame and the embed share one aspect ratio so swapping the button for the
   iframe does not move anything below it on the page. */

.vid{background:var(--dafolo-section-bg,transparent)}

.vid-fig{margin:0}

.vid-frame,
.vid-embed{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:none;
  border-radius:var(--dafolo-r-xl);
  overflow:hidden;
}

/* Flex column, not a centred grid: with grid the play button and the label
   each get their own row and drift apart on a 16/9 panel. */
.vid-frame{
  position:relative;
  padding:0;
  cursor:pointer;
  background:var(--dafolo-purple-deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.vid-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* A scrim so the play button and label stay readable on any poster.

   Two layers, not one that changes on hover: a linear-gradient is a
   background-image, and background images cannot be interpolated, so
   transitioning between two of them snaps instead of fading. The darker scrim
   is its own layer and its opacity is what animates.

   The z-indexes are explicit because these are all positioned boxes with
   z-index auto, which paint in tree order: ::before is generated first and
   would otherwise sit behind the poster. */
.vid-frame::before,
.vid-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.vid-frame::after{
  z-index:1;
  background:linear-gradient(180deg,rgba(28,8,42,.15) 0%,rgba(28,8,42,.5) 100%);
}
.vid-frame::before{
  z-index:2;
  background:linear-gradient(180deg,rgba(28,8,42,.25) 0%,rgba(28,8,42,.6) 100%);
  opacity:0;
  transition:opacity .25s;
}
.vid-frame--plain::before,
.vid-frame--plain::after{background:none}

.vid-poster{z-index:0}

.vid-play,
.vid-label{position:relative;z-index:3}

.vid-play{
  width:clamp(64px,7vw,88px);
  height:clamp(64px,7vw,88px);
  border-radius:var(--dafolo-r-pill);
  background:var(--dafolo-gold);
  color:var(--dafolo-purple);
  display:grid;
  place-items:center;
  transition:transform .25s,background .25s;
}
.vid-play svg{
  width:40%;
  height:40%;
  /* The glyph's visual centre sits left of its box, so nudge it back. */
  margin-left:6%;
}

.vid-label{
  margin-top:18px;
  font-family:var(--dafolo-font-head);
  font-weight:700;
  font-size:1rem;
  color:#fff;
  letter-spacing:.01em;
}
.vid-frame--plain .vid-label{color:var(--dafolo-on-dark)}

.vid-frame:hover .vid-play{transform:scale(1.06)}
.vid-frame:hover::before,
.vid-frame:focus-visible::before{opacity:1}
.vid-frame:focus-visible{outline:3px solid var(--dafolo-purple);outline-offset:4px}

.vid-fig figcaption{
  margin:16px auto 0;
  max-width:720px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--dafolo-ink-soft);
  padding-left:16px;
  border-left:2px solid var(--dafolo-gold);
}

@media(prefers-reduced-motion:reduce){
  .vid-play{transition:none}
  .vid-frame::before{transition:none}
  .vid-frame:hover .vid-play{transform:none}
}

/* --- Video in a split feature ---

   The media column is a full-bleed half of the section, so the facade fills it
   rather than sitting in it as a rounded card. The aspect ratio comes off, or
   16/9 would leave the column half empty beside a tall text panel. */

.media--video{display:grid}
.media--video .vid-frame,
.media--video .vid-embed{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
  min-height:clamp(260px,42vh,520px);
}

@media(max-width:900px){
  .media--video .vid-frame,
  .media--video .vid-embed{min-height:0;aspect-ratio:16/9}
}

/* Responsive overrides come last so they win on equal specificity. */
/* ---- base/responsive.css ---- */
/* Responsive overrides for the base layer and the chrome.
   Block-specific breakpoints live with their own stylesheet. */

@media(max-width:1320px){
  .nav .bar{gap:22px}
  .mainnav{gap:18px}
  .mainnav>a,
  .has-mega>button,
  .has-drop>button{font-size:.92rem}
  .nav-right .icon-btn.search{display:none}
}

@media(max-width:1180px){
  /* The utility bar and desktop nav collapse into the drawer. */
  .util{display:none}
  .mainnav{display:none}
  .burger{display:inline-flex}
  .has-drop.help{display:none}

  :root{--dafolo-pad-y:clamp(44px,6vh,56px)}

  .foot-top{grid-template-columns:1fr 1fr;gap:34px}

  /* Not enough viewport left for the sticky-reveal effect to read well. */
  footer{position:relative;bottom:auto}

  .hero-actions,
  .nav-right{gap:12px}

  .jb-grid{grid-template-columns:1fr;gap:44px}
  .jb-side{position:static}
  .jb-read{max-width:none}

  .mm-link,.mm-parent{font-size:1.08rem}
  .mm-area{font-size:1.22rem}
}

@media(max-width:1024px){
  .nyh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-height:680px){
  footer{position:relative;bottom:auto}
}

@media(max-width:640px){
  .area-tag{display:none}
  .foot-top{grid-template-columns:1fr}
  .rnav{display:none}

  .btn{padding:13px 26px;font-size:.94rem}
  .hero-inner .btn{padding:14px 30px;font-size:.98rem}
  .hero.sub h1{font-size:clamp(1.7rem,3vw,2.65rem);max-width:34ch;line-height:1.16}

  .nyh-grid{grid-template-columns:1fr}
  .news-foot{margin-top:14px}

  .art-fig img,
  .art-body figure img{border-radius:var(--dafolo-r-lg)}

  .jb-card{padding:24px 22px}

  .searchform{flex-direction:column;align-items:stretch}
  .searchform .btn{justify-content:center}
}