/* KOLOVOS — CINEMA. Shared stylesheet for all pages. */
:root{
  --black:#000; --near:#0A0A0A; --panel:#0E0E0E; --white:#FAFAF8; --grey:#8A8A86;
  --line:#242424; --line2:#1A1A1A;
  --disp:"Oswald",Impact,"Arial Narrow",sans-serif;
  --ui:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--ui);
  font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);display:block}
.mono{font-family:var(--mono)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:200;text-transform:uppercase;
  letter-spacing:.005em;margin:0;text-wrap:balance}
h1 b,h2 b,h3 b{font-weight:500}
p{margin:0}

/* proposal chrome — delete when the real site is built */
.pitch{background:var(--white);color:var(--black);padding:12px var(--gut);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.7}

/* nav */
.nav{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:14px;padding:15px var(--gut);background:#000000d9;
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.burger{justify-self:start;background:none;border:0;color:var(--white);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;padding:6px 0}
.burger i{display:block;width:22px;height:1px;background:var(--white);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--white)}
.burger i::before{top:-6px}.burger i::after{top:6px}
/* ── the mark: KOLOVOS over Digital Dentistry · Athens ── */
.wordmark{display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;padding-block:2px;line-height:1}
.wordmark b{font-family:var(--disp);font-weight:300;font-size:clamp(20px,3.4vw,27px);
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;white-space:nowrap}
/* the subtitle is 0.296x the name — the ratio that makes the two lines the same width */
.wordmark i{font-family:var(--mono);font-style:normal;font-size:clamp(7px,1.01vw,8px);
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.wordmark:hover b{color:#E6E2DA}
.wordmark:hover i{color:var(--white)}
.navright{justify-self:end;display:flex;align-items:center;gap:14px}
.langs{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--grey);white-space:nowrap}
.langs b{color:var(--white);font-weight:400}
.langs a{color:var(--grey);text-decoration:none}
.langs a:hover{color:var(--white)}
@media (max-width:520px){.langs{display:none}}
.pill{justify-self:end;border:1px solid var(--white);color:var(--white);text-decoration:none;
  padding:9px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;background:none;cursor:pointer;display:inline-block}
.pill:hover{background:var(--white);color:var(--black)}
.pill.solid{background:var(--white);color:var(--black)}
.pill.solid:hover{background:none;color:var(--white)}
@media (max-width:620px){.burger span{display:none}}
/* below 460px the subtitle would fall under 7px — the mark stands on the name alone */
@media (max-width:460px){.wordmark i{display:none}.wordmark b{font-size:18px}}
@media (max-width:400px){.wordmark b{font-size:16px;letter-spacing:.34em;text-indent:.34em}
  .pill{padding:8px 13px;font-size:9.5px}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:70;background:#000000f7;display:grid;place-items:center;
  padding:64px var(--gut) 40px;overflow-y:auto}
.drawer nav{text-align:center}
.drawer a{display:block;font-family:var(--disp);font-weight:200;text-transform:uppercase;
  font-size:clamp(21px,4.4vw,44px);line-height:1.26;text-decoration:none}
.drawer a:hover,.drawer a[aria-current]{color:var(--grey)}
.drawer .small{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey);
  margin-top:28px;line-height:2.2}
.drawer .x{position:absolute;top:20px;right:var(--gut);background:none;border:0;color:var(--white);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;cursor:pointer;text-transform:uppercase}

/* film plates */
.plate{position:absolute;inset:-6%;animation:drift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.4%,-1%,0)}to{transform:scale(1.16) translate3d(1.6%,1.2%,0)}}
.p1{background:radial-gradient(70% 60% at 54% 40%,#e9d9c9,#a58b74 26%,#4a3a30 58%,#0b0908 88%)}
.p2{background:radial-gradient(70% 60% at 44% 42%,#e3e4e0,#8f938e 28%,#3a3d3a 60%,#0b0c0b 88%)}
.p3{background:radial-gradient(70% 60% at 58% 36%,#efe0cf,#a68f79 28%,#42352c 60%,#0d0b09 88%)}
.p4{background:radial-gradient(70% 60% at 48% 44%,#e0dbe4,#8d8797 28%,#39353f 60%,#0c0b0e 88%)}
.p5{background:radial-gradient(70% 60% at 52% 38%,#dfe3d9,#8b9089 28%,#373b36 60%,#0b0d0a 88%)}
.p6{background:radial-gradient(70% 60% at 56% 40%,#eadbd2,#a08a7e 28%,#403430 60%,#100d0c 88%)}
.ph{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#ffffffb0;z-index:2}

/* page head */
.phead{padding-block:clamp(40px,7vw,86px) clamp(26px,4vw,46px);border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(32px,7.4vw,92px);line-height:.94;margin-top:14px}
.phead p{color:var(--grey);max-width:58ch;margin-top:22px;font-weight:200}

/* sections */
.sec{padding-block:clamp(48px,7vw,96px)}
.sec.line{border-bottom:1px solid var(--line)}
.stop{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.stop h2{font-size:clamp(22px,3.6vw,44px);line-height:1.02;margin-top:10px}

/* case cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.ccard{display:block;text-decoration:none}
.ccard .shot{aspect-ratio:3/4;position:relative;overflow:hidden;background:#111}
.ccard:hover .shot .plate{filter:brightness(1.12)}
.ccard h3{font-size:19px;font-weight:300;margin-top:12px}
.ccard .meta{display:flex;justify-content:space-between;gap:12px;padding-top:11px;margin-top:11px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}
.ccard .meta b{color:var(--white);font-weight:400}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.f{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line);background:none;color:var(--grey);cursor:pointer}
.f[aria-pressed="true"]{border-color:var(--white);color:var(--white)}
.f:focus-visible{outline:2px solid var(--white);outline-offset:2px}

/* before / after */
.split{position:relative;height:min(74vh,660px);overflow:hidden;touch-action:none;border-block:1px solid var(--line)}
.split .lay{position:absolute;inset:0}
.split .aft{clip-path:inset(0 0 0 52%)}
.split .bar{position:absolute;top:0;bottom:0;left:52%;width:1px;background:var(--white);z-index:3}
.split .bar::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;
  border:1px solid var(--white);border-radius:50%;background:#00000055}
.split .tag{position:absolute;bottom:22px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#ffffffcc;z-index:3}
.split .tag.l{left:var(--gut)}.split .tag.r{right:var(--gut)}
.split input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.split .note{position:absolute;top:22px;left:var(--gut);z-index:3;max-width:34ch}
.split .note h3{font-size:clamp(18px,2.4vw,28px);font-weight:300;margin-top:10px}

/* data list */
.dl{display:grid;grid-template-columns:190px 1fr;gap:0;border-top:1px solid var(--line)}
.dl dt,.dl dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:17px}
@media (max-width:640px){.dl{grid-template-columns:1fr}.dl dt{border-bottom:0;padding-bottom:0}.dl dd{padding-top:4px}}

/* stages */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stages > div{background:var(--black);padding:22px}
.stages h4{font-size:20px;font-weight:300;margin:12px 0 8px}
.stages p{color:var(--grey);font-size:14.5px;font-weight:200}

/* service counter */
.svc{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);padding:20px 22px}
.svc .n{font-family:var(--disp);font-weight:300;font-size:clamp(26px,4.4vw,46px);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* text block */
.prose{max-width:66ch}
.prose p + p{margin-top:18px}
.prose p{color:#D6D3CD;font-weight:200}

/* two col */
.two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
@media (max-width:880px){.two{grid-template-columns:1fr;gap:26px}}
.portrait{aspect-ratio:4/5;position:relative;overflow:hidden;background:#111}

/* form */
.field{border:1px solid var(--line);padding:13px 15px;margin-bottom:11px;background:var(--panel)}
.field span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.field em{display:block;font-style:normal;color:var(--grey);opacity:.6;font-size:15px;margin-top:4px}

/* prev / next */
.pager{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px;margin-top:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.pager a{color:var(--grey);text-decoration:none}
.pager a:hover{color:var(--white)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:38px 56px;font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:28px}
footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0 0 12px;font-weight:400}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none;opacity:.8}
footer a:hover{opacity:1}
.fnote{margin-top:34px;color:var(--grey);font-size:11.5px;line-height:1.9;max-width:78ch;
  font-family:var(--mono);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.plate{animation:none}}