/* CityBest Construction
   Concept: the page reads as a set of construction drawings. The logo's
   azure blue carries structure, its yellow marks the things a visitor can
   act on, and the one bold moment is the hero elevation drawing. */

:root {
  --blueprint: #0057B7;
  --blueprint-deep: #003F86;
  --drafting-line: #C6DCF5;
  --hardhat: #FFD700;
  --hardhat-dark: #EBC400;
  --paper: #FFFFFF;
  --paper-tint: #EDF2F8;
  --ink: #12233A;
  --ink-muted: #4B5E77;
  --rule: #D5DFEB;
  --rule-strong: #9FB2C8;
  --danger: #A12A1F;
  --success: #1E6B3A;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --header-h: 72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-stretch: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font);
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--blueprint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--blueprint);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--hardhat);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-large {
  min-height: 52px;
  padding: 14px 24px;
  font-size: 1.0625rem;
}

.btn-primary {
  background: var(--hardhat);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--hardhat-dark);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
}

/* Brand: the logo's house mark with its wordmark set in live text,
   CITYBEST over a small CONSTRUCTION plaque, as in the full logo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blueprint);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 56px;
  height: auto;
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-family: "Montserrat", var(--font);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}

.brand-name {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.brand-trade {
  margin-top: 4px;
  padding: 3px 6px 2px;
  border: 1.5px solid var(--hardhat);
  border-radius: 4px;
  background: var(--blueprint);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-align: center;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--blueprint);
  text-decoration: underline;
}

.header-phone {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 112%;
  text-decoration: none;
  white-space: nowrap;
}

.header-call {
  display: none;
}

/* Hero */

.hero {
  position: relative;
  color: #fff;
  background-color: var(--blueprint);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 8vw, 104px);
}

.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.hero-lede {
  max-width: 34em;
  margin-top: 24px;
  color: #E3EDF8;
  font-size: 1.1875rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-hours {
  margin-top: 20px;
  color: var(--drafting-line);
  font-size: 0.9375rem;
}

.hero :focus-visible {
  outline-color: var(--hardhat);
}

.hero-drawing {
  margin: 0;
}

.elevation {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.elevation .d {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s cubic-bezier(0.55, 0.1, 0.3, 1) var(--delay, 0s) forwards;
}

.elevation .fine {
  stroke-width: 1;
  stroke-opacity: 0.8;
}

.elevation .ground .d {
  stroke: var(--drafting-line);
}

.elevation .ground .dashed {
  stroke-width: 1;
  stroke-opacity: 0.6;
}

.elevation .dims .d,
.elevation .title-block .d {
  stroke: var(--drafting-line);
  stroke-width: 1;
}

.elevation .notes .d {
  stroke: var(--hardhat);
  stroke-width: 1.4;
}

.elevation text {
  fill: var(--drafting-line);
  font-family: var(--font);
  font-size: 18px;
  font-stretch: 87.5%;
  opacity: 0;
  animation: appear 0.5s ease var(--delay, 0s) forwards;
}

.elevation .notes text {
  fill: var(--hardhat);
  font-size: 22px;
  font-weight: 600;
}

.elevation .title-block text {
  font-size: 14px;
}

.elevation .title-block .title-strong {
  fill: #fff;
  font-weight: 700;
  font-size: 16px;
}

.elevation .dot {
  fill: var(--hardhat);
  opacity: 0;
  animation: appear 0.3s ease var(--delay, 0s) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

/* Sections */

.section {
  padding-block: clamp(64px, 9vw, 112px);
}

.section-intro h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  color: var(--blueprint);
}

.section-intro p {
  max-width: 32em;
  margin-top: 16px;
  color: var(--ink-muted);
}

.section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--ink);
}

/* Services: a drawing schedule, one row per service */

.services-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.services .section-intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--blueprint);
}

.service {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid var(--rule);
}

.service-drawing {
  width: 136px;
  height: auto;
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-text p {
  margin-top: 6px;
  color: var(--ink-muted);
  max-width: 34em;
}

/* Process */

.process {
  background: var(--paper-tint);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  counter-increment: step;
  padding-top: 20px;
  border-top: 2px solid var(--blueprint);
}

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 12px;
  color: var(--blueprint);
  font-size: 2.25rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}

.step p {
  margin-top: 8px;
  color: var(--ink-muted);
}

.reviews-note {
  margin-top: 48px;
  color: var(--ink-muted);
}

/* Contact */

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-form h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  color: var(--blueprint);
}

.contact-form > p {
  margin-top: 16px;
  color: var(--ink-muted);
}

.form {
  display: grid;
  gap: 22px;
  margin-top: 32px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 600;
}

.optional {
  color: var(--ink-muted);
  font-weight: 400;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--blueprint);
  outline: 3px solid rgba(0, 87, 183, 0.25);
  outline-offset: 0;
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--danger);
}

.hint {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile {
  min-height: 65px;
}

.form .btn {
  justify-self: start;
}

.form-status {
  min-height: 1.6em;
  font-weight: 600;
}

.form-status[data-state="success"] {
  color: var(--success);
}

.form-status[data-state="error"] {
  color: var(--danger);
}

.contact-details {
  padding: 28px;
  border: 2px solid var(--blueprint);
  border-radius: var(--radius);
}

.contact-details h3 {
  font-size: 1.0625rem;
}

.contact-details h3:not(:first-child) {
  margin-top: 28px;
}

.contact-details p {
  margin-top: 8px;
}

.big-phone {
  color: var(--blueprint);
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 112%;
  text-decoration: none;
}

.big-phone:hover {
  text-decoration: underline;
}

.hours {
  margin: 8px 0 0;
}

.hours div {
  padding-block: 8px;
  border-bottom: 1px solid var(--rule);
}

.hours dt {
  font-weight: 500;
}

.hours dd {
  margin: 0;
  color: var(--ink-muted);
}

/* Footer */

.site-footer {
  background: var(--blueprint-deep);
  color: #D5E2F1;
  padding-block: 56px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
}

.brand-light {
  color: #fff;
}

.brand-light .brand-trade {
  background: transparent;
}

.footer-brand p {
  margin-top: 12px;
  font-size: 1rem;
}

.footer-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

.site-footer a {
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: var(--hardhat);
}

.legal {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid rgba(169, 200, 234, 0.3);
  color: var(--drafting-line);
  font-size: 0.9375rem;
}

/* Responsive */

@media (max-width: 1020px) {
  .site-nav {
    display: none;
  }

  .header-phone {
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .hero-inner,
  .services-inner,
  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-drawing {
    max-width: 560px;
  }

  .services .section-intro {
    position: static;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 60px;
  }

  .header-inner {
    gap: 12px;
  }

  .header-phone,
  .header-cta {
    display: none;
  }

  .header-call {
    display: inline-flex;
    margin-left: auto;
  }

  .brand-mark {
    width: 44px;
  }

  .brand-name {
    font-size: 1.25rem;
  }

  .brand-trade {
    font-size: 0.5rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .service {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
  }

  .service-drawing {
    width: 88px;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .form .btn {
    justify-self: stretch;
  }

  .contact-details {
    padding: 22px;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 359px) {
  .site-header .brand-trade {
    display: none;
  }
}

/* The Turnstile widget needs 300px; keep it inside 320px-wide phones. */
@media (max-width: 340px) {
  :root {
    --gutter: 10px;
  }
}

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

  .elevation .d {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .elevation text,
  .elevation .dot {
    opacity: 1;
    animation: none;
  }
}