@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');:root{--bg:#06101e;--panel:#0b1b30;--muted:#9fb2cc;--cyan:#13c8ef;--gold:#ffdb43;--line:#243a54;--white:#f7fbff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font:16px/1.6 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{transition:.2s ease}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Outfit,sans-serif;line-height:1.13}h1{font-size:clamp(3.4rem,6vw,6.4rem);letter-spacing:-.055em;margin-bottom:24px}h2{font-size:clamp(2.5rem,4.5vw,4.3rem);letter-spacing:-.045em}h3{font-size:1.35rem}.container{width:min(1180px,calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px max(24px,calc((100vw - 1180px)/2));background:#06101eea;backdrop-filter:blur(18px);border-bottom:1px solid #20314a}.brand{display:flex;align-items:center;gap:9px;font:700 21px Outfit}.brand img{width:59px;height:50px;object-fit:contain}.brand small{display:block;font:600 9px 'DM Sans';letter-spacing:.22em;color:var(--muted)}nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:700}nav a:hover{color:var(--cyan)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(115deg,#00c5ef,#0864df);color:white;border:0;border-radius:8px;padding:14px 23px;font-weight:800;box-shadow:0 8px 30px #028ef92a}.nav-cta{padding:10px 16px}.btn:hover,.nav-cta:hover{transform:translateY(-2px);filter:brightness(1.13);color:white}.btn.outline{background:transparent;border:1px solid #6080a5;box-shadow:none}.menu-toggle{display:none;background:none;color:white;border:0;font-size:28px}.hero{position:relative;overflow:hidden;padding:95px 0 105px;background:radial-gradient(ellipse at 78% 42%,#123b6c 0%,transparent 46%),linear-gradient(150deg,#08162a,#040b15)}.hero-glow{position:absolute;width:600px;height:600px;right:-250px;top:-160px;border-radius:50%;background:#0787ef1e;filter:blur(45px)}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center;position:relative}.eyebrow{font-size:12px;letter-spacing:.23em;font-weight:800;color:var(--cyan);margin-bottom:22px}.kicker{font-size:19px;letter-spacing:.04em;font-weight:800}.gold{color:var(--gold)}.lead{font-size:18px;color:#b9c9df;max-width:600px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}.micro{font-size:11px;letter-spacing:.12em;color:#91a9c8}.micro b{color:var(--cyan);padding:0 5px}.hero-media{border:1px solid #32689c;border-radius:18px;overflow:hidden;background:#02060d;box-shadow:0 35px 90px #0009,0 0 80px #006bff24}.hero-media video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover}.video-caption{padding:13px 17px;font-size:11px;letter-spacing:.14em;font-weight:800;display:flex;gap:10px;align-items:center;color:#bed8f3}.video-caption span:last-child{margin-left:auto}.live-dot{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}.strip{background:linear-gradient(90deg,#082b4e,#064b75,#07233f);border-block:1px solid #176b9c}.strip .container{display:flex;justify-content:space-between;gap:20px;padding:21px 0;font-size:12px;font-weight:800;letter-spacing:.13em}.strip strong{color:var(--gold)}.section{padding:100px 0;scroll-margin-top:80px}.section-alt{background:#09182a}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:35px}.section-heading h2{margin-bottom:0}.section-heading>p{color:var(--muted);max-width:350px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.work-card{border:1px solid var(--line);background:#0b1a2c;border-radius:16px;overflow:hidden}.work-card.featured{grid-column:span 2}.work-media{aspect-ratio:16/9;position:relative;background:#122743}.work-media img{width:100%;height:100%;object-fit:cover}.play-overlay{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:white;text-shadow:0 2px 18px #000;background:#0002}.play-overlay:hover{background:#007dff44}.work-info{padding:22px}.work-info span{font-size:11px;color:var(--cyan);font-weight:800;letter-spacing:.1em}.work-info h3{margin:10px 0}.work-info p{color:var(--muted);margin:0}.placeholder{display:grid;place-items:center;height:100%;font-size:45px;color:var(--cyan)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-grid article{padding:31px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(140deg,#102943,#0a1829)}.service-icon{display:grid;place-items:center;width:53px;height:53px;border-radius:13px;background:#0c5c92;color:var(--cyan);font-size:28px;margin-bottom:25px}.service-grid p,.process-grid p{color:var(--muted);margin-bottom:0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.price-card{position:relative;display:flex;flex-direction:column;background:#0b1c31;border:1px solid #2d4665;border-radius:17px;padding:27px}.price-card.popular{border-color:#00c5ef;box-shadow:0 0 42px #00a4ff1c}.popular-label{position:absolute;top:-16px;left:22px;background:var(--cyan);color:#021322;padding:5px 13px;border-radius:50px;font-size:11px;font-weight:900;letter-spacing:.08em}.price-top p{font-size:12px;color:var(--cyan);font-weight:800;letter-spacing:.13em}.price-top h3{font-size:3.4rem;margin:0;color:white}.price-top span{color:var(--muted)}.price-card ul{padding:22px 0 18px 19px;flex:1;color:#c5d6e8}.price-card li{margin:8px 0;padding-left:4px}.price-card li::marker{color:var(--cyan)}.price-card .btn{font-size:13px}.pricing-note{margin-top:22px;color:var(--muted);font-size:13px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.process-grid article{border-top:2px solid #1a83bf;padding-top:25px}.process-grid span{color:var(--cyan);font-size:25px;font-weight:800}.process-grid h3{margin:17px 0 8px}.statement{text-align:center;padding:100px 0;background:radial-gradient(ellipse at center,#0b4974,#061321 70%)}.statement h2{font-size:clamp(2.7rem,5.6vw,5.7rem)}.statement em{color:var(--gold);font-style:normal}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}.contact-detail{margin-top:30px}.contact-detail span{display:block;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em}.contact-detail a{font:700 23px Outfit}.contact-detail p{color:var(--muted)}.contact-form,.panel{padding:30px;background:#0c2036;border:1px solid var(--line);border-radius:17px}.contact-form h3{font-size:25px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-size:13px;font-weight:700;color:#c5d7e8;margin:0 0 18px}input,textarea,select{display:block;width:100%;margin-top:8px;background:#061426;border:1px solid #3b5472;border-radius:7px;color:white;padding:13px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 2px #00c9ff28}.full{width:100%}.form-note{font-size:12px;color:var(--muted);margin:12px 0 0}.honeypot{position:absolute;left:-9999px}footer{background:#030b15;border-top:1px solid var(--line);padding:60px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-grid img{width:220px;max-width:100%}.footer-grid p{color:var(--muted)}.footer-grid strong{display:block;font-size:12px;color:var(--cyan);letter-spacing:.15em;margin-bottom:15px}.footer-grid a{display:block;color:#b4c5dc;margin:9px 0}.footer-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;color:#7790ae;font-size:12px}.admin-wrap{max-width:1100px;margin:65px auto;padding:0 24px;min-height:70vh}.admin-wrap h1{font-size:40px}.narrow{max-width:530px}.panel{margin-bottom:20px}.tabs{display:flex;gap:14px;flex-wrap:wrap;margin:25px 0}.tabs a{padding:9px 18px;border:1px solid var(--line);border-radius:8px}.tabs a.active{background:#075d94}.inline{display:inline}.text-button{background:none;border:0;color:white}.notice{padding:14px;background:#12466c;border-radius:8px}.notice.error{background:#6d2334}.inquiry{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0}.inquiry>div{flex:1}.inquiry p{overflow-wrap:anywhere}.pill{background:#18577c;font-size:11px;padding:5px 9px;border-radius:20px}.small{padding:8px 12px}.danger{background:#922b43;color:white;border:0;border-radius:7px;padding:9px 16px}@media(max-width:950px){.hero-grid,.contact-grid{grid-template-columns:1fr}.hero{padding:60px 0}.hero-copy{max-width:750px}.pricing-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.section-heading{align-items:start}.portfolio-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.container{width:calc(100% - 32px)}.site-header{padding:8px 16px}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#061324;padding:20px;flex-direction:column;align-items:stretch}.site-header nav.open{display:flex}.brand{font-size:18px}.brand img{width:48px}.hero{padding:50px 0}.hero-grid{gap:30px}h1{font-size:3.1rem}.section{padding:65px 0}.section-heading{display:block}.strip .container{flex-wrap:wrap;justify-content:center;text-align:center}.portfolio-grid,.pricing-grid,.service-grid,.process-grid,.two,.footer-grid{grid-template-columns:1fr}.work-card.featured{grid-column:auto}.contact-grid{gap:28px}.contact-form{padding:20px}.footer-bottom{gap:10px;flex-wrap:wrap}.inquiry{flex-direction:column}}

/* Portfolio modal and playable previews */
.portfolio-dialog{width:min(960px,94vw);max-height:92vh;border:1px solid #2477ba;border-radius:18px;padding:16px;background:#06152b;color:white;box-shadow:0 30px 100px #000b;}
.portfolio-dialog::backdrop{background:rgba(0,0,0,.85)}
.portfolio-dialog video{width:100%;max-height:75vh;background:black;border-radius:9px;display:block;}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 0 12px;}
.dialog-top button{background:#173a65;border:0;border-radius:6px;color:white;padding:8px 13px;cursor:pointer;}
button.play-overlay{border:0;cursor:pointer;font:inherit;}

/* Phase 2 administration */
.admin-items details {margin:1rem 0;padding:1rem;border:1px solid #37638b;border-radius:10px}
.admin-items summary {cursor:pointer;font-weight:700}
.admin-items details form {margin-top:1rem}

/* =========================================================
   CLARITYWORKS BRAND PALETTE — pre-Phase 4 refresh
   Derived from the official ClarityWorks logo.
   ========================================================= */
:root{
  --bg:#030711;
  --panel:#081526;
  --panel-2:#0c1d32;
  --muted:#aab9cf;
  --cyan:#08c8f2;
  --blue:#0879e8;
  --violet:#6335d8;
  --magenta:#d315a8;
  --orange:#ff7a18;
  --gold:#ffc62e;
  --silver:#dce6f2;
  --line:#263b57;
  --white:#f8fbff;
  --brand-gradient:linear-gradient(115deg,var(--cyan) 0%,var(--blue) 34%,var(--violet) 58%,var(--magenta) 76%,var(--orange) 100%);
  --warm-gradient:linear-gradient(115deg,var(--orange),var(--gold));
}
body{background:radial-gradient(circle at 75% -15%,#12224b 0,transparent 31%),var(--bg)}
.site-header{background:#030711eF;border-bottom-color:#1b3553;box-shadow:0 8px 35px #0005}
.brand small{color:#aebdd2}.brand img{filter:drop-shadow(0 0 12px #08c8f233)}
nav a:hover,.eyebrow,.work-info span,.contact-detail span,.footer-grid strong,.process-grid span{color:var(--cyan)}
.nav-cta,.btn{background:var(--brand-gradient);box-shadow:0 10px 32px #0879e82d,0 0 22px #d315a817}
.btn:hover,.nav-cta:hover{filter:saturate(1.14) brightness(1.08)}
.btn.outline{background:#08101d;border-color:#47627f}.btn.outline:hover{border-color:var(--magenta);box-shadow:0 0 20px #d315a824}
.hero{background:radial-gradient(ellipse at 82% 35%,#123d75 0%,transparent 38%),radial-gradient(ellipse at 62% 70%,#611a7930 0%,transparent 35%),linear-gradient(145deg,#071326,#02050b 76%)}
.hero-glow{background:linear-gradient(135deg,#08c8f229,#d315a822,#ff7a181c);filter:blur(55px)}
.gold{color:var(--gold)}
.hero-media{border-color:#286fba;box-shadow:0 35px 90px #000a,0 0 65px #08c8f224,0 0 100px #d315a810}
.live-dot{background:var(--magenta);box-shadow:0 0 12px var(--magenta)}
.strip{background:linear-gradient(90deg,#071b34,#063f68 35%,#352061 68%,#68164b);border-block-color:#225d8f}.strip strong{color:var(--gold)}
.section-alt{background:linear-gradient(180deg,#081627,#060f1c)}
.work-card,.price-card,.contact-form,.panel{background:linear-gradient(150deg,#0d2036,#071322);border-color:#294765}
.work-card:hover,.price-card:hover{border-color:#357fbd;box-shadow:0 18px 55px #0004,0 0 25px #08c8f210}
.play-overlay:hover{background:linear-gradient(135deg,#0879e84d,#d315a83b)}
.service-grid article{background:linear-gradient(145deg,#102b49,#0a182a 68%,#26113b);border-color:#29435f}
.service-icon{background:linear-gradient(135deg,#073f75,#3c1c70);color:#65e5ff;border:1px solid #27699b}
.price-card.popular{border-color:var(--cyan);box-shadow:0 0 0 1px #08c8f21f,0 0 42px #0879e820,0 0 70px #d315a80d}
.popular-label{background:var(--warm-gradient);color:#171008;box-shadow:0 5px 20px #ff7a1833}
.price-card li::marker{color:var(--magenta)}
.process-grid article{border-image:linear-gradient(90deg,var(--cyan),var(--magenta),var(--orange)) 1}
.statement{background:radial-gradient(ellipse at 50% 45%,#123f70 0,#171342 38%,#060d18 72%)}
.statement em{color:var(--gold);text-shadow:0 0 24px #ff7a1826}
input,textarea,select{background:#040d1a;border-color:#355370}input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 2px #08c8f224,0 0 18px #6335d81b}
footer{background:#02050b}.footer-grid a:hover{color:var(--cyan)}
.tabs a.active,.portal-nav a.active{background:linear-gradient(115deg,#0879e8,#6335d8)}
.notice{background:#103c62;border-left:3px solid var(--cyan)}.notice.error{background:#551d35;border-left-color:var(--magenta)}
.pill,.statusline span{background:#123b60;border:1px solid #285c84}
.danger{background:linear-gradient(115deg,#a61f58,#d3156b)}
/* Portal inline styles use these classes; override their original blues with brand accents. */
.portal-nav,.portal-card{background:linear-gradient(150deg,#0c2036,#071321)!important;border-color:#294967!important}
.timeline span.on{background:linear-gradient(90deg,var(--cyan),var(--violet))!important}
.message{border-left-color:var(--cyan)!important}.message.admin{border-left-color:var(--gold)!important}
.portfolio-dialog{border-color:#327fc0;box-shadow:0 30px 100px #000c,0 0 45px #6335d81a}
::selection{background:#d315a8;color:white}
@media(max-width:650px){.site-header nav{background:#030a15f7}}