/* Shared engine for Technoserves concept sites. Each site sets its own palette + fonts on :root. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--fb),system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
h1,h2,h3{font-family:var(--fd),Georgia,serif;font-weight:var(--fdw,600);line-height:1.05;letter-spacing:var(--fdls,-.02em);margin:0;text-wrap:balance}
p{margin:0}
.w{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,36px)}
.eb{font:600 .75rem/1.2 var(--fb),sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.mu{color:var(--muted)}
.bt{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--btr,999px);background:var(--acc);color:var(--accfg);text-decoration:none;font:600 .95rem/1 var(--fb),sans-serif;border:0;cursor:pointer;transition:transform .25s,filter .25s}
.bt:hover{transform:translateY(-2px);filter:brightness(1.08)}
.bt.o{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.ph{background-size:cover;background-position:center;background-color:var(--surface)}

/* header */
.sh{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sh .w{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{font:var(--fdw,600) 1.35rem/1 var(--fd),serif;text-decoration:none;letter-spacing:var(--fdls,-.02em);white-space:nowrap}
.brand small{display:block;font:500 .62rem/1.4 var(--fb),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.sn{display:flex;gap:4px}
.sn a{text-decoration:none;padding:8px 14px;border-radius:999px;font-size:.95rem;color:var(--muted)}
.sn a:hover,.sn a[aria-current="page"]{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.sb{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:1.2rem;cursor:pointer}
.mn{display:none}
@media (max-width:860px){.sn,.sh .bt{display:none}.sb{display:block}
 .open .mn{display:grid;gap:4px;padding:10px clamp(16px,4vw,36px) 20px;border-top:1px solid var(--line)}
 .mn a{padding:12px 0;font:var(--fdw,600) 1.4rem var(--fd),serif;text-decoration:none;border-bottom:1px solid var(--line)}}

/* heroes */
.hx{position:relative;overflow:hidden}
/* airy: split */
.st-airy .hx .w{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.st-airy .hx h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.st-airy .hx .img{aspect-ratio:4/5;border-radius:28px;position:relative;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--fg) 45%,transparent)}
.st-airy .hx .img .tagc{position:absolute;left:-18px;bottom:30px;background:var(--surface);border-radius:16px;padding:14px 18px;box-shadow:0 20px 40px -20px color-mix(in srgb,var(--fg) 40%,transparent);display:grid;gap:2px}
.st-airy .hx .img .tagc b{font:var(--fdw,600) 1.4rem var(--fd),serif;color:var(--acc)}
@media (max-width:860px){.st-airy .hx .w{grid-template-columns:1fr}.st-airy .hx .img{aspect-ratio:4/3}.st-airy .hx .img .tagc{left:14px}}
/* luxe: full-bleed */
.st-luxe .hx{overflow:hidden;min-height:clamp(560px,88vh,820px);display:flex;align-items:flex-end;color:#fff}
.st-luxe .hx .ph{position:absolute;inset:0}
.st-luxe .hx::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.25) 55%,rgba(0,0,0,.35))}
.st-luxe .hx .w{position:relative;z-index:1;padding-block:72px;width:100%}
.st-luxe .hx h1{font-size:clamp(3rem,8vw,6.6rem);max-width:12ch}
.st-luxe .hx .mu{color:rgba(255,255,255,.8)}
.st-luxe .hx .bt.o{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* bold: giant type */
.st-bold .hx .w{padding-block:clamp(48px,7vw,90px) clamp(40px,6vw,70px);display:grid;gap:30px}
.st-bold .hx h1{font-size:clamp(3.2rem,11vw,9.5rem);line-height:.9;text-transform:var(--btt,none);letter-spacing:-.035em}
.st-bold .hx .row{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,60px);align-items:end}
.st-bold .hx .img{aspect-ratio:16/10;border-radius:22px;transform:rotate(-1.5deg);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);border:6px solid var(--surface)}
@media (max-width:860px){.st-bold .hx .row{grid-template-columns:1fr}}
.hx .copy{display:grid;gap:22px;min-width:0}
.hx .sub{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:56ch}
.hx .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* reveal & motion */
.js .rv:not(.in){transform:translateY(18px)}
.rv{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hx .ph{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv:not(.in){transform:none}}

/* stats */
.stats{border-block:1px solid var(--line);background:var(--surface)}
.stats .w{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stats div div{padding:28px 20px;border-right:1px solid var(--line)}
.stats .w>div:last-child{border-right:0}
.stats .w>div{padding:28px 20px;border-right:1px solid var(--line);min-width:0}
.stats b{display:block;font:var(--fdw,600) clamp(1.6rem,3.4vw,2.6rem)/1 var(--fd),serif;color:var(--acc)}
.stats span{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}
@media (max-width:560px){.stats .w{grid-template-columns:1fr}.stats .w>div{border-right:0;border-bottom:1px solid var(--line)}.stats .w>div:last-child{border-bottom:0}}

/* sections */
.sc{padding-block:clamp(64px,9vw,120px)}
.sc.alt{background:var(--surface)}
.hd{display:grid;gap:14px;margin-bottom:44px;max-width:720px}
.hd h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:center}
.sp .img{aspect-ratio:5/4;border-radius:22px}
.sp .copy{display:grid;gap:18px;min-width:0}
.sp h2{font-size:clamp(1.9rem,4vw,3rem)}
@media (max-width:860px){.sp{grid-template-columns:1fr}}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g3,.g2{grid-template-columns:1fr}}
.cd{background:var(--surface);border:1px solid var(--line);border-radius:var(--cr,20px);padding:28px;display:grid;gap:12px;align-content:start;min-width:0;transition:transform .35s,box-shadow .35s}
.sc.alt .cd{background:var(--bg)}
.cd:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px color-mix(in srgb,var(--fg) 50%,transparent)}
.cd h3{font-size:1.4rem}
.cd .n{font:600 .8rem var(--fb),sans-serif;color:var(--acc);letter-spacing:.1em}
.cd .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;gap:10px}
.cd .meta span:last-child{color:var(--acc)}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.gal .ph{aspect-ratio:4/3;border-radius:18px}
.gal .ph:first-child{aspect-ratio:auto;grid-row:span 1}
@media (max-width:700px){.gal{grid-template-columns:1fr 1fr}.gal .ph:first-child{grid-column:1/-1;aspect-ratio:16/9}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps div{border-top:2px solid var(--acc);padding-top:18px;display:grid;gap:8px;min-width:0}
.steps div::before{counter-increment:s;content:"0" counter(s);font:600 .8rem var(--fb),sans-serif;color:var(--acc);letter-spacing:.1em}
.steps h3{font-size:1.25rem}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:500px){.steps{grid-template-columns:1fr}}

/* page hero */
.phx{padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,70px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phx h1{font-size:clamp(2.6rem,7vw,5.4rem);max-width:14ch}
.phx .sub{margin-top:18px;max-width:60ch;font-size:1.1rem}
.phx .ph{position:absolute;right:-6%;top:12%;width:min(38vw,460px);aspect-ratio:1;border-radius:50%;opacity:.9}
@media (max-width:860px){.phx .ph{display:none}}

/* cta */
.cta{border-radius:28px;padding:clamp(36px,6vw,72px);background:var(--acc);color:var(--accfg);display:grid;gap:22px;position:relative;overflow:hidden}
.cta h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:16ch}
.cta .bt{background:var(--accfg);color:var(--acc);width:max-content}
.cta::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:50px solid color-mix(in srgb,var(--accfg) 14%,transparent)}

/* forms */
.fm{display:grid;gap:14px}
.fm .r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.fm .r{grid-template-columns:1fr}}
.fm label{display:grid;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted)}
.fm input,.fm select,.fm textarea{font:400 1rem var(--fb),sans-serif;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px;width:100%}
.fm textarea{min-height:120px;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--acc)}
.note{display:none;padding:14px;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--fg);font-size:.95rem}
.note.on{display:block}
.info{display:grid;gap:20px}
.info div{display:grid;gap:2px}

/* footer */
.sf{border-top:1px solid var(--line);padding-block:56px 110px;background:var(--surface)}
.sf .w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.sf h4{margin:0 0 12px;font:600 .75rem var(--fb),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sf ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf a{text-decoration:none}
.sf a:hover{color:var(--acc)}
.sf .bot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:var(--muted)}
@media (max-width:700px){.sf .w{grid-template-columns:1fr}}

/* concept ribbon */
.rib{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:#0b1520;color:#e9f1f5;font:500 .78rem/1.2 system-ui,sans-serif;box-shadow:0 14px 40px -12px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);max-width:calc(100% - 24px)}
.rib b{color:#f4b23e;font-weight:700}
.rib a{color:#0b1520;background:#f4b23e;text-decoration:none;border-radius:999px;padding:7px 12px;font-weight:700;white-space:nowrap}
.rib span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}