/* ============================================================
   StratMonk — decoration layer
   Watermarks, grid texture, motion, ornament.

   RULE: .geo transform is composed ONCE from three variables.
   Never add a `transform` declaration to .geo or any of its
   modifiers — set --cy, --ty or --sc instead. Competing
   transform rules were the cause of every past misalignment.
   ============================================================ */

/* ---------- Sections are the positioning context ---------- */
.sec, .phero, .hero, .cta-band, .sec--ink, .site-footer, .prefoot {
  position: relative;
  overflow: hidden;
}
.sec > .wrap,
.phero > .wrap,
.hero > .wrap,
.cta-band > .wrap,
.site-footer > .wrap,
.prefoot > .wrap { position: relative; z-index: 2; }


/* ============================================================
   1. WATERMARKS
   ============================================================ */
.geo {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;

  height: clamp(140px, 18vw, 260px);
  max-height: 62%;          /* never taller than the section */
  max-width: 30%;           /* never wider than a third */
  width: auto;
  opacity: .05;

  --cy: 0%;                 /* vertical centring offset */
  --ty: 0px;                /* parallax offset, set from JS */
  --sc: 1;                  /* reveal scale */
  transform: translate3d(0, calc(var(--cy) + var(--ty)), 0) scale(var(--sc));
  transition: opacity .9s ease, transform .9s ease;
}

/* Placement. Percentages keep marks inside the section at any height. */
.geo--tr { top: 50%; right: 5%;  --cy: -50%; }
.geo--tl { top: 50%; left: 5%;   --cy: -50%; }
.geo--br { bottom: 10%; right: 5%; }
.geo--bl { bottom: 10%; left: 5%; }
.geo--hero {
  top: 50%; right: 4%; --cy: -50%;
  height: clamp(220px, 28vw, 400px);
  max-height: 72%;
  max-width: 38%;
}

/* Marks read brighter against navy */
.sec--ink .geo,
.cta-band .geo,
.site-footer .geo { opacity: .06; }

/* Reveal: opacity and scale only */
.geo--reveal { opacity: 0; --sc: .94; }
.geo--reveal.in { opacity: .05; --sc: 1; }
.sec--ink .geo--reveal.in,
.cta-band .geo--reveal.in,
.site-footer .geo--reveal.in { opacity: .06; }

/* Parallax adds no transform of its own — JS sets --ty */
.geo--para { transition: opacity .9s ease; }


/* ============================================================
   2. GRID TEXTURE — continuous, live
   ============================================================ */
.sec::before,
.phero::before,
.hero::before,
.cta-band::before,
.prefoot::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 42% 60% at 50% 50%, rgba(201,168,76,.10) 0%, transparent 70%),
    repeating-linear-gradient(60deg,  rgba(10,26,58,.05) 0px, rgba(10,26,58,.05) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(10,26,58,.05) 0px, rgba(10,26,58,.05) 1px, transparent 1px, transparent 46px);
  background-size: 60% 100%, 92px 160px, 92px 160px;
  background-repeat: no-repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 68% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 74% at 68% 40%, #000 0%, transparent 78%);
  animation: gridLive 34s linear infinite;
}
.sec--ink::before,
.cta-band::before,
.site-footer::before {
  background-image:
    radial-gradient(ellipse 42% 60% at 50% 50%, rgba(201,168,76,.14) 0%, transparent 70%),
    repeating-linear-gradient(60deg,  rgba(255,255,255,.075) 0px, rgba(255,255,255,.075) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.075) 0px, rgba(255,255,255,.075) 1px, transparent 1px, transparent 46px);
}
@keyframes gridLive {
  0%   { background-position: -60% 0,   0 0,        0 0; }
  50%  { background-position: 110% 0,  92px 160px, -92px 160px; }
  100% { background-position: 260% 0, 184px 320px, -184px 320px; }
}

/* Pulsing nodes at the lattice intersections */
.sec::after,
.phero::after,
.hero::after,
.sec--ink::after,
.cta-band::after,
.prefoot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(201,168,76,.5) 0px, rgba(201,168,76,.5) 1.4px, transparent 1.6px);
  background-size: 92px 160px;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 70% 44%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 62% 56% at 70% 44%, #000 0%, transparent 74%);
  opacity: .24;
  animation: nodeDrift 34s linear infinite, nodePulse 7s ease-in-out infinite;
}
.sec--ink::after,
.cta-band::after {
  background-image: radial-gradient(circle at center, rgba(201,168,76,.62) 0px, rgba(201,168,76,.62) 1.5px, transparent 1.7px);
  opacity: .3;
}
@keyframes nodeDrift { from { background-position: 0 0; } to { background-position: 184px 320px; } }
@keyframes nodePulse { 0%, 100% { opacity: .14; } 50% { opacity: .32; } }

/* Separation between adjacent dark bands (box-shadow, not ::after) */
/* No inset line between adjacent navy bands — it read as a panel split. */
.site-footer { border-top: 1px solid rgba(255,255,255,.14); }


/* ============================================================
   3. ORNAMENT
   ============================================================ */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: .6rem;
  vertical-align: 1px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Gold rule above a heading only where no eyebrow precedes it */
.sec-head > h2:first-child { position: relative; padding-top: 1.15rem; }
.sec-head > h2:first-child::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 46px; height: 3px;
  background: var(--gold);
}

.card { position: relative; overflow: hidden; }
.card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--gold) 0%, var(--gold) 50%, transparent 50%);
  pointer-events: none;
}

.chip { position: relative; padding-left: 1.35rem !important; }
.chip::before {
  content: "";
  position: absolute; left: .7rem; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: .85;
}

.statement { position: relative; }
.statement::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 54px; height: 54px;
  background: linear-gradient(225deg, var(--gold) 0%, var(--gold) 46%, transparent 46%);
  opacity: .18;
}

.foot-lockup { position: relative; }
.foot-lockup::after {
  content: "";
  position: absolute; bottom: -9px; right: -9px;
  width: 30px; height: 30px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

.bio-photo { position: relative; }
.bio-photo::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px; right: -14px; bottom: -14px;
  border: 1px solid var(--gold);
  opacity: .4;
  z-index: -1;
}
.bio { position: relative; z-index: 1; }


/* ============================================================
   4. NUMBERING & MARKERS  (grid cells, never padding)
   ============================================================ */
/* method items are unnumbered */

/* capability rows are unnumbered */

.sector::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid var(--gold);
  transform: rotate(45deg);
  margin-top: .55rem;
}


/* ============================================================
   5. CONSTELLATION CANVAS
   ============================================================ */
.constellation {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}


/* ============================================================
   6. MOTION
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
}
.rv.in { opacity: 1; transform: none; }

.method-item.rv:nth-child(2), .cap-block.rv:nth-child(2),
.value-block.rv:nth-child(2), .sector.rv:nth-child(2) { transition-delay: .07s; }
.method-item.rv:nth-child(3), .cap-block.rv:nth-child(3),
.value-block.rv:nth-child(3), .sector.rv:nth-child(3) { transition-delay: .14s; }
.grid-2 > .rv:nth-child(2) { transition-delay: .09s; }
.grid-2 > .rv:nth-child(3) { transition-delay: .18s; }
.grid-2 > .rv:nth-child(4) { transition-delay: .27s; }
.grid-3 > .rv:nth-child(2) { transition-delay: .09s; }
.grid-3 > .rv:nth-child(3) { transition-delay: .18s; }

.hero-tag, .hero h1, .hero-lead, .hero .btn {
  animation: heroIn .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero-tag { animation-delay: .05s; }
.hero h1 { animation-delay: .12s; }
.hero-lead:nth-of-type(1) { animation-delay: .2s; }
.hero-lead:nth-of-type(2) { animation-delay: .26s; }
.hero-lead:nth-of-type(3) { animation-delay: .32s; }
.hero .btn { animation-delay: .4s; }
.hero-figure img { animation: symbolIn 1.1s cubic-bezier(.22,.61,.36,1) .18s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes symbolIn { from { opacity: 0; transform: translateY(24px) scale(.965); } to { opacity: 1; transform: none; } }

.arrow-link { transition: color .18s ease, border-color .18s ease; }
.cap-block, .sector { transition: background .2s ease; }
.cap-block:hover { background: rgba(10,26,58,.018); }
.chip { transition: border-color .18s ease, color .18s ease, transform .18s ease; }
.chip:hover { border-color: var(--gold); color: var(--navy); transform: translateY(-1px); }
/* On dark sections the hover colour must go light, not navy */
.sec--ink .chip:hover,
.cta-band .chip:hover,
.site-footer .chip:hover { color: #fff; border-color: var(--gold); }
.nav a, .btn { transition: all .18s ease; }
.btn:hover { transform: translateY(-1px); }


/* ============================================================
   7. RESPONSIVE & ACCESSIBILITY
   ============================================================ */
@media (max-width: 900px) {
  .geo--tl, .geo--bl { display: none; }
  .geo { opacity: .035; max-width: 40%; }
  .geo--hero { max-width: 46%; height: clamp(150px, 30vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .geo { --ty: 0px; --sc: 1; opacity: .05; transition: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-tag, .hero h1, .hero-lead, .hero .btn, .hero-figure img { animation: none; }
  .sec::before, .phero::before, .hero::before, .cta-band::before,
  .prefoot::before, .site-footer::before,
  .sec::after, .phero::after, .hero::after,
  .sec--ink::after, .cta-band::after, .prefoot::after { animation: none; }
}

@media print {
  .geo, .constellation { display: none !important; }
  .sec::before, .sec::after, .phero::before, .phero::after,
  .hero::before, .hero::after { display: none !important; }
}

/* ============================================================
   8. DARK-SECTION COMPONENT OVERRIDES
   Cards, links and canvases inherit light-surface styling by
   default. On navy sections they must be restated, or a card
   renders white with the light text intended for navy.
   ============================================================ */
.card {
  border-top-width: 1px;
  border-left: 3px solid var(--navy);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--oxide { border-left-color: var(--gold); }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,26,58,.07); }

.sec--ink .card,
.cta-band .card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
  border-left-color: var(--gold);
}
.sec--ink .card h3,
.cta-band .card h3 { color: #fff; }
.sec--ink .card p,
.cta-band .card p { color: #c6cddc; }
.sec--ink .card:hover,
.cta-band .card:hover { box-shadow: none; background: rgba(255, 255, 255, .07); }

.sec--ink .constellation,
.cta-band .constellation { opacity: .9; }

.phero h1 { position: relative; }

/* Form controls on dark sections */
.sec--ink .field label,
.cta-band .field label { color: #fff; }
.sec--ink .field input,
.sec--ink .field select,
.sec--ink .field textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.sec--ink .field input::placeholder,
.sec--ink .field textarea::placeholder { color: #8f9bb3; }
.sec--ink .form-note,
.sec--ink .hint { color: #b9c2d4; }

/* ============================================================
   9. SIZE VARIANTS & THE WIND FIELD
   ============================================================ */
.geo--sm { height: clamp(90px, 11vw, 150px);  max-height: 40%; }
.geo--md { height: clamp(140px, 17vw, 240px); max-height: 56%; }
.geo--lg { height: clamp(200px, 24vw, 340px); max-height: 70%; }

/* Grid slightly more present, as requested */
.sec::before, .phero::before, .hero::before,
.cta-band::before, .prefoot::before, .site-footer::before {
  background-image:
    radial-gradient(ellipse 42% 60% at 50% 50%, rgba(201,168,76,.14) 0%, transparent 70%),
    repeating-linear-gradient(60deg,  rgba(10,26,58,.075) 0px, rgba(10,26,58,.075) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(10,26,58,.075) 0px, rgba(10,26,58,.075) 1px, transparent 1px, transparent 46px);
}
.sec--ink::before, .cta-band::before, .site-footer::before {
  background-image:
    radial-gradient(ellipse 42% 60% at 50% 50%, rgba(201,168,76,.20) 0%, transparent 70%),
    repeating-linear-gradient(60deg,  rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px, transparent 1px, transparent 46px);
}
.sec::after, .phero::after, .hero::after,
.sec--ink::after, .cta-band::after, .prefoot::after { opacity: .3; }
@keyframes nodePulse { 0%, 100% { opacity: .2; } 50% { opacity: .42; } }

/* ---------- Wind: light gold streams across dark sections ---------- */
.wind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wind svg { position: absolute; width: 160%; height: 100%; left: -30%; }
.wind path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  opacity: .16;
  stroke-dasharray: 240 1400;
  animation: windFlow 18s linear infinite;
}
.wind path:nth-child(1) { stroke-width: 1.4; animation-duration: 17s; animation-delay: 0s;    opacity: .2; }
.wind path:nth-child(2) { stroke-width: 1;   animation-duration: 23s; animation-delay: -4s;  opacity: .13; }
.wind path:nth-child(3) { stroke-width: 1.8; animation-duration: 29s; animation-delay: -9s;  opacity: .1; }
.wind path:nth-child(4) { stroke-width: .9;  animation-duration: 21s; animation-delay: -14s; opacity: .16; }
.wind path:nth-child(5) { stroke-width: 1.2; animation-duration: 26s; animation-delay: -6s;  opacity: .11; }
@keyframes windFlow {
  from { stroke-dashoffset: 1640; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wind path { animation: none; stroke-dasharray: none; opacity: .1; }
}


/* Strat / Monk picked out in gold on the name section */
.sec--ink p strong, .cta-band p strong { color: var(--gold); }