/* atlascreative — cinematic video-studio portfolio. Cloned layout, original brand + copy. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#0b0c0e; --bg2:#0e0f11; --panel:#141517; --panel2:#1a1b1e;
  --ink:#f3f3f1; --dim:#8b8c90; --faint:#54565b; --line:rgba(255,255,255,.09);
  --accent:#e5342a; --accent-d:#c02219; --oxblood:#4a1712;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --disp:'Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:var(--disp);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 34px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* ---- top bar ---- */
.bar{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;width:min(1300px,calc(100% - 36px));
  display:flex;align-items:center;justify-content:space-between;background:#151517;border:1px solid var(--line);
  border-radius:4px;padding:14px 20px;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:18px}
.brand .filmico{width:22px;height:16px;border:2px solid var(--ink);border-radius:2px;position:relative;flex:none}
.brand .filmico::before,.brand .filmico::after{content:"";position:absolute;top:1px;bottom:1px;width:3px;background:var(--ink)}
.brand .filmico::before{left:2px}.brand .filmico::after{right:2px}
.brand sup{font-size:9px;font-weight:600}
.menubtn{display:flex;align-items:center;gap:14px;background:none;border:0;color:var(--ink);font-family:var(--disp);
  font-size:18px;cursor:pointer;font-weight:500}
.menubtn .bars{display:flex;flex-direction:column;gap:4px;width:26px}
.menubtn .bars span{height:2px;background:var(--ink);display:block}

/* ---- menu overlay ---- */
.overlay{position:fixed;inset:0;z-index:70;background:#0a0a0b;display:flex;flex-direction:column;
  padding:26px 34px 34px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.overlay.on{opacity:1;pointer-events:auto}
.ov-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.ov-links{display:flex;flex-direction:column;gap:2px;margin:auto 0}
.ov-links a{display:flex;align-items:baseline;gap:22px;font-weight:800;font-size:clamp(34px,7vw,86px);
  line-height:1.02;letter-spacing:-.02em;color:var(--ink);transition:color .2s;text-transform:uppercase}
.ov-links a .num{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--faint);width:40px}
.ov-links a:hover{color:var(--accent)}
.ov-foot{display:flex;flex-wrap:wrap;gap:26px 50px;margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--dim)}
.ov-foot b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px;font-size:11px;letter-spacing:.1em}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--accent);color:#fff;font-weight:700;
  letter-spacing:.04em;font-size:15px;padding:20px 30px;border:0;cursor:pointer;text-transform:uppercase;
  position:relative;overflow:hidden;transition:background .2s}
.btn:hover{background:var(--accent-d)}
.btn .clap{width:22px;height:18px;flex:none;position:relative}
.btn .clap svg{width:100%;height:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:#fff;color:#000}

/* ---- hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,12,14,.7) 0%,rgba(11,12,14,.2) 40%,rgba(11,12,14,.85) 100%)}
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 25vh,33.33% 100%}
.hero-inner{position:relative;z-index:2;padding:150px 34px 0;max-width:1360px;margin:0 auto;width:100%;flex:1;
  display:flex;flex-direction:column;justify-content:center}
.showreel{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:14px;
  letter-spacing:.12em;color:var(--dim);margin-bottom:26px}
.showreel .tri{width:0;height:0;border-left:14px solid var(--accent);border-top:8px solid transparent;border-bottom:8px solid transparent}
.hero h1{font-weight:800;font-size:clamp(34px,8.5vw,128px);line-height:.92;letter-spacing:-.02em;
  color:#c9cacc;max-width:14ch;mix-blend-mode:screen}
.hero-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-top:auto;padding-top:60px}
.rating .big{font-size:34px;font-weight:800}
.rating .dots{display:flex;gap:4px;margin:8px 0 6px}
.rating .dots i{width:26px;height:6px;background:var(--accent)}
.rating small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.hero-copy p{font-family:var(--mono);font-size:14px;line-height:1.55;color:#b9babd;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:26px;max-width:44ch}
.meta{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  margin-top:40px;font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.06em}
.meta span{padding:16px 34px}
.meta span:not(:first-child){border-left:1px solid var(--line)}
.meta .clock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}

/* ---- section scaffolding ---- */
section{position:relative}
.timeline{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.timeline > div{padding:14px 22px}
.timeline > div:first-child{color:var(--ink);position:relative}
.timeline > div:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.timeline > div:not(:first-child){border-left:1px solid var(--line);text-align:center;color:var(--faint)}
.filmstrip{height:26px;background:repeating-linear-gradient(90deg,#000 0 8px,#1c1c1e 8px 14px);
  border-bottom:1px solid var(--line);opacity:.6}

/* ---- meet studio ---- */
.meet{padding:0 0 120px}
.meet .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:80px}
.meet .statement{font-weight:800;font-size:clamp(30px,4.6vw,68px);line-height:1.0;letter-spacing:-.01em;
  color:#5c1c16;text-transform:uppercase}
.meet .left{display:flex;flex-direction:column;justify-content:space-between}
.meet .left p{font-family:var(--mono);font-size:15px;line-height:1.6;letter-spacing:.03em;color:#cfd0d2;text-transform:uppercase;max-width:40ch}
.badgecard{background:var(--accent);color:#fff;padding:34px;max-width:420px;margin-top:40px}
.badgecard h3{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.badgecard p{font-family:var(--disp);font-size:15px;line-height:1.5;color:#ffe3e0;text-transform:none;letter-spacing:0}
.meet .right{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.meet .right .btn{align-self:flex-end}

/* ---- client logos ---- */
.catalog{padding:70px 0;border-top:1px solid var(--line);overflow:hidden}
.catalog .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim);margin-bottom:34px;text-transform:uppercase}
.logos{display:flex;gap:70px;align-items:center;flex-wrap:wrap}
.logos span{font-weight:800;font-size:26px;letter-spacing:-.01em;color:#6f7074;transition:color .2s}
.logos span:hover{color:var(--ink)}

/* ---- section head ---- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:90px 0 46px}
.shead h2{font-weight:800;font-size:clamp(30px,4.4vw,60px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;max-width:16ch}
.shead .eyebrow{margin-bottom:0}

/* ---- featured works ---- */
.works{padding-bottom:110px}
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.work{position:relative;overflow:hidden;cursor:pointer}
.work .ph{aspect-ratio:16/11;overflow:hidden;background:var(--panel)}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work:hover .ph img{transform:scale(1.05)}
.work .cap{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 4px 40px}
.work .cap h3{font-size:26px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;margin-top:4px}
.work .cr{font-family:var(--mono);font-size:12px;color:var(--dim)}
.work .tags{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;text-align:right}
.center-btn{display:flex;justify-content:center;padding:40px 0}

/* ---- services ---- */
.services{padding-bottom:110px}
.svc{border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc-head{display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;padding:30px 6px;cursor:pointer}
.svc-head .idx{font-family:var(--mono);font-size:13px;color:var(--faint)}
.svc-head h3{font-weight:800;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em;text-transform:uppercase}
.svc-head .pm{width:26px;height:26px;position:relative;flex:none;transition:transform .3s}
.svc-head .pm::before,.svc-head .pm::after{content:"";position:absolute;background:var(--ink);inset:0;margin:auto}
.svc-head .pm::before{width:100%;height:2px}.svc-head .pm::after{width:2px;height:100%}
.svc.open .pm{transform:rotate(45deg)}
.svc-body{display:grid;grid-template-columns:70px 1.3fr 1fr;gap:24px;max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 6px}
.svc.open .svc-body{max-height:520px;padding-bottom:36px}
.svc-body .desc{grid-column:2;color:#c9cacd;font-size:16px;line-height:1.6}
.svc-body .desc .facts{margin-top:22px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.svc-body .desc .facts b{color:var(--accent);font-weight:600}
.svc-body .taglist{grid-column:3;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.svc-body .taglist span{border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:13px;color:var(--dim)}

/* ---- marquee ---- */
.expertise{padding:90px 0;border-top:1px solid var(--line)}
.marquee{overflow:hidden;white-space:nowrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee.alt{border-top:0}
.marquee .track{display:inline-flex;gap:36px;animation:scroll 32s linear infinite;will-change:transform}
.marquee.rev .track{animation-direction:reverse}
.marquee .track span{font-weight:800;font-size:clamp(28px,4vw,54px);letter-spacing:-.01em;text-transform:uppercase;color:#26272a}
.marquee .track span.hot{color:var(--accent)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- stats ---- */
.stats{padding:110px 0}
.stats h2{font-weight:800;font-size:clamp(30px,4.4vw,60px);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:60px;max-width:20ch}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-top:1px solid var(--line)}
.stat{padding:36px 26px 40px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .num{font-weight:800;font-size:clamp(48px,7vw,92px);letter-spacing:-.03em;line-height:1}
.stat .num em{color:var(--accent);font-style:normal}
.stat .k{font-weight:700;font-size:18px;margin:14px 0 10px;text-transform:uppercase;letter-spacing:.02em}
.stat p{font-size:14px;color:var(--dim);line-height:1.55}

/* ---- testimonials ---- */
.tmls{padding:0 0 110px}
.review-sources{display:flex;flex-wrap:wrap;gap:34px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.tml-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tml{background:var(--panel);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:20px}
.tml.big{grid-row:span 2}
.tml.red{background:var(--accent);border-color:var(--accent)}
.tml q{font-size:18px;line-height:1.5;quotes:none;font-weight:500}
.tml.big q{font-size:17px;color:#c9cacd;font-weight:400}
.tml.hl q{font-size:28px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1}
.tml .who{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.tml .who b{display:block;color:var(--ink);font-weight:600;font-size:14px;font-family:var(--disp);margin-bottom:3px}
.tml .who span{color:var(--dim);text-transform:uppercase}
.tml.red .who span{color:#ffd9d5}

/* ---- pricing ---- */
.pricing{padding:0 0 110px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan{background:var(--panel);border:1px solid var(--line);padding:40px;display:flex;flex-direction:column}
.plan.feature{background:var(--accent);border-color:var(--accent)}
.plan .inc{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin-bottom:20px}
.plan.feature .inc{color:#ffd9d5}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:34px}
.plan li{display:flex;gap:12px;align-items:center;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:#d5d6d8;font-family:var(--mono)}
.plan.feature li{color:#fff}
.plan li::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.plan.feature li::before{background:#fff}
.plan .pname{font-weight:800;font-size:34px;letter-spacing:-.01em;text-transform:uppercase;margin-top:auto}
.plan .pdesc{color:var(--dim);font-size:15px;line-height:1.5;margin:10px 0 22px}
.plan.feature .pdesc{color:#ffe3e0}
.plan .pfrom{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em}
.plan .amt{font-weight:800;font-size:56px;letter-spacing:-.02em;margin:2px 0 26px}
.plan.feature .pfrom{color:#ffd9d5}

/* ---- faq ---- */
.faq{padding-bottom:110px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q-head{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;padding:28px 6px;cursor:pointer}
.q-head .idx{font-family:var(--mono);font-size:13px;color:var(--faint)}
.q-head h3{font-size:clamp(18px,2.2vw,26px);font-weight:600}
.q-head .pm{width:22px;height:22px;position:relative;flex:none;transition:transform .3s}
.q-head .pm::before,.q-head .pm::after{content:"";position:absolute;background:var(--ink);inset:0;margin:auto}
.q-head .pm::before{width:100%;height:2px}.q-head .pm::after{width:2px;height:100%}
.q.open .pm{transform:rotate(45deg)}
.q-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.q.open .q-body{max-height:240px}
.q-body p{padding:0 6px 30px 96px;color:var(--dim);font-size:16px;line-height:1.6;max-width:70ch}

/* ---- footer ---- */
.foot{background:var(--accent);color:#fff;padding:90px 0 40px}
.foot .big{font-weight:800;font-size:clamp(42px,9vw,140px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.foot .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-top:70px;padding-top:34px;border-top:1px solid rgba(255,255,255,.25)}
.foot .fcol b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-bottom:14px;color:#ffd9d5}
.foot .fcol a,.foot .fcol div{display:block;font-size:16px;margin-bottom:8px;color:#fff}
.foot .fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:60px;font-family:var(--mono);font-size:12px;color:#ffd9d5;letter-spacing:.04em}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .hero-inner{padding:130px 20px 0}
  .hero-row{grid-template-columns:1fr;gap:30px}
  .meta{grid-template-columns:1fr 1fr}
  .meta span:nth-child(3){border-left:0}
  .meta span{border-top:1px solid var(--line)}
  .meet .grid{grid-template-columns:1fr;gap:26px}
  .works-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .tml-grid{grid-template-columns:1fr}
  .tml.big{grid-row:auto}
  .price-grid{grid-template-columns:1fr}
  .shead{flex-direction:column;align-items:flex-start;gap:16px}
  .svc-body{grid-template-columns:1fr}
  .svc-body .desc,.svc-body .taglist{grid-column:1}
  .q-body p{padding-left:6px}
  .timeline{font-size:10px}
  .bar{padding:12px 16px}
  .brand{font-size:15px;gap:7px}
  .menubtn{font-size:15px}
  .menubtn .bars{width:22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.reveal{transition:none}}
@media(prefers-reduced-transparency:reduce){.bar{background:#151517}}