/* PHILOMERAX site styles. Tokens at the top; built from preview v3 (2026-10-27). */
/* Layout: a film frame. Letterbox bars top and bottom of the hero, timecode-style labels, gold on near-black; sections read like scenes. */
:root{
  --bg:#0B0B0F; --stage:#17171E; --panel:#1E1E27; --ink:#F2EEE4; --muted:#9A968C; --gold:#C9A24A; --gold-hi:#F3DFAE; --line:#2B2A33; --error:#FF6B6B;
  --display:"Barlow Condensed","DIN Condensed","Arial Narrow",sans-serif; --body:"Newsreader",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important} /* the hidden attribute always wins over display rules like fieldset{display:grid} */
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--muted)}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(30px,5vw,52px);line-height:1}
h3{font-size:22px;letter-spacing:.04em}
p{margin:0}
a{color:var(--gold-hi)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:15px;padding:.8em 1.3em;border-radius:3px;border:1px solid var(--gold);color:var(--bg);background:var(--gold);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--gold-hi)}
.btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--gold-hi);outline-offset:3px}
/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.nav .brand{width:170px;display:block}
.nav .logo-svg{width:100%;height:auto;display:block}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--ink);text-decoration:none}
@media (max-width:760px){.nav ul{display:none}.nav .btn{margin-left:auto}}
/* hero: letterbox */
.hero{position:relative;background:var(--stage)}
.bar{background:#000;color:var(--gold);font-family:var(--display);letter-spacing:.2em;font-size:13px}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:14px}
.smpte{display:flex;gap:4px;width:min(520px,70%)}
.smpte i{flex:1;height:10px;display:block}
.frame{position:relative;aspect-ratio:2.39/1;max-height:70vh;width:100%;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.55) saturate(1.05)}
.frame .over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:16px}
.frame .over .logo-svg{width:min(820px,86vw);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.tag{font-family:var(--body);font-style:italic;font-size:clamp(18px,2.4vw,26px);color:var(--ink);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media (max-width:640px){.frame{aspect-ratio:4/5;max-height:none}}
/* sections */
section{padding-block:clamp(56px,9vw,110px);border-bottom:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:62ch}
.thesis{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.chain{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(16px,2vw,21px);color:var(--gold-hi);display:flex;flex-wrap:wrap;gap:.5em .7em}
.chain span+span::before{content:"→";color:var(--muted);margin-right:.7em}
@media (max-width:860px){.thesis{grid-template-columns:1fr}}
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case{background:var(--panel);border:1px solid var(--line)}
.case figure{margin:0;aspect-ratio:16/9;overflow:hidden}
.case img{width:100%;height:100%;object-fit:cover;display:block}
.case .meta{padding:16px 18px 20px;display:grid;gap:6px}
@media (max-width:760px){.work{grid-template-columns:1fr}}
.styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.style{background:var(--bg);padding:26px 22px;display:grid;gap:10px;align-content:start}
.style .mod{font-family:var(--display);color:var(--gold);letter-spacing:.1em}
@media (max-width:760px){.styles{grid-template-columns:1fr}}
/* pricing grid */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:3px;margin-bottom:22px}
.toggle button{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:14px;background:transparent;color:var(--muted);border:0;padding:.7em 1.1em;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--gold);color:var(--bg)}
.grid-wrap{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:720px;font-variant-numeric:tabular-nums}
th,td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--muted);font-weight:600}
td.pkg{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:.04em;font-weight:700}
td.pkg small{display:block;font-family:var(--body);text-transform:none;font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:4px}
td.price{font-family:var(--display);font-size:24px;font-weight:600}
td.target{background:color-mix(in srgb,var(--gold) 14%,transparent);box-shadow:inset 0 0 0 1px var(--gold)}
td.target::after{content:"Most booked";display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.fine{color:var(--muted);font-size:15px;margin-top:14px;max-width:80ch}
/* booking */
.book{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
@media (max-width:900px){.book{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);padding:24px;display:grid;gap:22px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
legend{padding:0;margin-bottom:6px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);padding:.55em .9em;border-radius:3px;cursor:pointer;font-size:16px}
.opts input{accent-color:var(--gold)}
.opts label:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
select,input[type=date],input[type=text],input[type=email]{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:.6em .7em;font:inherit;font-size:16px;width:100%}
.summary{position:sticky;top:90px;display:grid;gap:12px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.summary .total{font-family:var(--display);font-size:34px;font-weight:700;color:var(--gold-hi)}
.notice{border-left:3px solid var(--gold);padding:10px 14px;background:var(--bg);font-size:15px;color:var(--muted)}
.notice[hidden]{display:none}
/* form errors */
.form-alert{border:1px solid var(--error);border-left-width:4px;background:color-mix(in srgb,var(--error) 12%,var(--bg));color:var(--error);padding:12px 16px;border-radius:3px;font-size:16px;animation:alert-in .18s ease-out}
.form-alert[hidden]{display:none}
.form-alert ul{margin:6px 0 0;padding-left:1.2em}
.field-err{color:var(--error);font-size:15px;margin-top:-4px}
.field-err[hidden]{display:none}
input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
@keyframes alert-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form-alert{animation:none}}
/* add to cart (pricing grid) */
td.price{padding:0}
td.price .cell{all:unset;box-sizing:border-box;display:block;width:100%;padding:16px 18px;cursor:pointer;font:inherit}
td.price .cell:hover{background:color-mix(in srgb,var(--gold) 10%,transparent)}
td.price .cell:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
td.price .pct{display:block;font-size:14px;letter-spacing:.08em;color:var(--muted);font-weight:500}
td.target::after{padding:0 18px 12px}
dialog{background:transparent;border:0;padding:16px;max-width:min(520px,100%);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog .panel{gap:14px}
.ac-price{font-family:var(--display);font-size:34px;font-weight:700;color:var(--gold-hi);margin:0}
.ac-what{color:var(--muted);margin:0}
/* booking steps */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.steps button{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:13px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:.5em .8em;cursor:pointer}
.steps button[aria-current="step"]{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.steps .done button{color:var(--gold-hi);border-color:var(--gold)}
.steps button:disabled{opacity:.45;cursor:default}
.step-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.step-nav .btn:last-child{margin-left:auto}
.step-nav .btn[hidden],.summary .btn[hidden]{display:none}
.opt-price{color:var(--muted);font-variant-numeric:tabular-nums}
.review{display:grid;grid-template-columns:max-content 1fr;margin:0;border-top:1px solid var(--line)}
.review dt,.review dd{padding:14px 0;border-bottom:1px solid var(--line)}
.review dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--muted);padding-right:22px;padding-top:18px}
.review dd{margin:0;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.03em;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.review dd[data-k="Includes"]{font-size:17px;font-weight:500;color:var(--muted)}
.review dd[data-k="Total"]{font-size:34px;font-weight:700;color:var(--gold-hi)}
.review dd[data-k="Today"]{color:var(--gold-hi)}
@media (max-width:520px){.review{grid-template-columns:1fr}.review dt{border-bottom:0;padding-bottom:0}}
.field-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--muted)}
/* thank-you page */
.thanks{min-height:calc(100svh - 260px);display:grid;align-items:center;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--gold) 10%,var(--stage)),var(--bg) 70%)}
.thanks .wrap{display:grid;gap:22px;max-width:920px;text-align:center;justify-items:center}
.thanks .label{color:var(--gold)}
.thanks h1{font-size:clamp(52px,10vw,120px);line-height:.9;color:var(--gold-hi)}
.t-lede{font-style:italic;font-size:clamp(20px,2.6vw,28px);line-height:1.4;max-width:34ch;margin:0}
.t-detail{width:min(520px,100%);text-align:left}
.t-next{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left;width:100%}
.t-next[hidden]{display:none}
.t-next li{border-top:1px solid var(--gold);padding-top:14px;display:grid;gap:6px;align-content:start}
.t-next h3{font-size:22px}
.t-next p{margin:0;color:var(--muted);font-size:16px}
.t-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}
@media (max-width:760px){.t-next{grid-template-columns:1fr}}
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.step{border-top:1px solid var(--gold);padding-top:14px;display:grid;gap:6px}
.step .label{color:var(--gold)}
@media (max-width:760px){.process{grid-template-columns:1fr 1fr}}
footer{padding-block:48px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.copy{font-family:var(--display);letter-spacing:.1em;color:var(--ink);user-select:all}
@media (prefers-reduced-motion:no-preference){.frame img{animation:drift 22s ease-in-out infinite alternate}@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.1) translateX(-1.5%)}}}

/* v2: separate pages */
.nav ul a[aria-current="page"]{color:var(--gold-hi);box-shadow:inset 0 -2px 0 var(--gold)}
.page-hero{background:var(--stage);border-bottom:1px solid var(--line)}
.page-hero .wrap{padding-block:clamp(40px,7vw,80px);display:grid;gap:12px}
.page-hero h1{font-size:clamp(38px,7vw,76px);line-height:.95}
.page-hero p{max-width:62ch;color:var(--muted)}
.teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.teaser{background:var(--panel);border:1px solid var(--line);padding:24px;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--ink)}
.teaser:hover{border-color:var(--gold)}
.teaser .go{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);font-size:14px}
@media (max-width:860px){.teasers{grid-template-columns:1fr}}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:20px;cursor:pointer}
.faq p{color:var(--muted);margin-top:8px;max-width:70ch}
.mobile-tabs{display:none}
@media (max-width:760px){.mobile-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--bg)}
 .mobile-tabs a{flex:0 0 auto;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--ink);text-decoration:none;padding:.5em .8em;border:1px solid var(--line);border-radius:3px}
 .mobile-tabs a[aria-current="page"]{border-color:var(--gold);color:var(--gold-hi)}}

/* v3: portfolio + sturdier form controls */
.work-top{padding-block:28px;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:15px;font-weight:600;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:3px;padding:.55em 1em;cursor:pointer}
.chip span{color:var(--muted);margin-left:.35em}
.chip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.chip[aria-pressed="true"] span{color:var(--bg)}
.index summary{cursor:pointer;margin-bottom:10px}
.index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 24px;counter-reset:i}
.index li{counter-increment:i}
.index a{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:var(--display);font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.index a .label{font-size:11px}
.index a:hover{color:var(--gold-hi)}
.work{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.work{grid-template-columns:1fr}}
.case.tall figure{background:#000}
.case.tall img{object-fit:contain}
.case.hide{display:none}
.case.flash{box-shadow:0 0 0 2px var(--gold)}
.draft{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:.25em .6em;justify-self:start;border-radius:2px}
/* sturdier booking controls (Ben: the old ones looked thin) */
.panel{gap:26px}
.panel .label{font-size:14px;color:var(--ink);font-weight:600}
select,input[type=date],input[type=text],input[type=email]{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.04em;border:2px solid #3A3946;border-radius:4px;padding:.7em .9em;background:#101016;min-height:56px}
select{appearance:none;-webkit-appearance:none;padding-right:2.6em;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 15px) 52%;background-size:7px 7px,7px 7px;background-repeat:no-repeat;cursor:pointer}
select:hover,input[type=date]:hover,input[type=text]:hover,input[type=email]:hover{border-color:var(--gold)}
input::placeholder{color:#77737f;font-weight:500}
.opts label{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.04em;border:2px solid #3A3946;border-radius:4px;padding:.65em 1em}
.opts input{width:18px;height:18px}
.summary .row{font-family:var(--display);font-size:19px;letter-spacing:.03em}

.logo-svg{width:min(820px,86vw);height:auto}
.nav .brand img{display:block;width:100%;height:auto}
footer img{display:block;height:auto}

fieldset input+input{margin-top:10px}
#checkout{margin-top:24px;min-height:420px}