/* ==========================================================================
   Harmano Space Solutions — Stylesheet v2 (coherent rebuild)
   System: Clean corporate · White + Ink + Sapphire System: Clean corporate · White + Ink + Emerald accent Gold accents
   Radius 5px · Montserrat display · DM Sans body
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --orange:#FF6B35;
  --orange-dark:#E14E1D;
  --orange-soft:#FFEDE5;

  --ink:#1B1B1F;
  --ink-2:#3E3E45;
  --muted:#6B6B73;
  --faint:#A3A3AA;

  --white:#FFFFFF;
  --surface:#F5F2EC;
  --surface-2:#EAE5DA;

  --line:rgba(27,27,31,.09);
  --line-strong:rgba(27,27,31,.16);

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:5px;

  --gutter:clamp(20px,4vw,64px);
  --shell:min(1280px,100% - 2 * var(--gutter));

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);

  --shadow:0 12px 32px rgba(27,27,31,.08);
  --shadow-lg:0 24px 48px rgba(27,27,31,.12);

  /* Aliases kept for shared components */
  --black:var(--ink);
  --grey:var(--muted);
  --grey-2:var(--faint);
  --paper:var(--surface);
  --paper-2:var(--surface-2);
  --radius:var(--r);
  --radius-sm:var(--r);
  --radius-lg:var(--r);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.is-locked,body.is-locked{overflow:hidden}
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-.01em}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:#CFC8C8;border-radius:5px;border:2px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}

/* ---------- 3. Layout & type utilities ---------- */
.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:clamp(80px,9vw,132px);position:relative}
.section--paper{background:var(--surface)}
.section--dark{background:var(--surface)} /* legacy hook — light theme */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.t-orange{color:var(--orange)}
.lead{font-size:17px;color:var(--muted);max-width:58ch}

.h-xl{font-size:clamp(2rem,4.4vw,3.4rem)}
.h-lg{font-size:clamp(1.55rem,2.9vw,2.35rem)}
.h-md{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.h-sm{font-size:clamp(1.05rem,1.2vw,1.2rem)}

/* Eyebrow: one consistent minimal label everywhere — orange marker + spaced caps */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border:0;background:none;padding:0;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--orange);border-radius:1px;flex:none}

.section-head{display:grid;gap:16px;margin-bottom:clamp(42px,5.5vw,72px)}
.section-head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:32px}
@media (max-width:900px){.section-head--split{grid-template-columns:1fr}}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--orange);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:15px 28px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  background:var(--btn-bg);color:var(--btn-fg);
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:color .35s var(--ease),box-shadow .45s var(--ease),transform .3s var(--ease);
}
.btn::after{
  content:"";position:absolute;z-index:-1;
  left:var(--x,50%);top:var(--y,50%);
  width:0;aspect-ratio:1;border-radius:50%;
  background:var(--orange-dark);transform:translate(-50%,-50%);
  transition:width .6s var(--ease);
}
.btn::before{
  content:"";position:absolute;top:-12%;height:124%;left:-45%;width:36%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
}
.btn:hover{color:#fff;box-shadow:0 14px 30px rgba(27,27,31,.28)}
.btn:hover::after{width:250%}
.btn:hover::before{left:125%;transition:left .7s var(--ease) .15s}
.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.96)}
.btn svg{width:15px;height:15px}
.btn:hover svg{animation:btnArrow .55s var(--ease) .1s}
@keyframes btnArrow{
  0%{transform:translateX(0);opacity:1}
  45%{transform:translateX(170%);opacity:0}
  50%{transform:translateX(-170%);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost::after{background:var(--orange)}
.btn--light{--btn-bg:var(--orange);--btn-fg:#fff}
.btn--light::after{background:var(--orange-dark)}
.hero .btn--ghost{--btn-fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

.link-u{
  position:relative;font-family:var(--font-display);font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:.5em;padding-bottom:3px;
}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 5. Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--white);color:var(--ink);
  display:grid;place-items:center;transition:opacity .5s var(--ease),visibility .5s;
}
.preloader__inner{display:grid;gap:20px;justify-items:center;text-align:center}
.preloader__mark{font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:700}
.preloader__mark em{font-style:normal;color:var(--orange)}
.preloader__bar{width:min(220px,50vw);height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.preloader__bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .2s linear}
.preloader__num{font-family:var(--font-display);font-size:11px;letter-spacing:.24em;color:var(--faint)}
body.is-loaded .preloader{opacity:0;visibility:hidden}

/* ---------- 6. Cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.75);transition:width .3s var(--ease),height .3s var(--ease),background-color .3s}
.cursor-dot{width:5px;height:5px;background:#fff}
.cursor.is-active{width:60px;height:60px;background:rgba(255,255,255,.25);border-color:transparent}
@media (hover:none),(max-width:1024px){.cursor,.cursor-dot{display:none}}

/* ---------- 7. Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:800;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.header.is-scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}

.logo{display:flex;align-items:center;gap:10px;color:#fff;transition:color .35s}
.header.is-scrolled .logo,body.menu-open .header .logo,.footer .logo{color:var(--ink)}
.logo__mark{
  width:36px;height:36px;border-radius:var(--r);background:var(--orange);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;font-size:16px;
  transition:transform .5s var(--ease);
}
.logo:hover .logo__mark{transform:rotate(-8deg) scale(1.06)}
.logo__text{display:grid;line-height:1}
.logo__text b{font-family:var(--font-display);font-size:15px;font-weight:700}
.logo__text span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--orange);margin-top:4px}

.nav{display:flex;align-items:center;gap:clamp(16px,1.8vw,30px)}
.nav a{
  position:relative;font-family:var(--font-display);font-size:12.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8);
  padding:6px 0;transition:color .3s;white-space:nowrap;
}
.header.is-scrolled .nav a{color:var(--ink-2)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover,.nav a.is-current{color:#fff}
.header.is-scrolled .nav a:hover,.header.is-scrolled .nav a.is-current{color:var(--ink)}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:left}

.header__cta{display:flex;align-items:center;gap:14px}
.header__cta .btn{padding:11px 20px;font-size:12.5px}
@media (max-width:1180px){.nav,.header__cta .btn{display:none}}

.burger{display:none;width:44px;height:44px;border-radius:var(--r);border:1px solid rgba(255,255,255,.35);place-items:center;align-content:center;justify-items:center;gap:5px;transition:border-color .3s}
.header.is-scrolled .burger,body.menu-open .header .burger{border-color:var(--line-strong)}
.burger span{display:block;width:17px;height:1.6px;background:#fff;transition:transform .45s var(--ease),opacity .3s,background .3s}
.header.is-scrolled .burger span,body.menu-open .header .burger span{background:var(--ink)}
@media (max-width:1180px){.burger{display:grid}}
body.menu-open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:700;background:var(--white);color:var(--ink);
  padding:105px var(--gutter) 40px;display:grid;align-content:start;gap:4px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);overflow-y:auto;
}
body.menu-open .drawer{clip-path:inset(0 0 0 0)}
.drawer a.drawer__link{
  font-family:var(--font-display);font-size:clamp(1.4rem,6vw,2.1rem);font-weight:600;
  padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
body.menu-open .drawer a.drawer__link{opacity:1;transform:none}
.drawer a.drawer__link:hover{color:var(--orange)}
.drawer a.drawer__link i{font-style:normal;font-size:12px;color:var(--orange);font-family:var(--font-body)}
.drawer__foot{margin-top:28px;display:grid;gap:6px;font-size:14px;color:var(--muted)}

/* ---------- 8. Hero slider ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-swiper{height:100svh;min-height:600px}
.hero-swiper .swiper-slide{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--ink)}

.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,18,.5) 0%,rgba(16,16,18,.22) 45%,rgba(16,16,18,.58) 100%)}

.hero__inner{
  position:relative;z-index:2;width:var(--shell);margin-inline:auto;
  padding-top:90px;padding-bottom:clamp(130px,17vh,180px);
  text-align:center;display:grid;justify-items:center;
}
.hero h1{font-size:clamp(1.8rem,4vw,3.15rem);max-width:21ch;font-weight:700;text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero__sub{margin-top:20px;max-width:52ch;color:rgba(255,255,255,.85);font-size:16.5px;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hero__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Per-slide choreography */
.reveal-line{display:block;overflow:hidden}
.hero-swiper .reveal-line > span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero-swiper .swiper-slide-active .reveal-line > span{transform:translateY(0);transition-delay:.25s}
.hero-swiper .hero__sub,.hero-swiper .hero__actions{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero-swiper .swiper-slide-active .hero__sub{opacity:1;transform:none;transition-delay:.45s}
.hero-swiper .swiper-slide-active .hero__actions{opacity:1;transform:none;transition-delay:.58s}

/* Ken Burns */
.hero-swiper .hero__media img{transform:scale(1.1);transition:transform 6.5s var(--ease-2)}
.hero-swiper .swiper-slide-active .hero__media img{transform:scale(1.01)}

/* Edge arrows */
.hero-swiper__ui{position:absolute;inset:0;z-index:20;color:#fff;pointer-events:none}
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:46px;height:46px;border-radius:var(--r);border:1px solid rgba(255,255,255,.35);
  background:rgba(16,16,18,.18);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#fff;
  transition:background .3s,border-color .3s,transform .35s var(--ease);
}
.hero-nav--prev{left:clamp(14px,2.4vw,40px)}
.hero-nav--next{right:clamp(14px,2.4vw,40px)}
.hero-nav:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-50%) scale(1.07)}
.hero-nav svg{width:16px;height:16px}
@media (max-width:720px){.hero-nav{width:38px;height:38px}}

/* Stats band */
.hero__statsbar{
  position:absolute;left:0;right:0;bottom:0;z-index:15;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(16,16,18,.36);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero__statsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 0;text-align:center}
.hero__statsgrid div b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.75rem);color:#fff;line-height:1.15;
}
.hero__statsgrid div span{font-size:12px;color:rgba(255,255,255,.66);letter-spacing:.04em}
@media (max-width:720px){
  .hero__statsgrid{gap:8px;padding:13px 0}
  .hero__statsgrid div b{font-size:1rem}
  .hero__statsgrid div span{font-size:9.5px}
}

.hero__scroll{position:absolute;right:var(--gutter);bottom:128px;z-index:3;display:grid;justify-items:center;gap:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero__scroll i{display:block;width:1px;height:46px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--orange);animation:scrollLine 2.1s var(--ease-2) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:900px){.hero__scroll{display:none}}

/* ---------- 9. Ticker ---------- */
.ticker{background:var(--white);border-bottom:1px solid var(--line);color:var(--ink-2);padding:16px 0;overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-flex;animation:marquee 38s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:0 24px;display:inline-flex;align-items:center;gap:24px}
.ticker span::after{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--orange)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 10. Scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="zoom"]{transform:scale(.95)}

/* ---------- 11. About ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:center}
@media (max-width:980px){.about{grid-template-columns:1fr}}
.about__body p + p{margin-top:16px}
.about__body p{color:var(--muted);max-width:56ch}
.about__list{margin-top:28px;display:grid;gap:12px}
.about__list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500}
.about__list svg{flex:none;width:19px;height:19px;color:var(--orange);margin-top:3px}
.about__cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.about__media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about__media figure{overflow:hidden;border-radius:var(--r);position:relative;border:1px solid var(--line)}
.about__media figure:first-child{grid-row:span 2}
.about__media figure:nth-child(2){aspect-ratio:4/3.1}
.about__media figure:nth-child(3){aspect-ratio:4/3.1}
.about__media figure:nth-child(4){grid-column:span 2;aspect-ratio:16/6}
.about__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.about__media figure:hover img{transform:scale(1.06)}
.about__badge{
  position:absolute;left:14px;bottom:14px;z-index:3;background:var(--orange);color:#fff;
  border-radius:var(--r);padding:14px 18px;display:grid;gap:1px;
}
.about__badge b{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1}
.about__badge span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
@media (max-width:560px){.about__media figure:nth-child(4){aspect-ratio:16/9}}

/* ---------- 12. Spaces ---------- */
.spaces{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:980px){.spaces{grid-template-columns:1fr}}
.spaces__stage{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.35;background:var(--surface-2);order:2;border:1px solid var(--line)}
@media (max-width:980px){.spaces__stage{order:0;aspect-ratio:16/11}}
.spaces__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.3s var(--ease)}
.spaces__stage img.is-active{opacity:1;transform:scale(1)}
.spaces__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,16,18,.55));pointer-events:none}
.spaces__tag{position:absolute;z-index:2;left:20px;bottom:18px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

.space{border-top:1px solid var(--line);padding:20px 0;cursor:pointer;transition:padding-left .45s var(--ease)}
.space:last-child{border-bottom:1px solid var(--line)}
.space__top{display:flex;align-items:center;gap:16px;width:100%}
.space__num{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.08em;transition:color .35s}
.space__title{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:600;flex:1;text-align:left;transition:color .35s}
.space__icon{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:background .35s,border-color .35s,color .35s,transform .45s var(--ease)}
.space__icon svg{width:14px;height:14px}
.space__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.space__body > div{overflow:hidden}
.space__body p{padding-top:10px;color:var(--muted);max-width:52ch;font-size:15px}
.space.is-open{padding-left:12px}
.space.is-open .space__title,.space.is-open .space__num{color:var(--orange)}
.space.is-open .space__icon{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}
.space.is-open .space__body{grid-template-rows:1fr}

/* ---------- 13. Products bento ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.pcard--feature{grid-column:span 2;grid-row:span 2}
.pcard--wide{grid-column:span 2}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:205px}}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr;grid-auto-rows:225px}
  .pcard--feature,.pcard--wide{grid-column:auto;grid-row:auto}
}
.pcard{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(27,27,31,.4)}
.pcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover > img{transform:scale(1.06)}
.pcard__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,18,.02) 35%,rgba(16,16,18,.84) 100%)}
.pcard__num{
  position:absolute;top:13px;left:13px;z-index:2;
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#fff;background:rgba(16,16,18,.45);backdrop-filter:blur(6px);
  padding:5px 9px;border-radius:4px;transition:background .35s;
}
.pcard:hover .pcard__num{background:var(--orange)}
.pcard__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;color:#fff;display:grid;gap:3px}
.pcard--feature .pcard__body{padding:24px}
.pcard__body h3{font-size:1rem;font-weight:600}
.pcard--feature .pcard__body h3{font-size:1.3rem}
.pcard__body p{
  font-size:13.5px;color:rgba(255,255,255,.8);max-width:44ch;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .45s var(--ease),margin .5s var(--ease);
}
.pcard:hover .pcard__body p{max-height:70px;opacity:1;margin-top:4px}
.pcard--feature .pcard__body p{max-height:none;opacity:1;margin-top:4px}
.pcard__go{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#FF8A4C;
  max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
  transition:max-height .45s var(--ease),opacity .4s var(--ease),transform .45s var(--ease),margin .45s var(--ease);
}
.pcard__go svg{width:13px;height:13px}
.pcard:hover .pcard__go{max-height:26px;opacity:1;transform:none;margin-top:7px}

/* ---------- 15. Projects ---------- */
/* Filter tabs: always one row; scrolls horizontally if space runs out */
.filters{
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.filters::-webkit-scrollbar{display:none}
@media (min-width:901px){.filters{justify-content:flex-end}}
.filter{
  flex:none;white-space:nowrap;
  padding:9px 18px;border-radius:var(--r);font-family:var(--font-display);font-size:12.5px;font-weight:600;
  border:1px solid var(--line-strong);color:var(--muted);background:var(--white);
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease);
}
.filter:hover{color:var(--ink);transform:translateY(-2px)}
.filter.is-active{background:var(--orange);color:#fff;border-color:var(--orange)}

.grid-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media (max-width:980px){.grid-projects{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-projects{grid-template-columns:1fr}}
.project{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface-2);
  aspect-ratio:4/3.2;cursor:pointer;border:1px solid var(--line);
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.project:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.project.is-hidden{display:none}
.project img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(16,16,18,.85));opacity:.75;transition:opacity .45s}
.project:hover img{transform:scale(1.07)}
.project:hover::after{opacity:.95}
.project__info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;color:#fff;display:grid;gap:5px}
.project__cat{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#FF8A4C;font-weight:600;font-family:var(--font-display)}
.project__info h3{font-size:1.05rem;font-weight:600}
.project__meta{font-size:12.5px;color:rgba(255,255,255,.7);display:flex;gap:8px;align-items:center;opacity:0;max-height:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease)}
.project:hover .project__meta{opacity:1;max-height:40px;transform:none}
.project__plus{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:var(--r);background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.75);transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s}
.project:hover .project__plus{opacity:1;transform:none}
.project__plus:hover{background:var(--orange)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:clamp(16px,4vw,52px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__bg{position:absolute;inset:0;background:rgba(16,16,18,.9);backdrop-filter:blur(6px)}
.lightbox__panel{position:relative;z-index:2;width:min(1000px,100%);background:var(--white);color:var(--ink);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.35fr .65fr;transform:scale(.96) translateY(16px);transition:transform .55s var(--ease);max-height:86vh}
.lightbox.is-open .lightbox__panel{transform:none}
@media (max-width:860px){.lightbox__panel{grid-template-columns:1fr;overflow-y:auto;max-height:88vh}}
.lightbox__panel > img{width:100%;height:100%;object-fit:cover;min-height:0}
@media (max-width:860px){.lightbox__panel > img{max-height:44vh}}
.lightbox__meta{padding:clamp(22px,3vw,34px);display:grid;align-content:center;gap:12px}
.lightbox__meta h3{font-size:1.4rem}
.lightbox__meta p{color:var(--muted);font-size:14.5px}
.lightbox__meta dl{display:grid;gap:9px;margin-top:4px;font-size:13.5px}
.lightbox__meta dl div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.lightbox__meta dt{color:var(--faint)}
.lightbox__meta dd{font-weight:600}
.lightbox__close{position:absolute;top:12px;right:12px;z-index:4;width:42px;height:42px;border-radius:var(--r);background:rgba(16,16,18,.5);color:#fff;display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.lightbox__close:hover{background:var(--orange);transform:rotate(90deg)}
.lightbox__nav{position:absolute;z-index:4;bottom:12px;right:12px;display:flex;gap:8px}
.lightbox__nav button{width:42px;height:42px;border-radius:var(--r);background:rgba(16,16,18,.5);color:#fff;display:grid;place-items:center;transition:background .3s}
.lightbox__nav button:hover{background:var(--orange)}

/* ---------- 17. Testimonials ---------- */
.tsl{position:relative;overflow:hidden}
.tsl__track{display:flex;transition:transform .8s var(--ease);will-change:transform;cursor:grab}
.tsl__track.is-dragging{cursor:grabbing;transition:none}
.tsl__slide{flex:0 0 88%;padding-right:clamp(14px,2vw,22px)}
@media (min-width:600px){.tsl__slide{flex-basis:55%}}
@media (min-width:900px){.tsl__slide{flex-basis:40%}}
@media (min-width:1200px){.tsl__slide{flex-basis:28.5714%}}
.quote{
  height:100%;background:var(--white);border-radius:var(--r);padding:clamp(24px,3vw,36px);
  display:grid;gap:18px;align-content:start;border:1px solid var(--line);
}
.quote__mark{font-family:var(--font-display);font-size:44px;line-height:.6;color:var(--orange);font-weight:700}
.quote p{font-size:15.5px;color:var(--ink-2);line-height:1.72}
.quote__who{display:flex;align-items:center;gap:13px;margin-top:4px}
.quote__who img{width:48px;height:48px;border-radius:var(--r);object-fit:cover;flex:none}
.quote__who b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:600}
.quote__who span{font-size:13px;color:var(--muted)}
.stars{display:flex;gap:3px;color:var(--orange)}
.stars svg{width:14px;height:14px}
.tsl__ctrl{display:flex;align-items:center;gap:10px;margin-top:30px}
.tsl__ctrl button.tsl__arrow{width:46px;height:46px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.tsl__ctrl button.tsl__arrow:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)}
.tsl__ctrl svg{width:17px;height:17px}
.tsl__dots{display:flex;gap:6px;margin-left:8px}
.tsl__dots button{width:8px;height:8px;border-radius:3px;background:var(--line-strong);transition:width .35s var(--ease),background .35s}
.tsl__dots button.is-active{width:24px;background:var(--orange)}

/* ---------- 18. Clients ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee + .marquee{margin-top:14px}
.marquee__track{display:inline-flex;align-items:center;animation:marquee 42s linear infinite;white-space:nowrap}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:50s}
.marquee:hover .marquee__track{animation-play-state:paused}
.client{
  display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:88px;margin:0 7px;padding:0 24px;
  border-radius:var(--r);background:var(--white);border:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--faint);
  transition:color .35s,border-color .35s,transform .45s var(--ease),box-shadow .45s var(--ease);
}
.client:hover{color:var(--ink);border-color:rgba(27,27,31,.45);transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- 19. Social gallery ---------- */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:980px){.ig{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.ig{grid-template-columns:repeat(2,1fr)}}
.ig a{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;display:block;border:1px solid var(--line)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ig a::after{content:"";position:absolute;inset:0;background:rgba(27,27,31,.8);opacity:0;transition:opacity .4s var(--ease)}
.ig a span{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.75);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ig a span svg{width:22px;height:22px}
.ig a:hover img{transform:scale(1.08)}
.ig a:hover::after{opacity:1}
.ig a:hover span{opacity:1;transform:none}

/* ---------- 20. FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,4vw,60px);align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}
.faq-wrap__intro{position:sticky;top:100px;display:grid;gap:18px}
@media (max-width:900px){.faq-wrap__intro{position:static}}
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:flex-start;gap:16px;text-align:left;padding:22px 0;font-family:var(--font-display);font-size:clamp(.95rem,1.25vw,1.1rem);font-weight:600;transition:color .3s}
.faq__q:hover{color:var(--orange)}
.faq__q i{flex:none;margin-left:auto;width:28px;height:28px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;position:relative;transition:background .35s,border-color .35s,transform .45s var(--ease)}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease),background .35s}
.faq__q i::before{width:10px;height:1.6px}
.faq__q i::after{width:1.6px;height:10px}
.faq__item.is-open .faq__q{color:var(--orange)}
.faq__item.is-open .faq__q i{background:var(--orange);border-color:var(--orange);transform:rotate(180deg)}
.faq__item.is-open .faq__q i::before,.faq__item.is-open .faq__q i::after{background:#fff}
.faq__item.is-open .faq__q i::after{transform:scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding-bottom:24px;color:var(--muted);max-width:70ch;font-size:15px}

/* ---------- 21. CTA / contact ---------- */
.cta{
  position:relative;overflow:hidden;background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(36px,5.5vw,72px);
  display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;
}
@media (max-width:900px){.cta{grid-template-columns:1fr}}
.cta::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(27,27,31,.1),transparent 65%);top:-160px;right:-120px;pointer-events:none}
.cta__lead{color:var(--muted);max-width:46ch;margin-top:14px}
.cta__info{display:grid;gap:12px;position:relative}
.cta__row{
  display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .35s,transform .45s var(--ease);
}
.cta__row:hover{border-color:rgba(27,27,31,.4);transform:translateX(4px)}
.cta__row svg{width:19px;height:19px;color:var(--orange);flex:none;margin-top:3px}
.cta__row b{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;font-weight:600}
.cta__row p,.cta__row a{font-size:14.5px;color:var(--ink);line-height:1.55}
.cta__row a:hover{color:var(--orange)}
.cta .btn--ghost{--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}

.form{display:grid;gap:13px;position:relative}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;padding:15px 17px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line-strong);color:var(--ink);
  font-size:14.5px;transition:border-color .3s,box-shadow .3s;
}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(27,27,31,.14)}
.field select option{background:#fff;color:var(--ink)}
.field.has-error input,.field.has-error textarea{border-color:#E5484D}
.field__err{display:block;font-size:12px;color:#E5484D;margin-top:5px;opacity:0;transition:opacity .3s}
.field.has-error .field__err{opacity:1}
.form__note{font-size:12.5px;color:var(--faint)}
.form__note a{text-decoration:underline;text-underline-offset:2px}
.form__note a:hover{color:var(--orange)}
.form__ok{font-size:14px;color:var(--orange-dark);font-weight:600;display:none}
.form__ok.is-visible{display:block}

/* ---------- 22. Footer ---------- */
.footer{background:#FBF2EA;color:var(--ink);padding-top:clamp(56px,6.5vw,92px);border-top:1px solid rgba(27,27,31,.15)}
.footer__grid{display:grid;grid-template-columns:1.55fr .8fr .8fr 1.15fr;gap:clamp(28px,3vw,48px);padding-bottom:52px}
@media (max-width:980px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;font-weight:700}
.footer ul{display:grid;gap:10px}
.footer li a{color:var(--muted);font-size:14.5px;transition:color .3s,padding-left .3s var(--ease)}
.footer li a:hover{color:var(--orange);padding-left:5px}
.footer address{font-style:normal;color:var(--muted);font-size:14px;display:grid;gap:15px}
.footer address b{display:block;color:var(--ink);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px;font-family:var(--font-display)}
.footer address a{color:var(--muted)}
.footer address a:hover{color:var(--orange)}
.footer__about p{color:var(--muted);font-size:14.5px;max-width:38ch;margin:16px 0 22px}
.footer__badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r);border:1px solid var(--line-strong);color:var(--muted)}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease)}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.footer__bar{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:13px;color:var(--faint)}
.footer__bar a:hover{color:var(--orange)}
.footer__bar nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- 23. Back to top & progress ---------- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:600;width:48px;height:48px;border-radius:var(--r);
  background:var(--white);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .3s,color .3s,border-color .3s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.to-top svg{width:17px;height:17px}
.progress{position:fixed;top:0;left:0;height:2.5px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--orange);z-index:900}

/* ---------- 24. Legal pages ---------- */
.page-hero{background:var(--surface);color:var(--ink);padding:clamp(120px,14vw,170px) 0 clamp(42px,5.5vw,68px);border-bottom:1px solid var(--line)}
.crumbs{display:flex;gap:9px;font-size:13px;color:var(--faint);margin-bottom:16px;flex-wrap:wrap}
.crumbs a:hover{color:var(--orange)}
.legal{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(30px,4vw,60px);align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}}
.legal__toc{position:sticky;top:100px;display:grid;gap:8px;padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.legal__toc b{font-family:var(--font-display);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:5px}
.legal__toc a{font-size:14px;color:var(--muted);transition:color .3s,padding-left .3s var(--ease)}
.legal__toc a:hover{color:var(--orange);padding-left:4px}
@media (max-width:900px){.legal__toc{position:static}}
.legal__body h2{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:40px 0 12px;scroll-margin-top:100px}
.legal__body h2:first-of-type{margin-top:0}
.legal__body h3{font-size:1.05rem;margin:24px 0 9px;font-weight:600}
.legal__body p{color:var(--muted);margin-bottom:13px;max-width:78ch}
.legal__body ul{display:grid;gap:8px;margin:0 0 16px 0}
.legal__body ul li{position:relative;padding-left:22px;color:var(--muted);font-size:15px}
.legal__body ul li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:1.5px;background:var(--orange)}
.legal__body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.legal__meta{font-size:13px;color:var(--faint);padding:14px 18px;border-left:3px solid var(--orange);background:var(--surface);border-radius:0 var(--r) var(--r) 0;margin-bottom:30px}

/* ---------- 25. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .reveal-line > span{transform:none !important}
}

/* ---------- 26. Why Harmano — minimal stat band ---------- */
.section-head--center{text-align:center;justify-items:center}
.whyband{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.whyband__item{
  display:grid;justify-items:center;gap:8px;text-align:center;
  padding:clamp(28px,3.5vw,44px) 18px;
  border-left:1px solid var(--line);
  transition:background .4s;
}
.whyband__item:first-child{border-left:0}
.whyband__item:hover{background:var(--orange-soft)}
.whyband__ico{
  width:44px;height:44px;border-radius:var(--r);
  background:var(--orange-soft);color:var(--orange);
  display:grid;place-items:center;transition:background .35s,color .35s;
}
.whyband__item:hover .whyband__ico{background:var(--orange);color:#fff}
.whyband__ico svg{width:20px;height:20px}
.whyband__item b{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(1.6rem,2.8vw,2.3rem);color:var(--ink);
}
.whyband__item > span:last-child{font-size:13px;color:var(--muted);letter-spacing:.02em}
@media (max-width:820px){
  .whyband{grid-template-columns:1fr 1fr}
  .whyband__item:nth-child(odd){border-left:0}
  .whyband__item:nth-child(n+3){border-top:1px solid var(--line)}
}
.whyband__tags{
  margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  font-size:13.5px;color:var(--muted);
}
.whyband__tags span{display:inline-flex;align-items:center;gap:.6em}
.whyband__tags span::before{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--orange)}

/* ---------- 27. How We Work — jointed stepper ---------- */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px);position:relative}
.stepper::before,.stepper::after{
  content:"";position:absolute;top:26px;left:11%;right:11%;height:2px;z-index:0;
}
.stepper::before{background:var(--line-strong)}
.stepper::after{background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 2s var(--ease) .2s}
.stepper.is-anim::after{transform:scaleX(1)}
.stepper__item{position:relative;z-index:1;text-align:center}
.stepper__node{
  width:52px;height:52px;margin:0 auto 16px;border-radius:var(--r);
  background:var(--white);border:1.5px solid var(--line-strong);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--muted);
  transition:background .35s,border-color .35s,color .35s,transform .4s var(--ease);
}
.stepper__item:hover .stepper__node{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-4px)}
.stepper__item h3{font-size:1.05rem;font-weight:600;margin-bottom:7px}
.stepper__item p{font-size:14px;color:var(--muted);max-width:26ch;margin-inline:auto}
@media (max-width:820px){
  .stepper{grid-template-columns:1fr;gap:26px}
  .stepper::before,.stepper::after{left:25px;right:auto;top:26px;bottom:26px;width:2px;height:auto}
  .stepper::after{transform:scaleY(0);transform-origin:top}
  .stepper.is-anim::after{transform:scaleY(1)}
  .stepper__item{display:grid;grid-template-columns:52px 1fr;column-gap:16px;text-align:left}
  .stepper__node{grid-row:span 2;margin:0}
  .stepper__item p{margin-inline:0;max-width:none}
}

/* ---------- 28. Reviews redesign ---------- */
/* Header rating summary */
.tsl-rating{display:grid;gap:5px;justify-items:start}
@media (min-width:901px){.tsl-rating{justify-items:end;text-align:right}}
.tsl-rating .stars svg{width:17px;height:17px}
.tsl-rating b{font-family:var(--font-display);font-size:1.9rem;font-weight:700;line-height:1;color:var(--ink)}
.tsl-rating b span{font-size:1rem;color:var(--faint);font-weight:600}
.tsl-rating p{font-size:13px;color:var(--muted)}

/* Card: stars on top, footer row with divider + closing quote glyph */
.quote{display:flex;flex-direction:column;gap:14px;padding:24px}
.quote__mark{display:none}
.quote .stars{order:-1}
.quote p{font-size:14.6px;line-height:1.7;flex:1}
.quote__who{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);position:relative;padding-right:44px}
.quote__who::after{
  content:"\201D";position:absolute;right:2px;top:14px;
  font-family:var(--font-display);font-size:46px;line-height:1;color:var(--orange);
}
.quote{transition:border-color .35s,box-shadow .45s var(--ease),transform .45s var(--ease)}
.quote:hover{border-color:rgba(27,27,31,.4);box-shadow:var(--shadow);transform:translateY(-4px)}

/* ---------- 29. CTA redesign — split panel ---------- */
.cta{padding:0;gap:0;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch}
.cta::before{display:none}
.cta > div:first-child{
  background:var(--surface);
  border-right:1px solid var(--line);
  box-shadow:inset 4px 0 0 var(--orange);
  padding:clamp(32px,4.5vw,58px);
  display:flex;flex-direction:column;justify-content:center;
}
.cta__row{background:var(--white);border:1px solid var(--line)}
.cta__row:hover{border-color:rgba(27,27,31,.4);transform:translateX(4px)}
.cta .form{padding:clamp(32px,4.5vw,58px)}
.cta .form__note a:hover{color:var(--orange)}
@media (max-width:900px){
  .cta{grid-template-columns:1fr}
  .cta > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- 30. Card hover effects removed site-wide ---------- */
/* Product cards: static; description + enquire always visible */
.pcard:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pcard:hover > img{transform:scale(1.01)}
.pcard > img{transform:scale(1.01);transition:none}
.pcard__body p{max-height:none;opacity:1;margin-top:4px}
.pcard__go{max-height:26px;opacity:1;transform:none;margin-top:7px}
.pcard:hover .pcard__num{background:rgba(16,16,18,.45)}

/* Project cards: static; meta + open icon always visible */
.project:hover{transform:none;box-shadow:none}
.project:hover img{transform:none}
.project:hover::after{opacity:.78}
.project__meta{opacity:1;max-height:40px;transform:none}
.project__plus{opacity:1;transform:none}

/* Review cards */
.quote:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* Client chips */
.client:hover{transform:none;box-shadow:none;border-color:var(--line);color:var(--faint)}

/* Why Harmano tiles */
.whyband__item:hover{background:var(--white)}
.whyband__item:hover .whyband__ico{background:var(--orange-soft);color:var(--orange)}

/* Contact info rows */
.cta__row:hover{transform:none;border-color:var(--line)}

/* About collage */
.about__media figure:hover img{transform:none}

/* Stepper nodes */
.stepper__item:hover .stepper__node{background:var(--white);border-color:var(--line-strong);color:var(--muted);transform:none}

/* ---------- 31. Stepper: sequential node activation (replays on re-entry) ---------- */
.stepper.is-anim .stepper__item:nth-child(1) .stepper__node{border-color:var(--orange);color:var(--orange);transition-delay:.25s}
.stepper.is-anim .stepper__item:nth-child(2) .stepper__node{border-color:var(--orange);color:var(--orange);transition-delay:.75s}
.stepper.is-anim .stepper__item:nth-child(3) .stepper__node{border-color:var(--orange);color:var(--orange);transition-delay:1.3s}
.stepper.is-anim .stepper__item:nth-child(4) .stepper__node{border-color:var(--orange);color:var(--orange);transition-delay:1.85s}

/* ---------- 32. Stepper: spark + node pop + text cascade ---------- */
/* Traveling spark that rides the line as it draws */
.stepper__spark{
  position:absolute;top:26px;left:11%;z-index:2;pointer-events:none;
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(27,27,31,.22),0 0 16px rgba(27,27,31,.85);
  opacity:0;
}
.stepper.is-anim .stepper__spark{animation:sparkRun 2s var(--ease) .2s both}
@keyframes sparkRun{
  0%{left:11%;opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  100%{left:89%;opacity:0}
}

/* Nodes pop as the spark reaches them, settling outlined-orange */
@keyframes nodePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28);background:var(--orange);border-color:var(--orange);color:#fff}
  70%{transform:scale(.94)}
  100%{transform:scale(1);background:var(--white);border-color:var(--orange);color:var(--orange)}
}
.stepper.is-anim .stepper__item:nth-child(1) .stepper__node{animation:nodePop .65s var(--ease) .25s both}
.stepper.is-anim .stepper__item:nth-child(2) .stepper__node{animation:nodePop .65s var(--ease) .78s both}
.stepper.is-anim .stepper__item:nth-child(3) .stepper__node{animation:nodePop .65s var(--ease) 1.32s both}
.stepper.is-anim .stepper__item:nth-child(4) .stepper__node{animation:nodePop .65s var(--ease) 1.86s both}

/* Titles + copy cascade in just after their node pops */
.stepper__item h3,.stepper__item p{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stepper.is-anim .stepper__item h3,.stepper.is-anim .stepper__item p{opacity:1;transform:none}
.stepper.is-anim .stepper__item:nth-child(1) h3{transition-delay:.45s}
.stepper.is-anim .stepper__item:nth-child(1) p{transition-delay:.58s}
.stepper.is-anim .stepper__item:nth-child(2) h3{transition-delay:.98s}
.stepper.is-anim .stepper__item:nth-child(2) p{transition-delay:1.1s}
.stepper.is-anim .stepper__item:nth-child(3) h3{transition-delay:1.52s}
.stepper.is-anim .stepper__item:nth-child(3) p{transition-delay:1.64s}
.stepper.is-anim .stepper__item:nth-child(4) h3{transition-delay:2.06s}
.stepper.is-anim .stepper__item:nth-child(4) p{transition-delay:2.18s}

/* Vertical variant on mobile */
@media (max-width:820px){
  .stepper__spark{left:25px;margin:-5px 0 0 -5px}
  .stepper.is-anim .stepper__spark{animation:sparkRunV 2s var(--ease) .2s both}
  @keyframes sparkRunV{
    0%{top:26px;opacity:0}
    6%{opacity:1}
    92%{opacity:1}
    100%{top:calc(100% - 26px);opacity:0}
  }
}

/* Accessibility: never hide step text for reduced-motion users */
@media (prefers-reduced-motion:reduce){
  .stepper__item h3,.stepper__item p{opacity:1 !important;transform:none !important}
  .stepper__spark{display:none}
}

/* ---------- 33. Orange diet — accent only where it earns it ---------- */
/* Orange keeps: primary buttons, logo mark, hero highlight word, stars, active filter */

/* Headings: highlighted words back to ink */
.t-orange{color:var(--ink)}
.hero h1 em{color:var(--orange)} /* the one heading accent that stays */

/* Labels & markers */
.eyebrow::before{background:var(--ink)}
.ticker span::after{background:var(--faint)}
.whyband__tags span::before{background:var(--faint)}
::selection{background:var(--ink);color:#fff}
.progress{background:var(--ink)}
.preloader__bar i{background:var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* Why Harmano band */
.whyband__item b{color:var(--ink)}
.whyband__ico{background:var(--surface-2);color:var(--ink-2)}
.whyband__item:hover .whyband__ico{background:var(--surface-2);color:var(--ink-2)}

/* Stepper: ink line + nodes, spark stays the single moving accent */
.stepper::after{background:var(--ink)}
@keyframes nodePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28);background:var(--ink);border-color:var(--ink);color:#fff}
  70%{transform:scale(.94)}
  100%{transform:scale(1);background:var(--white);border-color:var(--ink);color:var(--ink)}
}

/* Cards & overlays */
.quote__who::after{color:var(--line-strong)}
.pcard__go{color:rgba(255,255,255,.85)}
.pcard:hover .pcard__num{background:rgba(16,16,18,.45)}
.project__cat{color:rgba(255,255,255,.75)}
.about__badge{background:var(--ink)}

/* Interactive states: ink instead of orange */
.nav a::after{background:#fff}
.header.is-scrolled .nav a::after{background:var(--ink)}
.filter.is-active{background:var(--ink);border-color:var(--ink)}
.tsl__dots button.is-active{background:var(--ink)}
.tsl__ctrl button.tsl__arrow:hover{background:var(--ink);border-color:var(--ink)}
.hero-nav:hover{background:#fff;border-color:#fff;color:var(--ink)}
.to-top:hover{background:var(--ink);border-color:var(--ink)}
.socials a:hover{background:var(--ink);border-color:var(--ink)}
.faq__q:hover{color:var(--ink)}
.faq__item.is-open .faq__q{color:var(--ink)}
.faq__item.is-open .faq__q i{background:var(--ink);border-color:var(--ink)}
.space.is-open .space__title,.space.is-open .space__num{color:var(--ink)}
.space.is-open .space__icon{background:var(--ink);border-color:var(--ink)}
.spaces__tag{color:#fff}
.footer li a:hover,.footer address a:hover,.footer__bar a:hover{color:var(--ink)}
.crumbs a:hover,.legal__toc a:hover{color:var(--ink)}
.legal__toc b{color:var(--ink)}
.legal__body ul li::before{background:var(--ink)}
.legal__meta{border-left-color:var(--ink)}
.link-u:hover{color:var(--ink)}
.form__note a:hover{color:var(--ink)}
.cta__row a:hover{color:var(--ink-2)}
.cta__row svg{color:var(--ink-2)}
.cta > div:first-child{box-shadow:inset 4px 0 0 var(--ink)}
.ig a::after{background:rgba(27,27,31,.78)}
.footer{border-top:1px solid var(--line)}

/* Forms: neutral focus */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,27,31,.08)}
.form__ok{color:var(--ink)}
:focus-visible{outline-color:var(--ink)}

/* Hero details */
.hero__scroll i::after{background:#fff}

/* ---------- 34. Second accent: amber gold (contrast to emerald) ---------- */
:root{
  --accent2:#1D3557;
  --accent2-dark:#142740;
  --accent2-soft:#E9EEF5;
}

/* Ratings & review details — gold reads naturally for stars */
.stars{color:var(--accent2)}
.quote__who::after{color:var(--accent2)}

/* Hero: gold highlight word against emerald buttons */
.hero h1 em{color:var(--accent2)}

/* Section label markers */
.eyebrow::before{background:var(--accent2)}
.ticker span::after{background:var(--accent2)}
.whyband__tags span::before{background:var(--accent2)}

/* Stepper: ink line, gold spark */
.stepper__spark{background:var(--accent2);box-shadow:0 0 0 4px rgba(29,53,87,.22),0 0 16px rgba(29,53,87,.85)}

/* Heritage badge on the About collage */
.about__badge{background:var(--accent2);color:var(--ink)}

/* Why band counters pick up the gold */
.whyband__item b{color:var(--accent2-dark)}


/* ---------- 35. About — stats + feature cards layout ---------- */
.about{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.about__socials{display:flex;gap:10px;margin-top:22px}
.about__socials a{
  width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink);
  transition:background .3s,color .3s,border-color .3s;
}
.about__socials a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.about__socials svg{width:16px;height:16px}

.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,4.5vw,52px);text-align:center}
.about__stat-ico{
  width:52px;height:52px;margin:0 auto 12px;border-radius:var(--r);
  background:var(--ink);color:#fff;display:grid;place-items:center;
}
.about__stat-ico svg{width:22px;height:22px}
.about__stats b{display:block;font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;line-height:1.1;color:var(--ink)}
.about__stats div > span:last-child{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.45}

.about__cards{display:grid;gap:14px}
.about__card{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
}
.about__card-ico{
  flex:none;width:54px;height:54px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;
}
.about__card-ico svg{width:24px;height:24px}
.about__card h3{font-size:1.02rem;font-weight:600;margin-bottom:5px}
.about__card p{font-size:13.8px;color:var(--muted);line-height:1.6}
@media (max-width:560px){
  .about__stats{gap:8px}
  .about__stats div > span:last-child{font-size:11px}
  .about__card{padding:16px}
}

/* ---------- 36. Gallery — fanned coverflow ---------- */
.gallery{background:#1B1B1F;color:#fff;overflow:hidden}
.gallery .eyebrow{color:rgba(255,255,255,.65)}
.gallery .eyebrow::before{background:var(--accent2)}
.gallery .t-orange{color:var(--accent2)}
.gallery .section-head{margin-bottom:clamp(28px,4vw,48px)}

.gallery-swiper{position:relative;padding:10px 0 26px}
.gallery-swiper .swiper-wrapper{align-items:center}
.gslide{
  width:min(280px,62vw);aspect-ratio:3/4.35;
  border-radius:var(--r);overflow:hidden;position:relative;
  background:#141416;
}
.gslide img{width:100%;height:100%;object-fit:cover}
.gslide::after{content:"";position:absolute;inset:0;background:rgba(16,16,18,.5);transition:background .5s var(--ease)}
.gallery-swiper .swiper-slide-active.gslide::after{background:rgba(16,16,18,0)}
.gslide__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  text-align:center;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) .15s,transform .5s var(--ease) .15s;
}
.gallery-swiper .swiper-slide-active .gslide__cap{opacity:1;transform:none}
.gslide__cap h3{
  font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.3rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.gslide__cap span{display:block;margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.75)}

.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:44px;height:44px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.3);background:rgba(16,16,18,.35);
  backdrop-filter:blur(4px);color:#fff;display:grid;place-items:center;
  transition:background .3s,border-color .3s;
}
.gallery-nav--prev{left:clamp(12px,4vw,60px)}
.gallery-nav--next{right:clamp(12px,4vw,60px)}
.gallery-nav:hover{background:#fff;border-color:#fff;color:var(--ink)}
.gallery-nav svg{width:16px;height:16px}
@media (max-width:720px){.gallery-nav{width:38px;height:38px}}

/* ---------- 37. Gallery image modal ---------- */
.gslide{cursor:pointer}
.gmodal{
  position:fixed;inset:0;z-index:980;display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.gmodal.is-open{opacity:1;visibility:visible}
.gmodal__bg{position:absolute;inset:0;background:rgba(16,16,18,.92);backdrop-filter:blur(6px)}
.gmodal__fig{
  position:relative;z-index:2;margin:0;max-width:min(880px,92vw);
  transform:scale(.95) translateY(14px);transition:transform .5s var(--ease);
}
.gmodal.is-open .gmodal__fig{transform:none}
.gmodal__fig img{
  max-height:74vh;width:auto;max-width:100%;margin-inline:auto;
  border-radius:var(--r);display:block;
}
.gmodal__fig figcaption{text-align:center;margin-top:16px;color:#fff}
.gmodal__fig h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.gmodal__fig figcaption span{display:block;margin-top:4px;font-size:13px;color:rgba(255,255,255,.65)}
.gmodal__close{
  position:absolute;top:16px;right:16px;z-index:4;
  width:44px;height:44px;border-radius:var(--r);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;
  transition:background .3s,transform .4s var(--ease);
}
.gmodal__close:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
.gmodal__close svg{width:17px;height:17px}
.gmodal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:var(--r);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;transition:background .3s,color .3s;
}
.gmodal__nav--prev{left:clamp(10px,3vw,40px)}
.gmodal__nav--next{right:clamp(10px,3vw,40px)}
.gmodal__nav:hover{background:#fff;color:var(--ink)}
.gmodal__nav svg{width:17px;height:17px}
@media (max-width:720px){
  .gmodal__nav{width:40px;height:40px;top:auto;bottom:18px;transform:none}
  .gmodal__nav--prev{left:18px}
  .gmodal__nav--next{right:18px}
}

/* ---------- 38. Footer — ink theme ---------- */
.footer{background:#1B1B1F;color:#fff;border-top:0}
.footer .logo{color:#fff}
.footer h4{color:rgba(255,255,255,.9)}
.footer__about p{color:rgba(255,255,255,.6)}
.footer li a{color:rgba(255,255,255,.62)}
.footer li a:hover{color:#fff}
.footer address{color:rgba(255,255,255,.62)}
.footer address b{color:rgba(255,255,255,.9)}
.footer address a{color:rgba(255,255,255,.62)}
.footer address a:hover{color:#fff}
.badge{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6)}
.socials a{border-color:rgba(255,255,255,.22);color:#fff}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45)}
.footer__bar a:hover{color:#fff}

/* ---------- 39. CTA — emerald action panel ---------- */
.cta{
  background:linear-gradient(150deg,#5E1A27 0%,#8E2A3C 100%);
  border:0;color:#fff;
  padding:clamp(30px,4.5vw,60px);gap:clamp(28px,4.5vw,56px);
}
.cta::before{
  content:"";display:block;position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.28),transparent 65%);
  top:-150px;right:-110px;pointer-events:none;
}
.cta > div:first-child{background:transparent;border:0;box-shadow:none;padding:0}
.cta .eyebrow{color:rgba(255,255,255,.75)}
.cta .eyebrow::before{background:var(--accent2)}
.cta h2{color:#fff}
.cta .t-orange{color:var(--accent2)}
.cta__lead{color:rgba(255,255,255,.82)}
.cta__row{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.cta__row:hover{border-color:rgba(255,255,255,.4);transform:none}
.cta__row svg{color:var(--accent2)}
.cta__row b{color:rgba(255,255,255,.6)}
.cta__row p,.cta__row a{color:#fff}
.cta__row a:hover{color:var(--accent2)}
.cta .form{background:#fff;padding:clamp(22px,3vw,36px);border-radius:var(--r)}
.cta .form__note{color:var(--faint)}
.cta .form__note a:hover{color:var(--orange)}
@media (max-width:900px){
  .cta > div:first-child{border:0}
}

/* ---------- 40. About photo (replaces counters + socials) ---------- */
.about__photo{
  position:relative;margin:clamp(26px,3.5vw,40px) 0 0;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/8.5;
}
.about__photo img{width:100%;height:100%;object-fit:cover}

/* ---------- 41. Ink & Gold system ---------- */
/* Logo mark: gold tile (works on white header and ink footer alike) */
.logo__mark{background:var(--accent2);color:var(--ink)}

/* CTA: calm light panel — ink form button carries the action */
.cta{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.cta::before{background:radial-gradient(circle,rgba(255,107,53,.16),transparent 65%)}
.cta .eyebrow{color:var(--muted)}
.cta .eyebrow::before{background:var(--accent2)}
.cta h2{color:var(--ink)}
.cta .t-orange{color:var(--accent2-dark)}
.cta__lead{color:var(--muted)}
.cta__row{background:var(--white);border:1px solid var(--line)}
.cta__row svg{color:var(--accent2-dark)}
.cta__row b{color:var(--faint)}
.cta__row p,.cta__row a{color:var(--ink)}
.cta__row a:hover{color:var(--accent2-dark)}
.cta .form{background:var(--white);border:1px solid var(--line)}

/* Buttons: gold sweep detail on ink fill */
.btn::before{background:linear-gradient(100deg,transparent,rgba(255,107,53,.35),transparent)}

/* ---------- 42. Brand orange restored ---------- */
.logo__mark{background:var(--orange);color:#fff}
.btn:hover{box-shadow:0 14px 30px rgba(255,107,53,.35)}
.btn::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,53,.15)}
.filter.is-active{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- 43. Petrol contrast tuning ---------- */
/* Stars read best warm — hand them to the primary */
.stars{color:var(--orange)}
.quote__who::after{color:var(--orange)}
/* Hero highlight needs a lighter petrol to pop on dark photos */
.hero h1 em{color:#FFA97F}
/* Craft badge: petrol block, white text */
.about__badge{background:var(--accent2);color:#fff}

/* ---------- 44. Pastel blue tuning ---------- */
/* Pastel badge needs dark text for legibility */
.about__badge{background:var(--accent2);color:var(--ink)}
/* Counters keep the deeper pastel tone so numbers stay readable */
.whyband__item b{color:var(--accent2-dark)}

/* ---------- 45. Energy pass — coral gets real moments ---------- */
.ticker{background:var(--orange);border:0;color:#fff;padding:15px 0}
.ticker span{color:#fff}
.ticker span::after{background:rgba(255,255,255,.85)}
.progress{background:var(--orange)}
::selection{background:var(--orange);color:#fff}
.section-head .h-lg .t-orange,.t-orange{color:var(--orange)}

/* ---------- 46. Navy contrast tuning ---------- */
.about__badge{background:var(--accent2);color:#fff}

/* ---------- 47. Navy across all sections ---------- */
/* Hero: navy glass stats band + navy arrow hover */
.hero__statsbar{background:rgba(29,53,87,.48)}
.hero-nav:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;transform:translateY(-50%) scale(1.07)}

/* About: navy icon tiles on the feature cards */
.about__card-ico{background:var(--accent2-soft);border-color:transparent;color:var(--accent2)}

/* Spaces: navy active state + navy tag chip on the stage */
.space.is-open .space__title,.space.is-open .space__num{color:var(--accent2)}
.space.is-open .space__icon{background:var(--accent2);border-color:var(--accent2);color:#fff}
.spaces__tag{background:rgba(29,53,87,.85);padding:8px 14px;border-radius:var(--r)}

/* Products: navy number chips */
.pcard__num{background:rgba(29,53,87,.62)}
.pcard:hover .pcard__num{background:var(--accent2)}

/* Why band: navy icon tiles */
.whyband__ico{background:var(--accent2-soft);color:var(--accent2)}
.whyband__item:hover .whyband__ico{background:var(--accent2-soft);color:var(--accent2)}

/* Stepper: navy line draw + navy nodes */
.stepper::after{background:var(--accent2)}
@keyframes nodePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28);background:var(--accent2);border-color:var(--accent2);color:#fff}
  70%{transform:scale(.94)}
  100%{transform:scale(1);background:var(--white);border-color:var(--accent2);color:var(--accent2)}
}

/* Reviews: navy rating figure + navy slider controls */
.tsl-rating b{color:var(--accent2)}
.tsl__ctrl button.tsl__arrow:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.tsl__dots button.is-active{background:var(--accent2)}

/* FAQ: navy open state */
.faq__q:hover{color:var(--accent2)}
.faq__item.is-open .faq__q{color:var(--accent2)}
.faq__item.is-open .faq__q i{background:var(--accent2);border-color:var(--accent2)}

/* Utility surfaces: navy hovers */
.lightbox__close:hover{background:var(--accent2)}
.lightbox__nav button:hover{background:var(--accent2)}
.to-top:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}

/* Footer: coral edge on the charcoal base ties both accents */
.footer{border-top:3px solid var(--orange)}

/* ---------- 48. FAQ two-column + centered section heads ---------- */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,4vw,60px);align-items:start}
@media (max-width:900px){.faq-cols{grid-template-columns:1fr}.faq-cols .faq:last-child{border-top:0}}

/* All section headings centered */
.section-head,.section-head--split{grid-template-columns:1fr;text-align:center;justify-items:center}
.section-head .lead,.section-head--split .lead{margin-inline:auto}
.filters{justify-content:center}
@media (min-width:901px){.filters{justify-content:center}}
.tsl-rating{justify-items:center;text-align:center}
@media (min-width:901px){.tsl-rating{justify-items:center;text-align:center}}

/* ---------- 49. Staggered reveal motion ---------- */
.st{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--std,0s);
}
.st.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .st{opacity:1 !important;transform:none !important}
}

/* ---------- 50. Section rhythm + pastel CTA ---------- */
/* Alternating tinted backgrounds */
.section--blue{background:#E9F0F8}
.section--grey{background:#F2F3F5}

/* CTA: pastel-blue panel, white form card, navy details, coral action */
.cta{background:#DFE9F4;border:1px solid rgba(29,53,87,.16);color:var(--ink)}
.cta::before{background:radial-gradient(circle,rgba(29,53,87,.15),transparent 65%)}
.cta .eyebrow{color:var(--ink-2)}
.cta .eyebrow::before{background:var(--accent2)}
.cta h2{color:var(--ink)}
.cta__lead{color:var(--muted)}
.cta__row{background:rgba(255,255,255,.78);border:1px solid rgba(29,53,87,.15)}
.cta__row:hover{border-color:rgba(29,53,87,.35)}
.cta__row svg{color:var(--accent2)}
.cta__row b{color:var(--faint)}
.cta__row p,.cta__row a{color:var(--ink)}
.cta__row a:hover{color:var(--accent2)}
.cta .form{background:#fff;border:1px solid rgba(29,53,87,.12);box-shadow:0 18px 44px rgba(29,53,87,.10)}

/* ---------- 51. Reviews — featured + compact grid ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.rev{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:14px;
}
.rev p{font-size:14.2px;color:var(--ink-2);line-height:1.68;flex:1}
.rev__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.rev__who b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700}
.rev__who span{font-size:12.5px;color:var(--muted)}
.stars--sm svg{width:11px;height:11px}

.rev--feature{
  grid-row:span 2;background:var(--accent2);border:0;color:#fff;
  padding:clamp(26px,3vw,40px);gap:18px;position:relative;overflow:hidden;
}
.rev--feature::after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.06);bottom:-90px;right:-70px;pointer-events:none;
}
.rev__mark{font-family:var(--font-display);font-size:60px;line-height:.55;color:var(--orange);font-weight:700}
.rev--feature p{font-size:16.5px;line-height:1.78;color:rgba(255,255,255,.94)}
.rev--feature .rev__foot{border-top-color:rgba(255,255,255,.22)}
.rev--feature .rev__who span{color:rgba(255,255,255,.72)}

@media (max-width:980px){
  .rev-grid{grid-template-columns:1fr 1fr}
  .rev--feature{grid-column:span 2;grid-row:auto}
}
@media (max-width:620px){.rev-grid{grid-template-columns:1fr}.rev--feature{grid-column:auto}}

/* ---------- 52. Reviews slider layout ---------- */
.rev-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.rev--feature{grid-row:auto}
.rev-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.rev-swiper{flex:1;width:100%}
.rev-swiper .swiper-slide{height:auto;display:flex}
.rev-swiper .rev{width:100%}
.rev-ctrl{display:flex;gap:8px;justify-content:flex-end}
.rev-arrow{
  width:42px;height:42px;border-radius:var(--r);
  border:1px solid var(--line-strong);color:var(--ink);
  display:grid;place-items:center;
  transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease);
}
.rev-arrow:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;transform:translateY(-2px)}
.rev-arrow svg{width:16px;height:16px}
@media (max-width:980px){
  .rev-grid{grid-template-columns:1fr}
  .rev--feature{grid-column:auto}
}

/* ---------- 53. Unified review slider — active slide wears the navy ---------- */
.rev-wrap{display:grid;gap:14px}
.rev-swiper{width:100%}
.rev-swiper .swiper-slide{height:auto;display:flex}
.rev-swiper .rev{width:100%;transition:background .55s var(--ease),border-color .55s,color .55s}
.rev__mark{display:none;font-family:var(--font-display);font-size:52px;line-height:.55;color:var(--orange);font-weight:700}
.rev p{transition:color .55s}

.rev-swiper .swiper-slide-active .rev{background:var(--accent2);border-color:var(--accent2);color:#fff}
.rev-swiper .swiper-slide-active .rev .rev__mark{display:block}
.rev-swiper .swiper-slide-active .rev p{color:rgba(255,255,255,.94)}
.rev-swiper .swiper-slide-active .rev .rev__foot{border-top-color:rgba(255,255,255,.22)}
.rev-swiper .swiper-slide-active .rev .rev__who span{color:rgba(255,255,255,.72)}

/* ---------- 54. Review cards: shadows + centered navy ---------- */
.rev{box-shadow:0 10px 28px rgba(29,53,87,.08)}
.rev-swiper{padding:10px 4px 22px}
.rev-swiper .swiper-slide-active .rev{box-shadow:0 20px 44px rgba(29,53,87,.24)}
.rev-ctrl{justify-content:center}

/* ---------- 55. Testimonials: full-width bleed + unclipped shadows ---------- */
/* Break the slider out of the content shell to span the whole viewport */
.rev-wrap{width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - (100vw - var(--sbw,0px))/2)}
/* Vertical breathing room inside the swiper so card shadows never clip */
.rev-swiper{padding:28px 0 44px}
.rev-swiper .swiper-slide{padding:0 2px}
/* Softer, cleaner shadow set */
.rev{box-shadow:0 4px 14px rgba(29,53,87,.06),0 1px 4px rgba(29,53,87,.05)}
.rev-swiper .swiper-slide-active .rev{box-shadow:0 14px 30px rgba(29,53,87,.2)}
.rev-ctrl{justify-content:center;margin-top:2px}

/* ---------- 56. Product cards: stronger text legibility ---------- */
.pcard__veil{
  background:linear-gradient(180deg,rgba(12,14,20,.12) 0%,rgba(12,14,20,.3) 45%,rgba(12,14,20,.94) 100%);
}
.pcard__body h3{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.pcard__body p{color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pcard__go{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* ---------- 57. Logo images (light over hero, navy on light glass) ---------- */
.logo-img{height:42px;width:auto;display:block}
.logo-img--dark{display:none}
.header.is-scrolled .logo-img--light,
body.menu-open .header .logo-img--light{display:none}
.header.is-scrolled .logo-img--dark,
body.menu-open .header .logo-img--dark{display:block}
.footer .logo-img{height:46px}
@media (max-width:560px){.logo-img{height:32px}}

/* ---------- 58. About — head split + photo/dark card trio ---------- */
.abx-head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,64px);align-items:start;
  margin-bottom:clamp(34px,4.5vw,56px);
}
.abx-head .lead{margin-top:8px}
@media (max-width:900px){.abx-head{grid-template-columns:1fr}}

.abx-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:1080px){.abx-grid{grid-template-columns:1fr 1fr}.abx-card--photo{grid-column:span 2}}
@media (max-width:640px){.abx-grid{grid-template-columns:1fr}.abx-card--photo{grid-column:auto}}

.abx-card{
  border-radius:var(--r);padding:clamp(22px,2.5vw,30px);
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:320px;
}
.abx-card h3{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:700;max-width:16ch}
.abx-card p{font-size:14.5px;line-height:1.65;max-width:34ch}

.abx-card--photo{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
.abx-card--photo p{color:var(--muted);position:relative;z-index:2;max-width:30ch}
.abx-card--photo h3{position:relative;z-index:2}
.abx-card--photo img{
  position:absolute;right:-3%;bottom:-8%;width:54%;
  border-radius:var(--r);box-shadow:0 16px 40px rgba(27,27,31,.18);
  transform:rotate(-2deg);
}
@media (max-width:640px){.abx-card--photo img{position:static;width:100%;transform:none;margin-top:6px}}

.abx-card--dark{background:var(--accent2);color:#fff}
.abx-card--dark p{color:rgba(255,255,255,.78)}

/* ---------- 59. Product cards: maximum text legibility ---------- */
.pcard__veil{
  background:linear-gradient(180deg,
    rgba(10,12,18,.18) 0%,
    rgba(10,12,18,.42) 40%,
    rgba(10,12,18,.8) 68%,
    rgba(10,12,18,.97) 100%);
}
.pcard__body{padding-top:40px}
.pcard__body h3{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.pcard__body p{color:rgba(255,255,255,.96);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.pcard__go{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ---------- 60. About photo card: clean split (text | full-bleed image) ---------- */
.abx-card--photo{
  padding:0;display:grid;
  grid-template-columns:1.05fr .95fr;grid-template-rows:auto 1fr;
}
.abx-card--photo h3{
  grid-area:1/1;
  padding:clamp(22px,2.5vw,30px) clamp(22px,2.5vw,30px) 0;
}
.abx-card--photo p{
  grid-area:2/1;align-self:end;
  padding:18px clamp(22px,2.5vw,30px) clamp(22px,2.5vw,30px);
  max-width:none;
}
.abx-card--photo img{
  grid-area:1/2/3/3;
  position:static;width:100%;height:100%;object-fit:cover;
  transform:none;border-radius:0;box-shadow:none;
}
@media (max-width:640px){
  .abx-card--photo{grid-template-columns:1fr;grid-template-rows:auto auto 220px}
  .abx-card--photo img{grid-area:3/1;height:100%}
}

/* ---------- 61. About cards: compact content, equal heights ---------- */
/* Content flows from the top with a small gap — no stretched void between title and text */
.abx-card{min-height:0;justify-content:flex-start;gap:12px}
.abx-card--dark p{margin:0}
/* Photo card: text stacked tight at top-left, image fills the right column fully */
.abx-card--photo{grid-template-rows:auto 1fr;min-height:280px}
.abx-card--photo p{align-self:start;padding-top:10px}

/* ---------- 62. About photo card: image covers the whole card ---------- */
.abx-card--photo{
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:clamp(22px,2.5vw,30px);position:relative;overflow:hidden;min-height:320px;
}
.abx-card--photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.abx-card--photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,18,.06) 30%,rgba(10,12,18,.55) 68%,rgba(10,12,18,.92) 100%);
}
.abx-card--photo h3{
  position:relative;z-index:2;padding:0;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.abx-card--photo p{
  position:relative;z-index:2;padding:0;align-self:auto;max-width:40ch;
  color:rgba(255,255,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.5);
}
@media (max-width:640px){.abx-card--photo{grid-template-rows:none;min-height:260px}}

/* ---------- 63. About cards: icons, tag chip, decorative depth ---------- */
.abx-ico{
  width:46px;height:46px;border-radius:var(--r);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#fff;margin-bottom:4px;
}
.abx-ico svg{width:22px;height:22px}

.abx-card--dark{position:relative;overflow:hidden}
.abx-card--dark::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.09);right:-56px;bottom:-56px;pointer-events:none;
}
.abx-card--dark::before{
  content:"";position:absolute;width:110px;height:110px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.06);right:16px;bottom:-34px;pointer-events:none;
}
.abx-card--dark h3,.abx-card--dark p{position:relative;z-index:1}

.abx-tag{
  position:relative;z-index:2;align-self:flex-start;margin-bottom:auto;
  font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);padding:7px 12px;border-radius:4px;
}

/* ---------- 64. About head: balanced two-column alignment ---------- */
.abx-head{align-items:center}
.abx-head .lead{
  margin:0;
  padding-left:clamp(18px,2.2vw,30px);
  border-left:2px solid var(--orange);
}
@media (max-width:900px){
  .abx-head .lead{border-left:0;padding-left:0;margin-top:4px}
}

/* ---------- 65. Topbar strip above header ---------- */
.topbar{
  background:var(--accent2);color:#fff;
  max-height:44px;overflow:hidden;
  transition:max-height .45s var(--ease);
}
.header.is-compact .topbar,
body.menu-open .header .topbar{max-height:0}
.topbar__inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:8px 0;font-size:12.5px;
}
.topbar__group{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.topbar__group a,.topbar__group span{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.85);white-space:nowrap;
}
.topbar__group a:hover{color:#fff}
.topbar__group svg{width:13px;height:13px;flex:none;color:var(--orange)}
@media (max-width:860px){.topbar__group--right{display:none}}
@media (max-width:480px){.topbar__group a:last-child{display:none}}

/* ---------- 66. Hero banner slide ---------- */
.hero__banner-link{position:absolute;inset:0;z-index:5}
@media (min-width:721px){
  .hero-slide--banner .hero__inner{display:none}
  .hero-slide--banner .hero__media::after{display:none}
  .hero-slide--banner .hero__img--mob{display:none}
  .hero-slide--banner .hero__img--banner{object-position:left center}
}
@media (max-width:720px){
  .hero-slide--banner .hero__img--banner{display:none}
  .hero-slide--banner .hero__banner-link{display:none}
}

/* ---------- 67. Banner slide: contain (no cropping) ---------- */
@media (min-width:721px){
  .hero-slide--banner{background:#EEEBE5}
  .hero-slide--banner .hero__img--banner{
    object-fit:contain;object-position:center;
    transform:none !important;
  }
}

/* ---------- 68. Banner slide spacing: frame between header and stats band ---------- */
@media (min-width:721px){
  .hero-slide--banner{background:var(--ink)}
  .hero-slide--banner .hero__media{
    top:140px;bottom:104px;left:clamp(16px,3vw,48px);right:clamp(16px,3vw,48px);
    height:auto;width:auto;
  }
  .hero-slide--banner .hero__img--banner{border-radius:var(--r)}
  .hero-slide--banner .hero__banner-link{top:140px;bottom:104px}
}

/* ---------- 69. Mobile banner: framed card treatment ---------- */
@media (max-width:720px){
  .hero-slide--banner{background:var(--ink)}
  .hero-slide--banner .hero__inner{display:none}
  .hero-slide--banner .hero__media::after{display:none}
  .hero-slide--banner .hero__media{
    top:112px;bottom:112px;left:14px;right:14px;
    height:auto;width:auto;
  }
  .hero-slide--banner .hero__img--mob{
    object-fit:contain;object-position:center;
    border-radius:var(--r);transform:none !important;
  }
  .hero-slide--banner .hero__banner-link{display:block;top:112px;bottom:112px}
}

/* ---------- 70. Banner slide: light backdrop + header adapts ---------- */
.hero-slide--banner{background:#EEEBE5 !important}
/* Header switches to dark text while the light banner slide is active */
body.hero-on-light .header:not(.is-scrolled) .nav a{color:var(--ink-2)}
body.hero-on-light .header:not(.is-scrolled) .nav a:hover,
body.hero-on-light .header:not(.is-scrolled) .nav a.is-current{color:var(--ink)}
body.hero-on-light .header:not(.is-scrolled) .logo-img--light{display:none}
body.hero-on-light .header:not(.is-scrolled) .logo-img--dark{display:block}
body.hero-on-light .header:not(.is-scrolled) .burger{border-color:var(--line-strong)}
body.hero-on-light .header:not(.is-scrolled) .burger span{background:var(--ink)}
/* Hero furniture recolors on the light slide */
body.hero-on-light .hero__scroll{color:rgba(27,27,31,.55)}
body.hero-on-light .hero__scroll i{background:rgba(27,27,31,.25)}
body.hero-on-light .hero-nav{border-color:rgba(27,27,31,.25);background:rgba(255,255,255,.6);color:var(--ink)}
body.hero-on-light .hero__statsbar{background:rgba(27,27,31,.85)}

/* ---------- 71. Banner slide: full-screen on desktop ---------- */
@media (min-width:721px){
  .hero-slide--banner .hero__media{top:0;bottom:0;left:0;right:0}
  .hero-slide--banner .hero__img--banner{
    object-fit:cover;object-position:left center;border-radius:0;
  }
  .hero-slide--banner .hero__banner-link{top:0;bottom:0}
}

/* ---------- 72. Banner: full width, nothing cropped ---------- */
@media (min-width:721px){
  .hero-slide--banner .hero__img--banner{
    object-fit:contain;object-position:center 62%;
  }
}

/* ---------- 74. Spaces: equal column heights ---------- */
@media (min-width:981px){
  .spaces{align-items:stretch}
  .spaces__stage{aspect-ratio:auto;height:auto;min-height:400px}
}

/* ---------- 76. Hero stats band — light refined ---------- */
.hero__statsbar,
body.hero-on-light .hero__statsbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.hero__statsgrid{gap:0;padding:18px 0}
.hero__statsgrid > div{border-left:1px solid var(--line);padding:2px 12px}
.hero__statsgrid > div:first-child{border-left:0}
.hero__statsgrid > div b{color:var(--ink);font-size:clamp(1.3rem,2.1vw,1.9rem)}
.hero__statsgrid > div span{color:var(--muted);font-size:12.5px;letter-spacing:.02em;margin-top:2px;display:block}
@media (max-width:720px){
  .hero__statsgrid{padding:12px 0}
  .hero__statsgrid > div b{font-size:1.05rem}
  .hero__statsgrid > div span{font-size:9.5px}
}

/* ---------- 77. Soft box shadow on every card ---------- */
.pcard,.project,.abx-card,.client,.whyband,.cta,
.pcard:hover,.project:hover,.client:hover{
  box-shadow:0 4px 14px rgba(29,53,87,.08),0 1px 4px rgba(29,53,87,.05);
}

/* ---------- 78. Stats band: true glassmorphism ---------- */
.hero__statsbar,
body.hero-on-light .hero__statsbar{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.32) 100%);
  backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border-top:1px solid rgba(255,255,255,.7);
  box-shadow:0 -10px 32px rgba(27,27,31,.08);
}
.hero__statsgrid > div{border-left:1px solid rgba(27,27,31,.12)}
.hero__statsgrid > div:first-child{border-left:0}
.hero__statsgrid > div b{color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.6)}
.hero__statsgrid > div span{color:var(--ink-2)}

/* ---------- 79. Mobile banner: full-size centered card (5:4 frame) ---------- */
@media (max-width:720px){
  .hero-slide--banner .hero__media{
    top:50%;bottom:auto;left:12px;right:12px;height:auto;
    aspect-ratio:5/4;
    transform:translateY(-56%);
  }
  .hero-slide--banner .hero__img--mob{
    object-fit:cover;object-position:center;border-radius:var(--r);
    box-shadow:0 14px 34px rgba(27,27,31,.14);
  }
  .hero-slide--banner .hero__banner-link{top:0;bottom:0}
}

/* ---------- 80. Products: 2-up grid on mobile ---------- */
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr 1fr;grid-auto-rows:168px;gap:10px}
  .pcard--feature{grid-column:span 2;grid-row:span 1}
  .pcard--wide{grid-column:span 2}
  .pcard__body{padding:12px;gap:2px}
  .pcard__body h3{font-size:.92rem}
  .pcard--feature .pcard__body h3{font-size:1.05rem}
  .pcard__body p{display:none}
  .pcard--feature .pcard__body p{display:block;font-size:12px;max-width:none}
  .pcard__go{font-size:10px;margin-top:3px}
  .pcard__num{top:8px;left:8px;padding:4px 7px;font-size:10px}
}

/* ---------- 81. Projects: 2-up grid on mobile ---------- */
@media (max-width:620px){
  .grid-projects{grid-template-columns:1fr 1fr;gap:10px}
  .project__info{padding:12px;gap:3px}
  .project__info h3{font-size:.9rem}
  .project__cat{font-size:9px;letter-spacing:.12em}
  .project__meta{font-size:10.5px}
  .project__plus{width:30px;height:30px;top:8px;right:8px}
}

/* ---------- 82. Gallery arrows: centered pair on mobile ---------- */
@media (max-width:720px){
  .gallery-swiper{padding-bottom:78px}
  .gallery-nav{top:auto;bottom:14px;transform:none}
  .gallery-nav--prev{left:calc(50% - 50px);right:auto}
  .gallery-nav--next{right:calc(50% - 50px);left:auto}
}

/* ---------- 83. Footer: centered on mobile ---------- */
@media (max-width:560px){
  .footer__grid{text-align:center;justify-items:center}
  .footer .logo{justify-content:center}
  .footer__about p{margin-inline:auto}
  .footer__badges{justify-content:center}
  .socials{justify-content:center}
  .footer address div{text-align:center}
  .footer__bar{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .footer__bar nav{justify-content:center}
}

/* ---------- 84. Drawer: iconed contact rows ---------- */
.drawer__foot{gap:12px}
.drawer__foot a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;color:var(--muted);
}
.drawer__foot a:hover{color:var(--ink)}
.drawer__foot svg{width:15px;height:15px;flex:none;color:var(--orange)}

/* ---------- 85. Footer mobile: left-aligned content, centered bar only ---------- */
@media (max-width:560px){
  .footer__grid{text-align:left;justify-items:start}
  .footer .logo{justify-content:flex-start}
  .footer__about p{margin-inline:0}
  .footer__badges{justify-content:flex-start}
  .socials{justify-content:flex-start}
  .footer address div{text-align:left}
}

/* ---------- 86. Revert: gallery arrows back to edges on mobile ---------- */
@media (max-width:720px){
  .gallery-swiper{padding-bottom:26px}
  .gallery-nav{top:50%;bottom:auto;transform:translateY(-50%)}
  .gallery-nav--prev{left:clamp(12px,4vw,60px);right:auto}
  .gallery-nav--next{right:clamp(12px,4vw,60px);left:auto}
}

/* ---------- 87. Filter tabs: scrollable from the start on mobile ---------- */
@media (max-width:900px){
  .filters{justify-content:flex-start;padding:2px 2px 6px}
  .filter{padding:8px 14px;font-size:12px}
}

/* ---------- 88. Mobile hero: height fits banner, no dead space ---------- */
@media (max-width:720px){
  /* topbar+header (~100px) + 5:4 banner (80vw) + stats band (~100px) */
  .hero-swiper{height:calc(80vw + 205px);min-height:470px}
  .hero-slide--banner .hero__media{top:102px;transform:none}
}

/* ---------- 89. Filter tabs: stretch to container so scrolling works ---------- */
.section-head .filters,.section-head--split .filters{
  justify-self:stretch;
  width:100%;
  max-width:100%;
}
@media (max-width:900px){
  .section-head .filters,.section-head--split .filters{justify-content:flex-start}
}
@media (min-width:901px){
  .section-head .filters,.section-head--split .filters{justify-content:center}
}

/* ---------- 90. Topbar: centered content on mobile ---------- */
@media (max-width:860px){
  .topbar__inner{justify-content:center;padding:7px 0}
  .topbar__group{gap:18px}
}

/* ---------- 91. Lightbox arrows: over the image on mobile ---------- */
@media (max-width:860px){
  .lightbox__nav{top:12px;left:12px;right:auto;bottom:auto}
  .lightbox__nav button{width:38px;height:38px}
}

/* ---------- 92. Mobile banner: flush edge-to-edge, zero gaps ---------- */
@media (max-width:720px){
  .hero-swiper{height:calc(80vw + 198px);min-height:0}
  .hero-slide--banner .hero__media{top:100px;left:0;right:0}
  .hero-slide--banner .hero__img--mob{border-radius:0;box-shadow:none}
}

/* ---------- 93. About cards: centered on mobile ---------- */
@media (max-width:640px){
  .abx-grid{justify-items:center}
  .abx-card{width:100%;max-width:480px;margin-inline:auto}
}

/* ---------- 94. About cards: 2-up on mobile (photo full-width) ---------- */
@media (max-width:640px){
  .abx-grid{grid-template-columns:1fr 1fr;gap:10px;justify-items:stretch}
  .abx-card{max-width:none;margin-inline:0;min-height:0;padding:16px;gap:8px}
  .abx-card--photo{grid-column:span 2;min-height:230px}
  .abx-card h3{font-size:1rem}
  .abx-card p{font-size:12.5px;line-height:1.55}
  .abx-ico{width:38px;height:38px}
  .abx-ico svg{width:18px;height:18px}
}

/* ---------- 95. Why-band tags: 2 per row on mobile ---------- */
@media (max-width:640px){
  .whyband__tags{
    display:grid;grid-template-columns:auto auto;
    justify-content:center;gap:10px 22px;text-align:left;
  }
  .whyband__tags span{justify-content:flex-start;font-size:12.5px}
}

/* ---------- 96. Gallery modal arrows: centered at edges on mobile ---------- */
@media (max-width:720px){
  .gmodal__nav{top:50%;bottom:auto;transform:translateY(-50%)}
  .gmodal__nav--prev{left:10px}
  .gmodal__nav--next{right:10px}
}

/* ---------- 97. Mobile: white header + zero gap above stats band ---------- */
@media (max-width:720px){
  .hero-swiper{height:calc(80vw + 190px)}
  .header{background:#fff}
  .header .logo-img--light{display:none}
  .header .logo-img--dark{display:block}
  .burger{border-color:var(--line-strong)}
  .burger span{background:var(--ink)}
}

/* ---------- 98. Gallery modal arrows: centered pair below content (mobile) ---------- */
@media (max-width:720px){
  .gmodal__nav{
    top:auto;bottom:26px;transform:none;
    background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);
  }
  .gmodal__nav--prev{left:calc(50% - 54px);right:auto}
  .gmodal__nav--next{right:calc(50% - 54px);left:auto}
  .gmodal__fig img{max-height:60vh}
}

/* ---------- 99. Kill horizontal overflow on mobile ---------- */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%}
@media (max-width:720px){
  .rev-wrap{width:100%;margin-left:0}
  .shell{max-width:100%}
}

/* ---------- 100. Mobile hero: banner anchored header-to-statsband, no gap ---------- */
@media (max-width:720px){
  .hero__statsbar{height:92px;display:flex;align-items:center}
  .hero__statsgrid{width:100%;padding:0}
  .hero-slide--banner .hero__media{
    top:100px;bottom:92px;left:0;right:0;
    aspect-ratio:auto;height:auto;transform:none;
  }
  .hero-slide--banner .hero__img--mob{object-fit:cover;object-position:center}
}

/* ---------- 101. Mobile: one-line counter labels + email in topbar ---------- */
@media (max-width:720px){
  .hero__statsgrid > div span{white-space:nowrap;font-size:9px;letter-spacing:0}
}
@media (max-width:480px){
  .topbar__group a:last-child{display:inline-flex}
  .topbar__inner{font-size:10.5px}
  .topbar__group{gap:12px}
  .topbar__group svg{width:11px;height:11px}
}

/* ---------- 102. Form: 2 fields per row on mobile ---------- */
@media (max-width:560px){
  .form__row{grid-template-columns:1fr 1fr;gap:10px}
  .field input,.field textarea,.field select{padding:13px 13px;font-size:13.5px}
}

/* ---------- 103. Stats band: tighter vertical padding on mobile ---------- */
@media (max-width:860px){
  .hero__statsgrid{padding:10px 0}
}
@media (max-width:720px){
  .hero__statsbar{height:68px}
  .hero-slide--banner .hero__media{bottom:68px}
}

/* ---------- 104. Form: no phantom gaps from hidden error messages ---------- */
.field__err{display:none;opacity:1;margin-top:5px}
.field.has-error .field__err{display:block}
@media (max-width:560px){
  .form{gap:10px}
}

/* ---------- 105. Hero: ratio-locked across all screen sizes ---------- */
/* Desktop/tablet: hero height = banner's own 2.95:1 ratio, so the image
   fills edge-to-edge with no backdrop bands and no cropping at any width. */
@media (min-width:721px){
  .hero-swiper{height:33.9vw;min-height:430px;max-height:92svh}
  .hero-slide--banner .hero__img--banner{
    object-fit:cover;object-position:left center;
  }
  .hero__scroll{display:none}
  .hero__statsbar{height:auto}
}
/* Between 721-1100px the ratio-locked height bottoms out at 430px;
   cover + left anchor keeps the headline safe, cropping only the right scene */

/* ---------- 106. Product cards: clear image, dark only at the bottom ---------- */
.pcard__veil{
  background:linear-gradient(180deg,
    rgba(10,12,18,0) 0%,
    rgba(10,12,18,0) 52%,
    rgba(10,12,18,.5) 74%,
    rgba(10,12,18,.93) 100%);
}
.pcard:hover .pcard__veil{background:linear-gradient(180deg,
    rgba(10,12,18,0) 0%,
    rgba(10,12,18,0) 52%,
    rgba(10,12,18,.5) 74%,
    rgba(10,12,18,.93) 100%)}

/* ---------- 107. Filter tabs: room for the hover lift ---------- */
.filters{padding-top:5px;padding-bottom:8px}

/* ---------- 108. Topbar: wrap gracefully with three contact links ---------- */
@media (max-width:560px){
  .topbar{max-height:64px}
  .topbar__group{flex-wrap:wrap;justify-content:center;row-gap:2px}
}

/* ---------- 109. Floating call & WhatsApp buttons ---------- */
.float-contact{position:fixed;left:18px;bottom:18px;z-index:600;display:grid;gap:10px}
.float-btn{
  width:48px;height:48px;border-radius:var(--r);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 24px rgba(27,27,31,.22);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.float-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,27,31,.28)}
.float-btn svg{width:22px;height:22px}
.float-btn--wa{background:#25D366}
.float-btn--call{background:var(--orange)}
@media (max-width:560px){
  .float-contact{left:12px;bottom:12px}
  .float-btn{width:44px;height:44px}
}

/* ---------- 110. Hero layout unified: header zone / exact-ratio banner / stats row ---------- */
@media (min-width:721px){
  /* topbar+nav zone (118px) + banner at its native 2.952:1 (33.9vw) + stats row (88px) */
  .hero-swiper{height:calc(33.9vw + 206px);min-height:0;max-height:none}
  .hero__statsbar{height:88px;display:flex;align-items:center}
  .hero__statsgrid{width:100%;padding:0}
  .hero-slide--banner .hero__media{top:118px;bottom:88px;left:0;right:0}
  .hero-slide--banner .hero__img--banner{
    object-fit:cover;object-position:center;
  }
}

/* ---------- 111. Floating buttons: right column, above back-to-top ---------- */
.float-contact{left:auto;right:20px;bottom:80px}
@media (max-width:560px){
  .float-contact{left:auto;right:16px;bottom:74px}
  .to-top{right:16px;bottom:16px}
}

/* ---------- 112. Products mobile: every card single-cell, uniform 2-up ---------- */
@media (max-width:640px){
  .pcard--feature,.pcard--wide{grid-column:auto;grid-row:auto}
  .pcard--feature .pcard__body h3{font-size:.92rem}
  .pcard--feature .pcard__body p{display:none}
  .pcard--feature .pcard__body{padding:12px;gap:2px}
}

/* ---------- 113. Header: solid white always ---------- */
.header{background:#fff;border-bottom:1px solid var(--line)}
.header .nav a{color:var(--ink-2)}
.header .nav a:hover,.header .nav a.is-current{color:var(--ink)}
.header .nav a::after{background:var(--ink)}
.header .logo-img--light{display:none}
.header .logo-img--dark{display:block}
.header .burger{border-color:var(--line-strong)}
.header .burger span{background:var(--ink)}

/* ---------- 114. Banner flush under measured header height ---------- */
@media (min-width:721px){
  .hero-swiper{height:calc(33.9vw + var(--header-h,118px) + 88px)}
  .hero-slide--banner .hero__media{top:var(--header-h,118px)}
}
@media (max-width:720px){
  .hero-swiper{height:calc(80vw + var(--header-h,100px) + 68px)}
  .hero-slide--banner .hero__media{top:var(--header-h,100px)}
}

/* ---------- 115. Footer contacts: icon + value rows ---------- */
.footer address{gap:14px}
.fcontact{display:flex;gap:12px;align-items:flex-start}
.fcontact__ico{
  flex:none;width:32px;height:32px;border-radius:var(--r);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;color:var(--orange);
}
.fcontact__ico svg{width:15px;height:15px}
.fcontact__ico--wa{color:#25D366}
.fcontact p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.62);padding-top:5px}
.fcontact p a{color:rgba(255,255,255,.62)}
.fcontact p a:hover{color:#fff}
@media (max-width:560px){.fcontact{justify-content:flex-start}}