/* ==========================================================================
   Cybernaut Studio — Design System
   Ported from the approved static mockups. This is the single source of
   truth for colors, type, and shared components across every template.
   ========================================================================== */

:root {
  --brand: #2F6FED;
  --brand-dark: #0B2A57;
  --brand-darker: #081D3C;
  --brand-light: #6FB3F0;
  --ink: #15181E;
  --mute: #5B6472;
  --paper: #F6F8FB;
  --panel: #FFFFFF;
  --hairline: #E2E6ED;
  --font-display: 'Newsreader', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --max-width: 1240px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --radius: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-family: var(--font-body); font-weight: 600; }
em { font-style: italic; color: var(--brand); }
p { margin: 0 0 1em; color: var(--mute); }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--dark { background: var(--brand-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #FFFFFF; }
.section--dark p { color: #AEC2E3; }

/* Pill / eyebrow label */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--brand);
  background: rgba(47,111,237,0.1);
  padding: 0.45em 1em;
  border-radius: 999px;
  margin-bottom: 1em;
}
.pill::before { content: '\2726'; font-size: 0.75em; }
.section--dark .pill { background: rgba(255,255,255,0.1); color: var(--brand-light); }
.coord-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--mute); }

/* Scroll-reveal animation, paired with main.js */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(246,248,251,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.nav__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink); }
.nav__logo span { color: var(--brand); }
.nav__links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; font-weight: 500; }
.nav__links a:hover { color: var(--brand); }
.nav__cta { background: var(--brand); color: #fff; padding: 0.7em 1.4em; border-radius: 999px; font-weight: 600; font-size: 0.9rem; transition: background 0.2s; }
.nav__cta:hover { background: var(--brand-dark); }
@media (max-width: 780px) { .nav__links { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.92rem; padding: 0.9em 1.7em; border-radius: 999px; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn--ghost { border: 1.5px solid var(--hairline); color: var(--ink); background: var(--panel); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.section--dark .btn--ghost { border-color: rgba(255,255,255,0.25); color: #fff; background: transparent; }
.section--dark .btn--ghost:hover { border-color: var(--brand-light); color: var(--brand-light); }
.btn--white { background: #fff; color: var(--brand-dark); }
.btn--white:hover { background: var(--brand-light); color: #fff; }
.btn--sm { padding: 0.6em 1.2em; font-size: 0.82rem; }

/* Cards, shared pattern used across service tiers, projects, articles */
.card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem; }

/* Full-bleed CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius); }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-band__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,29,60,0.75) 0%, rgba(8,29,60,0.92) 100%); z-index: 1; }
.cta-band__content { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; color: #fff; }
.cta-band__content h2 { color: #fff; }
.cta-band__content p { color: #C3D2EA; }
.cta-band__info { display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 2.5rem; flex-wrap: wrap; }
.cta-band__info-item { text-align: center; }
.cta-band__info-item strong { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; color: #fff; }
.cta-band__info-item span { font-size: 0.78rem; color: #9FB3D6; }

/* Footer */
.footer { background: var(--brand-darker); color: #C3D2EA; padding: 3.5rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #fff; }
.footer__logo span { color: var(--brand-light); }
.footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.6rem; }
.footer a { color: #A9BCDA; font-size: 0.9rem; }
.footer a:hover { color: var(--brand-light); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.8rem; color: #7E93B8; }

/* Floating WhatsApp button, site-wide via footer.php */
.wa-float { position: fixed; bottom: calc(1.5rem + var(--cookie-banner-height, 0px)); right: 1.5rem; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4); transition: transform 0.15s ease, bottom 0.2s ease; }
.wa-float:hover { transform: scale(1.06); }
@media (max-width: 500px) { .wa-float { width: 52px; height: 52px; bottom: calc(1rem + var(--cookie-banner-height, 0px)); right: 1rem; } }

/* NOTE FOR JJ: this is the shared foundation only, nav/buttons/cards/footer/CTA band.
   Page-specific styles (hero variants, service card grids, the code comparison,
   FAQ accordions, etc.) still need to be ported over from the individual mockup
   files as we build each template. Add them below this line, organized by
   the template they belong to, so this file stays readable as it grows. */

/* ==========================================================================
   Homepage-specific styles (front-page.php)
   ========================================================================== */

.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__trust { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__trust-item { font-size: 0.85rem; color: var(--mute); display: flex; align-items: center; gap: 0.5em; }
.hero__photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11,42,87,0.35); aspect-ratio: 4/3.4; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* This was the actual root cause of the floating cards not appearing:
   they're position:absolute, which anchors to the nearest ancestor that
   has position set to anything other than the default "static". Without
   this rule, the browser was anchoring them to the page itself instead
   of the photo, or clipping/hiding them unpredictably. */
.hero__photo-wrap { position: relative; }

.float-card { position: absolute; background: var(--panel); border-radius: 14px; box-shadow: 0 16px 36px -12px rgba(11,42,87,0.28); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.8rem; }
.float-card--bottom-left { bottom: -1.5rem; left: -1.5rem; }
.float-card--top-right { top: 1.5rem; right: -1.5rem; }
@media (max-width: 640px) { .float-card--bottom-left { left: 0.5rem; } .float-card--top-right { right: 0.5rem; } }
.float-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float-card__title { font-weight: 600; font-size: 0.95rem; margin: 0; }
.float-card__sub { font-size: 0.78rem; color: var(--mute); margin: 0; }

.marquee { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--panel); padding: 1rem 0; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee-scroll 32s linear infinite; }
.marquee__item { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); white-space: nowrap; display: flex; align-items: center; gap: 0.6em; }
.marquee__item::before { content: '\2726'; color: var(--brand); font-size: 0.6rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 300px; display: flex; flex-direction: column; background: linear-gradient(155deg, #10305E 0%, var(--brand-darker) 100%); box-shadow: 0 20px 40px -18px rgba(0,0,0,0.4); }
.svc-card__glow { position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(47,111,237,0.35) 0%, transparent 70%); z-index: 0; }
.svc-card__body { position: relative; z-index: 2; padding: 1.75rem; color: #fff; display: flex; flex-direction: column; height: 100%; }
.svc-card__num { font-family: var(--font-mono); font-size: 0.68rem; color: var(--brand-light); letter-spacing: 0.05em; margin-bottom: 1rem; }
.svc-card__icon-wrap { width: 48px; height: 48px; border-radius: 12px; background: rgba(47,111,237,0.18); border: 1px solid rgba(47,111,237,0.3); display: flex; align-items: center; justify-content: center; color: var(--brand-light); margin-bottom: 1.25rem; }
.svc-card__body h3 { color: #fff; }
.svc-card__price { font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand-light); margin-bottom: 0.6em; }
.svc-card__body p { color: #A9BCDA; font-size: 0.85rem; }
.svc-card__spacer { flex: 1; }
.svc-card__link { display: inline-flex; font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--brand); padding: 0.6em 1.1em; border-radius: 999px; align-self: flex-start; }

.feat-list { margin-top: 2rem; }
.feat-item { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--hairline); align-items: center; }
.feat-item:last-child { border-bottom: 1px solid var(--hairline); }
.feat-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brand); font-weight: 600; }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card { border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 40px -18px rgba(11,42,87,0.25); }
.proj-card__photo { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.proj-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.proj-card__info { background: var(--brand-darker); padding: 1.5rem; color: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.proj-card__info h3 { color: #fff; }
.proj-card__info p { color: #A9BCDA; font-size: 0.85rem; }

/* Built Properly split + badge row */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .split2 { grid-template-columns: 1fr; } }
.split2__photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -18px rgba(11,42,87,0.3); aspect-ratio: 4/3; }
.split2__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.badge-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 780px) { .badge-row { grid-template-columns: repeat(2, 1fr); } }
.badge-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem 1.25rem; text-align: center; }
.badge-card__icon { display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 0.5rem; }
.badge-card__label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.2rem; }
.badge-card__sub { font-size: 0.78rem; color: var(--mute); margin: 0; }

/* Founder teaser */
.founder-card { display: flex; align-items: center; gap: 1.5rem; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.75rem; margin-top: 2rem; flex-wrap: wrap; }
.founder-card__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.founder-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder-card__text { flex: 1; min-width: 200px; }
.founder-card__text h3 { margin-bottom: 0.15em; }
.founder-card__text p { margin: 0; font-size: 0.88rem; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { cursor: pointer; padding: 1.25rem 0; font-weight: 600; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--brand); font-weight: 400; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1.25rem; margin: 0; font-size: 0.92rem; }

/* ==========================================================================
   Static Starter page-specific styles (page-static-starter.php)
   ========================================================================== */

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: 0.75em; padding: 0.7em 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.check-list li:last-child { border-bottom: none; }
.check-list li svg { color: var(--brand); flex-shrink: 0; margin-top: 0.15em; }

.price-panel { border-radius: var(--radius); background: linear-gradient(155deg, #10305E 0%, var(--brand-darker) 100%); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; color: #fff; }
.price-panel .unit { font-family: var(--font-mono); font-size: 0.78rem; color: #9FB3D6; text-transform: uppercase; letter-spacing: 0.05em; }
.price-panel .amount { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.8rem); color: var(--brand-light); margin: 0.2em 0; }

/* ==========================================================================
   WordPress page-specific styles (page-wordpress.php)
   ========================================================================== */

.callout { border-radius: var(--radius); background: linear-gradient(155deg, #10305E 0%, var(--brand-darker) 100%); padding: clamp(1.75rem, 4vw, 2.5rem); display: flex; gap: 1.5rem; align-items: flex-start; color: #fff; }
.callout__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(47,111,237,0.25); border: 1px solid rgba(111,179,240,0.35); display: flex; align-items: center; justify-content: center; color: var(--brand-light); flex-shrink: 0; }
.callout h3 { color: #fff; margin-bottom: 0.5em; }
.callout p { color: #B7C7E5; margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   Custom Software page-specific styles (page-custom-software.php)
   ========================================================================== */

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.cap-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .cap-grid--two { grid-template-columns: 1fr; } }
.cap-card--about { padding: 1.75rem; }
.cap-card--about h3 { margin-bottom: 0.3em; font-size: 1.05rem; }
.cap-card--about p { font-size: 0.9rem; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
.cap-card__icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(47,111,237,0.1); display: flex; align-items: center; justify-content: center; color: var(--brand); flex-shrink: 0; }
.cap-card h3 { margin-bottom: 0.2em; font-size: 1rem; }
.cap-card p { margin: 0; font-size: 0.85rem; }

/* ==========================================================================
   Services hub page-specific styles (page-services.php)
   ========================================================================== */

/* Package cards (reused visual language from Home's service tiers) */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 980px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; display: flex; flex-direction: column; background: linear-gradient(155deg, #10305E 0%, var(--brand-darker) 100%); box-shadow: 0 20px 40px -18px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); }
.pkg-card__body { position: relative; z-index: 2; padding: 1.75rem; color: #fff; display: flex; flex-direction: column; height: 100%; }
.pkg-card__icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: rgba(47,111,237,0.18); border: 1px solid rgba(47,111,237,0.3); display: flex; align-items: center; justify-content: center; color: var(--brand-light); margin-bottom: 1.1rem; }
.pkg-card__body h3 { color: #fff; margin-bottom: 0.2em; }
.pkg-card__price { font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand-light); margin-bottom: 0.6em; }
.pkg-card__body p { color: #A9BCDA; font-size: 0.85rem; margin-bottom: 1rem; }
.pkg-card__spacer { flex: 1; }
.pkg-card__link { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--brand); padding: 0.6em 1.1em; border-radius: 999px; align-self: flex-start; }
.pkg-card__link:hover { background: var(--brand-light); }

/* À la carte item cards */
.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 780px) { .item-grid { grid-template-columns: 1fr; } }
.item-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem; }
.item-card__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.6rem; }
.item-card__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(47,111,237,0.1); display: flex; align-items: center; justify-content: center; color: var(--brand); flex-shrink: 0; }
.item-card h3 { margin: 0; font-size: 1rem; }
.item-card p { font-size: 0.88rem; margin-bottom: 0.75rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(47,111,237,0.08); color: var(--brand); padding: 0.3em 0.7em; border-radius: 999px; }

/* Centered hero modifier, for pages like Services that don't use the
   two-column split layout. Scoped as its own class so it doesn't affect
   the shared .hero rules that Home and the four service pages rely on. */
.hero--centered { text-align: center; }
.hero--centered h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero--centered p { max-width: 50ch; margin-left: auto; margin-right: auto; font-size: 1.08rem; }

/* ==========================================================================
   About page-specific styles (page-about.php)
   ========================================================================== */

/* Portrait hero, distinct from the landscape split-hero used on service pages */
.hero__portrait { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11,42,87,0.35); aspect-ratio: 3/4; }
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hero__grid--portrait { grid-template-columns: 1fr 0.75fr; }
@media (max-width: 900px) { .hero__grid--portrait { grid-template-columns: 1fr; } }

.prose { max-width: 60ch; font-size: 1.05rem; }
.prose p { color: var(--ink); }
.prose p.muted { color: var(--mute); }
.section--dark .prose p { color: #C3D2EA; }

.narrative-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .narrative-split { grid-template-columns: 1fr; } }
.narrative-split__photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -18px rgba(11,42,87,0.3); aspect-ratio: 3/4; position: sticky; top: 100px; }
.narrative-split__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .narrative-split__photo { position: static; aspect-ratio: 16/10; } }

/* ==========================================================================
   Work page-specific styles (page-work.php)
   ========================================================================== */

.status-tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(47,111,237,0.1); color: var(--brand); padding: 0.35em 0.8em; border-radius: 999px; }
.status-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* Project index cards */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } }
.work-card { border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: 0 20px 40px -18px rgba(11,42,87,0.25); transition: transform 0.15s ease; display: flex; flex-direction: column; height: 100%; }
.work-card:hover { transform: translateY(-3px); }
.work-card__photo { height: 220px; overflow: hidden; flex-shrink: 0; }
.work-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.work-card__body { background: var(--panel); border: 1px solid var(--hairline); border-top: none; padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.work-card__body h3 { margin-bottom: 0.4em; color: var(--ink); }
.work-card__body p { font-size: 0.88rem; margin-bottom: 0.75rem; }
.work-card__spacer { flex: 1; }

/* Case study detail sections */
.case-study { border-top: 1px solid var(--hairline); padding-top: clamp(2.5rem, 5vw, 4rem); }
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .case-split { grid-template-columns: 1fr; } }
.case-split__photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -18px rgba(11,42,87,0.3); position: sticky; top: 100px; }
.case-split__photo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .case-split__photo { position: static; } }
.case-split__meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* ==========================================================================
   Contact page-specific styles (page-contact.php)
   ========================================================================== */

.hero__photo--tall { aspect-ratio: 4/4.6; }
.hero__grid--contact { grid-template-columns: 1fr 0.85fr; }
@media (max-width: 900px) { .hero__grid--contact { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border-radius: 14px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; transition: transform 0.15s ease; }
.contact-card:hover { transform: translateY(-2px); }
.contact-card--primary { background: var(--brand); color: #fff; }
.contact-card--primary:hover { background: var(--brand-dark); }
.contact-card--secondary { background: var(--panel); border: 1.5px solid var(--hairline); color: var(--ink); }
.contact-card--secondary:hover { border-color: var(--brand); }
.contact-card__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card--primary .contact-card__icon { background: rgba(255,255,255,0.2); }
.contact-card--secondary .contact-card__icon { background: rgba(47,111,237,0.1); color: var(--brand); }
.contact-card__label { font-weight: 600; font-size: 0.95rem; margin: 0; color: var(--ink); }
.contact-card--primary .contact-card__label { color: #fff; }
.contact-card--primary .contact-card__sub { color: rgba(255,255,255,0.85); }
.contact-card__sub { font-size: 0.8rem; margin: 0; color: var(--mute); }

/* ==========================================================================
   Legal page styles (page-privacy.php, page-terms.php, page-refund.php,
   page-exchange.php), deliberately plain, a legal document reads like a
   document, not a marketing page.
   ========================================================================== */

.legal-body { max-width: 720px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) 0 5rem; }
.legal-body ul { padding-left: 1.25rem; }
.legal-body li { margin-bottom: 0.5em; }
.legal-body h1, .legal-body h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--ink); }
.legal-body h1 { font-size: clamp(2.1rem, 4.5vw, 2.9rem); }
.legal-body h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.legal-body p, .legal-body li { color: var(--mute); }
.legal-body a { color: var(--brand); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.updated { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mute); margin-bottom: 2rem; }
.callout-note { background: rgba(47,111,237,0.06); border: 1px solid rgba(47,111,237,0.2); border-radius: 12px; padding: 1rem 1.25rem; font-size: 0.88rem; margin: 1.5rem 0; }
.callout-note strong { color: var(--ink); }

/* ==========================================================================
   Resources page-specific styles (page-resources.php)
   ========================================================================== */

.search-bar { max-width: 460px; margin: 2rem auto 0; position: relative; }
.search-bar input { width: 100%; padding: 0.9em 1.2em 0.9em 3em; border-radius: 999px; border: 1.5px solid var(--hairline); font-family: var(--font-body); font-size: 0.95rem; background: var(--panel); color: var(--ink); }
.search-bar input::placeholder { color: var(--mute); }
.search-bar input:focus { outline: none; border-color: var(--brand); }
.search-bar svg { position: absolute; left: 1.1em; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; }

.cat-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.75rem; }
.cat-chip { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.5em 1.1em; border-radius: 999px; border: 1.5px solid var(--hairline); color: var(--mute); background: var(--panel); text-decoration: none; }
.cat-chip--active { background: var(--brand); border-color: var(--brand); color: #fff; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }
.article-card { border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 40px -18px rgba(11,42,87,0.2); background: var(--panel); border: 1px solid var(--hairline); display: flex; flex-direction: column; height: 100%; }
.article-card__top { padding: 1.75rem 1.5rem 0; display: flex; flex-direction: column; flex: 1; }
.article-card__cat { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin-bottom: 0.75rem; }
.article-card h3 { font-size: 1.1rem; margin-bottom: 0.5em; }
.article-card p { font-size: 0.88rem; margin-bottom: 1rem; }
.article-card__spacer { flex: 1; }
.article-card__bottom { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--hairline); margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.article-card__link { font-size: 0.82rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.article-card__link:hover { color: var(--brand-dark); }

.coming-soon-card { border-radius: var(--radius); border: 1.5px dashed var(--hairline); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1.5rem; height: 100%; }
.coming-soon-card__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(47,111,237,0.08); display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 1rem; }
.coming-soon-card h3 { font-size: 1rem; margin-bottom: 0.4em; }
.coming-soon-card p { font-size: 0.85rem; margin: 0; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.page-btn { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; color: var(--ink); border: 1.5px solid var(--hairline); background: var(--panel); }
.page-btn:hover { border-color: var(--brand); color: var(--brand); }
.page-btn--active, .page-btn.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-btn--nav { width: auto; padding: 0 1rem; gap: 0.4rem; }
.page-btn--disabled { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   Single article styles (single.php)
   ========================================================================== */

.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mute); padding: 1.5rem 0 0; }
.breadcrumb a { color: var(--mute); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { margin: 0 0.4em; }

.article-header { padding: 2rem var(--gutter) 2.5rem; max-width: 980px; margin: 0 auto; }
.article-header__cat { margin-bottom: 1rem; }
.article-header h1 { max-width: 22ch; }
.article-header__meta { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; }
.article-header__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.article-header__avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-header__meta-text { font-size: 0.88rem; }
.article-header__meta-text strong { color: var(--ink); display: block; }
.article-header__meta-text span { color: var(--mute); font-size: 0.82rem; }

.featured-image { max-width: 960px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -18px rgba(11,42,87,0.25); aspect-ratio: 16/9; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-layout { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; max-width: 980px; margin: 3rem auto 0; align-items: start; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 100px; }
.toc__label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); margin-bottom: 0.75rem; }
.toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--hairline); }
.toc li { margin-bottom: 0.6rem; }
.toc ul a { display: block; padding-left: 1rem; font-size: 0.85rem; color: var(--mute); border-left: 2px solid transparent; margin-left: -2px; }
.toc ul a:hover, .toc ul a.active { color: var(--brand); border-left-color: var(--brand); text-decoration: none; }
.toc__share { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toc__share a { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--mute); line-height: 0; }
.toc__share a svg { display: block; }
.toc__share a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
@media (max-width: 900px) { .toc { position: static; margin-bottom: 2rem; } .toc ul { display: none; } }

.entry-content { max-width: 680px; font-size: 1.05rem; }

/* Headings inside the article body need real breathing room above them,
   scoped here rather than on the global h2/h3 rules, which are shared
   by pricing panels, section headers, and everywhere else on the site,
   none of which should pick up this spacing. */
.entry-content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.entry-content h3 { margin-top: 2rem; margin-bottom: 0.5rem; }

.entry-content ul, .entry-content ol { padding-left: 1.25rem; margin: 1.25rem 0; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.6em; line-height: 1.6; }
.entry-content li::marker { color: var(--brand); font-weight: 600; }
.entry-content li > ul, .entry-content li > ol { margin: 0.6em 0 0; }

.entry-content strong { color: var(--ink); }

.author-box { max-width: 980px; margin: 3rem auto 0; padding: 1.75rem; background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; display: flex; gap: 1.25rem; align-items: flex-start; }
.author-box__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box h3 { margin-bottom: 0.3em; font-size: 1rem; }
.author-box p { margin: 0; font-size: 0.9rem; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.25rem; text-decoration: none; display: block; }
.related-card:hover { border-color: var(--brand); text-decoration: none; }
.related-card__cat { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); }
.related-card h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0.5em 0 0; }

/* ==========================================================================
   Cookie consent banner (footer.php) — restored, missing from this copy
   ========================================================================== */

.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--brand-darker); color: #C3D2EA; padding: 1rem clamp(1.5rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.3); }
.cookie-banner__text { flex: 1; min-width: 240px; }
.cookie-banner__text p { margin: 0; font-size: 0.85rem; color: #C3D2EA; }
.cookie-banner__text a { color: var(--brand-light); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-banner.is-hidden { display: none; }
@media (max-width: 600px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } .cookie-banner__actions { justify-content: center; } }