/* ═══════════════════════════════════════════════════════════════════
   ORVANNIS REFRESH 2026-08 — interaction layer
   Ports the demo's feel onto the live site. Purely additive:
   every rule adds polish; none hides or replaces content.
   Loaded LAST so it wins the cascade without !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. custom copper cursor (desktop pointers only) ───────────── */
@media (hover:hover) and (pointer:fine){
  html.orv-cursor, html.orv-cursor *{ cursor:none !important; }
  .orv-dot,.orv-ring{ position:fixed; top:0; left:0; z-index:99999;
    pointer-events:none; border-radius:50%; }
  .orv-dot{ width:6px; height:6px; background:var(--color-primary);
    transform:translate(-50%,-50%); }
  .orv-ring{ width:34px; height:34px; border:1px solid var(--color-primary);
    opacity:.55; transform:translate(-50%,-50%);
    transition:background .28s, opacity .28s; }
  .orv-ring.grow{ width:58px; height:58px; opacity:1;
    background:var(--color-primary-glow); border-color:transparent; }
}

/* ── 2. images & cards lift into a copper frame on hover ──────── */
.concept-art, picture.module-art, .module-art,
.card, .module-card, .sol-card, .spec-card, .proof-card,
.hero-art-figure, .founder-photo, .service-card{
  transition:transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .45s;
}
.concept-art:hover, picture.module-art:hover, .module-art:hover,
.card:hover, .module-card:hover, .sol-card:hover, .service-card:hover{
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: 0 18px 8px -16px rgba(0,0,0,0.32),
              0 4px 8px -6px rgba(0,0,0,.4);
}

/* ── 3. the copper shimmer sweep on hover ─────────────────────── */
.orv-shimmer{ position:relative; overflow:hidden; }
.orv-shimmer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,
    color-mix(in srgb, var(--color-primary) 26%, transparent) 50%, transparent 62%);
  transform:translateX(-110%); transition:transform .85s cubic-bezier(.22, 1, .36, 1);
}
.orv-shimmer:hover::after{ transform:translateX(110%); }

/* ── 4. dot rail — jump to any section ────────────────────────── */
.orv-rail{ position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:900; display:flex; flex-direction:column; gap:13px; }
.orv-rail a{ position:relative; display:flex; align-items:center;
  justify-content:flex-end; width:14px; height:14px; }
.orv-rail i{ width:8px; height:8px; border-radius:50%;
  background:var(--color-text-faint);
  transition:background .3s, transform .3s, box-shadow .3s; }
.orv-rail a:hover i{ background:var(--color-primary); transform:scale(1.45); }
.orv-rail a.on i{ background:var(--color-primary); transform:scale(1.5);
  box-shadow:0 0 0 4px var(--color-primary-glow); }
.orv-rail span{ position:absolute; right:22px; top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--color-surface); border:1px solid var(--color-border-strong);
  border-radius:8px; padding:5px 12px; font-size:12px; font-weight:500;
  color:var(--color-text-muted); white-space:nowrap; opacity:0;
  pointer-events:none; transition:opacity .25s, transform .25s, color .25s; }
.orv-rail a:hover span{ opacity:1; transform:translateY(-50%) translateX(0);
  color:var(--color-primary); border-color:var(--color-primary); }
@media (max-width:1024px){ .orv-rail{ display:none; } }

/* ── 5. advisory gets visual weight — Orvannis is consulting-led ─ */
.advisory-note, .module-advisory, .advisory-block{
  border:1px solid var(--color-primary);
  background: var(--color-primary-pale);
  border-radius:14px; padding:18px 20px; margin-top:20px;
}
.advisory-note .label, .module-advisory .label{
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:7px;
}

@media (prefers-reduced-motion: reduce){
  .orv-shimmer::after{ display:none; }
  *{ transition-duration:.01ms !important; }
}

/* ── 6. TYPOGRAPHY — crisper, cleaner, uniform ────────────────────
   Applied sitewide so no page keeps the old, looser treatment. */
html{ -webkit-text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  letter-spacing:.001em;
}
h1,h2,h3,h4,.section-title,.module-title,.hero-heading{
  letter-spacing:-.021em;          /* tighter, more editorial */
  line-height:1.36;
  text-wrap:balance;               /* no lonely word on the last line */
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
h1,.hero-heading{ line-height:1.36; letter-spacing:-.026em; }
p,li,.module-body,.card p,.lead{
  line-height:1.65;
  text-wrap:pretty;                /* kills orphans */
  letter-spacing:.0015em;
}
/* running text stays in the comfortable reading band */
.module-body,.card p,.section-intro,.hero-body{ max-width:62ch; }

/* the serif accent — one consistent treatment everywhere */
em,.serif,.section-title em,.hero-heading em,.module-tagline{
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  letter-spacing:-.008em;
}
/* mono labels — one consistent treatment everywhere */
.eyebrow,.section-eyebrow,.module-pill,.concept-block-label,.kicker{
  font-family:var(--font-mono);
  letter-spacing:.12em; 
  font-size:.8rem; font-weight:400; text-transform:uppercase;}
/* numbers line up in tables and stats */
.stat,.stat-value,.metric,td,.creds .n{ font-variant-numeric:tabular-nums; }

/* crisper edges on art */
img,picture,video{ image-rendering:auto; }
.concept-art img,.module-art img{ backface-visibility:hidden; transform:translateZ(0); }

/* ── 7. DUAL MODEL — automation + advisory, given equal weight ──── */
.dual-section{ position:relative; }
.dual-grid{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:34px; }
@media (min-width:820px){ .dual-grid{ grid-template-columns:1fr 1fr; gap:28px; } }

.dual-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:18px; padding:0 0 26px; overflow:hidden;
  transition:transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .45s;
}
.dual-card:hover{
  transform:translateY(-5px); border-color:var(--color-primary);
  box-shadow:0 18px 8px -16px rgba(0,0,0,0.32);
}
.dual-art{ display:block; overflow:hidden; background:#000; }
.dual-art img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.22, 1, .36, 1); }
.dual-card:hover .dual-art img{ transform:scale(1.05); }

.dual-kicker{ display:block; margin:22px 24px 8px; font-family:var(--font-mono);
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-primary); }
.dual-card h3{ margin:0 24px 10px; font-size:clamp(20px,2.4vw,26px); }
.dual-card > p{ margin:0 24px; color:var(--color-text-muted); font-size:15px; line-height:1.65; }

.dual-list{ list-style:none; margin:18px 24px 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.dual-list li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--color-text); }
.dual-list li::before{ content:""; position:absolute; left:0; top:7px; width:12px; height:12px;
  border-radius:50%; border:1.5px solid var(--color-primary); }
.dual-list li::after{ content:""; position:absolute; left:4px; top:10.5px; width:4px; height:2px;
  border-left:1.5px solid var(--color-primary); border-bottom:1.5px solid var(--color-primary);
  transform:rotate(-45deg); }

/* the advisory card carries a touch more copper — advisory leads */
.dual-card--advisory{ border-color:var(--color-primary); }
.dual-card--advisory .dual-kicker{ color:var(--color-primary-hover); }

.dual-foot{ margin-top:28px; text-align:center; color:var(--color-text-muted);
  font-size:15.5px; }
.dual-foot strong{ color:var(--color-primary); font-weight:600; }

/* ── 8. interactive cost calculator ─────────────────────────────── */
.cc-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:3px; margin:10px 0 0;
  background:var(--color-border-strong); outline:none; cursor:pointer;
}
.cc-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--color-primary); cursor:pointer;
  box-shadow:0 0 0 4px var(--color-primary-glow);
  transition:transform .2s;
}
.cc-slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.cc-slider::-moz-range-thumb{
  width:22px; height:22px; border:none; border-radius:50%;
  background:var(--color-primary); cursor:pointer;
  box-shadow:0 0 0 4px var(--color-primary-glow);
}
.cc-slider:focus-visible{ outline:2px solid var(--color-primary); outline-offset:4px; }
.cc-hint{
  margin-top:14px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.02em; color:var(--color-text-faint);
}
.cost-row--total .cost-num{ font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .cc-slider{ height:4px; } .cc-slider::-webkit-slider-thumb{ width:26px; height:26px; } }

/* ── 9. four-step journey gets the carved copper step icons ─────── */
.how-we-work-steps{ list-style:none; padding:0; }
.how-we-work-steps > li{ position:relative; }
.how-we-work-steps > li::before{
  content:""; display:block; width:64px; height:64px; margin:0 0 14px;
  border-radius:50%; background-size:cover; background-position:center;
  filter:grayscale(.35) opacity(.72);
  transition:filter .5s, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s;
}
.how-we-work-steps > li:hover::before,
.how-we-work-steps > li.is-in::before{
  filter:none; transform:translateY(-3px);
  box-shadow:0 0 0 5px var(--color-primary-glow);
}
.how-we-work-steps > li:nth-child(1)::before{ background-image:url("../images/refresh/step-1-discover.jpg"); }
.how-we-work-steps > li:nth-child(2)::before{ background-image:url("../images/refresh/step-2-map.jpg"); }
.how-we-work-steps > li:nth-child(3)::before{ background-image:url("../images/refresh/step-3-build.jpg"); }
.how-we-work-steps > li:nth-child(4)::before{ background-image:url("../images/refresh/step-4-refine.jpg"); }
@media (max-width:640px){ .how-we-work-steps > li::before{ width:54px; height:54px; } }

/* ── 10. the carved foundation stone ────────────────────────────── */
.foundation-stone{
  display:block; margin:0 auto; max-width:1100px; border-radius:16px;
  overflow:hidden; border:1px solid var(--color-primary);
  box-shadow:0 18px 8px -18px rgba(0,0,0,0.32);
}
.foundation-stone img{ width:100%; height:auto; display:block;
  transition:transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.foundation-stone:hover img{ transform:scale(1.03); }

/* ── 11. contact page imagery ───────────────────────────────────── */
.contact-art{ display:block; margin:0 0 26px; border-radius:16px; overflow:hidden;
  border:1px solid var(--color-border); background:#000; }
.contact-art img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.22, 1, .36, 1); }
.contact-art:hover img{ transform:scale(1.04); }
.contact-art:hover{ border-color:var(--color-primary); }

/* ── 12. six-levels portico: level art + carved stone foundation ── */
.pillar{ overflow:hidden; }
.pillar-art{ display:block; margin:-2px -2px 12px; border-radius:12px 12px 0 0; overflow:hidden; background:#000; }
.pillar-art img{ width:100%; height:110px; object-fit:cover; object-position:center 30%; display:block;
  filter:saturate(1.02); transition:transform .8s cubic-bezier(.22, 1, .36, 1); }
.pillar:hover .pillar-art img{ transform:scale(1.07); }
@media (max-width:640px){ .pillar-art img{ height:88px; } }

.portico-base--stone{
  position:relative; overflow:hidden;
  background:linear-gradient(rgba(10,8,6,.30),rgba(10,8,6,.66)),
             url("../images/refresh/foundation-stone.jpg") center 38%/cover no-repeat;
  border:1px solid var(--color-primary);
  box-shadow:0 16px 8px -16px rgba(0,0,0,0.32);
}
.portico-base--stone .base-eyebrow,
.portico-base--stone .base-name,
.portico-base--stone .base-cta,
.portico-base--stone .base-desc{
  position:relative; color:#F1E8DA; text-shadow:0 1px 5px rgba(0,0,0,.85);
}
.portico-base--stone .base-eyebrow{ color:var(--copper-bright, #b4611f); }

/* ── 13. the signature Discovery Call button (from the demo) ────── */
.btn-neo{
  display:inline-flex !important; align-items:center; gap:13px; text-align:left;
  padding:11px 18px !important; border-radius:15px !important;
  background:linear-gradient(160deg,#221a12,#0d0a07 55%,#151009) !important;
  border:1.5px solid var(--color-primary) !important; color:#fff !important;
  box-shadow:0 0 8px -4px rgba(0,0,0,0.32),
             inset 0 1px 0 rgba(229,165,90,.45), inset 0 -1px 0 rgba(122,66,32,.5) !important;
  position:relative; overflow:visible !important; white-space:nowrap;
}
.btn-neo::before{ display:none !important; }   /* kill the old sheen pseudo */
.btn-neo::after{
  content:"" !important; position:absolute; left:11%; right:11%; top:-1.5px; height:1.5px;
  background:linear-gradient(90deg,transparent,#d9822b,transparent);
  transform:none !important; opacity:.9; pointer-events:none; transition:none !important;
}
.btn-neo:hover{ box-shadow:0 0 8px -2px rgba(0,0,0,0.32),
  0 6px 8px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(229,165,90,.6) !important; }
.btn-neo .cn-ico{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--color-primary);
  display:grid; place-items:center; color:#d9822b; flex-shrink:0;
  box-shadow:0 0 8px -2px rgba(0,0,0,0.32); }
.btn-neo .cn-ico svg{ width:20px; height:20px; }
.btn-neo .cn-div{ width:1.5px; align-self:stretch; flex-shrink:0; opacity:.7;
  background:linear-gradient(#6f3a11,#b4611f,#6f3a11); }
.btn-neo .cn-text{ display:flex; flex-direction:column; line-height:1.36; }
.btn-neo .cn-text b{ color:#F5F1E8; font-weight:700; font-size:14.5px; }
.btn-neo .cn-text i{ color:#d9822b; font-style:normal; font-weight:700; font-size:14.5px; }
.btn-neo .cn-arrow{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--color-primary);
  display:grid; place-items:center; color:#d9822b; flex-shrink:0;
  transition:transform .3s cubic-bezier(.22, 1, .36, 1);
  box-shadow:0 0 8px -2px rgba(0,0,0,0.32); }
.btn-neo:hover .cn-arrow{ transform:translateX(4px); }
.btn-neo .cn-arrow svg{ width:16px; height:16px; }
@media (max-width:640px){
  .btn-neo{ gap:10px; padding:9px 14px !important; }
  .btn-neo .cn-ico{ width:34px; height:34px; } .btn-neo .cn-ico svg{ width:17px; height:17px; }
  .btn-neo .cn-text b,.btn-neo .cn-text i{ font-size:12.5px; }
  .btn-neo .cn-arrow{ width:32px; height:32px; } .btn-neo .cn-arrow svg{ width:14px; height:14px; }
}

/* ── 14. banner: the old theme-switch CSS hides any .banner-img that
        lacks a --for-light/--for-dark tag. The new brand banner is
        one image for both themes — show it. ── */
.site-top-banner .banner-img{ display:block; width:100%; height:auto; }

/* nav CTA on phones: compact signature button — icon + text, no arrow,
   tighter type so it never clips the viewport (was 277px wide at 375px) */
@media (max-width:560px){
  .nav-cta.btn-neo{ gap:8px; padding:7px 11px !important; border-radius:12px !important; }
  .nav-cta.btn-neo .cn-ico{ width:30px; height:30px; }
  .nav-cta.btn-neo .cn-ico svg{ width:15px; height:15px; }
  .nav-cta.btn-neo .cn-div,
  .nav-cta.btn-neo .cn-arrow{ display:none; }
  .nav-cta.btn-neo .cn-text b,
  .nav-cta.btn-neo .cn-text i{ font-size:12px; }
}

/* image protection: no long-press save sheet, no drag-out, no select */
img, picture, video, a, button,
.level, .tcard, .foundation, .founder-photo, .theme-card, .proof3 figure,
.pillar, .module-art, .jnode, .channel{
  -webkit-touch-callout:none !important;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
}
input, textarea{ -webkit-user-select:auto; user-select:auto; }

/* ── MOBILE TYPE BUMP (other pages) ── */
@media (max-width:640px){
  p, li, .module-body, .section-body, .contact-body{ font-size:25px !important; line-height:1.7; }
  .section-title{ font-size:clamp(30px,8vw,42px); }
  .module-tagline{ font-size:25px; }
  .faq-item summary, summary{ font-size:25px; }
  .contact-detail-value, .contact-detail-label{ font-size:15.5px; }
  .footer-links a, .foot-col a{ font-size:15.5px; }
  figcaption{ font-size:13.5px; }
}

/* ── anchor accuracy: reserve image heights BEFORE they load, so a jump
     to #grow isn't shoved off-target when images arrive; and land clear
     of the sticky header ── */
section[id], [data-module]{ scroll-margin-top:84px; }
picture.module-art img{ aspect-ratio:1402/1122; width:100%; height:auto; }
/* ⭐ 2026-08-18 — the rule that ACTUALLY sizes the inner-page banner.
   Brian: desktop -50%, mobile -25%. Measured before: 120px tall at 375px wide,
   and full-viewport-width on desktop.
   ⚠️ NOTE FOR THE NEXT PERSON: css/main.css also carries
   .banner-img--for-light / --for-dark height clamps. NO page uses those classes
   — they are dead. This selector is more specific and wins regardless. Change
   sizes HERE; editing the clamps in main.css does nothing.
   ⛔ Do not convert this to a fixed height with object-fit:cover — the lockup
   carries the wordmark and two tagline lines, and cover would crop them. */
.site-top-banner{ text-align:center; }
.site-top-banner .banner-img{ aspect-ratio:1772/568; width:100%; max-width:50%; height:auto; margin:0 auto; }
@media (max-width:600px){ .site-top-banner .banner-img{ max-width:75%; } }