/* 🎨 1. FONTS & RESET */
/* FIX: Using relative paths makes this file portable */
@font-face {
  font-family: 'Boston';
  src: url('../fonts/Boston-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boston';
  src: url('../fonts/Boston-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boston';
  src: url('../fonts/Boston-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

html {
  /* 1. DARK CHROME: Keeps iOS address bar dark */
  background-color: rgba(0, 0, 0, 1);
  overscroll-behavior-y: none;
  overflow-y: scroll;
}

/* 3. DESKTOP STABILITY: Gutter is added ONLY for larger screens */
@media (min-width: 1024px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* 🎛️ 2. VARIABLES */
:root {
  /* Spacing */
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-xxl: 5rem;

  /* Typography */
  --font-xs:   0.875rem;
  --font-s:    1.35rem;
  --font-m:    1.5rem;
  --font-l:    2rem;
  --font-xl:   2.6rem;
  --font-xxl:  4.5rem;

  /* Colors */
  --color-bg-start:    rgba(2, 0, 36, 1);
  --color-bg-mid:      rgba(0, 0, 0, 1);
  --color-bg-end:      rgba(0, 92, 146, 1);
  --color-brand-dark:  rgba(1, 93, 147, 1);
  --color-brand-mid:   rgba(84, 130, 177, 1);
  --color-text-main:   rgba(255, 255, 255, 1);
  --color-text-muted:  rgba(210, 219, 230, 1);

  /* Glass Surfaces (Default: Frosted White) */
  --glass-bg:          rgba(255, 255, 255, 0.25);
  --glass-bg-hover:    rgba(255, 255, 255, 0.45);
  --glass-border:      rgba(255, 255, 255, 0.30);
  --glass-blur:        18px;

  /* Config */
  --max-width:         1400px;
  --navbar-height:     4rem;
  --transition-speed:  0.3s;
}

/* 🌗 HIGH CONTRAST MODE (User Preference) */
/* Overrides variables only if user requests increased contrast */
@media (prefers-contrast: more) {
  :root {
    /* Switch Glass to Dark/Opaque to maximize White Text contrast */
    --glass-bg:          rgba(0, 0, 0, 0.75);
    --glass-bg-hover:    rgba(0, 0, 0, 0.95);

    /* Increase border visibility */
    --glass-border:      rgba(255, 255, 255, 0.6);

    /* Force high-contrast focus ring (White) */
    --color-brand-mid:   rgba(255, 255, 255, 1);
  }
}

/* 🗃️ 3. BASE STYLES */

body {
  background: linear-gradient(148deg, var(--color-bg-start) 0%, var(--color-bg-mid) 35%, var(--color-bg-end) 100%);
  font-family: 'Boston', system-ui, sans-serif;
  color: var(--color-text-main);
  line-height: 1.6;
  font-weight: 300;
  width: 100%;
  padding-top: var(--navbar-height);
  overflow-x: hidden;
  opacity: 0;
  transition: opacity var(--transition-speed) ease-out;
}

body.transition-loaded { opacity: 1; }
body.transitioning-out { opacity: 0; }

html.menu-open,
body.menu-open,
body.no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* SARPA FIX: Only hover on devices with a mouse */
@media (hover: hover) {
  a:hover { opacity: 0.8; }
}

/* ♿ ACCESSIBILITY: Skip Link
   Hidden by default, slides down on focus.
   High contrast: White text on Dark Brand Blue.
*/
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand-dark);
  color: rgba(255, 255, 255, 1);
  padding: 1rem 2rem;
  z-index: 10001; /* Must be higher than Navbar */
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid rgba(255, 255, 255, 1); /* White focus ring */
  outline-offset: -4px;
}

/* SARPA FIX: Keyboard Accessibility */
:focus-visible {
  outline: 2px solid var(--color-brand-mid);
  outline-offset: 2px;
}

/* 📐 4. THE GRID SYSTEM */
.site-grid {
  display: grid;
  width: 100%;
  max-width: 100vw;
  min-height: calc(100vh - var(--navbar-height));

  grid-template-columns: 1fr;
  grid-template-rows:
  0.5fr         /* spacer-top */
  min-content   /* logo */
  min-content   /* headline */
  min-content   /* services */
  min-content   /* intro */
  1fr           /* spacer-bottom */
  min-content;  /* footer */
  grid-template-areas:
  "spacer-top"
  "logo"
  "headline"
  "services"
  "intro"
  "spacer-bottom"
  "footer";
  justify-items: center;
  row-gap: 2.5rem;
}

/* 🧩 5. GRID AREAS & CHILDREN */
.area-spacer-top    { grid-area: spacer-top; }
.area-spacer-bottom { grid-area: spacer-bottom; }

.site-grid > *:not([class*="spacer"]):not(.area-content-wrapper) {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- AREA: Logo --- */
.area-logo {
  grid-area: logo;
  opacity: 0;
  transform: translateY(120px);
}
.area-logo svg {
  width: 100%;
  max-width: 765px;
  height: auto;
  display: block;
}

/* --- AREA: Headline --- */
.area-headline {
  grid-area: headline;
  opacity: 0;
  transform: translateY(24px);
  min-width: 0;
  max-width: 100%;
}

.area-headline h1 {
  font-weight: 600;
  font-size: var(--font-xl);
  text-align: center;
  line-height: 1.1;
  color: var(--color-text-main);
  white-space: normal;
}

/* --- AREA: Portrait --- */
.area-portrait {
  grid-area: portrait;
  opacity: 0;
  transform: translateY(24px);
  width: 100%;
  max-width: 682px !important;
  margin: 0 auto;
}

.area-portrait picture {
  display: block;
  width: 100%;
}

.area-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

/* --- AREA: Services --- */
.area-services {
  grid-area: services;
  opacity: 0;
  transform: translateY(24px);
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
}

.service-box {
  width: 100%;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 48px;
  padding: 26px;
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  word-wrap: break-word;
  box-shadow: 0 18px 38px rgba(0,0,0,0.4);
  transition: transform var(--transition-speed) ease, background var(--transition-speed) ease;
  color: var(--color-text-main);
}

/* SARPA FIX: Only hover on mouse */
@media (hover: hover) {
  .service-box:hover {
    transform: translateY(-4px);
    background: var(--glass-bg-hover);
    color: var(--color-text-main) !important;
    opacity: 1 !important;
  }
}

.service-box-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
}

/* --- AREA: Intro & Contact Text --- */
.area-intro {
  grid-area: intro;
  opacity: 0;
  transform: translateY(24px);
  width: 100%;
  margin-top: -0.8rem;
}

.intro-text {
  font-size: var(--font-m);
  font-weight: 300;
  text-align: center;
  margin-inline: auto;
  max-width: 65ch;
  width: 90%;
  color: var(--color-text-main);
  margin-top: 1rem;
  line-height: 1.4;
}

.contact-page-text {
  font-size: var(--font-m);
  font-weight: 300;
  text-align: left;
  margin-inline: auto;
  max-width: 700px;
  width: 90%;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-top: 0.5rem;
}

.contact-page-text:first-of-type {
  margin-top: 1rem;
}

/* Contact Info Block */
.contact-info {
  text-align: center;
  margin-inline: auto;
  max-width: 700px;
  width: 90%;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Shared contact field styles */
.contact-name,
.contact-title,
.contact-company,
.contact-phone,
.contact-email {
  font-size: var(--font-m);
  font-weight: 400;
  color: var(--color-text-main);
  margin: 0 0 0.25rem 0;
}

.contact-name {
  font-size: 1.75rem;
  font-weight: 600;
}

.contact-company {
  margin-bottom: 1rem;
}

.contact-email {
  margin-bottom: 0;
}

.contact-phone a,
.contact-email a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .contact-phone a:hover,
  .contact-email a:hover {
    color: var(--color-brand-mid);
  }
}

/* Services Page Layout & Typography */

/* 1. Global Width Constraint for this page */
body.page-services .intro-text,
body.page-services .service-details {
  width: 100%;
  max-width: 700px;      /* Hard pixel cap */
  margin-inline: auto;
  text-align: left;
}

/* 2. Intro Text: Boston Regular */
body.page-services .intro-text {
  font-family: 'Boston', system-ui, sans-serif;
  font-weight: 400;      /* Regular */
  font-size: 1.45rem;    /* Slightly larger */
  line-height: 1.4;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.45rem;
  margin-bottom: 1rem;   /* Space before image */
  max-width: min(85ch, 700px);
}

body.page-services .area-image {
  width: 100%;
  max-width: min(85ch, 700px);
  margin-bottom: 4rem;
}

body.page-services .area-image picture,
body.page-services .area-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Service Image Break (midpage visual divider) */
.service-image-break {
  width: min(60%, 100vw);
  max-width: 400px;
  margin: 0 auto 3rem;
  overflow: hidden;
  border-radius: 24px;
}

.service-image-reveal {
  clip-path: inset(0 50%);
  filter: blur(12px);
}

.service-image-reveal picture,
.service-image-reveal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .service-image-break {
    height: auto !important;
    overflow: visible !important;
  }
  .service-image-reveal {
    clip-path: inset(0 0%) !important;
  }
}

/* 3. Headings: Boston Semibold */
body.page-services .service-details h2,
body.page-services .service-details h3 {
  font-family: 'Boston', system-ui, sans-serif;
  font-weight: 600;      /* Semibold */
  color: var(--color-text-main);
  max-width: min(85ch, 900px);
}

body.page-services .service-details h2 {
  font-size: var(--font-l);
  margin-bottom: 1.25rem;
  line-height: 1.1;
  /* Distinct separation between sections */
  margin-top: 5rem;
}

body.page-services .service-details h2:first-of-type {
  margin-top: 0;
}

body.page-services .service-details h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 4. "Everything Else": Boston Light */
body.page-services .service-details p {
  font-family: 'Boston', system-ui, sans-serif;
  font-weight: 300;      /* Light */
  font-size: 1.2rem;
  line-height: 1.4;      /* Tighter leading for paragraphs */
  color: rgba(255, 255, 255, 0.9);
  max-width: min(85ch, 700px);
  margin-bottom: 1.5rem;
}

body.page-services .service-details ul,
body.page-services .service-details li {
  font-family: 'Boston', system-ui, sans-serif;
  font-weight: 300;      /* Light */
  font-size: 1.2rem;
  line-height: 1.6;      /* Original leading for lists */
  color: rgba(255, 255, 255, 0.9);
  max-width: min(85ch, 700px);
}

body.page-services .service-details ul {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

body.page-services .service-details li {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

/* 5. Footer Bump */
body.page-services .footer-copyright {
  font-size: 1.15rem;
}

/* --- AREA: Footer --- */
.cell-footer {
  grid-area: footer;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
}

.footer-copyright {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* 🧭 6. NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: rgba(0, 92, 146, 0.5);
  backdrop-filter: blur(24px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-container {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-m);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 0.5rem;
}

.nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: var(--font-s);
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-tap-highlight-color: transparent;
  color: var(--color-text-main) !important;
  text-decoration: none;
  transition: background 0.2s ease, opacity 0.2s ease;
  border-radius: 8px;
}

/* SARPA FIX: Only hover on mouse */
@media (hover: hover) {
  .nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
  }
}

.nav-link.active {
  font-weight: 400;
}


/* --- MOBILE TOGGLE --- */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-main);
  cursor: pointer;
  z-index: 1010;
  position: relative;
  width: 32px;
  height: 32px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
  border-radius: 4px;
}

.menu-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  stroke: var(--color-text-main) !important;
}

.menu-toggle .icon-menu {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.menu-toggle .icon-close {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.menu-toggle.active .icon-menu {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.menu-toggle.active .icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 📱 7. MOBILE MENU OVERLAY */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(1, 93, 147, 0.9);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-speed);
}

.mobile-menu-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
}

.mobile-nav-link {
  font-size: var(--font-l);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-text-main) !important;
  padding: 0.5rem 0;
  transition: transform var(--transition-speed) ease;
}

@media (hover: hover) {
  .mobile-nav-link:hover {
    transform: scale(1.05);
  }
}

.mobile-nav-link.active {
    font-weight: 400;
}

.mobile-nav-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 📝 8. CONTACT FORM STYLES INTEGRATED */
.contact-form-container {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-m);
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-heading {
  font-size: var(--font-l);
  font-weight: 600;
  margin-bottom: var(--space-l);
  color: var(--color-text-main);
}

#contact-form {
  width: 100%;
  max-width: 700px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 48px;
  padding: 1.625rem 1.75rem 2rem;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}

#contact-form .form-group {
  position: relative;
  margin-bottom: var(--space-s);
  width: 100%;
}

#contact-form label {
  display: block;
  font-size: var(--font-s);
  margin-bottom: 0.25rem;
  color: var(--color-text-main);
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-family: 'Boston', system-ui, sans-serif;
  font-size: var(--font-s);
  font-weight: 300;
  color: var(--color-text-main);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  outline: none;
  transition: all var(--transition-speed) ease;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

#contact-form textarea {
  display: block;
  resize: vertical;
  min-height: 180px;
  margin: 0;
}

/* Error States */
#contact-form input.error,
#contact-form textarea.error {
  border-color: rgba(255, 100, 100, 0.8);
  background: rgba(255, 100, 100, 0.1);
}

#contact-form .error-message {
  display: block;
  color: rgba(255, 150, 150, 1);
  font-size: var(--font-xs);
  font-weight: 400;
  margin-top: 0.125rem;
  min-height: 1.25rem;
  text-align: left;
}

/* Submit Button */
#contact-form .btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 1.25rem;
  margin-top: 1rem;
  font-family: 'Boston', system-ui, sans-serif;
  font-size: var(--font-m);
  font-weight: 400;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

@media (hover: hover) {
  #contact-form .btn-submit:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
  }
}

#contact-form .btn-submit:active:not(:disabled) {
  transform: translateY(0);
}

#contact-form .btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 📦 9. STATUS MODAL */
.status-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  margin: 0;
  padding: 0;
}

.status-modal.active {
  display: flex;
}

.status-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.status-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
}

.status-row-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.status-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  line-height: 1;
}

.status-message {
  flex: 1;
  font-size: var(--font-m);
  font-weight: 400;
  color: var(--color-text-main);
  line-height: 1.4;
}

.status-row-bottom {
  display: flex;
  justify-content: center;
}

.status-close-btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 48px;
  padding: 0.875rem 2.5rem;
  font-family: 'Boston', system-ui, sans-serif;
  font-size: var(--font-s);
  font-weight: 400;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  min-width: 120px;
}

@media (hover: hover) {
  .status-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }
}

.status-close-btn:active {
  transform: translateY(0);
}

.gsap-spinner {
  display: none;
}

/* 📄 10. ANIMATION STATE */
.is-revealed {
  opacity: 1;
  transform: translateY(0) !important;
}

.split-parent {
  overflow: hidden;
}

/* 🔝 11. BACK TO TOP BUTTON */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--color-text-main);
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, transform var(--transition-speed) ease, background 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) {
  .back-to-top:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
  }
}

.back-to-top:active {
  transform: translateY(0);
}

/* Fade out is 2x slower */
.back-to-top:not(.visible) {
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

/* 📄 12. PAGE-SPECIFIC OVERRIDES */

/* Left-align text on Services, About, Contact pages */
body.page-services .area-headline h1,
body.page-about .area-headline h1,
body.page-contact .area-headline h1 {
  text-align: left;
}

body.page-services .area-headline h1 {
  margin-bottom: 0;
}

body.page-services .intro-text,
body.page-contact .intro-text {
  text-align: left;
}

/* Services page: Convert grid to flex */
body.page-services .site-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-template-areas: none;
  grid-template-rows: none;
}

body.page-services .cell-footer {
  margin-top: auto;
}

/* About page: Keep as grid */
body.page-about .site-grid {
  grid-template-columns: 1fr;
  grid-template-rows:
  0.5fr
  min-content
  min-content
  1fr
  min-content;
  grid-template-areas:
  "spacer-top"
  "headline"
  "content"
  "spacer-bottom"
  "footer";
}

body.page-about .area-content-wrapper {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-m);

  /* CENTER everything vertically for single column */
  align-items: center;
  justify-self: center;
}

/* DEFAULT (SINGLE COLUMN) STATE FOR ABOUT PAGE IMAGE */
body.page-about .area-portrait {
  width: 100%;
  max-width: 520px !important; /* Smaller size for single column layout */
  margin: 0 auto;
  opacity: 1;
  transform: none;
}

body.page-about .area-intro {
  flex: 1 1 auto;
  width: 100%;
  max-width: 520px; /* MATCHES IMAGE WIDTH for single column */
  opacity: 1;
  transform: none;
  margin-top: 0; /* Reset homepage grid overlap; About page uses its own flex layout */
  padding-bottom: var(--space-l);
}

body.page-about .cell-footer {
  margin-top: 0;
}

/* About page specific text styles */
body.page-about .about-bio-text {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 300;
  text-align: left;
  margin-inline: auto;
  max-width: 65ch;
  color: var(--color-text-main);
}

body.page-about .about-bio-text + .about-bio-text {
  margin-top: 1rem;
}

/* OPTICAL ALIGNMENT FIX */
/* Aligns cap-height of text with top of image — side-by-side layout only */

/* Service Details - Services page only */
body.page-services .service-details {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-m);
  margin-bottom: var(--space-m);
}

body.page-services .service-details h2 {
  font-size: var(--font-l);
  font-weight: 600;
  margin-bottom: var(--space-m);
  color: var(--color-text-main);
}

body.page-services .service-details h3 {
  font-size: var(--font-m);
  font-weight: 600;
  margin-top: var(--space-l); /* 2rem — explicit win over p margin-bottom (1.5rem) for consistent spacing */
  margin-bottom: var(--space-s);
  color: var(--color-text-main);
}

#board-governance h3 {
  margin-top: var(--space-s); /* Shorter paragraphs above — reduce gap to match visual rhythm */
}

#board-governance {
  margin-bottom: 0; /* Remove redundant gap before CTA — ul margin-bottom provides sufficient spacing */
}

body.page-services .service-details p {
  font-size: var(--font-s);
  line-height: 1.6;
  margin-bottom: var(--space-m);
  color: var(--color-text-main);
}

body.page-services .service-details ul {
  font-size: var(--font-s);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: var(--space-m);
  color: var(--color-text-main);
}

body.page-services .service-details li {
  margin-bottom: 0.5rem;
}

/* CTA Section - Services page only */
body.page-services .cta {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--space-l);
  text-align: left;
  margin-top: 1rem;
  margin-bottom: var(--space-xl);
}

body.page-services .cta h2 {
  font-size: var(--font-l);
  font-weight: 600;
  margin-bottom: var(--space-m);
  color: var(--color-text-main);
}

body.page-services .cta-text {
  font-size: var(--font-m);
  font-weight: 300;
  text-align: left;
  margin: 0 0 var(--space-l) 0;
  max-width: 40ch;
  color: var(--color-text-main);
}

body.page-services .cta-button {
  display: inline-block;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 48px;
  margin-top: 0.5rem;
  padding: 1rem 2rem;
  font-size: var(--font-m);
  font-weight: 400;
  color: var(--color-text-main);
  text-decoration: none;
  transition: transform var(--transition-speed) ease, background var(--transition-speed) ease;
}

@media (hover: hover) {
  body.page-services .cta-button:hover {
    transform: translateY(-2px);
    background: var(--glass-bg-hover);
  }
}

/* 🏁 13. MEDIA QUERIES (Consolidated) */

/* Large Desktop */
@media (min-width: 1400px) {

  .area-headline h1 {
  white-space: nowrap;
  }

  /* 1. Contact Page Large Desktop Specifics */
  body.page-contact .area-headline h1 {
    margin-top: 0;
    white-space: nowrap;
  }

  /* 2. Target paragraphs individually */
  body.page-contact .contact-page-text:nth-of-type(1) {
    font-size: 1.35rem;
    line-height: 1.4;
    max-width: 750px;
    margin-inline: auto;
    margin-top: -10px;
  }

  body.page-contact .contact-page-text:nth-of-type(2) {
    font-size: 1.35rem;
    line-height: 1.4;
    max-width: 750px;
    margin-inline: auto;
    margin-top: 1.5rem;
  }

  /* 3. Contact Info Spacing */
  body.page-contact .contact-info {
    margin-top: 2rem;
    margin-bottom: -15px;
  }

  .contact-name {
     font-size: 1.65rem;
     margin-bottom: 5px;
   }

   .contact-title {
     font-size: 1.25rem;
     margin-bottom: -7px;
   }

   .contact-company {
      font-size: 1.35rem;
      margin-bottom: 25px;
    }

   .contact-phone {
      font-size: 1.35rem;
      margin-bottom: 15px;
    }

   .contact-email {
     font-size: 1.35rem;
     line-height: 2.25;
   }

  /* 4. Footer Text Size */
  body.page-contact .footer-copyright {
    font-size: 1.05rem;
  }
}

/* Laptop */
@media (max-width: 1280px) {
  .area-logo svg {
  padding-inline: var(--space-l);
  }
}

/* Desktop Logic for About Page - REVISED */
/* Updated to 1180px to include iPad Pro landscape */
@media (min-width: 1180px) {
  body.page-about .area-content-wrapper {
    flex-direction: row;
    gap: 1rem;
    padding-inline: var(--space-xl); /* Breathing room from viewport edges at smaller desktop sizes */

    /* CRITICAL: Reset alignment to Top-Left for side-by-side */
    align-items: flex-start;
    justify-content: center;
  }

  body.page-about .area-portrait {
    flex: 0 0 auto; /* Don't grow or shrink, use natural width */
    max-width: min(44vw, 682px) !important; /* Scale with viewport; full size on wide screens */
    padding-left: var(--space-xl); /* Nudge image right to balance left gap */
    margin-bottom: 0;
  }

  body.page-about .area-intro {
    flex: 1 1 auto;
    max-width: 57ch;
    padding-left: var(--space-m); /* Restore visual gap lost when width: 90% was removed */
    padding-bottom: 0;
  }

  body.page-about .about-bio-text:first-of-type {
    margin-top: -0.35rem;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1399px) {
  .area-logo svg {
    max-width: 650px;
  }

  .area-headline h1 {
    font-size: 2.2rem;
  }

  .service-box-text {
    font-size: 1.3rem;
  }

  .service-box {
    padding: 22px;
    min-height: 96px;
  }

  .site-grid {
    row-gap: 2rem;
  }

  .area-intro {
    margin-top: -0.5rem;
  }

  .intro-text {
    line-height: 1.4;
  }

  .area-services {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
  }

  /* About Page: iPad portrait typesetting */
  body.page-about .area-portrait {
    max-width: 420px !important;
  }

  body.page-about .area-intro {
    max-width: 600px;
  }

  body.page-about .about-bio-text {
    line-height: 1.6;
  }

  body.page-about .about-bio-text + .about-bio-text {
    margin-top: 1.1rem;
  }
}

/* iPad/tablet landscape - 4 columns */
@media (min-width: 769px) and (max-width: 1399px) and (orientation: landscape) {
  .area-services {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* About Page: iPad/Tablet landscape — stops at 1179px so desktop rule takes over cleanly */
@media (min-width: 769px) and (max-width: 1179px) and (orientation: landscape) {
  body.page-about .area-content-wrapper {
    gap: 1rem;
  }

  body.page-about .area-portrait {
    max-width: min(75vh, 500px) !important;
  }

  body.page-about .area-intro {
    max-width: 55ch;
  }
}

/* About Page: Match portrait headshot size on iPad landscape (covers Pro 11" and Pro 12.9") */
@media (min-width: 1180px) and (max-width: 1366px) and (orientation: landscape) {
  body.page-about .area-portrait {
    max-width: 420px !important;
  }
}

 /* Contact Page: iPad & Tablet Refinements */

 /* 1. Layout: Pull content up (Grid Fix) */
 body.page-contact .site-grid {
   grid-template-areas:
     "spacer-top"
     "headline"
     "intro"
     "spacer-bottom"
     "footer";
   grid-template-rows: 0fr min-content min-content 1fr min-content;
   row-gap: 3rem;
 }

 /* 2. Headline & Text Flow (Matching Desktop Optical Alignments) */
 body.page-contact .area-headline h1 {
   margin-top: -10px;
   white-space: nowrap; /* Keeps "Happy to Connect" on one line if possible */
 }

 body.page-contact .contact-page-text:nth-of-type(1) {
   font-size: 1.25rem;
   line-height: 1.4;
   max-width: 680px;
   margin-inline: auto;
   margin-top: -10px; /* Your optical adjustment */
 }

 body.page-contact .contact-page-text:nth-of-type(2) {
   font-size: 1.25rem;
   line-height: 1.4;
   max-width: 680px;
   margin-inline: auto;
   margin-top: 1.5rem;
 }

 .contact-name {
   font-size: 1.6rem;
   margin-bottom: 5px;
 }

 .contact-title {
   font-size: 1.2rem;
   margin-bottom: -7px; /* Tightens title to company */
 }

 .contact-company {
   font-size: 1.3rem;
   margin-bottom: 25px;
 }

 .contact-phone {
   font-size: 1.3rem;
   margin-bottom: 15px;
 }

 .contact-email {
   font-size: 1.3rem;
   line-height: 2.25;
   margin-bottom: -25px;
 }

 /* 4. Footer */
 body.page-contact .footer-copyright {
   font-size: 1.15rem;
 }
}

/* Mobile (All Mobile Rules Combined) */
@media (max-width: 768px) {
  /* Navbar */
  .navbar-container {
  justify-content: center;
  }

  .nav-links {
  display: none;
  }

  .menu-toggle {
  display: flex;
  position: fixed;
  top: calc(var(--navbar-height) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  }

  /* Services Grid */
  .area-services {
  grid-template-columns: 1fr;
  }

  /* About Page: Smaller portrait for mobile */
  body.page-about .site-grid {
    row-gap: var(--space-s);
  }

  body.page-about .area-portrait {
    max-width: min(70vw, 320px) !important;
    margin-top: 0;
    margin-bottom: var(--space-s);
  }

  body.page-about .area-intro {
    max-width: min(85vw, 360px);
    padding-bottom: 1.25rem !important;
  }

  body.page-about .area-content-wrapper {
    gap: var(--space-s);
  }

  body.page-about .about-bio-text {
    width: 100%;        /* Remove the desktop 10% inset on narrow columns */
    font-size: 1.125rem; /* 18pt on iPhone */
    line-height: 1.7;   /* Proportionally scaled for 18pt on narrow columns */
  }

  body.page-about .about-bio-text + .about-bio-text {
    margin-top: 1rem;   /* Slightly tighter paragraph spacing on small screens */
  }

  /* Contact Form */
 /* 1. Tighten the outer container and form wrapper */
   .contact-form-container {
   margin-top: 1rem;
   padding: 0 1rem;
   }

   #contact-form {
   padding: 1.25rem; /* Reduced from ~1.75rem */
   }

   /* 2. Shrink the input fields */
   #contact-form input[type="text"],
   #contact-form input[type="email"],
   #contact-form textarea {
   padding: 0.6rem 0.8rem; /* Reduced from 0.875rem 1.25rem */
   font-size: 1rem;        /* Keeps text readable without zoom */
   }

   /* 3. Reduce the textarea height */
   #contact-form textarea {
   min-height: 120px; /* Reduced from 180px */
   }

   /* 4. Slim down the submit button */
   #contact-form .btn-submit {
   padding: 0.8rem;   /* Reduced from 1.25rem */
   margin-top: 0.75rem;
   }
 }

/* About Page: Two-column layout for phone/tablet landscape */
@media (max-width: 1179px) and (orientation: landscape) {
  body.page-about .area-content-wrapper {
    flex-direction: row;
    gap: var(--space-s);
    align-items: flex-start;
    justify-content: center;
  }

  body.page-about .area-portrait {
    flex: 0 0 auto;
    max-width: min(62vh, 400px) !important;
    margin-bottom: 0;
  }

  body.page-about .area-intro {
    flex: 1 1 auto;
    max-width: 38ch;
  }
}

/* Small Mobile (14.5pt Labels + 1.5rem Button Spacing) */
 @media (max-width: 640px) and (orientation: portrait) {

   /* Homepage typography - reduce by 1pt */
   .area-headline h1 {
     font-size: 1.875rem;
     margin-bottom: 0.5rem;
     line-height: 1.1;
   }

   .service-box-text {
     font-size: 1.2rem;
   }

   .service-box {
     padding: 18px 30px;
     min-height: 80px;
     border-radius: 36px;
     margin: 0 auto;
     max-width: 340px;
   }

   .service-box-text {
     max-width: 24ch !important;
   }

   .area-services {
     gap: 0.75rem;
   }

   .intro-text {
     text-align: left;
     font-size: 1.35rem;
   }

   /* Contact Page Grid & Spacing Fixes */
   body.page-contact .site-grid {
     grid-template-rows: 0fr min-content min-content 1fr min-content;
     grid-template-areas:
       "spacer-top"
       "headline"
       "intro"
       "spacer-bottom"
       "footer";
     row-gap: 0;
   }

   body.page-contact .area-headline h1 {
     margin: 2.25rem 0 !important;
   }

   body.page-contact .contact-page-text:first-of-type {
     margin-top: 0;
   }

   /* General Mobile Typography & Spacing */
   .contact-page-text {
     font-size: 1.1rem;       /* Reduced to fit "strengthen" on line 1 */
     line-height: 1.4;
     margin-top: 1rem;
     width: 90%;              /* Ensures block is centered */
     max-width: 380px;        /* Limits width to keep text strictly above name */
     margin-inline: auto;     /* Centers the block */
     text-align: left;        /* Keeps text alignment */
   }

   .contact-info {
     margin-top: 0.85rem;
     margin-bottom: 0.75rem;
   }

   .contact-name {
     font-size: 1.65rem;
     margin-bottom: 2px;
   }

   .contact-title {
     font-size: 1.25rem;
     margin-bottom: -5px;
   }

   .contact-company {
      font-size: 1.35rem;
    }

   .contact-phone {
      font-size: 1.45rem;
      padding: 1rem 0;
    }

   .contact-email {
     font-size: 1.35rem;
     line-height: 2.25;
   }

   /* Form Specifics */
   .contact-form-container {
     margin-top: 1rem;
     padding-inline: 1rem;
   }

   #contact-form {
     padding: 1.25rem;
     border-radius: 20px;
   }

   #contact-form .error-message {
     min-height: 0 !important;
     margin-top: 0;
   }

   #contact-form .form-group {
     margin-bottom: 0.85rem !important;
   }

   #contact-form label {
     font-size: 1.15rem !important;
     margin-bottom: 0.35rem !important;
     margin-left: 0.2rem;
     line-height: 1.1;
   }

   #contact-form input[type="text"],
   #contact-form input[type="email"],
   #contact-form textarea {
     font-size: 1.1rem !important;
     padding: 0.6rem 0.75rem;
     line-height: 1.3;
     border-radius: 8px;
   }

   #contact-form textarea {
     min-height: 200px;
   }

   #contact-form .btn-submit {
     margin-top: 1.5rem;
     padding: 0.75rem;
     font-size: 1.35rem;
     border-radius: 12px;
   }

   /* Footer: Add space so copyright isn't covered by Back-to-Top button */
   .footer-copyright {
     padding-top: 1.1rem;
     padding-bottom: 3.85rem !important;
   }
 }

/* 📱 MOBILE LANDSCAPE FIX */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. LAYOUT: Remove spacer row, standard gaps */
  .site-grid {
    grid-template-columns: 1fr;
    grid-template-rows:
      min-content   /* Logo */
      min-content   /* Headline */
      min-content   /* Services */
      min-content   /* Intro */
      1fr           /* Spacer bottom */
      min-content;  /* Footer */

    row-gap: 1.5rem;

    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* 2. LOGO: 42vh height + Animation Safety + Top spacing for navbar */
  .area-logo {
    padding-top: calc(var(--navbar-height) + 1rem);
    overflow: visible;
  }

  .area-logo svg {
    height: 42vh;
    width: auto;
    display: block;
    margin: 0 auto;
  }

  /* 3. TEXT: Use YOUR variables */
  .area-headline h1 {
    font-size: var(--font-l);   /* 2rem - Readable, but smaller than XL */
    line-height: 1.2;
    padding-inline: 1rem;
    max-width: 700px;
  }

  .intro-text {
    font-size: var(--font-s);   /* 1.35rem - Consistent body size */
    max-width: 700px;
    margin-top: 0.45rem;
  }

  /* 4. SERVICES: Stacked & Width Constrained */
  .area-services {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    gap: 1rem;
  }

  .service-box {
    padding: 1.25rem;
    min-height: auto;
  }

  .service-box-text {
    font-size: var(--font-s);   /* 1.35rem - Matches intro text */
  }

  /* Landscape Tweaks: H1 Spacing, Text Tightness, Footer Size */
  body.page-contact .area-headline h1 {
    margin: 0 !important;
  }

  body.page-contact .contact-page-text:nth-of-type(1) {
    line-height: 1.25;
    margin-top: -10px;
    max-width: 800px;
    margin-inline: auto;
  }

  body.page-contact .contact-page-text:nth-of-type(2) {
    line-height: 1.25;
    margin-top: 1.5rem;
    max-width: 800px;
    margin-inline: auto;
  }

  .contact-info {
     margin-top: 2.5rem;
     margin-bottom: 0;
   }

   .contact-name {
     font-size: 1.75rem;
     margin-bottom: 2px;
   }

   .contact-title {
      margin-bottom: -10px;
    }

    .contact-company {
       margin-bottom: 10px;
     }

  .contact-phone {
      font-size: 1.7rem;
      padding: 1rem 0;
    }

   .contact-email {
     font-size: 1.6rem;
   }

  .footer-copyright {
    font-size: 1.35rem;
  }

  /* About Page: Even smaller portrait for landscape */
  body.page-about .area-portrait {
    max-width: min(50vh, 300px) !important;
  }

  body.page-about .area-intro {
    max-width: min(90vw, 500px);
  }
}

/* ♿ SARPA FIX: Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ⏩ 14. SKIP INTRO STATE */
/* Safety net for repeat visitors: Forces content visible if JS delays */
body.skip-intro .area-logo,
body.skip-intro .area-headline,
body.skip-intro .area-services,
body.skip-intro .area-intro,
body.skip-intro .cell-footer,
body.skip-intro .navbar,
body.skip-intro .nav-link {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ============================================
   FORM VALIDATION & STATES
   ============================================ */

/* Button Status States */

/* FORCE OPAQUE TEXT ON DISABLED BUTTONS (Fix for Safari/iOS) */
.btn-submit:disabled {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 1) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 1) !important; /* The magic Safari fix */
}

.btn-submit {
  transition: all 0.3s ease;
  min-width: 140px; /* Prevents button from shrinking too much */
}

.btn-submit.is-sending {
  background: rgba(127, 140, 141, 1) !important; /* Grey */
  cursor: wait;
}

.btn-submit.is-success {
  background: rgba(46, 204, 113, 0.9) !important; /* Green */
  border-color: rgba(46, 204, 113, 1) !important;
  color: rgba(255, 255, 255, 1);
  pointer-events: none;
}

.btn-submit.is-warning {
  background: rgba(243, 156, 18, 0.9) !important; /* Orange */
  border-color: rgba(243, 156, 18, 1) !important;
  color: rgba(255, 255, 255, 1);
  cursor: not-allowed;
}

.btn-submit.is-error {
  background: rgba(231, 76, 60, 0.9) !important; /* Red */
  border-color: rgba(231, 76, 60, 1) !important;
  color: rgba(255, 255, 255, 1);
}

/* --- Validation Styles (Restored) --- */

/* 1. The Red Asterisk */
.required {
  color: rgba(231, 76, 60, 1); /* Red */
  margin-left: 0.2rem;
}

/* 2. The Invalid Input Border */
/* We use !important to override any default browser or framework styles */
input.is-invalid,
textarea.is-invalid {
  border-color: rgba(231, 76, 60, 1) !important;
  background-color: rgba(231, 76, 60, 0.05); /* Slight red tint optional */
}

/* 3. The Error Message Text */
.error-message {
  display: none; /* Hidden by default */
  color: rgba(231, 76, 60, 1);
  font-size: 0.85rem;
  margin-top: 0.3rem;
  text-transform: lowercase; /* Forces "Please Fill..." to "please fill..." */
  font-weight: 500;
}

/* When the message is active, show it */
.error-message.is-visible {
  display: block;
}

/* --- Utility / Anti-Spam --- */

/* Hides the honeypot field from the visual flow to prevent layout gaps */
.honey-pot {
  display: none;
}