:root {
    --red: #e62222;
    --ink: #121212;
    --coal: #0a0a0a;
    --paper: #ffffff;
    --smoke: #f5f6f7;
    --muted: #6b7280;
    --maxw: 1200px;
    --radius: 18px;
    --shadow: 0 10px 22px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
}

/* RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* BASE */
html {
    scroll-behavior: smooth
}

html,
body {
    overflow-x: hidden
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
}

/* Prevent anchored sections from sliding under the sticky header */
[id] {
    scroll-margin-top: 72px;
}

@media (max-width:880px) {
    [id] {
        scroll-margin-top: 86px;
    }
}

h1,
h2,
h3 {
    font-family: 'Sporting Grotesque', sans-serif;
    letter-spacing: -.02em;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.4rem, 5vw, 3rem)
}

h2 {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    margin-bottom: 10px
}

h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem)
}

a {
    color: var(--red);
    text-decoration: none;
    transition: opacity .2s ease
}

a:hover {
    opacity: .9
}

p {
    margin-bottom: .75em
}

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

a,
p {
    overflow-wrap: anywhere
}

.container {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(20px, 3vw, 40px)
}

.grid {
    display: grid;
    gap: clamp(20px, 2vw, 30px)
}

.card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .04), #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 36px);
    transition: transform .2s, box-shadow .2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06)
}

.section {
    padding-block: clamp(30px, 4vw, 50px)
}

.section .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: clamp(12px, 2vw, 20px)
}

.muted {
    color: var(--muted)
}

.prose {
    max-width: 70ch
}

/* Focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(230, 34, 34, .5);
    outline-offset: 2px;
    border-radius: 8px
}

/* HEADER */
header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    /* Safari */
    border-bottom: 1px solid #e5e7eb;
}

header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 16px 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--ink);
    min-width: 0
}

.brand img {
    height: 46px;
    width: auto
}

.brand strong {
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
}

nav a {
    color: var(--ink);
    opacity: .9;
    margin-inline: 16px;
    font-weight: 600
}

nav a:hover {
    opacity: 1
}

.nav-toggle {
    display: none
}

/* THEME TOGGLE BUTTON */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111;
    cursor: pointer;
    font-weight: 600;
}

.theme-toggle .theme-icon {
    font-size: 16px;
}

.theme-toggle .theme-text {
    font-size: 14px;
}

.theme-toggle .sun {
    display: none;
}

/* default: light */
:root[data-theme="dark"] .theme-toggle .sun {
    display: inline;
}

:root[data-theme="dark"] .theme-toggle .moon {
    display: none;
}

@media (max-width: 880px) {
    .theme-toggle {
        padding: 8px 10px;
    }

    .theme-toggle .theme-text {
        display: none;
    }
}

/* HERO */
.hero {
    background: #fff;
    color: var(--ink)
}

.hero .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    padding-block: clamp(48px, 8vw, 96px)
}

.lead {
    font-size: clamp(17px, 2vw, 21px);
    color: #374151;
    max-width: 60ch
}

h1+.lead {
    margin-top: 8px
}

/* SERVICES */
.services {
    grid-template-columns: repeat(12, 1fr)
}

.service {
    grid-column: span 6;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    align-items: start
}

.service .icon {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: #111;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-family: 'Sporting Grotesque', sans-serif
}

/* OUR SITES */
.brands {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.brand-card {
    padding: clamp(24px, 2.4vw, 32px);
    background: linear-gradient(180deg, #fff, #f9fafb);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s;
}

.brand-card:hover {
    transform: translateY(-3px)
}

/* TEAM */
.team {
    grid-template-columns: repeat(12, 1fr)
}

.member {
    grid-column: span 6;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    align-items: center
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: var(--shadow)
}

/* NEWS */
.news {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(20px, 2vw, 30px)
}

.post {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.post .thumb {
    aspect-ratio: 16/9;
    border-radius: 14px;
    overflow: hidden;
    background: #eee
}

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

/* CONTACT */
.contact {
    background: linear-gradient(180deg, #fff, #f7f7f8)
}

.contact .grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 32px
}

input,
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea {
    resize: vertical
}

label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px
}

input:focus,
textarea:focus,
select:focus {
    border-color: #c81e1e;
    box-shadow: 0 0 0 3px rgba(230, 34, 34, .12)
}

.btn {
    background: var(--red);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    margin-top: 16px
}

.btn:hover {
    background: #b31919
}

/* FOOTER */
footer {
    background: var(--coal);
    color: #cbd5e1;
    padding-block: 32px
}

footer a {
    color: #fff
}

footer nav a:hover {
    text-decoration: underline
}

/* COOKIE MODAL */
.cookie-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px
}

.cookie-modal-backdrop.show {
    display: flex
}

.cookie-modal {
    width: min(640px, 92vw);
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    padding: 26px 26px 20px;
    position: relative
}

.cookie-btn.primary {
    background: var(--red);
    color: #fff
}

.cookie-btn.ghost {
    background: #f3f4f6;
    color: #111
}

.cookie-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* -------------- RESPONSIVE FIXES -------------- */

/* Tablet */
@media (min-width:681px) and (max-width:1100px) {
    .news {
        grid-template-columns: repeat(8, 1fr)
    }

    .post {
        grid-column: span 4
    }

    .member {
        grid-template-columns: 90px 1fr
    }
}

/* Mobile */
@media (max-width:880px) {
    .container {
        padding: 16px
    }

    .section {
        padding-block: 22px
    }

    .card {
        padding: 18px
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background: #fff;
        cursor: pointer;
        font-size: 20px
    }

    header nav {
        display: none;
        width: 100%;
        margin-top: 10px;
        border-top: 1px solid #e5e7eb;
        padding-top: 10px
    }

    header.nav.open nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px
    }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-block: 36px
    }

    .service {
        grid-column: span 12;
        grid-template-columns: 1fr
    }

    .service .icon {
        display: none
    }

    .team {
        grid-template-columns: repeat(12, 1fr)
    }

    .member {
        grid-column: span 12;
        grid-template-columns: 1fr
    }

    .brands {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    }

    .contact .grid {
        grid-template-columns: 1fr
    }

    .btn {
        width: 100%
    }

    .post {
        grid-column: span 12
    }
}

/* Super-narrow */
@media (max-width:420px) {
    header.nav.open nav {
        grid-template-columns: 1fr
    }

    .brands {
        grid-template-columns: 1fr
    }
}

/* Very narrow */
@media (max-width:360px) {
    .hero .container {
        gap: 14px;
        padding-block: 28px
    }

    h1 {
        font-size: clamp(1.8rem, 8vw, 2.2rem)
    }

    .card {
        padding: 14px;
        border-radius: 14px
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important
    }
}

/* PRINT */
@media print {

    header,
    footer,
    .cookie-modal-backdrop {
        display: none !important
    }

    .btn {
        display: none !important
    }

    body {
        color: #000;
        background: #fff
    }

    .card {
        box-shadow: none;
        background: #fff
    }
}

/* ---------- DARK MODE (manual override) ---------- */
:root[data-theme="dark"] {
    --ink: #e8eaf0;
    --coal: #0a0a0a;
    --paper: #0c0d10;
    --smoke: #121418;
    --muted: #9aa3b2;
    --shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
}

:root[data-theme="dark"] body {
    background: var(--paper);
    color: var(--ink)
}

:root[data-theme="dark"] header.nav {
    background: #0f1216;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

:root[data-theme="dark"] nav a {
    color: var(--ink)
}

/* HERO in dark */
:root[data-theme="dark"] .hero {
    background: linear-gradient(180deg, #0f1216, #0b0d11);
    color: var(--ink)
}

:root[data-theme="dark"] .hero .lead {
    color: #dbe3ef
}

:root[data-theme="dark"] .hero .card {
    background: #12161d;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .hero .card h3 {
    color: #fff
}

:root[data-theme="dark"] .hero .card p,
:root[data-theme="dark"] .hero .card li {
    color: #e6edf6
}

:root[data-theme="dark"] .hero .card ul {
    list-style: disc;
    margin: 6px 0 0 1.1em;
    padding: 0
}

/* Brand cards darker */
:root[data-theme="dark"] .brand-card {
    background: linear-gradient(180deg, #12161d, #0f141a);
    border: 1px solid rgba(255, 255, 255, .06)
}

/* Contact section background in dark */
:root[data-theme="dark"] .contact {
    background: linear-gradient(180deg, #0f1216, #0c0d10)
}

/* Footer in dark */
:root[data-theme="dark"] footer {
    background: #060708;
    color: #b8c1d1
}

:root[data-theme="dark"] footer a {
    color: #fff
}

/* Form fields readable in dark */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: #0f141a;
    color: var(--ink);
    border-color: #2a3240;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #9aa3b2
}

/* Theme toggle fits dark header */
:root[data-theme="dark"] .theme-toggle {
    background: #15181e;
    color: #e8eaf0;
    border-color: #2a2f3a
}

/* ---------- Automatic dark (OS preference) ---------- */
@media (prefers-color-scheme:dark) {
    html:not([data-theme]) body {
        background: #0c0d10;
        color: #e8eaf0
    }

    html:not([data-theme]) header.nav {
        background: #0f1216;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    html:not([data-theme]) .hero {
        background: linear-gradient(180deg, #0f1216, #0b0d11)
    }

    html:not([data-theme]) .brand-card {
        background: linear-gradient(180deg, #12161d, #0f141a);
        border: 1px solid rgba(255, 255, 255, .06)
    }

    html:not([data-theme]) .contact {
        background: linear-gradient(180deg, #0f1216, #0c0d10)
    }

    html:not([data-theme]) .theme-toggle {
        background: #15181e;
        color: #e8eaf0;
        border-color: #2a2f3a
    }

    html:not([data-theme]) input,
    html:not([data-theme]) textarea,
    html:not([data-theme]) select {
        background: #0f141a;
        color: #e8eaf0;
        border-color: #2a3240;
    }
}

/* ---------- Unify card style across sections in DARK ---------- */
/* Manual dark */
:root[data-theme="dark"] #services .card,
:root[data-theme="dark"] #team .card,
:root[data-theme="dark"] #brands .brand-card,
:root[data-theme="dark"] #news .card,
:root[data-theme="dark"] #contact .card {
    background: #12161d !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
}

:root[data-theme="dark"] #services .card h3,
:root[data-theme="dark"] #team .card h3,
:root[data-theme="dark"] #brands .brand-card h3,
:root[data-theme="dark"] #news .card h3,
:root[data-theme="dark"] #contact .card h3 {
    color: #ffffff !important;
}

:root[data-theme="dark"] #services .card p,
:root[data-theme="dark"] #services .card li,
:root[data-theme="dark"] #team .card p,
:root[data-theme="dark"] #team .card li,
:root[data-theme="dark"] #brands .brand-card p,
:root[data-theme="dark"] #brands .brand-card li,
:root[data-theme="dark"] #news .card p,
:root[data-theme="dark"] #news .card li,
:root[data-theme="dark"] #contact .card p,
:root[data-theme="dark"] #contact .card li {
    color: #e6edf6 !important;
}

/* === FAQ dark-theme parity (Manual dark) === */
:root[data-theme="dark"] #faq .card {
    background: #12161d !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
    color: #e6edf6 !important;
}

:root[data-theme="dark"] #faq .faq-item {
    border-color: rgba(255, 255, 255, .10);
}

/* OS automatic dark */
@media (prefers-color-scheme:dark) {

    html:not([data-theme]) #services .card,
    html:not([data-theme]) #team .card,
    html:not([data-theme]) #brands .brand-card,
    html:not([data-theme]) #news .card,
    html:not([data-theme]) #contact .card {
        background: #12161d !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
    }

    html:not([data-theme]) #services .card h3,
    html:not([data-theme]) #team .card h3,
    html:not([data-theme]) #brands .brand-card h3,
    html:not([data-theme]) #news .card h3,
    html:not([data-theme]) #contact .card h3 {
        color: #ffffff !important;
    }

    html:not([data-theme]) #services .card p,
    html:not([data-theme]) #services .card li,
    html:not([data-theme]) #team .card p,
    html:not([data-theme]) #team .card li,
    html:not([data-theme]) #brands .brand-card p,
    html:not([data-theme]) #brands .brand-card li,
    html:not([data-theme]) #news .card p,
    html:not([data-theme]) #news .card li,
    html:not([data-theme]) #contact .card p,
    html:not([data-theme]) #contact .card li {
        color: #e6edf6 !important;
    }

    /* === FAQ dark-theme parity (OS automatic dark) === */
    html:not([data-theme]) #faq .card {
        background: #12161d !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
        color: #e6edf6 !important;
    }

    html:not([data-theme]) #faq .faq-item {
        border-color: rgba(255, 255, 255, .10);
    }
}

/* -------- Mobile Typography Polish -------- */
@media (max-width: 600px) {
    h1 {
        font-size: clamp(2.2rem, 8vw, 2.6rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.9rem, 7vw, 2.3rem);
        line-height: 1.25;
        margin-bottom: 14px;
    }

    h3 {
        font-size: clamp(1.3rem, 5.8vw, 1.6rem);
        line-height: 1.3;
        margin-bottom: 8px;
    }

    body {
        font-size: 17px;
        line-height: 1.7;
    }

    p,
    li {
        margin-bottom: 0.9em;
    }

    .section .title {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .card {
        padding: 22px;
    }

    .brand-card {
        padding: 26px;
        margin-bottom: 8px;
    }
}

/* === Privacy page typography polish === */
#privacy h2,
#privacy h3 {
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.35;
}

#privacy p {
    margin-bottom: 1.1em;
}

#privacy ul {
    margin: 0.9em 0 1.4em 1.4em;
    line-height: 1.65;
}

#privacy li {
    margin-bottom: 0.45em;
}

/* Slightly wider readable column */
#privacy .container {
    max-width: 900px;
    line-height: 1.68;
}

/* Make the card feel like index’s card layout */
#privacy .container.card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .04), #fff);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: clamp(28px, 3vw, 42px);
}

/* Switch logo in dark mode */
[data-theme="dark"] #site-logo {
    content: url("logga_white.png");
}

/* === Blog Post Styling: dark/light consistency === */

/* Article wrapper */
article.card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .04), var(--paper));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Dark mode article card */
[data-theme="dark"] article.card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .06), #15181e);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
}

[data-theme="dark"] article.card p,
[data-theme="dark"] article.card li,
[data-theme="dark"] article.card ol,
[data-theme="dark"] article.card ul {
    color: var(--ink);
}

/* Article headings spacing */
article.card h2 {
    margin-top: 42px;
    margin-bottom: 14px;
}

article.card h3 {
    margin-top: 32px;
    margin-bottom: 10px;
}

/* Dark mode link readability */
[data-theme="dark"] article.card a {
    color: var(--red);
    opacity: 1;
}

/* Images card inside hero */
[data-theme="dark"] .hero .card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .06), #15181e);
    box-shadow: var(--shadow);
}

/* Dark hero background */
[data-theme="dark"] .hero {
    background: #0f1216;
    color: var(--ink);
}

/* Muted text in dark mode inside posts */
[data-theme="dark"] .muted {
    color: #9aa3b2;
}

/* Article layout cards */
[data-theme="dark"] .cols .card {
    background: linear-gradient(180deg, rgba(230, 34, 34, .06), #15181e);
}

/* Back link */
[data-theme="dark"] a[href*="news"] {
    color: var(--red);
}

/* Footer border handling */
[data-theme="dark"] footer nav a {
    color: #e8eaf0;
}

/* Force article CTA card to follow dark card styling */
[data-theme="dark"] article.card .card {
    background: #1a1f27 !important;
    border: 1px solid #2a2f37;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    color: #e8eaf0;
}

/* === CTA card improvements === */

/* Always force white CTA button text */
.cta-card .btn,
article.card .card .btn {
    color: #fff !important;
}

/* Keep it white on hover too */
.cta-card .btn:hover,
article.card .card .btn:hover {
    color: #fff !important;
}

/* Reduce space above CTA card heading */
article.card .card h3 {
    margin-top: 12px !important;
}

/* === Force all buttons to have white text in dark mode === */
[data-theme="dark"] .btn {
    color: #fff !important;
}

/* Keep white on hover too */
[data-theme="dark"] .btn:hover {
    color: #fff !important;
}