/* Coastal Mechanical & Rigging — stylesheet
   Brand palette sampled from header-logo.png:
   navy #053E71 · mid blue #3587BD · sky #A8D8FF
*/

/* ============ TOKENS ============ */
:root{
  /* ---- BRAND (sampled from header-logo.png) ---- */
  --brand-navy:#053E71;   /* wordmark navy */
  --brand-blue:#3587BD;   /* crane / MRI "O" */
  --brand-sky:#A8D8FF;    /* wave swoosh */

  --navy:#053E71; --navy-2:#0A5187; --navy-3:#032B4F;
  --accent:#3587BD; --accent-deep:#053E71; --accent-soft:rgba(53,135,189,.12);
  --btn:#053E71; --btn-text:#FFFFFF; --btn-hover:#0A5C90;
  --amber:#F2A63B;

  --bg:#FFFFFF;
  --bg-soft:#F2F7FB;
  --surface:#FFFFFF;
  --ink:#0A2337;
  --muted:#54697E;
  --line:rgba(5,62,113,.13);
  --line-2:rgba(5,62,113,.07);
  --shadow:0 1px 2px rgba(5,62,113,.06), 0 12px 32px -12px rgba(5,62,113,.18);
  --shadow-lg:0 2px 4px rgba(5,62,113,.06), 0 32px 64px -24px rgba(5,62,113,.32);
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:#04203A;
  --bg-soft:#062B4C;
  --surface:#07304F;
  --ink:#E8F1F8;
  --muted:#93B2CB;
  --line:rgba(168,216,255,.15);
  --line-2:rgba(168,216,255,.08);
  --accent:#5AA6D8;
  --accent-deep:#A8D8FF;
  --accent-soft:rgba(90,166,216,.18);
  --btn:#A8D8FF; --btn-text:#053E71; --btn-hover:#C9E6FF;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.7);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif; line-height:1.12; letter-spacing:-.025em; margin:0; font-weight:600}
h1{font-size:clamp(2.15rem,4.3vw,3.35rem); font-weight:700}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem)}
h3{font-size:1.19rem; letter-spacing:-.015em}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
::selection{background:var(--accent); color:#fff}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.section{padding:clamp(72px,9vw,124px) 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.745rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:18px;
}
[data-theme="dark"] .eyebrow{color:var(--accent)}
.eyebrow::before{content:''; width:22px; height:1.5px; background:currentColor; opacity:.55}
.lead{color:var(--muted); font-size:1.06rem; max-width:60ch}
.section-head{max-width:660px; margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow::before{display:none}
.section-head h2 + .lead{margin-top:18px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.925rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, border-color .2s, color .2s;
  font-family:inherit;
}
.btn svg{width:16px;height:16px; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--btn); color:var(--btn-text); box-shadow:0 8px 24px -8px rgba(5,62,113,.45)}
.btn-primary:hover{background:var(--btn-hover); transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(5,62,113,.5)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.18); transform:translateY(-2px)}
.btn-lg{padding:16px 32px; font-size:.98rem}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--navy); color:#fff; font-size:.815rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:42px; min-width:0}
.topbar-left{min-width:0}
.topbar a{white-space:nowrap}
.topbar-left{display:flex; gap:26px; align-items:center}
.topbar a{display:inline-flex; align-items:center; gap:7px; color:#fff; transition:opacity .2s}
.topbar a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.topbar svg{width:14px;height:14px; opacity:1}
.topbar-right{display:flex; align-items:center; gap:18px}
.socials{display:flex; gap:12px}
.socials a{color:#fff; opacity:1; display:inline-flex; align-items:center}
.socials a:hover{opacity:.75}

/* ============ HEADER ============ */
.header{position:sticky; top:0; z-index:100;
  background:var(--bg);                                          /* fallback: Safari <16.2 drops color-mix */
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line);
  transition:border-color .3s, background .3s, box-shadow .3s}
.header::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--brand-navy),var(--brand-blue) 45%,var(--brand-sky)); opacity:.9}
.header.stuck{box-shadow:0 8px 28px -20px rgba(5,62,113,.65)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.logo{display:flex; align-items:center; gap:11px; flex:none}
.logo-img{height:46px; width:auto; transition:opacity .2s}
.logo:hover .logo-img{opacity:.82}
/* logo artwork is navy, so invert to white on dark surfaces */
[data-theme="dark"] .logo-img{filter:brightness(0) invert(1)}
.logo-img.invert{filter:brightness(0) invert(1); height:52px}
.drawer .logo-img{height:40px}
@media (max-width:900px){.logo-img{height:38px}}
.menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.menu a, .menu .drop-toggle{position:relative; padding:9px 15px; font-size:.925rem; font-weight:500; color:var(--muted); border-radius:9px; transition:color .2s, background .2s}
.menu a:hover, .menu a.active,
.menu .drop-toggle:hover, .menu .drop-toggle.active{color:var(--ink); background:var(--bg-soft)}
/* the parent only discloses its dropdown, so it is a button rather than a link */
.menu .drop-toggle{background:none; border:0; font-family:inherit; line-height:inherit; cursor:default}
.menu .drop-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav-actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:40px;height:40px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .2s,border-color .2s}
.icon-btn:hover{background:var(--bg-soft); border-color:var(--muted)}
.icon-btn svg{width:18px;height:18px}
.moon{display:none} [data-theme="dark"] .moon{display:block} [data-theme="dark"] .sun{display:none}
.burger{display:none}

/* mobile drawer */
/* Closed state does not rely on the transform alone: visibility and pointer-events
   are flipped too, so a failed or overridden transform can never leave it on screen,
   and it stays out of the tab order and the accessibility tree while closed. */
.drawer{position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; background:var(--bg); padding:24px;
  transform:translateX(100%); visibility:hidden; pointer-events:none;
  transition:transform .45s var(--ease), visibility 0s linear .45s;
  display:flex; flex-direction:column;
  /* an expanded group is taller than the screen, so the panel itself must scroll */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.drawer.open{transform:none; visibility:visible; pointer-events:auto;
  transition:transform .45s var(--ease), visibility 0s}
.drawer[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .drawer{transition:none} }
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:34px}
.drawer nav{display:flex; flex-direction:column; gap:4px; flex:0 0 auto}
.drawer nav a{font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:600; padding:12px 0; border-bottom:1px solid var(--line-2); letter-spacing:-.02em}
.drawer .btn{margin-top:28px; width:100%}
.drawer-foot{margin-top:auto; padding-top:24px; color:var(--muted); font-size:.9rem; display:flex; flex-direction:column; gap:6px; flex:0 0 auto}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; padding:clamp(26px,3.2vw,44px) 0 clamp(30px,3.6vw,52px);
  min-height:calc(100vh - 120px);
  min-height:calc(100svh - 120px);
  display:flex; align-items:center}
.hero-bg{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none}
.hero-bg .grid{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 62% 32%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 62% 32%,#000 10%,transparent 72%);
}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.42}
.blob-1{width:520px;height:520px; background:radial-gradient(circle,var(--brand-blue),transparent 68%); top:-180px; right:-90px; animation:float1 18s ease-in-out infinite}
.blob-2{width:420px;height:420px; background:radial-gradient(circle,#A8D8FF,transparent 68%); bottom:-160px; left:-120px; opacity:.22; animation:float2 22s ease-in-out infinite}
@keyframes float1{50%{transform:translate(-40px,50px) scale(1.1)}}
@keyframes float2{50%{transform:translate(50px,-40px) scale(1.08)}}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,3.6vw,56px); align-items:center; width:100%}
.hero-grid>*,.split>*,.f-grid>*,.hero-vis>*{min-width:0}
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 7px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.79rem; font-weight:500; color:var(--muted); margin-bottom:18px;
}
.badge b{background:var(--accent-soft); color:var(--accent-deep); font-weight:600; padding:3px 11px; border-radius:100px; font-size:.755rem; letter-spacing:.03em}
[data-theme="dark"] .badge b{color:var(--accent)}
.hero h1 .hl{
  position:relative; color:var(--accent-deep); white-space:nowrap;
}
[data-theme="dark"] .hero h1 .hl{color:var(--accent)}
.hero h1 .hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.07em; height:.32em;
  background:var(--accent); opacity:.16; border-radius:4px; z-index:-1;
}
.hero p.lead{margin-top:16px; font-size:1.03rem; max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* ISO badge variant of the hero float card: text, not an animated number */
.float-card.iso b{font-size:1.1rem; letter-spacing:-.02em; white-space:nowrap}
.float-card.iso span{font-size:.76rem}
/* The ISO tile carries the certification seal itself, so it drops the soft
   square tile behind it and renders the mark at full size instead. */
.float-card.iso .ring{width:50px;height:50px; background:none; border-radius:0}
.float-card.iso .ring svg{width:50px;height:50px}
/* 4 trust items read better as a 2x2 grid than a wrapping flex row */
.hero-trust{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:16px 28px}
.trust-item{display:flex; gap:11px; align-items:flex-start}
.trust-item svg{width:19px;height:19px; color:var(--accent); flex:none; margin-top:2px}
.trust-item b{display:block; font-size:.875rem; font-weight:600}
.trust-item span{font-size:.785rem; color:var(--muted)}

/* hero visual */
.hero-vis{position:relative}
.live{display:inline-flex; align-items:center; gap:7px; color:var(--brand-sky)}
.live i{width:7px;height:7px; border-radius:50%; background:var(--brand-sky); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(168,216,255,.6)}50%{opacity:.6; box-shadow:0 0 0 7px rgba(168,216,255,0)}}
.float-card{
  position:absolute; left:-34px; bottom:44px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 18px; box-shadow:var(--shadow-lg); display:flex; gap:14px; align-items:center;
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-11px)}}
.float-card .ring{width:44px;height:44px; border-radius:13px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-deep); flex:none}
[data-theme="dark"] .float-card .ring{color:var(--accent)}
.float-card .ring svg{width:22px;height:22px}
.float-card b{display:block; font-family:'Sora',sans-serif; font-size:1.3rem; letter-spacing:-.03em; line-height:1}
.float-card span{font-size:.78rem; color:var(--muted)}


/* ---- hero photos ---- */
.hero-vis{display:grid; gap:13px; grid-template-columns:1fr 1fr}
.hero-photo{margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; grid-column:1/-1;
  box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--navy)}
.hero-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9.4; transition:transform .8s var(--ease)}
.hero-photo:hover img{transform:scale(1.04)}
.hero-photo::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to top,rgba(3,43,79,.72),rgba(3,43,79,.05) 45%,transparent)}
.hero-photo figcaption{position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; font-size:.82rem; font-weight:600;
  background:rgba(5,62,113,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(168,216,255,.28); padding:8px 15px; border-radius:100px}
.hero-photo-sm{grid-column:1/2; aspect-ratio:auto}
.hero-photo-sm img{aspect-ratio:16/10}
.hero-photo-sm::after{background:linear-gradient(to top,rgba(3,43,79,.45),transparent 60%)}
.hero-vis .float-card{position:relative; left:auto; bottom:auto; grid-column:2/3; align-self:center; animation:none; margin:0}


/* ---- about photo ---- */
.photo{margin:0}
.photo img{width:100%; height:100%; object-fit:cover; display:block}

/* ============ MARQUEE / LOGOS ============ */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; padding:24px 0}
.strip-inner{display:flex; align-items:center; gap:44px; flex-wrap:wrap; justify-content:center}
.strip p{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.strip ul{display:flex; gap:38px; flex-wrap:wrap; list-style:none; margin:0; padding:0; justify-content:center}
.strip li{font-family:'Sora',sans-serif; font-weight:600; font-size:1rem; color:var(--ink); opacity:.42; letter-spacing:-.01em; transition:opacity .25s}
.strip li:hover{opacity:.85}

/* ============ STATS ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); position:relative; z-index:2;
  margin-bottom:clamp(54px,6.5vw,88px)}
.stat{background:var(--surface); padding:34px 28px; text-align:center}
.stat b{display:block; white-space:nowrap; font-family:'Sora',sans-serif; font-size:clamp(1.7rem,3.4vw,2.7rem); font-weight:700; letter-spacing:-.04em; line-height:1; background:linear-gradient(135deg,var(--brand-navy),var(--brand-blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
[data-theme="dark"] .stat b{background:linear-gradient(135deg,#fff,var(--brand-sky)); -webkit-background-clip:text; background-clip:text}
.stat span{display:block; margin-top:9px; font-size:.85rem; color:var(--muted)}

/* ============ SERVICES ============ */
#services{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg) 0,var(--bg) 90px,var(--bg-soft) 340px);
  padding-top:clamp(46px,5.5vw,74px)}
#services::before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 82% 58% at 50% 40%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 82% 58% at 50% 40%,#000,transparent 76%)}
#services::after{content:''; position:absolute; width:820px; height:820px; border-radius:50%; top:80px; right:-300px;
  background:radial-gradient(circle,var(--brand-blue),transparent 66%); opacity:.13; filter:blur(80px); pointer-events:none}
#services > .wrap{position:relative; z-index:1}

/* split header with inline CTA */
.svc-head{display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap;
  margin-bottom:clamp(38px,4.6vw,58px)}
.svc-head .section-head{margin-bottom:0; flex:1 1 480px}
.svc-cta{display:inline-flex; align-items:center; gap:10px; padding:12px 12px 12px 22px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.9rem; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s}
.svc-cta:hover{transform:translateY(-2px); border-color:var(--brand-blue); box-shadow:var(--shadow-lg)}
.svc-cta span{color:var(--muted)}
.svc-cta b{font-weight:600; color:var(--ink)}
.svc-cta i{width:36px; height:36px; border-radius:50%; background:var(--brand-navy); color:#fff; display:grid;
  place-items:center; flex:none; transition:transform .35s var(--ease)}
[data-theme="dark"] .svc-cta i{background:var(--brand-sky); color:var(--brand-navy)}
.svc-cta:hover i{transform:translateX(3px)}
.svc-cta i svg{width:15px; height:15px}

/* bento grid: cards 1 and 6 run wide */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.svc-grid.two{grid-template-columns:repeat(2,1fr)}
.svc{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.svc:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:rgba(53,135,189,.45)}

.svc-img{margin:0; overflow:hidden; background:var(--bg-soft); position:relative}
.svc-img img{width:100%; height:auto; aspect-ratio:16/10.5; object-fit:cover; display:block; transition:transform .8s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; transition:opacity .45s;
  background:linear-gradient(to top,rgba(3,43,79,.6),rgba(3,43,79,.05) 55%,transparent)}
.svc:hover .svc-img::after{opacity:.72}

/* number as a glass pill on the photo */
.svc .num{position:absolute; top:15px; left:15px; z-index:2; font-family:'Sora',sans-serif; font-weight:700;
  font-size:.75rem; letter-spacing:.08em; color:#fff; background:rgba(5,62,113,.6);
  border:1px solid rgba(168,216,255,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:5px 12px; border-radius:100px}

.svc-body{padding:30px 28px; position:relative; display:flex; flex-direction:column; flex:1}
.svc-ico{position:absolute; top:-30px; right:26px; width:58px; height:58px; border-radius:17px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; place-items:center; z-index:2; transition:background .35s, border-color .35s, transform .4s var(--ease)}
.svc:hover .svc-ico{background:var(--brand-navy); border-color:var(--brand-navy); transform:translateY(-4px) rotate(-6deg)}
[data-theme="dark"] .svc:hover .svc-ico{background:var(--brand-sky); border-color:var(--brand-sky)}
.svc-ico img{width:28px; height:28px; object-fit:contain; transition:filter .35s}
/* three of the service cards use an inline icon, so they need the same
   invert-on-hover treatment the PNG icons get above */
.svc-ico svg{width:28px; height:28px; color:var(--brand-navy); transition:color .35s}
.svc:hover .svc-ico svg{color:#fff}
[data-theme="dark"] .svc-ico svg{color:#fff}
[data-theme="dark"] .svc:hover .svc-ico svg{color:var(--brand-navy)}
.svc:hover .svc-ico img{filter:brightness(0) invert(1)}
[data-theme="dark"] .svc-ico img{filter:brightness(0) invert(1)}
[data-theme="dark"] .svc:hover .svc-ico img{filter:none}
.svc h3{margin-bottom:10px; margin-top:6px}
.svc p{color:var(--muted); font-size:.94rem}

.svc-tags{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0}
.svc-tags li{font-size:.7rem; font-weight:600; letter-spacing:.03em; color:var(--accent-deep);
  background:var(--accent-soft); border:1px solid rgba(53,135,189,.22); padding:4px 11px; border-radius:100px}

.svc .more{display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:20px; font-size:.865rem;
  font-weight:600; color:var(--muted); transition:color .3s var(--ease), gap .3s var(--ease)}
.svc:hover .more{color:var(--accent-deep); gap:11px}
.svc .more svg{width:15px; height:15px}
.svc .more::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:3}   /* whole card is the link */

/* ============ PILLARS (dark band) ============ */
.band{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.band::before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000,transparent 75%)}
.band .wrap{position:relative}
.band .eyebrow{color:var(--brand-sky)}
.band .lead{color:rgba(255,255,255,.62)}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pillars.four{grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1100px){ .pillars.four{grid-template-columns:repeat(2,1fr)} }
.pillar{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:32px 28px; transition:background .3s, transform .4s var(--ease), border-color .3s}
.pillar:hover{background:rgba(255,255,255,.075); transform:translateY(-5px); border-color:rgba(168,216,255,.45)}
.pillar .p-ico{width:46px;height:46px; border-radius:13px; background:rgba(168,216,255,.16); color:var(--brand-sky); display:grid; place-items:center; margin-bottom:20px}
.pillar .p-ico svg{width:23px;height:23px}
.pillar h3{margin-bottom:10px}
.pillar p{color:rgba(255,255,255,.6); font-size:.94rem}

/* ============ PROCESS ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative}
.steps::before{content:''; position:absolute; top:26px; left:8%; right:8%; height:1.5px; background:linear-gradient(90deg,var(--brand-blue),var(--line) 60%); opacity:.5}
.step{position:relative}
.step .n{width:53px;height:53px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:1.02rem; margin-bottom:22px; position:relative; transition:.35s var(--ease)}
.step:hover .n{background:var(--brand-navy); border-color:var(--brand-navy); color:#fff; transform:scale(1.06)}
.step h3{font-size:1.08rem; margin-bottom:9px}
.step p{color:var(--muted); font-size:.91rem}

/* ============ ABOUT / SPLIT ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,5vw,72px); align-items:center}
.about-vis{position:relative}
.photo{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.4; position:relative;
  background:var(--navy); border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.photo-tag{position:absolute; bottom:18px; left:18px; z-index:2; background:rgba(255,255,255,.09); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); color:#fff; padding:8px 15px; border-radius:100px; font-size:.755rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.badge-quality{
  position:absolute; right:-18px; top:-18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-lg); width:170px; text-align:center;
}
.badge-quality .ring{width:52px;height:52px; margin:0 auto 12px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-deep)}
[data-theme="dark"] .badge-quality .ring{color:var(--accent)}
.badge-quality .ring svg{width:26px;height:26px}
.badge-quality b{display:block; font-family:'Sora',sans-serif; font-size:.98rem; letter-spacing:-.02em}
.badge-quality span{font-size:.76rem; color:var(--muted); line-height:1.45; display:block; margin-top:4px}
/* same treatment where the quality badge is the ISO seal rather than an icon */
.badge-quality .ring:has(.iso-mark){width:60px;height:60px; background:none}
.badge-quality .ring:has(.iso-mark) svg{width:60px;height:60px}
.checks{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:15px}
.checks li{display:flex; gap:13px; align-items:flex-start; font-size:.97rem}
.checks svg{width:21px;height:21px; flex:none; color:var(--accent); margin-top:2px}
.checks b{font-weight:600}
.checks span{color:var(--muted); display:block; font-size:.885rem}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.quote:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.stars{display:flex; gap:3px; color:var(--amber); margin-bottom:18px}
.stars svg{width:16px;height:16px}
.quote p{font-size:1rem; line-height:1.68}
.quote footer{margin-top:24px; padding-top:20px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:13px}
.avatar{width:42px;height:42px; border-radius:50%; background:linear-gradient(140deg,var(--brand-blue),var(--brand-navy)); color:#fff; display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; flex:none}
.quote footer b{display:block; font-size:.9rem; font-weight:600}
.quote footer span{font-size:.79rem; color:var(--muted)}

/* ============ CTA ============ */
.cta-box{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(44px,6vw,72px);
  background:linear-gradient(140deg,var(--navy-2),var(--navy) 60%,var(--navy-3)); color:#fff; text-align:center;
  border:1px solid rgba(255,255,255,.09);
}
.cta-box::before{content:''; position:absolute; width:600px;height:600px; border-radius:50%; background:radial-gradient(circle,var(--brand-sky),transparent 68%); opacity:.3; filter:blur(60px); top:-320px; left:50%; transform:translateX(-50%)}
.cta-box > *{position:relative}
.cta-box h2{max-width:18ch; margin-inline:auto}
.cta-box p{color:rgba(255,255,255,.65); margin:20px auto 34px; max-width:52ch}
.cta-actions{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}
.cta-note{margin-top:28px !important; font-size:.85rem; color:rgba(255,255,255,.45) !important}

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.ccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:.35s var(--ease)}
.ccard:hover{border-color:var(--accent); transform:translateY(-4px)}
.ccard .c-ico{width:44px;height:44px; border-radius:13px; background:var(--accent-soft); color:var(--accent-deep); display:grid; place-items:center; margin-bottom:18px}
[data-theme="dark"] .ccard .c-ico{color:var(--accent)}
.ccard .c-ico svg{width:21px;height:21px}
.ccard h3{font-size:1.02rem; margin-bottom:8px}
.ccard p, .ccard a{color:var(--muted); font-size:.94rem}
.ccard a:hover{color:var(--accent-deep)}
.ccard .rows{display:grid; gap:3px}
.ccard .rows div{display:flex; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--muted)}
.ccard .rows b{color:var(--ink); font-weight:500}

/* ============ FOOTER ============ */
.footer{position:relative; background:var(--navy); color:#fff; margin-top:clamp(72px,9vw,124px)}
.footer::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 15% 0%,rgba(53,135,189,.28),transparent 70%),
             radial-gradient(ellipse 50% 50% at 92% 30%,rgba(168,216,255,.11),transparent 70%)}
.footer .wrap{position:relative; z-index:1}
.wave{line-height:0; margin-top:-1px}
.wave svg{width:100%; height:clamp(56px,7vw,110px); display:block}

/* top contact strip */
.f-top{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding:clamp(30px,4vw,42px) clamp(28px,4vw,44px); margin-top:8px;
  background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(168,216,255,.2); border-radius:var(--radius-lg); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.f-top h3{color:#fff; font-size:clamp(1.25rem,2.2vw,1.6rem); margin-bottom:8px}
.f-top p{font-size:.95rem; color:#fff; max-width:46ch}
.f-top-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn-sky{background:#1E6FA8; color:#fff; border-color:rgba(168,216,255,.5); box-shadow:0 8px 24px -8px rgba(5,62,113,.75)}
.btn-sky:hover{background:#2C7FB8; color:#fff; transform:translateY(-2px)}

.f-grid{display:grid; grid-template-columns:1.9fr 1fr 1fr 1.5fr; gap:44px;
  padding:clamp(48px,6vw,72px) 0 52px}
.f-brand .logo-img{height:56px}
.f-strap{margin-top:18px; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-sky); max-width:34ch; line-height:1.6}
.f-about{margin-top:12px; font-size:.93rem; max-width:36ch; line-height:1.72}
.f-badges{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.f-badges span{display:inline-flex; align-items:center; gap:7px; font-size:.775rem; font-weight:600; color:#fff;
  background:rgba(168,216,255,.11); border:1px solid rgba(168,216,255,.24); padding:7px 13px; border-radius:100px}
.f-badges svg{width:14px;height:14px}
.f-badges .iso-mark{width:15px;height:15px}
.f-social{display:flex; gap:10px; margin-top:24px}
.f-social a{width:40px;height:40px; border-radius:12px; border:1px solid rgba(168,216,255,.22);
  display:grid; place-items:center; color:#fff; transition:.28s var(--ease)}
.f-social a:hover{background:var(--brand-sky); border-color:var(--brand-sky); color:var(--brand-navy); transform:translateY(-3px)}
.f-social svg{width:17px;height:17px}

.footer h4{color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; font-weight:600;
  position:relative; padding-bottom:12px}
.footer h4::after{content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--brand-sky); border-radius:2px}
.f-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.f-list a{font-size:.93rem; display:inline-flex; align-items:center; gap:0; transition:color .22s, gap .22s}
.f-list a::before{content:'›'; opacity:0; width:0; color:#fff; transition:.22s var(--ease); font-size:1.1rem; line-height:1}
.f-list a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.f-list a:hover::before{opacity:1; width:11px}

.f-contact{display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; transition:transform .25s var(--ease)}
.f-contact:hover{transform:translateX(3px)}
.fc-ico{width:38px;height:38px; flex:none; border-radius:11px; background:rgba(168,216,255,.12);
  border:1px solid rgba(168,216,255,.2); display:grid; place-items:center; color:#fff; transition:.25s}
.f-contact:hover .fc-ico{background:var(--brand-sky); color:var(--brand-navy)}
.fc-ico svg{width:17px;height:17px}
.f-contact em{display:block; font-style:normal; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#fff}
.f-contact b{display:block; font-size:.92rem; font-weight:500; color:#fff; line-height:1.5; margin-top:2px}
.f-hours{margin-top:26px; border-top:1px solid rgba(168,216,255,.14); padding-top:16px}
.f-hours div{display:flex; justify-content:space-between; gap:14px; font-size:.875rem; padding:7px 0}
.f-hours b{color:#fff; font-weight:500}
.f-hours .closed{color:#fff}

.f-bottom{border-top:1px solid rgba(168,216,255,.14); padding:24px 0; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.85rem}
.f-bottom nav{display:flex; gap:24px}
.f-bottom a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.to-top{width:42px;height:42px; border-radius:12px; border:1px solid rgba(168,216,255,.24); background:rgba(168,216,255,.09);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:.28s var(--ease)}
.to-top:hover{background:var(--brand-sky); color:var(--brand-navy); transform:translateY(-3px)}
.to-top svg{width:18px;height:18px}

/* ============ REVEAL ============ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  *{animation:none !important}
  html{scroll-behavior:auto}
}

@media (max-height:700px){ .hero{min-height:0; padding-block:40px} }
@media (max-width:900px){ .hero{min-height:0} }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .svc-grid,.quotes,.contact-grid,.pillars{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:34px 24px} .steps::before{display:none}
  .f-grid{grid-template-columns:1fr 1fr; gap:38px}
  .f-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .menu,.nav-actions .btn{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-trust{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 24px}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr; gap:52px}
  .hero-vis{max-width:560px}
  .f-top{flex-direction:column; align-items:flex-start}
  .split{grid-template-columns:1fr}
  .about-vis{order:-1; max-width:520px}
  .topbar-left a:nth-child(3){display:none}
}
@media (max-width:420px){
  .topbar-left a:nth-child(2){display:none}
  .hero-trust{grid-template-columns:1fr; gap:16px} .trust-item{width:100%}
}
@media (max-width:640px){
  body{font-size:16px}
  .svc-grid,.quotes,.contact-grid,.pillars,.steps{grid-template-columns:1fr}
  .pillars.four{grid-template-columns:1fr}
  .svc-cta{width:100%; justify-content:space-between; white-space:normal; padding:11px 11px 11px 20px; gap:10px}
  .svc-cta span{display:none}
  .svc-head{gap:24px}
  .stats{grid-template-columns:repeat(2,1fr); margin-bottom:44px}
  .stat{padding:24px 14px}
  .stat span{font-size:.78rem; margin-top:7px}
  .f-grid{grid-template-columns:1fr; gap:36px}
  .hero-vis{grid-template-columns:1fr}
  .hero-photo-sm{display:none}
  .hero-vis .float-card{grid-column:1/-1}
  .f-top-actions{width:100%} .f-top-actions .btn{flex:1}
  .topbar-left{gap:14px}
  .topbar-right span{display:none}
  .topbar-left a:nth-child(2){overflow:hidden; text-overflow:ellipsis}
  .strip ul{gap:14px 20px} .strip li{font-size:.9rem}
  .strip-inner{gap:18px}
  .float-card{padding:14px 18px}
  .badge-quality{right:8px; top:-14px; width:148px; padding:16px}
  .hero-trust{gap:20px}
  .f-bottom{flex-direction:column; align-items:flex-start; gap:14px}
  .f-bottom nav{flex-wrap:wrap; gap:16px}
  .cta-actions .btn{width:100%}
}

/* ============================================================
   INNER PAGES (services.html / about.html)
   ============================================================ */

/* ---- page hero ---- */
.page-hero{position:relative; overflow:hidden; color:#fff;
  padding:clamp(46px,5.5vw,78px) 0 clamp(46px,5.5vw,78px);
  background:linear-gradient(150deg,var(--navy-2),var(--navy) 55%,var(--navy-3))}
.page-hero::before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  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:58px 58px;
  mask-image:radial-gradient(ellipse 80% 100% at 30% 0%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 30% 0%,#000,transparent 76%)}
.page-hero::after{content:''; position:absolute; width:720px; height:720px; border-radius:50%;
  top:-300px; right:-240px; background:radial-gradient(circle,var(--brand-blue),transparent 66%);
  opacity:.34; filter:blur(70px); pointer-events:none}
.page-hero .wrap{position:relative; z-index:1}
.page-hero .eyebrow{color:var(--brand-sky)}
.page-hero h1{font-size:clamp(2rem,4vw,3.05rem); max-width:22ch}
.page-hero p{color:#fff; opacity:.78; margin-top:16px; max-width:58ch; font-size:1.04rem}
.page-hero-grid{display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap}
.page-hero-facts{display:flex; gap:12px; flex-wrap:wrap}
.page-hero-facts div{background:rgba(255,255,255,.07); border:1px solid rgba(168,216,255,.22);
  border-radius:var(--radius); padding:16px 20px; min-width:132px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.page-hero-facts b{display:block; font-family:'Sora',sans-serif; font-size:1.5rem; letter-spacing:-.03em; color:#fff}
.page-hero-facts span{font-size:.775rem; color:#fff; opacity:.7}

/* ---- breadcrumb ---- */
.crumb{display:flex; align-items:center; gap:9px; font-size:.82rem; color:#fff; opacity:.72; margin-bottom:16px}
.crumb a{color:#fff}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px}
.crumb svg{width:12px; height:12px; opacity:.7}
.crumb span{opacity:.75}

/* ---- alternating feature rows ---- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.4vw,64px);
  align-items:center; margin-bottom:clamp(54px,6.5vw,92px); scroll-margin-top:130px}
.feature:last-child{margin-bottom:0}
.feature:nth-child(even) .feature-media{order:2}
.feature-media{margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--bg-soft)}
.feature-media img{width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; display:block;
  transition:transform .8s var(--ease)}
.feature-media:hover img{transform:scale(1.04)}
.feature-media::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(to top,rgba(3,43,79,.45),transparent 52%)}
.feature-tag{position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.08em; color:#fff;
  background:rgba(5,62,113,.6); border:1px solid rgba(168,216,255,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:6px 13px; border-radius:100px}
.feature-ico{width:54px; height:54px; border-radius:16px; background:var(--accent-soft);
  display:grid; place-items:center; margin-bottom:20px}
.feature-ico img{width:28px; height:28px; object-fit:contain}
.feature-ico svg{width:28px; height:28px; color:var(--accent-deep)}
[data-theme="dark"] .feature-ico img{filter:brightness(0) invert(1)}
.feature h2{font-size:clamp(1.45rem,2.5vw,2rem)}
.feature .lead{margin-top:14px; font-size:1rem}
.f-points{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.f-points li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem}
.f-points svg{width:19px; height:19px; color:var(--accent); flex:none; margin-top:3px}

/* ---- equipment chips ---- */
.equip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.equip div{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 18px; font-weight:600; font-size:.9rem;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s}
.equip div:hover{transform:translateY(-3px); border-color:var(--brand-blue); box-shadow:var(--shadow)}
.equip i{width:7px; height:7px; border-radius:50%; background:var(--brand-blue); flex:none}

/* ---- story timeline ---- */
.tl{position:relative; display:grid; gap:0; margin-top:8px}
.tl-item{position:relative; padding:0 0 34px 40px; border-left:2px solid var(--line)}
.tl-item:last-child{padding-bottom:0; border-left-color:transparent}
.tl-item::before{content:''; position:absolute; left:-8px; top:3px; width:14px; height:14px; border-radius:50%;
  background:var(--brand-blue); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--brand-blue)}
.tl-item b{display:block; font-family:'Sora',sans-serif; font-size:1.06rem; letter-spacing:-.02em; margin-bottom:6px}
.tl-item em{font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-deep); display:block; margin-bottom:8px}
.tl-item p{color:var(--muted); font-size:.94rem}

/* ---- value cards ---- */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

/* ============ KEY DIFFERENTIATORS (label / value rows) ============ */
.diffs{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-top:38px}
.diffs > div{display:grid; grid-template-columns:minmax(190px,260px) 1fr; align-items:baseline;
  gap:clamp(14px,3vw,40px); background:var(--surface); padding:22px clamp(18px,3vw,30px)}
.diffs b{font-family:'Sora',sans-serif; font-size:1.02rem; letter-spacing:-.02em; line-height:1.3}
.diffs span{color:var(--muted); font-size:.95rem}
@media (max-width:700px){
  /* label and value stack; the 190px minimum column blew past narrow viewports */
  .diffs > div{grid-template-columns:1fr; gap:5px; padding:18px 20px}
}

/* grouped equipment lists (imaging / surgical / SPD / biomedical) */
.equip-group + .equip-group{margin-top:38px}
.equip-group h3{font-size:1.04rem; margin-bottom:16px; display:flex; align-items:center; gap:11px}
.equip-group h3::before{content:''; width:22px; height:2px; background:var(--brand-blue); flex:none}
.value{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s}
.value:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(53,135,189,.45)}
.value .v-ico{width:50px; height:50px; border-radius:15px; background:var(--accent-soft);
  color:var(--accent-deep); display:grid; place-items:center; margin-bottom:20px}
[data-theme="dark"] .value .v-ico{color:var(--accent-deep)}
.value .v-ico svg{width:24px; height:24px}
.value h3{margin-bottom:10px}
.value p{color:var(--muted); font-size:.94rem}

/* ---- inner-page responsive ---- */
@media (max-width:900px){
  .feature{grid-template-columns:1fr; gap:28px}
  .feature:nth-child(even) .feature-media{order:0}
  .equip{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:1fr}
  .page-hero-grid{gap:26px}
}
@media (max-width:640px){
  .equip{grid-template-columns:1fr}
  .page-hero-facts{width:100%}
  .page-hero-facts div{flex:1; min-width:0; padding:14px 16px}
  .page-hero-facts b{font-size:1.25rem}
}
@media (max-width:480px){
  /* three facts in one row is unreadable on a small phone */
  .page-hero-facts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
  .page-hero-facts div{padding:13px 15px}
  .page-hero-facts div:last-child{grid-column:1 / -1}
  .badge{font-size:.76rem; padding:6px 7px 6px 6px}
  .badge b{padding:3px 9px; font-size:.72rem}
}

/* ============================================================
   GALLERY (gallery.html)
   ============================================================ */
.gal-bar{display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-bottom:clamp(26px,3.4vw,42px)}
.gal-filter{padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:var(--surface);
  font-family:inherit; font-size:.875rem; font-weight:600; color:var(--muted); cursor:pointer;
  transition:transform .28s var(--ease), border-color .25s, color .25s, background .25s}
.gal-filter:hover{border-color:var(--brand-blue); color:var(--ink); transform:translateY(-2px)}
.gal-filter.on{background:var(--brand-navy); border-color:var(--brand-navy); color:#fff}
[data-theme="dark"] .gal-filter.on{background:var(--brand-sky); border-color:var(--brand-sky); color:var(--brand-navy)}
.gal-count{margin-left:auto; font-size:.85rem; color:var(--muted)}

/* masonry: mixed portrait/landscape keep their natural ratio */
.gal{columns:3; column-gap:18px}
.gal figure{break-inside:avoid; margin:0 0 18px; position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); cursor:zoom-in;
  background:var(--bg-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.gal figure:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.gal img{width:100%; height:auto; display:block; transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:38px 18px 16px; color:#fff;
  background:linear-gradient(to top,rgba(3,43,79,.9),rgba(3,43,79,.35) 55%,transparent);
  font-size:.9rem; font-weight:600; line-height:1.4;
  opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease)}
.gal figure:hover figcaption{opacity:1; transform:none}
.gal figcaption em{display:block; font-style:normal; font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom:4px}
.gal-zoom{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(5,62,113,.6); border:1px solid rgba(168,216,255,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; color:#fff; opacity:0; transform:scale(.85); transition:.3s var(--ease)}
.gal figure:hover .gal-zoom{opacity:1; transform:none}
.gal-zoom svg{width:15px; height:15px}
.gal-empty{text-align:center; color:var(--muted); padding:60px 0; display:none}

/* lightbox */
.lb{position:fixed; top:0; right:0; bottom:0; left:0; z-index:300; background:rgba(3,20,36,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:34px}
.lb.open{display:flex}
.lb-img{max-width:min(1100px,92vw); max-height:80vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:var(--shadow-lg); display:block}
.lb-cap{position:absolute; left:0; right:0; bottom:24px; text-align:center; color:#fff;
  font-size:.95rem; font-weight:600; padding:0 70px}
.lb-cap em{display:block; font-style:normal; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; opacity:.65; margin-bottom:5px}
.lb-btn{position:absolute; width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.1); color:#fff;
  display:grid; place-items:center; transition:background .25s, transform .25s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:20px; height:20px}
.lb-close{top:26px; right:26px}
.lb-prev{left:26px; top:50%; margin-top:-24px}
.lb-next{right:26px; top:50%; margin-top:-24px}
.lb-prev:hover{transform:translateX(-3px)} .lb-next:hover{transform:translateX(3px)}

@media (max-width:1080px){ .gal{columns:2} }
@media (max-width:640px){
  .gal{columns:1}
  .gal-count{margin-left:0; width:100%}
  .gal figcaption{opacity:1; transform:none}
  .lb{padding:14px}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-close{top:12px; right:12px}
  .lb-cap{padding:0 12px; bottom:14px; font-size:.86rem}
}

/* ============================================================
   FORMS · MODAL · PROCESS · CONTACT
   ============================================================ */

/* ---- form controls ---- */
.form{display:grid; gap:16px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{display:block; font-size:.795rem; font-weight:600; margin-bottom:7px; color:var(--ink)}
.field .req{color:var(--accent-deep)}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:.94rem; line-height:1.4;
  transition:border-color .25s, box-shadow .25s}
.field input::placeholder, .field textarea::placeholder{color:var(--muted); opacity:.75}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--accent-soft)}
.field input:invalid:not(:placeholder-shown){border-color:#C2543F}
.field textarea{min-height:118px; resize:vertical}
.field select{cursor:pointer}
.form-note{font-size:.8rem; color:var(--muted); line-height:1.6}
.form-ok{display:none; align-items:flex-start; gap:12px; padding:16px 18px; border-radius:var(--radius-sm);
  background:var(--accent-soft); border:1px solid rgba(53,135,189,.3); font-size:.9rem}
.form-ok.show{display:flex}
.form-ok svg{width:20px; height:20px; color:var(--accent-deep); flex:none; margin-top:1px}

/* ---- modal (request a quote) ---- */
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:400; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(3,20,36,.74); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px)}
.modal.open{display:flex}
.modal-card{position:relative; width:min(640px,100%); max-height:92vh; overflow-y:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg)}
.modal-head{padding:30px 32px 0}
.modal-head h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.modal-head p{color:var(--muted); font-size:.94rem; margin-top:10px}
.modal-body{padding:22px 32px 30px}
.modal-close{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); display:grid; place-items:center;
  cursor:pointer; transition:background .25s, border-color .25s; z-index:2}
.modal-close:hover{background:var(--bg-soft); border-color:var(--muted)}
.modal-close svg{width:18px; height:18px}
.modal-alt{margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.88rem; color:var(--muted)}
.modal-alt a{font-weight:600; color:var(--accent-deep)}
.modal-alt a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---- process steps ---- */
.psteps{display:grid; gap:18px}
.pstep{display:grid; grid-template-columns:76px 1fr; gap:26px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s}
.pstep:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(53,135,189,.4)}
.pstep-n{width:62px; height:62px; border-radius:19px; background:var(--brand-navy); color:#fff;
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:1.22rem;
  letter-spacing:-.03em; flex:none}
[data-theme="dark"] .pstep-n{background:var(--brand-sky); color:var(--brand-navy)}
.pstep h3{font-size:1.2rem; margin-bottom:9px}
.pstep > div > p{color:var(--muted); font-size:.95rem}
.pstep-out{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.pstep-out li{font-size:.72rem; font-weight:600; letter-spacing:.03em; color:var(--accent-deep);
  background:var(--accent-soft); border:1px solid rgba(53,135,189,.22); padding:5px 12px; border-radius:100px}
.pstep-time{display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.pstep-time svg{width:14px; height:14px; color:var(--accent)}

/* ---- FAQ (native details, no JS) ---- */
.faq{display:grid; gap:12px; max-width:840px; margin-inline:auto}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .3s}
.faq details[open]{border-color:rgba(53,135,189,.42)}
.faq summary{padding:20px 24px; cursor:pointer; font-family:'Sora',sans-serif; font-weight:600;
  font-size:1rem; letter-spacing:-.01em; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; width:13px; height:13px; flex:none; position:relative;
  background:linear-gradient(var(--accent-deep) 0 0) center/100% 2.2px no-repeat,
             linear-gradient(var(--accent-deep) 0 0) center/2.2px 100% no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(180deg);   /* 180 keeps the bar horizontal */
  background:linear-gradient(var(--accent-deep) 0 0) center/100% 2.2px no-repeat}
.faq summary:hover{color:var(--accent-deep)}
.faq details p{padding:0 24px 22px; color:var(--muted); font-size:.94rem; margin-top:-4px}

/* ---- contact page ---- */
.contact-split{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,3.6vw,52px); align-items:start}
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,40px); box-shadow:var(--shadow)}
.form-card h2{font-size:clamp(1.35rem,2.4vw,1.8rem); margin-bottom:10px}
.form-card > p{color:var(--muted); font-size:.95rem; margin-bottom:26px}
.contact-aside{display:grid; gap:14px}
.ccard-sm{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; display:flex; gap:14px; align-items:flex-start; transition:.3s var(--ease)}
.ccard-sm:hover{border-color:var(--brand-blue); transform:translateY(-3px)}
.ccard-sm .ci{width:42px; height:42px; border-radius:12px; background:var(--accent-soft);
  color:var(--accent-deep); display:grid; place-items:center; flex:none}
.ccard-sm .ci svg{width:20px; height:20px}
.ccard-sm em{display:block; font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.ccard-sm b{display:block; font-weight:600; font-size:.96rem; line-height:1.5}
.ccard-sm a{color:inherit}
.ccard-sm a:hover{color:var(--accent-deep)}
.map{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); height:clamp(260px,34vw,380px); background:var(--bg-soft)}
.map iframe{width:100%; height:100%; border:0; display:block}

@media (max-width:900px){
  .contact-split{grid-template-columns:1fr}
  .pstep{grid-template-columns:1fr; gap:18px}
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
  .modal{padding:0; align-items:flex-end}
  .modal-card{max-height:94vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%}
  .modal-head{padding:26px 22px 0}
  .modal-body{padding:20px 22px 26px}
  .modal-alt{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ============================================================
   LEGAL PAGES (privacy.html / terms.html)
   ============================================================ */
.legal-grid{display:grid; grid-template-columns:238px 1fr; gap:clamp(30px,4.2vw,68px); align-items:start}
.legal-toc{position:sticky; top:122px}
.legal-toc b{display:block; font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px}
.legal-toc a{display:block; padding:8px 0 8px 15px; font-size:.875rem; color:var(--muted);
  border-left:2px solid var(--line); transition:color .25s, border-color .25s}
.legal-toc a:hover{color:var(--ink); border-left-color:var(--brand-blue)}

.legal{max-width:760px}
.legal-note{display:flex; gap:13px; align-items:flex-start; padding:18px 20px; margin-bottom:34px;
  background:var(--accent-soft); border:1px solid rgba(53,135,189,.24); border-radius:var(--radius);
  font-size:.92rem; line-height:1.65}
.legal-note svg{width:20px; height:20px; color:var(--accent-deep); flex:none; margin-top:2px}
.legal section{scroll-margin-top:130px}
.legal h2{font-size:1.28rem; margin:44px 0 14px}
.legal section:first-child h2{margin-top:0}
.legal h3{font-size:1.02rem; margin:24px 0 10px}
.legal p{color:var(--muted); font-size:.97rem; margin-bottom:14px}
.legal ul{color:var(--muted); padding-left:20px; margin:0 0 16px}
.legal li{margin-bottom:9px; font-size:.97rem}
.legal a{color:var(--accent-deep); font-weight:500}
.legal a:hover{text-decoration:underline; text-underline-offset:3px}
.legal strong{color:var(--ink); font-weight:600}
.legal-updated{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  background:rgba(255,255,255,.09); border:1px solid rgba(168,216,255,.24); font-size:.8rem; color:#fff; margin-top:18px}
.legal-updated svg{width:14px; height:14px; opacity:.8}

/* ============ ARTICLE (long-form, reuses the legal page's prose grid) ============ */
.article p, .article li{font-size:1.02rem; line-height:1.78}
.article h2{font-size:clamp(1.35rem,2.2vw,1.6rem); margin:52px 0 16px}
.article h3{font-size:1.08rem; margin:30px 0 10px}
.article .lead-in{color:var(--ink); font-size:1.14rem; line-height:1.72; margin-bottom:24px}
.pullquote{margin:36px 0; padding:22px 26px; border-left:3px solid var(--brand-blue);
  background:var(--bg-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:'Sora',sans-serif; font-size:1.12rem; line-height:1.5;
  letter-spacing:-.02em; color:var(--ink)}
.hero-byline{display:flex; align-items:center; gap:13px; margin-top:24px}
.hero-byline .b-av{width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(168,216,255,.16); border:1px solid rgba(168,216,255,.3);
  font-family:'Sora',sans-serif; font-weight:600; font-size:.92rem; color:#fff}
.hero-byline b{display:block; font-size:.95rem; color:#fff; font-weight:600}
.hero-byline span{font-size:.8rem; color:#fff; opacity:.72}
.author-card{display:flex; gap:18px; align-items:flex-start; margin-top:54px; padding:26px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft)}
.author-card .b-av{width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-deep);
  font-family:'Sora',sans-serif; font-weight:600; font-size:1rem}
.author-card b{display:block; font-family:'Sora',sans-serif; font-size:1.05rem; letter-spacing:-.02em}
.author-card em{display:block; font-style:normal; font-size:.85rem; color:var(--muted); margin-top:2px}
.author-card p{margin:12px 0 0; font-size:.92rem !important}

/* link band that points at the long-form article */
.insight-band{display:flex; gap:clamp(20px,4vw,48px); align-items:center; justify-content:space-between;
  flex-wrap:wrap; padding:clamp(24px,3.2vw,38px); border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--bg-soft); transition:.3s var(--ease)}
.insight-band:hover{border-color:var(--brand-blue); box-shadow:var(--shadow)}
.insight-band h3{margin-top:9px; font-size:clamp(1.15rem,2vw,1.42rem)}
.insight-band p{margin-top:9px; color:var(--muted); font-size:.94rem; max-width:62ch}
.insight-band .btn{flex:none; pointer-events:none}

/* ============ CREDENTIALS (certifications & training) ============ */
.creds{list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.creds li{display:flex; align-items:center; gap:15px; padding:18px 24px;
  font-family:'Sora',sans-serif; font-size:1.01rem; font-weight:500;
  letter-spacing:-.015em; line-height:1.35}
.creds li + li{border-top:1px solid var(--line-2)}
.creds li svg{width:21px; height:21px; color:var(--accent); flex:none}
@media (max-width:560px){
  .creds li{padding:15px 18px; font-size:.94rem; gap:12px}
  .creds li svg{width:19px; height:19px}
}

/* ============ 3D STANDARDS TABLE ============ */
.table3d-wrap{overflow-x:auto; padding:26px 4px 46px; perspective:1800px}
.table3d-slab{min-width:640px; border-radius:var(--radius); overflow:hidden;
  transform:rotateX(4deg); transform-origin:top center;
  box-shadow:0 2px 0 rgba(5,62,113,.10),
             0 20px 34px -20px rgba(5,62,113,.45),
             0 54px 78px -44px rgba(5,62,113,.55)}
[data-theme="dark"] .table3d-slab{box-shadow:0 2px 0 rgba(0,0,0,.4),
             0 20px 34px -20px rgba(0,0,0,.6), 0 54px 78px -44px rgba(0,0,0,.75)}
.table3d{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface)}
.table3d thead th{background:linear-gradient(180deg,var(--navy-2),var(--navy)); color:#fff;
  font-family:'Sora',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; text-align:left; padding:19px 26px;
  border-bottom:2px solid rgba(168,216,255,.34)}
[data-theme="dark"] .table3d thead th{background:linear-gradient(180deg,#0A5187,#04203A)}
.table3d tbody td{padding:22px 26px; vertical-align:top; border-bottom:1px solid var(--line-2);
  transition:background .28s var(--ease)}
.table3d tbody tr:last-child td{border-bottom:0}
.table3d tbody tr:hover td{background:var(--bg-soft)}
.table3d td:first-child{width:33%; font-family:'Sora',sans-serif; font-weight:600;
  font-size:1rem; letter-spacing:-.02em; color:var(--ink)}
.table3d td:last-child{color:var(--muted); font-size:.95rem; line-height:1.68}
@media (max-width:900px){
  .table3d-wrap{perspective:none; padding-bottom:22px}
  .table3d-slab{transform:none}
  .table3d thead th, .table3d tbody td{padding:17px 20px}
}
@media (prefers-reduced-motion:reduce){ .table3d-slab{transform:none} }
@media (max-width:700px){
  /* below this the two columns cannot both be readable, so each row becomes a block */
  .table3d-wrap{overflow-x:visible; padding:18px 0 24px}
  .table3d-slab{min-width:0}
  .table3d, .table3d tbody, .table3d tr, .table3d td{display:block; width:auto}
  .table3d thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}
  .table3d thead th{width:1px; padding:0; border:0}
  .table3d tbody tr{border-bottom:1px solid var(--line-2)}
  .table3d tbody tr:last-child{border-bottom:0}
  .table3d tbody td{border-bottom:0; padding:4px 20px}
  .table3d td:first-child{width:auto; padding-top:18px; font-size:1.02rem}
  .table3d td:last-child{padding-bottom:20px}
}
@media (max-width:640px){ .author-card{flex-direction:column; gap:14px} }

@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr; gap:28px}
  .legal-toc{position:static; padding-bottom:8px; border-bottom:1px solid var(--line)}
  .legal-toc div{display:flex; flex-wrap:wrap; gap:6px}
  .legal-toc a{border-left:0; border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:.82rem}
  .legal-toc a:hover{border-color:var(--brand-blue)}
}

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.detail-media{margin:0 0 clamp(44px,5.5vw,76px); position:relative; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--bg-soft)}
.detail-media img{width:100%; height:auto; aspect-ratio:21/8; object-fit:cover; display:block}
.detail-media::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(to top,rgba(3,43,79,.5),transparent 55%)}
.detail-media figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 28px 20px; color:#fff; font-size:.92rem; font-weight:600}

/* related services */
.rel{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.rel a{display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .35s var(--ease), border-color .3s, box-shadow .3s}
.rel a:hover{transform:translateY(-4px); border-color:var(--brand-blue); box-shadow:var(--shadow)}
.rel .r-ico{width:42px; height:42px; border-radius:12px; background:var(--accent-soft);
  display:grid; place-items:center; flex:none}
.rel .r-ico img{width:22px; height:22px; object-fit:contain}
.rel .r-ico svg{width:22px; height:22px; color:var(--accent-deep)}
[data-theme="dark"] .rel .r-ico svg{color:#fff}
[data-theme="dark"] .rel .r-ico img{filter:brightness(0) invert(1)}
.rel b{font-size:.95rem; font-weight:600; letter-spacing:-.01em}
.rel .r-go{margin-left:auto; color:var(--accent-deep); display:grid; place-items:center; flex:none;
  transition:transform .3s var(--ease)}
.rel a:hover .r-go{transform:translateX(3px)}
.rel .r-go svg{width:17px; height:17px}

@media (max-width:900px){ .rel{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .rel{grid-template-columns:1fr}
  .detail-media img{aspect-ratio:16/10}
}

/* ============================================================
   SERVICES DROPDOWN (desktop nav + mobile drawer)
   ============================================================ */
.has-drop{position:relative}
.has-drop > a, .has-drop > .drop-toggle{display:inline-flex; align-items:center; gap:6px}
.has-drop > a .chev, .has-drop > .drop-toggle .chev{width:12px; height:12px; transition:transform .3s var(--ease)}
.has-drop:hover > a .chev, .has-drop:focus-within > a .chev,
.has-drop:hover > .drop-toggle .chev, .has-drop:focus-within > .drop-toggle .chev{transform:rotate(180deg)}
/* invisible bridge so the pointer can cross the gap without closing the menu.
   Only present while hovering, otherwise it would swallow clicks under the nav. */
.has-drop:hover::after{content:''; position:absolute; top:100%; left:0; right:0; height:12px}

.drop{position:absolute; top:calc(100% + 11px); left:0; z-index:120; min-width:250px;
  list-style:none; margin:0; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s}
.has-drop:hover > .drop,
.has-drop:focus-within > .drop{opacity:1; visibility:visible; transform:none}
.drop li{margin:0}
.menu .drop a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:.895rem; font-weight:500; color:var(--muted); white-space:nowrap}
.menu .drop a:hover{background:var(--bg-soft); color:var(--ink)}
.menu .drop a.active{color:var(--accent-deep); background:var(--accent-soft)}
.drop .d-ico{width:26px; height:26px; border-radius:8px; background:var(--accent-soft);
  display:grid; place-items:center; flex:none}
.drop .d-ico img{width:15px; height:15px; object-fit:contain}
[data-theme="dark"] .drop .d-ico img{filter:brightness(0) invert(1)}
.drop .d-ico svg{width:15px; height:15px; color:var(--accent-deep)}
[data-theme="dark"] .drop .d-ico svg{color:#fff}
.drop .drop-all{margin-top:6px; padding-top:12px !important; border-top:1px solid var(--line-2)}
/* the dropdown carries two groups now, so the heavy services get a labelled rule */
.menu .drop .drop-sep{margin-top:7px; padding:11px 12px 3px; border-top:1px solid var(--line-2);
  font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.drop .d-ico svg{width:15px; height:15px; color:var(--accent-deep)}
[data-theme="dark"] .drop .d-ico svg{color:#fff}
.menu .drop .drop-all a{font-weight:600; color:var(--accent-deep)}

/* mobile drawer sub-list */
/* Collapsible groups in the mobile drawer: closed until tapped. */
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line-2)}
.drawer-head .chev{width:20px; height:20px; flex:none; color:var(--muted);
  transition:transform .3s var(--ease)}
.drawer-head[aria-expanded="true"] .chev{transform:rotate(180deg); color:var(--accent-deep)}
.drawer-sub{display:grid; padding-left:16px; margin:0; border-left:2px solid var(--line);
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .34s var(--ease), margin .34s var(--ease), visibility 0s linear .34s}
.drawer-sub.open{max-height:760px; visibility:visible; margin:8px 0 12px;
  transition:max-height .34s var(--ease), margin .34s var(--ease), visibility 0s}
@media (prefers-reduced-motion:reduce){ .drawer-sub{transition:none} }
.drawer nav .drawer-sub a{font-family:'Inter',sans-serif; font-size:1rem; font-weight:500;
  color:var(--muted); padding:10px 0; border-bottom:0; letter-spacing:0}
.drawer nav .drawer-sub a:hover{color:var(--ink)}

/* ============================================================
   TOUCH TARGETS (mobile / tablet)
   Pointer targets need ~44px; several links were 14-25px tall.
   ============================================================ */
@media (max-width:900px){
  .topbar .wrap{height:auto; min-height:46px; padding-block:3px}
  .topbar a{min-height:40px}
  .socials{gap:4px}
  .socials a{width:38px; height:38px; display:grid; place-items:center}
  .f-list a{padding:9px 0}
  .f-bottom nav a{padding:8px 0; display:inline-block}
  .f-bottom nav{gap:10px 20px}
  .ccard p a, .ccard-sm a, .modal-alt a, .legal a{padding:4px 0; display:inline-block}
  .gal-filter{min-height:44px}
  .legal-toc a{min-height:40px; display:flex; align-items:center}
  .crumb a{padding:4px 0}
  /* readability: these sat just under 11.5px */
  .svc-tags li, .pstep-out li{font-size:.75rem}
  .gal figcaption em{font-size:.74rem}
}

/* ============================================================
   VIDEO FEATURE (portrait phone footage, so it is framed, not full-bleed)
   ============================================================ */
.videoblock{display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(28px,4vw,60px); align-items:center}
.videoframe{position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--navy)}
.videoframe video{width:100%; height:auto; display:block; aspect-ratio:9/16;
  object-fit:cover; background:var(--navy)}
.videoframe figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:34px 16px 14px; color:#fff; font-size:.82rem; font-weight:600;
  background:linear-gradient(to top,rgba(3,43,79,.85),transparent)}
.video-meta{display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:16px}
.video-meta svg{width:15px; height:15px}
.video-points{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.video-points li{display:flex; gap:11px; align-items:flex-start; font-size:.94rem}
.video-points svg{width:19px; height:19px; color:var(--accent); flex:none; margin-top:3px}

@media (max-width:900px){
  .videoblock{grid-template-columns:1fr; gap:26px; justify-items:center}
  .videoframe{max-width:340px; width:100%}
  .videoblock > div{width:100%}
}