@layer global, component, utility;

@layer global {
  /* Fonts */
  :root {
    --ff-body: "Inter", Arial, Helvetica, sans-serif;
    --ff-heading: "Oswald", Arial, Helvetica, sans-serif;

    --fs-12: calc(12 / 16 * 1rem);
    --fs-13: calc(13 / 16 * 1rem);
    --fs-14: calc(14 / 16 * 1rem);
    --fs-15: calc(15 / 16 * 1rem);
    --fs-16: 1rem;
    --fs-17: calc(17 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-22: calc(22 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-40: calc(40 / 16 * 1rem);

    --font-size-nav: var(--fs-14);
    --font-size-body: var(--fs-16);
    --font-size-button: var(--fs-13);
    --font-size-eyebrow: var(--fs-12);
    --font-size-card-title: var(--fs-22);
    --font-size-section-title: clamp(2.2rem, 4vw, 3.4rem);
    --font-size-hero-title: clamp(3.3rem, 7vw, 6.3rem);
  }

  /* Colors */
  :root {
    --c-black: #090909;
    --c-charcoal: #151515;
    --c-gold: #d7a323;
    --c-gold-dark: #ad7c09;
    --c-gold-light: #e4b83f;
    --c-gold-deep: #bf8610;
    --c-white: #ffffff;
    --c-gray-50: #f6f5f2;
    --c-gray-100: #f2f2f2;
    --c-gray-200: #e7e4dd;
    --c-gray-300: #dddddd;
    --c-gray-400: #c6c6c6;
    --c-gray-500: #bcbcbc;
    --c-gray-600: #777777;
    --c-gray-700: #6f6f6f;
    --c-gray-800: #494949;
    --c-gray-900: #171717;
    --c-gray-950: #111111;
    --c-gray-975: #0f0f0f;
    --c-gray-990: #0c0c0c;
    --c-black-soft: #070707;
    --c-black-deep: #050505;
    --c-gray-copy-light: #e7e7e7;
    --c-gray-copy-mid: #c4c4c4;
    --c-gray-copy-dark: #c0c0c0;
    --c-gray-footer: #aaaaaa;
    --c-gray-form-label: #222222;
    --c-gray-form-copy: #666666;
    --c-gray-control-hover: #e5e5e5;
    --c-gray-panel-light: #242424;
    --c-transparent: transparent;

    --color-page-bg: var(--c-white);
    --color-surface: var(--c-gray-50);
    --color-surface-dark: var(--c-charcoal);
    --color-text: var(--c-gray-900);
    --color-text-muted: var(--c-gray-700);
    --color-text-light: var(--c-white);
    --color-accent: var(--c-gold);
    --color-accent-dark: var(--c-gold-dark);
    --color-border: var(--c-gray-200);
    --color-header-bg: rgba(7, 7, 7, 0.96);
    --color-header-bg-mobile: rgba(7, 7, 7, 0.98);
    --color-hero-bg: var(--c-black);
    --color-contact-bg: var(--c-gray-990);
    --color-footer-bg: var(--c-black-deep);
    --color-overlay: rgba(0, 0, 0, 0.78);
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-light-strong: rgba(255, 255, 255, 0.12);
    --color-border-panel: rgba(255, 255, 255, 0.16);
    --color-button-outline: rgba(255, 255, 255, 0.55);
    --color-hero-overlay-start: rgba(0, 0, 0, 0.92);
    --color-hero-overlay-middle: rgba(0, 0, 0, 0.72);
    --color-hero-overlay-end: rgba(0, 0, 0, 0.18);
    --color-hero-overlay-mobile: var(--color-hero-overlay-middle);
    --color-project-overlay: rgba(0, 0, 0, 0.9);
  }

  /* Layout/Effects */
  :root {
    --layout-max-width: 90rem;
    --layout-gutter: 6rem;
    --layout-gutter-mobile: 1.25rem;
    --header-height: 5.625rem;

    --radius-sm: 0.1875rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1.125rem;
    --radius-round: 50%;

    --shadow-card: 0 14px 40px rgba(15, 15, 15, 0.08);
    --shadow-gold: 0 10px 30px rgba(208, 154, 29, 0.24);
    --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.35);
    --shadow-testimonial: 0 10px 28px rgba(0, 0, 0, 0.05);
    --shadow-control-focus: 0 0 0 3px rgba(201, 162, 39, 0.15);

    --transition-fast: 0.2s ease;
    --transition-reveal: 0.65s ease;
  }

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

  * {
    margin: 0;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
  }

  body {
    min-width: 20rem;
    background: var(--color-page-bg);
    color: var(--color-text);
    font-family: var(--ff-body);
    font-size: var(--font-size-body);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

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

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    color: inherit;
  }

  section[id] {
    scroll-margin-top: var(--header-height);
  }

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

@layer component {
  /* ==============================
     Shared components
     ============================== */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.375rem;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-button);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      transform var(--transition-fast),
      background var(--transition-fast),
      filter var(--transition-fast);
  }

  .button:hover {
    transform: translateY(-2px);
  }

  .button__arrow {
    display: inline-block;
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2;
    transition: transform var(--transition-fast);
  }

  .button__icon {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2;
  }

  .button:hover .button__arrow,
  .estimate-form__submit:hover .button__arrow {
    transform: translateX(0.22rem);
  }

  .button--gold {
    background: linear-gradient(
      135deg,
      var(--c-gold-light),
      var(--c-gold-deep)
    );
    color: var(--color-text-light);
    box-shadow: var(--shadow-gold);
  }

  .button--outline-light {
    border: 1px solid var(--color-button-outline);
    background: var(--c-transparent);
    color: var(--color-text-light);
  }

  .button--outline-dark {
    border: 1px solid var(--color-accent);
    background: var(--c-transparent);
    color: var(--color-accent-dark);
  }

  .section-heading {
    margin-block-end: 2.875rem;
    text-align: center;
  }

  .section-heading__eyebrow,
  .eyebrow {
    margin-block-end: 0.75rem;
    color: var(--color-accent);
    font-size: var(--font-size-eyebrow);
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .section-heading__title {
    margin: 0;
    font-family: var(--ff-heading);
    font-size: var(--font-size-section-title);
    font-weight: 700;
    line-height: 1.1;
  }

  .section-heading__intro {
    color: var(--color-text-muted);
  }

  .section-heading__accent {
    display: block;
    width: 2.625rem;
    height: 0.1875rem;
    margin: 1rem auto 0;
    background: var(--color-accent);
  }

  /* Navbar */
  .navbar {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    min-height: var(--header-height);
    padding: 0.625rem
      max(var(--layout-gutter), calc((100vw - var(--layout-max-width)) / 2));
    overflow: visible;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border-light);

    .navbar__brand {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      width: 10.625rem;
      min-height: 4.375rem;
      overflow: visible;
    }

    .navbar__logo {
      width: 9.375rem;
      height: auto;
      object-fit: contain;
    }

    .navbar__menu-button {
      display: none;
      border: 0;
      background: none;
      color: var(--color-text-light);
      cursor: pointer;
      transition:
        color var(--transition-fast),
        transform var(--transition-fast);
    }

    .navbar__menu-button:hover {
      color: var(--color-accent);
      transform: scale(1.06);
    }

    .navbar__menu-icon {
      width: 1.625rem;
      height: 1.625rem;
    }

    .navbar__menu-icon--close {
      display: none;
    }

    .navbar__menu-button--open .navbar__menu-icon--open {
      display: none;
    }

    .navbar__menu-button--open .navbar__menu-icon--close {
      display: block;
    }

    .navbar__nav {
      display: flex;
      align-items: center;
      gap: 1.875rem;
      margin-inline-start: auto;
    }

    .navbar__link {
      position: relative;
      color: var(--color-text-light);
      font-size: var(--font-size-nav);
      font-weight: 600;
    }

    .navbar__link::after {
      content: "";
      position: absolute;
      inset: auto 100% -0.5625rem 0;
      height: 0.125rem;
      background: var(--color-accent);
      transition: right var(--transition-fast);
    }

    .navbar__link:hover::after {
      right: 0;
    }

    .navbar__cta--desktop {
      display: inline-flex;
    }

    .navbar__cta--mobile {
      display: none;
    }

    @media (min-width: 1920px) {
      .navbar {
        padding-inline: max(6rem, calc((100vw - 1920px) / 2));
      }
    }

    @media (max-width: 1000px) {
      padding: 0.625rem
        max(
          var(--layout-gutter-mobile),
          calc((100vw - var(--layout-max-width)) / 2)
        );

      .navbar__cta--desktop {
        display: none;
      }
    }

    @media (max-width: 800px) {
      .navbar {
        min-height: var(--header-height);
        padding: 0.5rem 1.25rem;
      }

      .navbar__brand {
        width: 9.375rem;
        min-height: 3.75rem;
      }

      .navbar__logo {
        width: 8.125rem;
      }

      .navbar__menu-button {
        display: grid;
        place-items: center;
        margin-inline-start: auto;
      }

      .navbar--simple .navbar__menu-button {
        display: none;
      }

      .navbar__back {
        padding: 0.65rem 0.9rem;
        font-size: var(--fs-12);
      }

      .navbar__nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 1.25rem;
        background: var(--color-header-bg-mobile);
        border-top: 1px solid var(--color-border-light);
      }

      .navbar__nav--open {
        display: flex;
      }

      .navbar__link {
        padding-block: 0.875rem;
        border-bottom: 1px solid var(--color-border-light);
      }

      .navbar__link::after {
        display: none;
      }

      .navbar__cta--mobile {
        display: inline-flex;
        width: 100%;
        margin-block-start: 0.75rem;
      }
    }
  }

  /* Hero */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    min-height: 42.5rem;
    padding-top: var(--header-height);
    overflow: hidden;
    background: var(--color-hero-bg);
    color: var(--color-text-light);

    .hero__background {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        var(--color-hero-overlay-start) 0%,
        var(--color-hero-overlay-middle) 42%,
        var(--color-hero-overlay-end) 75%
      );
    }

    .hero__content {
      position: relative;
      z-index: 1;
      padding-block: 5.625rem 8.125rem;
    }

    .hero__eyebrow {
      margin-block-end: 0.75rem;
    }

    .hero__title {
      max-width: 48.75rem;
      margin: 0;
      font-family: var(--ff-heading);
      font-size: var(--font-size-hero-title);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: -0.025em;
      text-transform: uppercase;
    }

    .hero__title-accent {
      color: var(--color-accent);
    }

    .hero__copy {
      max-width: 36.875rem;
      margin-block-start: 1rem;
      color: var(--c-gray-copy-light);
      font-size: var(--fs-17);
      line-height: 1.7;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-block-start: 1.875rem;
    }

    @media (max-width: 800px) {
      .hero {
        min-height: 40rem;
      }

      .hero__content {
        padding-block: 5rem 6.25rem;
      }

      .hero__overlay {
        background: var(--color-hero-overlay-mobile);
      }
    }
  }

  /* Services */
  .services {
    .services__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .services__item {
      min-width: 0;
      height: 100%;
    }

    .service-card {
      position: relative;
      height: 100%;
      overflow: hidden;
      background: var(--color-page-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    }

    .service-card:hover {
      transform: translateY(-0.35rem);
      border-color: rgba(215, 163, 35, 0.45);
      box-shadow: 0 20px 50px rgba(15, 15, 15, 0.13);
    }

    .service-card__image {
      width: 100%;
      height: 13.75rem;
      object-fit: cover;
      object-position: center;
      transition:
        transform 0.45s ease,
        filter 0.45s ease;
    }

    .service-card:hover .service-card__image {
      transform: scale(1.035);
      filter: saturate(1.04);
    }

    .service-card__icon {
      position: absolute;
      top: 12.0625rem;
      left: 1.375rem;
      display: grid;
      place-items: center;
      width: 3.375rem;
      height: 3.375rem;
      background: var(--color-accent);
      color: var(--color-text-light);
      border: 4px solid var(--color-page-bg);
      border-radius: var(--radius-round);
    }

    .service-card__icon svg {
      width: 1.4rem;
      height: 1.4rem;
    }

    .service-card__body {
      padding: 2.3125rem 1.5rem 1.625rem;
    }

    .service-card__title {
      margin-block-end: 0.5rem;
      font-size: var(--font-size-card-title);
    }

    .service-card__description {
      min-height: 3.125rem;
      color: var(--color-text-muted);
      line-height: 1.55;
    }

    .service-card__list {
      display: grid;
      gap: 0.5rem;
      margin-block: 1.25rem;
      padding: 0;
      list-style: none;
    }

    .service-card__list-item {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      font-size: var(--fs-14);
    }

    .service-card__list-item svg,
    .service-card__link {
      color: var(--color-accent-dark);
    }

    .service-card__link {
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
      font-size: var(--fs-12);
      font-weight: 800;
      text-transform: uppercase;
      transition:
        gap var(--transition-fast),
        color var(--transition-fast);
    }

    .service-card__link:hover {
      gap: 0.7rem;
      color: var(--color-accent);
    }

    .check {
      flex: 0 0 auto;
      width: 1rem;
      height: 1rem;
      color: var(--color-accent-dark);
      stroke-width: 2.5;
    }

    @media (max-width: 800px) {
      .services__grid {
        grid-template-columns: 1fr;
      }
    }
  }

  /* About */
  .about {
    background: var(--color-page-bg);

    .about__panel {
      display: grid;
      grid-template-columns: 0.8fr 1.7fr;
      gap: 2rem;
      padding: 3.375rem;
      background: radial-gradient(
        circle at 15% 10%,
        var(--c-gray-panel-light),
        var(--c-gray-975) 60%
      );
      color: var(--color-text-light);
      border-radius: var(--radius-lg);
    }

    .about__title {
      margin-block-end: 1.25rem;
      font-family: var(--ff-heading);
      font-size: var(--font-size-section-title);
      font-weight: 700;
      line-height: 1.07;
    }

    .about__description {
      color: var(--c-gray-400);
      line-height: 1.7;
    }

    .about__benefits {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .about__benefit {
      display: flex;
      gap: 0.875rem;
      padding: 1.25rem;
      border-left: 1px solid var(--color-border-panel);
      border-bottom: 1px solid var(--color-border-panel);
      transition:
        background var(--transition-fast),
        transform var(--transition-fast);
    }

    .about__benefit:hover {
      background: rgba(255, 255, 255, 0.035);
      transform: translateY(-0.16rem);
    }

    .about__benefit-icon {
      flex: 0 0 auto;
      width: 1.25rem;
      height: 1.25rem;
      color: var(--color-accent);
      stroke-width: 2;
    }

    .about__benefit:nth-child(n + 4) {
      border-bottom: 0;
    }

    .about__benefit svg {
      flex: 0 0 auto;
      color: var(--color-accent);
    }

    .about__benefit-title {
      margin-block-end: 0.375rem;
      font-size: var(--fs-15);
    }

    .about__benefit-copy {
      margin: 0;
      color: var(--c-gray-500);
      font-size: var(--fs-12);
      line-height: 1.5;
    }

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

    @media (max-width: 800px) {
      .about__panel {
        padding: 2rem 1.5rem;
      }

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

      .about__benefit {
        border-left: 0;
        border-bottom: 1px solid var(--color-border-panel);
      }

      .about__benefit:nth-child(n + 4) {
        border-bottom: 1px solid var(--color-border-panel);
      }

      .about__benefit:last-child {
        border-bottom: 0;
      }
    }
  }

  /* Projects */
  .projects {
    padding-top: 9.0625rem;

    .projects__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.875rem;
    }

    .projects__item {
      min-width: 0;
    }

    .project-card {
      position: relative;
      min-height: 14.375rem;
      height: 100%;
      overflow: hidden;
      background: var(--c-gray-900);
      border-radius: 0.3125rem;
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    }

    .project-card:hover {
      transform: translateY(-0.3rem);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    }

    .project-card__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition:
        transform 0.5s ease,
        filter 0.5s ease;
    }

    .project-card:hover .project-card__image {
      transform: scale(1.055);
      filter: brightness(1.04);
    }

    .project-card::after {
      content: "";
      position: absolute;
      inset: 40% 0 0;
      background: linear-gradient(
        var(--c-transparent),
        var(--color-project-overlay)
      );
    }

    .project-card__title {
      position: absolute;
      z-index: 1;
      left: 1rem;
      bottom: 1rem;
      color: var(--color-text-light);
      font-weight: 700;
    }

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

    @media (max-width: 800px) {
      .projects {
        padding-top: 5.75rem;
      }
    }

    @media (max-width: 600px) {
      .projects__grid {
        grid-template-columns: 1fr;
      }
    }
  }

  /* Testimonials */
  .testimonials {
    background: var(--color-surface);

    .testimonials__layout {
      display: grid;
      grid-template-columns: 15.625rem 1fr;
      gap: 2.8125rem;
      align-items: center;
    }

    .testimonials__heading-title {
      margin: 0;
      font-family: var(--ff-heading);
      font-size: var(--font-size-section-title);
      font-weight: 700;
      line-height: 1.1;
    }

    .testimonials__heading-accent {
      display: block;
      width: 2.625rem;
      height: 0.1875rem;
      margin-block-start: 1rem;
      background: var(--color-accent);
    }

    .testimonials__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    .testimonials__item {
      min-width: 0;
      height: 100%;
    }

    .testimonial-card {
      height: 100%;
      padding: 1.625rem;
      background: var(--color-page-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-testimonial);
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    }

    .testimonial-card:hover {
      transform: translateY(-0.25rem);
      border-color: rgba(215, 163, 35, 0.35);
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.09);
    }

    .testimonial-card__stars {
      color: var(--color-accent);
      letter-spacing: 0.1875rem;
    }

    .testimonial-card__quote {
      min-height: 6.875rem;
      margin-block: 1rem;
      color: var(--c-gray-800);
      line-height: 1.55;
    }

    .testimonial-card__name,
    .testimonial-card__role {
      display: block;
    }

    .testimonial-card__role {
      margin-block-start: 0.1875rem;
      color: var(--color-text-muted);
      font-size: var(--fs-13);
    }

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

      .testimonials__heading {
        text-align: center;
      }

      .testimonials__heading-accent {
        margin-inline: auto;
      }
    }

    @media (max-width: 800px) {
      .testimonials__grid {
        grid-template-columns: 1fr;
      }
    }
  }

  /* Contact */
  .contact {
    padding-block: 2.75rem 1.25rem;
    background: var(--color-contact-bg);
    color: var(--color-text-light);

    .contact__main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.875rem;
    }

    .contact__title {
      margin: 0;
      font-family: var(--ff-heading);
      font-size: var(--fs-40);
      font-weight: 700;
    }

    .contact__copy {
      color: var(--c-gray-copy-dark);
    }

    .contact__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
    }

    .contact__details {
      display: flex;
      flex-wrap: wrap;
      gap: 1.75rem;
      margin-block-start: 1.75rem;
      padding-block-start: 1.75rem;
      color: var(--c-gray-copy-mid);
      border-top: 1px solid var(--color-border-light-strong);
      font-size: var(--fs-13);
    }

    .contact__detail {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
      transition:
        color var(--transition-fast),
        transform var(--transition-fast);
    }

    a.contact__detail:hover {
      transform: translateY(-0.1rem);
    }

    a.contact__detail:hover {
      color: var(--color-text-light);
    }

    .contact__detail svg {
      width: 1rem;
      height: 1rem;
      color: var(--color-accent);
      stroke-width: 2;
    }

    @media (max-width: 800px) {
      .contact__main {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 600px) {
      .contact__title {
        font-size: var(--fs-36);
      }
    }
  }

  /* Footer */
  .footer {
    background: var(--color-footer-bg);
    color: var(--c-gray-footer);
    border-top: 1px solid var(--color-border-light);

    .footer__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 6.25rem;
    }

    .footer__logo {
      width: 9.25rem;
      height: auto;
    }

    .footer__copyright {
      font-size: var(--fs-12);
    }

    @media (max-width: 600px) {
      .footer__inner {
        flex-direction: column;
        gap: 1rem;
        padding-block: 1.5rem;
        text-align: center;
      }
    }
  }

  /* Estimate page/Netlify form */
  .estimate-page {
    background: var(--c-gray-975);
  }

  .navbar--simple {
    justify-content: space-between;
  }

  .navbar__back {
    margin-inline-start: auto;
  }

  .estimate-page__main {
    min-height: 100vh;
    padding-top: var(--header-height);
    background:
      radial-gradient(
        circle at 12% 15%,
        rgba(215, 163, 35, 0.11),
        transparent 32rem
      ),
      linear-gradient(135deg, var(--c-gray-975), var(--c-black));
  }

  .estimate-page__section {
    padding-block: 5.5rem;
  }

  .estimate-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(32rem, 1.18fr);
    gap: 4rem;
    align-items: start;
  }

  .estimate-page__intro {
    color: var(--color-text-light);
  }

  .estimate-page__title {
    max-width: 38rem;
    margin-block-end: 1.25rem;
    font-family: var(--ff-heading);
    font-size: clamp(2.9rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }

  .estimate-page__copy {
    max-width: 36rem;
    color: var(--c-gray-400);
    font-size: var(--fs-17);
    line-height: 1.7;
  }

  .estimate-page__details {
    display: grid;
    gap: 0.6rem;
    margin-block-start: 2rem;
    color: var(--c-gray-copy-mid);
    font-size: var(--fs-14);
  }

  .estimate-page__details a {
    width: fit-content;
    transition:
      color var(--transition-fast),
      transform var(--transition-fast);
  }

  .estimate-page__details a:hover {
    color: var(--color-accent);
    transform: translateX(0.25rem);
  }

  .estimate-page__card {
    padding: 2.625rem;
    background: var(--color-page-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .estimate-page__card:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.4);
  }

  .estimate-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .estimate-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
    min-width: 0;
  }

  .estimate-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .estimate-form__label {
    color: var(--c-gray-form-label);
    font-size: var(--fs-14);
    font-weight: 600;
  }

  .estimate-form__optional {
    color: var(--c-gray-600);
    font-size: var(--fs-12);
    font-weight: 500;
  }

  .estimate-form__control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    padding-inline: 0.9375rem;
    border: 1px solid var(--c-gray-300);
    border-radius: var(--radius-lg);
    outline: none;
    background: var(--color-page-bg);
    color: var(--c-gray-950);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
  }

  .estimate-form__control:hover {
    border-color: var(--c-gray-500);
  }

  .estimate-form__control:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-control-focus);
  }

  /* iOS Safari can give native date/time controls an intrinsic inline size.
     Keep the controls constrained to their parent without changing the native picker. */
  .estimate-form__control[type="date"],
  .estimate-form__control[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    font-size: 1rem;
    overflow: hidden;
  }

  @supports (-webkit-touch-callout: none) {
    .estimate-form__control[type="date"],
    .estimate-form__control[type="time"] {
      width: -webkit-fill-available;
      inline-size: -webkit-fill-available;
    }
  }

  .estimate-form__control[type="date"]::-webkit-date-and-time-value,
  .estimate-form__control[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  .estimate-form__control--textarea {
    min-height: 7.5rem;
    padding-block: 0.875rem;
    resize: vertical;
  }

  .estimate-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.375rem;
    margin-block-start: 0.25rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(
      135deg,
      var(--c-gold-light),
      var(--c-gold-deep)
    );
    color: var(--color-text-light);
    box-shadow: var(--shadow-gold);
    font-size: var(--fs-15);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      transform var(--transition-fast),
      filter var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .estimate-form__submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 36px rgba(208, 154, 29, 0.32);
  }

  .estimate-form__note {
    margin-block-start: -0.3125rem;
    color: var(--c-gray-600);
    font-size: var(--fs-12);
    text-align: center;
  }

  .form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ==============================
     Thank-you page
     ============================== */
  .thank-you-page {
    background: var(--c-gray-975);
  }

  .thank-you-page__main {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 1.5rem;
    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(215, 163, 35, 0.13),
        transparent 32rem
      ),
      var(--c-gray-975);
  }

  .thank-you-card {
    width: min(100%, 40rem);
    padding: 3rem;
    background: var(--color-page-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .thank-you-card__logo {
    max-width: 65%;
    padding-bottom: 3rem;
    object-fit: cover;
  }

  .thank-you-card__check {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    background: var(--color-accent);
    color: var(--color-text-light);
    border-radius: var(--radius-round);
    font-size: var(--fs-24);
    font-weight: 800;
  }

  .thank-you-card__check svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 2.5;
  }

  .thank-you-card__title {
    margin-block-end: 0.75rem;
    font-family: var(--ff-heading);
    font-size: var(--font-size-section-title);
    text-transform: uppercase;
  }

  .thank-you-card__copy {
    margin: 0 auto 1.75rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    text-align: center;
  }

  /* ==============================
     Component breakpoints
     ============================== */

  @media (max-width: 800px) {
    :root {
      --header-height: 4.6875rem;
    }

    .estimate-page__layout {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .estimate-page__section {
      padding-block: 3.75rem;
    }

    .estimate-page__card {
      padding: 2.125rem 1.375rem;
    }

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

    /* Date/time controls are intentionally removed from CSS Grid on mobile.
       This avoids an iOS Safari intrinsic-sizing bug on native picker inputs. */
    .estimate-form__schedule {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      width: 100%;
      min-width: 0;
    }

    .estimate-form__schedule .estimate-form__group {
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }
  }
}

@layer utility {
  .container {
    width: min(
      var(--layout-max-width),
      calc(100% - (var(--layout-gutter) * 2))
    );
    margin-inline: auto;
  }

  /* @media (min-width: 1920px) {
    .container {
      width: calc(100% - (var(--layout-gutter) * 2));
    }
  } */

  @media (max-width: 1000px) {
    .container {
      width: calc(100% - (var(--layout-gutter-mobile) * 2));
    }
  }

  @media (max-width: 800px) {
    .container {
      width: calc(100% - (var(--layout-gutter-mobile) * 2));
    }
  }

  .section {
    padding-block: 5.75rem;
  }

  .section--light {
    background: var(--color-page-bg);
  }

  .reveal {
    opacity: 0;
    transition:
      opacity var(--transition-reveal) var(--reveal-delay, 0ms),
      transform var(--transition-reveal) var(--reveal-delay, 0ms);
  }

  .reveal--up {
    transform: translateY(1.875rem);
  }

  .reveal--down {
    transform: translateY(-1.875rem);
  }

  .reveal--left {
    transform: translateX(-1.875rem);
  }

  .reveal--right {
    transform: translateX(1.875rem);
  }

  .reveal--visible {
    opacity: 1;
    transform: translate(0, 0);
  }

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

    .reveal,
    .reveal--up,
    .reveal--down,
    .reveal--left,
    .reveal--right {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}