/* ============================================================================
 TRYGG KI i produksjon, Layout & components
 All brand values come from brand.css custom properties. No hard-coded brand
 colors live in this file. Headings use the serif --font-display; body sans.
 ============================================================================ */

/* ----------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font-sans);
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 color: var(--ink-soft);
 background: var(--white);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------- Layout ----- */
.container {
 width: 100%;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(8px, 1vw, 14px); }

.section__title {
 font-family: var(--font-display);
 font-size: var(--fs-h2);
 font-weight: var(--fw-bold);
 letter-spacing: -0.01em;
 line-height: 1.16;
 color: var(--ink);
}
.section__title--center { text-align: center; margin-bottom: clamp(20px, 2vw, 32px); }

/* ------------------------------------------------------------ Eyebrow ----- */
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 font-size: var(--fs-eyebrow);
 font-weight: var(--fw-bold);
 letter-spacing: var(--tracking-eyebrow);
 text-transform: uppercase;
}
.eyebrow img { width: 22px; height: 22px; }
.eyebrow--on-dark { color: #9FE3B2; }
.eyebrow--green { color: var(--brand-green); }

/* -------------------------------------------------------------- Buttons --- */
.btn {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 padding: 13px 22px;
 border-radius: var(--r-md);
 font-weight: var(--fw-semibold);
 font-size: var(--fs-body);
 line-height: 1;
 border: 1.5px solid transparent;
 white-space: nowrap;
 cursor: pointer;
 transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
 box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn__icon { width: 20px; height: 20px; }
.btn--lg { padding: 15px 26px; font-size: 1.05rem; }

/* Mint button, used everywhere (sits on dark/photo surfaces) */
.btn--mint { background: var(--btn-mint); color: var(--btn-mint-ink); }
.btn--mint:hover { background: var(--btn-mint-hover); }

/* Ghost button, outlined, dark surfaces */
.btn--ghost { background: transparent; color: var(--offwhite); border-color: rgba(246,249,255,0.28); }
.btn--ghost:hover { background: rgba(246,249,255,0.08); border-color: rgba(246,249,255,0.5); }

/* ------------------------------------------------------------- Links ------ */
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); }
.link img { width: 20px; height: 20px; }
.link:hover { gap: 11px; }
.link--green { color: var(--brand-green); }
.link--on-dark { color: var(--white); }
.link--on-dark .link__arrow { filter: brightness(0) invert(1); }

/* ----------------------------------------------------------- Brand lockup - */
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand__mark { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
 font-weight: var(--fw-extrabold);
 font-size: 1.16rem;
 letter-spacing: 0.06em;
 color: var(--offwhite);
}
.brand__sub {
 margin-top: 4px;
 font-size: 0.6rem;
 font-weight: var(--fw-semibold);
 letter-spacing: 0.26em;
 color: var(--muted-on-dark);
}

/* ============================================================ HEADER ===== */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 height: 80px;
}
.nav__links {
 display: flex;
 align-items: center;
 gap: clamp(12px, 1.85vw, 30px);
 margin-left: auto;
 margin-right: clamp(12px, 1.85vw, 28px);
}
.nav__links a {
 font-size: 0.92rem;
 font-weight: var(--fw-medium);
 color: #D5DEEC;
 white-space: nowrap;
 transition: color var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__cta { padding: 10px 18px; }
.nav__cta .btn__icon { width: 19px; height: 19px; }

/* ============================================================== HERO ===== */
.hero {
 position: relative;
 background: var(--navy-900);
 color: var(--offwhite);
 overflow: hidden;
 isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
 position: absolute;
 inset: 0 0 auto auto;
 width: 64%;
 height: 100%;
 object-fit: cover;
 object-position: 72% center;
 filter: brightness(0.7) saturate(0.88) contrast(1.02);
}
.hero__scrim {
 position: absolute; inset: 0;
 background:
 linear-gradient(90deg,
 var(--navy-900) 0%,
 var(--navy-900) 33%,
 rgba(2,15,39,0.88) 45%,
 rgba(2,15,39,0.42) 62%,
 rgba(2,15,39,0.18) 80%,
 rgba(2,15,39,0.34) 100%),
 linear-gradient(180deg, rgba(2,15,39,0.5) 0%, rgba(2,15,39,0) 24%, rgba(2,15,39,0) 72%, var(--navy-900) 100%);
}
.hero__inner { padding-top: 108px; padding-bottom: clamp(34px, 3.8vw, 56px); }
.hero__content { max-width: 620px; }
.hero__title {
 margin-top: 16px;
 font-family: var(--font-display);
 font-size: var(--fs-hero);
 font-weight: var(--fw-bold);
 line-height: 1.04;
 letter-spacing: -0.015em;
 color: var(--white);
}
.hero__lead {
 margin-top: 20px;
 max-width: 430px;
 font-size: var(--fs-lead);
 color: var(--muted-on-dark);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ============================================================ TRUST BAR == */
.trustbar { background: var(--navy-900); border-top: 1px solid var(--navy-700); }
.trustbar__grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 padding-block: 20px;
}
.trust {
 display: flex;
 align-items: center;
 gap: 11px;
 padding-inline: clamp(10px, 1.4vw, 22px);
}
.trust + .trust { border-left: 1px solid var(--navy-700); }
.trust__icon { width: 28px; height: 28px; flex: none; opacity: 0.95; }
.trust__title {
 font-weight: var(--fw-bold);
 font-size: 0.83rem;
 color: var(--offwhite);
 line-height: 1.25;
 white-space: nowrap; /* respect <br>, never break "on-prem" mid-word */
}

/* ============================================================= PILLARS === */
.pillars__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(14px, 1.3vw, 18px);
}
.pillar {
 padding: clamp(18px, 1.8vw, 24px);
 border: 1px solid var(--card-line);
 border-radius: var(--r-xl);
 background: var(--white);
 box-shadow: var(--shadow-sm);
}
.pillar__top { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 20px; }
.pillar__chip {
 width: 46px; height: 46px; border-radius: var(--r-md);
 display: grid; place-items: center; flex: none;
}
.pillar__chip img { width: 31px; height: 31px; }
.pillar__chip--green { background: var(--chip-green); }
.pillar__chip--blue { background: var(--chip-blue); }
.pillar__chip--gold { background: var(--chip-gold); }
.pillar__title {
 font-family: var(--font-display);
 font-size: 1.08rem;
 font-weight: var(--fw-bold);
 color: var(--ink);
 line-height: 1.2;
 white-space: nowrap;
}
.pillar__tag { margin-top: 6px; font-size: 0.86rem; color: var(--slate); line-height: 1.45; }

/* --------------------------------------------------- Solid check lists --- */
.checks { display: grid; gap: 12px; }
.checks li {
 position: relative;
 padding-left: 30px;
 font-size: 0.94rem;
 color: var(--ink-soft);
 line-height: 1.4;
}
.checks li::before {
 content: "";
 position: absolute;
 left: 0; top: 0px;
 width: 20px; height: 20px;
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}
.checks--green li::before { background-image: url("../svg/46-check-solid-green.svg"); }
.checks--blue li::before { background-image: url("../svg/47-check-solid-blue.svg"); }
.checks--gold li::before { background-image: url("../svg/48-check-solid-gold.svg"); }
.checks--on-dark li { color: var(--muted-on-dark); }

/* ========================================================= PILOT BANNER == */
.pilot-banner {
 position: relative;
 display: flex;
 align-items: center;
 gap: clamp(26px, 3vw, 52px);
 padding: clamp(15px, 1.6vw, 22px) clamp(28px, 3vw, 44px);
 border-radius: var(--r-xl);
 background: linear-gradient(120deg, var(--navy-900) 0%, #06203f 60%, #0a2a4d 100%);
 color: var(--offwhite);
 overflow: hidden;
 isolation: isolate;
}
.pilot-banner::after {
 content: "";
 position: absolute; inset: 0; z-index: -1;
 background: url("../img/header.png") right center / cover no-repeat;
 opacity: 0.16;
 -webkit-mask: linear-gradient(90deg, transparent 28%, #000 105%);
 mask: linear-gradient(90deg, transparent 28%, #000 105%);
}
.pilot-banner__info { display: flex; align-items: center; gap: 20px; flex: 1.15; }
.pilot-banner__chip {
 width: 66px; height: 66px; border-radius: 50%; flex: none;
 display: grid; place-items: center;
 border: 1px solid rgba(199, 212, 230, 0.35);
}
.pilot-banner__chip img { width: 40px; height: 40px; }
.pilot-banner__title {
 font-family: var(--font-display);
 font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
 font-weight: var(--fw-bold);
 color: var(--white);
}
.pilot-banner .eyebrow--green {
 margin-top: 9px; display: block; color: #86CF9C;
 text-transform: none; letter-spacing: 0; font-size: 0.94rem; font-weight: var(--fw-semibold);
}
.pilot-banner__text { margin-top: 10px; max-width: 320px; font-size: 0.9rem; color: var(--muted-on-dark); }
.pilot-banner__checks { flex: 0 1 auto; gap: 11px; }
.pilot-banner__checks li { font-size: 0.9rem; }
.pilot-banner__cta { flex: none; }

/* ========================================================== HOW WE WORK == */
.how { position: relative; }
.how__grid {
 position: relative;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: clamp(14px, 1.4vw, 22px);
 margin-top: 44px; /* room above the cards for the badges */
}
/* connector line runs through the badge centres; each badge's white ring
 breaks it cleanly so it reads as a continuous stepper between the numbers */
.how__grid::before {
 content: "";
 position: absolute;
 top: -19px; left: 10%; right: 10%;
 height: 2px;
 background: var(--card-line);
 z-index: 0;
}
.how-card {
 position: relative;
 padding: 32px 16px 26px;
 text-align: center;
 border: 1px solid var(--card-line);
 border-radius: var(--r-lg);
 background: var(--white);
}
.how-card__num {
 position: absolute;
 top: -36px; left: 50%; transform: translateX(-50%); /* centre on the line */
 width: 34px; height: 34px; border-radius: 50%;
 background: var(--navy-900); color: var(--white);
 display: grid; place-items: center;
 font-weight: var(--fw-bold); font-size: 0.9rem;
 box-shadow: 0 0 0 6px var(--white); /* white ring breaks the line cleanly */
 z-index: 2;
}
.how-card__icon { width: 48px; height: 48px; margin: 0 auto 16px; }
.how-card__title {
 font-family: var(--font-display);
 font-size: 1.1rem;
 font-weight: var(--fw-bold);
 color: var(--ink);
}
.how-card__desc { margin-top: 8px; font-size: 0.82rem; color: var(--slate); line-height: 1.4; }

/* =========================================================== INDUSTRIES == */
.industries__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: clamp(14px, 1.3vw, 20px);
}
.ind-card {
 display: flex;
 gap: 14px;
 align-items: flex-start;
 padding: clamp(16px, 1.6vw, 22px);
 border: 1px solid var(--card-line);
 border-radius: var(--r-lg);
 background: var(--white);
}
.ind-card__icon { width: 44px; height: 44px; flex: none; }
.ind-card__title {
 font-family: var(--font-display);
 font-size: 1rem;
 font-weight: var(--fw-semibold);
 color: var(--ink);
 line-height: 1.2;
}
.ind-card__desc { margin-top: 6px; font-size: 0.83rem; color: var(--slate); line-height: 1.4; }

/* ==================================================== GOVERNANCE BANNER == */
.gov-banner {
 display: flex;
 align-items: center;
 gap: clamp(26px, 3vw, 52px);
 padding: clamp(16px, 1.7vw, 24px) clamp(24px, 2.6vw, 38px);
 border-radius: var(--r-xl);
 background: var(--tint-sage);
 border: 1px solid var(--tint-sage-line);
}
.gov-banner__info { display: flex; align-items: center; gap: 20px; flex: 1.25; }
.gov-banner__chip {
 width: 66px; height: 66px; border-radius: var(--r-md); flex: none;
 display: grid; place-items: center;
 background: #DCE9DC;
}
.gov-banner__chip img { width: 44px; height: 44px; }
.gov-banner__title {
 font-family: var(--font-display);
 font-size: clamp(1.3rem, 1rem + 1.05vw, 1.7rem);
 font-weight: var(--fw-bold);
 color: var(--ink);
 line-height: 1.2;
}
.gov-banner__text { margin-top: 9px; max-width: 360px; font-size: 0.92rem; color: var(--slate); }
.gov-banner__checks {
 flex: 1;
 gap: 13px;
 border-left: 1px solid var(--tint-sage-line);
 padding-left: clamp(24px, 2.6vw, 44px);
}
.gov-banner__checks li { font-size: 0.9rem; }

/* ============================================================= CTA BANNER = */
.cta-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 26px;
 padding: clamp(17px, 1.8vw, 26px) clamp(28px, 3vw, 48px);
 border-radius: var(--r-xl);
 background: linear-gradient(120deg, var(--navy-900) 0%, #051d39 100%);
 color: var(--offwhite);
}
.cta-banner__title {
 font-family: var(--font-display);
 font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
 font-weight: var(--fw-bold);
 color: var(--white);
}
.cta-banner__text { margin-top: 9px; color: var(--muted-on-dark); }
.cta-banner__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ============================================================== FOOTER === */
.site-footer {
 background: var(--navy-950);
 color: var(--muted-on-dark);
 padding-top: clamp(44px, 4.5vw, 64px);
 padding-bottom: 28px;
}
.footer__grid {
 display: grid;
 grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr;
 gap: clamp(24px, 2.6vw, 44px);
 padding-bottom: 36px;
 border-bottom: 1px solid var(--navy-700);
}
.footer__tag { margin-top: 18px; max-width: 250px; font-size: 0.86rem; color: var(--faint-on-dark); line-height: 1.55; }
.footer__meta { margin-top: 12px; display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--muted-on-dark); }
.footer__flag { font-size: 1.05rem; }
.footer__social { display: flex; gap: 12px; margin-top: 18px; }
.footer__social a { opacity: 0.8; transition: opacity var(--dur) var(--ease); }
.footer__social a:hover { opacity: 1; }
.footer__heading {
 font-size: 0.82rem;
 font-weight: var(--fw-bold);
 color: var(--offwhite);
 margin-bottom: 16px;
 letter-spacing: 0.01em;
}
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: 0.9rem; color: var(--muted-on-dark); transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--white); }
.footer__contact { display: flex; flex-direction: column; }
.footer__contact-row { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--muted-on-dark); margin-bottom: 12px; }
.footer__contact-row img { width: 18px; height: 18px; opacity: 0.85; }
.footer__badges { display: flex; gap: 7px; margin-top: 10px; flex-wrap: nowrap; }
.badge {
 display: inline-flex; align-items: center; gap: 7px;
 padding: 8px 9px;
 border: 1px solid var(--navy-700);
 border-radius: var(--r-sm);
 font-size: 0.62rem;
 line-height: 1.15;
 white-space: nowrap;
 color: var(--muted-on-dark);
}
.badge img { width: 18px; height: 18px; flex: none; opacity: 0.9; }
.footer__bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 14px;
 padding-top: 22px;
 font-size: 0.82rem;
 color: var(--faint-on-dark);
}
.footer__legal { display: flex; gap: 22px; }
.footer__legal a:hover { color: var(--white); }

/* ============================================================ RESPONSIVE = */
@media (max-width: 1000px) {
 .pilot-banner { flex-wrap: wrap; }
 .pilot-banner__info { flex: 1 1 100%; }
 .gov-banner { flex-wrap: wrap; }
 .gov-banner__checks { border-left: none; padding-left: 0; flex: 1 1 100%; }
}
@media (max-width: 940px) {
 .nav__links { display: none; }
 .pillars__grid { grid-template-columns: 1fr; }
 .how__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
 .how__grid::before { display: none; }
 .industries__grid { grid-template-columns: repeat(2, 1fr); }
 .trustbar__grid { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
 .trust:nth-child(odd) { border-left: none; }
 .footer__grid { grid-template-columns: 1fr 1fr; }
 .hero__media img { width: 100%; opacity: 0.55; }
 .hero__lead { max-width: none; }
}
@media (max-width: 600px) {
 .hero__inner { padding-top: 100px; }
 .how__grid, .industries__grid, .trustbar__grid, .footer__grid { grid-template-columns: 1fr; }
 .trust { border-left: none !important; }
 .cta-banner, .pilot-banner, .gov-banner { flex-direction: column; align-items: flex-start; }
 .btn { width: 100%; justify-content: center; }
}