/* ══════════════════════════════════════════════════════════════
   José Bernardino Construção Civil — Main CSS (re-themed from website_core)
   Fonts: Archivo (headings) · Inter (body) | Brand: #ee7f1a orange ·
   #ef7f1a orange · #fecc00 gold · #ffed00 yellow, used as accents only
   (CTAs, tags, icons) over a light/neutral base — see PLAN.md §3.
   Grid: 8px base | Content width: 1400px real (padding is extra, on top)
   Re-theme a new project by changing the tokens in :root below, not by
   hunting for hardcoded hex values — see STRUCTURE.md.
   ══════════════════════════════════════════════════════════════ */

/* ── Scroll reveal ──────────────────────────────────────────── */
.will-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s var(--ease-out, ease), transform 0.55s var(--ease-out, ease);
}
.will-reveal.is-revealed { opacity: 1; transform: none; }

/* Scroll progress bar — thin gradient strip pinned to the very top of the
   viewport, width driven by main.js from scroll position. Sits above the
   header (z-index) but is only 3px, so it never actually overlaps content. */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent-orange));
    z-index: 500;
    pointer-events: none;
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* Brand — José Bernardino Construção Civil. Logo is a red→orange→gold→
       yellow gradient "wave" over dark-grey wordmark (Handel Gothic Bold,
       not freely licensed — see --ff-heading below for the substitute).
       Per the design direction in PLAN.md §3: these 4 colours are accents
       (CTAs, tags, icons, the odd underline), not fills — the CAJC/
       Mota-Engil references this site follows are deliberately sober, so
       covering a whole section in brand-red would fight that. --c-primary
       (red) is the one CTA/link colour; the other three are for smaller
       accents (category tags, icons, hover states) via --c-accent-*. */
    --c-primary:     #ee7f1a;   /* laranja do logo */
    --c-primary-dk:  #cf6a0c;   /* hover de preenchimentos */
    /* Texto laranja sobre fundo CLARO: o #ee7f1a puro só tem 2,7:1 em branco
       (WCAG pede 4,5:1), este tom escuro dá 5:1 e continua a ler-se laranja. */
    --c-primary-ink: #a84f00;
    /* Texto sobre preenchimento laranja: branco só teria 2,7:1, o escuro dá 6,3:1. */
    --c-on-primary:  #181B20;
    --c-accent-orange: #ee7f1a;
    /* CTA da banda final de cada página: amarelo do logo, texto escuro (13:1). */
    --c-cta:         #fecc00;
    --c-cta-hover:   #f0bd00;
    /* Raio ÚNICO de botões e cartões — mudar aqui muda o site todo. */
    --radius:        6px;
    --c-accent-gold:   #fecc00;
    --c-accent-yellow: #ffed00;
    --c-neutral:     #8B93A0;

    /* Neutrals */
    --c-dark:        #181B20;
    --c-dark-warm:   #23262B;
    --c-mid:         #4A4E56;
    --c-light:       #F4F5F7;
    --c-white:       #FFFFFF;
    --c-border:      #E1E4E8;

    /* Functional */
    --c-success:     #2E7D5B;
    --c-error:       #C0392B;

    /* Typography — re-theme a new project here: swap --ff-heading/--ff-body
       for different fonts (e.g. a display face for headings + a plain one
       for body text), or change --fw-heading (e.g. to --fw-semibold) if
       this project's titles shouldn't be bold. Every font-size in this
       file is one of the --fs-* steps below — add a step here rather than
       writing a new literal rem value inline.
       --ff-heading: the brand logo's wordmark is set in Handel Gothic Bold,
       a paid font (Monotype) not included here — Archivo is the closest
       freely-licensed match for its geometric, heavy, confident character
       (see the logo file for comparison), used at --fw-heading below. */
    --ff-heading:    'Archivo', sans-serif;
    --ff-body:       'Inter', sans-serif;
    --fw-light:      300;
    --fw-regular:    400;
    --fw-semibold:   600;
    --fw-bold:       700;
    --fw-heading:    800;

    --fs-2xs:        0.6875rem;   /* 11px */
    --fs-xs:         0.75rem;     /* 12px */
    --fs-sm:         0.8125rem;   /* 13px */
    --fs-md:         0.875rem;    /* 14px */
    --fs-lg:         0.9375rem;   /* 15px */
    --fs-body:       1rem;        /* 16px — default body copy */
    --fs-xl:         1.0625rem;   /* 17px */
    --fs-2xl:        1.125rem;    /* 18px */
    --fs-3xl:        1.375rem;    /* 22px */
    --fs-4xl:        1.5rem;      /* 24px */
    --fs-5xl:        1.75rem;     /* 28px */
    --fs-eyebrow:    var(--fs-sm);
    --fs-h2:         clamp(1.75rem, 3.5vw, 2.75rem);
    --fs-h3:         clamp(1.0625rem, 1.8vw, 1.375rem);
    --fs-headline:   clamp(2.5rem, 5vw, 3.75rem); /* h1 */

    --lh-body:       1.7;
    --lh-heading:    1.15;

    /* Spacing (8px grid) */
    --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
    --sp-5: 40px;  --sp-6: 48px;  --sp-8: 64px;  --sp-10: 80px;
    --sp-12: 96px; --sp-16: 128px;

    /* Layout — 1400px is the real, usable content width (text/images never
       get eaten by the side padding; padding is pure edge-safety on
       narrower viewports, added on top of the 1400px, not carved out of it) */
    --content-w:     1400px;
    --container:     calc(var(--content-w) + var(--sp-6) * 2);
    --container-sm:  860px;
    --header-h:      72px;
    /* Tracks the header's REAL rendered height, incl. the 12px it loses
       via .is-scrolled — kept in sync by main.js (setHeaderState) so any
       sticky element pinned "just under the header" (.content-filters,
       .article-sidebar) lines its own top offset up with where the header
       actually ends. Without this it stays keyed to the taller unscrolled
       --header-h, leaving a 12px gap once scrolled where the fixed header
       has shrunk but the sticky element hasn't moved up to meet it — the
       page content behind that gap shows through as a thin strip. */
    --header-h-current: var(--header-h);

    /* Transitions */
    --ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x:clip (not hidden) on both html and body: a position:fixed
   descendant (e.g. .menu-panel below) is sized/scrolled relative to the
   viewport/html, not body's box — body's own overflow-x alone cannot clip
   that, so a fixed element with a 100vw-based width (which over-counts by
   the scrollbar's own width in most browsers) can still force horizontal
   overflow at the html level even though body "hides" its own. Caught via
   a real mobile-width screenshot, not visible at desktop widths where no
   such element was wider than the viewport.
   `clip` instead of `hidden` matters: `overflow: hidden` on an ancestor
   (html/body included) disables `position: sticky` on every descendant.
   `overflow: clip` clips the same way but is explicitly exempted from
   that rule per the CSS spec, so sticky nav bars keep working. */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--c-dark);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--ff-body); cursor: pointer; border: none; background: none; }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    color: var(--c-dark);
}
h1 { font-size: var(--fs-headline); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
em { font-style: italic; font-weight: var(--fw-light); }

.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* --c-primary at this small font-size measures 4.29:1 on the --alt
       section background — just under WCAG's 4.5:1. Scoped to this label
       only (not the --c-primary token itself, which the brand's CTAs use
       at a size/weight where it already clears contrast). */
    color: var(--c-primary-ink);
}
.eyebrow--sm   { font-size: var(--fs-2xs); letter-spacing: 0.12em; }

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

.section { padding: var(--sp-12) 0; }

.section-header { margin-bottom: var(--sp-8); }
.section-header p.eyebrow { margin-bottom: var(--sp-2); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    align-self: flex-start; /* prevent stretching to full width inside flex columns */
    padding: 13px 32px;
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn--primary {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border: 1px solid var(--c-primary);
}
.btn--primary:hover { background: var(--c-primary-dk); border-color: var(--c-primary-dk); }
/* CTA da banda final de cada página: o único botão amarelo do site. */
.home-final-cta .btn--primary { background: var(--c-cta); border-color: var(--c-cta); }
.home-final-cta .btn--primary:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); }
.btn--outline {
    background: transparent;
    color: var(--c-primary-ink);
    border: 1px solid var(--c-primary);
}
.hero .btn--outline, .page-hero .btn--outline, .site-footer .btn--outline, .final-cta .btn--outline { color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-on-primary); }
.btn:active { transform: scale(0.96); }
.btn-pill { transition: background 0.2s var(--ease), transform 0.15s var(--ease); }
.btn-pill:active { transform: scale(0.94); }

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--header-h);
    background: rgba(35, 38, 43, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.35s var(--ease), height 0.3s var(--ease);
}
/* Header shrinks slightly once the page has scrolled past the very top —
   purely a "the page is alive" cue, doesn't affect content offset since
   the header is fixed and every page's own top padding is a fixed value,
   not derived from the header's live height. */
.site-header.is-scrolled { height: calc(var(--header-h) - 12px); }
.site-header.is-scrolled .logo-img { width: 100px; }
.site-header.is-transparent {
    background: rgba(35, 38, 43, 0.30);
}
.site-header.is-solid {
    background: rgba(35, 38, 43, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Logo left / nav center / CTA+hamburger right — like the design refs
   (cajc.pt, engenharia.mota-engil.pt), not the base template's centered-
   logo-behind-a-hamburger layout. .header-nav takes over from
   .menu-open-btn above --header-nav-bp (defined via the media query
   below); under it, .header-nav/.header-cta hide and the hamburger +
   full-screen .menu-overlay (unchanged) become the only nav again. */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: 100%;
    padding: 0 var(--sp-6);
    max-width: var(--container);
    margin-inline: auto;
}
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }

.header-nav { display: none; }
.header-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    list-style: none;
}
.header-nav__link {
    position: relative;
    display: inline-block;
    padding: 6px 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.2s var(--ease);
    white-space: nowrap;
}
/* Underline slides in from the left instead of an instant colour swap —
   ::after rather than border-bottom so the resting and hover states can
   use a genuine transform transition. */
.header-nav__link::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px; bottom: 0;
    height: 2px;
    background: var(--c-primary);
    transform: scaleX(0);
}
.header-nav__link:hover { color: var(--c-white); }
/* Só a página atual tem sublinhado, fixo (sem a linha a crescer no hover). */
.header-nav__link.is-active::after { transform: scaleX(1); }
.header-nav__link.is-active { color: var(--c-white); }

.header-cta { display: none; }

/* Seletor de idioma sempre visível no header (desktop) — antes só existia
   dentro do menu overlay, por isso não havia forma óbvia de mudar de
   idioma sem abrir o menu completo. */
.lang-switcher--header {
    display: none;
    gap: 2px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}
.lang-switcher--header .lang-btn {
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-switcher--header .lang-btn:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.12); }
.lang-switcher--header .lang-btn.is-active {
    color: var(--c-on-primary);
    background: var(--c-primary);
}
.lang-switcher--header .lang-btn.is-active:hover { background: var(--c-primary-dk); }

.btn-pill {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-pill:hover { background: var(--c-primary-dk); }

/* Contas de Cliente entry point (optional module — see header.php) */
.header-account-link {
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.header-account-link:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; }

/* Logo */
.site-logo { display: flex; align-items: center; justify-content: center; }
.site-logo .logo-img {
    width: 120px;
    height: auto;
    transition: opacity 0.35s var(--ease), width 0.3s var(--ease);
}

/* Hamburger button — 48×48 minimum touch target */
.menu-open-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.menu-open-btn span {
    display: block;
    height: 3px;
    background: #fff;
    transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.menu-open-btn span:nth-child(1) { width: 39px; }
.menu-open-btn span:nth-child(2) { width: 31px; }
.menu-open-btn span:nth-child(3) { width: 23px; }
.menu-open-btn:hover span { width: 39px; }

/* Hide hamburger while menu is open */
.menu-open .menu-open-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
}

/* Desktop nav takes over from the hamburger above this width — must come
   after the unconditional .menu-open-btn{display:flex} rule above so it
   actually wins the cascade at matching widths (same specificity either
   way; source order decides ties, media guard included). */
@media (min-width: 961px) {
    .header-nav { display: block; }
    .header-cta { display: inline-flex; }
    .lang-switcher--header { display: flex; }
    .menu-open-btn { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   MENU OVERLAY
   ══════════════════════════════════════════════════════════════ */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
    visibility: hidden;
}
.menu-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Panel — floats with margin from all edges */
.menu-panel {
    position: relative;
    width: min(580px, 92vw);
    height: calc(100vh - 32px);
    margin: 16px 0 16px 16px;
    background: rgba(255, 255, 255, 0.90);
    display: flex;
    flex-direction: column;
    padding: 28px 0 32px;
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.5s var(--ease-out);
    z-index: 2;
    overflow: hidden;
    border-radius: 4px;
}
.menu-overlay.is-open .menu-panel {
    transform: translateX(0);
}
.menu-overlay.is-closing .menu-panel {
    transform: translateX(calc(-100% - 24px));
}

/* Backdrop */
.menu-backdrop {
    flex: 1;
    height: 100%;
}

/* Panel top row: close + search */
.menu-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    padding: 0 32px;
    flex-shrink: 0;
}

/* Close button */
.menu-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(179, 84, 0, 0.8);
    font-size: var(--fs-2xs);
    font-family: var(--ff-body);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s var(--ease);
    padding: 0;
}
.menu-close-btn:hover { color: #b35400; }

/* Search */
.menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(238, 127, 26, 0.35);
    border-radius: 2px;
    padding: 6px 12px;
}
.menu-search input {
    background: none;
    border: none;
    outline: none;
    color: #b35400;
    font-size: var(--fs-xs);
    font-family: var(--ff-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 110px;
}
.menu-search input::placeholder { color: rgba(179, 84, 0, 0.7); }
.menu-search svg { color: rgba(179, 84, 0, 0.8); flex-shrink: 0; }
.menu-search button {
    display: flex;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.menu-search button:hover svg { color: #b35400; }

/* Two-column body */
.menu-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left column */
.menu-nav {
    flex: 0 0 auto;
    width: 220px;
    padding: 0 0 0 32px;
    overflow-y: auto;
}
.menu-list { display: flex; flex-direction: column; gap: 0; }
.menu-item { position: relative; }
.menu-link {
    display: block;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(179, 84, 0, 0.8);
    padding: 14px 0;
    border-bottom: 1px solid rgba(238, 127, 26, 0.15);
    transition: color 0.2s var(--ease);
}
.menu-link:hover,
.menu-item--current > .menu-link {
    color: #b35400;
}
.menu-item--current > .menu-link {
    text-decoration: underline;
    text-decoration-color: #ee7f1a;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Vertical separator */
.menu-separator {
    flex-shrink: 0;
    width: 1px;
    background: rgba(238, 127, 26, 0.2);
    margin: 0 28px;
    align-self: stretch;
}

/* Right column: sub-area */
.menu-sub-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 24px;
    position: relative;
}

/* Sub-panels — hidden by default, shown via JS */
.sub-panel {
    display: none;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.sub-panel.is-visible {
    display: block;
    opacity: 1;
    transform: translateX(0);
}
.sub-panel ul { display: flex; flex-direction: column; gap: 0; }
.sub-panel li { border-bottom: 1px solid rgba(238, 127, 26, 0.12); }
.sub-panel a {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(179, 84, 0, 0.8);
    padding: 12px 0;
    transition: color 0.2s var(--ease);
}
.sub-panel a:hover { color: #b35400; }

/* Menu footer */
.menu-footer {
    margin-top: auto;
    padding: var(--sp-4) 32px 0;
    border-top: 1px solid rgba(238, 127, 26, 0.2);
    flex-shrink: 0;
}
.menu-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}
.lang-switcher--menu .lang-btn {
    color: rgba(179, 84, 0, 0.8);
    font-size: var(--fs-xs);
}
.lang-switcher--menu .lang-btn.is-active { color: #b35400; font-weight: var(--fw-bold); }
.lang-switcher--menu .lang-btn:hover { color: #b35400; }
.lang-switcher--menu .lang-sep { color: rgba(238, 127, 26, 0.35); }
.menu-social { display: flex; gap: var(--sp-3); align-items: center; }
.menu-social a {
    color: rgba(179, 84, 0, 0.8);
    transition: color 0.2s var(--ease);
}
.menu-social a:hover { color: #b35400; }

/* ══════════════════════════════════════════════════════════════
   MENU OVERLAY — mobile
   The desktop layout is two columns side by side (fixed 220px nav +
   separator + flexible sub-panel) inside a panel capped at 92vw. Below
   640px that stops fitting, so the panel goes full-bleed and the nav /
   sub-panel stack vertically instead of sitting side by side.
   ══════════════════════════════════════════════════════════════ */@media (max-width: 640px) {
    .menu-panel {
        /* % of .menu-overlay (position:fixed; inset:0), not vw/vh — this
           panel is itself inside a fixed-position ancestor, so it's sized
           relative to the viewport regardless; 100vw/100vh over-count by
           the scrollbar's width and forced horizontal overflow at the
           html level that body's own overflow-x:hidden couldn't clip
           (fixed-position content escapes body's box entirely). */
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        padding: 20px 0 20px;
    }

    .menu-topbar { padding: 0 20px; margin-bottom: 24px; gap: 12px; }
    .menu-close-btn span { display: none; }
    .menu-search { flex: 1; max-width: 220px; }
    .menu-search input { width: auto; flex: 1; min-width: 0; }

    .menu-body { flex-direction: column; overflow-y: auto; }
    .menu-nav {
        width: 100%;
        flex: 0 0 auto;
        padding: 0 20px;
        overflow-y: visible;
    }
    .menu-separator { display: none; }
    .menu-sub-area {
        flex: 0 0 auto;
        padding: 0 20px;
        overflow-y: visible;
    }
    .sub-panel.is-visible { margin-top: 4px; }

    .menu-footer { padding: var(--sp-4) 20px 0; }}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* align-items:center has no idea the fixed header sits on top of this
       section — with enough hero content (e.g. the eyebrow + 3-line
       headline on a narrow phone) centering alone could place the top of
       the content behind the header. This padding guarantees the centered
       content never starts above that line, on any viewport. */
    padding-top: var(--header-h);
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 8s ease;
}
.hero.loaded .hero__bg { transform: scale(1); }

/* Left-aligned variant (inner/editorial pages, e.g. Our Story) — left
   edge lines up with every other section's container inset. */
.hero--left { justify-content: flex-start; }
.hero--left .hero__content {
    text-align: left;
    align-items: flex-start;
    max-width: 680px;
    padding: 0 var(--sp-6) 0 0;
    margin-left: calc(max(0px, (100% - var(--container)) / 2) + var(--sp-6));
    /* .hero is a flex container, and a flex item's default min-width:auto
       stops it shrinking below its content's natural width — on narrow
       screens this pushed the right edge past the viewport. .hero has
       overflow:hidden, so instead of scrolling it silently clipped the
       content (hero stats, CTAs) at the edge. */
    min-width: 0;
}
/* All hero text in the light weight — wrap individual words in <strong> in
   the lang file if a specific word needs to stand out in bold. */
.hero--left .hero__eyebrow,
.hero--left .hero__headline { font-weight: var(--fw-light); }
.hero--left .hero__headline strong { font-weight: var(--fw-bold); }

/* Hero com a foto encostada à direita (só a home): fundo escuro à esquerda
   para o texto e a foto ocupa os ~70% da direita; um degradê a partir da
   esquerda (mesma cor do fundo) funde as duas, sem corte seco. Abaixo de
   900px não há espaço para dividir, por isso volta a foto de fundo inteira
   com um véu escuro. */
.hero--image-right { background: var(--c-dark); }
.hero--image-right .hero__bg { left: auto; right: 0; width: 72%; background-position: center right; }
.hero--image-right .hero__overlay {
    background: linear-gradient(
        90deg,
        var(--c-dark) 0%,
        var(--c-dark) 28%,
        rgba(24,27,32,0.72) 46%,
        rgba(24,27,32,0.28) 68%,
        rgba(24,27,32,0) 88%
    );
}
@media (max-width: 900px) {
    .hero--image-right .hero__bg { left: 0; width: 100%; }
    .hero--image-right .hero__overlay {
        background: linear-gradient(180deg, rgba(24,27,32,0.7) 0%, rgba(24,27,32,0.78) 60%, rgba(24,27,32,0.92) 100%);
    }
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(24,27,32,0.45) 0%,
        rgba(24,27,32,0.3) 50%,
        rgba(24,27,32,0.55) 100%
    );
}
.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--sp-6);
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}
.hero__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-light);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
.hero__headline {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--c-white);
    letter-spacing: -0.01em;
}
.hero__headline strong { font-weight: var(--fw-bold); }
.hero__body {
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.7);
    max-width: 560px;
    line-height: 1.6;
}
.hero__lead {
    font-size: var(--fs-lg);
    font-weight: var(--fw-light);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    max-width: 380px;
    line-height: 1.5;
}
.hero__ctas .btn { font-weight: var(--fw-light); }
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
.hero__microcopy { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); }

/* Two-tone headline word — wrap the one word/phrase worth calling out in
   <span class="text-accent">...</span> inside a heading (see refs: cajc.pt's
   "PINTAMOS, RENOVAMOS E <span>VALORIZAMOS</span>" pattern). Used sparingly,
   one accent word per heading at most — this is a typographic accent, not
   a general-purpose "make text red" class. */
.text-accent { color: var(--c-primary); }
.hero--left .hero__eyebrow--line {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: var(--fw-semibold);
}
.hero__eyebrow--line::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--c-primary);
}

/* Stat row under a left-aligned hero (see cajc.pt's "37+ / 3000+ / 98%").
   Numbers deliberately not styled as h1-h4 — a stat is data, not a
   heading, so it keeps --ff-heading's weight/character without being
   picked up by anything that queries "every heading on the page". */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin-top: var(--sp-2);
}
/* 3 items at the full 48px gap need more width than a narrow phone has —
   same min-width:auto flex overflow as .hero__content above, just one
   level deeper. A tighter gap fits all 3 on one line on real phones
   (≥360px); flex-wrap above is the safety net for anything narrower —
   it only engages when the row genuinely doesn't fit, so it changes
   nothing on wider screens. */
@media (max-width: 420px) {
    .hero-stats { gap: var(--sp-3); }
}
.hero-stats__item { text-align: left; }
.hero-stats__number {
    font-family: var(--ff-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-heading);
    color: var(--c-white);
    line-height: 1;
}
.hero-stats__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
}

/* Scrolling services ticker, directly under the hero (see cajc.pt) — a
   single <ul> duplicated once in the markup so the CSS animation can loop
   seamlessly (translateX(-50%) lands exactly on the duplicate's start). */
.ticker {
    background: var(--c-dark-warm);
    overflow: hidden;
    padding: var(--sp-2) 0;
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: tickerScroll 32s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-white);
    white-space: nowrap;
}
.ticker__item::after { content: '+'; color: var(--c-primary); font-weight: var(--fw-bold); }
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

.hero__scroll {
    position: absolute;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    animation: scrollBounce 2s ease-in-out infinite;
    z-index: 2;
}
.hero__scroll-line { width: 1px; height: 45px; background: currentColor; }
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   JOURNAL
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   FIND US
   ══════════════════════════════════════════════════════════════ */
.find-us__info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
}
.find-us__address { max-width: 380px; }
.find-us__address .collection-title { margin-bottom: var(--sp-4); }
.find-us__address p {
    font-size: var(--fs-md);
    color: var(--c-mid);
    line-height: 1.75;
    margin-bottom: var(--sp-3);
}
/* Map + CTAs stacked in their own right-anchored column, smaller and
   pulled to the right instead of spanning the full container width. */
.find-us__map-col {
    max-width: 950px;
    margin-left: auto;
}
.find-us__map { margin-bottom: var(--sp-4); }
.world-map { width: 100%; height: auto; display: block; }
.find-us__ctas { display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   CONTACT DIRECTORY (Contact & Locations page — solid brand-colour
   background, centered Locations + Departments lists)
   ══════════════════════════════════════════════════════════════ */
.contact-directory { background: var(--c-primary); padding: var(--sp-12) 0; }
.contact-directory__inner { max-width: 560px; margin-inline: auto; text-align: center; }
.contact-directory__group + .contact-directory__group { margin-top: var(--sp-10); }
.contact-directory__title {
    color: var(--c-on-primary);
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    margin-bottom: var(--sp-6);
}
.contact-directory__entry + .contact-directory__entry { margin-top: var(--sp-5); }
.contact-directory__label {
    color: var(--c-on-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.contact-directory__line {
    color: rgba(24, 27, 32, 0.88);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.contact-directory__line a { color: inherit; }
.contact-directory__line a:hover { color: var(--c-on-primary); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
    position: relative;
    background: var(--c-dark-warm);
    color: rgba(255,255,255,0.55);
}

/* Scroll-to-top button */
.footer-scroll-top {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-6);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-scroll-top:hover { color: var(--c-white); border-color: rgba(255,255,255,0.6); }

.footer-top { padding: var(--sp-12) 0 var(--sp-8); }
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
    gap: var(--sp-8);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-6);
}
.footer-hours { font-size: var(--fs-lg); line-height: 1.7; color: rgba(255,255,255,0.75); margin-bottom: var(--sp-3); }
/* 0.45 measured 4.26:1 on the footer's dark background — under WCAG's
   4.5:1. 0.55 clears it at 5.60:1 while staying visibly the "muted" line. */
.footer-hours--muted { color: rgba(255,255,255,0.55); font-size: var(--fs-md); margin-top: -8px; }
.footer-cta-pill { margin-top: var(--sp-2); }
.footer-logo { display: block; margin-bottom: var(--sp-5); }
.footer-logo__img { width: 140px; height: auto; opacity: 0.95; transition: opacity 0.2s; }
.footer-logo:hover .footer-logo__img { opacity: 1; }
.footer-social {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-3);
}
.footer-social a {
    color: rgba(255,255,255,0.7);
    transition: color 0.2s var(--ease);
}
.footer-social a:hover { color: var(--c-white); }

.footer-contact-info { margin-bottom: var(--sp-4); }
.footer-contact-info p {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    line-height: 1.9;
}
.footer-contact-info svg { flex: none; opacity: 0.7; }
.footer-contact-info a { color: rgba(255,255,255,0.75); transition: color 0.2s var(--ease); }
.footer-contact-info a:hover { color: var(--c-white); }

/* Column headings — bright, used both as group labels and standalone links */
.footer-heading {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: var(--sp-2);
}
a.footer-heading { transition: opacity 0.2s var(--ease); }
a.footer-heading:hover { opacity: 0.75; }
.footer-nav-group { margin-bottom: var(--sp-3); }
.footer-nav-group:last-child { margin-bottom: 0; }
.footer-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer-nav a {
    font-size: var(--fs-lg);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.65);
    transition: color 0.2s var(--ease);
}
.footer-nav a:hover { color: var(--c-white); }

/* Contact form */
.footer-form-block { max-width: 340px; }
.footer-form__intro {
    font-size: var(--fs-md);
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: -8px 0 var(--sp-2);
}
.footer-contact-form { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer-contact-form input {
    width: 100%;
    background: var(--c-white);
    border: none;
    color: var(--c-dark);
    font-family: var(--ff-body);
    font-size: var(--fs-lg);
    padding: 14px 16px;
    outline: none;
    transition: opacity 0.2s var(--ease);
}
.footer-contact-form input::placeholder { color: var(--c-neutral); }
.footer-contact-form input:focus { opacity: 0.92; }
.footer-captcha-code {
    display: block;
    width: 100%;
    background: var(--c-white);
    border: none;
    color: var(--c-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    text-align: center;
    padding: 13px 16px;
    -webkit-user-select: all;
    user-select: all;
}
.footer-form__feedback { font-size: var(--fs-sm); line-height: 1.5; min-height: 1px; }
.footer-form__feedback.is-success { color: #C9E4B8; }
.footer-form__feedback.is-error { color: #F2B8B8; }
.btn-arrange {
    margin-top: var(--sp-1);
    padding: 13px 24px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: var(--c-white);
    font-family: var(--ff-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-arrange:hover { background: rgba(255,255,255,0.12); border-color: var(--c-white); }
.btn-arrange:disabled { opacity: 0.5; cursor: default; }
.footer-bottom {
    background: var(--c-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-4) var(--sp-6);
}
.footer-copy p { font-size: var(--fs-md); line-height: 1.6; color: rgba(255,255,255,0.55); }
.footer-copy strong { font-weight: var(--fw-bold); color: rgba(255,255,255,0.75); }
.footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-legal a,
.footer-legal__link { font-size: var(--fs-md); color: rgba(255,255,255,0.55); transition: color 0.2s var(--ease); }
.footer-legal a:hover,
.footer-legal__link:hover { color: var(--c-white); }
.footer-legal__link { background: none; border: none; padding: 0; font-family: var(--ff-body); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   INNER PAGES (News, Careers)
   ══════════════════════════════════════════════════════════════ */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-h) + var(--sp-10)) 0 var(--sp-8);
    border-bottom: 1px solid var(--c-border);
}
.page-hero .eyebrow { margin-bottom: var(--sp-2); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); }

.page-hero .container { position: relative; z-index: 1; }

/* ── Section curtain reveal ───────────────────────────────────────
   A solid panel — colour-matched to the section's OWN background via
   `background-color: inherit`, so it works unchanged on a light or a
   dark section — slides away on a diagonal once the section scrolls
   into view, instead of the plain fade .will-reveal does. Applied only
   via JS (see main.js), which adds .reveal-wipe (the covering state)
   only after confirming IntersectionObserver support and that motion
   isn't reduced — so a page that opts in with .reveal-wipe-target never
   risks content staying invisible if JS fails to run. */
.reveal-wipe { position: relative; overflow: hidden; }
.reveal-wipe::after {
    content: '';
    position: absolute;
    inset: -10% -25%;
    background-color: inherit;
    transform: skewX(-6deg) translateX(0%);
    transform-origin: top left;
    z-index: 5;
    transition: transform 0.85s cubic-bezier(.65, 0, .35, 1);
    pointer-events: none;
}
.reveal-wipe.is-wiped::after { transform: skewX(-6deg) translateX(115%); }

/* News & Careers listing */
.news-listing { padding: var(--sp-10) 0; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
}
/* Bento variant — first item spans two columns so the grid isn't just a
   uniform wall of identical tiles (portfolio teaser/listing). */
/* Colunas iguais (portfólio da home com 2/3/4/6 obras): cartões da mesma
   altura na linha, sem buracos como no bento. */
.news-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.news-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .news-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid--cols-2, .news-grid--cols-3 { grid-template-columns: 1fr; } }
.news-grid--cols-2 .news-card__image, .news-grid--cols-3 .news-card__image { aspect-ratio: 16/10; }
.news-grid--bento > :first-child { grid-column: span 2; }
.news-grid--bento > :first-child .news-card__image { aspect-ratio: 16/9; }
@media (max-width: 900px) {
    .news-grid--bento > :first-child { grid-column: span 1; }
    .news-grid--bento > :first-child .news-card__image { aspect-ratio: 16/10; }
}
.news-card { display: flex; flex-direction: column; }
.news-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--c-light);
}
.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--ease);
}
.news-card__image:hover img { transform: scale(1.04); }
.news-card__body { padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
/* Cartões do portfólio na home: localização com pin, descrição curta e
   rodapé com estado + "Ver detalhes". */
.portfolio-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
}
.portfolio-card__pin { display: inline-flex; flex-shrink: 0; }
.portfolio-card__pin svg { width: 16px; height: 16px; }
.portfolio-card__desc {
    color: var(--c-mid);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.portfolio-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.news-card__date { font-size: var(--fs-xs); color: var(--c-neutral); }
.news-card__title { font-size: var(--fs-2xl); line-height: 1.3; }
.news-card__title a { transition: color 0.2s var(--ease); }
.news-card__title a:hover { color: var(--c-primary-ink); }
.news-card__desc { color: var(--c-mid); font-size: var(--fs-lg); flex: 1; }
.news-card__link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-primary-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-start;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}
.news-card__link:hover { border-color: var(--c-primary); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    padding: var(--sp-6) 0;
}
.pagination__link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}
.pagination__link:hover { border-color: var(--c-primary); }
.pagination__status { font-size: var(--fs-sm); color: var(--c-neutral); }

/* Articles */
.article-single { padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-10); }
.article-single--noimg { padding-top: calc(var(--header-h) + var(--sp-10)); }

/* Service single page hero — full-bleed cinematic banner (image +
   gradient + title floating over it) instead of a plain inline <figure>
   sitting flush in the text column. */
.detail-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2.1 / 1;
    max-height: 620px;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.detail-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 8s ease;
}
.detail-hero.loaded .detail-hero__bg { transform: scale(1); }
.detail-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24,27,32,0.85) 0%, rgba(24,27,32,0.25) 55%, rgba(24,27,32,0.15) 100%);
}
.detail-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--sp-6) var(--sp-8);
    color: var(--c-white);
}
.detail-hero__eyebrow { color: rgba(255,255,255,0.8); }
.detail-hero__content h1 { color: var(--c-white); font-size: clamp(2rem, 4vw, 3.25rem); margin-top: var(--sp-2); }
.detail-hero__lead { color: rgba(255,255,255,0.85); font-size: var(--fs-xl); max-width: 620px; margin-top: var(--sp-2); }
@media (max-width: 640px) {
    .detail-hero { aspect-ratio: 4 / 3; max-height: 420px; min-height: 300px; }
}
.article-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-12);
    align-items: start;
}
.article-layout--single { grid-template-columns: 1fr; }
.article-layout--single .article-main { max-width: var(--container-sm); margin-inline: auto; width: 100%; }
.article-sidebar { position: sticky; top: calc(var(--header-h-current) + var(--sp-6)); transition: top 0.3s var(--ease); }
/* Variante das fichas (obra, serviço): colada logo abaixo do header, com a
   altura do espaço visível restante e o conteúdo centrado na vertical nesse
   espaço (mesma folga em cima e em baixo) enquanto se rola. Cartões mais
   compactos para o conjunto caber num portátil. Não se aplica à página de
   Contacto, onde a coluna é tão alta como o formulário e não chegaria a colar. */
.article-sidebar--center {
    top: var(--header-h-current);
    min-height: calc(100vh - var(--header-h-current));
    min-height: calc(100dvh - var(--header-h-current));
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    transition: top 0.3s var(--ease), min-height 0.3s var(--ease);
}
.article-sidebar--center .contact-card { padding: var(--sp-4); }
.article-sidebar--center .contact-card + .contact-card { margin-top: var(--sp-3); }
.article-sidebar--center .obra-facts { gap: var(--sp-3); }
.article-sidebar .article-related { margin-top: 0; padding-top: 0; border-top: none; }
.article-sidebar .article-related__grid { grid-template-columns: 1fr; }
@media (max-width: 960px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { position: static; }
    .article-sidebar--center { min-height: 0; justify-content: flex-start; }
    .article-sidebar .article-related { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
    .article-sidebar .article-related__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }}
.article-header { margin-bottom: var(--sp-6); }
.article-header .eyebrow { margin-bottom: var(--sp-2); }
.article-header h1 { font-size: clamp(1.875rem, 3.5vw, 3rem); margin-bottom: var(--sp-3); }
.article-lead { font-size: var(--fs-2xl); color: var(--c-mid); line-height: 1.6; }
.article-image { margin-bottom: var(--sp-6); }
.article-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-content { font-size: var(--fs-body); line-height: 1.8; color: var(--c-mid); }
.article-content h2 { margin: var(--sp-6) 0 var(--sp-3); color: var(--c-dark); font-size: var(--fs-4xl); }
.article-content h3 { margin: var(--sp-4) 0 var(--sp-2); color: var(--c-dark); }
.article-content p { margin-bottom: var(--sp-3); }
.article-content ul, .article-content ol { margin: var(--sp-3) 0 var(--sp-3) var(--sp-4); }
.article-content li { margin-bottom: var(--sp-1); list-style: disc; }
.article-back { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }

/* Careers listing */
.results-listing { padding: var(--sp-10) 0; }
.results-list { display: flex; flex-direction: column; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); }
.result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5);
    background: var(--c-white);
    text-decoration: none;
    color: inherit;
    gap: var(--sp-4);
    transition: background 0.2s var(--ease);
}
.result-item:hover { background: var(--c-light); }
.result-item__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: 4px; }
.result-item__desc { font-size: var(--fs-lg); color: var(--c-mid); }
.result-item__cta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
    white-space: nowrap;
}

/* Empty state */
/* ── Content filters bar (news + careers) ───────────────────── */
.content-filters {
    border-bottom: 1px solid var(--c-border);
    background: var(--c-white);
    position: sticky;
    top: var(--header-h-current);
    /* Matches .site-header's own "height 0.3s var(--ease)" transition
       exactly (same duration/easing, triggered by the same is-scrolled
       class toggle in the same tick) so this bar's stick offset animates
       in lockstep with the header shrinking/growing, instead of snapping
       to the new value in one frame — a snap left a ~12px window, for
       the header's whole 0.3s transition, where neither element covered
       that strip and the page content behind it (grid photos) showed
       through. */
    transition: top 0.3s var(--ease);
    z-index: 100;
    padding: var(--sp-3) 0;
}
.content-filters .container { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.content-filters .container::-webkit-scrollbar { display: none; }
.filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.search-page-form {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    max-width: 520px;
}
.search-page-form input {
    flex: 1;
    border: 1px solid var(--c-border);
    padding: 10px 14px;
    font-family: var(--ff-body);
    font-size: var(--fs-lg);
    color: var(--c-dark);
    outline: none;
    transition: border-color 0.2s var(--ease);
}
.search-page-form input:focus { border-color: #ee7f1a; }
.search-results__count {
    color: var(--c-neutral);
    font-size: var(--fs-md);
    margin-bottom: var(--sp-4);
}
/* Category filter pills — were plain text links with only a colour
   change + thin border to show state, easy to miss and visually flat
   next to the pill language used everywhere else on the site. */
.cat-nav { display: flex; gap: var(--sp-2); flex-wrap: nowrap; width: max-content; }
.cat-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 9px 18px;
    background: var(--c-light);
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-mid);
    border: 1px solid transparent;
    transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.cat-link:hover { color: var(--c-primary-ink); background: rgba(238, 127, 26, 0.08); }
.cat-link.is-active {
    color: var(--c-on-primary);
    background: var(--c-primary);
    box-shadow: 0 4px 14px -4px rgba(238, 127, 26, 0.5);
}
.cat-link.is-active:hover { color: var(--c-on-primary); background: var(--c-primary-dk); }
.cat-link:active { transform: scale(0.96); }
.sort-nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sort-link {
    font-size: var(--fs-xs);
    color: var(--c-neutral);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.sort-link:hover, .sort-link.is-active { color: var(--c-primary-ink); text-decoration-color: currentColor; }
.category-banner { background: var(--c-light); border-bottom: 1px solid var(--c-border); }
.category-banner__inner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; }
.category-banner__image { width: 96px; height: 96px; object-fit: cover; flex-shrink: 0; }
.category-banner__desc { color: var(--c-neutral); font-size: var(--fs-lg); line-height: 1.6; margin: 0; }
.lang-switcher { display: flex; align-items: center; gap: 6px; }
.lang-btn {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-neutral);
    transition: color 0.2s var(--ease);
}
.lang-btn.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.lang-btn:hover { color: var(--c-primary); }
.lang-sep { color: var(--c-border); font-size: var(--fs-xs); }

/* ── News card category ──────────────────────────────────────── */
.news-card__cat {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 5px 12px;
    background: rgba(238, 127, 26, 0.08);
    border-radius: var(--radius);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
    margin-bottom: 6px;
}
/* On an image card, the category badge floats over the photo (top-left)
   instead of sitting in the text body — a solid backdrop instead of the
   translucent card-background tint, so it stays legible over any photo. */
.news-card__image .news-card__cat {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(24, 27, 32, 0.15);
}

/* ── Article gallery ─────────────────────────────────────────── */
.article-gallery { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
.article-gallery__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-4); color: var(--c-mid); }
/* Main photo + vertical thumbnail column, side by side — replaces the
   old uniform grid-of-squares so the best photo (gallery[0]) gets real
   visual weight instead of being sized the same as every thumbnail.
   The thumbs column stretches (flex default align-items) to match the
   main photo's height, then scrolls internally past 4-5 thumbs rather
   than growing the section taller. */
.article-gallery__grid { display: flex; gap: var(--sp-2); align-items: stretch; }
.article-gallery__item { display: block; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.article-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); }
.article-gallery__item:hover img { transform: scale(1.05); }
.article-gallery__item--main { flex: 2.2 1 0%; aspect-ratio: 4/3; }
.article-gallery__thumbs {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 100%;
    overflow-y: auto;
}
.article-gallery__thumbs .article-gallery__item { flex: none; aspect-ratio: 4/3; }
@media (max-width: 760px) {
    .article-gallery__grid { flex-direction: column; }
    .article-gallery__thumbs { flex-direction: row; overflow-x: auto; overflow-y: visible; max-height: none; }
    .article-gallery__thumbs .article-gallery__item { flex: 0 0 120px; }
}

/* ── Gallery lightbox ────────────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(24, 27, 32, 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__stage { position: relative; z-index: 1; max-width: 90vw; max-height: 88vh; }
.lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: var(--c-white);
    cursor: pointer;
    transition: background 0.2s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,0.25); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: var(--c-white);
    cursor: pointer;
    transition: background 0.2s var(--ease);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: var(--sp-4); }
.lightbox__nav--next { right: var(--sp-4); }
.lightbox__counter {
    position: fixed;
    bottom: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    .lightbox__nav { width: 40px; height: 40px; }
    .lightbox__nav--prev { left: var(--sp-2); }
    .lightbox__nav--next { right: var(--sp-2); }}

/* ── Tags ────────────────────────────────────────────────────── */
.article-tags { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag { display: inline-block; padding: 4px 12px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; background: var(--c-light); color: var(--c-mid); border: 1px solid var(--c-border); }

/* ── Related articles ───────────────────────────────────────── */
.article-related { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
.article-related__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-4); color: var(--c-mid); }
.article-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
.article-related__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.article-related__image { aspect-ratio: 16/10; overflow: hidden; background: var(--c-light); }
.article-related__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); }
.article-related__item:hover .article-related__image img { transform: scale(1.04); }
.article-related__item-title { font-size: var(--fs-lg); line-height: 1.3; transition: color 0.2s var(--ease); }
.article-related__item:hover .article-related__item-title { color: var(--c-primary-ink); }

/* ── Contas de Cliente ────────────────────────────────────────── */
body.page-auth { background: var(--c-light); }
.auth-section { padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-10); }
.auth-container { width: 100%; max-width: 620px; }
.auth-container--wide { max-width: 760px; }
.auth-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    box-shadow: 0 1px 2px rgba(24, 27, 32, 0.04), 0 12px 32px rgba(24, 27, 32, 0.06);
    padding: var(--sp-8);
    margin-bottom: var(--sp-5);
}
.auth-card h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-2); }
.auth-card h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.auth-card__lead { color: var(--c-mid); margin-bottom: var(--sp-2); }
.auth-card__hint { color: var(--c-neutral); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.required { color: var(--c-error); }
.auth-card__switch { margin-top: var(--sp-3); font-size: var(--fs-lg); text-align: center; }
.auth-card__switch a { color: var(--c-primary-ink); font-weight: var(--fw-semibold); }
.auth-card__switch a:hover { text-decoration: underline; }
.auth-error, .auth-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: var(--fs-md);
    margin-bottom: var(--sp-5);
    border-left: 3px solid;
}
.auth-error { background: #FBEAEA; color: #C0392B; border-left-color: #C0392B; }
.auth-success { background: #EAF3ED; color: #2E7D5B; border-left-color: #2E7D5B; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form__row { display: flex; flex-direction: column; gap: 6px; }
.auth-form__row label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-mid); }
.auth-form__row input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--c-border);
    font-family: inherit;
    font-size: var(--fs-lg);
    color: var(--c-dark);
    background: var(--c-white);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.auth-form__row input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(238, 127, 26, 0.12);
}
.auth-form__hint { font-size: var(--fs-xs); color: var(--c-neutral); margin-top: -2px; }
.auth-form__row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.auth-form__radio-group { display: flex; gap: var(--sp-5); }
.auth-radio { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); cursor: pointer; }
.auth-radio input { accent-color: var(--c-primary); width: 16px; height: 16px; }
.auth-form__business-fields { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); background: var(--c-light); border: 1px solid var(--c-border); }
.auth-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--c-mid); cursor: pointer; line-height: 1.5; }
.auth-checkbox input { margin-top: 2px; accent-color: var(--c-primary); width: 15px; height: 15px; flex-shrink: 0; }
.auth-checkbox a { color: var(--c-primary-ink); }
.auth-form__captcha { display: flex; align-items: center; gap: var(--sp-3); }
.auth-form__captcha-code { font-family: monospace; font-weight: 700; letter-spacing: 3px; padding: 10px 16px; background: var(--c-light); border: 1px solid var(--c-border); color: var(--c-dark); }
.auth-form__submit { align-self: stretch; width: 100%; text-align: center; margin-top: var(--sp-2); }
.auth-files-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-files-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 16px; background: var(--c-light); border: 1px solid var(--c-border); }
.auth-files-list__meta { font-size: var(--fs-sm); color: var(--c-neutral); margin-top: 2px; }
.auth-files-list__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; background: var(--c-white); color: var(--c-mid); border: 1px solid var(--c-border); }
@media (max-width: 640px) {
    .auth-form__row-pair { grid-template-columns: 1fr; }
    .auth-card { padding: var(--sp-5); }
    .auth-files-list__item { flex-direction: column; align-items: flex-start; }}

/* ── Testemunhos ──────────────────────────────────────────────── */
/* minmax(320px, 380px) em vez de 1fr: com poucos testemunhos (1 ou 2) os
   cartões ficam com uma largura própria e centrados, em vez de esticarem
   para preencher a linha toda (uma caixa vazia enorme com 1 só testemunho). */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 380px)); justify-content: center; gap: var(--sp-6); margin-top: var(--sp-6); }
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin: 0;
}
.testimonial-card__rating { letter-spacing: 3px; font-size: var(--fs-lg); }
.testimonial-card__rating .is-filled { color: var(--c-accent-gold); }
.testimonial-card__rating .is-empty { color: var(--c-border); }
.testimonial-card__quote { font-size: var(--fs-xl); line-height: 1.6; color: var(--c-dark); flex: 1; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.testimonial-card__photo,
.testimonial-card__avatar-fallback { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.testimonial-card__photo { object-fit: cover; }
.testimonial-card__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-lg);
}
.testimonial-card__name { font-style: normal; font-weight: var(--fw-semibold); display: block; }
.testimonial-card__role { font-size: var(--fs-sm); color: var(--c-neutral); }

/* Testemunhos — slider showing 3 per page (see app/views/testimonials/index.php
   and the .testimonials-slider init in main.js). The track holds one
   .testimonials-slider__slide per group of 3, each its own .testimonials-grid;
   only translateX on the track animates, slide width never changes. */
.testimonials-slider__viewport { overflow-x: hidden; overflow-y: visible; transition: height 0.4s var(--ease); }
.testimonials-slider__track { display: flex; align-items: flex-start; transition: transform 0.4s var(--ease); }
.testimonials-slider__slide { flex: 0 0 100%; min-width: 0; }
.testimonials-slider__slide .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .testimonials-slider__slide .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonials-slider__slide .testimonials-grid { grid-template-columns: 1fr; } }
.testimonials-slider__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.testimonials-slider__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-white);
    color: var(--c-dark);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.testimonials-slider__btn svg { width: 18px; height: 18px; }
.testimonials-slider__btn:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.testimonials-slider__btn:disabled { opacity: 0.3; cursor: default; }
.testimonials-slider__dots { display: flex; align-items: center; gap: var(--sp-2); }
.testimonials-slider__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--c-border); cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.testimonials-slider__dot.is-active { background: var(--c-primary); transform: scale(1.35); }

/* Testimonials with only a star rating (no written quote) — centre the
   block instead of top-pinning the rating and bottom-anchoring the
   author, which otherwise leaves a large dead gap on rows stretched to
   match longer, quoted cards. */
.testimonial-card--compact { align-items: center; justify-content: center; text-align: center; gap: var(--sp-4); }
.testimonial-card--compact .testimonial-card__author { flex-direction: column; margin-top: 0; padding-top: 0; border-top: none; gap: var(--sp-2); }
.testimonial-card--compact .testimonial-card__author > div { text-align: center; }

/* ── Equipa ────────────────────────────────────────────────────── */
.page-hero .hero-stats { margin-top: var(--sp-5); }
.page-hero .hero-stats__number { color: var(--c-primary-dk); }
.page-hero .hero-stats__label { color: var(--c-mid); }

.team-group-header {
    margin-top: var(--sp-12);
    padding-bottom: var(--sp-4);
    border-bottom: 2px solid var(--c-border);
}
.team-group-header:first-of-type { margin-top: 0; }
.team-group-title { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.team-group-desc { color: var(--c-mid); max-width: 620px; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-8); margin-top: var(--sp-8); }
.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    background: var(--c-white);
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.team-card__photo {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--sp-4);
    box-shadow: 0 0 0 5px var(--c-white), 0 0 0 6px var(--c-border);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.team-card:hover .team-card__photo { box-shadow: 0 0 0 5px var(--c-white), 0 0 0 6px var(--c-primary); transform: scale(1.03); }
.team-card__photo--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-light);
    color: var(--c-primary-ink);
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-5xl);
    text-transform: uppercase;
}
.team-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-xl); }
.team-card__role {
    display: inline-block;
    margin-top: var(--sp-1);
    padding: 3px var(--sp-3);
    border-radius: var(--radius);
    background: var(--c-light);
    font-size: var(--fs-xs);
    color: var(--c-primary-ink);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.team-card__bio { font-size: var(--fs-md); color: var(--c-mid); margin-top: var(--sp-3); line-height: 1.6; }
.team-card__links { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.team-card__links a { color: var(--c-primary-ink); font-weight: var(--fw-semibold); }
.team-card__links a:hover { text-decoration: underline; }

/* ── Serviços: cartões-imagem ─────────────────────────────────────
   Estado normal: só a foto e o título. Hover/foco: a foto aproxima-se e
   escurece, o título ganha um traço laranja e abre — com transição suave da
   altura — a descrição e o "Ver detalhes". Em ecrãs sem hover (telemóvel)
   tudo fica visível, senão não haveria forma de ler a descrição.
   Grelha: flex centrado, 3 por linha — a linha incompleta (1, 2…) fica
   centrada por baixo em vez de encostada à esquerda. */
.service-grid {
    --tile-gap: var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tile-gap);
    margin: var(--sp-6) 0;
}
.service-grid > .service-tile { flex: 0 0 calc((100% - 2 * var(--tile-gap)) / 3); min-width: 0; }
/* A toda a largura do ecrã (home): sem margens laterais e com pouco espaço entre cartões. */
.service-grid--bleed { --tile-gap: var(--sp-2); margin-inline: 0; }
.service-grid--bleed > .service-tile { aspect-ratio: 4 / 5; }
@media (max-width: 1000px) {
    .service-grid > .service-tile { flex-basis: calc((100% - var(--tile-gap)) / 2); }
}
@media (max-width: 640px) {
    .service-grid > .service-tile { flex-basis: 100%; }
}

.service-tile {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    background: var(--c-dark);
    color: var(--c-white);
    cursor: pointer;
    box-shadow: 0 14px 34px -16px rgba(24, 27, 32, 0.45);
}
.service-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.92) saturate(0.92);
    transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease);
}
.service-tile:hover .service-tile__img,
.service-tile:focus-visible .service-tile__img { transform: scale(1.09); filter: brightness(0.62) saturate(1.05); }
/* Degradê inferior: dá leitura ao título; reforça-se no hover. */
.service-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(24,27,32,0) 38%, rgba(24,27,32,0.88) 100%);
    transition: opacity 0.5s var(--ease);
}
.service-tile__badge {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
    color: var(--c-primary-ink);
    box-shadow: 0 6px 18px rgba(24, 27, 32, 0.28);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.45s var(--ease-out);
}
.service-tile__badge svg { width: 22px; height: 22px; }
.service-tile:hover .service-tile__badge,
.service-tile:focus-visible .service-tile__badge { background: var(--c-primary); color: var(--c-on-primary); transform: rotate(-8deg) scale(1.1); }
.service-tile__num {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    z-index: 3;
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-4xl);
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
    transition: color 0.4s var(--ease), transform 0.5s var(--ease-out);
}
.service-tile:hover .service-tile__num,
.service-tile:focus-visible .service-tile__num { color: var(--c-white); transform: translateY(4px); }

.service-tile__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--sp-5); }
.service-tile__title {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    text-transform: none;
    color: var(--c-white);
    margin: 0;
}
.service-tile__title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin-top: var(--sp-2);
    background: var(--c-primary);
}
/* Abre por transição de altura (grid 0fr -> 1fr) + fade + subida. */
.service-tile__reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(16px);
    transition: grid-template-rows 0.6s var(--ease-out), opacity 0.45s var(--ease) 0.08s, transform 0.6s var(--ease-out);
}
.service-tile__reveal > div { overflow: hidden; min-height: 0; }
.service-tile:hover .service-tile__reveal,
.service-tile:focus-visible .service-tile__reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
.service-tile__desc { margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.9); font-size: var(--fs-md); line-height: 1.6; }
.service-tile__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-3);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.service-tile__link::after { content: '\2192'; transition: transform 0.3s var(--ease); }
.service-tile:hover .service-tile__link::after { transform: translateX(6px); }
@media (hover: none) {
    .service-tile__reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
    .service-tile__img { filter: brightness(0.7); }
}
/* Entrada ao rolar: sobe, ganha escala e aparece, em cascata (ver main.js). */
.service-tile.will-reveal { opacity: 0; transform: translateY(56px) scale(0.96); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.service-tile.will-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .service-tile__img, .service-tile__badge, .service-tile__num,
    .service-tile__reveal { transition: none; }
}

/* ── Imóveis & Construção ─────────────────────────────────────── */
.property-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); }
.property-filters select,
.property-filters input {
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--c-dark);
    background: var(--c-white);
    border: 1px solid var(--c-border);
}
.property-filters input { width: 140px; }

.property-card__price { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--c-primary-ink); }
.price-was { font-size: var(--fs-sm); font-weight: var(--fw-normal, 400); color: var(--c-neutral); text-decoration: line-through; margin-right: 6px; }
.property-card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }

.property-single__price { font-size: var(--fs-4xl); font-weight: var(--fw-semibold); color: var(--c-primary-ink); margin: var(--sp-2) 0; }
.property-single__dev-link { margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--c-mid); }

.property-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-3); margin: var(--sp-6) 0; padding: var(--sp-4); background: var(--c-light); }
.property-spec { display: flex; flex-direction: column; gap: 2px; }
.property-spec span { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--c-dark); }
.property-spec small { font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-neutral); }

.property-features { margin-top: var(--sp-4); }

.property-media-links { display: flex; gap: var(--sp-2); margin: var(--sp-5) 0; }

.property-map { width: 100%; height: 360px; margin: var(--sp-6) 0; background: var(--c-light); }
.property-map .leaflet-container { font-family: inherit; }

/* Portfolio single "Progresso da Obra" — was a thin border-left line
   with tiny 96px thumbnails, easy to miss next to the rest of the page.
   Rebuilt on the same spine + numbered-node language as .jb-timeline
   (Como Trabalhamos, Sobre Nós) so the site's "timeline" pattern reads
   as one consistent component, with a real photo-sized card and a
   clickable image (opens in the same lightbox as the gallery below). */
.development-timeline { position: relative; margin-top: var(--sp-10); padding-top: var(--sp-2); }
.development-timeline__list {
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.development-timeline__list::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--c-border);
}
.development-timeline__item {
    position: relative;
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    padding-left: 72px;
}
.development-timeline__item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-white), 0 0 0 5px var(--c-border);
    z-index: 1;
}
.development-timeline__item > a {
    flex-shrink: 0;
    display: block;
    width: 160px;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
}
.development-timeline__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); }
.development-timeline__item > a:hover img { transform: scale(1.08); }
.development-timeline__item > div {
    flex: 1;
    background: var(--c-white);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.development-timeline__item time { display: block; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-neutral); margin-bottom: 4px; }
.development-timeline__item p { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-dark); margin: 0; }
@media (max-width: 640px) {
    .development-timeline__item { padding-left: 56px; gap: var(--sp-3); }
    .development-timeline__item > a { width: 96px; }
    .development-timeline__list::before { left: 19px; }
    .development-timeline__item::before { left: 12px; width: 14px; height: 14px; }
}

/* ── Career badges ───────────────────────────────────────────── */
.result-item__top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; }
.result-item__cat { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary-ink); }

/* ── Article meta / date ─────────────────────────────────────── */
.article-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.article-date { font-size: var(--fs-sm); color: var(--c-neutral); }
.article-views { font-size: var(--fs-sm); color: var(--c-neutral); }

.empty-state { padding: var(--sp-10) 0; color: var(--c-neutral); font-size: var(--fs-body); }

/* ══════════════════════════════════════════════════════════════
   MARGIN / SPACING AUDIT PASS — every rule below fixes a section
   that had no CSS at all (only the global reset, i.e. flush/zero
   spacing) or reused a class in a way that broke its intended layout.
   ══════════════════════════════════════════════════════════════ */
.page-hero h1 { margin-bottom: var(--sp-3); }
/* .hero__lead's own color (rgba white) assumes the dark photo .hero it
   was designed for — .page-hero is a plain light section, so that white
   text was invisible on every inner page (Contact, FAQ, Services, ...)
   until this override. */
.page-hero .hero__lead {
    max-width: 640px;
    color: var(--c-mid);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--fw-regular);
}

/* Generic section body copy (about.php history/founder/area, home's
   whyUs body, ...) was a bare, unstyled <p> — reset zeroes all margins,
   so it sat flush against the heading above and the grid/next element
   below, in default black text. */
.section-body {
    color: var(--c-mid);
    font-size: var(--fs-lg);
    line-height: 1.8;
    max-width: 720px;
    margin-bottom: var(--sp-4);
}
.section-body:last-child { margin-bottom: 0; }

/* Alternating light/white section backgrounds — without this every
   section on a page was plain white back-to-back, which read as flat
   regardless of the content inside. */
.section--alt { background: var(--c-light); }

/* Trust bar had zero CSS: no padding, no background — it sat pressed
   flush between the hero above and the next section below. */
.trust-bar { background: var(--c-dark-warm); padding: var(--sp-5) 0; }
.trust-bar p {
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-xl);
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
    line-height: 1.6;
}

/* Final CTA band — bold background so it reads as the page's closing
   call to action instead of blending into the section above it. */
.home-final-cta { background: var(--c-dark); text-align: center; }
.home-final-cta .collection-title__main, .home-final-cta h2 { color: var(--c-white); }
.home-final-cta .collection-title__pre { color: var(--c-accent-gold); opacity: 1; }
.home-final-cta .eyebrow { color: var(--c-accent-gold); }
.home-final-cta .section-body,
.home-final-cta p { color: rgba(255,255,255,0.7); max-width: 560px; margin-inline: auto; }
.home-final-cta p.hero__microcopy { color: rgba(255,255,255,0.5); }
/* Every direct child (eyebrow, title, body text, the <p> wrapping the
   button, the microcopy) was a bare <p>/<h2> with the global reset's
   zero margin — nothing separated them, so the button sat jammed
   between the paragraph above and the microcopy below. Adjacent
   margins collapse to the larger one, not stacking with h2's own
   margin-bottom, so this doesn't create double gaps. */
.home-final-cta .container > * + * { margin-top: var(--sp-4); }

/* Text-only content cards (why-us pillars, values, ...) previously
   rendered as bare text with no visual boundary at all, unlike the
   image-led news/service/portfolio cards that share the same class. */
.news-card:not(:has(.news-card__image)) {
    background: var(--c-white);
    padding: var(--sp-5);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.news-card:not(:has(.news-card__image)):hover {
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 20px 44px rgba(24,27,32,0.12);
}

/* Hover lift — every card gets a consistent, subtle elevation-on-hover
   instead of only the image inside it zooming. */
.news-card, .testimonial-card, .team-card {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-card:hover, .testimonial-card:hover, .team-card:hover { transform: translateY(-6px); }
.testimonial-card, .team-card { box-shadow: 0 1px 2px rgba(24,27,32,0.04); }
.testimonial-card:hover, .team-card:hover { box-shadow: 0 16px 36px rgba(24,27,32,0.10); }

/* "SABER MAIS →" arrow — nudges right on hover; used on every card
   link site-wide instead of a static line of text. */
.news-card__link { display: inline-flex; align-items: center; gap: 6px; }
.news-card__link::after { content: '\2192'; display: inline-block; transition: transform 0.2s var(--ease); }
.news-card__link:hover::after { transform: translateX(4px); }

/* Icon badge — small rounded-square icon ahead of a card title (why-us
   pillars, values, services teaser). Purely decorative; the icon set
   cycles per the $icons array in whichever view renders it. */
.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: rgba(238, 127, 26, 0.08);
    color: var(--c-primary-ink);
    margin-bottom: var(--sp-3);
    flex-shrink: 0;
}
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge { transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); }
.news-card:hover .icon-badge {
    transform: scale(1.08) rotate(-4deg);
    background: var(--c-primary);
    color: var(--c-on-primary);
}

/* Founder section — text + photo side by side on desktop. The old
   markup reused .article-layout--single, which forces a single grid
   column, so the photo stacked under the full-width text instead of
   sitting beside it. */
/* Sem .container: a secção ocupa a largura toda do ecrã. O texto recebe à
   esquerda o mesmo recuo que o container dá a todas as outras secções
   (var(--sp-6) num ecrã estreito; em ecrãs mais largos que --container,
   a mesma distância até onde o container começaria); a imagem, à direita,
   fica sem padding e por isso chega mesmo à borda do ecrã. */
.founder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: center;
    width: 100%;
    /* Ponto de referência para a imagem "absolute" abaixo (>1160px). */
    position: relative;
}
.founder-layout__text {
    padding-left: max(var(--sp-6), calc((100vw - var(--container)) / 2 + var(--sp-6)));
    padding-right: var(--sp-6);
}
.founder-layout .article-image { margin: 0; }
.founder-layout .article-image img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
/* Recorte transparente (sem fundo): sem caixa nem crop — a imagem usa a sua
   proporção real e assenta no fundo da secção, com uma sombra suave a dar
   profundidade em vez do contorno reto de uma foto normal. Encostada à
   ponta direita da secção (fim da coluna, alinhada com o resto do
   conteúdo), com um tamanho fixo e moderado — width:100% preenchia a
   coluna inteira (600px+), e como o recorte já vem aparado sem margem
   transparente à volta, isso fazia a pessoa parecer gigante. */
.founder-layout .article-image--cutout { align-self: end; }
.founder-layout .article-image--cutout img {
    aspect-ratio: auto;
    width: 460px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    border-radius: 0;
    margin-left: auto;
    display: block;
    filter: drop-shadow(0 22px 28px rgba(24, 27, 32, 0.18));
    /* >1160px só: sai do fluxo e "cai" para fora do fundo da secção — o
       fundo da imagem fica 96px abaixo do fim da secção. right:0 encosta-a
       à borda (o .founder-layout, acima, é o seu referencial de posição).
       Revertido para posição normal (fluxo) abaixo de 1160px — ver
       media query mais abaixo — porque empilhada isto sobrepunha-se ao
       texto. */
    position: absolute;
    bottom: -96px;
}

/* Contact page sidebar cards — were bare text blocks with no visual
   weight at all next to the form; now match the icon-badge + boxed-card
   language used everywhere else on the site. */
.contact-card {
    background: var(--c-white);
    padding: var(--sp-5);
    border-radius: var(--radius);
    border-top: none;
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.article-sidebar .contact-card:first-child { margin-top: 0; }
.contact-card + .contact-card { margin-top: var(--sp-5); }
.contact-card p { margin-bottom: 6px; }
.contact-card p a { color: var(--c-primary-ink); font-weight: var(--fw-semibold); transition: color 0.2s var(--ease); }
.contact-card p a:hover { color: var(--c-primary-dk); }
.contact-card__hours { color: var(--c-neutral); font-size: var(--fs-md); margin-top: var(--sp-2); }
.contact-card .property-map { margin-top: var(--sp-3); margin-bottom: 0; border-radius: var(--radius); overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   CONTACT FORM (Contacto page) — was built on .partner-section-form,
   a component designed for a coloured/dark section background (white
   inputs, no border, to pop against that). On this page's plain white
   background those inputs were white-on-white — invisible outlines,
   invisible captcha box, just placeholder text floating with nothing
   to show it was a fillable field. Rewritten as its own component.
   ══════════════════════════════════════════════════════════════ */
.contact-form-card {
    background: var(--c-white);
    padding: var(--sp-6);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.contact-form-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.contact-form-card__head .icon-badge { margin-bottom: 0; }
.contact-form-card__title { font-size: var(--fs-3xl); margin: 0; }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-mid); }
.contact-form__field .required { color: var(--c-primary-ink); }
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: var(--ff-body);
    font-size: var(--fs-lg);
    color: var(--c-dark);
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-neutral); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(238, 127, 26, 0.12);
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form select { cursor: pointer; }

.contact-form__captcha-row { display: flex; align-items: stretch; gap: var(--sp-3); }
.contact-form__captcha-row .contact-form__field { flex: 1; }
.contact-form__captcha {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 0 var(--sp-4);
    background: var(--c-light);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    letter-spacing: 0.15em;
    color: var(--c-dark);
    -webkit-user-select: all;
    user-select: all;
}

.contact-form__feedback { font-size: var(--fs-sm); line-height: 1.5; min-height: 1px; }
.contact-form__feedback.is-success { color: var(--c-success); }
.contact-form__feedback.is-error { color: var(--c-error); }
.contact-form__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.contact-form__microcopy { font-size: var(--fs-sm); color: var(--c-mid); font-style: italic; }

@media (max-width: 640px) {
    .contact-form__row, .contact-form__captcha-row { grid-template-columns: 1fr; flex-direction: column; }
}

/* Service single page sidebar — CTA card + "other services" list, reusing
   .contact-card so both sidebars in the site look consistent. */
.sidebar-cta-card p { color: var(--c-mid); }
.sidebar-cta-card .btn { margin-top: var(--sp-3); }
.sidebar-service-list { display: flex; flex-direction: column; }
.sidebar-service-list a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.sidebar-service-list li:last-child a { border-bottom: none; }
.sidebar-service-list a:hover { color: var(--c-primary-ink); padding-left: 6px; }

/* Portfolio single sidebar — "Ficha da obra" fact list (location /
   category / status / dates), replacing the old fact-strip that sat
   inside the header and forced the whole page into a narrow single
   -column layout (see .property-single below). */
.obra-facts { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.obra-facts li { display: flex; align-items: center; gap: var(--sp-3); }
.obra-facts .icon-badge { margin-bottom: 0; width: 40px; height: 40px; flex-shrink: 0; }
.obra-facts .icon-badge svg { width: 20px; height: 20px; }
.obra-facts__label { display: block; font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-neutral); }
.obra-facts__value { display: block; font-weight: var(--fw-semibold); color: var(--c-dark); }
/* The portfolio single page had no units sidebar left once Imóveis was
   removed, so its markup always added the .article-layout--single
   modifier (grid-template-columns:1fr, .article-main capped at 860px)
   — every obra page rendered noticeably narrower than the rest of the
   site. Fixed on the view side (development-single.php no longer adds
   that modifier) now that the sidebar always has real content — the
   "Ficha da obra" card below — so the base two-column .article-layout
   rule applies again. */
/* Empilha mais cedo (1160px, não 860px): entre os dois, a coluna do texto
   ficava tão espremida ao lado dos 460px fixos da imagem que o texto
   quebrava mal. Empilhado, a imagem fica depois do texto (não antes — sem
   o "order:-1" que a colocava em cima); o tamanho fixo (460px) e o
   margin-left:auto da regra base já bastam para a manter encostada à
   ponta direita da secção também aqui — sem precisar de override. */
@media (max-width: 1160px) {
    .founder-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
    /* Volta ao fluxo normal (a "queda" de -96px só existe em 2 colunas,
       onde a secção tem altura de sobra para a imagem sair por baixo dela;
       empilhada, isso sobrepunha-se ao texto seguinte). Sem essa queda, o
       padding-bottom normal da secção (var(--sp-12)) reaparecia como uma
       faixa vazia depois da imagem — tirado aqui para a imagem ficar
       encostada ao fim da secção tal como no modo lado a lado. Já não
       fica encostada à direita (não há coluna de texto ao lado a
       justificá-lo) — centrada. */
    section.founder-section { padding-bottom: 0; }
    .founder-layout .article-image--cutout img { position: static; bottom: auto; margin-inline: auto; }
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE — "Como Trabalhamos" steps and the home process teaser.
   A vertical spine with numbered node badges that draws itself in and
   reveals each step as the user scrolls (see main.js's timeline
   observer). --center alternates content left/right of the spine on
   wide screens; without it every step just stacks left-aligned.
   ══════════════════════════════════════════════════════════════ */
.jb-timeline { position: relative; margin-top: var(--sp-8); padding-top: var(--sp-2); list-style: none; }
.jb-timeline::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--c-border);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.1s var(--ease-out);
}
.jb-timeline.is-active::before { transform: scaleY(1); }
/* Anything placed right after the timeline (e.g. a "ver mais" CTA) needs
   the same 64px inset as every .jb-timeline__item, otherwise it lines up
   with the spine/dots instead of with the cards above it. */
.jb-timeline + p, .jb-timeline + a { margin-top: var(--sp-6); margin-left: 64px; }
.jb-timeline__item {
    position: relative;
    padding-left: 64px;
    margin-bottom: var(--sp-8);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.jb-timeline__item:last-child { margin-bottom: 0; }
.jb-timeline__item.is-revealed { opacity: 1; transform: none; }
.jb-timeline__num {
    position: absolute;
    left: 0; top: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-2xl);
    box-shadow: 0 0 0 4px var(--c-white), 0 0 0 5px var(--c-border);
    z-index: 1;
}
.jb-timeline__body {
    background: var(--c-white);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24,27,32,0.04), 0 10px 28px rgba(24,27,32,0.07);
}
.jb-timeline__title { font-size: var(--fs-2xl); margin-bottom: 6px; }
.jb-timeline__date {
    display: block;
    font-family: var(--ff-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-xl);
    color: var(--c-primary-ink);
    margin-bottom: 6px;
}
.jb-timeline__desc { color: var(--c-mid); font-size: var(--fs-lg); line-height: 1.7; margin: 0; }

/* Pull-quote — a single sentence lifted out of the surrounding copy and
   set large, so a page of body text isn't just paragraph after paragraph. */
.pull-quote {
    position: relative;
    margin: var(--sp-4) 0 var(--sp-5);
    padding-left: var(--sp-4);
    border-left: 3px solid var(--c-primary);
    font-family: var(--ff-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-heading);
    line-height: 1.35;
    color: var(--c-dark);
}
@media (min-width: 861px) {
    .jb-timeline--center::before { left: 50%; transform: translateX(-50%) scaleY(0); }
    .jb-timeline--center.is-active::before { transform: translateX(-50%) scaleY(1); }
    .jb-timeline--center .jb-timeline__item { width: calc(50% - 40px); padding-left: 0; margin-bottom: var(--sp-10); }
    .jb-timeline--center .jb-timeline__num { left: auto; }
    .jb-timeline--center .jb-timeline__item:nth-child(odd) { margin-right: calc(50% + 40px); }
    .jb-timeline--center .jb-timeline__item:nth-child(odd) .jb-timeline__num { right: -64px; }
    .jb-timeline--center .jb-timeline__item:nth-child(even) { margin-left: calc(50% + 40px); }
    .jb-timeline--center .jb-timeline__item:nth-child(even) .jb-timeline__num { left: -64px; }
}

/* ══════════════════════════════════════════════════════════════
   DESIGN UPGRADE PASS — moving past the "flat card" look: every
   .news-card on the site shared the exact same white-box-plus-shadow
   treatment regardless of content (photo card, text card, whatever) —
   this section differentiates them and makes every hover state do more
   than change one property. All CSS-only, no markup changes needed
   (ghost numbers use CSS counters; quote marks use ::before content).
   ══════════════════════════════════════════════════════════════ */

/* Text-only cards (why-us pillars, values, ...) — big translucent
   "ghost number" watermark, auto-numbered per grid via a CSS counter,
   plus a coloured (not grey) shadow and a left accent bar that appears
   on hover instead of just lifting. */
.news-grid { counter-reset: cardnum; }
.news-card:not(:has(.news-card__image)) {
    counter-increment: cardnum;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-card:not(:has(.news-card__image))::after {
    content: counter(cardnum, decimal-leading-zero);
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: var(--ff-heading);
    font-size: 4rem;
    font-weight: var(--fw-heading);
    color: var(--c-dark);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
    transform-origin: top right;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    z-index: 0;
}
.news-card:not(:has(.news-card__image)) .news-card__body { position: relative; z-index: 1; }
.news-card:not(:has(.news-card__image)):hover::after { opacity: 0.09; transform: scale(1.08); }
.news-card:not(:has(.news-card__image)):hover {
    box-shadow: 0 1px 2px rgba(24,27,32,0.05), 0 22px 44px -10px rgba(24,27,32,0.18);
}

/* Image-led cards (portfolio, services, news) — a permanent-but-subtle
   bottom scrim that deepens on hover, a slightly-rotated zoom on the
   photo (a plain scale reads as a stock hover; a hair of rotation reads
   as deliberate), and a coloured drop shadow on the card itself. */
.news-card:has(.news-card__image) {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
    box-shadow: 0 1px 2px rgba(24,27,32,0.05), 0 14px 32px -10px rgba(24,27,32,0.12);
    transition: box-shadow 0.35s var(--ease);
}
/* The card gained a real box (rounded corners + shadow) above, but its
   text content still had zero horizontal/bottom padding — fine when the
   card was just a flat image + text with no visible edge, not fine once
   there's a rounded card boundary to bump right up against. */
.news-card:has(.news-card__image) .news-card__body {
    padding-inline: var(--sp-4);
    padding-bottom: var(--sp-4);
}
.news-card:has(.news-card__image):hover {
    box-shadow: 0 1px 2px rgba(24,27,32,0.05), 0 26px 48px -12px rgba(24,27,32,0.22);
}
.news-card__image { position: relative; }
.news-card__image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(24,27,32,0.5), transparent);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}
.news-card:hover .news-card__image::after { opacity: 1; }
.news-card:hover .news-card__image img { transform: scale(1.08) rotate(0.6deg); }

/* Testimonials — giant translucent quotation mark instead of a plain
   grey box; a light tilt on hover instead of just a lift. */
.testimonial-card { position: relative; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -0.1em;
    left: 0.15em;
    font-family: var(--ff-heading);
    font-size: 5rem;
    font-weight: var(--fw-heading);
    color: var(--c-primary);
    opacity: 0.16;
    line-height: 1;
    pointer-events: none;
}
.testimonial-card__rating,
.testimonial-card__quote,
.testimonial-card__author { position: relative; z-index: 1; }
.testimonial-card:hover { transform: translateY(-6px) rotate(-0.6deg); }

/* FAQ category headings — a small accent bar instead of plain bold
   text, matching the eyebrow/accent language used everywhere else. */
.faq-list__category { position: relative; padding-left: var(--sp-3); }
.faq-list__category::before {
    content: '';
    position: absolute;
    left: 0; top: 0.2em; bottom: 0.2em;
    width: 3px;
    background: var(--c-primary);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-8); }
    .footer-col--brand { grid-column: span 2; }}
@media (max-width: 900px) {
    .container { padding-inline: var(--sp-4); }
    .find-us__info { flex-direction: column; align-items: flex-start; }
    .find-us__map-col { max-width: 100%; margin-left: 0; }
    .find-us__ctas { justify-content: flex-start; }}
@media (max-width: 640px) {
    :root { --header-h: 60px; }
    .container { padding-inline: var(--sp-3); }
    .header-inner { padding: 0 var(--sp-3); }
    .header-account-link { max-width: 90px; overflow: hidden; text-overflow: ellipsis; padding: 8px 10px; }
    .section { padding: var(--sp-8) 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col--brand { grid-column: span 1; }
    .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .result-item { flex-direction: column; align-items: flex-start; }
    .result-item__cta { align-self: flex-end; }}
@media (max-width: 420px) {
    .hero__headline { font-size: clamp(1.875rem, 8vw, 2.5rem); }
    .partner__ctas, .hiring__ctas, .workshop__ctas, .find-us__ctas { flex-direction: column; }
    .btn { text-align: center; }}

/* ── Bleed split (image flush to the real browser edge; text stays
   inside the 1400px content width, right-aligned within it) ────── */
.bleed-split {
    display: grid;
    grid-template-columns: 2fr 3fr; /* image ~40% / text ~60% */
    align-items: stretch;
    min-height: 800px;
}
.bleed-split--tall { min-height: 820px; }
.bleed-split--tall h2 { color: var(--c-primary-ink); font-weight: var(--fw-bold); }
/* FAQ text sat with a big empty gap after the image, because .bleed-split__text
   is capped at 560px inside a much wider (60%) grid column with margin-left:auto.
   Widen it and tighten the left padding just for FAQ sections. */
.bleed-split--tall .bleed-split__text {
    max-width: 720px;
    padding-left: var(--sp-3);
}
.bleed-split__image {
    position: relative;
    overflow: hidden;
    margin-block: var(--sp-8); /* gap above/below, so it never touches the hero or next section */
}
.bleed-split__image img,
.bleed-split__image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bleed-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
    margin-left: auto;
    /* right edge lines up with the 1400px container's right inset */
    margin-right: calc(max(0px, (100vw - var(--container)) / 2) + var(--sp-6));
    padding-left: var(--sp-6);
}
.bleed-split__text .eyebrow { margin-bottom: var(--sp-2); }
.bleed-split__text h2 { margin-bottom: var(--sp-4); }
.bleed-split__text p {
    font-size: var(--fs-lg);
    color: var(--c-primary-ink);
    line-height: 1.75;
}

/* Archipelago of Brands — header block right-aligned within the 1400px container */
.section-header--map { text-align: right; margin-bottom: var(--sp-10); }
@media (max-width: 640px) {
    .section-header--map { text-align: left; }}

/* ── FAQ accordion — each item is its own light-grey card ──────── */
.faq-list { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-list__category { margin-top: var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.faq-list__category:first-child { margin-top: 0; }
/* O padding vive no botão (não no .faq-item), para a área clicável cobrir o
   cartão inteiro, borda a borda — antes só o texto/ícone abria a pergunta;
   clicar na moldura cinzenta à volta não fazia nada. */
.faq-item { background: #F1F2F4; }
.faq-item__q {
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    text-align: left;
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
    cursor: pointer;
}
.faq-item.is-open .faq-item__q { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-primary); }
.faq-item__icon { flex: none; width: 16px; height: 16px; position: relative; }
.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    background: var(--c-primary);
    transition: transform 0.25s var(--ease);
}
.faq-item__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-item__icon::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-item__icon::after { transform: translateX(-50%) scaleY(0); }
.faq-item__a {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--sp-5);
    transition: max-height 0.3s var(--ease);
}
.faq-item__a p {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--c-neutral);
    line-height: 1.75;
}
@media (max-width: 860px) {

    .bleed-split { grid-template-columns: 1fr; min-height: auto; }
    .bleed-split__image { min-height: 340px; margin-block: var(--sp-4); }
    .bleed-split__text,
    .bleed-split--reverse .bleed-split__text {
        max-width: none;
        margin: 0;
        padding: var(--sp-8) var(--sp-6) 0;
    }}

/* ══════════════════════════════════════════════════════════════
   BRAND ARCHIPELAGO PAGE
   ══════════════════════════════════════════════════════════════ */

/* Image Swiper inside .bleed-split__image, with hotspot dots per slide.
   Only the swiper root is taken out of flow (fills the image box);
   the wrapper/slides keep Swiper's own layout so sliding still works,
   they just need height:100% to stretch to fill it.
   NB: Swiper's own CDN stylesheet defines `.swiper { position: relative }

/* Collections (Clean Ocean / Terra / Vegan / Organic Cotton) — two-tier
   title (muted line + bold line), all-caps tagline, body copy, CTA. */
.collection-title {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-4);
}
.collection-title__pre {
    /* Texto grande (>=24px) só precisa de 3:1: o laranja escuro dá 3,7:1 em
       branco. O #ee7f1a puro (2,7:1) ficava abaixo, e a opacidade antiga
       (0.55) só o piorava. */
    color: var(--c-primary-dk);
    opacity: 1;
    font-weight: var(--fw-light);
    text-transform: uppercase;
}
.collection-title__main {
    color: var(--c-dark);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.collection-title--center { align-items: center; text-align: center; margin-inline: auto; }

/* ── Títulos e CTAs de secção centrados (todo o site) ─────────────
   Só atinge cabeçalhos de secção: filhos DIRETOS do .container de uma
   .section (eyebrow, título, texto de apoio, botão) e o cabeçalho das
   páginas interiores (.page-hero). Ficam de fora, de propósito, os blocos
   com texto ao lado de uma imagem (o .container tem a classe de layout, os
   títulos vivem dentro de colunas) e os heros de imagem (.hero--left). */
.section > .container > .eyebrow,
.section > .container > .collection-title,
.section > .container > .section-body:not(.section-body ~ .section-body):not(:has(~ .section-body)),
.section > .container > p:has(> .btn),
.team-group-header,
.page-hero .container { text-align: center; }
.section > .container > .collection-title { align-items: center; margin-inline: auto; }
/* Texto de apoio: bloco centrado (largura de leitura); só o parágrafo único
   fica com o texto centrado, vários parágrafos seguidos lêem-se melhor à esquerda. */
.section > .container > .section-body { margin-inline: auto; }
.team-group-desc,
.page-hero .container > p { margin-inline: auto; }
/* O CTA a seguir à timeline tinha 64px de recuo para alinhar com os cartões;
   centrado, o recuo desloca-o. */
.section > .container > .jb-timeline + p { margin-left: 0; }
.page-hero .hero-stats { justify-content: center; }
.page-hero .hero-stats__item { text-align: center; }

/* Photo carousel — shared custom gallery component (no Swiper), used on
   every brand/story page's "gallery" section (Tercera, Graccioza, Corvo,
   Social Responsibility — only the photo list differs per page). A real
   strip of every photo, each a fixed 1/3 of the viewport wide (via calc,
   so exactly 3 are visible edge-to-edge, no peeking — width never
   animates), with only the active item's height growing. main.js drags
   .photo-carousel__track with a live 1:1 translateX while the pointer is
   down (genuine Swiper-style follow) and animates the transform on
   release/nav-click. */
.photo-carousel__viewport {
    width: 100vw;
    height: 630px;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}
.photo-carousel__track {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.4s var(--ease);
    will-change: transform;
}
.photo-carousel__track.is-dragging { cursor: grabbing; transition: none; }
.photo-carousel__item {
    flex: 0 0 calc((100vw - 32px) / 3);
    height: 510px;
    overflow: hidden;
    transition: height 0.4s var(--ease);
}
.photo-carousel__item.is-active { height: 630px; }
.photo-carousel__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.photo-carousel__nav {
    display: flex;
    justify-content: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}
.photo-carousel__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #000;
    cursor: pointer;
    transition: opacity 0.2s var(--ease);
}
.photo-carousel__nav-btn:hover { opacity: 0.55; }
.photo-carousel__nav-btn svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
    .photo-carousel__viewport { height: 500px; }
    .photo-carousel__item { flex-basis: calc(100vw - 80px); height: 420px; }
    .photo-carousel__item.is-active { height: 500px; }}
/* Full-bleed background carousel — behind the content, same idea as
   .hero__bg on every other hero, just Swiper-driven for multiple slides.
   Compound selector: Swiper's own .swiper{position:relative}

/* Timed tabs — 3 tab headers with a progress bar that fills over
   --tab-duration; the active tab's bar auto-advances to the next when
   it finishes (see main.js). Defaults to the site's usual olive
   (--c-primary); .page-graccioza overrides it to the brand navy below,
   so the component works unmodified on any page (e.g. Production's
   "Three Pillars"). The hotspot dot/card modal, where used, keeps the
   site's normal colours (not overridden — reused as-is from .brand-showcase). */
.timed-tabs__nav {
    display: flex;
    gap: var(--sp-10);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-10);
}
.timed-tabs__nav-item {
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
@keyframes timedTabsFill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.timed-tabs__panel { display: none; }
.timed-tabs__panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
}
@media (max-width: 900px) {
    .timed-tabs__nav { flex-wrap: wrap; gap: var(--sp-6); }
    .timed-tabs__nav-item { flex: 1 1 40%; }
    .timed-tabs__panel.is-active { grid-template-columns: 1fr; }}

/* Become a Partner — contact form on a light grey section background,
   reuses the same /contacto/enviar endpoint as the footer form (now
   extended to accept an optional subject + message). */
.partner-section {
    background: #F1F2F4;
    padding: var(--sp-12) 0;
}

.partner-section-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.partner-section-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.partner-section-form input,
.partner-section-form textarea {
    width: 100%;
    background: var(--c-white);
    border: none;
    padding: 16px 18px;
    font-family: var(--ff-body);
    font-size: var(--fs-md);
    color: var(--c-dark);
    outline: none;
    resize: none;
}
.partner-section-form input::placeholder,
.partner-section-form textarea::placeholder { color: var(--c-neutral); }
.partner-section-form__captcha {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    color: var(--c-dark);
    -webkit-user-select: all;
    user-select: all;
}
.partner-section-form__feedback { font-size: var(--fs-sm); min-height: 1px; text-align: center; }
.partner-section-form__feedback.is-success { color: #2E7D5B; }
.partner-section-form__feedback.is-error { color: #C0392B; }
.partner-section-form__submit {
    align-self: center;
    margin-top: var(--sp-2);
    padding: 14px 44px;
    background: transparent;
    border: 1px solid var(--c-primary);
    color: var(--c-primary-ink);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.partner-section-form__submit:hover { background: var(--c-primary); color: var(--c-on-primary); }
.partner-section-form__submit:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 860px) {
    .partner-section-form__row { grid-template-columns: 1fr; }}

/* Enquiry Form (Contact & Locations page) — reuses .partner-section /
   .partner-section-form as-is, just centered title + a checkbox grid
   for "Inquiry type" in place of the usual free-text subject field. */
.enquiry-form__title { margin-bottom: var(--sp-8); }
.enquiry-form__types {
    background: var(--c-white);
    padding: 18px;
}
.enquiry-form__types-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-neutral);
    margin-bottom: var(--sp-3);
}
.enquiry-form__types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3) var(--sp-4);
}
.enquiry-form__type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--c-dark);
    cursor: pointer;
}
.enquiry-form__type input { margin: 0; accent-color: var(--c-primary); }
.enquiry-form__note {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--c-neutral);
    text-align: center;
    margin-top: var(--sp-5);
}
@media (max-width: 640px) {
    .enquiry-form__types-grid { grid-template-columns: 1fr 1fr; }}

/* Alternating step timeline — a shared horizontal line with 5 evenly
   spaced dots; even steps show their content above the line, odd steps
   below. Both content slots are always reserved (min-height) so every
   column is the same total height and the dots stay perfectly aligned,
   regardless of which slot actually has text in it. */

/* Join The Workshop (Careers & Culture page) — title + intro header
   row (same grid as .archipelago-doors__header), the bold second
   line indented to the right, then a centered "What We Believe"
   title beneath. */
.workshop-intro__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
    align-items: center;
    margin-bottom: calc(var(--sp-10) + var(--sp-10));
}
.workshop-intro__header .collection-title__main { margin-left: var(--sp-12); }
.workshop-intro__text {
    font-size: var(--fs-sm);
    color: var(--c-primary-ink);
    line-height: 1.75;
}
@media (max-width: 860px) {
    .workshop-intro__header { grid-template-columns: 1fr; gap: var(--sp-4); }
    .workshop-intro__header .collection-title__main { margin-left: 0; }}

/* ══════════════════════════════════════════════════════════════
   COOKIE CONSENT (banner + preferences modal)
   See app/views/partials/cookie-consent.php and public/js/consent.js.
   z-index sits above everything else on the page (lightbox included, 9999)
   since this is a legal-consent surface, not decorative chrome.
   ══════════════════════════════════════════════════════════════ */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -4px 24px rgba(24, 27, 32, 0.12);
    padding: var(--sp-3) 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.cookie-banner__text {
    flex: 1 1 360px;
    font-size: var(--fs-md);
    color: var(--c-mid);
    line-height: 1.6;
}
.cookie-banner__text a { color: var(--c-primary-ink); text-decoration: underline; }
.cookie-banner__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cookie-banner__actions .btn { padding: 11px 20px; font-size: var(--fs-xs); }

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3);
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 27, 32, 0.55);
}
.cookie-modal__panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--c-white);
    border-radius: var(--radius);
    padding: var(--sp-6);
}
.cookie-modal__close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    color: var(--c-mid);
    padding: var(--sp-1);
}
.cookie-modal__close:hover { color: var(--c-dark); }
.cookie-modal__panel h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); padding-right: var(--sp-6); }
.cookie-modal__intro { font-size: var(--fs-lg); color: var(--c-mid); line-height: 1.6; margin-bottom: var(--sp-4); }

.cookie-modal__category {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-border);
}
.cookie-modal__category:last-of-type { border-bottom: 1px solid var(--c-border); }
.cookie-modal__category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.cookie-modal__category-name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.cookie-modal__category-desc { font-size: var(--fs-sm); color: var(--c-mid); line-height: 1.6; margin-top: var(--sp-1); }

.cookie-toggle { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--c-border);
    border-radius: 999px;
    transition: background 0.2s var(--ease);
}
.cookie-toggle__track::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: var(--c-white);
    border-radius: 50%;
    transition: transform 0.2s var(--ease);
    box-shadow: 0 1px 3px rgba(24, 27, 32, 0.25);
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--c-primary); }
.cookie-toggle input:checked + .cookie-toggle__track::before { transform: translateX(16px); }
.cookie-toggle--locked input { cursor: default; }
.cookie-toggle--locked .cookie-toggle__track { background: var(--c-primary); opacity: 0.5; }

.cookie-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    flex-wrap: wrap;
}

@media (max-width: 620px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    /* .cookie-banner__text's flex-basis:360px (above) sets a sensible
       starting WIDTH in the desktop row layout — but flex-basis applies to
       whichever axis is the main one, and .cookie-banner__inner just
       switched to a column. Left as-is, 360px became a forced HEIGHT,
       stretching the text block and shoving the buttons far below it. */
    .cookie-banner__text { flex-basis: auto; }
    .cookie-banner__actions { justify-content: stretch; }
    .cookie-banner__actions .btn { flex: 1 1 auto; min-width: 130px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   STORE (Shopify headless — optional module, config/shopify.php)
   Product cards reuse .news-card/.service-card (see app/views/store/
   _product-card.php); everything below is specific to the product and
   cart pages themselves.
   ══════════════════════════════════════════════════════════════ */
.product-card__price { font-size: var(--fs-lg); color: var(--c-mid); }
.product-card__badge {
    align-self: flex-start;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-error);
}

.product-single { padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-10); }
.product-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--sp-10);
    align-items: start;
}
@media (max-width: 960px) {
    .product-layout { grid-template-columns: 1fr; }
}

.product-gallery__main { aspect-ratio: 1/1; background: var(--c-light); overflow: hidden; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; }
.product-gallery__thumb {
    width: 72px; height: 72px; flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--c-border);
    transition: border-color 0.2s var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { border-color: var(--c-primary); }

.product-buybox h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--sp-2); }
.product-buybox__price { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--c-primary-ink); margin-bottom: var(--sp-4); }
.product-buybox__option { margin-bottom: var(--sp-3); }
.product-buybox__option label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-mid);
    margin-bottom: var(--sp-1);
}
.product-buybox__option select {
    width: 100%;
    padding: 10px var(--sp-2);
    font-family: var(--ff-body);
    font-size: var(--fs-lg);
    border: 1px solid var(--c-border);
    background: var(--c-white);
}
.product-buybox__qty { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0; }
.product-buybox__qty label { font-size: var(--fs-sm); color: var(--c-mid); }
.product-buybox__qty input {
    width: 64px;
    padding: 10px;
    text-align: center;
    font-family: var(--ff-body);
    border: 1px solid var(--c-border);
}
.product-buybox__feedback { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--c-success); }
.product-buybox__feedback a { color: inherit; text-decoration: underline; }
.product-buybox__feedback.is-error { color: var(--c-error); }
.product-buybox__desc {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-border);
    color: var(--c-mid);
    line-height: 1.8;
}

/* Cart */
.cart-container { max-width: var(--container-sm); margin-inline: auto; }
.cart-lines { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.cart-line__image { width: 72px; height: 72px; overflow: hidden; background: var(--c-light); }
.cart-line__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title { font-weight: var(--fw-semibold); }
.cart-line__title:hover { color: var(--c-primary-ink); }
.cart-line__variant { font-size: var(--fs-sm); color: var(--c-neutral); }
.cart-line__price { font-size: var(--fs-md); color: var(--c-mid); }
.cart-line__qty-input { width: 56px; padding: 8px; text-align: center; font-family: var(--ff-body); border: 1px solid var(--c-border); }
.cart-line__total { font-weight: var(--fw-semibold); white-space: nowrap; }
.cart-line__remove { font-size: var(--fs-xs); color: var(--c-error); text-decoration: underline; }
@media (max-width: 620px) {
    .cart-line { grid-template-columns: 56px 1fr; grid-template-areas: "image body" "image qty" "image total" "image remove"; }
    .cart-line__image { grid-area: image; width: 56px; height: 56px; }
    .cart-line__body { grid-area: body; }
    .cart-line__qty { grid-area: qty; }
    .cart-line__total { grid-area: total; }
    .cart-line__remove { grid-area: remove; justify-self: start; }
}

.cart-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.cart-summary__row { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-2xl); }

/* Customer Account API — order history */
.orders-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.order-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.order-row__name { font-weight: var(--fw-semibold); }
.order-row__date { font-size: var(--fs-sm); color: var(--c-neutral); }
.order-row__status { font-size: var(--fs-sm); text-transform: capitalize; color: var(--c-mid); }
.order-row__total { font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 620px) {
    .order-row { grid-template-columns: 1fr; }
}

/* Own payment gateways (Stripe/IfthenPay) checkout — config/payments.php */
.payment-method-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.payment-method {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
.payment-method:has(input:checked) { border-color: var(--c-primary); }
.payment-method input { accent-color: var(--c-primary); }

/* Admin — /admin/loja payments log */
.admin-notice {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid var(--c-error);
    color: var(--c-error);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-md);
    line-height: 1.6;
}


/* ── Raio único: botões e cartões ────────────────────────────────
   Antes: o botão do header era uma pílula (999px), os .btn eram
   quadrados e os cartões tinham 6, 8 ou 12px. Agora tudo usa --radius. */
.btn, .btn-pill, .cat-link, .header-account-link,
.news-card, .testimonial-card, .team-card, .contact-card, .contact-form-card,
.service-card, .jb-timeline__body, .article-gallery__item { border-radius: var(--radius); }
.news-card__image { border-radius: var(--radius) var(--radius) 0 0; }

/* Botão flutuante de WhatsApp (partials/whatsapp-button.php) — verde da
   marca de propósito, para ser reconhecido de imediato, fora da paleta
   laranja do site. */
.whatsapp-float {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 500;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: var(--c-white);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.5); }
@media (max-width: 640px) {
    .whatsapp-float { right: var(--sp-3); bottom: var(--sp-3); width: 50px; height: 50px; }
    .whatsapp-float svg { width: 26px; height: 26px; }
}