@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');



:root{

  --brand:        #1B1D52;
  --brand-lift:   #2A3080;
  --brand-deep:   #101235;
  --brand-tint:   #ECEDF6;
  --gold:         #B78931;
  --gold-lift:    #E3BC6A;
  --gold-deep:    #8E681F;
  --gold-tint:    #F9F3E6;
  --dark:         #0C0E2B;
  --support:      #00ADEF;
  --ink:          #2B2B31;
  --paper:        #FFFFFF;
  /* ------------------------------------------------------------------------ */

  --ink-70:  #45454E;
  --ink-50:  #6E6E7A;
  --ink-25:  #ABABB6;
  --rule:    #E7E7EE;
  --rule-2:  #D4D4DE;
  --neutral: #EFEFF3;
  --tint:    #F5F7FC;
  --white:   #FFFFFF;
  --wa:      #1FA855;
  --wa-deep: #17843F;
  --ok:      #1B7A4B;
  --warn:    #A8600C;
  --err:     #B4123B;


  --c:#00ADEF; --m:#ED008C; --y:#FEF200; --k:#111111;

  /* ---------- GRADIENTS — the premium layer ---------- */
  --g-brand:      linear-gradient(135deg,#2A3080 0%,#1B1D52 46%,#101235 100%);
  --g-brand-r:    linear-gradient(115deg,#101235 0%,#1B1D52 55%,#2A3080 100%);
  --g-brand-soft: linear-gradient(160deg,#FFFFFF 0%,#F5F7FC 45%,#ECEDF6 100%);
  --g-gold:       linear-gradient(135deg,#E3BC6A 0%,#B78931 52%,#8E681F 100%);
  --g-gold-soft:  linear-gradient(140deg,#FDF8EE 0%,#F9F3E6 100%);
  --g-cmyk:       linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--k) 75% 100%);
  --g-cmyk-dark:  linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--gold) 75% 100%);
  --g-sheen:      linear-gradient(115deg,transparent 25%,rgba(255,255,255,.42) 48%,transparent 72%);
  --g-text:       linear-gradient(120deg,#2A3080 0%,#1B1D52 58%,#8E681F 128%);


  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(16,18,53,.05), 0 5px 14px -8px rgba(16,18,53,.16);
  --sh-2: 0 2px 4px rgba(16,18,53,.05), 0 20px 44px -22px rgba(16,18,53,.34);
  --sh-3: 0 4px 8px rgba(16,18,53,.05), 0 38px 80px -34px rgba(16,18,53,.48);
  --sh-brand: 0 14px 34px -14px rgba(27,29,82,.55);
  --sh-gold:  0 14px 32px -14px rgba(183,137,49,.55);

  /* ---------- rhythm ---------- */
  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:52px; --s7:78px;
  --wrap:1240px;
  --f:'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --f-display:'Playfair Display', Georgia, Times New Roman, serif;
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hdr:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 20px)}
body{margin:0; background:var(--paper); color:var(--ink-70);
  font-family:var(--f); font-size:1rem; line-height:1.68; font-weight:450;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden}
main{flex:1}
img,svg{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{color:var(--brand); font-weight:800; line-height:1.12; letter-spacing:-.028em; margin:0 0 var(--s3)}
h1{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.3rem)}
h2{font-size:clamp(1.72rem,1.2rem + 1.7vw,2.45rem)}
h3{font-size:1.2rem; letter-spacing:-.018em}
h4{font-size:.97rem; font-weight:750; letter-spacing:-.008em}
p{margin:0 0 var(--s4); max-width:70ch}
ul,ol{margin:0 0 var(--s4); padding-left:1.15em}
li{margin-bottom:var(--s2)}
strong{font-weight:750}
:focus-visible{outline:2.5px solid var(--support); outline-offset:3px; border-radius:4px}
::selection{background:var(--brand); color:#fff}

/* the elegant serif accent — one or two words of a headline, never more */
.accent{font-family:var(--f-display); font-style:italic; font-weight:500; letter-spacing:-.01em;
  background:var(--g-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-right:.06em}
.section--dark .accent,.phero .accent,.hero .accent{
  background:linear-gradient(120deg,#FFFFFF 0%,#E3BC6A 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,42px)}
.wrap-tight{max-width:880px}
.section{padding-block:clamp(58px,6.4vw,104px); position:relative}
.section--tint{background:var(--tint)}
.section--soft{background:var(--g-brand-soft)}
.section--paper{background:var(--white)}
.section--flush{padding-block:0}
.section--dark{background:var(--g-brand); color:#C3C8E0; position:relative; overflow:hidden}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark p{color:#A9AFCD}
.section--dark .tlink{color:var(--gold-lift)}
.grid{display:grid; gap:var(--s5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}

/* soft ambient light — sits behind dark sections and the hero */
.glow{position:absolute; border-radius:50%; filter:blur(72px); pointer-events:none; z-index:0}
.glow--gold{background:radial-gradient(circle,rgba(227,188,106,.32),transparent 70%)}
.glow--cyan{background:radial-gradient(circle,rgba(0,173,239,.22),transparent 70%)}
.glow--navy{background:radial-gradient(circle,rgba(42,48,128,.32),transparent 70%)}
.section--dark>.wrap{position:relative; z-index:1}

/* fine press-grid texture for dark bands */
.section--dark::after{content:''; position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 18%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 18%,transparent 78%)}

/* ---------- brand devices ---------- */
.colorbar{height:3px; width:100%; position:relative; background:var(--rule)}
.colorbar::before{content:''; position:absolute; inset:0 auto 0 0; width:132px; background:var(--g-cmyk)}
.colorbar--short{width:132px; height:3px; background:var(--g-cmyk); border-radius:2px; margin-bottom:var(--s4)}
.site-footer .colorbar{background:rgba(255,255,255,.14)}
.site-footer .colorbar::before{background:var(--g-cmyk-dark)}

.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.71rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep);
  margin:0 0 var(--s3); padding:7px 16px 7px 12px; border-radius:var(--r-pill);
  background:var(--g-gold-soft); box-shadow:inset 0 0 0 1px rgba(183,137,49,.22)}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--g-gold); box-shadow:0 0 0 3px rgba(183,137,49,.16)}
.section--dark .eyebrow,.phero .eyebrow,.hero .eyebrow{color:var(--gold-lift);
  background:rgba(227,188,106,.12); box-shadow:inset 0 0 0 1px rgba(227,188,106,.28)}

.reg-mark{width:132px; height:15px; position:relative; margin-bottom:var(--s4)}
.reg-mark::before{content:''; position:absolute; top:50%; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent)}
.reg-mark::after{content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:15px; height:15px; border-radius:50%; border:1.5px solid var(--ink);
  background:conic-gradient(var(--c) 0 25%,var(--m) 25% 50%,var(--k) 50% 75%,var(--y) 75% 100%);
  box-shadow:0 0 0 3.5px var(--paper)}

/* centred section heading */
.sec-head{max-width:680px; margin:0 auto clamp(34px,4vw,58px); text-align:center}
.sec-head p{color:var(--ink-50); margin:0 auto; font-size:1rem}
.sec-head--left{margin-inline:0; text-align:left}
.sec-head--split{max-width:none; display:grid; grid-template-columns:1fr auto;
  gap:var(--s5); align-items:end; text-align:left}
.sec-head--split .sh-copy{max-width:640px}
.sec-head--split p{margin:0}

/* ==========================================================================
   4 · MOTION
   ========================================================================== */
[data-reveal]{opacity:0; transform:translateY(26px); will-change:opacity,transform;
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1; transform:none}
[data-stagger]>*{opacity:0; transform:translateY(24px);
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out)}
[data-stagger].is-in>*{opacity:1; transform:none}
[data-stagger].is-in>*:nth-child(1){transition-delay:.02s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.09s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.23s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.30s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.37s}
[data-stagger].is-in>*:nth-child(n+7){transition-delay:.44s}

@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
@keyframes floaty-2{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,13px,0) rotate(2deg)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-20px,0) scale(1.1)}}
@keyframes sheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{transform:scale(.85);opacity:.5}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@keyframes rise-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.float{animation:floaty 7s ease-in-out infinite}
.float-2{animation:floaty-2 9s ease-in-out infinite}
.drift{animation:drift 17s ease-in-out infinite}

/* ==========================================================================
   5 · BUTTONS + LINKS
   ========================================================================== */
.btn{--bg:var(--g-brand); --bd:transparent; --fg:#fff; --sh:var(--sh-brand);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 25px; border:1.5px solid var(--bd); border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); font-size:.875rem; font-weight:750;
  text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  box-shadow:var(--sh); transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease)}
.btn::after{content:''; position:absolute; inset:0; z-index:-1; background:var(--g-sheen); transform:translateX(-120%)}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(16,18,53,.5)}
.btn:hover::after{animation:sheen .85s var(--ease-out)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px; height:17px; flex:none}
.btn--gold{--bg:var(--g-gold); --fg:#221904; --sh:var(--sh-gold)}
.btn--gold:hover{box-shadow:0 18px 38px -14px rgba(183,137,49,.62)}
.btn--ghost{--bg:transparent; --bd:var(--rule-2); --fg:var(--brand); --sh:none}
.btn--ghost:hover{--bd:var(--brand); --bg:var(--brand-tint); box-shadow:var(--sh-1)}
.btn--ghost-light{--bg:rgba(255,255,255,.07); --bd:rgba(255,255,255,.32); --fg:#fff; --sh:none}
.btn--ghost-light:hover{--bg:rgba(255,255,255,.15); --bd:rgba(255,255,255,.62)}
.btn--wa{--bg:linear-gradient(135deg,#2BC466,#1FA855 60%,#17843F); --fg:#fff;
  --sh:0 14px 30px -14px rgba(31,168,85,.6)}
.btn--sm{padding:9px 18px; font-size:.79rem}
.btn--lg{padding:16px 32px; font-size:.95rem}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
.btn.is-loading{color:transparent; pointer-events:none}
.btn.is-loading::before{content:''; position:absolute; inset:0; margin:auto; width:17px; height:17px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}

.tlink{display:inline-flex; align-items:center; gap:8px; font-size:.83rem; font-weight:750;
  color:var(--brand); text-decoration:none; transition:color .2s var(--ease)}
.tlink svg{width:15px; height:15px; transition:transform .28s var(--ease)}
.tlink:hover{color:var(--gold-deep)}
.tlink:hover svg{transform:translateX(4px)}

/* ==========================================================================
   6 · HEADER · MEGA MENU · DRAWER
   ========================================================================== */
.topbar{background:var(--g-brand-r); color:#B9BEDB; font-size:.78rem; position:relative; z-index:90}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:40px}
.topbar-l,.topbar-r{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap}
.topbar a{color:#B9BEDB; text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  transition:color .2s var(--ease)}
.topbar a:hover{color:var(--gold-lift)}
.topbar svg{width:14px; height:14px; color:var(--gold-lift)}
.topbar .sep{width:1px; height:14px; background:rgba(255,255,255,.16)}

.site-header{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--rule); transition:box-shadow .3s var(--ease), background .3s var(--ease)}
.site-header.is-stuck{box-shadow:0 10px 30px -18px rgba(16,18,53,.4); background:rgba(255,255,255,.94)}
.site-header .wrap{max-width:1460px}
.navbar{display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(18px,3vw,44px); min-height:var(--hdr)}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none}
.brand-mark{height:50px; width:auto; flex:none; display:block; transition:transform .35s var(--ease)}
.brand:hover .brand-mark{transform:scale(1.05) rotate(-2deg)}
.brand-name{white-space:nowrap; font-weight:800; font-size:1rem; color:var(--brand); letter-spacing:-.02em; line-height:1.15}
.brand-name em{font-style:italic; color:var(--ink); font-weight:800}
.brand-sub{display:block; font-size:.55rem; font-weight:800; color:var(--gold);
  letter-spacing:.19em; text-transform:uppercase; margin-top:2px}

.nav{display:flex; align-items:center; justify-content:center; gap:2px}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:6px; padding:11px 14px; white-space:nowrap;
  font-size:.86rem; font-weight:700; color:var(--ink-70); text-decoration:none;
  border-radius:var(--r-pill); position:relative; transition:color .2s var(--ease), background .2s var(--ease)}
.nav-link::after{content:''; position:absolute; left:50%; right:50%; bottom:5px; height:2px; border-radius:2px;
  background:var(--g-gold); transition:left .3s var(--ease), right .3s var(--ease)}
.nav-link:hover{color:var(--brand); background:var(--brand-tint)}
.nav-link:hover::after,.nav-link.is-active::after{left:15px; right:15px}
.nav-link.is-active{color:var(--brand)}
.nav-link .chev{width:11px; height:11px; opacity:.55; transition:transform .25s var(--ease)}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}
.nav-cta{display:flex; align-items:center; gap:var(--s2)}

.mega{position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:var(--s5); opacity:0; visibility:hidden;
  transform:translateY(12px) scale(.985); transform-origin:top center;
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.mega::before{content:''; position:absolute; inset:-18px 0 auto; height:18px}
.mega::after{content:''; position:absolute; top:0; left:var(--s5); width:132px; height:2px;
  border-radius:2px; background:var(--g-cmyk); opacity:.9}
.mega--services{width:660px}
.mega--products{width:min(92vw,980px)}
.mega-grid{display:grid; gap:var(--s4) var(--s6)}
.mega--services .mega-grid{grid-template-columns:repeat(2,1fr)}
.mega--products .mega-grid{grid-template-columns:repeat(3,1fr)}
.mega-col-title{display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--brand); margin-bottom:var(--s3)}
.mega-col-title i{width:6px; height:6px; background:var(--g-gold); border-radius:50%; flex:none}
.mega-list{list-style:none; margin:0; padding:0}
.mega-list li{margin:0}
.mega-list a{display:flex; align-items:center; gap:8px; padding:7px 10px; margin-left:-10px;
  font-size:.84rem; color:var(--ink-70); text-decoration:none; border-radius:var(--r-sm);
  transition:background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease)}
.mega-list a::before{content:''; width:0; height:1.5px; background:var(--gold); transition:width .22s var(--ease)}
.mega-list a:hover{background:var(--brand-tint); color:var(--brand)}
.mega-list a:hover::before{width:10px}
.mega-service{display:flex; gap:var(--s3); padding:var(--s3); margin:-4px; border-radius:var(--r);
  text-decoration:none; transition:background .2s var(--ease), transform .2s var(--ease)}
.mega-service:hover{background:var(--g-brand-soft); transform:translateX(3px)}
.mega-service .ic{width:42px; height:42px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--g-brand); color:#fff; box-shadow:var(--sh-1)}
.mega-service .ic svg{width:20px; height:20px}
.mega-service strong{display:block; color:var(--brand); font-size:.87rem; font-weight:750}
.mega-service span{display:block; font-size:.76rem; color:var(--ink-50); line-height:1.5}
.mega-foot{display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--rule); font-size:.82rem; color:var(--ink-50)}

.burger{display:none; width:46px; height:46px; border:1px solid var(--rule-2); background:var(--white);
  border-radius:var(--r-sm); cursor:pointer; place-items:center; padding:0}
.burger span{display:block; width:19px; height:1.8px; background:var(--brand); position:relative; transition:.22s}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:19px; height:1.8px;
  background:var(--brand); transition:.22s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

.scrim{position:fixed; inset:0; background:rgba(12,14,43,.6); opacity:0; visibility:hidden;
  transition:.3s var(--ease); z-index:95; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.scrim.is-open{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(410px,90vw); background:var(--white);
  z-index:100; transform:translateX(100%); transition:transform .38s var(--ease-out);
  display:flex; flex-direction:column; overflow-y:auto; box-shadow:var(--sh-3)}
.drawer.is-open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--rule)}
.drawer-top .brand-mark{height:44px}
.drawer-close{width:42px; height:42px; border:1px solid var(--rule-2); background:none;
  border-radius:var(--r-sm); cursor:pointer; display:grid; place-items:center; color:var(--brand)}
.drawer-close svg{width:18px; height:18px}
.drawer-nav{padding:var(--s3) var(--s5) var(--s5); flex:1}
.drawer-nav a.d-link,.drawer-acc-btn{display:flex; width:100%; align-items:center; justify-content:space-between;
  padding:14px 0; border:0; border-bottom:1px solid var(--rule); background:none; cursor:pointer;
  font-size:.95rem; font-weight:750; color:var(--brand); text-decoration:none; text-align:left}
.drawer-acc-btn svg{width:16px; height:16px; transition:transform .25s var(--ease); color:var(--gold)}
.drawer-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
.drawer-panel.is-open{grid-template-rows:1fr}
.drawer-panel>div{overflow:hidden; padding-left:var(--s3)}
.drawer-panel a{display:block; padding:9px 0; font-size:.875rem; color:var(--ink-70); text-decoration:none}
.drawer-panel a:hover{color:var(--gold-deep)}
.drawer-panel .grp{font-size:.72rem; font-weight:800; color:var(--brand); margin:var(--s3) 0 2px;
  letter-spacing:.1em; text-transform:uppercase}
.drawer-panel .grp:first-child{margin-top:var(--s2)}
.drawer-foot{padding:var(--s5); border-top:1px solid var(--rule); background:var(--g-brand-soft); display:grid; gap:var(--s2)}

.wa-float{position:fixed; right:20px; bottom:20px; z-index:70; display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:var(--r-pill); text-decoration:none; font-size:.85rem; font-weight:750;
  color:#fff; background:linear-gradient(135deg,#2BC466,#1FA855 60%,#17843F);
  box-shadow:0 16px 34px -14px rgba(31,168,85,.7); transition:transform .28s var(--ease)}
.wa-float::before{content:''; position:absolute; inset:0; border-radius:inherit; background:var(--wa);
  z-index:-1; animation:pulse-ring 2.6s ease-out infinite}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}
.wa-float svg{width:21px; height:21px}

.skip{position:absolute; left:-9999px; top:8px; z-index:200; padding:12px 20px;
  background:var(--g-brand); color:#fff; border-radius:var(--r-pill); font-size:.86rem; font-weight:750}
.skip:focus{left:14px}

/* ==========================================================================
   7 · HERO + PAGE HERO
   ========================================================================== */
.hero{position:relative; overflow:hidden; background:var(--g-brand); color:#C3C8E0;
  padding-block:clamp(56px,7vw,104px) clamp(96px,10vw,150px)}
.hero::after{content:''; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 10%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 30% 10%,#000 10%,transparent 72%)}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(34px,4.5vw,68px); align-items:center}
.hero h1{color:#fff; margin-bottom:var(--s4); letter-spacing:-.034em}
.hero-lede{font-size:1.04rem; color:#AFB5D4; margin-bottom:var(--s5); max-width:48ch}
.hero .btn-row{margin-bottom:var(--s6)}
.hero-copy>*{animation:rise-in .8s var(--ease-out) backwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.15s}
.hero-copy>*:nth-child(3){animation-delay:.25s}
.hero-copy>*:nth-child(4){animation-delay:.35s}
.hero-copy>*:nth-child(5){animation-delay:.45s}
.hero-chips{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5)}
.hero-chip{display:flex; align-items:center; gap:10px; font-size:.83rem; font-weight:650; color:#C9CEE6}
.hero-chip .ic{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(227,188,106,.16); color:var(--gold-lift); box-shadow:inset 0 0 0 1px rgba(227,188,106,.3)}
.hero-chip .ic svg{width:15px; height:15px}

/* the hero visual — a stack of floating "print" panels */
.hero-stage{position:relative; aspect-ratio:1/.92; min-height:340px}
.hero-pane{position:absolute; border-radius:var(--r-lg); overflow:hidden; background:var(--neutral);
  box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.14)}
.hero-pane--main{inset:6% 4% 16% 12%; z-index:2}
.hero-pane--a{width:38%; aspect-ratio:4/3; left:-2%; bottom:6%; z-index:3; animation:floaty 7s ease-in-out infinite}
.hero-pane--b{width:32%; aspect-ratio:1/1; right:0; top:0; z-index:3; animation:floaty-2 9s ease-in-out infinite}
.hero-pane svg{width:100%; height:100%}
.hero-badge{position:absolute; right:2%; bottom:2%; z-index:4; display:flex; align-items:center; gap:11px;
  padding:12px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--sh-2);
  animation:floaty 8s ease-in-out infinite .8s}
.hero-badge .n{font-size:1.3rem; font-weight:800; color:var(--brand); line-height:1;
  background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-badge .t{font-size:.72rem; font-weight:700; color:var(--ink-50); line-height:1.3}

/* trust bar — floats over the hero base */
.trustbar{background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden}
.trustbar>div{display:flex; gap:var(--s3); align-items:center; padding:var(--s4) var(--s4);
  border-right:1px solid var(--rule); transition:background .25s var(--ease)}
.trustbar>div:last-child{border-right:0}
.trustbar>div:hover{background:var(--g-brand-soft)}
.trustbar .ic{width:46px; height:46px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--g-gold-soft); color:var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(183,137,49,.2);
  transition:transform .3s var(--ease)}
.trustbar>div:hover .ic{transform:scale(1.08) rotate(-4deg)}
.trustbar .ic svg{width:21px; height:21px}
.trustbar strong{display:block; font-size:.88rem; color:var(--brand); font-weight:750; line-height:1.3}
.trustbar span{display:block; font-size:.78rem; color:var(--ink-50); line-height:1.45}

/* page hero (inner pages) */
.phero{background:var(--g-brand); color:#C3C8E0; padding-block:clamp(38px,5vw,70px);
  position:relative; overflow:hidden}
/* the chip strip sits at the left edge of a hairline rule — the brand device,
   not a full-width colour band */
.phero::after{content:''; position:absolute; inset:auto 0 0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--c) 0 33px,var(--m) 33px 66px,var(--y) 66px 99px,
    var(--gold) 99px 132px,rgba(255,255,255,.14) 132px 100%)}
.phero .wrap{position:relative; z-index:1}
.phero h1{color:#fff; margin-bottom:var(--s3)}
.phero p{color:#A9AFCD; max-width:62ch; margin-bottom:0}
.phero-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s6); align-items:end}

.crumb{padding:var(--s3) 0; font-size:.78rem; color:var(--ink-50); background:var(--tint);
  border-bottom:1px solid var(--rule)}
.crumb ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.crumb li{margin:0; display:flex; gap:8px; align-items:center}
.crumb li+li::before{content:'/'; color:var(--ink-25)}
.crumb a{text-decoration:none; color:var(--ink-50); transition:color .2s}
.crumb a:hover{color:var(--gold-deep)}
.crumb [aria-current]{color:var(--brand); font-weight:700}
.crumb--dark{background:transparent; border:0; color:#98A0C4; padding:0 0 var(--s3)}
.crumb--dark a,.crumb--dark li+li::before{color:#98A0C4}
.crumb--dark a:hover{color:var(--gold-lift)}
.crumb--dark [aria-current]{color:#fff}

/* ==========================================================================
   8 · CARDS · RAILS · FEATURES
   ========================================================================== */
.card{position:relative; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; height:100%; isolation:isolate;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease)}
.card::before{content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--g-brand-soft); transition:opacity .38s var(--ease)}
.card::after{content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:var(--g-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out)}
.card:hover{transform:translateY(-7px); box-shadow:var(--sh-3); border-color:transparent}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card-body{padding:var(--s4) var(--s4) var(--s5); display:flex; flex-direction:column; flex:1}
.card-title{margin-bottom:6px; font-size:1rem}
.card-title a{text-decoration:none; transition:color .2s}
.card:hover .card-title a{color:var(--gold-deep)}
.card-desc{font-size:.84rem; color:var(--ink-50); margin-bottom:var(--s4); line-height:1.6}
.card-foot{margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.card-meta{font-size:.7rem; color:var(--gold-deep); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:7px}

.art{position:relative; overflow:hidden; background:var(--neutral); aspect-ratio:4/3}
.art svg{width:100%; height:100%; transition:transform .7s var(--ease-out)}
.art::after{content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(16,18,53,.42));
  transition:opacity .4s var(--ease)}
.card:hover .art svg,.proj:hover .art svg{transform:scale(1.07)}
.card:hover .art::after,.proj:hover .art::after{opacity:1}
.art--tall{aspect-ratio:3/4}
.art--wide{aspect-ratio:16/9}
.art--sq{aspect-ratio:1/1}
.art--framed{border-radius:var(--r-lg); border:1px solid var(--rule); box-shadow:var(--sh-2)}

.badge{position:absolute; top:12px; left:12px; z-index:2; padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.7rem; font-weight:800; color:var(--brand); letter-spacing:.04em; box-shadow:var(--sh-1)}
.badge--gold{background:var(--g-gold); color:#221904}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 13px; font-size:.75rem;
  font-weight:700; border-radius:var(--r-pill); background:var(--neutral); color:var(--ink-70)}
.pill--brand{background:var(--brand-tint); color:var(--brand)}
.pill--gold{background:var(--g-gold-soft); color:var(--gold-deep)}
.pill-row{display:flex; flex-wrap:wrap; gap:7px}
.meta{font-size:.78rem; color:var(--ink-50); font-weight:650}

/* icon feature block */
.feat{display:flex; gap:var(--s3); align-items:flex-start}
.feat .ic{width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--g-brand); color:#fff; box-shadow:var(--sh-1); transition:transform .35s var(--ease)}
.feat:hover .ic{transform:rotate(-6deg) scale(1.06)}
.feat .ic svg{width:21px; height:21px}
.feat h4{margin-bottom:4px}
.feat p{font-size:.84rem; color:var(--ink-50); margin:0}
.section--dark .feat .ic{background:rgba(255,255,255,.1); color:var(--gold-lift);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

/* feature card (why-us) */
.fcard{position:relative; padding:var(--s5) var(--s4); border-radius:var(--r-lg); background:var(--white);
  border:1px solid var(--rule); height:100%; overflow:hidden; isolation:isolate;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
.fcard::before{content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px; z-index:-1;
  border-radius:50%; background:radial-gradient(circle,rgba(236,237,246,.9),transparent 70%);
  transition:transform .5s var(--ease)}
.fcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.fcard:hover::before{transform:scale(1.5)}
.fcard .n{font-family:var(--f-display); font-size:2.4rem; font-weight:600; line-height:1;
  color:var(--rule-2); margin-bottom:var(--s3); transition:color .35s var(--ease)}
.fcard:hover .n{color:var(--gold-lift)}
.fcard h4{margin-bottom:7px; font-size:1.02rem}
.fcard p{font-size:.85rem; color:var(--ink-50); margin:0}
.section--dark .fcard{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1)}
.section--dark .fcard::before{background:radial-gradient(circle,rgba(227,188,106,.18),transparent 70%)}
.section--dark .fcard .n{color:rgba(255,255,255,.18)}
.section--dark .fcard p{color:#A9AFCD}

/* tick list */
.tick{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.tick li{display:flex; gap:11px; align-items:flex-start; margin:0; font-size:.88rem; color:var(--ink-70)}
.tick svg{width:18px; height:18px; flex:none; color:var(--gold); margin-top:3px}
.section--dark .tick li{color:#C3C8E0}

/* spec table */
.spec{width:100%; border-collapse:collapse; font-size:.87rem}
.spec th,.spec td{text-align:left; padding:13px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.spec th{width:180px; color:var(--brand); font-weight:750}
.spec td{color:var(--ink-70)}

/* two-column rail (intro + body) */
.rail{display:grid; grid-template-columns:300px 1fr; gap:clamp(30px,4vw,68px); align-items:start}
.rail-intro{position:sticky; top:calc(var(--hdr) + 24px)}
.rail-intro h2{margin-bottom:var(--s3)}
.rail-intro p{font-size:.95rem; color:var(--ink-50); margin-bottom:var(--s4)}
.rail-body{min-width:0}

/* ==========================================================================
   9 · CAROUSEL  — mirrors the Vue <Carousel> contract 1:1
   ========================================================================== */
.carousel{position:relative}
/* the -6px/6px pair gives hover shadows room to render without being clipped */
.carousel-viewport{overflow:hidden; margin-inline:-6px; padding:6px; cursor:grab}
.carousel-viewport.is-dragging{cursor:grabbing}
.carousel-track{display:flex; gap:var(--gap,24px); will-change:transform;
  transition:transform .62s var(--ease-out)}
.carousel-viewport.is-dragging .carousel-track{transition:none}
.carousel-slide{flex:0 0 auto; width:var(--slide-w,320px); min-width:0}
.carousel-slide>*{height:100%}
.carousel .card,.carousel .quote{height:100%}

.carousel-nav{display:flex; align-items:center; gap:10px}
.cbtn{width:46px; height:46px; flex:none; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1.5px solid var(--rule-2); background:var(--white); color:var(--brand);
  box-shadow:var(--sh-1); transition:transform .28s var(--ease), background .28s var(--ease),
    color .28s var(--ease), border-color .28s var(--ease), opacity .2s}
.cbtn svg{width:18px; height:18px}
.cbtn:hover:not(:disabled){background:var(--g-brand); color:#fff; border-color:transparent;
  transform:translateY(-2px); box-shadow:var(--sh-brand)}
.cbtn:disabled{opacity:.35; cursor:not-allowed}
.section--dark .cbtn,.carousel--light .cbtn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#fff}
.section--dark .cbtn:hover:not(:disabled),.carousel--light .cbtn:hover:not(:disabled){
  background:var(--g-gold); color:#221904; border-color:transparent; box-shadow:var(--sh-gold)}

/* floating side arrows variant */
.carousel--arrows-side .carousel-nav{position:absolute; inset:0; pointer-events:none;
  justify-content:space-between; align-items:center; z-index:5; margin-inline:-12px}
.carousel--arrows-side .cbtn{pointer-events:auto}

.carousel-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  margin-top:var(--s5); flex-wrap:wrap}
.carousel-dots{display:flex; align-items:center; gap:8px}
.cdot{width:9px; height:9px; padding:0; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--rule-2); transition:width .35s var(--ease), background .35s var(--ease)}
.cdot.is-on{width:30px; background:var(--g-gold)}
.section--dark .cdot,.carousel--light .cdot{background:rgba(255,255,255,.26)}
.section--dark .cdot.is-on,.carousel--light .cdot.is-on{background:var(--g-gold)}
.carousel-progress{flex:1; min-width:120px; height:3px; border-radius:2px; background:var(--rule); overflow:hidden}
.carousel-progress i{display:block; height:100%; border-radius:2px; background:var(--g-gold);
  transform-origin:left; transition:transform .45s var(--ease-out)}
.section--dark .carousel-progress,.carousel--light .carousel-progress{background:rgba(255,255,255,.16)}

/* logo / client marquee */
.marquee{overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex; width:max-content; gap:clamp(34px,5vw,72px);
  animation:marquee var(--speed,38s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex; align-items:center; gap:11px; font-size:.95rem; font-weight:800;
  color:var(--ink-25); letter-spacing:-.01em; white-space:nowrap; transition:color .3s var(--ease)}
.marquee-item:hover{color:var(--brand)}
.marquee-item svg{width:19px; height:19px; color:var(--gold); opacity:.7}
.section--dark .marquee-item{color:rgba(255,255,255,.4)}
.section--dark .marquee-item:hover{color:#fff}

/* ==========================================================================
   10 · PROCESS · TESTIMONIALS · STATS
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); position:relative}
.steps::before{content:''; position:absolute; top:26px; left:8%; right:8%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--rule),var(--gold-lift),var(--rule))}
.step{text-align:center; position:relative; z-index:1}
.step .num{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; margin:0 auto var(--s3);
  background:var(--white); color:var(--brand); font-weight:800; font-size:1.02rem;
  box-shadow:0 0 0 1.5px var(--rule), var(--sh-1); transition:all .35s var(--ease)}
.step:hover .num{background:var(--g-brand); color:#fff; box-shadow:0 0 0 5px var(--brand-tint), var(--sh-brand);
  transform:translateY(-4px)}
.step h4{margin-bottom:5px; font-size:.93rem}
.step p{font-size:.8rem; color:var(--ink-50); margin:0}
.section--tint .step .num{background:var(--white)}
.section--dark .steps::before{background:linear-gradient(90deg,rgba(255,255,255,.14),var(--gold),rgba(255,255,255,.14))}
.section--dark .step .num{background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.section--dark .step:hover .num{background:var(--g-gold); color:#221904; box-shadow:var(--sh-gold)}
.section--dark .step p{color:#A9AFCD}

.quote{position:relative; padding:var(--s5); background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
.quote::before{content:'\201C'; position:absolute; right:18px; top:-14px; z-index:-1;
  font-family:var(--f-display); font-size:8rem; line-height:1; color:var(--brand-tint)}
.quote:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.quote-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4)}
.quote-by{display:flex; align-items:center; gap:12px}
.quote-av{width:44px; height:44px; border-radius:50%; background:var(--g-brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none; box-shadow:var(--sh-1)}
.quote-by strong{display:block; font-size:.89rem; color:var(--brand)}
.quote-by span{font-size:.77rem; color:var(--ink-50)}
.quote-stars{display:flex; gap:2px}
.quote-stars svg{width:14px; height:14px; color:var(--gold)}
.quote p{font-size:.9rem; color:var(--ink-70); margin:0; line-height:1.7}
.section--dark .quote{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1)}
.section--dark .quote::before{color:rgba(255,255,255,.07)}
.section--dark .quote p{color:#C3C8E0}
.section--dark .quote-by strong{color:#fff}
.section--dark .quote-by span{color:#A9AFCD}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.stat{padding:var(--s5) var(--s4); border-radius:var(--r-lg); text-align:center; background:var(--white);
  border:1px solid var(--rule); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.stat:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.stat .n{font-size:clamp(1.9rem,1.2rem + 1.9vw,2.7rem); font-weight:800; line-height:1; letter-spacing:-.035em;
  background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .t{display:block; margin-top:9px; font-size:.82rem; font-weight:700; color:var(--ink-50)}
.section--dark .stat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1)}
.section--dark .stat .n{background:linear-gradient(120deg,#fff,#E3BC6A);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.section--dark .stat .t{color:#A9AFCD}

/* ==========================================================================
   11 · FILTERS · FORMS · ACCORDION
   ========================================================================== */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s5)}
.chip{padding:9px 19px; border:1.5px solid var(--rule-2); background:var(--white); border-radius:var(--r-pill);
  font-size:.81rem; font-weight:700; color:var(--ink-70); cursor:pointer;
  transition:all .26s var(--ease)}
.chip:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}
.chip.is-on{background:var(--g-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}
.filters{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-end; padding:var(--s4);
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:var(--s4)}
.filters label{font-size:.74rem; font-weight:750; color:var(--brand); display:block; margin-bottom:6px}
.filter-field{min-width:180px; flex:1 1 180px}
.result-count{font-size:.86rem; color:var(--ink-50); margin-bottom:var(--s4)}

.field{margin-bottom:var(--s4)}
.field>label{display:block; font-size:.84rem; font-weight:750; color:var(--brand); margin-bottom:7px}
.field .req{color:var(--gold)}
.field .hint{display:block; font-size:.77rem; color:var(--ink-50); font-weight:450; margin-top:6px}
.input,.select,.textarea{width:100%; padding:13px 16px; background:var(--white); color:var(--ink);
  border:1.5px solid var(--rule-2); border-radius:var(--r-sm); font-size:.9rem;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--ink-25)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(27,29,82,.1)}
.textarea{min-height:130px; resize:vertical}
.select{appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E7A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.field.has-err .input,.field.has-err .select,.field.has-err .textarea{border-color:var(--err)}
.err-msg{display:none; font-size:.77rem; color:var(--err); font-weight:650; margin-top:6px}
.field.has-err .err-msg{display:block}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s4)}
.form-grid .span-2{grid-column:1/-1}
.form-card{padding:clamp(24px,3vw,44px); background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-xl); box-shadow:var(--sh-2)}
.radio-row{display:flex; flex-wrap:wrap; gap:var(--s2)}
.radio-row label{display:inline-flex; align-items:center; gap:9px; padding:11px 18px;
  border:1.5px solid var(--rule-2); border-radius:var(--r-pill); cursor:pointer; font-size:.85rem;
  font-weight:650; transition:all .22s var(--ease)}
.radio-row input{accent-color:var(--brand)}
.radio-row label:has(input:checked){border-color:var(--brand); background:var(--brand-tint); color:var(--brand)}
.drop{border:1.5px dashed var(--rule-2); border-radius:var(--r-lg); padding:var(--s5);
  text-align:center; cursor:pointer; background:var(--tint); transition:all .25s var(--ease)}
.drop:hover,.drop.is-over{border-color:var(--brand); background:var(--brand-tint)}
.drop svg{width:28px; height:28px; color:var(--ink-25); margin:0 auto var(--s2)}
.drop strong{display:block; font-size:.88rem; color:var(--brand)}
.drop span{font-size:.79rem; color:var(--ink-50)}
.drop-files{margin-top:var(--s3); display:grid; gap:7px}
.drop-file{display:flex; justify-content:space-between; gap:var(--s3); font-size:.77rem;
  padding:9px 13px; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-sm)}
.alert{display:flex; gap:var(--s3); padding:var(--s4); border-radius:var(--r); border:1px solid;
  margin-bottom:var(--s4); font-size:.87rem}
.alert svg{width:20px; height:20px; flex:none; margin-top:2px}
.alert strong{display:block; margin-bottom:3px}
.alert--ok{background:#EDF7F1; border-color:#BEE0CD; color:#155F3B}
.alert--err{background:#FBEEF1; border-color:#EFC6D0; color:#8A0E2D}
.alert--info{background:#EAF6FC; border-color:#BEDFEF; color:#0B5E7D}
.is-hidden{display:none !important}

.acc{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); background:var(--white)}
.acc-item+.acc-item{border-top:1px solid var(--rule)}
.acc-btn{display:flex; width:100%; gap:var(--s4); align-items:flex-start; justify-content:space-between;
  padding:var(--s4) var(--s5); background:none; border:0; cursor:pointer; text-align:left;
  font-size:.97rem; font-weight:750; color:var(--brand); transition:background .25s var(--ease)}
.acc-btn:hover{background:var(--tint)}
.acc-btn[aria-expanded="true"]{background:var(--g-brand-soft)}
.acc-btn .pm{width:24px; height:24px; flex:none; position:relative; margin-top:2px}
.acc-btn .pm::before,.acc-btn .pm::after{content:''; position:absolute; background:var(--gold);
  left:50%; top:50%; translate:-50% -50%; border-radius:2px; transition:transform .28s var(--ease), opacity .28s}
.acc-btn .pm::before{width:14px; height:2px}
.acc-btn .pm::after{width:2px; height:14px}
.acc-btn[aria-expanded="true"] .pm::after{transform:rotate(90deg); opacity:0}
.acc-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease)}
.acc-panel.is-open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p{font-size:.88rem; color:var(--ink-50); padding:0 var(--s5) var(--s4); margin:0}

/* ==========================================================================
   12 · PRODUCT · PORTFOLIO · CTA · FOOTER · RESPONSIVE
   ========================================================================== */
.pd-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4vw,60px); align-items:start}
.gallery-main{border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  background:var(--neutral); margin-bottom:var(--s3); box-shadow:var(--sh-2)}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.gallery-thumb{border:2px solid var(--rule); border-radius:var(--r-sm); overflow:hidden;
  background:var(--neutral); cursor:pointer; padding:0; transition:all .25s var(--ease)}
.gallery-thumb:hover{transform:translateY(-2px)}
.gallery-thumb.is-on{border-color:var(--gold); box-shadow:var(--sh-gold)}
.pd-actions{display:grid; gap:var(--s2); padding:var(--s5); background:var(--g-brand-soft);
  border:1px solid var(--rule); border-radius:var(--r-lg); margin-top:var(--s5); box-shadow:var(--sh-1)}
.pd-note{font-size:.78rem; color:var(--ink-50); text-align:center; margin:var(--s1) 0 0}
.tabsec{padding-top:var(--s5); margin-top:var(--s6); border-top:1px solid var(--rule)}
.tabsec h3{margin-bottom:var(--s4)}

.proj{display:block; text-decoration:none; position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--rule); background:var(--white); height:100%;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease)}
.proj:hover{transform:translateY(-7px); box-shadow:var(--sh-3); border-color:transparent}
.proj-cap{padding:var(--s4); display:flex; justify-content:space-between; gap:var(--s3); align-items:center}
.proj-cap strong{color:var(--brand); font-size:.9rem; font-weight:750; display:block}
.proj-cap span{font-size:.76rem; color:var(--gold-deep); font-weight:700}
.proj-cap svg{width:17px; height:17px; color:var(--brand); flex:none; transition:transform .3s var(--ease)}
.proj:hover .proj-cap svg{transform:translateX(4px)}

.cta-band{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(32px,4.5vw,58px);
  background:var(--g-brand); color:#C3C8E0; display:grid; grid-template-columns:1.35fr .65fr;
  gap:var(--s5); align-items:center; box-shadow:var(--sh-3)}
.cta-band::before{content:''; position:absolute; right:-60px; bottom:-90px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle,rgba(227,188,106,.3),transparent 68%); filter:blur(30px)}
.cta-band::after{content:''; position:absolute; inset:auto 0 0; height:3px;
  background:linear-gradient(90deg,var(--c) 0 33px,var(--m) 33px 66px,var(--y) 66px 99px,
    var(--gold) 99px 132px,rgba(255,255,255,.12) 132px 100%)}
.cta-band>*{position:relative; z-index:1}
.cta-band h2{color:#fff; margin-bottom:var(--s2)}
.cta-band p{color:#A9AFCD; margin:0; font-size:.94rem}
.cta-band .btn-row{justify-content:flex-end}

.empty{text-align:center; padding:clamp(44px,6vw,80px) var(--s5); border:1px dashed var(--rule-2);
  border-radius:var(--r-xl); background:var(--white)}
.empty svg{width:56px; height:56px; color:var(--ink-25); margin:0 auto var(--s4)}
.empty h3{margin-bottom:var(--s2)}
.empty p{color:var(--ink-50); margin:0 auto var(--s5); max-width:46ch}
.searchbar{display:flex; gap:var(--s2)}
.searchbar .input{flex:1; padding-block:16px; border-radius:var(--r-pill); padding-inline:22px}
.res{display:flex; gap:var(--s4); padding:var(--s4); border-radius:var(--r-lg); text-decoration:none;
  transition:background .25s var(--ease), transform .25s var(--ease)}
.res:hover{background:var(--tint); transform:translateX(4px)}
.res .art{width:132px; flex:none; border-radius:var(--r); aspect-ratio:4/3}
.res h4{margin-bottom:4px; font-size:1.02rem}
.res p{font-size:.86rem; color:var(--ink-50); margin:0 0 7px}
.res:hover h4{color:var(--gold-deep)}

.site-footer{background:var(--dark); color:#9AA1C2; font-size:.87rem; margin-top:auto;
  position:relative; overflow:hidden}
.site-footer::before{content:''; position:absolute; left:-10%; top:-40%; width:60%; height:150%;
  background:radial-gradient(ellipse,rgba(42,48,128,.5),transparent 65%); pointer-events:none}
.site-footer .wrap{position:relative; z-index:1}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1.15fr 1fr 1.25fr; gap:var(--s6) var(--s5);
  padding-block:clamp(46px,5vw,72px)}
.site-footer h4{color:#fff; font-size:.79rem; font-weight:800; margin-bottom:var(--s4);
  text-transform:uppercase; letter-spacing:.13em}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:#9AA1C2; text-decoration:none; transition:color .2s var(--ease), padding-left .22s var(--ease)}
.site-footer .f-links a:hover{color:var(--gold-lift); padding-left:5px}
.site-footer a:hover{color:var(--gold-lift)}
.brand--light{flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:var(--s4)}
.brand--light .brand-mark{height:56px}
.brand--light .brand-name,.brand--light .brand-name em{color:#fff}
.footer-about p{font-size:.85rem; color:#9AA1C2; margin-bottom:var(--s4); max-width:34ch}
.footer-contact li{display:flex; gap:11px; align-items:flex-start; color:#9AA1C2}
.footer-contact svg{width:16px; height:16px; flex:none; margin-top:4px; color:var(--gold-lift)}
.socials{display:flex; gap:var(--s2); margin-top:var(--s4)}
.socials a{width:38px; height:38px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);
  display:grid; place-items:center; transition:all .28s var(--ease)}
.socials a:hover{background:var(--g-gold); border-color:transparent; color:#221904; transform:translateY(-3px)}
.socials svg{width:16px; height:16px}
.footer-bot{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  padding-block:var(--s4); border-top:1px solid rgba(255,255,255,.12); font-size:.79rem;
  padding-bottom:calc(var(--s4) + 48px)}
.footer-bot a{color:#8A91B4}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width:1180px){
  .rail{grid-template-columns:250px 1fr; gap:var(--s5)}
  .mega--products .mega-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:grid}
  .navbar{grid-template-columns:auto 1fr; min-height:76px}
  .nav-cta{justify-self:end}
  .nav-cta .btn--ghost{display:none}
  .rail{grid-template-columns:1fr}
  .rail-intro{position:static; max-width:660px}
  .hero{padding-block:clamp(40px,6vw,64px) clamp(88px,10vw,120px)}
  .hero-grid{grid-template-columns:1fr; gap:var(--s6)}
  .hero-stage{order:-1; max-width:560px; margin-inline:auto; width:100%}
  .trustbar{grid-template-columns:repeat(2,1fr)}
  .trustbar>div:nth-child(2n){border-right:0}
  .trustbar>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .steps{grid-template-columns:repeat(3,1fr); gap:var(--s5)}
  .steps::before{display:none}
  .pd-grid,.split{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .cta-band .btn-row{justify-content:flex-start}
  .phero-grid{grid-template-columns:1fr; gap:var(--s5)}
  .sec-head--split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .topbar-l .hide-md{display:none}
}
@media (max-width:820px){
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:repeat(2,1fr)}
  .carousel--arrows-side .carousel-nav{display:none}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .trustbar{grid-template-columns:1fr}
  .trustbar>div{border-right:0; border-bottom:1px solid var(--rule)}
  .trustbar>div:last-child{border-bottom:0}
  .form-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr; gap:var(--s5)}
  .filters{flex-direction:column; align-items:stretch}
  .res{flex-direction:column; gap:var(--s3)}
  .res .art{width:100%}
  .wa-float span{display:none}
  .wa-float{padding:16px; right:14px; bottom:14px}
  .btn-row .btn{flex:1 1 100%}
  .stats{grid-template-columns:1fr}
  .topbar .topbar-l{display:none}
  .topbar .hide-sm{display:none}
  .topbar .wrap{justify-content:center}
  .quote{padding:var(--s4)}
}
@media (max-width:560px){
  .navbar{gap:var(--s3); min-height:70px}
  .brand-name{display:none}
  .brand-mark{height:44px}
  .nav-cta .btn{padding:10px 16px; font-size:.79rem}
  .acc-btn{padding:var(--s4)}
  .acc-panel p{padding-inline:var(--s4)}
}
/* the centred nav needs the room, so the header drops its wordmark early — but the
   drawer has space to show the full lockup again, down to 560px where the brand
   guide says the monogram stands alone. */
@media (max-width:1399px){ .site-header .brand-name{display:none} }
@media (min-width:561px) and (max-width:1024px){ .drawer-top .brand-name{display:block} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal],[data-stagger]>*{opacity:1 !important; transform:none !important}
}
@media print{.site-header,.topbar,.site-footer,.wa-float,.drawer,.scrim,.carousel-nav{display:none}}