/* ==========================================================================
   Fcogroup — clean static rebuild of fcogroup.local (Adeco Home-2 design)
   All values copied from the original theme CSS for pixel parity.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "adeco-icon";
  src: url("../fonts/adeco-icon-1.0.0.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="adeco-icon-"], [class*=" adeco-icon-"] {
  font-family: "adeco-icon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.adeco-icon-arrow-up-right:before { content: "\e002"; }
.adeco-icon-arrow-left:before     { content: "\e019"; }
.adeco-icon-arrow-right:before    { content: "\e01a"; }

/* ---------- Tokens ---------- */
:root {
  /* F.CO. Group branding — navy + gold */
  --primary: #F1BE61;        /* gold — pop accent (dark text sits on it) */
  --primary_hover: #E3A94A;
  --gold: #F1BE61;
  --gold_hover: #E3A94A;
  --navy: #0E2D4C;
  --ink: #08182C;            /* darkest navy — dark section backgrounds */
  --secondary: #273862;
  --text: #3E4A5C;
  /* --text_light is for text ON DARK sections (5.10:1 on --ink). It measured only
     3.50:1 on white, so light-background text uses --text_muted below. Using the
     wrong one is an AA failure in whichever direction you get it wrong. */
  --text_light: #7C8AA0;
  --text_muted: #5F6C82;   /* 5.31:1 on white, 5.04:1 on --background_light */
  --border: #E3E7ED;
  --accent: #0E2D4C;         /* navy — headings, dark text, primary buttons */
  --background: #FFFFFF;
  --background_light: #F8F9FB;
  --white: #ffffff;
  --dark: #08182C;
  --font-main: "Switzer", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  --container: 1420px;
  --gutter: 20px;
  /* global heading typography (Elementor kit a06ef02) */
  --h-display-size: 80px;
  /* subtitle chip typography (kit 377b29e) */
  --sub-size: 14px;
}
@media (max-width: 1200px) { :root { --h-display-size: 70px; } }
@media (max-width: 1024px) { :root { --h-display-size: 54px; } }
@media (max-width: 767px)  { :root { --h-display-size: 45px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
::selection {
  text-shadow: none;
  color: #fff;
  background: var(--primary);
}
body {
  margin: 0;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background);
  overflow-x: clip;
  font-size: 18px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  color: var(--text);
  font-family: var(--font-main);
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6 {
  clear: both;
  margin: 0 0 0.5407911001em;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-family: var(--font-main);
}
h1 { font-size: clamp(80px, 6.25vmax, 120px); line-height: 0.9; }
h2 { font-size: clamp(50px, 4.16vmax, 80px);  line-height: 1; }
h3 { font-size: clamp(38px, 3.25vmax, 50px);  line-height: 1; }
h4 { font-size: clamp(28px, 2.8vmax, 38px);   line-height: 1; }
h5 { font-size: 28px; line-height: 1; }
h6 { font-size: 20px; line-height: 1; }
p  { margin: 0 0 1.618em; }
b, strong { font-weight: 600; }
a {
  color: var(--accent);
  text-decoration: none;
  background-color: transparent;
}
a:hover { color: var(--primary); }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border: 0; }
button {
  font-family: var(--font-main);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.c-primary, .color-primary { color: var(--primary); }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

/* Elementor boxed container: 1420px inner, side padding only when space is tight */
.container {
  width: min(100% - 40px, var(--container));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .container { width: min(100% - 30px, var(--container)); }
}

/* ---------- Hover-roll text (theme .hover-text) ---------- */
.hover-text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.hover-text span {
  display: block;
  transition: all ease 0.4s;
  z-index: 1;
  transform-style: preserve-3d;
}
.hover-text:before {
  content: attr(data-name);
  display: block;
  height: 100%;
  position: absolute;
  top: -100%;
  transition: all ease 0.4s;
  transform-style: preserve-3d;
}
a:hover > .hover-text span,
a:hover > .hover-text:before,
a:hover > .btn-text .hover-text span,
a:hover > .btn-text .hover-text:before,
.btn:hover .hover-text span,
.btn:hover .hover-text:before {
  transform: translateY(100%);
}

/* ---------- Subtitle chip (theme .box-subtitle) ---------- */
.box-subtitle {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--primary);
  padding: 0 20px 2px;
  margin: 0 0 30px;
  font-size: var(--sub-size);
  font-weight: 600;
  text-transform: uppercase;
  /* Elementor keeps the wrapper's 18px x 1.5 = 27px line-box strut while the
     text renders at 14px, so the red chip is 29px tall (27 + 2px padding),
     not hugging the text. Match that with a fixed 27px line-height. */
  line-height: 27px;
  letter-spacing: -0.02em;
  color: var(--ink); /* dark text on the gold chip */
  -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
@media (max-width: 1024px) { .box-subtitle { margin-bottom: 20px; } }
@media (max-width: 767px)  { .box-subtitle { margin-bottom: 15px; } }

/* ---------- Buttons (theme adeco-button) ---------- */
.btn {
  --bg-color: var(--primary);
  --bg-hover: #fff;
  --icon-normal: #fff;
  --icon-hover: var(--accent);
  --border-color: #000;
  --border-hover: #000;
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse; /* text left, icon right */
  align-items: stretch;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--accent);
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all ease 0.3s;
}
.btn .btn-text {
  display: flex;
  padding: 12px 20px;
}
.btn .btn-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 50px;
  border-left: 1px solid var(--border-color);
}
.btn i { font-size: 11px; }
.btn .icon-default,
.btn .icon-hover {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: transform 0.35s linear;
}
.btn .icon-default {
  color: var(--icon-normal);
  fill: var(--icon-normal);
  background-color: var(--bg-color);
}
.btn .icon-hover {
  position: absolute;
  left: -100%;
  color: var(--icon-hover);
  fill: var(--icon-hover);
  background-color: var(--bg-hover);
}
.btn:hover .icon-default,
.btn:hover .icon-hover { transform: translateX(100%); }
.btn:hover {
  border-color: var(--border-hover);
}

/* LIGHT theme outline button (dark navy outline on light sections) */
.btn--outline {
  --bg-color: transparent;
  --bg-hover: var(--primary);    /* gold arrow-square slides in on hover */
  --icon-normal: var(--accent);  /* navy arrow at rest */
  --icon-hover: var(--ink);      /* dark arrow on the gold square */
  --border-color: var(--accent); /* navy outline — branded */
  --border-hover: var(--accent);
}
.btn--outline:hover {
  color: var(--white);
  background-color: var(--accent); /* fills navy, text turns white */
}

/* DARK theme outline button (white outline on dark / image backgrounds) */
.btn--hero {
  --icon-normal: #FFFFFF;
  --border-color: #FFFFFF;
  --bg-hover: var(--primary);    /* gold arrow-square slides in on hover */
  --icon-hover: var(--ink);      /* dark arrow on the gold square */
  --border-hover: #FFFFFF;
  color: #FFFFFF;
}
.btn--hero:hover { background-color: #FFFFFF; color: var(--accent); } /* fills white, text turns navy */

/* header variant: solid CTA — matches the reference (one fill, white text, divider) */
.btn--header {
  --bg-color: var(--accent);    /* icon box = same navy as body (solid look) */
  --bg-hover: var(--primary);   /* gold icon slides in on hover */
  --icon-normal: #fff;          /* white arrow at rest */
  --icon-hover: var(--ink);     /* dark arrow on the gold hover box */
  --border-hover: var(--accent);
  border: none;
  color: #fff;
  background-color: var(--accent); /* solid navy button, white text */
}
.btn--header .btn-text { padding: 33px 50px; }
.btn--header .btn-icon { width: 60px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.btn--header:hover { background-color: var(--accent); color: #fff; }
@media (max-width: 1366px) {
  .btn--header .btn-text { padding: 33px 12px; }
}
@media (max-width: 1200px) {
  .btn--header { font-size: 14px; }
  .btn--header .btn-text { padding: 32px 15px 31px; }
  .btn--header .btn-icon { width: 30px; }
}

/* Gold primary CTA — the design system's .fco-cta-btn: solid gold body + ink text,
   works on light OR dark; hover inverts to navy body + gold text. Uses the shared
   .btn structure (icon box + divider). Currently the CTAs use the light button on
   dark banners; keep this available for a gold-primary placement. */
.btn--white {
  --bg-color: var(--primary);    /* gold icon box, matches the body */
  --bg-hover: var(--accent);     /* navy icon box slides in on hover */
  --icon-normal: var(--ink);     /* dark arrow on gold at rest */
  --icon-hover: var(--primary);  /* gold arrow on the navy hover box */
  --border-color: var(--primary);
  --border-hover: var(--accent);
  background-color: var(--primary);
  color: var(--ink);
}
.btn--white .btn-icon { border-left: 1px solid rgba(8, 24, 44, 0.25); } /* visible divider on gold */
.btn--white:hover { background-color: var(--accent); color: var(--primary); } /* inverts: navy body, gold text */

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  margin-top: 40px;
  transition: margin-top 0.3s ease;
}
/* sticks flush to the top once the page is scrolled */
.site-header.is-sticky {
  position: fixed;
  margin-top: 0;
  box-shadow: 0 6px 24px rgba(8, 24, 44, 0.14);
  animation: headerDrop 0.4s ease;
}
/* compact the header once it sticks: shorter nav/button + smaller logo */
.site-header.is-sticky .main-navigation ul.menu > li.menu-item > a { padding-top: 1.25em; padding-bottom: 1.25em; }
.site-header.is-sticky .btn--header .btn-text { padding-top: 22px; padding-bottom: 22px; }
.site-header.is-sticky .site-logo img { width: 108px; }
.site-header.is-sticky .header-support svg { width: 40px; height: 40px; }
@keyframes headerDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.header-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 18%;
  padding-left: 40px;
  padding-right: 30px;
}
.site-logo { display: block; line-height: 0; }
.site-logo img { width: 133px; transition: width 0.3s ease; }

.site-header .main-navigation { width: 45%; }
.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  width: 37%;
}
@media (max-width: 1366px) {
  .header-brand { padding-left: 20px; }
  .header-actions { gap: 10px; }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header .main-navigation { width: 47%; }
  .header-actions { width: 35%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .header-brand { width: 30%; }
  .header-actions { width: auto; }
}
@media (max-width: 767px) {
  .site-header { margin-top: 20px; }
  .header-brand { width: 60%; padding-left: 15px; padding-right: 0; flex-wrap: nowrap; }
  .header-actions { width: 40%; }
  .header-support { display: none; }
}

/* support icon-box */
.header-support {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.header-support svg { width: 48px; height: 48px; fill: #D1DEE4; display: block; transition: width 0.3s ease, height 0.3s ease; }
.support-text { display: block; }
.support-title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text_muted);
}
.support-desc {
  display: block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}
@media (max-width: 1200px) {
  .header-support { gap: 5px; }
  .header-support svg { width: 36px; height: 36px; }
  .support-desc { font-size: 14px; }
}

/* mobile hamburger */
.menu-mobile-nav-button {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  color: var(--accent);
  /* it is a <button> now (it opens a menu; it was never a link) — undo the UA chrome */
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  /* The icon itself is only ~24x12px, but this is the ONLY navigation on every
     phone and tablet. Pad the control out to a 44x44 target (WCAG 2.5.5 / iOS HIG)
     without moving the bars: the negative margin keeps the glyph optically where it
     was, so the header layout is unchanged. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin-left: -10px;
}
.menu-mobile-nav-button .adeco-icon {
  display: flex;
  flex-direction: column;
}
.menu-mobile-nav-button .adeco-icon > span {
  display: inline-block;
  height: 2px;
  width: 24px;
  margin-bottom: 3px;
  border-radius: 5px;
  transition: all 0.3s ease;
  background-color: var(--accent);
}
.menu-mobile-nav-button .adeco-icon > span:last-child { margin-bottom: 0; }
.menu-mobile-nav-button .adeco-icon .icon-2 { width: 16px; }
.menu-mobile-nav-button .adeco-icon .icon-3 { width: 12px; }
.menu-mobile-nav-button:hover .adeco-icon > span { background-color: var(--primary); }
.menu-mobile-nav-button:hover .adeco-icon .icon-2,
.menu-mobile-nav-button:hover .adeco-icon .icon-3 { width: 24px; }
@media (max-width: 1024px) {
  .menu-mobile-nav-button { display: inline-flex; }
  .site-header .main-navigation { display: none; }
}

/* ---------- Primary navigation ---------- */
.main-navigation { position: relative; }
.main-navigation ul.menu {
  margin: 0;
  list-style: none;
  text-align: left;
}
.main-navigation ul li {
  position: relative;
  display: inline-block;
  text-align: left;
}
.main-navigation ul.menu > li.menu-item > a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 2.063em 0.9375em;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  transition: all 0.4s ease;
  font-family: var(--font-main);
}
@media (max-width: 1200px) {
  .main-navigation ul.menu > li.menu-item > a { padding: 30px 10px; }
}
.main-navigation ul.menu > li.menu-item > a .hover-text {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.main-navigation ul.menu > li.menu-item > a .hover-text:after {
  content: "";
  width: 2px;
  height: 2px;
  background-color: var(--primary);
}
/* dropdowns */
.main-navigation ul ul.sub-menu {
  float: left;
  position: absolute;
  top: 100%;
  transform: translateY(20px);
  z-index: 99999;
  left: -30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s ease;
  pointer-events: none;
  margin-top: 2px;
  padding: 20px 30px;
  background-color: var(--background);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.main-navigation ul ul.sub-menu:before {
  content: "";
  height: 6px;
  top: -4px;
  left: 0;
  position: absolute;
  width: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0px);
}
.main-navigation ul ul.sub-menu li {
  display: block;
  min-width: 180px;
}
.main-navigation ul.menu li.menu-item .sub-menu .menu-item a {
  display: flex;
  width: 100%;
  color: var(--accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  padding: 2.5px 0;
}
/* mega menu */
.main-navigation .mega-menu { width: 760px; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 30px 30px 60px;
}
.main-navigation ul ul.mega-menu { padding: 0; }
.mega-menu-item { min-width: 0 !important; }
.mega-title {
  font-size: 16px;
  font-weight: 600;
  color: #00000066;
  margin: 0 0 25px;
}
.mega-links a { display: block; margin-bottom: 5px; }
.mega-link {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  color: var(--text);
}
.mega-link .text-default {
  display: block;
  transition: all ease 0.4s;
  transform-style: preserve-3d;
}
.mega-link .text-hover {
  display: block;
  height: 100%;
  position: absolute;
  top: -100%;
  transition: all ease 0.4s;
  transform-style: preserve-3d;
  color: var(--accent);
}
.mega-links a:hover .text-default,
.mega-links a:hover .text-hover { transform: translateY(100%); }

/* mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  padding: 80px 30px;
  overflow-y: auto;
}
.mobile-menu .menu li a {
  display: block;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Full-bleed crossfading slides + caption carousel (matches fco-home.html) */
.hero {
  position: relative;
  background-color: var(--accent);
  color: #fff;
  padding-top: clamp(150px, 20vw, 230px);
  overflow: hidden;
  margin-bottom: 150px;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* navy corner glow (bottom-left) + strong overall darkening so bright slide
     photos still read as a DARK background (white text + navy shape legible) */
  background:
    radial-gradient(120% 95% at -6% 108%, rgba(31,86,143,.9) 0%, rgba(14,45,76,.62) 24%, rgba(8,24,44,.3) 46%, transparent 66%),
    linear-gradient(180deg, rgba(4,14,28,.74) 0%, rgba(4,14,28,.55) 42%, rgba(4,14,28,.85) 100%);
}
.hero-shape {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;                 /* over photo + scrim, under content (z-index:2) */
  width: min(72%, 1100px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.hero-inner { position: relative; z-index: 2; }
.hero-title {
  max-width: 760px;
  font-size: clamp(48px, 6.4vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
  margin: 0 0 30px;
}
.hero-cta { align-self: flex-start; }

/* caption carousel row */
.hero-carousel {
  position: relative;
  z-index: 2;
  margin-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 5vw, 56px);
}
.hero-carousel-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.hero-caps { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.hero-cap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 150px;
  padding-top: 14px;
  border: 0;
  background: none;
  text-align: left;
  color: #fff;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.4s ease;
  font-family: var(--font-main);
}
.hero-cap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.hero-cap-line {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 0;
  background: var(--primary);
}
.hero-cap-idx { font-size: 14px; font-weight: 500; color: var(--primary); }
.hero-cap-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.hero-cap.is-active { opacity: 1; }
.hero-nav { display: flex; gap: 0; flex: none; }
.hero-nav-btn {
  position: relative;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  font-size: 14px;
  transition: border-color 0.3s ease;
}
.hero-nav-btn i { font-size: 12px; }
/* attached: the two buttons share one divider instead of doubling it */
.hero-nav-btn + .hero-nav-btn { border-left: 0; }
/* two stacked icon layers that slide horizontally on hover — same mechanic as .btn */
.hero-nav-btn .hn-default,
.hero-nav-btn .hn-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s linear;
}
.hero-nav-btn .hn-default { color: #fff; background: transparent; }
.hero-nav-btn .hn-hover {
  left: -100%;
  color: var(--ink);
  background: var(--primary);
}
.hero-nav-btn:hover .hn-default,
.hero-nav-btn:hover .hn-hover { transform: translateX(100%); }
/* prev arrow slides the opposite way: gold enters from the right */
#heroPrev .hn-hover { left: 100%; }
#heroPrev:hover .hn-default,
#heroPrev:hover .hn-hover { transform: translateX(-100%); }
.hero-nav-btn:hover { border-color: var(--primary); }

@media (max-width: 1024px) { .hero { margin-bottom: 80px; } }
@media (max-width: 767px) {
  .hero { margin-bottom: 60px; }
  .hero-carousel-row { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero-cap-title { white-space: normal; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { margin-bottom: 150px; position: relative; }
.about-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.about-img {
  position: absolute;
  right: 50vw;
  bottom: -30px;
  max-width: none;
  width: 855px;
}
.about-spacer { width: 50%; }
.about-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.about-title {
  font-size: var(--h-display-size);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0 0 30px;
}
.about-text {
  font-size: 22px;
  margin: 0 0 40px;
}
@media (max-width: 1200px) { .about { margin-bottom: 100px; } }
@media (max-width: 1024px) { .about { margin-bottom: 80px; } }
@media (max-width: 767px) {
  .about { margin-bottom: 60px; }
  .about-inner { flex-direction: column; }
  .about-img { right: 30vw; bottom: 0; max-width: 350px; width: auto; }
  .about-spacer { width: 100%; min-height: 250px; order: 99; }
  .about-content { width: 100%; }
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats {
  background-color: #D1DEE4;
  overflow: hidden;
  margin-bottom: 150px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 460px;
  padding: 40px;
  background-color: #FFFFFF;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 0 1px #DEDEDE;
  z-index: 2;
}
/* white overlay hides the bg image until hover */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #FFFFFF;
  opacity: 1;
  transition: all 0.3s ease;
}
.stat-card:hover::before { opacity: 0; }
.stat-card:hover { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); }
.stat-card:hover * { color: #fff !important; }
.stat-card--1 { background-image: url("../img/projects/team-fleet-yard.jpg"); }
.stat-card--2 { background-image: url("../img/projects/emirates-branch.jpg"); margin-left: -1px; }
.stat-card--3 { background-image: url("../img/projects/team-workforce.jpg"); }
.stat-card > * { position: relative; }
.stat-heading {
  color: var(--accent);
  margin: 0 0 0.5407911001em;
}
.counter-wrap {
  display: flex;
  justify-content: flex-start;
  color: var(--accent);
  font-size: 120px;
  font-weight: 700;
  line-height: 0.9em;
  letter-spacing: -0.04em;
}
.suffix-light { color: var(--text_muted); }
.stat-media {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.stat-media img {
  position: absolute;
  left: -120px;
  top: -100px; /* aligns photo with the section top (cancels section padding) */
  width: 580px;
  height: 660px;
  object-fit: cover;
  object-position: center 58%;
  max-width: none;
}
@media (max-width: 1200px) {
  .stats { margin-bottom: 100px; }
  .stat-card { min-height: 350px; }
  .counter-wrap { font-size: 80px; }
}
@media (max-width: 1024px) {
  .stats { margin-bottom: 80px; }
  .stats-grid { padding-top: 80px; padding-bottom: 80px; }
  .stat-card { padding: 20px; }
  .stat-media img { max-width: 450px; width: auto; top: -80px; }
}
@media (max-width: 880px) {
  .counter-wrap { font-size: 68px; }
}
@media (max-width: 767px) {
  .stats { margin-bottom: 60px; }
  .stats-grid { grid-template-columns: repeat(1, 1fr); padding-top: 60px; padding-bottom: 60px; }
  .stat-card { min-height: 200px; }
  .stat-media { min-height: 200px; }
  .stat-media img { position: static; transform: none; width: 100%; max-width: 100%; }
}

/* ==========================================================================
   FEATURED PROJECTS  (Adeco project-style-1 slider: overlaid title, 2 shown,
   autoplay, clip-left / bleed-right — matches the fcogroup.local reference)
   ========================================================================== */
.projects { margin-bottom: 150px; }
.projects-inner { display: flex; flex-direction: row; flex-wrap: wrap; }
.projects-head { width: 60%; display: flex; flex-direction: column; align-items: flex-start; }
.projects-title {
  font-size: var(--h-display-size);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0;
}
.projects-action { width: 40%; display: flex; justify-content: flex-end; align-items: flex-end; }
.projects-slider-wrap { width: 100%; margin-top: 70px; }
.projects-slider {
  /* clip on the LEFT at the container edge, bleed off to the RIGHT viewport edge */
  overflow: hidden;
  width: calc(50% + 50vw);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* vertical page scroll passes through; we handle horizontal drag */
}
.projects-slider.is-dragging { cursor: grabbing; }
.projects-slider img { -webkit-user-drag: none; user-drag: none; }
.slider-track { display: flex; transition: transform 500ms ease; will-change: transform; }
/* 2 cards visible within the container (700px each at desktop) */
.slide {
  flex: 0 0 auto;
  width: calc((min(100vw - 40px, var(--container)) - 20px) / 2);
  margin-right: 20px;
}
.project-item.project-style-1 { position: relative; overflow: hidden; }
.project-post-thumbnail { position: relative; overflow: hidden; padding-top: 720px; }
.project-post-thumbnail img {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover;
  transform: translate3d(-6.66%, 0, 0) scale(1.2);
  transition: opacity 0.35s, transform 0.45s, filter 0.35s;
}
.project-post-thumbnail:before {
  position: absolute; content: ""; inset: 0; background: #000; opacity: 0; z-index: 1;
  transition: all 0.3s ease;
}
.project-post-thumbnail:after {
  position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 85%, #000000 100%); opacity: 0.9; z-index: 1;
}
.project-item:hover .project-post-thumbnail:before { opacity: 0.2; }
.project-item:hover .project-post-thumbnail img { transform: translate3d(0,0,0) scale(1.2); }
.project-content {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; z-index: 3; color: #fff;
}
.project-content-inner {
  width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.project-title { margin: 20px; font-size: 28px; line-height: 1; }
.project-title a {
  color: #fff;
  background-image: linear-gradient(to right, #fff 0%, #fff 100%);
  background-position: 0 calc(100% - 0.045em);
  background-size: 0 0.065em;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat; text-decoration: none;
}
.project-title a:hover { background-size: 100% 0.065em; color: #fff; }
.project-button .link-icon {
  position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;
  height: 50px; width: 50px; color: #fff; background-color: var(--accent); transition: all 0.3s ease;
}
.project-button .link-icon i { font-size: 14px; transition: all ease 0.3s; transform: rotateZ(-45deg); }
.project-item:hover .project-button .link-icon { background-color: var(--primary); }
.project-button:hover .link-icon i { transform: rotateZ(0); }

@media (max-width: 1200px) {
  .projects { margin-bottom: 100px; }
  .project-post-thumbnail { padding-top: 500px; }
  .slide { width: calc((min(100vw - 40px, var(--container)) - 20px * 1.5) / 2.5); }
}
@media (max-width: 1024px) {
  .projects { margin-bottom: 80px; }
  .projects-slider-wrap { margin-top: 50px; }
  .project-post-thumbnail { padding-top: 400px; }
}
@media (max-width: 767px) {
  .projects { margin-bottom: 60px; }
  .projects-head { width: 100%; }
  .projects-action { width: 100%; justify-content: flex-start; align-items: flex-start; margin-top: 30px; order: 99; }
  .projects-slider-wrap { margin-top: 40px; }
  .slide { width: calc((100vw - 30px - 15px * 0.1) / 1.1); margin-right: 15px; }
}


/* ==========================================================================
   STEPS (how we work) + WHY CHOOSE US
   ========================================================================== */
.steps {
  display: flex;
  flex-direction: row;
  margin-bottom: 150px;
}
.steps-left { width: 50%; }
.step-panel {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-position: center center;
  background-size: cover;
}
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 360px;
  min-height: 420px;
  padding: 45px 40px;
  background-color: #FFFFFF;
}
.step-title {
  margin: 0 0 30px;
  color: var(--accent);
}
.step-card p { margin: 0; }
.step-num {
  position: absolute;
  top: -15px;
  left: 40px;
  background-color: var(--primary);
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #FFFFFF;
}
.steps-right {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 50%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 150px 20px;
  background-color: var(--ink);
  overflow: hidden;
}
.steps-img {
  position: absolute;
  right: 50px;
  top: 0;
  display: none; /* Adeco decoration — not part of FCO dark panel */
}
.steps-content,
.steps-counter {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.steps-heading {
  font-size: var(--h-display-size);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0 0 15px;
}
.steps-text {
  font-size: 22px;
  color: var(--text_light);
  margin: 0;
}
.steps-counter .counter-wrap {
  color: var(--primary);
  font-size: clamp(64px, 6.35vmax, 120px);
  line-height: normal;
}
.steps-counter-note {
  font-size: 18px;
  text-decoration: underline;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
}
.steps-shape {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;                 /* decorative — sits behind content (z-index:2) */
  display: block;
  width: min(760px, 92%);
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1200px) {
  .steps { margin-bottom: 100px; }
  .steps-right { padding: 100px 20px; }
}
@media (max-width: 1024px) {
  .steps { margin-bottom: 80px; }
  .step-card { min-height: 350px; }
}
@media (max-width: 767px) {
  .steps { margin-bottom: 60px; flex-direction: column; }
  .steps-left, .steps-right { width: 100%; }
  .steps-right { position: relative; min-height: auto; }
  .step-panel { padding: 0 15px; }
  .step-card { width: 100%; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { margin-bottom: 150px; }
.services .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.services-title {
  font-size: var(--h-display-size);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--accent);
  max-width: 850px;
  margin: 0 0 65px;
}
.services-list {
  display: flex;
  gap: 20px;
  width: 100%;
}
.service-item {
  flex: 1;
  min-height: clamp(480px, 40vmax, 600px);
  transition: all 0.4s ease;
}
.service-item.is-active { flex: 2.7; }
.service-inner {
  position: relative;
}
.service-thumbnail {
  position: relative;
  overflow: hidden;
  z-index: 2;
  /* inactive cards show a half-height (300px) red thumbnail; only the active
     card expands to full height — matches the live service-style-3 behaviour */
  min-height: 300px;
  transition: all ease 0.3s;
}
.service-item.is-active .service-thumbnail {
  min-height: clamp(480px, 40vmax, 600px);
}
.service-thumbnail img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  max-height: 100%;
  transform: scale(1.02);
  transition: opacity 0.35s, transform 0.45s, filter 0.35s;
}
.service-thumbnail:before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--accent); /* navy card — white text reads cleanly */
  opacity: 1;
  z-index: 1;
  transition: all ease 0.3s;
}
.service-item.is-active .service-thumbnail:before {
  background-color: var(--ink);
  opacity: 0.45;
}
.service-item.is-active .service-thumbnail img { transform: scale(1.3); }
.service-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 30px 30px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}
.service-content > * { max-width: 380px; }
/* Icon sits in an 80x80 folded-corner box (theme .service-icon svg spec):
   white box + dark icon when inactive, red box + white icon when active.
   The box lives on the wrapper so the active-state filter only recolors the
   icon, not the red background. */
.service-icon {
  margin-bottom: auto;
  width: 80px;
  height: 80px;
  padding: 22px;
  background-color: #fff;
  -webkit-clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - 19px));
  clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - 19px));
  transition: all 0.3s ease;
}
.service-icon img,
.service-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* inline SVG outline icons tint via currentColor: dark on white box, white on red box */
.service-icon svg { color: var(--accent); }
.service-item.is-active .service-icon {
  margin-bottom: 25px;
  background-color: var(--primary);
}
.service-item.is-active .service-icon img {
  filter: brightness(0) invert(1); /* flip a black raster icon to white on the red box */
}
.service-item.is-active .service-icon svg { color: var(--ink); }
.service-title {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
  word-break: break-word;
}
.service-title a {
  color: #fff;
  background-image: linear-gradient(to right, #fff 0%, #fff 100%);
  background-position: 0 calc(100% - 0.045em);
  background-size: 0 0.065em;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.service-title a:hover { background-size: 100% 0.065em; }
.service-info {
  margin-top: 0;
  color: #fff;
  opacity: 0;
  max-height: 0;
  transition: all 0.3s ease;
}
.service-item.is-active .service-content { padding: clamp(30px, 2.8vmax, 40px); }
.service-item.is-active .service-title {
  font-size: clamp(38px, 3.25vmax, 50px);
  font-weight: 700;
}
.service-item.is-active .service-info {
  margin-top: auto;
  opacity: 1;
  max-height: 100%;
}
.service-info .description { margin-bottom: 30px; }
.service-info .description p { margin-bottom: 0; }
.service-info { display: flex; flex-direction: column; }
.service-item.is-active .service-title { margin-bottom: 0; }
.service-info .service-button-link { margin-top: 30px; }

/* light button (Learn More) */
.service-button-link {
  --bg-color: transparent;
  --bg-hover: var(--primary);
  --icon-normal: #fff;
  --icon-hover: #fff;
  border: 1px solid var(--icon-normal);
  display: inline-flex;
  align-self: flex-start;
  align-items: stretch;
  gap: 25px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  background-color: transparent;
  transition: all ease 0.3s;
}
.service-button-link .button-text {
  padding: 12px 20px;
  display: flex;
  color: var(--icon-normal);
}
.service-button-link .button-icon {
  width: 50px;
  border-left: 1px solid var(--icon-normal);
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  display: flex;
}
.service-button-link .button-icon i {
  transform: rotateZ(-45deg);
  font-size: 11px;
}
.service-button-link .icon-default,
.service-button-link .icon-hover {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: transform 0.35s linear;
}
.service-button-link .icon-default {
  color: var(--icon-normal);
  background-color: var(--bg-color);
}
.service-button-link .icon-hover {
  position: absolute;
  left: -100%;
  color: var(--icon-hover);
  background-color: var(--bg-hover);
}
.service-button-link:hover .icon-default,
.service-button-link:hover .icon-hover { transform: translateX(100%); }
.service-button-link:hover .hover-text span,
.service-button-link:hover .hover-text:before { transform: translateY(100%); }
.service-button-link:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}
.service-button-link:hover .button-text { color: #fff; }
.service-button-link:hover .button-icon { border-color: var(--accent); }

@media (max-width: 1200px) { .services { margin-bottom: 100px; } }
@media (max-width: 1024px) {
  .services { margin-bottom: 80px; }
  .services-title { max-width: 600px; margin-bottom: 50px; }
}
@media (max-width: 767px) {
  .services { margin-bottom: 0; }
  .services-title { margin-bottom: 40px; }
  .services-list { flex-direction: column; }
  .service-item { min-height: 400px; }
  .service-item .service-thumbnail { min-height: 300px; }
}

/* ==========================================================================
   FULLSCREEN BANNERS (Project On Time / CTA)
   ========================================================================== */
.banner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: center center;
  background-size: cover;
  z-index: 1;
  clip-path: inset(0);
}
@media (min-width: 1367px) {
  .banner { background-attachment: fixed; }
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* dark navy wash so the banner photo reads as a DARK background */
  background-color: var(--ink);
  opacity: 0.62;
}
.banner-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner-title {
  font-size: 120px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}
.banner-shape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.8;               /* asset is already navy — no hue-rotate filter needed */
}
/* Inner pages reuse the home banner but keep their own supporting copy. */
.banner-text {
  margin: 26px 0 0;
  max-width: 56ch;
  padding-inline: 20px;
  text-align: center;
  color: #C3CEDD;
  font-size: 19px;
  line-height: 1.55;
  z-index: 2;
}
.banner-fixed .cta-actions { margin-top: 44px; z-index: 2; }
@media (max-width: 767px) { .banner-text { font-size: 17px; } }
/* CTA title flows in-flow so the button sits below it with real spacing
   (was position:absolute + margin-top:280px, which collided on 2-line titles) */
.banner-btn {
  margin-top: 56px;
  z-index: 2;
}
@media (max-width: 1200px) { .banner-title { font-size: 90px; } }
@media (max-width: 1024px) { .banner-title { font-size: 72px; } }
@media (max-width: 767px)  { .banner-title { font-size: 50px; } }

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.clients { padding-top: 150px; padding-bottom: 150px; }
.clients-head {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(48px, 5vw, 70px);
}
.clients-title {
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0 0 20px;
}
.clients-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text_muted);
  max-width: 56ch;
  margin: 0;
}
.clients-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.clients-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  gap: 24px;
  align-items: center;
}
.marquee-item {
  flex: 0 0 auto;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  border: 0;
  transition: transform 0.3s ease;
}
.marquee-item img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  /* legible by default (grayscale but full opacity), full colour on hover */
  filter: grayscale(1) contrast(1.05);
  opacity: 1;
  transition: filter 0.4s ease, transform 0.4s ease;
}
.marquee-item:hover img { filter: grayscale(0); transform: scale(1.04); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

@media (max-width: 1200px) {
  .clients { padding-top: 100px; padding-bottom: 100px; }
}
@media (max-width: 1024px) {
  .clients { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .clients { padding-top: 60px; padding-bottom: 60px; }
  .marquee-item { width: 180px; height: 108px; padding: 16px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: var(--ink);
  overflow: hidden;
}
.footer-shape {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  opacity: 0.75;             /* asset is already navy — no hue-rotate filter needed */
}
.footer-inner { position: relative; }
.footer-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 150px;
  margin-bottom: 190px;
}
.footer-left {
  width: 66.6666%;
  display: flex;
  flex-direction: column;
  padding-right: 115px;
}
.footer-menus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
}
.footer-menu-col:nth-child(2) { padding-left: 20px; }
.footer-menu-col:nth-child(3) { padding-left: 40px; }
.footer-menu-title {
  color: #FFFFFF80;
  margin: 0 0 30px;
}
.footer-links li:not(:last-child) { padding-bottom: 4.5px; }
.footer-links li:not(:first-child) { margin-top: 4.5px; }
.footer-links a {
  color: var(--background);
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--primary); }
.footer-tagline-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #FFFFFF26;
  margin-top: 47px;
  padding-top: 47px;
}
/* These two were <h6> purely to inherit the heading look, which put a phone number
   and a marketing tagline into the document outline as headings. They are <p> now,
   so the properties the shared h1–h6 rule was supplying are restated here —
   otherwise the tag change silently restyles the footer. */
.footer-tagline {
  max-width: 290px;
  font-size: 20px;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: var(--font-main);
  color: var(--background);
  margin: 0;
}
.footer-social {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
.footer-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: var(--accent);
  transition: all 0.3s ease;
}
.footer-social a svg {
  width: 18px;
  height: 18px;
  fill: #FFFFFF33;
  display: block;
  transition: all 0.3s ease;
}
.footer-social a:hover { background-color: var(--background); }
.footer-social a:hover svg { fill: var(--accent); }
.footer-right {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
}
.footer-logo {
  display: block;
  margin-bottom: 55px;
  line-height: 0;
}
.footer-logo img { width: 120px; }
.footer-contact { margin-bottom: 25px; }
.footer-contact:last-child { margin-bottom: 0; }
.contact-label {
  font-size: 16px;
  line-height: 1.5em;
  color: var(--text_light);
  margin: 0 0 5px;
}
.contact-value {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: var(--font-main);
  color: var(--background);
  margin: 0;
}
/* Phone/email are now tappable (tel:/mailto). Keep them looking like the text they
 * replaced — inherit colour, no default underline — but underline on hover/focus so
 * they read as interactive, and show a visible focus ring for keyboard users. */
.support-desc a,
.contact-value a { color: inherit; text-decoration: none; }
.support-desc a:hover,
.support-desc a:focus-visible,
.contact-value a:hover,
.contact-value a:focus-visible { text-decoration: underline; }
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 90px;
}
.footer-bottom p {
  font-size: 16px;
  line-height: 1.5em;
  color: var(--background);
  margin: 0;
}
.footer-bottom p a {
  color: var(--background);
  text-decoration: underline;
}
.footer-bottom .footer-credit { color: var(--text_light); }
.footer-bottom .footer-credit a { color: var(--primary); text-decoration: none; }
.footer-bottom .footer-credit a:hover { text-decoration: underline; }
.footer-legal { display: flex; gap: 24px; align-items: center; }
.footer-legal a {
  color: var(--background);
  text-decoration: none;
  font-size: 15px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 1200px) {
  .footer-main { margin-top: 100px; margin-bottom: 100px; }
  .footer-left { padding-right: 60px; }
  .footer-menu-col:nth-child(2),
  .footer-menu-col:nth-child(3) { padding-left: 0; }
}
@media (max-width: 1024px) {
  .footer-main { margin-top: 80px; margin-bottom: 80px; }
  .footer-left { padding-right: 0; }
  .footer-tagline-row { flex-direction: column; }
}
@media (max-width: 767px) {
  .footer-main { margin-top: 60px; margin-bottom: 30px; flex-direction: column; }
  .footer-left, .footer-right { width: 100%; }
  .footer-left { padding-bottom: 20px; }
  .footer-menus { grid-template-columns: repeat(2, 1fr); }
  .footer-menu-title { margin-bottom: 15px; }
  .footer-tagline-row { margin-top: 40px; padding-top: 40px; }
  .footer-logo { margin-bottom: 30px; }
  .footer-logo img { width: 60px; }
  .footer-bottom { margin-bottom: 60px; }
}

/* ==========================================================================
   Reveal animations (replaces Elementor opal-move-* / GSAP split text)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.in-view {
    opacity: 1;
    transform: none;
  }
  .split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .split-text.in-view .char {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   INNER PAGES  (About / Services / Projects / Contact)
   Built on the same tokens + idioms as the homepage.
   ========================================================================== */

/* ---------- Page hero (dark banner under the floating white header) ---------- */
.page-hero {
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at -6% 110%, rgba(31,86,143,.85) 0%, rgba(14,45,76,.55) 26%, rgba(8,24,44,.15) 50%, transparent 66%),
    linear-gradient(180deg, rgba(4,14,28,.62) 0%, rgba(4,14,28,.30) 40%, rgba(4,14,28,.72) 100%);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(210px, 20vw, 300px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.crumbs {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 22px;
}
.page-hero-title {
  font-size: clamp(52px, 6.4vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.5);
  margin: 0;
  max-width: 15ch;
}

/* Compact banner: used where the page content itself is the hero (profile) */
.page-hero--short .page-hero-inner {
  padding-top: clamp(150px, 13vw, 196px);
  padding-bottom: clamp(34px, 4vw, 58px);
}
.page-hero--short .page-hero-title { font-size: clamp(42px, 4.6vw, 78px); }
.page-hero-note {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Generic section rhythm ---------- */
.section { padding-block: clamp(72px, 9vw, 150px); }
.section--tight { padding-block: clamp(52px, 6vw, 96px); }
.section--paper { background-color: var(--background_light); }
.section--dark { background-color: var(--ink); }

.section-head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(40px, 5vw, 66px);
}
.section-title {
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.section--dark .section-title { color: #fff; }

/* two-column intro (eyebrow + title | body) */
.duo {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5.5vw, 88px);
  align-items: start;
}
.duo-title {
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.lede {
  font-size: 22px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 22px;
}
.lede:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .lede { font-size: 19px; }
}

/* ---------- Cards grid (values / services / offices) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 42px);
  background-color: #fff;
  border: 1px solid var(--border);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(8,24,44,.45);
  border-color: #D5DBE4;
}
.card-tag {
  display: inline-block;
  background-color: var(--primary);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 8px 10px;
  margin-bottom: 26px;
}
.card-title {
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--accent);
}
.card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
}
.card-icon {
  width: 72px;
  height: 72px;
  padding: 18px;
  margin-bottom: 26px;
  background-color: var(--accent);
  color: #fff;
  -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: background-color 0.35s ease, color 0.35s ease;
}
.card-icon svg { display: block; width: 100%; height: 100%; }
.card:hover .card-icon { background-color: var(--primary); color: var(--ink); }
.card--navy {
  background-color: var(--accent);
  border-color: var(--accent);
  justify-content: center;
}
.card--navy .card-title { color: #fff; }
.card--navy p { color: #C3CEDD; }
.card--navy:hover { transform: translateY(-4px); }

@media (max-width: 1024px) {
  .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cards, .cards--4 { grid-template-columns: 1fr; }
}

/* ---------- Media + text row (history / feature) ---------- */
.media-duo {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5.5vw, 88px);
  align-items: center;
}
.media-frame {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.pullquote {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 26px;
  margin: 30px 0 0;
}
.pullquote p {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 14px;
}
.pullquote cite {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text_muted);
}
@media (max-width: 900px) {
  .media-duo { grid-template-columns: 1fr; gap: 30px; }
  .media-frame { aspect-ratio: 16 / 11; }
}

/* ---------- Dark glass panels (vision / mission / capabilities) ---------- */
.glass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.2vw, 48px);
}
.glass-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 3.4vw, 52px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
}
/* Vision & Mission read as a matched pair — same size, weight and colour */
.glass-lead,
.glass-card p:not(.glass-lead) {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: #E8EDF4;
  margin: 0;
}
.section--dark .box-subtitle { margin-bottom: 22px; }
@media (max-width: 900px) { .glass-grid { grid-template-columns: 1fr; } }

.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cert-tile {
  padding: 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
}
.cert-tile--gold { background: rgba(241,190,97,.12); border-color: rgba(241,190,97,.32); }
.cert-key {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0 0 12px;
}
.cert-tile--gold .cert-key { font-size: 34px; }
.cert-desc { font-size: 14px; line-height: 1.5; color: #C3CEDD; margin: 0; }

/* ---------- Projects grid ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.proj-card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -30px rgba(8,24,44,.5); }
.proj-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--ink); }
.proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.proj-card:hover .proj-media img { transform: scale(1.06); }
.proj-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background-color: var(--primary);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 12px 6px;
  -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.proj-body { padding: 24px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.proj-cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary_hover);
  margin-bottom: 12px;
}
.proj-title { font-size: 21px; line-height: 1.14; margin: 0; color: var(--accent); }
.proj-meta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text_muted);
  margin-top: 18px;
}
.proj-card--cta {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: clamp(28px, 3vw, 40px);
  justify-content: center;
}
.proj-card--cta .proj-cat { color: var(--primary); margin-bottom: 14px; }
.proj-card--cta .proj-title { color: #fff; margin-bottom: 14px; }
.proj-card--cta p { color: #C3CEDD; font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
.proj-card--cta .btn { align-self: flex-start; }
@media (max-width: 1024px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .proj-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5.5vw, 84px);
  align-items: start;
}
.contact-methods { display: grid; gap: 22px; margin-top: 8px; }
.contact-method { display: flex; gap: 16px; align-items: center; text-decoration: none; }
.contact-method-icon {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background-color: var(--accent);
  transition: background-color 0.3s ease;
}
.contact-method-icon svg { width: 20px; height: 20px; stroke: var(--primary); transition: stroke 0.3s ease; }
.contact-method:hover .contact-method-icon { background-color: var(--primary); }
.contact-method:hover .contact-method-icon svg { stroke: var(--ink); }
.contact-method-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text_muted);
  margin-bottom: 3px;
}
.contact-method-value { display: block; font-weight: 600; font-size: 17px; color: var(--accent); }

.cform {
  background-color: #fff;
  border: 1px solid var(--border);
  padding: clamp(26px, 3vw, 44px);
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--accent);
  background-color: var(--background_light);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 15px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text_muted); }
/* Keep the gold border as the decorative cue, but never `outline: none` here — this
   rule outranks the site's own a:focus-visible ring defined further down, so it was
   silently deleting the only keyboard focus indicator on the contact form. The gold
   border by itself is 1.71:1 against white, which is not a focus indicator. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  background-color: #fff;
}
.cform .btn { width: 100%; }
.cform .btn .btn-text { flex: 1; justify-content: center; }
.formnote {
  font-size: 15px;
  color: var(--accent);
  background-color: rgba(241,190,97,.16);
  border: 1px solid rgba(241,190,97,.4);
  padding: 12px 16px;
  margin: 16px 0 0;
}
.formnote.is-error {
  color: #b23b3b;
  background-color: rgba(178,59,59,.10);
  border-color: rgba(178,59,59,.35);
}
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formfine { font-size: 12px; color: var(--text_muted); text-align: center; margin: 14px 0 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

/* ---------- CTA band (compact, no fixed parallax) ---------- */
.cta-band {
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(90px, 12vw, 180px);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,24,44,.82), rgba(8,24,44,.9));
}
.cta-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta-title {
  font-size: clamp(42px, 5.2vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;
}
.cta-text {
  font-size: 19px;
  line-height: 1.55;
  color: #C3CEDD;
  max-width: 56ch;
  margin: 0 0 40px;
}

/* .cta-inner stacks its children, so two bare buttons butt together.
   Wrap them in a row that wraps to a column on narrow screens. */
.cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 560px) {
  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* ---------- Service photo-cards (icon + title + desc + image at bottom) ---------- */
.svc-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -30px rgba(8,24,44,.5);
  border-color: #D5DBE4;
}
.svc-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(28px, 3vw, 42px) clamp(28px, 3vw, 42px) clamp(24px, 2.6vw, 34px);
}
.svc-card .card-icon { margin-bottom: 26px; }
.svc-card:hover .card-icon { background-color: var(--primary); color: var(--ink); }
.svc-card-title {
  width: 100%;
  font-size: 26px;
  line-height: 1.06;
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.svc-card-desc {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  margin: 0;
}
.svc-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--ink);
}
.svc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.svc-card:hover .svc-card-media img { transform: scale(1.06); }

/* ---------- Offices: tabbed city switcher with photo + live map ---------- */
.offices-tabbed { width: 100%; }
.office-tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  background-color: #fff;
}
.office-tab {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 24px;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.office-tab:last-child { border-right: 0; }
.office-tab .office-tab-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text_muted);
  transition: color 0.3s ease;
}
.office-tab .office-tab-city {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  transition: color 0.3s ease;
}
.office-tab:hover { background-color: var(--background_light); }
.office-tab.is-active { background-color: var(--accent); }
.office-tab.is-active .office-tab-city { color: #fff; }
.office-tab.is-active .office-tab-role { color: var(--primary); }

.office-panels { margin-top: 20px; }
.office-panel { display: none; }
.office-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.office-photo,
.office-map {
  position: relative;
  height: clamp(340px, 40vw, 460px);
  overflow: hidden;
  border: 1px solid var(--border);
}
.office-photo img { width: 100%; height: 100%; object-fit: cover; }
.office-photo-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px;
  background: linear-gradient(180deg, transparent, rgba(8,24,44,.85));
  color: #fff;
}
.office-photo-cap .cap-city { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 4px; color: #fff; }
.office-photo-cap .cap-addr { font-size: 15px; color: #C3CEDD; margin: 0; }
.office-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }
@media (max-width: 900px) {
  .office-tab { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
  .office-panel.is-active { grid-template-columns: 1fr; }
  .office-photo, .office-map { height: clamp(280px, 60vw, 360px); }
}

/* ---------- Offices: single map + selectable location tags ---------- */
.offices-map {
  display: grid;
  grid-template-columns: minmax(300px, 390px) 1fr;
  gap: 20px;
  align-items: stretch;
}
.office-list { display: flex; flex-direction: column; gap: 12px; }
.office-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 22px 20px 58px;
  text-align: left;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.office-item:hover { border-color: #C9D2DE; }
.office-item::before {
  content: attr(data-index);
  position: absolute;
  left: 16px;
  top: 20px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background-color: var(--primary);
  -webkit-clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: background-color 0.3s ease, color 0.3s ease;
}
.office-item .oi-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text_muted);
  transition: color 0.3s ease;
}
.office-item .oi-city {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  transition: color 0.3s ease;
}
.office-item .oi-addr {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text_muted);
  margin-top: 2px;
  transition: color 0.3s ease;
}
.office-item.is-active { background-color: var(--accent); border-color: var(--accent); }
.office-item.is-active .oi-city { color: #fff; }
.office-item.is-active .oi-role { color: var(--primary); }
.office-item.is-active .oi-addr { color: #C3CEDD; }
.office-mapframe {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--background_light);
}
.office-mapframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .offices-map { grid-template-columns: 1fr; }
  .office-mapframe { min-height: 340px; order: -1; }
}

/* ---------- Offices: photo cards + one live Leaflet map (all pins) ---------- */
.office-item {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  padding: 14px;
}
.office-item::before { content: none; }
.oi-thumb {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  overflow: hidden;
  background-color: var(--ink);
}
.oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oi-num {
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  background-color: var(--primary);
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.oi-num span { transform: translate(-4px, -3px); }
.oi-info { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.office-item .oi-addr { margin-top: 4px; }

/* Leaflet map surface */
.office-mapframe { min-height: 520px; }
.leaflet-container { font-family: var(--font-main); background-color: #E8EDF2; }
.leaflet-popup-content-wrapper { border-radius: 0; }
.leaflet-popup-content { margin: 12px 16px; }
.leaflet-popup-content b { color: var(--accent); font-weight: 700; }
.leaflet-popup-content .lp-role {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary_hover);
  margin-bottom: 2px;
}

/* Branded numbered map pin */
.fco-pin {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  background-color: var(--primary);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(8,24,44,.35);
}
.fco-pin span { transform: rotate(45deg); }
.fco-pin.is-active { background-color: var(--accent); color: #fff; }

/* ---------- Projects: category filter chips + description ---------- */
.proj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 42px;
}
.proj-chip {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  background-color: #fff;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.proj-chip:hover { border-color: var(--accent); }
.proj-chip.is-active { background-color: var(--accent); color: #fff; border-color: var(--accent); }
.proj-chip .chip-count { opacity: 0.55; margin-left: 6px; font-weight: 500; }
.proj-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 12px 0 0;
}
.proj-card .proj-meta { margin-top: auto; padding-top: 16px; }
.proj-card.is-hidden { display: none; }
.proj-empty { text-align: center; color: var(--text_muted); padding: 48px 0 8px; }

/* ---------- Project card: authority + contract specs ---------- */
.proj-authority {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text_muted);
  margin: 0 0 10px;
}
.proj-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.proj-spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 13px;
  background-color: var(--background_light);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
.proj-spec b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary_hover);
}

/* ==========================================================================
   PROJECTS — simple list view + dropdown filters
   ========================================================================== */
.proj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.proj-selects { display: flex; gap: 16px; flex-wrap: wrap; }
.proj-select { display: flex; flex-direction: column; gap: 7px; }
.proj-select > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text_muted);
}
.proj-select select {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230E2D4C' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 46px 13px 16px;
  min-width: 230px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.proj-select select:hover { border-color: #C9D2DE; }
/* No `outline: none` — it beat the site's focus ring and left the projects filter
   with no keyboard focus indicator at all. */
.proj-select select:focus { border-color: var(--primary); }
.proj-count { font-size: 15px; color: var(--text_muted); align-self: flex-end; padding-bottom: 13px; }
.proj-count b { color: var(--accent); font-weight: 700; }

.proj-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.proj-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 22px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease;
}
.proj-row.is-hidden { display: none; }
.proj-row:hover { background-color: var(--background_light); }
.proj-row-media { width: 132px; height: 84px; overflow: hidden; background-color: var(--ink); }
.proj-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.proj-row:hover .proj-row-media img { transform: scale(1.05); }
.proj-row-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary_hover);
  margin-bottom: 7px;
}
.proj-row-title { font-size: 23px; line-height: 1.08; margin: 0 0 7px; color: var(--accent); }
.proj-row-sub { font-size: 14px; color: var(--text_muted); }
.proj-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  min-width: 210px;
}
.proj-row-specs { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.proj-status {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 13px;
  white-space: nowrap;
}
.proj-status--ongoing { background-color: var(--primary); color: var(--ink); }
.proj-status--completed { background-color: #E3E7ED; color: var(--secondary); }

@media (max-width: 820px) {
  .proj-row { grid-template-columns: 92px 1fr; gap: 18px; }
  .proj-row-media { width: 92px; height: 66px; }
  .proj-row-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    min-width: 0;
    padding-left: 110px;
  }
}
@media (max-width: 520px) {
  .proj-select select { min-width: 0; width: 100%; }
  .proj-select { flex: 1; }
  .proj-row-meta { padding-left: 0; }
}

/* ==========================================================================
   PROJECTS ARCHIVE — Adeco project-style-1 grid + horizontal filter
   (matches the fco1.local reference: overlaid-title image cards)
   ========================================================================== */
.navigation-projects-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 30px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.navigation-projects-filter a {
  position: relative;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: var(--text_muted);
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.navigation-projects-filter a:hover { color: var(--accent); }
.navigation-projects-filter a.active { color: var(--accent); }
.navigation-projects-filter a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.navigation-projects-filter a.active::after,
.navigation-projects-filter a:hover::after { width: 100%; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.projects-grid .grid-item.is-hidden { display: none; }
/* grid cards use a square aspect ratio instead of the slider's tall thumbnail */
.projects-grid .project-post-thumbnail { padding-top: 100%; }
/* subtle status flag (only shown for ongoing work) */
.projects-grid .proj-flag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 4;
  background-color: var(--primary);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px 6px;
}
.projects-empty { text-align: center; color: var(--text_muted); padding: 48px 0 8px; }
@media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .projects-grid { grid-template-columns: 1fr; } }

/* projects archive — dropdown toolbar (reuses .proj-select / .proj-count) */
.projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(34px, 4vw, 52px);
}

/* ==========================================================================
   RESPONSIVE / PRODUCTION POLISH
   ========================================================================== */

/* mobile menu: dismiss button + nicer drawer */
.mobile-menu-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  background: var(--background_light);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mobile-menu-close:hover { background: var(--primary); color: var(--ink); }
.mobile-menu { padding-top: 90px; }
.mobile-menu .menu li a:hover { color: var(--primary); }

/* about: keep the floating image inside the viewport on small screens */
@media (max-width: 767px) {
  .about { overflow-x: clip; }
  .about-img { right: auto; left: 15px; max-width: min(320px, 78vw); }
}

/* steps: full-viewport panels are excessive on phones */
@media (max-width: 767px) {
  .step-panel { min-height: 72vh; padding-top: 40px; padding-bottom: 40px; }
  .steps-right { padding: 70px 15px; }
}

/* hero: keep CTA and captions comfortable on small screens */
@media (max-width: 480px) {
  .hero { padding-top: 170px; }
  .hero-caps { gap: 18px; }
  .hero-cap { min-width: calc(50% - 9px); }
  .hero-nav-btn { width: 46px; height: 46px; }
}

/* page hero: tighter on phones */
@media (max-width: 600px) {
  .page-hero-inner { padding-top: 165px; padding-bottom: 54px; }
}

/* stats: 2-up on tablets instead of jumping 4 -> 1 */
@media (max-width: 1024px) and (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-media { display: none; }
  .stat-card { min-height: 300px; }
}

/* project card grid: keep title readable on small cards */
@media (max-width: 640px) {
  .projects-grid .project-post-thumbnail { padding-top: 100%; }
  .project-title { font-size: 24px; margin: 16px; }
}

/* contact: form fields comfortable on phones */
@media (max-width: 560px) {
  .cform { padding: 22px 18px; }
  .office-mapframe { min-height: 300px; }
}

/* footer: bottom row stacks on phones */
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* larger tap targets for the archive dropdown on touch */
@media (max-width: 560px) {
  .projects-toolbar { align-items: stretch; }
  .proj-count { align-self: flex-start; padding-bottom: 0; }
}


/* ---------- Who we are — photo masked into the F.CO. logo mark ---------- */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.about-inner .about-content { width: auto; }
.about-visual { display: flex; justify-content: center; position: relative; }
.about-logomask {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(8, 24, 44, 0.22));
}
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-visual { order: -1; }
  .about-logomask { max-width: 340px; }
}


/* ---------- Scroll-driven logo reveal (who-we-are): gold square grows, photo zooms in ---------- */
.logo-reveal {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  --p: 0;
  filter: drop-shadow(0 30px 60px rgba(8, 24, 44, 0.22));
}
.lr-logo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.lr-gold {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: calc(32% + var(--p) * 82%);
  height: calc(32% + var(--p) * 82%);
  background: var(--primary);
  opacity: clamp(0, calc(1 - var(--p) * 2), 1);
}
.lr-full {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  clip-path: inset(calc((1 - var(--p)) * 34%));
  -webkit-clip-path: inset(calc((1 - var(--p)) * 34%));
  opacity: clamp(0, calc(var(--p) * 3 - 0.35), 1);
}
.lr-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.2 - var(--p) * 0.2));
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .logo-reveal { --p: 1; }
  .lr-gold { display: none; }
}


/* ==========================================================================
   Legal pages (Privacy / Terms) — readable long-form prose
   ========================================================================== */
.legal-body { max-width: 820px; }
.legal-body .legal-updated {
  display: inline-block;
  font-size: 14px;
  color: var(--text_muted);
  margin-bottom: 8px;
}
.legal-body h2 {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  margin: 44px 0 14px;
  letter-spacing: -0.01em;
}
.legal-body h2:first-of-type { margin-top: 8px; }
.legal-body h3 {
  font-size: 18px;
  margin: 28px 0 10px;
}
.legal-body p { margin: 0 0 16px; color: var(--text); line-height: 1.7; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; line-height: 1.7; color: var(--text); }
/* Gold (--primary) on white measures 1.71:1 — effectively invisible to anyone with
   low vision, and these links include the ONLY route to exercising data rights
   (the mailto in the privacy policy). Gold works on the dark sections, not here.
   Navy is 14.02:1 and stays on-brand; the underline was already carrying the
   "this is a link" signal, so nothing else changes. */
.legal-body a { color: var(--navy, #0E2D4C); text-decoration: underline; }
.legal-body a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.legal-body strong { color: var(--ink); }
.legal-toc {
  margin: 0 0 40px;
  padding: 22px 26px;
  background: var(--background_light);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
}
.legal-toc h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 6px; }
.legal-toc a { color: var(--ink); text-decoration: none; }
.legal-toc a:hover { color: var(--primary); text-decoration: underline; }


/* ==========================================================================
   Accessibility — skip link + visible keyboard focus
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
/* consistent, visible focus ring for keyboard users across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   COMPANY PROFILE FLIPBOOK
   48 single pages rendered from the profile PDF. Desktop shows the designed
   two-page spreads; under 900px one page at a time.
   ========================================================================== */
.flipbook-section { background-color: var(--ink); }
.flipbook-section .section-head { text-align: center; }
.flipbook-section .box-subtitle { margin-bottom: 22px; }
.flipbook-section .section-title { color: #fff; }
.flipbook-lede {
  color: var(--text_light);
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}
/* standalone profile page: give the book the room it needs */
.flipbook-page { padding-block: clamp(34px, 3.5vw, 60px); }

/* Sized by height as well as width so a full spread always fits on screen. */
.flipbook {
  --book-h: min(78vh, 44vw);
  /* svh ignores mobile toolbar collapse, so the book does not resize mid-scroll */
  --book-h: min(78svh, 44vw);
  margin-inline: auto;
  width: min(96vw, calc(var(--book-h) * 2.828));
}
.flipbook:focus-visible { outline: 3px solid var(--primary); outline-offset: 10px; }

.flipbook-stage {
  position: relative;
  perspective: 2200px;
  perspective-origin: 50% 45%;
  aspect-ratio: 2.828 / 1;
  /* Both halves are pinned to the spine, so a lone cover would sit off to one
     side. Slide the whole book to centre it instead — that keeps the leaves and
     the turning sheet on the same grid, and the slide animates as it opens. */
  transition: transform 900ms cubic-bezier(0.55, 0.05, 0.25, 1);
}
.flipbook-stage[data-single="front"] { transform: translateX(-25%); }
.flipbook-stage[data-single="back"] { transform: translateX(25%); }

/* paper stack: thin sheet edges peeking out either side of the block */
.flipbook-stage::before,
.flipbook-stage::after {
  content: "";
  position: absolute;
  top: 1.2%;
  bottom: 1.2%;
  width: 9px;
  border-radius: 2px;
  background: repeating-linear-gradient(to right,
    rgba(255, 255, 255, 0.7) 0 1px,
    rgba(0, 0, 0, 0.12) 1px 2px);
  z-index: 0;
  pointer-events: none;
}
.flipbook-stage::before { left: -9px; box-shadow: -3px 6px 14px rgba(0, 0, 0, 0.4); }
.flipbook-stage::after { right: -9px; box-shadow: 3px 6px 14px rgba(0, 0, 0, 0.4); }
.flipbook-stage:not([data-single="0"])::before,
.flipbook-stage:not([data-single="0"])::after { display: none; }

.flipbook-leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
.flipbook-leaf--left { left: 0; }
.flipbook-leaf--right { left: 50%; }
.flipbook-leaf img { display: block; width: 100%; height: 100%; object-fit: contain; }
.flipbook-leaf[hidden] { display: none; }

/* gutter shading so the pair reads as one bound book */
.flipbook-leaf--left::after,
.flipbook-leaf--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  pointer-events: none;
}
.flipbook-leaf--left::after {
  right: 0;
  background: linear-gradient(to right, transparent, rgba(8, 24, 44, 0.03) 55%, rgba(8, 24, 44, 0.22));
}
.flipbook-leaf--right::after {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(8, 24, 44, 0.03) 55%, rgba(8, 24, 44, 0.22));
}
.flipbook-stage:not([data-single="0"]) .flipbook-leaf::after { display: none; }

/* ---------- the turning sheet ---------- */
.flipbook-flip {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 5;
  transition: transform 900ms cubic-bezier(0.55, 0.05, 0.25, 1);
}
.flipbook-flip[hidden] { display: none; }
.flipbook-flip--fwd { left: 50%; transform-origin: left center; }
.flipbook-flip--back { left: 0; transform-origin: right center; }
.flipbook-flip--fwd.is-turning { transform: rotateY(-180deg); }
.flipbook-flip--back.is-turning { transform: rotateY(180deg); }

.flipbook-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}
.flipbook-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.flipbook-face--back { transform: rotateY(180deg); }

/* Paper lighting: a sheen sweeping across the sheet as it rotates, so the page
   reads as a physical surface catching light rather than a flat plane. */
.flipbook-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.55, 0.05, 0.25, 1);
}
.flipbook-flip--fwd .flipbook-face--front::after,
.flipbook-flip--back .flipbook-face--back::after {
  background: linear-gradient(to left, rgba(8, 24, 44, 0.32), rgba(8, 24, 44, 0.05) 42%, transparent 70%);
  opacity: 0;
}
.flipbook-flip--fwd .flipbook-face--back::after,
.flipbook-flip--back .flipbook-face--front::after {
  background: linear-gradient(to right, rgba(8, 24, 44, 0.34), rgba(8, 24, 44, 0.06) 45%, transparent 72%);
  opacity: 1;
}
.flipbook-flip--fwd.is-turning .flipbook-face--front::after,
.flipbook-flip--back.is-turning .flipbook-face--back::after { opacity: 1; }
.flipbook-flip--fwd.is-turning .flipbook-face--back::after,
.flipbook-flip--back.is-turning .flipbook-face--front::after { opacity: 0; }

/* Soft shadow the turning sheet casts onto the page beneath it */
.flipbook-shadow {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 60%, transparent);
}
.flipbook-shadow[hidden] { display: none; }
.flipbook-shadow--fwd { left: 50%; }
.flipbook-shadow--back { left: 0; transform: scaleX(-1); }
.flipbook-shadow.is-turning { animation: fb-sweep 900ms cubic-bezier(0.55, 0.05, 0.25, 1) both; }
@keyframes fb-sweep {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- controls ---------- */
.flipbook-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}
.flipbook-btn {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 190, 97, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.flipbook-btn:hover:not(:disabled) {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--ink);
}
.flipbook-btn:disabled { opacity: 0.3; cursor: default; }

.flipbook-count {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.04em;
  min-width: 116px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.flipbook-count b { color: var(--primary); font-weight: 600; }

.flipbook-range {
  -webkit-appearance: none;
  appearance: none;
  width: min(320px, 34vw);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.flipbook-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.flipbook-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.flipbook-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Fullscreen */
.flipbook-section:fullscreen {
  padding-block: 24px;
  display: grid;
  align-content: center;
}
.flipbook-section:fullscreen .flipbook { --book-h: min(82vh, 46vw); --book-h: min(82svh, 46vw); }
.flipbook-section:fullscreen .flipbook-actions { display: none; }

/* One page at a time on phones — a two-page spread is unreadable at this width */
@media (max-width: 900px) {
  .flipbook { --book-h: min(62vh, 130vw); --book-h: min(62svh, 130vw); width: min(94vw, calc(var(--book-h) * 1.414)); }
  .flipbook-stage { aspect-ratio: 1.414 / 1; }
  .flipbook-stage::before, .flipbook-stage::after { display: none; }
  /* one page fills the stage, so there is no spine to centre against */
  .flipbook-stage[data-single] { transform: none; transition: none; }
  .flipbook-leaf { width: 100%; }
  .flipbook-leaf--right { left: 0; }
  .flipbook-leaf::after { display: none; }
  .flipbook-flip, .flipbook-shadow { width: 100%; left: 0; }
  /* The bar is [prev][count][range][next] in a row. At <=389px the fixed 52px
     buttons + the 116px count + the range + three 18px gaps exceed the container
     and the Next button — the one you need most — gets clipped off the edge.
     Let the row wrap and let the range take the second line. */
  .flipbook-bar { gap: 10px; flex-wrap: wrap; }
  .flipbook-range { width: 34vw; }
  .flipbook-count { min-width: 0; }
}
@media (max-width: 420px) {
  .flipbook-bar { gap: 8px 12px; }
  .flipbook-count { order: -1; flex: 1 0 100%; }   /* count on its own line */
  .flipbook-range { flex: 1 1 auto; width: auto; min-width: 90px; }
  .flipbook-btn { width: 48px; height: 48px; flex: none; }   /* still a 44+ target */
}

@media (prefers-reduced-motion: reduce) {
  .flipbook-flip, .flipbook-face::after { transition: none; }
  .flipbook-shadow.is-turning { animation: none; }
}

/* ==========================================================================
   PROJECT DETAIL PAGES (generated by server/build-site.js)
   One page per project. These surface the fields the site previously stored
   but never rendered: client, location, year, authority, value, duration and
   the full details text. `pd-` prefix because `.proj-spec` is already taken by
   the chip component above.
   ========================================================================== */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.pd-main .box-subtitle { margin-bottom: 14px; }
.pd-main .lede { margin-bottom: 22px; }

.pd-body { color: var(--text_muted); line-height: 1.75; }
.pd-body p { margin: 0 0 16px; }
.pd-body p:last-child { margin-bottom: 0; }

/* spec sheet */
.pd-spec {
  margin: 0 0 24px;
  border-top: 1px solid var(--border);
}
.pd-spec-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pd-spec dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text_muted);
  padding-top: 2px;
}
.pd-spec dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pd-cta { width: 100%; justify-content: center; }

/* gallery — the 2nd image onward; the 1st is the hero background */
.pd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.pd-gallery-item { margin: 0; }
.pd-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* prev / next */
.pd-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.pd-nav-link {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  max-width: 45%;
  transition: color 0.25s;
}
.pd-nav-link:hover { color: var(--primary); }
.pd-nav-link--next { text-align: right; margin-left: auto; }

.page-hero--short .crumbs a { color: inherit; text-decoration: none; opacity: 0.85; }
.page-hero--short .crumbs a:hover { color: var(--primary); opacity: 1; }

@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; }
  .pd-side { order: -1; }        /* facts first on a phone */
  .pd-nav { flex-direction: column; }
  .pd-nav-link, .pd-nav-link--next { max-width: none; text-align: left; margin-left: 0; }
}

.projects-slider-wrap { position: relative; }

/* ==========================================================================
   PROJECT CATEGORIES (generated by server/build-site.js)
   Each category is a real page at /projects/category/<slug>.html. These chips
   are the links to them — from the grid, and from every other category page.
   ========================================================================== */
.cat-nav {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 34px;
}
.cat-nav-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text_muted);
  flex: none;
}
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.cat-chip:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.cat-chip:hover .cat-chip-n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cat-chip-n {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--background_light);
  color: var(--text_muted);
  transition: background-color 0.25s, color 0.25s;
}
.cat-chip--all { border-style: dashed; }

/* the category nav on a category page sits on the dark-free body, same as the grid */
.cat-nav + .projects-grid { margin-top: 0; }

/* ---------- "More in <category>" on a project detail page ---------- */
.pd-related {
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border);
}
.pd-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.pd-related-title {
  margin: 0;
  font-size: clamp(24px, 2.2vmax, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.pd-related-all {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.pd-related-all:hover { color: var(--primary); }

@media (max-width: 720px) {
  .cat-nav { flex-direction: column; gap: 10px; }
}