/* TableTop — rune palette taken from Pete's original TT logo (ivory on night-navy with a cold blue glow) */
:root{--bg:#05060b;--bg-2:#0b0e1c;--glow:#2a3150;--ink:#f6f4e6;--muted:#9296a8;--accent:#f6f4e6;--steel:#aab2d6;--line:#1d2236;
--display:'Cinzel',Georgia,serif;--deco:'Cinzel Decorative','Cinzel',serif;--sans:'Inter',system-ui,sans-serif;--rune:'Noto Sans Runic','Segoe UI Historic',serif}
*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--ink);font:300 17px/1.75 var(--sans)}a{color:var(--steel);text-decoration-color:rgba(170,178,214,.4);text-underline-offset:3px}a:hover{color:var(--ink)}
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;background:rgba(5,6,11,.88);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(246,244,230,.35),transparent)}
.brand{display:inline-flex;align-items:center;gap:14px;font:600 24px var(--display);color:var(--ink);text-decoration:none;letter-spacing:.14em;text-transform:uppercase}
.brand .mark{height:44px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(120,135,200,.45))}
.nav nav a{color:var(--muted);text-decoration:none;margin-left:26px;font:500 13px var(--display);letter-spacing:.22em;text-transform:uppercase}.nav nav a:hover{color:var(--ink)}
.hero{position:relative;padding:clamp(70px,12vh,110px) 5vw clamp(60px,10vh,90px);background:radial-gradient(ellipse 60% 70% at 50% 18%,var(--glow) 0,#0d1122 40%,var(--bg) 78%);overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,900px);aspect-ratio:164/173;transform:translate(-50%,-50%);background:url(assets/logo.svg) center/contain no-repeat;opacity:.02;pointer-events:none}
.grain{position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);pointer-events:none}
.hero-inner{position:relative;max-width:1100px;margin:auto;text-align:center}
.hero-inner::before{content:"";display:block;width:92px;height:98px;margin:0 auto 26px;background:url(assets/logo.svg) center/contain no-repeat;filter:drop-shadow(0 0 22px rgba(130,145,215,.55))}
.eyebrow{color:var(--steel);font:500 12px var(--display);letter-spacing:.38em;text-transform:uppercase}
.eyebrow::before,.eyebrow::after{content:"ᛏ";font-family:var(--rune);color:var(--ink);opacity:.7;margin:0 .9em;letter-spacing:0}
h1{font:600 clamp(36px,6.4vw,82px)/1.08 var(--display);letter-spacing:.04em;margin:22px 0;text-shadow:0 0 40px rgba(120,135,200,.35)}h1 em{font-style:normal;color:var(--steel);font-weight:500}
.lede{color:var(--muted);max-width:620px;margin:0 auto 26px}
.lede::after{content:"ᛏ ᚨ ᛒ ᛚ ᛖ · ᛏ ᛟ ᛈ";display:block;margin:26px auto 22px;font:16px var(--rune);letter-spacing:.5em;color:var(--ink);opacity:.45}
.reel,.embed{aspect-ratio:164/173;background:#000;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 6px rgba(246,244,230,.03)}.reel{outline:1px solid rgba(246,244,230,.18);outline-offset:8px}.reel iframe,.embed iframe{width:100%;height:100%;border:0}
.ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink);font:600 14px var(--display);letter-spacing:.12em;border:1px dashed #262b40;text-align:center;background:radial-gradient(ellipse at center,#141a30 0,#000 75%)}.ph small{color:var(--muted);font:300 13px var(--sans);letter-spacing:.05em}
.ph span{font:500 22px var(--display);letter-spacing:.14em;text-transform:uppercase}.ph .ph-play{width:46px;height:46px;border:1px solid var(--ink);border-radius:2px;position:relative;opacity:.8}.ph .ph-play::after{content:"";position:absolute;left:18px;top:14px;border:9px solid transparent;border-left:13px solid var(--ink);border-right:0}
.section{padding:clamp(70px,12vh,110px) 5vw;max-width:1200px;margin:auto;position:relative}.narrow{max-width:760px}.center{text-align:center}
.section+.section::before{content:"ᛏ";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);font:18px var(--rune);color:var(--muted);background:var(--bg);padding:0 18px;z-index:1}
.section+.section{border-top:1px solid transparent;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent) top/100% 1px no-repeat}
h2{font:600 clamp(28px,3.6vw,46px) var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:40px}
h2::after{content:"᛫ ᛏ ᛫";display:block;font:15px var(--rune);letter-spacing:.4em;color:var(--steel);margin-top:12px;padding-left:2px;background:linear-gradient(var(--line),var(--line)) 4.6em 50%/60px 1px no-repeat;opacity:.9}
.center h2::after{background:linear-gradient(90deg,transparent calc(50% - 110px),var(--line) calc(50% - 110px),var(--line) calc(50% - 40px),transparent calc(50% - 40px),transparent calc(50% + 40px),var(--line) calc(50% + 40px),var(--line) calc(50% + 110px),transparent calc(50% + 110px)) center/100% 1px no-repeat}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px 28px}
.card h3{font:600 20px var(--display);letter-spacing:.06em;margin-top:16px}.meta{color:var(--muted);font:500 12px var(--display);letter-spacing:.24em;text-transform:uppercase}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.services div{position:relative;border:1px solid var(--line);border-top:2px solid var(--ink);padding:24px 22px 22px;background:linear-gradient(180deg,rgba(42,49,80,.22),transparent 70%)}
.services div::before{content:"";position:absolute;top:-2px;left:-1px;width:2px;height:14px;background:var(--ink)}.services div::after{content:"";position:absolute;top:-2px;right:-1px;width:2px;height:14px;background:var(--ink)}
.services h3{font:600 19px var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.services p{color:var(--muted)}
.btn{display:inline-block;margin-top:22px;padding:14px 34px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font:600 13px var(--display);letter-spacing:.24em;text-transform:uppercase;position:relative}
.btn::before,.btn::after{content:"ᛏ";font-family:var(--rune);margin:0 .8em;opacity:.6;letter-spacing:0}.btn:hover{background:var(--ink);color:var(--bg)}
.contact-emails a{color:var(--steel)}
.client{display:inline-block;margin-top:24px;color:var(--ink);text-decoration:none;font-size:0;border:0}
.client img{display:block;width:180px;height:auto;margin:0 auto 14px;transition:transform .3s,filter .3s;filter:drop-shadow(0 0 18px rgba(120,135,200,.25))}.client:hover img{transform:scale(1.04)}
.client span{display:block;font:500 12px/2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}.client:hover span{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:34px;text-align:center;color:var(--muted);font:500 12px var(--display);letter-spacing:.2em;text-transform:uppercase}
footer::before{content:"";display:block;width:26px;height:28px;margin:0 auto 14px;background:url(assets/logo.svg) center/contain no-repeat;opacity:.7}
@media(max-width:640px){.nav{flex-direction:column;gap:8px;padding:12px 4vw}.nav nav{display:flex;flex-wrap:wrap;justify-content:center}.nav nav a{margin:0 7px;font-size:10px;letter-spacing:.12em}.brand{font-size:20px}.brand .mark{height:36px}.grid{grid-template-columns:1fr}.eyebrow{letter-spacing:.2em;font-size:10px}.eyebrow::before,.eyebrow::after{margin:0 .4em}.lede::after{letter-spacing:.3em}.hero-inner::before{width:64px;height:68px}}
.client img{box-sizing:content-box;width:180px;padding:22px 26px;background:linear-gradient(180deg,#f8f3e3,#eee5cd);border:1px solid #c9b88a;border-radius:14px;box-shadow:0 0 0 4px rgba(246,244,230,.06),0 14px 40px rgba(0,0,0,.55),0 0 30px rgba(120,135,200,.18);filter:none}
.client:hover img{box-shadow:0 0 0 4px rgba(246,244,230,.12),0 14px 40px rgba(0,0,0,.55),0 0 40px rgba(130,145,215,.35)}
/* TToTT logo badge (mirrors ttott.com .logo-badge) */
.client img{box-sizing:border-box;width:260px;max-width:340px;height:auto;padding:28px;background:#FBF1DE;border:0;border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 6px rgba(246,181,38,.25);transform:rotate(-2deg);transition:transform .35s,box-shadow .35s;margin:0 auto 26px;filter:none}
.client:hover img{transform:rotate(0) scale(1.03);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 6px rgba(246,181,38,.4)}
@media(max-width:640px){.client img{width:220px;max-width:220px;padding:18px}}