/* ======================================================
  ALPE FILM
  Main stylesheet
  Palette:
  #780000 · #C1121F · #FDF0D5 · #003049 · #669BBC
====================================================== */


* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}


:root {
 --red-dark: #780000;
 --red: #c1121f;
 --cream: #fdf0d5;
 --cream-soft: #fff7e6;
 --cream-deep: #f3dfbb;
 --blue-dark: #003049;
 --blue-light: #669bbc;


 --line: rgba(0, 48, 73, 0.18);
 --text-soft: rgba(0, 48, 73, 0.72);
}


html {
 scroll-behavior: smooth;
}


body {
 background-color: var(--cream);
 color: var(--blue-dark);
 font-family: "Inter", Arial, Helvetica, sans-serif;
 line-height: 1.55;
 letter-spacing: -0.012em;
}


a {
 color: inherit;
}


img {
 max-width: 100%;
}


.page {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}


/* ======================================================
  HEADER
====================================================== */


.site-header {
 width: 100%;
 padding: 24px 7%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 32px;
 background-color: rgba(253, 240, 213, 0.92);
 border-bottom: 1px solid var(--line);
 position: sticky;
 top: 0;
 z-index: 100;
 backdrop-filter: blur(18px);
}


.brand {
 display: inline-flex;
 align-items: center;
 gap: 15px;
 text-decoration: none;
}


.brand-symbol {
 width: 46px;
 height: 46px;
 border: 1px solid var(--blue-dark);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: 22px;
 line-height: 1;
 color: var(--blue-dark);
 position: relative;
 background-color: var(--cream);
}


.brand-symbol::after {
 content: "";
 position: absolute;
 width: 14px;
 height: 14px;
 right: -7px;
 bottom: -7px;
 background-color: var(--red);
}


.brand-text strong {
 display: block;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: 32px;
 font-weight: 400;
 line-height: 0.95;
 letter-spacing: -0.045em;
 color: var(--blue-dark);
}


.brand-text small {
 display: block;
 margin-top: 6px;
 color: var(--text-soft);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}


.main-nav {
 display: flex;
 align-items: center;
 gap: 30px;
}


.main-nav a {
 text-decoration: none;
 color: var(--blue-dark);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.02em;
 transition: 0.22s ease;
 position: relative;
 white-space: nowrap;
}


.main-nav a::after {
 content: "";
 height: 1px;
 background-color: var(--red);
 position: absolute;
 left: 0;
 right: 0;
 bottom: -5px;
 transform: scaleX(0);
 transform-origin: left;
 transition: 0.22s ease;
}


.main-nav a:hover {
 color: var(--red);
}


.main-nav a:hover::after {
 transform: scaleX(1);
}


/* ======================================================
  TYPOGRAPHY
====================================================== */


.eyebrow {
 color: var(--red);
 text-transform: uppercase;
 letter-spacing: 0.2em;
 font-size: 11px;
 font-weight: 800;
 margin-bottom: 18px;
}


.eyebrow.light {
 color: var(--cream);
}


h1,
h2,
h3,
blockquote {
 font-family: "Instrument Serif", Georgia, serif;
 font-weight: 400;
 letter-spacing: -0.06em;
}


h1 {
 font-size: clamp(58px, 9vw, 132px);
 line-height: 0.84;
 max-width: 980px;
 color: var(--blue-dark);
}


h2 {
 font-size: clamp(42px, 6vw, 86px);
 line-height: 0.88;
 color: var(--blue-dark);
}


h3 {
 font-size: clamp(34px, 3vw, 48px);
 line-height: 0.95;
 color: var(--blue-dark);
}


p {
 color: var(--text-soft);
}


.text-link {
 display: inline-flex;
 margin-top: 8px;
 color: var(--red);
 text-decoration: none;
 font-weight: 800;
}


.text-link:hover {
 color: var(--red-dark);
}


/* ======================================================
  HERO
====================================================== */


.hero {
 display: grid;
 grid-template-columns: 1.02fr 0.98fr;
 min-height: calc(100vh - 95px);
 border-bottom: 1px solid var(--line);
}


.hero-left {
 padding: clamp(44px, 8vw, 110px) 7%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 background:
   radial-gradient(circle at top left, rgba(193, 18, 31, 0.10), transparent 34%),
   linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
}


.hero-lead {
 margin-top: 34px;
 max-width: 680px;
 font-size: clamp(18px, 2vw, 23px);
 color: var(--text-soft);
}


.hero-links {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 42px;
}


.hero-links a {
 min-height: 52px;
 padding: 0 24px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 font-size: 13px;
 font-weight: 800;
 transition: 0.25s ease;
}


.hero-links a:first-child {
 background-color: var(--blue-dark);
 color: var(--cream);
}


.hero-links a:first-child:hover {
 background-color: var(--red-dark);
 transform: translateY(-2px);
}


.hero-links a:last-child {
 border: 1px solid rgba(0, 48, 73, 0.28);
 color: var(--blue-dark);
 background-color: transparent;
}


.hero-links a:last-child:hover {
 border-color: var(--red);
 color: var(--red);
 transform: translateY(-2px);
}


.hero-right {
 padding: 42px 7% 42px 0;
 display: flex;
 align-items: stretch;
 background-color: var(--cream);
}


.visual-card {
 width: 100%;
 display: grid;
 grid-template-rows: 1fr auto;
 background-color: var(--cream-soft);
 border: 1px solid var(--line);
}


.visual-image {
 min-height: 620px;
 background:
   linear-gradient(180deg, rgba(0, 48, 73, 0.08), rgba(0, 48, 73, 0.34)),
   radial-gradient(circle at 72% 20%, rgba(253, 240, 213, 0.55), transparent 26%),
   linear-gradient(135deg, #669bbc 0%, #fdf0d5 47%, #003049 100%);
 display: flex;
 align-items: flex-end;
 padding: 34px;
 position: relative;
 overflow: hidden;
}


.visual-image::before {
 content: "";
 position: absolute;
 inset: 24px;
 border: 1px solid rgba(253, 240, 213, 0.55);
}


.visual-image::after {
 content: "";
 position: absolute;
 width: 240px;
 height: 420px;
 right: 13%;
 bottom: -170px;
 background-color: rgba(120, 0, 0, 0.20);
 transform: rotate(15deg);
}


.visual-image span {
 position: relative;
 z-index: 2;
 color: var(--cream);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.24em;
 text-transform: uppercase;
}


.visual-caption {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 24px;
 padding: 26px;
 border-top: 1px solid var(--line);
}


.visual-caption small {
 color: var(--red);
 font-weight: 800;
 letter-spacing: 0.18em;
}


.visual-caption p {
 font-size: 15px;
}


/* ======================================================
  GENERAL SECTIONS
====================================================== */


.section {
 padding: clamp(70px, 9vw, 130px) 7%;
}


.section-kicker {
 border-top: 1px solid var(--blue-dark);
 padding-top: 18px;
 margin-bottom: 42px;
}


.section-kicker span {
 color: var(--red);
 text-transform: uppercase;
 letter-spacing: 0.2em;
 font-size: 11px;
 font-weight: 800;
}


.editorial-grid {
 display: grid;
 grid-template-columns: 1.08fr 0.92fr;
 gap: clamp(36px, 6vw, 90px);
 align-items: start;
}


.body-copy {
 max-width: 680px;
}


.body-copy p {
 font-size: 19px;
 margin-bottom: 22px;
}


.body-copy p:last-child {
 margin-bottom: 0;
}


.statement-section {
 padding: clamp(60px, 8vw, 120px) 7%;
 background-color: var(--blue-dark);
}


.statement-section p {
 color: var(--cream);
 font-family: "Instrument Serif", Georgia, serif;
 font-size: clamp(40px, 6vw, 86px);
 line-height: 0.95;
 letter-spacing: -0.06em;
 max-width: 1180px;
}


/* ======================================================
  SERVICES SUBNAV
====================================================== */


.services-subnav {
 width: 100%;
 min-height: 58px;
 padding: 0 7%;
 background-color: var(--cream-soft);
 border-bottom: 1px solid var(--line);
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 34px;
 position: sticky;
 top: 95px;
 z-index: 90;
 backdrop-filter: blur(16px);
}


.services-subnav a {
 text-decoration: none;
 color: var(--blue-dark);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.02em;
 transition: 0.22s ease;
 position: relative;
 white-space: nowrap;
}


.services-subnav a::after {
 content: "";
 height: 1px;
 background-color: var(--red);
 position: absolute;
 left: 0;
 right: 0;
 bottom: -5px;
 transform: scaleX(0);
 transform-origin: left;
 transition: 0.22s ease;
}


.services-subnav a:hover {
 color: var(--red);
}


.services-subnav a:hover::after {
 transform: scaleX(1);
}


/* ======================================================
  CONTACT
====================================================== */


.contact-section {
 display: grid;
 grid-template-columns: 1fr 0.82fr;
 gap: clamp(36px, 6vw, 84px);
 padding: clamp(70px, 9vw, 120px) 7%;
 background-color: var(--blue-dark);
 color: var(--cream);
}


.contact-section h2 {
 color: var(--cream);
}


.contact-left p:not(.eyebrow) {
 color: rgba(253, 240, 213, 0.76);
 font-size: 19px;
 max-width: 640px;
 margin-top: 24px;
}


.contact-right {
 display: grid;
 align-content: start;
 gap: 1px;
 background-color: rgba(253, 240, 213, 0.18);
 border: 1px solid rgba(253, 240, 213, 0.18);
}


.contact-right a {
 background-color: var(--cream);
 color: var(--blue-dark);
 text-decoration: none;
 padding: 26px;
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 18px;
 align-items: center;
 transition: 0.25s ease;
}


.contact-right a:hover {
 background-color: var(--cream-soft);
}


.contact-right small {
 display: block;
 color: var(--red);
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 11px;
 font-weight: 800;
 margin-bottom: 6px;
}


.contact-right strong {
 font-size: 20px;
}


.contact-right span {
 color: var(--red);
 font-size: 26px;
 font-weight: 800;
}


/* ======================================================
  ABOUT PAGE — LIVING BACKGROUND
====================================================== */


.about-page {
 position: relative;
 overflow-x: hidden;
 background:
   linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 45%, var(--cream-deep) 100%);
}


.about-lava-bg {
 position: fixed;
 inset: 0;
 z-index: -1;
 overflow: hidden;
 pointer-events: none;
 background:
   radial-gradient(circle at 18% 20%, rgba(102, 155, 188, 0.20), transparent 32%),
   radial-gradient(circle at 80% 68%, rgba(193, 18, 31, 0.12), transparent 34%),
   linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
}


.lava {
 position: absolute;
 display: block;
 border-radius: 999px;
 filter: blur(38px);
 opacity: 0.55;
 mix-blend-mode: multiply;
 will-change: transform, border-radius;
}


.lava-one {
 width: 440px;
 height: 440px;
 left: -140px;
 top: 8%;
 background: rgba(102, 155, 188, 0.55);
 animation: lavaOne 16s ease-in-out infinite alternate;
}


.lava-two {
 width: 560px;
 height: 560px;
 right: -180px;
 top: 18%;
 background: rgba(193, 18, 31, 0.23);
 animation: lavaTwo 21s ease-in-out infinite alternate;
}


.lava-three {
 width: 380px;
 height: 380px;
 left: 34%;
 bottom: -130px;
 background: rgba(120, 0, 0, 0.16);
 animation: lavaThree 19s ease-in-out infinite alternate;
}


.lava-four {
 width: 320px;
 height: 320px;
 right: 24%;
 bottom: 16%;
 background: rgba(102, 155, 188, 0.30);
 animation: lavaFour 24s ease-in-out infinite alternate;
}


@keyframes lavaOne {
 0% {
   transform: translate(0, 0) scale(1) rotate(0deg);
   border-radius: 58% 42% 48% 52%;
 }


 50% {
   transform: translate(130px, 95px) scale(1.18) rotate(18deg);
   border-radius: 42% 58% 62% 38%;
 }


 100% {
   transform: translate(210px, -20px) scale(0.92) rotate(-12deg);
   border-radius: 62% 38% 44% 56%;
 }
}


@keyframes lavaTwo {
 0% {
   transform: translate(0, 0) scale(1) rotate(0deg);
   border-radius: 46% 54% 60% 40%;
 }


 50% {
   transform: translate(-160px, 90px) scale(0.88) rotate(-20deg);
   border-radius: 60% 40% 44% 56%;
 }


 100% {
   transform: translate(-90px, 210px) scale(1.16) rotate(16deg);
   border-radius: 40% 60% 56% 44%;
 }
}


@keyframes lavaThree {
 0% {
   transform: translate(0, 0) scale(1) rotate(0deg);
   border-radius: 52% 48% 44% 56%;
 }


 50% {
   transform: translate(-120px, -130px) scale(1.2) rotate(22deg);
   border-radius: 38% 62% 58% 42%;
 }


 100% {
   transform: translate(150px, -80px) scale(0.9) rotate(-18deg);
   border-radius: 62% 38% 42% 58%;
 }
}


@keyframes lavaFour {
 0% {
   transform: translate(0, 0) scale(1) rotate(0deg);
   border-radius: 45% 55% 50% 50%;
 }


 50% {
   transform: translate(90px, -110px) scale(1.14) rotate(-14deg);
   border-radius: 58% 42% 38% 62%;
 }


 100% {
   transform: translate(-120px, -50px) scale(0.96) rotate(20deg);
   border-radius: 42% 58% 62% 38%;
 }
}


.about-page .about-hero,
.about-page .about-intro-section,
.about-page .about-values-section {
 position: relative;
 background-color: rgba(255, 247, 230, 0.64);
 backdrop-filter: blur(18px);
}


.about-page .about-statement-section {
 position: relative;
 background-color: rgba(0, 48, 73, 0.88);
 backdrop-filter: blur(20px);
}


.about-hero {
 min-height: calc(100vh - 95px);
 padding: clamp(70px, 9vw, 140px) 7%;
 display: flex;
 align-items: center;
 border-bottom: 1px solid var(--line);
 position: relative;
}


.about-hero::before {
 content: "";
 position: absolute;
 inset: 24px;
 border: 1px solid rgba(0, 48, 73, 0.12);
 pointer-events: none;
}


.about-hero-content {
 max-width: 1160px;
 position: relative;
 z-index: 2;
}


.about-hero h1 {
 max-width: 1120px;
}


.about-intro-section {
 padding: clamp(70px, 9vw, 130px) 7%;
 border-bottom: 1px solid rgba(0, 48, 73, 0.12);
}


.about-values-section {
 padding: clamp(70px, 9vw, 130px) 7%;
 border-bottom: 1px solid rgba(0, 48, 73, 0.12);
}


.about-values-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1px;
 background-color: rgba(0, 48, 73, 0.18);
 border: 1px solid rgba(0, 48, 73, 0.18);
}


.about-value-card {
 background-color: rgba(255, 247, 230, 0.82);
 min-height: 360px;
 padding: 34px;
 display: flex;
 flex-direction: column;
 backdrop-filter: blur(14px);
 transition: 0.28s ease;
}


.about-value-card:hover {
 background-color: rgba(253, 240, 213, 0.92);
}


.about-value-card small {
 color: var(--red);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.18em;
 margin-bottom: auto;
}


.about-value-card h3 {
 margin-bottom: 18px;
}


.about-value-card p {
 font-size: 16px;
}


.about-statement-section {
 padding: clamp(70px, 9vw, 130px) 7%;
}


.about-statement-section blockquote {
 max-width: 1180px;
 color: var(--cream);
 font-size: clamp(44px, 7vw, 96px);
 line-height: 0.92;
}


/* ======================================================
  FOOTER
====================================================== */


.footer {
 background-color: #001f30;
 color: var(--cream);
 padding: 0 7%;
}


.footer-inner {
 display: grid;
 grid-template-columns: 1.4fr 0.7fr 0.9fr 0.9fr;
 gap: clamp(34px, 5vw, 80px);
 padding: clamp(54px, 7vw, 90px) 0;
 border-bottom: 1px solid rgba(253, 240, 213, 0.18);
}


.footer-brand {
 max-width: 430px;
}


.footer-logo {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 color: var(--cream);
 text-decoration: none;
 margin-bottom: 24px;
}


.footer-logo-mark {
 width: 46px;
 height: 46px;
 border: 1px solid rgba(253, 240, 213, 0.62);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: 22px;
 line-height: 1;
 color: var(--cream);
 position: relative;
}


.footer-logo-mark::after {
 content: "";
 position: absolute;
 width: 14px;
 height: 14px;
 right: -7px;
 bottom: -7px;
 background-color: var(--red);
}


.footer-logo strong {
 display: block;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: 32px;
 font-weight: 400;
 line-height: 0.95;
 letter-spacing: -0.045em;
}


.footer-logo small {
 display: block;
 margin-top: 6px;
 color: rgba(253, 240, 213, 0.68);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}


.footer-brand p,
.footer-contact p {
 color: rgba(253, 240, 213, 0.66);
 font-size: 15px;
 max-width: 360px;
}


.footer-column h4 {
 color: var(--cream);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 margin-bottom: 22px;
}


.footer-column nav {
 display: grid;
 gap: 11px;
}


.footer-column a {
 color: rgba(253, 240, 213, 0.72);
 text-decoration: none;
 font-size: 15px;
 transition: 0.22s ease;
 width: fit-content;
}


.footer-column a:hover {
 color: var(--cream);
 transform: translateX(3px);
}


.footer-contact {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}


.footer-contact > a {
 margin-bottom: 10px;
 font-weight: 700;
}


.footer-contact p {
 margin-top: 14px;
}


.footer-bottom {
 min-height: 68px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 color: rgba(253, 240, 213, 0.58);
 font-size: 13px;
}


.footer-bottom a {
 color: var(--cream);
 text-decoration: none;
 font-weight: 700;
}


.footer-bottom a:hover {
 color: var(--blue-light);
}


/* ======================================================
  RESPONSIVE
====================================================== */


@media screen and (max-width: 1150px) {
 .hero,
 .editorial-grid,
 .contact-section {
   grid-template-columns: 1fr;
 }


 .hero-right {
   padding: 0 7% 42px;
 }


 .visual-image {
   min-height: 460px;
 }


 .about-values-grid {
   grid-template-columns: 1fr;
 }


 .about-value-card {
   min-height: 260px;
 }
}


@media screen and (max-width: 1050px) {
 .footer-inner {
   grid-template-columns: 1fr 1fr;
 }
}


@media screen and (max-width: 820px) {
 .site-header {
   padding: 22px;
   flex-direction: column;
   align-items: flex-start;
 }


 .main-nav {
   width: 100%;
   overflow-x: auto;
   gap: 22px;
   padding-bottom: 4px;
 }


 .services-subnav {
   top: 125px;
   justify-content: flex-start;
   overflow-x: auto;
   gap: 24px;
   padding: 0 22px;
 }


 .hero-left {
   padding: 50px 22px;
 }


 .hero-right {
   padding: 0 22px 32px;
 }


 .visual-image {
   min-height: 360px;
 }


 .visual-caption {
   grid-template-columns: 1fr;
   gap: 8px;
 }


 .hero-links {
   flex-direction: column;
 }


 .hero-links a {
   width: 100%;
 }


 .statement-section,
 .section,
 .contact-section,
 .about-hero,
 .about-intro-section,
 .about-values-section,
 .about-statement-section {
   padding: 58px 22px;
 }


 .about-hero {
   min-height: auto;
 }


 .about-hero::before {
   inset: 14px;
 }


 .lava {
   filter: blur(46px);
   opacity: 0.42;
 }


 .lava-one {
   width: 300px;
   height: 300px;
 }


 .lava-two {
   width: 360px;
   height: 360px;
 }


 .lava-three {
   width: 280px;
   height: 280px;
 }


 .lava-four {
   width: 240px;
   height: 240px;
 }


 .about-value-card {
   padding: 24px;
 }


 .contact-right a {
   grid-template-columns: 1fr;
 }


 .contact-right strong {
   font-size: 17px;
 }


 .footer {
   padding: 0 22px;
 }


 .footer-inner {
   grid-template-columns: 1fr;
   padding: 52px 0;
 }


 .footer-bottom {
   min-height: auto;
   padding: 22px 0;
   flex-direction: column;
   align-items: flex-start;
 }
}


@media screen and (max-width: 500px) {
 .brand-symbol,
 .footer-logo-mark {
   width: 40px;
   height: 40px;
   font-size: 19px;
 }


 .brand-text strong,
 .footer-logo strong {
   font-size: 27px;
 }


 .brand-text small,
 .footer-logo small {
   font-size: 9px;
 }


 h1 {
   font-size: 54px;
 }


 h2 {
   font-size: 42px;
 }


 .hero-lead,
 .body-copy p,
 .contact-left p:not(.eyebrow) {
   font-size: 17px;
 }


 .contact-right a {
   padding: 24px;
 }
}


@media (prefers-reduced-motion: reduce) {
 .lava {
   animation: none;
 }
}




/* ======================================================
  CONTACT PAGE
====================================================== */


.contact-page-hero {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: clamp(36px, 6vw, 90px);
 align-items: center;
 min-height: calc(100vh - 95px);
 padding: clamp(70px, 9vw, 130px) 7%;
 background:
   radial-gradient(circle at top left, rgba(193, 18, 31, 0.10), transparent 34%),
   linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
 border-bottom: 1px solid var(--line);
}


.contact-page-left h1 {
 max-width: 940px;
}


.contact-page-card {
 background-color: var(--blue-dark);
 color: var(--cream);
 padding: clamp(34px, 5vw, 56px);
 min-height: 460px;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 border: 1px solid rgba(0, 48, 73, 0.18);
 position: relative;
 overflow: hidden;
}


.contact-page-card::before {
 content: "";
 position: absolute;
 inset: 24px;
 border: 1px solid rgba(253, 240, 213, 0.18);
 pointer-events: none;
}


.contact-page-card::after {
 content: "";
 position: absolute;
 width: 220px;
 height: 360px;
 right: -80px;
 top: -80px;
 background-color: rgba(102, 155, 188, 0.20);
 transform: rotate(18deg);
}


.contact-page-card > small {
 color: var(--blue-light);
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 11px;
 font-weight: 800;
 margin-bottom: auto;
 position: relative;
 z-index: 2;
}


.contact-big-link {
 color: var(--cream);
 text-decoration: none;
 display: grid;
 gap: 4px;
 padding: 22px 0;
 border-top: 1px solid rgba(253, 240, 213, 0.20);
 position: relative;
 z-index: 2;
}


.contact-big-link:last-child {
 border-bottom: 1px solid rgba(253, 240, 213, 0.20);
}


.contact-big-link span {
 color: rgba(253, 240, 213, 0.62);
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 11px;
 font-weight: 800;
}


.contact-big-link strong {
 font-family: "Instrument Serif", Georgia, serif;
 font-size: clamp(34px, 4vw, 54px);
 font-weight: 400;
 letter-spacing: -0.055em;
 line-height: 0.95;
}


.contact-big-link:hover strong {
 color: var(--blue-light);
}


.contact-info-section {
 background-color: var(--cream);
}


.contact-options-section {
 padding: clamp(70px, 9vw, 130px) 7%;
 background-color: var(--cream-deep);
 border-top: 1px solid rgba(0, 48, 73, 0.16);
 border-bottom: 1px solid rgba(0, 48, 73, 0.16);
}


.contact-options-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1px;
 background-color: rgba(0, 48, 73, 0.18);
 border: 1px solid rgba(0, 48, 73, 0.18);
}


.contact-option-card {
 background-color: var(--cream-soft);
 min-height: 360px;
 padding: 34px;
 display: flex;
 flex-direction: column;
 transition: 0.25s ease;
}


.contact-option-card:hover {
 background-color: var(--cream);
}


.contact-option-card small {
 color: var(--red);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.18em;
 margin-bottom: auto;
}


.contact-option-card h3 {
 margin-bottom: 18px;
}


.contact-option-card p {
 font-size: 16px;
 margin-bottom: 22px;
}


.contact-option-card a {
 color: var(--red);
 text-decoration: none;
 font-weight: 800;
 width: fit-content;
}


.contact-option-card a:hover {
 color: var(--red-dark);
}


.contact-option-card.dark {
 background-color: var(--blue-dark);
}


.contact-option-card.dark small {
 color: var(--blue-light);
}


.contact-option-card.dark h3 {
 color: var(--cream);
}


.contact-option-card.dark p {
 color: rgba(253, 240, 213, 0.72);
}


.contact-option-card.dark a {
 color: var(--cream);
}


.contact-option-card.dark a:hover {
 color: var(--blue-light);
}


@media screen and (max-width: 1150px) {
 .contact-page-hero,
 .contact-options-grid {
   grid-template-columns: 1fr;
 }


 .contact-page-card {
   min-height: 360px;
 }


 .contact-option-card {
   min-height: 280px;
 }
}


@media screen and (max-width: 820px) {
 .contact-page-hero,
 .contact-options-section {
   padding: 58px 22px;
 }


 .contact-page-hero {
   min-height: auto;
 }


 .contact-page-card {
   min-height: 320px;
   padding: 28px;
 }


 .contact-page-card::before {
   inset: 14px;
 }


 .contact-option-card {
   padding: 24px;
 }
}


/* ======================================================
  LEGAL PAGES
  Privatlivspolitik / cookies / GDPR
====================================================== */


.legal-page {
 min-height: 100vh;
 background:
   radial-gradient(circle at 12% 18%, rgba(193, 18, 31, 0.14), transparent 28%),
   radial-gradient(circle at 86% 12%, rgba(102, 155, 188, 0.14), transparent 30%),
   linear-gradient(180deg, #050505 0%, #080808 52%, #003049 100%);
 color: #fdf0d5;
}


.legal-hero {
 width: min(1120px, 100%);
 margin: 0 auto;
 padding: clamp(42px, 7vw, 96px) 7% clamp(34px, 5vw, 58px);
}


.legal-back {
 display: inline-flex;
 margin-bottom: 34px;
 color: rgba(253, 240, 213, 0.68);
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
 border-bottom: 1px solid rgba(253, 240, 213, 0.22);
}


.legal-back:hover {
 color: #fdf0d5;
 border-bottom-color: #fdf0d5;
}


.legal-hero .label {
 margin-bottom: 18px;
 color: #669bbc;
 font-size: 12px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.18em;
}


.legal-hero h1 {
 max-width: 900px;
 margin: 0 0 24px;
 color: #fdf0d5;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: clamp(62px, 10vw, 138px);
 font-weight: 400;
 line-height: 0.86;
 letter-spacing: -0.075em;
}


.legal-intro {
 max-width: 760px;
 color: rgba(253, 240, 213, 0.76);
 font-size: clamp(18px, 2vw, 24px);
 line-height: 1.55;
}


.legal-updated {
 margin-top: 24px;
 color: rgba(253, 240, 213, 0.48);
 font-size: 14px;
}


.legal-layout {
 width: min(1120px, 100%);
 margin: 0 auto;
 padding: 0 7% clamp(64px, 9vw, 120px);
 display: grid;
 grid-template-columns: 260px minmax(0, 1fr);
 gap: clamp(34px, 6vw, 78px);
 align-items: start;
}


.legal-toc {
 position: sticky;
 top: 28px;
 display: grid;
 gap: 8px;
 padding: 22px;
 background: rgba(253, 240, 213, 0.055);
 border: 1px solid rgba(253, 240, 213, 0.12);
 box-shadow: 0 22px 70px rgba(0, 0, 0, 0.25);
}


.legal-toc p {
 margin-bottom: 8px;
 color: #fdf0d5;
 font-size: 13px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.14em;
}


.legal-toc a {
 color: rgba(253, 240, 213, 0.58);
 font-size: 14px;
 line-height: 1.35;
 text-decoration: none;
}


.legal-toc a:hover {
 color: #fdf0d5;
}


.legal-content {
 padding: clamp(28px, 5vw, 56px);
 background:
   linear-gradient(180deg, rgba(253, 240, 213, 0.075), rgba(253, 240, 213, 0.026));
 border: 1px solid rgba(253, 240, 213, 0.13);
 box-shadow: 0 34px 100px rgba(0, 0, 0, 0.30);
}


.legal-content section + section {
 margin-top: clamp(38px, 5vw, 62px);
 padding-top: clamp(32px, 4vw, 48px);
 border-top: 1px solid rgba(253, 240, 213, 0.12);
}


.legal-content h2 {
 margin: 0 0 18px;
 color: #fdf0d5;
 font-family: "Instrument Serif", Georgia, serif;
 font-size: clamp(34px, 5vw, 58px);
 font-weight: 400;
 line-height: 0.95;
 letter-spacing: -0.055em;
}


.legal-content p {
 margin: 0 0 17px;
 color: rgba(253, 240, 213, 0.74);
 font-size: 17px;
 line-height: 1.72;
}


.legal-content ul {
 display: grid;
 gap: 9px;
 margin: 18px 0 24px;
 padding-left: 22px;
}


.legal-content li {
 color: rgba(253, 240, 213, 0.74);
 font-size: 17px;
 line-height: 1.58;
}


.legal-content a {
 color: #fdf0d5;
 font-weight: 800;
 text-decoration: none;
 border-bottom: 1px solid rgba(253, 240, 213, 0.32);
}


.legal-content a:hover {
 border-bottom-color: #fdf0d5;
}


.site-footer {
 width: min(1120px, 100%);
 margin: 0 auto;
 padding: 28px 7% 36px;
 color: rgba(253, 240, 213, 0.56);
 font-size: 14px;
 line-height: 1.6;
 text-align: center;
}


.site-footer a {
 color: rgba(253, 240, 213, 0.72);
 text-decoration: none;
 border-bottom: 1px solid rgba(253, 240, 213, 0.26);
}


.site-footer a:hover {
 color: #fdf0d5;
 border-bottom-color: #fdf0d5;
}


@media screen and (max-width: 860px) {
 .legal-layout {
   grid-template-columns: 1fr;
 }


 .legal-toc {
   position: static;
 }


 .legal-content {
   padding: 28px 22px;
 }


 .legal-hero h1 {
   font-size: clamp(56px, 15vw, 82px);
 }
}


@media screen and (max-width: 560px) {
 .legal-hero,
 .legal-layout,
 .site-footer {
   padding-left: 22px;
   padding-right: 22px;
 }


 .legal-toc {
   display: none;
 }


 .legal-content h2 {
   font-size: 36px;
 }


 .legal-content p,
 .legal-content li {
   font-size: 16px;
 }
}