/* =====================================================================
   Creabo Media — style.css
   ===================================================================== */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-400.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-500.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-600.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-800.woff") format('woff');}

/* ---------- Theme tokens ---------- */
:root{
  --navy:#020030; --navy-soft:#0b0640;
  --violet:#6d0095; --magenta:#9c00b4; --magenta-bright:#b41ccb;
  --btn:#3d0070; --btn-hover:#54008a;
  --accent:#c99bff;
  --bg:#ffffff; --bg-soft:#f6f5fa; --bg-card:#ffffff;
  --ink:#0e0a22; --ink-soft:#3c3856; --muted:#6e6a86;
  --line:rgba(14,10,34,0.12); --line-soft:rgba(14,10,34,0.08);
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
  --font:'Montserrat',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.68,0,1);
}
[data-theme="dark"]{
  --bg:#0c0a1a; --bg-soft:#14112a; --bg-card:#1a1636;
  --ink:#e8e4f5; --ink-soft:#b0a8c8; --muted:#8880a4;
  --line:rgba(255,255,255,0.1); --line-soft:rgba(255,255,255,0.07);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;}
img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;}
::selection{background:var(--magenta);color:#fff;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--magenta-bright);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- Loading screen ---------- */
.loader{position:fixed;inset:0;z-index:9999;background:#020030;display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease);}
.loader.hide{opacity:0;pointer-events:none;}
.loader img{width:64px;height:64px;animation:loaderPulse 1.2s ease-in-out infinite;}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.15);opacity:1;}}

/* ---------- Nav ---------- */
.nav-perch{position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;justify-content:center;pointer-events:none;padding:0 20px;}
.nav{pointer-events:auto;display:flex;align-items:center;gap:28px;background:rgba(4,3,32,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:9px 10px 9px 24px;box-shadow:0 12px 40px -18px rgba(2,0,48,.7);max-width:100%;}
.brand-word{font-weight:700;font-size:17px;color:#fff;white-space:nowrap;} .brand-word a{color:inherit;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{color:rgba(255,255,255,.72);font-size:14px;font-weight:600;padding:9px 16px;border-radius:100px;transition:color .2s,background .2s;text-decoration:none;}
.nav-links a:hover{color:#fff;} .nav-links a.active{color:#fff;background:rgba(255,255,255,.12);}
.nav-cta{margin-left:4px;background:#fff!important;color:var(--navy)!important;font-weight:700!important;padding:10px 20px!important;} .nav-cta:hover{background:rgba(255,255,255,.86)!important;}
.nav-toggle{display:none;background:none;border:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;margin-left:8px;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:'';display:block;width:16px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease);}
.nav-toggle span{position:relative;} .nav-toggle span::before{position:absolute;top:-5px;} .nav-toggle span::after{position:absolute;top:5px;}
.nav-toggle.open span{background:transparent;} .nav-toggle.open span::before{transform:translateY(5px) rotate(45deg);} .nav-toggle.open span::after{transform:translateY(-5px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(4,3,32,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu a{color:#fff;font-size:28px;font-weight:700;padding:12px 0;text-decoration:none;} .mobile-menu a.active{opacity:.6;}
@media(max-width:760px){.nav-links{display:none;}.nav{padding:9px 12px 9px 20px;gap:0;}.nav-toggle{display:flex;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-weight:600;font-size:15px;cursor:pointer;border:none;font-family:var(--font);letter-spacing:.2px;transition:transform .2s var(--ease),background .2s var(--ease);text-decoration:none;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--btn);color:#fff;} .btn-primary:hover{background:var(--btn-hover);}
.btn-ghost{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.35)!important;color:#fff;} .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)!important;}
.btn-dark{background:var(--navy);color:#fff;} .btn-dark:hover{background:var(--navy-soft);}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100vh - 80px);display:flex;align-items:center;overflow:hidden;isolation:isolate;}
.hero-bg{position:absolute;top:-6%;right:-6%;bottom:-6%;left:-6%;background:url("../img/hero-bg.jpg") no-repeat center/cover;z-index:-2;animation:panBg 34s ease-in-out infinite alternate;}
@keyframes panBg{0%{transform:translate(0);}100%{transform:translate(4%,2%);}}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(6,2,28,.32);}
.hero-inner{position:relative;text-align:center;padding:90px 0;width:100%;}
.hero h1{font-weight:800;color:#fff;font-size:clamp(2.6rem,7vw,5rem);line-height:1.05;margin:0;letter-spacing:-1px;text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero p{max-width:560px;margin:22px auto 0;color:rgba(255,255,255,.92);font-size:1.08rem;font-weight:500;line-height:1.65;text-shadow:0 1px 16px rgba(0,0,0,.4);}
.hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap;}
.hero-ctas .btn-primary{background:var(--accent);color:var(--navy);} .hero-ctas .btn-primary:hover{background:#dbb8ff;}

/* ---------- Sections ---------- */
section{padding:100px 0;}
.eyebrow{font-size:13px;font-weight:700;color:var(--magenta);margin:0 0 14px;}
h2.section-title{font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.18;margin:0 0 18px;letter-spacing:-.4px;}
.lede{color:var(--muted);font-size:1.05rem;max-width:620px;line-height:1.7;}

/* ---------- Statement band ---------- */
.statement-band{padding:80px 0;background:var(--navy);text-align:center;}
.statement-lead{font-weight:700;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.16;letter-spacing:-1px;color:#fff;margin:0 auto;max-width:840px;}
.statement-lead .accent{color:var(--accent);}
@media(max-width:640px){.statement-band{padding:64px 0;}}

/* ---------- Intro: visual section ---------- */
.intro-section{padding-top:100px;}
.intro-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.intro-copy .section-title{position:relative;padding-left:22px;}
.intro-copy .section-title::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--violet);border-radius:4px;}

/* Visibility diagram */
.vis-diagram{position:relative;}
.vis-ring{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1;position:relative;}
.vis-ring svg{width:100%;height:100%;}
.vis-ring .center-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1.2;}
.vis-ring .center-label span{font-size:.85rem;font-weight:500;color:var(--muted);margin-top:4px;}
.vis-legend{display:flex;justify-content:center;gap:20px;margin-top:18px;flex-wrap:wrap;}
.vis-legend-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.vis-dot{width:10px;height:10px;border-radius:50%;flex:none;}

/* Service cards */
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;}
.service-card{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.service-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px -20px rgba(61,0,112,.2);}
.service-card .icon{width:48px;height:48px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.service-card .icon svg{width:24px;height:24px;}
.service-card h3{font-weight:700;font-size:1.15rem;margin:0 0 8px;}
.service-card p{color:var(--muted);font-size:14px;margin:0;line-height:1.65;}
@media(max-width:860px){.intro-top{grid-template-columns:1fr;gap:40px;}.service-cards{grid-template-columns:1fr;}}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;margin-top:56px;}
.stat-item{background:var(--bg-card);padding:28px 24px;text-align:center;}
.stat-item b{font-size:2rem;font-weight:700;color:var(--violet);display:block;margin-bottom:4px;}
.stat-item span{color:var(--muted);font-size:13px;}
@media(max-width:640px){.stats-row{grid-template-columns:1fr;}}

/* ---------- Teaser ---------- */
.teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;}
.teaser-link{font-weight:700;font-size:14.5px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.teaser-grid{grid-template-columns:1fr;}.teaser-head{flex-direction:column;align-items:flex-start;}}

/* ---------- Project cards ---------- */
.proj-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;cursor:pointer;background:var(--bg-soft);display:block;text-decoration:none;}
.proj-card .ph{position:absolute;inset:0;}
.proj-card .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.proj-card .tag{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);color:var(--navy);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:100px;}
.proj-card .info{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(to top, rgba(2,0,20,.85) 0%, rgba(2,0,20,.4) 65%, transparent 100%);;color:#fff;}
.proj-card .info b{font-weight:700;font-size:1.02rem;display:block;} .proj-card .info span{font-size:12.5px;color:rgba(255,255,255,.75);display:block;margin-top:3px;}
.proj-card .ph,.proj-card .ph-img{transition:transform .5s var(--ease);} .proj-card:hover .ph,.proj-card:hover .ph-img{transform:scale(1.05);}
video.ph-img{pointer-events:none;}

/* CTA band */
.cta-band{background:var(--navy);border-radius:var(--radius-lg);padding:60px 50px;text-align:center;}
.cta-band h2{color:#fff;margin-bottom:14px;} .cta-band p{color:rgba(255,255,255,.68);max-width:480px;margin:0 auto 30px;}

/* ---------- Work page ---------- */
.work-hero{padding:120px 0 50px;text-align:left;}
.work-hero h1{font-weight:700;font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 18px;letter-spacing:-.6px;}
.masonry{columns:3 280px;column-gap:24px;margin-top:20px;}
.masonry .proj-card{break-inside:avoid;margin-bottom:24px;width:100%;aspect-ratio:auto;border-radius:var(--radius-lg);}
.masonry .proj-card .ph,.masonry .proj-card .ph-img{position:relative;width:100%;padding-bottom:var(--h,120%);height:0;}
.masonry .proj-card .ph-img{position:absolute;padding-bottom:0;height:100%;}
@media(max-width:640px){.masonry{columns:1 100%;}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(2,0,20,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);cursor:zoom-out;}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:var(--radius-md);object-fit:contain;transform:scale(.92);transition:transform .35s var(--ease);}
.lightbox.open img{transform:scale(1);}
.lightbox-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;opacity:.7;transition:opacity .2s;} .lightbox-close:hover{opacity:1;}

/* ---------- Contact ---------- */
.contact-hero{padding:120px 0 20px;text-align:left;}
.contact-bottom-space{padding-bottom:110px;}
@media(max-width:640px){.contact-bottom-space{padding-bottom:80px;}}
.contact-hero h1{font-weight:700;font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 16px;letter-spacing:-.6px;}
.contact-card{margin-top:56px;display:grid;grid-template-columns:.85fr 1.15fr;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;}
@media(max-width:860px){.contact-card{grid-template-columns:1fr;}}
.contact-info{background:var(--navy);color:#fff;padding:44px 40px;}
.contact-info h2{font-weight:700;font-size:clamp(1.35rem,4.5vw,1.6rem);margin:0 0 14px;}
.contact-info p{color:rgba(255,255,255,.68);font-size:14.5px;line-height:1.7;margin:0 0 32px;}
.contact-detail{margin-bottom:22px;}
.contact-detail span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-bottom:5px;font-weight:600;}
.contact-detail a,.contact-detail p{font-weight:600;font-size:15.5px;color:#fff;margin:0;}
.contact-form{padding:44px 40px;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;}
.field input,.field textarea{width:100%;border:none;border-bottom:1.5px solid var(--line);padding:10px 2px;font-size:15.5px;font-family:var(--font);color:var(--ink);background:transparent;resize:vertical;transition:border-color .2s var(--ease);}
.field input:focus,.field textarea:focus{border-color:var(--magenta);outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;} @media(max-width:520px){.field-row{grid-template-columns:1fr;}}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:8px;flex-wrap:wrap;}
.captcha{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);font-weight:600;}
.captcha input{width:52px;border:none;border-bottom:1.5px solid var(--line);padding:6px 2px;font-size:15px;text-align:center;font-family:var(--font);background:transparent;color:var(--ink);}
.captcha input:focus{outline:none;border-color:var(--magenta);}
.form-msg{font-size:13.5px;margin-top:14px;min-height:18px;font-weight:600;}
.form-msg.err{color:#c0286a;} .form-msg.ok{color:#0f8a4b;}

/* ---------- Legal pages ---------- */
.legal-page{padding:120px 0 80px;}
.legal-page h1{font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 28px;letter-spacing:-.4px;}
.legal-page h2{font-weight:700;font-size:1.15rem;margin:32px 0 10px;}
.legal-page p,.legal-page li{color:var(--muted);line-height:1.75;margin:0 0 12px;}
.legal-page ul{padding-left:20px;}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.6);padding:56px 0 30px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand b{color:#fff;font-size:1.05rem;display:block;} .footer-brand span{font-size:13px;color:rgba(255,255,255,.5);}
.footer-nav{display:flex;gap:28px;flex-wrap:wrap;}
.footer-nav a{color:rgba(255,255,255,.65);font-size:14.5px;font-weight:600;text-decoration:none;} .footer-nav a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;flex-wrap:wrap;gap:10px;}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;}
.footer-legal a{color:rgba(255,255,255,.5);text-decoration:none;font-size:13px;} .footer-legal a:hover{color:#fff;}

/* Theme toggle */
.theme-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.theme-toggle span{font-size:13px;color:rgba(255,255,255,.5);}
.toggle-track{width:40px;height:22px;background:rgba(255,255,255,.15);border-radius:100px;position:relative;transition:background .2s;}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);}
[data-theme="dark"] .toggle-track::after{transform:translateX(18px);}
[data-theme="dark"] .toggle-track{background:var(--accent);}

@media(max-width:640px){section{padding:72px 0;}.hero{min-height:100vh;}.contact-form,.contact-info{padding:32px 24px;}}