/* ===========================================================
   Stable Structure Limited — shared stylesheet
   Generated site (source: build/generate.js)
   =========================================================== */
:root{
  --ink:#0C1E33; --ink-2:#122A44; --ink-3:#1B3A5A;
  --accent:#1DA9E3; --accent-600:#1179A9; --accent-100:#D6EDFB;
  --steel:#3E6188; --steel-100:#EAF0F6;
  --wa:#25D366; --wa-600:#1FB457; --wa-ink:#0A2A18;
  --bg:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F2ED;
  --text:#0E1C2B; --muted:#556577; --muted-2:#7C8895;
  --line:#E7E4DC; --line-2:#DCE3EA;
  --radius:16px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(12,30,51,.06),0 2px 8px rgba(12,30,51,.05);
  --shadow-md:0 10px 30px rgba(12,30,51,.09),0 2px 8px rgba(12,30,51,.05);
  --shadow-lg:0 24px 60px rgba(12,30,51,.16);
  --container:1200px;
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif; line-height:1.1; letter-spacing:-.02em; margin:0; color:var(--ink)}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-600)}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); display:inline-block; border-radius:2px}
.eyebrow.on-dark{color:var(--accent)}
h2.section-title{font-size:clamp(28px,4.4vw,44px); margin-top:14px; max-width:22ch}
.lead{color:var(--muted); font-size:clamp(16px,1.6vw,19px); max-width:60ch; margin-top:16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:14px 24px; border-radius:12px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  min-height:48px; white-space:nowrap}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--accent); color:#06283C; box-shadow:0 6px 18px rgba(29,169,227,.35)}
.btn-primary:hover{background:var(--accent-600); color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(29,169,227,.42)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-ghost.on-dark{color:#fff; border-color:rgba(255,255,255,.28)}
.btn-ghost.on-dark:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn-wa{background:var(--wa); color:var(--wa-ink); box-shadow:0 6px 18px rgba(37,211,102,.3)}
.btn-wa:hover{background:var(--wa-600); color:#04240f; transform:translateY(-2px); box-shadow:0 10px 26px rgba(37,211,102,.4)}
.btn-lg{padding:17px 30px; font-size:16px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* Skip to main content — visually hidden until keyboard-focused */
.skip-link{position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none; box-shadow:var(--shadow-md);
  transition:top .2s var(--ease)}
.skip-link:focus{top:12px; outline:3px solid var(--accent); outline-offset:2px}

/* Header */
header.site{position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  background:rgba(251,250,247,.82); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background .25s}
header.site.scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-sm)}
.nav{display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px}
.brand{display:inline-flex; align-items:center}
.brand .logo{height:62px; width:auto; display:block; border-radius:8px}
.nav-links{display:none; align-items:center; gap:2px}
.nav-links .nl{padding:9px 12px; border-radius:9px; font-size:15px; font-weight:500; color:var(--muted); transition:color .15s, background .15s; display:inline-flex; align-items:center; gap:5px}
.nav-links .nl:hover{color:var(--ink); background:var(--surface-2)}
.nav-links .nl.active{color:var(--ink); font-weight:600}
.nav-links .nl.active::after{content:""}
.nav-cta{display:none; align-items:center; gap:10px}
.nav-icons{display:none; align-items:center; gap:8px}
.icon-btn{width:44px;height:44px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); transition:transform .15s, border-color .15s, background .15s}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn.wa{color:var(--wa-600); border-color:rgba(37,211,102,.35)}
.icon-btn.wa:hover{background:rgba(37,211,102,.08)}
.icon-btn svg{width:20px;height:20px}
.burger{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line-2);
  background:var(--surface); border-radius:11px; cursor:pointer; color:var(--ink)}
.burger svg{width:22px;height:22px}
@media(min-width:1120px){ .nav-links{display:flex} .nav-cta{display:flex} .nav-icons{display:flex} .burger{display:none} }

/* Services dropdown */
.has-dd{position:relative}
.dd-toggle{background:none; border:none; cursor:pointer; font:inherit}
.dd-panel{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(620px,90vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:14px; opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease); z-index:120}
.dd-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.has-dd:hover .dd-panel, .has-dd:focus-within .dd-panel, .dd-panel.open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dd-item{display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:11px; transition:background .14s}
.dd-item:hover{background:var(--surface-2)}
.dd-item .di{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,var(--ink),var(--ink-3));display:grid;place-items:center;color:var(--accent);flex:none}
.dd-item .di svg{width:19px;height:19px}
.dd-item b{display:block; font-family:"Space Grotesk",sans-serif; font-size:14.5px; color:var(--ink)}
.dd-item span{font-size:12.5px; color:var(--muted); line-height:1.4}
.dd-foot{margin-top:8px; padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.dd-foot span{font-size:13.5px; color:var(--muted)}
.caret{width:15px;height:15px; transition:transform .2s var(--ease)}
.has-dd:hover .caret, .has-dd:focus-within .caret{transform:rotate(180deg)}

/* Mobile menu */
.mobile-menu{position:fixed; inset:var(--nav-h) 0 0; z-index:99; background:var(--bg); padding:16px 24px 40px;
  display:flex; flex-direction:column; gap:2px; transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease); border-top:1px solid var(--line); overflow:auto}
.mobile-menu.open{opacity:1; transform:none; pointer-events:auto}
.mobile-menu a.m-link{padding:15px 8px; font-size:19px; font-weight:600; font-family:"Space Grotesk",sans-serif;
  color:var(--ink); border-bottom:1px solid var(--line)}
.m-acc{border-bottom:1px solid var(--line)}
.m-acc summary{list-style:none; cursor:pointer; padding:15px 8px; font-size:19px; font-weight:600; font-family:"Space Grotesk",sans-serif;
  color:var(--ink); display:flex; align-items:center; justify-content:space-between}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary .caret{width:20px;height:20px;color:var(--accent-600)}
.m-acc[open] summary .caret{transform:rotate(180deg)}
.m-acc .m-sub{padding:2px 8px 12px}
.m-acc .m-sub a{display:block; padding:11px 12px; font-size:16px; color:var(--muted); border-radius:9px}
.m-acc .m-sub a:hover{background:var(--surface-2); color:var(--ink)}
.mobile-menu .m-cta{margin-top:18px; display:grid; gap:10px}
@media(min-width:1120px){ .mobile-menu{display:none} }

/* Page hero (interior pages) */
.page-hero{position:relative; background:radial-gradient(900px 500px at 85% -20%, #1D3E5F 0%, var(--ink) 50%, #081726 100%);
  color:#fff; overflow:hidden; padding:56px 0 60px}
.page-hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(700px 380px at 80% 0%,#000 30%,transparent 78%); pointer-events:none}
.page-hero .container{position:relative; z-index:1}
.page-hero h1{color:#fff; font-size:clamp(30px,5vw,48px); max-width:20ch}
.page-hero h1 .hl{color:var(--accent)}
.page-hero p.sub{color:#C4D2E1; font-size:clamp(16px,1.8vw,19px); max-width:56ch; margin-top:16px}
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:#9FB2C4; margin-bottom:20px}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb svg{width:14px;height:14px;opacity:.6}
.page-hero .ph-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* Home hero */
.hero{position:relative; background:radial-gradient(1100px 620px at 82% -8%, #1D3E5F 0%, var(--ink) 46%, #081726 100%);
  color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(900px 500px at 80% 0%,#000 30%,transparent 78%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1fr; gap:44px; padding-block:56px 66px; position:relative; z-index:1}
.hero h1{color:#fff; font-size:clamp(34px,6.2vw,60px); letter-spacing:-.03em}
.hero h1 .hl{color:var(--accent)}
.hero p.sub{color:#C4D2E1; font-size:clamp(17px,2vw,20px); max-width:52ch; margin-top:20px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-trust{display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:38px; padding-top:30px; border-top:1px solid rgba(255,255,255,.12)}
.hero-trust .ht{display:flex; align-items:center; gap:11px; color:#D6E1EC; font-size:14.5px; font-weight:500}
.hero-trust .ht svg{width:22px;height:22px;color:var(--accent); flex:none}
.hero-badge{display:inline-flex; align-items:center; gap:9px; background:rgba(29,169,227,.14); border:1px solid rgba(29,169,227,.34);
  color:var(--accent-100); padding:7px 15px; border-radius:100px; font-size:13.5px; font-weight:600; letter-spacing:.02em}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(29,169,227,.25)}
.hero-visual{position:relative; max-width:520px; width:100%; margin-inline:auto}
.hero-visual .frame{width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))}
.spec-card{position:absolute; background:rgba(255,255,255,.97); color:var(--ink); border-radius:14px; padding:13px 16px;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px}
.spec-card .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-100);display:grid;place-items:center;color:var(--accent-600);flex:none}
.spec-card .ico svg{width:20px;height:20px}
.spec-card b{font-family:"Space Grotesk",sans-serif;font-size:15px;display:block;line-height:1.2}
.spec-card span{font-size:12.5px;color:var(--muted)}
.sc-1{top:8%; left:-14px}
.sc-2{bottom:9%; right:-10px}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; padding-block:80px 92px} }

/* Trust bar */
.trustbar{background:var(--ink-2); color:#fff; border-top:1px solid rgba(255,255,255,.06)}
.trustbar .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 40px; padding:22px 24px}
.trustbar .tb-item{display:inline-flex; align-items:center; gap:10px; color:#AEBECE; font-size:14px; font-weight:500}
.trustbar .tb-item svg{width:19px;height:19px;color:var(--accent)}

/* Sections */
section{scroll-margin-top:calc(var(--nav-h) + 12px)}
.pad{padding:84px 0}
.pad-sm{padding:64px 0}
.section-head{max-width:760px; margin-bottom:52px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .lead{margin-inline:auto}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .section-title{margin-inline:auto}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--surface); padding:30px 24px; text-align:center}
.stat .num{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(30px,5vw,44px); color:var(--ink); letter-spacing:-.02em}
.stat .num .u{color:var(--accent-600)}
.stat .lbl{color:var(--muted); font-size:14px; margin-top:4px; font-weight:500}
@media(min-width:800px){ .stats{grid-template-columns:repeat(4,1fr)} }

/* Services grid */
.grid-services{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:640px){ .grid-services{grid-template-columns:repeat(2,1fr)} }
@media(min-width:640px) and (max-width:999.98px){ .grid-services .svc:last-child:nth-child(odd){grid-column:1/-1} }
@media(min-width:1000px){ .grid-services{grid-template-columns:repeat(3,1fr)} }
.svc{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px 26px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); overflow:hidden}
.svc::after{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .3s var(--ease)}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.svc:hover::after{width:100%}
.svc .ic{width:52px; height:52px; border-radius:13px; background:linear-gradient(145deg,var(--ink),var(--ink-3));
  display:grid; place-items:center; color:var(--accent); margin-bottom:20px}
.svc .ic svg{width:26px;height:26px}
.svc h3{font-size:20px; margin-bottom:9px}
.svc p{color:var(--muted); font-size:15.5px}
.svc .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.svc .tag{font-size:12.5px; font-weight:600; color:var(--steel); background:var(--steel-100); padding:4px 11px; border-radius:100px}
.svc .more{margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14.5px; color:var(--accent-600)}
.svc .more svg{width:16px;height:16px; transition:transform .2s var(--ease)}
.svc:hover .more svg{transform:translateX(3px)}
.svc .spacer{flex:1}

/* Sectors */
.sectors{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:900px){ .sectors{grid-template-columns:repeat(3,1fr)} }
.sector{position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px; display:flex; align-items:flex-end;
  color:#fff; padding:28px; isolation:isolate}
.sector .bgart{position:absolute; inset:0; z-index:-2}
.sector::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,22,38,0) 0%, rgba(9,22,38,.2) 40%, rgba(9,22,38,.72) 68%, rgba(7,18,30,.92) 100%)}
.sector h3{color:#fff; font-size:23px}
.sector p{color:#CBD7E3; font-size:15px; margin-top:7px}
.sector .k{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}

/* Split / feature list */
.split{display:grid; grid-template-columns:1fr; gap:44px; align-items:center}
@media(min-width:960px){ .split{grid-template-columns:1fr 1fr; gap:64px} }
.feature-list{display:grid; gap:14px; margin-top:26px}
.feature{display:flex; gap:16px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease)}
.feature:hover{box-shadow:var(--shadow-sm); transform:translateX(3px)}
.feature .fic{width:44px;height:44px;border-radius:11px;background:var(--accent-100);color:var(--accent-600);display:grid;place-items:center;flex:none}
.feature .fic svg{width:22px;height:22px}
.feature h4{font-size:17px; margin-bottom:3px}
.feature p{color:var(--muted); font-size:14.5px}
.why-visual{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink); min-height:420px; padding:34px;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff}
@media(max-width:899.98px){ .why-visual{min-height:0} }
.why-visual .qmark{font-family:"Space Grotesk",sans-serif; font-size:19px; line-height:1.5; color:#E7EEF5; max-width:34ch; font-weight:500}
.why-visual .attr{display:flex; align-items:center; gap:13px; margin-top:22px}
.why-visual .attr .av{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-weight:700;flex:none}
.why-visual .attr b{display:block;font-family:"Space Grotesk",sans-serif}
.why-visual .attr span{color:#9FB2C4;font-size:13.5px}
.why-visual .grid-bg{position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px}
.why-visual > *{position:relative; z-index:1}

/* Process */
.process{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.process::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(700px 400px at 20% 0%,#000,transparent 80%)}
.process .container{position:relative; z-index:1}
.process .eyebrow{color:var(--accent)}
.process h2.section-title{color:#fff}
.process .lead{color:#B9C7D6}
.steps{display:grid; grid-template-columns:1fr; gap:22px; margin-top:52px}
@media(min-width:720px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{position:relative; padding:26px 22px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015))}
.step .n{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:15px; color:var(--ink); background:var(--accent);
  width:40px;height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:18px}
.step h4{color:#fff; font-size:18px; margin-bottom:7px}
.step p{color:#AEBECE; font-size:14.5px}
.step .line{display:none}
@media(min-width:1080px){
  .step:not(:last-child) .line{display:block; position:absolute; top:46px; right:-13px; width:26px; height:2px;
    background:linear-gradient(90deg,var(--accent),transparent)}
}

/* Testimonials */
.tgrid{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:720px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .tgrid{grid-template-columns:repeat(3,1fr)} }
.tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; display:flex; flex-direction:column; gap:14px}
.stars{display:flex; gap:3px; color:var(--accent)}
.stars svg{width:18px;height:18px}
.tcard blockquote{margin:0; font-size:16px; color:var(--text); line-height:1.6}
.tcard .who{display:flex; align-items:center; gap:12px; margin-top:auto}
.tcard .who .av{width:44px;height:44px;border-radius:50%; background:var(--steel-100); color:var(--steel); display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:16px; flex:none}
.tcard .who b{display:block; font-size:15px; font-family:"Space Grotesk",sans-serif}
.tcard .who span{font-size:13px; color:var(--muted)}

/* Team */
.team{display:grid; gap:56px}
.team-member{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
@media(min-width:820px){
  .team-member{grid-template-columns:340px 1fr; gap:48px}
  .team-member.rev{grid-template-columns:1fr 340px}
  .team-member.rev .tm-photo{order:2}
}
.tm-photo{position:relative; width:100%; max-width:360px; margin-inline:auto;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); background:var(--line)}
.tm-photo img{width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; object-position:top center}
.tm-photo::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--accent)}
.tm-role{color:var(--accent-600); font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px}
.tm-name{font-size:clamp(23px,3vw,29px)}
.tm-cred{color:var(--muted-2); font-size:13.5px; font-weight:500; margin-top:7px; letter-spacing:.01em}
.tm-body p.bio{color:var(--muted); font-size:15.5px; margin-top:14px}
.tm-note{margin-top:16px; padding-left:16px; border-left:3px solid var(--accent); color:var(--muted-2); font-size:14.5px; font-style:italic}
.tm-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}

/* Our Projects */
.proj-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:640px){ .proj-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .proj-grid{grid-template-columns:repeat(3,1fr)} }
.proj-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.proj-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.proj-media{position:relative; display:block; width:100%; padding:0; border:0; background:var(--line); cursor:zoom-in; overflow:hidden}
.proj-media img{width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; transition:transform .4s var(--ease)}
.proj-card:hover .proj-media img{transform:scale(1.04)}
.proj-count{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(9,22,38,.78); color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px;
  padding:5px 10px; border-radius:100px; backdrop-filter:blur(4px)}
.proj-count svg{width:14px;height:14px}
.proj-body{display:flex; flex-direction:column; padding:20px 22px 22px; flex:1}
.proj-date{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-600)}
.proj-cap{color:var(--muted); font-size:15px; margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.proj-link{display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:16px;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px; color:var(--accent-600)}
.proj-link svg{width:16px;height:16px}
.proj-link:hover{color:var(--accent)}
.proj-foot{text-align:center; color:var(--muted); font-size:15px; margin-top:36px}
.proj-foot a{color:var(--accent-600); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* Projects — empty state (sync only picks up newly tagged posts) */
.proj-empty{max-width:640px; margin-inline:auto; text-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:48px 32px; box-shadow:var(--shadow-sm)}
.proj-empty-ic{width:64px; height:64px; margin:0 auto 20px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--ink),var(--ink-3)); color:var(--accent)}
.proj-empty-ic svg{width:30px;height:30px}
.proj-empty h2{font-size:clamp(22px,3vw,27px)}
.proj-empty p{color:var(--muted); font-size:16px; margin-top:14px}
.proj-empty-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px}

/* Facebook video embed */
.video-embed{position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:560/314;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); background:var(--ink)}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,16,28,.94); padding:24px; opacity:0; transition:opacity .2s var(--ease)}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-figure{margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; align-items:center}
.lb-img{max-width:100%; max-height:74vh; width:auto; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow-lg)}
.lb-cap{color:#D5E2EF; font-size:15px; line-height:1.6; text-align:center; max-width:72ch; overflow-y:auto; max-height:16vh}
.lb-btn{position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; transition:background .15s, transform .15s}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:20px; right:20px}
.lb-prev{left:16px; transform:rotate(180deg)}
.lb-next{right:16px}
.lb-prev:hover{transform:rotate(180deg) translateX(2px)}
.lightbox.single .lb-prev,.lightbox.single .lb-next{display:none}
@media(max-width:600px){
  .lb-btn{width:42px;height:42px}
  .lb-prev{left:6px} .lb-next{right:6px}
  .lb-img{max-height:64vh}
}
@media (prefers-reduced-motion:reduce){
  .proj-card,.proj-media img,.lightbox{transition:none}
  .proj-card:hover{transform:none}
  .proj-card:hover .proj-media img{transform:none}
}

/* Google reviews */
.gg{width:18px;height:18px;display:inline-block;vertical-align:middle}
.reviews-summary{display:flex; flex-wrap:wrap; gap:22px 30px; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; box-shadow:var(--shadow-sm)}
.rs-score{display:flex; align-items:center; gap:18px}
.rs-num{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(40px,6vw,54px); line-height:1; color:var(--ink); letter-spacing:-.02em}
.rs-score .stars svg{width:22px;height:22px}
.rs-meta{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); margin-top:6px}
.rs-actions{display:flex; flex-wrap:wrap; gap:12px}
.featured-review{max-width:760px; margin-inline:auto}
.featured-review .fr-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.featured-review .via{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted)}
.featured-review blockquote{font-size:18px}
.rev-mini-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px}
@media(min-width:600px){ .rev-mini-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .rev-mini-grid{grid-template-columns:repeat(4,1fr)} }
.rev-mini{display:flex; gap:13px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.rev-mini .av{width:42px;height:42px;border-radius:50%; background:var(--steel-100); color:var(--steel); display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:16px; flex:none}
.rev-mini .rm-body{min-width:0}
.rev-mini b{display:block; font-family:"Space Grotesk",sans-serif; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rev-mini .stars.sm{margin:3px 0}
.rev-mini .stars.sm svg{width:14px;height:14px}
.rev-mini span{font-size:12.5px; color:var(--muted)}

/* FAQ */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:12px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .2s, box-shadow .2s}
.faq details[open]{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.faq summary{list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:17px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:22px;height:22px; flex:none; color:var(--accent-600); transition:transform .25s var(--ease)}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq .ans{padding:0 22px 22px; color:var(--muted); font-size:15.5px}

/* Prose (service pages) */
.prose{max-width:720px}
.prose h2{font-size:clamp(24px,3vw,32px); margin:36px 0 14px}
.prose h3{font-size:20px; margin:28px 0 10px}
.prose p{color:var(--muted); margin-bottom:16px}
.prose ul.ticks{display:grid; gap:12px; margin:8px 0 20px}
.prose ul.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--text); font-size:16px}
.prose ul.ticks li svg{width:22px;height:22px;color:var(--accent-600);flex:none;margin-top:1px}
.svc-layout{display:grid; grid-template-columns:1fr; gap:44px}
@media(min-width:960px){ .svc-layout{grid-template-columns:1fr 340px; gap:56px; align-items:start} }
.svc-aside{position:sticky; top:calc(var(--nav-h) + 20px); display:grid; gap:18px}
.aside-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm)}
.aside-card h4{font-size:18px; margin-bottom:8px}
.aside-card p{color:var(--muted); font-size:14.5px; margin-bottom:16px}
.aside-card .btn{width:100%; margin-bottom:10px}
.aside-list a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--text); font-weight:500}
.aside-list a:last-child{border-bottom:none}
.aside-list a:hover{color:var(--accent-600)}
.aside-list a svg{width:15px;height:15px;color:var(--muted-2)}
.aside-list a.current{color:var(--accent-600); font-weight:700}

/* CTA band — rendered as a border-glow card (see "Border glow" below) */
.cta-band{color:#fff; --card-bg:var(--ink); --border-radius:22px}
.cta-band .border-glow-inner{padding:48px 40px}
.cta-band .grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px; mask-image:radial-gradient(500px 300px at 90% 20%,#000,transparent 75%)}
.cta-band .border-glow-inner > *{position:relative; z-index:1}
.cta-band h2{color:#fff; font-size:clamp(26px,3.5vw,38px); max-width:20ch}
.cta-band p{color:#B9C7D6; margin-top:12px; max-width:52ch}
.cta-band .cta-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ===========================================================
   Border glow — pointer-reactive edge glow.
   Ported from React Bits "BorderGlow" (JS+CSS) to vanilla; the
   design variables are baked in here (tuned to the sky-blue brand)
   and only --edge-proximity / --cursor-angle are set by main.js.
   =========================================================== */
.border-glow-card{
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:30;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  --border-radius:22px;
  --glow-padding:38px;
  --cone-spread:25;
  --fill-opacity:.5;
  --card-bg:var(--ink);
  --glow-color:hsl(199deg 88% 62% / 100%);
  --glow-color-60:hsl(199deg 88% 62% / 60%);
  --glow-color-50:hsl(199deg 88% 62% / 50%);
  --glow-color-40:hsl(199deg 88% 62% / 40%);
  --glow-color-30:hsl(199deg 88% 62% / 30%);
  --glow-color-20:hsl(199deg 88% 62% / 20%);
  --glow-color-10:hsl(199deg 88% 62% / 10%);
  --gradient-one:radial-gradient(at 80% 55%, #1DA9E3 0px, transparent 50%);
  --gradient-two:radial-gradient(at 69% 34%, #38BDF8 0px, transparent 50%);
  --gradient-three:radial-gradient(at 8% 6%, #7DD3FC 0px, transparent 50%);
  --gradient-four:radial-gradient(at 41% 38%, #1DA9E3 0px, transparent 50%);
  --gradient-five:radial-gradient(at 86% 85%, #38BDF8 0px, transparent 50%);
  --gradient-six:radial-gradient(at 82% 18%, #7DD3FC 0px, transparent 50%);
  --gradient-seven:radial-gradient(at 51% 4%, #38BDF8 0px, transparent 50%);
  --gradient-base:linear-gradient(#1DA9E3 0 100%);

  position:relative;
  border-radius:var(--border-radius);
  isolation:isolate;
  transform:translate3d(0,0,.01px);
  border:1px solid rgb(255 255 255 / 15%);
  background:var(--card-bg);
  overflow:visible;
  box-shadow:var(--shadow-md);
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light{
  content:""; position:absolute; inset:0; border-radius:inherit;
  transition:opacity .25s ease-out; z-index:-1; pointer-events:none;
}
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light{
  opacity:0; transition:opacity .75s ease-in-out;
}
/* colored mesh-gradient border */
.border-glow-card::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
}
/* colored mesh-gradient fill near edges */
.border-glow-card::after{
  border:1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite:subtract, add, add, add, add, add;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light;
}
/* outer glow layer */
.border-glow-card > .edge-light{
  inset:calc(var(--glow-padding) * -1);
  pointer-events:none;
  z-index:1;
  mask-image:conic-gradient(
    from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;
}
.border-glow-card > .edge-light::before{
  content:""; position:absolute; inset:var(--glow-padding); border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
.border-glow-inner{display:flex; flex-direction:column; position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){
  .border-glow-card::before,.border-glow-card::after,.border-glow-card > .edge-light{transition:none}
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr; gap:36px}
@media(min-width:960px){ .contact-grid{grid-template-columns:1fr 1.05fr; gap:56px; align-items:start} }
.contact-info .infolist{display:grid; gap:14px; margin-top:28px}
.infoitem{display:flex; gap:15px; align-items:flex-start; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px}
.infoitem .ii{width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--accent);display:grid;place-items:center;flex:none}
.infoitem .ii.wa{background:var(--wa); color:#fff}
.infoitem .ii svg{width:22px;height:22px}
.infoitem b{font-family:"Space Grotesk",sans-serif; font-size:15px; display:block}
.infoitem a,.infoitem span{color:var(--muted); font-size:15px}
.infoitem a:hover{color:var(--accent-600)}
form.enquiry{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-md)}
form.enquiry h3{font-size:22px; margin-bottom:6px}
form.enquiry .fsub{color:var(--muted); font-size:15px; margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px}
.field label .req{color:var(--accent-600)}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--bg);
  border:1.5px solid var(--line-2); border-radius:11px; padding:13px 15px; transition:border-color .15s, box-shadow .15s; min-height:50px}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(29,169,227,.16)}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0}
@media(max-width:520px){ .field.two{grid-template-columns:1fr} }
.field .hint{font-size:12.5px; color:var(--muted-2); margin-top:6px}
form.enquiry .btn{width:100%; margin-top:8px}
.form-note{font-size:12.5px; color:var(--muted-2); text-align:center; margin-top:14px}
.form-status{display:none; margin-top:14px; padding:14px 16px; border-radius:11px; font-size:14.5px; font-weight:500}
.form-status.ok{display:block; background:#E9F6EC; color:#1B6E33; border:1px solid #BEE4C7}
.callout{margin-top:22px; padding:22px; border-radius:14px; background:var(--ink); color:#fff; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.callout b{font-family:"Space Grotesk",sans-serif; font-size:18px; color:#fff}
.callout p{color:#AEBECE; font-size:14px}

/* Footer */
footer.site{background:var(--ink); color:#C4D2E1; padding:60px 0 28px}
.foot-grid{display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr} }
footer .brand .logo{height:64px}
.foot-about{color:#9FB2C4; font-size:15px; margin-top:16px; max-width:40ch}
.foot-col h5{color:#fff; font-family:"Space Grotesk",sans-serif; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px}
.foot-col a{display:block; color:#9FB2C4; font-size:15px; padding:6px 0; transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-col span.fi{color:#9FB2C4; display:block; padding:6px 0; font-size:15px}
.foot-bottom{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding-top:24px; color:#7C8FA3; font-size:13.5px}
.foot-bottom a:hover{color:#fff}

/* Reveal */
html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1 !important; transform:none !important; transition:none} }

/* Floating action bar (mobile) */
.callbar{position:fixed; left:14px; right:14px; bottom:14px; z-index:80; display:flex; gap:10px;
  background:var(--ink); color:#fff; border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-lg); align-items:center}
.callbar .cb-txt{flex:1; min-width:0}
.callbar b{font-family:"Space Grotesk",sans-serif; font-size:14px; display:block; color:#fff}
.callbar span{font-size:12px; color:#AEBECE}
.callbar .btn{padding:11px 14px; min-height:44px}
.callbar .btn.icononly{padding:11px; width:44px}
.callbar .btn.icononly svg{margin:0}
@media(min-width:1120px){ .callbar{display:none} }
@media(max-width:1119.98px){ body{padding-bottom:96px} }