/* ===== v9 — Unseen-style entrance + Basic-style sections =====
   Loaded after the inline styles, so it layers on top of v8. */
:root{--grot:"Figtree","Noto Sans Georgian",system-ui,sans-serif;--paper:#F4F1F6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#17121D}}
:root[data-theme="dark"]{--paper:#17121D}

/* ---------- film grain over the whole page ---------- */
body::after{content:"";position:fixed;inset:-50%;z-index:290;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* ---------- entrance gate (Unseen) ---------- */
.gate{display:none}
html.gated .gate{display:grid}
html.gated,html.gated body{overflow:hidden}
.gate{position:fixed;inset:0;z-index:400;place-items:center;background:#F1E4EE;color:#1E1530;text-align:center;
  transition:opacity 1s var(--ease5),visibility 0s 1s}
.gate::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 45%,rgba(255,255,255,.55),transparent 70%)}
.gate.out{opacity:0;visibility:hidden}
.gate.out .g-mid{transform:scale(.94);filter:blur(6px)}
.g-mid{position:relative;display:grid;justify-items:center;gap:0;padding:0 24px;transition:transform 1s var(--ease5),filter 1s}
.g-sun{width:86px;height:86px;color:var(--sun,#EE9214);margin-bottom:22px}
.g-sun svg{width:100%;height:100%;overflow:visible}
.g-sun .g-rays{transform-origin:50px 50px;animation:spin 18s linear infinite}
.g-sun .g-core{transition:transform .25s ease-out}
.g-name{margin:0;font:600 15px/1 var(--grot);letter-spacing:.06em;text-transform:uppercase}
.g-name sup{font-size:.6em}
.g-desc{margin:12px 0 26px;max-width:330px;font:400 14.5px/1.45 var(--grot);color:#3B2F52}
.g-enter{border:0;cursor:pointer;background:#fff;color:#1E1530;border-radius:999px;padding:12px 22px;font:500 15px/1 var(--grot);
  display:inline-flex;gap:8px;align-items:center;box-shadow:0 8px 30px -12px rgba(60,30,90,.35);transition:transform .5s var(--spring5),background .3s,color .3s}
.g-enter:hover{background:#1E1530;color:#fff;transform:scale(1.06)}
.g-enter[disabled]{cursor:progress;background:transparent;box-shadow:none;color:#6B5E80}
.g-enter .g-go{display:none}.g-enter:not([disabled]) .g-go{display:inline}.g-enter:not([disabled]) .g-load{display:none}
.g-foot{position:absolute;left:0;right:0;bottom:28px;font:500 11.5px/1 var(--grot);letter-spacing:.08em;text-transform:uppercase;color:#6B5E80}
html[lang="ka"] .g-foot,html[lang="ka"] .g-name{letter-spacing:.02em;text-transform:none}

/* ---------- hero (Unseen): mixed serif + grotesk headline, minimal chrome ---------- */
.hero7{min-height:100svh}
.hero7 .h7-center{top:calc(var(--barh,72px) + 7vh)}
.hero7 .h7-kick{font:500 13px/1 var(--grot)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#2A1F3D!important;margin-bottom:10px}
html[lang="ka"] .hero7 .h7-kick{text-transform:none!important;letter-spacing:.02em!important;font-size:14px!important}
.hero7 .h7-title{color:#1E1530!important;line-height:.92!important}
.hero7 .h7-title .ln:first-child>*{font-family:"Noto Serif Display","Noto Serif Georgian",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.035em}
.hero7 .h7-title em{font-family:var(--grot)!important;font-style:normal!important;font-weight:500!important;color:#1E1530!important;letter-spacing:-.05em}
.hero7 .h7-title{font-size:clamp(48px,8.4vw,138px)!important}
html[lang="ka"] .hero7 .h7-title{font-size:clamp(34px,6vw,98px)!important;line-height:1.02!important}
html[lang="ka"] .hero7 .h7-title .ln:first-child>*{font-weight:500;letter-spacing:-.01em}
html[lang="ka"] .hero7 .h7-title em{letter-spacing:-.035em;font-weight:600!important}
.hero7 .h7-cta .btn{border-radius:999px}
.hero7 .h7-cta .btn-light{background:#fff!important;color:#1E1530!important}
.h9-dial{position:absolute;left:50%;bottom:clamp(16px,3vh,30px);transform:translateX(-50%);width:44px;height:44px;border-radius:50%;
  background:#fff;color:#1E1530;display:grid;place-items:center;text-decoration:none;box-shadow:0 6px 20px -8px rgba(30,20,50,.4);transition:transform .5s var(--spring5)}
.h9-dial:hover{transform:translateX(-50%) scale(1.12)}
.h9-dial svg{width:18px;height:18px;animation:h9bob 2.4s var(--ease5) infinite}
@keyframes h9bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.h9-copy{position:absolute;right:clamp(20px,4.5vw,64px);bottom:clamp(26px,3.6vh,40px);font:500 14px/1 var(--grot);color:#fff;text-shadow:0 1px 8px rgba(40,20,70,.35)}
@media (max-width:620px){.h9-copy,.h9-dial{display:none}}

/* ---------- cursor: ring (Unseen) that becomes a labelled disc (Basic) ---------- */
.cur{width:34px!important;height:34px!important;margin:-17px 0 0 -17px!important;color:inherit!important;mix-blend-mode:normal}
.cur>svg{display:none!important}
.cur-r{position:absolute;inset:0;border-radius:50%;border:1.5px solid #2A1F3D;display:grid;place-items:center;
  transition:transform .45s var(--spring5),background .3s,border-color .3s}
.cur.big .cur-r{transform:scale(.45);background:#2A1F3D}
.cur-l{position:absolute;left:50%;top:50%;font:600 12px/1 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:#1E1530;
  opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .25s,transform .4s var(--spring5);white-space:nowrap}
html[lang="ka"] .cur-l{text-transform:none;letter-spacing:0;font-size:12.5px}
.cur.lab .cur-r{transform:scale(3.2);background:#F6C9D3;border-color:transparent}
.cur.lab .cur-l{opacity:1;transform:translate(-50%,-50%)}
.cur.on-dark .cur-r{border-color:#fff}
.cur.on-dark.big .cur-r{background:#fff}
html.gated .cur{z-index:500}

/* ---------- clients strip (Basic awards row) ---------- */
.clients9{padding:clamp(80px,11vw,150px) 0 clamp(40px,6vw,80px);background:var(--paper)}
.c9-k{margin:0 0 clamp(36px,5vw,64px);text-align:center;font:500 13px/1 var(--grot);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html[lang="ka"] .c9-k{text-transform:none;letter-spacing:.01em;font-size:14px}
.c9-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);row-gap:clamp(44px,6vw,80px)}
.c9-row li{display:grid;justify-items:center;text-align:center;gap:14px;padding:0 12px}
.c9-row b{font:600 clamp(26px,3.2vw,44px)/1 var(--grot);letter-spacing:-.045em;color:var(--ink)}
.c9-row span{font:500 11.5px/1.35 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.75;max-width:180px}
html[lang="ka"] .c9-row span{text-transform:none;letter-spacing:.01em;font-size:12.5px}
@media (max-width:620px){.c9-row{grid-template-columns:repeat(2,1fr)}}

/* ---------- statement + giant monogram (Basic) ---------- */
.rule9{border:0;border-top:1px solid color-mix(in srgb,var(--ink) 55%,transparent);margin:0 0 clamp(48px,7vw,96px)}
.st9{background:var(--paper);padding:clamp(40px,6vw,80px) 0 clamp(100px,13vw,180px)!important}
.st9-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.st9-hi{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 15px/1.2 var(--grot);color:var(--muted)}
.st9-av{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center 20%;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--sun)}
.st9-big{margin:0 0 34px;font:500 clamp(26px,2.9vw,44px)/1.18 var(--grot)!important;letter-spacing:-.025em;color:var(--ink)}
html[lang="ka"] .st9-big{letter-spacing:-.01em;line-height:1.3;font-size:clamp(22px,2.4vw,36px)!important}
.st9-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.pill9{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);border-radius:999px;padding:11px 20px;font:600 13px/1 var(--grot);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:background .3s,color .3s}
html[lang="ka"] .pill9{text-transform:none;letter-spacing:.01em;font-size:14px}
.pill9:hover{background:var(--ink);color:var(--paper)}
.st9-mark{position:relative;justify-self:end;font:800 clamp(130px,21vw,330px)/.8 var(--grot);letter-spacing:-.07em;color:var(--ink);user-select:none}
.st9-mark span{display:block}
.st9-mark sup{position:absolute;right:-.18em;top:-.05em;font-size:.16em;font-weight:600;letter-spacing:0}
.st9-sun{position:absolute;right:-.2em;top:-.3em;width:.42em;height:.42em;color:var(--sun)}
.st9-sun .spin{transform-origin:50px 50px;animation:spin 30s linear infinite}
@media (max-width:820px){.st9-grid{grid-template-columns:1fr}.st9-mark{justify-self:start;order:-1;font-size:34vw}}

/* ---------- portfolio carousel (Basic) ---------- */
.work7{background:var(--paper)}
.work7 .work-box{background:transparent!important;color:var(--ink)!important;border-radius:0!important;padding-block:clamp(40px,6vw,80px)!important;margin:0!important}
.work7 .work-box::before,.work7 .work-box::after{display:none!important}
.work7 .sec-head{align-items:end!important;border-top:1px solid color-mix(in srgb,var(--ink) 55%,transparent);padding-top:clamp(40px,5vw,64px)}
.work7 .sec-head h2{color:var(--ink)!important;font-family:var(--grot)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:-.035em!important;line-height:.95!important}
html[lang="ka"] .work7 .sec-head h2{text-transform:none;letter-spacing:-.02em!important;line-height:1.08!important}
.work7 .kicker{color:var(--muted)!important}
.work7 .tabs button{background:transparent!important;border:1px solid var(--ink)!important;color:var(--ink)!important;border-radius:999px}
.work7 .tabs button[aria-selected="true"]{background:var(--ink)!important;color:var(--paper)!important}
.work7 .projects{display:flex!important;gap:20px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-top:clamp(34px,4vw,56px);padding-bottom:6px;cursor:grab;overscroll-behavior-x:contain}
.work7 .projects::-webkit-scrollbar{display:none}
.work7 .projects.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.work7 .projects.drag a,.work7 .projects.drag img{pointer-events:none}
.work7 .projects>.proj{flex:0 0 calc((100% - 40px)/3)!important;grid-column:auto!important;scroll-snap-align:start;border-radius:0!important;background:transparent!important}
@media (max-width:900px){.work7 .projects>.proj{flex-basis:calc((100% - 20px)/2)!important}}
@media (max-width:620px){.work7 .projects>.proj{flex-basis:80%!important}}
.work7 .proj .browser,.work7 .proj .tile,.work7 .proj .dvis{border-radius:0!important;aspect-ratio:1/1.08!important;overflow:hidden;position:relative;box-shadow:none!important}
.work7 .proj .browser .chrome{display:none!important}
.work7 .proj .browser .shot{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:left top}
.work7 .proj:hover .shot,.work7 .proj:hover .tile-shot,.work7 .proj:hover .reel{transform:scale(1.045)}
.work7 .proj-body{padding:18px 0 0!important;gap:8px!important}
.work7 .proj-body h3{order:-1;font:600 clamp(20px,1.8vw,26px)/1.05 var(--grot)!important;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)!important}
html[lang="ka"] .work7 .proj-body h3{text-transform:none;letter-spacing:-.01em}
.work7 .proj-type{font:500 11.5px/1.3 var(--grot)!important;letter-spacing:.06em!important;color:var(--ink)!important;opacity:.7}
html[lang="ka"] .work7 .proj-type{text-transform:none;letter-spacing:.01em!important;font-size:12.5px!important}
.work7 .proj p{color:var(--muted)!important;font-size:15px;max-width:34ch}
.work7 .proj a.visit{color:var(--ink)!important;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.prog9{display:grid;grid-template-columns:1fr 1fr auto;align-items:start;margin-top:clamp(30px,4vw,50px);font:500 13px/1 var(--grot);color:var(--ink);font-variant-numeric:tabular-nums}
.prog9 .p9-bar{grid-column:1/-1;height:1px;background:color-mix(in srgb,var(--ink) 25%,transparent);position:relative;margin-bottom:14px}
.prog9 .p9-bar b{position:absolute;left:0;top:-.5px;height:2px;background:var(--ink);width:0;transition:width .25s linear}
.prog9 .p9-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);transition:transform .4s var(--spring5)}
.prog9 .p9-dot.end{transform:scale(1.6);background:var(--sun)}

/* ---------- kinetic statement (Basic "helps brands ● connect") ---------- */
.kin9{background:var(--paper);padding:clamp(60px,8vw,110px) 0 clamp(90px,12vw,160px)}
.kin9-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.kin9-t{margin:0;font:700 clamp(44px,6.6vw,108px)/.9 var(--grot)!important;letter-spacing:-.055em!important;text-transform:uppercase;color:var(--ink)}
html[lang="ka"] .kin9-t{text-transform:none;font-size:clamp(34px,5vw,80px)!important;line-height:1.02!important;letter-spacing:-.03em!important}
.kin9-t .kl{display:block;overflow:hidden;padding-bottom:.04em}
.kin9-t .kl>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease5)}
.kin9.in .kin9-t .kl>span{transform:none}
.kin9.in .kin9-t .kl:nth-child(2)>span{transition-delay:.08s}.kin9.in .kin9-t .kl:nth-child(3)>span{transition-delay:.16s}.kin9.in .kin9-t .kl:nth-child(4)>span{transition-delay:.24s}
.dot9{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--sun);vertical-align:.02em;margin-left:.08em;animation:dot9 3s var(--ease5) infinite}
@keyframes dot9{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
.kin9-media{margin:0;aspect-ratio:4/4.6;overflow:hidden;position:relative}
.kin9-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:center 22%;will-change:transform}
.kin9-cap{display:flex;justify-content:space-between;margin-top:12px;font:500 12px/1 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html[lang="ka"] .kin9-cap{text-transform:none;letter-spacing:.01em}
@media (max-width:820px){.kin9-grid{grid-template-columns:1fr}.kin9-media{aspect-ratio:4/3.6}}

/* ---------- footer (Basic) ---------- */
footer.f9{background:#1E1A22;color:#EDE8F2;padding:clamp(70px,9vw,120px) 0 0;margin-top:0;border:0}
.f9-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.f9-top .logo-mark{font-size:24px;color:#fff}
.f9-say{margin:0;font:500 clamp(24px,2.6vw,38px)/1.15 var(--grot);letter-spacing:-.025em;color:#fff}
html[lang="ka"] .f9-say{letter-spacing:-.01em;line-height:1.3;font-size:clamp(21px,2.2vw,32px)}
.f9-say a{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;display:inline-block;margin-top:6px}
.f9-say a:hover{color:var(--sun)}
.f9-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px;margin-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,90px)}
.f9-cols h4{margin:0 0 16px;display:flex;align-items:center;gap:9px;font:600 12.5px/1 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:#fff}
html[lang="ka"] .f9-cols h4{text-transform:none;letter-spacing:.01em;font-size:13.5px}
.f9-cols h4::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.f9-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.f9-cols a,.f9-cols li{color:#CFC7DA;text-decoration:none;font:400 15px/1.35 var(--grot)}
.f9-cols a:hover{color:#fff;text-decoration:underline}
.f9-cols .f9-wa{display:flex;border-bottom:1px solid #8D849A;padding-bottom:10px;justify-content:space-between;color:#fff;font-size:15px}
.f9-bottom{background:#18151B;padding:20px 0;font:500 11px/1.4 var(--grot);letter-spacing:.06em;text-transform:uppercase;color:#8D849A}
html[lang="ka"] .f9-bottom{text-transform:none;letter-spacing:.01em;font-size:12px}
.f9-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f9-bottom a{color:inherit}
@media (max-width:820px){.f9-top{grid-template-columns:1fr}.f9-cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .kin9-t .kl>span{transform:none!important;transition:none!important}
  .g-sun .g-rays,.dot9,.h9-dial svg{animation:none}
}

/* ---------- v9 fixes ---------- */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--ground:#F4F1F6}}
:root[data-theme="light"]{--ground:#F4F1F6}
.work7 .work-box{box-shadow:none!important;max-width:none!important}
.f9-top .logo-mark{justify-self:start;display:inline-block}
.h9-copy{right:clamp(96px,8vw,120px)}
