/* Quartier 49 | 1 — Coming Soon
   Design reference: 1920×1080 desktop / 1320×4547 mobile XD artboards.
   Minion Pro Bold is intentionally referenced by family name. For identical
   rendering on every visitor device, add a licensed webfont file later. */

:root {
  --paper: #F7F7F7;
  --muted: #807E7E;
  --olive: #626451;
  --brown: #A46F51;
  --sky: #78A0D7;
  --ink: #3B3B3B;
  --white: #FFFFFF;
  --font-sans: Verdana, Geneva, Tahoma, sans-serif;
  --font-display: "Minion Pro", "Times New Roman", Georgia, serif;
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
  transition: text-decoration-color .18s ease, opacity .18s ease;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

address { font-style: normal; }

.mobile-head,
.mobile-contacts,
.mobile-break { display: none; }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  width: 100%;
  color: var(--white);
  background: var(--olive);
  white-space: nowrap;
}

.ticker--top { height: 44px; }

.ticker__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  height: 100%;
  will-change: transform;
  animation: ticker 24s linear infinite;
}

.ticker__track span {
  flex: none;
  padding-right: 9rem;
  font-size: 16px;
  line-height: 1;
}

@keyframes ticker {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-25%,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; justify-content: center; }
  .ticker__track span:not(:first-child) { display: none; }
}

/* ---------- desktop header ---------- */
.site-header { background: var(--white); }

.desktop-head {
  height: 125px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px max(7.291666vw, 30px) 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  height: 61px;
}

.brand-lockup__pegasus {
  width: 61px;
  height: 59px;
  object-fit: contain;
}

.brand-lockup__divider {
  width: 1px;
  height: 41px;
  margin: 0 13px 0 13px;
  background: var(--muted);
}

.brand-lockup__logo {
  width: 234px;
  height: 40px;
  object-fit: contain;
}

.desktop-contacts {
  display: flex;
  gap: 50px;
  padding-top: 6px;
  color: var(--olive);
  font-size: 18px;
  line-height: 1.36;
}

.contact-block {
  display: flex;
  flex-direction: column;
  min-width: 317px;
}

/* ---------- desktop hero ---------- */
.hero {
  position: relative;
  min-height: 911px;
  overflow: hidden;
  background: var(--paper);
}

.hero__intro {
  text-align: center;
  padding-top: 63px;
}

.eyebrow {
  margin: 0;
  color: var(--sky);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 400;
}

h1 {
  margin: 22px 0 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 78px;
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.02em;
}

h1 span {
  display: inline-block;
  transform: scaleY(1.2);
  margin-inline: .05em;
  font-weight: 400;
}

.subline {
  margin: 0;
  color: var(--olive);
  font-size: 27px;
  line-height: 1.22;
  font-weight: 400;
}

.qng--desktop {
  position: absolute;
  top: 113px;
  right: 8.2%;
  width: 114px;
  height: 115px;
  object-fit: contain;
}

.renders {
  display: grid;
  grid-template-columns: 788px 731px;
  gap: 64px;
  justify-content: center;
  margin-top: 111px;
}

.render {
  margin: 0;
  text-align: center;
}

.render picture,
.render img {
  width: 100%;
}

.render img {
  object-fit: cover;
  object-position: center;
}

.render--one img {
  height: 381px;
}

.render--two img {
  height: 363px;
}

.render figcaption {
  margin-top: 54px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

/* ---------- large desktop scaling ---------- */
@media (min-width: 1921px) {
  .desktop-head,
  .hero {
    max-width: 1920px;
    margin-inline: auto;
  }
  .desktop-head { padding-inline: 140px; }
}

@media (max-width: 1700px) and (min-width: 768px) {
  .desktop-head {
    padding-inline: 7.3vw;
  }
  .desktop-contacts {
    gap: 3vw;
    font-size: clamp(15px, .94vw, 18px);
  }
  .contact-block { min-width: 16.5vw; }

  .hero { min-height: 47.45vw; }
  .hero__intro { padding-top: 3.28vw; }
  .eyebrow { font-size: 1.302vw; }
  h1 {
    margin-top: 1.15vw;
    margin-bottom: .73vw;
    font-size: 4.06vw;
  }
  .subline { font-size: 1.406vw; }
  .qng--desktop {
    top: 5.89vw;
    width: 5.94vw;
    height: 5.99vw;
  }

  .renders {
    grid-template-columns: 41.04vw 38.07vw;
    gap: 3.33vw;
    margin-top: 5.78vw;
  }
  .render--one img { height: 19.84vw; }
  .render--two img { height: 18.91vw; }
  .render figcaption {
    margin-top: 2.81vw;
    font-size: max(12px, .833vw);
  }
}



/* ---------- tablet / narrow desktop refinement ---------- */
@media (min-width: 768px) and (max-width: 1180px) {
  .desktop-head {
    height: auto;
    min-height: 125px;
    gap: 28px;
    padding: 18px 4.5vw 22px;
    align-items: flex-start;
  }

  .brand-lockup {
    flex: 0 1 auto;
    min-width: 0;
  }

  .desktop-contacts {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 24px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 1.45;
  }

  .contact-block {
    min-width: 0;
    width: auto;
    max-width: 250px;
  }

  .contact-block a {
    overflow-wrap: anywhere;
  }

  .brand-lockup__pegasus {
    width: 52px;
    height: 50px;
  }

  .brand-lockup__divider {
    height: 36px;
    margin-inline: 10px;
  }

  .brand-lockup__logo {
    width: 195px;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 920px) {
  .desktop-head {
    padding-inline: 3.5vw;
    gap: 20px;
  }

  .desktop-contacts {
    gap: 18px;
    font-size: 13px;
  }

  .contact-block {
    max-width: 210px;
  }

  .brand-lockup__pegasus {
    width: 46px;
    height: 45px;
  }

  .brand-lockup__logo {
    width: 168px;
  }
}

/* ---------- mobile = XD 1320-wide artboard, proportionally fluid ---------- */
@media (max-width: 767px) {
  .desktop-head,
  .qng--desktop,
  .desktop-only { display: none; }

  .mobile-head,
  .mobile-contacts,
  .mobile-break { display: block; }

  .ticker--top,
  .ticker--bottom {
    height: 12.9545vw; /* 171/1320 */
    min-height: 62px;
  }

  .ticker__track {
    animation-duration: 19s;
  }

  .ticker__track span {
    padding-right: 22vw;
    font-size: 2.6515vw; /* 35/1320 */
  }

  .mobile-head {
    height: 35.6061vw; /* 470/1320 */
    min-height: 171px;
    background: var(--white);
  }

  .mobile-brand-lockup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 4.5455vw;
  }

  .brand-lockup--mobile {
    width: 59.0152vw;
    height: 11.2121vw;
  }

  .brand-lockup--mobile .brand-lockup__pegasus {
    width: 11.2121vw;
    height: 10.9091vw;
  }

  .brand-lockup--mobile .brand-lockup__divider {
    width: max(1px, .2273vw);
    height: 7.5vw;
    margin-left: 2.3485vw;
    margin-right: 2.3485vw;
  }

  .brand-lockup--mobile .brand-lockup__logo {
    width: 42.8788vw;
    height: 7.2727vw;
  }

  .qng--mobile {
    width: 11.8939vw;
    height: 11.9697vw;
  }

  .hero {
    min-height: 282.5758vw; /* content section excluding banners/header */
    overflow: hidden;
  }

  .hero__intro {
    padding-top: 14.5455vw; /* 192px from main start to eyebrow top-ish */
  }

  .eyebrow {
    font-size: 3.7121vw; /* 49 */
    line-height: 1.2;
  }

  h1 {
    margin-top: 6.9697vw;
    margin-bottom: 6.2121vw;
    font-size: 10.5303vw; /* 139 */
    line-height: .94;
    letter-spacing: -.018em;
    white-space: nowrap;
  }

  .subline {
    width: 91.1364vw;
    margin-inline: auto;
    color: var(--muted);
    font-size: 3.6364vw; /* 48 */
    line-height: 1.3542;
  }

  .renders {
    display: block;
    margin-top: 11.3636vw;
  }

  .render {
    width: 90.9091vw;
    margin-inline: auto;
  }

  .render--one img,
  .render--two img {
    width: 100%;
    height: 43.9394vw; /* ~580 */
    object-fit: cover;
  }

  .render--one img { object-position: center; }
  .render--two img { object-position: center; }

  .render figcaption {
    margin-top: 7.5758vw;
    font-size: 2.6515vw;
    line-height: 1.25;
  }

  .render--two {
    margin-top: 9.7727vw;
  }

  .render--two figcaption {
    margin-top: 7.5758vw;
  }

  .mobile-contacts {
    margin-top: 24.4697vw;
  }

  .mobile-contact-card {
    text-align: center;
  }

  .sp-logo {
    width: 52.7273vw;
    margin-inline: auto;
  }

  .mobile-contact-card address {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4.3939vw;
    color: var(--olive);
    font-size: 3.6364vw;
    line-height: 1.3542;
  }

  .mobile-contact-card--hinterberger {
    margin-top: 10.6818vw;
  }

  .hh-big-logo {
    width: 40.8333vw;
    margin-inline: auto;
  }

  .mobile-contact-card--hinterberger address {
    margin-top: 3.4848vw;
  }
}


  /* More breathing room below the final Hinterberger phone number on mobile */
  .mobile-contact-card--hinterberger {
    padding-bottom: 15vw;
  }

@media (max-width: 420px) {
  .ticker__track span { font-size: 12px; }
  .eyebrow { font-size: 15px; }
  .subline,
  .mobile-contact-card address { font-size: 15px; }
  .render figcaption { font-size: 12px; }
}

/* Print stays readable and static */
@media print {
  .ticker__track { animation: none !important; transform: none !important; }
  a { text-decoration: none !important; }
}