/* ============================================================
   BRF VANADISLUNDEN — SHARED STYLES
   Follows Hemsida/styleguide.html (monochrome, all-black).
   Used by index.html (Dokument) and kontakt.html (Kontakt).
   ============================================================ */
:root{
  --black:#000000; --ink-900:#0A0A0A; --ink-800:#141414; --ink-700:#1C1C1E;
  --ink-600:#2C2C2E; --ink-500:#3A3A3C;
  --grey-400:#636366; --grey-300:#86868B; --grey-200:#AEAEB2; --grey-100:#C7C7CC;
  --white:#FFFFFF;
  --blue:#2B5BFF; --blue-strong:#1E47E0;   /* interaction accent */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --radius:18px; --maxw:1080px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--black); scroll-padding-top:80px;}
body{
  font-family:var(--font); background:var(--black); color:var(--grey-100);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5; letter-spacing:-0.01em;
}
::selection{background:var(--white); color:var(--black);}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.divider{height:1px; background:var(--ink-500); border:0; margin:0;}
a{color:inherit; text-decoration:none;}

/* ---------- FIXED NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(0,0,0,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--ink-600);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 32px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{font-size:16px; font-weight:600; color:var(--white); letter-spacing:-0.02em; display:inline-flex; align-items:center;}
.nav-brand-home{display:none;}
.nav-left{display:flex; align-items:center; gap:16px;}
/* Language switch — segmented SV/EN toggle, works on both themes */
.nav-lang{display:inline-flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--ink-500); border-radius:980px;}
.lang-opt{font-size:12px; font-weight:600; letter-spacing:0.03em; color:var(--grey-300);
  padding:4px 10px; border-radius:980px; line-height:1; text-decoration:none;
  transition:color .15s ease, background .15s ease;}
.lang-opt.is-on{background:#E4ECFF; color:var(--blue-strong);}   /* current language — very light blue chip */
a.lang-opt:hover{color:var(--white);}
.nav-links{display:flex; align-items:center; gap:var(--s4);}

/* Page links — grey by default, white only when it is the current page */
.nav-link{font-size:15px; font-weight:400; color:var(--grey-200); transition:color .15s ease; padding:11px 0;}
.nav-link:hover{color:var(--white);}
.nav-link.active{color:var(--white); font-weight:500;}
.nav-link:hover{color:var(--blue);}

/* Felanmälan CTA — filled blue so it stands out on both themes. */
.nav-cta{
  font-size:14px; font-weight:500; padding:9px 20px; border-radius:980px;
  background:var(--blue); color:#fff; border:1px solid var(--blue);
  transition:background .15s ease;
}
.nav-cta:hover{background:var(--blue-strong);}
.nav-cta.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.nav-cta.active:hover{background:var(--blue-strong);}

/* Right cluster (page links + CTA + hamburger) */
.nav-right{display:flex; align-items:center; gap:var(--s4);}
.nav-toggle-input{position:absolute; width:1px; height:1px; opacity:0;}
.nav-toggle{display:none; align-items:center; justify-content:center; width:40px; height:40px;
  margin-right:-8px; color:var(--white); background:none; border:0; border-radius:10px; cursor:pointer;}
.nav-toggle svg{display:block;}
.nav-toggle-input:focus-visible ~ .nav-toggle{outline:2px solid var(--blue); outline-offset:2px;}
.nav-close{display:none;}          /* close button — only inside the mobile overlay */
.nav-lang-menu{display:none;}      /* in-menu language toggle — mobile only */

/* Full-screen menu overlay (Apple-style) on tablet/mobile */
@media (max-width:760px){
  .nav-toggle{display:inline-flex; width:44px; height:44px; margin-right:-4px;
    border:1px solid var(--ink-500); border-radius:12px; background:var(--ink-700);}
  .nav-toggle svg{width:24px; height:24px; stroke-width:2.2;}
  .nav-left .nav-lang{display:none;}                       /* toggle moves into the menu */
  html:has(.nav-toggle-input:checked){overflow:hidden;}    /* lock scroll while open */
  .nav-links{
    position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:200;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:clamp(6px,1.5vw,14px);
    background:var(--black);
    padding:clamp(84px,20vw,120px) clamp(26px,7vw,44px) clamp(32px,9vw,48px);
    display:flex;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .3s ease, transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s linear .42s;
  }
  .nav:has(.nav-toggle-input:checked) .nav-links{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .3s ease, transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  .nav-links .nav-link{
    font-size:clamp(40px,12vw,64px); font-weight:600; letter-spacing:-0.03em;
    line-height:1.06; color:var(--white); padding:4px 0; border:0;
  }
  .nav-links .nav-link.active{color:var(--blue);}
  /* Staggered reveal of the menu items */
  .nav-links .nav-link, .nav-lang-menu, .nav-close{
    opacity:0; transform:translateY(16px);
    transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .nav:has(.nav-toggle-input:checked) .nav-links .nav-link,
  .nav:has(.nav-toggle-input:checked) .nav-lang-menu,
  .nav:has(.nav-toggle-input:checked) .nav-close{opacity:1; transform:none;}
  .nav:has(.nav-toggle-input:checked) .nav-links .nav-link:nth-of-type(1){transition-delay:.09s;}
  .nav:has(.nav-toggle-input:checked) .nav-links .nav-link:nth-of-type(2){transition-delay:.15s;}
  .nav:has(.nav-toggle-input:checked) .nav-links .nav-link:nth-of-type(3){transition-delay:.21s;}
  .nav:has(.nav-toggle-input:checked) .nav-lang-menu{transition-delay:.28s;}
  .nav-close{display:flex; position:absolute; top:12px; right:14px;
    width:44px; height:44px; align-items:center; justify-content:center;
    color:var(--white); cursor:pointer;}
  .nav-lang-menu{display:inline-flex; margin-top:auto; gap:4px; padding:4px;}
  .nav-lang-menu .lang-opt{font-size:22px; padding:12px 26px; letter-spacing:0.02em;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .nav-links, .nav-links .nav-link, .nav-lang-menu, .nav-close{
    transition-duration:.001s !important; transition-delay:0s !important; transform:none !important;
  }
}
@media (max-width:560px){
  .nav-inner{padding:0 14px; height:54px;}
  .nav-brand{font-size:15px;}
  .nav-left{gap:10px;}
  .nav-cta{font-size:13px; padding:8px 14px;}
  .c-hero .wrap{padding:0 24px;}
  .c-hero h1{font-size:clamp(34px,11.5vw,56px); letter-spacing:-0.03em;}
}

/* ---------- HERO (home) ---------- */
.hero{padding:var(--s8) 0 var(--s7);}
.kicker{
  font-size:13px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--grey-300); margin-bottom:var(--s4);
}
.hero h1{
  font-size:clamp(60px, 10vw, 124px);
  line-height:0.92; font-weight:700; letter-spacing:-0.04em;
  color:var(--white); margin-bottom:var(--s4);
}
.hero .lede{
  font-size:22px; line-height:1.45; color:var(--grey-200);
  max-width:680px; font-weight:400;
}
.meta{margin-top:var(--s5); display:flex; gap:var(--s5); flex-wrap:wrap;}
.meta-item{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--grey-300);}
.meta-item svg{flex:0 0 auto; color:var(--grey-400);}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{padding:calc(var(--s8) + 16px) 0 var(--s6);}
.page-hero h1{
  font-size:clamp(48px, 8vw, 96px);
  line-height:0.95; font-weight:700; letter-spacing:-0.035em;
  color:var(--white); margin-bottom:var(--s3);
}
.page-hero .lede{font-size:20px; line-height:1.45; color:var(--grey-200); max-width:640px;}

/* ---------- SECTIONS ---------- */
/* Generous vertical rhythm between sections (increased per request). */
section{padding:clamp(96px, 13vw, 168px) 0;}
.sec-head{margin-bottom:var(--s5); max-width:680px;}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--grey-300); margin-bottom:var(--s2);
}
.sec-head h2{
  font-size:clamp(40px, 6vw, 64px);
  line-height:1.0; font-weight:700; letter-spacing:-0.03em;
  color:var(--white); margin-bottom:var(--s2);
}
.sec-head p{font-size:17px; color:var(--grey-300);}

/* ---------- ENTRY CARDS (home landing) ---------- */
.entry{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
a.doc{text-decoration:none;}
.doc .arrow{margin-top:auto; font-size:15px; font-weight:500; color:var(--white); display:inline-flex; align-items:center; gap:8px;}

/* ---------- HERO ACTIONS / TRIO (Felanmälan page) ---------- */
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s4);}
.hero-note{margin-top:18px; font-size:15px; color:var(--grey-300);}
.hero-note a{color:var(--grey-100); border-bottom:1px solid var(--ink-500);}
.hero-note a:hover{color:var(--blue);}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); align-items:stretch;}
.trio .panel{height:100%;}
.trio .panel + .panel{margin-top:0;}
.call{font-size:32px; font-weight:600; letter-spacing:-0.02em; color:var(--white); border:0; display:inline-block; font-variant-numeric:tabular-nums; margin-bottom:4px;}
.call:hover{color:var(--white); opacity:0.7;}

/* ---------- DOCUMENT CARDS ---------- */
.docs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); align-items:stretch;}
.docs .panel{height:100%;}
.docs .panel + .panel{margin-top:0;}  /* neutralise stacked-panel margin inside the grid */
.docs .panel h4{font-size:19px; letter-spacing:-0.015em; gap:12px; margin-bottom:14px;}
.docs .panel h4 svg{width:20px; height:20px;}
.doc{
  background:var(--ink-900); border:1px solid var(--ink-600); border-radius:22px;
  padding:30px 30px 26px; display:flex; flex-direction:column;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.doc:hover{border-color:var(--grey-300); transform:translateY(-4px); background:var(--ink-800);}
.doc .ic{
  width:48px; height:48px; border-radius:12px; background:var(--ink-700);
  border:1px solid var(--ink-600); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.doc .tag{display:none;}
.doc h3{font-size:36px; font-weight:600; letter-spacing:-0.02em; color:var(--white); margin-bottom:13px;}
.doc .desc{font-size:15px; color:var(--grey-300); line-height:1.55; flex:1 0 auto; margin-bottom:24px;}
.actions{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-0.01em;
  padding:11px 22px; border-radius:980px; transition:opacity .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
}
.btn-lg{font-size:16px; padding:15px 30px;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-strong);}
.btn-secondary{background:transparent; color:var(--white); border-color:var(--ink-500);}
.btn-secondary:hover{background:var(--ink-700); border-color:var(--grey-400);}

.doc.featured{grid-column:1 / -1; flex-direction:row; align-items:center; gap:28px;}
.doc.featured .ic{margin-bottom:0;}
.doc.featured .body{flex:1;}
.doc.featured .desc{margin-bottom:0;}
.doc.featured .actions{flex:0 0 auto;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6);}
.col-title{
  font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-400); margin-bottom:var(--s4);
}
.board{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4);}
.person .name{font-size:30px; font-weight:600; letter-spacing:-0.02em; color:var(--white); line-height:1.05;}
.person .role{font-size:15px; color:var(--grey-400); margin:6px 0 8px;}
.person a{font-size:14px; color:var(--grey-200); border-bottom:1px solid var(--ink-500); transition:color .15s ease, border-color .15s ease;}
.person a:hover{color:var(--blue); border-color:var(--blue);}
.panel{background:var(--ink-900); border:1px solid var(--ink-600); border-radius:20px; padding:28px; transition:border-color .3s ease;}
.trio .panel:hover{border-color:var(--grey-300);}
.panel + .panel{margin-top:var(--s3);}
.panel h4{font-size:16px; font-weight:600; color:var(--white); margin-bottom:16px; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;}
.panel h4 svg{color:var(--grey-300); flex:0 0 auto;}
.panel .line{font-size:14px; color:var(--grey-300); line-height:1.5; margin-bottom:12px;}
.panel .line:last-child{margin-bottom:0;}
.panel .line strong{display:block; color:var(--white); font-weight:600; margin-bottom:2px;}
.panel .line a{color:var(--grey-100); border-bottom:1px solid var(--ink-500);}
.panel .line a.call{border-bottom:0;}
.panel .line a:hover{color:var(--blue);}
.panel .big{font-size:26px; font-weight:600; letter-spacing:-0.02em; color:var(--white); border:0; font-variant-numeric:tabular-nums;}
.panel .big:hover{color:var(--white);}

/* Numbered process steps — top-aligned badge, title on its own line.
   Badge uses --white (near-black on light theme) with --black numeral. */
.panel.step{padding:32px 30px;}
.step-num{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--black);
  font-size:17px; font-weight:600; line-height:1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums; margin-bottom:22px;
}
.step .step-title{
  display:block; gap:0;
  font-size:21px; font-weight:600; color:var(--white);
  letter-spacing:-0.02em; line-height:1.22; margin-bottom:12px;
}

/* Boxless summary note (plain text, no card) */
.summary-note{margin-top:var(--s4); font-size:14px; color:var(--grey-300); line-height:1.6; max-width:760px;}
.summary-note a{color:var(--grey-100); border-bottom:1px solid var(--ink-500);}
.summary-note a:hover{color:var(--blue);}

/* ---------- FOOTER ---------- */
footer{padding:var(--s6) 0; border-top:1px solid var(--ink-500);}
footer .wrap{display:flex; justify-content:center; text-align:center; flex-wrap:wrap; gap:var(--s2);}
footer p{font-size:13px; color:var(--grey-400);}
footer p strong{color:var(--grey-100); font-weight:600;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .hero{padding:var(--s7) 0 var(--s6);}
  .hero h1{font-size:clamp(38px, 11vw, 60px);}
  .page-hero{padding:calc(var(--s7) + 8px) 0 var(--s5);}
  .page-hero h1{font-size:clamp(40px, 12vw, 64px);}
  .meta{gap:var(--s3); flex-direction:column;}
  section{padding:clamp(72px, 18vw, 104px) 0;}
  .trio{grid-template-columns:1fr;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .docs{grid-template-columns:1fr;}
  .doc.featured{flex-direction:column; align-items:flex-start;}
  .doc.featured .actions{width:100%;}
  .contact-grid{grid-template-columns:1fr; gap:var(--s5);}
  .board{grid-template-columns:1fr;}
}

/* ============================================================
   LIGHT THEME — start page stays black; sub-pages opt in via
   <body class="theme-light"> (white with grey contrasts).
   The whole UI is built on a black/white inversion, so swapping
   the tokens flips the entire page coherently.
   ============================================================ */
.theme-light{
  --black:#FFFFFF;     /* page background */
  --ink-900:#F5F5F7;   /* raised surfaces: cards, panels */
  --ink-800:#FFFFFF;
  --ink-700:#ECECEF;   /* hover / icon background */
  --ink-600:#D8D8DD;   /* card borders */
  --ink-500:#DEDEE3;   /* dividers / outline borders */
  --grey-400:#8E8E93;  /* tertiary text / captions (lightest) */
  --grey-300:#6E6E73;  /* secondary text */
  --grey-200:#48484A;  /* muted labels / links (darker) */
  --grey-100:#1D1D1F;  /* body text (darkest) */
  --white:#1D1D1F;     /* headings / primary foreground (near-black) */
}
.theme-light .nav{ background:rgba(255,255,255,0.72); }


/* ============================================================
   EDITORIAL COMPONENTS (concept implemented as the live system)
   Hero motif, stat rows, statement band, entry cards, motion.
   ============================================================ */

/* ---------- HERO (start page) ---------- */
.c-hero{position:relative; overflow:hidden; min-height:min(92vh,880px); display:flex; align-items:center; padding:120px 0 88px;}
.c-hero .wrap{position:relative; z-index:2; width:100%;}
/* Full-bleed photo backdrop with a left-weighted scrim for legible text */
.c-hero-media{position:absolute; inset:0; z-index:0; background:#000 center/cover no-repeat;}
.c-hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.32) 100%),
             linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 55%);}
.c-motif{display:none;}
.c-motif.sm{width:min(46vw,560px); top:-18%; right:-10%; opacity:0.7;}
.c-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 70% 12%, rgba(255,255,255,0.06), rgba(255,255,255,0) 70%);}
.theme-light .c-glow{background:radial-gradient(60% 50% at 70% 12%, rgba(0,0,0,0.04), rgba(0,0,0,0) 70%);}
.c-eyebrow{font-size:13px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--grey-300); margin-bottom:var(--s4);}
.c-hero h1{font-size:clamp(64px,11vw,150px); line-height:0.9; font-weight:700; letter-spacing:-0.045em; color:var(--white); margin:0;}
.c-hero .c-lede{font-size:clamp(20px,2.4vw,26px); line-height:1.4; color:var(--grey-100); max-width:620px; margin-top:var(--s4); font-weight:400;}
.c-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--s5);}

/* Stat row */
.c-stats{display:flex; gap:0; margin-top:var(--s6); flex-wrap:wrap; border-top:1px solid var(--ink-600); padding-top:var(--s4); max-width:680px;}
.c-stat{padding-right:var(--s5); margin-right:var(--s5); border-right:1px solid var(--ink-600);}
.c-stat:last-child{border-right:0; margin-right:0; padding-right:0;}
.c-stat-num{font-size:34px; font-weight:600; letter-spacing:-0.02em; color:var(--white); line-height:1; font-variant-numeric:tabular-nums;}
.c-stat-label{font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey-400); margin-top:8px;}

/* ---------- PAGE HERO (sub-pages) ---------- */
.c-pagehero{position:relative; overflow:hidden; padding:calc(var(--s8) + 12px) 0 var(--s6);}
.c-pagehero .wrap{position:relative; z-index:2;}
.c-ph-title{font-size:clamp(52px,9vw,108px); line-height:0.92; font-weight:700; letter-spacing:-0.04em; color:var(--white); margin:0;}
.c-pagehero .c-lede{font-size:clamp(18px,2vw,22px); line-height:1.45; color:var(--grey-200); max-width:600px; margin-top:var(--s3);}

/* ---------- STATEMENT ---------- */
.c-statement{border-top:1px solid var(--ink-600); padding:clamp(80px,11vw,150px) 0;}
.c-statement p{font-size:clamp(30px,4.4vw,58px); line-height:1.12; font-weight:600; letter-spacing:-0.03em; color:var(--white); max-width:18ch;}
.c-statement .muted{color:var(--grey-400);}

/* ---------- SECTION HEAD ---------- */
.c-section{border-top:1px solid var(--ink-600); padding:clamp(72px,10vw,140px) 0;}
.c-section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s3); margin-bottom:var(--s5); flex-wrap:wrap;}
.c-section-head h2{font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.03em; color:var(--white);}
.c-section-head p{font-size:16px; color:var(--grey-300); max-width:340px;}
.c-section-head.is-center{flex-direction:column; align-items:center; text-align:center; gap:var(--s2);}
.c-section-head.is-center p{max-width:none;}
/* Stacked: subtitle sits directly under the heading, left-aligned */
.c-section-head.is-stacked{flex-direction:column; align-items:flex-start; gap:10px;}
.c-section-head.is-stacked p{max-width:560px;}

/* ---------- ELEVATED ENTRY CARDS ---------- */
.c-entry{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.c-card{position:relative; display:flex; flex-direction:column; min-height:300px;
  background:var(--ink-900); border:1px solid var(--ink-600); border-radius:22px; padding:30px;
  text-decoration:none; overflow:hidden;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;}
.c-card:hover{border-color:var(--grey-300); transform:translateY(-4px); background:var(--ink-800);}
.c-index{font-size:14px; font-weight:600; letter-spacing:0.08em; color:var(--grey-400); font-variant-numeric:tabular-nums;}
.c-card h3{font-size:30px; font-weight:600; letter-spacing:-0.02em; color:var(--white); margin-top:0;}
.c-card p{font-size:15px; line-height:1.55; color:var(--grey-300); margin-top:10px;}
.c-card-arrow{margin-top:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--ink-500);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;}
.c-card:hover .c-card-arrow{background:var(--blue); color:#fff; border-color:var(--blue); transform:translateX(4px);}

/* ---------- ENTRANCE MOTION ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(16px); animation:cFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;}
  .reveal.d1{animation-delay:.06s} .reveal.d2{animation-delay:.14s} .reveal.d3{animation-delay:.22s}
  .reveal.d4{animation-delay:.30s} .reveal.d5{animation-delay:.38s}
  @keyframes cFadeUp{to{opacity:1; transform:none;}}
}

@media (max-width:760px){
  .c-motif{opacity:0.5; right:-30%; top:0;}
  .c-entry{grid-template-columns:1fr;}
  .c-card{min-height:auto;}
  .c-stat{padding-right:var(--s4); margin-right:var(--s4);}
  .c-hero h1{font-size:clamp(40px,11vw,72px);}
}