/* ============================================================
   SELF-HOSTED FONTS
   Cormorant Garamond + Montserrat, served from our own domain
   instead of fonts.googleapis.com. Two reasons:
     1. No third-party request on page load, so no visitor IP is
        sent to Google before any consent is given (relevant for
        a Spain-based company under GDPR).
     2. One less external dependency that can slow down or fail.

   These are the VARIABLE builds: one file per family covers every
   weight we use, so this is no heavier than the Google version.
   Licence: SIL Open Font License 1.1 - see assets/fonts/OFL.txt
   ============================================================ */
/* Cormorant Garamond - latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-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;
}
/* Cormorant Garamond - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-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;
}
/* Montserrat - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/montserrat-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;
}
/* Montserrat - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/montserrat-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;
}

/* ============================================================
   ARZETNA GROUP — Design System
   Colors extracted from logo: Forest Green + Metallic Gold
   Fonts: Cormorant Garamond (headings) + Montserrat (body)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --green:        #1C3520;
  --green-dark:   #142818;
  --green-mid:    #254a29;
  --gold:         #C4973A;
  --gold-light:   #E8D5A3;
  --gold-pale:    #F5EDD8;
  --cream:        #F8F5F0;
  --white:        #FFFFFF;
  --black:        #1A1A1A;
  --gray:         #666666;
  --gray-light:   #E5E2DC;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', Arial, sans-serif;

  --max-width:    1180px;
  --nav-height:   80px;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* ── Layout helpers ─────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
}
.section         { padding: 100px 0; }
.section-sm      { padding: 70px 0; }
.bg-cream        { background: var(--cream); }
.bg-white        { background: var(--white); }
.bg-green        { background: var(--green); }
.bg-green-dark   { background: var(--green-dark); }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.8rem, 6vw,  5.2rem); }
h2 { font-size: clamp(2rem,   4vw,  3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem);  }
h4 { font-size: 1.1rem; }

p {
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.9;
}

/* Small uppercase label above headings */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Gold rule used as a section divider */
.gold-divider {
  width: 52px;
  height: 1px;
  background: var(--gold);
  margin: 18px auto 0;
}
.gold-divider.left { margin-left: 0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 15px 46px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-primary:hover { background: var(--gold); color: var(--white); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-outline:hover { background: var(--green); color: var(--white); }

.coming-soon-tag {
  display: inline-block;
  padding: 7px 18px;
  background: var(--gold-pale);
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--gold-light);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.navbar.transparent { background: transparent; }
.navbar.scrolled    {
  background: var(--green);
  box-shadow: 0 2px 32px rgba(0,0,0,0.25);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* PNG with transparent background
   - Transparent hero nav: natural logo colours (dark green + gold reads fine on hero image)
   - Scrolled / solid-green nav: invert to white so it pops on the dark background */
.nav-logo img {
  height: 88px; /* larger on transparent hero so colours read beautifully */
  width: auto;
  transition: filter 0.3s, opacity 0.3s, height 0.3s;
}
.navbar.scrolled .nav-logo img {
  height: 56px; /* compact once scrolled / on inner pages */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.nav-logo:hover img { opacity: 0.75; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 42px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--white);
  transition: all 0.3s var(--ease);
}

/* Mobile full-screen menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--green);
  z-index: 1001; /* above navbar (1000) so close button is always tappable */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 9vw, 2.8rem);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-close {
  position: absolute;
  top: 24px; right: 28px;
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 8px; /* larger tap target */
  transition: color 0.3s;
}
.mobile-close:hover { color: var(--gold); }

/* ============================================================
   HOME HERO — full viewport
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;   /* fallback for older browsers */
  height: 100svh;  /* avoids the mobile address-bar jump */
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background image panel — subtle Ken Burns on load */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 9s var(--ease);
}
.hero.loaded .hero-bg { transform: scale(1); }

/* Dark green-tinted overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20,40,24,0.68) 0%,
    rgba(20,40,24,0.55) 45%,
    rgba(20,40,24,0.88) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 0 24px;
  max-width: 800px;
}
.hero-content .label { margin-bottom: 20px; font-size: 0.72rem; }
.hero-content .gold-divider { margin: 0 auto 36px; }

.hero-content h1 {
  color: var(--white);
  font-weight: 300;
  margin-bottom: 28px;
  line-height: 1.1;
}

.hero-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  max-width: 460px;
  margin: 0 auto 52px;
  letter-spacing: 0.04em;
  line-height: 1.9;
}

/* Animated scroll cue at bottom of hero */
.scroll-cue {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.4);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.scroll-cue-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(196,151,58,0.7), transparent);
  animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ============================================================
   PAGE HERO — inner pages (55 vh)
   ============================================================ */
.page-hero {
  height: 55vh;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Reset the Ken Burns transform — inner page heroes don't animate */
.page-hero .hero-bg {
  transform: none;
  transition: none;
}
.page-hero .hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(20,40,24,0.86) 0%,
    rgba(20,40,24,0.68) 100%
  );
}
.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
}
.page-hero-content .label  { margin-bottom: 16px; }
.page-hero-content h1      { color: var(--white); font-weight: 300; margin-bottom: 18px; }
.breadcrumb {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
}
.breadcrumb a { color: rgba(255,255,255,0.45); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold); }

/* ============================================================
   INTRO STRIP (Home — below hero)
   ============================================================ */
.intro-strip {
  padding: 96px 0;
  background: var(--white);
}
.intro-strip .container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 88px;
  align-items: start;
}
.intro-text .label      { margin-bottom: 18px; }
.intro-text h2          { color: var(--green); margin-bottom: 22px; }
.intro-text p           { font-size: 0.96rem; line-height: 1.95; }

.intro-pillars          { display: flex; flex-direction: column; gap: 0; }
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-light);
}
.pillar:first-child     { padding-top: 0; }
.pillar:last-child      { border-bottom: none; padding-bottom: 0; }

.pillar-num {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  min-width: 36px;
  padding-top: 2px;
}
.pillar-text h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 7px;
}
.pillar-text p { font-size: 0.84rem; margin: 0; }

/* ============================================================
   INDUSTRIES SECTION (Home)
   ============================================================ */
.industries-section { padding: 100px 0; background: var(--cream); }

.industries-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}
.industries-header .label    { margin-bottom: 16px; }
.industries-header .gold-divider { margin-bottom: 24px; }
.industries-header h2        { color: var(--green); margin-bottom: 16px; }

/* 3 portrait cards side by side, gap-free */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.industry-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: default;
}
.industry-card .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease);
}
.industry-card:hover .card-bg { transform: scale(1.07); }

.industry-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20,40,24,0.95) 0%,
    rgba(20,40,24,0.45) 50%,
    rgba(20,40,24,0.08) 100%
  );
  transition: background 0.4s;
}
.industry-card:hover .card-overlay {
  background: linear-gradient(
    to top,
    rgba(20,40,24,0.97) 0%,
    rgba(20,40,24,0.62) 55%,
    rgba(20,40,24,0.12) 100%
  );
}

.industry-card .card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 38px 32px;
  color: var(--white);
}
.card-sector {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.industry-card h3 {
  color: var(--white);
  font-weight: 400;
  margin-bottom: 12px;
}
.industry-card .card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.68);
  margin-bottom: 22px;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.4s;
  opacity: 0;
}
.industry-card:hover .card-desc { max-height: 80px; opacity: 1; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s 0.1s, transform 0.35s 0.1s, gap 0.25s;
}
.card-link .arrow { transition: transform 0.25s; }
.industry-card:hover .card-link { opacity: 1; transform: translateY(0); }
.card-link:hover .arrow         { transform: translateX(4px); }

/* ============================================================
   CONTACT SECTION (built into Home, reused on inner pages)
   ============================================================ */
.contact-section {
  padding: 100px 0 80px;
  background: var(--cream);
  text-align: center;
}
.contact-section .label         { margin-bottom: 16px; }
.contact-section .gold-divider  { margin-bottom: 30px; }
.contact-section h2             { color: var(--green); margin-bottom: 16px; }
.contact-desc {
  color: var(--gray);
  max-width: 500px;
  margin: 0 auto 60px;
  font-size: 0.9rem;
  line-height: 1.85;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--gray-light);
  background: var(--white);
}
.contact-item {
  padding: 42px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--gray-light);
}
.contact-item:last-child { border-right: none; }

.ci-icon  { font-size: 1.3rem; color: var(--gold); }
.ci-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.ci-value {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 500;
  transition: color 0.3s var(--ease);
}
a.ci-value:hover { color: var(--gold); }
/* Second phone number sits directly under the first */
.ci-value + .ci-value { margin-top: 1px; }

/* ============================================================
   FOUNDER / CEO SECTION
   ============================================================ */
.founder-section {
  padding: 80px 0;
  background: var(--white);
  border-top: 1px solid var(--gray-light);
}
.founder-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: center;
}

/* Photo column — circle portrait with blur-behind effect */
.founder-img-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 10px rgba(196,151,58,0.12),
              16px 16px 48px rgba(0,0,0,0.16);
  margin: 0 auto;
  align-self: center;
}
/* Clean sharp portrait — no blur effects, just a strong solid presence */
.founder-img-wrap::before { display: none; }
.founder-img-wrap::after  { display: none; }
.founder-img {
  position: absolute;
  inset: 0;
  /* Square, face-centred crop of the original full-length photo, so the
     circle frames his face rather than the corridor. Because the source is
     square and the wrapper is square, `cover` stays correct at every size. */
  background: url('../assets/img/founder.jpg') 50% 50% / cover no-repeat;
}

/* Text column */
.founder-name {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--green);
  line-height: 1.1;
  margin-bottom: 8px;
}
.founder-role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.founder-intro {
  font-size: 0.92rem;
  color: var(--green);
  font-weight: 500;
  line-height: 1.85;
  margin-bottom: 20px;
}
/* Scrollable bio — keeps section height compact */
.founder-bio {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 14px;
}
.founder-bio::-webkit-scrollbar       { width: 3px; }
.founder-bio::-webkit-scrollbar-track { background: var(--gray-light); border-radius: 2px; }
.founder-bio::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.founder-bio p {
  font-size: 0.83rem;
  color: var(--gray);
  line-height: 1.9;
  margin-bottom: 14px;
}
.founder-bio p:last-child { margin-bottom: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--green-dark);
  padding: 44px 0 28px;
  border-top: 1px solid rgba(196,151,58,0.18);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 28px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-logo img {
  height: 90px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.footer-tagline {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.16em;
  padding-left: 20px;
  border-left: 1px solid rgba(196,151,58,0.3);
  line-height: 1.6;
}
.footer-nav         { display: flex; gap: 64px; }
.footer-nav-col h5  {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-nav-col ul  { display: flex; flex-direction: column; gap: 11px; }
.footer-nav-col a   {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.footer-nav-col a:hover { color: var(--gold); }

/* Registered address under the footer contact column */
.footer-address {
  font-style: normal;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.03em;
}

.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copy   { font-size: 0.7rem; color: rgba(255,255,255,0.25); letter-spacing: 0.08em; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-content {
  padding: 100px 0;
  background: var(--white);
}
.about-content .container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 96px;
  align-items: start;
}
.about-main .label          { margin-bottom: 16px; }
.about-main h2              { color: var(--green); margin-bottom: 28px; }
.about-main p               { font-size: 0.94rem; margin-bottom: 20px; line-height: 1.95; }

.about-list                 { margin: 28px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.about-list li              { display: flex; align-items: flex-start; gap: 16px; font-size: 0.9rem; color: var(--gray); }
.about-list li::before      { content: ''; display: block; width: 22px; height: 1px; background: var(--gold); margin-top: 11px; flex-shrink: 0; }

/* Sticky sidebar panel */
.about-sidebar              { position: sticky; top: 108px; }

/* Logo block sits above the values list in the sidebar */
.sidebar-logo {
  background: var(--cream);
  padding: 32px 28px 24px;
  border-bottom: 1px solid var(--gray-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sidebar-logo img {
  height: 96px;
  width: auto;
}
.sidebar-logo-tagline {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.sidebar-values             { background: var(--cream); }
.sidebar-value              { padding: 30px 28px; border-bottom: 1px solid var(--gray-light); }
.sidebar-value:last-child   { border-bottom: none; }
.sidebar-value .sv-num      {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.sidebar-value h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.sidebar-value p { font-size: 0.82rem; line-height: 1.75; }

/* ============================================================
   THE GROUP PAGE
   ============================================================ */
.group-sector               { padding: 100px 0; }
.group-sector.bg-cream      { background: var(--cream); }

.sector-header              { margin-bottom: 60px; }
.sector-header .label       { margin-bottom: 14px; }
.sector-header h2           { color: var(--green); margin-bottom: 14px; }
.sector-header p            { max-width: 560px; font-size: 0.92rem; }

.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 480px));
  gap: 24px;
}

.company-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s;
  display: flex;
  flex-direction: column;
}
.company-card:hover {
  box-shadow: 0 18px 52px rgba(28,53,32,0.10);
  border-color: var(--gold-light);
}
.company-card-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.company-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20,40,24,0.22);
  transition: background 0.35s;
}
.company-card:hover .company-card-img::after { background: rgba(20,40,24,0.08); }

.company-card-body          { padding: 34px 30px; display: flex; flex-direction: column; flex: 1; }
.company-card-body .label   { margin-bottom: 12px; }
.company-card-body h3       { color: var(--green); font-size: 1.7rem; margin-bottom: 14px; }
.company-card-body p        { font-size: 0.85rem; margin-bottom: 26px; flex: 1; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.js .fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .fade-up.visible        { opacity: 1; transform: translateY(0); }
.js .fade-up.d1             { transition-delay: 0.12s; }
.js .fade-up.d2             { transition-delay: 0.24s; }
.js .fade-up.d3             { transition-delay: 0.36s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .intro-strip .container         { grid-template-columns: 1fr; gap: 56px; }
  .about-content .container       { grid-template-columns: 1fr; gap: 56px; }
  .about-sidebar                  { position: static; }

  /* Three footer columns beside the logo get cramped here and start
     wrapping mid-phrase, so give them the full width instead. */
  .footer-top                     { flex-direction: column; align-items: flex-start; gap: 36px; }
  .footer-nav                     { gap: 48px; }
}

@media (max-width: 768px) {
  .container                      { padding: 0 24px; }
  .section                        { padding: 72px 0; }
  .nav-links                      { display: none; }
  .hamburger                      { display: flex; }

  /* Reduce section padding on mobile */
  .intro-strip                    { padding: 64px 0; }
  .industries-section             { padding: 64px 0; }
  .industries-header              { margin-bottom: 40px; }
  .group-sector                   { padding: 64px 0; }
  .sector-header                  { margin-bottom: 40px; }
  .about-content                  { padding: 64px 0; }
  .founder-section                { padding: 56px 0; }
  .founder-grid                   { grid-template-columns: 1fr; gap: 36px; }
  .founder-img-wrap               { width: 220px; height: 220px; }
  .founder-name                   { font-size: 2.1rem; }
  .founder-bio                    { max-height: none; overflow-y: visible; padding-right: 0; }
  .contact-section                { padding: 64px 0 52px; }
  .page-hero                      { height: 44vh; min-height: 300px; }

  .industries-grid                { grid-template-columns: 1fr; gap: 3px; }
  .industry-card                  { aspect-ratio: 16 / 10; }
  /* Always show text on mobile (no hover) */
  .industry-card .card-desc       { max-height: 80px; opacity: 1; }
  .card-link                      { opacity: 1; transform: none; }

  .contact-grid                   { grid-template-columns: 1fr; }
  /* Phone/email are tap-to-act on a phone, so give them a real hit area */
  a.ci-value                      { padding: 7px 14px; margin: -3px 0; }
  .contact-item                   { border-right: none; border-bottom: 1px solid var(--gray-light); }
  .contact-item:last-child        { border-bottom: none; }

  .footer-top                     { flex-direction: column; }
  .footer-nav                     { gap: 40px; }
  .footer-bottom                  { flex-direction: column; gap: 10px; text-align: center; }
  .companies-grid                 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1                              { font-size: 2.4rem; }
  h2                              { font-size: 1.9rem; }
  .footer-nav                     { flex-direction: column; gap: 28px; }
  .intro-strip                    { padding: 52px 0; }
  .hero-sub                       { font-size: 0.82rem; }
  .company-card-body              { padding: 26px 22px; }
}

/* ============================================================
   KEYBOARD FOCUS
   Card links sit at opacity:0 until :hover — without these rules
   a keyboard user tabs onto a link they cannot see.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Reveal industry-card contents on keyboard focus, same as hover */
.industry-card:focus-within .card-bg      { transform: scale(1.07); }
.industry-card:focus-within .card-overlay {
  background: linear-gradient(
    to top,
    rgba(20,40,24,0.97) 0%,
    rgba(20,40,24,0.62) 55%,
    rgba(20,40,24,0.12) 100%
  );
}
.industry-card:focus-within .card-desc    { max-height: 80px; opacity: 1; }
.industry-card:focus-within .card-link    { opacity: 1; transform: translateY(0); }

/* Dark backgrounds need a light ring instead of gold-on-green */
.navbar :focus-visible,
.mobile-menu :focus-visible,
footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold-light);
}

/* ============================================================
   REDUCED MOTION
   Honour the OS "reduce motion" setting — no Ken Burns, no
   fade-up travel, no pulsing scroll cue.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Content must never depend on an animation that no longer runs */
  .js .fade-up            { opacity: 1; transform: none; }
  .hero-bg                { transform: none; }
  .hero.loaded .hero-bg   { transform: none; }
  .scroll-cue-line        { animation: none; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-section {
  min-height: calc(100vh - var(--nav-height));
  padding: calc(var(--nav-height) + 80px) 0 100px;
  background: var(--cream);
  display: flex;
  align-items: center;
  text-align: center;
}
.error-section .gold-divider { margin-bottom: 28px; }
.error-code {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--green);
  font-weight: 400;
  margin-bottom: 18px;
}
.error-desc {
  max-width: 480px;
  margin: 0 auto 44px;
  font-size: 0.9rem;
  line-height: 1.9;
}
.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   SELF-HOSTED IMAGERY
   Photos are stored in /assets/img (Unsplash License — see
   assets/img/CREDITS.md). Declared here rather than as inline
   style="" so the mobile variants can be swapped by media query.
   ============================================================ */
.hero-bg.img-hero-home  { background-image: url('../assets/img/hero-home.jpg'); }
.hero-bg.img-hero-about { background-image: url('../assets/img/hero-about.jpg'); }
.hero-bg.img-hero-group { background-image: url('../assets/img/hero-group.jpg'); }

/* Homepage industry cards (3:4 portrait) */
.card-bg.img-aviation   { background-image: url('../assets/img/sector-aviation.jpg'); }
.card-bg.img-laundry    { background-image: url('../assets/img/sector-laundry.jpg'); }
.card-bg.img-beverage   { background-image: url('../assets/img/sector-beverage.jpg'); }

/* The Group company cards (wide banner) */
.company-card-img.img-mvm         { background-image: url('../assets/img/company-mvm.jpg'); }
.company-card-img.img-airway      { background-image: url('../assets/img/company-airway.jpg'); }
.company-card-img.img-co-laundry  { background-image: url('../assets/img/company-laundry.jpg'); }
.company-card-img.img-co-beverage { background-image: url('../assets/img/company-beverage.jpg'); }

/* Phones get a portrait crop at roughly half the file size */
@media (max-width: 768px) {
  .hero-bg.img-hero-home  { background-image: url('../assets/img/hero-home-sm.jpg'); }
  .hero-bg.img-hero-about { background-image: url('../assets/img/hero-about-sm.jpg'); }
  .hero-bg.img-hero-group { background-image: url('../assets/img/hero-group-sm.jpg'); }
}

/* ============================================================
   MODAL DIALOG
   Used for company detail pop-ups (Waterproof by Spinpoint).
   Sits above the mobile menu (1001) and navbar (1000).
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: rgba(10, 22, 13, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;   /* the panel scrolls internally, not the overlay */
}
.modal-overlay.open { display: flex; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 100%;
  background: var(--white);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  animation: modalIn 0.45s var(--ease);
  /* Fixed-height panel + inner scroll region keeps the close button
     on screen at every scroll position, on desktop and on phones. */
  display: flex;
  flex-direction: column;
}
.modal-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 3;
  width: 42px; height: 42px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--gray-light);
  border-radius: 50%;
  color: var(--green);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.modal-close:hover { background: var(--green); color: var(--white); }

/* ── Header: logo on a cream panel ─────────────────────────── */
.modal-header {
  background: var(--cream);
  border-bottom: 1px solid var(--gray-light);
  padding: 44px 48px 38px;
  text-align: center;
}
.modal-header .label        { margin-bottom: 12px; }
.modal-header .gold-divider { margin: 0 auto 22px; }

/* ── Brand lockup ──────────────────────────────────────────────
   "Waterproof by" + the Spinpoint logo reading as one line.
   The logo's own wordmark baseline sits 11.57% of the image height
   above its bottom edge (measured from the artwork), so the text is
   pushed down by that amount, minus its own descender depth, to put
   both baselines on the same line. The emblem rides above the line.
   --------------------------------------------------------------- */
.brand-lockup {
  --sp-logo-h: 150px;          /* logo height; drives the whole lockup */
  --sp-baseline: 0.1157;       /* baseline -> bottom, as a fraction of height */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--green);
}
.lockup-pre {
  /* Sit on the logo's baseline rather than on the image's bottom edge */
  padding-bottom: calc(var(--sp-logo-h) * var(--sp-baseline) - 0.20em);
}
.lockup-logo {
  height: var(--sp-logo-h);
  width: auto;
  display: block;
}

/* ── Body ──────────────────────────────────────────────────── */
.modal-body    { padding: 48px 48px 52px; }
.modal-section { margin-bottom: 40px; }
.modal-section:last-child { margin-bottom: 0; }

.modal-section h3 {
  color: var(--green);
  font-size: 1.6rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-light);
}
.modal-section p { font-size: 0.9rem; line-height: 1.95; margin-bottom: 16px; }
.modal-section p:last-child { margin-bottom: 0; }

.modal-lead {
  font-size: 1rem !important;
  color: var(--green) !important;
  font-weight: 500;
}

.modal-pillars { margin: 28px 0; }
.modal-pillars .pillar:first-child { padding-top: 0; }
.modal-pillars .pillar:last-child  { border-bottom: none; padding-bottom: 0; }

.modal-signoff {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green);
  padding: 34px 0;
  margin: 8px 0 40px;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

/* ── Location ──────────────────────────────────────────────── */
.modal-address {
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 20px;
}
.modal-map {
  border: 1px solid var(--gray-light);
  background: var(--cream);
  overflow: hidden;
}
.modal-map .map-embed {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  /* The map renders in Google's own colours; soften it slightly so it does
     not shout next to the cream/green palette, and lift it on interaction. */
  filter: saturate(0.9);
  transition: filter 0.4s var(--ease);
}
.modal-map:hover .map-embed,
.modal-map:focus-within .map-embed { filter: saturate(1); }

.map-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.map-link:hover { color: var(--gold); border-color: var(--gold); }

/* Cards that open a modal */
.company-card.is-clickable { cursor: pointer; }

@media (max-width: 768px) {
  .modal-overlay   { padding: 0; }
  .modal-panel     { max-width: none; height: 100%; max-height: 100%; }
  .modal-header    { padding: 56px 24px 32px; }
  .brand-lockup    {
    --sp-logo-h: 112px;
    font-size: 2rem;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .lockup-pre      { padding-bottom: 0; }
  .modal-body      { padding: 32px 24px 40px; }
  .modal-section   { margin-bottom: 32px; }
  .modal-section h3 { font-size: 1.35rem; }
  .modal-signoff   { font-size: 1.25rem; padding: 26px 0; }
  .modal-map .map-embed { height: 260px; }

  /* The panel fills the screen, so the close button pins to the panel rather
     than the scrolling content — there is no Escape key on a phone. */
  .modal-close     { top: 12px; right: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28); }

  /* Widen the Maps link's hit area to ~44px without moving its underline. */
  .map-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* ============================================================
   LANGUAGE SWITCHER  (EN · ES)
   Words, not flags — a flag names a country, not a language,
   and Spanish is spoken well beyond Spain.
   ============================================================ */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 30px;
}
.lang-switch a {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.58);
  transition: color 0.3s var(--ease);
}
.lang-switch a:hover          { color: var(--white); }
.lang-switch a.active         { color: var(--gold); }
.lang-sep                     { color: rgba(255, 255, 255, 0.25); font-size: 0.7rem; }

/* In the navbar it only shows on desktop; phones get it inside the menu */
.lang-switch-mobile           { display: none; }
@media (max-width: 768px) {
  .navbar .lang-switch        { display: none; }
  .lang-switch-mobile {
    display: flex;
    justify-content: center;
    margin: 26px 0 0;
    gap: 16px;
  }
  .lang-switch-mobile a       { font-size: 0.9rem; letter-spacing: 0.22em; }
  .lang-switch-mobile .lang-sep { font-size: 0.9rem; }
}

/* ============================================================
   LANGUAGE SUGGESTION BAR
   Suggests, never redirects. Fixed and translated off-screen so
   appearing costs no layout shift.
   ============================================================ */
.lang-suggest[hidden] { display: none; }
.lang-suggest {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px 62px 16px 24px;
  background: var(--green-dark);
  border-top: 1px solid rgba(196, 151, 58, 0.35);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.lang-suggest.show { transform: translateY(0); }

.lang-suggest-text {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.lang-suggest-go {
  flex-shrink: 0;
  padding: 10px 24px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-suggest-go:hover { background: var(--gold); color: var(--white); }

.lang-suggest-close {
  position: absolute;
  top: 50%; right: 16px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.lang-suggest-close:hover { color: var(--gold); }

@media (max-width: 768px) {
  .lang-suggest {
    flex-direction: column;
    gap: 14px;
    padding: 20px 52px 22px 20px;
    text-align: center;
  }
  .lang-suggest-close { top: 12px; transform: none; }
}

/* Discourage dragging images out of the page (pairs with the
   dragstart handler in main.js). Not protection, just friction. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
}

/* ============================================================
   LEGAL PAGES  (Legal Notice / Privacy / Cookies)
   ============================================================ */
.legal-page {
  padding: calc(var(--nav-height) + 70px) 0 90px;
  background: var(--white);
}
.legal-page .container { max-width: 840px; }

.legal-header { margin-bottom: 46px; }
.legal-header .label        { margin-bottom: 12px; }
.legal-header .gold-divider { margin: 0 0 20px; }
.legal-header h1 {
  color: var(--green);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 400;
}

.legal-section { margin-bottom: 38px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 {
  color: var(--green);
  font-size: 1.35rem;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--gray-light);
}
.legal-section p  { font-size: 0.88rem; line-height: 1.95; margin-bottom: 14px; }
.legal-section p:last-child { margin-bottom: 0; }

.legal-list { margin: 16px 0; display: flex; flex-direction: column; gap: 11px; }
.legal-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 0.88rem; line-height: 1.85; color: var(--gray);
}
.legal-list li::before {
  content: ''; display: block; width: 18px; height: 1px;
  background: var(--gold); margin-top: 13px; flex-shrink: 0;
}

/* Company identification block */
.legal-identity {
  background: var(--cream);
  border: 1px solid var(--gray-light);
  padding: 8px 26px;
  margin: 20px 0 0;
}
.legal-identity > div {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-light);
}
.legal-identity > div:last-child { border-bottom: none; }
.legal-identity dt {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); padding-top: 2px;
}
.legal-identity dd { margin: 0; font-size: 0.88rem; color: var(--green); }
.legal-identity a { color: var(--green); border-bottom: 1px solid var(--gold-light); }
.legal-identity a:hover { color: var(--gold); }

/* Cookie table */
.legal-table-wrap { overflow-x: auto; margin: 20px 0; }
.legal-table {
  width: 100%; border-collapse: collapse; min-width: 640px;
  border: 1px solid var(--gray-light);
}
.legal-table th {
  background: var(--cream); text-align: left;
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
  padding: 14px 16px; border-bottom: 1px solid var(--gray-light);
}
.legal-table td {
  padding: 15px 16px; font-size: 0.82rem; line-height: 1.7;
  color: var(--gray); border-bottom: 1px solid var(--gray-light);
  vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--green); font-weight: 500; white-space: nowrap; }

/* A button that reads as a link inside body copy */
.legal-inline-btn {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--green); cursor: pointer;
  border-bottom: 1px solid var(--gold); 
}
.legal-inline-btn:hover { color: var(--gold); }

/* Legal links in the footer bottom bar */
.footer-legal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.footer-legal a,
.footer-legal-btn {
  font-size: 0.7rem; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  background: none; border: none; padding: 0;
  font-family: var(--font-body); cursor: pointer;
  transition: color 0.3s var(--ease);
}
.footer-legal a:hover,
.footer-legal-btn:hover { color: var(--gold); }
.footer-legal-sep { color: rgba(255, 255, 255, 0.2); font-size: 0.7rem; }

@media (max-width: 768px) {
  .legal-page { padding: calc(var(--nav-height) + 40px) 0 64px; }
  .legal-section h2 { font-size: 1.2rem; }
  .legal-identity { padding: 8px 18px; }
  .legal-identity > div { grid-template-columns: 1fr; gap: 5px; }
  .footer-legal { justify-content: center; }
}

/* ============================================================
   COOKIE CONSENT
   Banner sits above everything except the cookie panel itself.
   Fixed + translate, so appearing costs no layout shift.
   ============================================================ */
.cookie-banner[hidden],
.cookie-panel[hidden] { display: none !important; }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1300;
  background: var(--green-dark);
  border-top: 1px solid rgba(196, 151, 58, 0.4);
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.cookie-banner.show { transform: translateY(0); }

.cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 26px 48px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.cookie-banner-text h2 {
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 9px;
}
.cookie-banner-text p {
  margin: 0; font-size: 0.8rem; line-height: 1.75;
  color: rgba(255, 255, 255, 0.72); max-width: 70ch;
}
.cookie-banner-text a { color: var(--gold-light); border-bottom: 1px solid rgba(196,151,58,0.5); }
.cookie-banner-text a:hover { color: var(--gold); }

.cookie-banner-actions {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}

/* Accept and Reject must carry equal visual weight (legal requirement) */
.cookie-btn {
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--gold);
  background: none; color: var(--gold-light);
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cookie-btn-primary:hover { background: var(--gold); color: var(--white); }
.cookie-btn-ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
}
.cookie-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ── Settings panel ─────────────────────────────────────────── */
.cookie-panel {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: rgba(10, 22, 13, 0.76);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cookie-panel.open { opacity: 1; }
.cookie-panel-box {
  position: relative;
  width: 100%; max-width: 560px; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white);
  padding: 44px 44px 36px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
}
.cookie-panel-close {
  position: absolute; top: 14px; right: 16px;
  width: 38px; height: 38px;
  background: none; border: 1px solid var(--gray-light); border-radius: 50%;
  color: var(--green); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cookie-panel-close:hover { background: var(--green); color: var(--white); }

.cookie-panel-box h2 {
  color: var(--green); font-size: 1.6rem; margin-bottom: 10px;
}
.cookie-panel-intro { font-size: 0.85rem; line-height: 1.8; margin-bottom: 28px; }

.cookie-option {
  padding: 20px 0;
  border-top: 1px solid var(--gray-light);
}
.cookie-option-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.cookie-option h3 {
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green); margin: 0;
}
.cookie-option p { font-size: 0.82rem; line-height: 1.8; margin: 0; }
.cookie-always {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}

.cookie-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cookie-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--gray-light); position: relative;
  transition: background 0.3s var(--ease);
}
.cookie-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.3s var(--ease);
}
.cookie-toggle input:checked + .cookie-toggle-track { background: var(--gold); }
.cookie-toggle input:checked + .cookie-toggle-track::after { transform: translateX(20px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track { outline: 2px solid var(--gold); outline-offset: 3px; }
.cookie-toggle-label {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray);
}

.cookie-panel-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--gray-light);
}
.cookie-panel-actions .cookie-btn { color: var(--green); border-color: var(--gold); }
.cookie-panel-actions .cookie-btn-primary:hover { background: var(--gold); color: var(--white); }
.cookie-panel-actions .cookie-btn-ghost { border-color: var(--gray-light); color: var(--gray); }
.cookie-panel-actions .cookie-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ── Blocked third-party embed ──────────────────────────────── */
.embed-consent { position: relative; }
.embed-consent .map-embed { display: none; }
.embed-consent.is-allowed .map-embed { display: block; }
.embed-consent.is-allowed .embed-consent-notice { display: none; }

.embed-consent-notice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  min-height: 300px; padding: 32px 26px;
  background: var(--cream);
}
.embed-consent-icon { font-size: 1.8rem; color: var(--gold); }
.embed-consent-title {
  font-family: var(--font-body);
  font-size: 0.7rem !important; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green); margin: 0 !important;
}
.embed-consent-text {
  font-size: 0.8rem !important; max-width: 46ch; margin: 0 0 8px !important; line-height: 1.75;
}
.embed-consent-link {
  font-size: 0.68rem; letter-spacing: 0.08em; color: var(--gray);
  border-bottom: 1px solid var(--gray-light);
}
.embed-consent-link:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 768px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 20px; }
  .cookie-banner-actions .cookie-btn { flex: 1 1 auto; text-align: center; padding: 13px 14px; }
  .cookie-panel-box { padding: 40px 22px 28px; }
  .cookie-panel-actions .cookie-btn { flex: 1 1 100%; }
  .embed-consent-notice { min-height: 250px; padding: 26px 18px; }
}