/* ============================================================
   SUMMIT 13 — Design System
   Palette derived strictly from the logo (#738C96 + mountain tints)
   ============================================================ */
:root{
  /* Brand scale */
  --ink-900:#101619;
  --ink-850:#151E22;
  --ink-800:#1B262B;
  --ink-700:#26343A;
  --slate-700:#3A4C55;
  --slate-600:#4A5D66;
  --slate-500:#738C96;   /* BRAND */
  --slate-400:#93A8B0;
  --slate-300:#B8C7CD;
  --slate-200:#D6E1E5;
  --slate-100:#E9F0F2;
  --mist:#CFE0E6;        /* mountain highlight from logo */
  --paper:#F6F9FA;
  --white:#FFFFFF;

  --text:var(--ink-800);
  --text-soft:#5A6B73;
  --line:rgba(16,22,25,.10);

  /* Type */
  --font-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Fluid type scale */
  --fs-hero:clamp(2rem,1rem + 3.1vw,3.5rem);
  --fs-h2:clamp(1.8rem,1.1rem + 2.5vw,3rem);
  --fs-h3:clamp(1.125rem,1.02rem + .42vw,1.35rem);
  --fs-lead:clamp(1.05rem,.98rem + .42vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-eyebrow:.75rem;

  /* Space */
  --gutter:clamp(1.25rem,.6rem + 2.6vw,3rem);
  --section-y:clamp(2.6rem,1.6rem + 3.2vw,4.75rem);
  --maxw:1240px;
  --radius:14px;
  --radius-lg:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:clamp(5rem,8vw,7rem)}
body{margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img, svg, video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button, input, textarea{font:inherit;color:inherit}
h1, h2, h3, h4{font-family:var(--font-display);font-weight:600;line-height:1.08;
  letter-spacing:-.028em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--slate-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--slate-500);color:#fff}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink-900);
  color:#fff;padding:.85rem 1.25rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Eyebrow / section head ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-500);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.section-head{margin-bottom:clamp(1.6rem,1rem + 1.8vw,2.4rem)}
.section-head h2{font-size:var(--fs-h2);margin-bottom:1.1rem}
.section-head p{font-size:var(--fs-lead);color:var(--text-soft);text-wrap:pretty}

/* ---------- Buttons ---------- */
.btn{--btn-bg:var(--slate-500);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;padding:.95rem 1.75rem;border:0;border-radius:100px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-display);font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out-expo),box-shadow .45s var(--ease);
  box-shadow:0 1px 2px rgba(16,22,25,.14),0 8px 24px -12px rgba(74,93,102,.55)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--slate-600),var(--ink-700));
  opacity:0;transition:opacity .45s var(--ease)}
.btn:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,22,25,.16),0 20px 40px -18px rgba(74,93,102,.75)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(-1px)}
.btn .btn-ico{transition:transform .45s var(--ease-out-expo)}
.btn:hover .btn-ico{transform:translateX(4px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.btn--ghost::after{background:rgba(255,255,255,.1)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.btn--dark{--btn-bg:var(--ink-800)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;inset:0 0 auto;z-index:100;
  padding-block:clamp(.9rem,.6rem + .9vw,1.4rem);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             box-shadow .5s var(--ease),padding .5s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(16,22,25,.55),transparent);
  opacity:1;transition:opacity .5s var(--ease)}
.site-header.is-stuck{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 var(--line),0 8px 30px -18px rgba(16,22,25,.4);
  padding-block:.7rem}
.site-header.is-stuck::before{opacity:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:clamp(30px,2.4vw,38px);width:auto;transition:filter .5s var(--ease)}
/* logo artwork is slate — invert to white while sitting over the dark hero */
.site-header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}

.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.2vw,2.6rem)}
.nav a{position:relative;font-size:.94rem;font-weight:500;color:#fff;
  opacity:.86;transition:opacity .3s var(--ease),color .5s var(--ease)}
.site-header.is-stuck .nav a{color:var(--ink-800)}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out-expo)}
.nav a:hover{opacity:1}
.nav a:hover::after, .nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.header-cta{display:flex;align-items:center;gap:1rem}
.header-cta .btn{padding:.7rem 1.35rem;font-size:.88rem}
.site-header.is-stuck .btn--ghost{--btn-fg:var(--ink-800);
  box-shadow:inset 0 0 0 1px rgba(16,22,25,.2)}
.site-header.is-stuck .btn--ghost::after{background:rgba(16,22,25,.06)}

/* Burger */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:22px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .45s var(--ease-out-expo),opacity .3s,background .5s}
.site-header.is-stuck .burger span{background:var(--ink-800)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--ink-900);
  display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  padding:var(--gutter);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .8s var(--ease-out-expo);visibility:hidden}
.mobile-nav.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.mobile-nav a{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,8vw,2.8rem);letter-spacing:-.03em;color:#fff;
  padding-block:.35rem;opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .6s var(--ease-out-expo)}
.mobile-nav.is-open a{opacity:1;transform:none}
.mobile-nav.is-open a:nth-child(1){transition-delay:.14s}
.mobile-nav.is-open a:nth-child(2){transition-delay:.20s}
.mobile-nav.is-open a:nth-child(3){transition-delay:.26s}
.mobile-nav.is-open a:nth-child(4){transition-delay:.32s}
.mobile-nav .m-contact{margin-top:2rem;font-family:var(--font-body);
  font-size:1rem;font-weight:400;color:var(--slate-400);letter-spacing:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ink-900);color:#fff;overflow:hidden;isolation:isolate;
  padding-top:clamp(6rem,8vw,7.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}

/* -- Layer 1: aurora mesh -- */
@keyframes drift-a{to{transform:translate3d(10vw,6vh,0) scale(1.18)}}
@keyframes drift-b{to{transform:translate3d(-9vw,10vh,0) scale(1.24)}}
@keyframes drift-c{to{transform:translate3d(6vw,-9vh,0) scale(.86)}}

/* -- Layer 2: engineering grid -- */
@keyframes grid-pan{to{background-position:76px 76px}}

/* -- Layer 3: parallax mountain ridges (the "summit" motif) -- */
.hero-ridges{position:absolute;inset:auto 0 0;z-index:-3;pointer-events:none;line-height:0}
.hero-ridges svg{width:100%;height:auto;display:block}
.ridge{will-change:transform}
.ridge-far{opacity:.30}
.ridge-mid{opacity:.52}
.ridge-near{opacity:.88}

/* -- Layer 4: film grain -- */
.hero-grain{position:absolute;inset:0;z-index:-2;opacity:.15;pointer-events:none;
  mix-blend-mode:overlay;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-3%,-4%)}
  33%{transform:translate(4%,-2%)}    50%{transform:translate(-2%,4%)}
  66%{transform:translate(3%,3%)}     83%{transform:translate(-4%,1%)}}

/* -- Vignette -- */

/* -- Hero content -- */
.hero-inner{position:relative;z-index:2;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem 1.05rem .5rem .6rem;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:.775rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate-200);margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mist);
  box-shadow:0 0 0 4px rgba(207,224,230,.18);animation:pulse-dot 2.6s var(--ease) infinite;
  flex:none}

.hero h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.042em;
  line-height:1.04;max-width:none;margin-bottom:clamp(1.4rem,2.6vw,2rem);text-wrap:balance}
.hero h1 .accent{
  background:linear-gradient(105deg,var(--mist) 8%,var(--slate-400) 48%,var(--mist) 92%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s var(--ease) infinite}
@keyframes sheen{0%,100%{background-position:180% 0}50%{background-position:-40% 0}}

.hero-lead{font-size:var(--fs-lead);color:var(--slate-300);
  margin-bottom:clamp(2rem,3.4vw,2.8rem);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* -- Word-mask reveal for the H1 -- */
.reveal-line{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.reveal-word{display:inline-block;will-change:transform}
.js .hero h1 .reveal-word{transform:translateY(110%)}
.js .hero.is-ready h1 .reveal-word{transform:none;
  transition:transform 1.05s var(--ease-out-expo)}
.js .hero-eyebrow, .js .hero-lead, .js .hero-actions{
  opacity:0;transform:translateY(20px)}
.js .hero.is-ready .hero-eyebrow, .js .hero.is-ready .hero-lead, .js .hero.is-ready .hero-actions{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform 1s var(--ease-out-expo)}
.js .hero.is-ready .hero-eyebrow{transition-delay:.05s}
.js .hero.is-ready .hero-lead{transition-delay:.42s}
.js .hero.is-ready .hero-actions{transition-delay:.56s}




/* ============================================================
   FIGURES BAND  (plinth beneath the hero)
   ============================================================ */
.stats-band{background:var(--ink-900);color:#fff;
  padding-block:clamp(1.5rem,2.2vw,2rem);
  border-top:1px solid rgba(255,255,255,.07)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem)}
.stat{position:relative;padding-left:clamp(1.1rem,2vw,1.6rem)}
.stat::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
  width:2px;background:linear-gradient(to bottom,var(--slate-500),transparent)}
.stat b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,1.2rem + 2.4vw,3.1rem);letter-spacing:-.035em;
  color:#fff;line-height:1;margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.9rem;color:var(--slate-400);line-height:1.5;display:block;
  max-width:24ch}
@media (max-width:720px){
  .stats-grid{grid-template-columns:1fr;gap:1.5rem}
}

/* ============================================================
   SCROLL REVEAL UTILITIES
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform 1s var(--ease-out-expo)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="left"]{transform:translateX(-34px)}
.js [data-reveal="right"]{transform:translateX(34px)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal].is-in{transform:none}

/* ============================================================
   MARQUEE / CAPABILITY TICKER
   ============================================================ */
.ticker{background:var(--ink-900);color:var(--slate-400);
  padding-block:1.15rem;overflow:hidden;position:relative;
  border-top:1px solid rgba(255,255,255,.08)}
.ticker::before, .ticker::after{content:"";position:absolute;top:0;bottom:0;width:14%;
  z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--ink-900),transparent)}
.ticker-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:.85rem;
  padding-inline:1.5rem;font-size:.85rem;font-weight:500;letter-spacing:.02em;
  white-space:nowrap}
.ticker-item::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--slate-600)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(2.5rem,5vw,5.5rem);align-items:stretch}
.about-media{position:relative;display:flex;flex-direction:column}
.about-media .frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  flex:1;min-height:440px;background:var(--slate-100)}
.about-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.4s var(--ease-out-expo)}
.about-media:hover img{transform:scale(1)}
.about-media .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 45%,rgba(16,22,25,.34))}
/* floating credential card */
.about-badge{position:absolute;right:clamp(-1rem,-2vw,-2.5rem);bottom:-1.75rem;
  background:var(--ink-900);color:#fff;border-radius:var(--radius);
  padding:1.3rem 1.6rem;box-shadow:0 30px 60px -30px rgba(16,22,25,.6);
  display:flex;align-items:center;gap:1rem;max-width:270px}
.about-badge svg{flex:none;color:var(--mist)}
.about-badge b{display:block;font-family:var(--font-display);font-size:1.05rem;
  letter-spacing:-.02em;margin-bottom:.15rem}
.about-badge span{font-size:.8rem;color:var(--slate-400);line-height:1.45}
.about-copy h2{font-size:var(--fs-h2);margin-bottom:1.4rem}
.about-copy p{color:var(--text-soft);margin-bottom:1.1rem;text-wrap:pretty}
.about-points{display:grid;gap:.85rem;margin-top:1.9rem}
.about-points li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem}
.about-points svg{flex:none;margin-top:.28rem;color:var(--slate-500)}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--paper);position:relative;overflow:hidden}
.services::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(115,140,150,.16) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 72%)}
.services .wrap{position:relative;z-index:1}
/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--ink-900);color:#fff;position:relative;overflow:hidden}
.process::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(ellipse 58% 52% at 14% 26%,rgba(115,140,150,.30),transparent 64%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 100%)}
.process .wrap{position:relative;z-index:1}
.process .section-head h2{color:#fff}
.process .section-head p{color:var(--slate-400)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.2rem);
  counter-reset:step}
.step{position:relative;padding-top:2.6rem}
.step::before{counter-increment:step;content:"0" counter(step);
  position:absolute;top:0;left:0;font-family:var(--font-display);font-weight:600;
  font-size:.85rem;letter-spacing:.1em;color:var(--slate-500)}
.step::after{content:"";position:absolute;top:.55rem;left:2.6rem;right:-1.2rem;height:1px;
  background:linear-gradient(90deg,rgba(115,140,150,.5),transparent)}
.step:last-child::after{display:none}
.step h3{font-size:1.12rem;margin-bottom:.6rem;color:#fff}
.step p{font-size:.92rem;color:var(--slate-400);text-wrap:pretty}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--white)}

.form{display:grid;gap:1.05rem}
.field{position:relative}
.field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:.5rem}
.field input, .field textarea{width:100%;padding:.95rem 1.1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  font-size:1rem;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),
             background .4s var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus, .field textarea:focus{outline:none;background:var(--white);
  border-color:var(--slate-500);box-shadow:0 0 0 4px rgba(115,140,150,.16)}
.field input::placeholder, .field textarea::placeholder{color:var(--slate-400)}
.field.has-error input, .field.has-error textarea{border-color:#C0524B;
  box-shadow:0 0 0 4px rgba(192,82,75,.12)}
.field-err{display:block;font-size:.82rem;color:#C0524B;margin-top:.4rem;
  text-transform:none;letter-spacing:0;font-weight:500}
/* honeypot — must stay visually hidden but not display:none */
.hp-field{position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.3rem}
.form-note{font-size:.82rem;color:var(--text-soft);max-width:34ch}
.form-msg{padding:1rem 1.2rem;border-radius:var(--radius);font-size:.94rem;
  display:none}
.form-msg.is-shown{display:block;animation:pop .5s var(--ease-out-expo)}
.form-msg.ok{background:rgba(115,140,150,.12);color:var(--slate-700);
  border:1px solid rgba(115,140,150,.35)}
.form-msg.err{background:rgba(192,82,75,.09);color:#9B3F39;
  border:1px solid rgba(192,82,75,.32)}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}}
.btn[aria-busy="true"]{pointer-events:none;opacity:.72}
.btn[aria-busy="true"] .btn-ico{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Contact details panel */
.contact-panel{background:var(--ink-900);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.5rem);position:relative;overflow:hidden}
.contact-panel::before{content:"";position:absolute;inset:0;opacity:.75;
  background:radial-gradient(ellipse 80% 60% at 90% 0%,rgba(115,140,150,.36),transparent 60%)}
.contact-panel > *{position:relative;z-index:1}
.contact-panel h3{font-size:1.35rem;margin-bottom:1.6rem;color:#fff}
.cdetail{display:flex;gap:1rem;align-items:flex-start;padding-block:1.05rem;
  border-top:1px solid rgba(255,255,255,.1)}
.cdetail:first-of-type{border-top:0;padding-top:0}
.cdetail svg{flex:none;margin-top:.15rem;color:var(--mist)}
.cdetail b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-400);font-weight:600;margin-bottom:.28rem}
.cdetail a, .cdetail span{color:#fff;font-size:.97rem;line-height:1.5}
.cdetail a{transition:color .3s var(--ease)}
.cdetail a:hover{color:var(--mist)}

/* ============================================================
   FOOTER
   ============================================================ */
/* No border-top: the CTA band above is the same ink ground, so a hairline here
   drew a visible line across what should read as one continuous surface. */
.site-footer{background:var(--ink-900);color:var(--slate-400);
  padding-block:clamp(1.7rem,2.2vw,2.1rem)}
.footer-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink-800);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(16,22,25,.5);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out-expo),visibility .5s}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .about-media .frame{flex:none;min-height:0;aspect-ratio:16/10}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .step:nth-child(2)::after{display:none}
    .about-grid{grid-template-columns:1fr;gap:3.5rem}
  .about-badge{right:1.25rem;bottom:-1.25rem}
}
@media (max-width:860px){
  .nav, .header-cta .btn--ghost{display:none}
  .burger{display:flex}
}
@media (max-width:620px){
    .steps{grid-template-columns:1fr;row-gap:2rem}
  .step::after{display:none}
  .header-cta .btn{display:none}
  .about-badge{position:static;margin-top:1.25rem;max-width:none}
}

/* ============================================================
   MOTION PREFERENCES / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal], .js .hero-eyebrow, .js .hero-lead, .js .hero-actions, .js .stat{opacity:1!important;transform:none!important}
  .js .hero h1 .reveal-word{transform:none!important}
  .ticker-track{animation:none}
}
@media print{
  .site-header, .to-top, .ticker, .map-band{display:none}
  /* reveals are opacity:0 until observed; on paper nothing observes them */
  .js [data-reveal], .js .hero-eyebrow, .js .hero-lead, .js .hero-actions, .js .stat{
    opacity:1!important;transform:none!important}
  .js .hero h1 .reveal-word{transform:none!important}
  /* print the Malta detail rather than a row of collapsed cards */
      .hero{min-height:auto;color:#000;background:#fff}
  body{color:#000}
}

/* Accent gradient survives the JS word-split in the H1 */
.hero h1 .accent .reveal-word{
  background:linear-gradient(105deg,var(--mist) 8%,var(--slate-400) 48%,var(--mist) 92%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s var(--ease) infinite}
.hero h1 .line{display:block}

/* ============================================================
   MALTA BAND
   ============================================================ */
.malta{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(2.8rem,4.4vw,4.5rem);color:#fff}
.malta-bg{position:absolute;inset:0;z-index:-2}
.malta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 72%;
  filter:brightness(.46) saturate(.85) contrast(1.05)}
.malta-inner{position:relative;z-index:1}
.malta-copy{max-width:740px}
.malta-copy h2{font-size:var(--fs-h2);color:#fff;margin-bottom:1.2rem}
.malta-copy p{color:var(--slate-200)}

/* ============================================================
   CONTACT — form, then details beside the map
   ============================================================ */
.form{display:grid;gap:1.05rem;max-width:860px;margin-bottom:clamp(3rem,5vw,4.5rem)}
.field label .opt{text-transform:none;font-weight:400;letter-spacing:0;
  color:var(--slate-400)}


/* ============================================================
   FOOTER
   ============================================================ */
.footer-credit a{color:var(--slate-200);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.34);text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.footer-credit a:hover{color:#fff;text-decoration-color:var(--mist)}

/* ============================================================
   TYPOGRAPHY — justified body copy
   ============================================================ */
/* Everything is left-aligned with a capped measure, per the design direction.
   Justification was the cause of the lopsided look: it sets every line flush to
   both edges, so a short final line reads as a stranded stub by contrast, and
   it also suppresses the browser's own orphan avoidance. Left-aligned, the
   short leads are balanced into even lines and long prose uses `pretty`, which
   pulls a word down rather than leaving one alone on the last line. */
.hero-lead, .section-head p, .step p, .intro-about p, .about-copy p, .malta-copy p{
  text-align:left;text-align-last:auto;
  -webkit-hyphens:manual;hyphens:manual;
  overflow-wrap:break-word}
/* short single-line strings must never be justified */
.form-note, .footer-reg, .footer-legal, .footer-credit, .footer-address, .stat span, .cdetail span, .about-points li span{
  text-align:left;-webkit-hyphens:manual;hyphens:manual}

/* ============================================================
   RESPONSIVE — new blocks
   ============================================================ */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:2.75rem}
    }

@media (max-width:620px){
              /* justification gets ugly in a narrow column */
  .hero-lead,.section-head p,.about-copy p,.malta-copy p,
}

/* ============================================================
   MOTION PREFERENCES — new blocks
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .scene-tile [class^="v-"], .scene-tile [class*=" v-"]{animation:none!important;
    opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  }

/* ============================================================
   TOUCH TARGETS
   Inline links in the footer and contact panel are only as tall as their
   text (18-21px). WCAG 2.5.8 wants 24px minimum, so give them a real hit
   area wherever the pointer is coarse.
   ============================================================ */
@media (pointer:coarse),(max-width:620px){
  .footer-credit a, .cdetail a{
    display:inline-block;padding-block:.34rem;min-height:24px}
}

/* ============================================================
   TICKER v2 — never pauses, mountain glyph separator
   ============================================================ */
.ticker-track{animation:marquee 52s linear infinite}
.ticker-item{padding-inline:0;gap:0;font-size:.86rem;letter-spacing:.015em;
  color:var(--slate-300)}
.ticker-item::after{content:none}
.ticker-sep{display:inline-flex;align-items:center;justify-content:center;
  padding-inline:1.25rem;color:var(--slate-600);flex:none}

/* ============================================================
   SECTION HEADS — stop the awkward wraps
   ============================================================ */
.section-head{max-width:none}
.section-head h2{text-wrap:balance;max-width:20ch}
.section-head p{text-wrap:pretty}
.malta-copy h2{text-wrap:balance;max-width:none}


/* ============================================================
   CONTACT v2 — form beside details, fields stacked
   ============================================================ */
.contact-row{display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
.form{display:grid;gap:1rem;max-width:none;margin-bottom:0}
.contact-panel{height:100%}

/* ============================================================
   MAP BAND — full width, closes the page
   ============================================================ */
.map-band{position:relative;line-height:0;background:var(--ink-900);isolation:isolate}
.map-plate{position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  left:clamp(1rem,6vw,5rem);max-width:340px;line-height:1.6;color:#fff;
  background:rgba(16,22,25,.93);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.map-eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-400);margin-bottom:.7rem}
.map-address{font-size:.95rem;color:var(--slate-200);margin-bottom:1.3rem}
.map-plate .btn{padding:.7rem 1.3rem;font-size:.85rem}

/* ============================================================
   RESPONSIVE v2
   ============================================================ */
@media (max-width:1024px){
  .contact-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{min-height:auto;padding-top:clamp(5.5rem,16vw,7rem);
    padding-bottom:clamp(3rem,8vw,4rem)}
  .map-plate{position:static;transform:none;max-width:none;border-radius:0;
    border-left:0;border-right:0;box-shadow:none}
}


/* ============================================================
   HERO v3 — copy left, colour scene right, service row beneath
   ============================================================ */
.hero-main{display:grid;grid-template-columns:1.22fr .78fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero-copy{min-width:0}

/* -- The rotating colour scene -- */
@keyframes scene-glow{to{transform:scale(1.12);opacity:.7}}


/* -- Nine equal service cards, one row, never ragged -- */












/* ============================================================
   SCENE ANIMATIONS — all continuous loops
   ============================================================ */
.scene-tile svg [class^="v-"], .scene-tile svg [class*=" v-"]{
  transform-box:fill-box;transform-origin:center}

/* Ledger */
.scene-tile .v-bar{transform-origin:bottom center;
  animation:bar-pump 3.4s var(--ease) infinite}
.scene-tile .v-bar-1{animation-delay:0s}
.scene-tile .v-bar-2{animation-delay:.22s}
.scene-tile .v-bar-3{animation-delay:.44s}
.scene-tile .v-bar-4{animation-delay:.66s}
@keyframes bar-pump{0%,100%{transform:scaleY(.35)}45%{transform:scaleY(1)}}
.scene-tile .v-badge{animation:badge-pop 3.4s var(--ease) infinite}
@keyframes badge-pop{0%,60%,100%{transform:scale(1)}72%{transform:scale(1.16)}}

/* Payroll */
.scene-tile .v-coin{animation:coin-bob 3.6s var(--ease) infinite}
.scene-tile .v-coin-1{animation-delay:0s}
.scene-tile .v-coin-2{animation-delay:.16s}
.scene-tile .v-coin-3{animation-delay:.32s}
@keyframes coin-bob{0%,100%{transform:translateY(0)}
                    38%{transform:translateY(-9px)}
                    62%{transform:translateY(0)}}
.scene-tile .v-slip{animation:slip-float 5s var(--ease) infinite alternate}
@keyframes slip-float{to{transform:translateY(-8px)}}

/* Tax */
.scene-tile .v-dial-fill{animation:dial-sweep 4s var(--ease) infinite}
@keyframes dial-sweep{0%{stroke-dashoffset:214}
                      45%,70%{stroke-dashoffset:58}
                      100%{stroke-dashoffset:214}}
.scene-tile .v-box{animation:box-tick 4s var(--ease) infinite}
.scene-tile .v-box-1{animation-delay:.2s}
.scene-tile .v-box-2{animation-delay:.55s}
.scene-tile .v-box-3{animation-delay:.9s}
@keyframes box-tick{0%,15%{transform:scale(.55);opacity:.35}
                    30%,80%{transform:scale(1);opacity:1}
                    100%{transform:scale(.55);opacity:.35}}

/* Startup */
.scene-tile .v-trail{animation:trail-flow 1.6s linear infinite}
@keyframes trail-flow{to{stroke-dashoffset:-40}}
.scene-tile .v-climber{animation:climb 5s var(--ease) infinite}
@keyframes climb{0%{transform:translate(0,0);opacity:0}
                 8%{opacity:1}
                 70%{transform:translate(114px,-96px);opacity:1}
                 85%,100%{transform:translate(114px,-96px);opacity:0}}
.scene-tile .v-flag{transform-origin:bottom center;
  animation:flag-sway 3.2s var(--ease) infinite alternate}
@keyframes flag-sway{to{transform:rotate(-5deg)}}
.scene-tile .v-spark{animation:spark 2.6s var(--ease) infinite}
.scene-tile .v-spark-2{animation-delay:.5s}
.scene-tile .v-spark-3{animation-delay:1s}
@keyframes spark{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

/* Funding */
.scene-tile .v-ring{opacity:0;transform-origin:center;
  animation:ring-out 3.6s var(--ease) infinite}
.scene-tile .v-ring-1{animation-delay:0s}
.scene-tile .v-ring-2{animation-delay:.5s}
.scene-tile .v-ring-3{animation-delay:1s}
@keyframes ring-out{0%{opacity:0;transform:scale(.55)}
                    30%{opacity:.75}
                    100%{opacity:0;transform:scale(1.15)}}
.scene-tile .v-core{animation:core-pulse 3.6s var(--ease) infinite}
@keyframes core-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.scene-tile .v-orbit{animation:orbit 4.4s var(--ease) infinite}
.scene-tile .v-orbit-2{animation-delay:.6s}
.scene-tile .v-orbit-3{animation-delay:1.2s}
@keyframes orbit{0%,100%{transform:translateY(0);opacity:.55}
                 50%{transform:translateY(-10px);opacity:1}}

/* ============================================================
   MAP — OpenStreetMap with our own pin
   ============================================================ */
.map-frame{position:relative;line-height:0}
.map-band:hover .map-pin{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
  animation:pin-drop 2.8s var(--ease) infinite}
.map-pin img{width:44px;height:44px;display:block}
@keyframes pin-drop{0%,100%{transform:translate(-50%,-100%)}
                    50%{transform:translate(-50%,-116%)}}

/* ============================================================
   WRAPPING — stop ragged headings and orphans site-wide
   ============================================================ */
h1, h2, h3{text-wrap:balance;overflow-wrap:break-word}
.section-head h2{max-width:none}
.section-head p{max-width:none;text-wrap:pretty}
.malta-copy h2{max-width:none}
.malta-copy p{max-width:none;text-wrap:pretty}
.step h3{text-wrap:balance}
.step p{text-wrap:pretty}
.about-copy h2{text-wrap:balance;max-width:none}
.about-copy p{text-wrap:pretty;max-width:58ch}
.hero-lead{text-wrap:pretty;max-width:none}
.stat span{text-wrap:pretty}
.contact-panel h3, .map-plate p{text-wrap:pretty}
.about-badge span{text-wrap:pretty}

/* ============================================================
   RESPONSIVE v3
   ============================================================ */
@media (max-width:1024px){
  .hero-main{grid-template-columns:1fr;gap:2.25rem}
  
}

@media (max-width:760px){
  .map-pin img{width:36px;height:36px}
}


@media (prefers-reduced-motion:reduce){
  .scene-tile svg [class^="v-"], .scene-tile svg [class*=" v-"]{
    animation:none!important;opacity:1!important;transform:none!important;
    stroke-dashoffset:58!important}
  .hero-scene::before, .map-pin{animation:none}
  
}

/* ============================================================
   HERO SCENES v2 — four shown at once, no captions
   ============================================================ */
.hero-scene{position:relative;width:100%;max-width:340px;margin-inline:auto;
  aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:clamp(.5rem,1.1vw,.85rem)}
.hero-scene::before{content:"";position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(95,200,222,.22),transparent 70%);
  filter:blur(26px);animation:scene-glow 7s var(--ease) infinite alternate;
  pointer-events:none;z-index:0}

.scene-tile{position:relative;z-index:1;display:grid;place-items:center;
  padding:12%;border-radius:18px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:tile-float 6.5s var(--ease) infinite alternate;
  animation-delay:calc(var(--i) * .55s)}
.scene-tile svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes tile-float{from{transform:translateY(0)}to{transform:translateY(-7px)}}

.js .hero-scene .scene-tile{opacity:0;transform:scale(.9)}
.js .hero.is-ready .hero-scene .scene-tile{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease-out-expo);
  transition-delay:calc(0.55s + var(--i) * 0.09s)}

/* ============================================================
   TICKER — the real company mark as the divider
   ============================================================ */
.ticker-sep img{width:18px;height:18px;display:block;opacity:.75;
  filter:brightness(0) invert(1)}

/* ============================================================
   MALTA — three audience cards, one row
   ============================================================ */
.malta::after{background:linear-gradient(180deg,rgba(11,16,19,.72) 0%,rgba(11,16,19,.52) 42%,rgba(11,16,19,.80) 100%)}
.malta-copy{max-width:760px}
.malta-cards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(2rem,3.4vw,2.8rem)}
.mcard{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:var(--radius-lg);color:#fff;
  background:rgba(16,22,25,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .55s var(--ease-out-expo),border-color .45s var(--ease),
             background .45s var(--ease)}
.mcard:hover{transform:translateY(-5px);border-color:rgba(207,224,230,.4);
  background:rgba(16,22,25,.68)}
.mcard-ico{display:grid;place-items:center;width:48px;height:48px;flex:none;
  border-radius:14px;background:rgba(207,224,230,.14);color:var(--mist)}
.mcard h3{font-size:1.1rem;color:#fff;letter-spacing:-.02em;text-wrap:balance}
.mcard p{font-size:.92rem;color:var(--slate-300);text-wrap:pretty;text-align:left}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-scene{max-width:300px;margin-inline:0}
}
@media (max-width:820px){
  .malta-cards{grid-template-columns:1fr;max-width:470px;margin-inline:auto}
  .mcard{align-items:center;text-align:center}
  .mcard p{text-align:center}
}
@media (max-width:760px){
  .hero-scene{max-width:280px;margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .scene-tile{animation:none}
  .js .hero-scene .scene-tile{opacity:1!important;transform:none!important}
}

/* ------------------------------------------------------------------
   Fixes: dial origin, map pin badge, footer wrapping
   ------------------------------------------------------------------ */

/* The dial arc carried an SVG rotate() with a baked-in origin, which the
   blanket transform-box:fill-box rule then shifted again — the arc landed off
   the ring. Rotate it in CSS against the view box instead. */
.scene-tile .v-dial-fill{transform-box:view-box;transform-origin:150px 118px;
  transform:rotate(-90deg)}

/* Map: brighter base, and a legible pin */
.map-band:hover .map-pin{display:flex;flex-direction:column;align-items:center}
.map-pin-badge{display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 4px rgba(115,140,150,.35);
  border:1px solid rgba(16,22,25,.10)}
.map-pin-badge img{width:30px;height:30px;display:block}
.map-pin-stem{width:3px;height:14px;border-radius:0 0 2px 2px;
  background:linear-gradient(to bottom,#fff,rgba(255,255,255,.35));
  box-shadow:0 2px 5px rgba(0,0,0,.3)}

/* Footer: keep address parts intact on narrow screens */


/* Spam-check field */
.field--captcha .captcha-row{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.captcha-q{display:inline-flex;align-items:center;padding:.62rem 1rem;border-radius:var(--radius);
  background:var(--slate-100);border:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink-800);
  white-space:nowrap;-webkit-user-select:none;user-select:none}
.field--captcha input{width:110px;flex:none;text-align:center;
  font-family:var(--font-display);font-weight:600}
@media (max-width:420px){
  .field--captcha input{width:100%}
}


.hero-motes{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.hero-motes span{position:absolute;bottom:-8%;width:4px;height:4px;border-radius:50%;
  background:var(--mist);opacity:0;
  left:calc((var(--m) * 7.3%) + 2%);
  animation:mote-rise calc(19s + (var(--m) * 1.6s)) linear infinite;
  animation-delay:calc(var(--m) * -2.4s)}
.hero-motes span:nth-child(3n){width:2.5px;height:2.5px;background:var(--slate-300)}
.hero-motes span:nth-child(4n){width:5.5px;height:5.5px;opacity:.5}
@keyframes mote-rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.55}
  50%{transform:translate3d(26px,-52vh,0)}
  88%{opacity:.35}
  100%{transform:translate3d(-14px,-108vh,0);opacity:0}}

/* ============================================================
   MAP — pin stays put, so the frame does not pan under it
   ============================================================ */
.map-band{cursor:default}

/* ============================================================
   FOOTER — mark + copyright left, details right
   ============================================================ */
.footer-inner{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:center;text-align:left}
.footer-left{display:grid;gap:.7rem;justify-items:start;align-content:center}
.footer-brand img{height:clamp(34px,3.2vw,44px);width:auto;
  filter:brightness(0) invert(1);opacity:.92}
.footer-right{display:grid;gap:.4rem;justify-items:end;text-align:right;align-content:center}
.footer-address{font-size:.86rem;line-height:1.6;color:var(--slate-300)}
.footer-reg{font-size:.84rem;line-height:1.6;color:var(--slate-400)}
.footer-legal{font-size:.8rem;line-height:1.6;color:var(--slate-400)}
.footer-credit{font-size:.82rem;line-height:1.6;color:var(--slate-400)}

@media (max-width:860px){
  .footer-inner{grid-template-columns:1fr;gap:1.4rem;justify-items:center;text-align:center}
  .footer-left{justify-items:center}
  .footer-right{justify-items:center;text-align:center}
  .footer-address{max-width:34ch}
}

@media (prefers-reduced-motion:reduce){
    .hero-motes{display:none}
}

/* ============================================================
   MAP — CARTO Positron tile mosaic
   ============================================================ */
.map-frame{position:relative;line-height:0;overflow:hidden;
  height:clamp(320px,38vw,470px);background:#F2F5F7}
/* Absolutely positioned, not flex-centred: flexbox folds half of any margin
   into its centring maths, which threw the pin ~45m off the real coordinate. */
.map-tiles{display:grid;position:absolute;left:50%;top:50%}
.map-tile{display:block;width:256px;height:256px}
.map-tile--blank{display:block;width:256px;height:256px;background:#F2F5F7}
.map-attrib{position:absolute;right:6px;bottom:5px;z-index:3;margin:0;
  font-size:10px;line-height:1.4;color:#5A6B73;
  background:rgba(255,255,255,.78);padding:2px 7px;border-radius:4px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* the pin marks the mosaic centre, which is the exact coordinate */
.map-pin{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,-100%)}
@media (max-width:760px){
  .map-frame{height:clamp(280px,58vw,380px)}
}

/* ============================================================
   MALTA BACKDROPS
   Aerial Valletta washed in behind the light sections. Kept far
   enough back that body copy contrast is untouched, and masked so
   each one fades out rather than ending on a hard edge.
   ============================================================ */
.about, .services, .contact{position:relative;isolation:isolate}
.about::before, .services::before, .contact::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/malta-aerial.jpg");
  background-size:cover;opacity:.07;
  filter:grayscale(.35) contrast(.9)}
.about::before{background-position:78% 18%;
  -webkit-mask-image:radial-gradient(ellipse 58% 72% at 88% 12%,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse 58% 72% at 88% 12%,#000 8%,transparent 72%)}
.services::before{background-position:22% 82%;opacity:.06;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 8% 92%,#000 6%,transparent 70%);
  mask-image:radial-gradient(ellipse 62% 66% at 8% 92%,#000 6%,transparent 70%)}
.contact::before{background-position:82% 74%;opacity:.065;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 92% 86%,#000 6%,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 70% at 92% 86%,#000 6%,transparent 70%)}
/* the services dot-grid already sits at this depth; keep it above the photo */
.services::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
@media (max-width:760px){
  .about::before, .services::before, .contact::before{opacity:.05}
}
@media print{
  .about::before, .services::before, .contact::before{display:none}
}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.hero--page{min-height:0;padding-top:clamp(7rem,10vw,9.5rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);align-items:flex-end}
.hero--page .hero-inner{display:block}
.hero--page h1{max-width:none}
.hero--page .hero-lead{max-width:none;margin-bottom:0}

/* ============================================================
   TEAM BAND  (About)
   ============================================================ */
.team{background:var(--paper)}
.team-grid{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,4.5vw,4.5rem);align-items:stretch}
.team-media{display:flex;flex-direction:column}
.team-media .frame{position:relative;flex:1;min-height:380px;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--slate-100)}
.team-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.4s var(--ease-out-expo)}
.team-media:hover img{transform:scale(1)}
.team-copy{display:flex;flex-direction:column;justify-content:center}
.team-copy h2{font-size:var(--fs-h2);margin-bottom:1rem;text-wrap:balance}
.team-copy > p{color:var(--text-soft);margin-bottom:1.9rem;text-wrap:pretty}
.team-list{display:grid;gap:1.3rem}
.team-list li{display:flex;gap:1rem;align-items:flex-start}
.team-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:12px;background:var(--white);border:1px solid var(--line);
  color:var(--slate-600)}
.team-list b{display:block;font-family:var(--font-display);font-size:1rem;
  letter-spacing:-.01em;margin-bottom:.25rem;color:var(--ink-800)}
.team-list span{font-size:.92rem;color:var(--text-soft);text-wrap:pretty}

/* ============================================================
   IDEAS BAND  (Services)
   ============================================================ */
.ideas{background:var(--white)}
.ideas-grid{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.ideas-copy h2{font-size:var(--fs-h2);margin-bottom:1rem;text-wrap:balance}
.ideas-copy p{color:var(--text-soft);margin-bottom:1rem;text-wrap:pretty}
.ideas-copy .btn{margin-top:.9rem}
.ideas-media .frame{border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/2;background:var(--slate-100)}
.ideas-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.4s var(--ease-out-expo)}
.ideas-media:hover img{transform:scale(1)}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cta-band{background:var(--ink-900);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(2.6rem,4.4vw,4rem)}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.6;
  background:radial-gradient(ellipse 52% 62% at 86% 54%,rgba(95,200,222,.20),transparent 64%),
             radial-gradient(ellipse 48% 56% at 8% 78%,rgba(115,140,150,.26),transparent 64%);
  /* Fades in at the top (overflow:hidden used to slice it into a line there) and
     back out before the bottom, so it meets the footer as flat ink with no edge. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 62%,transparent 100%)}
.cta-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:1fr auto;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.cta-copy h2{font-size:clamp(1.5rem,1rem + 1.7vw,2.2rem);color:#fff;
  margin-bottom:.6rem;text-wrap:balance}
.cta-copy p{color:var(--slate-300);max-width:none;text-wrap:pretty}
.cta-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

.link-more{margin-top:1.9rem;align-self:flex-start}
.about-copy{display:flex;flex-direction:column;align-items:flex-start}

@media (max-width:1024px){
  .team-grid, .ideas-grid{grid-template-columns:1fr}
  .team-media .frame{min-height:0;aspect-ratio:16/10}
  .cta-inner{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero--page{padding-top:clamp(6rem,18vw,7.5rem)}
  .cta-actions .btn{width:100%;justify-content:center}
}

/* Contact page reuses the ideas band with the photo on the left */
.next-steps{background:var(--paper)}
.next-steps .ideas-grid{grid-template-columns:1fr 1.05fr}
.next-steps .team-list{margin-top:1.4rem}
/* This selector outranks the .ideas-grid collapse in the 1024px block above and
   sits later in the file, so without its own override the next-steps section
   stayed two columns all the way down (111px + 136px at 320px). */
@media (max-width:1024px){
  .next-steps .ideas-grid{grid-template-columns:1fr}
}

/* ============================================================
   HERO — dark ground, light contours
   The backdrop is a surveyor's drawing of the logo mark rather than
   scenery: one slow light wash and nine contour lines tracing the
   twin-peak silhouette, quiet enough to sit behind text.
   ============================================================ */
.hero{background:linear-gradient(180deg,#0E1417 0%,#141D21 46%,#18242A 78%,#1B282E 100%);
  color:#fff}

.hero-wash{position:absolute;inset:-20%;z-index:-6;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 52% at 72% 20%,rgba(95,200,222,.20),transparent 66%),
    radial-gradient(ellipse 42% 48% at 20% 82%,rgba(115,140,150,.26),transparent 64%);
  filter:blur(34px);
  animation:wash-drift 34s var(--ease) infinite alternate}
@keyframes wash-drift{to{transform:translate3d(-3%,2%,0) scale(1.08)}}

.hero-contours{position:absolute;inset:0;z-index:-4;pointer-events:none;
  display:flex;align-items:flex-end;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 96%)}
.hero-contours svg{width:100%;height:100%;display:block}
.contour{animation:contour-breathe 18s var(--ease) infinite alternate;
  animation-delay:calc(var(--c) * -1.5s);will-change:transform}
@keyframes contour-breathe{to{transform:translateY(-9px)}}

.hero-motes span{background:var(--mist);opacity:0;width:3px;height:3px}
.hero-motes span:nth-child(3n){background:var(--slate-300);width:2px;height:2px}
.hero-motes span:nth-child(4n){width:4px;height:4px}
.hero-grain{opacity:.14;mix-blend-mode:overlay}

/* -- content on the dark ground -- */
.hero h1{color:#fff}
.hero h1 .accent{
  background:linear-gradient(105deg,var(--mist) 8%,var(--slate-400) 48%,var(--mist) 92%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s var(--ease) infinite}
.hero-lead{color:var(--slate-300)}

.hero-eyebrow{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:var(--slate-200);box-shadow:none}
.hero-eyebrow .dot{background:var(--mist);box-shadow:0 0 0 4px rgba(207,224,230,.18)}
@keyframes pulse-dot{50%{box-shadow:0 0 0 9px rgba(207,224,230,0)}}

.hero .btn--ghost{--btn-fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.hero .btn--ghost::after{background:rgba(255,255,255,.1)}
.hero .btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}







.hero-scene::before{background:radial-gradient(circle at 50% 45%,rgba(95,200,222,.22),transparent 70%)}
.scene-tile{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);
  box-shadow:none}

/* -- header sits over a dark hero again -- */
.site-header::before{background:linear-gradient(to bottom,rgba(16,22,25,.55),transparent)}
.site-header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}
.nav a{color:#fff;opacity:.86}
.nav a:hover, .nav a.is-active{opacity:1}
.site-header:not(.is-stuck) .btn--ghost{--btn-fg:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.site-header:not(.is-stuck) .btn--ghost::after{background:rgba(255,255,255,.1)}
.site-header:not(.is-stuck) .burger span{background:#fff}
.site-header.is-stuck .burger span{background:var(--ink-800)}

@media (max-width:760px){
  .hero-contours{opacity:.8}
}
@media (prefers-reduced-motion:reduce){
  .hero-wash, .contour{animation:none}
}

/* ============================================================
   HOME SUMMARY — short about, plain services list
   ============================================================ */
.home-intro{background:var(--white)}
.intro-grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2.25rem,5vw,5rem);align-items:start}

.intro-about h2{font-size:var(--fs-h2);margin-bottom:1rem;
  text-wrap:balance}
.intro-about p{color:var(--text-soft);text-wrap:pretty;max-width:none;
  margin-bottom:1.9rem}

.intro-services{padding-top:.2rem}
.intro-cards{display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem clamp(.6rem,1.4vw,.9rem);margin-bottom:1.8rem}
.intro-card{display:flex;align-items:center;gap:.7rem;
  padding:.72rem .85rem;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  font-size:.94rem;color:var(--ink-800);line-height:1.35;
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease-out-expo)}
.intro-card-label{flex:1 1 auto;min-width:0;text-wrap:balance}
.intro-card-go{flex:none;color:var(--slate-400);opacity:0;transform:translateX(-4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out-expo),color .35s var(--ease)}
.intro-ico{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:9px;background:var(--slate-100);border:1px solid var(--line);
  color:var(--slate-600);transition:background .4s var(--ease),color .4s var(--ease)}
.intro-card:hover, .intro-card:focus-visible{transform:translateY(-2px);
  border-color:rgba(115,140,150,.42);background:var(--paper)}
.intro-card:hover .intro-ico, .intro-card:focus-visible .intro-ico{
  background:var(--slate-600);color:#fff}
.intro-card:hover .intro-card-go, .intro-card:focus-visible .intro-card-go{
  opacity:1;transform:translateX(0);color:var(--slate-600)}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  color:var(--slate-600);transition:color .35s var(--ease)}
.link-arrow svg{transition:transform .45s var(--ease-out-expo)}
.link-arrow:hover{color:var(--ink-900)}
.link-arrow:hover svg{transform:translateX(4px)}

@media (max-width:900px){
  .intro-grid{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:520px){
  .intro-cards{grid-template-columns:1fr}
}

/* ============================================================
   SERVICES — stacked alternating rows, full detail visible
   ============================================================ */
.svc-rows{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,4vw,3.75rem);align-items:center}
.svc-row--flip .svc-row-media{order:2}

.svc-row-media{position:relative}
.svc-row-media .frame{border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:900/620;background:var(--slate-100);
  box-shadow:0 26px 50px -34px rgba(16,22,25,.5)}
.svc-row-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.3s var(--ease-out-expo)}
.svc-row:hover .svc-row-media img{transform:scale(1)}

/* the number is a real sequence marker for a nine-item list */
.svc-row-num{position:absolute;top:-.6rem;left:-.6rem;z-index:2;
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--ink-900);color:var(--mist);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  letter-spacing:.02em;box-shadow:0 12px 24px -14px rgba(16,22,25,.7)}
.svc-row--flip .svc-row-num{left:auto;right:-.6rem}

.svc-row-copy{min-width:0}
.svc-row-ico{display:grid;place-items:center;width:46px;height:46px;
  border-radius:13px;margin-bottom:1.1rem;
  background:linear-gradient(145deg,var(--slate-100),var(--white));
  border:1px solid var(--line);color:var(--slate-600)}
.svc-row-copy h3{font-size:clamp(1.35rem,1.05rem + 1vw,1.8rem);
  letter-spacing:-.025em;margin-bottom:.7rem;text-wrap:balance}
.svc-row-lead{font-size:var(--fs-lead);color:var(--ink-800);
  margin-bottom:.9rem;text-wrap:pretty}
.svc-row-detail{color:var(--text-soft);text-align:left;
  -webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}

@media (max-width:900px){
  .svc-row{grid-template-columns:1fr;gap:1.4rem}
  .svc-row--flip .svc-row-media{order:0}
  .svc-row--flip .svc-row-num{right:auto;left:-.4rem}
  .svc-row-num{width:46px;height:46px;top:-.4rem;left:-.4rem}
  .svc-row-detail{text-align:left;-webkit-hyphens:manual;hyphens:manual}
}