/* ==========================================================================
   DP WORLD · LG200 — CormackCoreWeb 2.0
   Site-wide shell: brand tokens, base type, buttons, header, footer,
   cookie bar, lightbox and the reveal-on-scroll primitive.

   Per-page styles live alongside this file (home.css etc.) and are enqueued
   on top. Source of truth for tokens: 2.0/figma-export.css.
   ========================================================================== */

:root {
  /* ---- Brand colours ---- */
  --c-indigo-900:   #1C1038;   /* darkest — footer top */
  --c-indigo-800:   #1F174F;   /* primary brand indigo */
  --c-indigo-700:   #211853;
  --c-purple-600:   #3C3B7F;   /* footer bottom */
  --c-purple-500:   #4B4FA2;   /* park-services gradient end */
  --c-purple-400:   #4B3A74;
  --c-purple-300:   #8587CB;
  --c-blue-600:     #3F5E96;   /* occupiers intro gradient start */
  --c-blue-400:     #7C93B8;   /* occupiers intro gradient end */
  --c-green:        #00E68C;   /* primary accent (mint) */
  --c-green-soft:   #5EB77D;   /* logo leaf green */
  --c-pink:         #E72F64;   /* logo accent */
  --c-white:        #FFFFFF;
  --c-ink:          #231F20;   /* near-black for logos on light bg */
  --c-stroke:       #787878;   /* button hairline */

  /* ---- Type ---- */
  /* Headings (h1-h3) run wide; everything else is standard-width Pilat. */
  --font-heading: 'Pilat Wide', 'Arial Black', sans-serif;
  --font-display: 'Pilat', 'Arial Black', sans-serif;
  --font-body:    'Pilat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ---- Layout ---- */
  /* Hairline down the left edge of a column, fading toward its foot. Used by
     the icon columns on ESG, Masterplan and Location. */
  --rule-fade: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);

  --maxw: 1600px;                           /* content never runs wider than this */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --edge: clamp(1.25rem, 3.95vw, 3.6rem);   /* full-bleed section inset */
  /* The section inset, plus whatever it takes to hold the box at --maxw once the
     viewport is wider than that. For elements that span the viewport themselves
     (the fixed header, an absolutely-positioned overlay) and so cannot simply be
     centred with a max-width. The percentage resolves against the element's own
     containing block, which for those cases is the full width. */
  --edge-capped: calc(var(--edge) + max(0px, (100% - var(--maxw)) / 2));
  --header-h: 158px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Set while the full-screen nav is open. */
html.nav-is-open, html.nav-is-open body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--c-white);
  background: var(--c-indigo-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed container: a narrower inset from the viewport edge than .container,
   so the hero, park grid and footer read as edge-to-edge — but still held to
   --maxw, since content is capped at 1600px everywhere on the site. Section
   backgrounds and photography are on the section itself and keep bleeding. */
.container--bleed {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* Screen-reader-only text */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--c-green);
  color: var(--c-indigo-800);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}

/* ---- Type helpers ---- */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.text-green   { color: var(--c-green); }

/* Fluid display headline */
.headline {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ==========================================================================
   Pill button (AVAILABLE SPACE / DOWNLOAD BROCHURE …)

   Green pill, fully rounded on both ends, with a white disc overlapping the
   right end that carries the arrow. The #00E68C fill sits on a ::before layer
   using mix-blend-mode: screen so the Screen blend hits only the background
   and never the dark label text.
   ========================================================================== */
.btn-pill {
  --pill-h: 34px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-indigo-800);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.btn-pill__label {
  position: relative;
  isolation: isolate;
  height: var(--pill-h);
  display: inline-flex;
  align-items: center;
  background: transparent;              /* fill comes from ::before */
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0 2.3em 0 1.5em;
  margin-right: calc(var(--pill-h) * -0.30);
  white-space: nowrap;
}
.btn-pill__label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-green);
  mix-blend-mode: screen;
  box-shadow: inset 0 0 0 999px rgba(122, 243, 200, 0.92);
}

/* OUTER disc — same height as the pill, overlaps its right end, no shadow */
.btn-pill__icon {
  width: var(--pill-h);
  height: var(--pill-h);
  flex: none;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--c-white);
  border: none;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
/* INNER disc — nested concentrically, carries the drop shadow */
.btn-pill__icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--pill-h) * 0.80);
  height: calc(var(--pill-h) * 0.80);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.40);
}
.btn-pill__icon svg,
.btn-pill__icon img {
  width: 15px;
  height: auto;
}
.btn-pill:hover .btn-pill__icon { transform: translateX(6px); }

/* Back variant — the disc leads on the left and the arrow points the way it
   sends you. Everything is mirrored: the overlap, the label's padding, and the
   nudge on hover. */
.btn-pill--back { flex-direction: row-reverse; }
.btn-pill--back .btn-pill__label {
  margin-right: 0;
  margin-left: calc(var(--pill-h) * -0.30);
  padding: 0 1.5em 0 2.3em;
}
.btn-pill--back .btn-pill__icon svg,
.btn-pill--back .btn-pill__icon img { transform: rotate(180deg); }
.btn-pill--back:hover .btn-pill__icon { transform: translateX(-6px); }

/* Column variant — label on top, disc overlapping the bottom edge */
.btn-pill--col { flex-direction: column; align-items: center; }
.btn-pill--col .btn-pill__label {
  margin-right: 0;
  margin-bottom: calc(var(--pill-h) * -0.5);
  padding: 0 1.6em;
}
.btn-pill--col .btn-pill__icon { margin: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
  /* The bar spans the viewport; its contents line up with the capped content. */
  padding-inline: var(--edge-capped);
  transition: background 0.35s ease, backdrop-filter 0.35s ease, height 0.35s ease;
}
/* Compacted state — once the page is scrolled the bar slims down so it covers
   as little of the content as possible, and picks up a translucent backing so
   the nav stays legible over whatever passes beneath it.

   --header-h is redefined on the header itself rather than on :root, so the
   bar and its dropdown panel shrink while the hero and interior page templates
   keep reserving the full-height offset and nothing in the flow jumps. */
.site-header.is-scrolled {
  --header-h: 74px;
  background: rgba(31, 23, 79, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header__logo { flex: none; }
.site-header__logo img {
  height: 56px;
  width: auto;
  transition: height 0.35s ease;
}
.site-header.is-scrolled .site-header__logo img { height: 38px; }

/* ---- Primary navigation ---- */
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: block;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-white);
  padding-block: 0.35rem;
  white-space: nowrap;
}
/* The brochure pill is an <a> inside the nav, but it is a button, not a nav
   link — it is excluded here rather than by a later override, which would lose
   to the :hover rule below on specificity. */
.site-nav a:not(.nav-brochure__button)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-green);
  transform: scaleX(0);
  /* Opens from the middle outwards, rather than sweeping in from the left. */
  transform-origin: center;
  transition: transform 0.3s ease;
}
.site-nav a:not(.nav-brochure__button):hover::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after { transform: scaleX(1); }

/* ==========================================================================
   Nav items that carry a brochure

   Park Services and The Hive have no page yet: the label opens a panel with the
   PDF in it. Shown on hover for pointers, on focus for keyboards, and toggled
   by aria-expanded for touch.
   ========================================================================== */
.nav-brochure { position: relative; }

/* The trigger has to sit in the row exactly as the links do, so it inherits
   their type and drops every button default. */
.nav-brochure__trigger {
  position: relative;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-white);
  padding-block: 0.35rem;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-brochure__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-green);
  transform: scaleX(0);
  /* Opens from the middle outwards, rather than sweeping in from the left. */
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-brochure:hover .nav-brochure__trigger::after,
.nav-brochure:focus-within .nav-brochure__trigger::after,
.nav-brochure__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* The caret that points from the label down to the panel. */
.nav-brochure__trigger::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  width: 0;
  height: 0;
  transform: translateX(-50%) scale(0);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--c-green);
  transition: transform 0.2s ease;
}
.nav-brochure:hover .nav-brochure__trigger::before,
.nav-brochure:focus-within .nav-brochure__trigger::before,
.nav-brochure__trigger[aria-expanded="true"]::before { transform: translateX(-50%) scale(1); }

.nav-brochure__drop {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translate(-50%, -0.35rem);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-brochure:hover .nav-brochure__drop,
.nav-brochure:focus-within .nav-brochure__drop,
.nav-brochure__trigger[aria-expanded="true"] + .nav-brochure__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-brochure__button {
  display: block;
  padding: 0.7em 1.6em;
  border: 2px solid rgba(120, 120, 120, 1);
  border-radius: 999px;
  background: #FFFFFF38;
  color: var(--c-white);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Scrolled, the panel hangs over the page rather than over a hero, so the
   translucent fill can land on light content. A solid brand ground keeps the
   white label readable whatever is behind it. Placed before the hover rule so
   hover still wins at equal specificity. */
.site-header.is-scrolled .nav-brochure__button {
  background: rgba(31, 23, 79, 0.94);
  border-color: rgba(120, 120, 120, 0.9);
}

.nav-brochure__button:hover,
.nav-brochure__button:focus-visible {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-indigo-800);
}

/* ---- Contact (envelope) button ---- */
.contact-btn {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-white);
  border: 1.5px solid rgba(120, 120, 120, 0.5);
  transition: transform 0.25s ease, background 0.25s ease,
              width 0.35s ease, height 0.35s ease;
}
.contact-btn:hover { transform: scale(1.08); background: var(--c-green); }
.contact-btn img, .contact-btn svg { width: 19px; height: auto; transition: width 0.35s ease; }
.site-header.is-scrolled .contact-btn { width: 34px; height: 34px; }
.site-header.is-scrolled .contact-btn img,
.site-header.is-scrolled .contact-btn svg { width: 16px; }

/* ---- Mobile nav toggle ---- */
.nav-toggle {
  display: none;
  flex: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Page hero — shared by the front page and every interior page.

   The media layer takes either a looping video or a still; both are laid out
   identically. Per-page type sizing comes from --hero-title-size /
   --hero-title-measure, set by a modifier class, so a page never has to
   restate the whole component.
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero__media,
.page-hero__media video,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--c-indigo-800);
  opacity: 0.42;
}
/* A further 22% of the brand indigo across every hero on the site, over the
   readability overlay above and under the copy. On .page-hero itself so it
   applies to the video heroes as well as the still ones. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(31, 23, 79, 0.22);   /* #1F174F */
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Centred by the flex parent, then lifted: the comps set the block a little
     above the optical centre so the scroll cue has room beneath it. */
  padding-bottom: clamp(2rem, 13.4vh, 8.25rem);
}
.page-hero__eyebrow {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 2.6vh, 2.25rem);
}
/* h1 — 67px on 73px leading at the design width, Pilat Wide Book (450 picks
   the Book face; Heavy is 700 and marks the <strong> phrases). The clamp only
   scales it *down* on smaller viewports; 67px is the ceiling everywhere. */
.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 450;
  font-size: var(--hero-title-size, clamp(1.85rem, 4.65vw, 67px));
  line-height: calc(73 / 67);
  letter-spacing: 0;
  margin: 0;
  /* The measure is what folds each page's headline to three lines. */
  max-width: var(--hero-title-measure, 46rem);
  /* Long hyphenated phrases ("world-class") would otherwise overrun a narrow
     phone at the clamp floor. */
  overflow-wrap: break-word;
}
.page-hero__title strong { font-weight: 700; }   /* Pilat Wide Heavy */
/* The three-line headline needs room to breathe before the button. */
.page-hero__cta { margin-top: clamp(2.25rem, 5.2vh, 3.75rem); }

/* Optional partner lockup, bottom-left — level with the scroll cue. */
.page-hero__logo {
  position: absolute;
  left: var(--edge-capped);
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 3;
  width: auto;
  height: clamp(2.5rem, 4.4vw, 3.9rem);
}

/* Scroll-down indicator — only the arrow animates */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue svg { width: 30px; height: auto; }
.scroll-cue__arrow { animation: cue-arrow 1.8s ease-in-out infinite; }

@keyframes cue-arrow {
  0%   { transform: translateY(-5px); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateY(6px);  opacity: 0; }
  100% { transform: translateY(6px);  opacity: 0; }
}

/* ==========================================================================
   Section heading — the large uppercase Pilat Wide Book rule used to open a
   section ("PARK SERVICES AT A GLANCE", "CURRENTLY AVAILABLE OPPORTUNITIES").
   ========================================================================== */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
/* Sentence-case variant — the interior sections set on light artwork open in
   sentence case rather than caps, and run a touch larger and looser for it. */
.section-heading--sentence {
  font-size: clamp(1.55rem, 2.65vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   Interior page shell — archives, singles, 404.
   Interior page designs land later; this keeps every non-home route on-brand
   and readable in the meantime.
   ========================================================================== */
.page-shell {
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--c-indigo-800) 0%, var(--c-indigo-700) 100%);
}
.page-shell--center { text-align: center; }
.page-shell__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-shell__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0;
}
.page-shell__meta { font-size: 0.9rem; opacity: 0.75; margin: 0.75rem 0 0; }
.page-shell__media { margin: 0 0 2.5rem; }
.page-shell__media img { width: 100%; height: auto; border-radius: 10px; }
.page-shell__cta { margin-top: 2rem; }

.entry-content { max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; }
.entry-content h2,
.entry-content h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 2.5rem 0 1rem; }
.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content p { margin: 0 0 1.35rem; }
.entry-content a { color: var(--c-green); text-decoration: underline; text-underline-offset: 0.2em; }
.entry-content img { border-radius: 10px; height: auto; }
.entry-content ul,
.entry-content ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--c-green);
  font-size: 1.2rem;
}

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.post-card__media { display: block; margin-bottom: 1.25rem; }
.post-card__media img { width: 100%; height: auto; border-radius: 10px; }
.post-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.post-card__title a:hover { color: var(--c-green); }
.post-card__meta { font-size: 0.85rem; opacity: 0.7; margin: 0 0 0.75rem; }
.post-card__excerpt p { margin: 0; line-height: 1.5; }

.pagination { margin-top: clamp(2rem, 5vw, 3.5rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pagination a, .pagination .current {
  display: inline-block;
  padding: 0.45em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.9rem;
}
.pagination .current { background: var(--c-green); color: var(--c-indigo-800); border-color: transparent; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: linear-gradient(109.25deg, var(--c-indigo-900) 24.11%, var(--c-purple-600) 75.89%);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5.15vw, 4.6rem);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(3rem, 9vw, 8rem);
  align-items: stretch;
}
.footer-brand { display: flex; flex-direction: column; }
.footer-brand__logo { width: 174px; height: auto; margin-bottom: clamp(2rem, 7.2vw, 6.4rem); }
.footer-brand .dp-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 1.5rem 2.5rem;
}
/* Pins the address (and the optional what3words row) to the foot of the
   column so it sits level with the last agent contact. */
.footer-brand__foot { margin-top: auto; padding-top: 3rem; }
.footer-brand .w3w {
  margin: 0 0 0.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer-brand .w3w__label { margin-right: 0.5em; }
.footer-brand .w3w a:hover { text-decoration: underline; }
.footer-brand .w3w__slashes { color: #E11F26; margin-right: 0.15em; }
.footer-brand .address {
  /* Not a heading — standard-width Pilat. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Agents — pushed to the right edge */
.agents { display: grid; gap: 2.9rem; align-content: start; }
.agents .agent-group { width: 100%; }
.agent-group__logo { height: 22px; width: auto; margin-bottom: 1.15rem; }
.agent-group__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: 1.5rem 1.75rem;
}
.agent-group__people .contact-card .name { white-space: nowrap; }

.contact-card { font-size: 1rem; line-height: 1.55; }
.contact-card p { margin: 0; }
.contact-card .name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.55rem;
}
.contact-card a:hover { color: var(--c-green); }

.footer-rule { border: none; border-top: 0.5px solid rgba(255, 255, 255, 0.5); margin: 2.5rem 0; }
.footer-disclaimer { font-size: 0.8125rem; line-height: 1.6; opacity: 0.9; max-width: 90%; margin: 0; }
.footer-disclaimer a:hover { color: var(--c-green); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  margin-top: 1.75rem;
}
.footer-base a:hover { color: var(--c-green); }

/* ==========================================================================
   Cookie consent bar
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(28, 16, 56, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar.is-hiding { transform: translateY(100%); }
.cookie-bar__inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 3.25rem 0.85rem 1.5rem;
}
.cookie-bar__text { margin: 0; text-align: center; }
.cookie-bar__ok {
  flex: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--c-indigo-800);
  background: var(--c-green);
  border: none;
  border-radius: 999px;
  padding: 0.5em 1.6em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cookie-bar__ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cookie-bar__close {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.2s ease;
}
.cookie-bar__close:hover { color: #fff; }

/* ==========================================================================
   Lightbox — full-screen image viewer
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 7, 28, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--c-white);
  border: 1.5px solid rgba(120, 120, 120, 0.5);
  border-radius: 50%;
  color: var(--c-indigo-800);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
.lightbox__close::before { content: "\00d7"; display: block; margin-top: -0.1em; }
.lightbox__close:hover { transform: scale(1.08); background: var(--c-green); }

/* ==========================================================================
   Reveal-on-scroll (progressive enhancement)
   Hidden only once JS has flagged the document, so the page degrades
   gracefully (fully visible) if the script never runs.
   ========================================================================== */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-enabled .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive — shell
   ========================================================================== */
@media (max-width: 1280px) {
  .site-nav ul { gap: 0.9rem; }
  .site-nav a { font-size: 0.9rem; }
}

@media (max-width: 1024px) {
  :root { --header-h: 96px; }

  .nav-toggle { display: flex; }
  .site-header { justify-content: space-between; gap: 1rem; }
  .site-header__logo img { height: 48px; }

  /* Screen height is scarcer on a phone, so the compacted bar goes slimmer
     still. The open nav panel tracks it via the scoped --header-h. */
  .site-header.is-scrolled { --header-h: 62px; }
  .site-header.is-scrolled .site-header__logo img { height: 32px; }

  /* Full screen, with the items centred in it. It covers the whole viewport
     rather than dropping under the bar, so the logo and the toggle are lifted
     above it and stay usable while it is open. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Opaque enough that a backdrop blur would not show: leaving it out keeps
       the open instant rather than paying for a full-screen composite. */
    background: rgb(28, 16, 56);
    padding: calc(var(--header-h) + 1.5rem) var(--edge) 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2.4vh, 1.25rem);
    width: 100%;
    margin: auto;                    /* centres it even when the list scrolls */
    text-align: center;
  }
  .site-nav a,
  .nav-brochure__trigger {
    font-size: clamp(1.15rem, 4.6vw, 1.6rem);
    padding-block: 0.55rem;
  }

  /* The header sits above the panel so the logo and the toggle stay on top. */
  .site-header { z-index: 50; }
  /* Once scrolled, the bar carries a backdrop-filter — and that makes it the
     containing block for the fixed panel inside it, which would pin the panel
     to the 74px bar instead of the viewport. It is dropped while the menu is
     open; the bar keeps its background colour. */
  html.nav-is-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Dropped from the transition list as well: animating it over 0.35s kept
       the bar acting as the containing block for that whole time, so the panel
       stayed pinned to it and then jumped. It has to change instantly. */
    transition: background 0.35s ease, height 0.35s ease;
  }
  /* The bar's own controls stay above the panel: the logo, the close button
     and the contact icon are all reachable while the menu is open. */
  .site-header__logo,
  .nav-toggle,
  .contact-btn { position: relative; z-index: 60; }

  /* There is no hover on touch, so the pill stays closed until the label is
     tapped, then opens in place beneath it. */
  .nav-brochure { display: flex; flex-direction: column; align-items: center; }
  .nav-brochure__drop {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.25s ease, margin-top 0.32s ease;
  }
  /* Hover and focus can both stick on touch, so they must not open it here —
     only the tap does. */
  .nav-brochure:hover .nav-brochure__drop,
  .nav-brochure:focus-within .nav-brochure__drop {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    transform: none;
  }
  /* Last, so it wins over the two rules above at equal specificity. The
     transform has to be reset here too: the desktop open rule carries a
     translate(-50%) for the centred dropdown, and outranks a plain
     .nav-brochure__drop override — which would drag the pill off to the left. */
  .nav-brochure__trigger[aria-expanded="true"] + .nav-brochure__drop {
    opacity: 1;
    max-height: 6rem;
    margin-top: 0.75rem;
    transform: none;
  }

  /* The caret earns its keep here: it shows the label opens something, and
     turns over once it has. */
  .nav-brochure__trigger::before {
    display: block;
    bottom: -0.5rem;
    transform: translateX(-50%) scale(1);
    transition: transform 0.25s ease;
  }
  .nav-brochure__trigger[aria-expanded="true"]::before {
    transform: translateX(-50%) rotate(180deg) scale(1);
  }

  .footer-top { grid-template-columns: 1fr; }
  .agents { justify-items: start; }
}

@media (max-width: 768px) {
  .footer-brand__logo { width: 140px; margin-bottom: 2rem; }
  .footer-brand .address { font-size: 1.25rem; }
  .footer-brand .dp-contacts,
  .agent-group__people { grid-template-columns: 1fr 1fr; }
  .cookie-bar__inner { flex-direction: column; gap: 0.65rem; padding: 0.85rem 2.5rem 1rem; }
}

@media (max-width: 480px) {
  .footer-brand .dp-contacts,
  .agent-group__people { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  /* The header still compacts — it just snaps rather than animating. */
  .site-header,
  .site-header__logo img,
  .contact-btn,
  .contact-btn img { transition: none; }
}