/* ==========================================================================
   Byggefirmaet Andersen ApS
   Visuel retning: Handvaerkeren
   Se retningskontrakten i templates/yootheme/index.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skrift. Selvhostet, ingen kald til Google. Variabel vaegt 400-900.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/schibsted-grotesk-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;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/schibsted-grotesk-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;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif/source-serif-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;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif/source-serif-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;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/caveat/caveat-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;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/caveat/caveat-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;
}

/* --------------------------------------------------------------------------
   2. Systemets vaerdier
   -------------------------------------------------------------------------- */

:root {
    --ba-font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ba-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --ba-script: 'Caveat', 'Segoe Script', cursive;

    --ba-ink: #16191b;
    --ba-stone: #656b6e;
    --ba-line: #e2e1de;
    --ba-paper: #ffffff;
    --ba-shade: #f5f4f2;
    --ba-green: #234539;
    --ba-green-deep: #173027;
    --ba-green-tint: #b9cbc8;

    --ba-measure: 68ch;
    --ba-section: clamp(4.5rem, 9vw, 8.5rem);
    --ba-gutter: clamp(1.25rem, 4vw, 3.5rem);

    --ba-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   3. Grundtypografi
   -------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

body,
.uk-navbar-nav > li > a,
.uk-button,
input,
textarea,
select {
    font-family: var(--ba-font);
}

body {
    color: var(--ba-ink);
    background: var(--ba-paper);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
    font-family: var(--ba-serif);
    color: var(--ba-ink);
    font-weight: 600;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Browserens egne flader. De hoerer ogsaa til designet.
   -------------------------------------------------------------------------- */

::selection {
    background: var(--ba-green);
    color: #fff;
}

body {
    caret-color: var(--ba-ink);
    accent-color: var(--ba-green);
    scrollbar-color: var(--ba-stone) var(--ba-band);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--ba-band);
}

::-webkit-scrollbar-thumb {
    background: var(--ba-line);
    border: 3px solid var(--ba-band);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ba-stone);
}

:focus-visible {
    outline: 2px solid var(--ba-green);
    outline-offset: 3px;
    border-radius: 2px;
}

.uk-light :focus-visible,
[class*='ba-invers'] :focus-visible {
    outline-color: #fff;
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   5. Header. Logo til venstre, fem ord og et telefonnummer til hoejre.
   -------------------------------------------------------------------------- */

.tm-header,
.tm-headerbar {
    background: var(--ba-paper);
}

.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: var(--ba-paper);
    box-shadow: none;
    border-bottom: 1px solid var(--ba-line);
}

/* Temaet farver navbaren hvid til en gennemsigtig overlay-header. Den findes
   ikke i denne retning, hvor headeren altid er hvid. Selektorerne herunder er
   bevidst tunge nok til at vinde, ogsaa hvis en sektion saetter uk-light eller
   uk-navbar-transparent, saa menuen aldrig kan blive hvid paa hvidt igen. */
.tm-header .uk-navbar-container .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container .uk-navbar-item,
.tm-header .uk-navbar-container .uk-navbar-toggle,
.tm-header.uk-light .uk-navbar-container .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-container .uk-navbar-item,
.tm-header-mobile .uk-navbar-container .uk-navbar-toggle,
.tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-toggle {
    color: var(--ba-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    min-height: 92px;
}

.tm-header .uk-navbar-container .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-container .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-container .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-container .uk-navbar-nav > li > a[aria-expanded='true'],
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li.uk-active > a {
    color: var(--ba-ink);
}

/* Headeren er hvid i denne retning, ogsaa hvis en sektion beder om overlay */
.tm-header .uk-navbar-container.uk-navbar-transparent {
    background: var(--ba-paper);
}

.tm-header.tm-header-overlay {
    position: static;
}

.tm-header .uk-navbar-nav > li > a {
    padding: 0 14px;
    position: relative;
}

.tm-header .uk-navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 34px;
    height: 2px;
    background: var(--ba-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ba-ease);
}

.tm-header .uk-navbar-nav > li > a:hover::after,
.tm-header .uk-navbar-nav > li.uk-active > a::after {
    transform: scaleX(1);
}

.tm-header .uk-logo,
.tm-header-mobile .uk-logo {
    padding-top: 0;
    padding-bottom: 0;
}

/* Logoet skal kunne laeses. Kilden er kun 133 gange 140 pixels, saa den er
   opskaleret og skarpet til 266 gange 280 og vises paa 120. Den haenger ned
   over fotoet nedenunder, saa headeren ikke bliver hoejere af det. */
.tm-header .uk-navbar-container,
.tm-header .uk-navbar,
.tm-header .uk-navbar-left,
.tm-header .uk-container {
    overflow: visible;
}

.tm-header .uk-logo {
    position: relative;
    z-index: 20;
}

.tm-header .uk-logo img {
    width: auto;
    height: 120px;
    max-height: 120px;
    display: block;
    margin-bottom: -34px;
}

.tm-header-mobile .uk-logo img {
    width: auto;
    height: 56px;
    max-height: 56px;
    display: block;
    margin-bottom: 0;
}

.tm-header-mobile .uk-navbar-container,
.tm-header-mobile .uk-navbar,
.tm-header-mobile .uk-navbar-left {
    overflow: visible;
}

.tm-header-mobile .uk-logo {
    position: relative;
    z-index: 20;
}

/* Telefonnummeret i headeren. Klartekst, ikke knap. */
.tm-header .uk-navbar-container .uk-navbar-item a.ba-header-phone,
.tm-header .uk-navbar-container.uk-light .uk-navbar-item a.ba-header-phone,
.tm-header-mobile .uk-navbar-container .uk-navbar-item a.ba-header-phone,
.tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-item a.ba-header-phone,
.ba-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--ba-line);
    color: var(--ba-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.tm-header .uk-navbar-container .uk-navbar-item a.ba-header-phone:hover,
.tm-header-mobile .uk-navbar-container .uk-navbar-item a.ba-header-phone:hover,
.ba-header-phone:hover {
    color: var(--ba-green);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Sektionsrytme. Mere luft over en overskrift end under.
   -------------------------------------------------------------------------- */

.tm-page .uk-section {
    padding-top: var(--ba-section);
    padding-bottom: var(--ba-section);
}

/* De to handlinger vejer lige meget */
.ba-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 2.25rem;
    margin-top: 2.25rem;
}

.ba-contact a {
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ba-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--ba-green);
    transition: color 0.3s var(--ba-ease), border-color 0.3s var(--ba-ease);
}

.ba-contact a:hover {
    color: var(--ba-green);
    border-color: var(--ba-ink);
    text-decoration: none;
}

/* Ét af de tre fag vendes, saa siden ikke er den samme figur syv gange */
@media (min-width: 960px) {

}

/* --------------------------------------------------------------------------
   11. Kontaktafslutning
   -------------------------------------------------------------------------- */

.ba-close {
    background: var(--ba-green);
    color: #fff;
}

.ba-close h2 {
    color: #fff;
    font-size: clamp(2.125rem, 4vw, 2.875rem);
    line-height: 1.06;
    max-width: 16ch;
    margin: 0;
}

.ba-close p,
.ba-close address {
    color: var(--ba-green-tint);
    font-style: normal;
    margin: 0;
}

.ba-close .ba-contact a {
    color: #fff;
    border-bottom-color: var(--ba-green-tint);
}

.ba-close .ba-contact a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.ba-close .ba-contact-who {
    color: var(--ba-green-tint);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.tm-page footer .uk-section {
    background: var(--ba-paper);
    border-top: 1px solid var(--ba-line);
    padding-top: clamp(2.25rem, 3.2vw, 3.5rem);
    padding-bottom: clamp(2rem, 2.8vw, 3rem);
}

.ba-foot .ba-foot-sig h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ba-ink);
    margin: 0 0 1rem;
}

.ba-foot h2,
.ba-foot h3,
.ba-foot .uk-h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ba-stone);
    margin: 0 0 1rem;
}

.ba-foot ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ba-foot li {
    margin-bottom: 0.55rem;
}

.ba-foot a {
    color: var(--ba-ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.ba-foot a:hover {
    color: var(--ba-green);
    text-decoration: underline;
}

/* Kompakt footer paa mobil: to kolonner til navigationen, mindre luft.
   Mockuppen viser logo og kontakt til venstre, to linklister og retten
   forbeholdt til hoejre, uden store lodrette spring. */
@media (max-width: 959px) {
    .tm-page footer .uk-section {
        padding-top: 2rem;
        padding-bottom: 1.75rem;
    }

    .ba-foot .uk-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1.25rem;
        margin: 0;
    }

    .ba-foot .uk-grid > * {
        width: auto;
        max-width: none;
        padding-left: 0;
        margin: 0;
    }

    .ba-foot .ba-foot-sig,
    .ba-foot .uk-width-1-3\@m:last-child {
        grid-column: 1 / -1;
    }

    .ba-foot .ba-foot-logo {
        height: 46px;
        width: auto;
        margin-bottom: 0.9rem;
    }

    .ba-foot .ba-foot-sig h2 {
        font-size: 1.0625rem;
        margin-bottom: 0.6rem;
    }

    .ba-foot h2,
    .ba-foot h3,
    .ba-foot .uk-h3 {
        font-size: 0.8125rem;
        margin-bottom: 0.6rem;
    }

    .ba-foot li {
        margin-bottom: 0.35rem;
    }

    .ba-foot a,
    .ba-foot .ba-foot-kontakt span {
        font-size: 0.9375rem;
    }

    .ba-foot .ba-foot-kontakt li {
        margin-bottom: 0.45rem;
    }

    .ba-foot .ba-foot-jur {
        padding-top: 1.1rem;
        border-top: 1px solid var(--ba-line);
    }

    .ba-foot .ba-foot-jur p {
        font-size: 0.8125rem;
        margin: 0 0 0.15rem;
    }
}

/* --------------------------------------------------------------------------
   13. Knapper. Bruges sparsomt, formularen har brug for dem.
   -------------------------------------------------------------------------- */

.uk-button {
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0 2rem;
    line-height: 52px;
    transition: background-color 0.3s var(--ba-ease), color 0.3s var(--ba-ease);
}

.uk-button-primary,
.uk-button-default:not(.uk-button-text) {
    background: var(--ba-green);
    color: #fff;
    border: 0;
}

.uk-button-primary:hover,
.uk-button-default:not(.uk-button-text):hover {
    background: var(--ba-green-deep);
    color: #fff;
}

.uk-button:disabled,
.uk-button.uk-disabled {
    background: var(--ba-line);
    color: var(--ba-stone);
    cursor: not-allowed;
}

/* Formularfelter */
.uk-input,
.uk-select,
.uk-textarea {
    border-radius: 0;
    border: 1px solid var(--ba-line);
    background: var(--ba-paper);
    color: var(--ba-ink);
    font-size: 1.0625rem;
    padding: 0 14px;
}

.uk-textarea {
    padding: 12px 14px;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--ba-green);
    background: var(--ba-paper);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
    color: var(--ba-stone);
}

.uk-form-danger,
.uk-input.uk-form-danger {
    border-color: #a4291f;
}

/* --------------------------------------------------------------------------
   14. Bevaegelse. Ét moment: fotografierne toner op og saetter sig.
       Uden JavaScript staar alt synligt fra start.
   -------------------------------------------------------------------------- */

.ba-js .ba-reveal {
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 1s var(--ba-ease), transform 1.2s var(--ba-ease);
    will-change: opacity, transform;
}

.ba-js .ba-reveal.ba-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ba-js .ba-reveal,
    .ba-js .ba-reveal.ba-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tm-header .uk-navbar-nav > li > a::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   15. Mindre skaerme
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
    /* Kompakt mobilheader: logo, nummer, burger. Ikke mere hoejde end noedvendigt. */
    .tm-header-mobile .uk-navbar-container .uk-navbar-item,
    .tm-header-mobile .uk-navbar-container .uk-navbar-toggle,
    .tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-toggle {
        min-height: 64px;
    }

    .tm-header-mobile .uk-logo img {
        height: 42px;
        max-height: 42px;
    }

    .ba-header-phone {
        min-height: 44px;
        margin-left: 0;
        padding-left: 14px;
        border-left: 1px solid var(--ba-line);
        font-size: 16px;
    }

    .ba-header-phone .ba-ikon {
        width: 17px;
        height: 17px;
        stroke: var(--ba-green);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ba-contact {
        gap: 0.75rem 1.5rem;
    }
}

@media (max-width: 639px) {
    body {
        font-size: 16px;
    }

    .ba-contact {
        display: block;
        margin-top: 2rem;
    }

    /* Fuld bredde og mindst 48px hoej, saa de kan rammes med en tommelfinger.
       Stadig klartekst, ikke knapper. */
    .ba-contact a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 56px;
        padding: 0 0 0 0;
        font-size: 1.25rem;
        border-bottom: 2px solid var(--ba-green);
    }

    .ba-contact a + a {
        margin-top: 0.75rem;
    }

    .ba-close .ba-contact a {
        border-bottom-color: var(--ba-green-tint);
    }

}

/* --------------------------------------------------------------------------
   16. Undersiderne efter mobilmockuppen (september 2026)

   Én skabelon, 15 sider. Opbygningen er heroen med ét projektfoto, tre
   tillidspunkter, artiklen i laesebredde, Henrik, Se ogsaa og det groenne felt.
   Heroen deler mekanik med forsiden: fotoet ligger bagved, teksten staar paa en
   bloed lys vask. Det er den samme komponent, kun lavere.
   -------------------------------------------------------------------------- */

/* --- Hero --------------------------------------------------------------- */

.ba-sub-hero {
    position: relative;
    /* Fotoet og vasken ligger som negative lag. Uden en egen stakkontekst
       ville de blive loeftet ud og havne bag sektionens egen baggrund. */
    isolation: isolate;
    padding: 0 !important;
    overflow: hidden;
    background: var(--ba-hero-panel);
}

/* Feltet maa ikke vaere positioneret. Fotoet og vasken ligger som negative
   lag paa selve sektionen, saa teksten staar ovenpaa uden eget z-index. */
.ba-sub-hero .uk-container,
.ba-sub-hero .uk-container-expand {
    position: static;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--ba-gutter) clamp(2.25rem, 4vw, 3.75rem);
}

.ba-sub-hero .uk-grid,
.ba-sub-hero [class*='uk-width'] {
    margin-left: 0;
    padding-left: 0;
}

/* Fotografierne til undersiderne er staaende. Daekkede de hele feltet, ville
   beskaeringen kun vise en tilfaeldig lodret stribe af rummet. De faar derfor
   hoejre side, og vasken toner dem ind mod teksten. */
.ba-sub-hero-figure {
    position: absolute;
    inset: 0;
    left: 46%;
    z-index: -2;
    /* YOOtheme saetter en max-width paa billedelementet. Den skal vaek, ellers
       bliver fotoet kun saa bredt som tekstspalten. */
    max-width: none;
    width: auto;
    margin: 0 !important;
}

.ba-sub-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}

/* Den bloede vask. Samme princip som forsiden, strammere fordi teksten
   fylder mindre paa en underside. */
.ba-sub-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        93deg,
        var(--ba-hero-panel) 0%,
        var(--ba-hero-panel) 46%,
        rgba(242, 241, 237, 0.92) 58%,
        rgba(242, 241, 237, 0.55) 70%,
        rgba(242, 241, 237, 0.15) 82%,
        rgba(242, 241, 237, 0) 92%
    );
}

.ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
    max-width: 34rem;
}

/* Brodkrummen er sidens rubrik. Renovering staar over Badevaerelse. */
.ba-sub-eyebrow,
.ba-sub-eyebrow a,
.ba-sub-eyebrow li {
    font-family: var(--ba-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-stone);
}

.ba-sub-eyebrow ul {
    padding: 0;
    margin: 0 0 0.25rem;
}

.ba-sub-eyebrow a {
    display: inline-block;
    padding: 0.5rem 0;
    text-decoration: none;
}

.ba-sub-eyebrow a:hover {
    color: var(--ba-green);
}

.ba-sub-hero h1 {
    font-size: clamp(2.125rem, 4vw, 2.875rem);
    line-height: 1.06;
    letter-spacing: -0.018em;
    margin: 0 0 0.9rem;
    max-width: 16ch;
}

.ba-sub-lead p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #3c3f41;
    max-width: 38ch;
    margin: 0;
}

.ba-sub-hero-cta {
    margin-top: 1.75rem;
}

/* --- Tillidspunkter ----------------------------------------------------- */

.ba-sub-trust {
    border-bottom: 1px solid var(--ba-line);
}

/* Grid-element med tre emner. Skillelinjerne er gridets egen Divider. */
.ba-trio-grid {
    padding: clamp(1.6rem, 3vw, 2.4rem) 0;
}

.ba-trio-grid .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: var(--ba-line);
}

.ba-trio-grid .el-item {
    text-align: center;
    padding: 0 0.35rem;
}

.ba-trio-grid .el-image {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 0.6rem;
}

.ba-trio-grid .el-title {
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 0.15rem !important;
}

.ba-trio-grid .el-content {
    margin-top: 0 !important;
}

.ba-trio-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ba-stone);
    margin: 0;
    text-wrap: balance;
}

/* --- Artiklen ----------------------------------------------------------- */

.ba-sub .uk-container {
    max-width: 1180px;
}

.ba-sub-main {
    max-width: 47rem;
}

/* YOOtheme giver tekstfeltet display: flow-root. Det danner en egen
   blokkontekst, som viger for et float i hele sin hoejde, saa spalten bliver
   smal hele vejen ned. Teksten skal floede omkring billedet, ikke vige for det. */
.ba-sub-main > .uk-panel {
    display: block;
}

/* Det understoettende foto foelger med i foerste afsnit */
.ba-art-figure {
    float: right;
    width: 40%;
    margin: 0.4rem 0 1.25rem 1.5rem !important;
    shape-outside: margin-box;
}

.ba-art-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.ba-sub-main h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    max-width: 26ch;
    margin: 2.5rem 0 0.85rem;
}

.ba-sub-main > .uk-panel > :first-child,
.ba-sub-main h2:first-child {
    margin-top: 0;
}

.ba-sub-main h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2rem 0 0.6rem;
}

.ba-sub-main p,
.ba-sub-main li {
    font-size: 1.0625rem;
    line-height: 1.62;
}

.ba-sub-main p {
    margin: 0 0 1.15rem;
    max-width: 68ch;
}

.ba-sub-main ul,
.ba-sub-main ol {
    padding-left: 0;
    margin: 1.35rem 0 1.6rem;
}

.ba-sub-main ul {
    list-style: none;
}

.ba-sub-main ul li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 0.7rem;
    max-width: 62ch;
}

/* Groent flueben. Mockuppens markoer, tegnet som baggrund saa listen
   bliver ved med at vaere en almindelig ul i artiklens tekst. */
.ba-sub-main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1.05em;
    height: 1.05em;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234539' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

.ba-sub-main ol {
    list-style: none;
    counter-reset: ba-trin;
}

.ba-sub-main ol li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 0.85rem;
    counter-increment: ba-trin;
}

.ba-sub-main ol li::before {
    content: counter(ba-trin);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ba-green);
}

.ba-sub-main a {
    color: var(--ba-ink);
    text-decoration: underline;
    text-decoration-color: var(--ba-green);
    text-decoration-thickness: 1px;
}

.ba-sub-main a:hover {
    color: var(--ba-green);
    text-decoration-thickness: 2px;
}

/* --- Henrik ------------------------------------------------------------- */

.ba-person-sec .uk-container {
    max-width: 1180px;
}

.ba-person {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-top: 1px solid var(--ba-line);
    border-bottom: 1px solid var(--ba-line);
}

.ba-person-foto {
    flex: none;
    width: 84px;
    height: 84px;
}

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

.ba-person-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

/* Henrik er en kolonne med billede, tekst og liste. Kolonnens eget gutter
   fjernes, saa stregerne over og under flugter med containeren. */
.ba-person-sec .tm-grid-expand {
    margin-left: 0;
}

.ba-person-sec .tm-grid-expand > .ba-person {
    padding-left: 0;
    padding-right: 0;
}

/* Foerste afsnit i tekstfeltet er navnet */
.ba-person-tekst p:first-child {
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.ba-person-tekst p + p {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ba-stone);
    margin: 0;
    max-width: 34ch;
}

/* List-element med ét emne: ikon, "Ring til Henrik paa" og nummeret i fed */
.ba-person-tlf.uk-list {
    flex: none;
    margin: 0;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    border-left: 1px solid var(--ba-line);
}

.ba-person-tlf a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ba-ink);
    text-decoration: none;
}

.ba-person-tlf .uk-grid {
    margin-left: -0.7rem;
}

.ba-person-tlf .uk-grid > * {
    padding-left: 0.7rem;
}

.ba-person-tlf .el-image {
    display: block;
    width: 22px;
    height: 22px;
    color: var(--ba-green) !important;
}

.ba-person-tlf .el-content {
    font-size: 0.8125rem;
    color: var(--ba-stone);
    line-height: 1.3;
}

.ba-person-tlf .el-content strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ba-green);
    line-height: 1.25;
}

.ba-person-tlf a:hover strong {
    color: var(--ba-green-deep);
    text-decoration: underline;
}

/* --- Se ogsaa ----------------------------------------------------------- */

.ba-seogsaa-sec .uk-container {
    max-width: 1180px;
}

.ba-seogsaa-titel {
    font-family: var(--ba-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    margin: 0 0 1.1rem;
}

.ba-seogsaa .el-item {
    height: 100%;
}

.ba-seogsaa img {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.ba-seogsaa .el-title,
.ba-seogsaa h3 {
    font-family: var(--ba-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.008em;
    margin: 0;
}

.ba-seogsaa a {
    display: block;
    color: var(--ba-ink);
    text-decoration: none;
}

.ba-seogsaa .el-item .uk-grid {
    align-items: flex-start;
}

/* Pilen hoerer til titlen, saa hele feltet foeles som ét maal */
.ba-seogsaa .el-title::after {
    content: '';
    display: block;
    width: 18px;
    height: 12px;
    margin-top: 0.7rem;
    background: no-repeat left center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234539' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    transition: transform 0.3s var(--ba-ease);
}

.ba-seogsaa a:hover {
    color: var(--ba-green);
}

.ba-seogsaa .el-item:hover .el-title::after {
    transform: translateX(4px);
}

/* --- Groen afslutning --------------------------------------------------- */

.ba-close-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.ba-close-inner h2 {
    flex: 1 1 auto;
    margin: 0;
}

/* List-element med to emner, hvert med ikon og link */
.ba-close-handling.uk-list {
    flex: none;
    min-width: min(100%, 22rem);
    margin: 0;
}

.ba-close-handling.uk-list > li {
    margin: 0;
}

.ba-close-handling a {
    display: block;
    padding: 0.95rem 0;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

.ba-close-handling.uk-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ba-close-handling .uk-grid {
    margin-left: -0.85rem;
}

.ba-close-handling .uk-grid > * {
    padding-left: 0.85rem;
}

.ba-close-handling .el-image {
    display: block;
    width: 22px;
    height: 22px;
    color: inherit !important;
}

/* UIkit indsaetter SVG-filen inline og fjerner dens fill="none". Stregikonerne
   skal kun have streg, saa det saettes igen her. */
.ba-close-handling svg.el-image,
.ba-person-tlf svg.el-image {
    fill: none;
    stroke: currentColor;
}

.ba-close-handling a:hover {
    color: var(--ba-green-tint);
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 959px) {
    .ba-sub-hero .uk-container,
    .ba-sub-hero .uk-container-expand {
        padding-top: 1.75rem;
        padding-bottom: 2rem;
    }

    /* Fotografierne er staaende. Paa en smal skaerm ville et fuldt daekkende
       foto kun vise en tilfaeldig lodret stribe, saa det faar hoejre side og
       beskaeres om sin egen midte. Samme greb som forsidens mobilhero. */
    .ba-sub-hero-figure {
        left: 44%;
    }

    .ba-sub-hero::after {
        background: linear-gradient(
            98deg,
            var(--ba-hero-panel) 0%,
            var(--ba-hero-panel) 44%,
            rgba(242, 241, 237, 0.92) 58%,
            rgba(242, 241, 237, 0.55) 70%,
            rgba(242, 241, 237, 0.15) 82%,
            rgba(242, 241, 237, 0) 92%
        );
    }

    .ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
        max-width: 26rem;
    }

    .ba-sub-hero h1 {
        font-size: clamp(2rem, 8.6vw, 2.4rem);
        line-height: 1.08;
        max-width: 13ch;
    }

    .ba-sub-lead p {
        font-size: 0.9375rem;
        line-height: 1.55;
        max-width: 30ch;
    }

    .ba-art-figure {
        width: 42%;
        margin-left: 1.1rem !important;
    }

    /* Mockuppen holder Henrik paa én linje ogsaa paa mobil: foto, tekst,
       skillelinje, nummer. Derfor kun mindre typografi, ikke ombrydning. */
    .ba-person {
        gap: 0.75rem;
    }

    .ba-person-foto {
        width: 56px;
        height: 56px;
    }

    .ba-person-tekst p:first-child {
        font-size: 0.9375rem;
        letter-spacing: -0.01em;
    }

    .ba-person-tekst p + p {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .ba-person-tlf.uk-list {
        padding-left: 0.8rem;
    }

    .ba-person-tlf .el-image {
        width: 19px;
        height: 19px;
    }

    .ba-person-tlf .el-content {
        font-size: 0.8125rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .ba-person-tlf .el-content strong {
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    /* Mockuppen holder overskrift og handlinger side om side ogsaa paa mobil */
    .ba-close-inner {
        gap: 1.25rem;
        align-items: center;
    }

    .ba-close-inner h2 {
        font-size: 1.25rem;
        line-height: 1.15;
    }

    .ba-close-handling.uk-list {
        flex: 0 0 47%;
        min-width: 0;
    }

    .ba-close-handling a {
        gap: 0.6rem;
        padding: 0.7rem 0;
        font-size: 0.9375rem;
        line-height: 1.3;
    }

    .ba-close-handling.uk-list > li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .ba-close-handling .uk-grid {
        margin-left: -0.6rem;
    }

    .ba-close-handling .uk-grid > * {
        padding-left: 0.6rem;
    }

    .ba-close-handling .el-image {
        width: 18px;
        height: 18px;
    }
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 639px) {
    .ba-sub-hero .uk-container,
    .ba-sub-hero .uk-container-expand {
        padding-top: 1.5rem;
        padding-bottom: 1.75rem;
    }

    .ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
        max-width: 17.5rem;
    }

    .ba-sub-hero-cta {
        margin-top: 1.4rem;
    }

    .uk-section.ba-sub-hero .ba-sub-hero-cta .uk-button-primary {
        white-space: nowrap;
        width: auto;
        justify-content: flex-start;
        min-height: 48px;
        padding: 0 20px;
    }

    .ba-trio-grid {
        padding: 1.25rem 0;
    }

    .ba-trio-grid .uk-grid-divider {
        margin-left: -8px;
    }

    .ba-trio-grid .uk-grid-divider > * {
        padding-left: 8px;
    }

    .ba-trio-grid .uk-grid-divider > :not(.uk-first-column)::before {
        left: 0;
    }

    .ba-trio-grid .el-item {
        padding: 0 0.25rem;
    }

    .ba-trio-grid .el-title {
        font-size: 0.8125rem;
    }

    .ba-trio-grid .el-content p {
        font-size: 0.8125rem;
    }

    .ba-sub-main h2 {
        margin-top: 2.1rem;
    }

    .ba-art-figure {
        width: 44%;
        margin-left: 1rem !important;
    }

    .ba-seogsaa img {
        max-width: 68px;
    }

    .ba-seogsaa .el-title,
    .ba-seogsaa h3 {
        font-size: 0.9375rem;
        line-height: 1.25;
    }

    .ba-seogsaa .el-title::after {
        width: 15px;
        height: 10px;
        margin-top: 0.45rem;
    }

    .ba-person-foto {
        width: 56px;
        height: 56px;
    }
}

/* ==========================================================================
   18. Forsiden efter mockuppen (september 2026)
   Redaktionelt udtryk: serif til overskrifter, grotesk til broedtekst,
   skarpe hjoerner, hairlines, én moerkegroen. Ingen cards, ingen skygger,
   ingen gradienter ud over den lyse sloerring der goer heroens tekst laesbar.
   ========================================================================== */

:root {
    --ba-hero-panel: #f2f1ed;
    --ba-band: #f5f4f2;
}

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

.ba-cta-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: 18px;
    padding: 0 22px;
    background: var(--ba-green);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s var(--ba-ease);
}

.ba-cta-header:hover,
.tm-header .uk-navbar-container .uk-navbar-item a.ba-cta-header:hover {
    background: var(--ba-green-deep);
    color: #fff;
    text-decoration: none;
}

.tm-header .uk-navbar-container .uk-navbar-item a.ba-cta-header {
    color: #fff;
}

/* --- Faelles former ------------------------------------------------------ */

.ba-label {
    font-family: var(--ba-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-stone);
    margin: 0 0 1rem;
}

.ba-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    min-height: 52px;
    padding: 0 26px;
    background: var(--ba-green);
    color: #fff;
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s var(--ba-ease);
}

.ba-btn:hover {
    background: var(--ba-green-deep);
    color: #fff;
    text-decoration: none;
}

.ba-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.ba-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ba-green);
    text-decoration: none;
}

.ba-link:hover {
    color: var(--ba-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.ba-link svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.3s var(--ba-ease);
}

.ba-link:hover svg {
    transform: translateX(3px);
}

.ba-script {
    font-family: var(--ba-script);
    font-weight: 600;
    line-height: 1.25;
}

.ba-ikon {
    width: 34px;
    height: 34px;
    flex: none;
    stroke: var(--ba-green);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Sektionsrytme paa forsiden ------------------------------------------ */

.tm-page .uk-section.ba-s {
    padding-top: clamp(2.25rem, 3.2vw, 3.75rem);
    padding-bottom: clamp(2.25rem, 3.2vw, 3.75rem);
}

.tm-page .uk-section.ba-s-tight {
    padding-top: clamp(1.5rem, 2vw, 2.5rem);
}

/* --- Forsiden med YOOthemes egne elementer ------------------------------- */
/*
 * Forsiden er bygget af headline-, text-, image-, grid-, list-, quotation- og
 * button-elementer, saa den kan redigeres i builderen uden HTML. Udseendet
 * styres herfra via den klasse der staar paa hvert element under Advanced.
 * YOOtheme saetter uk-margin-remove-vertical med !important paa elementerne,
 * derfor bruger afstandene herunder ogsaa !important.
 */

/* Knapper i builderen faar samme form som .ba-btn og .ba-link */
.uk-section[class*='ba-'] .uk-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    background: var(--ba-green);
    color: #fff;
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.3s var(--ba-ease);
}

.uk-section[class*='ba-'] .uk-button-primary:hover,
.uk-section[class*='ba-'] .uk-button-primary:focus {
    background: var(--ba-green-deep);
    color: #fff;
}

.uk-section[class*='ba-'] .uk-button-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ba-green);
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.uk-section[class*='ba-'] .uk-button-text::before {
    display: none;
}

.uk-section[class*='ba-'] .uk-button-text:hover,
.uk-section[class*='ba-'] .uk-button-text:focus {
    color: var(--ba-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.uk-section[class*='ba-'] .uk-button [uk-icon] {
    margin: 0 !important;
}

.uk-section[class*='ba-'] .uk-button-primary [uk-icon] svg {
    width: 16px;
    height: 16px;
}

.uk-section[class*='ba-'] .uk-button-text [uk-icon] svg {
    width: 14px;
    height: 14px;
}

.uk-section[class*='ba-'] .uk-button-text [uk-icon],
.ba-yd-grid .el-link::after {
    transition: transform 0.3s var(--ba-ease);
}

.uk-section[class*='ba-'] .uk-button-text:hover [uk-icon],
.ba-yd-grid .el-link:hover::after {
    transform: translateX(3px);
}

/* Etiketten over en overskrift */
.uk-panel.ba-label {
    margin-bottom: 1rem !important;
}

.ba-label > p {
    margin: 0;
}

/* Sektionsoverskrift */
h2.ba-head {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.15;
    margin-bottom: 1.5rem !important;
}

/* --- Hero --- */

.ba-h {
    padding: 0 !important;
    position: relative;
    background: var(--ba-hero-panel);
}

.ba-h .uk-container,
.ba-h .uk-container-expand {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.ba-h .tm-grid-expand,
.ba-h .tm-grid-expand > [class*='uk-width'] {
    margin-left: 0;
    padding-left: 0;
}

.ba-h .tm-grid-expand > .ba-hero-col {
    position: relative;
    overflow: hidden;
    min-height: clamp(430px, 52vw, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 4vw, 4rem) max(var(--ba-gutter), calc((100% - 1600px) / 2 + var(--ba-gutter)));
}

.ba-hero-col > * {
    position: relative;
    z-index: 1;
    max-width: 43rem;
}

.ba-h .ba-hero-col > .ba-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    max-width: none;
}

.ba-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 46%;
}

/* Sloering saa overskriften kan laeses. Funktionel, ikke dekorativ. */
.ba-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        62% 150% at 15% 44%,
        var(--ba-hero-panel) 0%,
        var(--ba-hero-panel) 62%,
        rgba(242, 241, 237, 0.94) 70%,
        rgba(242, 241, 237, 0.6) 80%,
        rgba(242, 241, 237, 0.22) 90%,
        rgba(242, 241, 237, 0) 100%
    );
}

h1.ba-hero-h1 {
    font-size: clamp(2.4rem, 4.4vw, 4.1rem);
    line-height: 1.06;
    margin-bottom: 0.55rem !important;
    /* Bryder efter "byggefirma" uden et haardt linjeskift i feltet */
    max-width: 9.3em;
    text-wrap: wrap;
}

.ba-hero-sub {
    font-family: var(--ba-serif);
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ba-ink);
    margin-bottom: 1.4rem !important;
}

.ba-hero-body {
    margin-bottom: 1.9rem !important;
}

.ba-hero-body p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3c3f41;
    max-width: 40ch;
    margin: 0;
}

.ba-h .ba-hero-col > .ba-hero-script {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 3vw, 2.75rem);
    max-width: 15ch;
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.2;
    text-align: right;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.ba-hero-script p {
    margin: 0;
}

/* --- Introduktion --- */

.ba-intro .tm-grid-expand {
    align-items: start;
}

h2.ba-intro-h {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.2;
    margin-bottom: 1.15rem !important;
    max-width: 34ch;
}

.ba-intro-text p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3c3f41;
    max-width: 60ch;
    margin: 0;
}

blockquote.ba-quote {
    margin: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 2px solid var(--ba-green);
    background: var(--ba-band);
    color: var(--ba-ink);
    font-family: var(--ba-serif);
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

/* Navnet over titlen, som i mockuppen. Feltet Footer er titlen, Author er navnet. */
.ba-quote .el-footer,
.ba-quote .el-author {
    letter-spacing: 0;
    text-transform: none;
}

.ba-quote .el-footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    margin-top: 1.15rem;
    color: var(--ba-stone);
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
}

.ba-quote .el-footer::before {
    content: none;
}

.ba-quote .el-author {
    color: var(--ba-ink);
    font-style: normal;
    font-weight: 600;
}

.ba-quote .el-author::before {
    content: none;
}

/* --- Ydelser --- */

.ba-yd-grid .el-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 1.15rem;
}

.ba-yd-grid .el-title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.5rem !important;
}

.ba-yd-grid .el-content {
    margin-top: 0 !important;
}

.ba-yd-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ba-stone);
    max-width: 34ch;
    margin: 0 0 1rem;
}

.ba-yd-grid .el-item > .uk-margin-top {
    margin-top: 0 !important;
}

/* Grid-elementets link har ingen ikonmulighed, saa pilen tegnes her */
.ba-yd-grid .el-link::after {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Projekter --- */

.ba-proj-grid .el-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

.ba-proj-grid .el-title {
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 0.15rem !important;
}

.ba-proj-grid .el-meta {
    margin-top: 0 !important;
    font-family: var(--ba-font);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9375rem;
    color: var(--ba-stone);
}

/* --- Kvalitet --- */

.ba-kval {
    padding: 0 !important;
}

.ba-kval .uk-container,
.ba-kval .uk-container-expand {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.ba-kval .tm-grid-expand {
    margin-left: 0;
    align-items: center;
}

.ba-kval .tm-grid-expand > * {
    padding-left: 0;
}

.ba-kval-media img {
    display: block;
    width: 100%;
    height: clamp(320px, 44vw, 560px);
    object-fit: cover;
}

.ba-kval-text {
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--ba-gutter) !important;
}

.ba-kval-text > * {
    max-width: 40rem;
}

h2.ba-kval-h {
    font-size: clamp(1.7rem, 2.7vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 1.1rem !important;
    max-width: 20ch;
}

.ba-kval-p {
    margin-bottom: 1.6rem !important;
}

.ba-kval-p p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3c3f41;
    max-width: 52ch;
    margin: 0;
}

.ba-tjek.uk-list {
    margin-bottom: 2rem !important;
}

.ba-tjek.uk-list > li {
    margin: 0 0 0.8rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ba-tjek .uk-grid {
    margin-left: -16px;
}

.ba-tjek .uk-grid > * {
    padding-left: 16px;
}

.ba-tjek .el-image {
    display: block;
    color: var(--ba-green) !important;
    margin-top: 0.15em;
}

.ba-tjek .el-image svg {
    width: 16px;
    height: 16px;
}

/* --- Hvorfor vaelge os --- */

.ba-hv-grid .el-title {
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.35rem !important;
}

.ba-hv-grid .el-content {
    margin-top: 0 !important;
}

.ba-hv-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ba-stone);
    max-width: 32ch;
    margin: 0;
}

.ba-hv-grid .el-image {
    display: block;
    width: 34px;
    height: 34px;
}

/* --- Kontaktbaand --- */

.ba-kontakt {
    background: var(--ba-band);
}

.ba-kontakt .tm-grid-expand {
    align-items: center;
}

h2.ba-kontakt-h {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.15;
    margin-bottom: 0.9rem !important;
}

.ba-kontakt-p p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3c3f41;
    max-width: 46ch;
    margin: 0 0 0.5rem;
}

.ba-kontakt-tlf {
    margin-bottom: 1.1rem !important;
}

.uk-section .ba-kontakt-tlf .uk-button-text {
    gap: 0.6rem;
    font-family: var(--ba-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-variant-numeric: tabular-nums;
}

.uk-section .ba-kontakt-tlf .uk-button-text:hover {
    text-decoration: none;
}

.uk-section .ba-kontakt-tlf .uk-button-text [uk-icon] svg {
    width: 22px;
    height: 22px;
}

.uk-section .ba-kontakt-tlf .uk-button-text:hover [uk-icon] {
    transform: none;
}

.ba-kontakt-script p {
    max-width: 14ch;
    margin: 0 0 0 auto;
    color: var(--ba-green);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.2;
    text-align: right;
}

/* --- Mindre skaerme --- */

@media (max-width: 959px) {
    .ba-h .tm-grid-expand > .ba-hero-col {
        display: block;
        min-height: 340px;
        padding: 1.75rem var(--ba-gutter) 1.5rem;
    }

    .ba-h .ba-hero-col > *,
    .ba-h .ba-hero-col > h1.ba-hero-h1 {
        max-width: 64%;
    }

    .ba-h .ba-hero-col > .ba-hero-media {
        left: 56%;
        max-width: none;
    }

    .ba-hero-media::after {
        background: linear-gradient(
            100deg,
            var(--ba-hero-panel) 0%,
            var(--ba-hero-panel) 26%,
            rgba(242, 241, 237, 0.9) 44%,
            rgba(242, 241, 237, 0) 66%
        );
    }

    h1.ba-hero-h1 {
        font-size: clamp(1.5rem, 6.2vw, 2.05rem);
        text-wrap: balance;
    }

    .ba-hero-sub {
        font-size: 1.0625rem;
        margin-bottom: 0.9rem !important;
    }

    .ba-hero-body {
        margin-bottom: 1.35rem !important;
    }

    .ba-hero-body p {
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    /* Mobilmockuppen viser én handling i heroen */
    .ba-hero-actions .el-item:has(.uk-button-text) {
        display: none;
    }

    .uk-section .ba-hero-actions .uk-button-primary {
        min-height: 46px;
        padding: 0 15px;
        gap: 0.5em;
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    .ba-h .ba-hero-col > .ba-hero-script {
        right: 1rem;
        bottom: 1rem;
        max-width: 12ch;
        font-size: 1.0625rem;
    }

    /* Ydelser: lille billede til venstre, tekst til hoejre */
    .ba-yd-grid .el-item {
        display: grid;
        grid-template-columns: 118px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 1rem;
        align-items: start;
        padding-bottom: 1.1rem;
        border-bottom: 1px solid var(--ba-line);
    }

    .ba-yd-grid .el-image {
        grid-row: 1 / span 3;
        aspect-ratio: 1 / 1;
        margin-bottom: 0;
    }

    .ba-yd-grid .el-content p {
        margin-bottom: 0.6rem;
    }

    /* Projekter: tre i traekken. Det fjerde vises ikke, som i mockuppen. */
    .ba-proj-grid .uk-grid {
        margin-left: -12px;
    }

    .ba-proj-grid .uk-grid > * {
        padding-left: 12px;
    }

    .ba-proj-grid .uk-grid > *:nth-child(4) {
        display: none;
    }

    .ba-proj-grid .el-meta {
        font-size: 0.8125rem;
    }

    /* Fordele: tre kolonner, ikon over titlen */
    .ba-hv-grid .uk-grid {
        margin-left: -16px;
    }

    .ba-hv-grid .uk-grid > * {
        padding-left: 16px;
    }

    .ba-hv-grid .el-item .uk-grid {
        margin-left: 0;
    }

    .ba-hv-grid .el-item .uk-grid > * {
        padding-left: 0;
        margin-top: 0;
    }

    .ba-hv-grid .el-image {
        margin-bottom: 0.6rem;
    }

    .ba-hv-grid .el-title {
        font-size: 0.9375rem;
    }

    .ba-hv-grid .el-content p {
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    /* Kvalitet beholder sine to spor, som i mobilmockuppen */
    .ba-kval .tm-grid-expand {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .ba-kval .tm-grid-expand > *:first-child {
        width: 45%;
        max-width: 45%;
        margin-top: 0;
    }

    .ba-kval .tm-grid-expand > *:last-child {
        width: 55%;
        max-width: 55%;
        margin-top: 0;
    }

    .ba-kval-media,
    .ba-kval-media img {
        height: 100%;
    }

    .ba-kval-media img {
        min-height: 420px;
    }

    .ba-kval-text {
        padding: 1.5rem 1.15rem 1.75rem 1.35rem !important;
    }

    h2.ba-kval-h {
        font-size: 1.25rem;
        max-width: 14ch;
    }

    .ba-kval-p p {
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    .ba-tjek.uk-list > li {
        font-size: 0.8125rem;
        margin-bottom: 0.55rem;
    }

    .ba-tjek .uk-grid {
        margin-left: -10px;
    }

    .ba-tjek .uk-grid > * {
        padding-left: 10px;
    }

    .ba-tjek .el-image svg {
        width: 13px;
        height: 13px;
    }

    .uk-section .ba-kval-btn .uk-button-primary {
        text-align: left;
        min-height: 46px;
        padding: 0 16px;
        font-size: 0.9375rem;
    }

    .ba-kontakt-script {
        display: none;
    }

    .uk-section[class*='ba-'] .uk-button-text {
        min-height: 40px;
    }
}

@media (max-width: 639px) {
    .ba-h .tm-grid-expand > .ba-hero-col {
        min-height: 300px;
    }

    .ba-h .ba-hero-col > *,
    .ba-h .ba-hero-col > h1.ba-hero-h1 {
        max-width: 68%;
    }

    .ba-h .ba-hero-col > .ba-hero-media {
        left: 58%;
    }

    .uk-section .ba-kval-btn .uk-button-primary,
    .uk-section .ba-kontakt-btn .uk-button-primary {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 359px) {
    .ba-hv-grid .uk-grid > * {
        width: 100%;
        margin-top: 1.5rem;
    }

    .ba-hv-grid .uk-grid > *:first-child {
        margin-top: 0;
    }

    .ba-kval .tm-grid-expand {
        flex-wrap: wrap;
    }

    .ba-kval .tm-grid-expand > *:first-child,
    .ba-kval .tm-grid-expand > *:last-child {
        width: 100%;
        max-width: 100%;
    }

    .ba-kval-media img {
        min-height: 0;
        height: clamp(220px, 34vh, 300px);
    }
}

/* Faelles regler der overlevede fra den gamle forside, og som undersiderne bruger */

@media (max-width: 959px) {
    /* Det haarde linjebrud gaelder kun desktop; paa mobil bryder teksten selv */
    .ba-br-d {
        display: none;
    }
}

@media (max-width: 639px) {
    .ba-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* --- Footer efter mockuppen ---------------------------------------------- */

.ba-foot-logo {
    display: block;
    width: auto;
    height: 62px;
    margin-bottom: 1.5rem;
}

.ba-foot-kontakt {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ba-foot-kontakt li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.ba-f-ikon {
    width: 17px;
    height: 17px;
    flex: none;
    stroke: var(--ba-stone);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ba-foot-kontakt a {
    color: var(--ba-ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.ba-foot-kontakt a:hover {
    color: var(--ba-green);
    text-decoration: underline;
}

.ba-foot-jur p {
    margin: 0 0 0.55rem;
    font-size: 0.9375rem;
    color: var(--ba-stone);
}

.ba-foot-jur a {
    color: var(--ba-stone);
    font-size: 0.9375rem;
}

@media (max-width: 639px) {
    .ba-foot-logo {
        height: 52px;
        margin-bottom: 1.15rem;
    }
}

/* --- Klikflader paa touch ------------------------------------------------ */

@media (max-width: 959px) {
    .ba-foot a,
    .ba-foot-kontakt a,
    .ba-foot-jur a {
        display: inline-block;
        padding: 0.45rem 0;
        min-height: 40px;
        line-height: 1.55;
    }

    .ba-foot li {
        margin-bottom: 0;
    }

    .ba-foot-kontakt li {
        margin-bottom: 0.25rem;
    }

    .ba-link {
        padding: 0.4rem 0;
        min-height: 40px;
    }
}