*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f3f1ec;--white:#ffffff;--cream:#f7f4ee;--navy:#1b3a5c;--navy-d:#0f2237;--navy-lt:#355e89;--steel:#567ca7;--steel-text:#3d5d85;--sand:#d8c7ad;--gold:#b89968;--line:rgba(27,58,92,.14);--text:#17212c;--text-m:#54606d;--text-lt:#6b7682;--serif:'Playfair Display',serif;--sans:'Inter',sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--hero-primary-button-width:13.5rem;--hero-secondary-button-width:11.75rem;--contact-pill-width:10.75rem;--form-submit-width:12.5rem;--mobile-cta-bar-height:64px;--focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--navy)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;overflow-x:hidden}
body.menu-open{overflow:hidden}
a,button,input,textarea,select{font:inherit}
svg{display:block}
::selection{background:var(--navy);color:var(--white)}
[data-fit-text]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;word-break:keep-all}
h1,h2,.hero-sub,.hero-note p,.hero-card p,.about-body,.about-board-cell,.srv-title,.srv-desc,.srv-lnk,.project-name,.project-copy,.step-t,.step-d,.principle-title,.principle-copy,.ctact-g p{
  overflow-wrap:anywhere;
  word-break:normal;
}
h1,h2{
  text-wrap:balance;
}
#cur,#cur-r{display:none}
#cur{position:fixed;width:8px;height:8px;background:var(--navy);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s,background .2s}
#cur-r{position:fixed;width:32px;height:32px;border:1px solid rgba(27,58,92,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--navy)}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:2000;padding:.8rem 1.1rem;background:var(--navy-d);color:var(--white);text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;transform:translateY(-150%);transition:transform .25s ease}
.skip-link:focus-visible{transform:translateY(0)}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:calc(2rem + var(--safe-top)) calc(5rem + var(--safe-right)) 2rem calc(5rem + var(--safe-left));transition:all .4s;background:rgba(243,241,236,0);backdrop-filter:blur(0)}
nav.sc{background:rgba(243,241,236,.94);backdrop-filter:blur(16px);padding:calc(1.2rem + var(--safe-top)) calc(5rem + var(--safe-right)) 1.2rem calc(5rem + var(--safe-left));border-bottom:1px solid rgba(27,58,92,.08)}
.logo-slot{position:relative;display:flex;align-items:center;flex:0 0 14rem;min-width:14rem;height:2.5rem}
.logo{display:inline-flex;align-items:center;min-height:2.75rem;font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:.1em;color:var(--navy-d);text-decoration:none;text-transform:uppercase}
.logo span{color:var(--steel)}
#home-logo{position:absolute;left:0;top:50%;display:inline-flex;align-items:center;white-space:nowrap;transform:translate3d(var(--logo-x,0px),calc(-50% + var(--logo-y,0px)),0);transition:transform .34s cubic-bezier(.22,1,.36,1),color .25s}
#home-logo.is-catchable{color:var(--steel)}
.logo-footer{font-size:1.8rem;color:var(--white)}
.logo-footer span{color:rgba(255,255,255,.52)}
.nav-c{display:flex;align-items:center;gap:2.4rem}
.nav-tools{display:flex;align-items:center;gap:.9rem}
.nav-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 7rem;min-width:7rem;min-height:2.75rem;max-width:7rem;font-size:.72rem;line-height:1.15;letter-spacing:.16em;text-transform:uppercase;color:var(--text-m);text-decoration:none;transition:color .3s;white-space:normal;text-align:center}
.nav-link:hover{color:var(--navy)}
.lang-switch{display:flex;align-items:center;gap:.35rem}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:2.55rem;min-height:2.55rem;padding:.25rem .55rem;border:1px solid rgba(27,58,92,.12);background:rgba(255,255,255,.66);color:var(--navy);text-decoration:none;font-size:.68rem;font-weight:500;line-height:1;letter-spacing:.12em;text-transform:uppercase;transition:border-color .25s,background .25s,color .25s}
.lang-switch a:hover{border-color:rgba(27,58,92,.28);background:rgba(255,255,255,.9)}
.lang-switch a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.footer-lang-switch{margin:0 0 1.6rem;gap:.5rem}
.footer-lang-switch a{min-width:2.85rem;min-height:2.85rem;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.84)}
.footer-lang-switch a:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:var(--white)}
.footer-lang-switch a[aria-current="page"]{background:var(--white);border-color:var(--white);color:var(--navy-d)}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:44px;height:44px;border:1px solid rgba(27,58,92,.16);background:rgba(255,255,255,.72);color:var(--navy);border-radius:50%;padding:0}
.nav-toggle span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;flex:0 0 12.5rem;min-width:12.5rem;max-width:12.5rem;min-height:3rem;font-size:.72rem;line-height:1.12;letter-spacing:.15em;text-transform:uppercase;color:var(--white);background:var(--navy);text-decoration:none;padding:.65rem 1rem;transition:all .3s;white-space:normal;text-align:center}
.nav-cta:hover{background:var(--navy-d);transform:translateX(3px)}
#about,#services,#portfolio,#process,#principles,#contact{scroll-margin-top:calc(7rem + var(--safe-top))}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--steel);outline-offset:4px}

#hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:stretch;overflow:hidden;background:
radial-gradient(circle at 78% 18%, rgba(83,116,154,.22), transparent 22%),
linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)),
var(--cream)}
/* Hero background image — set via admin */
#hero.has-bg-image{background:none}
#hero.has-bg-image::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
#hero.has-bg-image::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.05) 100%);
}
#hero.has-bg-image .hero-shell{position:relative;z-index:2}
#hero.has-bg-image .hero-grid{display:none}
.hero-grid{position:absolute;inset:0;opacity:.06}
.hero-grid svg{width:100%;height:100%}
.hero-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 32rem;gap:4rem;align-items:center;width:100%;padding:5.5rem 5rem 6.5rem}
.hero-copy{max-width:42rem}
.eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;opacity:0;animation:fU .9s .25s forwards}
.eyebrow span{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--steel-text)}
.eyebrow::after{content:'';flex:0 0 2rem;width:2rem;height:1px;background:rgba(86,124,167,.5)}
h1{font-family:var(--serif);font-size:clamp(3.35rem,6vw,6.7rem);font-weight:400;line-height:1.02;color:var(--navy-d);margin-bottom:1.8rem;opacity:0;animation:fU .9s .45s forwards}
h1 em{font-style:italic;color:var(--steel)}
.hero-sub{max-width:33rem;font-size:1rem;line-height:1.9;color:var(--text-m);margin-bottom:2.8rem;opacity:0;animation:fU .9s .65s forwards}
.hero-acts{display:flex;align-items:center;gap:1.8rem;opacity:0;animation:fU .9s .82s forwards}
.btn-p{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hero-primary-button-width);min-width:var(--hero-primary-button-width);max-width:var(--hero-primary-button-width);min-height:3.3rem;gap:.8rem;background:var(--navy);color:var(--white);font-size:.69rem;font-weight:500;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.95rem 1rem;transition:all .3s;text-align:center}
.btn-p:hover{background:var(--navy-d);transform:translateX(3px)}
.btn-g{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hero-secondary-button-width);min-width:var(--hero-secondary-button-width);max-width:var(--hero-secondary-button-width);min-height:2.75rem;font-size:.69rem;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;color:var(--text-m);text-decoration:none;gap:.6rem;border-bottom:1px solid rgba(27,58,92,.2);padding:.85rem 0 .55rem;transition:all .3s;text-align:center}
.btn-g:hover{color:var(--navy-d);border-color:var(--navy);background:rgba(27,58,92,.05)}
.hero-note{max-width:21rem;margin-top:2.4rem;padding:1.1rem 1.2rem;border:1px solid rgba(27,58,92,.12);background:rgba(255,255,255,.52);backdrop-filter:blur(10px);opacity:0;animation:fU .9s 1s forwards}
.hero-note-label{display:block;margin-bottom:.55rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-text)}
.hero-note p{min-height:4.5rem;font-size:.86rem;line-height:1.72;color:var(--text-m)}
.hero-visual{position:relative;display:grid;gap:1rem;opacity:0;animation:fU .9s .55s forwards}
.hero-visual-frame{position:relative;min-height:28rem;padding:1.2rem;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg, rgba(15,34,55,.97), rgba(34,66,101,.9));box-shadow:0 24px 70px rgba(15,34,55,.18);overflow:hidden}
.hero-visual-frame::after{content:'';position:absolute;inset:1rem;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.hero-visual-top,.hero-visual-footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.72)}
.hero-visual-top span,.hero-visual-footer small{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase}
.hero-visual-footer{align-items:flex-end;margin-top:auto}
.hero-visual-footer div{display:flex;flex-direction:column;gap:.28rem}
.hero-visual-footer strong{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--white)}
.hero-drawing{position:relative;height:21rem;margin:1.5rem 0 1.25rem;border:1px solid rgba(255,255,255,.06);background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size:auto, 64px 64px, 64px 64px}
.blueprint-line,.blueprint-block{position:absolute;display:block}
.blueprint-line{border:1px solid rgba(245,244,240,.55)}
.line-a{left:12%;top:14%;width:48%;height:22%}
.line-b{right:16%;top:20%;width:24%;height:42%}
.line-c{left:18%;bottom:14%;width:42%;height:18%}
.line-d{left:52%;top:52%;width:20%;height:20%}
.blueprint-block{background:rgba(216,199,173,.16);border:1px solid rgba(216,199,173,.34)}
.block-a{left:8%;top:8%;width:18%;height:10%}
.block-b{right:12%;bottom:14%;width:28%;height:12%}
.block-c{left:38%;top:34%;width:14%;height:14%}
.hero-visual-stack{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hero-card{padding:1rem 1.05rem;border:1px solid rgba(27,58,92,.12);background:rgba(255,255,255,.72);backdrop-filter:blur(10px)}
.hero-card span{display:block;min-height:1rem;margin-bottom:.45rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-text)}
.hero-card p{min-height:5.25rem;font-size:.86rem;line-height:1.72;color:var(--text-m)}
.stat-bar{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy-d);opacity:0;animation:fI .8s 1.2s forwards}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:7rem;padding:1.65rem 2rem;border-right:1px solid rgba(255,255,255,.08);text-align:center}
.stat:last-child{border-right:none}
.stat-n{min-height:2.3rem;font-family:var(--serif);font-size:2.3rem;font-weight:400;color:var(--white);line-height:1;margin-bottom:.3rem}
.stat-l{min-height:1.55rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}

/* ── Marquee ─────────────────────────────────────────────── */

.sec{padding:4.5rem 5rem}
.sec-bg{background:var(--bg)}
.sec-white{background:var(--white)}
.sec-head-spread{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem}
.sec-head-center{text-align:center;margin-bottom:0}
.tag{display:flex;align-items:center;gap:1.2rem;margin-bottom:2rem}
.tag-tight{margin-bottom:1rem}
.tag-center{justify-content:center}
.tag span{font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;color:var(--steel-text)}
.tag::after{content:'';width:32px;height:1px;background:var(--steel)}
h2{font-family:var(--serif);font-size:clamp(2.5rem,4vw,4rem);font-weight:400;color:var(--navy-d);line-height:1.08;margin-bottom:1.5rem}
h2 em{font-style:italic;color:var(--steel)}

.about-g{display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:4rem;align-items:center;padding:4.5rem 5rem;background:var(--white)}
.about-body{font-size:.94rem;line-height:1.95;color:var(--text-m);margin-bottom:1.5rem;max-width:34rem}
.sig{font-family:var(--serif);font-size:1.6rem;font-style:italic;color:var(--steel);margin-top:2.2rem}
.about-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(27,58,92,.08);margin-top:3rem}
.an-item{background:var(--white);padding:1.8rem 1.5rem;text-align:center}
.an-n{min-height:2.4rem;font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--navy);line-height:1;margin-bottom:.3rem}
.an-l{min-height:1.7rem;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lt)}
.about-visual{position:relative}
.about-board{padding:1.4rem;border:1px solid rgba(27,58,92,.1);background:linear-gradient(160deg, #f8f6f1, #ece8df);box-shadow:0 22px 60px rgba(15,34,55,.08)}
.about-board-top{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-text)}
.about-board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(27,58,92,.12)}
.about-board-cell{display:flex;align-items:flex-start;min-height:4.75rem;padding:1.15rem 1rem;background:rgba(255,255,255,.72);font-size:.86rem;line-height:1.55;color:var(--navy-d)}
.about-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1rem 0}
.about-samples span{display:block;height:3.5rem}
.sample-light{background:#f2ede5}
.sample-mid{background:#d8c7ad}
.sample-dark{background:#647d98}
.sample-accent{background:#173455}
.about-board-note{font-size:.84rem;line-height:1.75;color:var(--text-m)}

.srv-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(27,58,92,.1);margin-top:3rem}
.srv{display:flex;flex-direction:column;min-height:20rem;background:var(--bg);padding:3rem 2.5rem;position:relative;overflow:hidden;transition:background .4s}
.srv::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%);opacity:0;transition:opacity .4s}
.srv:hover{background:var(--navy-d)}
.srv:hover::before{opacity:1}
.srv:hover .srv-n,.srv:hover .srv-title,.srv:hover .srv-desc,.srv:hover .srv-lnk{color:rgba(255,255,255,.88)}
.srv:hover .srv-n{color:rgba(255,255,255,.08)}
.srv-n{font-family:var(--serif);font-size:3rem;font-weight:400;color:rgba(27,58,92,.07);line-height:1;margin-bottom:1.25rem;transition:color .4s}
.srv-title{min-height:2rem;font-family:var(--serif);font-size:1.52rem;font-weight:400;color:var(--navy-d);margin-bottom:.85rem;transition:color .4s}
.srv-desc{min-height:3.5rem;font-size:.87rem;line-height:1.88;color:var(--text-m);margin-bottom:1.5rem;transition:color .4s}
.srv-lnk{display:inline-flex;align-items:center;gap:.6rem;min-height:2.5rem;margin-top:0;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-text);text-decoration:none;transition:all .4s;white-space:normal}

.port-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem;align-items:start}
.pi:nth-child(1){grid-column:span 2}
.project-card{display:flex;flex-direction:column;min-height:20rem;padding:1.5rem;border:1px solid rgba(27,58,92,.12);background:
linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.38)),
linear-gradient(145deg, #eef1f5, #dadfe6);transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s,border-color .3s}
.project-card{cursor:pointer}
.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(15,34,55,.1);border-color:rgba(27,58,92,.2)}
.card-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:rgba(27,58,92,.07);color:var(--steel);transition:background .25s,color .25s,transform .25s;margin-top:1rem;align-self:flex-start}
.project-card:hover .card-arrow{background:var(--navy);color:#fff;transform:translateX(3px)}
.project-card-featured{padding:2rem;background:
radial-gradient(circle at top right, rgba(53,94,137,.18), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.42)),
linear-gradient(145deg, #e8edf2, #d4dbe3)}
.project-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.project-index{font-family:var(--serif);font-size:1.8rem;color:rgba(27,58,92,.34)}
.project-kicker{display:inline-flex;align-items:center;justify-content:flex-end;min-height:1rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-text);text-align:right}
.project-name{min-height:2.5rem;font-family:var(--serif);font-size:1.56rem;font-weight:400;line-height:1.18;color:var(--navy-d);margin-bottom:1rem}
.project-copy{min-height:3rem;font-size:.88rem;line-height:1.82;color:var(--text-m)}
.project-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:1.35rem 0 1.6rem}
.project-list li{position:relative;padding-left:1rem;font-size:.84rem;line-height:1.74;color:var(--text-m)}
.project-list li::before{content:'';position:absolute;left:0;top:.72rem;width:5px;height:5px;border-radius:50%;background:var(--steel)}
.project-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.project-tags span{display:inline-flex;align-items:center;justify-content:center;min-width:6rem;min-height:2.1rem;padding:.38rem .72rem;border:1px solid rgba(27,58,92,.12);font-size:.58rem;line-height:1.18;letter-spacing:.16em;text-transform:uppercase;color:var(--text-m);background:rgba(255,255,255,.6);white-space:normal;text-align:center}

/* ── Process — dark premium redesign ─────────────────────── */
#process{background:var(--navy-d);position:relative;overflow:hidden}
#process::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 15% 60%,rgba(86,124,167,.18),transparent 50%),
             radial-gradient(ellipse at 85% 30%,rgba(53,94,137,.14),transparent 50%)}
#process .tag span{color:rgba(255,255,255,.42)}
#process .tag::after{background:rgba(255,255,255,.18)}
#process h2{color:var(--white)}
#process h2 em{color:rgba(255,255,255,.48)}
.proc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);margin-top:2.5rem;position:relative;z-index:1}
.proc-s{display:flex;flex-direction:column;min-height:15rem;padding:2.8rem 2rem;
  background:rgba(255,255,255,.04);
  text-align:left;transition:background .35s,border-color .35s;
  border-top:2px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.proc-s::after{content:'';position:absolute;top:0;left:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--steel),var(--navy-lt));
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.proc-s:hover{background:rgba(255,255,255,.08)}
.proc-s:hover::after{width:100%}
.step-c{font-family:var(--serif);font-size:3.5rem;font-weight:400;color:rgba(255,255,255,.22);line-height:1;margin-bottom:1.5rem;transition:color .35s;letter-spacing:-.02em}
.step-t{min-height:1.8rem;font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--white);margin-bottom:.75rem;transition:color .35s}
.step-d{min-height:3.5rem;font-size:.84rem;line-height:1.88;color:rgba(255,255,255,.78);transition:color .35s}
.proc-s:hover .step-c{color:rgba(255,255,255,.45)}
.proc-s:hover .step-t{color:var(--white)}
.proc-s:hover .step-d{color:rgba(255,255,255,.88)}

/* ── Principles — clean card redesign ────────────────────── */
.principles-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.principle{padding:2.6rem 2.2rem;border:none;background:var(--white);
  border-radius:.875rem;
  box-shadow:0 2px 0 rgba(27,58,92,.06),0 4px 24px rgba(15,34,55,.06);
  transition:box-shadow .35s,transform .35s;position:relative;overflow:hidden}
.principle::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy-lt),var(--steel));opacity:.55}
.principle:hover{box-shadow:0 2px 0 rgba(27,58,92,.08),0 16px 48px rgba(15,34,55,.12);transform:translateY(-4px)}
.principle-index{display:block;margin-bottom:1.1rem;font-family:var(--serif);font-size:3rem;line-height:1;
  color:rgba(27,58,92,.1);font-weight:400;letter-spacing:-.02em}
.principle-title{min-height:2rem;font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.22;color:var(--navy-d);margin-bottom:.9rem}
.principle-copy{min-height:4rem;font-size:.88rem;line-height:1.82;color:var(--text-m)}

.ctact-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:4rem;align-items:start;padding:4.5rem 5rem;background:var(--navy-d)}
.ctact-g h2{color:var(--white)}
.ctact-g h2 em{color:rgba(255,255,255,.5)}
.ctact-g .tag span{color:rgba(255,255,255,.5)}
.ctact-g .tag::after{background:rgba(255,255,255,.3)}
.ctact-g p{color:rgba(255,255,255,.54);font-size:.92rem;line-height:1.85;margin-top:1.5rem;max-width:31rem}
.contact-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.contact-pill{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--contact-pill-width);min-width:var(--contact-pill-width);max-width:var(--contact-pill-width);min-height:2.9rem;padding:.7rem .8rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--white);text-decoration:none;font-size:.62rem;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;transition:background .25s,border-color .25s;text-align:center}
.contact-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.ci{margin-top:2rem;display:flex;flex-direction:column;gap:1.4rem}
.cii{display:flex;gap:1.2rem;align-items:flex-start}
.ico{width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.6)}
.il{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.2rem}
.iv{font-size:.88rem;color:rgba(255,255,255,.7);text-decoration:none}
.cf{display:flex;flex-direction:column;gap:1.5rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.ff{display:flex;flex-direction:column;gap:.5rem}
.ff label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.ff input,.ff textarea,.ff select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--white);font-family:var(--sans);font-size:.9rem;padding:.95rem 1.1rem;outline:none;transition:border-color .3s,background .3s;resize:none}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.ff input[type="file"]{padding:.8rem 1rem}
.ff textarea{min-height:140px}
.ff select option{background:var(--navy-d)}
.fsub{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;flex:0 0 auto;width:var(--form-submit-width);min-width:var(--form-submit-width);max-width:var(--form-submit-width);min-height:3.2rem;gap:.8rem;background:var(--white);color:var(--navy-d);font-family:var(--sans);font-size:.7rem;font-weight:500;line-height:1.12;letter-spacing:.15em;text-transform:uppercase;border:none;padding:1rem 1.05rem;transition:all .3s;text-align:center}
.fsub:hover{background:var(--navy-d);transform:translateX(3px)}
.form-help{margin-top:0!important;font-size:.78rem!important;line-height:1.7!important;color:rgba(255,255,255,.42)!important;max-width:none!important}
.form-note{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.45)}
.form-note a{color:var(--white)}
.form-status{display:none;min-height:1.3rem;padding:.9rem 1rem;border:1px solid transparent;font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.72);background:rgba(255,255,255,.04)}
.form-status:not(:empty){display:block}
.form-status.is-error{color:#ffd3d3;border-color:rgba(255,211,211,.28);background:rgba(122,22,22,.24)}
.form-status.is-success{color:#d7f7df;border-color:rgba(215,247,223,.28);background:rgba(18,72,49,.26)}
.cf.is-submitted{padding:1.3rem;border:1px solid rgba(215,247,223,.22);background:rgba(255,255,255,.04)}
.cf.is-submitted .fsub{background:#d7f7df;color:var(--navy-d)}
.fsub:disabled{opacity:.65;transform:none!important;cursor:progress}
.ff-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}


.page-hero{position:relative;overflow:hidden;background:
radial-gradient(circle at 78% 18%, rgba(83,116,154,.18), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)),
var(--cream)}
.page-hero .hero-shell{padding-bottom:5rem}
.page-crumbs{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lt);margin-bottom:1.75rem}
.page-crumbs a{color:var(--steel-text);text-decoration:none}
.page-sub{max-width:34rem;font-size:1rem;line-height:1.9;color:var(--text-m);margin-bottom:2rem}
.page-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.page-kpi{padding:1rem 1.05rem;border:1px solid rgba(27,58,92,.12);background:rgba(255,255,255,.72);backdrop-filter:blur(10px)}
.page-kpi strong{display:block;margin-bottom:.45rem;font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--navy-d)}
.page-kpi span{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-text)}
.page-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem}
.page-list li{position:relative;padding-left:1rem;font-size:.88rem;line-height:1.82;color:var(--text-m)}
.page-list li::before{content:'';position:absolute;left:0;top:.78rem;width:5px;height:5px;border-radius:50%;background:var(--steel)}
.page-copy{max-width:40rem;font-size:.94rem;line-height:1.92;color:var(--text-m)}
.page-copy + .page-copy{margin-top:1rem}
.page-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem;align-items:start}
/* legacy .faq-g removed — accordion FAQ replaces old card FAQ */
.link-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.link-chip{display:inline-flex;align-items:center;justify-content:center;min-height:2.1rem;padding:.65rem .95rem;border:1px solid rgba(27,58,92,.12);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);background:rgba(255,255,255,.64);text-decoration:none}
.link-chip:hover{border-color:rgba(27,58,92,.25);color:var(--navy)}

footer{background:var(--navy-d);border-top:1px solid rgba(255,255,255,.06);padding:5rem calc(5rem + var(--safe-right)) calc(3rem + var(--safe-bottom)) calc(5rem + var(--safe-left))}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.ftag{font-size:.87rem;line-height:1.85;color:rgba(255,255,255,.62);max-width:280px;margin:1.2rem 0 1.8rem}
.soc{display:flex;gap:.7rem}
.sl{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);text-decoration:none;font-size:.72rem;transition:all .3s}
.sl:hover{border-color:rgba(255,255,255,.6);color:var(--white)}
.fc h4{font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1.3rem}
.fl{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.fl a{font-size:.87rem;color:rgba(255,255,255,.62);text-decoration:none;transition:color .3s}
.fl a:hover{color:rgba(255,255,255,.88)}
.fb{display:flex;align-items:center;justify-content:space-between;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.06)}
.fc2{font-size:.72rem;color:rgba(255,255,255,.5)}
.fleg{display:flex;gap:2rem}
.fleg a{font-size:.72rem;color:rgba(255,255,255,.5);text-decoration:none;transition:color .3s}
.fleg a:hover{color:rgba(255,255,255,.75)}

html[lang="hy"] .nav-link,
html[lang="hy"] .nav-cta,
html[lang="hy"] .footer-lang-switch a,
html[lang="hy"] .btn-p,
html[lang="hy"] .btn-g,
html[lang="hy"] .contact-pill,
html[lang="hy"] .fsub,
html[lang="hy"] .srv-lnk,
html[lang="hy"] .project-kicker,
html[lang="hy"] .project-tags span,
html[lang="hy"] .stat-l,
html[lang="hy"] .an-l,
html[lang="hy"] .fl a,
html[lang="hy"] .iv,
html[lang="hy"] .ftag,
html[lang="hy"] .form-status,
html[lang="hy"] .form-help,
html[lang="hy"] .form-note{
  letter-spacing:.08em;
}

html[lang="ru"] .nav-link,
html[lang="ru"] .nav-cta,
html[lang="ru"] .footer-lang-switch a,
html[lang="ru"] .btn-p,
html[lang="ru"] .btn-g,
html[lang="ru"] .contact-pill,
html[lang="ru"] .fsub,
html[lang="ru"] .srv-lnk,
html[lang="ru"] .project-kicker,
html[lang="ru"] .project-tags span,
html[lang="ru"] .stat-l,
html[lang="ru"] .an-l,
html[lang="ru"] .fl a,
html[lang="ru"] .iv,
html[lang="ru"] .ftag,
html[lang="ru"] .form-status,
html[lang="ru"] .form-help,
html[lang="ru"] .form-note{
  letter-spacing:.1em;
}

html[lang="hy"] .nav-link,
html[lang="hy"] .nav-cta,
html[lang="hy"] .footer-lang-switch a,
html[lang="hy"] .btn-p,
html[lang="hy"] .btn-g,
html[lang="hy"] .contact-pill,
html[lang="hy"] .fsub,
html[lang="hy"] .srv-lnk,
html[lang="hy"] .project-kicker,
html[lang="hy"] .project-tags span,
html[lang="hy"] .stat-l,
html[lang="hy"] .an-l{
  font-size:.61rem;
}

html[lang="ru"] .nav-link,
html[lang="ru"] .nav-cta,
html[lang="ru"] .footer-lang-switch a,
html[lang="ru"] .btn-p,
html[lang="ru"] .btn-g,
html[lang="ru"] .contact-pill,
html[lang="ru"] .fsub,
html[lang="ru"] .srv-lnk,
html[lang="ru"] .project-kicker,
html[lang="ru"] .project-tags span,
html[lang="ru"] .stat-l,
html[lang="ru"] .an-l{
  font-size:.65rem;
}

.nav-link,
.nav-cta,
.footer-lang-switch a,
.btn-p,
.btn-g,
.contact-pill,
.fsub,
.srv-lnk,
.project-kicker,
.project-tags span,
.stat-l,
.an-l{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[lang="ru"] h1{
  font-size:clamp(3rem,5.4vw,6rem);
  line-height:1.08;
  padding:.14em 0 .12em;
}

html[lang="hy"] h1{
  font-size:clamp(2.85rem,5.1vw,5.7rem);
  line-height:1.1;
  padding:.15em 0 .12em;
}

html[lang="ru"] h2{
  font-size:clamp(2.25rem,3.6vw,3.6rem);
  line-height:1.14;
  padding:.09em 0 .08em;
}

html[lang="hy"] h2{
  font-size:clamp(2.1rem,3.4vw,3.4rem);
  line-height:1.16;
  padding:.1em 0 .08em;
}

html[lang="ru"] .project-name,
html[lang="ru"] .principle-title,
html[lang="ru"] .srv-title,
html[lang="ru"] .step-t{
  font-size:1.4rem;
}

html[lang="hy"] .project-name,
html[lang="hy"] .principle-title,
html[lang="hy"] .srv-title,
html[lang="hy"] .step-t{
  font-size:1.28rem;
}

html[lang="ru"] .srv-title{font-size:1.46rem}
html[lang="hy"] .srv-title{font-size:1.34rem}
html[lang="ru"] .step-t{font-size:1.2rem}
html[lang="hy"] .step-t{font-size:1.12rem}
html[lang="ru"] .principle-title{font-size:1.24rem}
html[lang="hy"] .principle-title{font-size:1.16rem}
html[lang="ru"] .project-name{font-size:1.4rem}
html[lang="hy"] .project-name{font-size:1.3rem}
html[lang="ru"] .an-n{font-size:2.16rem}
html[lang="hy"] .an-n{font-size:2rem}
html[lang="ru"] .stat-n{font-size:2.05rem}
html[lang="hy"] .stat-n{font-size:1.95rem}
html[lang="ru"] .hero-visual-footer strong{font-size:.92rem}
html[lang="hy"] .hero-visual-footer strong{font-size:.86rem}
html[lang="ru"] .page-kpi strong{font-size:1.18rem}
html[lang="hy"] .page-kpi strong{font-size:1.1rem}
html[lang="ru"] .page-list li,
html[lang="ru"] .page-copy{font-size:.83rem}
html[lang="hy"] .page-list li,
html[lang="hy"] .page-copy{font-size:.78rem}
/* FAQ accordion overrides for HY/RU */
html[lang="ru"] .faq-q{font-size:.9rem}
html[lang="hy"] .faq-q{font-size:.87rem}
html[lang="ru"] .faq-a{font-size:.85rem}
html[lang="hy"] .faq-a{font-size:.82rem}
html[lang="ru"] .page-sub{font-size:.92rem}
html[lang="hy"] .page-sub{font-size:.87rem}
html[lang="ru"] .page-crumbs,
html[lang="ru"] .fc h4,
html[lang="ru"] .fleg a,
html[lang="ru"] .fc2{font-size:.68rem}
html[lang="hy"] .page-crumbs,
html[lang="hy"] .fc h4,
html[lang="hy"] .fleg a,
html[lang="hy"] .fc2{font-size:.64rem}
html[lang="ru"] .link-chip{font-size:.58rem}
html[lang="hy"] .link-chip{font-size:.54rem}
html[lang="ru"] .page-kpi span{font-size:.58rem}
html[lang="hy"] .page-kpi span{font-size:.54rem}
html[lang="ru"] .hero-card span,
html[lang="ru"] .hero-note-label,
html[lang="ru"] .eyebrow span,
html[lang="ru"] .about-board-top,
html[lang="ru"] .ff label,
html[lang="ru"] .il{font-size:.56rem}
html[lang="hy"] .hero-card span,
html[lang="hy"] .hero-note-label,
html[lang="hy"] .eyebrow span,
html[lang="hy"] .about-board-top,
html[lang="hy"] .ff label,
html[lang="hy"] .il{font-size:.52rem}
html[lang="ru"] .ff input,
html[lang="ru"] .ff textarea,
html[lang="ru"] .ff select{font-size:.84rem}
html[lang="hy"] .ff input,
html[lang="hy"] .ff textarea,
html[lang="hy"] .ff select{font-size:.8rem}
html[lang="ru"] .logo-footer{font-size:1.62rem}
html[lang="hy"] .logo-footer{font-size:1.52rem}
html[lang="ru"] .logo{font-size:1.4rem}
html[lang="hy"] .logo{font-size:1.3rem}
html[lang="ru"] .project-list li{font-size:.8rem}
html[lang="hy"] .project-list li{font-size:.75rem}
html[lang="ru"] .link-chip,
html[lang="ru"] .sl{letter-spacing:.14em}
html[lang="hy"] .link-chip,
html[lang="hy"] .sl{letter-spacing:.12em}
html[lang="ru"] .project-list li,
html[lang="hy"] .project-list li,
html[lang="ru"] .page-list li,
html[lang="hy"] .page-list li{
  line-height:1.72;
}

.project-name,
.principle-title,
.srv-title,
.step-t{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[lang="ru"] .hero-sub{font-size:.95rem}
html[lang="hy"] .hero-sub{font-size:.9rem}
html[lang="ru"] .hero-note p,
html[lang="ru"] .hero-card p,
html[lang="ru"] .about-board-cell{font-size:.82rem}
html[lang="hy"] .hero-note p,
html[lang="hy"] .hero-card p,
html[lang="hy"] .about-board-cell{font-size:.78rem}
html[lang="ru"] .about-body,
html[lang="ru"] .srv-desc,
html[lang="ru"] .project-copy,
html[lang="ru"] .principle-copy,
html[lang="ru"] .ctact-g p,
html[lang="ru"] .iv,
html[lang="ru"] .fl a{font-size:.83rem}
html[lang="hy"] .about-body,
html[lang="hy"] .srv-desc,
html[lang="hy"] .project-copy,
html[lang="hy"] .principle-copy,
html[lang="hy"] .ctact-g p,
html[lang="hy"] .iv,
html[lang="hy"] .fl a{font-size:.78rem}
html[lang="ru"] .step-d{font-size:.8rem}
html[lang="hy"] .step-d{font-size:.75rem}
html[lang="ru"] .ftag{font-size:.8rem}
html[lang="hy"] .ftag{font-size:.75rem}
html[lang="ru"] .form-status,
html[lang="ru"] .form-help,
html[lang="ru"] .form-note{font-size:.74rem}
html[lang="hy"] .form-status,
html[lang="hy"] .form-help,
html[lang="hy"] .form-note{font-size:.7rem}

html[lang="hy"] .footer-lang-switch a{
  font-size:.58rem;
}

html[lang="ru"] .footer-lang-switch a{
  font-size:.61rem;
}

.reveal{opacity:1;transform:translateY(0)}
.js .reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}
.js .reveal.v{opacity:1;transform:translateY(0)}
@keyframes fU{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes fI{from{opacity:0}to{opacity:1}}

@media(hover:hover) and (pointer:fine){body.has-custom-cursor{cursor:none}body.has-custom-cursor #cur,body.has-custom-cursor #cur-r{display:block}body.has-custom-cursor a,body.has-custom-cursor button,body.has-custom-cursor .pi,body.has-custom-cursor .srv,body.has-custom-cursor .nav-toggle,body.has-custom-cursor .fsub,body.has-custom-cursor .contact-pill{cursor:none}}
@media(hover:none){body{cursor:auto}}

@media(max-width:1100px){
  nav,nav.sc{padding-left:calc(2.5rem + var(--safe-left));padding-right:calc(2.5rem + var(--safe-right))}
  .hero-shell{grid-template-columns:minmax(0,1fr) 27rem;padding-left:calc(2.5rem + var(--safe-left));padding-right:calc(2.5rem + var(--safe-right))}
  .sec,.about-g,.ctact-g,footer{padding-left:calc(2.5rem + var(--safe-left));padding-right:calc(2.5rem + var(--safe-right))}
  .about-g,.ctact-g{gap:4rem}
  .page-split{grid-template-columns:1fr}
}

@media(max-width:900px){
  nav{padding:calc(1.5rem + var(--safe-top)) calc(2rem + var(--safe-right)) 1.5rem calc(2rem + var(--safe-left));gap:1rem}
  nav.sc{padding:calc(1rem + var(--safe-top)) calc(2rem + var(--safe-right)) 1rem calc(2rem + var(--safe-left))}
  .logo-slot{flex:0 1 auto;min-width:0;width:auto;height:auto}
  #home-logo{position:static;transform:none!important}
  .nav-toggle{display:flex}
  .nav-c{position:fixed;top:calc(5.5rem + var(--safe-top));right:calc(2rem + var(--safe-right));left:calc(2rem + var(--safe-left));display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;padding:1.5rem;border:1px solid rgba(27,58,92,.08);background:rgba(243,241,236,.98);backdrop-filter:blur(16px);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 18px 48px rgba(17,38,64,.12)}
  .nav-c.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-link{display:block;flex:0 1 auto;min-width:0;max-width:none;font-size:.78rem;text-align:left;justify-content:flex-start}
  .nav-tools{margin-left:auto}
  #hero{min-height:auto}
  .hero-shell{grid-template-columns:1fr;gap:2rem;padding:5rem 2rem 5rem}
  .hero-shell > *{min-width:0}
  .hero-copy,.hero-visual{min-width:0;width:100%;max-width:none}
  .hero-visual-stack,.hero-card{min-width:0}
  .hero-visual-frame{min-height:20rem}
  .hero-drawing{height:13rem}
  .stat-bar{display:none}
  .sec{padding:3.5rem 2rem}
  .about-g,.ctact-g{grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 2rem}
  .srv-g,.proc-g{grid-template-columns:1fr 1fr}
  .port-g,.principles-g,.faq-g{grid-template-columns:1fr 1fr}
  .pi:nth-child(1){grid-column:span 2}
  .project-card-featured{min-height:24rem}
  .page-kpis{grid-template-columns:1fr}
  footer{padding:4rem calc(2rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(2rem + var(--safe-left))}
  .ft{grid-template-columns:1fr 1fr;gap:2rem}
  .fb{flex-direction:column;gap:1rem}
}

@media(max-width:640px){
  nav{padding:calc(1.1rem + var(--safe-top)) calc(1rem + var(--safe-right)) 1.1rem calc(1rem + var(--safe-left))}
  nav.sc{padding:calc(.9rem + var(--safe-top)) calc(1rem + var(--safe-right)) .9rem calc(1rem + var(--safe-left))}
  .nav-c{top:calc(4.75rem + var(--safe-top));right:calc(1rem + var(--safe-right));left:calc(1rem + var(--safe-left))}
  .nav-cta{display:none}
  .nav-tools{display:none}
  .hero-shell{padding:calc(4.5rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(7.5rem + var(--safe-bottom)) calc(1rem + var(--safe-left))}
  h1{font-size:clamp(2.7rem,12vw,4.3rem);line-height:1.04}
  .hero-sub{font-size:.92rem;max-width:100%}
  .hero-acts{flex-direction:column;align-items:flex-start}
  .btn-p,.btn-g,.contact-pill,.fsub{width:min(100%,18rem);min-width:min(100%,18rem);max-width:min(100%,18rem)}
  .btn-p,.btn-g{font-size:.68rem}
  .hero-visual-frame{min-height:16rem;padding:1rem}
  .hero-drawing{height:10rem}
  .hero-visual-stack{grid-template-columns:1fr}
  .hero-visual-stack .hero-card:last-child{display:none}
  .hero-note,.hero-card{max-width:100%}
  .eyebrow span{font-size:.61rem;letter-spacing:.2em}
  .about-nums,.srv-g,.proc-g,.port-g,.principles-g,.faq-g,.fr,.ft{grid-template-columns:1fr}
  .pi:nth-child(1){grid-column:span 1}
  .project-card,.project-card-featured{min-height:auto}
  .srv,.proc-s,.principle{padding:2.4rem 1.5rem}
  .sec,.about-g,.ctact-g,footer{padding-left:calc(1rem + var(--safe-left));padding-right:calc(1rem + var(--safe-right))}
  .fb,.hero-acts{align-items:flex-start}
  .page-crumbs{gap:.45rem}
  .soc{flex-wrap:wrap}
}

@media(max-width:640px){
  html[lang="ru"] h1{
    font-size:clamp(2.45rem,10.8vw,3.9rem);
    line-height:1.11;
    padding:.14em 0 .11em;
  }

  html[lang="hy"] h1{
    font-size:clamp(2.3rem,10vw,3.6rem);
    line-height:1.13;
    padding:.15em 0 .11em;
  }

  html[lang="ru"] h2{
    font-size:clamp(1.95rem,8vw,3.05rem);
    line-height:1.18;
    padding:.08em 0 .06em;
  }

  html[lang="hy"] h2{
    font-size:clamp(1.8rem,7.5vw,2.8rem);
    line-height:1.2;
    padding:.09em 0 .06em;
  }
}

/* ============================================================
   STORY / FOUNDERS SECTION
   ============================================================ */
#story,#reviews,#team{scroll-margin-top:calc(7rem + var(--safe-top))}

.founder-card{display:flex;align-items:flex-start;gap:1.5rem;padding:1.6rem;border:1px solid rgba(27,58,92,.1);background:linear-gradient(160deg,#f8f6f1,#ece8df)}
.founder-photo{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;background:rgba(27,58,92,.08);border:2px solid rgba(27,58,92,.12)}
.founder-photo-placeholder{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:50%;background:linear-gradient(135deg,var(--navy-lt),var(--steel));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.4rem;color:rgba(255,255,255,.8)}
.founder-info{}
.founder-name{font-family:var(--serif);font-size:1.18rem;font-weight:400;color:var(--navy-d);margin-bottom:.25rem}
.founder-role{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-text);margin-bottom:.6rem}
.founder-bio{font-size:.84rem;line-height:1.75;color:var(--text-m)}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-sec{background:var(--white);padding:6rem 0 7rem}
.faq-inner{max-width:52rem;margin:0 auto;padding:0 2rem}
.faq-list{margin-top:3.5rem;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1px solid rgba(27,58,92,.1);border-radius:.875rem;overflow:hidden;transition:box-shadow .3s}
.faq-item:has([aria-expanded="true"]){box-shadow:0 8px 32px rgba(15,34,55,.08)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.6rem;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:.96rem;font-weight:500;color:var(--navy-d);text-align:left;line-height:1.4;
  transition:background .2s;
}
.faq-q:hover{background:rgba(27,58,92,.03)}
.faq-icon{
  flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:50%;
  background:rgba(27,58,92,.08);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .3s;
  position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;background:var(--navy);border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.faq-icon::before{width:8px;height:1.5px}
.faq-icon::after{width:1.5px;height:8px}
.faq-q[aria-expanded="true"] .faq-icon{background:var(--navy)}
.faq-q[aria-expanded="true"] .faq-icon::before{background:#fff}
.faq-q[aria-expanded="true"] .faq-icon::after{background:#fff;transform:rotate(90deg);opacity:0}
.faq-a{
  padding:0 1.6rem 1.4rem;
  font-size:.9rem;line-height:1.85;color:var(--text-m);
}
@media(max-width:640px){
  .faq-sec{padding:5rem 0 6rem}
  .faq-q{padding:1.2rem 1.25rem;font-size:.92rem}
  .faq-a{padding:0 1.25rem 1.2rem}
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float{
  position:fixed;bottom:calc(2rem + var(--safe-bottom));right:calc(2rem + var(--safe-right));z-index:800;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--navy-d);color:#fff;text-decoration:none;
  padding:.8rem 1.2rem .8rem .9rem;border-radius:3rem;
  box-shadow:0 4px 24px rgba(0,0,0,.2),0 2px 8px rgba(37,211,102,.35);
  font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s,background .2s;
  white-space:nowrap;
}
.whatsapp-float:hover{background:#0a1e35;transform:translateY(-2px);box-shadow:0 8px 32px rgba(15,34,55,.35)}
.whatsapp-float:active{transform:translateY(0)}
.whatsapp-float svg{flex-shrink:0}
.whatsapp-float-label{font-size:.68rem}

/* WhatsApp float — desktop only, hide on mobile (sticky bar takes over) */
@media(max-width:640px){
  .whatsapp-float{display:none}
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top{
  position:fixed;bottom:calc(2.25rem + var(--safe-bottom));right:calc(2.25rem + var(--safe-right));z-index:790;
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;
  border:1px solid rgba(27,58,92,.18);background:rgba(255,253,248,.9);
  color:var(--navy);cursor:pointer;
  box-shadow:0 4px 16px rgba(27,58,92,.12);
  backdrop-filter:blur(8px);
  transition:opacity .3s,transform .35s cubic-bezier(.23,1,.32,1),background .2s;
  opacity:0;transform:translateY(12px);pointer-events:none;
}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* On mobile, move above sticky bar */
@media(max-width:640px){
  .back-to-top{bottom:calc(4.5rem + var(--safe-bottom));right:1rem}
}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mobile-cta-bar{
  display:none; /* hidden on desktop */
}
@media(max-width:640px){
  .mobile-cta-bar{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:900;
    background:rgba(247,244,238,.96);
    border-top:1px solid rgba(27,58,92,.12);
    backdrop-filter:blur(12px);
    padding:.65rem 1rem calc(.65rem + var(--safe-bottom));
    gap:.65rem;
  }
  .mobile-cta-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:3rem;padding:.7rem .5rem;
    font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
    text-decoration:none;border:1px solid var(--navy);
    transition:background .2s,color .2s,border-color .2s;
  }
  .mobile-cta-call{background:var(--navy);color:#fff;border-color:var(--navy)}
  .mobile-cta-call:active{background:var(--navy-d)}
  .mobile-cta-whatsapp{background:var(--navy-d);color:#fff;border-color:var(--navy-d)}
  .mobile-cta-whatsapp:active{background:#0a1e35}
  /* Add padding to contact section and footer to clear sticky bar */
  #contact{padding-bottom:calc(5rem + var(--safe-bottom))}
  footer{padding-bottom:calc(1rem + var(--safe-bottom))}
}

/* ============================================================
   FORM FIELD VALIDATION STATES
   ============================================================ */
.ff input[aria-invalid="true"],
.ff textarea[aria-invalid="true"],
.ff select[aria-invalid="true"]{
  border-color:#a94747;
  outline:none;
}
.ff-error-msg{
  display:block;margin-top:.35rem;
  font-size:.75rem;color:#a94747;letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVE — NEW SECTIONS
   ============================================================ */
@media(max-width:1024px){
}

@media(max-width:700px){
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ============================================================
   PREMIUM SHAPES — BORDER RADIUS SYSTEM
   Applied as a cascade layer so responsive rules can still override
   ============================================================ */

/* — Navigation — */
.lang-switch a{border-radius:.3rem}
.nav-cta{border-radius:.3rem}
.nav-c{border-radius:1rem}
.skip-link{border-radius:.3rem}

/* — Buttons — */
.btn-p{border-radius:.3rem}
/* .btn-g is underline-style, no radius needed */

/* — Hero widgets — */
.hero-note{border-radius:.875rem}
.hero-card{border-radius:.875rem}
.hero-visual-frame{border-radius:.75rem}

/* — About board — */
.about-board{border-radius:.875rem;overflow:hidden}

/* — Portfolio cards — */
.project-card{border-radius:.875rem}
.project-tags span{border-radius:9999px}


/* — Contact & form — */
.contact-pill{border-radius:.3rem}
.ico{border-radius:.4rem}
.ff input,.ff textarea,.ff select{border-radius:.4rem}
.fsub{border-radius:.3rem}
.form-status{border-radius:.4rem}
/* keep aria-invalid border override colour but add radius */
.ff input[aria-invalid="true"],
.ff textarea[aria-invalid="true"],
.ff select[aria-invalid="true"]{border-radius:.4rem}

/* — Footer — */
.sl{border-radius:50%}
.link-chip{border-radius:9999px}

/* — Content cards (reviews, founders, FAQ, page KPIs) — */
.founder-card{border-radius:.875rem}
.faq-item{border-radius:.875rem}
.page-kpi{border-radius:.875rem}
.page-kpi{overflow:hidden}  /* clip inner content to rounded corners */

/* — UI chrome — */
.back-to-top{border-radius:.4rem}

/* Mobile sticky bar — rounded top corners */
@media(max-width:640px){
  .mobile-cta-bar{border-radius:1.35rem 1.35rem 0 0}
  .mobile-cta-btn{border-radius:.3rem}
}
@media(max-width:640px){
}

/* ============================================================
   LANGUAGE OVERFLOW — ALLOW WRAPPING IN HY / RU
   Root cause: white-space:nowrap + fixed widths clip longer
   Armenian/Russian words. Fix: allow natural width + wrapping.
   ============================================================ */

/* Card titles that currently clip with text-overflow:ellipsis */
html[lang="hy"] .project-name,
html[lang="hy"] .principle-title,
html[lang="hy"] .srv-title,
html[lang="hy"] .step-t,
html[lang="ru"] .project-name,
html[lang="ru"] .principle-title,
html[lang="ru"] .srv-title,
html[lang="ru"] .step-t{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}

/* Hero primary button — grow with text, keep solid minimum */
html[lang="hy"] .btn-p,
html[lang="ru"] .btn-p{
  width:auto;
  min-width:11.5rem;
  max-width:none;
  white-space:normal;
  text-align:center;
}

/* Hero ghost button */
html[lang="hy"] .btn-g,
html[lang="ru"] .btn-g{
  width:auto;
  min-width:10rem;
  max-width:none;
  white-space:normal;
  text-align:center;
}

/* Nav CTA — shrink-wrap to content */
html[lang="hy"] .nav-cta,
html[lang="ru"] .nav-cta{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  max-width:none;
  padding:.65rem 1.5rem;
  white-space:normal;
  text-align:center;
}

/* Contact pills */
html[lang="hy"] .contact-pill,
html[lang="ru"] .contact-pill{
  width:auto;
  min-width:9rem;
  max-width:none;
  white-space:normal;
  text-align:center;
}

/* Form submit button */
html[lang="hy"] .fsub,
html[lang="ru"] .fsub{
  width:auto;
  min-width:11rem;
  max-width:none;
  white-space:normal;
}

/* Stat labels and about-nums labels need more room in HY/RU */
html[lang="hy"] .stat-l,
html[lang="ru"] .stat-l,
html[lang="hy"] .an-l,
html[lang="ru"] .an-l{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  line-height:1.4;
}

/* ============================================================
   MOBILE-FIRST POLISH
   ============================================================ */
@media(max-width:640px){
  /* Section vertical rhythm */
  .sec{padding:3rem 1.25rem}
  .about-g,.ctact-g{padding:3rem 1.25rem}

  .founder-card{padding:1.4rem 1.2rem}
  .principle{padding:2rem 1.5rem}

  /* Service & process cards: auto height in HY/RU (long words break min-height) */
  html[lang="hy"] .srv,
  html[lang="ru"] .srv,
  html[lang="hy"] .proc-s,
  html[lang="ru"] .proc-s{min-height:auto}

  /* Contact info icons — slightly smaller to save row space */
  .ico{width:2.2rem;height:2.2rem}
  .cii{gap:.9rem}

  /* Section tag + heading spacing */
  .tag{margin-bottom:1.1rem}

  /* Better line-height for body copy at mobile sizes */
  .about-body,.srv-desc,.step-d,.principle-copy{line-height:2}

  /* Ensure project tag pills wrap correctly on small cards */
  .project-tags{gap:.45rem}
}

@media(max-width:900px){
  /* Process + service grid gap stays 1px but padding improves */
  .srv{padding:2.8rem 2rem}
  .proc-s{padding:2.8rem 2rem}
}

/* ============================================================
   PORTFOLIO CARDS — PROJECT PHOTO SUPPORT
   When a photo URL is set, show it as a full-bleed top image
   ============================================================ */

.project-card.has-photo{padding-top:0;overflow:hidden;}
.project-photo{
  width:calc(100% + 3rem);
  height:18rem;
  margin:-1.5rem -1.5rem 1.5rem;
  flex-shrink:0;
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  border-radius:.875rem .875rem 0 0;
}
.project-card-featured .project-photo{height:22rem;width:calc(100% + 4rem);margin:-2rem -2rem 2rem;}
@media(max-width:900px){.project-photo{height:14rem}}
@media(max-width:640px){
  .project-photo{height:12rem;width:calc(100% + 2.5rem);margin:-1.5rem -1.25rem 1.25rem;}
  .project-card-featured .project-photo{height:14rem;width:calc(100% + 2.5rem);margin:-2rem -1.25rem 1.5rem;}
}

/* ============================================================
   HY / RU — REMAINING LETTER-SPACING NORMALIZATIONS
   Elements not covered by the earlier block
   ============================================================ */

/* Section tag labels — .28em is too wide for Armenian/Cyrillic */
html[lang="hy"] .tag span,
html[lang="ru"] .tag span{letter-spacing:.1em}

/* Contact info row labels */
html[lang="hy"] .il,
html[lang="ru"] .il{letter-spacing:.08em}

/* Footer column headings */
html[lang="hy"] .fc h4,
html[lang="ru"] .fc h4{letter-spacing:.1em}

/* About board top labels */
html[lang="hy"] .about-board-top,
html[lang="ru"] .about-board-top{letter-spacing:.1em}

/* Nav link items (not just nav-cta) */
html[lang="hy"] .nav-link,
html[lang="ru"] .nav-link{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  letter-spacing:.1em;
}

/* Marquee items */

/* Form labels in contact form */
html[lang="hy"] .ff label,
html[lang="ru"] .ff label{
  letter-spacing:.1em;
  white-space:normal;
  overflow-wrap:break-word;
}

/* ============================================================
   ARMENIAN HEADINGS — FONT + SIZE SYSTEM
   Playfair Display has no Armenian glyphs so the browser falls
   back to a system Armenian serif that renders ~2× bigger.
   Fix: use system-ui (SF Pro / Segoe UI) for HY headings.
   ============================================================ */

html[lang="hy"] h1{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:clamp(1.9rem,3.8vw,3.4rem);
  line-height:1.18;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
  word-break:break-word;
}
html[lang="hy"] h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--steel-text);
}
html[lang="hy"] h2{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:clamp(1.6rem,3.2vw,2.8rem);
  line-height:1.22;
  letter-spacing:-.01em;
}
html[lang="hy"] h2 em{font-style:italic;color:var(--steel)}

/* Russian: Playfair supports Cyrillic — just pull size back a touch */
html[lang="ru"] h1{
  font-size:clamp(2.6rem,4.8vw,5.5rem);
  overflow-wrap:break-word;
  word-break:break-word;
}
html[lang="ru"] h2{
  font-size:clamp(2rem,3.5vw,3.6rem);
}

/* Eyebrow & micro-labels: less extreme letter-spacing for HY/RU */
html[lang="hy"] .eyebrow span,
html[lang="ru"] .eyebrow span{
  letter-spacing:.1em;
  white-space:normal;
  overflow:visible;
}
html[lang="hy"] .hero-note-label,
html[lang="ru"] .hero-note-label,
html[lang="hy"] .hero-visual-top span,
html[lang="ru"] .hero-visual-top span,
html[lang="hy"] .hero-card span,
html[lang="ru"] .hero-card span,
html[lang="hy"] .hero-visual-footer small,
html[lang="ru"] .hero-visual-footer small{
  letter-spacing:.08em;
  white-space:normal;
  overflow-wrap:break-word;
}

/* Mobile sizes */
@media(max-width:640px){
  html[lang="hy"] h1{
    font-size:clamp(1.65rem,7.5vw,2.6rem);
    line-height:1.24;
  }
  html[lang="ru"] h1{
    font-size:clamp(2.1rem,9.5vw,3.5rem);
    line-height:1.15;
  }
  html[lang="hy"] h2{
    font-size:clamp(1.45rem,6.5vw,2.2rem);
    line-height:1.28;
  }
  html[lang="ru"] h2{
    font-size:clamp(1.8rem,7.5vw,2.9rem);
    line-height:1.2;
  }
}

/* ── Cookie consent banner ──────────────────────────────── */
#cookie-banner{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(6rem);
  z-index:9000;
  width:min(42rem,calc(100vw - 2rem));
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem 1.4rem;
  background:var(--navy-d);color:rgba(255,255,255,.88);
  border-radius:1rem;box-shadow:0 8px 40px rgba(0,0,0,.28);
  opacity:0;transition:opacity .35s,transform .35s;
}
#cookie-banner.cookie-visible{opacity:1;transform:translateX(-50%) translateY(0)}
#cookie-banner p{font-size:.84rem;line-height:1.6;margin:0;flex:1;min-width:12rem}
.cookie-acts{display:flex;gap:.75rem;flex-shrink:0}
.cookie-decline{
  background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.7);
  border-radius:.5rem;padding:.45rem .9rem;font-size:.8rem;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.cookie-decline:hover{border-color:rgba(255,255,255,.5);color:#fff}
.cookie-accept{
  background:var(--gold);color:var(--navy-d);border:none;
  border-radius:.5rem;padding:.45rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:opacity .2s;
}
.cookie-accept:hover{opacity:.88}
@media(max-width:480px){
  #cookie-banner{flex-direction:column;align-items:flex-start;gap:1rem}
  .cookie-acts{width:100%;justify-content:flex-end}
}

/* ── Content loading skeleton ───────────────────────────── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.content-loading .hero-eyebrow,.content-loading #hero-headline-line1,.content-loading #hero-headline-line2,
.content-loading #hero-headline-line3,.content-loading #hero-body-text{
  background:linear-gradient(90deg,rgba(27,58,92,.07) 25%,rgba(27,58,92,.14) 50%,rgba(27,58,92,.07) 75%);
  background-size:800px 100%;animation:shimmer 1.4s infinite;
  color:transparent;border-radius:.25rem;
}

/* ============================================================
   SERVICE PAGES  (/services/[slug]/)
   ============================================================ */
.svc-hero{
  position:relative;min-height:60vh;display:flex;align-items:flex-end;
  padding:0;overflow:hidden;background:var(--navy-d);
}
.svc-hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 12s ease;
}
.svc-hero:hover .svc-hero-bg{transform:scale(1.03)}
.svc-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,24,42,.82) 0%, rgba(10,24,42,.35) 60%, rgba(10,24,42,.12) 100%);
}
.svc-hero.has-image .svc-hero-overlay{
  background:linear-gradient(to top, rgba(10,24,42,.88) 0%, rgba(10,24,42,.45) 55%, rgba(10,24,42,.15) 100%);
}
.svc-hero-content{position:relative;z-index:1;width:100%;padding-bottom:4rem}
.svc-hero-inner{max-width:720px}
.svc-hero .tag-light{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:1.25rem;
}
.svc-hero-title{
  font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);font-weight:400;
  color:#fff;line-height:1.15;max-width:640px;
}

/* body */
.svc-body{padding:5rem 0 7rem}
.svc-body-inner{max-width:1000px}
.svc-intro{margin-bottom:4rem}
.svc-intro-text{
  font-size:1.06rem;line-height:1.92;color:var(--text-m);max-width:660px;
  border-left:3px solid var(--gold);padding-left:1.4rem;
}
.svc-cols{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
  gap:4rem;align-items:start;margin-bottom:5rem;
}
.svc-col-heading{
  font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--navy-d);
  margin-bottom:1.5rem;
}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.svc-list li{
  padding:.9rem 1.1rem .9rem 3rem;position:relative;
  background:rgba(27,58,92,.03);border-left:2px solid rgba(86,124,167,.25);
  font-size:.93rem;line-height:1.7;color:var(--text);border-radius:0 .5rem .5rem 0;
}
.svc-list li::before{
  content:'✓';position:absolute;left:.9rem;top:.9rem;
  font-size:.8rem;color:var(--steel-text);font-weight:600;
}
.svc-col-side{display:flex;flex-direction:column;gap:2rem;position:sticky;top:6rem}
.svc-tags-block{}
.svc-tags-label{
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-lt);margin-bottom:.9rem;
}
.svc-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.svc-tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.35rem .75rem;border:1px solid rgba(27,58,92,.14);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-m);background:rgba(255,255,255,.64);border-radius:.375rem;
}
.svc-cta{width:100%;justify-content:center;text-align:center}

/* gallery */
.svc-gallery{margin-top:1rem}
.svc-gallery-heading{margin-bottom:1.5rem}
.svc-gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.svc-gallery-item{
  aspect-ratio:4/3;border-radius:.75rem;background-size:cover;background-position:center;
  background-color:rgba(27,58,92,.07);
  transition:transform .3s,box-shadow .3s;
}
.svc-gallery-item:hover{transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,.15)}

/* breadcrumb */
.svc-breadcrumb{
  background:var(--navy-d);padding:.9rem 0;
  font-size:.75rem;letter-spacing:.06em;
}
.svc-breadcrumb .container{display:flex;align-items:center;gap:.5rem}
.svc-breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.svc-breadcrumb a:hover{color:var(--gold)}
.svc-breadcrumb span[aria-hidden]{color:rgba(255,255,255,.2)}
.svc-breadcrumb span:last-child{color:rgba(255,255,255,.75)}

/* responsive */
@media(max-width:860px){
  .svc-cols{grid-template-columns:1fr;gap:2.5rem}
  .svc-col-side{position:static}
  .svc-gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .svc-hero{min-height:50vh}
  .svc-body{padding:3.5rem 0 5rem}
  .svc-gallery-grid{grid-template-columns:1fr}
  .svc-intro-text{font-size:.96rem}
}

/* HY/RU font size adjustments */
html[lang="ru"] .svc-hero-title{font-size:clamp(2rem,4.5vw,3.4rem)}
html[lang="hy"] .svc-hero-title{font-size:clamp(1.9rem,4vw,3.2rem);font-family:system-ui,sans-serif;font-weight:500}
html[lang="ru"] .svc-intro-text{font-size:.97rem}
html[lang="hy"] .svc-intro-text{font-size:.92rem}

/* ============================================================
   HY / RU  QA FIXES — Sessions 4+5 new sections
   ============================================================ */

/* Founders Story headings — Playfair has no Armenian/Russian glyphs */
html[lang="hy"] #story h2,
html[lang="hy"] .story-headline,
html[lang="hy"] .founder-name {
  font-family: system-ui, sans-serif;
  font-weight: 500;
}
html[lang="ru"] .founder-name { font-size: 1.08rem; }
html[lang="hy"] .founder-name { font-size: 1rem; }
html[lang="ru"] .story-body  { font-size: .88rem; line-height: 1.9; }
html[lang="hy"] .story-body  { font-size: .84rem; line-height: 1.9; }
html[lang="ru"] .founder-bio { font-size: .8rem; }
html[lang="hy"] .founder-bio { font-size: .77rem; }

/* Service page — svc-list items and tags */
html[lang="ru"] .svc-list li  { font-size: .87rem; }
html[lang="hy"] .svc-list li  { font-size: .84rem; }
html[lang="ru"] .svc-tag      { font-size: .67rem; }
html[lang="hy"] .svc-tag      { font-size: .64rem; }
html[lang="ru"] .svc-col-heading { font-size: 1.1rem; }
html[lang="hy"] .svc-col-heading { font-family: system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }

/* Card arrow — hide text-shrink on HY/RU */
html[lang="hy"] .card-arrow,
html[lang="ru"] .card-arrow { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   QA fixes 2026-05-11
   See UIUX_AUDIT_2026-05-11.md for issue IDs.
   ───────────────────────────────────────────────────────────── */

/* UX-001/122/123 — alias broken classes used by 404 + service detail */
.btn-primary,
a.btn-primary {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:.95rem 1.6rem;gap:.6rem;
  background:var(--navy);color:var(--white);
  font-family:var(--sans);font-size:.69rem;font-weight:500;
  line-height:1.1;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:all .3s;
  text-align:center;
}
.btn-primary:hover,a.btn-primary:hover{background:var(--navy-d);transform:translateX(3px)}
.btn,
a.btn {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:.85rem 1.4rem;gap:.6rem;
  color:var(--navy);background:transparent;
  border:1px solid rgba(27,58,92,.3);
  font-family:var(--sans);font-size:.69rem;font-weight:500;
  line-height:1.1;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:all .3s;text-align:center;
}
.btn:hover,a.btn:hover{border-color:var(--navy);background:rgba(27,58,92,.05)}

/* UX-012/166 — skip-to-content link */
.skip-link{
  position:absolute;left:-9999px;top:0;
  display:inline-flex;align-items:center;
  min-height:2.75rem;
  background:var(--navy);color:var(--white);
  padding:.85rem 1.4rem;font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;z-index:10000;
}
.skip-link:focus{left:1rem;top:1rem;outline:2px solid var(--gold);outline-offset:2px}

/* UX-145/167 — explicit focus-visible outlines (a11y, WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-p:focus-visible,
.btn-g:focus-visible,
.btn-primary:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.contact-pill:focus-visible,
.fsub:focus-visible,
.lang-switch a:focus-visible,
.srv-lnk:focus-visible,
.project-card:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}
.btn-p:focus-visible,
.btn-primary:focus-visible,
.fsub:focus-visible{outline-color:var(--gold)}

/* UX-094/178 — bottom padding under main when mobile sticky CTA bar present */
@media(max-width:640px){
  body:has(#mobile-cta-bar) main{padding-bottom:calc(var(--mobile-cta-bar-height) + var(--safe-bottom) + 1rem)}
  /* Fallback for browsers without :has() */
  main{padding-bottom:calc(var(--mobile-cta-bar-height) + var(--safe-bottom))}
}

/* UX-080/186 — form field error states (bumped specificity for dark-bg form) */
.cf .ff input[aria-invalid="true"],
.cf .ff select[aria-invalid="true"],
.cf .ff textarea[aria-invalid="true"],
form .ff input[aria-invalid="true"],
form .ff select[aria-invalid="true"],
form .ff textarea[aria-invalid="true"]{
  border-color:#ff6b73 !important;
  background:rgba(184,51,58,.12) !important;
  color:var(--white);
}
.cf .ff input[aria-invalid="true"]:focus,
.cf .ff select[aria-invalid="true"]:focus,
.cf .ff textarea[aria-invalid="true"]:focus,
form .ff input[aria-invalid="true"]:focus,
form .ff select[aria-invalid="true"]:focus,
form .ff textarea[aria-invalid="true"]:focus{
  outline:2px solid #ff6b73 !important;
  outline-offset:2px;
}
.cf .ff-error-msg,
form .ff-error-msg{
  color:#ff8a91;
}
.ff-error,
.ff-error-msg{
  display:block;margin-top:.4rem;font-size:.75rem;line-height:1.5;color:#b8333a;
}
.ff-error{display:none}
.ff-error[data-visible="true"]{display:block}

/* UX-084/200 — form success state */
.form-success{
  display:none;
  padding:1.6rem 1.4rem;
  border:1px solid rgba(27,120,80,.25);
  background:rgba(27,120,80,.06);
  color:var(--navy-d);
  margin-top:1rem;
}
.form-success[data-visible="true"]{display:block}
.form-success-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:#1b7850;color:var(--white);
  margin-bottom:.85rem;
}
.form-success h3{
  font-family:var(--serif);font-size:1.4rem;font-weight:400;
  color:var(--navy-d);margin:0 0 .55rem;
}
.form-success p{
  font-size:.9rem;line-height:1.7;color:var(--text-m);margin:0;
}

/* UX-009/115/116 — privacy page typography (kills inline styles) */
.privacy-h1{
  font-family:var(--serif);font-size:2rem;font-weight:400;
  color:var(--navy-d);margin:1rem 0 2rem;line-height:1.3;
}
.privacy-meta{color:var(--text-lt);margin-bottom:2.5rem;font-size:.9rem}
.privacy-h2{
  font-family:var(--serif);font-size:1.2rem;font-weight:500;
  color:var(--navy-d);margin:2rem 0 .75rem;line-height:1.4;
}
.privacy-body{font-size:.96rem;line-height:1.75;color:var(--text-m);margin-bottom:1rem}

/* UX-039/173 — respect reduced motion across all animations */
@media(prefers-reduced-motion:reduce){
  .reveal,.js .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ─────────────────────────────────────────────────────────────
   QA fixes — Service-detail / Privacy nav system (2026-05-11)
   These classes were undefined and the nav rendered as plain links.
   ───────────────────────────────────────────────────────────── */

.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(243,241,236,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(27,58,92,.08);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:1400px;margin:0 auto;
  padding:calc(1.2rem + var(--safe-top)) calc(2.5rem + var(--safe-right)) 1.2rem calc(2.5rem + var(--safe-left));
}
.nav-logo{
  display:inline-flex;align-items:center;
  font-family:var(--serif);font-size:1.4rem;font-weight:400;line-height:1;
  color:var(--navy-d);text-decoration:none;flex-shrink:0;
}
.nav-logo-v{color:var(--navy-d)}
.nav-logo-s{color:var(--gold)}
.nav-links{
  display:flex;align-items:center;gap:2rem;flex:1 1 auto;justify-content:center;
}
.nav-actions{
  display:flex;align-items:center;gap:1rem;flex-shrink:0;
}
.nav-lang-wrap{
  display:inline-flex;gap:.4rem;
}
.nav-lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.55rem;min-height:2.55rem;padding:.25rem .55rem;
  border:1px solid rgba(27,58,92,.16);background:rgba(255,255,255,.66);
  color:var(--navy);text-decoration:none;
  font-family:var(--sans);font-size:.68rem;font-weight:500;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;
  transition:all .25s;
}
.nav-lang:hover{border-color:var(--navy);background:rgba(255,255,255,.95)}
.nav-lang.active{background:var(--navy);color:var(--white);border-color:var(--navy)}

.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:.85rem 1.5rem;gap:.6rem;
  background:var(--navy);color:var(--white);
  font-family:var(--sans);font-size:.72rem;font-weight:500;line-height:1.1;
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:all .3s;
}
.btn-cta:hover{background:var(--navy-d);transform:translateX(3px)}

.nav-burger{
  display:none;align-items:center;justify-content:center;flex-direction:column;
  gap:4px;width:44px;height:44px;
  border:1px solid rgba(27,58,92,.16);background:rgba(255,255,255,.72);
  border-radius:50%;padding:0;cursor:pointer;
}
.nav-burger span{
  display:block;width:18px;height:1.5px;background:var(--navy-d);transition:all .3s;
}
.nav-drawer{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--bg);z-index:999;padding:6rem 2rem 2rem;
  flex-direction:column;gap:1.5rem;
}
.nav-drawer.is-open{display:flex}
.nav-drawer .nav-link{
  font-size:1rem;text-align:left;justify-content:flex-start;
  flex:0 1 auto;min-width:0;max-width:none;
}

@media(max-width:900px){
  .nav-inner{padding-left:calc(1.5rem + var(--safe-left));padding-right:calc(1.5rem + var(--safe-right))}
  .nav-links,.nav-actions{display:none}
  .nav-burger{display:inline-flex}
}

/* Service-detail page padding under fixed nav */
.svc-hero{padding-top:7rem}
@media(max-width:900px){.svc-hero{padding-top:6rem}}

/* Service-page breadcrumb minor cleanup */
.svc-breadcrumb{padding:1.5rem 0;background:var(--bg)}
.svc-breadcrumb .container{display:flex;gap:.6rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lt)}
.svc-breadcrumb a{color:var(--navy);text-decoration:none}
.svc-breadcrumb a:hover{text-decoration:underline}

/* ─────────────────────────────────────────────────────────────
   DESIGN POLISH (round 4) — button system + card unification
   ───────────────────────────────────────────────────────────── */

/* D2: lock all square-ish buttons to 4px radius for one consistent shape */
.btn-p,.btn-primary,.btn-cta,.nav-cta,.fsub,.btn,a.btn,a.btn-primary,a.btn-cta,
.btn-g{
  border-radius:4px !important;
}
/* Keep contact pills, mobile sticky, WhatsApp, lang switcher full-pill (intentional) */
.contact-pill,.mobile-cta-btn,.whatsapp-float,.lang-switch a,.nav-lang,.notfound-lang a{
  border-radius:9999px !important;
}

/* D1+D9: unified transition curve for all interactive surfaces */
.btn-p,.btn-primary,.btn-cta,.nav-cta,.fsub,.btn-g,.btn,a.btn,
.contact-pill,.srv-lnk{
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease !important;
}

/* D3: ensure btn-cta and nav-cta render identically */
.btn-cta{
  width:auto;min-width:11rem;
  font-size:.72rem;letter-spacing:.16em;line-height:1.12;
  min-height:3rem;padding:.85rem 1.5rem;
}
.nav-cta{flex:0 0 auto;width:auto;min-width:11rem;max-width:none}

/* D4: card unification — tame the menagerie
   Two canonical variants (existing classes kept):
   - feature-style: .project-card, .principle, .faq-item, .page-kpi, .hero-card
   - top-stroke style: .proc-s, .principle (already), .project-card (current)
   Standardize border weights and hover lift across all "feature" cards */
.project-card,.principle,.faq-item,.page-kpi,.hero-card,
.svc-tags-block,.svc-col-side .svc-cta{
  border-radius:6px;
}
/* Hover lift consistency for clickable cards */
.project-card{
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease !important;
}

/* D5: vary the italic-em pattern — strip italic from FAQ H2
   so the remaining italic emphasis carries more weight elsewhere */
#faq h2 em{
  font-style:normal;
  color:var(--navy-d);
}

/* D6: process-section divider improvement (subtle inter-card lines on dark bg) */
.proc-g{
  background:rgba(255,255,255,.12) !important;
  gap:1px;
}

/* D7: lock eyebrow separator across all locales / breakpoints */
@media(max-width:640px){
  .eyebrow::after{flex:0 0 1.5rem;width:1.5rem}
}