/* =============================================================
   TRYVIS INVESTMENTS LIMITED — corporate design system
   Navy + Electric Blue + White

   Every colour below is either from the brand palette or derived
   from it (slate-neutrals sampled off the navy hue). Blue is a
   signal, not a surface: it marks actions, active state and
   emphasis. Surfaces stay white and near-white; navy carries the
   weight in the header, the hero, the stats band and the footer.
   ============================================================= */

:root{
  /* ---- brand ---- */
  --navy:        #0F172A;
  --blue:        #2563EB;
  --blue-hover:  #1D4ED8;
  --sky:         #38BDF8;
  --bg:          #F8FAFC;
  --surface:     #FFFFFF;
  --text:        #1E293B;
  --text-2:      #475569;

  /* ---- derived (navy-hued neutrals) ---- */
  --navy-deep:   #0B1220;   /* hero base, footer floor */
  --navy-soft:   #1B2740;   /* raised panels on navy */
  --surface-2:   #F1F5F9;   /* alternating section tone */
  --border:      #E2E8F0;
  --border-2:    #CBD5E1;
  --text-3:      #64748B;
  --on-navy:     #E2E8F0;   /* body text on navy */
  --on-navy-dim: #94A3B8;
  --hairline:    rgba(148,163,184,.20);
  --blue-wash:   #EFF6FF;   /* faintest blue tint */

  /* ---- elevation: soft, navy-tinted, never heavy ---- */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --sh-md: 0 2px 4px rgba(15,23,42,.04), 0 12px 24px -10px rgba(15,23,42,.12);
  --sh-lg: 0 4px 8px rgba(15,23,42,.04), 0 28px 56px -20px rgba(15,23,42,.20);
  --sh-blue: 0 10px 24px -10px rgba(37,99,235,.45);

  /* ---- radius: one small scale, used consistently ---- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  /* ---- spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;

  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease-s:cubic-bezier(.4, 0, .2, 1);

  --gut: clamp(20px, 5vw, 56px);
  --maxw: 1240px;
  --header-h: 80px;
}

/* ---------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* ---- type scale -------------------------------------------------
   display  → hero only
   h1       → page titles
   h2       → section titles
   h3       → card / row titles
   .lede    → supporting paragraph under a title
   body     → 16.5px / 1.65
   .eyebrow → small label above a title
-------------------------------------------------------------------*/
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--navy);
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.08; }
h2{ font-size:clamp(1.7rem, 3.1vw, 2.5rem); }
h3{ font-size:1.18rem; line-height:1.3; letter-spacing:-.011em; }
h4{ font-size:1rem; }
p{ margin:0 0 1.1em; max-width:70ch; }
strong{ color:var(--navy); font-weight:600; }

::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--r-sm); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* small label above a heading */
.label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); margin:0 0 var(--s-4);
}
.label::before{ content:''; width:24px; height:2px; background:var(--blue); border-radius:2px; flex:none; }
.on-dark .label,
.hero .label,
.page-hero .label{ color:var(--sky); }
.on-dark .label::before,
.hero .label::before,
.page-hero .label::before{ background:var(--sky); }

.lede{ font-size:clamp(1.02rem, 1.35vw, 1.16rem); color:var(--text-2); max-width:60ch; line-height:1.68; }
.on-dark{ color:var(--on-navy); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .lede{ color:var(--on-navy); }

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-sm);
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  letter-spacing:.005em; line-height:1.2; cursor:pointer;
  border:1.5px solid transparent;
  transition:background-color .2s var(--ease-s), color .2s var(--ease-s),
             border-color .2s var(--ease-s), box-shadow .2s var(--ease-s),
             transform .15s var(--ease-s);
}
.btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--sh-blue); }
.btn-primary:hover{ background:var(--blue-hover); border-color:var(--blue-hover); }

.btn-secondary{ background:var(--surface); color:var(--blue); border-color:var(--blue); }
.btn-secondary:hover{ background:var(--blue-wash); }

/* on navy backgrounds */
.btn-line{ background:transparent; color:#fff; border-color:rgba(226,232,240,.38); }
.btn-line:hover{ background:rgba(255,255,255,.08); border-color:rgba(226,232,240,.75); }

.btn-dark{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-dark:hover{ background:#1C2942; border-color:#1C2942; }

.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:16px 34px; font-size:1.02rem; }

/* ---------------------------------------------------------- header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:var(--navy);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease-s), border-color .3s var(--ease-s), box-shadow .3s var(--ease-s);
}
.site-header.is-stuck{
  background:rgba(15,23,42,.94);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 30px -18px rgba(15,23,42,.6);
}
.header-row{ display:flex; align-items:center; gap:var(--s-5); height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; }
.brand-logo{ height:42px; width:auto; }
.brand-mark{
  width:36px; height:36px; flex:none; border-radius:50%;
  border:2px solid var(--sky); position:relative;
}
.brand-mark::before{ content:''; position:absolute; inset:7px; border:2px solid rgba(255,255,255,.62); border-radius:50%; }
.brand-mark::after{
  content:''; position:absolute; left:50%; top:-5px; width:2px; height:9px;
  background:var(--sky); transform:translateX(-50%); border-radius:1px;
}
.brand-name{
  font-family:var(--font-display); font-variation-settings:'wdth' 96;
  font-weight:700; font-size:1.08rem; letter-spacing:-.006em;
  color:#fff; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-sub{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.64rem; letter-spacing:.16em; color:var(--on-navy-dim);
  text-transform:uppercase; margin-top:3px;
}

.main-nav{ display:flex; align-items:center; gap:var(--s-6); }
.main-nav a{
  position:relative; color:var(--on-navy); font-size:.95rem; font-weight:500;
  padding-block:8px; transition:color .2s var(--ease-s);
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--sky); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after,.main-nav a.is-current::after{ transform:scaleX(1); }
.main-nav a.is-current{ color:var(--sky); }

.header-cta{ display:flex; align-items:center; gap:var(--s-4); }
.header-phone{ color:#fff; font-size:.94rem; font-weight:600; white-space:nowrap; }
.header-phone span{
  display:block; color:var(--on-navy-dim); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:1px;
}
.header-row .btn{ padding:11px 22px; font-size:.92rem; }

/* burger --------------------------------------------------- */
.burger{
  display:none; width:44px; height:44px; flex:none;
  background:transparent; border:1px solid rgba(226,232,240,.30); border-radius:var(--r-sm);
  padding:0; cursor:pointer; position:relative;
  transition:border-color .2s, background-color .2s;
}
.burger:hover{ border-color:var(--sky); background:rgba(56,189,248,.10); }
.burger i{
  position:absolute; left:12px; height:2px; width:20px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease), opacity .18s var(--ease-s), width .3s var(--ease);
}
.burger i:nth-child(1){ top:15px; }
.burger i:nth-child(2){ top:21px; width:14px; }
.burger i:nth-child(3){ top:27px; }
body.nav-open .burger i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger i:nth-child(2){ opacity:0; }
body.nav-open .burger i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:20px; }

/* ------------------------------------------- left drawer (mobile) */
.nav-scrim{
  position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.60);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-s), visibility .28s;
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  width:min(84vw, 380px);
  background:var(--navy);
  border-right:1px solid var(--hairline);
  transform:translate3d(-101%,0,0);
  visibility:hidden;
  transition:transform .42s var(--ease), visibility .42s;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  will-change:transform;
}
body.nav-open .drawer{
  transform:translate3d(0,0,0); visibility:visible;
  box-shadow:24px 0 60px rgba(11,18,32,.55);
}

.drawer-head .brand-name{ white-space:normal; font-size:1.02rem; line-height:1.2; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:20px var(--s-5); border-bottom:1px solid var(--hairline);
}
.drawer-close{
  width:42px; height:42px; flex:none; background:transparent; cursor:pointer;
  border:1px solid rgba(226,232,240,.26); border-radius:var(--r-sm);
  color:#fff; font-size:1.3rem; line-height:1;
  display:grid; place-items:center;
  transition:border-color .2s, background-color .2s;
}
.drawer-close:hover{ border-color:var(--sky); background:rgba(56,189,248,.12); }

.drawer-nav{ padding:var(--s-2) 0; }
.drawer-nav a{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:15px var(--s-5);
  font-family:var(--font-display); font-variation-settings:'wdth' 100;
  font-weight:600; font-size:1.34rem; letter-spacing:-.014em; color:#fff;
  border-bottom:1px solid rgba(148,163,184,.12);
  border-left:3px solid transparent;
  transition:background-color .2s var(--ease-s), border-left-color .2s var(--ease-s), padding-left .28s var(--ease);
}
.drawer-nav a b{
  font-family:var(--font-body); font-weight:400; font-size:.78rem;
  letter-spacing:.01em; color:var(--on-navy-dim); line-height:1.4;
}
.drawer-nav a:hover{ background:rgba(56,189,248,.07); padding-left:30px; }
.drawer-nav a.is-current{ background:rgba(37,99,235,.14); border-left-color:var(--sky); }
.drawer-nav a.is-current b{ color:var(--sky); }

.drawer-foot{ margin-top:auto; padding:var(--s-5); border-top:1px solid var(--hairline); }
.drawer-foot .btn{ width:100%; margin-bottom:var(--s-4); }
.drawer-foot p{ margin:0 0 7px; font-size:.93rem; color:var(--on-navy); }
.drawer-foot a{ color:#fff; }
.drawer-foot a:hover{ color:var(--sky); }
.drawer-foot small{ display:block; margin-top:var(--s-3); color:var(--on-navy-dim); font-size:.79rem; line-height:1.5; }

/* ---------------------------------------------------------- hero */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(580px, 90svh, 880px);
  display:flex; align-items:flex-end;
  background:var(--navy-deep);
  padding-top:var(--header-h);
  overflow:hidden;
}
.hero-slides{ position:absolute; inset:0; z-index:-2; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center right;
  opacity:0; transform:scale(1.045);
  transition:opacity 1.2s var(--ease-s), transform 9s linear;
  will-change:opacity, transform;
}
.hero-slide.is-active{ opacity:1; transform:scale(1); }
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, var(--navy-deep) 1%, rgba(11,18,32,.30) 40%, rgba(11,18,32,0) 66%),
    linear-gradient(to right, rgba(11,18,32,.90) 0%, rgba(11,18,32,.42) 52%, rgba(11,18,32,.06) 100%);
}

.hero-inner{ position:relative; padding-block:clamp(48px, 9vh, 92px) 0; width:100%; }
.hero-copy{ max-width:min(100%, 780px); }
.hero h1{
  color:#fff; font-size:clamp(2.4rem, 5.2vw, 4.1rem);
  letter-spacing:-.028em; line-height:1.05;
  margin-bottom:var(--s-5); max-width:14ch;
}
.hero-lede{
  color:var(--on-navy); font-size:clamp(1.04rem, 1.4vw, 1.24rem);
  line-height:1.6; max-width:56ch; margin:0;
}
.hero-lede b{ color:var(--sky); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7); }

.hero-foot{
  position:relative; margin-top:clamp(40px, 7vh, 84px);
  border-top:1px solid var(--hairline);
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--s-6);
  padding-block:var(--s-5) var(--s-5);
}
.slide-dots{ display:flex; gap:var(--s-2); }
.slide-dots button{
  width:44px; height:3px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:rgba(148,163,184,.30); position:relative; overflow:hidden;
}
.slide-dots button::after{
  content:''; position:absolute; inset:0; background:var(--sky); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
}
.slide-dots button.is-active::after{ animation:dotfill 6s linear forwards; }
@keyframes dotfill{ to{ transform:scaleX(1);} }

.hero-marks{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); justify-self:end;
  font-size:.87rem; color:var(--on-navy-dim); text-align:right;
}
.hero-marks b{ color:#fff; font-weight:600; }

/* ------------------------------------------------- inner page hero */
.page-hero{
  position:relative; isolation:isolate; background:var(--navy-deep);
  padding:calc(var(--header-h) + clamp(64px, 9vw, 120px)) 0 clamp(56px, 7vw, 96px);
  overflow:hidden;
}
.page-hero .hero-slide{ z-index:-2; opacity:1; transform:none; transition:none; background-position:center; }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right, rgba(11,18,32,.93), rgba(11,18,32,.52) 58%, rgba(11,18,32,.10));
}
.page-hero h1{ max-width:20ch; }
.crumb{ display:flex; gap:10px; align-items:center; font-size:.84rem; color:var(--on-navy-dim); margin-bottom:var(--s-5); }
.crumb a:hover{ color:var(--sky); }
.crumb i{ width:12px; height:1px; background:var(--on-navy-dim); display:inline-block; }

/* ---------------------------------------------------------- sections */
.section{ padding-block:clamp(60px, 8vw, 112px); }
.section--bg{ background:var(--bg); }
.section--white{ background:var(--surface); }
.section--tint{ background:var(--surface-2); }
.section--navy{ background:var(--navy); color:var(--on-navy); }

.sec-head{ max-width:64ch; margin-bottom:clamp(36px, 4.5vw, 60px); }
.sec-head.is-split{
  max-width:none; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,64px); align-items:end;
}
.sec-head h2{ margin-bottom:0; }
.sec-head.is-split p{ margin-bottom:0; }
.sec-head > h2 + .lede{ margin-top:var(--s-4); }

/* ----------------------------------------------- industries strip */
.strip{ background:var(--surface); border-block:1px solid var(--border); padding-block:var(--s-6); overflow:hidden; }
.strip-note{
  color:var(--text-3); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  text-align:center; margin:0; font-weight:600;
}
.marquee{
  display:flex; overflow:hidden; margin-top:var(--s-4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; align-items:center; gap:var(--s-8); padding-right:var(--s-8); animation:slide-x 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide-x{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }
.partner-logo{ height:44px; width:auto; flex:none; opacity:.92; transition:opacity .2s, transform .2s; }
.partner-logo:hover{ opacity:1; transform:translateY(-1px); }
.partner-word{
  flex:none; font-family:var(--font-display); font-variation-settings:'wdth' 96;
  font-weight:600; font-size:1rem; color:var(--text-3); white-space:nowrap;
}

/* -------------------------------------------------- service index */
.svc-index{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); overflow:hidden;
}
.svc-row{
  display:grid; grid-template-columns:128px minmax(0,1fr) auto;
  gap:clamp(16px,2.6vw,28px); align-items:center;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.8vw,38px);
  border-bottom:1px solid var(--border);
  position:relative;
  transition:background-color .25s var(--ease-s);
}
.svc-row:last-child{ border-bottom:0; }
.svc-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue);
  transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.svc-row:hover{ background:var(--blue-wash); }
.svc-row:hover::before{ transform:scaleY(1); }
.svc-photo{
  width:128px; height:128px; flex:none; border-radius:var(--r);
  overflow:hidden; background:var(--surface-2); border:1px solid var(--border);
  box-shadow:var(--sh-xs);
}
.svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.svc-row:hover .svc-photo img{ transform:scale(1.07); }
.svc-text h3{ margin:0 0 4px; font-size:clamp(1.1rem,1.5vw,1.3rem); transition:color .2s var(--ease-s); }
.svc-row:hover .svc-text h3{ color:var(--blue); }
.svc-text p{ margin:0; color:var(--text-2); font-size:.95rem; max-width:58ch; }
.svc-mark{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--border-2); display:grid; place-items:center;
  color:var(--blue); font-size:1rem; line-height:1;
  transition:background-color .25s var(--ease-s), border-color .25s var(--ease-s), color .25s var(--ease-s);
}
.svc-row:hover .svc-mark{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ----------------------------------------------------- brand strip */
.brand-strip{ margin-top:clamp(36px,4vw,54px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--border); }
.brand-strip-label{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--text-3); margin:0 0 var(--s-4);
}
.brand-strip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,36px); }
.brand-strip-row img{
  height:52px; width:auto; max-width:130px; object-fit:contain;
  opacity:.95; transition:opacity .2s, transform .2s;
}
.brand-strip-row img:hover{ opacity:1; transform:translateY(-1px); }

/* -------------------------------------------------------- stat band */
.stat-band{ position:relative; isolation:isolate; background:var(--navy); overflow:hidden; }
.stat-band .hero-slide{ z-index:-2; opacity:.45; transform:none; transition:none; background-position:center; }
.stat-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(15,23,42,.95) 32%, rgba(22,37,68,.78));
}
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
}
.stat-grid > div{ background:rgba(15,23,42,.72); padding:clamp(24px,2.8vw,36px) clamp(18px,2.2vw,30px); }
.stat-val{
  display:block; font-family:var(--font-display); font-variation-settings:'wdth' 100;
  font-weight:700; font-size:clamp(2rem,3.6vw,3rem); line-height:1;
  color:var(--sky); letter-spacing:-.03em; margin-bottom:var(--s-3);
}
.stat-lab{ display:block; color:var(--on-navy); font-size:.92rem; line-height:1.5; max-width:24ch; }

/* ---------------------------------------------------------- gallery */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(128px, 14vw, 195px); gap:var(--s-4);
}
.gallery figure{
  margin:0; overflow:hidden; position:relative;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--sh-xs);
  transition:box-shadow .3s var(--ease-s);
}
.gallery figure:hover{ box-shadow:var(--sh-md); }
.gallery figure:first-child{ grid-column:span 2; grid-row:span 2; }
.gallery figure:nth-child(6){ grid-column:span 2; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px;
  background:linear-gradient(to top, rgba(11,18,32,.88), transparent);
  color:#fff; font-size:.88rem; font-weight:500;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease-s), transform .3s var(--ease);
}
.gallery figure:hover figcaption{ opacity:1; transform:none; }
.gallery .is-empty{
  display:grid; place-items:center; text-align:center; padding:var(--s-4);
  color:var(--text-3); font-size:.82rem; line-height:1.45;
  background:
    repeating-linear-gradient(135deg, rgba(148,163,184,.08) 0 10px, transparent 10px 20px),
    var(--surface-2);
}

/* ------------------------------------------------------------ split */
.split{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px, 5vw, 80px); align-items:start;
}
.split-aside{ position:sticky; top:calc(var(--header-h) + 24px); }

/* ------------------------------------------------- feature cards */
.vmv{ display:grid; gap:var(--s-4); margin-top:var(--s-6); }
.vmv > div{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s-5) var(--s-6);
  box-shadow:var(--sh-xs);
  transition:box-shadow .25s var(--ease-s), border-color .25s var(--ease-s), transform .25s var(--ease-s);
}
.vmv > div:hover{ box-shadow:var(--sh-md); border-color:var(--border-2); transform:translateY(-2px); }
.vmv h3{ color:var(--navy); font-size:1.06rem; margin-bottom:.5em; display:flex; align-items:center; gap:10px; }
.vmv h3::before{
  content:''; width:8px; height:8px; border-radius:2px; flex:none;
  background:var(--blue);
}
.vmv p{ margin:0; font-size:.96rem; color:var(--text-2); }

/* registration/licence badges on the About page */
.reg-strip{ margin-top:34px; padding-top:26px; border-top:1px solid var(--border); }
.reg-strip-label{
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--text-3); margin:0 0 12px;
}
.reg-strip-row{ display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.92rem; color:var(--text-2); }
.reg-strip-row b{ color:var(--navy); font-weight:600; }

/* ------------------------------------------------------------- CTA
   A navy panel floated on a light section, so it reads as a
   deliberate call to action and stays visually separate from the
   navy footer directly beneath it.                                 */
.cta{ background:var(--surface-2); padding-inline:var(--gut); }
.cta .wrap{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(38px,4.6vw,64px) clamp(26px,3.6vw,56px);
  padding-inline:clamp(26px,3.6vw,56px);
  border-radius:var(--r-lg);
  background:
    radial-gradient(760px 340px at 82% 15%, rgba(37,99,235,.34), transparent 64%),
    var(--navy);
  box-shadow:var(--sh-lg);
  display:grid; grid-template-columns:1.3fr auto; gap:var(--s-7); align-items:center;
  color:var(--on-navy);
}
.cta .wrap::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(circle at 1px 1px, rgba(148,163,184,.16) 1px, transparent 0);
  background-size:24px 24px;
}
.cta h2{ color:#fff; margin:0; max-width:19ch; }
.cta p{ color:var(--on-navy); margin:var(--s-3) 0 0; max-width:52ch; }

/* ---------------------------------------------------------- contact */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4.5vw,68px); }
.contact-lines{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); margin-top:var(--s-5); overflow:hidden;
}
.contact-lines div{
  display:grid; grid-template-columns:104px 1fr; gap:var(--s-4); align-items:baseline;
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border);
}
.contact-lines div:last-child{ border-bottom:0; }
.contact-lines .k{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); font-weight:600;
}
.contact-lines .v{ font-size:1rem; color:var(--text); font-weight:500; }
.contact-lines .v a{ color:var(--navy); transition:color .18s var(--ease-s); }
.contact-lines .v a:hover{ color:var(--blue); }
.contact-lines .v small{ display:block; font-weight:400; font-size:.84rem; color:var(--text-2); margin-top:2px; }

.form{
  background:var(--surface); border:1px solid var(--border);
  padding:clamp(24px,3.2vw,42px); border-radius:var(--r-lg);
  display:grid; gap:var(--s-4); box-shadow:var(--sh-lg);
}
.form h3{ margin:0 0 2px; }
.form > p{ color:var(--text-2); font-size:.95rem; margin:0 0 var(--s-2); }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.form label{
  display:grid; gap:7px; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); font-weight:600;
}
.form input,.form textarea{
  background:var(--bg); border:1.5px solid var(--border-2);
  color:var(--text); padding:13px 15px; border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:1rem; font-weight:400; width:100%;
  letter-spacing:normal; text-transform:none;
  transition:border-color .2s var(--ease-s), background-color .2s var(--ease-s), box-shadow .2s var(--ease-s);
}
.form input::placeholder,.form textarea::placeholder{ color:#94A3B8; }
.form input:focus,.form textarea:focus{
  outline:none; border-color:var(--blue); background:var(--surface);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.form textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.form .btn{ margin-top:var(--s-1); }
.form-note{
  background:var(--blue-wash); border:1px solid #BFDBFE; border-left:3px solid var(--blue);
  border-radius:var(--r-sm); padding:12px 16px; color:#1E40AF; font-size:.93rem; margin:0;
}

/* ----------------------------------------------------------- footer */
.site-footer{ background:var(--navy); color:var(--on-navy-dim); padding-top:clamp(52px,6.5vw,84px); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:clamp(28px,3.5vw,52px); padding-bottom:clamp(38px,4.5vw,60px);
}
.footer-grid h4{
  color:#fff; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--font-body); font-weight:600; margin-bottom:var(--s-4);
}
.footer-grid p,.footer-grid li{ font-size:.92rem; margin:0 0 10px; color:var(--on-navy-dim); line-height:1.55; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid a{ transition:color .18s var(--ease-s); }
.footer-grid a:hover{ color:var(--sky); }
.footer-brand .brand-name{ font-size:1.22rem; white-space:normal; }
.footer-brand p{ max-width:38ch; margin-top:var(--s-3); color:var(--on-navy); }
.footer-tin{
  display:inline-block; margin-top:var(--s-3); padding:5px 12px; border-radius:var(--r-sm);
  border:1px solid var(--hairline); color:var(--on-navy); font-size:.78rem; letter-spacing:.05em;
}

.footer-bottom{
  border-top:1px solid var(--hairline);
  padding-block:var(--s-5) clamp(78px, 7vw, 92px);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  align-items:center; justify-content:space-between; font-size:.85rem;
}

/* JamiiTek credit */
.jt{ display:inline-flex; align-items:baseline; gap:8px; color:var(--on-navy-dim); font-size:.85rem; }
.jt-name{
  position:relative;
  font-family:var(--font-display); font-variation-settings:'wdth' 100;
  font-weight:700; font-size:.97rem; letter-spacing:-.005em;
  background:linear-gradient(96deg, var(--blue) 0%, var(--sky) 42%, #BAE6FD 52%, var(--sky) 62%, var(--blue) 100%);
  background-size:260% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:background-position .9s var(--ease);
}
.jt-name::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:linear-gradient(90deg, var(--blue), var(--sky));
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.jt:hover .jt-name{ background-position:100% 0; }
.jt:hover .jt-name::after{ transform:scaleX(1); transform-origin:left; }

/* --------------------------------------------------- whatsapp float */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  height:54px; padding:0 18px 0 16px; border-radius:30px;
  background:#1EA85A; color:#fff; font-weight:600; font-size:.93rem;
  box-shadow:0 10px 26px -10px rgba(15,23,42,.5);
  transition:transform .2s var(--ease-s), background-color .2s;
}
.wa svg{ width:23px; height:23px; flex:none; fill:currentColor; }
.wa span{ display:none; }
.wa:hover{ transform:translateY(-2px); background:#17924D; }
@media (min-width:640px){ .wa span{ display:inline; } }

/* ------------------------------------------------------- responsive */
@media (max-width:1080px){
  .main-nav,.header-phone{ display:none; }
  .burger{ display:block; }
  .header-row .btn{ display:none; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .cta .wrap{ grid-template-columns:1fr; gap:var(--s-5); }
}
@media (max-width:900px){
  .sec-head.is-split{ grid-template-columns:1fr; align-items:start; gap:var(--s-4); }
  .svc-row{ grid-template-columns:92px 1fr auto; gap:var(--s-3); align-items:center; }
  .svc-photo{ width:92px; height:92px; }
  .svc-mark{ align-self:center; }
  .split{ grid-template-columns:1fr; }
  .split-aside{ position:static; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-foot{ grid-template-columns:1fr; gap:var(--s-4); }
  .hero-marks{ justify-self:start; text-align:left; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery figure:nth-child(6){ grid-column:span 1; }
}
@media (max-width:620px){
  :root{ --header-h:68px; }
  body{ font-size:16px; line-height:1.62; }
  .header-row{ gap:var(--s-3); }
  .header-cta{ gap:10px; }
  .brand{ gap:10px; }
  .brand-name{ white-space:normal; font-size:.93rem; line-height:1.15; }
  .brand-sub{ font-size:.59rem; letter-spacing:.12em; }
  .brand-logo{ height:34px; }
  .brand-mark{ width:30px; height:30px; }
  .burger{ width:42px; height:42px; }
  .burger i{ left:11px; }

  .hero{ min-height:clamp(540px,86svh,740px); }
  .hero-copy{ max-width:100%; }
  .hero h1{ max-width:100%; font-size:clamp(2.05rem,8.4vw,2.6rem); }
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 100%; }

  .section{ padding-block:clamp(48px,11vw,68px); }
  .svc-row{ padding:var(--s-4) var(--s-3); grid-template-columns:76px 1fr auto; gap:var(--s-2); }
  .svc-photo{ width:76px; height:76px; }
  .svc-mark{ display:none; }
  .form-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .gallery{ gap:10px; }
  .gallery figure:first-child{ grid-column:span 2; grid-row:span 1; }
  .stat-grid{ grid-template-columns:1fr; }
  .contact-lines div{ grid-template-columns:1fr; gap:2px; }
  .btn{ padding:14px 22px; }
}

/* ------------------------------------------------ entrance reveals */
[data-reveal]{ opacity:0; transform:translateY(16px); }
.js-ready [data-reveal]{ transition:opacity .6s var(--ease-s), transform .6s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
html:not(.js-ready) [data-reveal]{ opacity:1; transform:none; }

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

@media print{
  .site-header,.drawer,.nav-scrim,.wa,.hero-foot{ display:none !important; }
  body{ background:#fff; color:#000; }
}