/* Service-page components. Loaded after site.css (the shared home-page styles). */
.reveal{opacity:1; transform:none}
.svc-hero{padding-block:clamp(34px,5vw,64px) clamp(90px,10vw,130px)}
.svc-hero .hero__grid{grid-template-columns:1.1fr .9fr}
.svc-hero .h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem)}
.svc-hero__img img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow-l)}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.82)}
.crumbs a:hover{color:#fff; text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}

.svc-layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(34px,5vw,64px); align-items:start}
.prose{max-width:74ch}
.prose > * + *{margin-top:18px}
.prose h2{font-size:clamp(1.45rem,1.15rem + 1.2vw,2rem); letter-spacing:-.025em; margin-top:52px; scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem}
.prose p,.prose li{font-size:1.02rem; line-height:1.75}
.prose a{color:var(--brand-deep); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px}
.prose a:hover{color:var(--brand)}
.prose strong{color:var(--ink)}

.signs{display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; padding:0}
.signs li{display:flex; gap:12px; align-items:flex-start; background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 18px; font-size:.96rem; line-height:1.6}
.signs li b{display:block; color:var(--ink)}
.signs .ico,.why-list .ico{width:28px; height:28px; flex:none; border-radius:9px; display:grid; place-items:center; margin-top:2px}
.signs .ico{background:rgba(0,191,166,.12); color:#009A85}

.process{list-style:none; padding:0; counter-reset:step}
.process li{counter-increment:step; position:relative; padding:0 0 26px 62px}
.process li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.92rem; color:#fff; background:linear-gradient(150deg,var(--brand),var(--brand-deep)); box-shadow:0 8px 18px rgba(10,77,140,.22)}
.process li::after{content:""; position:absolute; left:21px; top:52px; bottom:6px; width:2px; background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px)}
.process li:last-child{padding-bottom:0}
.process li:last-child::after{display:none}
.process h3{margin-bottom:4px; padding-top:10px}
.process p{font-size:.97rem}

.systems{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.system{border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:#fff}
.system h3{font-size:1rem; margin-bottom:6px}
.system p{font-size:.94rem; line-height:1.65}

.photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.photo-grid figure{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); aspect-ratio:4/3}
.photo-grid img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.svc-photos:not(:has(figure)){display:none}

.why-list{list-style:none; padding:0; display:grid; gap:12px}
.why-list li{display:flex; gap:12px; align-items:flex-start}
.why-list .ico{background:var(--brand-soft); color:var(--brand-deep)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{padding:7px 14px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--ink-2)}
.prose .faq{margin:0; max-width:none}
.prose .faq__q{font-size:1rem}

.aside{position:sticky; top:calc(var(--header-h) + 20px); display:grid; gap:18px}
.aside-card{border:1px solid var(--line); border-radius:var(--radius-l); padding:24px; background:#fff; box-shadow:var(--shadow-s)}
.aside-card--dark{background:linear-gradient(150deg,#0A1A2F 0%,#0C2340 55%,#0A4D8C 100%); border:0; color:rgba(255,255,255,.75)}
.aside-card--dark h2{color:#fff; font-size:1.2rem; margin-bottom:8px}
.aside-card--dark p{font-size:.92rem; margin-bottom:8px}
.aside-card--dark .btn{width:100%; margin-top:10px}
.aside-title{font-size:.8rem !important; letter-spacing:.13em; text-transform:uppercase; color:var(--body-soft) !important; margin-bottom:10px}
.svc-links{display:grid; gap:2px}
.svc-links a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-weight:600; font-size:.93rem; color:var(--ink-2); transition:background-color .18s,color .18s}
.svc-links a:hover,.svc-links a[aria-current]{background:var(--brand-soft); color:var(--brand-deep)}
.svc-links a::after{content:"\203A"; font-size:1.2rem; opacity:.5}

.related{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rel-card{display:block; border:1px solid var(--line); border-radius:var(--radius-l); padding:24px; background:#fff; transition:transform .25s,box-shadow .25s,border-color .25s}
.rel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.rel-card h3{font-size:1.08rem; margin-bottom:8px}
.rel-card p{font-size:.93rem}
.more{display:inline-block; margin-top:14px; font-weight:700; font-size:.9rem; color:var(--brand-deep)}

.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.hub-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; background:#fff; transition:transform .25s,box-shadow .25s}
.hub-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.hub-card__img{position:relative; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(155deg,#0C2340,#14477F)}
.hub-card__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hub-card__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.hub-card h2{font-size:1.15rem; margin-bottom:8px}
.hub-card p{font-size:.94rem; flex:1}

.brand__name{white-space:nowrap}
@media (max-width:1120px){
  .header__cta .btn--ghost{display:none}
}
@media (max-width:1040px){
  .svc-layout{grid-template-columns:1fr}
  .aside{position:static; grid-template-columns:1fr 1fr}
  .related,.hub-grid{grid-template-columns:1fr 1fr}
  .svc-hero .hero__grid{grid-template-columns:1fr}
  .svc-hero__img{max-width:620px}
}
@media (max-width:620px){
  .svc-hero{padding-block:28px 72px}
  .signs,.systems,.photo-grid,.aside,.related,.hub-grid{grid-template-columns:1fr}
  .prose h2{margin-top:40px}
  .process li{padding-left:56px}
  .rel-card:hover,.hub-card:hover{transform:none}
}

/* Services dropdown (desktop) + services list in the mobile drawer */
.nav__dd{position:relative}
.nav__dd > a{display:inline-flex; align-items:center; gap:5px}
.nav__menu{position:absolute; top:100%; left:50%; z-index:95; min-width:300px; padding:8px; display:grid;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translate(-50%,14px); transition:opacity .18s, transform .18s, visibility .18s}
.nav__menu::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1; visibility:visible; transform:translate(-50%,8px)}
.nav .nav__menu a{padding:9px 12px; border-radius:10px; font-size:.9rem; white-space:nowrap}
.nav .nav__menu a.nav__menu-all{margin-top:4px; border-top:1px solid var(--line-soft); border-radius:0 0 10px 10px; color:var(--brand-deep); font-weight:700}
.drawer__sub{display:grid; padding:4px 0 10px 12px; border-bottom:1px solid var(--line-soft)}
.drawer__sub a{padding:9px 14px; border-radius:10px; font-size:.94rem; font-weight:600; color:var(--body)}
.drawer__sub a:active{background:var(--bg-alt)}
/* Logo image in the brand mark */
.brand__mark{background:#fff; overflow:hidden; border-radius:50%; box-shadow:0 4px 14px rgba(10,77,140,.2)}
.brand__mark img{width:100%; height:100%; object-fit:contain}
.header .brand__mark{width:50px; height:50px}
@media (max-width:680px){ .header .brand__mark{width:44px; height:44px} }