:root {
  --navy:#071426;
  --navy-2:#0b1c33;
  --blue:#2563eb;
  --cyan:#22d3ee;
  --sky:#eef7ff;
  --ink:#132238;
  --muted:#637086;
  --white:#fff;
  --line:#dce6f0;
  --font-head: "Avenir Next", "Segoe UI", sans-serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow:0 24px 60px rgba(7,20,38,.12)
}

/* Service models */
.engagement-section { background: #f2f7fb; }
.engagement-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 85px; }
.engagement-intro h2,
.brief-intro h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.engagement-intro p,
.brief-intro p { margin-top: 20px; color: var(--muted); }
.engagement-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.engagement-card { padding: 32px; background: #fff; border: 1px solid var(--line); }
.engagement-card.care { color: #fff; background: var(--navy); border-color: var(--navy); }
.engagement-card small { color: var(--blue); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.engagement-card.care small { color: var(--cyan); }
.engagement-card h3 { margin: 20px 0 12px; font-size: 1.35rem; }
.engagement-card p { min-height: 105px; color: var(--muted); font-size: .86rem; }
.engagement-card.care p { color: #aabacc; }
.engagement-card ul { margin-top: 22px; list-style: none; }
.engagement-card li { padding: 9px 0; border-top: 1px solid var(--line); font-size: .78rem; }
.engagement-card.care li { border-color: rgba(255, 255, 255, .1); }

/* Project brief */
.brief-section { background: #f7fafc; }
.brief-grid { display: grid; grid-template-columns: .7fr 1fr; gap: 90px; align-items: start; }
.project-brief { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 36px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(7, 20, 38, .07); }
.project-brief label { display: grid; gap: 8px; }
.project-brief label:nth-child(3),
.project-brief label:nth-child(4),
.project-brief .button,
.form-note { grid-column: 1 / -1; }
.project-brief label > span { color: var(--ink); font-size: .76rem; font-weight: 700; }
.project-brief input,
.project-brief select,
.project-brief textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: #f8fafc; border: 1px solid #cfdae5; border-radius: 5px; font: inherit; font-size: .86rem; }
.project-brief textarea { resize: vertical; }
.project-brief input:focus,
.project-brief select:focus,
.project-brief textarea:focus { outline: 3px solid rgba(37, 99, 235, .15); border-color: var(--blue); }
.form-note { min-height: 1.4em; color: var(--muted); font-size: .75rem; text-align: center; }

.choice-field {
  min-width: 0;
  border: 0;
}

.choice-field legend {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 700;
}

.choice-grid {
  display: grid;
  gap: 8px;
}

.choice-grid label {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-grid span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px 10px 39px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid #cfdae5;
  border-radius: 7px;
  font-size: .78rem;
  line-height: 1.3;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.choice-grid span::before {
  content: "";
  position: absolute;
  left: 13px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid #aab9c8;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
}

.choice-grid label:hover span {
  color: var(--ink);
  border-color: #8ea9c2;
}

.choice-grid input:focus-visible + span {
  outline: 3px solid rgba(37, 99, 235, .18);
  outline-offset: 2px;
}

.choice-grid input:checked + span {
  color: #17448a;
  background: #eef5ff;
  border-color: #4d83df;
}

.choice-grid input:checked + span::before {
  background: var(--blue);
  border-color: var(--blue);
}

/* Legal pages */
.legal-nav a { color: #dbe7f3; font-size: .85rem; }
.legal-page { min-height: calc(100vh - 110px); padding: 155px 0 90px; background: #f7fafc; }
.legal-copy { max-width: 780px; }
.legal-copy h1 { margin: 18px 0 32px; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.legal-copy h2 { margin: 38px 0 12px; font-size: 1.25rem; }
.legal-copy p,
.legal-copy li { color: var(--muted); }
.legal-copy ul { margin-left: 20px; }
.legal-status { display: inline-block; padding: 7px 10px; color: #785400 !important; background: #fff1be; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.privacy-page .legal-copy { max-width: 880px; }
.legal-kicker { color: var(--blue) !important; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.legal-lead { max-width: 760px; color: var(--ink) !important; font-size: 1.12rem; line-height: 1.75; }
.privacy-toc { margin: 45px 0 70px; padding: 26px 30px; background: #fff; border: 1px solid var(--line); }
.privacy-toc strong { display: block; margin-bottom: 12px; font-family: var(--font-head); }
.privacy-toc ol { columns: 2; margin-left: 20px; }
.privacy-toc li { padding: 4px 20px 4px 0; color: var(--blue); font-size: .82rem; }
.privacy-page section[id] { scroll-margin-top: 105px; }
.privacy-page section[id] + section[id] { margin-top: 58px; padding-top: 8px; border-top: 1px solid var(--line); }
.privacy-page address { margin: 18px 0; padding: 20px 24px; background: #fff; border-left: 3px solid var(--blue); color: var(--muted); font-style: normal; }
.privacy-page p + p { margin-top: 14px; }
.privacy-page ul { margin: 14px 0 0 22px; }
.privacy-page li + li { margin-top: 8px; }
.privacy-note { margin-top: 22px; padding: 18px 20px; color: #34465a; background: #eaf4ff; border: 1px solid #c9e1f7; font-size: .85rem; }

@media (max-width: 620px) {
  .privacy-toc ol { columns: 1; }
  .privacy-toc { padding: 22px; }
  .legal-nav { display: block; }
}

.brand::before { content: ""; width: 38px; height: 38px; flex: 0 0 38px; background: url("assets/hfnetworks-logo-web.png") center / contain no-repeat; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.faq-item button::after { content: "+"; color: var(--blue); font-size: 1.35rem; font-weight: 400; }
.faq-item.active button::after { content: "−"; }
.browser-dots { width: 36px; height: 8px; background: radial-gradient(circle at 4px 4px, #aebdcd 0 3px, transparent 3.5px), radial-gradient(circle at 17px 4px, #aebdcd 0 3px, transparent 3.5px), radial-gradient(circle at 30px 4px, #aebdcd 0 3px, transparent 3.5px); }
.mock-lines::before,
.mock-lines::after { content: ""; display: block; width: 205px; height: 5px; margin: 8px 0; border-radius: 4px; background: #b9c9d8; }
.mock-lines::after { width: 165px; }
.mock-buttons::before,
.mock-buttons::after { content: ""; display: inline-block; width: 78px; height: 22px; margin-right: 8px; border-radius: 5px; background: var(--blue); }
.mock-buttons::after { width: 58px; background: #d6e1eb; }

@media (max-width: 760px) {
  .engagement-grid,
  .brief-grid,
  .engagement-options,
  .project-brief { grid-template-columns: 1fr; }
  .engagement-grid,
  .brief-grid { gap: 45px; }
  .project-brief label,
  .project-brief label:nth-child(3),
  .project-brief label:nth-child(4),
  .project-brief .button,
  .form-note { grid-column: 1; }
  .engagement-card p { min-height: auto; }
}


* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body {
  font-family:var(--font-body);
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-user-select:none;
  user-select:none
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select:text;
  user-select:text
}

img,
svg,
a,
.brand,
.mock-logo {
  -webkit-user-drag:none;
  user-drag:none
}

body.menu-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

.container {
  width:min(1160px,calc(100% - 40px));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:#fff;
  color:var(--navy);
  padding:10px 16px;
  z-index:1000
}

.skip-link:focus {
  top:20px
}

.site-header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(7,20,38,.84);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  transition:.3s
}

.site-header.scrolled {
  background:rgba(7,20,38,.96);
  box-shadow:0 8px 30px rgba(0,0,0,.16)
}

.nav-wrap {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-.03em
}

.brand>span:last-child>span {
  color:var(--cyan)
}

.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
  color:#c4d0df;
  font-size:.9rem;
  font-weight:500
}

.main-nav>a:not(.button):hover {
  color:#fff
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,var(--blue),#167bdc);
  color:#fff;
  padding:15px 22px;
  border-radius:10px;
  font-weight:700;
  font-family:var(--font-head);
  font-size:.94rem;
  box-shadow:0 12px 30px rgba(37,99,235,.28);
  transition:transform .25s,box-shadow .25s
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 17px 35px rgba(37,99,235,.36)
}

.button-small {
  padding:10px 16px!important;
  color:#fff!important
}

.menu-toggle {
  display:none;
  width:46px;
  height:46px;
  padding:0;
  color:#fff;
  background:linear-gradient(145deg,rgba(37,99,235,.42),rgba(34,211,238,.12));
  border:1px solid rgba(125,223,240,.38);
  border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease
}

.menu-toggle span {
  display:block;
  width:23px;
  height:2px;
  background:#fff;
  border-radius:2px;
  margin:4px auto;
  transition:.25s
}

.menu-toggle:hover {
  background:linear-gradient(145deg,rgba(37,99,235,.7),rgba(34,211,238,.2));
  border-color:rgba(125,223,240,.7);
  transform:translateY(-1px)
}

.menu-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:3px
}

.hero {
  position:relative;
  padding:170px 0 0;
  background:var(--navy);
  color:#fff;
  overflow:hidden
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 80%)
}

.hero-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  opacity:.3
}

.hero-glow-one {
  width:620px;
  height:620px;
  background:radial-gradient(circle,rgba(37,99,235,.6),transparent 67%);
  right:-130px;
  top:-60px
}

.hero-glow-two {
  width:350px;
  height:350px;
  background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%);
  left:-120px;
  bottom:0
}

.hero-grid {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:70px;
  position:relative;
  z-index:2
}

.eyebrow {
  font-family:var(--font-head);
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#9edcf4;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px
}

.eyebrow span {
  width:24px;
  height:2px;
  background:var(--cyan)
}

.eyebrow.dark {
  color:var(--blue)
}

.eyebrow.dark span {
  background:var(--blue)
}

h1,h2,h3 {
  font-family:var(--font-head);
  line-height:1.13;
  letter-spacing:-.045em
}

h1 {
  font-size:clamp(2.65rem,5vw,4.85rem);
  max-width:730px
}

h1 em {
  font-style:normal;
  color:var(--cyan)
}

.hero-copy>p {
  max-width:620px;
  color:#b7c5d8;
  font-size:clamp(1rem,1.4vw,1.14rem);
  margin:26px 0 30px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px
}

.text-link {
  font-weight:600;
  color:#d9e4f1;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding:8px 0
}

.text-link span {
  color:var(--cyan);
  margin-left:6px
}

.hero-proof {
  display:flex;
  align-items:center;
  margin-top:35px
}

.avatar-stack {
  display:flex;
  margin-right:14px
}

.avatar-stack span {
  width:33px;
  height:33px;
  border-radius:50%;
  background:#17345b;
  border:2px solid var(--navy);
  display:grid;
  place-items:center;
  font-size:.62rem;
  font-weight:700;
  margin-left:-7px
}

.avatar-stack span:first-child {
  margin-left:0;
  background:var(--blue)
}

.avatar-stack span:last-child {
  background:var(--cyan);
  color:var(--navy)
}

.hero-proof p {
  font-size:.76rem;
  color:#8fa2ba;
  line-height:1.4
}

.hero-proof strong {
  color:#fff
}

.hero-visual {
  position:relative;
  height:520px;
  display:grid;
  place-items:center
}

.site-mockup {
  width:470px;
  height:340px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.38);
  transform:perspective(1000px) rotateY(-6deg) rotateX(2deg);
  position:relative;
  z-index:3;
  overflow:hidden
}

.browser-bar {
  height:42px;
  background:#eaf0f6;
  display:flex;
  align-items:center;
  padding:0 13px
}

.browser-dots {
  display:flex;
  gap:5px
}

.browser-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#aebdcd
}

.browser-url {
  margin:auto;
  background:#fff;
  color:#7c8b9e;
  border-radius:5px;
  font-size:.58rem;
  width:220px;
  padding:4px 10px;
  text-align:center
}

.browser-url span {
  display:inline-block;
  width:4px;
  height:4px;
  background:#42bd8a;
  border-radius:50%;
  margin-right:5px
}

.mockup-body {
  height:calc(100% - 42px);
  position:relative;
  background:linear-gradient(135deg,#f8fbff,#edf6ff)
}

.mock-nav {
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 25px
}

.mock-logo {
  width:52px;
  height:8px;
  border-radius:4px;
  background:var(--navy)
}

.mock-nav>div:last-child {
  display:flex;
  gap:10px
}

.mock-nav i {
  width:23px;
  height:3px;
  background:#b5c2cf;
  border-radius:3px
}

.mock-content {
  padding:39px 30px
}

.mock-label {
  display:block;
  width:68px;
  height:6px;
  background:var(--cyan);
  border-radius:4px;
  margin-bottom:17px
}

.mock-title {
  width:250px;
  height:19px;
  background:var(--navy);
  border-radius:5px;
  margin-bottom:8px
}

.mock-title.short {
  width:190px
}

.mock-lines {
  margin:18px 0
}

.mock-lines i {
  display:block;
  width:205px;
  height:5px;
  background:#b9c9d8;
  border-radius:4px;
  margin:8px 0
}

.mock-lines i:last-child {
  width:165px
}

.mock-buttons {
  display:flex;
  gap:8px;
  margin-top:21px
}

.mock-buttons i {
  width:78px;
  height:22px;
  background:var(--blue);
  border-radius:5px
}

.mock-buttons i:last-child {
  width:58px;
  background:#d6e1eb
}

.mock-card {
  position:absolute;
  padding:14px;
  width:112px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 14px 30px rgba(15,44,73,.13);
  color:var(--navy)
}

.mock-card span {
  font:800 1.3rem var(--font-head);
  display:block
}

.mock-card small {
  font-size:.5rem;
  color:#7b8998
}

.mock-card div:not(.score-ring) {
  height:3px;
  margin-top:8px;
  background:linear-gradient(90deg,var(--cyan) 70%,#e4eaf0 70%);
  border-radius:3px
}

.card-a {
  right:22px;
  bottom:22px
}

.card-b {
  right:20px;
  top:74px
}

.score-ring {
  position:absolute;
  width:23px;
  height:23px;
  border:4px solid var(--cyan);
  border-left-color:#e5ebef;
  border-radius:50%;
  right:10px;
  top:19px
}

.floating-badge {
  position:absolute;
  z-index:5;
  background:rgba(13,35,61,.94);
  border:1px solid rgba(34,211,238,.25);
  border-radius:9px;
  padding:10px 14px;
  color:#dce9f5;
  font-size:.7rem;
  font-weight:600;
  box-shadow:0 14px 35px rgba(0,0,0,.25);
  backdrop-filter:blur(10px)
}

.floating-badge span {
  color:var(--cyan);
  font-weight:800;
  margin-right:7px
}

.badge-code {
  left:-4px;
  bottom:93px
}

.badge-mobile {
  right:-2px;
  top:95px
}

.orbit {
  position:absolute;
  border:1px solid rgba(34,211,238,.15);
  border-radius:50%
}

.orbit-one {
  width:470px;
  height:470px
}

.orbit-two {
  width:570px;
  height:570px
}

.trust-row {
  position:relative;
  z-index:2;
  margin-top:95px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.1)
}

.trust-row>div {
  display:flex;
  gap:13px;
  padding:27px 22px;
  border-right:1px solid rgba(255,255,255,.1)
}

.trust-row>div:last-child {
  border:0
}

.trust-row>div>span {
  color:var(--cyan);
  font:700 .65rem var(--font-head);
  margin-top:3px
}

.trust-row p {
  color:#788da7;
  font-size:.68rem;
  line-height:1.5
}

.trust-row strong {
  display:block;
  color:#eaf2fa;
  font-size:.78rem
}

.section {
  padding:110px 0
}

.split-heading {
  display:grid;
  grid-template-columns:1.1fr .75fr;
  align-items:end;
  gap:90px;
  margin-bottom:50px
}

.split-heading h2,.section-heading h2,.process-intro h2,.about-copy h2,.faq-intro h2 {
  font-size:clamp(2rem,4vw,3.5rem)
}

.split-heading>p {
  color:var(--muted);
  font-size:1rem;
  border-left:2px solid var(--cyan);
  padding-left:22px;
  margin-bottom:5px
}

.problem-section {
  background:#f7fafc
}

.problem-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.problem-card,.solution-card {
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px;
  background:#fff;
  min-height:280px
}

.problem-card {
  transition:.3s
}

.problem-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:#c5d9ed
}

.icon-box {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  background:var(--sky);
  color:var(--blue);
  border-radius:10px;
  font-weight:800;
  margin-bottom:42px
}

.problem-card h3 {
  font-size:1.25rem;
  margin-bottom:12px
}

.problem-card p {
  font-size:.88rem;
  color:var(--muted)
}

.solution-card {
  grid-column:span 3;
  min-height:unset;
  background:linear-gradient(115deg,var(--navy),#12365f);
  color:#fff;
  display:grid;
  grid-template-columns:.65fr 1fr 1.25fr auto;
  align-items:center;
  gap:28px;
  border:0;
  padding:35px 40px
}

.solution-top span {
  font-size:.7rem;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700
}

.solution-top img {
  display:block;
  width:58px;
  height:58px;
  margin-top:8px;
  object-fit:contain
}

.solution-card h3 {
  font-size:1.4rem
}

.solution-card p {
  font-size:.85rem;
  color:#aebed0
}

.solution-card a {
  white-space:nowrap;
  font-weight:700;
  font-size:.85rem;
  border-bottom:1px solid var(--cyan);
  padding-bottom:6px
}

.solution-card a span {
  color:var(--cyan);
  margin-left:6px
}

.services-section {
  background:var(--navy);
  color:#fff
}

.section-heading {
  text-align:center;
  max-width:720px;
  margin:0 auto 55px
}

.section-heading .eyebrow {
  justify-content:center
}

.section-heading>p {
  color:#93a5ba;
  margin-top:20px
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}

.service-card {
  position:relative;
  background:#0b1e35;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  padding:36px 38px;
  overflow:hidden;
  transition:.3s
}

.service-card:hover {
  border-color:rgba(34,211,238,.35);
  transform:translateY(-4px)
}

.service-card.featured {
  background:linear-gradient(145deg,#102a4b,#0a2038)
}

.service-number {
  position:absolute;
  right:28px;
  top:24px;
  color:rgba(255,255,255,.12);
  font:800 2rem var(--font-head)
}

.service-icon {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(37,99,235,.2);
  color:var(--cyan);
  font:700 1rem var(--font-head);
  margin-bottom:34px
}

.service-card h3 {
  font-size:1.45rem;
  margin-bottom:12px
}

.service-card>p {
  color:#93a5ba;
  font-size:.9rem;
  max-width:480px
}

.service-card ul {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin-top:27px
}

.service-card li {
  font-size:.69rem;
  color:#b9c8d8;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:6px 10px
}

.process-section {
  background:#fff
}

.process-layout {
  display:grid;
  grid-template-columns:.78fr 1.1fr;
  gap:110px
}

.process-intro {
  position:sticky;
  top:130px;
  align-self:start
}

.process-intro>p {
  color:var(--muted);
  margin:22px 0 30px
}

.button-dark {
  background:var(--navy);
  box-shadow:none
}

.timeline {
  position:relative
}

.timeline:before {
  content:"";
  position:absolute;
  left:25px;
  top:28px;
  bottom:35px;
  width:1px;
  background:#d9e3ed
}

.timeline-item {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:26px;
  padding-bottom:45px;
  position:relative
}

.timeline-item>span {
  z-index:1;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid #cdd9e5;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  font:700 .74rem var(--font-head)
}

.timeline-item:first-child>span {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 8px 24px rgba(37,99,235,.25)
}

.timeline-item small {
  color:var(--blue);
  font-size:.69rem;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.12em
}

.timeline-item h3 {
  font-size:1.35rem;
  margin:6px 0 8px
}

.timeline-item p {
  font-size:.88rem;
  color:var(--muted)
}

.about-section {
  background:#f2f7fb
}

.about-grid {
  display:grid;
  grid-template-columns:minmax(0,820px);
  justify-content:center;
  align-items:center;
  gap:0
}

.about-copy .lead {
  font:600 1.13rem/1.55 var(--font-head);
  margin:22px 0 13px;
  color:#263b51
}

.about-copy>p:not(.lead) {
  color:var(--muted);
  font-size:.9rem
}

.values {
  margin-top:30px;
  display:grid;
  gap:16px
}

.values>div {
  display:flex;
  gap:14px;
  align-items:flex-start
}

.values>div>span {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dff5f7;
  color:#069bb0;
  font-size:.7rem;
  flex:0 0 auto
}

.values p {
  font-size:.76rem;
  color:var(--muted);
  line-height:1.45
}

.values strong {
  display:block;
  color:var(--ink);
  font-size:.86rem
}

.faq-layout {
  display:grid;
  grid-template-columns:.7fr 1.25fr;
  gap:100px
}

.faq-intro>p {
  color:var(--muted);
  font-size:.9rem;
  margin:20px 0
}

.faq-intro>a {
  color:var(--blue);
  font-weight:700;
  font-size:.86rem;
  border-bottom:1px solid #bcd0ef;
  padding-bottom:5px
}

.faq-item {
  border-bottom:1px solid var(--line)
}

.faq-item:first-child {
  border-top:1px solid var(--line)
}

.faq-item button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  padding:23px 0;
  border:0;
  background:none;
  color:var(--ink);
  font:700 1rem var(--font-head);
  cursor:pointer
}

.faq-item button i {
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 auto
}

.faq-item button i:before,.faq-item button i:after {
  content:"";
  position:absolute;
  background:var(--blue);
  left:2px;
  right:2px;
  top:8px;
  height:2px;
  transition:.25s
}

.faq-item button i:after {
  transform:rotate(90deg)
}

.faq-item.active button i:after {
  transform:rotate(0)
}

.faq-answer {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s
}

.faq-answer p {
  overflow:hidden;
  color:var(--muted);
  font-size:.87rem
}

.faq-item.active .faq-answer {
  grid-template-rows:1fr
}

.faq-item.active .faq-answer p {
  padding-bottom:23px
}

.cta-section {
  padding:30px 0 110px
}

.cta-card {
  position:relative;
  overflow:hidden;
  text-align:center;
  color:#fff;
  background:linear-gradient(130deg,#0b2441,#164f83);
  border-radius:20px;
  padding:80px 30px;
  box-shadow:0 28px 70px rgba(7,20,38,.18)
}

.cta-pattern {
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(34,211,238,.18) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at center,black,transparent 70%)
}

.cta-card>*:not(.cta-pattern) {
  position:relative;
  z-index:2
}

.cta-card .eyebrow {
  justify-content:center
}

.cta-card h2 {
  font-size:clamp(2.25rem,4.5vw,4rem)
}

.cta-card>p {
  max-width:620px;
  color:#bed0e1;
  margin:20px auto 30px
}

.button-light {
  background:#fff;
  color:var(--navy);
  box-shadow:0 14px 35px rgba(0,0,0,.2)
}

.cta-card small {
  display:block;
  color:#90abc5;
  margin-top:18px;
  font-size:.68rem
}

.site-footer {
  background:#050e1b;
  color:#96a7b9;
  padding:75px 0 25px
}

.footer-top {
  display:grid;
  grid-template-columns:1.3fr .65fr .8fr;
  gap:90px;
  padding-bottom:55px
}

.footer-top>div:first-child p {
  font-size:.8rem;
  max-width:370px;
  margin-top:21px
}

.footer-top h3 {
  color:#fff;
  font-size:.8rem;
  margin-bottom:18px;
  letter-spacing:0
}

.footer-top>div:not(:first-child) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  font-size:.78rem
}

.footer-top a:hover {
  color:var(--cyan)
}

.footer-top>div:last-child p {
  font-size:.72rem;
  margin-top:8px
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  font-size:.68rem
}

.footer-bottom div {
  display:flex;
  gap:24px
}

.reveal {
  opacity:1;
  transform:none;
}

.reveal.is-waiting {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease
}

.reveal.is-waiting.visible {
  opacity:1;
  transform:none
}


@media (max-width:980px) {
  .main-nav {
  gap:18px
}

.hero-grid {
  grid-template-columns:1fr
}

.hero {
  padding-top:145px
}

.hero-copy {
  text-align:center
}

.hero-copy .eyebrow,.hero-actions,.hero-proof {
  justify-content:center
}

.hero-copy>p {
  margin-inline:auto
}

.hero-visual {
  height:430px
}

.trust-row {
  grid-template-columns:repeat(2,1fr)
}

.problem-grid {
  grid-template-columns:1fr 1fr
}

.solution-card {
  grid-column:span 2;
  grid-template-columns:.6fr 1.2fr 1.3fr
}

.solution-card a {
  grid-column:2/4
}

.process-layout {
  gap:60px
}

.about-grid {
  gap:50px
}

.faq-layout {
  gap:55px
}

.footer-top {
  gap:50px
}


}


@media (max-width:760px) {
  .container {
  width:min(100% - 30px,1160px)
}

.nav-wrap {
  height:68px
}

.menu-toggle {
  display:block;
  position:relative;
  z-index:2
}

.menu-toggle.active span:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}

.menu-toggle.active span:nth-child(2) {
  opacity:0
}

.menu-toggle.active span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)
}

.main-nav {
  position:fixed;
  inset:0;
  background:var(--navy);
  padding:105px 30px 35px;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  transform:translateX(100%);
  transition:.3s
}

.main-nav.open {
  transform:none
}

.main-nav>a {
  padding:14px;
  font-size:1.1rem
}

.button-small {
  margin-top:12px
}

.hero {
  padding-top:125px
}

.hero-grid {
  gap:25px
}

.hero-copy {
  text-align:left
}

.hero-copy .eyebrow,.hero-actions,.hero-proof {
  justify-content:flex-start
}

.hero-actions {
  align-items:stretch;
  flex-direction:column;
  gap:10px
}

.text-link {
  text-align:center;
  border:0
}

.hero-visual {
  height:360px;
  transform:scale(.77);
  margin:-25px -70px
}

.trust-row {
  margin-top:10px;
  grid-template-columns:1fr 1fr
}

.trust-row>div {
  padding:18px 10px
}

.section {
  padding:78px 0
}

.split-heading {
  grid-template-columns:1fr;
  gap:22px
}

.split-heading>p {
  margin:0
}

.problem-grid,.services-grid {
  grid-template-columns:1fr
}

.solution-card {
  grid-column:auto;
  display:block;
  padding:30px
}

.solution-card h3,.solution-card p,.solution-card a {
  display:block;
  margin-top:20px
}

.service-card {
  padding:30px 25px
}

.process-layout {
  grid-template-columns:1fr;
  gap:55px
}

.process-intro {
  position:static
}

.about-grid {
  grid-template-columns:1fr
}

.faq-layout {
  grid-template-columns:1fr;
  gap:45px
}

.cta-section {
  padding-bottom:75px
}

.cta-card {
  padding:65px 22px
}

.footer-top {
  grid-template-columns:1fr;
  gap:35px
}

.footer-bottom {
  flex-direction:column;
  gap:12px
}

.footer-bottom div {
  gap:20px
}


}


@media (max-width:430px) {
  h1 {
  font-size:2.35rem
}

.hero-visual {
  transform:scale(.67);
  height:320px;
  margin:-35px -100px
}

.trust-row {
  grid-template-columns:1fr
}

.trust-row>div {
  border-right:0;
  border-bottom:1px solid rgba(255,255,255,.08)
}

.problem-card {
  min-height:240px
}

.cta-card .button {
  font-size:.8rem;
  padding-inline:15px
}


}


@media (prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

.reveal {
  opacity:1;
  transform:none;
  transition:none
}

* {
  animation:none!important;
  transition-duration:.01ms!important
}


}



.mock-note  {
  
  position: absolute;
  
  width: 132px;
  
  padding: 12px 14px;
  
  color: var(--navy);
  
  background: #fff;
  
  border-left: 3px solid var(--blue);
  
  box-shadow: 0 12px 25px rgba(15, 44, 73, .12);
  

}



.mock-note small  {
  
  display: block;
  
  color: var(--blue);
  
  font-size: .48rem;
  
  font-weight: 700;
  
  letter-spacing: .08em;
  
  text-transform: uppercase;
  

}



.mock-note span  {
  
  display: block;
  
  margin-top: 3px;
  
  font: 700 .62rem var(--font-head);
  

}



.mock-note.card-a  {
  
  right: 18px;
  
  bottom: 22px;
  

}



.mock-note.card-b  {
  
  top: 75px;
  
  right: 18px;
  

}



.floating-badge  {
  
  border-color: #24415f;
  
  border-radius: 6px;
  
  background: #0d233d;
  
  backdrop-filter: none;
  

}



.main-nav .active-link  {
  
  color: #fff;
  

}



.page-hero  {
  
  padding: 175px 0 105px;
  
  color: #fff;
  
  background: var(--navy);
  

}



.page-hero h1  {
  
  max-width: 900px;
  

}



.page-hero p  {
  
  max-width: 690px;
  
  margin-top: 28px;
  
  color: #b7c5d8;
  
  font-size: 1.05rem;
  

}



.detail-list  {
  
  padding-top: 55px;
  

}



.detail-row  {
  
  display: grid;
  
  grid-template-columns: 70px 1fr .8fr;
  
  gap: 45px;
  
  padding: 55px 0;
  
  border-bottom: 1px solid var(--line);
  

}



.detail-row > span,
.big-index  {
  
  color: var(--blue);
  
  font: 700 .75rem var(--font-head);
  
  letter-spacing: .08em;
  

}



.detail-row h2,
.process-step h2,
.story-title h2  {
  
  margin-bottom: 15px;
  
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  

}



.detail-row p,
.process-step p,
.story-copy p  {
  
  color: var(--muted);
  

}



.detail-row ul  {
  
  list-style: none;
  

}



.detail-row li  {
  
  padding: 9px 0;
  
  border-bottom: 1px solid var(--line);
  
  font-size: .85rem;
  

}



.detail-row li::before  {
  
  content: "—";
  
  margin-right: 12px;
  
  color: var(--blue);
  

}



.process-page  {
  
  background: #f7fafc;
  

}



.process-steps  {
  
  max-width: 900px;
  

}



.process-step  {
  
  display: grid;
  
  grid-template-columns: 170px 1fr;
  
  gap: 45px;
  
  padding: 45px 0;
  
  border-bottom: 1px solid var(--line);
  

}



.step-meta strong,
.step-meta span  {
  
  display: block;
  

}



.step-meta strong  {
  
  color: var(--blue);
  
  font: 800 2rem var(--font-head);
  

}



.step-meta span  {
  
  margin-top: 4px;
  
  color: var(--muted);
  
  font-size: .75rem;
  
  text-transform: uppercase;
  
  letter-spacing: .1em;
  

}



.story-grid  {
  
  display: grid;
  
  grid-template-columns: .65fr 1fr;
  
  gap: 100px;
  

}



.story-copy  {
  
  display: grid;
  
  gap: 20px;
  

}



.story-copy .lead  {
  
  color: var(--ink);
  
  font: 600 1.2rem/1.6 var(--font-head);
  

}



.principles  {
  
  padding: 80px 0;
  
  color: #fff;
  
  background: var(--navy);
  

}



.principle-grid  {
  
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  
  gap: 50px;
  

}



.principle-grid article > span  {
  
  color: var(--cyan);
  
  font: 700 .7rem var(--font-head);
  

}



.principle-grid h3  {
  
  margin: 25px 0 12px;
  
  font-size: 1.5rem;
  

}



.principle-grid p  {
  
  color: #9bacc0;
  
  font-size: .88rem;
  

}



.contact-hero  {
  
  padding: 175px 0 110px;
  
  color: #fff;
  
  background: var(--navy);
  

}



.contact-grid  {
  
  display: grid;
  
  grid-template-columns: 1fr .7fr;
  
  gap: 100px;
  
  align-items: end;
  

}



.contact-grid h1  {
  
  max-width: 650px;
  

}



.contact-grid > div > p  {
  
  max-width: 620px;
  
  margin: 24px 0 35px;
  
  color: #b7c5d8;
  

}



.mail-card  {
  
  display: grid;
  
  grid-template-columns: 1fr auto;
  
  max-width: 550px;
  
  padding: 22px 25px;
  
  color: var(--navy);
  
  background: #fff;
  

}



.mail-card small  {
  
  grid-column: 1;
  
  color: var(--muted);
  
  font-size: .68rem;
  

}



.mail-card strong  {
  
  font: 700 1.1rem var(--font-head);
  

}



.mail-card span  {
  
  grid-column: 2;
  
  grid-row: 1 / 3;
  
  align-self: center;
  
  color: var(--blue);
  
  font-size: 1.3rem;
  

}



.contact-hint  {
  
  padding: 30px;
  
  color: var(--ink);
  
  background: #fff;
  

}



.contact-hint h2  {
  
  font-size: 1.2rem;
  

}



.contact-hint ul  {
  
  margin: 22px 0 22px 18px;
  
  color: #44566a;
  
  font-size: .85rem;
  

}



.contact-hint p  {
  
  color: var(--muted);
  
  font-size: .75rem;
  

}



.compact-footer  {
  
  padding-top: 25px;
  

}



@media (max-width: 760px)  {
  
  .page-hero,
  .contact-hero  {
  
    padding: 125px 0 75px;
  
}

}

/* Responsive and color-scheme refinements */
:root {
  color-scheme: light dark;
}

body {
  min-width: 320px;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.mail-card strong,
.privacy-page a,
.legal-copy a {
  overflow-wrap: anywhere;
}

.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  color: #e7f3ff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.main-nav .theme-toggle {
  margin-left: -10px;
  margin-right: -12px;
}

.legal-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.legal-nav .theme-toggle {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.mock-logo {
  width: 28px;
  height: 29px;
  border-radius: 0;
  background: url("assets/hfnetworks-logo-web.png") center / contain no-repeat;
}

@media (max-width: 1100px) {
  .hero-grid {
    gap: 35px;
  }

  .site-mockup {
    width: min(470px, 100%);
  }

  .about-grid,
  .process-layout,
  .faq-layout,
  .contact-grid,
  .story-grid,
  .engagement-grid,
  .brief-grid {
    gap: 55px;
  }
}

@media (max-width: 880px) {
  body.menu-open .site-header {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transition:none;
  }

  .menu-toggle {
    display: grid;
    place-content:center;
    position: relative;
    z-index: 102;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 105px 30px 35px;
    background: var(--navy);
    transform: translateX(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .3s ease,visibility 0s linear .3s;
  }

  .main-nav.open {
    transform: translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .3s ease;
  }

  .main-nav > a {
    padding: 14px;
    font-size: 1.05rem;
  }

  .main-nav .button-small {
    margin-top: 12px;
  }

  .main-nav .theme-toggle {
    width: 46px;
    height: 46px;
    margin: 12px 0 2px 14px;
  }

  .hero-grid,
  .about-grid,
  .process-layout,
  .faq-layout,
  .contact-grid,
  .story-grid,
  .engagement-grid,
  .brief-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .hero-copy .eyebrow,
  .hero-actions,
  .hero-proof {
    justify-content: center;
  }

  .hero-visual {
    height: 420px;
  }

  .process-intro {
    position: static;
  }

  .engagement-grid,
  .brief-grid {
    gap: 40px;
  }
}

.theme-toggle[data-theme="light"] {
  color:#9a6400;
  background:#fff;
  border-color:#d8e5f0;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 22px rgba(255,220,108,.3),0 9px 24px rgba(0,0,0,.2);
}

.theme-toggle[data-theme="dark"] {
  color:#86e8f6;
  background:#06111f;
  border-color:#28607b;
  box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 24px rgba(34,211,238,.2),0 9px 24px rgba(0,0,0,.32);
}

.theme-toggle[data-theme="light"]:hover {
  color:#754b00;
  background:#fff8df;
  border-color:#f0c95e;
}

.theme-toggle[data-theme="dark"]:hover {
  color:#c4f7ff;
  background:#0b2035;
  border-color:#4db8d1;
}

.theme-toggle svg {
  transition:transform .25s ease;
}

.theme-toggle:hover svg {
  transform:rotate(12deg) scale(1.08);
}

body,
.problem-section,
.process-section,
.faq-section,
.detail-list,
.story-section,
.brief-section,
.legal-page,
.engagement-section,
.about-section,
.trust-strip,
.problem-card,
.engagement-card,
.project-brief,
.contact-hint,
.privacy-toc {
  transition:color .25s ease,background-color .25s ease,border-color .25s ease;
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, 1160px);
  }

  .section {
    padding-block: 72px;
  }

  .hero,
  .page-hero,
  .contact-hero {
    padding-top: 118px;
  }

  .hero-copy {
    text-align: left;
  }

  .hero-copy .eyebrow,
  .hero-actions,
  .hero-proof {
    justify-content: flex-start;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .text-link {
    text-align: center;
  }

  .hero-visual {
    height: 335px;
    margin-inline: -20px;
  }

  .site-mockup {
    transform: scale(.78);
  }

  .floating-badge {
    display: none;
  }

  .trust-row,
  .problem-grid,
  .services-grid,
  .engagement-options,
  .principle-grid,
  .project-brief {
    grid-template-columns: 1fr;
  }

  .trust-row > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .solution-card {
    grid-column: auto;
  }

  .detail-row,
  .process-step {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-brief {
    padding: 24px;
  }

  .project-brief label,
  .project-brief label:nth-child(3),
  .project-brief label:nth-child(4),
  .project-brief .button,
  .form-note {
    grid-column: 1;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .privacy-toc ol {
    columns: 1;
  }
}

/* First screen */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: clamp(105px, 13vh, 145px);
}

.hero-grid {
  min-height: 0;
  flex: 1;
  align-content: center;
}

.hero h1 {
  font-size: clamp(2.4rem, min(4.6vw, 6.5vh), 4.35rem);
}

.trust-row {
  margin-top: 0;
}

.trust-strip {
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.trust-strip .trust-row {
  border-top: 0;
}

.trust-strip .trust-row > div {
  border-color: var(--line);
}

.trust-strip .trust-row p {
  color: var(--muted);
}

.trust-strip .trust-row strong {
  color: var(--ink);
}

@media (max-width: 980px) {
  .hero {
    padding-top: 112px;
  }

  .hero-grid {
    display: grid;
    align-content: center;
  }

  .hero-visual {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 104px;
  }

  .hero-copy > p {
    margin-block: 18px 20px;
  }

  .hero-proof {
    margin-top: 22px;
  }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-row > div {
    padding: 12px 8px;
  }

  .trust-row p {
    font-size: .62rem;
  }

  .trust-row strong {
    font-size: .7rem;
  }
}

@media (max-height: 680px) {
  .hero {
    padding-top: 82px;
  }

  .hero-proof,
  .hero-visual {
    display: none;
  }

  .hero-copy h1 {
    font-size: clamp(1.9rem, 8vw, 2.35rem);
  }

  .hero-copy > p {
    margin-block: 14px 16px;
  }

  .trust-row > div {
    padding-block: 9px;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: clamp(2.15rem, 12vw, 3rem);
  }

  .brand {
    font-size: 1rem;
  }

  .brand::before {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .hero-visual {
    height: 290px;
    margin-inline: -38px;
  }

  .site-mockup {
    transform: scale(.66);
  }

  .cta-card {
    padding: 54px 20px;
  }

  .button {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edf4fb;
    --muted: #a7b6c7;
    --line: #26394d;
    --sky: #102a43;
    --shadow: 0 24px 60px rgba(0, 0, 0, .28);
  }

  body {
    color: var(--ink);
    background: #07111e;
  }

  .problem-section,
  .process-section,
  .faq-section,
  .detail-list,
  .story-section,
  .brief-section,
  .legal-page,
  .engagement-section,
  .about-section {
    background: #091725;
  }

  .problem-card,
  .engagement-card,
  .project-brief,
  .contact-hint,
  .privacy-toc,
  .privacy-page address {
    color: var(--ink);
    background: #0e2133;
    border-color: var(--line);
  }

  .engagement-card.care,
  .services-section,
  .principles,
  .page-hero,
  .contact-hero,
  .hero {
    background-color: #050e19;
  }

  .timeline-item > span {
    color: #8fb6ff;
    background: #0e2133;
    border-color: #34506a;
  }

  .timeline-item:first-child > span {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
  }

  .project-brief input,
  .project-brief select,
  .project-brief textarea {
    color: var(--ink);
    background: #091725;
    border-color: #365069;
  }

  .project-brief input::placeholder,
  .project-brief textarea::placeholder {
    color: #8293a6;
  }

  .mail-card {
    color: var(--ink);
    background: #0e2133;
    border: 1px solid #34506a;
  }

  .legal-status {
    color: #ffe6a0 !important;
    background: #4a3710;
  }

  .privacy-note {
    color: #c4d9ed;
    background: #102a43;
    border-color: #244967;
  }

  .icon-box,
  .values > div > span {
    color: #7ddff0;
    background: #102a43;
  }

  .mock-note,
  .site-mockup,
  .browser-url {
    color-scheme: light;
  }

  .faq-item button,
  .values strong,
  .about-copy .lead,
  .project-brief label > span,
  .legal-lead {
    color: var(--ink) !important;
  }
}

html[data-theme="dark"] {
  --ink: #edf4fb;
  --muted: #a7b6c7;
  --line: #26394d;
  --sky: #102a43;
  --shadow: 0 24px 60px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  color: var(--ink);
  background: #07111e;
}

html[data-theme="dark"] .trust-strip {
  background: #0e2133;
  border-color: var(--line);
}

html[data-theme="dark"] :is(.problem-section, .process-section, .faq-section, .detail-list, .story-section, .brief-section, .legal-page, .engagement-section, .about-section) {
  background: #091725;
}

html[data-theme="dark"] :is(.problem-card, .engagement-card, .project-brief, .contact-hint, .privacy-toc, .privacy-page address) {
  color: var(--ink);
  background: #0e2133;
  border-color: var(--line);
}

html[data-theme="dark"] :is(.engagement-card.care, .services-section, .principles, .page-hero, .contact-hero, .hero) {
  background-color: #050e19;
}

html[data-theme="dark"] :is(.project-brief input, .project-brief select, .project-brief textarea) {
  color: var(--ink);
  background: #091725;
  border-color: #365069;
}

html[data-theme="dark"] .choice-grid span {
  color: #b8c8d8;
  background: #091725;
  border-color: #365069;
}

html[data-theme="dark"] .choice-grid span::before {
  background: #091725;
  border-color: #668098;
  box-shadow: inset 0 0 0 3px #091725;
}

html[data-theme="dark"] .choice-grid label:hover span {
  color: #fff;
  border-color: #5684a8;
}

html[data-theme="dark"] .choice-grid input:checked + span {
  color: #fff;
  background: #14385f;
  border-color: #4f98e8;
}

html[data-theme="dark"] .choice-grid input:checked + span::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px #14385f;
}

html[data-theme="dark"] .mail-card {
  color: var(--ink);
  background: #0e2133;
  border: 1px solid #34506a;
}

html[data-theme="dark"] :is(.faq-item button, .values strong, .about-copy .lead, .project-brief label > span, .legal-lead) {
  color: var(--ink) !important;
}

html[data-theme="light"] {
  --ink: #132238;
  --muted: #637086;
  --line: #dce6f0;
  --sky: #eef7ff;
  --shadow: 0 24px 60px rgba(7, 20, 38, .12);
  color-scheme: light;
}

html[data-theme="light"] body {
  color: var(--ink);
  background: #fff;
}

html[data-theme="light"] :is(.problem-section, .process-section, .faq-section, .detail-list, .story-section, .brief-section, .legal-page, .about-section) {
  background: #f7fafc;
}

html[data-theme="light"] .engagement-section {
  background: #f2f7fb;
}

html[data-theme="light"] :is(.problem-card, .engagement-card:not(.care), .project-brief, .contact-hint, .privacy-toc, .privacy-page address) {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

html[data-theme="light"] :is(.project-brief input, .project-brief select, .project-brief textarea) {
  color: var(--ink);
  background: #f8fafc;
  border-color: #cfdae5;
}

.not-found-page {
  min-height: calc(100vh - 105px);
  display: grid;
  place-items: center;
  padding: 145px 0 90px;
  color: #fff;
  background: var(--navy);
  overflow: hidden;
}

.not-found-content {
  position: relative;
  max-width: 760px;
}

.not-found-code {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -8vw;
  transform: translateY(-52%);
  color: rgba(34, 211, 238, .07);
  font: 800 clamp(12rem, 30vw, 30rem)/.75 var(--font-head);
  letter-spacing: -.09em;
  pointer-events: none;
}

.not-found-content > :not(.not-found-code) {
  position: relative;
  z-index: 1;
}

.not-found-content h1 {
  max-width: 650px;
  margin: 18px 0 22px;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .96;
}

.not-found-content > p:not(.not-found-code) {
  max-width: 610px;
  color: #b7c5d8;
}

.not-found-content .hero-actions {
  margin-top: 34px;
}

@media (max-width: 640px) {
  .not-found-page {
    min-height: calc(100vh - 90px);
    padding-top: 120px;
  }

  .not-found-code {
    right: -40px;
  }
}

@media (max-width: 880px) {
  .menu-toggle {
    position:relative;
    display:block;
  }

  .menu-toggle span {
    position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:2px;
    margin:0;
    transform-origin:center;
  }

  .menu-toggle span:nth-child(1) {
    transform:translate(-50%,-7px);
  }

  .menu-toggle span:nth-child(2) {
    transform:translate(-50%,-1px);
  }

  .menu-toggle span:nth-child(3) {
    transform:translate(-50%,5px);
  }

  .menu-toggle.active span:nth-child(1) {
    transform:translate(-50%,-1px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity:0;
    transform:translate(-50%,-1px) scaleX(0);
  }

  .menu-toggle.active span:nth-child(3) {
    transform:translate(-50%,-1px) rotate(-45deg);
  }

  .main-nav {
    isolation:isolate;
    top:0;
    left:0;
    right:auto;
    bottom:auto;
    width:100vw;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    gap:10px;
    padding:112px 24px 32px;
    background:
      radial-gradient(circle at 85% 12%,rgba(34,211,238,.14),transparent 28%),
      radial-gradient(circle at 12% 88%,rgba(37,99,235,.2),transparent 32%),
      linear-gradient(155deg,#071426 0%,#091b31 55%,#071426 100%);
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .main-nav::before {
    content:"Navigation";
    position:relative;
    z-index:1;
    display:block;
    margin:0 4px 12px;
    color:#78d9ea;
    font:700 .72rem/1 var(--font-head);
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  .main-nav::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:78px 18px 22px;
    border:1px solid rgba(104,185,211,.14);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 60px rgba(0,0,0,.22);
    pointer-events:none;
  }

  .main-nav > * {
    position:relative;
    z-index:1;
  }

  .main-nav > a:not(.button) {
    display:flex;
    align-items:center;
    min-height:52px;
    padding:13px 16px;
    color:#dbe8f6;
    background:#10243d;
    border:1px solid #263d59;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
    transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
  }

  .main-nav > a:not(.button):hover,
  .main-nav > a:not(.button):focus-visible {
    color:#fff;
    background:#173b68;
    border-color:#4b829f;
    box-shadow:0 0 0 1px rgba(34,211,238,.12),0 8px 24px rgba(20,124,190,.25),inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateX(3px);
  }

  .main-nav > a.active-link:not(.button) {
    color:#fff;
    background:linear-gradient(135deg,#1d4fa1,#164c70);
    border-color:#62b7ce;
    box-shadow:inset 3px 0 0 var(--cyan),0 0 22px rgba(34,211,238,.18),0 10px 25px rgba(10,67,126,.3);
  }

  .main-nav .button-small {
    min-height:52px;
    margin-top:8px;
    border:1px solid rgba(118,211,235,.5);
    box-shadow:0 0 24px rgba(37,99,235,.3),0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);
  }

  .main-nav .theme-toggle {
    background:#10243d;
    border-color:#31506f;
    box-shadow:0 0 18px rgba(34,211,238,.12),inset 0 1px 0 rgba(255,255,255,.06);
  }
}