/* ==========================================================================
   ian-lacovara.com -- shared stylesheet
   Upload once to: public_html/assets/css/ian.css
   Pure ASCII source. Arrows and glyphs use CSS escapes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:          #070b18;
  --bg-2:        #0b1220;
  --panel:       #111a30;
  --panel-2:     #16203c;
  --line:        #233150;
  --line-soft:   #1a2440;

  /* Ink */
  --ink:         #eef2fb;
  --ink-2:       #b9c4dd;
  --ink-3:       #8795b4;

  /* Accents */
  --accent:      #ddad43;
  --accent-ink:  #1a1403;
  --accent-dim:  rgba(221, 173, 67, 0.13);
  --accent-line: rgba(221, 173, 67, 0.34);
  --warm:        #f2737a;
  --warm-dim:    rgba(242, 115, 122, 0.12);

  /* Type */
  --font-head: "Space Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space */
  --wrap:    1200px;
  --wrap-nar: 820px;
  --gut:     24px;
  --sec:     clamp(64px, 9vw, 128px);

  /* Shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Orbit base size -- the whole graphic scales from this one value */
  --orb: 480px;
  --orb-icon: 60px;

  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
  text-transform: none;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
li::marker { color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: var(--sec) 0;
}

.fw-4 { font-weight: 400; }

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

/* Skip link */
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-weight: 700; transition: top 0.18s ease;
}
.skip:focus { top: 12px; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: var(--wrap-nar); }

.section { padding-block: var(--sec); position: relative; }
.section--alt { background: var(--bg-2); }
.section--panel { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

.grid { display: grid; gap: 28px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Section heading block */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: var(--accent); flex: none;
}
.eyebrow--center { justify-content: center; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-2);
  max-width: 68ch;
}
.lead--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head);
  font-size: 0.98rem; font-weight: 700;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, background-color 0.16s ease,
              border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn::after { content: "\2192"; font-size: 1.05em; line-height: 1; }
.btn--plain::after { content: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #f2cc63; }

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

.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 32px;
}

/* Inline text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.arrow-link::after {
  content: "\2192";
  transition: transform 0.16s ease;
}
.arrow-link:hover { text-decoration: none; }
.arrow-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 11, 24, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--header-h);
  flex-wrap: nowrap;
}
.nav-menu { display: flex; align-items: center; gap: 6px; }

.brand {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--font-head); text-decoration: none;
  line-height: 1.15; flex: none;
}
.brand:hover { text-decoration: none; }

/* Logo. Rendered at 1024px so it stays sharp on high-density screens at any
   of these display heights. */
.brand-logo {
  display: block;
  height: 46px;
  width: auto;
  flex: none;
}
.site-footer .brand-logo { height: 68px; }

.brand-text { display: flex; align-items: center; min-width: 0; }
.brand-text b {
  color: var(--ink); font-size: 1.12rem;
  font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; line-height: 1;
}

/* ---- If your logo already contains your name as a wordmark, delete the
   opening and closing comment markers on the rule below. That hides the
   duplicate name text and keeps only the role line beside the mark. ----
.brand-text b { display: none; }
*/

@media (max-width: 400px) {
  .brand-logo { height: 38px; }
  .brand-text b { font-size: 1rem; }
}

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-sm);
  padding: 9px 13px; font-size: 1.1rem; cursor: pointer;
  line-height: 1;
}

.nav-list {
  display: flex; align-items: center; gap: 1px;
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

.nav-list a {
  display: block;
  font-family: var(--font-head);
  font-size: 0.85rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: 8px 10px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav-list a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-list a[aria-current="page"] { color: var(--accent); }

.nav-cta { margin-left: 6px; flex: none; }
.nav-cta .btn { padding: 10px 18px; font-size: 0.84rem; white-space: nowrap; }

/* Dropdown */
.has-sub > button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head);
  font-size: 0.85rem; font-weight: 500;
  color: var(--ink-2); background: transparent; border: 0;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
}
.has-sub > button:hover { color: var(--ink); background: var(--panel); }
.has-sub > button::after {
  content: "\203A";
  transform: rotate(90deg);
  font-size: 1.1em; line-height: 1;
}
.sub {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 268px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 8px;
  list-style: none; margin: 0;
  display: none;
}
.sub li { margin: 0; }
.sub a { padding: 11px 14px; font-size: 0.88rem; }
.has-sub[data-open="true"] .sub { display: block; }

/* Invisible bridge across the 8px gap between the parent item and the panel.
   Without this the cursor passes over neither element on the way down, the
   parent fires mouseleave, and the submenu closes before it can be clicked. */
.sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 480px at 12% 8%, rgba(221, 173, 67, 0.15), transparent 68%),
    radial-gradient(620px 420px at 88% 92%, rgba(29, 120, 219, 0.10), transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero .split { align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 30px 0 0; padding: 0;
}
.hero-meta li {
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
}

/* ---- Hero portrait composition (preserved graphic 1) ---- */
.hero-thumbs {
  position: relative;
  max-width: 440px;
  margin-left: auto;
  padding-bottom: 42px;
}
.hero-thumbs::before {
  content: "";
  position: absolute;
  inset: 8% -6% -2% 6%;
  background: radial-gradient(closest-side, rgba(221, 173, 67, 0.17), transparent 72%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-thumb-1 { display: block; position: relative; z-index: 1; }
.hero-thumb-1 img { margin-left: auto; }

.hero-thumb-2 {
  display: block;
  position: absolute;
  left: -2%;
  bottom: 0;
  z-index: 2;
  width: 52%;
  max-width: 237px;
}
.hero-thumb-2 img { width: 100%; }

.hero-float { animation: bounceHero 3s ease-in-out infinite; will-change: transform; }

@keyframes bounceHero {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

/* --------------------------------------------------------------------------
   7. Orbit graphic (preserved graphic 2)
   Rings rotate; each icon image counter-rotates at the same rate so the
   artwork stays upright. This replaces the original markup, which hid
   every icon with `display: none`.
   -------------------------------------------------------------------------- */
.orbit {
  position: relative;
  width: var(--orb);
  height: var(--orb);
  margin-inline: auto;
  flex: none;
  max-width: 100%;
}

.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 2px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.orbit-ring--lg {
  width: var(--orb); height: var(--orb);
  animation: orbSpin 80s linear infinite reverse;
  animation-delay: -3s;
}
.orbit-ring--md {
  width: calc(var(--orb) * 0.72); height: calc(var(--orb) * 0.72);
  border-color: var(--accent-line);
  animation: orbSpin 90s linear infinite;
  animation-delay: -1s;
}
.orbit-ring--sm {
  width: calc(var(--orb) * 0.46); height: calc(var(--orb) * 0.46);
  animation: orbSpin 35s linear infinite reverse;
  animation-delay: -2s;
}

.orbit-icon {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--orb-icon);
  height: var(--orb-icon);
  margin: calc(var(--orb-icon) / -2) 0 0 calc(var(--orb-icon) / -2);
  display: grid; place-items: center;
  /* No plate behind the artwork -- the icons are bright and carry
     themselves against the dark background. */
  background: none;
  border: 0;
  box-shadow: none;
  /* --a = angle on the ring, --r = ring radius */
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}
.orbit-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Separation from the ring lines without a background plate */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
  will-change: transform;
}
.orbit-icon--lg { --r: calc(var(--orb) / 2); }
.orbit-icon--md { --r: calc(var(--orb) * 0.36); }
.orbit-icon--sm {
  --r: calc(var(--orb) * 0.23);
  width: calc(var(--orb-icon) * 1.16);
  height: calc(var(--orb-icon) * 1.16);
  margin: calc(var(--orb-icon) * -0.58) 0 0 calc(var(--orb-icon) * -0.58);
}

/* Counter-rotation keeps each icon upright */
.orbit-ring--lg .orbit-icon img { animation: orbSpin 80s linear infinite; animation-delay: -3s; }
.orbit-ring--md .orbit-icon img { animation: orbSpin 90s linear infinite reverse; animation-delay: -1s; }
.orbit-ring--sm .orbit-icon img { animation: orbSpin 35s linear infinite; animation-delay: -2s; }

.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--orb) * 0.30);
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.6));
}
.orbit-core img { width: 100%; }

@keyframes orbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* The ring needs its centering translate preserved while spinning */
.orbit-ring--lg, .orbit-ring--md, .orbit-ring--sm {
  animation-name: orbSpinCentered;
}
@keyframes orbSpinCentered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover { border-color: var(--line); transform: translateY(-3px); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 0.98rem; }
.card p:last-child { margin-bottom: 0; }

.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { text-decoration: none; border-color: var(--accent-line); }

.card-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  margin-bottom: 16px;
}

/* Problem card -- problem stated, then the fix */
.fix-card { padding-top: 28px; }
.fix-card .problem {
  font-family: var(--font-head);
  font-size: 1.14rem; font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 14px;
  padding-left: 18px;
  border-left: 3px solid var(--warm);
}
.fix-card .answer { color: var(--ink-2); font-size: 0.98rem; margin: 0; }

/* Numbered list of capabilities */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 44px;
}
.stat {
  background: var(--bg-2);
  padding: 28px 24px;
}
.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span {
  font-size: 0.88rem;
  color: var(--ink-3);
  display: block;
  line-height: 1.5;
}

/* Quote */
.quote {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 28px;
  margin: 0;
}
.quote p {
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 18px;
}
.quote footer {
  font-family: var(--font-head);
  font-size: 0.86rem;
  color: var(--ink-3);
}
.quote footer b { display: block; color: var(--ink-2); font-weight: 600; }

/* Pull quote -- the creed */
.pull {
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  padding: clamp(36px, 5vw, 56px) 0;
  text-align: center;
}
.pull p {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3.1vw, 2.15rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto 18px;
}
.pull cite {
  font-family: var(--font-head);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400;
  color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 24px 22px; }
.faq .faq-body p { font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   10. Placeholder box (content still to be supplied)
   -------------------------------------------------------------------------- */
.todo {
  border: 2px dashed var(--warm);
  background: var(--warm-dim);
  border-radius: var(--r);
  padding: 22px 24px;
  color: var(--ink-2);
  font-size: 0.94rem;
}
.todo b {
  display: block;
  font-family: var(--font-head);
  color: var(--warm);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.todo p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  background:
    radial-gradient(620px 300px at 50% 0%, rgba(221, 173, 67, 0.14), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta .lead { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(48px, 6vw, 76px) 32px;
  font-size: 0.93rem;
}
/* Two children: the brand block, and the nav that holds the four link
   columns. The nav needs its own grid or its columns stack. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 3fr;
  gap: 40px 48px;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
}
.footer-grid h4 {
  font-family: var(--font-head);
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); text-decoration: none; }

.footer-about p { color: var(--ink-3); font-size: 0.93rem; max-width: 36ch; }
.footer-about .brand { margin-bottom: 16px; }

.footer-bottom {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.86rem;
}
.footer-bottom a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(221, 173, 67, 0.45);
}
.footer-bottom a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --orb: 420px; --orb-icon: 54px; }
  /* Brand block moves above the link columns */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  :root { --orb: 400px; }

  .nav-toggle { display: inline-block; }

  .nav-menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 16px var(--gut) 24px;
  }
  .nav[data-open="true"] .nav-menu { display: block; }
  .nav { position: relative; flex-wrap: wrap; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list a, .has-sub > button { width: 100%; padding: 13px 14px; font-size: 1rem; }
  .has-sub > button { justify-content: space-between; }
  .sub {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .sub::before { display: none; }
  .sub a { font-size: 0.95rem; }
  .nav-cta { margin: 14px 0 0; }
  .nav-cta .btn { width: 100%; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero .split { gap: 56px; }
  .hero-thumbs { margin-inline: auto; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --orb: 330px; --orb-icon: 46px; --gut: 20px; }
  body { font-size: 16px; }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-nav  { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav-cta .btn, .btn { width: 100%; }
}

@media (max-width: 479px) {
  :root { --orb: 268px; --orb-icon: 40px; }
  .footer-nav { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-thumb-2 { width: 50%; }
}

/* --------------------------------------------------------------------------
   14. Motion / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .orbit-ring { animation: none !important; }
  .orbit-ring--lg, .orbit-ring--md, .orbit-ring--sm {
    transform: translate(-50%, -50%) !important;
  }
  .orbit-icon img { animation: none !important; }
  .hero-float { animation: none !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .cta, .orbit, .hero-thumbs, .nav-toggle { display: none !important; }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   Dropdown parent that is also a link (About). The label navigates, the
   chevron opens the submenu.
   -------------------------------------------------------------------------- */
.sub-parent {
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
}
.sub-parent:hover { background: var(--panel); }
.sub-parent > a { padding-right: 3px; }
.sub-parent > a:hover { background: none; }
.sub-parent > button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-2); padding: 8px 9px 8px 2px;
  display: inline-flex; align-items: center; line-height: 1;
}
.sub-parent > button::after {
  content: "\203A"; transform: rotate(90deg);
  font-size: 1.1em; line-height: 1;
}
.sub-parent > button:hover { color: var(--ink); }

@media (max-width: 991px) {
  .sub-parent { width: 100%; justify-content: space-between; }
  .sub-parent > a { flex: 1; padding: 13px 14px; font-size: 1rem; }
  .sub-parent > button { padding: 13px 16px; }
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

/* Page hero: shorter than the home hero, with room for a breadcrumb */
.hero--page { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 7vw, 92px); }

.crumbs {
  font-family: var(--font-head);
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-bottom: 26px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--ink-2); }

/* Framed portrait for interior pages */
.portrait {
  position: relative;
  max-width: 400px;
  margin-left: auto;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 6% -5% -3% 5%;
  background: radial-gradient(closest-side, rgba(221, 173, 67, 0.17), transparent 72%);
  border-radius: 50%;
  pointer-events: none;
}
.portrait img {
  position: relative; z-index: 1;
  margin-left: auto;
  border-radius: var(--r-lg);
}

/* Stat row that runs down a column instead of across */
.stat-row--stack { grid-template-columns: minmax(0, 1fr); margin-top: 0; }

/* Multi-line title block inside a card */
.role-lines {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.94rem;
  line-height: 1.65;
}

@media (max-width: 991px) {
  .portrait { margin-inline: auto; }
}

/* Caption under an interior-page image */
.portrait { margin: 0; }
.portrait figcaption {
  position: relative; z-index: 1;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: right;
}
@media (max-width: 991px) { .portrait figcaption { text-align: center; } }

/* Takeaway line at the foot of a topic card */
.takeaway {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-head);
  font-size: 0.86rem !important;
  color: var(--accent) !important;
}

/* Checked list for audiences and requirements */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: var(--ink-2);
}
.tick-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}
.tick-list--tight li { margin-bottom: 9px; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.tgrid {
  margin-top: 40px;
  columns: 3;
  column-gap: 26px;
}
@media (max-width: 1100px) { .tgrid { columns: 2; } }
@media (max-width: 767px)  { .tgrid { columns: 1; } }

.tcard {
  break-inside: avoid;
  margin: 0 0 26px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 26px 24px;
}
.tcard blockquote {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 0.99rem;
  line-height: 1.62;
}
.tcard blockquote::before { content: "\201C"; }
.tcard blockquote::after  { content: "\201D"; }
.tcard figcaption {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-head);
}
.tcard figcaption b { color: var(--ink-2); font-size: 0.92rem; font-weight: 600; }
.tcard figcaption span { color: var(--ink-3); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Credential list
   -------------------------------------------------------------------------- */
.cred-list { list-style: none; margin: 40px 0 0; padding: 0; }
.cred {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px 24px; flex-wrap: wrap;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cred:first-child { border-top: 1px solid var(--line-soft); }
.cred-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cred-main b {
  font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 600;
  color: var(--ink); line-height: 1.35;
}
.cred-meta {
  font-size: 0.86rem; color: var(--ink-3);
}
.cred-meta span { color: var(--line); margin: 0 4px; }
.cred-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  white-space: nowrap;
  overflow-wrap: anywhere;
  flex: none;
  max-width: 100%;
}
@media (max-width: 575px) {
  .cred-id { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Image placeholders

   Each one shows the filename to create, the pixel size to export at, and
   the alt text to use. When the real artwork exists, replace the whole
   <figure class="ph ..."> block with:

     <img src="/assets/img/content/FILENAME.png"
          alt="Ian Lacovara - DESCRIPTION"
          width="W" height="H" loading="lazy" class="ph-img">

   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(420px 240px at 50% 0%, rgba(221, 173, 67, 0.09), transparent 72%),
    linear-gradient(160deg, var(--panel), var(--bg-2));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(221, 173, 67, 0.13);
  border-radius: calc(var(--r) - 6px);
  pointer-events: none;
}

.ph-inner {
  position: relative; z-index: 1;
  display: grid; gap: 8px; justify-items: center;
}
.ph-tag {
  font-family: var(--font-head);
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(221, 173, 67, 0.34);
  border-radius: 999px;
  padding: 4px 12px;
}
.ph-file {
  font-family: var(--font-head);
  font-size: 0.79rem; font-weight: 600; line-height: 1.45;
  color: var(--ink);
  word-break: break-word; max-width: 44ch;
}
.ph-dim {
  font-size: 0.73rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.ph-alt {
  font-size: 0.77rem; line-height: 1.55;
  color: var(--ink-2); max-width: 50ch;
}

/* Aspect ratios */
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }

/* Real images dropped into a placeholder slot keep the same frame */
.ph-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
}

@media (max-width: 640px) {
  .ph { padding: 16px; }
  .ph--21x9 { aspect-ratio: 16 / 10; }
  .ph--16x9 { aspect-ratio: 4 / 3; }
  .ph-alt { display: none; }
  .ph-file { font-size: 0.73rem; }
}

/* --------------------------------------------------------------------------
   Company mark -- the Ninja Credit Consultants roundel sits on a near-black
   disc, so it needs its own glow to separate from the page background.
   -------------------------------------------------------------------------- */
.co-mark { display: grid; place-items: center; }
.co-mark img {
  width: min(330px, 76%);
  height: auto;
  filter: drop-shadow(0 0 54px rgba(37, 128, 219, 0.34));
}
@media (max-width: 991px) {
  .co-mark { margin-top: 8px; }
  .co-mark img { width: min(220px, 56%); }
}

/* Review card with a visible source and date */
.rev-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}