/* ============================================================
   SPARQIO — components: hero, cards, marquee, portfolio,
   process, founder, forms, CTA band.
   ============================================================ */

/* ---------- Hero ---------- */
.sq-hero {
  /* full-bleed visuals, text vertically centered (operator, CC097.10).
     border-box so 100svh includes the padding: hero = exactly one viewport,
     keeping the AI strip and scroll cue visible at the fold */
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  /* bottom padding reserves room for the 3-row AI strip + scroll cue below
     the centered text block (strip bottom 150px + ~190px tall + air) */
  padding: 120px 0 370px;
  overflow: hidden;
}
#sq-network {
  position: absolute;
  inset: 0;
  /* canvas is a replaced element: inset alone does not stretch it, so it
     must be sized explicitly to overlap the ocean video exactly */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* optional video backdrop (auto-enabled when assets/media/hero-loop.mp4 exists) */
.sq-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sq-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 60%, transparent 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%);
}
/* the live canvas golden-nodes network (angular clusters) is the layer
   above the ocean loop, at near-full strength */
.sq-hero.has-video #sq-network { opacity: 0.9; }

/* drifting gold bloom layers behind everything */
.sq-hero-bloom {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  top: -18vmax;
  right: -14vmax;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  filter: blur(10px);
  animation: sq-bloom-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
.sq-hero-bloom--2 {
  width: 44vmax;
  height: 44vmax;
  top: auto;
  right: auto;
  bottom: -20vmax;
  left: -12vmax;
  opacity: 0.7;
  animation-duration: 34s;
  animation-delay: -12s;
}
@keyframes sq-bloom-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7vmax, 5vmax, 0) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .sq-hero-bloom { animation: none; } }

/* decode line: mono technical line that scrambles into place */
.sq-decode {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.4rem;
  min-height: 1.2em;
  white-space: nowrap;
}
@media (max-width: 600px) { .sq-decode { font-size: 0.6rem; letter-spacing: 0.22em; white-space: normal; } }
/* .sq-hero is a flex parent: force the container to fill to the shared
   1200px grid instead of shrink-wrapping, so hero text left-aligns with
   the header and footer logos */
.sq-hero .sq-container { z-index: 2; width: 100%; }
/* hero text: aligned to the container's left edge (same margin as the header
   logo) and spread with an even vertical rhythm */
.sq-hero-inner { max-width: 1120px; }
/* one clean phrase per line (About-style): sized so the longest phrase
   never wraps on desktop */
.sq-hero h1 { font-size: clamp(1.9rem, 3.3vw, 3.05rem); margin-bottom: 0; }
.sq-hero .sq-decode { margin-bottom: 1.2rem; }

.sq-hero h1 .line { display: block; overflow: hidden; }
.sq-hero h1 .line > span { display: inline-block; }
/* during the decode, keep desktop lines from re-wrapping as glyph widths jitter;
   mobile keeps natural wrap (lines are longer than the viewport there) */
@media (min-width: 900px) { .sq-hero h1 .line { white-space: nowrap; } }
.sq-hero .sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 700px;
  margin: 1.8rem 0 1.8rem;
}
.sq-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* AI platform strip pinned above the scroll cue, centered */
.sq-ailogos {
  position: absolute;
  bottom: 150px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 44px);
}
.sq-ailogos .lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.sq-ailogos .lbl .io-node { width: 10px; height: 10px; border-width: 1.5px; }
.sq-ailogos .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.2rem;
  row-gap: 1.2rem;
}
.sq-ailogos .row + .row { margin-top: 1.6rem; }
.sq-ailogos .ai-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.sq-ailogos .ai-item:hover { color: var(--accent-text); }
.sq-ailogos .ai-item svg { height: 30px; width: auto; display: block; }
.sq-ailogos .ai-item--mark svg { height: 28px; }
.sq-ailogos .ai-item .nm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
}
.sq-ailogos .ai-item .io-node { width: 12px; height: 12px; border-width: 1.5px; }
/* shorter desktop viewports: compact strip so three rows never crowd the
   hero copy */
@media (max-height: 900px) {
  .sq-hero { padding-bottom: 320px; }
  .sq-ailogos .row + .row { margin-top: 0.9rem; }
  .sq-ailogos .ai-item svg { height: 24px; }
  .sq-ailogos .ai-item--mark svg { height: 22px; }
  .sq-ailogos .ai-item .nm { font-size: clamp(0.95rem, 1.2vw, 1.05rem); }
}
@media (max-height: 760px), (max-width: 700px) { .sq-ailogos { display: none; } }

.sq-scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
}
.sq-scroll-cue::after {
  content: '';
  width: 1px; height: 44px;
  background: linear-gradient(var(--gold), transparent);
  animation: sq-cue 2.2s var(--ease) infinite;
}
@keyframes sq-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Stats / counters ---------- */
.sq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sq-stat { border-left: 2px solid var(--gold-line); padding-left: 1.4rem; }
.sq-stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  display: flex; align-items: baseline;
}
.sq-stat .num .suffix { color: var(--accent-text); font-size: 0.6em; margin-left: 2px; }
.sq-stat .lbl { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; }
@media (max-width: 800px) { .sq-stats { grid-template-columns: repeat(2, 1fr); } }
.sq-stats--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .sq-stats--four { grid-template-columns: repeat(2, 1fr); } }
.sq-page-hero .sq-stats--hero { margin-top: 2rem; max-width: 760px; }
.sq-page-hero .sq-stats--hero .num { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.sq-chips { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sq-chips .sq-chip .pts { font-family: var(--font-mono); color: var(--accent-text); margin-left: 6px; }
.sq-split--top { align-items: start; }
.sq-panel h4 { margin: 0 0 0.6rem; }

/* ---------- Product showcase cards ---------- */
.sq-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.sq-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 2.1rem 2.1rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.sq-card:hover, .sq-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold-line), 0 12px 44px var(--glow);
}
.sq-card .idx {
  font-family: var(--font-mono);
  color: var(--accent-text);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.2rem;
}
.sq-card .idx .io-node { width: 11px; height: 11px; border-width: 1.5px; transition: transform 0.3s var(--ease); }
.sq-card:hover .idx .io-node { transform: scale(1.35); box-shadow: 0 0 14px var(--glow); }
.sq-card h3 { margin-bottom: 0.5rem; }
.sq-card .tagline { color: var(--muted); margin-bottom: 0; }
.sq-card .more {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: max-height 0.5s var(--ease), margin 0.5s var(--ease);
}
.sq-card.open .more { max-height: 420px; margin-top: 1.1rem; flex: 1; }
.sq-card .more p { color: var(--text); font-size: 0.97rem; }
.sq-card .more .sq-btn { margin-top: auto; align-self: flex-start; }
.sq-card .expand {
  position: absolute;
  top: 1.7rem; right: 1.7rem;
  width: 30px; height: 30px;
  border: 1.5px solid var(--panel-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.35s var(--ease), border-color 0.35s, color 0.35s;
  background: none;
  cursor: pointer;
}
.sq-card.open .expand { transform: rotate(45deg); border-color: var(--gold); color: var(--accent-text); }
@media (max-width: 800px) { .sq-cards { grid-template-columns: 1fr; } }
/* six-card showcase: 3-up on wide screens, products row over services row */
@media (min-width: 1100px) { .sq-cards--six { grid-template-columns: repeat(3, 1fr); } }

/* showcase card titles carry the gold accent */
.sq-cards--six .sq-card h3 { color: var(--accent-text); }

/* ---------- Products catalog (/products/) ---------- */
/* 3-up on wide screens, 2-up default, 1-up mobile (inherited from .sq-cards) */
@media (min-width: 1100px) { .sq-cards--products { grid-template-columns: repeat(3, 1fr); } }
/* gold title, but preserve brand casing (orbiDesk, Web2AI) — override the
   global heading capitalize rule for this catalog only */
.sq-cards--products .sq-card h3 { color: var(--accent-text); text-transform: none; }
/* category + status chips: always visible so a card is scannable unexpanded */
.sq-card .sq-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.sq-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  display: inline-flex; align-items: center; gap: 0.4rem;
  white-space: nowrap;
}
.sq-chip--cat { color: var(--muted); }
.sq-chip--cat .io-node { width: 8px; height: 8px; border-width: 1.5px; }
.sq-chip--status {
  text-transform: uppercase;
  color: var(--accent-text);
  border-color: var(--gold-line);
  background: var(--gold-soft);
}
/* expand affordance: with no outbound links, this tells a visitor the card
   opens to a case study. Hidden once the card is open (the prose replaces it). */
.sq-cards--products .sq-card-cue {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 1.1rem;
  transition: color 0.3s var(--ease);
}
.sq-cards--products .sq-card-cue .io-node { width: 8px; height: 8px; border-width: 1.5px; }
.sq-cards--products .sq-card:hover .sq-card-cue,
.sq-cards--products .sq-card:focus-within .sq-card-cue { color: var(--accent-text); }
.sq-cards--products .sq-card.open .sq-card-cue { display: none; }

/* one full sentence per line on desktop; mobile wraps naturally */
@media (min-width: 900px) { .sq-oneline { white-space: nowrap; max-width: none; } }

/* centered section headers (operator: showcase / proof / work / process) */
.sq-center { text-align: center; }
.sq-label.sq-center { justify-content: center; }
p.sq-center, .sq h2.sq-center { margin-left: auto; margin-right: auto; }

/* hosting-clients reassurance line under the showcase grid
   (.sq p selector qualified to win the base paragraph margin rule) */
.sq p.sq-clients-note {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--heading);
  margin: 3.2rem auto 0;
}
/* single line on desktop; natural wrap on small screens where it can't fit */
@media (min-width: 900px) { .sq p.sq-clients-note { white-space: nowrap; } }

/* ---------- Split editorial blocks (problem / security / people) ---------- */
.sq-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* .rev: panel is first in DOM; desktop AND mobile read text first, panel second */
.sq-split.rev > :first-child { order: 2; }
@media (max-width: 900px) { .sq-split { grid-template-columns: 1fr; } }

.sq-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  box-shadow: var(--shadow);
}

/* checklist with io-node markers */
.sq-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.sq-list li { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.85rem; }
.sq-list li .io-node { margin-top: 6px; width: 11px; height: 11px; border-width: 1.5px; }

/* static client logo display (mirrors the AI strip treatment) */
.sq-clients {
  padding: 2.4rem clamp(20px, 4vw, 44px);
  text-align: center;
}
.sq-clients .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem) 1.6rem;
  justify-items: center;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.sq-clients .grid .brand {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sq-clients .grid .brand--img img { max-width: min(160px, 100%); object-fit: contain; }
@media (max-width: 900px) { .sq-clients .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .sq-clients .grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
  .sq-clients .grid .brand { height: 52px; }
}
.sq-clients .brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.3s var(--ease);
}
.sq-clients .brand:hover { color: var(--accent-text); }
.sq-clients .brand .io-node { width: 9px; height: 9px; border-width: 1.5px; opacity: 0.5; }
.sq-clients .brand--img img {
  height: 30px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  opacity: 0.7;
  filter: grayscale(1) brightness(0) invert(0.88);
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
:root[data-theme='light'] .sq-clients .brand--img img {
  filter: grayscale(1) brightness(0) opacity(0.75);
}
.sq-clients .brand--img img:hover {
  opacity: 1;
  filter: brightness(0) invert(72%) sepia(55%) saturate(700%) hue-rotate(8deg) brightness(0.95);
}

/* ---------- GH-600 lessons (page-masterclass.php, data/gh600-modules.php) ----------
   Click-to-play: the poster + play button stand in for the YouTube iframe
   until the visitor asks for it (no third-party requests on page load). */
.sq-lessons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.8rem; margin-top: 2.5rem; }
@media (max-width: 800px) { .sq-lessons { grid-template-columns: 1fr; } }
.sq-lesson {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--shadow);
}
.sq-lesson .sq-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.sq-lesson .sq-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.sq-lesson .sq-video:hover img { transform: scale(1.03); }
.sq-lesson .sq-video .sq-lesson-plate { display: none; } /* day-mode engraved plate; day.css shows it */
.sq-lesson .sq-video .play {
  /* bottom-right corner: the posters carry their title top-left */
  position: absolute; right: 18px; bottom: 18px;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sq-lesson .sq-video .play svg { width: 24px; height: 24px; margin-left: 3px; }
.sq-lesson .sq-video:hover .play { background: var(--gold); color: var(--ink); transform: scale(1.08); }
.sq-lesson .sq-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sq-lesson .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }
.sq-lesson .idx { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.5rem; }
.sq-lesson .idx .io-node { width: 11px; height: 11px; border-width: 1.5px; }
.sq-lesson h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 0.55rem 0 0.35rem; }
.sq-lesson .tagline { color: var(--muted); margin: 0 0 0.5rem; }
.sq-lesson details { margin-top: 0.3rem; }
.sq-lesson summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.sq-lesson summary::-webkit-details-marker { display: none; }
.sq-lesson summary::before { content: '+'; font-weight: 700; }
.sq-lesson details[open] summary::before { content: '\2212'; }
.sq-lesson .chapters { list-style: none; padding: 0; margin: 0.7rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.92rem; }
@media (max-width: 560px) { .sq-lesson .chapters { grid-template-columns: 1fr; } }
.sq-lesson .chapters button {
  background: none; border: 0; padding: 0.15rem 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  display: flex; gap: 0.6rem; align-items: baseline;
  transition: color 0.2s var(--ease);
}
.sq-lesson .chapters button:hover { color: var(--accent-text); }
.sq-lesson .chapters .t { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-text); min-width: 3.6em; }

/* ---------- Process steps ---------- */
.sq-process { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
.sq-process::before {
  content: '';
  position: absolute;
  top: 26px; left: 4%; right: 4%;
  height: 1px;
  background: var(--gold-line);
  transform: scaleX(0);
  transform-origin: left;
}
.sq-process.drawn::before { transition: transform 1.6s var(--ease); transform: scaleX(1); }
.reduced-motion .sq-process::before { transform: none !important; }
.sq-step { position: relative; padding-top: 62px; }
.sq-step .dot {
  position: absolute; top: 16px; left: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.sq-step .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.sq-step .n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--accent-text); }
.sq-step h4 { margin: 0.3rem 0 0.4rem; font-size: 1.05rem; }
.sq-step p { color: var(--muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 900px) {
  .sq-process { grid-template-columns: 1fr; gap: 2rem; }
  .sq-process::before { top: 0; bottom: 0; left: 10px; right: auto; width: 1px; height: auto; transform: scaleY(0); }
  .sq-process.drawn::before { transform: scaleY(1); }
  .sq-step { padding: 0 0 0 48px; }
  .sq-step .dot { top: 2px; }
}

/* ---------- Portfolio ---------- */
.sq-filter { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 2.4rem; }
.sq-filter button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.sq-filter button:hover { border-color: var(--gold); color: var(--accent-text); }
.sq-filter button.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.sq-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.sq-pitem {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.sq-pitem:hover { transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--shadow); }
.sq-pitem .thumb { aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--bg-elev); }
.sq-pitem .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
  transition: transform 0.8s var(--ease);
}
.sq-pitem:hover .thumb img { transform: scale(1.045); }
.sq-pitem .meta { padding: 1.1rem 1.3rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sq-pitem .meta h3 { font-size: 1.02rem; margin: 0; }
.sq-pitem .meta .cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 1000px) { .sq-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sq-pgrid { grid-template-columns: 1fr; } }

/* archive strip (older work) */
.sq-archive-note { color: var(--muted); font-size: 0.95rem; margin: 3rem 0 1.5rem; }
/* products page: the operating-stack strip sits centered with air above
   (.sq p qualifier so the margin beats the global .sq p rule) */
.sq p.sq-archive-note--center { text-align: center; margin-top: 5rem; }

/* ---------- CTA band ---------- */
.sq-cta-band {
  background:
    radial-gradient(ellipse 70% 120% at 50% 130%, var(--gold-soft), transparent),
    var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: calc(var(--radius) + 6px);
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.sq-cta-band h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.sq-cta-band .sub { color: var(--muted); max-width: 560px; margin: 0 auto 2.2rem; }

/* ---------- Forms ---------- */
.sq-form { display: grid; gap: 1.1rem; max-width: 640px; }
.sq-form label { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; display: block; margin-bottom: 0.4rem; color: var(--heading); }
.sq-form input, .sq-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elev);
  color: var(--text);
  border: 1.5px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sq-form input:focus, .sq-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.sq-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.sq-form-msg { border-radius: 10px; padding: 1rem 1.2rem; font-size: 0.97rem; }
.sq-form-msg.ok { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--heading); }
.sq-form-msg.err { background: rgba(200, 60, 60, 0.12); border: 1px solid rgba(200, 60, 60, 0.4); }

/* ---------- Page hero (inner pages) ---------- */
.sq-page-hero { padding: 180px 0 70px; position: relative; overflow: hidden; }
.sq-page-hero h1 { font-size: clamp(1.9rem, 3.3vw, 3.05rem); }
@media (min-width: 900px) { .sq-page-hero h1 { white-space: nowrap; } }
.sq-page-hero .sub { color: var(--muted); font-size: 1.15rem; max-width: 640px; }
.sq-page-hero .sq-container { position: relative; z-index: 2; }

/* golden-nodes video backdrop on subpage heroes (auto when nodes-loop.mp4 exists) */
.sq-page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
}
.sq-page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 70%, transparent 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 45%);
}
/* elements that exist only for the day-mode design (day.css shows them) */
.sq-day-only { display: none; }

/* ---------- Day mode (Cobalt Engraving Editorial, 11-09-26) ----------
   The engraving artwork IS the atmosphere: no gold canvas, no blooms.
   Subpage heroes show a still (.sq-page-hero-art) instead of the nodes
   video; the home hero swaps to day-hero-loop.mp4 via sqSyncMedia. */
.sq-page-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;   /* the plates keep their left third empty for the title */
  z-index: 0;
  display: none;
}
:root[data-theme='light'] .sq-page-hero-art { display: block; }
:root[data-theme='light'] .sq-page-hero-video { display: none; }
:root[data-theme='light'] #sq-network,
:root[data-theme='light'] .sq-hero-bloom { display: none; }
:root[data-theme='light'] .sq-hero-video { opacity: 1; }
:root[data-theme='light'] .sq-hero-scrim {
  background:
    linear-gradient(90deg, rgba(246, 241, 228, 0.94) 0%, rgba(246, 241, 228, 0.6) 42%, rgba(246, 241, 228, 0) 72%),
    linear-gradient(0deg, #F6F1E4 0%, rgba(246, 241, 228, 0) 26%);
}
:root[data-theme='light'] .sq-page-hero-scrim {
  background:
    linear-gradient(90deg, rgba(246, 241, 228, 0.92) 0%, rgba(246, 241, 228, 0.5) 52%, rgba(246, 241, 228, 0) 78%),
    linear-gradient(0deg, #F6F1E4 2%, rgba(246, 241, 228, 0) 42%);
}
:root[data-theme='light'] .sq-page-hero { padding-top: 200px; padding-bottom: 110px; }
:root[data-theme='light'] .sq-clients .brand--img img { filter: grayscale(1) brightness(0) opacity(0.62); }

/* ---------- Pricing tiers (Web2AI) ---------- */
.sq-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.sq-tier {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.sq-tier:hover { transform: translateY(-5px); border-color: var(--gold-line); box-shadow: var(--shadow); }
.sq-tier.pop { border-color: var(--gold); }
.sq-tier .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.sq-tier .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--heading); }
.sq-tier .price small { font-size: 1rem; color: var(--muted); font-weight: 400; }
.sq-tier ul { flex: 1; }
.sq-tier .sq-btn { justify-content: center; }
@media (max-width: 900px) { .sq-tiers { grid-template-columns: 1fr; } }

/* ---------- Timeline (About) ---------- */
.sq-timeline { position: relative; margin-top: 2.5rem; padding-left: 30px; }
.sq-timeline::before {
  content: '';
  position: absolute; left: 10px; top: 6px; bottom: 6px;
  width: 1px; background: var(--gold-line);
}
.sq-era { position: relative; margin-bottom: 2.2rem; }
.sq-era::before {
  content: '';
  position: absolute; left: -26px; top: 7px;
  width: 12px; height: 12px;
  border: 2px solid var(--gold); border-radius: 50%;
  background: var(--bg);
}
.sq-era .y { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--accent-text); }
.sq-era h4 { margin: 0.25rem 0 0.35rem; }
.sq-era p { color: var(--muted); margin: 0; font-size: 0.97rem; }

/* long-form page content (Legal etc.): normal reading scale, not display scale */
.sq-content { font-size: 1rem; max-width: 720px; }
/* legal + generic pages: content sits in a centered panel box */
.sq-content--boxed { max-width: 860px; margin: 0 auto; }
.sq-content--boxed > :first-child { margin-top: 0; }
.sq-content h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.sq-content h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.sq-content hr { border: 0; border-top: 1px solid var(--panel-border); margin: 2.5rem 0; }

/* portfolio grid without links: keep the hover polish, drop the pointer */
.sq-pitem--static { cursor: default; }

/* services overview: whole card is the link */
.sq-cards--services { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sq-cards--services { grid-template-columns: 1fr; } }
a.sq-card--link { text-decoration: none; color: inherit; display: block; }
a.sq-card--link .sq-card-cue { display: inline-block; margin-top: 0.8rem; }
.sq-card-plate { display: none; }

/* generic page (legal): sticky index beside the document, in both modes (operator, 12-09-26) */
.sq-content [id] { scroll-margin-top: 110px; }
.sq-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
.sq-legal .sq-content--boxed { margin: 0; }
.sq-legal-index { position: sticky; top: 110px; }
.sq-legal-index-title {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-text);
  border-bottom: 1px solid var(--panel-border); padding-bottom: 8px; margin-bottom: 10px;
}
.sq-legal-index ul { list-style: none; margin: 0; padding: 0; }
.sq-legal-index li.lvl2 { margin-top: 12px; }
.sq-legal-index li.lvl2 a { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.sq-legal-index li.lvl3 a {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  display: block; padding: 3px 0 3px 14px; border-left: 1px solid var(--panel-border);
}
.sq-legal-index a { text-decoration: none; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.sq-legal-index a:hover { color: var(--accent-text); }
.sq-legal-index li.lvl3 a:hover { border-left-color: var(--gold); }
.sq-content h2:not(:first-child) { border-top: 1px solid var(--panel-border); padding-top: 2rem; margin-top: 2.8rem; }
.sq-content h3 {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--accent-text);
  border-bottom: 1px solid var(--panel-border); padding-bottom: 6px; margin: 1.8rem 0 0.8rem;
}
@media (max-width: 900px) {
  .sq-legal { grid-template-columns: 1fr; gap: 24px; }
  .sq-legal-index { position: static; }
  .sq-legal-index ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .sq-legal-index li.lvl2 { flex-basis: 100%; margin-top: 8px; }
  .sq-legal-index li.lvl3 a { border-left: 0; padding: 2px 0; }
}

/* portfolio: five items first, more on request; room before the archive note */
.sq-pitem--beyond { display: none; }
.sq-more { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 2.6rem; }
.sq-more[hidden] { display: none; }
.sq-more-count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.sq-pgrid ~ .sq-archive-note { margin-top: 3.5rem; }

/* centred highlight box (About: existing clients) */
.sq-panel--center { text-align: center; }
.sq-panel--center > h3 { text-align: center; }

/* button pairs inside a closing band sit centred in both modes */
.sq-cta-band .sq-hero-ctas { justify-content: center; }

/* inner-page heroes carry no eyebrow caption in either mode (same text in both modes, operator 12-09-26) */
.sq-page-hero .sq-label { display: none; }
.sq-page-hero h1 { margin-top: 0; }

/* landing hero buttons in both modes */
.sq-hero-day-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1.8rem; }

/* decor band between sections */
.sq-plate-band { margin: 0; }

/* no scroll cue in either mode (day mode is the reference for visible text, operator 12-09-26) */
.sq-scroll-cue { display: none; }