:root {
  --navy-950: #0b1120;
  --navy-900: #111a2e;
  --navy-800: #19243d;
  --ivory: #f6f4ef;
  --ivory-2: #ece9e1;
  --ink: #18202f;
  --ink-soft: #4a5263;
  --silver-100: #f0f2f6;
  --silver-300: #c9cdd8;
  --silver-500: #8f96a8;
  --line-dark: rgba(201, 205, 216, 0.16);
  --line-light: rgba(24, 32, 47, 0.12);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --color-18forge: #f37021;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--navy-950);
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--silver-300);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.wrap.narrow {
  max-width: 900px;
}

/* Type */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--silver-100);
}

h1 {
  font-size: clamp(36px, 4.4vw, 62px);
  letter-spacing: -0.005em;
}

h1 em,
h2 em {
  font-style: italic;
  color: var(--silver-300);
}

h2 {
  font-size: clamp(34px, 3.8vw, 52px);
}

h3 {
  font-size: 25px;
  font-weight: 500;
}

.eyebrow,
.nav a,
.header-phone,
.btn,
.details dt,
.footer-links a {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--silver-500);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* Buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid rgba(240, 242, 246, 0.55);
  color: var(--silver-100);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s;
}

.btn:hover {
  background: var(--silver-100);
  border-color: var(--silver-100);
  color: var(--navy-950);
}

.btn-solid {
  background: var(--silver-100);
  border-color: var(--silver-100);
  color: var(--navy-950);
}

.btn-solid:hover {
  background: transparent;
  color: var(--silver-100);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  transition: background 0.3s var(--ease), box-shadow 0.3s;
}

.site-header.scrolled,
.site-header.solid {
  background: rgba(11, 17, 32, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-dark);
}

.site-header.solid {
  position: sticky;
  top: 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 76px;
}

.brand {
  margin-right: auto;
}

.brand img {
  width: 369px;
  height: auto;
}

.nav {
  display: flex;
  gap: 34px;
}

.nav a,
.header-phone {
  white-space: nowrap;
  color: var(--silver-300);
  transition: color 0.2s;
}

.nav a:hover,
.header-phone:hover {
  color: #fff;
}

.header-phone {
  padding-left: 34px;
  border-left: 1px solid var(--line-dark);
  letter-spacing: 0.16em;
}

/* Hero: the wall sign sits centered at the top of the photo, copy is centered below it */
.hero {
  --hero-top: 36px;
  --hero-size: cover;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(600px, 52vw, 860px);
  background: var(--navy-900) url("hero.webp") 50% var(--hero-top) / var(--hero-size) no-repeat;
  overflow: hidden;
  text-align: center;
}

/* The photo starts --hero-top down to leave room for the header; that strip shows a mirrored
   copy of the top of the wall, so there is no band above the photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hero-top);
  background: url("hero.webp") 50% 0 / var(--hero-size) no-repeat;
  transform: scaleY(-1);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 17, 32, 0.25) 0%, rgba(11, 17, 32, 0) 12%),
    linear-gradient(0deg, rgba(11, 17, 32, 0.9) 0%, rgba(11, 17, 32, 0.3) 30%, rgba(11, 17, 32, 0) 45%);
}

.hero .wrap {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(32px, 4.5vw, 64px);
}

.hero .eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

.hero .actions {
  justify-content: center;
}

.hero .lede {
  max-width: 900px;
  margin: 16px auto 28px;
  font-size: 17px;
  color: var(--silver-300);
}

/* Light sections */
.light {
  background: var(--ivory);
  color: var(--ink-soft);
}

.light h2,
.light h3 {
  color: var(--ink);
}

.light h2 em {
  color: var(--ink-soft);
}

.light .eyebrow {
  color: #8a8579;
}

.section {
  padding: 120px 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}

/* Intro statement */
.intro {
  padding: 110px 0 40px;
  text-align: center;
}

.intro-mark {
  width: 64px;
  height: auto;
  margin: 0 auto 32px;
}

.statement {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.35;
  color: var(--ink);
}

/* Services */
.services {
  padding-top: 80px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
}

.card {
  position: relative;
  padding: 44px 40px 48px;
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  background: var(--ivory);
  transition: background 0.35s var(--ease);
}

.card:hover {
  background: #fff;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--ink);
  transition: width 0.45s var(--ease);
}

.card:hover::before {
  width: 100%;
}

.icon {
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.card p {
  margin: 12px 0 0;
  font-size: 15.5px;
}

/* We buy band */
.buy {
  position: relative;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(201, 205, 216, 0.1), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  overflow: hidden;
}

.buy::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 620px;
  height: 620px;
  background: url("mark.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.buy-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}

.buy p {
  max-width: 50ch;
  margin: 20px 0 34px;
}

.buy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}

.buy-list li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--silver-100);
}

.buy-list span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--silver-500);
}

/* Visit */
.visit-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 72px;
  align-items: stretch;
}

.details {
  margin: 40px 0 0;
}

.details div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line-light);
}

.details div:last-child {
  border-bottom: 1px solid var(--line-light);
}

.details dt {
  padding-top: 5px;
  color: #8a8579;
}

.details dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.35;
  color: var(--ink);
}

.details a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease);
}

.details a:hover {
  background-size: 100% 1px;
}

.map {
  min-height: 420px;
  background: var(--ivory-2);
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* Footer */
.site-footer {
  background: var(--navy-950);
  padding: 64px 0 40px;
  font-size: 14px;
  color: var(--silver-500);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

.footer-inner img {
  width: 351px;
  max-width: 100%;
  height: auto;
}

.footer-address {
  margin: 20px 0 0;
  line-height: 1.8;
}

.footer-address a {
  text-decoration: none;
}

.footer-address a:hover {
  color: var(--silver-100);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.footer-links a {
  color: var(--silver-500);
  font-size: 11px;
}

.footer-links a:hover {
  color: var(--silver-100);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
}

.forged {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
}

.forged svg {
  height: 1em;
  width: auto;
}

.forged:hover,
.forged:focus-visible {
  color: var(--color-18forge);
}

/* Legal page */
.legal {
  padding: 96px 0 120px;
}

.legal .wrap {
  max-width: 780px;
}

.legal h1 {
  color: var(--ink);
  margin-bottom: 40px;
}

.legal p {
  margin: 0 0 20px;
}

.legal a {
  color: var(--ink);
}

/* Reveal on scroll (only when JS is running) */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

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

.js .grid .card.reveal:nth-child(3n + 2) {
  transition-delay: 0.08s;
}

.js .grid .card.reveal:nth-child(3n) {
  transition-delay: 0.16s;
}

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

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

/* Responsive */
@media (max-aspect-ratio: 5/4) {
  /* Portrait screens: whole wall sign at the top, copy below it */
  /* At least one full screen, so the next (ivory) section never shows on first load, not even
     under iPhone Safari's floating toolbar (hence lvh). The bottom padding keeps the copy and the
     scroll hint in the part of the screen the toolbar does not cover (svh); the copy is centered
     in the space between the sign and that edge */
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100lvh;
    padding-top: calc(72px + 36vw);
    padding-bottom: 0;
    padding-bottom: calc(100lvh - 100svh);
    --hero-top: 56px;
    --hero-size: 140% auto;
  }

  /* No mirrored strip here: at this scale it shows a flipped copy of the sign. The strip is plain
     navy and the top of the photo fades into it */
  .hero::before {
    display: none;
  }

  .hero::after {
    background: linear-gradient(
      180deg,
      var(--navy-900) 0,
      var(--navy-900) var(--hero-top),
      rgba(17, 26, 46, 0) calc(var(--hero-top) + 28px),
      rgba(11, 17, 32, 0) calc(56px + 50vw),
      var(--navy-950) calc(56px + 105vw)
    );
  }

  .hero .wrap {
    width: 100%;
    margin-block: auto;
    padding-top: 24px;
    padding-bottom: 88px;
  }

  .hero .eyebrow {
    margin-bottom: 26px;
  }

  .hero .lede {
    margin: 22px auto 40px;
  }

  /* Discreet scroll-down chevron at the bottom of the visible screen */
  .hero .scroll-hint {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 28px;
    bottom: calc(100lvh - 100svh + 28px);
    width: 44px;
    height: 44px;
    margin-left: -22px;
    opacity: 0.55;
    transition: opacity 0.2s;
  }

  .scroll-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 10px;
    height: 10px;
    margin-left: -6px;
    border-right: 1px solid var(--silver-300);
    border-bottom: 1px solid var(--silver-300);
    transform: rotate(45deg);
    animation: scroll-hint 2.4s var(--ease) infinite;
  }

  .scroll-hint:hover,
  .scroll-hint:focus-visible {
    opacity: 1;
  }
}

.scroll-hint {
  display: none;
}

@keyframes scroll-hint {
  0%,
  100% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(6px) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint::before {
    animation: none;
  }
}

@media (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .buy-inner,
  .visit-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .nav {
    display: none;
  }

  .header-phone {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 20px;
  }

  .site-header .wrap {
    height: 64px;
    gap: 16px;
  }

  .brand img {
    width: 214px;
  }

  .header-phone {
    white-space: nowrap;
    letter-spacing: 0.06em;
  }

  .header-phone {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .section {
    padding: 84px 0;
  }

  .intro {
    padding: 80px 0 24px;
  }

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

  .card {
    padding: 36px 28px 40px;
  }

  .details div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .details dd {
    font-size: 21px;
  }

  .map,
  .map iframe {
    min-height: 320px;
  }

  .footer-meta {
    align-items: flex-start;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-bottom > span[aria-hidden] {
    display: none;
  }

  .actions .btn {
    flex: 1 1 100%;
  }

  .hero .eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }

  .hero .eyebrow::before,
  .hero .eyebrow::after {
    display: none;
  }
}