/*
Theme Name: ALTID
Theme URI: https://altid.org
Author: ALTID
Description: Official ALTID organization WordPress theme
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: altid
*/

/* ─── ALTİD Design Tokens v1.0 ───────────────────────────────────── */
:root {

  /* ── Mediterranean Navy (Primary) ──────────────────────────────── */
  --navy-light:   #3A5494;   /* tonal light — large bg tints, hover fills  */
  --navy-base:    #1B2E5E;   /* canonical brand anchor                      */
  --navy-dark:    #111E40;   /* active states, deep contrast                */

  /* ── Mediterranean Turquoise (Secondary 1) ─────────────────────── */
  --turq-light:   #A8DDEF;   /* background tints, subtle washes             */
  --turq-base:    #1A9BC8;   /* section dividers, icons, illustrations      */
  --turq-dark:    #127FA8;   /* hover on turquoise elements                 */

  /* ── Alanya Terracotta (Secondary 2) ───────────────────────────── */
  --terra-light:  #F2C0AD;   /* warm panel backgrounds, error tints         */
  --terra-base:   #C4421A;   /* heritage CTAs, event callouts, error states */
  --terra-dark:   #9E3213;   /* active/hover on terracotta elements         */

  /* ── Saffron Gold (Accent / Primary CTA) ───────────────────────── */
  --gold-light:   #FCDFA0;   /* badge backgrounds, highlight tints          */
  --gold-base:    #E8920A;   /* primary CTAs, badges, icon fills            */
  --gold-dark:    #C07208;   /* hover state on gold CTAs                    */

  /* ── Taurus Olive (Supporting) ─────────────────────────────────── */
  --olive-light:  #C2D4A8;   /* nature background tints, success tints      */
  --olive-base:   #5A7A3A;   /* eco/nature/agri contexts, success states    */
  --olive-dark:   #3E5528;   /* hover on olive elements                     */

  /* ── Aegean Sand (Neutral Light) ───────────────────────────────── */
  --sand-light:   #FDFAF3;   /* subtlest page background variant            */
  --sand-base:    #F5EDD8;   /* preferred page/doc background               */
  --sand-dark:    #E8DBC0;   /* card borders, horizontal rules              */

  /* ── Deep Charcoal (Neutral Dark) ──────────────────────────────── */
  --charcoal-light: #6B6560; /* muted/secondary text                        */
  --charcoal-base:  #2A2A2A; /* all body text                               */
  --charcoal-dark:  #111111; /* high-emphasis labels                        */

  /* ── Semantic Aliases (use these in components) ─────────────────── */
  --color-primary:       var(--navy-base);
  --color-primary-hover: var(--navy-light);

  --color-accent:        var(--gold-base);
  --color-accent-hover:  var(--gold-dark);

  --color-link:          var(--navy-base);
  --color-link-hover:    var(--gold-base);

  --color-bg:            var(--sand-base);
  --color-surface:       var(--sand-light);
  --color-card:          #FFFFFF;
  --color-border:        var(--sand-dark);

  --color-text:          var(--charcoal-base);
  --color-text-muted:    var(--charcoal-light);

  --color-success-bg:    var(--olive-light);
  --color-success-border:var(--olive-base);
  --color-success-text:  var(--olive-dark);

  --color-error-bg:      var(--terra-light);
  --color-error-border:  var(--terra-base);
  --color-error-text:    var(--terra-dark);

  /* ── Typography ─────────────────────────────────────────────────── */

  /* Typefaces */
  --font-display: 'Cormorant Garamond', Georgia, serif;  /* headings H1–H3 */
  --font-body:    'Lato', Helvetica, Arial, sans-serif;  /* body, UI, nav  */

  /* Type scale */
  --text-display: 4rem;        /* 64px */
  --text-h1:      3rem;        /* 48px */
  --text-h2:      2.25rem;     /* 36px */
  --text-h3:      1.75rem;     /* 28px */
  --text-h4:      1.375rem;    /* 22px */
  --text-h5:      1.125rem;    /* 18px */
  --text-h6:      1rem;        /* 16px */
  --text-lead:    1.125rem;    /* 18px */
  --text-body:    1rem;        /* 16px */
  --text-small:   0.875rem;    /* 14px */
  --text-caption: 0.75rem;     /* 12px */
  --text-label:   0.8125rem;   /* 13px */
  --text-nav:     0.9375rem;   /* 15px */

  /* Line heights */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-subhead: 1.3;
  --lh-body:    1.65;
  --lh-ui:      1.4;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 8rem;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container: 1200px;
  --radius:    6px;
  --radius-lg: 12px;
}

/* ─── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-link-hover); }

/* ── Type scale ──────────────────────────────────────────────────── */

/* H1–H3: Cormorant Garamond */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-snug);
  color: var(--charcoal-dark);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  color: var(--charcoal-dark);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ls-normal);
  color: var(--charcoal-dark);
}

/* H4–H6: Lato */
h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: var(--lh-subhead);
  color: var(--charcoal-dark);
}
h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--charcoal-dark);
}
h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: 0.02em;
  color: var(--charcoal-dark);
}

/* Lead / intro paragraph */
.t-lead, .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--lh-body);
}

/* Small */
.t-small { font-size: var(--text-small); line-height: 1.6; }

/* Caption */
.t-caption {
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Label / tag — Lato Bold ALL CAPS per spec */
.t-label, .section-heading__label, .hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ─── Layout ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.section { padding-block: var(--sp-lg); }
.section--alt { background: var(--color-surface); }

/* Turquoise accent rule — explicit utility, not automatic */
.section-divider {
  border: none;
  border-top: 2px solid var(--turq-base);
  margin: 0;
  opacity: .6;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Gradient: navy opaque at top → fully transparent at bottom */
  background: linear-gradient(
    to bottom,
    rgba(27,46,94,.95) 0%,
    rgba(27,46,94,.6)  60%,
    rgba(27,46,94,0)   100%
  );
  border-bottom: none;
  box-shadow: none;
  transition: background .3s;
}

/* When user scrolls past the slider, snap to solid navy */
.site-header.is-solid {
  background: var(--navy-base);
  border-bottom: 3px solid var(--turq-base);
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .04em;
}
.site-logo:hover { color: var(--gold-base); }

.site-logo img { height: 40px; width: auto; }

.site-logo__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px; /* matches logo img height */
  line-height: 1;
  gap: 0;
}

.site-logo__acronym {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: var(--ls-snug);
  color: #fff;
  line-height: 1.1;
}

.site-logo__fullname {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  line-height: 1.2;
}

.site-logo:hover .site-logo__acronym { color: var(--gold-base); }
.site-logo:hover .site-logo__fullname { color: var(--gold-light); }

/* ─── Navigation ─────────────────────────────────────────────────── */
.nav-primary ul {
  list-style: none;
  display: flex;
  gap: var(--sp-md);
  position: relative;
}

.nav-primary > ul > li {
  position: relative;
}

.nav-primary a {
  font-family: var(--font-body);
  font-size: var(--text-nav);        /* 15px per spec */
  font-weight: 600;
  letter-spacing: var(--ls-wide);   /* +0.05em per spec */
  color: rgba(255,255,255,.85);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  line-height: 1;
  white-space: nowrap;
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a {
  color: var(--gold-base);
  border-bottom-color: var(--gold-base);
}

/* Dropdown submenu */
.nav-primary ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  background: var(--navy-dark);
  border-top: 2px solid var(--gold-base);
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 200;
  padding: .75rem 0 .5rem;
}

.nav-primary ul ul li {
  width: 100%;
}

.nav-primary ul ul a {
  display: block;
  padding: .6rem 1.25rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: var(--ls-snug);
  border-bottom: none;
  color: rgba(255,255,255,.75);
}

.nav-primary ul ul a:hover {
  color: var(--gold-base);
  background: rgba(255,255,255,.06);
  border-bottom: none;
}

/* Show on hover & focus-within */
.nav-primary ul li:hover > ul,
.nav-primary ul li:focus-within > ul {
  display: flex;
}

/* Down-arrow indicator for parent items */
.nav-primary > ul > li > a:not(:only-child)::after {
  content: ' ▾';
  font-size: .65em;
  opacity: .7;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);   /* Lato for all UI chrome per spec */
  font-weight: 700;
  font-size: var(--text-label);    /* 13px, treated as a label element */
  letter-spacing: var(--ls-wider); /* +0.08em — label tracking per spec */
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, transform .1s, box-shadow .2s;
  border: none;
  text-align: center;
  line-height: var(--lh-ui);
}

/* Primary CTA — Saffron Gold (per spec: CTAs, badges) */
.btn--primary {
  background: var(--gold-base);
  color: var(--navy-base);
}
.btn--primary:hover {
  background: var(--gold-dark);
  color: var(--navy-base);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,146,10,.35);
}

/* Secondary CTA — Turquoise */
.btn--secondary {
  background: var(--turq-base);
  color: #fff;
}
.btn--secondary:hover {
  background: var(--turq-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,155,200,.35);
}

/* Ghost/outline — used on dark (hero) backgrounds */
.btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
}
.btn--outline:hover {
  border-color: var(--gold-base);
  color: var(--gold-base);
}

/* Heritage CTA — Terracotta (secondary CTAs, event callouts) */
.btn--heritage {
  background: var(--terra-base);
  color: #fff;
}
.btn--heritage:hover {
  background: var(--terra-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ─── Hero Slider ────────────────────────────────────────────────── */

/* Push non-slider pages down below the fixed header */
body:not(.home) .site-header + *:not(.page-hero) {
  margin-top: 88px;
}

.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 560px;
  max-height: 860px;
  overflow: hidden;
  background: var(--navy-base);
  /* Extend behind the fixed nav */
  margin-top: -72px;
}

/* Individual slides */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* Dark gradient overlay for legibility */
.hero-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27,46,94,.55) 0%,
    rgba(27,46,94,.30) 50%,
    rgba(27,46,94,.72) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Content overlay */
.hero-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  padding-bottom: 5rem;  /* clear caption bar */
}
.hero-slider__overlay .container { width: 100%; }

/* Caption bar */
.hero-slider__caption {
  position: absolute;
  bottom: 3.5rem;
  left: 0; right: 0;
  z-index: 4;
  text-align: center;
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  letter-spacing: .03em;
  min-height: 1.4em;
}
.hero-slider__caption-text {
  display: none;
}
.hero-slider__caption-text.is-active {
  display: inline;
}

/* Prev / Next buttons */
.hero-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(27,46,94,.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider__btn:hover { background: var(--turq-base); border-color: var(--turq-base); }
.hero-slider__btn--prev { left: 1.5rem; }
.hero-slider__btn--next { right: 1.5rem; }

/* Dots */
.hero-slider__dots {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: .5rem;
}
.hero-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  padding: 0;
}
.hero-slider__dot.is-active {
  background: var(--gold-base);
  border-color: var(--gold-base);
}

/* ─── Hero (static — About / Contact pages) ──────────────────────── */
/*
  Gradient: Mediterranean Navy → deep mid-blue → Turquoise
  Evokes the sea floor rising to coastal shallows.
*/
.hero {
  background: linear-gradient(
    135deg,
    var(--navy-base)  0%,
    #1A3F72           55%,
    var(--turq-base)  100%
  );
  color: #fff;
  padding-block: var(--sp-xl);
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  background: var(--gold-base);   /* badge element → Saffron Gold per spec */
  color: var(--navy-base);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border-radius: 100px;
  margin-bottom: var(--sp-sm);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-display));  /* up to 64px */
  font-weight: 300;                  /* Cormorant Light at large sizes per spec */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);  /* -0.02em per spec */
  margin-bottom: var(--sp-sm);
  color: #fff;
}

.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,.78);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-md);
}

.hero__actions { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }

/* Page-level hero (About, Contact) — shorter */
.hero--page { padding-block: 5rem; }

/* ─── Cards ──────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  transition: box-shadow .25s, transform .25s, border-top-color .25s;
}

.card:hover {
  box-shadow: 0 10px 36px rgba(27,46,94,.12);
  transform: translateY(-3px);
  border-top-color: var(--turq-base);
}

/* Icon block — Turquoise per spec (section identity, illustrations) */
.card__icon {
  width: 48px;
  height: 48px;
  background: var(--turq-base);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-sm);
  color: #fff;
  font-size: 1.4rem;
}

.card__title {
  font-family: var(--font-display);  /* H3-level — Cormorant per spec */
  font-size: var(--text-h5);         /* 18px — readable minimum for Cormorant */
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .5rem;
  color: var(--navy-base);
}
.card__body  { color: var(--color-text-muted); font-size: .95rem; line-height: 1.55; }

/* ─── Section Headings ───────────────────────────────────────────── */
.section-heading { text-align: center; margin-bottom: var(--sp-md); }

.section-heading__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Turquoise for section-level labels (wayfinding per spec) */
  color: var(--turq-base);
  display: block;
  margin-bottom: .5rem;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-h2));  /* up to 36px */
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--navy-base);
}

.section-heading p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin-inline: auto;
  margin-top: .65rem;
}

/* ─── About Grid ─────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  align-items: center;
}
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }

.about-grid__image img {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: 0 8px 32px rgba(27,46,94,.14);
}

/* Placeholder when no featured image is set */
.about-grid__image .img-placeholder {
  background: var(--turq-light);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--turq-dark);
  font-size: .9rem;
  font-weight: 500;
}

.about-grid__content h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-sm);
  color: var(--navy-base);
}
.about-grid__content p { color: var(--color-text-muted); margin-bottom: var(--sp-sm); }

/* Values cards on About page — use olive icon (nature, principles) */
.card--value .card__icon { background: var(--olive-base); }
.card--value:hover       { border-top-color: var(--olive-base); }

/* ─── Contact Form ───────────────────────────────────────────────── */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-lg);
}
@media (max-width: 768px) { .contact-wrapper { grid-template-columns: 1fr; } }

.contact-info h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--sp-sm); color: var(--navy-base); }
.contact-info p  { color: var(--color-text-muted); margin-bottom: .4rem; }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-sm); }

.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label {
  font-family: var(--font-body);
  font-size: var(--text-label);    /* 13px */
  font-weight: 700;
  letter-spacing: var(--ls-wider); /* +0.08em — label spec */
  text-transform: uppercase;
  color: var(--charcoal-base);
}
.form-group label .required { color: var(--gold-base); }   /* gold required asterisk */

.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--turq-base);
  box-shadow: 0 0 0 3px rgba(26,155,200,.18);   /* turquoise focus ring */
}
.form-group textarea { resize: vertical; min-height: 140px; }

/* ─── Notification Banners ───────────────────────────────────────── */
/* Success — Taurus Olive (positive, natural) */
.notice--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-left: 4px solid var(--olive-base);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: var(--sp-md);
  color: var(--color-success-text);
  font-weight: 500;
}

/* Error — Alanya Terracotta (per spec: event callouts, alerts) */
.notice--error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-left: 4px solid var(--terra-base);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: var(--sp-md);
  color: var(--color-error-text);
  font-weight: 500;
}

/* ─── CTA Banner ─────────────────────────────────────────────────── */
.cta-banner {
  background: var(--navy-base);
  color: #fff;
  text-align: center;
  padding-block: var(--sp-lg);
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-h2));
  font-weight: 500;
  line-height: var(--lh-heading);
  margin-bottom: 1rem;
  color: #fff;
}
.cta-banner p {
  color: rgba(255,255,255,.72);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--sp-md);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.7);
  border-top: 3px solid var(--turq-base);
}
.site-footer a       { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--gold-base); }

/* Main three-column area */
.footer-main { padding-block: var(--sp-xl); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-col__heading {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: 500;
  color: #fff;
  margin-bottom: .75rem;
  letter-spacing: var(--ls-snug);
}
.footer-col__lead {
  font-size: var(--text-small);
  line-height: var(--lh-body);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--sp-sm);
}

/* Newsletter form */
.footer-nl-form__row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.footer-nl-form__input {
  flex: 1;
  min-width: 160px;
  padding: .6rem .9rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-small);
}
.footer-nl-form__input::placeholder { color: rgba(255,255,255,.35); }
.footer-nl-form__input:focus {
  outline: none;
  border-color: var(--gold-base);
  background: rgba(255,255,255,.12);
}
.footer-nl-form__btn { padding: .6rem 1.1rem; font-size: .8rem; }
.footer-contact-info {
  margin-top: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-contact-info p {
  font-size: var(--text-small);
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  margin: 0;
}
.footer-contact-info__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .2rem;
}
.footer-contact-info a { color: rgba(255,255,255,.65); }
.footer-contact-info a:hover { color: var(--gold-base); }

.footer-nl-form__note {
  font-size: var(--text-caption);
  color: rgba(255,255,255,.35);
  margin-top: .5rem;
}

/* Footer divider */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: var(--sp-md) 0;
}

/* Quick links */
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-links a {
  font-size: var(--text-small);
  font-weight: 400;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.footer-links a::before {
  content: '›';
  color: var(--gold-base);
  font-size: 1rem;
  line-height: 1;
}
.footer-links a:hover { color: var(--gold-base); }

/* ─── Legal pages ────────────────────────────────────────────────── */
.legal-prose { max-width: 72ch; }
.legal-prose h2 {
  margin-top: var(--sp-lg);
  margin-bottom: .5rem;
  font-size: var(--text-h4);
}
.legal-prose p, .legal-prose li { color: #444; }
.legal-prose ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-prose ul li { margin-bottom: .35rem; }
.legal-meta {
  font-size: var(--text-small);
  color: #999;
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.footer-links--legal a {
  color: rgba(255,255,255,.4);
  font-size: var(--text-caption);
}
.footer-links--legal a::before { color: rgba(255,255,255,.25); }
.footer-links--legal a:hover { color: var(--gold-base); }

/* Social links */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-social__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--text-small);
  color: rgba(255,255,255,.65);
  transition: color .15s;
}
.footer-social__link:hover { color: var(--gold-base) !important; }
.footer-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.footer-social__icon--facebook  { background: #1877F2; }
.footer-social__icon--instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social__icon--twitter   { background: #000; }
.footer-social__icon--linkedin  { background: #0A66C2; }
.footer-social__label { font-size: var(--text-small); }

/* Bottom bar */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-sm);
}
.footer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.footer-bar__copy {
  font-size: var(--text-caption);
  color: rgba(255,255,255,.35);
  margin: 0;
}

/* ─── Utilities ──────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }

/* Thematic color context classes */
.ctx--heritage { --color-accent: var(--terra-base); }   /* for heritage panels */
.ctx--nature   { --color-accent: var(--olive-base); }   /* for eco/agri panels */

/* ─── Language Switcher Dropdown ─────────────────────────────────── */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: .75rem;
  z-index: 200;
}

/* Trigger button */
.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,.88);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.lang-switcher__btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
.lang-switcher__flag {
  font-size: 1.1rem;
  line-height: 1;
}
.lang-switcher__caret {
  transition: transform .2s;
  opacity: .7;
  flex-shrink: 0;
}
.lang-switcher__btn[aria-expanded="true"] .lang-switcher__caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--navy-dark, #0d1b2a);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  overflow: hidden;
}
.lang-switcher__btn[aria-expanded="true"] + .lang-switcher__dropdown {
  display: block;
}

.lang-switcher__dropdown li a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  text-decoration: none;
  color: rgba(255,255,255,.72);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.lang-switcher__dropdown li a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.lang-switcher__dropdown li a.is-active {
  color: var(--gold-base);
  background: rgba(232,146,10,.1);
  font-weight: 700;
}
.lang-opt__flag {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.lang-opt__name {
  flex: 1;
}

/* ─── Hamburger toggle button ────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  z-index: 1001;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
/* Animate to × when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Responsive Nav ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-primary {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--navy-dark);
    padding: .75rem 0 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 999;
  }
  .nav-primary.is-open { display: block; }

  .nav-primary ul {
    flex-direction: column;
    gap: 0;
    align-items: flex-end;  /* right-justify */
  }

  .nav-primary > ul > li { width: 100%; }

  .nav-primary > ul > li > a {
    display: block;
    padding: .75rem 1.5rem;
    border-bottom: none;
    text-align: right;
    font-size: 1rem;
  }
  .nav-primary > ul > li > a::after { display: none; } /* hide ▾ on mobile */

  /* Sub-items shown inline below parent on mobile */
  .nav-primary ul ul {
    display: block;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: unset;
  }
  .nav-primary ul ul a {
    text-align: right;
    padding: .45rem 2.25rem;
    color: rgba(255,255,255,.5);
    font-size: .8125rem;
  }
  .nav-primary ul ul a:hover { color: var(--gold-base); background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--navy-base);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: calc(88px + var(--sp-sm));   /* clear fixed nav, content near top */
  padding-bottom: var(--sp-md);
  color: #fff;
  position: relative;
}
/* Dark overlay so text stays legible over photos */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,30,64,.72) 0%,
    rgba(17,30,64,.55) 60%,
    rgba(17,30,64,.72) 100%
  );
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  margin-bottom: .75rem;
}
.page-hero__lead {
  font-size: var(--text-lead);
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  max-width: 620px;
  line-height: var(--lh-body);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
  font-size: var(--text-small);
  color: rgba(255,255,255,.55);
  margin-bottom: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.breadcrumb a { color: rgba(255,255,255,.65); }
.breadcrumb a:hover { color: var(--gold-base); }
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,.4); }

/* ─── Section alternating background ────────────────────────────── */
.section--alt { background: var(--sand-base); }

/* ─── Prose ──────────────────────────────────────────────────────── */
.prose { max-width: 72ch; line-height: var(--lh-body); }
.prose h2 { margin-bottom: 1rem; }
.prose p  { margin-bottom: 1rem; }
.mb-section { margin-bottom: var(--sp-xl); }

/* ═══════════════════════════════════════════════════════════════════
   HUB GRID (Section Hub template)
═══════════════════════════════════════════════════════════════════ */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
}
.hub-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  transition: box-shadow .2s, transform .2s;
  color: inherit;
  background: #fff;
}
.hub-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform: translateY(-3px);
}
.hub-card__img {
  height: 160px;
  background-size: cover;
  background-position: center;
}
.hub-card__img--placeholder {
  background: linear-gradient(135deg, var(--navy-light), var(--turq-dark));
}
.hub-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.hub-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  margin-bottom: .5rem;
  color: var(--navy-base);
}
.hub-card__excerpt { font-size: var(--text-small); color: #555; flex: 1; margin-bottom: .75rem; }
.hub-card__cta { font-size: var(--text-small); font-weight: 700; color: var(--turq-dark); }
.hub-card:hover .hub-card__cta { color: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════════════
   ABOUT US PAGE — pull-quote + overview cards
═══════════════════════════════════════════════════════════════════ */

/* Tighten section padding for the About Us quote + cards zones */
.about-quote-section { padding-block: 2.5rem 1.5rem; }
.about-cards-section { padding-block: 1.5rem 3rem; }

/* Decorative divider between quote and cards */
.about-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.about-divider__line {
  flex: 1;
  height: 1px;
  background: var(--gold-base);
  opacity: .45;
}
.about-divider__gem {
  font-size: .65rem;
  color: var(--gold-base);
  line-height: 1;
}

/* Pull-quote block — papyrus / aged-paper look */
.about-quote {
  position: relative;
  padding: var(--sp-md) var(--sp-lg);
  margin: 0 0 var(--sp-md) 0;
  border-radius: 3px;

  /* Warm parchment base */
  background-color: #f2dfa7;

  /* Layered gradients simulate fibrous papyrus grain */
  background-image:
    repeating-linear-gradient(
      2deg,
      transparent 0px, transparent 3px,
      rgba(139,100,20,.045) 3px, rgba(139,100,20,.045) 4px
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0px, transparent 8px,
      rgba(100,70,10,.03) 8px, rgba(100,70,10,.03) 9px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(255,245,200,.6) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(180,130,40,.12) 0%, transparent 55%);

  /* Lift off the page */
  box-shadow:
    0 2px 6px rgba(0,0,0,.12),
    0 6px 20px rgba(0,0,0,.08),
    inset 0 0 40px rgba(139,100,20,.06);

  /* Slightly uneven border for aged feel */
  border: 1px solid rgba(160,115,30,.35);
}
.about-quote p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: #3a2a0a;
  margin: 0 0 .85rem;
}
.about-quote p:last-child { margin-bottom: 0; }
.about-quote a {
  color: #3a2a0a;
  font-weight: 600;
  border-bottom: 1px solid var(--gold-base);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.about-quote a:hover {
  color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
}

/* Linking paragraph */
.about-intro-para {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 72ch;
}
.about-intro-para a {
  color: var(--navy-base);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-base);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.about-intro-para a:hover {
  color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
}

/* Overview card stack */
.overview-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.overview-card {
  display: flex;
  flex-direction: row;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s, transform .25s;
  min-height: 220px;
}
.overview-card:hover {
  box-shadow: 0 12px 40px rgba(27,46,94,.13);
  transform: translateY(-2px);
}

.overview-card__body {
  flex: 1;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
}
.overview-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, var(--text-h3));
  font-weight: 600;
  color: var(--navy-base);
  margin: 0;
  line-height: 1.2;
}
.overview-card__desc {
  font-size: .97rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 62ch;
}
.overview-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--turq-dark);
  margin-top: .25rem;
  transition: color .15s, gap .15s;
}
.overview-card:hover .overview-card__cta {
  color: var(--gold-dark);
  gap: .6rem;
}

/* Image — golden ratio (1.618 : 1) */
.overview-card__img {
  flex-shrink: 0;
  width: clamp(240px, 36%, 420px);
  aspect-ratio: 1.618 / 1;
  background-size: cover;
  background-position: center;
}

@media (max-width: 640px) {
  .overview-card {
    flex-direction: column;
  }
  .overview-card__img {
    width: 100%;
    aspect-ratio: 16 / 7;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ORGANIZATION PAGE
═══════════════════════════════════════════════════════════════════ */
.org-split {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
.org-split__label .section-heading__label { display: block; margin-bottom: .5rem; }
.org-split__label h2 { margin-bottom: 0; }
@media (max-width: 640px) {
  .org-split { grid-template-columns: 1fr; gap: var(--sp-md); }
}

/* ─── Timeline ───────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--turq-base);
  opacity: .3;
}
.timeline__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-md) 0;
  position: relative;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: 74px;
  top: calc(var(--sp-md) + .45rem);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--turq-base);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--turq-base);
}
.timeline__year {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--turq-dark);
  padding-top: .2rem;
  text-align: right;
  padding-right: var(--sp-md);
}
.timeline__content h3 { font-size: var(--text-h5); margin-bottom: .35rem; }
.timeline__content p  { font-size: var(--text-body); color: #555; }

/* ═══════════════════════════════════════════════════════════════════
   ALANYA REGION PAGE
═══════════════════════════════════════════════════════════════════ */
.region-intro {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .region-intro { grid-template-columns: 1fr; }
}
.region-intro__stats { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stat-card {
  background: var(--navy-base);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.stat-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 300;
  color: var(--gold-base);
  line-height: 1.1;
}
.stat-card__label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: .35rem;
}

/* ═══════════════════════════════════════════════════════════════════
   MEMBER HOTELS PAGE
═══════════════════════════════════════════════════════════════════ */
.hotel-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: var(--sp-lg);
}
.hotel-filter__label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy-base);
}
.hotel-filter__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  padding: .35rem .9rem;
  border-radius: 100px;
  border: 1px solid var(--navy-light);
  font-size: var(--text-small);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--navy-base);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chip--active, .chip:hover {
  background: var(--navy-base);
  color: #fff;
  border-color: var(--navy-base);
}
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
}
.hotel-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  transition: box-shadow .2s;
}
.hotel-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.hotel-card__img {
  height: 180px;
  background: linear-gradient(135deg, var(--turq-dark), var(--navy-base));
}
.hotel-card__img--placeholder {
  background: linear-gradient(135deg, var(--sand-base), var(--gold-light));
}
.hotel-card__body { padding: 1.25rem; }
.hotel-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.hotel-card__stars { color: var(--gold-base); font-size: .9rem; letter-spacing: .05em; }
.hotel-card__tag {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--turq-dark);
  background: rgba(26,155,200,.1);
  padding: .2rem .6rem;
  border-radius: 4px;
}
.hotel-card__area { font-size: var(--text-caption); color: #888; margin-left: auto; }
.hotel-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: 500;
  margin-bottom: .4rem;
  color: var(--navy-base);
}
.hotel-card__desc { font-size: var(--text-small); color: #555; }

/* hotel-card: extended fields */
.hotel-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.hotel-card__body { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.hotel-card__score { display: flex; align-items: baseline; gap: .25rem; }
.hotel-card__score-val { font-size: 1.1rem; font-weight: 700; color: var(--navy-base); }
.hotel-card__score-label { font-size: var(--text-caption); color: #888; }
.hotel-card__score-count { font-size: var(--text-caption); color: #aaa; }
.hotel-card__amenities { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.hotel-card__amenity-tag {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(26,155,200,.08); color: var(--turq-dark);
  padding: .15rem .5rem; border-radius: 4px;
}
.hotel-card__amenity-tag--more { background: transparent; color: #aaa; }
.hotel-card__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.hotel-card__badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.12); color: #555;
}
.hotel-card__badge--beach { border-color: var(--turq-dark); color: var(--turq-dark); }
.hotel-card__img { background-size: cover; background-position: center; }

/* filter form */
.hotel-filter--form { margin-bottom: var(--sp-lg); }
.hotel-filter__selects { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.hotel-filter__group { display: flex; flex-direction: column; gap: .3rem; }
.hotel-filter__label { font-size: var(--text-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #888; }
.hotel-filter__select {
  padding: .6rem .9rem; border: 1px solid rgba(0,0,0,.2); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-body); background: #fff; color: var(--navy-base);
  min-width: 160px;
}
.hotel-filter__btn { align-self: flex-end; }
.hotel-filter__reset { align-self: flex-end; font-size: var(--text-small); color: #888; text-decoration: underline; cursor: pointer; }
.hotels-count { font-size: var(--text-small); color: #888; margin-bottom: var(--sp-md); }
.hotels-empty { text-align: center; padding: var(--sp-xl) 0; }

/* hotel detail page */
.hotel-detail { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-xl); align-items: start; }
@media (max-width: 900px) { .hotel-detail { grid-template-columns: 1fr; } }

.hotel-detail__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-md); }
.hotel-badge {
  font-size: var(--text-small); font-weight: 600; padding: .35rem .85rem;
  border-radius: 20px; border: 1px solid rgba(0,0,0,.15); color: var(--navy-base);
}
.hotel-badge--star { background: var(--gold-light); border-color: var(--gold-base); color: var(--navy-base); }
.hotel-badge--score { background: var(--turq-dark); color: #fff; border-color: transparent; }
.hotel-badge__sub { font-size: .75em; opacity: .8; margin-left: .3rem; }

.hotel-gallery { margin-bottom: var(--sp-lg); }
.hotel-gallery__main { border-radius: var(--radius); overflow: hidden; margin-bottom: .5rem; }
.hotel-gallery__featured { width: 100%; height: 420px; object-fit: cover; display: block; }
.hotel-gallery__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.hotel-gallery__thumb {
  width: 80px; height: 60px; border: 2px solid transparent; border-radius: 4px; overflow: hidden;
  padding: 0; background: none; cursor: pointer;
}
.hotel-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-gallery__thumb--active { border-color: var(--turq-dark); }
.hotel-gallery__more-count { font-size: var(--text-small); color: #888; align-self: center; }

.hotel-amenities { margin-bottom: var(--sp-lg); }
.hotel-amenities__title { font-family: var(--font-display); font-size: var(--text-h4); margin-bottom: var(--sp-sm); }
.hotel-amenities__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hotel-amenities__item {
  font-size: var(--text-small); padding: .4rem .9rem;
  background: rgba(26,155,200,.08); color: var(--turq-dark);
  border-radius: 20px; font-weight: 600;
}

.hotel-map { margin-bottom: var(--sp-lg); }
.hotel-map__title { font-family: var(--font-display); font-size: var(--text-h4); margin-bottom: var(--sp-sm); }
.hotel-map__embed { border-radius: var(--radius); display: block; }
.hotel-map__address { font-style: normal; margin-top: .75rem; font-size: var(--text-small); color: #555; line-height: 1.6; }

/* sidebar */
.hotel-detail__sidebar { position: sticky; top: calc(var(--header-h, 80px) + var(--sp-md)); display: flex; flex-direction: column; gap: var(--sp-md); }
.hotel-sidebar-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding: 1.25rem; }
.hotel-sidebar-card__title { font-family: var(--font-display); font-size: var(--text-h5); font-weight: 500; margin-bottom: .75rem; color: var(--navy-base); }
.hotel-sidebar-card__row { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--text-small); margin-bottom: .5rem; }
.hotel-sidebar-card__row a { color: var(--turq-dark); word-break: break-all; }
.hotel-sidebar-card__icon { flex-shrink: 0; }
.hotel-sidebar-card__label { font-weight: 700; min-width: 110px; color: #888; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; }
.hotel-sidebar-card__empty { font-size: var(--text-small); color: #aaa; }
.hotel-detail__back { display: inline-flex; align-items: center; gap: .4rem; }

.hotels-note { margin-top: var(--sp-lg); font-size: var(--text-small); color: #888; }
.hotels-note a { color: var(--turq-dark); }

/* ═══════════════════════════════════════════════════════════════════
   PRESS RELEASES & NEWSLETTER (press-list)
═══════════════════════════════════════════════════════════════════ */
.press-list { display: flex; flex-direction: column; gap: 0; }
.press-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  align-items: start;
}
.press-item:first-child { border-top: 1px solid rgba(0,0,0,.08); }
.press-item__date {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--turq-dark);
  letter-spacing: .01em;
  padding-top: .15rem;
}
.press-item__title {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: 500;
  margin-bottom: .35rem;
}
.press-item__title a { color: var(--navy-base); }
.press-item__title a:hover { color: var(--turq-dark); }
.press-item__excerpt { font-size: var(--text-small); color: #555; margin-bottom: .5rem; }
.press-item__link { font-size: var(--text-small); font-weight: 700; color: var(--turq-dark); }
@media (max-width: 640px) {
  .press-item { grid-template-columns: 1fr; gap: .35rem; }
}

/* ─── Newsletter subscribe ───────────────────────────────────────── */
.newsletter-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}
@media (max-width: 768px) { .newsletter-cta { grid-template-columns: 1fr; } }
.newsletter-cta h2 { margin-bottom: .75rem; }
.newsletter-form__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter-form__input {
  flex: 1;
  min-width: 200px;
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
}
.newsletter-form__note { font-size: var(--text-caption); color: #888; margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════════
   PROJECTS PAGE
═══════════════════════════════════════════════════════════════════ */
.project-list { display: flex; flex-direction: column; gap: var(--sp-md); }
.project-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  border-left: 4px solid var(--turq-base);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  position: relative;
}
.project-card__tag {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--turq-dark);
}
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  margin: .4rem 0 .5rem;
  color: var(--navy-base);
}
.project-card__desc { font-size: var(--text-body); color: #555; }
.project-card__status {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 100px;
}
.project-card__status--active { background: rgba(90,122,58,.12); color: var(--olive-dark); }
.project-card__status--done   { background: rgba(0,0,0,.06);     color: #888; }

/* ═══════════════════════════════════════════════════════════════════
   MEDIA CENTER PAGE
═══════════════════════════════════════════════════════════════════ */
.media-section-heading {
  margin-bottom: var(--sp-lg);
}
.media-section-heading h2 { margin-bottom: .4rem; }
.media-section-heading__note {
  font-size: var(--text-small);
  color: #666;
  max-width: 68ch;
  line-height: var(--lh-body);
}

/* Asset grid — logo cards */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-md);
}

.asset-card {
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.asset-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }

.asset-card__preview {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.asset-card__preview--light { background: var(--sand-base); }
.asset-card__preview--dark  { background: var(--navy-base); }
.asset-card__preview--document {
  background: var(--sand-base);
  width: 100px;
  height: auto;
  flex-shrink: 0;
  align-self: stretch;
}
.asset-card__preview--document svg { width: 72px; height: auto; }
.asset-card__preview img { max-height: 80px; max-width: 100%; object-fit: contain; }

.asset-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.asset-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: 500;
  color: var(--navy-base);
  margin: 0;
}
.asset-card__desc {
  font-size: var(--text-small);
  color: #555;
  line-height: var(--lh-body);
  flex: 1;
}
.asset-card__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .25rem;
}
.asset-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.15);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--navy-base);
  background: #fff;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.asset-card__btn:hover {
  background: var(--navy-base);
  border-color: var(--navy-base);
  color: #fff;
}
.asset-card__btn--primary {
  background: var(--navy-base);
  border-color: var(--navy-base);
  color: #fff;
  font-size: var(--text-small);
  padding: .55rem 1.1rem;
}
.asset-card__btn--primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.asset-card__fmt {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--turq-base);
  color: #fff;
  padding: .1rem .35rem;
  border-radius: 3px;
  line-height: 1.4;
}
.asset-card__btn:hover .asset-card__fmt { background: var(--gold-base); }
.asset-card__btn--primary .asset-card__fmt { background: var(--gold-base); }

/* Horizontal variant (brand document) */
.asset-card--horizontal {
  flex-direction: row;
  align-items: stretch;
}
.asset-card--horizontal .asset-card__body {
  padding: 1.5rem;
}
@media (max-width: 560px) {
  .asset-card--horizontal { flex-direction: column; }
  .asset-card--horizontal .asset-card__preview--document {
    width: 100%; height: 140px;
  }
}

/* Palette swatches */
.palette-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.palette-swatch__tones {
  display: flex;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.palette-swatch__tone {
  flex: 1;
  height: 48px;
}
.palette-swatch__tone--base { flex: 2; }
.palette-swatch__info {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: .5rem .6rem;
}
.palette-swatch__name {
  display: block;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--navy-base);
}
.palette-swatch__hex {
  display: block;
  font-size: var(--text-caption);
  color: #888;
  font-family: monospace;
}

/* Download row (palette files) */
.asset-downloads-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   STATISTICS PAGE
═══════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}
.stat-block {
  background: var(--navy-base);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: #fff;
}
.stat-block__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 300;
  color: var(--gold-base);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-block__label {
  display: block;
  font-size: var(--text-small);
  color: rgba(255,255,255,.7);
  line-height: 1.4;
  margin-bottom: .4rem;
}
.stat-block__year {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.data-table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}
.data-table th, .data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-align: left;
}
.data-table th {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy-base);
  background: var(--sand-base);
}
.td--up   { color: var(--olive-dark); font-weight: 700; }
.td--down { color: var(--terra-dark); font-weight: 700; }
.data-note { font-size: var(--text-small); color: #888; margin-top: var(--sp-md); }

/* ═══════════════════════════════════════════════════════════════════
   LEADERSHIP PAGE
═══════════════════════════════════════════════════════════════════ */
.leadership-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.member-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-lg);
  align-items: start;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  transition: box-shadow .2s;
}
.member-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); }

.member-card__photo {
  width: 140px;
  height: 160px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-base), var(--turq-dark));
  align-self: stretch;
}
.member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.member-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-card__photo-placeholder svg {
  width: 80px;
  height: 80px;
}

.member-card__body {
  padding: 1.25rem 1.25rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.member-card__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
}
.member-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--navy-base);
  margin: 0;
}
.member-card__role {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--turq-dark);
  background: rgba(26,155,200,.1);
  padding: .2rem .65rem;
  border-radius: 4px;
  white-space: nowrap;
}
.member-card__bio {
  font-size: var(--text-body);
  color: #555;
  line-height: var(--lh-body);
  margin: 0;
}

@media (max-width: 560px) {
  .member-card {
    grid-template-columns: 1fr;
  }
  .member-card__photo {
    width: 100%;
    height: 200px;
  }
  .member-card__body {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LAWS & REGULATIONS PAGE
═══════════════════════════════════════════════════════════════════ */
.law-categories { display: flex; flex-direction: column; gap: var(--sp-xl); }
.law-category__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--navy-base);
  margin-bottom: var(--sp-sm);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--turq-base);
}
.law-list { display: flex; flex-direction: column; gap: 0; }
.law-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  align-items: start;
}
.law-item__number {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--turq-dark);
  background: rgba(26,155,200,.1);
  padding: .3rem .6rem;
  border-radius: 4px;
  text-align: center;
  align-self: start;
}
.law-item__title {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: 500;
  margin-bottom: .3rem;
  color: var(--navy-base);
}
.law-item__desc { font-size: var(--text-small); color: #555; margin-bottom: .4rem; }
.law-item__link { font-size: var(--text-small); font-weight: 700; color: var(--turq-dark); }
@media (max-width: 640px) {
  .law-item { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE — sections
═══════════════════════════════════════════════════════════════════ */
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}
.contact-detail-card {
  background: var(--sand-base);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}
.contact-detail-card__icon { font-size: 1.75rem; margin-bottom: .75rem; display: block; }
.contact-detail-card__label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy-base);
  margin-bottom: .5rem;
}
.contact-detail-card__value {
  font-size: var(--text-body);
  color: #444;
  line-height: 1.55;
}
.contact-detail-card address { font-style: normal; }
.contact-detail-card a { color: var(--turq-dark); }

.contact-form-section { margin-bottom: var(--sp-xl); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Social links */
.social-section {}
.social-links {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}
.social-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: #fff;
  transition: opacity .15s, transform .15s;
}
.social-link:hover { opacity: .85; transform: translateY(-2px); color: #fff; }
.social-link__icon { font-size: 1.1rem; line-height: 1; min-width: 1.25rem; text-align: center; }
.social-link--facebook  { background: #1877F2; }
.social-link--instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-link--twitter   { background: #000; }
.social-link--linkedin  { background: #0A66C2; }

/* (mobile nav handled above) */