:root{--vh:1vh;--w:#fff;--k:#000;--g:#6b6b6b;--line:#000;--card:#f2f2f2;--r:22px;--pad:clamp(22px,5vw,72px);--nav:78px;box-sizing:border-box;
 padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) - 1px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{background:var(--w);color:var(--k);font-family:"SF Armenian","SF Pro Display",-apple-system,BlinkMacSystemFont,"Noto Sans Armenian","Segoe UI",Arial,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.wrap{padding-inline:var(--pad);max-width:1480px;margin-inline:auto}

/* NAV */
header{position:fixed;inset:0 0 auto 0;z-index:50;height:calc(var(--nav) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);transition:background .5s,border-color .5s;--p:1;color:rgb(calc(255*(1 - var(--p))) calc(255*(1 - var(--p))) calc(255*(1 - var(--p))))}
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,calc(.82*var(--p)));border-bottom:1px solid rgba(0,0,0,calc(.12*var(--p)));-webkit-backdrop-filter:blur(calc(12px*var(--p)));backdrop-filter:blur(calc(12px*var(--p)))}
.js header{--p:0}
header.open{background:var(--w);color:var(--k)}
header.open{border-color:transparent}
.bar{height:var(--nav);display:flex;align-items:center;justify-content:space-between}
.logo{position:relative;display:block;width:clamp(128px,14vw,176px);aspect-ratio:900/81}
.logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s}
.logo .b{opacity:var(--p,0)}.logo .wh{opacity:calc(1 - var(--p,0))}
header.open .logo .b{opacity:1}
header.open .logo .wh{opacity:0}
nav ul{display:flex;gap:clamp(24px,3.2vw,48px);list-style:none}
nav a{font-size:15px;letter-spacing:.01em;position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer;position:relative;margin-right:-10px}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.2,.7,.2,1),top .45s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
header.open .burger i:nth-child(1){top:21.5px;transform:rotate(45deg)}
header.open .burger i:nth-child(2){top:21.5px;transform:rotate(-45deg)}

/* HERO */
.hero{position:relative;min-height:calc(var(--vh)*100);min-height:calc(var(--vh)*100);color:var(--w);display:flex;align-items:center;overflow:hidden;background:#2f8e97}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%;transform:scale(1.06);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16)}
@keyframes settle{to{transform:scale(1)}}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:calc(var(--nav) + calc(var(--vh)*2)) calc(var(--vh)*54)}
.hero h1{font-weight:600;font-size:clamp(46px,min(9.2vw,calc(var(--vh)*20)),152px);line-height:1.04;letter-spacing:-.025em;max-width:none;text-wrap:balance}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 span b{display:block;font-weight:inherit;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .3s forwards}
.hero h1 span:nth-child(2) b{animation-delay:.45s}.hero h1 span:nth-child(3) b{animation-delay:.6s}
@keyframes rise{to{transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border:1px solid currentColor;border-radius:28px;font-size:16px;letter-spacing:.01em;transition:background .35s,color .35s,border-color .35s}
.hero .btn{margin-top:clamp(32px,calc(var(--vh)*5),56px);opacity:0;animation:fade 1s ease 1.1s forwards}
@keyframes fade{to{opacity:1}}
.hero .btn:hover{background:var(--w);color:var(--k);border-color:var(--w)}

/* SECTIONS */
section{padding-block:clamp(88px,13vw,180px);background:var(--w);color:var(--k);position:relative;box-shadow:0 -28px 70px rgba(0,0,0,.16)}
.js main>section,.js .hero{position:sticky;top:0}
h2{font-weight:600;font-size:clamp(40px,7vw,112px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.about .grid{display:block;text-align:center}
.about h2{display:block;margin:0 auto clamp(40px,6vw,88px)}
.about .grid>div{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,6vw,96px);row-gap:clamp(40px,5vw,72px);max-width:1040px;margin-inline:auto;text-align:left}
.about p{font-size:clamp(18px,1.6vw,22px);line-height:1.55;letter-spacing:-.01em;font-weight:400;color:#6e6e73}
.about p:first-child{grid-column:1/-1;max-width:23em;margin-inline:auto;text-align:center;font-size:clamp(25px,3.2vw,46px);line-height:1.2;font-weight:600;letter-spacing:-.025em;color:var(--k);text-wrap:balance}
.about p:nth-child(n+2){font-size:clamp(17px,1.5vw,21px);line-height:1.65}
.about h2{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:0;line-height:1.3;color:#6e6e73;margin-bottom:clamp(36px,5vw,72px)}
.about h2::after{content:"";display:block;width:36px;height:1px;background:var(--k);margin:18px auto 0}
.about p:first-child{font-size:clamp(28px,4vw,60px);line-height:1.14;letter-spacing:-.03em;max-width:19em}
.about .grid>div{row-gap:clamp(56px,8vw,112px);max-width:940px}
.about .grid{max-width:calc(780px + 2*var(--pad));text-align:left}
.about h2::after{margin:18px 0 0}
.about .grid>div{display:block;max-width:none;margin:0}
.about .grid>div>p:is(:first-child,:nth-child(n+2)){grid-column:auto;max-width:none;padding:0;border:0;text-align:left;text-wrap:pretty;font-size:clamp(17px,1.7vw,23px);line-height:1.5;font-weight:400;letter-spacing:-.012em;color:var(--k)}
.about .grid>div>p+p{margin-top:1.5em}
.services{background:var(--w);border-top:0}
.services h2{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:0;line-height:1.3;color:#6e6e73;margin-bottom:clamp(36px,5vw,72px)}
.services h2::after{content:"";display:block;width:36px;height:1px;background:var(--k);margin:18px 0 0}
.services .rows{border-top:0;gap:clamp(12px,1.4vw,18px)}
.services .row{background:#f2f2f2;border:0;border-radius:var(--r);padding:min(clamp(24px,3.2vw,44px),calc(var(--vh)*4.8))}
.services .row .t{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,32px)}
.services .row .n{display:none}
.services .row h3{font-size:clamp(20px,2.2vw,30px)}
.services .row p{font-size:clamp(15px,1.3vw,18px);line-height:1.55}
.why{background:var(--w);border-top:0}
.why h2{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:0;line-height:1.3;color:#6e6e73;margin-bottom:clamp(36px,5vw,72px)}
.why h2::after{content:"";display:block;width:36px;height:1px;background:var(--k);margin:18px 0 0}
.why .rows{border-top:0}
.why .row{border:0;padding-block:clamp(20px,2.8vw,36px)}
.why .row .t{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,32px)}
.why .row .n{display:block;min-width:2ch;font-size:15px;color:var(--g);font-variant-numeric:tabular-nums}
.why .row h3{font-size:clamp(20px,2.2vw,30px)}
.why .row p{font-size:clamp(15px,1.3vw,18px);line-height:1.55}
.why .row:not(:last-child){border-bottom:1px solid rgba(0,0,0,.12)}
main>section.contact .lead{font-size:clamp(19px,1.9vw,26px);line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--k);max-width:none;margin:0 0 clamp(24px,3vw,40px)}
main>section.contact .cl{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:clamp(14px,1.8vw,22px)}
main>section.contact .cl a[href^="mailto"]{order:-1}
main>section.contact{padding-top:calc(var(--nav) + clamp(80px,calc(var(--vh)*13.6),176px))}
main>section.contact .cl a{width:auto;padding:clamp(14px,1.6vw,20px) clamp(20px,2.4vw,30px);border:0;border-radius:var(--r);background:#f2f2f2;color:var(--k);gap:clamp(12px,1.4vw,18px);transition:background .35s}
main>section.contact .cl a:hover,main>section.contact .cl a:focus-visible{background:#e8e8e8;color:var(--k)}
main>section.contact .ic{width:clamp(28px,2.6vw,36px);border:0;border-radius:0}
main>section.contact .ic svg{width:100%;height:100%;stroke-width:1.5}
main>section.contact .tx{font-size:clamp(18px,1.8vw,24px);line-height:1.3;padding-bottom:3px;position:relative;top:.14em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.2,1)}
main>section.contact .cl a:hover .tx,main>section.contact .cl a:focus-visible .tx{background-size:100% 1px}
.contact{background:var(--w);border-top:0}
.contact .cl{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,18px)}
.contact .cl a{width:fit-content;max-width:100%;padding:clamp(10px,1.2vw,14px) clamp(24px,2.6vw,36px) clamp(10px,1.2vw,14px) clamp(10px,1.2vw,14px);border-radius:999px;gap:clamp(12px,1.4vw,18px)}
.contact .ic{width:clamp(38px,3.4vw,46px)}
section{min-height:calc(var(--vh)*100);min-height:calc(var(--vh)*100);display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav) + clamp(24px,4vw,56px));padding-bottom:clamp(40px,6vw,88px)}
section>.wrap{width:100%}
section{justify-content:flex-start;padding-top:calc(var(--nav) + clamp(24px,calc(var(--vh)*6),84px))}
.about .grid{max-width:1480px}
.about .grid>div{max-width:780px}
.contact h2{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:0;line-height:1.3;color:#6e6e73;margin-bottom:clamp(36px,5vw,72px)}
.contact h2::after{content:"";display:block;width:36px;height:1px;background:var(--k);margin:18px 0 0}
.about .grid>div>p:is(:first-child,:nth-child(n+2)),.services .row p,.why .row p,.contact .tx{font-size:clamp(16px,1.4vw,19px);font-weight:400;line-height:1.6;letter-spacing:-.01em;color:var(--k)}
.services .row h3,.why .row h3{font-size:clamp(20px,2.2vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--k)}
main>section{border-top:0;justify-content:flex-start;align-items:stretch;padding-top:calc(var(--nav) + clamp(10px,calc(var(--vh)*3),44px))}
main>section:is(.about,.services,.why,.contact){border-top:0}
main>section:is(.about,.services,.why,.contact) h2{margin-bottom:clamp(20px,3vw,40px)}
main>section>.wrap{margin-top:0;margin-bottom:auto;padding-top:0;padding-bottom:0;align-self:stretch}
main>section h2{display:block;margin-top:0;margin-bottom:clamp(36px,5vw,72px);padding:0;font-size:clamp(17px,1.5vw,20px);line-height:1.3;transform:none}
.js main>section h2.rv{transform:translateY(24px)}
.js main>section h2.rv.in{transform:none}
.services,.why,.contact{border-top:1px solid var(--line)}
.services h2,.why h2,.contact h2{margin-bottom:clamp(48px,8vw,120px)}
.rows{display:grid;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,8vw,140px);align-items:center;padding-block:clamp(28px,4vw,56px);border-bottom:1px solid var(--line)}
.row .t{display:block}
.row .n{display:none}
.row h3{font-weight:600;font-size:clamp(28px,3.6vw,56px);line-height:1.1;letter-spacing:-.025em}
.row p{font-size:clamp(17px,1.6vw,22px);color:#333;max-width:44ch}
.cl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px)}
.cl a{display:flex;align-items:center;gap:clamp(16px,2vw,28px);padding:clamp(26px,3.6vw,48px);border:1px solid var(--k);border-radius:12px;min-width:0;transition:background .35s,color .35s}
.ic{flex-shrink:0;width:clamp(48px,4.4vw,64px);aspect-ratio:1;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
.ic svg{width:38%;height:38%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tx{max-width:100%;font-size:clamp(17px,1.9vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.cl a:hover,.cl a:focus-visible{background:var(--k);color:var(--w)}


.contact{padding-bottom:0}
.contact footer{margin-top:0;width:100%}
footer{background:var(--k);color:var(--w);border-top:1px solid rgba(255,255,255,.28);padding-block:32px calc(32px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer img{width:140px;height:auto;display:block}
footer p{font-size:14px;color:rgba(255,255,255,.7)}

/* REVEAL */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js-off .rv{opacity:1;transform:none}

/* MOBILE */
@media(max-width:860px){
 :root{--nav:68px}
 nav{position:fixed;inset:calc(var(--nav) + env(safe-area-inset-top,0px)) 0 0 0;background:var(--w);color:var(--k);padding:24px var(--pad) calc(40px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;overflow-y:auto}
 header.open nav{opacity:1;visibility:visible}
 nav ul{flex-direction:column;gap:0}
 nav li{border-bottom:.5px solid rgba(0,0,0,.14)}
 nav a{display:block;font-size:23px;font-weight:400;letter-spacing:-.01em;padding:20px 0}
 nav a::after{display:none}
 .burger{display:block}
 .hero .wrap{padding-bottom:calc(var(--vh)*46)}
 .hero img.bg{object-position:50% 100%}
 .about .grid,.row{grid-template-columns:1fr;gap:20px}
 .about .grid>div{grid-template-columns:1fr;row-gap:32px}
 .vals{grid-template-columns:1fr;gap:44px}
 .val{border:0;margin:0;padding:0}
 .cl{grid-template-columns:1fr}
 .cl a{padding:26px}
 footer .wrap{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero img.bg,.hero h1 span b,.hero .btn{animation:none;transform:none;opacity:1}
 .rv{opacity:1;transform:none;transition:none}
}
main>section.contact>.wrap{flex:1;display:flex;flex-direction:column;margin-bottom:0;padding-bottom:clamp(28px,calc(var(--vh)*6),72px)}
main>section.contact .lead{max-width:20em;margin:0}
main>section.contact .cl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);margin-top:auto;padding-top:clamp(32px,calc(var(--vh)*5),64px);width:100%}
main>section.contact .cl a{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;min-height:clamp(120px,calc(var(--vh)*22),240px);padding:clamp(22px,2.6vw,36px);width:auto}
main>section.contact .ic{width:clamp(32px,3vw,44px)}
main>section.contact .tx{font-size:clamp(20px,2vw,28px);font-weight:500;top:0}
@media(max-width:860px){main>section.contact .cl{grid-template-columns:1fr}main>section.contact .cl a{min-height:clamp(96px,calc(var(--vh)*13),128px);gap:14px}}
@media(min-width:640px) and (max-width:860px){.row{grid-template-columns:5fr 7fr;gap:clamp(20px,5vw,48px)}main>section.contact .cl{grid-template-columns:1fr 1fr}main>section.contact .cl a{min-height:clamp(120px,calc(var(--vh)*16),200px)}}
.about .grid{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.about .grid>h2{margin-inline:0}
.about .ph{margin:0;width:100%;height:clamp(120px,calc(var(--vh)*20),300px);border-radius:var(--r);overflow:hidden;background:#eaf1f2}
.about .ph img{width:100%;height:100%;object-fit:cover;object-position:60% 78%;display:block;transform:scale(1.1);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.about .ph.in img{transform:scale(1)}
@media(min-width:1200px){.about .ph{position:absolute;top:0;right:var(--pad);margin:0;width:calc(100% - 2*var(--pad) - 780px - clamp(48px,6vw,100px));height:auto;aspect-ratio:4/5;max-height:calc(var(--vh)*62)}}
.about{overflow:hidden}
.about .grid{z-index:1}
.about .ph{background:#f2f2f2;position:relative;container-type:size;color:var(--k)}
.about .ph .mono{position:absolute;left:6cqw;top:3cqw;font-size:min(58cqw,110cqh);font-weight:600;letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.22);user-select:none}
.about .ph svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.about .ph svg>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.2,.7,.2,1)}
.about .ph.in svg>*{stroke-dashoffset:0}
.about .ph svg>*:nth-child(2){transition-delay:.15s}.about .ph svg>*:nth-child(3){transition-delay:.3s}.about .ph svg>*:nth-child(4){transition-delay:.45s}.about .ph svg>*:nth-child(5){transition-delay:.6s}.about .ph svg>*:nth-child(6){transition-delay:.75s}
.about::after{content:"TOON GROUP";position:absolute;left:calc(max(0px,(100% - 1480px)/2) + var(--pad));bottom:-.13em;font-size:clamp(44px,11.5vw,240px);font-weight:600;letter-spacing:-.05em;line-height:.85;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.14);pointer-events:none;user-select:none;z-index:0}
@media(max-width:639px){.about::after{display:none}}
.about .grid>div{margin-top:clamp(10px,calc(var(--vh)*1.6),20px)}
@media(min-width:1200px){.about .grid{display:grid;grid-template-columns:clamp(280px,30vw,520px) 1fr;column-gap:clamp(28px,3.4vw,56px);align-items:start}.about .grid>h2{grid-column:1/-1}.about .ph{position:static;margin:0;width:100%;height:calc(calc(var(--vh)*100) - var(--nav) - clamp(10px,calc(var(--vh)*3),44px) - 11.5vw - 119px);min-height:260px;aspect-ratio:auto;max-height:none}.about .grid>div{margin:6px 0 0;max-width:780px}}
.about .ph img{object-position:47% 55%}
.why .row .n{display:none}
.why .rows{margin-top:calc(-1*clamp(20px,2.8vw,36px))}
.about .grid{row-gap:0}
main>section:is(.about,.services,.why){padding-top:calc(var(--nav) + clamp(10px,calc(var(--vh)*3),44px) + 14px)}
html:not(.js) .burger{display:none}
@media(max-width:860px){html:not(.js) header{height:auto;min-height:calc(var(--nav) + env(safe-area-inset-top,0px));padding-bottom:8px}html:not(.js) header .wrap{flex-wrap:wrap;row-gap:0;align-items:center;padding-top:10px}html:not(.js) nav{position:static;opacity:1;visibility:visible;background:none;color:inherit;padding:0;overflow:visible;width:100%}html:not(.js) nav ul{flex-direction:row;flex-wrap:wrap;gap:2px 16px}html:not(.js) nav li{border:0}html:not(.js) nav a{font-size:13px;padding:4px 0}}
@supports(height:1svh){:root{--vh:1svh}}
