/* Ankr public website. Loaded after app.css and uses the same Signal brand tokens (ink, signal blue,
   Space Grotesk and IBM Plex), so the website and the client portal read as one brand. */
html { scroll-padding-top: 76px; }
.site section { padding-block: clamp(56px, 8vw, 104px); }
.site h2 { font-size: clamp(30px, 4vw, 44px); }
.site .kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.site .kicker::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.site .lead { font-size: clamp(17px, 1.7vw, 19px); color: var(--muted); max-width: 62ch; }
.site p + p { margin-top: 14px; }

/* header */
.top nav.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { color: #E5E7EB; text-decoration: none; font: 600 14px var(--sans); padding: 8px 12px; border-radius: var(--r-sm); }
.site-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.site-nav .login { border: 1.5px solid var(--accent); color: #FFFFFF; margin-left: 8px; }
.site-nav .login:hover { background: var(--accent); color: #FFFFFF; }
.menu-btn { display: none; background: none; border: 1.5px solid #374151; color: #FFFFFF; border-radius: var(--r-sm); padding: 8px 14px; font: 600 14px var(--sans); cursor: pointer; }
@media (max-width: 899px) {
  .menu-btn { display: inline-flex; }
  .top nav.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--brand-ink); flex-direction: column; align-items: stretch; padding: 8px 16px 20px; border-top: 1px solid #374151; }
  .top nav.site-nav.open { display: flex; }
  .site-nav a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid #1F2937; font-size: 16px; }
  .site-nav .login { margin: 12px 0 0; text-align: center; border-radius: var(--r-sm); }
}
.top .wrap { position: relative; }

/* hero */
.hero { background: var(--brand-ink); color: #FFFFFF; position: relative; overflow: hidden; }
.site section.hero { padding-block: clamp(64px, 10vw, 128px) clamp(72px, 10vw, 136px); }
.hero .wrap { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.hero .sub { margin-top: 22px; font-size: clamp(18px, 2vw, 22px); color: #D1D5DB; max-width: 34ch; }
.hero .ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn.ghost { color: #FFFFFF; border-color: #374151; }
.hero .btn.ghost:hover { border-color: #FFFFFF; background: transparent; }
.hero .motto { border-left: 2px solid var(--accent); padding: 6px 0 6px 22px; }
.hero .motto p { font: 500 clamp(22px, 2.4vw, 28px)/1.3 var(--display); letter-spacing: -0.01em; color: #FFFFFF; }
.hero .motto span { display: block; margin-top: 12px; font: 600 14px var(--sans); color: #9CA3AF; }
.hero svg.anchor { position: absolute; right: -60px; bottom: -80px; width: 420px; height: 420px; opacity: 0.06; pointer-events: none; }

/* welcome */
.welcome .wrap { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .welcome .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; } }
.welcome h3 { font: 600 clamp(24px, 2.8vw, 32px)/1.2 var(--display); color: var(--accent-ink); }
.welcome .etym { margin-top: 18px; font: 400 19px/1.5 var(--sans); }
.welcome .etym b { font-style: normal; }

/* services */
.services { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.svc-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc { background: var(--surface); padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; }
.svc .n { font: 700 12px var(--sans); color: var(--accent-ink); letter-spacing: 0.08em; }
.svc h3 { font-size: 21px; }
.svc p { color: var(--muted); font-size: 15px; }
.svc-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.svc-foot p { max-width: 60ch; color: var(--muted); }

/* how we work */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 10px; align-content: start; position: relative; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 600 30px/1 var(--display); color: var(--accent); }
.steps h3 { font-size: 20px; }
.steps p { color: var(--muted); font-size: 15px; }
.done-note { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; background: var(--brand-ink); color: #FFFFFF; border-radius: var(--r); padding: 22px 26px; }
.done-note strong { font: 600 24px var(--display); }
.done-note span { color: #D1D5DB; flex: 1 1 260px; }

/* why choose us */
.why { background: var(--sand); }
.why-grid { display: grid; gap: 28px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why-grid div { border-top: 2px solid var(--brand-ink); padding-top: 16px; display: grid; gap: 8px; }
.why-grid h3 { font-size: 22px; }
.why-grid p { color: var(--muted); }

/* about */
.about .wrap { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .about .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 64px; } }
.about .intro { font: 400 clamp(22px, 2.6vw, 30px)/1.35 var(--display); }
.about .facts { margin-top: 24px; display: grid; gap: 10px; }
.about .facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 10px; }
.about .facts dt { font: 700 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.about .facts dd { margin: 0; }

/* portal band */
.portal-band { background: var(--surface); border-block: 1px solid var(--line); }
.site section.portal-band { padding-block: clamp(40px, 6vw, 64px); }
.portal-band .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.portal-band h2 { font-size: clamp(24px, 3vw, 32px); }
.portal-band p { color: var(--muted); margin-top: 8px; max-width: 58ch; }

/* contact */
.contact .wrap { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
.contact .enq { width: 100%; max-width: 720px; margin-inline: auto; }
.contact .enq .kicker { margin-bottom: 0; }
.contact .enq h2 { font-size: clamp(26px, 3vw, 34px); }
.enq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; align-content: start; }
.enq h3 { font-size: 24px; }
.enq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq .ok-box { background: var(--ok-bg); color: var(--ok); border-radius: var(--r-sm); padding: 14px 16px; font-weight: 600; }

/* accreditations */
.accred { background: var(--sand); }
.site section.accred { padding-block: 40px; }
.accred .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.accred .badge { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 18px 10px 12px; font-weight: 600; }
.accred .badge b { background: var(--brand-ink); color: #FFFFFF; font: 700 12px var(--sans); letter-spacing: 0.1em; border-radius: var(--r-sm); padding: 6px 10px; }

/* footer */
.site-foot { background: var(--brand-ink); color: #D1D5DB; padding-block: 48px 40px; font-size: 14px; }
.site-foot .wrap { display: grid; gap: 24px; }
.site-foot .row1 { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.site-foot .motto { font: 500 20px var(--display); color: #FFFFFF; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-foot a { color: #E5E7EB; }
.site-foot .legal { border-top: 1px solid #374151; padding-top: 20px; display: grid; gap: 6px; color: #9CA3AF; font-size: 13px; }

/* legal pages */
.doc-page { padding-block: clamp(40px, 6vw, 72px); }
.doc-page article { max-width: 760px; }
.doc-page h1 { font-size: clamp(32px, 4.4vw, 48px); }
.doc-page .updated { color: var(--muted); margin: 8px 0 28px; }
.doc-page h2 { font-size: 22px; margin: 32px 0 10px; }
.doc-page p, .doc-page li { font-size: 17px; }
.doc-page ul { padding-left: 22px; display: grid; gap: 6px; }
.doc-page p + p { margin-top: 12px; }

/* fixes after review */
.site > main { padding: 0; }
.site > main.doc-page { padding-block: clamp(40px, 6vw, 72px); }
.accred h2 { font: 700 13px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.enq { align-self: start; }
@media (max-width: 899px) { .hero svg.anchor { display: none; } }

/* service icons (Signal brand tokens) */
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.svc .ico { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; color: var(--accent-ink);
  background: var(--tint); transition: background-color .2s, color .2s; }
.svc .ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .ico { background: var(--brand-ink); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .svc .ico { transition: none; } }

/* larger logo on the website header (twice the portal's size) */
.site .top .wrap { min-height: 84px; }
.site .brand { gap: 14px; }
.site .brand .mark { width: 56px; height: 56px; }
.site .brand .word b { font-size: 50px; }
html:has(body.site) { scroll-padding-top: 100px; }
@media (max-width: 359px) { .hero h1 { font-size: 34px; } }

/* founder photo in About */
.about .portrait { margin: 22px 0 0; max-width: 380px; }
.about .portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--soft); }
.about .portrait figcaption { display: grid; gap: 2px; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--accent); }
.about .portrait figcaption strong { font: 600 16px var(--display); }
.about .portrait figcaption span { font-size: 14px; color: var(--muted); }
@media (max-width: 899px) { .about .portrait { max-width: 320px; } }
.about .intro + .lead { margin-top: 20px; }
.doc-page .pdf-link { margin: -12px 0 24px; font-weight: 600; }