:root {
  color-scheme: dark;
  --page: #080e19;
  --surface: #101b2d;
  --border: #2a3b55;
  --ink: #f0f5ff;
  --muted: #b1c1d7;
  --blue: #80dfff;
  --heading: "Geist", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 100px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.62 var(--body); }
a { color: inherit; text-decoration: none; }
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
h1, h2, h3 { margin: 0; line-height: 1.13; letter-spacing: -.045em; font-family: var(--heading); }
h1 { font-size: clamp(46px, 7vw, 88px); font-weight: 780; }
h2 { font-size: clamp(27px, 4vw, 43px); font-weight: 730; }
h3 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; }
p { margin: 0; color: var(--muted); }
.wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: fixed; z-index: 5; top: 12px; left: 12px; transform: translateY(-150%); padding: 10px 14px; background: var(--ink); color: var(--page); }
.skip:focus { transform: none; }

.site-header { position: sticky; z-index: 3; top: 0; background: #090f1bf5; border-bottom: 1px solid var(--border); }
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; }
.brand { flex: 0 0 auto; }
.brand img { display: block; width: 158px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); flex-wrap: wrap; }
.site-nav a { color: var(--muted); font-size: 14px; font-weight: 650; padding-block: 8px; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-nav a[aria-current] { box-shadow: 0 2px 0 var(--blue); }
.site-nav .nav-contact { padding: 8px 13px; border: 1px solid #42627e; border-radius: 8px; color: var(--blue); }
.site-nav .nav-contact[aria-current] { box-shadow: none; border-color: var(--blue); background: #162943; }
.menu-toggle { display: none; }

.hero, .subhero {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 82% 36%, #163567, transparent 58%), linear-gradient(130deg, #0a1425, #101c32);
}
.hero h1 em { color: var(--blue); font-style: normal; }
.eyebrow { margin-bottom: 12px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.intro { max-width: 560px; margin-top: 18px; font-size: clamp(17px, 2vw, 20px); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #4a6986;
  border-radius: 8px;
  color: var(--ink);
  font: 720 14px/1.4 var(--body);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.button:hover { transform: translateY(-2px); border-color: var(--blue); }
.primary { color: #081523; background: var(--blue); border-color: var(--blue); }
.primary:hover { background: #b5eeff; }
.secondary { background: #122139; }
.secondary:hover { background: #192c45; }
.text-link { color: var(--blue); font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero h1, .subhero h1, .hero .intro, .hero .actions { animation: enter .56s ease-out both; }
.hero .intro { animation-delay: .09s; }
.hero .actions { animation-delay: .16s; }
@keyframes enter { from { transform: translateY(11px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.subhero { padding-block: clamp(56px, 7vw, 98px); }
.subhero h1 { font-size: clamp(43px, 6.5vw, 77px); max-width: 960px; }
.subhero .intro { max-width: 660px; }
.support-hero { padding-block: clamp(40px, 5vw, 68px); }
.section { padding-block: clamp(46px, 6vw, 80px); }
.section h2 + .cards { margin-top: 24px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.cards, .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card, .steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--border);
  border-top-color: #42658d;
  border-radius: 14px;
  background: linear-gradient(145deg, #15233a, var(--surface) 75%);
}
.card .eyebrow { margin: 0; }
.card .text-link { align-self: flex-start; margin-top: auto; padding-top: 4px; }
.case h2, .steps h2 { font-size: clamp(21px, 2.7vw, 29px); }
.detail { color: #add5f1; font-size: 13px; }
.case .detail { margin-top: auto; }
.band { border-block: 1px solid var(--border); background: #0c1626; }
.profile { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(20px, 5vw, 72px); }
.profile .text-link { display: inline-block; margin-top: 16px; }
.closing { padding-top: 0; }
.band + .closing, .hero + .closing { padding-top: clamp(46px, 6vw, 80px); }
.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid #3b5679;
  border-radius: 16px;
  background: linear-gradient(120deg, #162a49, #101a2b 80%);
}
.contact-band p { margin-top: 10px; }
.contact-band .button { flex-shrink: 0; }

.solution-list { display: grid; gap: 22px; }
.solution {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.solution h2 + p { margin-top: 12px; }
.solution .text-link { display: inline-block; margin-top: 14px; }
.solution-checks { padding: 22px; border-radius: 10px; background: #0c1627; }
.solution-checks ul { margin-bottom: 0; padding-inline-start: 19px; color: var(--muted); }
.solution-checks li + li { margin-top: 7px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: "Step " counter(step); color: var(--blue); font-size: 13px; font-weight: 720; }

.faq-layout { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.65fr); gap: clamp(24px, 5vw, 68px); }
.faq-layout:has(.faq-search[hidden]) { grid-template-columns: 1fr; }
.faq-group + .faq-group { margin-top: 30px; }
.faq-group h2 { margin-bottom: 14px; font-size: clamp(23px, 3vw, 30px); }
.faq-group details { border-top: 1px solid var(--border); }
.faq-group details:last-child { border-bottom: 1px solid var(--border); }
.faq-group summary { padding: 14px 4px; font-weight: 700; cursor: pointer; }
.faq-group summary::marker { color: var(--blue); }
.faq-group details p { padding: 0 4px 16px; max-width: 680px; }
.faq-search p, #enquiry-status { margin-top: 7px; color: var(--muted); font-size: 14px; }
label { display: block; font-weight: 700; margin-bottom: 7px; }
input, textarea, select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #4a607b;
  border-radius: 8px;
  background: #0a1424;
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; }
input::placeholder { color: #a1b2c9; }
.contact-layout { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.5fr); gap: clamp(22px, 5vw, 66px); align-items: start; }
.contact-address { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-block: 12px 6px; }
.contact-address strong { color: var(--blue); overflow-wrap: anywhere; }
.contact-address .button, .copy-reply { min-height: 36px; padding: 6px 10px; }
#copy-address-status:empty, #copy-status:empty, #enquiry-status:empty { display: none; }
#copy-address-status, #copy-status { color: var(--blue); font-size: 14px; }
.contact-topics { display: grid; margin-top: 26px; }
.contact-topics h3 { margin-bottom: 10px; }
.contact-topics a { display: flex; justify-content: space-between; gap: 10px; max-width: 380px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.contact-topics a:hover, .contact-topics span { color: var(--blue); }
.support-sidebar-note { margin-top: 26px; padding: 15px 17px; border-left: 2px solid #477ba3; background: #0e192b; }
.support-sidebar-note h3 { margin-bottom: 6px; font-size: 18px; }
.support-sidebar-note p { font-size: 14px; }
.enquiry { padding: clamp(18px, 3.2vw, 32px); border: 1px solid var(--border); border-top-color: #42658d; border-radius: 14px; background: var(--surface); }
.enquiry h2 { font-size: clamp(26px, 4vw, 35px); }
.enquiry > p { margin-top: 8px; }
.enquiry fieldset { min-width: 0; margin: 24px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--border); }
.enquiry legend { padding: 0 12px 0 0; font: 700 18px/1.35 var(--heading); }
.enquiry fieldset > label, #enquiry-tried-field { margin-top: 15px; }
.enquiry label span, .field-help { color: var(--muted); font-size: 14px; font-weight: 400; }
.enquiry .field-help { margin-top: 6px; }
.enquiry .button:disabled { opacity: .64; cursor: wait; }
.enquiry .actions { margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid > div { min-width: 0; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.enquiry-suggestion { margin-top: 14px; padding: 10px 13px; border: 1px solid #315074; border-radius: 8px; background: #0a1729; font-size: 14px; }
.enquiry-suggestion .text-link { display: inline-block; margin-top: 5px; }
.receipt-reference { align-self: flex-start; padding: 6px 12px; border: 1px solid #42658d; border-radius: 8px; color: var(--blue); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.receipt .actions { margin-top: 6px; }

.site-footer { border-top: 1px solid var(--border); background: #090f1b; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 23px; font-size: 14px; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.footer nav a:hover { color: var(--ink); }

@media (max-width: 940px) {
  .wrap { width: calc(100% - 44px); }
  .header { gap: 14px; }
  .brand img { width: 140px; }
  .site-nav { gap: 14px; }
}
@media (max-width: 790px) {
  .cards, .steps, .profile, .contact-layout, .solution, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-band { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 410px) {
  .wrap { width: calc(100% - 32px); }
  .hero .actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.arrow {
  display: inline-block;
  width: .5em;
  height: .5em;
  margin: 0 .1em .09em .23em;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.contact-topics a { align-items: center; }

@media (max-width: 1020px) {
  html { scroll-padding-top: 84px; }
  .header { min-height: 68px; flex-wrap: wrap; padding-block: 11px; }
  .site-nav { flex-basis: 100%; padding-block: 3px 7px; gap: 10px 18px; }
  .menu-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #4a6986;
    background: #122139;
    color: var(--ink);
    font: 700 14px/1.4 var(--body);
    cursor: pointer;
  }
  .menu-toggle[aria-expanded=false]:not([hidden]) + .site-nav { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-photo {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 595px;
  background: #091323;
}
.hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -3;
  width: 83%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 56%;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #091323 7%, #091323f0 32%, #091323a6 52%, #0913232e 79%),
              linear-gradient(0deg, #091323c7, transparent 34%);
}
.hero-light {
  position: absolute;
  z-index: -1;
  inset: -42% -15% -28% 36%;
  background: radial-gradient(ellipse at 62% 54%, #0f64d83b, #0089ce12 34%, transparent 68%);
  pointer-events: none;
}
[data-motion="on"] .hero-light { animation: drift 4.5s cubic-bezier(.18,.7,.29,1) both; }
@keyframes drift {
  from { transform: translate3d(10%, -13%, 0) scale(.87); opacity: .48; }
  to { transform: translate3d(-6%, 15%, 0) scale(1.18); opacity: 1; }
}
.hero-content { padding-block: clamp(64px, 6.4vw, 88px) 43px; }
.hero-photo h1 {
  max-width: 790px;
  font-size: clamp(46px, 5.8vw, 82px);
  text-wrap: balance;
}
.hero-photo .intro { max-width: 520px; color: #c4d3e8; }
.card { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:focus-within, .card:hover {
  border-color: #5085aa;
  box-shadow: 0 7px 22px #01081042;
}
.guide-card { background: linear-gradient(147deg, #142238, #0e1a2a 70%); }
.home-guides .card { border-top: 2px solid #4b85ad; }
.article-back { display: inline-block; margin-bottom: 16px; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  align-items: start;
  gap: clamp(28px, 6vw, 76px);
}
.article-aside h2 { font-size: 25px; }
.guide-checks { display: grid; gap: 24px; margin: 22px 0 0; padding-inline-start: 26px; }
.guide-checks li { padding-inline-start: 7px; }
.guide-checks li::marker { color: var(--blue); font-weight: 750; }
.guide-checks h3 { margin-bottom: 7px; }
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.help-launcher {
  position: fixed;
  z-index: 4;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 47px;
  padding: 9px 15px;
  border: 1px solid #85e2ff;
  border-radius: 24px;
  background: var(--blue);
  color: #081523;
  font: 750 14px/1.35 var(--body);
  box-shadow: 0 7px 28px #02070ea8;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.help-launcher::before {
  content: "";
  width: 13px;
  height: 10px;
  border: 1.7px solid currentColor;
  border-radius: 5px 5px 5px 1px;
}
.help-launcher:hover { transform: translateY(-2px); background: #b5eeff; }
.help-dialog {
  position: fixed;
  inset: auto 22px 22px auto;
  width: min(410px, calc(100% - 44px));
  max-width: none;
  max-height: min(570px, calc(100dvh - 44px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4b749c;
  border-radius: 16px;
  background: #0d1728;
  color: var(--ink);
  box-shadow: 0 18px 60px #02070ecc;
}
.help-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(60px, 1fr) auto auto auto;
  animation: enter .22s ease-out both;
}
.help-dialog::backdrop { background: #03060d74; }
.help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #354c6b;
  background: linear-gradient(135deg, #152b49, #0f2037);
}
.help-header h2 { font-size: 23px; }
.help-header p, .help-footer { font-size: 13px; }
.help-header p { margin-top: 4px; color: #b8d3eb; }
.help-close, .help-topics button {
  padding: 6px 9px;
  border: 1px solid #456485;
  border-radius: 7px;
  background: #101f35;
  color: var(--ink);
  font: 650 13px/1.4 var(--body);
  text-align: left;
  cursor: pointer;
}
.help-close:hover, .help-topics button:hover { border-color: var(--blue); color: var(--blue); }
.help-log {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px 14px 10px;
  overflow: auto;
  overscroll-behavior: contain;
}
.help-message {
  width: fit-content;
  max-width: 93%;
  padding: 10px 12px;
  border: 1px solid #304666;
  border-radius: 10px;
  background: #16263e;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.help-message p { color: var(--ink); }
.help-message.visitor { justify-self: end; background: #213c5c; }
.help-message .text-link { display: inline-block; margin-top: 7px; }
.help-topics { display: flex; gap: 6px; padding: 0 14px 12px; flex-wrap: wrap; max-height: 112px; overflow: auto; }
.help-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px 0; border-top: 1px solid #304666; }
.help-form input { min-width: 0; }
.help-footer { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 14px 13px; }
.help-footer a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer { padding-bottom: 76px; }

@media (max-width: 790px) {
  .hero-photo { min-height: 0; }
  .hero-image { width: 100%; object-position: 70% 52%; }
  .hero-photo::before { background: linear-gradient(90deg, #091323fa, #091323bc 65%, #09132367), linear-gradient(0deg, #091323c7, transparent 58%); }
  .hero-photo h1 { font-size: clamp(38px, 8vw, 60px); text-wrap: initial; }
  .hero-content { padding-block: 60px 35px; }
  .guide-grid, .article-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .help-dialog { right: 10px; bottom: 10px; width: calc(100% - 20px); max-height: min(550px, calc(100dvh - 20px)); }
  .help-launcher { right: 14px; bottom: 14px; }
}
.hero-content { position: relative; }
.hero-image { transform-origin: 77% 53%; }
[data-motion="on"] .hero-image { animation: rack-pan 4.7s cubic-bezier(.18,.7,.29,1) both; }
@keyframes rack-pan {
  from { transform: scale(1.012); }
  to { transform: scale(1.066) translate3d(-.5%, .7%, 0); }
}
.hero-emblem {
  position: absolute;
  right: clamp(0px, 2.5vw, 34px);
  top: 50%;
  width: clamp(148px, 21vw, 278px);
  transform: translateY(-50%);
  overflow: hidden;
  border: 1px solid #6aa8dc7a;
  border-radius: 24px;
  background: #0b1729;
  box-shadow: 0 26px 60px #01050fc4, 0 0 64px #1174d83d;
}
.hero-emblem img, .trace-media img { display: block; width: 100%; height: auto; }
@media (min-width: 791px) {
  .hero-photo h1 { max-width: min(790px, calc(100% - 26vw)); }
}
.card .arrow, .button .arrow { transition: translate .18s ease; }
.card a:is(:hover, :focus-visible) .arrow, .button:is(:hover, :focus-visible) .arrow { translate: 3px 0; }
.workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  align-items: center;
  gap: clamp(26px, 5vw, 74px);
}
.workflow-copy > h2 { max-width: 420px; }
.workflow-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-block: 19px 18px;
}
.workflow-tabs button {
  min-height: 39px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0a1424;
  color: var(--muted);
  font: 700 14px/1.4 var(--body);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.workflow-tabs button[aria-selected="true"], .workflow-tabs button:hover {
  border-color: #638cb0;
  background: #142944;
  color: var(--blue);
}
.workflow-stages { min-height: 105px; }
.workflow-stages section { margin-top: 15px; }
.workflow-stages section p, .workflow-example { margin-top: 8px; }
.workflow-stages section[role="tabpanel"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 4px; }
[data-motion="on"] .workflow-stages section[role="tabpanel"]:not([hidden]) { animation: enter .28s ease-out both; }
.workflow-example + .text-link { display: inline-block; margin-top: 14px; }
.trace-media {
  position: relative;
  overflow: hidden;
  border: 1px solid #3b5979;
  border-radius: 14px;
  background: #0b1729;
  box-shadow: 0 12px 36px #01071042;
}
.profile-band { border-top: 0; background: #0a1321; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
[data-motion="off"] .arrow { translate: none !important; }
[data-motion="off"] :is(.button, .help-launcher):hover { transform: none; }

@media (max-width: 790px) {
  .workflow { grid-template-columns: minmax(0, 1fr); }
  .workflow-stages { min-height: 0; }
}

.hero h1, .hero .intro, .hero .actions { animation-name: hero-arrive; }
@keyframes hero-arrive {
  from { transform: translateY(8px); opacity: .75; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 790px) {
  .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    padding-bottom: 42px;
  }
  .hero-content :is(.eyebrow, h1, .actions) { grid-column: 1 / -1; }
  .hero-content .intro { grid-area: 3 / 1; }
  .hero-emblem {
    position: static;
    grid-area: 3 / 2;
    width: clamp(58px, 17vw, 84px);
    margin-top: 18px;
    transform: none;
    border-radius: 11px;
    box-shadow: 0 8px 24px #01050f9c;
  }
}

[data-motion="on"] .hero-emblem { animation: emblem-arrive .85s .12s ease-out both; }
@keyframes emblem-arrive {
  from { opacity: .56; scale: .96; }
  to { opacity: 1; scale: 1; }
}
[data-motion="on"] .content-entered {
  animation: section-arrive .52s var(--entry-delay, 0s) cubic-bezier(.2,.7,.25,1) both;
}
.cards > .card:nth-child(3n + 2), .steps > li:nth-child(2) { --entry-delay: .07s; }
.cards > .card:nth-child(3n), .steps > li:nth-child(3) { --entry-delay: .14s; }
@keyframes section-arrive {
  from { opacity: .72; translate: 0 10px; }
  to { opacity: 1; translate: none; }
}
.site-nav a:not(.nav-contact) { position: relative; }
.site-nav a:not(.nav-contact):not([aria-current])::after {
  content: "";
  position: absolute;
  height: 2px;
  inset: auto 0 0;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .21s ease-out;
}
.site-nav a:not(.nav-contact):is(:hover, :focus-visible)::after { transform: scaleX(1); }
.button.primary { position: relative; isolation: isolate; overflow: hidden; }
[data-motion="on"] .button.primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 35%, #ffffff45 50%, transparent 65%);
  pointer-events: none;
}
[data-motion="on"] .button.primary:is(:hover, :focus-visible)::before { animation: button-sheen .58s ease-out; }
@keyframes button-sheen { to { transform: translateX(100%); } }
[data-motion="on"] .faq-group details[open] p { animation: section-arrive .25s ease-out both; }
.workflow[data-stage] .trace-media::after {
  content: "";
  position: absolute;
  top: 77%;
  left: var(--stage-marker, 19.7%);
  width: 8%;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  box-shadow: 0 0 9px #56baff90;
  translate: -50% 0;
  transition: left .37s cubic-bezier(.23,.73,.28,1);
  pointer-events: none;
}
.workflow[data-stage="1"] { --stage-marker: 50%; }
.workflow[data-stage="2"] { --stage-marker: 80.3%; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-fade-out .14s ease-out both; }
  ::view-transition-new(root) { animation: page-fade-in .25s ease-out both; }
}
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: .58; } }

.service-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.service-icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 42px;
  height: 42px;
  color: #94dafb;
  border: 1px solid #385b7d;
  border-radius: 10px;
  background: linear-gradient(145deg, #1a304d, #101d30);
  transition: border-color .24s ease, box-shadow .24s ease;
}
.card:is(:hover, :focus-within) .service-icon {
  border-color: #71b7db;
  box-shadow: 0 0 18px #4ab4f02c;
}
.service-icon-signal span {
  align-self: end;
  width: 4px;
  height: 7px;
  margin-bottom: 11px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
}
.service-icon-signal span:nth-child(2) { height: 12px; }
.service-icon-signal span:nth-child(3) { height: 17px; }
.service-icon-plan::before {
  content: "";
  position: absolute;
  inset-inline: 10px;
  height: 1px;
  background: #6a9fca;
}
.service-icon-plan span {
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: #142643;
}
.service-icon-lock::before, .service-icon-lock::after {
  content: "";
  position: absolute;
  border: 1.5px solid currentColor;
}
.service-icon-lock::before {
  top: 10px;
  width: 8px;
  height: 10px;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.service-icon-lock::after {
  top: 18px;
  width: 16px;
  height: 11px;
  border-radius: 3px;
  background: #142643;
}
.cards > .card { position: relative; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.cards > .card::before {
  content: "";
  position: absolute;
  inset: 0 14px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #92deff9c, transparent);
  opacity: .5;
  transform-origin: left;
  pointer-events: none;
}
[data-motion="on"] .cards > .card.content-entered::before {
  animation: card-edge-in .78s var(--entry-delay, 0s) ease-out both;
}
[data-motion="on"] .content-entered .service-icon-signal span {
  animation: signal-in .62s calc(var(--entry-delay, 0s) + var(--signal-delay, 0s)) ease-out both;
}
[data-motion="on"] .content-entered .service-icon-plan span {
  animation: node-in .56s calc(var(--entry-delay, 0s) + var(--signal-delay, 0s)) ease-out both;
}
.service-icon span:nth-child(2) { --signal-delay: .09s; }
.service-icon span:nth-child(3) { --signal-delay: .18s; }
[data-motion="on"] .content-entered .service-icon-lock::before {
  animation: shackle-in .54s var(--entry-delay, 0s) ease-out both;
}
@keyframes card-edge-in {
  from { opacity: 0; transform: scaleX(.18); }
  62% { opacity: 1; }
  to { opacity: .5; transform: scaleX(1); }
}
@keyframes signal-in {
  from { transform: scaleY(.38); opacity: .45; }
  70% { transform: scaleY(1.12); }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes node-in {
  from { opacity: .35; }
  50% { background: #80dfff; }
  to { opacity: 1; }
}
@keyframes shackle-in {
  from { translate: 0 -4px; opacity: .4; }
  to { translate: none; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  [data-motion="on"] .cards > .card:hover { transform: translateY(-3px); }
}
@media (max-width: 1020px) {
  [data-motion="on"] .menu-toggle[aria-expanded="true"] + .site-nav { animation: section-arrive .24s ease-out both; }
}
@supports (background-clip: text) {
  [data-motion="on"] .hero h1 em {
    color: transparent;
    background: linear-gradient(105deg, var(--blue) 32%, #c2edff 49%, var(--blue) 63%);
    background-size: 230% 100%;
    background-position: 100% 0;
    background-clip: text;
    animation: headline-sheen 1.45s .26s ease-out both;
  }
}
@keyframes headline-sheen { to { background-position: 0 0; } }

.review-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(22px, 6vw, 80px); }
.review-hero h1 { max-width: 640px; font-size: clamp(45px, 6vw, 78px); }
.review-hero-photo { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid #45648a; border-radius: 16px; background: #0c182a; box-shadow: 0 20px 50px #040b1a75; }
.review-hero-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.review-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, #213e6745, transparent 45%, #080e1970); }
[data-motion="on"] .review-hero-photo img { animation: rack-pan 4.7s cubic-bezier(.18,.7,.29,1) both; }
.review-cards .card { min-height: 100%; }
.review-cards dl { margin: 4px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.review-cards dt { font-weight: 700; }
.review-cards dd { margin: 4px 0 0; color: var(--muted); }
.review-cards .button { align-self: flex-start; margin-top: auto; }
.review-deliverable { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(22px, 5vw, 65px); align-items: center; }
.review-deliverable h2 + p { margin-top: 12px; max-width: 560px; }
.review-report { margin: 0; border: 1px solid #385472; border-radius: 13px; background: #101d31; }
.review-report div { display: grid; grid-template-columns: minmax(80px, .4fr) 1fr; gap: 8px 16px; padding: 13px 16px; }
.review-report div + div { border-top: 1px solid var(--border); }
.review-report dt { color: var(--blue); font-weight: 700; }
.review-report dd { margin: 0; color: var(--muted); }
@media (max-width: 790px) {
  .review-hero-grid, .review-deliverable { grid-template-columns: minmax(0, 1fr); }
  .review-hero-photo { aspect-ratio: 16 / 7; max-height: 270px; }
}
@media (max-width: 420px) {
  .review-report div { grid-template-columns: minmax(0, 1fr); }
}

.handover-document { max-width: 960px; }
.handover-heading, .inbox-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.handover-heading h1 { max-width: 740px; font-size: clamp(38px, 6vw, 68px); }
.handover-heading button { margin-top: 8px; }
.handover-meta, .inbox-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 24px 0; }
.handover-meta { padding: 16px; border-block: 1px solid var(--border); background: #101b2d; }
:is(.handover-meta, .inbox-details) dt { color: var(--muted); font-size: 13px; font-weight: 700; }
:is(.handover-meta, .inbox-details) dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.handover-document section + section { margin-top: 25px; }
.handover-document section h2 { margin-bottom: 8px; font-size: clamp(24px, 3vw, 34px); }
.handover-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.handover-table table { width: 100%; border-collapse: collapse; }
.handover-table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.handover-table thead { background: #14243a; }
.handover-table tbody tr:last-child > * { border-bottom: 0; }
.handover-table td { color: var(--muted); }

.inbox { max-width: 1040px; }
.inbox-heading h1 { font-size: clamp(40px, 6vw, 70px); }
.inbox-heading .intro { max-width: 680px; }
.inbox-heading h2 { font-size: clamp(24px, 4vw, 32px); }
.inbox-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.inbox-actions [aria-current] { border-color: var(--blue); color: var(--blue); }
.inbox-list { display: grid; gap: 16px; margin-top: 18px; }
.inbox-item h3 { font-size: 17px; }
.inbox-status { padding: 3px 10px; border: 1px solid #49759b; border-radius: 20px; color: var(--blue); font-size: 13px; font-weight: 700; }
.inbox-details { margin-block: 6px; padding-block: 12px; border-block: 1px solid var(--border); }
.enquiry-message { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .form-grid, .inbox-details, .handover-meta { grid-template-columns: minmax(0, 1fr); }
  .handover-table :is(th, td) { padding: 8px; font-size: 14px; }
}
@media print {
  body:has(.handover-document) { color-scheme: light; background: #fff; color: #111; --muted: #333; --blue: #123d66; --border: #9faab5; }
  body:has(.handover-document) :is(.site-header, .site-footer, .skip, .help-launcher, .help-dialog, .actions, [data-print]) { display: none !important; }
  .handover-document { width: 100%; max-width: none; padding: 0; }
  .handover-document h1 { font-size: 32pt; }
  .handover-document h2 { break-after: avoid; }
  .handover-meta, .handover-table thead { background: #fff; }
  .handover-table tr { break-inside: avoid; }
}