/* Orchova shared styles. Brand tokens + chrome (nav, footer, buttons, reveal,
   mobile drawer, skip link). Page-specific layout lives in each page's inline
   <style> block, which loads after this file and overrides where needed. */

*{box-sizing:border-box;margin:0;padding:0}
:root{--base:#241B12;--lift:#2C2118;--surf:#2F2418;--surf2:#38291B;--txt:#F3EBDD;--body:#C4B49A;--dim:#8B7E69;--acc:#C49C52;--acc2:#E0C079;--line:rgba(196,156,82,.16);--soft:rgba(243,235,221,.08);--maxw:1140px}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--body);font-family:'Manrope',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:300;color:var(--txt);line-height:1.1;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.narrow{max-width:720px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);font-weight:500;margin-bottom:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--acc);color:var(--base);font-family:'Manrope';font-weight:600;font-size:14px;padding:14px 26px;border-radius:8px;border:none;cursor:pointer;transition:transform .3s,background .3s,box-shadow .3s}
.btn:hover{background:var(--acc2);transform:translateY(-2px);box-shadow:0 14px 36px -16px rgba(196,156,82,.5)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);color:var(--txt);font-weight:500;font-size:14px;padding:13px 24px;border-radius:8px;transition:border-color .3s,color .3s}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc2)}

/* skip link */
.skip{position:absolute;left:14px;top:-64px;z-index:100;background:var(--surf);color:var(--txt);border:1px solid var(--acc);border-radius:8px;padding:11px 18px;font-size:14px;transition:top .2s}
.skip:focus{top:14px}
main:focus{outline:none}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(36,27,18,.86);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(0,0,0,.55);padding:12px 26px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:30px;height:30px;display:block}
.logo .word{font-weight:500;font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:14px;color:var(--body);transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-cta{font-size:13px;color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:9px 18px;transition:border-color .3s,color .3s}
.nav-cta:hover{border-color:var(--acc);color:var(--acc2)}

/* mobile drawer */
.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:none;color:var(--txt);font-family:'Manrope';font-weight:500;font-size:13px;letter-spacing:.04em;cursor:pointer;padding:9px 6px}
.nav-toggle .bars{position:relative;display:inline-block;width:20px;height:14px}
.nav-toggle .bars span{position:absolute;left:0;right:0;height:1.5px;background:var(--acc);transition:transform .3s,opacity .3s}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6px}
.nav-toggle .bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(10,7,4,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .35s}
.nav-scrim.open{opacity:1;visibility:visible}
.nav-drawer{position:fixed;inset:0 0 0 auto;z-index:60;width:min(86vw,340px);background:var(--surf);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:88px 30px 36px;transform:translateX(100%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.nav-drawer.open{transform:none;visibility:visible}
.nav-drawer a{font-size:16px;color:var(--body);padding:15px 0;border-bottom:1px solid var(--soft);transition:color .25s}
.nav-drawer a:hover,.nav-drawer a[aria-current="page"]{color:var(--txt)}
.nav-drawer .nav-cta{margin-top:24px;text-align:center;padding:14px 18px;font-size:14px;border:1px solid var(--line)}
.nav-close{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--txt);font-size:26px;line-height:1;cursor:pointer;padding:6px}
@media(max-width:860px){.nav-links{display:none}.nav-toggle{display:inline-flex}}
@media(min-width:861px){.nav-drawer,.nav-scrim,.nav-close{display:none!important}}

/* layout primitives shared across pages (baselines; pages override inline) */
section{position:relative}
/* Soft tonal lift. Replaces hard section-divider hairlines site-wide.
   Feathers transparent -> --lift -> transparent over ~120px top/bottom so a
   lifted section eases into the --base page with no edge. The rgba literals
   are --lift (#2C2118 = 44,33,24); keep them in sync if --lift changes. */
.tone{background-image:linear-gradient(180deg,rgba(44,33,24,0) 0,rgba(44,33,24,.5) 60px,var(--lift) 120px,var(--lift) calc(100% - 120px),rgba(44,33,24,.5) calc(100% - 60px),rgba(44,33,24,0) 100%)}
@media(max-width:820px){.tone{background-image:linear-gradient(180deg,rgba(44,33,24,0) 0,rgba(44,33,24,.5) 35px,var(--lift) 70px,var(--lift) calc(100% - 70px),rgba(44,33,24,.5) calc(100% - 35px),rgba(44,33,24,0) 100%)}}
.band{padding:100px 0}
.band-sm{padding:70px 0}
.page-hero{padding:158px 0 66px}
.page-hero h1{font-size:clamp(36px,6vw,68px);max-width:15ch}
.lede{font-size:clamp(16px,2vw,20px);color:var(--body);max-width:52ch;margin-top:24px;font-weight:300;line-height:1.55}
.divider{width:46px;height:1px;background:var(--acc);opacity:.6;margin-bottom:28px}
h2.big{font-size:clamp(28px,4vw,44px)}
.lead-p{font-family:'Fraunces';font-weight:300;font-size:clamp(22px,3.2vw,32px);line-height:1.32;color:var(--txt);max-width:24ch}
.muted-p{font-size:16px;color:var(--body);font-weight:300;line-height:1.65;max-width:54ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}
.feature{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--soft)}
.feature .ft{font-family:'Fraunces';font-size:20px;color:var(--txt);min-width:10ch;flex:none;font-weight:400}
.feature .fd{font-size:14.5px;color:var(--body);font-weight:300;line-height:1.5}
.channels{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.channels span{border:1px solid var(--line);border-radius:999px;padding:10px 22px;font-size:14px;color:var(--txt)}
.cta-band{text-align:center;padding:116px 0}
.cta-band h2{font-size:clamp(28px,4.4vw,48px);max-width:18ch;margin:0 auto 16px}
.cta-band p{color:var(--body);font-weight:300;max-width:46ch;margin:0 auto 32px}
@media(max-width:820px){.split,.grid3,.feat-grid{grid-template-columns:1fr}.split{gap:26px}}

/* footer */
footer{padding:56px 0 44px;background-image:linear-gradient(180deg,rgba(44,33,24,0) 0,var(--lift) 110px,var(--lift) 100%)}
.foot-grid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:600;font-family:'Manrope'}
.foot-col a{display:block;font-size:14px;color:var(--body);margin-bottom:9px;transition:color .25s}
.foot-col a:hover{color:var(--txt)}
.foot-tag{font-size:13px;color:var(--dim);max-width:30ch;line-height:1.5;margin-top:16px}
.copy{margin-top:36px;font-size:12px;color:var(--dim)}

/* reveal (progressive enhancement: hidden only when JS is present).
   Opacity ramps fast (~220ms) so copy is fully opaque the moment it enters; the
   transform settles over ~540ms. Never sit dim while being read. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .22s linear,transform .54s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}