/*
 * Our additions to the designer's styles.css, which stays byte-for-byte as
 * delivered so the next design round is a clean diff. Every rule here is one
 * the approved design pack (docs/design/design-pack.html, rev 1) lists, or
 * keeps a markup change from looking any different.
 */

/* 1. Footer slogan font. styles.css @imports Kaushan Script mid-file, where
      browsers ignore it, so it never loaded. It is self-hosted through
      next/font (app/layout.tsx), which exposes it as --font-kaushan. */
.site-footer > p {
  font-family: var(--font-kaushan), "Kaushan Script", "Brush Script MT", cursive;
}

/* 2. Menu button from 850px down (the package's one behavioural fix). The
      desktop nav hides at 850px but the designer's Menu button only appears
      at 760px. Between 761 and 850px the header is still 88px tall. */
@media (min-width: 761px) and (max-width: 850px) {
  .menu-toggle {
    display: block;
    margin-left: auto;
    color: #fff;
    background: none;
    border: 1px solid #ffffff70;
    padding: 10px 13px;
    font-size: 13px;
  }
  .mobile-nav:not([hidden]) {
    display: flex;
    position: absolute;
    z-index: 11;
    top: 88px;
    left: 0;
    right: 0;
    background: #103d39;
    padding: 20px var(--gutter);
    flex-direction: column;
    gap: 22px;
    color: #fff;
    font-size: 15px;
  }
}

/* 3. Headings one level up. Each page's title became an <h1> (owner, round
      2), so the headings beneath it moved up a level to stay in order. These
      are the designer's own rules, copied with the element swapped, so
      nothing looks different. */
.intro h1,
.section-heading h1 {
  font-size: clamp(47px, 5.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.06em;
  font-weight: 400;
  margin: 0;
}
h1.match-built-font em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-style: normal !important;
}

/* Projects tiles: <h3> -> <h2> */
.featured-project-overlay h2 {
  font-size: clamp(37px, 5vw, 82px);
  font-weight: 400;
  letter-spacing: -0.05em;
  margin: 15px 0 20px;
}
.portfolio-tile .featured-project-overlay h2 {
  font-size: clamp(26px, 2.8vw, 42px);
  margin: 8px 0 12px;
  letter-spacing: -0.03em;
}
@media (max-width: 650px) {
  .portfolio-tile .featured-project-overlay h2 {
    font-size: 30px;
  }
}
.projects .projects-mosaic .portfolio-tile .featured-project-overlay h2 {
  font-size: clamp(22px, 2.45vw, 38px);
}
@media (max-width: 600px) {
  .projects .projects-mosaic .portfolio-tile .featured-project-overlay h2 {
    font-size: clamp(25px, 6vw, 34px);
  }
}

/* Services rows: <h3> -> <h2> */
.service-row h2 {
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 9px;
}

/* Process timeline: stage name <h3> -> <h2>, sub-heading <h4> -> <h3>. The
   sub-heading carries a class so the designer's .timeline-step h3 rules
   (meant for the stage name) do not reach it. */
.timeline-step h2 {
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 24px 0 8px;
  color: var(--ink);
}
@media (max-width: 1100px) {
  .timeline-step h2 {
    margin-top: 10px;
    font-size: 22px;
  }
}
@media (max-width: 760px) {
  .timeline-step h2 {
    font-size: 21px;
  }
}
.timeline-step h3.timeline-sub {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 10px;
  color: var(--ink);
}

/* 4. Hero poster on phones: a 1000px WebP instead of the desktop JPEG, at the
      breakpoint where the designer already switches to the poster alone.
      app/page.tsx preloads the matching file. */
@media (max-width: 760px) {
  .hero-poster {
    background-image: url("/assets/rcon-hero-poster-1000.webp");
  }
}

/* 5. Footer row. The copyright line now names the licensee and the Act (two
      short lines), and Kaushan Script, which never loaded in the reference,
      is wider than its fallback. Keep each item on its own lines so the row
      reads as in the design instead of squeezing the credentials apart. */
.footer-credentials span,
.site-footer > .footer-legal {
  white-space: nowrap;
}
@media (min-width: 761px) {
  .site-footer > .footer-legal {
    text-align: right;
  }
}
/* The one-row footer fits from about 1180px. Below that (tablets, small
   laptops) it would squeeze the slogan to a word per line, so it stacks the
   way the designer's own phone footer does: logo and licence line, then the
   slogan full width, then the credentials, kept in a row. */
@media (min-width: 761px) and (max-width: 1180px) {
  .site-footer {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .site-footer > p {
    order: 3;
    width: 100%;
  }
  .site-footer .footer-credentials {
    order: 4;
    width: 100%;
  }
  .site-footer > .footer-legal {
    margin-left: auto;
  }
}

/* 6. Privacy links: footer and under the form. */
.site-footer .footer-privacy {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-privacy {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5d5d56;
  max-width: 470px;
}
.contact-privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-turnstile {
  margin-top: 25px;
  min-height: 65px;
}

/* 7. 1280px frame (owner, 2026-11-10; design pack rev 3). On screens wider
      than 1280px the page sits in a centred 1280px box on the designer's
      stone colour instead of stretching across the window. The one exception
      is the home hero: its photo runs the full width of the window while its
      text stays lined up with the frame. At 1280px and below nothing changes. */
html {
  background: #e7e5de;
  /* How far the window extends past the frame on each side (0 when it does
     not). Measured in cqw against <html> rather than in vw, because 100vw
     counts the scrollbar and would push the hero half a scrollbar past the
     window, giving the page a sideways wobble. Browsers without container
     units ignore it and keep the hero in the frame. */
  container-type: inline-size;
  --frame-bleed: max(0px, calc((100cqw - 1280px) / 2));
}
body {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1281px) {
  body {
    box-shadow: 0 0 0 1px #c7c8bf, 0 0 48px rgba(11, 46, 43, 0.12);
  }
}
/* Home hero: widen the block to the window, then pad it back in by the same
   amount, so the photo and shade (inset:0) fill the window and the text box
   sits exactly where it did inside the frame. */
.hero {
  margin-left: calc(-1 * var(--frame-bleed));
  margin-right: calc(-1 * var(--frame-bleed));
  padding-left: var(--frame-bleed);
  padding-right: var(--frame-bleed);
}
/* The "Over 20 years" line is pinned to the hero's edges, which are now the
   window's; move it back in line with the frame. */
.hero-bottom {
  left: calc(var(--gutter) + var(--frame-bleed));
  right: calc(var(--gutter) + var(--frame-bleed));
}

/* 8. Privacy page (not designed): the About page's text styling. */
.legal-draft {
  display: inline-block;
  margin: 40px 0 0;
  padding: 8px 14px;
  border: 1px solid #c7c8bf;
  font-size: 13px;
  color: #5d5d56;
}
.legal-copy {
  margin-top: 40px;
}
.legal-copy h2 {
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 40px 0 12px;
  color: var(--ink);
}
.legal-copy > div:first-child h2 {
  margin-top: 0;
}