/* =================================================================
   Sykesystem site.css  ·  v6  (2026-09-11)
   =================================================================
   v6 changes vs v5:
     · Photo pattern replaced: was matted-print with double border,
       now offset-frame (thin gilt outline shifted behind and to
       bottom-right of the photo, magazine-editorial style).
     · Paper color unchanged: #F7F4EA
     · Book cover now composited against paper background (in the
       WebP itself), so the previous alpha halo is gone regardless.
   ================================================================= */


/* ───────────────────────────────────────────────
   1. Design tokens
   ─────────────────────────────────────────────── */
:root {
  --paper:        #F7F4EA;
  --paper-tint:   #F1ECDD;
  --navy:         #152947;
  --navy-dk:      #0D1A32;
  --navy-soft:    #EAEFF6;
  --gilt:         #9B7B3D;

  --ink:          #141821;
  --ink-mid:      #3A4050;
  --ink-soft:     #6B7280;

  --rule:         #D6D0BE;
  --footer-bg:    #0D1A32;

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-body:     1.02rem;
  --fs-caption:  0.82rem;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  14px;
  --space-4:  20px;
  --space-5:  28px;
  --space-6:  40px;
  --space-7:  60px;
  --space-8:  88px;

  --page-max:     1200px;
  --content-max:  900px;
  --hero-max:     1400px;

  --hairline-gilt: rgba(155, 123, 61, 0.30);
  --tile-w:        240px;

  --shadow-nav:  0 3px 12px rgba(21, 41, 71, 0.20);
  --shadow-lift: 0 18px 48px rgba(21, 41, 71, 0.14);
  --shadow-md:   0 4px 24px rgba(21, 41, 71, 0.10);
  --shadow-lg:   0 12px 40px rgba(21, 41, 71, 0.16);

  --t-fast: 120ms ease;
  --t-med:  200ms ease;
}


/* ───────────────────────────────────────────────
   2. Reset and base
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote {
  margin: 0; padding: 0;
}
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

body {
  background-color: var(--paper);
  /* Signal contours: two sine layers at different wavelengths. The navy set
     carries the field, the gilt set runs at 2.6x scale underneath it so the
     pattern never resolves into an obvious repeat. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%23152947' stroke-width='0.9' opacity='0.05'><path d='M0 40 C 30 12, 90 12, 120 40 S 210 68, 240 40'/><path d='M0 64 C 30 36, 90 36, 120 64 S 210 92, 240 64'/><path d='M0 16 C 30 -12, 90 -12, 120 16 S 210 44, 240 16'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%239B7B3D' stroke-width='1.2' opacity='0.045'><path d='M0 40 C 40 8, 80 72, 120 40 S 200 8, 240 40'/></g></svg>");
  background-size: 240px 80px, 620px 207px;
  background-repeat: repeat, repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ───────────────────────────────────────────────
   3. Typography
   ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gilt);
}

.lead { color: var(--ink-mid); line-height: 1.65; }
em { font-style: italic; }
strong { font-weight: 700; }


/* ───────────────────────────────────────────────
   4. Layout containers
   ─────────────────────────────────────────────── */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.container-wide {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
main { flex: 1 0 auto; }


/* ───────────────────────────────────────────────
   5. Site nav
   ─────────────────────────────────────────────── */
.site-nav {
  background: rgba(247, 244, 234, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-nav-brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.site-nav-links {
  display: flex;
  gap: var(--space-6);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.site-nav-links a {
  color: var(--ink-mid);
  transition: color var(--t-med);
  position: relative;
  padding: 6px 0;
}
.site-nav-links a:hover { color: var(--navy); }
.site-nav-links a.is-active { color: var(--navy); }
.site-nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--navy);
}

/* Narrow screens: the five nav items need ~768px on one line, so below that
   the row is centred under the brand and allowed to wrap. Every destination
   stays visible and tappable rather than running off the right edge. */
@media (max-width: 800px) {
  .site-nav-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4) var(--space-1);
  }
  .site-nav-brand { font-size: 1.18rem; }
  .site-nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-4);
    font-size: 0.76rem;
    letter-spacing: 0.10em;
  }
  .site-nav-links a { padding: 9px 0; }
}

/* Below ~470px the row has to wrap. Cap the width so it always breaks 3 + 2
   rather than orphaning a single item on the second line. */
@media (max-width: 470px) {
  .site-nav-links { max-width: 17.5rem; }
}

@media (max-width: 380px) {
  .site-nav-links {
    gap: var(--space-1) var(--space-3);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    max-width: 16rem;
  }
}


/* ───────────────────────────────────────────────
   6. Site footer
   ─────────────────────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  padding: var(--space-5) var(--space-4);
  margin-top: auto;
}
.site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.site-footer-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer-brand {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.site-footer-tag {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.site-footer-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}
.site-footer a { color: rgba(255, 255, 255, 0.6); transition: color var(--t-med); }
.site-footer a:hover { color: #fff; }

.site-footer-socials {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--t-med);
}
.site-footer-socials a:hover { color: #fff; }
.site-footer-socials svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; gap: var(--space-3); text-align: center; }
  .site-footer-left { justify-content: center; }
}


/* ───────────────────────────────────────────────
   7. Buttons
   ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 24px;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: all var(--t-med);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: var(--shadow-nav);
}
.btn-primary:hover {
  background: var(--navy-dk);
  border-color: var(--navy-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(21, 41, 71, 0.30);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover { background: rgba(21, 41, 71, 0.06); }
/* Barnes & Noble buy button: a deep green, so the two retailers read as
   different stores at a glance without either looking secondary. */
.btn-bn {
  background: #2F5E4E;
  color: #fff;
  border-color: #2F5E4E;
  box-shadow: var(--shadow-nav);
}
.btn-bn:hover {
  background: #244A3D;
  border-color: #244A3D;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(36, 74, 61, 0.30);
}
.btn-tertiary {
  padding: 0;
  color: var(--navy);
  letter-spacing: 0.14em;
  border: none;
  background: none;
}
.btn-tertiary:hover { color: var(--navy-dk); }


/* ───────────────────────────────────────────────
   8. Utility
   ─────────────────────────────────────────────── */
.page-section {
  padding: var(--space-8) 0 var(--space-7);
  border-top: 1px solid var(--rule);
}
.page-section:first-of-type { border-top: none; }
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: var(--space-5);
  color: var(--ink);
  line-height: 1.15;
}


/* ───────────────────────────────────────────────
   9. Framed photo pattern: REBUILT v6
   ─────────────────────────────────────────────── */
/*
   Editorial offset-frame treatment (matches Remishka's Larisa portrait):
     · Photo has no border on itself, just a soft shadow
     · Behind and offset to bottom-right, a thin gilt outlined
       rectangle creates a "picture with frame-shadow" effect
     · Photo containers need extra bottom + right space so the
       offset frame doesn't clip against neighbors

   Wrap any <img> in <figure class="framed-photo"> to get the treatment.
   Modifiers:
     .framed-photo.framed-tight  → smaller offset (18px) for cards
     .framed-photo.framed-wide   → larger offset (32px) for heroes
*/
/* Every photograph on the site uses this frame: hairline gilt border, deep
   soft shadow, a navy-to-gilt bar along the bottom edge, and an outlined
   gilt square offset behind one bottom corner.

   Markup is  figure.framed-photo > div.media > div.frame > img  followed by
   an optional figcaption. The accent square anchors to .media, never to the
   figure, or it drifts down beside the caption.

   Add .accent-left to flip the square to the other corner. Alternate it when
   two framed images sit near each other so the device does not become a tic. */
.framed-photo {
  position: relative;
  display: block;
  margin: 0 22px 22px 0;   /* room for the accent square to extend */
  padding: 0;
}
.framed-photo .media { position: relative; }
.framed-photo .media::before {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 128px;
  height: 128px;
  border: 2px solid var(--gilt);
  border-radius: 3px;
  opacity: 0.40;
  pointer-events: none;
}
.framed-photo.accent-left .media::before { right: auto; left: -20px; }

.framed-photo .frame {
  position: relative;
  z-index: 1;
  border: 1px solid var(--hairline-gilt);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 14px 54px rgba(21, 41, 71, 0.20);
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-tint) 100%);
}
.framed-photo .frame img {
  display: block;
  width: 100%;
  height: auto;
}
.framed-photo .frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--gilt) 100%);
}
.framed-photo figcaption {
  position: relative;
  z-index: 1;
  /* clears the accent square, which overhangs the media box by 20px */
  margin-top: var(--space-5);
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}

.framed-photo.framed-tight { margin: 0 16px 16px 0; }
.framed-photo.framed-tight .media::before { width: 92px; height: 92px; bottom: -14px; right: -14px; }
.framed-photo.framed-tight.accent-left .media::before { right: auto; left: -14px; }

.framed-photo.framed-wide { margin: 0 24px 24px 0; }

/* The book cover is not a photograph. It carries its own alpha channel, so it
   sits directly on the page with a CSS shadow and no frame. */
.floating-cover {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(21, 41, 71, 0.34));
}


/* ───────────────────────────────────────────────
   10. Section ornaments
   ─────────────────────────────────────────────── */
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-7) auto;
  max-width: 300px;
  color: var(--gilt);
}
.section-ornament::before,
.section-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.section-ornament svg { width: 10px; height: 10px; fill: currentColor; opacity: 0.6; }


/* ───────────────────────────────────────────────
   11. Pull-quotes
   ─────────────────────────────────────────────── */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 44ch;
  margin: var(--space-6) auto;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--gilt);
  text-align: left;
}
.pull-quote-attribution {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}


/* ───────────────────────────────────────────────
   12. Principal subnav
   ─────────────────────────────────────────────── */
.principal-subnav {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.principal-subnav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 3px;
  background: transparent;
  transition: all var(--t-med);
}
.principal-subnav a:hover { background: rgba(21, 41, 71, 0.06); }
.principal-subnav a.is-active {
  background: var(--navy);
  color: #fff;
  cursor: default;
}
.principal-subnav a.is-active:hover { background: var(--navy); }


/* ───────────────────────────────────────────────
   12. v7 layout layer

   Bands, section grid and cards. Introduced to stop every page reading as
   one left-hugging column of identical blocks. Band rhythm follows
   kyndryl.com; the frame and accent treatment follow remishkapublishing.com,
   held to navy and gilt rather than green and gold.
   ─────────────────────────────────────────────── */

.band { position: relative; overflow: hidden; }
.band + .band { border-top: 1px solid var(--rule); }
.band-tint { background: var(--paper-tint); }
.band-pad  { padding: var(--space-8) 0; }

.band-dark {
  background: var(--navy-dk);
  color: #EEF1F6;
  border-top: none;
}
.band-dark h2, .band-dark h3 { color: #FFFFFF; }
.band-dark .eyebrow { color: #C9A961; }

/* Ambient wash: large, faint, bleeding off the edge. Gives the band air
   without putting anything on the page the reader can name. */
.band-wash::before,
.band-wash::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.band-wash::before {
  top: -220px; right: -240px;
  width: 680px; height: 680px;
  background: radial-gradient(circle at 60% 40%, rgba(21, 41, 71, 0.075) 0%, transparent 62%);
}
.band-wash::after {
  bottom: -260px; left: -220px;
  width: 560px; height: 560px;
  background: radial-gradient(circle at 40% 60%, rgba(155, 123, 61, 0.10) 0%, transparent 62%);
}
.band > .container,
.band > .container-wide { position: relative; z-index: 1; }

/* Section grid: heading in a left rail, body to the right. */
.sec-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.sec-grid > .sec-head { position: sticky; top: 96px; }
.sec-grid h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.12;
  margin-bottom: var(--space-3);
}
.sec-rule { width: 46px; height: 2px; background: var(--gilt); margin-top: var(--space-3); }
.sec-body > p { max-width: 68ch; line-height: 1.78; margin-bottom: var(--space-4); }
.sec-body > p:last-child { margin-bottom: 0; }

/* Rule list. Markers are rules, not numbers: these are parallel items, and
   numbering would imply a sequence that is not there. */
.rule-list { margin-top: var(--space-5); }
.rule-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 34px;
  border-top: 1px solid var(--rule);
  line-height: 1.6;
}
.rule-list li:last-child { border-bottom: 1px solid var(--rule); }
.rule-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.45em;
  width: 18px; height: 1px;
  background: var(--gilt);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-4);
}
.card {
  position: relative;
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: var(--space-5);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--gilt);
  opacity: 0;
  transition: opacity var(--t-med);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--hairline-gilt); }
.card:hover::before { opacity: 1; }
.card h3 { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; margin-bottom: var(--space-2); }
.card p  { font-size: 0.96rem; line-height: 1.65; color: var(--ink-mid); }

/* Engagement cards, on the dark band. Numbered, because Diagnostic, Design
   and Deploy genuinely run in order. */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.eng {
  position: relative;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med), background var(--t-med), border-color var(--t-med);
}
.eng:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(155, 123, 61, 0.55);
}
.eng-num {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--gilt);
  margin-bottom: var(--space-3);
}
.eng h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-bottom: var(--space-2); }
.eng-duration {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.70rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #D9C79A;
  border: 1px solid rgba(155, 123, 61, 0.5);
  border-radius: 2px;
  padding: 4px 10px;
  margin-bottom: var(--space-4);
}
.eng-purpose { font-size: 0.94rem; line-height: 1.7; color: #C9D2E0; margin-bottom: var(--space-4); }
.eng-outcome {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.92rem; font-style: italic; line-height: 1.65;
  color: #EAD9AE;
}

/* Two-column definition grid */
.buyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 var(--space-7);
}
.buyer-grid li { padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
.buyer-grid strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600;
  margin-bottom: 4px;
}
.buyer-grid span { display: block; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.6; }

/* Centred statement block */
.exclusion-note {
  max-width: 74ch; margin: 0 auto;
  text-align: center;
  font-size: 1.02rem; line-height: 1.8;
  color: var(--ink-mid);
}
.exclusion-note::before {
  content: '';
  display: block;
  width: 46px; height: 2px;
  background: var(--gilt);
  margin: 0 auto var(--space-5);
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.start-card { display: flex; flex-direction: column; }
.start-card p { margin-bottom: var(--space-4); }
.start-card .direct-email {
  margin-top: auto;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--hairline-gilt);
  align-self: flex-start;
}
.start-card .btn { margin-top: auto; align-self: flex-start; }

.crosslink { margin-top: var(--space-6); font-size: 0.95rem; color: var(--ink-soft); }
.crosslink a { color: var(--navy); border-bottom: 1px solid var(--hairline-gilt); }


/* ───────────────────────────────────────────────
   13. Hero drift

   Two contour layers travelling diagonally at different speeds, in the hero
   band only. Each overhangs the band on both axes and translates by a whole
   multiple of its own tile, so the loop is seamless. Movement uses transform,
   which the GPU composites, rather than background-position, which would
   repaint the page every frame and cost battery on phones.
   ─────────────────────────────────────────────── */

.hero-drift { position: relative; overflow: hidden; background: var(--paper); }
.hero-drift::before,
.hero-drift::after {
  content: '';
  position: absolute;
  /* overhang on both axes, sized to the larger of the two tiles, so the
     diagonal travel never drags an edge into view */
  top: -220px; bottom: -220px;
  left: -640px; right: -640px;
  pointer-events: none;
  z-index: 0;
}
/* v12 (launch): visitors missed the motion entirely. The hero layers used the
   same strokes and opacity as the static body texture, so the moving band read
   as the same wallpaper as the rest of the page. The hero now runs at roughly
   twice the body's contrast, moves faster, and glides in on load so the eye
   catches motion in the first second. Body texture is unchanged.
   v13: both layer opacities taken down 10% (0.11 to 0.099, 0.09 to 0.081)
   at Don's request, to keep it noticeable without pulling focus. */
.hero-drift::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%23152947' stroke-width='1.2' opacity='0.099'><path d='M0 40 C 30 12, 90 12, 120 40 S 210 68, 240 40'/><path d='M0 64 C 30 36, 90 36, 120 64 S 210 92, 240 64'/><path d='M0 16 C 30 -12, 90 -12, 120 16 S 210 44, 240 16'/></g></svg>");
  background-size: 240px 80px;
  will-change: transform;
  animation:
    hero-drift-a 18s linear infinite,
    hero-drift-intro 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero-drift::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%239B7B3D' stroke-width='1.2' opacity='0.081'><path d='M0 40 C 40 8, 80 72, 120 40 S 200 8, 240 40'/></g></svg>");
  background-size: 620px 207px;
  will-change: transform;
  animation: hero-drift-b 75s linear infinite reverse;
}
.hero-drift > * { position: relative; z-index: 1; }

/* Horizontal travel alone was close to invisible: each layer repeats along x,
   so sliding it down its own repeat axis gives the eye nothing to lock onto.
   Adding vertical travel carries the crests diagonally across their own
   wavelength, which is what reads as waving.

   Each layer must translate by a whole multiple of its OWN tile, or the loop
   jumps. The two tiles differ (240x80 and 620x207), so they need separate
   keyframes. The earlier single keyframe moved both by 240px, which was not a
   whole tile for the gilt layer and jumped once per cycle.

   The gilt layer is the larger and slower of the two: distant things move
   less, which is what separates the planes. */
@keyframes hero-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-240px, -80px, 0); }
}
@keyframes hero-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-620px, 207px, 0); }
}

/* First cycle on load: the navy layer starts 144px x 48px back along its own
   path and eases into the loop, so it moves fast for the first second and
   settles to drift speed. It uses the separate `translate` property, which
   adds to `transform` rather than replacing it, so the loop is not
   interrupted. The offset stays inside the layer's overhang. */
@keyframes hero-drift-intro {
  from { translate: 144px 48px; }
  to   { translate: 0 0; }
}

/* Anyone whose system asks for reduced motion gets the still page. No
   JavaScript is involved in this decision, so it cannot fail to apply. */
@media (prefers-reduced-motion: reduce) {
  .hero-drift::before,
  .hero-drift::after { animation: none; will-change: auto; }
}


/* ───────────────────────────────────────────────
   14. v7 layer, narrow screens
   ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sec-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .sec-grid > .sec-head { position: static; }
  .engagement-grid { grid-template-columns: 1fr; }
  .band-pad { padding: var(--space-7) 0; }
  .framed-photo .media::before { bottom: -12px; right: -12px; width: 84px; height: 84px; }
  .framed-photo.accent-left .media::before { right: auto; left: -12px; }
  .framed-photo { margin: 0 14px 14px 0; }
}


/* ───────────────────────────────────────────────
   15. Audience tabs

   A segmented control for pages that serve more than one buyer. Larisa's page
   uses it to keep federal property vocabulary from reading as the whole of
   her practice to a commercial or institutional reader.

   Without JavaScript every panel stays visible, so the page still carries its
   full content.
   ─────────────────────────────────────────────── */

.audience-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.audience-tabs button {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 11px 18px;
  cursor: pointer;
  transition: color var(--t-med), border-color var(--t-med), background var(--t-med);
}
.audience-tabs button:hover {
  color: var(--navy);
  border-color: var(--hairline-gilt);
}
.audience-tabs button[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
}
.audience-tabs button:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

.audience-panel[hidden] { display: none; }
.audience-panel h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: var(--space-3);
}
.audience-panel h3 + p { margin-top: 0; }
.audience-panel p {
  max-width: 68ch;
  line-height: 1.78;
  margin-bottom: var(--space-4);
}
.audience-panel p:last-child { margin-bottom: 0; }
.audience-panel .panel-lead {
  font-size: 1.06rem;
  color: var(--ink);
}

/* Sector vocabulary table: the same discipline under five sets of words. */
.sector-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0 var(--space-4);
  font-size: 0.95rem;
}
.sector-table caption {
  text-align: left;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  font-style: italic;
  padding-bottom: var(--space-3);
}
.sector-table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gilt);
  padding: 0 var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.sector-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid rgba(214, 208, 190, 0.55);
  vertical-align: top;
  line-height: 1.5;
}
.sector-table tr:last-child td { border-bottom: none; }
.sector-table td:first-child { color: var(--ink); font-weight: 700; }
.sector-table td:last-child { color: var(--ink-mid); padding-right: 0; }

.table-scroll { overflow-x: auto; }

@media (max-width: 620px) {
  .audience-tabs button { padding: 10px 13px; font-size: 0.72rem; letter-spacing: 0.08em; }
  .sector-table { font-size: 0.9rem; }
}

/* ───────────────────────────────────────────────
   13. Advisory additions (2026-10-19)
   ─────────────────────────────────────────────── */

/* Advisory hero: lead line, then the opening paragraph */
.hero-lead-line {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 40ch;
  margin-top: var(--space-4);
}
.hero-intro {
  max-width: 64ch;
  margin-top: var(--space-4);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-mid);
}

/* "When to call." line on every engagement card. One label style for all six. */
.eng-when {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #EEF1F6;
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid rgba(155, 123, 61, 0.6);
}
.eng-when-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A961;
  margin-bottom: var(--space-1);
}

/* Line under the engagement cards, on the dark band */
.eng-followup {
  margin-top: var(--space-6);
  max-width: 66ch;
  line-height: 1.75;
  color: #C9D2E0;
}
.eng-followup a {
  color: #EAD9AE;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-med);
}
.eng-followup a:hover { color: #FFFFFF; }

/* Keep the self-assessment link target clear of the sticky nav */
.eng { scroll-margin-top: 96px; }


/* ───────────────────────────────────────────────
   14. AI Operations Self-Assessment (2026-10-19)
   ─────────────────────────────────────────────── */
.sa-header {
  padding: var(--space-7) 0 var(--space-5);
  max-width: 720px;
}
.sa-header h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.sa-header .lead {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.sa-privacy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.6;
  padding-left: var(--space-3);
  border-left: 2px solid var(--gilt);
}

.sa-body {
  max-width: 720px;
  margin-bottom: var(--space-8);
}
.sa-group { padding-top: var(--space-6); }
.sa-group h2 {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gilt);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.sa-item {
  border: none;
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sa-item legend {
  float: left;
  flex: 1 1 auto;
  max-width: 52ch;
  padding: 0;
  color: var(--ink);
  line-height: 1.55;
}
.sa-num {
  font-weight: 700;
  color: var(--navy);
  margin-right: var(--space-1);
}
.sa-choices {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}
.sa-choice { position: relative; cursor: pointer; }
.sa-choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.sa-choice span {
  display: inline-block;
  min-width: 84px;
  padding: 9px 16px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sa-choice:hover span { border-color: var(--navy); }
.sa-choice input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.sa-choice input:focus-visible + span {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

.sa-outcome { padding-top: var(--space-6); }
.sa-status {
  color: var(--ink-soft);
  font-style: italic;
}
.sa-result {
  padding: var(--space-5);
  background: rgba(21, 41, 71, 0.04);
  border-left: 3px solid var(--navy);
  border-radius: 3px;
}
.sa-result h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.sa-result p {
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.sa-result p:last-child { margin-bottom: 0; }
.sa-result .sa-result-text {
  font-size: 1.08rem;
  color: var(--ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.sa-link {
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--hairline-gilt);
}
.sa-link:hover { color: var(--navy-dk); }
.sa-reset {
  margin-top: var(--space-4);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sa-reset:hover { color: var(--navy); }
.sa-status[hidden], .sa-result[hidden], .sa-reset[hidden] { display: none; }

@media (max-width: 640px) {
  .sa-item { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .sa-item legend { max-width: none; }
  .sa-choices { width: 100%; }
  .sa-choice { flex: 1 1 0; }
  .sa-choice span { display: block; min-width: 0; padding: 12px 16px; }
}

/* Home hero: referral line under the positioning, above the two buttons */
.home-referral {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  line-height: 1.4;
  color: var(--navy);
  max-width: 40ch;
  margin-bottom: var(--space-5);
  padding-left: var(--space-3);
  border-left: 2px solid var(--gilt);
}