/*
 * Theme Name:  Thalassa Consulting — v9 (Ocean Blue, EN+FR)
 * Theme URI:   https://www.thalassa.one
 * Description: Ocean Blue variant — JohnWeller image backgrounds, white panels, cobalt blue text. v9: copy of v8 (live on thalassa.one), starting point for the next round of changes. v8 was the source of truth for EN+FR bilingual copy (per-language duplicate templates, e.g. page-project-zplast-fr.php).
 * Author:      Tosca Ballerini
 * Author URI:  https://www.thalassa.one
 * Version:     9.0.0
 * Text Domain: thalassa
 * Tags:        responsive, custom-colors, custom-menu, multilingual
 */

/* =============================================================
   COLOR PALETTE — extracted from JohnWeller colorsBlue images
   ============================================================= */

:root {
    /* ——— OCEAN BLUE (from JohnWeller images) ——————————————— */
    --color-ocean:       #1534a8;   /* Primary cobalt blue — image background color */
    --color-ocean-dark:  #0c1d6a;   /* Dark navy — main text, headings */
    --color-ocean-mid:   #2549c2;   /* Medium — links, accents */
    --color-ocean-light: #4d72e8;   /* Light — secondary accents */
    --color-ocean-pale:  #dde6ff;   /* Very pale blue — subtle backgrounds */

    /* ——— WHITE SURFACES ———————————————————————————————————— */
    --color-white:       #ffffff;
    --color-off-white:   #f3f6ff;   /* Slight blue tint — alternating sections */
    --color-border:      #c8d5f7;   /* Blue-tinted borders */

    /* ——— TEXT ——————————————————————————————————————————————— */
    --color-text:        #0c1d6a;   /* Body text = dark ocean blue */
    --color-text-mid:    #1534a8;   /* Secondary text = ocean blue */
    --color-text-light:  #4d72e8;   /* Captions, metadata */
    --color-text-inv:    #ffffff;   /* Text on dark/image backgrounds */

    /* ——— NAVBAR (white, blue text) ————————————————————————— */
    --color-nav:         #ffffff;
    --color-nav-scrolled: #f3f6ff;

    /* ——— BUTTONS ——————————————————————————————————————————— */
    --color-btn:         #1534a8;
    --color-btn-hover:   #0c1d6a;

    /* ——— FOOTER ————————————————————————————————————————————— */
    --color-bg-footer:   #0c1d6a;

    /* ——— TYPOGRAPHY ————————————————————————————————————————— */
    --font-heading:      'Raleway', 'Montserrat', 'Arial', sans-serif;
    --font-body:         'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;

    /* ——— LAYOUT ————————————————————————————————————————————— */
    --navbar-height:     70px;
    --max-width:         1180px;
    --content-width:     760px;
    --section-pad-v:     90px;
    --section-pad-h:     24px;

    /* ——— SHADOWS ————————————————————————————————————————————— */
    --shadow-sm:         0 1px 6px rgba(21,52,168,0.10);
    --shadow-md:         0 4px 20px rgba(21,52,168,0.14);
    --shadow-lg:         0 10px 48px rgba(21,52,168,0.20);
    --shadow-panel:      0 16px 64px rgba(12,29,106,0.28);

    /* ——— RADIUS ————————————————————————————————————————————— */
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         16px;
    --radius-pill:       50px;

    /* ——— TRANSITIONS ————————————————————————————————————————— */
    --transition:        all 0.3s ease;
    --transition-fast:   all 0.15s ease;
}

/* =============================================================
   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: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

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

a {
    color: var(--color-ocean-mid);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover { color: var(--color-ocean-dark); }

/* Link inside running text: underlined and in the main blue so it reads as a link */
.text-link {
    color: var(--color-ocean);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.text-link:hover { color: var(--color-ocean-dark); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ocean-dark);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }
em { font-style: italic; }

/* =============================================================
   LAYOUT UTILITIES
   ============================================================= */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-h);
}

.container--narrow { max-width: var(--content-width); }

/* White-background sections — blue text */
.section {
    padding: var(--section-pad-v) var(--section-pad-h);
    background-color: var(--color-white);
}

.section--alt {
    padding: var(--section-pad-v) var(--section-pad-h);
    background-color: var(--color-off-white);
}

/* Image-background sections */
.section--image {
    position: relative;
    padding: var(--section-pad-v) var(--section-pad-h);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 29, 106, 0.22);
    z-index: 0;
}

.section--image .container {
    position: relative;
    z-index: 1;
}

/* White panel — for text on image backgrounds */
.panel {
    background: rgba(255, 255, 255, 0.97);
    padding: 48px 56px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
}

.panel--sm {
    padding: 32px 36px;
}

/* Section titles */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-ocean-dark);
    margin-bottom: 1rem;
    position: relative;
}

/* The small accent bar that used to sit under every section title was
   removed (v9 design review, element 2): it repeated on every heading. */

.section-title--center { text-align: center; }

.section-title--white { color: var(--color-white); }

.section-intro {
    font-size: 1.05rem;
    color: var(--color-text-mid);
    max-width: 640px;
    margin-bottom: 2.5rem;
    line-height: 1.75;
}

.section-intro--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--color-btn);
    color: var(--color-white);
    border-color: var(--color-btn);
}

.btn--primary:hover {
    background-color: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* White outline button — for use on image/dark backgrounds */
.btn--outline-white {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.7);
}

.btn--outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-ocean-dark);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

/* Ocean outline — for use on white backgrounds */
.btn--outline {
    background-color: transparent;
    color: var(--color-ocean);
    border-color: var(--color-ocean);
}

.btn--outline:hover {
    background-color: var(--color-ocean);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* =============================================================
   NAVBAR — white, ocean-blue text
   ============================================================= */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background-color: var(--color-nav);
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 16px rgba(21,52,168,0.10);
    transition: var(--transition);
    border-bottom: 1px solid var(--color-border);
}

/* Logged-in WordPress users see the black admin bar above the site. It
   pushes the page down (html margin-top) but not this fixed header, which
   left a white gap under the menu and hid its top edge. Visitors never
   see the admin bar, so this only matters while editing. */
@media (min-width: 783px) {
    body.admin-bar .site-header { top: 32px; }
    body.admin-bar .mobile-nav  { top: calc(var(--navbar-height) + 32px); }
}
@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
    body.admin-bar .mobile-nav  { top: calc(var(--navbar-height) + 46px); }
}

.site-header.scrolled {
    background-color: var(--color-nav-scrolled);
    box-shadow: 0 2px 24px rgba(21,52,168,0.15);
}

.header-inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

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

.site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.site-logo-text .logo-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-ocean-dark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.site-logo-text .logo-tagline {
    font-family: var(--font-body);
    font-size: 0.60rem;
    color: var(--color-ocean);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.7;
}

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

.main-nav a {
    font-family: var(--font-heading);
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ocean-dark);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.current,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
    color: var(--color-ocean);
    background-color: var(--color-ocean-pale);
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
}

.lang-switcher a {
    font-family: var(--font-heading);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ocean-light);
    padding: 4px 7px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition-fast);
}

.lang-switcher a:hover,
.lang-switcher a.active {
    color: var(--color-ocean-dark);
    background-color: var(--color-ocean-pale);
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    padding: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.nav-toggle:hover { background-color: var(--color-ocean-pale); }

.nav-toggle-bar {
    display: block;
    width: 100%; height: 2px;
    background-color: var(--color-ocean-dark);
    border-radius: 2px;
    transition: var(--transition);
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.page-body { padding-top: var(--navbar-height); }

/* =============================================================
   MOBILE NAV
   ============================================================= */

.mobile-nav {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0; right: 0; bottom: 0;
    background-color: var(--color-white);
    border-top: 3px solid var(--color-ocean);
    z-index: 999;
    overflow-y: auto;
    padding: 32px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-nav.open { transform: translateX(0); }

.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav li a {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ocean-dark);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav li:last-child a { border-bottom: none; }
.mobile-nav li a:hover { background-color: var(--color-ocean-pale); color: var(--color-ocean); }

.mobile-nav-langs {
    margin-top: 24px;
    display: flex;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.mobile-nav-langs a {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ocean-light);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    text-decoration: none;
}

.mobile-nav-langs a:hover,
.mobile-nav-langs a.active {
    color: var(--color-ocean-dark);
    background-color: var(--color-ocean-pale);
}

/* =============================================================
   HERO — full-viewport image background
   ============================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(12, 29, 106, 0.78) 0%,
        rgba(21, 52, 168, 0.45) 55%,
        rgba(21, 52, 168, 0.12) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 80px 24px;
    color: var(--color-white);
    max-width: 680px;
    padding-left: 48px;
}

.hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Phones only: the header tagline is hidden there (see the 640px media
   query), so the hero repeats it instead. Hidden on wider screens, where
   the tagline is visible, to avoid showing it twice. */
.hero-eyebrow--mobile-only { display: none; }

/* Wider screens only: the three service areas. Hidden on phones (640px
   media query), where the long line would wrap and the mobile-only
   eyebrow above takes its place. Kept on one line: it is slightly wider
   than the 680px hero column, so it may extend past it on desktop. */
.hero-eyebrow--desktop-only { white-space: nowrap; }

/* No decorative dash here, so the text lines up with the H1 below. */
.hero-eyebrow.hero-eyebrow--desktop-only::before { display: none; }

/* Narrow tablets: let it wrap rather than overflow the viewport. */
@media (max-width: 900px) {
    .hero-eyebrow--desktop-only { white-space: normal; }
}

.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px; height: 2px;
    background-color: rgba(255,255,255,0.6);
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--color-white);
    margin-bottom: 24px;
}

.hero h1 em {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.58em;   /* subtitle line — clearly secondary to line 1 */
    font-weight: 600;
    line-height: 1.25;
    font-style: normal;
    color: rgba(255,255,255,0.80);
}

.hero-desc {
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    color: rgba(255,255,255,0.80);
    margin-bottom: 40px;
    line-height: 1.75;
}

.hero-highlight {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    line-height: 1.4;
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: bounce 2.2s infinite;
}

.hero-scroll-arrow {
    width: 22px; height: 22px;
    border-right: 2px solid rgba(255,255,255,0.35);
    border-bottom: 2px solid rgba(255,255,255,0.35);
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* =============================================================
   PAGE BANNER (interior pages — uses image as background)
   ============================================================= */

.page-banner {
    position: relative;
    padding: 80px 24px 64px;
    background-color: var(--color-ocean);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 29, 106, 0.55);
    z-index: 0;
}

/* Photo banners that are already dark: lighter blue layer (Projects page) */
.page-banner--photo::before {
    background: linear-gradient(90deg, rgba(12, 29, 106, 0.70) 0%, rgba(12, 29, 106, 0.50) 45%, rgba(12, 29, 106, 0.18) 100%);
}

.page-banner-content {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;   /* same inset as .container, so the title lines up with the page content below */
}

.page-banner h1 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 10px;
}

.page-banner p {
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    max-width: 540px;
}

/* =============================================================
   CARDS GRID
   ============================================================= */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.cards-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Projects grid: auto-fill keeps empty column tracks, so a single card stays the same width as in a full grid */
.cards-grid--fixed-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--color-border);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-ocean);
}

.card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.card-body { padding: 28px 24px; }

/* Overlay variant — text over image with gradient */
.card--overlay {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.card--overlay .card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.card--overlay .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
    pointer-events: none;
}
.card--overlay .card-body h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 6px;
}
.card--overlay .card-body p {
    color: rgba(255,255,255,0.88);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
.card--overlay .card-image {
    cursor: pointer;
}

/* Card detail overlay — appears over the card itself */
/* Card detail overlay — light warm cream, full card, appears on hover */
.card-detail {
    position: absolute;
    inset: 0;
    background: rgba(255, 254, 242, 0.86);
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.card--overlay:hover .card-detail {
    opacity: 1;
    pointer-events: auto;
}
.card-detail-label {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-ocean);
    font-weight: 700;
    margin: 0 0 2px;
}
.card-detail-value {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-ocean-dark);
    margin: 0;
}
.card-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--color-ocean);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.card-detail-link:hover { color: var(--color-ocean-dark); text-decoration: underline; }

/* Section subtitle — one-line explainer under a .section-title */
.section-subtitle {
    color: var(--color-text-light);
    font-size: 0.92rem;
    margin: -0.5rem 0 28px;
}

/* Featured card image — deliberately shorter than the default square .card,
   so the card isn't mostly photo with text squeezed underneath */
.card--project .card-image {
    aspect-ratio: 16 / 9;
}

/* Date / Partner / Funder — separate labelled lines, used on both the
   Featured cards and the All Projects list rows, so the "commitment"
   (who it's with, who funded it) and the date are easy to scan instead
   of buried in a run-on sentence. "Partner"/"Funder" match the site's
   existing language ("scientific partner", "Collaborations") — no
   "client" anywhere else on the site, so none here either. */
.project-meta {
    margin: 0 0 10px;
}
.project-meta-date {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-ocean);
    letter-spacing: 0.02em;
    margin-bottom: 3px;
}
.project-meta-line {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
}
.project-meta-line strong {
    color: var(--color-ocean-dark);
    font-weight: 700;
}
.project-meta-line a {
    color: var(--color-ocean);
    text-decoration: none;
}
.project-meta-line a:hover { text-decoration: underline; }

/* Bullet list of contribution strands — only used on SWOT AdAC, whose
   collaboration has too many distinct threads for one paragraph to read
   well. See inc/projects-data.php "bullets" key. */
.project-desc-bullets {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-mid);
}
.project-desc-bullets li {
    margin-bottom: 8px;
}
.project-desc-bullets li:last-child {
    margin-bottom: 0;
}
.project-desc-bullets strong {
    color: var(--color-ocean-dark);
}

/* Projects page (v9 redesign): no accordions.
   Featured = large photo and text rows, alternating sides.
   Earlier projects = a timeline: date | photo | full text. Everything is
   visible without clicking. Rows without a real project photo are text only. */
.project-features {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.project-feature {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 44px;
    align-items: center;
}
.project-feature--flip { grid-template-columns: 7fr 5fr; }
.project-feature--flip .project-feature-image { order: 2; }
.project-feature-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.project-feature-body h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    margin: 0 0 8px;
}
.project-feature-body p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-text-mid);
}

.project-timeline { border-top: 1px solid var(--color-border); }
.project-row {
    display: grid;
    grid-template-columns: 120px 180px 1fr;
    gap: 28px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid var(--color-border);
}
.project-row--no-thumb { grid-template-columns: 120px 1fr; }
.project-row-date {
    margin: 0;
    padding-top: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-ocean);
}
.project-support-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ocean);
}
.project-row-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.project-row-body h3 {
    font-size: 1.1rem;
    margin: 0 0 6px;
    color: var(--color-ocean-dark);
}
.project-feature,
.project-row {
    scroll-margin-top: calc(var(--navbar-height) + 24px);
}
@media (max-width: 800px) {
    .project-feature,
    .project-feature--flip { grid-template-columns: 1fr; gap: 20px; }
    .project-feature--flip .project-feature-image { order: 0; }
    .project-row,
    .project-row--no-thumb { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
    .project-row-thumb { max-width: 360px; }
}

/* Compact project list — <details>/<summary> rows, collapsed by default.
   Native disclosure: keyboard- and touch-accessible with no JS, and keeps
   the page short since only the row summary shows until expanded. */
.project-list {
    border-top: 1px solid var(--color-border);
}
.project-list-item {
    border-bottom: 1px solid var(--color-border);
}
.project-list-summary {
    display: grid;
    grid-template-columns: 100px 1fr 20px;
    gap: 20px;
    align-items: start;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
}
.project-list-summary::-webkit-details-marker { display: none; }
.project-list-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-ocean);
    letter-spacing: 0.02em;
}
.project-list-main h3 {
    font-size: 1.02rem;
    margin: 0 0 6px;
    color: var(--color-ocean-dark);
}

/* Project title as a link to its own dedicated page — see
   inc/projects-data.php "detail_url". Kept the same color as the plain
   heading text (not the default link blue) so a linked title reads the
   same as an unlinked one until hovered. */
.project-title-link {
    color: inherit;
}
.project-title-link:hover {
    color: var(--color-ocean);
    text-decoration: underline;
}

/* Anchor targets for #project-{slug} links (e.g. from a project's own
   detail page linking back to a related project here) — offsets the
   jump so the fixed header doesn't cover the item. */
.card--project,
.project-list-item {
    scroll-margin-top: calc(var(--navbar-height) + 24px);
}
.project-list-chevron {
    justify-self: end;
    color: var(--color-ocean);
    transition: transform 0.2s ease;
}
.project-list-item[open] .project-list-chevron { transform: rotate(180deg); }
.project-list-detail {
    padding: 0 0 22px 120px;
}
.project-list-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-mid);
    margin: 0 0 8px;
}

/* An inline link within a project's desc (e.g. SPEM linking to ZPLAST)
   is close in color to the surrounding text otherwise — underline +
   a darker, more saturated blue makes it read clearly as a link. */
.card-body p a,
.project-list-desc a {
    color: var(--color-ocean-dark);
    text-decoration: underline;
    font-weight: 600;
}
.card-body p a:hover,
.project-list-desc a:hover {
    color: var(--color-ocean);
}
.project-list-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--color-ocean);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.project-list-link:hover { color: var(--color-ocean-dark); text-decoration: underline; }

/* =============================================================
   PROJECTS LIST — THUMBNAIL LAYOUT VARIANT
   Used only on page-projects-thumbnails.php (an experimental copy of
   page-projects.php). Scoped under .project-list--thumbs so it doesn't
   affect the live Projects page, which reuses the same base element
   classes (.project-list-item, .project-list-summary, etc.) — the
   scoping wrapper is what keeps the two independent.
   ============================================================= */
.project-list--thumbs .project-list-summary {
    grid-template-columns: 110px 1fr 20px;
    align-items: center;
}
.project-list-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.project-list--thumbs .project-list-main h3 {
    margin: 0;
}
.project-list--thumbs .project-list-detail {
    padding: 0 0 22px 130px;
}
.project-list--thumbs .project-list-detail .project-meta {
    margin-bottom: 10px;
}

/* Collaborations: partner names as one flowing line of text separated by
   middle dots, instead of a two-column table with a rule under every row. */
.collab-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.9;
    font-size: 0.95rem;
    color: var(--color-text-mid);
    text-align: justify;
}
.collab-flow li { display: inline; }
.collab-flow li:not(:last-child)::after {
    content: "\00b7";
    margin: 0 0.7em;
    color: var(--color-text-light);
}
.collab-flow a { color: var(--color-ocean); }
.collab-flow a:hover { text-decoration: underline; }

/* Also Contributed To — lighter contributions than a full project card */
.minor-contributions {
    list-style: none;
    padding: 0;
    margin: 0;
}
.minor-contribution-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.minor-contribution-item h3 {
    font-size: 1rem;
    margin: 0 0 6px;
    color: var(--color-ocean-dark);
}
.minor-contribution-item p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-mid);
    margin: 0 0 8px;
}

/* Project group filter bar */
.project-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}
.project-filter-link {
    padding: 5px 15px;
    border: 1px solid var(--color-ocean);
    border-radius: 20px;
    color: var(--color-ocean);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.project-filter-link:hover,
.project-filter-link.is-active {
    background: var(--color-ocean);
    color: #fff;
}

/* Compact label card — title + short description */
.card--compact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.card--compact .card-body {
    padding: 28px 24px;
    text-align: center;
    width: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card--compact .card-body h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-ocean-dark);
}
.card--compact .card-body p {
    margin: 10px 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-mid);
}

/* Services "How We Work Together": the three cards have descriptions of
   different lengths, so vertical centring put each title at a different
   height. Top-align instead so the titles line up across the row. */
#how-we-work .card--compact,
#how-we-work .card--compact .card-body {
    align-items: stretch;
    justify-content: flex-start;
}

/* Services "How We Work Together": the three formats as rows in one panel
   on the photo (title left, description right) instead of three equal
   cards. Deliberately not numbered: they are alternatives, not steps. */
.engagement-list {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 48px;
}
.engagement-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 12px 40px;
    align-items: start;
    padding: 28px 0;
    border-top: 1px solid var(--color-border);
}
.engagement-item:first-child { border-top: none; }
.engagement-item h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-ocean-dark);
}
.engagement-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-mid);
}
@media (max-width: 700px) {
    .engagement-list { padding: 8px 24px; }
    .engagement-item { grid-template-columns: 1fr; padding: 22px 0; }
}

/* Home "Services": the three services as columns in one panel on the
   photo, left-aligned and divided by thin lines, instead of three
   separate white cards. */
.service-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 0;
}
.service-column {
    padding: 0 40px;
    border-left: 1px solid var(--color-border);
}
.service-column:first-child { border-left: none; }
.service-column h3 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: var(--color-ocean-dark);
}
.service-column p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-mid);
}
@media (max-width: 800px) {
    .service-columns { grid-template-columns: 1fr; padding: 8px 0; }
    .service-column {
        padding: 28px 28px;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    .service-column:first-child { border-top: none; }
}

.card-icon {
    width: 52px; height: 52px;
    background-color: var(--color-ocean-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.5rem;
}

.card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--color-ocean-dark);
}

.card p {
    font-size: 0.93rem;
    color: var(--color-ocean);
    line-height: 1.65;
    margin-bottom: 0;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--font-heading);
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ocean);
    text-decoration: none;
    transition: var(--transition-fast);
}

.card-link:hover {
    color: var(--color-ocean-dark);
    gap: 10px;
}

/* =============================================================
   SKILL TAGS
   ============================================================= */

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.skill-tag {
    background-color: var(--color-ocean-pale);
    color: var(--color-ocean);
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
}

/* =============================================================
   ABOUT SPLIT
   ============================================================= */

.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Intro variant: photo sits beside only the opening paragraphs, top-aligned */
.about-split--intro {
    align-items: start;
}

.about-img-wrap img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Small caption under the About page portrait */
.about-img-caption {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-light);
    text-align: center;
}

.about-text p {
    color: var(--color-text-mid);
    margin-bottom: 1rem;
}

.about-text li {
    color: var(--color-text-mid);
}

/* Same bottom spacing as a paragraph, so the heading after a list
   (Languages → Field Experience) isn't jammed against it */
.about-text ul {
    margin-bottom: 1.2em;
}

/* Rest of the bio: a single centred reading column, no side image */
.about-bio-continued {
    margin-top: 60px;
}

.about-bio-continued h3:first-child {
    margin-top: 0;
}

/* =============================================================
   PUBLICATIONS LIST
   ============================================================= */

.publication-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.publication-item {
    padding: 20px 24px;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-ocean);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.publication-item:hover {
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-ocean-dark);
}

/* Thumbnail variant — a document's cover page next to its text, used on
   page-project-zplast.php's Field Resources. Keeps each item compact
   (one row instead of stacked image+text) rather than a full-width cover. */
.publication-item--with-thumb {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.publication-item-thumb {
    flex: 0 0 130px;
    width: 130px;
    aspect-ratio: 500 / 707;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.publication-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.publication-year {
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ocean);
    margin-bottom: 6px;
}

.publication-title {
    font-family: var(--font-heading);
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-ocean-dark);
    margin-bottom: 6px;
    line-height: 1.4;
}

.publication-authors {
    font-size: 0.88rem;
    color: var(--color-text-mid);
    margin-bottom: 4px;
}

.publication-journal {
    font-size: 0.83rem;
    color: var(--color-ocean-light);
    font-style: italic;
}

.publication-doi a {
    font-size: 0.80rem;
    color: var(--color-ocean-mid);
}

.pub-section-heading {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ocean);
    margin: 40px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
}

/* Publications page — plain Harvard-style references (see
   thalassa_publication_list() in functions.php), with a hanging indent
   like a printed reference list. */
.pub-refs {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pub-ref {
    margin-bottom: 1.1em;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-mid);
    overflow-wrap: anywhere;
}
.pub-ref strong { color: var(--color-ocean-dark); }
.pub-ref a {
    color: var(--color-ocean-mid);
    text-decoration: underline;
}
.pub-ref a:hover { color: var(--color-ocean-dark); }

/* Publications page — journalism credits: a short lead line, then one
   plain line per credit (replaces the old callout box). */
.pub-credits-lead {
    font-size: 0.95rem;
    color: var(--color-text-mid);
    margin-bottom: 0.8em;
}
.pub-credits {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pub-credits li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-mid);
    margin-bottom: 0.5em;
}

/* =============================================================
   PROJECT DETAIL PAGE — summary panel (Location/Duration/Partners…)
   shown under the banner on a dedicated single-project page (e.g.
   page-project-zplast.php). Label/value pairs, not a table, since the
   number of fields varies per project.
   ============================================================= */

.project-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Compact section — used on page-project-zplast.php, which stacks many
   short sections in a row; the default --section-pad-v (90px) between
   each one added up to a lot of scroll for how little text each holds. */
.section--compact {
    padding-top: 44px;
    padding-bottom: 44px;
}

.project-hero-meta-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ocean);
    margin-bottom: 6px;
}

.project-hero-meta-value {
    font-size: 0.95rem;
    color: var(--color-text-mid);
    line-height: 1.5;
}

.project-hero-meta-value a {
    color: var(--color-ocean-mid);
}

/* =============================================================
   PROJECT DETAIL PAGE — supporting photos/figures (map, site
   photos, field photos, result charts). Lighter than .card — no
   shadow/hover lift, since these aren't clickable.
   ============================================================= */

.page-figure {
    margin: 24px 0;
    text-align: center;
}
.page-figure img {
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.page-figure figcaption {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--color-text-light);
}
.page-figure--sm img {
    max-width: 420px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.photo-grid .page-figure {
    margin: 0;
}
.photo-grid .page-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =============================================================
   TIMELINE
   ============================================================= */

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-ocean), var(--color-ocean-light));
}

.timeline-item {
    position: relative;
    margin-bottom: 32px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -34px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: var(--color-ocean);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-ocean);
}

.timeline-date {
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ocean);
    margin-bottom: 4px;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ocean-dark);
    margin-bottom: 4px;
}

.timeline-org {
    font-size: 0.88rem;
    color: var(--color-ocean-mid);
    font-weight: 600;
    margin-bottom: 6px;
}

.timeline-desc {
    font-size: 0.90rem;
    color: var(--color-text-mid);
    line-height: 1.65;
}

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

.contact-info-block {
    padding: 36px 32px;
    background-color: var(--color-ocean);
    border-radius: var(--radius-lg);
    color: var(--color-white);
}

.contact-info-block h3 { color: var(--color-white); margin-bottom: 24px; }

.contact-detail-value {
    color: var(--color-white);
    font-size: 0.92rem;
    text-decoration: none;
    overflow-wrap: break-word;
}

.contact-detail-value a { color: var(--color-white); }
.contact-detail-value a:hover { color: var(--color-ocean-pale); }

/* Centred single-CTA layout (contact page) — every child text-centred and
   stacked, no flex/icon rows, so there's nothing that can throw the
   centring off asymmetrically. */
.contact-info-block--centered {
    text-align: center;
}
.contact-info-block--centered .contact-info-intro {
    color: rgba(255,255,255,0.85);
    max-width: 420px;
    margin: 0 auto 28px;
}
.contact-info-block--centered .contact-info-email {
    margin-top: 14px;
}
/* No button on the contact page, so the address itself is the CTA */
.contact-info-block--centered .contact-info-email .contact-detail-value {
    font-size: 1.2rem;
    font-weight: 600;
}
.contact-info-block--centered .contact-info-email .contact-detail-value:hover {
    color: var(--color-ocean-pale);
    text-decoration: underline;
}
.contact-info-block--centered .contact-info-location {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}

/* Contact page: the same content in a white panel on a full-width photo
   (replaces the solid blue card; no emoji on the location line). */
.contact-panel {
    text-align: center;
    padding: 48px 40px;
}
.contact-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-ocean);
}
.contact-panel h1 {
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-ocean-dark);
}
.contact-panel .contact-info-intro {
    color: var(--color-text-mid);
    max-width: 440px;
    margin: 0 auto 20px;
}
.contact-panel .contact-info-email { margin-top: 28px; }
.contact-panel .contact-detail-value {
    color: var(--color-ocean);
    font-size: 1.25rem;
    font-weight: 600;
}
.contact-panel .contact-detail-value:hover {
    color: var(--color-ocean-dark);
    text-decoration: underline;
}
.contact-panel .contact-info-location {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 0.9rem;
}
@media (max-width: 600px) {
    .contact-panel { padding: 36px 24px; }
    .contact-panel .contact-detail-value { font-size: 1.05rem; }
}

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

.site-footer {
    background-color: var(--color-bg-footer);
    color: rgba(255,255,255,0.65);
    padding: 44px 24px 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: first baseline;
    gap: 64px;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-brand .footer-logo {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.footer-brand .footer-tagline {
    font-size: 0.70rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 10px;
}

.footer-brand p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    max-width: 440px;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 12px;
    line-height: 1.2;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-links a:hover { color: var(--color-white); }

.footer-contact-detail {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.footer-contact-detail a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
}

.footer-contact-detail a:hover { color: var(--color-white); }

.footer-bottom {
    max-width: 960px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.80rem;
    color: rgba(255,255,255,0.35);
}

.footer-bottom a {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
}

.footer-bottom a:hover { color: rgba(255,255,255,0.65); }

/* =============================================================
   BACK TO TOP
   ============================================================= */

.back-to-top {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 900;
    width: 42px; height: 42px;
    background-color: var(--color-ocean);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    text-decoration: none;
}

.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover {
    background-color: var(--color-ocean-dark);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* =============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================= */

@media (max-width: 1024px) {
    :root { --section-pad-v: 64px; }

    .main-nav, .lang-switcher { display: none; }
    .nav-toggle { display: flex; }
    .mobile-nav { display: block; }

    .footer-grid { grid-template-columns: 1fr auto; gap: 40px; }
    .about-split { grid-template-columns: 1fr; gap: 36px; }

    .section--image { background-attachment: scroll; }
    .hero-bg { background-attachment: scroll; }

    .panel { padding: 32px 28px; }
    .hero-content { padding-left: 24px; }
}

/* =============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================= */

@media (max-width: 640px) {
    :root {
        --navbar-height:     58px;
        --section-pad-v:     48px;
        --section-pad-h:     16px;
    }

    /* The logo text doesn't shrink (flex-shrink: 0) — on a narrow phone
       it can be wide enough to push the hamburger button off-screen to
       the right, with no scroll indicator, so the menu just looks gone.
       Drop the tagline and shrink the name to free up room for it. */
    .header-inner { padding: 0 16px; gap: 12px; }
    .site-logo-text .logo-tagline { display: none; }
    .site-logo-text .logo-name { font-size: 1rem; }

    .hero h1 { font-size: 2rem; }
    .hero-content { max-width: 100%; padding-left: 20px; padding-right: 20px; }

    /* Same overflow risk as the header logo: uppercase text with wide
       letter-spacing plus a decorative line, in a narrow column — shrink
       both so it stays on one line instead of wrapping awkwardly. */
    .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.10em; gap: 8px; }
    .hero-eyebrow::before { width: 18px; }
    .hero-eyebrow--mobile-only { display: flex; }
    .hero-eyebrow--desktop-only { display: none; }

    .cards-grid,
    .cards-grid--2,
    .cards-grid--3,
    .cards-grid--fixed-2 { grid-template-columns: 1fr; }

    .card--project .card-image { aspect-ratio: 4 / 3; }

    .project-list-summary { grid-template-columns: 1fr 20px; gap: 4px 12px; }
    .project-list-date { grid-column: 1 / 2; grid-row: 1; }
    .project-list-main { grid-column: 1 / 2; grid-row: 2; }
    .project-list-chevron { grid-row: 1 / 3; align-self: center; }
    .project-list-detail { padding-left: 0; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .btn-group { flex-direction: column; align-items: flex-start; }
    .btn { width: 100%; justify-content: center; }

    .panel { padding: 24px 20px; }
}

/* =============================================================
   POLYLANG / WPML
   ============================================================= */

.pll-parent-menu-item > a,
.wpml-ls-menu-item > a {
    font-family: var(--font-heading) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-ocean-light) !important;
    padding: 4px 8px !important;
}

.pll-parent-menu-item > a:hover,
.wpml-ls-menu-item > a:hover {
    color: var(--color-ocean-dark) !important;
}

/* =============================================================
   PRINT
   ============================================================= */

@media print {
    .site-header, .site-footer, .back-to-top,
    .mobile-nav, .nav-toggle { display: none !important; }
    .page-body { padding-top: 0; }
    body { color: #000; font-size: 12pt; }
    .section--image::before { display: none; }
}