/* ==========================================================================
   index.html — page-specific theme overrides
   Extracted verbatim from the inline <style> block that used to live in
   <head>. Must stay linked as the LAST stylesheet in <head> (after
   nav-navy.css / hero-split.css / legal.css): it wins the cascade by source
   order at equal specificity, the same way the inline block did when it sat
   after those <link> tags.
   ========================================================================== */

/* Hero loses its video column; that same video reappears beside the
   About & Governance headline. */
.hero__grid {
  grid-template-columns: 1fr;
}

.hero--split .hero__content {
  max-width: none;
}

/* Accent pair: #9CC1DE (the wordmark blue) carries everything that sits on
   navy, and #2D5F86 — same hue and saturation dropped in lightness, so it
   clears WCAG AA on white at 6.8:1 — carries everything on a light surface.
   Overriding the shared --gold/--gold-light/--gold-wash tokens here recolors
   every component that already reads them (buttons, tags, icon circles,
   dots, focus rings, the nav underline...) without touching tokens.css. A
   handful of rules bake the gold rgba() in directly instead of reading the
   token, so those are restated below with the blue rgba equivalent. */
:root {
  --gold: #2D5F86;
  /* accent on light surfaces */
  --gold-light: #9CC1DE;
  /* accent on navy surfaces — the nav wordmark blue */
  --gold-wash: #E6EFF7;
  /* pale chip fill */
  --accent-ink: #1C4462;
  /* darker step: text on the wash, pressed buttons */
  /* Body copy: same cool family, two steps darker than the original token. */
  --mute: #3B506A;
}

.tag {
  /*color: var(--accent-ink);*/
  color: var(--white);
  background: var(--gold);
}

.tag--dark {
  background: rgba(156, 193, 222, 0.18);
}

.cta-banner::after {
  background: radial-gradient(circle, rgba(156, 193, 222, 0.20) 0%, transparent 70%);
}

.hero__media::after {
  background:
    linear-gradient(100deg, var(--navy-deep) 8%, rgba(8, 26, 51, 0.88) 42%, rgba(8, 26, 51, 0.55) 100%),
    radial-gradient(circle at 78% 18%, rgba(156, 193, 222, 0.22) 0%, transparent 58%);
}

.hero__video-stage::before {
  background: radial-gradient(circle at 50% 42%, rgba(156, 193, 222, 0.12) 0%, transparent 62%);
}

.site-header,
.nav-links {
  border-bottom-color: rgba(156, 193, 222, 0.45);
}

.consent {
  border-top-color: var(--gold-light);
}

/* Surfaces: a cool blue tint instead of neutral grey, so the alternating
   bands read as part of the palette rather than as "unpainted". */
.section--surface {
  background: #EFF4F9;
}

.panel {
  background: #EDF2F8;
  border-color: #D9E3EE;
}

.card--glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(233, 241, 248, 0.92) 100%);
}

.card__index {
  color: rgba(156, 193, 222, 0.55);
}

/* "INTERNATIONAL" in the nav lockup, in the blue the client specified.
   "Yacht Services" (.wordmark__tail) stays white, as before. */
.wordmark--nav {
  color: #9CC1DE;
}

/* Default/hover swapped for the menu letters (Services, Specialist Network,
   Projects, Our Partners, Insights, About). nav-navy.css's own hover
   background tint is left untouched — only the colours that were "default"
   and "hover" trade places, with hover now landing on the accent blue
   instead of grey. Clicking a link (is-active) shows just the underline,
   brightened to the same blue so the current section is legible against
   the navy bar. */
.nav-links a {
  color: var(--white);
}

.nav-links a:hover {
  color: var(--gold-light);
}

.nav-links a.is-active {
  color: var(--white);
  background: none;
  box-shadow: inset 0 -2px 0 var(--gold-light);
}

/* ---- "Request a Proposal" / "Request a Quote" -----------------------
   The one action the page is asking for, so it is solid in both places it
   appears. On navy it fills with the light accent; on white and on the
   tinted surface it fills with the deep accent and white letters — the
   light blue was near-invisible there. Both carry a soft drop shadow so
   the button reads as a raised control, not a flat panel. */
.navbar>.btn--primary {
  /*background: var(--gold-light);
  color: var(--navy-deep);
  */
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 0 0 1px rgba(156, 193, 222, 0.55), 0 6px 16px rgba(8, 26, 51, 0.45);
}

.navbar>.btn--primary:hover {
  background: var(--white);
  color: var(--navy-deep);
}

.btn--gold {
  /*background: var(--gold);*/
  background: var(--primary-container);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(11, 37, 69, 0.22);
}

.btn--gold:hover {
  /*background: var(--accent-ink);*/
  background: var(--gold-light);
  color: var(--black);
}

.hero .btn--gold,
.cta-banner .btn--gold,
.section--navy .btn--gold,
.consent .btn--gold {
  /*background: var(--gold-light);*/
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: 0 8px 22px rgba(8, 26, 51, 0.45);
}

.hero .btn--gold:hover,
.cta-banner .btn--gold:hover,
.section--navy .btn--gold:hover,
.consent .btn--gold:hover {
  /*background: var(--white);*/
  background: var(--gold);
  color: var(--white);
}

/* Secondary calls to action pick up the accent instead of near-black. */
.link-arrow {
  color: var(--gold);
}

.btn--ghost {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);

}

.btn--ghost:hover {
  color: var(--gold);
  background: var(--transparent);
  border-color: var(--gold);
}

.icon-circle {

  color: var(--white);
}

.icon-circle--gold {
  background: var(--gold);
  color: var(--white);
}

.site-footer h4 {
  color: var(--gold-light);
}

/* ---- Insights thumbnails -------------------------------------------
   Client-selected photography, one per card, shown full-bleed with a thin
   navy wash at the base for depth/continuity with the rest of the page
   (same gradient formula as .project__media::after in components.css).
   Nothing in the markup says which card is which (js/main.js builds all
   six from one template), so they are addressed by position, in the order
   of the `articles` array in js/main.js:
     1 Owner's Representation   2 Contracts   3 Technology
     4 Shipyard Selection       5 Disputes    6 Delivery
   If that array is ever reordered, reorder these six rules with it. */
.article__thumb {
  background: linear-gradient(135deg, #17456F 0%, #0B2545 48%, #081A33 100%);
  overflow: hidden;
}

.article__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.article__thumb::after {
  background: linear-gradient(to top, rgba(8, 26, 51, 0.45) 0%, rgba(8, 26, 51, 0.05) 55%, transparent 100%);
}

#articleGrid .article:nth-child(1) .article__thumb::before {
  background-image: url('../img/insight-owners-representation.jpg');
}

#articleGrid .article:nth-child(2) .article__thumb::before {
  background-image: url('../img/insight-contracts.jpg');
}

#articleGrid .article:nth-child(3) .article__thumb::before {
  background-image: url('../img/insight-technology.jpg');
}

#articleGrid .article:nth-child(4) .article__thumb::before {
  background-image: url('../img/insight-shipyard-selection.jpg');
  background-position: bottom center;
}

#articleGrid .article:nth-child(5) .article__thumb::before {
  background-image: url('../img/insight-disputes.jpg');
}

#articleGrid .article:nth-child(6) .article__thumb::before {
  background-image: url('../img/insight-delivery.jpg');
}

.about-head-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.about-head-row .section-head {
  margin-bottom: 0;
  max-width: none;
}

.about-head-row__video {
  display: flex;
  justify-content: center;
}

.about-head-row__video .hero__video-stage {
  max-width: 100%;
}

@media (max-width:900px) {
  .about-head-row {
    grid-template-columns: 1fr;
  }

  .about-head-row__video {
    order: -1;
  }
}
