/* =========================================================================
   Strategic Partners — design token layer.
   Section styles are added in later features; keep this file growable.
   ========================================================================= */

/* =========================================================================
   Typography — self-hosted fonts (no third-party requests).
   Manual de Marca v2.0: Raleway (titles, logotype, figures) + Manrope (text,
   UI), both SIL OFL 1.1 (licences in assets/fonts/). Variable WOFF2, split by
   unicode-range: the latin file covers all Spanish characters; latin-ext only
   downloads if a page uses a glyph outside it.
   ========================================================================= */

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/raleway-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Metric-compatible fallbacks: while the web font loads, Arial is scaled to
   the web font's width and vertical metrics so the swap does not move the
   layout. Manual: in Office use Calibri Light / Calibri; on the web Arial. */
@font-face {
    font-family: "SP Heading Fallback";
    src: local("Arial"), local("ArialMT");
    size-adjust: 100%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "SP Sans Fallback";
    src: local("Arial"), local("ArialMT");
    size-adjust: 104%;
    ascent-override: 96%;
    descent-override: 27%;
    line-gap-override: 0%;
}

/* Global box-sizing reset. Without this, elements that combine width:100%
   with padding-inline (e.g. .container) resolve to 100% + padding and spill
   past the viewport edge on mobile, clipping the hero and section headings
   at both sides (Req. 9.4/9.6, Property 17). border-box folds the padding
   into the declared width so .container never exceeds the viewport. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Brand palette */
    --sp-primary: #14202f; /* Azul Estrategia */
    --sp-accent: #3fc1e8; /* Celeste Partners */
    --sp-ink: #14202f;
    --sp-muted: #5a5f68; /* Grafito */
    --sp-bg: #f4f3ef; /* Marfil */
    --sp-white: #ffffff;

    /* Typography */
    --sp-font-heading: "Raleway", "SP Heading Fallback", Calibri, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --sp-font-body: "Manrope", "SP Sans Fallback", Calibri, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --sp-font-ui: var(--sp-font-body);

    /* Spacing scale */
    --sp-space-xs: 0.5rem;
    --sp-space-sm: 1rem;
    --sp-space-md: 1.5rem;
    --sp-space-lg: 2.5rem;
    --sp-space-xl: 4rem;
    --sp-space-2xl: 6rem;

    /* Radii */
    --sp-radius-sm: 2px;
    --sp-radius-md: 4px;
    --sp-radius-lg: 4px;
    --sp-radius-pill: 999px;

    /* Layout */
    --sp-container-max: 1200px;
    --sp-container-pad: 1.25rem;

    /* Shadows */
    --sp-shadow-sm: none;
    --sp-shadow-md: none;

    /* -----------------------------------------------------------------
       Derived token layer (additive refinement — Avantage "Strategy").
       All values below are derived from the six base colours above and
       exist so that section styles never hardcode literals (Req. 1.1,
       1.8). No existing --sp-* token is renamed.
       ----------------------------------------------------------------- */

    /* Accent treatment: hover/active shade and translucent accent tints. */
    /* --sp-accent-strong is the ONLY celeste allowed as text on light
       backgrounds (5,37:1 on white). Plain --sp-accent is for fills, lines,
       or text on Azul Estrategia only. */
    --sp-accent-strong: #16729a; /* Celeste texto: 5,37:1 sobre blanco */
    --sp-accent-soft: rgba(63, 193, 232, 0.14);
    --sp-accent-outline: rgba(63, 193, 232, 0.4);

    /* Primary-derived surfaces & tints. */
    --sp-primary-tint: #0e1824;
    --sp-primary-wash: rgba(20, 32, 47, 0.06);
    --sp-primary-ghost: rgba(20, 32, 47, 0.04);
    --sp-surface-alt: #f4f3ef;
    --sp-border: #e4e4e2;
    --sp-border-subtle: rgba(20, 32, 47, 0.1);
    --sp-border-strong: rgba(20, 32, 47, 0.2);

    /* On-dark text tiers (white at reduced opacity over --sp-primary). */
    --sp-on-dark: rgba(255, 255, 255, 0.86);
    --sp-on-dark-muted: rgba(255, 255, 255, 0.82);
    --sp-on-dark-faint: rgba(255, 255, 255, 0.72);
    --sp-on-dark-soft: rgba(255, 255, 255, 0.78);
    --sp-on-dark-line: rgba(255, 255, 255, 0.1);
    --sp-on-dark-outline: rgba(255, 255, 255, 0.5);

    /* Ink over accent (CTA band copy). */
    --sp-on-accent-muted: rgba(20, 32, 47, 0.82);

    /* Header glass surface. */
    --sp-header-surface: #ffffff;

    /* CTA band gradient endpoint (accent, lightened). */
    --sp-accent-light: #6fd0ee;

    /* Hero overlay: calibrated so text keeps >= 4.5:1 contrast (Req. 2.4). */
    --sp-hero-overlay-from: rgba(20, 32, 47, 0.92);
    --sp-hero-overlay-to: rgba(20, 32, 47, 0.7);
    --sp-hero-overlay-bg-from: rgba(20, 32, 47, 0.88);
    --sp-hero-overlay-bg-to: rgba(20, 32, 47, 0.65);

    /* -----------------------------------------------------------------
       Replica tokens (additive — Avantage "Strategy" replica, Req. 1.5).
       ----------------------------------------------------------------- */

    /* Radii & spacing */
    --sp-radius-xl: 230px;
    --sp-space-3xl: 8rem;

    /* Type scale (clamp: min, proportional preferred, max).
       Display reaches exactly 4.375rem (70px) at a 1200px viewport and is
       strictly smaller below it (Req. 18.5-18.7). */
    --sp-fs-service-title: 1.5625rem;

    /* Letter-spacing */
    --sp-ls-tight: -0.005em;

    /* Motion */
    /* Motion (spec site-motion): ease-out exponential, no bounce. */
    --sp-ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
    --sp-dur-micro: 200ms; /* hover, focus, buttons */
    --sp-dur-reveal: 600ms; /* section and card entrances */

    /* Header / map dimensions */
    --sp-topbar-height: 2.5rem;
    --sp-header-height: 5rem;
    --sp-header-height-shrunk: 4rem;
    --sp-map-height: 700px;

}

/* -------------------------------------------------------------------------
   Layout container
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Accessibility utilities
   ------------------------------------------------------------------------- */

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--sp-space-xs) var(--sp-space-sm);
    background: var(--sp-primary);
    color: var(--sp-white);
    border-radius: 0 0 var(--sp-radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   Colour pairing rules (Manual de Marca 07 and 10.3, contrast WCAG 2.1)
   - Celeste Partners (#3fc1e8) on Azul Estrategia: AAA (7,83:1) for links,
     numbers and CTAs; Azul Estrategia text on a celeste button: AAA.
   - Celeste Partners on white/Marfil: 2,1:1, never as text. Only bars and
     details; for text on light use --sp-accent-strong (#16729a, 5,37:1).
   - Azul dominates; celeste is an accent, never a large text surface.
   ------------------------------------------------------------------------- */

/*
 * Visible keyboard focus indicator (Req. 12.3): >= 2px and >= 3:1 contrast
 * against the adjacent background, built only from --sp-* tokens.
 *
 * A single accent outline fails the 3:1 ratio over the light body surfaces,
 * so the indicator pairs a dark primary outline (high contrast on light
 * sections) with a white halo ring via box-shadow (high contrast on the dark
 * primary sections: hero, contact, footer). One of the two
 * always clears 3:1 whatever the backdrop.
 */
:focus-visible {
    outline: 3px solid var(--sp-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sp-white);
}

/*
 * The main landmark only receives focus programmatically when the skip link is
 * activated (it carries tabindex="-1"); it is not an interactive control, so it
 * must not paint the focus ring.
 */
#main:focus,
#main:focus-visible {
    outline: none;
    box-shadow: none;
}

/* =========================================================================
   Buttons
   ========================================================================= */

/*
 * Filled button. On :hover and :focus-visible the background, border and text
 * colours swap over --sp-dur-micro and revert at the same speed on leave.
 * Variants only set the four colour custom properties.
 * Pairings: celeste fill -> Azul Estrategia text; navy fill -> white text.
 */
.btn {
    --btn-bg: var(--sp-primary);
    --btn-fg: var(--sp-white);
    --btn-bg-hover: var(--sp-white);
    --btn-fg-hover: var(--sp-primary);

    display: inline-block;
    min-height: 3rem; /* 48 px touch target */
    padding: 0.95em 1.75em;
    font-family: var(--sp-font-ui);
    font-weight: var(--sp-fw-semibold);
    font-size: var(--sp-fs-small);
    line-height: 1.2;
    text-align: center;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 2px solid var(--btn-bg);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition:
        background-color var(--sp-dur-micro) var(--sp-ease),
        color var(--sp-dur-micro) var(--sp-ease),
        border-color var(--sp-dur-micro) var(--sp-ease);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn:hover,
.btn:focus-visible {
    color: var(--btn-fg-hover);
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    text-decoration: none;
}

/* Celeste fill with Azul Estrategia text (7,83:1); swaps to Marfil fill. */
.btn--accent {
    --btn-bg: var(--sp-accent);
    --btn-fg: var(--sp-primary);
    --btn-bg-hover: var(--sp-bg);
    --btn-fg-hover: var(--sp-primary);
}

/* Outlined secondary button on Azul Estrategia (manual 10.2: one primary per view). */
.btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--sp-bg);
    --btn-bg-hover: var(--sp-bg);
    --btn-fg-hover: var(--sp-primary);

    border-color: rgba(244, 243, 239, 0.7);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    border-color: var(--sp-bg);
}

/* White fill with Navy text; swaps to Navy fill with white text. */
.btn--light {
    --btn-bg: var(--sp-white);
    --btn-fg: var(--sp-primary);
    --btn-bg-hover: var(--sp-accent);
    --btn-fg-hover: var(--sp-primary);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

/* =========================================================================
   Avantage "Strategy" layer — base typography, shared patterns, sections.
   Measured against https://avantage.bold-themes.com/strategy/ (design-notes.md).
   ========================================================================= */

:root {
    /* Celeste readable on light surfaces (same value as --sp-accent-strong). */
    --sp-accent-display: #16729a;
    --sp-cream: #f4f3ef;
    --sp-navy-deep: #0e1824;
    /* Typography scale (Raleway titles / Manrope text), scale of the Manual de Marca
       v2.0 section 10.2 (desktop / mobile). */
    --sp-fs-display: clamp(2.75rem, 1.2rem + 4.4vw, 4.5rem);
    --sp-fs-h2: clamp(2.25rem, 1.3rem + 3vw, 3.75rem);
    --sp-fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --sp-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --sp-fs-lead: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
    --sp-fs-small: 0.875rem;
    --sp-fs-counter: clamp(3.5rem, 2rem + 4vw, 6rem);
    --sp-fw-regular: 400;
    --sp-fw-medium: 500;
    --sp-fw-semibold: 600;
    --sp-ls-heading: 0;
    --sp-ls-eyebrow: 0.28em;
    --sp-lh-heading: 1.2;
    --sp-lh-body: 1.65;
    --sp-measure: 70ch;
    --sp-curve: 0px; /* the brand is rectilinear: no large curves */
    --sp-bleed: calc(max(0px, (100vw - var(--sp-container-max)) / 2) + var(--sp-container-pad));
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sp-font-body);
    font-size: var(--sp-fs-body);
    line-height: var(--sp-lh-body);
    color: #3d434d; /* body text: 9,53:1 on Marfil (manual 10.3) */
    background: var(--sp-bg);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.site-main {
    overflow-x: clip;
}

.site-main > section {
    position: relative;
}

/* Button variants added by the Avantage layer. */
.btn--navy {
    --btn-bg: var(--sp-primary);
    --btn-fg: var(--sp-white);
    --btn-bg-hover: var(--sp-accent);
    --btn-fg-hover: var(--sp-primary);
}

.btn--sm {
    min-height: 3rem;
    padding: 0.85em 1.4em;
    font-size: 0.875rem;
}

.btn,
.btn--accent {
    font-family: var(--sp-font-ui);
}

/* ---- Shared patterns ---------------------------------------------------- */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
    font-family: var(--sp-font-ui);
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--sp-accent-strong);
    font-weight: var(--sp-fw-medium);
    letter-spacing: var(--sp-ls-eyebrow);
    text-transform: uppercase;
}


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


.display-title {
    margin: 0 0 1.75rem;
    font-family: var(--sp-font-heading);
    font-weight: 300;
    font-size: var(--sp-fs-h2);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--sp-primary);
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: normal;
}

.display-title strong {
    font-weight: 600;
}

.display-title__first,
.display-title__second {
    display: block;
}

.display-title__first {
    color: var(--sp-primary);
    font-weight: 300;
}

.display-title__second {
    color: var(--sp-primary);
    font-weight: 600;
}

.lead {
    margin: 0 0 1.75rem;
    font-size: var(--sp-fs-lead);
    line-height: 1.6;
    color: var(--sp-muted);
    max-width: var(--sp-measure);
}

.lead p {
    margin: 0 0 1rem;
}

/* ---- Scroll reveal --------------------------------------------------------
   Hidden initial state only under html.js so content is visible without JS. */
.js .reveal {
    opacity: 0;
    transition: opacity var(--sp-dur-reveal) var(--sp-ease);
}

.js .reveal.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transition: none;
    }
}

/* =========================================================================
   Header — one line (negative logotype, menu, tools) on Azul Estrategia.
   Top of the page: transparent over the hero. On scroll the header pins to
   the top as a navy bar covering 100% of the page width with a thin celeste
   rule (no shadows: manual 08.1).
   ========================================================================= */

:root {
    --sp-bar-border: #3fc1e8;
    --sp-bar-shadow: 0 14px 34px rgba(14, 24, 36, 0.2);
    --sp-bar-height: 4.25rem;
}

html {
    scroll-padding-top: calc(var(--sp-bar-height) + 1.5rem);
}

.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 100;
    padding-block: 0.75rem;
    background: var(--sp-bg);
    border-bottom: 1px solid var(--sp-border-subtle);
    transition: background-color var(--sp-dur-micro) var(--sp-ease), border-color var(--sp-dur-micro) var(--sp-ease);
}

body:not(.home) .site-header {
    position: sticky;
    top: 0;
    background: var(--sp-bg);
}

.site-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--sp-bar-height);
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.site-header__brand {
    flex: 0 0 auto;
}

.site-header__brand .custom-logo-link {
    display: block;
}

.site-header__brand img {
    display: block;
    width: auto;
    height: 3.75rem; /* 2:1 logo = 120 px wide, the manual's minimum (120-180 px) */
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.75rem;
}

.primary-menu {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-menu a {
    position: relative;
    display: block;
    padding: 0.65rem 1rem;
    font-family: var(--sp-font-ui);
    font-weight: var(--sp-fw-semibold);
    font-weight: var(--sp-fw-medium);
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--sp-primary);
    text-decoration: none;
    border-radius: var(--sp-radius-sm);
    transition: color var(--sp-dur-micro) var(--sp-ease), background-color var(--sp-dur-micro) var(--sp-ease);
}

.primary-menu a::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--sp-accent);
    border-radius: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sp-dur-micro) var(--sp-ease);
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
    background: var(--sp-primary-wash);
    text-decoration: none;
}

.primary-menu a[aria-current="true"]::after,
.primary-menu a:hover::after {
    transform: scaleX(1);
}

.site-header__tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
}

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sp-font-ui);
    font-weight: var(--sp-fw-semibold);
    font-size: 0.875rem;
    color: var(--sp-primary);
    white-space: nowrap;
}

.header-phone svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--sp-accent-strong);
}

a.header-phone:hover {
    color: var(--sp-accent-strong);
    text-decoration: none;
}

/* Pinned state: full-width white bar. */
.site-header.is-shrunk {
    position: fixed;
    inset: 0 0 auto 0;
    padding-block: 0;
    background: var(--sp-bg);
    border-bottom: 1px solid var(--sp-border-strong);
    box-shadow: none;
}

body:not(.home) .site-header.is-shrunk {
    position: sticky;
}

.site-header.is-shrunk .site-header__bar {
    min-height: 4rem;
    padding-inline: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-bar .site-header.is-shrunk {
    top: 32px;
}

.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nav-toggle__box {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
    margin: 0 auto;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--sp-primary);
    content: "";
    transition: transform var(--sp-dur-micro) var(--sp-ease), opacity var(--sp-dur-micro) var(--sp-ease);
}

.nav-toggle__bar {
    top: 50%;
    margin-top: -1px;
}

.nav-toggle__bar::before {
    top: -7px;
}

.nav-toggle__bar::after {
    top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* Social icons (header bar, footer circles). */
.social-icons {
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-icons a {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--sp-primary);
    transition: color var(--sp-dur-micro) var(--sp-ease), background-color var(--sp-dur-micro) var(--sp-ease);
}

.social-icons a:hover,
.social-icons a:focus-visible {
    color: var(--sp-accent-strong);
}

.social-icons--round {
    gap: 0.6rem;
}

.social-icons--round a {
    width: 2.6rem;
    height: 2.6rem;
    background: var(--sp-bg);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-primary);
}

.social-icons--round a:hover,
.social-icons--round a:focus-visible {
    background: var(--sp-accent);
    color: var(--sp-primary);
}

@media (max-width: 1179px) {
    .header-phone {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header__bar,
    .primary-menu a,
    .primary-menu a::after {
        transition: none;
    }
}

/* =========================================================================
   Form controls (element-level styles, shared by every form)
   ========================================================================= */

.field label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sp-font-ui);
    font-weight: var(--sp-fw-semibold);
    font-size: 0.875rem;
    color: var(--sp-primary);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--sp-ink);
    background: var(--sp-white);
    border: 1px solid #a9b0bb;
    border-radius: var(--sp-radius-sm);
}

/* Focus: celeste border + halo (manual 10.2), visible and >= 3 px. */
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--sp-accent);
    outline: 3px solid rgba(63, 193, 232, 0.45);
    outline-offset: 0;
    box-shadow: none;
}

.consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.4;
}

.consent input {
    margin-top: 0.2rem;
}

.form-note {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    border-radius: var(--sp-radius-sm);
}

.form-note--ok {
    color: #1b5e20;
    background: #e7f4e8;
}

.form-note--error {
    color: #8a1c1c;
    background: #fbe9e9;
}


/* =========================================================================
   Footer — link colours (layout and type live in footer.php as utilities)
   ========================================================================= */

.site-footer a {
    color: var(--sp-white);
    text-decoration: none;
    transition: color var(--sp-dur-micro) var(--sp-ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--sp-accent);
    text-decoration: none;
}

/* Social circles: navy glyph on a white disc (the generic footer link colour would hide it). */
.site-footer .social-icons--round a {
    color: var(--sp-primary);
}

.site-footer .social-icons--round a:hover,
.site-footer .social-icons--round a:focus-visible {
    color: var(--sp-primary);
    background: var(--sp-accent);
}

@media (max-width: 767px) {
    .site-footer .social-icons--round {
        flex-wrap: wrap;
    }

    .site-footer .social-icons--round a {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* =========================================================================
   Content templates — page / single / archive / 404
   ========================================================================= */

.entry {
    padding-block: var(--sp-space-2xl);
}

.entry__inner {
    max-width: 760px;
    margin-inline: auto;
}

.entry__header {
    margin-bottom: var(--sp-space-lg);
}

.entry__meta {
    margin-top: var(--sp-space-sm);
    font-size: 0.95rem;
    color: var(--sp-muted);
}

.entry__meta span + span::before {
    content: "\00B7";
    margin-inline: 0.5ch;
}

.entry__thumbnail {
    margin: 0 0 var(--sp-space-lg);
    border-radius: var(--sp-radius-md);
    overflow: hidden;
}

.entry__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

.entry__content > * + * {
    margin-top: var(--sp-space-md);
}

.entry__content h2,
.entry__content h3 {
    margin-top: var(--sp-space-lg);
    font-family: var(--sp-font-heading);
}

.entry__content a {
    color: var(--sp-primary);
    text-decoration: underline;
}

.entry__pagelinks {
    margin-top: var(--sp-space-lg);
    display: flex;
    gap: var(--sp-space-xs);
    align-items: center;
    flex-wrap: wrap;
}

.entry__footer {
    margin-top: var(--sp-space-lg);
    padding-top: var(--sp-space-md);
    border-top: 1px solid var(--sp-border-subtle);
}

.entry__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Post navigation (single.php) */
.post-navigation {
    max-width: 760px;
    margin: var(--sp-space-xl) auto 0;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-space-md);
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-accent-strong);
}

/* -------------------------------------------------------------------------
   Archive
   ------------------------------------------------------------------------- */

.archive {
    padding-block: var(--sp-space-2xl);
}

.archive__header {
    margin-bottom: var(--sp-space-xl);
}

.archive__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-space-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card--post {
    display: flex;
    flex-direction: column;
    background: var(--sp-white);
    border-radius: var(--sp-radius-md);
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
    height: 100%;
}

.card__media img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-xs);
    padding: var(--sp-space-md);
}

.card__title {
    font-family: var(--sp-font-heading);
    font-size: 1.25rem;
    line-height: 1.3;
}

.card__title a {
    color: var(--sp-ink);
    text-decoration: none;
}

.card__title a:hover,
.card__title a:focus {
    color: var(--sp-primary);
}

.card__meta {
    font-size: 0.85rem;
    color: var(--sp-muted);
}

.card__excerpt {
    color: var(--sp-muted);
}

.card__more {
    align-self: flex-start;
    margin-top: var(--sp-space-xs);
}

.archive__empty {
    text-align: center;
    color: var(--sp-muted);
}

/* Pagination */
.pagination {
    margin-top: var(--sp-space-xl);
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-xs);
    align-items: center;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 0.75rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-white);
    color: var(--sp-primary);
    text-decoration: none;
    box-shadow: var(--sp-shadow-sm);
}

.pagination .page-numbers.current {
    background: var(--sp-primary);
    color: var(--sp-white);
}

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */

.error-404 {
    padding-block: var(--sp-space-2xl);
    text-align: center;
}

.error-404__inner {
    max-width: 640px;
}

.error-404__message {
    margin-bottom: var(--sp-space-lg);
    color: var(--sp-muted);
}

.error-404__search {
    margin-bottom: var(--sp-space-lg);
}

.error-404__search .search-form {
    display: flex;
    gap: var(--sp-space-xs);
    justify-content: center;
    flex-wrap: wrap;
}

.error-404__search input[type="search"] {
    padding: 0.7rem 1rem;
    border: 1px solid var(--sp-border-strong);
    border-radius: var(--sp-radius-pill);
    min-width: 240px;
}

/* =========================================================================
   Staggered reveal of grid items (progressive enhancement via JS)
   ========================================================================= */

.services__grid > *,
.circle__pillars > * {
    transition: opacity var(--sp-dur-reveal) var(--sp-ease), transform var(--sp-dur-reveal) var(--sp-ease);
}

.js .reveal:not(.is-visible) .services__grid > *,
.js .reveal:not(.is-visible) .circle__pillars > * {
    opacity: 0;
    transform: translateY(18px);
}

.stagger-in {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .services__grid > *,
    .circle__pillars > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
}

/* =========================================================================
   Mobile hardening
   ========================================================================= */

html,
body {
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}


body.nav-open {
    overflow: hidden;
}


/* =========================================================================
   Responsive
   - >= 1100px desktop (reference layout)
   - 768-1099px tablet: stacked intros, two-column grids
   - <= 767px mobile: single column, dropdown menu
   ========================================================================= */

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    .site-nav {
        flex: 0 0 auto;
        order: 3;
        margin-left: 0;
    }

    .site-header__tools {
        order: 2;
        margin-left: auto;
    }

    .site-header__tools .social-icons {
        display: none;
    }

    .primary-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.5rem);
        background: var(--sp-white);
        border: 1px solid var(--sp-border-strong);
        border-radius: var(--sp-radius-md);
        box-shadow: none;
        transition: opacity var(--sp-dur-micro) var(--sp-ease), transform var(--sp-dur-micro) var(--sp-ease), visibility var(--sp-dur-micro) var(--sp-ease);
    }

    .primary-menu.is-open {
        max-height: 80vh;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .primary-menu li + li {
        border-top: 1px solid var(--sp-border);
    }

    .primary-menu a {
        padding: 1rem 1.25rem;
        border-radius: 0;
    }

    .primary-menu a::after {
        left: 1.25rem;
        right: auto;
        width: 2rem;
        bottom: 0.55rem;
    }
}

@media (max-width: 767px) {
    .site-header {
        padding-block: 0.75rem;
    }

    .site-header__bar {
        gap: 0.5rem;
        min-height: 3.5rem;
        padding: 0.4rem 0;
    }

    .site-header__brand img {
        height: 3.75rem;
    }

    .site-header__tools {
        gap: 0.5rem;
    }

    .site-header__tools .btn {
        padding: 0.65em 0.95em;
        font-size: 0.75rem;
    }
}

/* =========================================================================
   Reduced motion — global safety net.
   Anyone who asks the system for less motion gets no animated transitions,
   no keyframes and no smooth scrolling, whatever the component.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 380px) {
    /* Very narrow phones: keep logo, button and menu toggle on one line. */
    .site-header__brand img {
        height: 3.75rem; /* never below 120 px wide */
    }

    .site-header__bar {
        gap: 0.35rem;
    }

    .site-header__tools .btn {
        padding-inline: 0.8em;
    }
}