/* EMRA shared styles for the inner pages (about-us, products, services, contact-us).
   Base, nav, menu, footer, reveals and scroll indicator are copied from index.html (the homepage keeps its own
   inline copy) — keep the two in sync when changing them. Page layouts are in assets/pages.css. */
:root{
  --cream:#f9f7ef; --white:#ffffff; --ink:#0d0d0d; --pebble:#8a877f; --mist:#dcd7ca;
  --gold:#d39325; --teal:#0b3238; --table:#ece5d6;
  --font:'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card:20px; --r-pill:100px;
  --gut:clamp(16px, 3.4vw, 48px);
  --gap:clamp(64px, 9vw, 120px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.25;letter-spacing:-0.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.caption{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--pebble)}
.display{font-weight:500;font-size:clamp(44px,6.2vw,84px);line-height:1;letter-spacing:-0.055em}
.h1{font-weight:500;font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-0.05em}
.h2{font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-0.04em}
.h3{font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-0.03em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.35;letter-spacing:-0.025em}
.muted{color:#5e5b54}
.ghost{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-0.01em;padding:10px 0;position:relative}
.ghost::after{content:"";position:absolute;left:0;right:22px;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.ghost:hover::after{transform:scaleX(1)}
.ghost svg{transition:transform .35s ease}
.ghost:hover svg{transform:translateX(4px)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;border-radius:var(--r-pill);padding:10px 18px;font-size:14px;font-weight:500;letter-spacing:-0.01em;transition:background .25s,color .25s}


/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding:10px clamp(8px,1.6vw,24px);transition:top .35s cubic-bezier(.2,.7,.2,1),color .35s}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px;max-width:1440px;margin:0 auto;padding:0 clamp(12px,1.6vw,22px);border-radius:var(--r-pill);transition:background .35s,backdrop-filter .35s}
.nav.solid .nav-in{background:rgba(249,247,239,.62);backdrop-filter:blur(32px) saturate(1.2);-webkit-backdrop-filter:blur(32px) saturate(1.2)}
.nav.on-dark{color:var(--cream)}
.nav.on-dark .est{border-color:rgba(249,247,239,.8)}
.nav.on-dark a.lnk:hover{background:rgba(255,255,255,.14)}
.nav.on-dark .est:hover{background:var(--cream);color:var(--ink)}
.nav-l,.nav-r{display:flex;align-items:center;gap:6px}
.nav-r{justify-content:flex-end}
.nav a.lnk{font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r-pill);transition:background .2s}
.nav a.lnk:hover{background:rgba(0,0,0,.06)}
.nav .est{border:1px solid var(--ink);padding:8px 16px}
.nav .est:hover{background:var(--ink);color:var(--cream)}
.nav .est{border:1px solid currentColor}
.brand{display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand svg{width:30px;height:30px;flex:none;transition:transform .7s cubic-bezier(.65,0,.25,1)}
/* wordmark collapses into the mark on scroll (Lightship-style) */
/* mark on top, EMRA underneath; the word folds up into the mark when the nav compacts */
.brand .wm{display:inline-flex;overflow:hidden;max-height:22px;padding-top:5px;font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em;transition:max-height .75s cubic-bezier(.65,0,.25,1),padding .75s cubic-bezier(.65,0,.25,1)}
.brand .wm i{font-style:normal;display:inline-block;margin-right:.5em;transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .45s ease,filter .5s ease}
.brand .wm i:last-child{margin-right:0}
.brand .wm i:nth-child(1){transition-delay:.18s}.brand .wm i:nth-child(2){transition-delay:.24s}.brand .wm i:nth-child(3){transition-delay:.30s}.brand .wm i:nth-child(4){transition-delay:.36s}
.nav.compact .brand .wm{max-height:0;padding-top:0;transition-delay:.12s}
.nav.compact .brand .wm i{opacity:0;transform:translateY(-12px) scale(.55);filter:blur(3px)}
.nav.compact .brand .wm i:nth-child(4){transition-delay:0s}.nav.compact .brand .wm i:nth-child(3){transition-delay:.06s}.nav.compact .brand .wm i:nth-child(2){transition-delay:.12s}.nav.compact .brand .wm i:nth-child(1){transition-delay:.18s}
.nav.compact .brand svg{transform:scale(1.12)}
.burger{width:46px;height:46px;border-radius:var(--r-pill);display:flex;justify-content:center;align-items:center;margin-left:-10px;transition:background .2s}
.burger:hover{background:rgba(0,0,0,.06)}
.nav.on-dark .burger:hover{background:rgba(255,255,255,.14)}
.burger svg{width:30px;height:30px;overflow:visible}
.burger .half{transform-box:view-box;transform-origin:15px 16px;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.burger .ha{transform:rotate(-17deg)}
.burger .hb{transform:rotate(17deg)}
.burger:hover:not(.open) .ha{transform:rotate(-9deg)}
.burger:hover:not(.open) .hb{transform:rotate(9deg)}
.burger.open .ha,.burger.open .hb{transform:rotate(0deg)}
.burger.open .half{transition:transform .32s cubic-bezier(.7,0,.3,1)}
.burger.open .hb{transition-delay:.1s}
.menu{position:fixed;inset:0;z-index:45;background:var(--cream);padding:120px var(--gut) 40px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;pointer-events:none;transition:opacity .35s}
.menu.open{opacity:1;pointer-events:auto}
.menu.open li a{transform:none;transition:transform 1s cubic-bezier(.215,.61,.355,1),color .2s}
.menu.open li:nth-child(1) a{transition-delay:.12s}.menu.open li:nth-child(2) a{transition-delay:.19s}.menu.open li:nth-child(3) a{transition-delay:.26s}.menu.open li:nth-child(4) a{transition-delay:.33s}.menu.open li:nth-child(5) a{transition-delay:.4s}
.menu .meta{opacity:0;transition:opacity .3s}.menu.open .meta{opacity:1;transition:opacity .8s ease .45s}
.menu ul{list-style:none}
.menu li{overflow:hidden}
.menu li a{transform:translateY(105%);transition:transform .45s cubic-bezier(.55,.055,.675,.19),color .2s;display:block;font-size:clamp(34px,7vw,64px);font-weight:500;letter-spacing:-0.05em;line-height:1.15;padding:4px 0}
.menu li a:hover{color:var(--gold)}
.menu .meta{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:#5e5b54}

.menu.open li:nth-child(6) a{transition-delay:.47s}.menu.open li:nth-child(7) a{transition-delay:.54s}.menu.open li:nth-child(8) a{transition-delay:.61s}
.nav a.lnk[aria-current="page"]{background:rgba(0,0,0,.06)}
.nav.on-dark a.lnk[aria-current="page"]{background:rgba(255,255,255,.16)}

/* ---------- scroll indicator ---------- */
.scroll-ind{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:45;pointer-events:none;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.35);transition:color .45s ease,text-shadow .45s ease;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-ind.on-light{color:var(--ink);text-shadow:none}
.scroll-ind.blend{color:#fff;text-shadow:none;mix-blend-mode:difference;transition:none}
.scroll-ind::after{content:"";width:3px;height:72px;border-radius:2px;background:currentColor;animation:drop 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- form fields ---------- */
.input{flex:1 1 220px;height:52px;border-radius:var(--r-pill);border:1px solid var(--mist);background:var(--white);padding:0 22px;font:inherit;font-size:16px;letter-spacing:-0.02em;outline:none;transition:border-color .2s}
.input:focus{border-color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--teal);color:var(--cream);padding:72px 0 28px;position:relative;overflow:hidden}
.f-top{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.f-brand{grid-column:1/6}
.f-brand svg.mk{width:64px;height:64px;color:var(--cream)}
.f-brand .tag{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-0.05em;line-height:1.05;margin-top:28px;max-width:9em}
.social{display:flex;gap:14px;margin-top:22px;color:var(--gold)}
.social a{width:40px;height:40px;border:1px solid rgba(211,147,37,.45);border-radius:50%;display:grid;place-items:center;transition:background .2s,color .2s}
.social a:hover{background:var(--gold);color:var(--teal)}
.f-col{grid-column:span 2}
.f-col h4{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(249,247,239,.55);margin-bottom:14px}
.f-col a,.f-col span{display:block;font-size:15px;padding:4px 0;letter-spacing:-0.02em}
.f-col a:hover{color:var(--gold)}
.f-col.wide{grid-column:span 3}
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:80px;padding-top:22px;border-top:1px solid rgba(249,247,239,.18);font-size:12px;color:rgba(249,247,239,.6)}
.f-bot .llc{display:flex;align-items:center;gap:10px}
.f-bot .llc img{width:22px;height:22px;filter:invert(1);opacity:.75}
/* giant EMRA wordmark, rises into place as the footer scrolls in */
.f-mark{margin-top:40px;overflow:hidden;display:flex;justify-content:center;pointer-events:none;user-select:none;margin-bottom:-0.12em}
.f-mark span{font-size:clamp(90px,21vw,320px);font-weight:500;letter-spacing:.1em;margin-right:-.1em;line-height:.8;white-space:nowrap;color:rgba(249,247,239,.06);transform:translateY(var(--fm,40%));will-change:transform}


/* ---------- reveals (Lightship timings: slides 1.8s / 80ms stagger, chars .8s / 10ms stagger, both leave in .4s) ---------- */
.rv{opacity:0;transform:translate3d(0,72px,0);transition:opacity .4s cubic-bezier(0,1,.4,1),transform .4s cubic-bezier(0,1,.4,1)}
.rv.in{opacity:1;transform:none;transition-duration:1.8s;transition-delay:calc(var(--ri,0)*80ms)}
[data-anim-text] .aw{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
[data-anim-text] .ac{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .4s cubic-bezier(.38,0,.215,1),opacity .4s cubic-bezier(.38,0,.215,1)}
[data-anim-text].in .ac{transform:none;opacity:1;transition-duration:.8s;transition-delay:calc(var(--ci,0)*10ms)}


@media (max-width:900px){
  .brand svg{width:26px;height:26px}
  .brand .wm{font-size:12px}
  .nav-l .lnk,.nav-r .lnk:not(.est){display:none}
  .scroll-ind{display:none}
  .f-brand{grid-column:1/-1;margin-bottom:24px}
  .f-col,.f-col.wide{grid-column:span 6}
}
@media (max-width:560px){
  .f-bot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .rv,[data-anim-text] .ac{opacity:1;transform:none;transition:none}
  .scroll-ind::after{animation:none}
}

/* spam trap: hidden from people, filled in by bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}