/* Sharp visual system: square edges, flat brand colors, solid ink shadows. */
:root {
  --sharp-ink: #0b1933;
  --outline: var(--sharp-ink);
  --sharp-shadow: 8px 8px 0 var(--sharp-ink);
}

header {
  border-bottom-width: 3px !important;
}

#top, #guide, #services {
  border-bottom: 3px solid var(--sharp-ink);
}

.card,
#contact aside > div,
.btn,
.field,
.icon-bubble,
.logo-chip,
.book,
.book::before,
.nav-link::after {
  border-radius: 0;
}

.card,
#contact aside > div {
  border: 3px solid var(--sharp-ink);
  box-shadow: var(--sharp-shadow);
}

.card:hover {
  transform: none;
  box-shadow: var(--sharp-shadow);
}

.btn {
  border: 3px solid var(--sharp-ink);
  box-shadow: 5px 5px 0 var(--sharp-ink);
  letter-spacing: -.015em;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--sharp-ink);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--sharp-ink);
}

.btn-secondary {
  background: #fffdf9;
}

.btn-gold {
  background: #f5c842;
  color: var(--sharp-ink);
}

.btn-gold:hover {
  background: #ffda67;
}

.btn:disabled,
.btn:disabled:hover {
  transform: none;
  box-shadow: 5px 5px 0 var(--sharp-ink);
}

.btn:focus-visible,
.nav-link:focus-visible,
#menu-btn:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 6px;
}

.field {
  border: 2px solid var(--sharp-ink);
  background: #fffdf9;
}

.field:focus {
  border-color: var(--sharp-ink);
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 4px 4px 0 var(--sharp-ink);
}

.icon-bubble {
  border: 2px solid var(--sharp-ink);
  box-shadow: 3px 3px 0 var(--sharp-ink);
  color: var(--sharp-ink);
}

.eyebrow {
  padding: .35rem .7rem;
  border: 2px solid var(--sharp-ink);
  background: #f5c842;
  color: var(--sharp-ink);
  box-shadow: 3px 3px 0 var(--sharp-ink);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1, h2, h3 {
  letter-spacing: -.045em;
}

#top h1 {
  line-height: 1;
}

/* Keep the original left column while the lava flows across the whole canvas. */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
}

#top .hero-layout h1 { font-size: clamp(2.75rem, 5.3vw, 4.75rem); }
#top .hero-layout .accent-serif { max-width: 32rem; }
#top .hero-layout > div > p:not(.accent-serif) { max-width: 36rem; }
#top .hero-layout > div > .flex { justify-content: flex-start; }

/* Dark ink holds its contrast as blue and gold move behind the page copy. */
body > section [class*="text-ink-soft"] { color: var(--sharp-ink); }

@media (min-width: 1024px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .hero-layout > div { max-width: min(36rem, 64%); }
}

#top .accent-serif {
  width: fit-content;
  max-width: 32rem;
  padding: .55rem .75rem;
  border: 2px solid var(--sharp-ink);
  background: #f5c842;
  color: var(--sharp-ink);
  box-shadow: 5px 5px 0 var(--sharp-ink);
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1.3;
}

/* Original section glows are superseded by the global lava background. */
.blob {
  display: none;
}

#top > svg {
  display: none;
}

#top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(6, 45, 102, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 45, 102, .07) 1px, transparent 1px);
  background-size: 40px 40px;
}

#guide, #contact {
  background-color: #f4e7d5;
}

.book {
  border: 3px solid var(--sharp-ink);
  background: var(--navy);
  box-shadow: 10px 10px 0 var(--sharp-ink);
}

.book::before {
  width: .8rem;
  background: var(--navy-deep);
  border-right: 2px solid var(--sharp-ink);
}

.logo-chip {
  box-shadow: none;
}

#services .card:nth-child(1) { background: #fffdf9; }
#services .card:nth-child(2) { background: #c7e5dc; }
#services .card:nth-child(3) { background: #f5c2ad; }
#services .card:nth-child(4) { background: #f9dd7e; }

#services .card:nth-child(1) .icon-bubble { background: #cbd8ed; }
#services .card:nth-child(2) .icon-bubble { background: #5bb8a8; }
#services .card:nth-child(3) .icon-bubble { background: #e8896f; }
#services .card:nth-child(4) .icon-bubble { background: #f5c842; }

#services .card h3 {
  color: var(--sharp-ink);
}

#contact aside > div {
  background: var(--navy-deep);
}

footer {
  border-top: 3px solid var(--sharp-ink);
}

@media (min-width: 1024px) {
  #top h1 { font-size: 4.75rem; }
  section h2 { font-size: 3.35rem; }
}

/* Keep the guide's input and CTA comfortable through the tablet breakpoint. */
@media (min-width: 640px) and (max-width: 1023px) {
  #guide-form > .flex { flex-direction: column; }
}

@media (max-width: 639px) {
  :root { --sharp-shadow: 5px 5px 0 var(--sharp-ink); }
  .card, #contact aside > div { padding: 1.5rem; }
  #top .accent-serif { box-shadow: 3px 3px 0 var(--sharp-ink); }
  .book { box-shadow: 7px 7px 0 var(--sharp-ink); }
}

@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth { scroll-behavior: auto; }
  .btn:hover, .btn:active { transform: none; }
}