/* ============================================================
   VELAAR.IN — Design System
   Editorial luxury real estate / architectural minimalism
   Black · White · Restrained accent
   ============================================================ */

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}
body{
  font-family:var(--font-main,'Inter',sans-serif);
  background:var(--paper,#fff);
  color:var(--ink,#000);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul,ol{padding-left:1.2em}
input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}
::selection{background:var(--accent);color:#000}

.container{width:min(1320px,92vw);margin-inline:auto}
.off{background:var(--off,#F5F5F2)}
.dark{background:var(--ink,#000);color:#fff}

.accent{color:var(--accent)}
.word-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--accent);margin-left:.15em;vertical-align:baseline}

/* ---------- Typography utilities ---------- */
.kicker{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--grey,#8A8A8A);font-weight:500;margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:.9rem;
}
.kicker::before{content:"";width:2.4rem;height:1px;background:currentColor;display:inline-block}
.kicker.light{color:#b9b9b9}

.display{
  font-size:clamp(48px,9vw,150px);
  line-height:.92;letter-spacing:-.03em;font-weight:500;
}
.h-display{
  font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.02em;font-weight:500;
}
.h-section{
  font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:-.02em;font-weight:500;
}
.h-lede{font-size:clamp(22px,2.6vw,34px);line-height:1.35;font-weight:400;letter-spacing:-.01em}
.p-lead{max-width:56ch;color:var(--grey);font-size:clamp(15px,1.2vw,18px);line-height:1.75}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:.95rem 1.6rem;border:1px solid var(--accent);border-radius:0;
  background:var(--accent);color:#000;
  transition:color .25s,background .25s,border-color .25s;
  position:relative;overflow:hidden;
}
.btn:hover{background:#000;border-color:#000;color:var(--accent)}
.btn .arrow{transition:transform .3s ease;display:inline-block}
.btn:hover .arrow{transform:translateX(6px)}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#000}
.btn-lime{background:var(--accent);color:#000;border-color:var(--accent)}
.btn-lime:hover{background:#000;color:#fff;border-color:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--accent)}
/* a ghost button on a dark section has to flip, or the label is white on black
   and simply disappears */
.dark .btn-ghost,.hero .btn-ghost,.svc-hero .btn-ghost,.cta .btn-ghost{
  color:#fff;border-color:var(--accent);
}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.svc-hero .btn-ghost:hover,.cta .btn-ghost:hover{
  background:var(--accent);border-color:var(--accent);color:#000;
}
/* accent outline variant - readable on either background */
.btn-ghost-accent{background:transparent;color:var(--ink);border-color:var(--accent)}
.btn-ghost-accent:hover{background:var(--accent);border-color:var(--accent);color:#000}
.dark .btn-ghost-accent,.hero .btn-ghost-accent{color:#fff}
.dark .btn-ghost-accent:hover,.hero .btn-ghost-accent:hover{color:#000}
.btn-mini{padding:.6rem 1.1rem;font-size:.72rem}
.btn-block{width:100%;justify-content:center}
/* never let a button lose its label - keeps the hit area and focus ring sane */
.btn{white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-ghost:focus-visible{outline-color:var(--ink)}
.dark .btn-ghost:focus-visible,.hero .btn-ghost:focus-visible{outline-color:var(--accent)}

/* underline link */
.u-link{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.u-link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.u-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Preloader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:#000;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transition:opacity .7s ease,visibility .7s ease;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader-mark{
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateY(20px);animation:loaderIn .8s ease forwards;
}
.loader-mark img{width:min(320px,62vw);height:auto;aspect-ratio:1752/293;display:block}
.loader-bar{width:min(280px,60vw);height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--accent);animation:loaderBar 1.4s ease forwards .2s}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes loaderBar{to{width:100%}}

/* ---------- Page transition curtain ---------- */
.transit{
  position:fixed;inset:0;z-index:190;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s;
}
.transit-mark{display:flex;flex-direction:column;align-items:center;gap:1.2rem;opacity:0}
.transit-mark img{width:min(360px,64vw);height:auto;aspect-ratio:1752/293;display:block}
.transit-line{width:min(300px,54vw);height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.transit-line::after{content:"";display:block;height:100%;width:0;background:var(--accent);animation:loaderBar 1.2s ease forwards .3s}
body.leaving .transit{opacity:1;visibility:visible}
body.leaving .transit-mark{animation:loaderIn .5s ease forwards}

/* ---------- Custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:160;width:14px;height:14px;border-radius:50%;background:var(--accent);pointer-events:none;mix-blend-mode:multiply;opacity:0;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s}
.cursor span{position:absolute;inset:-4px;border:1px solid var(--accent);border-radius:50%;opacity:0;transition:opacity .2s}
.cursor.is-hover{width:44px;height:44px;background:transparent;mix-blend-mode:normal}
.cursor.is-hover span{opacity:1;border-color:#000}
@media (hover:hover) and (pointer:fine){
  body.has-cursor .cursor{opacity:.9}
  body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.3rem 0;
  color:#fff;
  /* Solid black bar: the logo + menu always sit on a real background
     instead of the old gradient that vanished over the hero imagery. */
  background:#070707;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
  will-change:transform;
}
.site-header.is-scrolled{
  background:#070707;
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-size:1.05rem;font-weight:600;letter-spacing:.24em}
.brand img{display:block;width:clamp(130px,16vw,235px);height:auto;aspect-ratio:1752/293;max-width:100%}
.site-nav{display:none;gap:2.2rem}
.site-nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;position:relative;padding:4px 0;
  transition:opacity .3s;
}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.site-nav a:hover::after,.site-nav a.is-active::after{transform:scaleX(1);transform-origin:left}
/* keyboard rings: the UA default is hard to read over dark header imagery */
.site-nav a:focus-visible,.menu-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
.header-actions{display:flex;align-items:center;gap:1.4rem}
.header-actions .btn{color:#000}
.header-actions .btn:hover{color:var(--accent)}
.menu-trigger{display:inline-flex;flex-direction:column;gap:6px;padding:8px;mix-blend-mode:normal}
.menu-trigger span{width:26px;height:1px;background:#fff;transition:transform .35s ease,opacity .35s ease;display:block}
body.menu-open .menu-trigger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .menu-trigger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1024px){
  .site-nav{display:flex}
  .menu-trigger{display:none}
}

/* ---------- Nested nav — Business Solutions mega-menu ---------- */
.site-nav .nav-item{position:relative}
.site-nav .nav-item > a{display:inline-flex;align-items:center;gap:.5rem}
.nav-chev{
  width:.42em;height:.42em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);
  transition:transform .3s ease;opacity:.7;
}
.site-nav .nav-item:hover .nav-chev,.site-nav .nav-item:focus-within .nav-chev{
  transform:rotate(225deg) translateY(-.12em);opacity:1;
}
/* bridge the gap so the dropdown doesn't close when moving mouse down */
.site-nav .nav-item.has-drop::before{
  content:'';
  position:absolute;left:50%;transform:translateX(-50%);
  top:100%;width:min(920px,98vw);height:2rem;pointer-events:none;
}
.nav-drop{
  position:absolute;top:calc(100% + 1.15rem);left:50%;
  transform:translate(-50%,10px);
  min-width:min(780px,84vw);max-width:92vw;
  background:#0b0b0b;color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:1.5rem 1.6rem;
  box-shadow:0 34px 80px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility .35s .18s;
  z-index:140;
}
.site-nav .nav-item:hover .nav-drop,
.site-nav .nav-item:focus-within .nav-drop{
  transition-delay:0s;
}
/* prevent accidental close: add a larger invisible pad after the panel */
.nav-drop::after{
  content:'';
  position:absolute;left:0;right:0;top:100%;height:1.6rem;
}
.site-nav .nav-item:hover .nav-drop,
.site-nav .nav-item:focus-within .nav-drop,
.site-nav .nav-item.has-drop:hover::before,
.site-nav .nav-item.has-drop:focus-within::before,
.site-nav .nav-item.has-drop:focus::before{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
/* stronger bridge: the drop itself should react to the nav-item's state.
   Using a hover area on the item keeps it open while the mouse traverses
   the bridge and the panel. Also keep the expanded panel interactive. */
.site-nav .nav-item.has-drop:hover .nav-drop,
.site-nav .nav-item.has-drop:focus-within .nav-drop,
.site-nav .nav-item.has-drop:focus-within,
.site-nav .nav-item.has-drop:focus-within .nav-drop,
.site-nav .nav-item.has-drop:hover{pointer-events:auto}
.site-nav .nav-item.has-drop:hover .nav-drop,
.site-nav .nav-item.has-drop:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.nav-drop a::after{content:none} /* no underline rule inside the panel */
.nav-drop-inner{display:flex;gap:clamp(1.4rem,3vw,2.8rem);align-items:flex-start}
.nav-col{min-width:168px;flex:1}
.nav-col-head{
  display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.8rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav-col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.nav-col-list a{
  display:block;font-size:.82rem;letter-spacing:.01em;text-transform:none;
  color:rgba(255,255,255,.82);padding:.32rem 0;
  transition:color .2s ease,padding-left .2s ease;
}
.nav-col-list a:hover,.nav-col-list a:focus-visible{color:#fff;padding-left:.3rem}
.nav-col-all{flex:0 0 auto;display:flex;align-items:flex-end;padding-bottom:.1rem}
.nav-all-link{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;
}
.nav-all-link .arrow{color:var(--accent)}

/* when the dark overlay menu is open: keep a solid bar (same #080808 as the
   panel) so the menu list scrolls cleanly UNDER the header. A transparent
   header let the scrolling tabs slide up over the logo + burger icon. */
body.menu-open .site-header{
  z-index:130;background:#080808;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
body.menu-open .brand img{filter:none}
body.menu-open .menu-trigger span{background:#fff}
body.menu-open .header-actions .btn{color:#000}
body.menu-open .header-actions .btn:hover{color:var(--accent)}

/* ---------- Overlay menu (mobile nav) ----------
   Below 1024px this is a compact TAB-STYLE dropdown — see "Mobile /
   compact vertical tab navigation" further down: a slim panel under the
   header holding a vertical stack of small uppercase tabs, hairline
   separators and an accent bar on the current page.
   The full-viewport editorial treatment below is the underlying
   presentation (panel visibility, entrance stagger, contact block) that
   the tab layout refines on small screens.
   Accessible by design — every label clears 4.5:1 on #080808, every link
   has a visible :focus-visible ring, the current page is marked with
   aria-current rather than colour alone, entrance delays are dropped
   under prefers-reduced-motion, and the closed panel is inert +
   aria-hidden so its links can never be tabmed to (see main.js). */
.overlay-menu{
  position:fixed;inset:0;z-index:120;background:#080808;color:#fff;
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s cubic-bezier(.77,0,.18,1),visibility .6s;
}
/* accent corner glow — progressive enhancement: without color-mix()
   support this whole declaration is dropped and the flat #080808 stands */
.overlay-menu{
  background-image:
    radial-gradient(120% 65% at 92% -8%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(80% 55% at 4% 104%, rgba(255,255,255,.06) 0%, transparent 62%);
}
body.menu-open .overlay-menu{clip-path:inset(0 0 0% 0);visibility:visible}
.overlay-inner{
  width:100%;
  padding-top:clamp(7rem,13vh,9.5rem);
  padding-bottom:clamp(2.4rem,5vh,3.4rem);
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}
/* The auto margin pins the menu to the bottom of a short screen and
   collapses to zero when the content is taller than the viewport, so
   nothing is ever cut off (the panel itself scrolls instead). */
.overlay-inner nav{display:flex;flex-direction:column;margin-top:auto}
.om-link{
  position:relative;display:flex;align-items:baseline;gap:clamp(.9rem,3.4vw,1.5rem);
  font-size:clamp(34px,8.4vw,68px);font-weight:500;letter-spacing:-.025em;line-height:1.12;
  padding:.45rem 0;min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(20px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),
             padding-left .35s ease,color .3s ease,border-color .35s ease;
}
.om-link i{
  font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.18em;
  color:rgba(255,255,255,.62); /* 7.7:1 on #080808 */
  min-width:2ch;transition:color .3s ease;
}
/* chevron built from borders: purely visual, so it is never read out */
.om-link::after{
  content:"";align-self:center;margin-left:auto;
  width:.4em;height:.4em;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-.12em,.12em);
  opacity:0;transition:opacity .35s ease,transform .35s ease;
}
.om-link:hover,.om-link:focus-visible{
  padding-left:.75rem;color:var(--accent);border-bottom-color:rgba(255,255,255,.3);
}
.om-link:hover i,.om-link:focus-visible i,.om-link.is-active i{color:var(--accent)}
.om-link:hover::after,.om-link:focus-visible::after,.om-link.is-active::after{opacity:1;transform:rotate(45deg) translate(0,0)}
.om-link.is-active{color:var(--accent)}
.om-link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
body.menu-open .om-link{animation:omIn .7s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
@keyframes omIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* contact block — mobile number and email stacked, one below the other */
.overlay-foot{
  display:flex;flex-direction:column;gap:clamp(.9rem,2.4vw,1.3rem);
  margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(20px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
body.menu-open .overlay-foot{animation:omIn .7s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,.5s)}
.of-item{display:flex;flex-direction:column;gap:.3rem}
.of-label{
  font-size:.64rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.62); /* 7.7:1 on #080808 */
}
.big-tel,.big-mail{
  display:inline-block;width:fit-content;
  font-size:clamp(21px,5.4vw,34px);font-weight:500;letter-spacing:-.015em;line-height:1.3;color:#fff;
  transition:color .3s ease,transform .35s ease;
}
.overlay-foot a:hover,.overlay-foot a:focus-visible{color:var(--accent);transform:translateX(.3rem)}
.overlay-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  /* the global rule shortens durations but leaves delays alone — kill
     the stagger so reduced-motion users are not left waiting */
  .om-link,.overlay-foot{animation-delay:0s!important;transition-delay:0s!important}
  .overlay-menu{transition:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.25) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:#000;transform:scaleY(1);transform-origin:bottom;transition:transform 1.1s cubic-bezier(.77,0,.18,1) .1s}
.hero.is-in::before{transform:scaleY(0)}
.hero-inner{position:relative;z-index:2;width:min(1160px,88vw);margin-inline:auto;padding:clamp(7rem,11vw,9rem) 0 clamp(2.8rem,4vw,3.2rem)}
.hero-labels{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.hero-title{
  font-size:clamp(50px,11.5vw,178px);line-height:1.16;letter-spacing:-.04em;font-weight:500;
  margin-bottom:clamp(2.2rem,4.2vw,3rem);position:relative;max-width:14ch;
}
.hero-title .accent{color:var(--accent)}
.hero-title span.row{display:block;overflow:hidden}
.hero-title span.row>span{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.77,0,.18,1);transition-delay:var(--d);padding:.08em 0 .32em;margin:-.08em 0 -.32em}
.hero.is-in .hero-title span.row>span{transform:none}
/* rotating wordmark in the home hero big word */
.word-rotate{position:relative;display:inline-block;vertical-align:top}
.word-rotate .w{display:block;position:absolute;top:0;left:0;opacity:0;transform:translateY(24%) rotate(1.5deg);filter:blur(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
.word-rotate .w.is-active{position:static;opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.word-rotate .w{transition:none;filter:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero-desc{max-width:34ch;color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.7;opacity:0;transform:translateY(16px);transition:opacity .8s ease .9s,transform .8s ease .9s}
.hero.is-in .hero-desc{opacity:1;transform:none}
.scroll-hint{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:1rem;opacity:0;transition:opacity .8s ease 1.1s}
.scroll-hint::after{content:"";width:2px;height:44px;background:var(--accent);display:inline-block;animation:scrollPulse 1.8s ease infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1)}}
.hero.is-in .scroll-hint{opacity:1}

/* hero variants (inner pages) */
.hero.hero-page{min-height:64vh;align-items:flex-end}
.hero-page .hero-title{
  font-size:var(--hero-size,clamp(54px,11vw,150px));
  font-family:var(--hero-family,var(--font-main,'Inter',sans-serif));
  font-weight:var(--hero-weight,500);
  letter-spacing:var(--hero-ls,-.025em);
  text-transform:var(--hero-case,none);
  -webkit-text-stroke:var(--hero-stroke,0 transparent);
  text-stroke:var(--hero-stroke,0 transparent);
}
.hero-page .container{width:min(1320px,92vw)}

/* ---------- Sections ---------- */
.section{padding:clamp(4.5rem,9vw,9rem) 0;position:relative}
.section-tight{padding:clamp(3rem,6vw,5rem) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.4rem,5vw,4.5rem);flex-wrap:wrap}
.sec-head .kicker{margin-bottom:.8rem}

/* statement */
.statement{padding:clamp(6rem,12vw,11rem) 0}
.statement .display{max-width:16ch}
.statement em{font-style:normal;color:var(--grey)} 

/* split 2-col */
.split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split.offset-left .img{order:1}
.split.offset-left .txt{order:2}
.img-frame{position:relative;overflow:hidden}
.img-frame .ratio{aspect-ratio:4/5}
.img-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.img-frame:hover img{transform:scale(1.04)}

/* marquee */
.marquee{overflow:hidden;padding:clamp(2rem,5vw,3.6rem) 0;border-block:1px solid rgba(0,0,0,.12);white-space:nowrap}
.marquee-inner{display:inline-block;animation:marquee 26s linear infinite;font-size:clamp(40px,6.6vw,104px);font-weight:500;letter-spacing:-.02em;line-height:1}
.marquee-inner span{display:inline-flex;align-items:center;color:var(--grey);margin:0 .6em}
.marquee .index{color:var(--accent);font-size:.9em;line-height:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* stats / meta row */
.meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;border-top:1px solid rgba(0,0,0,.14);padding-top:2rem}
.meta-item .meta-num{font-size:clamp(34px,4.6vw,64px);font-weight:500;letter-spacing:-.02em;line-height:1}
.meta-item .meta-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-top:.6rem}

/* philosophy — vision / mission / values / ethos (About page) */
.philo-block{position:relative;padding:clamp(3rem,8vw,7.5rem) 0;border-top:1px solid rgba(0,0,0,.1)}
.philo-block .container{position:relative}
.philo-index{
  position:absolute;top:-1.4rem;right:0;z-index:0;
  font-size:clamp(140px,26vw,360px);font-weight:600;letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.22);
  opacity:0;transform:translateY(50px) rotate(2deg);
  user-select:none;pointer-events:none;
  transition:color .5s ease,-webkit-text-stroke-color .5s ease;
}
.philo-block.is-in .philo-index{animation:philoIndexIn 1.1s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes philoIndexIn{to{opacity:1;transform:none}}
.philo-block:hover .philo-index{-webkit-text-stroke-color:var(--accent);color:rgba(183,255,0,.08)}
.philo-inner{position:relative;z-index:1}
.philo-body{max-width:760px}
.philo-line{
  display:block;width:clamp(70px,12vw,150px);height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.22,1,.36,1) .25s;
}
.philo-block.is-in .philo-line{transform:scaleX(1)}
.philo-title{
  font-size:clamp(46px,7.5vw,104px);font-weight:500;letter-spacing:-.025em;line-height:.98;
  margin:1.6rem 0 0;text-transform:none;
  opacity:0;transform:translateY(30px);
  transition:opacity .8s ease .35s,transform .8s cubic-bezier(.22,1,.36,1) .35s,color .4s;
}
.philo-block.is-in .philo-title{opacity:1;transform:none}
.philo-block:hover .philo-title{color:var(--accent)}
.philo-copy{
  margin-top:1.5rem;font-size:clamp(16px,1.35vw,19px);line-height:1.85;color:var(--grey);max-width:58ch;
  opacity:0;transform:translateY(24px);
  transition:opacity .9s ease .5s,transform .9s cubic-bezier(.22,1,.36,1) .5s;
}
.philo-block.is-in .philo-copy{opacity:1;transform:none}
.philo-copy p{margin:.4em 0}
.philo-block.is-flip .philo-index{right:auto;left:-.5rem}
.philo-block.is-flip .philo-body{margin-left:auto;text-align:right}
.philo-block.is-flip .philo-line{transform-origin:right;margin-left:auto}
.philo-block.is-flip .philo-copy{max-width:58ch}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none;opacity:0}
[data-reveal].is-in{opacity:1}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="left"].is-in,[data-reveal="right"].is-in{transform:none}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="scale"].is-in{transform:scale(1)}

/* ---------- Project cards (Projects page) ---------- */
.filter-bar{display:flex;gap:.6rem 1.6rem;flex-wrap:wrap;align-items:center}
.filter-bar button{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  padding:.5rem 0;position:relative;transition:color .25s;
}
.filter-bar button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.filter-bar button:hover{color:#000}
.filter-bar button.is-active{color:#000}
.filter-bar button.is-active::after{transform:scaleX(1)}

.projects-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,3rem)}
@media (min-width:760px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.projects-grid{grid-template-columns:repeat(3,1fr)}}

.project-card{position:relative;overflow:hidden;background:#000;color:#fff}
.project-card .pc-media{aspect-ratio:3/4;overflow:hidden}
.project-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.project-card:hover .pc-media img{transform:scale(1.06)}
.project-card .pc-index{
  position:absolute;top:1rem;left:1.2rem;z-index:2;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:.6rem;
}
.project-card .pc-index::before{content:"";width:1.6rem;height:1px;background:var(--accent)}
.project-card .pc-cat{
  position:absolute;top:1rem;right:1.2rem;z-index:2;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);padding:.35rem .8rem;backdrop-filter:blur(4px);
}
/* overlay info */
.project-card .pc-info{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.25) 55%,transparent);
  padding:1.6rem;
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;
}
@media (hover:hover) and (pointer:fine){
  .project-card:hover .pc-info{opacity:1;transform:none}
  .project-card:hover .pc-media img{transform:scale(1.06)}
}
.project-card .pc-name{font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.project-card .pc-name .ghost{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.project-card .pc-meta{display:grid;gap:.35rem;font-size:.8rem;color:rgba(255,255,255,.85)}
.project-card .pc-meta strong{color:#fff;font-weight:500}
.project-card .pc-hover-line{height:1px;background:var(--accent);width:0;transition:width .5s ease .1s;margin-top:1.1rem}
.project-card:hover .pc-hover-line{width:100%}
/* mobile always-visible caption */
.project-card .pc-caption{
  padding:.9rem 1.2rem;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.pc-caption .cap-name{font-size:.88rem;font-weight:500;letter-spacing:.04em}
.pc-caption .cap-meta{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:right}
@media (min-width:900px){.project-card .pc-caption{display:none}}
@media (hover:none){.project-card .pc-info{display:none}}

/* ---------- Service cards ---------- */
.services-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.4vw,2.4rem)}
@media (min-width:700px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Services horizontal slider (home "Services we provide") ----------
   Scoped to .services-slider so the Business Solutions grid is untouched. */
.services-slider{position:relative;margin-inline:calc(50% - 50vw);padding-inline:max(6vw,calc(50vw - 580px))}
.services-track{
  display:flex;gap:clamp(1rem,1.8vw,1.8rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.services-track::-webkit-scrollbar{display:none}
.services-track>*{flex:0 0 clamp(232px,25vw,320px);scroll-snap-align:start}
.services-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.services-track{scroll-behavior:auto}}
.services-slider-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.5rem}
.slider-btn{
  width:2.9rem;height:2.9rem;flex:0 0 auto;
  display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.34);border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
.slider-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#000}
.slider-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slider-btn:disabled{opacity:.28;cursor:default}
.slider-btn .arrow{font-size:1.05rem;line-height:1}

.service-card{position:relative;overflow:hidden;background:#000;color:#fff;display:block;text-align:left}
.service-card .sc-media{aspect-ratio:3/4;overflow:hidden}
.service-card .sc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;opacity:.96}
.service-card:hover .sc-media img{transform:scale(1.06)}
.service-card .sc-foot{
  position:absolute;left:1.2rem;bottom:1.2rem;right:1.2rem;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
}
.service-card .sc-title{
  font-size:clamp(18px,2vw,26px);font-weight:500;letter-spacing:-.01em;
  color:#fff;display:flex;align-items:center;gap:.7rem;
}
.service-card .sc-title .plus{color:var(--accent);font-weight:400;font-size:1.2em;transition:transform .35s ease}
.service-card:hover .sc-title .plus{transform:rotate(90deg)}
.service-card .sc-count{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);
  display:inline-flex;align-items:center;gap:.5rem;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.service-card .sc-count::before{content:"";width:1.4rem;height:1px;background:var(--accent)}
.service-card:hover .sc-count,.service-card:focus-visible .sc-count{opacity:1;transform:none}
.service-card .sc-overlay{
  position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.15) 55%,transparent);opacity:.9;transition:opacity .4s;
}
.service-card:hover .sc-overlay{opacity:1}
.service-card .sc-num{
  position:absolute;top:1rem;left:1.2rem;z-index:2;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.8);
}

/* ---------- Hover description panel ----------
   A white sheet slides up over the card on hover/focus and carries the full
   description. It is the same element at every breakpoint: on touch devices
   hover never fires, so a media query reveals it permanently instead. */
.service-card .sc-panel{
  position:absolute;inset:0;z-index:3;
  background:#fff;color:#000;
  padding:2.6rem 1.5rem 1.6rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.service-card:hover .sc-panel,
.service-card:focus-visible .sc-panel{transform:translateY(0)}
.service-card .sc-panel-num{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#8b8b80;
}
.service-card .sc-panel-title{
  font-size:clamp(17px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;color:#000;margin:0;
}
.service-card .sc-panel-rule{width:1.8rem;height:2px;background:var(--accent);flex:none}
.service-card .sc-panel-desc{
  font-size:.86rem;line-height:1.62;color:#3d3d38;margin:0;
}
.service-card .sc-panel-more{
  margin-top:auto;padding-top:.4rem;
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#000;font-weight:500;
}
.service-card .sc-panel-more::after{
  content:"\2192";color:var(--accent);font-size:1.1em;transition:transform .3s ease;
}
.service-card:hover .sc-panel-more::after{transform:translateX(4px)}

/* Touch devices get the same reveal, driven by tap instead of hover: JS adds
   .is-flipped on the first tap and lets the second tap follow the link.
   The panel is an overlay again so it can animate. It used to be forced to
   position:static and permanently visible, which is why mobile showed a plain
   white block under each image instead of the flip. */
@media (hover:none){
  .service-card{-webkit-tap-highlight-color:transparent}
  .service-card .sc-count{display:none}   /* nothing on touch can hover it in */
  .service-card.is-flipped .sc-panel{transform:translateY(0)}
  .service-card.is-flipped .sc-panel-more::after{transform:translateX(4px)}
  .service-card.is-flipped{outline:2px solid var(--accent);outline-offset:-2px}
  /* Tightened so a description still fits the card face on a small screen.
     pointer-events stays none, so a tap anywhere on the panel - or on the
     text that overflows it - reaches the card instead of fighting a scroll. */
  .service-card .sc-panel{padding:1.5rem 1.15rem 1.15rem;gap:.55rem}
  .service-card .sc-panel-desc{font-size:.78rem;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  .service-card .sc-panel{transition:none}
}

/* ---------- Service groups (Business Solutions) ---------- */
.group-table{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12)}
.group-row{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:clamp(1rem,3vw,2rem);
  padding:clamp(1.2rem,2.6vw,1.8rem) 0;
  border-bottom:1px solid rgba(0,0,0,.12);
  transition:padding .35s ease,background .35s ease;
}
.group-row:hover{padding-left:clamp(.6rem,1.6vw,1.2rem);background:rgba(0,0,0,.02)}
.gr-num{font-size:.7rem;letter-spacing:.24em;color:var(--accent);font-weight:600}
.gr-body{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.gr-name{font-size:clamp(18px,2vw,26px);font-weight:500;letter-spacing:-.01em;color:var(--ink,#000)}
.gr-desc{font-size:.86rem;line-height:1.6;color:var(--grey,#8A8A8A);max-width:62ch}
.gr-count{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey,#8A8A8A);white-space:nowrap}
.gr-arrow{font-size:1.1rem;color:var(--accent);transition:transform .3s ease}
.group-row:hover .gr-arrow{transform:translateX(6px)}
@media (max-width:640px){
  .group-row{grid-template-columns:auto 1fr;row-gap:.6rem}
  .gr-count{grid-column:2;justify-self:start}
  .gr-arrow{display:none}
}
.svc-filter-bar{margin-top:1.8rem;margin-bottom:.4rem}

/* ---------- Nested service page ---------- */
.svc-crumb{color:rgba(255,255,255,.78);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.svc-crumb a{color:rgba(255,255,255,.7);transition:color .25s}
.svc-crumb a:hover{color:var(--accent)}
.svc-hero .hero-desc{max-width:52ch;margin-top:1.4rem}

/* Service sub page: image-only banner with the title laid over the foot of the
   photo, so the picture reads behind the text. This opts the section out of the
   full-bleed dark overlay hero used on every other page.

   NOTE ON SELECTOR WEIGHT - do not shorten these back to `.svc-hero`.
   The base rule is `.hero.hero-page{min-height:64vh;align-items:flex-end}`,
   which is TWO classes (0,2,0). A bare `.svc-hero` is one class (0,1,0) and
   LOSES to it however late it appears in the file. That silently left the
   section 64vh tall while the image is only 52vh, so an 84-123px strip of bare
   white page background sat under the photo - and because the band is pinned to
   bottom:0, the title landed in exactly that white strip. `.hero.svc-hero`
   matches the base rule's weight and wins on source order instead. */
.hero.svc-hero{
  display:block;            /* was: flex + align-items:flex-end (overlay layout) */
  min-height:0;             /* the image alone sets the height - see note above */
  background:none;          /* was: #000, only ever visible behind the image */
  color:var(--ink,#000);    /* the title overrides this to #fff; kept for any future text here */
}
/* Belt and braces: if .hero-page is ever re-weighted above 0,2,0, the section
   must not grow taller than its image or the white gap comes straight back. */
.hero.svc-hero .hero-media{position:relative;inset:auto;width:100%}
.hero.svc-hero .hero-media img{display:block;width:100%;height:clamp(320px,52vh,600px);object-fit:cover}
.hero.svc-hero .hero-media::after{content:none}  /* the band below is the only scrim now */
/* The band OVERLAYS the foot of the photo rather than sitting under it, so the
   title genuinely sits on the image and the picture stays visible behind it.
   Pulling the band up with a negative margin cannot do this: the overlap always
   equals its own padding, so the title lands exactly where the image ends.
   The gradient is deliberately light - it only has to be dark enough to carry
   white text. A heavy scrim would hide the photo, which is the opposite of the
   brief. */
.svc-hero-band{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(4rem,10vw,8rem) 0 clamp(1.6rem,4vw,3rem);
  background:linear-gradient(180deg,
    rgba(8,8,8,0) 0%,
    rgba(8,8,8,.34) 30%,
    rgba(8,8,8,.58) 62%,
    rgba(8,8,8,.62) 100%);
}
.hero.svc-hero .hero-inner{
  width:min(1160px,88vw);margin-inline:auto;
  padding:0;                   /* the band's padding sets the spacing now */
}
.hero.svc-hero .hero-title{
  font-size:clamp(32px,5.4vw,64px);
  line-height:1.14;
  max-width:20ch;
  margin:0;
  color:#fff;                 /* the title now sits on the dark band, not the page */
  /* The scrim is light on purpose so the photo shows through, which means the
     title now has to carry its own contrast against whatever the image is. */
  text-shadow:0 2px 26px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
}
/* The reveal is tied to .hero.is-in, which may never fire for a title sitting
   below the fold, so the sub page title is simply always visible. */
.hero.svc-hero .hero-title span.row>span{transform:none}

/* jump index */
.svc-jump{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.14)}
.svc-jump-link{
  display:flex;align-items:baseline;gap:1.4rem;
  padding:clamp(.9rem,1.8vw,1.3rem) .4rem;
  border-bottom:1px solid rgba(0,0,0,.14);
  transition:padding-left .35s ease,background .3s,color .3s;
}
.svc-jump-link:hover{padding-left:1.1rem;background:var(--off);color:var(--accent)}
.svc-jump-num{font-size:.7rem;letter-spacing:.24em;color:var(--grey);min-width:3ch;transition:color .3s}
.svc-jump-link:hover .svc-jump-num{color:var(--accent)}
.svc-jump-name{font-size:clamp(19px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.15}

/* overview */
.svc-intro{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:1000px}
@media (min-width:860px){.svc-intro{grid-template-columns:180px 1fr;gap:2.6rem}}
.svc-intro-label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.svc-intro-text{font-size:clamp(19px,2.2vw,30px);line-height:1.5;letter-spacing:-.01em;max-width:44ch}

/* capability rows */
.svc-row{
  display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;
  padding:clamp(2.2rem,4.5vw,3.6rem) 0;
  border-top:1px solid rgba(0,0,0,.14);
}
@media (min-width:900px){
  .svc-row{grid-template-columns:1fr 1fr}
  .svc-row.is-flip .svc-row-media{order:2}
}
.svc-row-frame .ratio{aspect-ratio:4/5}
.svc-row-body{min-width:0}
.svc-row-head{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem}
.svc-row-num{
  font-size:.72rem;letter-spacing:.22em;color:var(--ink);min-width:3ch;padding-top:.55em;
  display:inline-flex;align-items:center;gap:.7rem;
}
/* the accent was the number's text colour, which is 1.2:1 on white and effectively
   invisible - it now marks the block as a lime rule instead */
.svc-row-num::before{
  content:"";width:1.8rem;height:2px;background:var(--accent);
  display:inline-block;flex:0 0 auto;
}
.svc-row-title{
  font-size:clamp(24px,3.2vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.08;
}
.svc-row-text{
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.85;color:var(--grey);max-width:58ch;
}
.svc-row:hover .svc-row-title{color:var(--accent);transition:color .3s}

/* ---- icon-only subsection blocks ----------------------------------
   The icon is sized from a --ico-size custom property that the server
   clamps to 100-150px, so the artwork is never stretched or lost. */
.sub-ico-badge{
  /* no box, no border, no background - the icon is part of the card, not a
     separate panel. Width/height IS the icon size the admin picked (100-150px). */
  width:var(--ico-size,130px);height:var(--ico-size,130px);
  max-width:100%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
}
.sub-ico-badge .sub-ico-svg{
  width:100%;height:100%;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.sub-ico-badge img{width:100%;height:100%;object-fit:contain;display:block}
.svc-row:hover .sub-ico-badge .sub-ico-svg{transform:scale(1.08) rotate(-3deg)}

/* a single icon block keeps the media column tidy rather than full width */
.svc-row.is-ico .svc-row-media{display:flex;justify-content:flex-start}

/* when every block is an icon, lay them out as an even grid */
.sub-ico-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(240px,26vw,300px),1fr));
  gap:clamp(1.4rem,2.6vw,2.6rem);
}
.sub-ico-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1rem,1.8vw,1.4rem);
  border:1px solid rgba(0,0,0,.14);background:#fff;
  padding:clamp(1.5rem,2.6vw,2.2rem);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.sub-ico-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.35);
}
.sub-ico-card:hover .sub-ico-badge .sub-ico-svg{transform:scale(1.08) rotate(-3deg)}
.sub-ico-head{display:flex;align-items:flex-start;gap:1rem;width:100%}
.sub-ico-num{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;color:var(--ink);
  flex:0 0 auto;padding-top:.35rem;
  display:inline-flex;align-items:center;gap:.7rem;
}
.sub-ico-num::before{
  content:"";width:1.6rem;height:2px;background:var(--accent);
  display:inline-block;flex:0 0 auto;
}
.sub-ico-title{
  font-size:clamp(19px,1.7vw,23px);font-weight:500;line-height:1.25;letter-spacing:-.015em;
  transition:color .3s;
}
.sub-ico-card:hover .sub-ico-title{color:var(--ink)}
.sub-ico-text{
  /* --grey is 4.3:1 on white; the cards are small so this steps just darker to clear AA */
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.8;color:#6a6a63;margin:0;
}

/* NOTE: the admin icon-picker styles (.mode-pick / .ico-picker / .thumb-ico)
   live in admin/assets/css/admin.css - the admin does not load this file. */

/* next service */
.svc-next{
  display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;
  border:1px solid rgba(0,0,0,.14);padding:clamp(1.4rem,3vw,2.2rem);
  transition:border-color .3s,background .3s;
}
.svc-next .kicker{margin-bottom:0}
.svc-next:hover{border-color:var(--accent);background:var(--off)}
.svc-next-name{
  font-size:clamp(30px,5.4vw,72px);font-weight:500;letter-spacing:-.025em;line-height:1;
  display:inline-flex;align-items:center;gap:.7rem;
}
.svc-next-name .plus{color:var(--accent);font-weight:400;transition:transform .35s ease}
.svc-next:hover .plus{transform:rotate(90deg)}

/* ---------- Positions list ---------- */
.position-row{
  display:flex;align-items:center;gap:2rem;justify-content:space-between;flex-wrap:wrap;
  padding:clamp(1.3rem,2.6vw,2.2rem) .4rem;border-bottom:1px solid rgba(0,0,0,.14);
  transition:padding-left .35s ease,background .3s;
}
.position-row:first-of-type{border-top:1px solid rgba(0,0,0,.14)}
.position-row:hover{padding-left:1.1rem;background:var(--off)}
.position-row .pos-title{font-size:clamp(22px,3.4vw,42px);font-weight:500;letter-spacing:-.02em;line-height:1}
.position-row .pos-meta{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);display:flex;gap:1.6rem;align-items:center}

/* ---------- Forms ---------- */
.form-shell{background:#fff;border:1px solid rgba(0,0,0,.12);padding:clamp(1.6rem,4vw,3.4rem)}
.form-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:720px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#000;font-weight:500}
.field label span{color:var(--accent)}
.inputext,.selectext,textarea.inputext{
  width:100%;padding:.95rem 0;border:none;border-bottom:1px solid rgba(0,0,0,.25);
  background:transparent;border-radius:0;transition:border-color .25s;font-size:1rem;color:#000;outline:none;
}
.inputext::placeholder{color:#b5b5b5}
.inputext:focus,.selectext:focus{border-bottom-color:var(--accent)}
textarea.inputext{resize:vertical;min-height:120px;line-height:1.6}
.selectext{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.phone-wrap{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(0,0,0,.25);transition:border-color .25s}
.phone-wrap:focus-within{border-bottom-color:var(--accent)}
.phone-wrap .cc{font-size:.78rem;letter-spacing:.14em;color:var(--grey);white-space:nowrap}
.phone-wrap .inputext{border:none}
.form-check{display:flex;gap:.7rem;align-items:flex-start;margin-top:.4rem}
.form-check input[type="checkbox"]{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.form-check label{font-size:.82rem;color:#333;line-height:1.5}
.form-check label a{text-decoration:underline;text-underline-offset:2px}
.form-check label a:hover{color:var(--accent)}
.form-msg{font-size:.82rem;padding:.55rem 0;display:none}
.form-msg.show{display:block}
.form-msg.ok{color:#1a7f37}
.form-msg.err{color:#c0392b}

/* ---------- Contact big type ---------- */
.contact-big{display:flex;flex-direction:column;gap:.2rem;margin:clamp(2.5rem,5vw,4rem) 0}
.contact-big a{
  font-size:clamp(34px,7vw,96px);font-weight:500;letter-spacing:-.03em;line-height:1.05;
  display:inline-flex;align-items:center;gap:1rem;
}
.contact-big a .arr{color:var(--accent);opacity:0;transform:translateX(-14px);transition:all .35s ease}
.contact-big a:hover .arr{opacity:1;transform:none}
.contact-big a:hover{color:var(--accent)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;visibility:hidden}
.modal.open{visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.modal.open .modal-backdrop{opacity:1}
.modal-card{
  position:relative;width:min(520px,100%);background:#fff;color:#000;padding:clamp(1.8rem,4vw,3rem);
  transform:translateY(30px) scale(.97);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s;
  max-height:90vh;overflow:auto;
}
.modal.open .modal-card{transform:none;opacity:1}
.modal-close{position:absolute;top:1rem;right:1.1rem;font-size:1.8rem;line-height:1;color:var(--grey);transition:color .25s,transform .3s}
.modal-close:hover{color:#000;transform:rotate(90deg)}
.modal-title{font-size:clamp(26px,4vw,38px);font-weight:500;letter-spacing:-.02em;margin-bottom:.6rem}
.modal-sub{color:var(--grey);font-size:.92rem;margin-bottom:1.8rem}
.modal-form .field{margin-bottom:1.4rem}
.modal-form label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#666}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:2.2rem;left:50%;transform:translate(-50%,20px);z-index:170;
  background:#000;color:#fff;padding:1rem 1.6rem;font-size:.82rem;letter-spacing:.06em;
  border-left:3px solid var(--accent);opacity:0;visibility:hidden;transition:all .4s ease;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- Footer ---------- */
.site-footer{background:#000;color:#fff;padding:clamp(4rem,8vw,7rem) 0 2.4rem}
.footer-cta{border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:clamp(2.4rem,5vw,4rem);margin-bottom:clamp(2.4rem,5vw,4rem)}
.footer-headline{display:block;font-size:clamp(40px,8vw,120px);font-weight:500;letter-spacing:-.03em;line-height:1;transition:color .35s}
.footer-headline:hover{color:var(--accent)}
.footer-phone{
  display:inline-block;margin-top:clamp(1.6rem,3vw,2.8rem);
  font-size:clamp(26px,4.6vw,64px);font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--accent);
  transition:color .35s;
}
.footer-phone:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;margin-bottom:3.4rem}
@media (min-width:800px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-brand-mark{display:inline-block;margin-bottom:1.1rem}
.footer-brand-mark img{width:clamp(150px,17vw,250px);height:auto;aspect-ratio:1752/293;max-width:100%}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.9rem;max-width:34ch;line-height:1.7}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.footer-nav a,.footer-contact a{font-size:.86rem;color:rgba(255,255,255,.78);position:relative;transition:color .25s;padding:2px 0}
.footer-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.footer-nav a:hover{color:#fff}
.footer-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-contact a{font-size:1rem;color:#fff}
.footer-contact a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.footer-legal{display:flex;gap:1.6rem}
.footer-legal a:hover{color:var(--accent)}

/* ---------- About rich text ---------- */
.about-body h2,.about-body h3,.about-body h4{font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:1.8em 0 .6em}
.about-body h2{font-size:clamp(28px,4vw,46px)}
.about-body h3{font-size:clamp(22px,3vw,32px)}
.about-body h4{font-size:clamp(18px,2.2vw,24px)}
.about-body p{margin:1em 0;font-size:clamp(16px,1.3vw,18px);line-height:1.85;color:#222}
.about-body p:first-child{font-size:clamp(20px,2.4vw,30px);line-height:1.4;color:#000;font-weight:400}
.about-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.about-body a:hover{opacity:.7}
.about-body strong{font-weight:600}
.about-body ul,.about-body ol{margin:1em 0 1em 0;padding-left:1.4em;font-size:clamp(16px,1.2vw,18px);line-height:1.8}
.about-body li{margin:.4em 0}
.about-body blockquote{border-left:2px solid var(--accent);padding:.7em 0 .7em 1.4em;margin:1.6em 0;font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.4;letter-spacing:-.01em}

/* ---------- Page hero breadcrumb-ish ---------- */
.page-meta{display:flex;align-items:center;gap:1rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:1.8rem}
.page-meta .accent-line{width:2.4rem;height:1px;background:var(--accent)}

/* ---------- Empty state ---------- */
.empty{padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.empty .empty-mark{font-size:clamp(40px,8vw,96px);font-weight:500;letter-spacing:-.02em;opacity:.15;line-height:1}
.empty p{color:var(--grey);margin-top:1rem}

/* ---------- Misc ---------- */
.thin-rule{height:1px;background:rgba(0,0,0,.14);border:none;margin:0}
.legal-body{max-width:760px;margin-inline:auto}
.legal-body h1{font-size:clamp(38px,6vw,72px);font-weight:500;letter-spacing:-.02em;margin-bottom:1.4rem}
.legal-body h2{font-size:clamp(22px,3vw,30px);font-weight:500;margin:2.2em 0 .5em}
.legal-body p{margin:1em 0;color:#333;line-height:1.85}
.legal-body ul{margin:1em 0;color:#333;line-height:1.8}
.legal-body .updated{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:2.4rem}

/* ---------- Responsive tweaks ---------- */
@media (max-width:1023px){
  .site-header{padding:1.1rem 0}
  .header-actions .btn{display:none}
  /* The base header is already a solid black bar (see "Header" above), so on
     mobile the logo + menu sit on a real background with no override needed.
     body.menu-open is deliberately left out: with the full-screen #080808 menu
     open the header blends seamlessly onto the panel. */
  body.menu-open .brand img{filter:none}
  body.menu-open .menu-trigger span{background:#fff}
}
@media (max-width:640px){
  .site-header{padding:.95rem 0}
  .brand img{width:clamp(118px,40vw,170px)}
  .menu-trigger span{width:24px}
  /* The hero eyebrow labels are wide, letter-spaced and wrap onto several
     lines on a phone, which pushes the headline down and eats the fold.
     Hidden on phones only; they still show on tablet and desktop. */
  .hero-labels{display:none}
  .hero-inner{width:min(1160px,86vw);padding-top:clamp(5.5rem,20vw,7.5rem);padding-bottom:2.4rem}
  .hero-title{font-size:clamp(46px,16vw,96px);max-width:none;line-height:1.2}
  .hero-desc{font-size:.88rem}
  .scroll-hint{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .statement{padding:clamp(4.5rem,12vw,6rem) 0}
  .statement .display{max-width:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .meta-row{grid-template-columns:1fr 1fr}
  .contact-big a{font-size:clamp(28px,8.6vw,46px)}
  .footer-bottom{flex-direction:column;gap:.6rem;align-items:flex-start}
  .footer-legal{flex-wrap:wrap}
  /* philosophy blocks stack on mobile */
  .philo-block{padding:clamp(2.6rem,9vw,4rem) 0}
  .philo-index{position:static;right:auto;font-size:clamp(88px,27vw,150px);line-height:1;margin-bottom:1rem}
  .philo-block.is-flip .philo-index{left:auto}
  .philo-block.is-flip .philo-body{margin-left:0;text-align:left}
  .philo-block.is-flip .philo-line{transform-origin:left;margin-left:0}
  .philo-title{font-size:clamp(38px,10vw,58px)}
  .philo-copy{font-size:15px}
  .hero-page .hero-title{font-size:clamp(44px,12.5vw,72px)}
  .overlay-inner{padding-top:7rem}
  /* nested service page */
  .svc-crumb{flex-wrap:wrap;row-gap:.5rem}
  .svc-intro{gap:.6rem}
  .svc-jump-link{gap:.9rem;padding:.9rem .2rem}
  .svc-row{padding:2rem 0;gap:1.2rem}
  .svc-row-head{gap:.8rem;margin-bottom:.9rem}
  .svc-row-num{padding-top:.4em}
  .svc-next{padding:1.3rem}
}

/* ---------- Mobile / tablet: compact vertical tab navigation (< 1024px) ----------
   The full-screen menu becomes a slim dropdown panel that hangs directly
   under the header: a VERTICAL stack of compact tabs — small uppercase
   labels, comfortable padding, hairline separators between rows and the
   accent colour on the current page (text + 3px left bar + faint tint).
   Rows stay short and readable (never oversized), the panel is only as
   tall as its content and only scrolls when the screen is very short.
   The desktop .site-nav bar (>= 1024px) is deliberately left untouched. */
@keyframes tabIn{from{opacity:0}to{opacity:1}}
@media (max-width:1023px){
  /* dimmed page behind the panel — always present but inert until open */
  body::after{
    content:"";position:fixed;inset:0;z-index:119;
    background:rgba(0,0,0,.6);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease,visibility .35s ease;
  }
  body.menu-open::after{opacity:1;visibility:visible;pointer-events:auto}

  /* the panel is only as tall as its content instead of filling the screen */
  .overlay-menu{
    position:fixed;top:0;left:0;right:0;bottom:auto;
    max-height:100vh;max-height:100dvh;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background-image:none;
    transition:clip-path .4s cubic-bezier(.77,0,.18,1),visibility .4s;
  }
  .overlay-menu::-webkit-scrollbar{width:0;height:0;display:none}
  /* clears the fixed header (~56–63px) so the tabs sit just below it */
  .overlay-inner{display:block;min-height:0;padding-top:4.6rem;padding-bottom:.9rem}

  /* full-bleed tab column: separators run edge to edge and every label
     lines up with the container / logo gutter */
  .overlay-inner nav{
    flex-direction:column;gap:0;margin-top:0;
    width:100vw;margin-left:calc(50% - 50vw);padding-inline:4vw;
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .om-link{
    width:100%;
    display:flex;align-items:center;gap:.85rem;
    font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    line-height:1.2;white-space:nowrap;
    padding:.95rem clamp(.85rem,3vw,1.1rem);
    min-height:46px;
    color:rgba(255,255,255,.88);
    border:0;border-bottom:1px solid rgba(255,255,255,.12);
    opacity:1;transform:none;
    transition:color .25s ease,background-color .25s ease,box-shadow .25s ease;
  }
  .om-link:last-child{border-bottom:0}
  .om-link::after{content:none} /* chevron belongs to the old big menu */
  .om-link:hover,.om-link:focus-visible{
    padding:.95rem clamp(.85rem,3vw,1.1rem);
    color:var(--accent);background:rgba(255,255,255,.06);
  }
  .om-link:focus-visible{outline-offset:-3px} /* keep the ring inside the panel */
  .om-link.is-active{
    color:var(--accent);
    background:rgba(255,255,255,.05);
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .om-link.is-active i{color:var(--accent)}
  body.menu-open .om-link{animation:tabIn .4s ease both;animation-delay:var(--d,0s)}

  /* contact row: one compact line under the tabs, not a stacked block */
  .overlay-foot{
    flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:.4rem clamp(1.1rem,5vw,2rem);
    margin-top:.85rem;padding-top:0;border-top:0;
    transform:none;
    transition:opacity .4s ease;
  }
  body.menu-open .overlay-foot{animation:tabIn .4s ease .18s both}
  .of-item{flex-direction:row;align-items:baseline;gap:.55rem}
  .of-label{font-size:.6rem;letter-spacing:.2em}
  .big-tel,.big-mail{font-size:.86rem;letter-spacing:.02em;font-weight:500}
  .overlay-foot a:hover,.overlay-foot a:focus-visible{transform:none}

  /* nested nav: the Business Solutions tab expands its groups */
  .om-group{display:block}
  .om-toggle{
    width:100%;font-family:inherit;background:none;border:0;
    text-align:left;cursor:pointer;color:inherit;
  }
  .om-toggle .om-label{flex:1}
  .om-chev{
    width:.5em;height:.5em;flex:0 0 auto;align-self:center;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .3s ease;opacity:.7;
  }
  .om-group.is-open .om-chev{transform:rotate(225deg);opacity:1}
  .om-sub{
    display:flex;flex-direction:column;
    padding:.4rem 0 .8rem clamp(1.3rem,6vw,2rem);
    background:rgba(0,0,0,.32);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .om-sub[hidden]{display:none}
  .om-sub-all{
    font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);padding:.5rem 0;
  }
  .om-sub-group{display:flex;flex-direction:column;padding:.15rem 0}
  .om-sub-head{
    font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;padding:.5rem 0 .25rem;
  }
  .om-sub-link{
    font-size:.8rem;color:rgba(255,255,255,.78);
    padding:.34rem 0;transition:color .2s ease,padding-left .2s ease;
  }
  .om-sub-link:hover,.om-sub-link:focus-visible{color:#fff;padding-left:.3rem}
}

/* ---------- Smaller laptops (e.g. 1366×768) ---------- */
@media (min-width:1024px) and (max-width:1450px){
  .site-nav{gap:1.6rem}
  .hero-title{font-size:clamp(48px,10.5vw,150px)}
  .display{font-size:clamp(44px,7.6vw,116px)}
  .h-section{font-size:clamp(36px,4.6vw,70px)}
  .h-display{font-size:clamp(40px,5.2vw,80px)}
  .contact-big a{font-size:clamp(30px,6vw,80px)}
  .footer-headline{font-size:clamp(36px,6.6vw,96px)}
  .footer-phone{font-size:clamp(24px,4vw,54px)}
  .marquee-inner{font-size:clamp(36px,5.6vw,88px)}
  .statement{padding:clamp(5rem,9vw,8rem) 0}
  .section{padding:clamp(4rem,7.5vw,7rem) 0}
}
@media (min-width:1024px) and (max-height:820px){
  .hero-inner{padding-top:clamp(5.5rem,8vw,7.5rem)}
  .hero-labels{margin-bottom:clamp(1.2rem,2vw,1.6rem)}
  .hero-title{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
  .hero-page .hero-title{font-size:clamp(48px,9.5vw,126px)}
  .hero.hero-page{min-height:62vh}
}