/* ==========================================================================
   GOING COASTAL REFRESH CO. — SITE STYLES
   ==========================================================================
   This file controls the look of every page (colors, fonts, spacing,
   layout). It is plain CSS — no build tools required.

   TO CHANGE COLORS:
   Edit the values in the ":root" block directly below. Every color used
   anywhere on the site is controlled from these few lines.

   TO CHANGE FONTS OR SPACING:
   See the "TYPOGRAPHY" and "LAYOUT HELPERS" sections further down.
   ========================================================================== */

/* ==========================================================================
   SELF-HOSTED FONTS (assets/fonts/)

   Fraunces (headings) and Inter (body text), both under the SIL Open Font
   License (see assets/fonts/README.md). Served from this site instead of
   Google Fonts so visitors' browsers don't contact Google.

   The weight ranges below match the faces the site used when it loaded
   these from Google (Fraunces 600-700 + 600 italic, Inter 400-700), so the
   text renders exactly as before - e.g. body text asking for weight 300
   still gets 400. The "latin-ext" files only download if a page actually
   contains characters outside basic Latin (such as a Polish or Czech name
   typed into the form).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-ext-600-italic.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-600-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Main brand color (teal). Used for buttons, links, icons and borders. */
  --color-primary: #2a5d67;
  /* Darker shade of the brand color, used when hovering over buttons/links. */
  --color-primary-dark: #1e4750;

  /* Warm sand/coral accent colors pulled from the logo and site graphics.
     Used sparingly for small highlights, tags and dividers. */
  --color-accent-sand: #f4a261;
  --color-accent-coral: #e76f51;
  --color-accent-aqua: #a8dada;

  /* Page background color (warm off-white/cream). */
  --color-background: #f8f5f2;
  /* Slightly darker cream used for alternating section backgrounds and cards
     (matches the client's live site card color exactly). */
  --color-surface: #e4dfd9;
  /* Card/box borders and dividing lines. */
  --color-border: #c6c1ba;

  /* Main text color (dark navy, matches the logo wordmark). */
  --color-text: #1a2e35;
  /* Secondary/muted text color, used for smaller supporting copy. */
  --color-text-muted: #475a60;
  /* Text color used on top of the dark/primary color buttons. */
  --color-text-on-primary: #f8f5f2;

  /* Accessibility colors (WCAG 2.2 AA contrast against the cream page
     background): form error text (6.1:1), the guest-review stars (3.4:1,
     the minimum for graphics), and the outline of form fields (3.4:1). */
  --color-error: #a8341a;
  --color-star: #c46f22;
  --color-input-border: #8a847c;

  /* Fonts. The client's live site uses two licensed fonts ("Ogg" for
     headings, "Neue Haas Grotesk" for body text). Those aren't available
     as free web fonts, so this rebuild uses the closest free match for
     each: "Fraunces" (an elegant, warm serif similar to Ogg) for headings,
     and "Inter" (a clean, neutral sans-serif similar to Neue Haas
     Grotesk/Helvetica) for body text. Both are self-hosted - see the
     @font-face rules at the top of this file. */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Shared spacing / sizing helpers */
  --max-width: 1160px;
  --section-padding: 4.5rem 1.5rem;
  --radius: 6px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary);
}

/* Clearly visible keyboard focus on every interactive element. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

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

/* Text for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Skip to main content": a floating pill parked above the top of the page
   until it receives keyboard focus (the first Tab press), then it slides
   down over the header. It stays focusable while hidden. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  max-width: calc(100vw - 2rem);
  padding: 0.7em 1.25em 0.7em 1.4em;
  border-radius: 999px;
  background-color: var(--color-text);
  color: var(--color-text-on-primary);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(26, 46, 53, 0.28), 0 2px 6px rgba(26, 46, 53, 0.2);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 1rem));
  transition: transform 0.2s ease-out, opacity 0.15s ease-out;
}

/* Decorative down arrow (no text, so it isn't part of the link's name). */
.skip-link::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-color: var(--color-accent-aqua);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.skip-link:focus {
  opacity: 1;
  transform: translate(-50%, 0);
  /* Light ring just inside the dark pill: high contrast, never clipped. */
  outline: 2px solid var(--color-accent-aqua);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}
h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

p {
  margin: 0 0 1em;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 0.85rem;
  margin: 0 0 0.75em;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

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

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.85em 2em;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.button:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.button-outline {
  background-color: transparent;
  color: var(--color-primary);
}

.button-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

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

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  gap: 1rem;
}

.site-logo {
  display: flex;
  align-items: center;
}

/* Recommended source size: any width, ~84x84px+ (displays at 42px tall,
   double for retina screens). A wide logo works fine here too. */
.site-logo img {
  height: 42px;
  width: auto;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--color-text);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-text);
  border-radius: var(--radius);
  padding: 0.4em 0.7em;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
}

.hero .container {
  max-width: 820px;
}

.hero h1 {
  margin-bottom: 0.5em;
}

.hero-lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

/* Short factual disclosure lines (own properties, testimonial relationship,
   review source). Same muted color as other secondary text, which clears the
   4.5:1 contrast minimum on the page background. */
.page-note {
  max-width: 720px;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.hero-tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  font-size: 0.95rem;
}

/* Each word is its own span, and the "•" separator is glued to the front
   of the word that follows it (not the end of the word before it). That
   way, if this wraps onto a second line on a narrow screen, the bullet
   always travels down with "Reimagine" instead of being stranded at the
   end of the first line. */
.hero-tagline span + span::before {
  content: "\2022";
  display: inline-block;
  margin: 0 0.6em;
}

@media (max-width: 420px) {
  .hero-tagline {
    letter-spacing: 0.1em;
    font-size: 0.85rem;
  }

  .hero-tagline span + span::before {
    margin: 0 0.4em;
  }
}

/* The client's round logo badge, shown above the headline (matches how
   it appears at the top of the client's original homepage). Background
   outside the circle has been made transparent. Recommended source
   size: square, ~440x440px+ (displays at 220x220px). */
.hero-logo {
  height: 220px;
  width: 220px;
  margin: 0 auto 1.5rem;
  display: block;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

section {
  padding: var(--section-padding);
}

.section-alt {
  background-color: var(--color-surface);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: center;
}

.service-card h3 {
  margin-bottom: 0.5em;
}

/* Recommended source size: 4:3 ratio, e.g. 800x600px. A different
   shape gets cropped to fit - keep the main subject centered. */
.service-card img {
  border-radius: var(--radius);
  margin-bottom: 1rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ==========================================================================
   INTRO / MARKETING GRAPHIC BLOCK
   ========================================================================== */

.intro-graphic {
  text-align: center;
}

.intro-graphic img {
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  height: auto;
}

.intro-graphic .button {
  margin-top: 2rem;
}

/* ==========================================================================
   PORTFOLIO FLYERS

   Each project is now a single client-designed marketing flyer that
   already contains its own before/after photos, headline and captions,
   so it's shown as one full image (never cropped) inside its own
   bordered card, capped at a comfortable reading width - instead of
   stretching edge to edge, which would blow tall/portrait flyers up
   to an unreadable size on wide screens.
   ========================================================================== */

.flyer-groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.flyer-group {
  width: 100%;
  max-width: 760px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-background);
  padding: 1.5rem;
}

/* No fixed box - the image is never cropped, it displays at its own
   natural width/height (just scaled to fit the card). */
.flyer-group img {
  width: 100%;
  display: block;
}

/* No radius on individual images within a group — rounding every image's
   corners made a single project look like several separate stacked
   cards. The group's own border/radius is the only visual boundary. */
.flyer-group img + img {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
}

/* ==========================================================================
   ABOUT / STORY
   ========================================================================== */

.about-graphic {
  text-align: center;
}

.about-graphic img {
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  height: auto;
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */

.testimonial {
  text-align: center;
}

.testimonial .section-intro {
  margin-bottom: 2.5rem;
}

/* Normal/desktop screens: the client's original full graphic, shown
   exactly as designed (same as the site's other "designed graphic"
   sections like the intro pitch and storage-bed info block). */
.testimonial-original img {
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  max-width: min(900px, 100%);
  height: auto;
}

/* Mobile-only cropped-photo + real-text version (hidden on normal
   screens; shown by the max-width: 720px override below). */
.testimonial-layout {
  display: none;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
}

/* Recommended source size: portrait, 4:5 ratio, e.g. 800x1000px.
   Cropped from the top down, so keep faces/subjects near the top. */
.testimonial-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.testimonial-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.15em;
}

.testimonial-title {
  letter-spacing: 0.04em;
  margin-bottom: 1.25em;
}

.testimonial-content blockquote {
  position: relative;
  margin: 1.25em 0;
  padding: 0.9em 1.25em 0.9em 3rem;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-background);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 700;
  color: var(--color-text);
}

.testimonial-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.1em;
  left: 0.7rem;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.5;
}

.testimonial-closing {
  margin-top: 1.5em;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
}

@media (max-width: 720px) {
  /* Below this width, hide the full designed graphic (its text becomes
     unreadable at phone width) and switch to the cropped photo + real
     text version instead, so nothing overflows the screen. */
  .testimonial-original {
    display: none;
  }

  .testimonial-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .testimonial-photo img {
    aspect-ratio: 4 / 5;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   GUEST REVIEWS
   ========================================================================== */

/* Normal/desktop screens: the client's combined reviews graphic, full
   width and uncropped. */
/* No fixed box - displays at natural size up to 700px wide. Recommended
   source size: roughly 1250x2000px (a tall, narrow stack of cards). */
.reviews-figure {
  max-width: 700px;
  margin: 0 auto;
}

/* Caption under the graphic: states what the reviews are, in plain readable
   text (not part of the image), same width as the graphic. */
.reviews-caption {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-muted);
}

.reviews-image {
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* Mobile-only reviews cards (hidden on normal screens below). The
   combined graphic's text becomes unreadably small - and was
   overflowing the screen - at phone widths, so mobile gets the same
   reviews as real, legible text instead. */
/* On wide screens the graphic is what people see, but its text is baked into
   the picture. The same reviews stay in the page as real text, hidden only
   visually (not display:none) so screen readers can read them. */
.reviews-cards {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.review-card {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}

.review-stars {
  color: var(--color-star);
  letter-spacing: 0.15em;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.review-quote {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.review-author {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .reviews-figure {
    display: none;
  }

  .reviews-cards {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
}

@media (max-width: 820px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-details a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}

.contact-details a:hover {
  color: var(--color-primary);
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

.contact-form label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4em;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background-color: var(--color-background);
  color: var(--color-text);
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

.form-required-note,
.form-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-hint {
  margin-top: 0.35em;
}

/* Honeypot spam trap (see index.html): off-screen rather than display:none
   so simple bots still see and fill it. It is also aria-hidden and has
   tabindex=-1, so keyboard and screen-reader users never reach it. */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.form-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-status {
  font-weight: 700;
  margin: 0;
}

/* While empty, hide the message visually but keep it rendered: screen
   readers only announce changes to a live region that already exists in
   the accessibility tree, which display:none would prevent. Taking it out
   of the layout (absolute) also avoids an extra grid gap. */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-status-success {
  color: var(--color-primary);
}

.form-status-error {
  color: var(--color-error);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.text-center {
  text-align: center;
}

.site-footer {
  background-color: var(--color-text);
  color: var(--color-background);
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}

/* The full logo.webp wordmark doesn't work here: its dark navy text and
   dark teal wave nearly disappear against this dark background, and
   forcing it white with a filter turns the wave's separate color bands
   into one flat white blob (they're all opaque, so brightness(0) can't
   tell them apart). Instead, the footer uses just the wave icon (already
   in color, on a transparent background) next to real text set in a
   light color. */
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

/* Recommended source size: square, ~80x80px+ (displays at 40x40px). */
.footer-brand img {
  height: 40px;
  width: 40px;
}

.footer-brand span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-background);
}

.site-footer a {
  color: var(--color-background);
}

.site-footer .footer-locations {
  margin-top: 0.5rem;
  color: var(--color-accent-aqua);
}

.site-footer .footer-copyright {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-border);
}

/* ==========================================================================
   RESPONSIVE NAV (MOBILE)
   ========================================================================== */

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-block;
  }

  .main-nav {
    display: none;
    width: 100%;
  }

  .main-nav.is-open {
    display: block;
  }

  .site-header .container {
    flex-wrap: wrap;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
  }

  .main-nav li {
    padding: 0.6rem 0;
  }
}

/* ==========================================================================
   SCROLL-REVEAL ANIMATION

   Recreates the soft fade-in (and, on some headings, a blur-to-sharp
   effect) the client's original Wix site used as sections load or come
   into view. js/main.js adds "reveal-init" to the elements below, then
   adds "reveal-visible" once they're on screen (or, for the hero, a
   moment after the page loads) to trigger the transition.

   Nothing here hides content on its own — only JavaScript adds these
   classes, so if a visitor has JavaScript off, everything simply shows
   up normally with no animation.
   ========================================================================== */

.reveal-init {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95),
    filter 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.reveal-init.reveal-blur {
  filter: blur(8px);
}

.reveal-init.reveal-visible {
  opacity: 1;
  filter: blur(0);
}

.reveal-init.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-init.reveal-delay-2 {
  transition-delay: 0.18s;
}

.reveal-init.reveal-delay-3 {
  transition-delay: 0.28s;
}

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

  .reveal-init {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}