:root {
  --ref-navy: #002f50;
  --ref-navy-deep: #002844;
  --ref-cream: #f5f0e8;
  --ref-cream-light: #faf7f1;
  --ref-blue: #052f51;
  --ref-gold: #d79b28;
  --ref-gold-light: #d79b28;
  --ref-border: rgba(5, 47, 81, .16);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.home-reference {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--ref-cream);
  color: var(--ref-blue);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

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

.home-reference img { display: block; max-width: 100%; }
.home-reference a { color: inherit; text-decoration: none; }
.home-reference h1,
.home-reference h2,
.home-reference p,
.home-reference address {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
.home-reference main,
.ref-intro,
.ref-intro__inner,
.ref-services,
.ref-tradition,
.ref-footer { max-width: 100%; }

.ref-hero {
  position: relative;
  min-height: clamp(500px, 48vw, 740px);
  overflow: hidden;
  background-image: url("assets/hamburg-hero.webp");
  background-position: center 44%;
  background-repeat: no-repeat;
  background-size: cover;
}

.ref-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 36, 63, .22) 0%, rgba(0, 40, 68, .04) 48%, rgba(0, 26, 45, .08) 100%),
    linear-gradient(180deg, rgba(0, 30, 52, .08), rgba(0, 27, 47, .04) 62%, rgba(0, 20, 35, .14));
}

.ref-hero__brand {
  --ref-hero-brand-width: clamp(190px, 18vw, 286px);
  position: absolute;
  top: clamp(38px, 4.4vw, 76px);
  left: max(24px, calc(50vw - 750px));
  display: grid;
  justify-items: center;
  width: var(--ref-hero-brand-width);
  color: var(--ref-gold-light);
  filter: drop-shadow(0 3px 8px rgba(0, 25, 45, .22));
}

.ref-hero__brand img {
  width: clamp(126px, 12vw, 194px);
  height: auto;
}

.ref-hero__brand img,
.ref-footer__brand img {
  filter: brightness(1.07) saturate(1.08) contrast(1.02);
}

.ref-since {
  display: grid;
  grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-top: -1px;
  font-size: clamp(.84rem, 1.2vw, 1.15rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ref-since strong { font-weight: 400; }
.ref-since i { height: 1px; background: currentColor; opacity: .9; }

.home-reference .ref-hero__brand,
.home-reference .ref-footer__brand { color: var(--ref-gold); }

.home-reference .ref-hero__brand .ref-since {
  color: var(--ref-gold);
  text-shadow: 0 1px 3px rgba(0, 37, 63, .58);
}

.ref-intro {
  position: relative;
  background: var(--ref-cream-light);
  padding: 0 24px 10px;
}

.ref-intro__inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  padding: 72px 0 8px;
}

.ref-intro__seal {
  position: absolute;
  top: -44px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 90px;
  transform: translateX(-50%);
  background: var(--ref-cream-light);
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.ref-intro__seal svg,
.ref-service-card__icon,
.ref-footer__location svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: var(--ref-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ref-intro__copy {
  max-width: 1200px;
  margin: 0 auto 38px;
  text-align: center;
}

.ref-intro__copy h1 {
  margin: 0 0 8px;
  font-size: clamp(1.24rem, 1.85vw, 1.75rem);
  line-height: 1.32;
  font-weight: 400;
}

.ref-intro__copy p {
  margin: 0;
  font-size: clamp(1.04rem, 1.53vw, 1.42rem);
  line-height: 1.4;
}

.ref-rule {
  display: block;
  width: 36px;
  height: 2px;
  margin: 13px auto 0;
  background: var(--ref-gold);
}

.ref-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 0;
}

.ref-service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ref-border);
  background: rgba(255,255,255,.18);
}

.ref-service-card__image {
  width: 100%;
  height: clamp(170px, 17vw, 250px);
  object-fit: cover;
}

.ref-service-card:first-child .ref-service-card__image { object-position: center 51%; }
.ref-service-card:last-child .ref-service-card__image { object-position: center 50%; }

.ref-service-card__body {
  min-height: 258px;
  padding: 15px 38px 26px;
  text-align: center;
}

.ref-service-card__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 0;
  stroke-width: 2.15;
}

.ref-service-card__icon--bars { width: 43px; }

.ref-service-card h2 {
  margin: 0;
  font-size: clamp(1.28rem, 1.7vw, 1.67rem);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.ref-service-card p {
  max-width: 610px;
  margin: 12px auto 0;
  font-size: clamp(.96rem, 1.16vw, 1.14rem);
  line-height: 1.43;
}

.ref-tradition {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 385px;
  margin-top: 0;
  background: var(--ref-navy);
  color: white;
}

.ref-tradition__copy {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 48px clamp(36px, 6vw, 108px);
  background:
    radial-gradient(circle at 58% 46%, rgba(36, 103, 145, .34), transparent 56%),
    var(--ref-navy);
}

.ref-tradition__content { position: relative; z-index: 1; max-width: 520px; margin-left: auto; }

.ref-tradition__watermark {
  position: absolute;
  left: clamp(-38px, 2vw, 34px);
  bottom: -80px;
  width: clamp(250px, 25vw, 420px);
  height: auto;
  opacity: .055;
  filter: grayscale(1) brightness(2.5);
}

.ref-eyebrow {
  margin: 0 0 12px;
  color: var(--ref-gold-light);
  font-size: clamp(.78rem, 1vw, .96rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ref-tradition h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.05;
  font-weight: 400;
}

.ref-tradition .ref-rule { margin: 16px 0 14px; }

.ref-tradition__content > p:last-child {
  max-width: 430px;
  margin: 0;
  font-size: clamp(.94rem, 1.1vw, 1.12rem);
  line-height: 1.48;
}

.ref-tradition__visual { min-width: 0; overflow: hidden; }
.ref-tradition__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }

.ref-footer {
  padding: 34px clamp(28px, 5vw, 84px) 18px;
  background:
    radial-gradient(ellipse 38% 95% at 50% 32%, rgba(35, 105, 150, .27), transparent 72%),
    var(--ref-navy-deep);
  color: white;
}

.ref-footer__main {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1500px;
  min-height: 194px;
  margin: 0 auto;
}

.ref-footer__location { text-align: center; }
.ref-footer__location svg { width: 42px; height: 42px; margin: 0 auto 4px; }
.ref-footer__location h2 {
  margin: 0 0 4px;
  color: var(--ref-gold);
  font-size: .94rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.ref-footer__location address {
  font-size: .94rem;
  line-height: 1.35;
  font-style: normal;
}

.ref-footer__brand {
  display: grid;
  justify-items: center;
  align-self: center;
  width: min(100%, 280px);
  margin: 0 auto;
  color: var(--ref-gold-light);
}

.ref-footer__brand img { width: 88px; height: auto; }
.ref-footer__brand .ref-since { margin-top: 3px; font-size: 1rem; }

.ref-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: .82rem;
  text-transform: uppercase;
}

.ref-footer__bottom p { margin: 0; text-transform: none; }
.ref-footer__bottom nav { display: flex; align-items: center; gap: 15px; }
.ref-footer__bottom nav span { width: 1px; height: 20px; background: var(--ref-gold); }
.ref-footer__bottom a { transition: color .2s ease; }
.ref-footer__bottom a:hover,
.ref-footer__bottom a:focus-visible { color: var(--ref-gold-light); }

@media (max-width: 980px) {
  .ref-hero { min-height: 520px; background-position: 59% center; }
  .ref-hero__brand { left: 18px; width: 230px; }
  .ref-intro { padding-inline: 18px; }
  .ref-intro__inner { padding-top: 68px; }
  .ref-service-card__body { min-height: 282px; padding-inline: 25px; }
  .ref-tradition { grid-template-columns: 43% 57%; }
  .ref-tradition__copy { padding-inline: 36px; }
  .ref-footer__main { gap: 20px; }
}

.home-reference a:focus-visible {
  outline: 2px solid var(--ref-gold-light);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .ref-hero {
    min-height: 500px;
    background-position: 64% center;
  }

  .ref-hero__shade {
    background: linear-gradient(180deg, rgba(0,35,60,.14), rgba(0,25,44,.03) 58%, rgba(0,25,44,.12));
  }

  .ref-hero__brand {
    top: 42px;
    left: 50%;
    width: min(68vw, 246px);
    transform: translateX(-50%);
  }

  .ref-hero__brand img { width: 150px; }
  .ref-intro { padding-inline: 14px; }
  .ref-intro__seal { width: 82px; height: 82px; top: -39px; }
  .ref-intro__seal svg { width: 52px; height: 52px; }
  .ref-intro__inner { padding-top: 62px; }
  .ref-intro__copy { margin-bottom: 30px; }
  .ref-intro__copy,
  .ref-services { width: 100%; }
  .ref-intro__copy h1 { font-size: 1.28rem; overflow-wrap: anywhere; }
  .ref-intro__copy p { font-size: 1.03rem; line-height: 1.5; }
  .ref-desktop-break { display: none; }
  .ref-services { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ref-service-card__image { height: 190px; }
  .ref-service-card__body { min-height: 0; padding: 15px 20px 28px; }
  .ref-service-card h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
  .ref-service-card p { font-size: 1rem; overflow-wrap: anywhere; }

  .ref-tradition { grid-template-columns: 1fr; }
  .ref-tradition__copy { min-height: 360px; padding: 52px 28px; text-align: center; }
  .ref-tradition__content { margin: 0 auto; }
  .ref-tradition .ref-rule { margin-inline: auto; }
  .ref-tradition__content > p:last-child { margin-inline: auto; }
  .ref-tradition__watermark { left: 50%; bottom: 16px; transform: translateX(-50%); }
  .ref-tradition__visual { min-height: 285px; }

  .ref-footer {
    padding: 42px 22px 22px;
    background: var(--ref-navy-deep);
  }
  .ref-footer__main { grid-template-columns: 1fr; gap: 42px; min-height: 0; }
  .ref-footer__brand {
    position: relative;
    isolation: isolate;
    grid-row: 1;
  }
  .ref-footer__brand::before {
    position: absolute;
    z-index: -1;
    top: -34px;
    left: 50%;
    width: 210px;
    height: 180px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(48, 126, 176, .43) 0%, rgba(31, 91, 132, .2) 45%, transparent 73%);
    content: '';
    pointer-events: none;
  }
  .ref-footer__location:first-child { grid-row: 2; }
  .ref-footer__location:last-child { grid-row: 3; }
  .ref-footer__brand img {
    width: 100px;
    filter: brightness(1.07) saturate(1.08) contrast(1.02) drop-shadow(0 0 18px rgba(53, 132, 181, .58)) drop-shadow(0 0 34px rgba(38, 105, 148, .28));
  }
  .ref-footer__bottom { flex-direction: column; gap: 13px; margin-top: 38px; text-align: center; }
}

@media (max-width: 430px) {
  .ref-hero { min-height: 485px; }
  .ref-hero__brand { top: 34px; }
  .ref-hero__brand img { width: 130px; }
  .ref-since { gap: 10px; font-size: .82rem; }
  .ref-intro__copy h1 { font-size: 1.16rem; }
  .ref-intro__copy p { font-size: .96rem; }
  .ref-service-card__image { height: 176px; }
  .ref-service-card__body { padding-inline: 16px; }
  .ref-tradition h2 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ref-footer__bottom a { transition: none; }
}