/******************************************************** FONTE: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* LeJeuneDeck Regular */
@font-face {
    font-family: 'LeJeuneDeck';
    src: url('../fonts/LeJeuneDeck-Regular-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Futura Regular */
@font-face {
    font-family: 'Futura';
    src: url('../fonts/futura-pt_book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
/* Grundlæggende reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Baggrundsfarve */
:root { --page-bg: #fcf9f3; }

body, header, footer {
    background-color: var(--page-bg);
}

/* Basis typografi for websitet */
body {
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Overskrifter */
h1, h2, h3, h4, h5, h6 {
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
}

/* Links */
a {
    color: #2b1820;
    text-decoration: none;
}

a:hover {
    color: #2b1820;
    text-decoration: none;
}

/******************************************************** HEADER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Header (fixed) */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
  
  /* Skjul headeren når 'header-hidden' klassen er aktiv */
  header.header-hidden {
    transform: translateY(-100%);
  }
  
  .header-content {
    display: flex;
    align-items: center;
    padding: 25px 0;
  }
  
  .header-logo {
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
    display: flex;
    align-items: baseline;
    position: relative;
    z-index: 1002;
  }
  
  /********************************************************
    DESKTOP/LAPTOP TOP MENU (visible)
  ********************************************************/
  
  /* Skjul desktop-nav som default (mobile/tablet) */
  .header-nav {
    display: none;
  }
  
  .header-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
  }
  
  .header-nav a {
    color: #2b1820;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 0px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.25s ease;
  }
  
  .header-nav a:hover {
    border-bottom-color: transparent;
  }
  
  /* Fra laptop og op: vis menuen oppe til højre */
  @media screen and (min-width: 768px) {
    .header-content {
      justify-content: space-between;
    }
  
    .header-nav {
      display: flex;
      margin-left: auto;
      justify-content: flex-end;
    }
  
    /* Skjul DK/EN knappen på laptop+ */
  }
    /* Streg under menupunkter */
  .header-nav a.active {
    border-bottom-color: transparent;
  }
  
/* Streg under menupunkter 
    */

    .header-nav a.header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        line-height: 1;
        border-radius: 50%;
        border: 1px solid #2b1820;
        background: transparent;
        cursor: pointer;
        color: #2b1820 !important;
        text-decoration: none;
        isolation: isolate;
        z-index: 0;
        transition: transform .15s ease;
    }
    
    .header-nav a.header-cta:hover {
        transform: translateY(0px);
        color: #fcf9f3 !important;
        background-color: #2b1820;
    }
    
/********************************************************
  BURGER + MOBILE MENU OVERLAY (DESKTOP FADE ANIMATION)
********************************************************/

/* 1. LOGO & BURGER FARVE + STØRRELSE */

  /********************************************************
    TABLET + MOBILE tweaks
  ********************************************************/
  
/* FIX: sørg for at header-elementer ikke overlapper på mobile/tablet */
.header-content{
    display: flex;
    align-items: center;
    justify-content: space-between; 
  }
  
  /* Logo skal ikke skrumpe og skal holde sin plads */
  .header-content > a{
    flex: 0 0 auto;
  }
  
  /* Skub knapper/burger helt til højre */
/******************************************************** ERFARING: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.clients-strip{
    padding: 0;
}

/* Dræber margin + padding som .client-item arver fra Erfaring-siden */
.clients-grid .client-item{
    margin: 0;
    padding: 0;
}

.clients-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: clamp(20px, 4vw, 50px) clamp(16px, 4vw, 50px);
    /*                          ↑min  ↑foretrukken  ↑max */
}

.client-item{
    display:flex;
    flex-direction:column;
}

.client-thumb{
    width:100%;
    aspect-ratio: 1 / 1;     /* alle billeder kvadratiske */
    overflow:hidden;
    background:#fcf9f3;       /* mens billedet loader */
    margin-bottom:20px;
}

.client-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Vekslende form: ulige = rund, lige = firkantet */
.client-item:nth-child(odd)  .client-thumb{ border-radius:50%; }
.client-item:nth-child(even) .client-thumb{ border-radius:0;   }

.client-title{
    color:#2b1820;
    font-weight: 400;
    margin:0 0 0px;
    font-family: 'Futura', Arial, sans-serif;
    text-transform: uppercase;
}

.client-sub{
    color: #2b1820;
    font-weight:400;
    margin:0;
}

/* Tablet portræt: 2 i rækken */
@media (max-width: 1024px) and (orientation: portrait){
    .clients-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Mobil: 1 i rækken */
@media (max-width: 767px){
    .clients-grid{
        grid-template-columns: 1fr;
        gap: clamp(28px, 13vw, 60px) 16px;
    }
}

/******************************************************** FOOTER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.footer{
    padding: 0px 0 63px;
    background-color: var(--bg);
    color: inherit;
    text-align: center;
}

.footer > .container{
    display: block;
    padding-top: 0;
    padding-bottom: 0;
}

.footer__store{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__store-link{
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__store-link:hover{
    color: inherit;
    opacity: .65;
}

.footer__nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 46px;
}

.footer__nav-link{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__nav-link:hover{
    color: inherit;
    opacity: .65;
}

/* Det sorte udseende. Holdt adskilt fra --pille, som kun er selve
   udskydningen, så et almindeligt link også kan bytte tekst uden at
   blive en fyldt knap. */
.footer__nav-link--sort{
    padding: 11px 21px;
    border-radius: 999px;
    background-color: var(--fg);
    color: var(--bg);
    transition: opacity .25s ease;
}

.footer__nav-link--sort:hover{
    color: var(--bg);
    opacity: .82;
}

.footer__bund{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    margin: 165px auto 0;
    text-align: left;
}

.footer__signup-label{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    margin-bottom: 20px;
}

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

.footer__form{
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer__felt{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 250px;
    max-width: 100%;
    height: 42px;
    padding: 0 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.footer__send{
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;   /* samme som .footer__felt, så de flugter */
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--fg);
    color: var(--bg);
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.footer__form.har-tekst .footer__send{
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.footer__send:hover{
    opacity: .82;
}

.footer__tak{
    display: none;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.footer__form.er-sendt .footer__ikon,
.footer__form.er-sendt .footer__input{
    display: none;
}

.footer__form.er-sendt .footer__tak{
    display: flex;
}

.footer__form.er-sendt .footer__send{
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
}

.footer__ikon{
    flex: 0 0 auto;
    opacity: .75;
}

.footer__input{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.footer__input::placeholder{
    color: inherit;
}

.footer__social{
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 11px;
}

.footer__social a{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__social a:hover{
    color: inherit;
    opacity: .65;
}

.footer__nav-mobil{
    display: none;
}

/******************************************************** FADE ANIMATION PÅ HELE SIDEN ********************************************************/

/* Fade animation */
   .fade {
    opacity: 0;
    transform: translateY(12px);
    
    transition:
      opacity 420ms cubic-bezier(0.25, 1, 0.5, 1),
      transform 450ms cubic-bezier(0.25, 1, 0.5, 1);
    
    will-change: opacity, transform;
}

.fade.is-in {
    opacity: 1;
    transform: translateY(0);
}

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

/******************************************************** MERGTON COOKIES ********************************************************/

:root{
    --mc-green:   #ffffff;
    --mc-cream:   #2b1820;
    --mc-green-60:#ffffff;
    --mc-green-15:#ffffff;
    --mc-green-08:#ffffff;
    --mc-sand:    #ffffff;
    --mc-ease:    cubic-bezier(0.25, 1, 0.5, 1);
}

.mc-consent,
.mc-consent *{box-sizing:border-box;}

/* Låser siden bag indstillingspanelet. Klassen sættes af
   cookie-consent.js. Samme teknik som menuens lås i menu.css. */
html.mc-laast body{
    position:fixed;
    left:0;
    width:100%;
    overflow:hidden;
    padding-right:var(--mc-scrollbar-gap, 0px);
}

/* Overlay (kun synligt når indstillinger er åbne) */
.mc-overlay{
    position:fixed;
    inset:0;
    z-index:99998;
    background:rgba(10,28,25,0.55);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    transition:opacity 380ms var(--mc-ease),visibility 380ms;
}
.mc-overlay.is-open{opacity:1;visibility:visible;}

/* Selve boksen */
.mc-consent{
    position:fixed;
    z-index:99999;
    left:50px;
    bottom:50px;
    width:600px;
    max-width:calc(100vw - 56px);
    background:var(--mc-cream);
    color:var(--mc-green);
    border-radius: 0px;
    padding:30px 30px 26px;
    font-family:'Futura',Arial,sans-serif;
    opacity:0;transform:translateY(16px);
    transition:opacity 420ms var(--mc-ease),transform 450ms var(--mc-ease);
    will-change:opacity,transform;
    border:none;
    box-shadow:none;
}

@media screen and (min-width: 768px) and (max-width: 1599px){
    /* Selve boksen */
    .mc-consent{
        left:40px;
        bottom:40px;
        width:530px;
        max-width:calc(100vw - 56px);
    }
}

.mc-consent.is-in{opacity:1;transform:translateY(0);}
.mc-consent[hidden]{display:none;}

/* Når indstillinger er åbne: centrér og gør lidt bredere */
.mc-consent.is-settings{
    left:50%;
    bottom:auto;
    top:50%;
    transform:translate(-50%,-50%) scale(0.98);
    width:570px;

    /* 93vh måler den store viewport — skærmen som om browserens bjælker
       var skjult. På iOS bliver boksen derfor højere end det synlige, og
       toppen ryger op bag adresselinjen. svh måler den mindste viewport,
       så boksen altid kan være der. vh-linjen står først som reserve til
       browsere uden svh; de får præcis den opførsel, de havde før. */
    max-height:93vh;
    max-height:min(93vh, calc(100svh - 40px));
    overflow-y:auto;
    overscroll-behavior:contain;
}
.mc-consent.is-settings.is-in{transform:translate(-50%,-50%) scale(1);}

.mc-title{
    color:var(--mc-green);
    font-weight: 400;
    margin:0 0 12px;
}

.mc-title .mc-accent{
    font-family:'Futura',Arial,sans-serif;
    font-weight: 400;
    font-style:normal;
    color:var(--mc-sand);
}

.mc-text{margin:0 0 22px;color:var(--mc-green);}
.mc-text a{color:var(--mc-green);text-decoration:none;border-bottom:1px solid var(--mc-green-60);padding-bottom:1px;}
.mc-text a:hover{border-bottom-color:var(--mc-green);}

/* Knapper */
.mc-actions{
    display:flex;
    justify-content:center;
    gap:13px;
    flex-wrap:wrap;
    width:100%;
}

.mc-btn{
    flex: 0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    font-weight: 400;
    padding:11px 21px;
    border-radius: 999px;
    cursor:pointer;
    border:1px solid var(--mc-green);
    transition:transform .18s var(--mc-ease),background-color .25s ease,color .25s ease,opacity .25s ease;
}
.mc-btn--solid{background:var(--mc-green);color:var(--mc-cream);}
.mc-btn--ghost{background:transparent;color:var(--mc-green);}
.mc-btn--ghost:hover{background:rgba(23,61,54,0.06);}
.mc-btn:focus{outline:none;}


/* "Tilpas" link under hovedknapperne */
.mc-customize{
    display:block;
    width:100%;
    margin-top:16px;
    text-align:center;
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    color:var(--mc-green-60);
    text-decoration:underline;
    text-underline-offset:3px;padding:4px;
}
.mc-customize:hover{color:var(--mc-green);}

/* ---- Indstillingspanel ---- */
.mc-categories{margin:4px 0 24px;}
.mc-cat{
    border-top:1px solid var(--mc-green-08);
    padding:18px 0;
}
.mc-cat:last-child{border-bottom:1px solid var(--mc-green-08);}
.mc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mc-cat-name{
    color:var(--mc-green);
    font-weight: 400;
    text-transform: uppercase;   /* som .client-title */
}

.mc-cat-desc{
    margin: 0;
    line-height:1.55;
    color:var(--mc-green-60);
}
.mc-locked{
    color:var(--mc-sand);
    font-weight: 400;
    white-space:nowrap;
}

/* Toggle-switch */
.mc-switch{position:relative;width:42px;height:24px;flex:0 0 auto;}
.mc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.mc-track{
    position:absolute;inset:0;border-radius:999px;
    background:#2b1820;
    border:1px solid var(--mc-green-15);
    transition:background-color .25s ease;
}
.mc-track::after{
    content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
    border-radius:50%;background:var(--mc-green);
    transition:transform .25s var(--mc-ease);
}
.mc-switch input:checked + .mc-track{background:var(--mc-sand);}
.mc-switch input:checked + .mc-track::after{transform:translateX(18px);background:var(--mc-cream);}
.mc-switch input:disabled + .mc-track{opacity:0.55;cursor:not-allowed;}
.mc-switch input:focus-visible + .mc-track{outline:2px solid var(--mc-green);outline-offset:2px;}

.mc-settings-foot{
    line-height:1.55;
    color:var(--mc-green-60);
    margin:0 0 20px;
}
.mc-settings-foot a{color:var(--mc-green);border-bottom:1px solid var(--mc-green-60);text-decoration:none;}

/* Mobil */
@media (max-width:520px){
    .mc-consent{
        left:14px;
        right:14px;
        bottom:14px;
        width:auto;
        max-width:none;
        padding:26px 22px 22px;
        border-radius: 0px;
    }
    .mc-consent.is-settings{
        left:14px;
        right:14px;
        top:auto;
        bottom:14px;
        transform:translateY(16px);
        width:auto;

        /* Samme grund som i basisreglen. 28px = de 14px luft foroven
           og forneden. */
        max-height:calc(100svh - 28px);
    }
    .mc-consent.is-settings.is-in{
        transform:translateY(0);
    }
    .mc-actions{
        flex-direction:row;
        justify-content:center;
        flex-wrap:wrap; /* så de ikke knækker grimt hvis der ikke er plads */
        align-items:center;
    }
    .mc-btn {
        width:auto;
    }
}

@media (prefers-reduced-motion:reduce){
    .mc-consent,.mc-overlay,.mc-track::after,.mc-btn{transition:none !important;}
    .mc-consent{transform:none !important;}
    .mc-consent.is-settings{transform:translate(-50%,-50%) !important;}
}

/* FIX: NY MOBILE MENU: */
/* Burger-wrapper: skal kunne rumme tekst, så bredde er auto */

/* ========================================================
   TEMA — creme ⇄ mørk (som ydelser/team)
   ======================================================== */

/* ---------- 1. Tokens ---------- */
:root{
    --fg:       #2b1820;   /* tekst — mørk i toppen */
    --bg:       #fcf9f3;   /* baggrund — creme i toppen */
    --thumb-bg: #fcf9f3;   /* pladsholder bag klientbilleder */

    --theme-speed: .6s;
    --theme-ease:  ease;
}

/* Det ENESTE sted temaet skifter */
body.scrolled-bottom{
    --fg:       #ffffff;
    --bg:       #2b1820;
    --thumb-bg: #e6e6e2;
}

/* ---------- 2. Motoren ---------- */
body{
    background-color: var(--bg);
    color:            var(--fg);
    transition: background-color var(--theme-speed) var(--theme-ease),
                color            var(--theme-speed) var(--theme-ease);
}

/* ---------- 3. Slip arven fri ---------- */
h1, h2, h3, h4, h5, h6,
a, a:hover,
.header-logo,
.header-nav a,
.menu-label,
.client-title,
.client-sub,
.footer-tagline,
.footer-details,
.footer-details a,
.footer-details address,
.footer-links a{
    color: inherit;
}

/* Streger følger tekstfarven af sig selv */
footer{ border-top-color: currentColor; }

/* Footer-hover: dæmp i stedet for at skifte farve */
/* .footer-details a:hover, */

/* ---------- 4. Elementer med egen flade ---------- */
footer{
    background-color: var(--bg);
    color: inherit;
    transition: background-color var(--theme-speed) var(--theme-ease);
}

header{
    background-color: var(--bg);
    transition: transform .3s ease-in-out,
                background-color var(--theme-speed) var(--theme-ease);
}

.client-thumb{
    background-color: var(--thumb-bg);
    transition: background-color var(--theme-speed) var(--theme-ease);
}


/* ---------- 5. Knapper ---------- */
.header-nav a.header-cta,
.hero-cta{
    color:            var(--fg) !important;
    background-color: transparent;
    border-color:     currentColor;
    transition: background-color .25s ease,
                color            .25s ease;
}

.header-nav a.header-cta:hover,
.hero-cta:hover{
    color:            var(--bg) !important;
    background-color: var(--fg);
}

/* ========================================================
   REVEAL — billeder glider blødt på plads i viewporten
   Bruger sitets eksisterende .fade-observer: JS'en sætter
   .is-in, resten er ren CSS. Virker på alle breakpoints.
   ======================================================== */

:root{
    --reveal-y:     35px;                          /* hvor langt nedefra billedet starter */
    --reveal-scale: 0.99;                          /* hvor meget det skalerer op */
    --reveal-speed: 1200ms;
    --reveal-ease:  cubic-bezier(.23, 1, .32, 1);  /* easeOutQuint */
}

.client-thumb.fade,
.container-media img.fade,
.partner-thumb.fade,
.arch-container img.fade,
.photo-frame.fade{
    opacity: 1;                                    /* slår .fade's opacity fra */
    transform: translateY(var(--reveal-y)) scale(var(--reveal-scale));
    transition: transform        var(--reveal-speed) var(--reveal-ease),
                background-color var(--theme-speed, .6s) var(--theme-ease, ease);
    will-change: transform;
}

.client-thumb.fade.is-in,
.container-media img.fade.is-in,
.partner-thumb.fade.is-in,
.arch-container img.fade.is-in,
.photo-frame.fade.is-in{
    transform: translateY(0) scale(1);
}

/* Forskudt landing — svarer til Wolff Olins' data-start-y */
.clients-grid .client-item:nth-child(even) .client-thumb.fade{ --reveal-y: 50px; }

@media (prefers-reduced-motion: reduce){
    .client-thumb.fade,
    .container-media img.fade,
    .partner-thumb.fade,
    .arch-container img.fade,
    .photo-frame.fade{
        transform: none !important;
        transition: none !important;
    }
}

/******************************************************** PERSON: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.person-section{
    --person-photo-width:  clamp(200px, 26vw, 340px);
    --person-photo-ratio:  1 / 1;                    /* 4 / 5 for portrætformat */
    --person-photo-radius: 0;                        /* 50% for rundt billede */
    --person-text-width:   620px;

    --person-name-size:    clamp(20px, 1.6vw, 26px);
    --person-role-size:    clamp(16px, 1.2vw, 20px);
    --person-bio-size:     clamp(16px, 1.1vw, 19px);

    --person-space-top:    0px;                      /* ekstra luft over billedet */
    --person-space-photo:  clamp(28px, 4vw, 50px);   /* billede → navn */
    --person-space-text:   clamp(18px, 2.5vw, 30px); /* titel → brødtekst */
    --person-space-bottom: 0px; /* brødtekst → footer */

    padding-top:    var(--person-space-top);
    padding-bottom: var(--person-space-bottom);
}

.person{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ---------- Billedet ---------- */
.person-photo{
    width: var(--person-photo-width);
    max-width: 100%;
    aspect-ratio: var(--person-photo-ratio);
    border-radius: var(--person-photo-radius);
    overflow: hidden;
    margin-bottom: var(--person-space-photo);

    /* følger sitets tema */
    background-color: var(--thumb-bg);
    transition: background-color var(--theme-speed, .6s) var(--theme-ease, ease);
}

.person-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- Navn + titel ---------- */
.person-name{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--person-name-size);
    line-height: 1.2;
    margin: 0 0 6px;
    color: inherit;
}

.person-role{
    font-weight: 400;
    font-size: var(--person-role-size);
    line-height: 1.4;
    margin: 0;
    color: inherit;
}

/* ---------- Brødtekst ---------- */
.person-bio{
    width: var(--person-text-width);
    max-width: 100%;
    margin-top: var(--person-space-text);
    color: inherit;
}

.person-bio p{
    font-size: var(--person-bio-size);
    line-height: 1.6;
    margin: 0 0 1em;
}

.person-bio p:last-child{ margin-bottom: 0; }

/* Billedet bruger sitets reveal (translateY + scale), teksten bruger .fade */
.person-photo.fade{
    opacity: 1;
    transform: translateY(var(--reveal-y, 35px)) scale(var(--reveal-scale, .99));
    transition: transform        var(--reveal-speed, 1200ms) var(--reveal-ease, cubic-bezier(.23,1,.32,1)),
                background-color var(--theme-speed, .6s) var(--theme-ease, ease);
    will-change: transform;
}

.person-photo.fade.is-in{ transform: translateY(0) scale(1); }

/* Lille forskydning så navn/titel/tekst lander efter billedet */
.person-name.fade{ transition-delay: .08s; }
.person-role.fade{ transition-delay: .14s; }
.person-bio.fade { transition-delay: .20s; }

/* Laptop */
@media screen and (min-width: 768px) and (max-width: 1599px){
    .person-section{
        --person-name-size: 23px;
        --person-role-size: 23px;
        --person-bio-size:  19px;
    }
}

/* Tablet portræt */
@media (max-width: 1024px) and (orientation: portrait){
    .person-section{ --person-photo-width: clamp(200px, 40vw, 300px); }
}

/* Mobil */
@media (max-width: 767px){
    .person-section{
        --person-photo-width: clamp(180px, 55vw, 260px);
        --person-text-width:  100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .person-photo.fade{
        transform: none !important;
        transition: none !important;
    }
}


/* ========================================================
   KONTAKT-PILLEN I FOOTEREN
   Lukket står der "Kontakt". Peger man på den — eller trykker
   på den på mobil — skyder den ud i mailens bredde og bytter
   teksten ud med adressen. Klik åbner mailprogrammet.

   De to bredder måles af main.js og lægges i --pille-lukket og
   --pille-aaben, fordi CSS ikke kan animere til width: auto.
   Mailen ligger oven i etiketten, så den ikke er med til at
   bestemme bredden.
   ======================================================== */
.footer__nav-link--pille{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: width .55s cubic-bezier(.16, 1, .3, 1),
                opacity .25s ease;
}

/* Pillen dæmpes ikke længere ved hover — udskuddet er svar nok */
.footer__nav-link--pille:hover{
    opacity: 1;
}

.pille__ord{
    display: block;
    transition: opacity .28s ease;
}

/* Mailen klippes af pillen, indtil den har skudt sig ud */
.pille__ord--mail{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* Først når main.js har målt, låses bredden fast */
.footer__nav-link--pille.er-maalt{
    width: var(--pille-lukket);
}

.footer__nav-link--pille.er-maalt.er-aaben{
    width: var(--pille-aaben);
}

.footer__nav-link--pille.er-aaben .pille__ord--label{
    opacity: 0;
}

.footer__nav-link--pille.er-aaben .pille__ord--mail{
    opacity: 1;
}

@media (prefers-reduced-motion: reduce){
    .footer__nav-link--pille,
    .pille__ord{
        transition: none;
    }
}


/* Tekst der kun findes for skærmlæsere og søgemaskiner. Fylder intet
   visuelt, men er med i tilgængelighedstræet — i modsætning til
   display:none og visibility:hidden, som skjuler den for begge. */
.kun-for-skaermlaesere{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}