/*
Theme Name: Lumo Studio
Theme URI: https://lumostudio.cloud
Author: Lumo Studio
Author URI: https://lumostudio.cloud
Description: A dark, cinematic theme for an independent game and software studio. Built around a single idea — light revealing the work. Includes a Projects custom post type, a floating header, a smooth intro loader, and full Customizer control over contact details.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumo-studio
Tags: dark, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ══════════════════════════════════════════════
   1. Tokens
   ══════════════════════════════════════════════ */
:root{
  --ink:#07080a;
  --ink-2:#0d0f13;
  --surface:#13161b;
  --surface-2:#171b21;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --text:#f2f4f7;
  --muted:#9aa2ad;
  --dim:#5c646e;
  --gold:#f5b301;
  --gold-soft:#ffd572;
  --gold-ink:#1d1600;
  --max:1240px;
  --pad:clamp(20px,4vw,48px);
  --head-h:72px;
  --radius:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ══════════════════════════════════════════════
   2. Base
   ══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:Syne,Inter,sans-serif; font-weight:800;
  letter-spacing:-.035em; line-height:1.04; margin:0;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0}
button{font:inherit; cursor:pointer}
::selection{background:var(--gold); color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.serif{font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em}
.eyebrow{
  font:600 11px/1 Inter,sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold); opacity:.6}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:14px; left:14px; z-index:999; background:var(--gold);
  color:var(--gold-ink); padding:12px 20px; border-radius:10px; font-weight:600;
}

/* ══════════════════════════════════════════════
   3. Intro loader
   ══════════════════════════════════════════════ */
/* The intro runs on CSS timing alone, so a visitor never gets stuck behind
   a loader that JavaScript failed to dismiss. JS may dismiss it earlier by
   adding .loaded to <body>, but nothing depends on that happening. */
#lumo-loader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center;
  animation:loaderOut .7s var(--ease) 1.25s forwards;
}
@keyframes loaderOut{to{opacity:0; visibility:hidden}}
body.loaded #lumo-loader{
  animation:none; opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader-inner{display:grid; justify-items:center; gap:26px}
.loader-mark{
  width:64px; height:64px; position:relative;
  animation:markIn .9s var(--ease) both;
}
.loader-mark svg{width:100%; height:100%; position:relative; z-index:2}
.loader-mark::after{
  content:""; position:absolute; inset:-40%; border-radius:50%; z-index:1;
  background:radial-gradient(circle,rgba(245,179,1,.42),transparent 66%);
  animation:breathe 2.1s ease-in-out infinite;
}
@keyframes markIn{from{opacity:0; transform:scale(.82)} to{opacity:1; transform:none}}
@keyframes breathe{0%,100%{opacity:.5; transform:scale(.9)} 50%{opacity:1; transform:scale(1.12)}}
.loader-bar{width:150px; height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden}
.loader-bar i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-soft),transparent);
  animation:sweep 1.25s ease-in-out infinite;
}
@keyframes sweep{0%{transform:translateX(-120%)} 100%{transform:translateX(320%)}}
.loader-word{
  font:600 10px Inter,sans-serif; letter-spacing:.42em; text-transform:uppercase;
  color:var(--dim); padding-left:.42em;
}

/* page content eases in behind the loader, on the same CSS timing */
.site-content{opacity:0; animation:contentIn .9s var(--ease) 1.1s forwards}
@keyframes contentIn{to{opacity:1}}
body.loaded .site-content{animation:none; opacity:1; transition:opacity .6s var(--ease)}

/* ══════════════════════════════════════════════
   4. Floating header
   ══════════════════════════════════════════════ */
.site-header{
  position:fixed; z-index:120; top:16px; left:16px; right:16px;
  border-radius:var(--radius);
  background:rgba(16,19,24,.92);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:top .4s var(--ease), background .4s, border-color .4s, box-shadow .4s;
}
.site-header.is-stuck{
  top:10px; background:rgba(13,15,19,.97);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--head-h); padding:0 clamp(16px,2.4vw,26px);
}
.brand{display:flex; align-items:center; gap:13px; flex:none}
.brand-mark{width:36px; height:36px; flex:none; display:block}
.brand-mark svg,.brand-mark img{width:100%; height:100%; display:block; border-radius:10px}
.brand-name{
  font-family:Syne,Inter,sans-serif; font-weight:800; font-size:17px;
  letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;
}
.site-header .main-nav ul{display:flex; align-items:center; gap:clamp(16px,2vw,32px); list-style:none}
.site-header .main-nav a{
  position:relative; font-size:14.5px; color:var(--muted);
  padding:6px 0; transition:color .25s;
}
.site-header .main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.site-header .main-nav a:hover,
.site-header .main-nav .current-menu-item > a{color:var(--text)}
.site-header .main-nav a:hover::after,
.site-header .main-nav .current-menu-item > a::after{width:100%}
.header-cta{flex:none}

/* mobile nav */
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px; flex:none;
  background:transparent; border:1px solid var(--line-2); position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; width:20px; height:1.6px; background:var(--text);
  border-radius:2px; transition:transform .35s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:25px}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:940px){
  .nav-toggle{display:block}
  .header-cta{display:none}
  .site-header .main-nav{
    position:absolute; left:0; right:0; top:calc(100% + 10px);
    background:rgba(13,15,19,.98); border:1px solid var(--line);
    border-radius:var(--radius); padding:14px; backdrop-filter:blur(18px);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  body.nav-open .site-header .main-nav{opacity:1; visibility:visible; transform:none}
  .site-header .main-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .site-header .main-nav a{display:block; padding:14px 12px; font-size:16px; color:var(--text)}
  .site-header .main-nav li + li{border-top:1px solid var(--line)}
}

/* ══════════════════════════════════════════════
   5. Buttons
   ══════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:100px; border:1px solid var(--gold);
  background:var(--gold); color:var(--gold-ink);
  font:600 14px Inter,sans-serif; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(245,179,1,.28)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold); box-shadow:none}
.btn.small{padding:11px 20px; font-size:13.5px}
.btn.block{width:100%}

/* ══════════════════════════════════════════════
   6. Layout / sections
   ══════════════════════════════════════════════ */
.site-main{padding-top:calc(var(--head-h) + 32px)}
section{padding:clamp(56px,7vw,98px) 0; position:relative}
.sec-head{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end;
  justify-content:space-between; margin-bottom:40px;
}
.sec-head h2{font-size:clamp(29px,4.4vw,54px); max-width:16ch}
.sec-head p{max-width:34ch; margin:0}

#glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,16%),
    rgba(245,179,1,.13), rgba(245,179,1,.045) 38%, transparent 68%);
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.site-content,.site-header,.site-footer{position:relative; z-index:2}

@keyframes rvIn{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@supports (animation-timeline: view()){
  .rv{animation:rvIn .01s linear both; animation-timeline:view(); animation-range:entry 0% cover 26%}
}

/* ══════════════════════════════════════════════
   7. Hero
   ══════════════════════════════════════════════ */
/* Key art sits behind the headline. It spans the full width so there is no
   edge where the art stops and the page begins, and the pointer light is
   painted ON TOP of it — otherwise the glow lights the page but not the
   picture, and the two read as separate layers. */
.hero-stage{position:relative; overflow:hidden; isolation:isolate}
.hero-art{position:absolute; inset:0; z-index:0}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:68% center}
.hero-art::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,var(--ink) 0%,rgba(7,8,10,.92) 22%,rgba(7,8,10,.55) 52%,rgba(7,8,10,.3) 78%,rgba(7,8,10,.6) 100%),
    linear-gradient(180deg,rgba(7,8,10,.75),rgba(7,8,10,.15) 32%,rgba(7,8,10,.96) 99%);
}
.hero-light{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(560px circle at var(--hx,72%) var(--hy,38%),
    rgba(245,179,1,.17), rgba(245,179,1,.05) 42%, transparent 70%);
  transition:opacity .5s ease;
}
@media(max-width:860px){
  .hero-art img{object-position:72% center}
  .hero-art::after{
    background:
      linear-gradient(90deg,var(--ink) 0%,rgba(7,8,10,.86) 38%,rgba(7,8,10,.6) 100%),
      linear-gradient(180deg,rgba(7,8,10,.8),rgba(7,8,10,.35) 34%,rgba(7,8,10,.97) 99%);
  }
}

/* padding-block only — a shorthand here would wipe .wrap's side gutters */
.hero{position:relative; z-index:2; padding-top:clamp(44px,7vh,86px); padding-bottom:58px}
.hero h1{font-size:clamp(42px,8vw,108px); margin:26px 0 0}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line > span{display:block; transform:translateY(105%); animation:rise 1s var(--ease) 1.2s forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:1.3s}
.hero h1 .line:nth-child(3) > span{animation-delay:1.4s}
/* intro already seen this visit — no waiting for the headline */
body.loaded .hero h1 .line > span{animation-delay:0s}
body.loaded .hero h1 .line:nth-child(2) > span{animation-delay:.1s}
body.loaded .hero h1 .line:nth-child(3) > span{animation-delay:.2s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{max-width:52ch; margin:30px 0 0; font-size:clamp(16px,1.6vw,19px); color:var(--muted)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,46px);
  margin-top:64px; padding-top:28px; border-top:1px solid var(--line);
}
.hero-meta b{display:block; font-family:Syne,sans-serif; font-size:25px; font-weight:800; letter-spacing:-.02em}
.hero-meta span{font-size:12.5px; color:var(--muted); letter-spacing:.05em}

/* ══════════════════════════════════════════════
   8. Marquee
   ══════════════════════════════════════════════ */
.marquee{
  border-block:1px solid var(--line); padding:20px 0; overflow:hidden;
  background:rgba(255,255,255,.014);
}
.marquee-track{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee-track span{
  font-family:Syne,sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center;
  gap:52px; white-space:nowrap; padding-right:52px;
}
.marquee-track span::after{content:"◆"; color:var(--gold); font-size:8px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════
   9. Cards & grids
   ══════════════════════════════════════════════ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  position:relative; overflow:hidden; border-radius:20px; padding:34px 30px 38px;
  background:linear-gradient(180deg,var(--surface),#0b0d11);
  border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .4s;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; opacity:0;
  background:linear-gradient(140deg,rgba(245,179,1,.6),transparent 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .45s;
}
.card:hover{transform:translateY(-6px)}
.card:hover::before{opacity:1}
.card .num{font-family:Syne,sans-serif; font-weight:800; font-size:13px; color:var(--gold); letter-spacing:.1em}
.card h3{font-size:22px; margin:18px 0 12px}
.card p{color:var(--muted); font-size:15px}
.card ul{margin:20px 0 0; list-style:none; font-size:13.5px; color:var(--muted)}
.card li{padding:7px 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px}
.card li::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none}

/* ══════════════════════════════════════════════
   10. Projects
   ══════════════════════════════════════════════ */
.proj-card{
  border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--ink-2);
  transition:transform .55s var(--ease), border-color .4s; display:block;
}
.proj-card:hover{transform:translateY(-7px); border-color:var(--line-2)}
.proj-art{height:250px; position:relative; overflow:hidden; background:var(--surface)}
.proj-art img{width:100%; height:100%; object-fit:cover}
.proj-art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(7,8,10,.88))}
.proj-art .orb{position:absolute; border-radius:50%; filter:blur(1px)}
.chip{
  position:absolute; top:18px; left:18px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:100px; font:600 10.5px Inter,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text);
  background:rgba(7,8,10,.7); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold)}
.dot.green{background:#54d6a0; box-shadow:0 0 10px #54d6a0}
.dot.blue{background:#5aa9ff; box-shadow:0 0 10px #5aa9ff}
.proj-body{padding:26px 28px 30px}
.proj-body h3{font-size:24px; margin-bottom:10px}
.proj-body p{color:var(--muted); font-size:14.5px; margin-bottom:20px}
.bar-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:9px; letter-spacing:.05em}
.bar{height:3px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:5px 10px; border-radius:7px;
}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.pill{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line-2);
  font-size:13.5px; color:var(--muted); background:transparent; transition:all .3s;
}
.pill:hover{color:var(--text); border-color:var(--text)}
.pill.on{background:var(--gold); border-color:var(--gold); color:var(--gold-ink); font-weight:600}

/* ══════════════════════════════════════════════
   10b. Split sections — the work, shown
   ══════════════════════════════════════════════ */
.tight{padding-top:clamp(48px,6vw,78px); padding-bottom:clamp(48px,6vw,78px)}
.split{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,56px); align-items:center}
.split.rev .split-copy{order:2}
@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:30px}
  .split.rev .split-copy{order:0}
}
.split-copy h2{font-size:clamp(27px,3.6vw,44px); margin:20px 0 16px}
.split-copy p{max-width:44ch; margin-bottom:24px}

.frame{
  position:relative; margin:0; overflow:hidden; border-radius:18px;
  border:1px solid var(--line); background:#0b0d11;
  transition:transform .6s var(--ease), border-color .4s;
}
.frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease)}
.frame:hover{transform:translateY(-5px); border-color:var(--line-2)}
.frame:hover img{transform:scale(1.04)}
/* the renders are dark at the edges already — this just seats them on the page */
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(7,8,10,.5));
}
.frame.tall{aspect-ratio:3/4}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:480px){.duo{gap:10px}}

/* ══════════════════════════════════════════════
   11. Statement / process / values
   ══════════════════════════════════════════════ */
.statement-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:60px; align-items:end}
@media(max-width:900px){.statement-grid{grid-template-columns:1fr; gap:34px}}
.statement-big{
  font-family:Syne,sans-serif; font-weight:600; font-size:clamp(22px,3.4vw,42px);
  line-height:1.3; letter-spacing:-.025em; max-width:20ch; margin:28px 0 0;
}
.statement-big .dim{color:#4b525c}

.steps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{padding:34px 28px 38px; border-right:1px solid var(--line); transition:background .4s}
.step:last-child{border-right:0}
.step:hover{background:rgba(245,179,1,.04)}
@media(max-width:900px){.step{border-right:0; border-bottom:1px solid var(--line)}}
.step b{font-family:Syne,sans-serif; font-size:12px; color:var(--gold); letter-spacing:.14em}
.step h3{font-size:20px; margin:16px 0 10px}
.step p{margin:0; font-size:14px; color:var(--muted)}

.values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
@media(max-width:900px){.values{grid-template-columns:1fr}}
.value{background:var(--ink-2); padding:34px 30px 38px}
.value b{font-family:Syne,sans-serif; font-size:12px; letter-spacing:.14em; color:var(--gold)}
.value h3{font-size:21px; margin:16px 0 10px}
.value p{margin:0; color:var(--muted); font-size:14.5px}

.story{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media(max-width:900px){.story{grid-template-columns:1fr; gap:34px}}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){.team{grid-template-columns:1fr}}
.member{border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--ink-2)}
.member .ph{height:240px; background:linear-gradient(160deg,#1a1d24,#0c0e12); position:relative}
.member .ph img{width:100%; height:100%; object-fit:cover}
.member .b{padding:22px 24px 26px}
.member h4{font-size:19px; margin:0 0 4px}
.member span{font-size:12.5px; color:var(--gold); letter-spacing:.06em; text-transform:uppercase}

/* ══════════════════════════════════════════════
   12. Page header (inner pages)
   ══════════════════════════════════════════════ */
.page-head{padding-top:60px; padding-bottom:46px; position:relative}
.page-head h1{font-size:clamp(38px,6.6vw,82px); margin:24px 0 0}
.page-head .lead{max-width:56ch; color:var(--muted); margin:24px 0 0; font-size:clamp(16px,1.5vw,18.5px)}

/* ══════════════════════════════════════════════
   13. Contact
   ══════════════════════════════════════════════ */
.cwrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
@media(max-width:900px){.cwrap{grid-template-columns:1fr; gap:36px}}
.cline{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); align-items:flex-start}
.cline b{font-family:Syne,sans-serif; font-size:12px; letter-spacing:.14em; color:var(--gold); min-width:96px; padding-top:3px}
.cline a:hover{color:var(--gold)}
.form{border:1px solid var(--line); border-radius:22px; padding:clamp(24px,4vw,38px); background:var(--ink-2)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.row{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%; background:#0a0c10; border:1px solid var(--line-2); border-radius:12px;
  padding:14px 16px; color:var(--text); font:400 15px Inter,sans-serif; outline:none;
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{min-height:140px; resize:vertical}
.form-note{font-size:12.5px; text-align:center; margin:16px 0 0; color:var(--muted)}
.form-msg{padding:14px 16px; border-radius:12px; margin-bottom:20px; font-size:14px}
.form-msg.ok{background:rgba(84,214,160,.1); border:1px solid rgba(84,214,160,.4); color:#8ee8c3}
.form-msg.err{background:rgba(255,99,99,.1); border:1px solid rgba(255,99,99,.4); color:#ff9b9b}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:24px 0; cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:20px;
  font-family:Syne,sans-serif; font-weight:700; font-size:18px; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold); font-size:22px; font-family:Inter,sans-serif; font-weight:400; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 24px; color:var(--muted); max-width:70ch; font-size:15px}

/* ══════════════════════════════════════════════
   14. CTA band
   ══════════════════════════════════════════════ */
.cta{
  border:1px solid var(--line); border-radius:28px; padding:clamp(40px,6vw,76px); text-align:center;
  background:radial-gradient(90% 130% at 50% 0%,rgba(245,179,1,.12),transparent 62%),var(--ink-2);
}
.cta h2{font-size:clamp(29px,5.2vw,60px); margin:22px 0 20px}
.cta p{color:var(--muted); max-width:46ch; margin:0 auto 34px}

/* ══════════════════════════════════════════════
   15. Footer
   ══════════════════════════════════════════════ */
.site-footer{border-top:1px solid var(--line); padding:76px 0 46px; margin-top:40px}
.f-top{display:flex; align-items:center; gap:clamp(16px,2.6vw,34px); margin-bottom:46px}
.f-mark{flex:none; display:block; line-height:0}
.f-mark svg{
  width:clamp(52px,7vw,84px); height:auto; display:block;
  filter:drop-shadow(0 10px 30px rgba(245,179,1,.28));
}
.f-word{
  font-family:Syne,sans-serif; font-weight:800; font-size:clamp(48px,12vw,150px);
  letter-spacing:-.05em; line-height:.9;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.f-grid{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  padding-top:34px; border-top:1px solid var(--line); font-size:14px; color:var(--muted);
}
.f-col b{
  display:block; color:var(--text); font-family:Syne,sans-serif; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.f-col ul{list-style:none}
.f-col a{display:block; padding:5px 0; transition:color .25s}
.f-col a:hover{color:var(--gold)}
.f-bottom{margin-top:38px; font-size:13px; color:var(--dim); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between}

/* ══════════════════════════════════════════════
   16. 404 + WordPress core classes
   ══════════════════════════════════════════════ */
.err-wrap{min-height:58vh; display:grid; place-items:center; text-align:center; padding-top:60px; padding-bottom:60px}
.err-code{
  font-family:Syne,sans-serif; font-weight:800; font-size:clamp(90px,22vw,230px);
  line-height:.86; letter-spacing:-.06em;
  background:linear-gradient(180deg,var(--gold),rgba(245,179,1,.1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.entry-content{max-width:72ch; margin:0 auto}
.entry-content .lead{font-size:18.5px; color:var(--text); margin-bottom:1.4em}
.entry-content p{color:var(--muted)}
.entry-content strong{color:var(--text)}
.entry-content h2{font-size:28px; margin:42px 0 14px}
.entry-content h3{font-size:21px; margin:32px 0 12px}
.entry-content ul,.entry-content ol{margin:0 0 1.2em 1.3em; color:var(--muted)}
.entry-content li{margin:7px 0}
.entry-content a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.entry-content blockquote{
  margin:26px 0; padding:18px 24px; border-left:2px solid var(--gold);
  background:var(--surface); border-radius:0 12px 12px 0; color:var(--muted);
}
.entry-content img{border-radius:14px; margin:22px 0}
.alignleft{float:left; margin:6px 24px 18px 0}
.alignright{float:right; margin:6px 0 18px 24px}
.aligncenter{margin-left:auto; margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px; color:var(--dim); text-align:center; margin-top:8px}
.sticky,.gallery-caption,.bypostauthor{display:block}

/* ══════════════════════════════════════════════
   17. Motion preferences
   ══════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-delay:0s!important;
    animation-iteration-count:1!important; transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
  .hero h1 .line > span{transform:none}
  .site-content{opacity:1}
  #lumo-loader{display:none}
}