/* ═══════════════════════════════════════════════════════════════════════════
   OSHEM site theme — build 110
   A conservative polish layer applied on top of every public page's own styles.
   Enhancement-only rules: typography rhythm, tactile buttons and cards, focus
   states, and consistent motion. No layout properties are overridden, so no
   page's structure can break.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --oshem-green: #1a4a3a;
  --oshem-green-deep: #143d30;
  --oshem-gold: #c8a84b;
  --oshem-gold-soft: rgba(200, 168, 75, 0.18);
}

/* ── Typography rhythm ─────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.012em; }
p { letter-spacing: 0.002em; }
::selection { background: var(--oshem-gold-soft); color: var(--oshem-green-deep); }

/* ── Navigation ────────────────────────────────────────────────────────── */
nav { backdrop-filter: saturate(1.05); }
.nav-links a { position: relative; transition: color 0.15s ease; }
.nav-links a:not(.nav-cta):not(.nav-portal-link-sm)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--oshem-gold); transition: right 0.22s ease; border-radius: 2px;
}
.nav-links a:not(.nav-cta):not(.nav-portal-link-sm):hover::after,
.nav-links a.active:not(.nav-cta):not(.nav-portal-link-sm)::after { right: 0; }
.nav-cta { box-shadow: 0 2px 8px rgba(26, 74, 58, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 74, 58, 0.34); }

/* ── Buttons: one tactile language everywhere ──────────────────────────── */
.btn-gold, .hero-btn, .pricing-btn, .btn-line, .upload-label, .btn-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  will-change: transform;
}
.btn-gold:hover, .hero-btn-gold:hover, .pricing-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 46, 36, 0.22);
}
.btn-gold:active, .hero-btn-gold:active, .pricing-btn-gold:active { transform: translateY(0); }

/* ── Cards: consistent depth + lift ────────────────────────────────────── */
.article-card, .pricing-card, .process-step, .q-card, .course-card, .tier-card, .benefit {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.article-card:hover, .pricing-card:hover, .course-card:hover {
  border-color: rgba(200, 168, 75, 0.55);
}

/* ── Forms: visible, branded focus ─────────────────────────────────────── */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--oshem-gold) !important;
  outline-offset: 2px;
  border-radius: 6px;
}
input, select, textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* ── Imagery & badges ──────────────────────────────────────────────────── */
img { image-rendering: -webkit-optimize-contrast; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer { letter-spacing: 0.01em; }
footer a { transition: color 0.15s ease; }
footer a:hover { color: #fff !important; }

/* ── Motion sanity ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OSHEM visual system — release polish
   Shared presentation layer. Page-specific CSS remains underneath; these rules
   unify spacing, surfaces, navigation, forms and mobile behaviour.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --oshem-bg:#f7f5ef;--oshem-surface:#fffdf8;--oshem-ink:#16231d;
  --oshem-muted:#66736c;--oshem-line:rgba(22,64,48,.12);
  --oshem-shadow:0 18px 50px rgba(20,46,36,.08);
}
body{background:var(--oshem-bg);color:var(--oshem-ink);}
main{overflow:hidden;}
section{scroll-margin-top:92px;}
section h1,section h2,section .section-title,.page-title,.hero h1{text-wrap:balance;}
.container,.wrap,.content-wrap{max-width:1240px;margin-left:auto;margin-right:auto;}
/* More deliberate section rhythm without forcing legacy layouts. */
@media(min-width:901px){section{padding-top:88px;padding-bottom:88px;}}
/* Navigation: quieter, more premium, easier to scan. */
nav{height:76px!important;padding-left:clamp(20px,4vw,56px)!important;padding-right:clamp(20px,4vw,56px)!important;background:rgba(255,253,248,.94)!important;border-bottom-color:rgba(20,46,36,.10)!important;}
.nav-links{gap:4px!important;}
.nav-links a{padding:9px 13px!important;border-radius:9px!important;}
.nav-links a:hover{background:rgba(26,74,58,.07)!important;color:var(--oshem-green)!important;}
.nav-links a.active{background:rgba(26,74,58,.07);}
.nav-cta{padding:10px 17px!important;border-radius:9px!important;}
/* Hero and page headers. */
.hero{isolation:isolate;}
/* Build 116 ROOT FIX — the decorative gold orb. Without a positioned .hero it anchored
   to the BODY, and bottom:-45% then extended the document ~45% of the page height BELOW
   the footer: the exact "giant blank space" on the homepage (+2,991px) and qualifications
   (+625px). The hero is now its own containing block and clips the orb, so the glow can
   never stretch the page or cause horizontal overflow on any page. */
.hero{position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:auto -10% -45% auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,168,75,.16),transparent 68%);pointer-events:none;z-index:-1;}
.eyebrow,.section-eyebrow{font-weight:700;letter-spacing:.15em;}
/* Cards */
.article-card,.pricing-card,.process-step,.q-card,.course-card,.tier-card,.benefit,.feature-card,.info-card,.resource-card{
  border-color:var(--oshem-line)!important;
  box-shadow:0 1px 2px rgba(20,46,36,.03);
}
.article-card:hover,.pricing-card:hover,.course-card:hover,.tier-card:hover,.resource-card:hover{box-shadow:var(--oshem-shadow);transform:translateY(-3px);}
/* Inputs */
input,select,textarea{background:#fffdf9!important;color:var(--oshem-ink)!important;border-color:rgba(20,46,36,.16)!important;}
input::placeholder,textarea::placeholder{color:#9aa39e!important;}
button,.btn,.btn-primary,.btn-gold,.hero-btn,.pricing-btn{font-weight:650;}
/* Consistent tables */
table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;}
th{background:#f1eee5!important;color:#314239;}
td,th{border-bottom:1px solid var(--oshem-line)!important;}
/* Mobile */
@media(max-width:900px){
  nav{height:68px!important;}
  .nav-links{top:68px!important;}
  .nav-scrim{top:68px!important;}
  .hero{padding-left:24px!important;padding-right:24px!important;}
  section{padding-left:24px!important;padding-right:24px!important;}
}
@media(max-width:520px){
  .hero h1{font-size:clamp(34px,10vw,46px)!important;}
  .section-title{font-size:clamp(29px,8vw,40px)!important;}
  .pricing-card,.tier-card{padding:26px 20px!important;}
}
/* Accessibility / reduced motion */
:focus-visible{outline:3px solid rgba(200,168,75,.72)!important;outline-offset:3px!important;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}}