/*
Theme Name: ST Partnership Theme
Theme URI: https://stpartnership.co/
Author: ST Partnership
Author URI: https://stpartnership.co/
Description: Custom theme for ST Partnership executive search firm. Design system v2: brand turquoise accent (#11FBE0), Outfit typography, video hero, centred section headers, differentiated section layouts. Polished 2.0.4.4: self-hosted Outfit, colour photography, full-width fluid shell, compressed hero video, real poster, performance and mobile-menu fixes.
Version: 2.0.4.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: st-partnership-theme
Tags: custom-theme, video-hero, executive-search, responsive

Design Tokens:
- Accent (brand turquoise): #11FBE0
- Accent (same-hue text on light): #087D70 / #0B9D8C
- Ink (near-black):     #0E1113
- Paper:                #FFFFFF / #F5F7F6
- Dark band:            #0E1113
- Sans:                 Outfit
- Emphasis:             Outfit semibold in brand teal (same family)
*/

/* Outfit variable, self-hosted (SIL Open Font License 1.1). These are the
   same two subsets Google Fonts served, so the design no longer depends on
   an external font request. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* ============================================
   Design Tokens
   ============================================ */

:root {
  /* Brand turquoise family, matched to Logo_Rectangle.png (#11FBE0) */
  --accent-bright: #11FBE0;
  --accent-bright-hover: #0ED9C0;
  --accent: #087D70;
  --accent-mid: #0B9D8C;
  --accent-dark: #066458;
  --accent-soft: #E3F7F2;
  --accent-on-dark: #11FBE0;

  --ink: #0E1113;
  --ink-soft: #4A545B;
  --muted: #7C868E;

  --paper: #FFFFFF;
  --surface: #F5F7F6;

  --border: #E4E9E8;

  --dark: #0E1113;
  --dark-soft: #161B1E;

  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-card: 14px;
  --radius-btn: 10px;

  --shadow-card: 0 1px 2px rgba(14, 17, 19, 0.05);
  --shadow-lift: 0 16px 32px rgba(14, 17, 19, 0.1);

  --container: 1200px;
}

/* ============================================
   Reset & Base
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

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

/* Accessible focus */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* Anchor offset for fixed header */
[id] { scroll-margin-top: 86px; }

/* Emphasis: same-family (Outfit) semibold in brand teal - no serif italic */
.accent-serif {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.accent-serif--accent { color: var(--accent); }
.accent-serif--light { color: var(--accent-on-dark); }

/* Simple accent mark */
.accent { color: var(--accent); font-weight: 500; }

/* Decorative geometric glyph used in feature/stat slots (fills via currentColor) */
.glyph { width: 46px; height: 46px; }

/* ============================================
   Layout Container
   ============================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 5.5rem 0; }
.section-alt { background-color: var(--surface); }
.section-dark { background-color: var(--dark); color: #EAF0F1; }

/* ============================================
   Section Headers
   ============================================ */

.section-header {
  text-align: center;
  margin: 0 auto 2.75rem;
  max-width: 720px;
}

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

.section-title {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  text-transform: none;
  margin-bottom: 0.75rem;
}

.section-dark .section-title { color: var(--white, #fff); }

.section-subtitle {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 0;
}

.section-dark .section-subtitle { color: #AAB5B9; }

/* ============================================
   Grids
   ============================================ */

.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ============================================
   Cards
   ============================================ */

.card {
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 155, 140, 0.45);
  box-shadow: var(--shadow-lift);
}

.card-image { width: 100%; height: 220px; object-fit: cover; }

.card-image-link { display: block; overflow: hidden; }

.card-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }

.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent); }

.card-text {
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 0.98rem;
}

.card-text p { margin-bottom: 0.75rem; }
.card-text p:last-child { margin-bottom: 0; }

.entry-footer { margin-top: auto; padding-top: 1.25rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background-color: var(--accent-bright);
  color: var(--ink);
  border-color: var(--accent-bright);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-bright-hover);
  border-color: var(--accent-bright-hover);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(17, 251, 224, 0.25);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

.btn-white {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-white:hover,
.btn-white:focus {
  background-color: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
}

/* Tertiary text link with arrow (reduces button-wall noise) */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  font-weight: 600;
}

.btn-link::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.btn-link:hover { color: var(--accent-dark); transform: none; }
.btn-link:hover::after { transform: translateX(3px); }

/* ============================================
   Header
   ============================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(14, 17, 19, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.9rem 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background-color: var(--dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.header-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
}

.site-logo img { height: 44px; width: auto; }

.site-logo-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1;
}

.site-logo-text .logo-st { color: #FFFFFF; }
.site-logo-text .logo-partnership { color: var(--accent-on-dark); }

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 1.9rem;
  align-items: center;
}

.main-navigation a {
  color: #D6DDDE;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus { color: var(--accent-on-dark); }

.main-navigation .current-menu-item > a,
.main-navigation [aria-current="page"] { color: #FFFFFF; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #FFFFFF;
  margin: 5px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.menu-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .site-header { padding: 0.7rem 0; }
  .menu-toggle { display: block; z-index: 1001; position: relative; }

  .main-navigation {
    position: fixed;
    top: 79px;
    left: 0;
    width: 100%;
    background-color: rgba(14, 17, 19, 0.98);
    display: none;
    z-index: 999;
    max-height: calc(100vh - 79px);
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  .main-navigation.active { display: block; animation: slideDown 0.3s ease-out; }

  .main-navigation ul { flex-direction: column; padding: 1rem 0; gap: 0; }

  .main-navigation li { text-align: center; padding: 0.9rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .main-navigation li:last-child { border-bottom: none; }
  .main-navigation a { font-size: 1rem; padding: 0.5rem 1rem; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Hero
   ============================================ */

.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 0 5rem;
}

.hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(14, 17, 19, 0.55) 0%, rgba(14, 17, 19, 0.4) 50%, rgba(14, 17, 19, 0.65) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #FFFFFF;
  max-width: 880px;
  padding: 0 24px;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  color: var(--accent-bright);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #FFFFFF;
  text-transform: none;
  margin-bottom: 1.25rem;
  animation: fadeInUp 0.9s ease-out both;
}

.hero-subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 48ch;
  margin: 0 auto 2.25rem;
  animation: fadeInUp 0.9s ease-out 0.15s both;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.9s ease-out 0.3s both;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.hero-btn:hover { transform: translateY(-2px); }

.hero-btn-primary { background-color: var(--accent-bright); color: var(--ink); border-color: var(--accent-bright); }
.hero-btn-primary:hover,
.hero-btn-primary:focus { background-color: var(--accent-bright-hover); color: var(--ink); border-color: var(--accent-bright-hover); }

.hero-btn-secondary { background-color: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75); }
.hero-btn-secondary:hover,
.hero-btn-secondary:focus { background-color: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero-section { padding: 6.5rem 0 4rem; }

  .hero-title { font-size: clamp(2.1rem, 9vw, 2.9rem); }

  .hero-subtitle { font-size: 1.0625rem; padding: 0 4px; }

  .hero-cta { flex-direction: column; align-items: center; gap: 0.85rem; }

  .hero-btn { width: 100%; max-width: 320px; }
}

/* ============================================
   About Section
   ============================================ */

.about-section { padding: 5.5rem 0; background-color: var(--surface); }

.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }

.about-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.about-text p { color: var(--ink-soft); line-height: 1.7; }

.about-featured-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(14, 17, 19, 0.14);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--border);
  padding-top: 2.25rem;
}

.stat { text-align: left; }

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-mid);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

/* ============================================
   Services Section (HOME PAGE ONLY - scoped so it never
   clashes with the dedicated Our Services page template,
   which reuses .services-grid / .service-card / .service-icon)
   ============================================ */

.services-section { padding: 5.5rem 0; background-color: var(--paper); }

.home .services-content,
.front-page .services-content { display: flex; align-items: stretch; gap: 3.5rem; margin-top: 1rem; }

.home .services-image,
.front-page .services-image {
  position: relative;
  flex: 0 0 45%;
  max-width: 45%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(14, 17, 19, 0.14);
}

.home .services-image img,
.front-page .services-image img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

.home .services-image-overlay,
.front-page .services-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(14, 17, 19, 0.82));
  padding: 3rem 1.75rem 1.5rem;
}

.home .services-image-overlay p,
.front-page .services-image-overlay p {
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
}

.home .services-grid,
.front-page .services-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.home .service-card,
.front-page .service-card {
  text-align: left;
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home .service-card:hover,
.front-page .service-card:hover { transform: translateY(-4px); border-color: rgba(11, 155, 140, 0.45); box-shadow: var(--shadow-lift); }

.home .service-icon,
.front-page .service-icon {
  width: 76px;
  height: 76px;
  margin: 0 0 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  border: none;
}

.home .service-icon img,
.front-page .service-icon img { width: 100%; height: 100%; object-fit: cover; }

.home .service-card .card-title,
.front-page .service-card .card-title { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* ============================================
   Jobs Section
   ============================================ */

.jobs-section { padding: 5.5rem 0; background-color: var(--surface); }

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.job-card-featured {
  border-top: 3px solid var(--accent-bright);
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(var(--paper), var(--paper)) border-box;
}

.job-featured-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.job-meta .job-meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.job-meta svg { width: 16px; height: 16px; fill: var(--accent); flex-shrink: 0; }

/* ============================================
   Team Section
   ============================================ */

.team-section { padding: 5.5rem 0; background-color: var(--paper); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.team-member { text-align: center; padding: 0 0 0.5rem; }

.team-member-image {
  width: 168px;
  height: 168px;
  margin: 1.75rem auto 1.5rem;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #2A3236 0%, var(--dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.team-member:hover .team-member-image {
  border-color: var(--accent-mid);
  box-shadow: 0 12px 28px rgba(11, 155, 140, 0.22);
}

.team-member-image img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   Blog / Insights Section
   ============================================ */

.blog-section { padding: 5.5rem 0; background-color: var(--surface); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

/* Featured (first) post spans the full row with a horizontal layout.
   Two columns keeps the remaining cards perfectly centered (no empty cell). */
.blog-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.25rem;
  align-items: center;
  padding: 1.25rem;
}

.blog-card-featured .card-image { height: 100%; min-height: 320px; border-radius: 10px; }

.blog-card-featured .card-content { padding: 1rem 1rem 1rem 0; }

/* Placeholder art for cards without a real image */
.card-image-placeholder {
  height: 220px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--accent-bright) 120%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-featured .card-image-placeholder {
  height: 100%;
  min-height: 320px;
  border-radius: 10px;
}

.entry-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.entry-summary { flex-grow: 1; }

/* ============================================
   Contact Section
   ============================================ */

.contact-section { padding: 5.5rem 0; background-color: var(--dark); color: #EAF0F1; }

.contact-section .section-title { color: #FFFFFF; }
.contact-section .section-subtitle { color: #AAB5B9; }

.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; margin-top: 1rem; }

.contact-info h3 {
  color: var(--accent-on-dark);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.contact-info h4 {
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contact-info p { color: #AAB5B9; line-height: 1.8; }

.contact-info a { color: var(--accent-on-dark); text-decoration: none; }
.contact-info a:hover { text-decoration: underline; color: #BFE6E8; }

.contact-item { margin-bottom: 1.75rem; }

.social-links { margin-top: 2rem; }

.social-links h4 {
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #B9C2C5;
  margin-right: 0.6rem;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.social-links a:hover {
  color: var(--dark);
  background-color: var(--accent-on-dark);
  border-color: var(--accent-on-dark);
  transform: translateY(-2px);
}

.social-links svg { width: 20px; height: 20px; }

/* Contact form */
.contact-form .form-group { margin-bottom: 1.25rem; }

.contact-form label {
  display: block;
  color: #D6DDDE;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid #2A3236;
  border-radius: 10px;
  background: #14191D;
  color: #EAF0F1;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #7E8A90; }

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(17, 251, 224, 0.25);
}

.contact-form textarea { resize: vertical; min-height: 140px; }

.contact-form .btn { width: 100%; }

.contact-form .form-success {
  background: var(--accent-bright);
  color: var(--ink);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* ============================================
   Footer
   ============================================ */

.site-footer { background-color: var(--dark); color: #AAB5B9; padding: 4rem 0 1.5rem; }

.footer-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-section h3 {
  color: var(--accent-on-dark);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

.footer-section p,
.footer-section a { color: #AAB5B9; line-height: 1.8; text-decoration: none; }

.footer-section a:hover { color: #EAF0F1; }

.footer-section .footer-location { color: var(--accent-on-dark); }
.footer-section .footer-location:hover { color: #EAF0F1; }

.footer-section ul { list-style: none; padding: 0; margin: 0; }

.footer-section li { margin-bottom: 0.5rem; }

.footer-bottom {
  border-top: 1px solid #23292D;
  padding-top: 1.5rem;
  text-align: center;
  color: #7E8A90;
  font-size: 0.9rem;
}

.footer-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
}

/* ============================================
   Single Job Listing
   ============================================ */

.job-single { min-height: 100vh; }

.job-header {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: 6rem 0 3.5rem;
  color: #FFFFFF;
}

.job-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}

.job-header .job-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: #AAB5B9; margin-bottom: 1.5rem; }

.job-content { padding: 4.5rem 0; background-color: var(--paper); }

.job-description { color: var(--ink-soft); line-height: 1.8; font-size: 1.0625rem; }

.job-description h1,
.job-description h2,
.job-description h3,
.job-description h4 { color: var(--ink); margin-top: 2rem; margin-bottom: 1rem; }

.job-description p { margin-bottom: 1.25rem; }
.job-description ul, .job-description ol { margin-bottom: 1.25rem; padding-left: 1.25rem; }
.job-description li { margin-bottom: 0.5rem; }

.job-apply { padding: 4.5rem 0; background-color: var(--surface); }

/* ============================================
   Utilities
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

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

.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--accent-bright);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100000;
}

.skip-link:focus { top: 12px; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 992px) {
  .home .services-content,
  .front-page .services-content { flex-direction: column; gap: 2.5rem; }
  .home .services-image,
  .front-page .services-image { flex: none; max-width: 100%; }
  .home .services-image img,
  .front-page .services-image img { min-height: 300px; }
}

@media (max-width: 768px) {
  .section { padding: 4rem 0; }
  .container { padding: 0 18px; }

  .about-content,
  .contact-content { grid-template-columns: 1fr; gap: 2.5rem; }

  .about-stats { grid-template-columns: 1fr; gap: 1.25rem; }

  .about-featured-image { height: 300px; }

  .home .services-grid,
  .front-page .services-grid { grid-template-columns: 1fr; }

  .jobs-grid,
  .team-grid,
  .blog-grid { grid-template-columns: 1fr; }

  .blog-card-featured { grid-template-columns: 1fr; padding: 0.75rem; gap: 1.25rem; }
  .blog-card-featured .card-image { min-height: 220px; border-radius: 8px; }
  .blog-card-featured .card-content { padding: 0.75rem; }

  .team-member-image { width: 150px; height: 150px; }

  .site-header { padding: 0.7rem 0; }
}

/* ============================================
   Reduced Motion
   ============================================ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  .hero-title,
  .hero-subtitle,
  .hero-cta { animation: none; }

  .card:hover,
  .service-card:hover,
  .btn:hover,
  .hero-btn:hover { transform: none; }
}

/* ============================================
   2.0.4.1 polish
   ============================================ */

/* Balanced headline rags and prettier paragraph rags where supported. */
h1,
h2,
h3,
h4,
.hero-title,
.section-title { text-wrap: balance; }

p,
.hero-subtitle,
.section-subtitle,
.about-text p { text-wrap: pretty; }

/* Keep the video hero legible on bright frames without darkening the film. */
.hero-title,
.hero-eyebrow,
.hero-subtitle { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28); }
/* Honest empty state for the jobs section and Jobs page (2.0.4.1). */
.jobs-empty {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-card);
}

.jobs-empty h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.jobs-empty p {
  max-width: 48ch;
  margin: 0 auto 1.6rem;
  color: var(--ink-soft);
}

.jobs-empty .btn { margin: 0; }
/* ============================================
   2.0.4.2: full-width fluid shell
   ============================================ */

:root {
  --container: 100%;
  --shell-gutter: clamp(18px, 2.8vw, 72px);
}

/* Every shell fills the browser and scales its side gutters with the viewport. */
.container,
.header-container,
.footer-container {
  width: 100%;
  max-width: none !important;
  margin-inline: auto;
  padding-left: var(--shell-gutter) !important;
  padding-right: var(--shell-gutter) !important;
}

/* Inline max-widths in the older inner-page markup must not re-narrow the page. */
.container[style*="max-width"] { max-width: none !important; }
main .container div[style*="max-width"],
main .container figure[style*="max-width"] { max-width: 100% !important; }

/* Local inner-page caps. */
.services-grid .container,
.services-grid-container,
.contact-page-content .container,
.jobs-listings .container,
.team-members .container,
.blog-archive-section .container {
  max-width: none !important;
}

/* Section heads grow with the page but keep a readable measure. */
.section-header { max-width: min(100%, 1120px); }
.section-title { font-size: clamp(1.9rem, 2.2vw + 1rem, 3.4rem); }
.section-subtitle { max-width: 62ch; }

/* The hero statement scales with the viewport while the video stays full-bleed. */
.hero-content { max-width: min(100%, 1200px); }
.hero-title { font-size: clamp(2.5rem, 6vw, 6.2rem); }
.hero-subtitle { max-width: 60ch; }

/* Vertical rhythm follows the viewport. */
.section { padding-block: clamp(4rem, 5.5vw, 8rem); }

/* Two-column bands breathe instead of collapsing into narrow columns. */
.about-content,
.contact-content { gap: clamp(2.5rem, 5vw, 7rem); }

/* About and services card grids reflow continuously. */
.about-clients .container > div,
.about-candidates .container > div,
.about-specialization .container > div,
.about-trust .container > div {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
}

.services-grid-container {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
}

/* Full-bleed media grows with the shell. */
.about-featured-image { height: clamp(320px, 28vw, 620px); }
.services-image img { min-height: clamp(300px, 28vw, 620px); }

/* Long-form reading stays comfortable inside the wide shell. */
.about-text p,
.card-text,
.contact-form,
.entry-content,
.job-description { max-width: 62ch; }

.entry-content { margin-inline: auto; }
/* Keep centred inner-page statements readable in the wider shell. */
.about-opener p,
.about-value-prop .container > p,
.about-value-prop .container > div p,
.about-result .container > p,
.about-cta p,
.services-cta p,
.jobs-cta p,
.team-cta p {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
}

.about-clients .container > p,
.about-candidates .container > p,
.about-specialization .container > p { max-width: 75ch; }
/* The About hero photograph scales instead of staying a fixed 600px tall. */
.about-hero { height: clamp(420px, 55vw, 700px) !important; }
/* Centre the narrower subtitle block inside its section header or hero band.
   Without the auto side margins the 62ch block sits at the left edge of the
   wider header, so its centred text looks off-centre. */
.section-header .section-subtitle,
.section-header > p,
.services-hero .section-subtitle,
.team-hero .section-subtitle,
.contact-hero .section-subtitle,
.jobs-hero .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}