/* ==========================================================================
   SpectraWin — styles.css
   One shared stylesheet: fonts, design tokens, global chrome, reusable
   components, then per-page rules. See section headers below.
   ========================================================================== */

/* -- Fonts --------------------------------------------------------------
   Brandon Grotesque (headings) and Avenir (body) are commercial, Wix-
   licensed fonts. Substituted with open-source lookalikes recommended by
   the rebuild spec: Josefin Sans for headings, Nunito Sans for body.
   Cinzel is already open-source and used as-is for the hero display line.
   Self-hosted via @fontsource — no external font requests at runtime. */

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/josefin-sans/files/josefin-sans-latin-300-normal.woff2") format("woff2"),
       url("/assets/fonts/josefin-sans/files/josefin-sans-latin-300-normal.woff") format("woff");
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/josefin-sans/files/josefin-sans-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/josefin-sans/files/josefin-sans-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/josefin-sans/files/josefin-sans-latin-700-normal.woff2") format("woff2"),
       url("/assets/fonts/josefin-sans/files/josefin-sans-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans/files/nunito-sans-latin-300-normal.woff2") format("woff2"),
       url("/assets/fonts/nunito-sans/files/nunito-sans-latin-300-normal.woff") format("woff");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans/files/nunito-sans-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/nunito-sans/files/nunito-sans-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans/files/nunito-sans-latin-700-normal.woff2") format("woff2"),
       url("/assets/fonts/nunito-sans/files/nunito-sans-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cinzel/files/cinzel-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/cinzel/files/cinzel-latin-400-normal.woff") format("woff");
}

/* -- Design tokens (spec section 2.1 / 2.3) ------------------------------ */
:root {
  --brand:       #0E72BA; /* nav bar, headings, body copy, links */
  --brand-deep:  #1C3F79; /* spec-button label, submit button fill */
  --brand-pale:  #C3DCEE; /* active nav item, About hero heading */
  --wash:        #DDE9F5; /* uPVC v/s Aluminium page background */
  --grey-band:   #EFF1F2; /* light grey section band */
  --ink:         #000000; /* hero display type, product card captions */
  --ink-soft:    #282626; /* Read More button label */
  --white:       #FFFFFF;

  --maxw:        1497px;  /* Wix full-bleed canvas width */
  --content:     1200px;  /* inner content column */

  --font-display: "Cinzel", serif;
  --font-heading: "Josefin Sans", "Brandon Text", sans-serif;
  --font-body:    "Nunito Sans", "Montserrat", sans-serif;
  --font-button:  Helvetica, Arial, sans-serif;

  --scrim: rgba(0, 0, 0, .35); /* added over photo backgrounds behind white text for contrast (spec 9) */
}

/* -- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--brand);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: -3rem; background: var(--brand-deep);
  color: var(--white); padding: .75rem 1.25rem; z-index: 1000; transition: top .15s;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Global chrome — header, nav, footer (byte-identical on all 13 routes,
   spec section 3)
   ========================================================================== */

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 24px;
}
.site-header__logo { display: inline-flex; }
.site-header__logo img { width: 124px; height: 124px; }
.site-header__iso {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand);
  text-decoration: none;
  max-width: 180px;
  text-align: right;
}
.site-header__iso:hover { text-decoration: underline; }

.site-nav {
  background: var(--brand);
}
.site-nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
  display: block;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
}
.site-nav__list > li > a.is-current { color: var(--brand-pale); }
.site-nav__list > li > a:hover { color: var(--brand-pale); }

.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: var(--brand);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
  z-index: 50;
}
.has-dropdown:hover .site-nav__dropdown,
.has-dropdown:focus-within .site-nav__dropdown,
.has-dropdown.is-open .site-nav__dropdown {
  display: block;
}
.site-nav__dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__dropdown a:hover { background: var(--brand-deep); }

.site-nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 6px auto;
  background: transparent;
  border: 0;
}
.site-nav__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--white);
}
.site-nav__burger span:nth-child(1) { top: 14px; }
.site-nav__burger span:nth-child(2) { top: 21px; }
.site-nav__burger span:nth-child(3) { top: 28px; }

.site-footer {
  background: var(--white);
  text-align: center;
  padding: 40px 24px;
}
.site-footer__email {
  display: inline-block;
  font-size: 15px;
  color: var(--brand);
  text-decoration: underline;
  margin-bottom: 14px;
}
.site-footer__social {
  display: inline-block;
  color: var(--ink);
  margin: 0 0 14px;
}
.site-footer__copyright {
  font-size: 14px;
  color: var(--brand);
}
.icon-facebook { display: block; }

/* ==========================================================================
   Recommended breakpoints (spec 2.3 — the Wix original has none)
   ========================================================================== */
/* ==========================================================================
   Reusable components
   ========================================================================== */

/* -- Page heading (centred 50px heading used at the top of most pages) -- */
.page-heading {
  font-size: 50px;
  font-weight: 400;
  color: var(--brand);
  text-align: center;
  margin: 56px auto 0;
  max-width: var(--content);
  padding: 0 24px;
}

/* -- Spec button + spec grid (spec 6.3) — used 22x across 4 spec pages -- */
.spec-page-intro {
  max-width: var(--content);
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 24px 32px;
  justify-items: center;
  margin-top: 56px;
}
.spec-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 260px;
  height: 36px;
  padding: 0 18px;
  background: var(--white);
  border: 1px solid var(--brand-deep);
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: .12em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
.spec-button:hover { background: var(--grey-band); }
.spec-button span { letter-spacing: normal; }

@media (max-width: 900px) {
  .spec-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-button { max-width: none; white-space: normal; }
}

/* -- Image card with caption plate (spec 6.4) --------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0;
}
.card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--card-ratio, 486 / 557);
  text-decoration: none;
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.card__caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-family: var(--font-heading);
  text-align: center;
  white-space: nowrap;
}
.card--light .card__caption {
  background: var(--white);
  color: var(--ink);
  font-size: 28px;
}
.card--brand .card__caption {
  background: var(--brand);
  color: var(--white);
  font-size: 18px;
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .card__caption { white-space: normal; max-width: 90%; }
}

/* -- Info card (photo + title + description, not a link) ---------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 64px;
  max-width: calc(var(--content) + 300px);
  margin: 0 auto;
  padding: 0 24px;
}
.info-card img { aspect-ratio: 437 / 327; object-fit: cover; width: 100%; }
.info-card__title {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  text-decoration: underline;
}
.info-card__desc {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.5;
}
.section-heading {
  font-size: 50px;
  font-weight: 400;
  color: var(--brand);
  text-align: center;
  margin: 64px auto 40px;
  max-width: var(--content);
  padding: 0 24px;
}
.info-section:first-of-type .section-heading { margin-top: 40px; }
.info-section { padding-bottom: 32px; }
@media (max-width: 1200px) {
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* -- Zig-zag row (spec 6.5) — glasswork x4, about x2 --------------------- */
.zigzag {
  background: var(--wash);
  padding: 8px 24px 64px;
}
.zigzag-row {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: calc(var(--content) + 200px);
  margin: 0 auto;
  padding: 40px 0;
}
.zigzag-row--text-right { flex-direction: row-reverse; }
.zigzag-row__text, .zigzag-row__photo { flex: 1 1 0; min-width: 0; }
.zigzag-row__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  text-decoration: underline;
  margin-bottom: 16px;
}
.zigzag-row__desc { font-size: 20px; line-height: 1.5; }
.zigzag-row__photo img { aspect-ratio: 674 / 375; object-fit: cover; width: 100%; }

@media (max-width: 900px) {
  .zigzag-row, .zigzag-row--text-right { flex-direction: column; gap: 24px; }
}

/* -- Integrated Blinds page ----------------------------------------------- */
.blinds-section {
  background: var(--grey-band);
  padding: 8px 24px 72px;
}
.blinds-row {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: calc(var(--content) + 200px);
  margin: 0 auto;
  padding: 40px 0;
}
.blinds-row__text { flex: 1 1 0; font-size: 20px; line-height: 1.6; }
.blinds-row__photo { flex: 1 1 0; }
.blinds-row__photo img { width: 100%; aspect-ratio: 674 / 375; object-fit: cover; }
.blinds-row__video { flex: 0 0 auto; width: 260px; }
.blinds-row__video video { width: 100%; aspect-ratio: 359 / 490; object-fit: cover; border-radius: 4px; }
.blinds-row__list { flex: 1 1 0; }
.blinds-row__list li { font-size: 20px; line-height: 1.6; padding: 10px 0 10px 26px; position: relative; }
.blinds-row__list li::before {
  content: "";
  position: absolute; left: 0; top: 22px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
}
@media (max-width: 900px) {
  .blinds-row { flex-direction: column; gap: 24px; }
  .blinds-row__video { width: 200px; }
}

/* -- uPVC v/s Aluminium comparison page ----------------------------------- */
.compare-wash {
  background: var(--wash);
  padding: 8px 24px 96px;
}
.compare-column {
  max-width: 850px;
  margin: 0 auto;
  color: var(--ink);
}
.compare-heading {
  color: var(--ink);
}
.compare-block { margin-top: 48px; }
.compare-block__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--brand-deep);
  margin-bottom: 16px;
}
.compare-block p { font-size: 20px; line-height: 1.6; margin-top: 12px; }
.compare-summary { margin-top: 56px; font-size: 20px; line-height: 1.6; }

/* -- About page ------------------------------------------------------------ */
.about-hero {
  position: relative;
  height: 337px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.about-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim); /* contrast fix: spec 9 flags this heading over photo as failing WCAG AA */
}
.about-hero__title {
  position: relative;
  z-index: 1;
  font-size: 88px;
  font-weight: 700;
  color: var(--brand-pale);
  text-align: center;
  padding: 0 24px;
}

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: calc(var(--content) + 250px);
  margin: 72px auto;
  padding: 0 24px;
}
.about-split__photo img { width: 100%; aspect-ratio: 846 / 419; object-fit: cover; }
.about-split__card {
  background: var(--white);
  padding: 40px;
  position: relative;
  z-index: 1;
}
.about-split--normal .about-split__card { margin-left: -60px; }
.about-split--reverse { direction: rtl; }
.about-split--reverse > * { direction: ltr; }
.about-split--reverse .about-split__card { margin-right: -60px; }
.about-split h2 {
  font-size: 50px;
  color: var(--brand);
  margin-bottom: 20px;
}
.about-split p { font-size: 20px; line-height: 1.6; margin-top: 12px; }

.why-choose {
  max-width: var(--content);
  margin: 0 auto;
  padding: 40px 24px 96px;
  text-align: center;
}
.why-choose h2 { font-size: 38px; color: var(--brand); margin-bottom: 32px; }
.why-choose ol {
  list-style: none;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}
.why-choose li { font-size: 20px; line-height: 1.6; padding: 14px 0; }

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split--normal .about-split__card,
  .about-split--reverse .about-split__card { margin: -40px 16px 0; }
  .about-split--reverse { direction: ltr; }
}

/* -- Contact block (home + contact page, spec 6.1 left column / 6.2 form) - */
.contact-block {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  max-width: calc(var(--content) + 250px);
  margin: 0 auto;
  padding: 56px 24px;
}
.contact-info h1, .contact-info h2 { font-size: 40px; margin-bottom: 20px; }
.contact-info p { font-size: 15px; line-height: 1.7; margin-top: 6px; }
.contact-info a { color: var(--brand); text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }
.contact-info__company { font-weight: 700; font-size: 19px; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.contact-form__row { display: flex; flex-direction: column; }
.contact-form__row--full { grid-column: 1 / -1; }
.contact-form__honeypot { position: absolute; left: -9999px; }
.contact-form label {
  font-size: 15px;
  color: var(--brand);
  margin-bottom: 6px;
}
.contact-form__req { color: #c0392b; }
.contact-form input,
.contact-form textarea {
  border: none;
  border-bottom: 1px solid var(--brand);
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--brand);
  padding: 6px 2px;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-bottom-width: 2px; }
.contact-form textarea { resize: vertical; }
.contact-form__submit {
  grid-column: 1 / -1;
  height: 44px;
  background: var(--brand-deep);
  color: var(--white);
  font-size: 18px;
  border: none;
}
.contact-form__submit:hover { opacity: .92; }
.contact-form__submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-form__status { grid-column: 1 / -1; font-size: 15px; }
.contact-form__status[data-state="error"] { color: #c0392b; }

.hours-band {
  position: relative;
  background: var(--brand-deep);
  color: var(--white);
  text-align: center;
  padding: 64px 24px;
  overflow: hidden;
}
.hours-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hours-band::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.hours-band__content { position: relative; z-index: 1; }
.hours-band h2 { font-size: 22px; margin-bottom: 16px; }
.hours-band p { font-size: 15px; }

.not-found { max-width: var(--content); margin: 96px auto; padding: 0 24px; text-align: center; }
.not-found__desc { font-size: 18px; margin: 24px 0; }
.not-found__link { color: var(--brand); text-decoration: underline; font-size: 16px; }

/* ==========================================================================
   Home page
   ========================================================================== */
.home-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 48px 24px;
}
.home-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.home-hero__line1 {
  font-family: var(--font-display);
  font-size: 94px;
  color: var(--ink);
  line-height: 1.1;
}
.home-hero__line2 {
  font-family: var(--font-heading);
  font-size: 70px;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 8px;
}
.home-hero__line3 {
  font-size: 22px;
  color: var(--white);
  margin-top: 24px;
  max-width: 700px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.home-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.home-about__text { padding: 56px 48px; }
.home-about__text h2 { font-size: 40px; margin-bottom: 20px; }
.home-about__text p { font-size: 18px; line-height: 1.6; margin-top: 16px; }
.home-about__photo img { width: 100%; aspect-ratio: 749 / 794; object-fit: cover; }
.pill-button {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  font-family: var(--font-button);
  font-size: 17px;
  text-decoration: none;
}
.pill-button:hover { background: var(--grey-band); }

.why-grid { display: grid; grid-template-columns: 1fr 1fr; }
.why-panel {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}
.why-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.why-panel::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.why-panel__inner { color: var(--white); max-width: 520px; text-align: center; }
.why-panel__inner h3 { font-size: 22px; margin-bottom: 16px; }
.why-panel__inner p { font-size: 18px; line-height: 1.6; text-align: justify; }

.compare-band {
  background: var(--ink);
  text-align: center;
  padding: 20px;
}
.compare-band a {
  color: var(--white);
  font-size: 20px;
  text-decoration: none;
}
.compare-band a:hover { text-decoration: underline; }

.testimonials { padding: 72px 24px; text-align: center; }
.testimonials h2 { font-size: 56px; margin-bottom: 48px; }

.testimonial-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(var(--content) + 100px);
  margin: 0 auto;
}
.testimonial-slider__viewport { flex: 1 1 auto; overflow: hidden; }
.testimonial-slider__track {
  display: flex;
  transition: transform .4s ease;
}
.testimonial-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.testimonial-slide__quote { font-size: 26px; line-height: 1.5; }
.testimonial-slide__rule { border: none; border-top: 2px solid var(--brand); width: 64px; margin: 20px 0; }
.testimonial-slide__attribution { font-size: 20px; font-weight: 700; }
.testimonial-slide__photo img { width: 220px; aspect-ratio: 394 / 552; object-fit: cover; }
.testimonial-slider__arrow {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 40px;
  line-height: 1;
  color: var(--brand);
  padding: 8px 12px;
}
.testimonial-slider__arrow:hover { color: var(--brand-deep); }
.testimonial-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.testimonial-slider__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  background: transparent;
  padding: 0;
}
.testimonial-slider__dot.is-active { background: var(--brand); }

@media (max-width: 600px) {
  .testimonial-slider { gap: 4px; }
  .testimonial-slider__arrow { font-size: 24px; padding: 4px; flex-basis: 28px; }
  .testimonial-slide { grid-template-columns: 1fr; text-align: center; }
  .testimonial-slide__photo { justify-self: center; }
  .testimonial-slide__rule { margin-left: auto; margin-right: auto; }
}

.contact-section { background: var(--white); }

@media (max-width: 1200px) {
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home-about, .home-about__text { grid-template-columns: 1fr; }
  .home-about { grid-template-columns: 1fr; }
  .home-about__photo { order: -1; }
}
@media (max-width: 600px) {
  .home-hero__line1 { font-size: 52px; }
  .home-hero__line2 { font-size: 36px; }
  .home-hero__line3 { font-size: 18px; }
  .testimonials h2 { font-size: 36px; }
}

@media (max-width: 900px) {
  .contact-block { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .contact-form { grid-template-columns: 1fr; }
  .about-hero__title { font-size: 44px; }
  .site-nav__burger { display: block; }
  .site-nav__list {
    display: none;
    flex-direction: column;
    text-align: center;
  }
  .site-nav.is-open .site-nav__list { display: flex; }
  .site-nav__dropdown { position: static; box-shadow: none; }
  .has-dropdown .site-nav__dropdown { display: none; }
  .has-dropdown.is-open .site-nav__dropdown { display: block; }
  .site-header__iso {
    position: static;
    transform: none;
    display: block;
    text-align: center;
    margin-top: 8px;
    max-width: none;
  }
  .site-header__bar { flex-direction: column; }
}