/* A contemporary local identity: Tatar floral ornament, civic architecture,
   and a distinct visual vocabulary for each everyday service. */
:root{--ink:#153e3b;--muted:#536e69;--paper:#edf3f0;--line:#cfddd7;--deep:#123f3c;--lime:#d9ed94;--orange:#d85943;--blue:#d6e9f2;--shadow:0 18px 50px #153e3b12}
body{background:var(--paper);position:relative;isolation:isolate}
body:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 5% 7%,#deecd7 0,transparent 34%),radial-gradient(ellipse at 99% 35%,#dbeaf1 0,transparent 40%),linear-gradient(160deg,#f7faf7,#edf3f0 70%,#e2eee6);pointer-events:none}
body:after{content:"";position:absolute;inset:0;z-index:-1;background:url('./assets/tatar-ornament.png') -240px -70px/650px repeat;opacity:.095;filter:grayscale(1);mix-blend-mode:multiply;pointer-events:none}
.landmark-backdrop{position:absolute;top:640px;right:0;width:100%;height:720px;z-index:-1;background:linear-gradient(90deg,#edf3f0 10%,#edf3f080 55%,transparent),url('./assets/derzhavin-lyceum.jpg') right center/cover no-repeat;opacity:.11;mask-image:linear-gradient(transparent,#000 22%,#000 65%,transparent);pointer-events:none;filter:grayscale(1)}
::selection{background:#d9ed94;color:#153e3b}
.wrap{width:min(1200px,calc(100% - 48px))}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #a36c25;outline-offset:5px}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
header{padding:24px 0 14px}
.nav{padding:13px 16px 13px 14px;border:1px solid #fff;border-radius:22px;background:#ffffffb8;box-shadow:0 8px 40px #17473d05;backdrop-filter:blur(18px)}
.brand{gap:11px;letter-spacing:-.04em;line-height:1.15}
.brandmark{width:46px;height:46px;background:var(--deep);color:#e5e7ad;box-shadow:none;border-radius:14px;font-size:24px}
.brand-name{display:block;font-size:1.08rem}.brand-location{display:block;color:#71827a;font-size:.72rem;font-weight:600;letter-spacing:.01em;margin-top:5px}
.navlinks{gap:4px}.navlinks a{font-size:.875rem;padding:10px 12px}.top-call{background:#f9e8e1;color:#9c382d!important;border:1px solid #efd3c8}
.place-line{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 3px 19px;font-size:.78rem;color:#5e746c;font-weight:600;letter-spacing:.01em}.place-line>span{display:flex;align-items:center;gap:9px}.place-line a{border-bottom:1px solid #bdcdc6}
.tatar-flag{width:25px;height:17px;border-radius:4px;background:linear-gradient(#32865a 0 44%,#fff 44% 56%,#c94748 56%);box-shadow:0 0 0 1px #203a3310}
.hero{grid-template-columns:1.6fr 1fr;gap:20px;margin-top:0}
.hero-main,.emergency{border-radius:28px;box-shadow:0 14px 40px #183f3310}
.hero-main{background:#123f3c;padding:42px 40px;min-height:430px;border:1px solid #ffffff20}
.hero-main:after{inset:0 -28px 0 auto;width:72%;height:auto;background:url('./assets/tatar-ornament.png') right center/420px repeat;opacity:.26;mask-image:linear-gradient(90deg,transparent 5%,#000 100%)}
.hero-main:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(#68a485,#dbe4b0 50%,#c77d60);opacity:.7}
.eyebrow{font-size:.75rem;letter-spacing:.13em;color:#dce9b6}.eyebrow:before{display:none}
.hero h1{font-size:clamp(2.8rem,5.2vw,4.7rem);line-height:1.02;letter-spacing:-.06em;margin:23px 0 21px}
.hero-main>p{font-size:1rem;line-height:1.65;max-width:520px;color:#d5e2db;margin-bottom:24px}
.search{height:62px;padding:7px;background:#fff;border:1px solid #fff;border-radius:14px;box-shadow:0 8px 20px #072d2a24;gap:9px}
.search>span{margin:0 1px 0 9px;display:flex;color:#63786d}.search input{font-size:.94rem;background:transparent;min-width:0}.search button{background:#e1edac;padding:12px 19px;border-radius:9px;font-size:.9rem;transition:background .2s}.search button:hover{background:#cce785}.search:focus-within{outline:3px solid #dbe6a680;outline-offset:3px}
.hero-main .examples{color:#b9cbc0!important;font-size:.75rem!important;margin-top:12px!important;line-height:1.4}
.emergency{background:#f8ece5;color:#73382d;padding:31px;position:relative;isolation:isolate;border:1px solid #ecd6c8}
.emergency:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 105% 3%,#eabb9980,transparent 50%);pointer-events:none}
.emergency small{color:#99503e;font-size:.73rem;letter-spacing:.08em;line-height:1.5;opacity:1;display:flex;align-items:center;gap:9px}.emergency small .icon{width:23px;height:23px}
.emergency h2{font-size:clamp(1.65rem,2.65vw,2.25rem);margin:26px 0 13px;letter-spacing:-.04em;line-height:1.13;max-width:310px}
.emergency p{font-size:.92rem;line-height:1.6;color:#866050;margin-bottom:20px}
.call112{padding-top:17px;border-color:#d9bcae;color:#bd4939}.call112 strong{font-size:4.2rem;letter-spacing:-.06em;font-weight:800}.round-arrow{background:#c65340;color:#fff;width:46px;height:46px}
.emergency-grid{gap:7px;margin-top:19px}.emergency-grid a{background:#ffffffa6;color:#815044;border:1px solid #e5cfc2;font-size:.75rem;padding:9px 4px;border-radius:10px}.emergency-grid a:hover{background:#fff}.emergency-grid b{font-size:1.1rem;color:#a44734}
.section{padding-top:64px}.section h2{font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.055em}.section-head{align-items:center;margin-bottom:23px}.section-head p{font-size:.9rem;line-height:1.6;max-width:400px}
.section-kicker{font-size:.73rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:#729186;display:block;margin-bottom:11px}
.chips{gap:7px;margin-bottom:25px}.chip{background:#ffffffa3;border-color:#d8e2db;padding:10px 17px;font-size:.86rem;color:#537166;transition:background .2s}.chip.active,.chip:hover{background:#164d43;border-color:#164d43}
.cards{gap:18px;align-items:stretch}.card{--accent:#2e785b;--wash:#e4f0e6;--art:#d0e6d5;background:#fff;border:1px solid #d4e1d9;border-radius:24px;padding:0;overflow:hidden;min-height:340px;box-shadow:0 5px 20px #174d3605;transition:transform .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 35px #163f3312;border-color:var(--accent)}
.card--health{--accent:#2e7897;--wash:#e4f2f8;--art:#c5e4ef}.card--docs{--accent:#97661f;--wash:#fbf1d9;--art:#f0dfa9}.card--gas{--accent:#b66341;--wash:#faeade;--art:#efcbb4}.card--region{--accent:#686093;--wash:#eeeaf7;--art:#d9d1ef}.card--utilities{--accent:#3b7374;--wash:#e2f0ee;--art:#c4e0da}.card--school{--accent:#315f54;--wash:#eaf2e8;--art:#cee0cc}
.card-art{height:128px;flex-shrink:0;position:relative;background:var(--wash);color:var(--accent);overflow:hidden;display:flex;align-items:center;padding:23px}
.card-art:before{content:"";position:absolute;width:145px;height:145px;right:-20px;top:-35px;border:1px solid currentColor;border-radius:50%;opacity:.14;box-shadow:0 0 0 22px var(--wash),0 0 0 23px currentColor}
.card-art:after{content:"";position:absolute;inset:0;background:url('./assets/tatar-ornament.png') right center/225px repeat;opacity:.2;mask-image:linear-gradient(90deg,transparent 45%,#000);mix-blend-mode:multiply}
.card--health .card-art:after,.card--docs .card-art:after,.card--gas .card-art:after,.card--utilities .card-art:after{background:none}
.card-icon{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:#ffffffb3;box-shadow:0 4px 14px #31544808;z-index:1}.card-icon .icon{width:34px;height:34px;stroke-width:1.4}
.art-mark{position:absolute;right:32px;top:10px;width:105px;height:105px;opacity:.12;transform:rotate(-13deg);stroke-width:1.1}
.card-body{padding:23px 24px 19px;display:flex;flex-direction:column;flex:1}.card-top{align-items:center}.tag{font-size:.75rem;color:var(--accent);background:transparent;border-radius:0;padding:0;letter-spacing:.02em;font-weight:800}.symbol{display:none}.card h3{font-size:1.22rem;line-height:1.3;margin:12px 0 10px;letter-spacing:-.035em;max-width:285px}.card p{font-size:.88rem;line-height:1.65;color:#697b72;margin:0 0 23px}
.contact{padding-top:16px;border-color:#edf1ed;color:var(--accent);min-height:40px}.contact b{font-size:.91rem}.contact>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--wash);font-size:1rem}.source{font-size:.75rem;color:#71827a;margin-top:9px}.source:hover{color:var(--accent)}
.card--school{grid-column:1/-1;display:grid;grid-template-columns:1.08fr 1fr;min-height:270px;background:#fff}
.campus-picture{position:relative;min-height:275px;margin:0;background:#e5ede1;overflow:hidden}.campus-picture img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 48%;filter:saturate(.75)}
.campus-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#16382c8c)}
.campus-picture figcaption{position:absolute;left:22px;bottom:18px;right:20px;color:#fff;font-size:.75rem;z-index:1;text-shadow:0 1px 5px #0005}.campus-picture a{text-decoration:underline;text-underline-offset:3px}
.card--school .card-body{padding:30px 32px;position:relative;isolation:isolate;overflow:hidden}.card--school .card-body:after{content:"";position:absolute;inset:0;z-index:-1;background:url('./assets/tatar-ornament.png') right center/370px repeat;opacity:.08;mask-image:linear-gradient(90deg,transparent 35%,#000)}.card--school h3{font-size:1.75rem;max-width:400px}.school-label{display:flex;align-items:center;gap:9px}.school-label .icon{width:20px;height:20px}.card--school p{max-width:410px}
.card.hidden{display:none}.no-results{background:#fff;border:1px dashed #bacdc2;padding:40px;font-size:.94rem}.no-results button{display:block;margin:18px auto 0;border:0;border-radius:10px;background:#164d43;color:#fff;padding:10px 18px;cursor:pointer}
.guide{grid-template-columns:.8fr 1.2fr;gap:18px}.guide-intro{background:#164d43;color:#fff;border-radius:26px;padding:34px;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}.guide-intro:after{content:"";position:absolute;inset:0;z-index:-1;background:url('./assets/tatar-ornament.png') right bottom/360px repeat;opacity:.11;mask-image:linear-gradient(135deg,transparent 25%,#000)}.guide-intro .section-kicker{color:#bdcdad}.guide-intro h2{line-height:1.1}.guide-intro p{color:#c6d9ce;font-size:.93rem;line-height:1.7}.guide-icon{width:68px;height:68px;margin-top:auto;padding-top:25px;color:#d5e5b7}
.steps{gap:14px}.step{--step-accent:#3b7374;--step-wash:#e2f0ee;border:1px solid #d4e1d9;border-radius:21px;padding:25px;background:linear-gradient(155deg,var(--step-wash),#fff 55%)}.step:nth-child(2){--step-accent:#b66341;--step-wash:#faeade}.step:nth-child(3){--step-accent:#2e7897;--step-wash:#e4f2f8}.step:nth-child(4){--step-accent:#2e785b;--step-wash:#e4f0e6}.step-num{background:#ffffffc9;color:var(--step-accent);width:42px;height:42px;border-radius:12px;border:1px solid var(--step-wash)}.step-num .icon{width:23px;height:23px}.step h3{line-height:1.35;letter-spacing:-.02em;margin-top:17px}.step p{font-size:.87rem;line-height:1.65}.step a{color:var(--step-accent);font-size:.85rem;line-height:1.5}
.local{background:#e1ece2;border:1px solid #cadbcc;padding:38px;border-radius:26px;position:relative;isolation:isolate;overflow:hidden}.local:after{content:"";position:absolute;inset:0;z-index:-1;background:url('./assets/tatar-ornament.png') left bottom/410px repeat;opacity:.08;pointer-events:none}.local .section-kicker{color:#4c7860}.local h2{font-size:2.8rem}.local p{font-size:.94rem;line-height:1.7}.detail{background:#ffffffe0;border:1px solid #d4e1d5;border-radius:12px;font-size:.84rem;align-items:center}.detail>span{color:#65776a}.detail b{font-weight:700}.button{background:#164d43;border-radius:11px;font-size:.85rem}.button.light{background:#f8fbf7}.footer-grid{color:#61766b;border-color:#c7d8ce}.footer-grid p{font-size:.78rem;line-height:1.8}.footer-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:#365d49;margin-bottom:10px;font-size:.85rem}
@media(min-width:1450px){body:before{background:radial-gradient(ellipse at 5% 7%,#deecd7,transparent 40%),radial-gradient(ellipse at 95% 40%,#d5e6df,transparent 40%),#f3f7f3}body:after{background-size:780px;background-position:calc(50% + 640px) 0}}
@media(max-width:1000px){.wrap{width:min(100% - 36px,1200px)}.hero{grid-template-columns:1.3fr 1fr;gap:16px}.hero-main{padding:32px 26px;min-height:420px}.hero h1{font-size:3.25rem}.emergency{padding:27px 23px}.cards{grid-template-columns:repeat(2,1fr)}.card--school{grid-template-columns:1fr 1fr}.navlinks a{padding:10px;font-size:.8rem}.brand-location{font-size:.7rem}.navlinks a:not(.top-call){display:block}.guide{grid-template-columns:1fr}.guide-intro{min-height:240px}.guide-icon{display:none}.section-head{align-items:flex-start;flex-direction:column}.card h3{max-width:none}.local{grid-template-columns:1fr 1fr;gap:25px}.detail{display:block}.detail b{display:block;text-align:left;margin-top:5px}}
@media(max-width:760px){.navlinks a:not(.top-call){display:none}.hero{grid-template-columns:1fr}.hero-main{padding:35px 29px;min-height:400px}.hero h1{font-size:clamp(2.8rem,8vw,4rem)}.emergency{min-height:0;display:grid;grid-template-columns:1fr auto;gap:0 20px}.emergency small,.emergency h2,.emergency p{grid-column:1}.emergency h2{font-size:1.6rem;margin:18px 0 10px}.emergency h2 br{display:none}.emergency p{margin-bottom:10px}.call112{grid-column:2;grid-row:1/4;align-self:center;border:0;gap:16px;padding:0}.call112 strong{font-size:3.7rem}.round-arrow{display:none}.emergency-grid{grid-column:1/-1}.place-line{font-size:.73rem}.place-line>a{display:none}.card--school{grid-template-columns:1fr}.campus-picture{min-height:230px}.guide-intro h2 br{display:none}.local{grid-template-columns:1fr}}
@media(max-width:520px){.wrap{width:calc(100% - 24px)}header{padding-top:12px;padding-bottom:6px}.nav{padding:10px;border-radius:17px;gap:10px}.brandmark{width:38px;height:38px;border-radius:11px}.brand-name{font-size:.94rem}.brand-location{font-size:.66rem;letter-spacing:0}.brand{gap:9px}.top-call{font-size:.76rem!important;padding:10px!important;border-radius:10px!important}.place-line{padding:11px 2px 15px}.hero-main{border-radius:24px;padding:29px 22px;min-height:405px}.hero h1{font-size:3rem;line-height:1.02;letter-spacing:-.055em}.hero-main>p{font-size:.93rem;line-height:1.65}.hero-main:after{width:90%;opacity:.2;background-size:340px}.eyebrow{font-size:.72rem}.search{height:58px;gap:5px}.search>span{display:none}.search input{font-size:.86rem;padding-left:7px}.search button{padding:11px 13px;font-size:.84rem}.emergency{padding:22px;border-radius:22px;gap:0 12px}.emergency small{font-size:.64rem;letter-spacing:.04em}.emergency small .icon{display:none}.emergency h2{font-size:1.5rem}.emergency p{font-size:.82rem}.call112 strong{font-size:3rem}.section{padding-top:47px}.section h2{font-size:2.25rem}.section-head{gap:15px}.section-head p{font-size:.88rem}.section-kicker{font-size:.68rem}.chips{gap:6px}.chip{font-size:.8rem;padding:9px 13px}.cards{grid-template-columns:1fr;gap:15px}.card{min-height:320px;border-radius:22px}.card-art{height:116px}.card-body{padding:21px}.card--school .card-body{padding:23px}.card--school h3{font-size:1.6rem}.campus-picture{min-height:210px}.steps{grid-template-columns:1fr;gap:12px}.guide-intro{padding:28px}.step{padding:24px}.local{padding:27px 22px}.local h2{font-size:2.25rem}.footer-grid{gap:20px}.detail{font-size:.85rem}.footer-grid p{font-size:.76rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.chip,.search button{transition:none}.card:hover{transform:none}}
.tag{font-size:.875rem}.section-kicker{font-size:.75rem}
.brand span.brand-location{font-size:.72rem}
@media(max-width:520px){.brand span.brand-location{font-size:.65rem;white-space:nowrap}.top-call{white-space:nowrap}.emergency h2{font-size:1.4rem}.emergency h2 br{display:block}}