/* =====================================================
   ORVANNIS MAIN — v2
   Elite design pass: 3D hovers, deep slate, copper
   ===================================================== */

/* =====================
   LAYOUT UTILITIES
   ===================== */
.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}
.container--normal {
  max-width: var(--w-normal);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}
.container--text {
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}

/* =====================
   3D PERSPECTIVE ENGINE
   Every interactive card lives inside a perspective container.
   ===================== */
.perspective-wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

/* =====================
   CONSTRUCTION NOTICE
   Temporary banner — remove the .construction-notice element from each
   page once the full site (all platform links, etc.) is ready to go live.
   ===================== */
.construction-notice {
  width: 100%;
  background: var(--color-primary);
  color: #FFF8EF;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0.7rem 1.25rem;
  position: relative;
  z-index: 20;
}
.construction-notice p { margin: 0; }
.construction-notice a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.construction-notice a:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .construction-notice { font-size: var(--text-xs); padding: 0.45rem 0.9rem; }
  .construction-notice p { line-height: 1.45; }
  /* Reclaim first-screen space on phones: slimmer brand banner + shorter
     header bar so the hero pitch is visible without scrolling. */
  .banner-img--for-light { height: clamp(56px, 16vw, 90px); }
  .banner-img--for-dark  { height: clamp(46px, 12vw, 72px); }
  .nav-inner { height: 64px; }
}

/* =====================
   SITE-TOP BANNER
   Full lockup (mark + wordmark + tagline) shown full-width above the nav.
   The banner image's own background matches the active theme (cream image
   in light mode, black image in dark mode), so the container background
   just follows --color-bg to stay seamless behind it.
   ===================== */
.site-top-banner {
  width: 100%;
  display: block;
  background: var(--color-bg);
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.banner-img {
  display: none;
  width: 100%;
  max-width: none;
  /* contain (not cover) — the banner's own background already matches the
     page background per theme, so there's no visible letterboxing, but it
     guarantees the whole graphic (icon, wordmark, AND tagline) is always
     fully visible instead of cover cropping the top/bottom off to fill a
     short container. */
  object-fit: contain;
  object-position: center;
}
/* Each variant's height is set independently (rather than width:100%/height:auto)
   because the two source images have different aspect ratios — this keeps both
   scaled to ~60% of their original full-bleed height instead of one looking
   disproportionately smaller than the other. */
.banner-img--for-light { height: clamp(90px, 24vw, 280px); }  /* cream banner, ~2.5:1 source */
.banner-img--for-dark  { height: clamp(70px, 14.7vw, 180px); } /* dark banner, ~4.1:1 source */

[data-theme="dark"]  .banner-img--for-light { display: none; }
[data-theme="dark"]  .banner-img--for-dark  { display: block; }
html:not([data-theme="dark"]) .banner-img--for-light { display: block; }
html:not([data-theme="dark"]) .banner-img--for-dark  { display: none; }

/* =====================
   NAVIGATION
   ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-header--scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: var(--sp-8);
}

.nav-logo-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  text-transform: lowercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-primary);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active { color: var(--color-text); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.btn-theme {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.btn-theme:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
  border-color: var(--color-border);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;  /* 44px = Apple minimum touch target */
  align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--r-md);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--color-bg);
  padding: var(--sp-8);
  flex-direction: column;
  gap: var(--sp-6);
}
.mobile-nav.open { display: flex; }
.mobile-nav-close {
  align-self: flex-end;
  width: 44px; height: 44px;  /* 44px = Apple minimum touch target */
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
}
.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.mobile-nav-links a {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* Compact CTA on mobile: short label ("Book a Call") so the button AND the
     hamburger both fit without overflow. Full label returns on desktop. */
  .nav-cta {
    padding: 0.5rem 0.8rem;
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  .nav-login-wrap { display: none; }
  .nav-inner { gap: var(--sp-3); }
}

/* =====================
   BUTTONS
   ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.625rem var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Shimmer layer on primary */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-primary {
  background: linear-gradient(135deg, var(--copper), var(--copper-muted));
  color: #fff;
  border-color: var(--copper-muted);
  box-shadow: 0 2px 8px var(--color-primary-pale), 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 24px var(--color-primary-glow), 0 2px 6px rgba(0,0,0,0.10);
}
.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-offset);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.btn-lg {
  padding: 0.875rem var(--sp-8);
  font-size: var(--text-base);
  border-radius: var(--r-lg);
}
.btn-sm {
  padding: 0.4rem var(--sp-4);
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
}

/* =====================
   3D CARD SYSTEM
   ===================== */
.card-3d {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  transform: translateY(0) scale(1);
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.32s var(--ease-out);
  will-change: transform;
  cursor: default;
}

@media (hover: hover) {
  .card-3d:hover {
    transform: translateY(-10px) scale(1.012);
    border-color: var(--color-border-strong);
    box-shadow:
      0 20px 48px rgba(42, 39, 32, 0.13),
      0 6px 16px rgba(42, 39, 32, 0.08),
      0 0 0 1px var(--color-primary-pale);
  }
}

/* Card icon */
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--color-primary-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--color-primary);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-3d:hover .card-icon {
  background: var(--color-primary-glow);
  box-shadow: 0 4px 16px var(--color-primary-glow);
}

.card-title {
  font-size: var(--text-md);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
}
.card-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: none;
}

/* ── "What Makes Us Different" cards (About page) ──
   These had no rules at all and were falling back to the browser's default
   bold serif heading font, clashing badly with the rest of the page's type.
   ────────────────────────────────────────────────────────────────────── */
.difference-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}
@media (max-width: 760px) {
  .difference-grid { grid-template-columns: 1fr; }
}
.difference-card {
  padding: var(--sp-8);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}
.difference-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--color-primary-pale);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.difference-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}
.difference-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
}
.difference-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.difference-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-left: var(--sp-5);
  position: relative;
}
.difference-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Copper top-border accent that appears on hover */
.card-3d::after {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), left var(--dur-slow) var(--ease-out), right var(--dur-slow) var(--ease-out);
}
.card-3d:hover::after {
  opacity: 1;
  left: 4%;
  right: 4%;
}

/* =====================
   SECTION HELPERS
   ===================== */
.section {
  padding-block: clamp(var(--sp-12), 8vw, var(--sp-32));
}
.section--tight {
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-20));
}
.section--alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}

/* ── FOUNDER STRIP (homepage, near the top) ── */
.founder-strip-inner {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.founder-strip-body {
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: 1.7;
  margin-top: var(--sp-3);
}
.founder-strip-link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.founder-strip-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── SIMPLE BULLET LISTS (What We Help With / Built for Year 1 / Who We Help) ── */
.simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-8);
}
.simple-list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-8);
}
@media (max-width: 700px) {
  .simple-list--grid { grid-template-columns: 1fr; }
}
.simple-list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
}
.simple-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ── "We don't start with custom software" statement ── */
.no-custom-software {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.5;
  max-width: 56ch;
}

/* ── HOW WE WORK steps ── */
.how-we-work-steps {
  list-style: none;
  margin: var(--sp-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 900px) {
  .how-we-work-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how-we-work-steps { grid-template-columns: 1fr; }
}
.how-we-work-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.how-step-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary-pale);
  font-weight: 600;
}
.how-step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
}
.how-step-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
  display: block;
}
.section-title {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-heading);
  margin-bottom: var(--sp-5);
  line-height: 1.1;
}
.section-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
}
.section-body + .section-body { margin-top: var(--sp-4); }

.copper-rule {
  width: 44px; height: 2.5px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--copper-muted), var(--copper-bright));
  margin-bottom: var(--sp-6);
}
.copper-rule--center { margin-inline: auto; }

/* =====================
   GRIDS
   ===================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =====================
   FORM ELEMENTS
   ===================== */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.7rem var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
  transform: translateY(-1px);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-faint); }

/* =====================
   FOOTER
   ===================== */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--sp-16) var(--sp-10);
  margin-top: var(--sp-24);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-12);
}
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 30ch;
  line-height: 1.7;
  margin-top: var(--sp-4);
}
.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.footer-links a:hover {
  color: var(--color-text);
  padding-left: var(--sp-2);
}
.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer-bottom p { font-size: var(--text-xs); color: var(--color-text-faint); }
.copper-text { color: var(--color-primary); }

/* ── Social icons ── */
.footer-socials {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  background: transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.social-icon:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}

/* ── Admin footer link ── */
.footer-admin-link {
  font-size: var(--text-xs) !important;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.footer-admin-link:hover { opacity: 1; }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* =====================
   PAGE HERO BANNER
   ===================== */
.page-hero {
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-32));
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  overflow: hidden;
}
/* Subtle grain texture overlay */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
}
.page-hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.page-hero-title {
  font-size: var(--text-3xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--sp-6);
  line-height: 1.05;
}
.page-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.6;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* =====================
   SCROLL REVEAL
   ===================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Initial fade-up for hero elements */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUpIn 0.7s var(--ease-out) both; }
.delay-1   { animation-delay: 0.10s; }
.delay-2   { animation-delay: 0.20s; }
.delay-3   { animation-delay: 0.30s; }
.delay-4   { animation-delay: 0.42s; }

/* =====================
   DIVIDER ORNAMENT
   ===================== */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-12);
  color: var(--color-text-faint);
}
.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

/* =====================
   CTA BOX
   ===================== */
.cta-box {
  padding: clamp(var(--sp-10), 6vw, var(--sp-16)) clamp(var(--sp-8), 5vw, var(--sp-16));
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--copper-muted) 30%, var(--copper-bright) 50%, var(--copper-muted) 70%, transparent 95%);
}
.cta-box .section-title { margin-inline: auto; max-width: 22ch; }
.cta-box .section-body  { margin-inline: auto; margin-bottom: var(--sp-8); }
.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ══ STATIONARY LOGO — NAV (cropped 620×100 viewBox, planet + wordmark only) ══ */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo-img {
  display: block;
  height: 52px;   /* 480×88 nav SVG at 52px tall → ~284px wide; reads clearly as the brand mark */
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .nav-logo-img { height: 40px; }
}
/* Footer logo — full stationary SVG (620×180) at readable size */
.footer-brand .nav-logo {
  align-items: center;
}
.footer-logo-img {
  height: 54px;
  width: auto;
  display: block;
}
/* Cream background behind the icon in light mode */
html:not([data-theme="dark"]) .footer-icon-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Blend the white JPG background away into the page cream */
html:not([data-theme="dark"]) .footer-icon-wrap .footer-logo-img {
  mix-blend-mode: multiply;
  border-radius: 6px;
}
[data-theme="dark"] .footer-icon-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Footer wordmark — copper O always; full word copper in light mode */
.footer-logo-o {
  color: var(--copper);
}
html:not([data-theme="dark"]) .footer-logo-text {
  color: var(--copper);
}
/* Show/hide based on theme — dark variant hides everywhere except when
   [data-theme="dark"] is actually active (previously hid itself unconditionally,
   leaving no visible logo at all when the page loaded in dark mode). */
[data-theme="dark"] .nav-logo-img--light { display: none; }
html:not([data-theme="dark"]) .nav-logo-img--dark { display: none; }

/* ══ LOGIN DROPDOWN ══ */
.nav-login-wrap {
  position: relative;
}
.nav-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav-login-btn:hover,
.nav-login-wrap.is-open .nav-login-btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}
.nav-login-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 200;
}
.nav-login-wrap.is-open .nav-login-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-login-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-login-option:hover {
  background: var(--color-primary-pale);
  color: var(--color-text);
}
.nav-login-option--admin {
  border-top: 1px solid var(--color-divider);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  font-size: var(--text-xs);
  opacity: 0.75;
}
.nav-login-option--admin:hover { opacity: 1; }

/* ══ ORBITAL IFRAME — HERO ══ */
/* Render at 680px virtual canvas — rings get proper breathing room */
.orbital-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}
.orbital-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: block;
}
@media (max-width: 900px) {
  .orbital-wrap {
    max-width: 400px;
    margin: 0 auto var(--sp-6);
    order: -1;
  }
}
@media (max-width: 480px) {
  .orbital-wrap {
    max-width: min(320px, 90vw);
  }
}

/* ── BRAND MARK (About page) ─────────────────────────────────────── */
.brand-mark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.brand-mark-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--radius-lg);
  display: none;
}
/* Light mode: show light mark */
[data-theme="light"] .brand-mark-img--light  { display: block; }
[data-theme="light"] .brand-mark-img--dark   { display: none;  }
/* Dark mode: show dark mark */
[data-theme="dark"]  .brand-mark-img--dark   { display: block; }
[data-theme="dark"]  .brand-mark-img--light  { display: none;  }
/* Fallback when no theme set */
.brand-mark-img--dark { display: block; }

/* ── FORM SUBMIT LOADING STATE ─────────────────────────────────────── */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================
   STICKY MOBILE CTA BAR
   Phone-only bar pinned to the bottom of the screen. Slides in after the
   visitor scrolls past the hero so the booking action is always one tap
   away. Hidden entirely on desktop (the header CTA covers that).
   ===================== */
.sticky-cta { display: none; }

@media (max-width: 768px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;  /* below the mobile-nav overlay (200) */
    padding: var(--sp-3) var(--sp-4);
    /* keep clear of the iPhone home-indicator bar */
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-divider);
    transform: translateY(110%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .sticky-cta.visible { transform: translateY(0); }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  /* extra footer breathing room so the bar never hides footer content */
  body.has-sticky-cta .site-footer { padding-bottom: 96px; }
}

/* ── Redesign: quiet one-line notice ── */
.construction-notice {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
  padding: 0.4rem 1rem;
  text-align: center;
}
.construction-notice p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  margin: 0;
}
.construction-notice a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Redesign: footer client-login link ── */
.footer-login-link {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer-login-link:hover { color: var(--color-primary); }

/* long CTA label safety on small phones */
@media (max-width: 400px) {
  .nav-cta { font-size: 0.66rem; padding: 0.45rem 0.6rem; }
}

/* ── CTA label swap: full text on desktop, short on mobile ── */
.cta-label-short { display: none; }
@media (max-width: 768px) {
  .cta-label-full { display: none; }
  .cta-label-short { display: inline; }
}

/* ── Global guard: nothing may pan the page sideways on phones ── */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTICO — Foundation + six pillars (homepage platform overview)
   Columns use theme tokens (light/dark aware). The copper Foundation
   slab is theme-invariant, so its text is a fixed warm cream.
   ═══════════════════════════════════════════════════════════════════ */
.portico{max-width:940px;margin:var(--sp-10) auto 0;}
.portico-lintel{
  height:12px;border-radius:var(--r-md) var(--r-md) 0 0;
  background:linear-gradient(180deg,var(--copper-bright),var(--copper) 55%,var(--copper-muted));
  box-shadow:0 6px 30px var(--copper-glow);position:relative;z-index:2;
}
.portico-cols{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);
  align-items:stretch;padding:0 var(--sp-2);
}
.pillar{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-2);
  min-height:220px;padding:var(--sp-4) var(--sp-3) var(--sp-5);
  text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface));
  border:1px solid var(--color-border);border-bottom:none;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease;
}
.pillar::before{
  content:"";position:absolute;left:var(--sp-3);top:var(--sp-4);bottom:var(--sp-4);width:1px;
  background:linear-gradient(180deg,transparent,var(--copper-glow),transparent);opacity:.45;
}
.pillar:hover,.pillar:focus-visible{
  transform:translateY(-10px);border-color:var(--color-primary);
  box-shadow:var(--shadow-xl);outline:none;
}
.pillar:focus-visible{box-shadow:0 0 0 2px var(--color-primary),var(--shadow-xl);}
.pillar-num{font-family:var(--font-display);font-size:var(--text-sm);color:var(--color-primary);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.pillar-name{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-heading);line-height:1.08;}
.pillar-desc{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:auto;line-height:1.5;}
.pillar-cta{font-size:var(--text-xs);font-weight:600;color:var(--color-primary);opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;}
.pillar:hover .pillar-cta,.pillar:focus-visible .pillar-cta{opacity:1;transform:none;}

/* Foundation base — clickable slab, SAME hover language as the columns */
.portico-base{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;
  padding:var(--sp-5) var(--sp-6);text-decoration:none;
  background:linear-gradient(180deg,var(--copper),var(--copper-muted));
  border:1px solid var(--copper-muted);border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-lg);color:#fdf4e8;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,filter .25s ease;
}
.portico-base:hover,.portico-base:focus-visible{
  transform:translateY(5px);filter:brightness(1.07) saturate(1.04);
  box-shadow:var(--shadow-xl);outline:none;
}
.portico-base:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.55),var(--shadow-xl);}
.base-eyebrow{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:#f7ddc2;}
.base-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.base-name{font-family:var(--font-display);font-size:var(--text-xl);color:#fffaf3;line-height:1.1;}
.base-cta{font-size:var(--text-sm);font-weight:600;color:#fff2e0;white-space:nowrap;}
.portico-base:hover .base-cta,.portico-base:focus-visible .base-cta{text-decoration:underline;}
.base-desc{font-size:var(--text-sm);color:#f3dabf;max-width:64ch;margin-top:3px;line-height:1.5;}

/* human-led band under the grid */
.portico-band{
  display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  margin-top:var(--sp-6);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-faint);text-align:center;
}
.portico-band b{color:var(--color-primary);font-weight:600;}

/* TWO STATES ONLY (mobile-first, per Brian 2026-07-18):
   >820px  = the full 6-across portico (reads as pillars).
   ≤820px  = the stacked view (reads as layers on the Foundation).
   No in-between grid — the moment 6 columns can't sit comfortably, it switches
   straight to the stack. Each stacked row keeps a vertical copper shaft. */
@media (max-width:820px){
  .portico{max-width:560px;margin-left:auto;margin-right:auto;}
  /* column-reverse: the structure builds UP from the Foundation — DOM order is
     01→06, but the stack shows 06 Grow at the peak down to 01 Attract on the base. */
  .portico-cols{display:flex;flex-direction:column-reverse;gap:0;padding:0;}
  .pillar{
    min-height:0;
    padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
    gap:2px;
    border-radius:0;
    border:1px solid var(--color-border);
    border-top:none;                 /* dividers via each pillar's bottom edge; lintel caps the top */
  }
  /* fluting glint → a solid copper shaft so each stacked pillar keeps its vertical line */
  .pillar::before{left:0;top:0;bottom:0;width:3px;opacity:.55;background:var(--copper);}
  .pillar-num{font-size:var(--text-md);}
  .pillar-name{font-size:var(--text-lg);}
  .pillar-desc{margin-top:2px;}
  .pillar-cta{opacity:.75;transform:none;}          /* always-visible tap affordance */
  .pillar:hover,.pillar:focus-visible{transform:none;box-shadow:none;border-color:var(--copper-muted);background:var(--color-surface-2);}
  .base-row{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}
}
@media (prefers-reduced-motion:reduce){ .pillar,.portico-base{transition:none;} }

/* ── Platform detail "in action" spec-card (used by all 7 module visuals) ── */
.spec-card{
  background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-md);width:100%;
}
.spec-card-head{
  display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);
  font-family:var(--font-display);color:var(--color-heading);font-size:var(--text-sm);
}
.spec-card-head .dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--color-primary);flex:none;}
.spec-row{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text);
}
.spec-row .spec-ic{
  width:20px;height:20px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--color-primary-pale);color:var(--color-primary);
}
.spec-row .spec-lbl{line-height:1.3;}
.spec-row .spec-status{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-faint);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ─────────────────────────────────────────
   BOOKING METHODS
   Video/phone self-scheduling cards, rendered from
   site.config.js → booking.methods by js/render.js.
   Shared by booking.html and contact.html.
───────────────────────────────────────── */
.booking-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
  max-width: 840px;
  margin: 0 auto;
}
.booking-method {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.booking-method-cta { margin-top: var(--sp-6); }

.booking-inperson-note {
  text-align: center;
  max-width: 600px;
  margin: var(--sp-8) auto 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.booking-inperson-note a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}