/* ============================================================
   DELTARA — Corporate Website Stylesheet
   Design system v1.0 (2026) · editorial / print-rooted
   Navy 60 · Gold 25 · Neutral 15
   ============================================================ */

/* ─── Webfonts ──────────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  src: url('../../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ─── Tokens ────────────────────────────────────────────── */
:root {
  --deltara-gold:        #A07840;
  --deltara-navy:        #1B2B5A;
  --deltara-gold-light:  #C9A96E;
  --deltara-gold-pale:   #F5EFE4;
  --deltara-gray-light:  #F7F7F7;
  --deltara-gray-silver: #CCCCCC;
  --deltara-charcoal:    #444444;
  --deltara-white:       #FFFFFF;

  --deltara-navy-900: #0F1A3D;
  --deltara-navy-700: #1B2B5A;
  --deltara-navy-500: #3A4C82;
  --deltara-navy-300: #8A96B8;
  --deltara-navy-100: #E4E7F0;
  --deltara-gold-900: #6E5026;
  --deltara-gold-700: #8A6638;
  --deltara-gold-300: #C9A96E;
  --deltara-gold-100: #F5EFE4;

  --fg-1: var(--deltara-navy);
  --fg-2: var(--deltara-charcoal);
  --fg-3: #6B6B6B;
  --fg-accent: var(--deltara-gold);

  --bg-1: var(--deltara-white);
  --bg-2: var(--deltara-gray-light);
  --bg-3: var(--deltara-gold-pale);

  --border-1: var(--deltara-gray-silver);
  --border-2: #E5E5E5;

  --font-serif: "Playfair Display", "Times New Roman", Times, Georgia, serif;
  --font-sans:  "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  --shadow-1: 0 1px 2px rgba(27, 43, 90, 0.06);
  --shadow-2: 0 2px 6px rgba(27, 43, 90, 0.08), 0 1px 2px rgba(27,43,90,0.04);
  --shadow-3: 0 8px 24px rgba(27, 43, 90, 0.10), 0 2px 6px rgba(27,43,90,0.06);
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--deltara-navy); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }

/* ─── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, .display, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg-1);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: clamp(44px, 6vw, 76px); line-height: 1.08; }
h1 { font-size: clamp(36px, 4.2vw, 56px); }
h2 { font-size: clamp(28px, 3.2vw, 44px); }
h3 { font-size: clamp(20px, 1.8vw, 26px); }
p  { margin: 0 0 1em 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0 0 14px 0;
  display: inline-block;
}
.eyebrow-light { color: var(--deltara-gold-300); }

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--fg-1);
  max-width: 42em;
}

.body-lg { font-size: 18px; line-height: 1.75; color: var(--fg-2); }
.body { font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.caption { font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }

.max-prose { max-width: 680px; }

/* ─── Gold rule — signature divider ─────────────────────── */
.rule-gold { border: 0; height: 1px; background: var(--deltara-gold); width: 48px; margin: 0 0 28px 0; }
.rule-gold.center { margin-left: auto; margin-right: auto; }
.rule-gold.wide { width: 72px; }

/* ─── Layout ────────────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
@media (min-width: 768px) {
  .wrap, .wrap-narrow { padding: 0 64px; }
}

.section { padding: 96px 0; }
.section-lg { padding: 128px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}

.bg-cream { background: var(--bg-3); }
.bg-gray  { background: var(--bg-2); }
.bg-navy  { background: var(--deltara-navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy .serif { color: #fff; }
.bg-navy .eyebrow { color: var(--deltara-gold-300); }
.bg-navy p { color: rgba(255,255,255,0.78); }

.text-gold { color: var(--deltara-gold); }
.text-navy { color: var(--deltara-navy); }
.italic { font-style: italic; }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(160,120,64,0.35); }
.btn-gold { background: var(--deltara-gold); color: #fff; border-color: var(--deltara-gold); }
.btn-gold:hover { background: var(--deltara-gold-700); border-color: var(--deltara-gold-700); color: #fff; }
.btn-navy { background: var(--deltara-navy); color: #fff; border-color: var(--deltara-navy); }
.btn-navy:hover { background: var(--deltara-navy-900); color: #fff; }
.btn-ghost { background: transparent; color: var(--deltara-navy); border-color: var(--deltara-navy); }
.btn-ghost:hover { background: var(--deltara-navy); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-ghost-light:hover { background: #fff; color: var(--deltara-navy); border-color: #fff; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deltara-navy);
  padding: 4px 0;
  border-bottom: 1px solid var(--deltara-gold);
  transition: all var(--dur-base) var(--ease-out);
}
.btn-text:hover { color: var(--deltara-gold); border-bottom-width: 2px; padding-bottom: 3px; }
.bg-navy .btn-text, .btn-text.light { color: #fff; border-bottom-color: var(--deltara-gold); }
.bg-navy .btn-text:hover, .btn-text.light:hover { color: var(--deltara-gold-300); }

.btn .arrow { font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: 0; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ─── Header — light/cream, suits the original color logo ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(252, 250, 246, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(160, 120, 64, 0.18);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 rgba(27,43,90,0.06), 0 8px 16px -12px rgba(27,43,90,0.12);
}
.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
}
@media (min-width: 768px) {
  .site-header__inner { padding: 0 48px; }
}
@media (min-width: 1100px) {
  .site-header__inner { padding: 0 64px; }
}
@media (max-width: 720px) {
  .site-header__inner { height: 84px; padding: 0 18px; }
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.site-header__logo img {
  height: 82px;
  width: auto;
  background: transparent;
  filter: none;
  transition: filter var(--dur-base) var(--ease-out);
}
@media (max-width: 720px) {
  .site-header__logo img { height: 58px; }
}
.site-header__sub {
  display: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--deltara-gold-700);
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(160, 120, 64, 0.3);
  line-height: 1.2;
}
@media (min-width: 900px) {
  .site-header__sub { display: inline-block; }
}
.site-header__nav {
  display: none;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
}
.site-header__nav a {
  position: relative;
  color: var(--deltara-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--deltara-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header__nav a:hover, .site-header__nav a.active { color: var(--deltara-gold); }
.site-header__nav a:hover::after, .site-header__nav a.active::after { transform: scaleX(1); }

.site-header__cta {
  display: none;
  margin-left: 8px;
}
@media (min-width: 1024px) {
  .site-header__cta { display: inline-flex; }
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(27, 43, 90, 0.22);
  border-radius: 2px;
  color: var(--deltara-navy);
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}
.menu-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(380px, 90vw);
  background: var(--deltara-navy);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  padding: 32px;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu__close {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 8px;
  margin-bottom: 40px;
}
.mobile-menu__close svg { width: 26px; height: 26px; }
.mobile-menu a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
}
.mobile-menu a:hover { color: var(--deltara-gold-300); }
.mobile-menu__overlay {
  position: fixed; inset: 0;
  background: rgba(15,26,61,0.6);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-menu__overlay.open { opacity: 1; pointer-events: auto; }

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--deltara-navy);
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.04);
  will-change: transform;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(15,26,61,0.72) 0%, rgba(15,26,61,0.45) 45%, rgba(15,26,61,0.45) 100%),
    linear-gradient(to bottom, rgba(15,26,61,0.35) 0%, rgba(15,26,61,0.65) 70%, rgba(15,26,61,0.92) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bg { animation: heroDrift 18s var(--ease-out) both; }
}
@keyframes heroDrift {
  from { transform: scale(1.08) translateY(-1.5%); }
  to   { transform: scale(1.03) translateY(0); }
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 220px 32px 96px;
}
@media (min-width: 768px) {
  .hero__inner { padding: 240px 64px 120px; }
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--deltara-gold-300);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 28px;
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 48px; height: 1px;
  background: var(--deltara-gold);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 0 0 28px 0;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--deltara-gold-300); font-weight: 400; }
.hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 0 40px 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.hero__meta {
  position: absolute;
  left: 32px; right: 32px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .hero__meta { left: 64px; right: 64px; }
}
.hero__meta span { display: inline-flex; gap: 10px; align-items: center; }
.hero__meta i { font-style: normal; color: var(--deltara-gold-300); }

/* Hero variant: split (image left, type right) */
.hero-split { min-height: auto; background: #fff; color: var(--fg-1); display: block; }
.hero-split .hero__bg { display: none; }
.hero-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 88px;
  min-height: 92vh;
}
@media (min-width: 900px) {
  .hero-split__grid { grid-template-columns: 1.1fr 1fr; }
}
.hero-split__media { position: relative; min-height: 60vh; overflow: hidden; background: var(--deltara-navy-100); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-split__content { padding: 80px 32px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .hero-split__content { padding: 100px 64px; } }
.hero-split__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.08;
  color: var(--deltara-navy);
  margin: 0 0 28px 0;
  max-width: 14ch;
}
.hero-split__title em { font-style: italic; color: var(--deltara-gold); }
.hero-split__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 44ch;
  margin-bottom: 36px;
}

/* Hero variant: editorial (centered, serif-forward, cream backdrop) */
.hero-editorial {
  min-height: auto;
  background: var(--bg-3);
  color: var(--fg-1);
  padding: 200px 0 120px;
  display: block;
  text-align: center;
}
.hero-editorial .hero__bg { display: none; }
.hero-editorial__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 1.05;
  color: var(--deltara-navy);
  max-width: 16ch;
  margin: 32px auto 28px;
}
.hero-editorial__title em { font-style: italic; color: var(--deltara-gold); }
.hero-editorial__sub {
  font-size: 19px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 auto 40px;
}
.hero-editorial__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.hero-editorial__imagerow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 0 32px;
}
@media (min-width: 768px) { .hero-editorial__imagerow { padding: 0 64px; } }
.hero-editorial__imagerow img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: grayscale(0.2);
}

/* ─── Page head (inner pages) ─────────────────────────── */
.page-head {
  position: relative;
  background: var(--deltara-navy);
  color: #fff;
  padding: 220px 0 120px;
  overflow: hidden;
}
.page-head__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.5;
}
.page-head__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(27,43,90,0.55) 0%, rgba(15,26,61,0.85) 100%);
}
.page-head__inner {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px;
}
@media (min-width: 768px) { .page-head__inner { padding: 0 64px; } }
.page-head__eyebrow {
  color: var(--deltara-gold-300);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
}
.page-head__title {
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.08;
  color: #fff;
  max-width: 18ch;
  margin: 0 0 24px;
}
.page-head__title em { font-style: italic; color: var(--deltara-gold-300); }
.page-head__sub {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 54ch;
  margin: 0;
}

/* ─── Editorial card / grids ──────────────────────────── */
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.ed-card {
  background: #fff;
  border: 1px solid var(--border-1);
  padding: 40px 32px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ed-card:hover { border-color: var(--deltara-gold); transform: translateY(-2px); }
.ed-card .rule-gold { margin-bottom: 24px; }
.ed-card__num {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--deltara-gold);
  margin-bottom: 20px;
  font-style: italic;
}
.ed-card h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  margin-bottom: 16px;
  color: var(--deltara-navy);
}
.ed-card p { color: var(--fg-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; }

/* Pillar card (image-led) */
.pillar {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-base) var(--ease-out);
}
.pillar:hover { border-color: var(--deltara-gold); }
.pillar__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--deltara-navy-100);
}
.pillar__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pillar:hover .pillar__media img { transform: scale(1.04); }
.pillar__body { padding: 36px 32px 40px; flex: 1; display: flex; flex-direction: column; }
.pillar__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--deltara-gold);
  margin-bottom: 14px;
}
.pillar h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--deltara-navy);
  margin-bottom: 16px;
  line-height: 1.2;
}
.pillar p { color: var(--fg-2); font-size: 15.5px; line-height: 1.7; flex: 1; }
.pillar__cta { margin-top: 20px; }

/* Dark / feature card */
.feature-card {
  background: var(--bg-3);
  padding: 48px 40px;
  border-left: 1px solid var(--deltara-gold);
}
.feature-card h3 { font-size: 22px; color: var(--deltara-navy); margin-bottom: 14px; }
.feature-card p { font-size: 15.5px; color: var(--fg-2); line-height: 1.7; }

/* ─── Two-column editorial block ──────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 96px; }
  .split.reverse > *:first-child { order: 2; }
}
.split__media {
  position: relative;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.split__media::before {
  content: "";
  position: absolute;
  top: 24px; left: 24px; right: -24px; bottom: -24px;
  border: 1px solid var(--deltara-gold);
  z-index: -1;
}
@media (max-width: 900px) {
  .split__media::before { display: none; }
}

/* ─── Quote / pull ─────────────────────────────────────── */
.pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  color: var(--deltara-navy);
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}
.pull::before { content: "\201C"; display: block; font-size: 1.4em; color: var(--deltara-gold); line-height: 0.6; margin-bottom: 0.2em; }
.pull__attrib {
  display: block;
  margin-top: 28px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deltara-gold);
  font-weight: 600;
}

/* ─── Stats strip ─────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 48px 32px;
  border-bottom: 1px solid var(--border-1);
}
@media (min-width: 700px) {
  .stat { border-bottom: 0; border-right: 1px solid var(--border-1); }
  .stat:last-child { border-right: 0; }
}
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(42px, 4.5vw, 62px);
  color: var(--deltara-navy);
  line-height: 1;
  margin-bottom: 16px;
}
.stat__num em { font-style: italic; color: var(--deltara-gold); }
.stat__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

/* ─── Forms ──────────────────────────────────────────── */
.field { margin-bottom: 28px; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 2px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--deltara-gold);
  box-shadow: 0 0 0 3px rgba(160,120,64,0.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.alert {
  padding: 16px 20px;
  border: 1px solid var(--deltara-gold);
  background: var(--bg-3);
  color: var(--deltara-navy);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.alert-error {
  border-color: #b23a3a;
  background: #fdf4f4;
  color: #b23a3a;
}

/* ─── Footer — cream/light, suits the original color logo ─── */
.site-footer {
  background: var(--deltara-gold-100);
  color: var(--deltara-navy);
  padding: 96px 0 32px;
  position: relative;
  border-top: 1px solid rgba(160, 120, 64, 0.22);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--deltara-gold) 20%, var(--deltara-gold) 80%, transparent 100%);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(160, 120, 64, 0.25);
}
@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    align-items: start;
  }
}
.site-footer__brand {
  display: block;
}
.site-footer__brand img {
  display: block;
  height: 88px;
  width: auto;
  /* Negative top margin lifts the visible top tip of the gold mark up to
     align with the heading row in the next column (the PNG carries
     transparent padding above the triangle that would otherwise drop it). */
  margin-top: -24px;
  margin-bottom: 12px;
  background: transparent;
}
.site-footer__brand p {
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 36ch;
  margin-top: 0;
  margin-bottom: 0;
}
.site-footer__brand p + p { margin-top: 14px; }
.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--deltara-gold-700);
  font-size: 15px;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deltara-gold-700);
  margin-top: 0;       /* override browser default so heading sits flush at the column top */
  margin-bottom: 20px;
  font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 12px; color: var(--fg-2); }
.site-footer a {
  color: var(--deltara-navy);
  font-size: 14.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--deltara-gold); }
.site-footer__contact li {
  display: flex; align-items: flex-start; gap: 14px;
  color: var(--fg-2); font-size: 14.5px; line-height: 1.6;
}
.site-footer__contact i { color: var(--deltara-gold); font-style: normal; font-size: 14px; margin-top: 2px; }
.site-footer__bottom {
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(27, 43, 90, 0.6);
  letter-spacing: 0.08em;
}
@media (min-width: 700px) {
  .site-footer__bottom { flex-direction: row; }
}
.site-footer__bottom a { font-size: 12px; color: rgba(27, 43, 90, 0.65); margin-left: 24px; }
.site-footer__legal {
  display: block;
  color: rgba(27, 43, 90, 0.6);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ─── Utility animations (restrained) ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* ─── Inline-hover underlines ────────────────────────── */
.ulink {
  position: relative;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-1);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ulink:hover { color: var(--deltara-gold); border-bottom-color: var(--deltara-gold); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--deltara-gold);
  outline-offset: 3px;
}

/* Serif display helpers */
.serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* Text accent */
.swash { color: var(--deltara-gold); font-style: italic; }

/* Editorial <em> — italic gold accent in any section heading or pull quote.
   Removes the need for class="italic" / class="swash" so the admin editor's
   sanitiser (which strips attributes) can never accidentally remove the
   gold styling from a saved snippet. */
section h2 em,
section h3 em,
.pull em {
  font-style: italic;
  color: var(--deltara-gold);
}
.bg-navy h2 em,
.bg-navy h3 em {
  color: var(--deltara-gold-300);
}

/* ─── Skip-link (accessibility) ──────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: var(--deltara-navy);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--deltara-gold);
  text-decoration: none;
}

/* ─── Standards row (under split on home) ─────────────────── */
.standards-grid {
  margin-top: 56px;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .standards-grid { grid-template-columns: repeat(3, 1fr); }
}
.standards-grid .feature-card {
  padding: 28px 24px;
}
.standards-grid .feature-card h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--deltara-navy);
}
.standards-grid .feature-card p {
  font-size: 14.5px;
  line-height: 1.6;
}
/* Slightly tighter split when cards follow below */
.split--compact { align-items: start; }

/* ─── Industrial: vertical tags & principal standards list ───── */
.vertical-tags {
  font-size: 11.5px;
  color: var(--deltara-gold-700);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 14px;
}

.standards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-1);
}
.standards-list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-1);
  font-size: 15.5px;
  color: var(--fg-2);
  line-height: 1.55;
}
.standards-list__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--deltara-gold);
  flex-shrink: 0;
  width: 36px;
  letter-spacing: 0.04em;
}

/* ─── Mobile / phone responsive refinements ───────────────── */
@media (max-width: 720px) {
  /* Edge padding tighter on phones */
  .wrap { padding: 0 20px; }

  /* Hero — tighter top padding so content fits in viewport */
  .hero { min-height: 88vh; }
  .hero__inner { padding: 140px 20px 72px; }
  .hero__title { font-size: clamp(32px, 9vw, 44px); max-width: 22ch; }
  .hero__sub { font-size: 15.5px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.18em; gap: 12px; margin-bottom: 20px; }
  .hero__eyebrow::before { width: 28px; }
  .hero__meta { left: 20px; right: 20px; bottom: 18px; font-size: 10px; }
  .hero__meta span:last-child { display: none; }
  .hero__actions { gap: 12px; }

  /* Page head — tighter on phones */
  .page-head { padding: 140px 0 72px; }
  .page-head__inner { padding: 0 20px; }
  .page-head__title { font-size: clamp(30px, 8vw, 42px); max-width: 22ch; }
  .page-head__sub { font-size: 15.5px; }
  .page-head__eyebrow { font-size: 10px; letter-spacing: 0.18em; }

  /* Sections — tighter on phones */
  .section { padding: 56px 0; }
  .section-sm { padding: 48px 0; }

  /* Headings on phones */
  h2 { font-size: clamp(26px, 6.5vw, 36px) !important; }
  h3 { font-size: 19px; }
  .body-lg { font-size: 15.5px; }

  /* Pull quote — gentler size on phones */
  .pull { font-size: clamp(18px, 4.6vw, 22px); max-width: 100%; }

  /* Split (text + image) — image first on mobile, then text */
  .split { gap: 36px; }
  .split__media img { aspect-ratio: 4/3; }

  /* Stats — single column with tighter spacing */
  .stat { padding: 22px 0; }
  .stat__num { font-size: 36px; }

  /* Cards — tighter padding */
  .ed-card { padding: 28px 22px; }
  .ed-card h3 { font-size: 19px; }
  .feature-card { padding: 22px 20px; }

  /* Standards grid — stacks naturally; tighten gap */
  .standards-grid { margin-top: 36px; gap: 14px; }

  /* Industrial principal-standards list — slimmer */
  .standards-list li { font-size: 14.5px; gap: 14px; padding: 14px 0; }
  .standards-list__num { width: 28px; }

  /* Vertical tags — smaller on phones */
  .vertical-tags { font-size: 10.5px; }

  /* Footer — tighter spacing */
  .site-footer { padding: 64px 0 24px; }
  .site-footer__grid { gap: 36px; padding-bottom: 40px; }
  /* On phones the columns stack — the negative top margin used to align with
     the next column on desktop is no longer needed (and would clip the logo
     against the footer's top edge), so we reset it here. */
  .site-footer__brand img { height: 56px; margin-top: 0; }
  .site-footer__bottom { font-size: 11px; }
  .site-footer__bottom a { margin-left: 16px; }

  /* Contact direct-info: single column readable */
  .field-row { gap: 16px; }

  /* Header CTA hides on phones to free space; menu-toggle handles nav */
  .site-header__cta { display: none !important; }

  /* Mobile menu — clean type sizing */
  .mobile-menu a { font-size: 22px; }
}

/* Tablet ranges — gentler tightening */
@media (max-width: 1023px) and (min-width: 721px) {
  .hero__inner { padding: 180px 32px 96px; }
  .page-head { padding: 180px 0 96px; }
  h2 { font-size: clamp(30px, 4.5vw, 44px); }
}

/* ─── Trading-house refinements ───────────────────────────── */
/* Subtle ornament for footer brand */
.site-footer__brand img {
  background: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Slight kerning on the immersive hero eyebrow for prestige */
.hero__eyebrow {
  letter-spacing: 0.32em;
}

/* Pillar card hover — slightly more defined for editorial feel */
.pillar:hover .pillar__media img {
  transform: scale(1.04);
}

/* ─── Print styles ─────────────────────────────────── */
@media print {
  .site-header, .site-footer, .mobile-menu, .mobile-menu__overlay,
  .menu-toggle, .hero__meta, .reveal { all: revert; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero, .page-head { background: #fff !important; color: var(--fg-1) !important; padding: 24px 0 !important; min-height: auto !important; }
  .hero__bg, .page-head__bg { display: none !important; }
  .hero__title, .page-head__title, h1, h2, h3 { color: var(--fg-1) !important; }
  .bg-navy { background: #fff !important; color: var(--fg-1) !important; }
  .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy p { color: var(--fg-1) !important; }
  a { color: var(--fg-1) !important; text-decoration: underline; }
  body { font-size: 11pt; }
}