/* ==========================================================================
   LOTTI HOMES — BASE STYLESHEET
   Plain HTML/CSS/JS, no frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   Space Grotesk  -> nav links, eyebrows / tiny uppercase labels
   Cormorant Garamond -> headings (with italic used as an accent, not a style)
   Inter          -> body copy
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Infant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=Herr+Von+Muellerhoff&display=swap');

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   Change colours, spacing, and radii here — everything below references
   these variables, so edits here cascade through the whole site.
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --color-bg:            #020C17; /* page background, navy */
  --color-bg-raised:     #0A1119; /* slightly-lifted panels, cards, alt sections */
  --color-title:         #F3F1EF; /* headings / high-emphasis text */
  --color-body:          #F3F1EF; /* body copy — CHANGE HERE if you want body text dimmer than headings (e.g. opacity or a muted off-white) */
  --color-body-muted:    rgba(243, 241, 239, 0.7); /* secondary paragraph text, captions */
  --color-brown:         #8F7058; /* gold/brown accent — eyebrows, links, icons, italic accents */
  --color-line:          rgba(143, 112, 88, 0.6); /* section divider lines, 60% opacity brown */
  --color-border:        rgba(243, 241, 239, 0.15); /* input borders, card outlines */

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-nav:     'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --tracking-heading: -0.05em;
  --tracking-label: 0.12em;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(20px, 5vw, 72px);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px; 
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: page-fade-in 0.1s var(--ease-standard) forwards; 
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Added by js/main.js just before navigating to another page — must match
   PAGE_TRANSITION_MS in js/main.js. If JS fails, links just navigate
   instantly as before — no broken/blank-page risk either way. */
body.is-leaving {
  animation: none;
  opacity: 0;
  transition: opacity 0.1s var(--ease-standard);
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* Respect reduced-motion preference — do not remove */
@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;
  }
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500; 
  color: var(--color-title);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}

h1 { font-size: clamp(2.75rem, 5vw, 5rem); }       
h2 { font-size: clamp(2.25rem, 3.5vw, 3.5rem); }   
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }      

/* Italic used as an accent word within a heading, e.g. <em>seamless.</em> */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--color-brown);
  font-weight: 400;
}

p {
  font-family: var(--font-body);
  color: var(--color-body-muted);
  font-size: 1rem; 
  max-width: 60ch; 
}

/* Eyebrow / tiny uppercase label above headings (e.g. "WHAT WE OFFER") */
.eyebrow {
  font-family: var(--font-nav);
  font-size: 0.75rem; /* CHANGE HERE for label size */
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-2xl); 
}

.projects-section {
 padding-block: var(--space-xl);
}

.services-section {
    padding-block: 40px;
}

/* Hairline divider used between numbered service/process blocks */
.divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-lg);
}

/* --------------------------------------------------------------------------
   NAVIGATION (shared across all pages)
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--space-md) + 0.85rem) var(--container-pad) var(--space-md);
  font-family: var(--font-nav);
}

.nav__logo {
  display: block;
}

.nav__logo img {
  height: 60px; 
  width: auto;
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
}

.nav__links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-body-muted);
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              text-shadow var(--duration-fast) var(--ease-standard);
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--color-title);
  transform: scale(1.08);
  text-shadow: 0 0 4px rgba(243, 241, 239, 0.25); 
}

.nav__cta {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 15px 30px;
  border: 0.5px solid var(--color-title); 
  border-radius: 999px;
  color: var(--color-title);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.nav__cta:hover {
  background-color: var(--color-title);
  color: var(--color-bg);
  font-weight: 500;
  border-color: var(--color-title);
  transform: scale(1.04);
  box-shadow: 0 0 4px rgba(243, 241, 239, 0.1); 
}

/* Applied via js/main.js once the user scrolls past the hero */
.nav {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.nav--scrolled {
  background-color: rgba(2, 12, 23, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.2);
}

/* --------------------------------------------------------------------------
   BURGER MENU (mobile nav — hidden entirely above 900px)
   -------------------------------------------------------------------------- */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 0.5px;
  background-color: var(--color-title);
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.nav__burger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__burger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background-color: rgba(2, 12, 23, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: min(340px, 82vw);
  height: 100%;
  height: 100dvh;
  background-color: var(--color-bg-raised);
  border-left: 0.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-nav__links a {
  font-family: var(--font-nav);
  font-size: 1.225rem;
  font-weight: 400;
  color: var(--color-body-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.mobile-nav__links a:hover,
.mobile-nav__links a.is-active {
  color: var(--color-title);
}

.mobile-nav__cta {
  align-self: flex-start;
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__burger {
    display: flex;
  }
  .nav {
    padding-block: var(--space-sm) var(--space-sm);
  }
  .nav__logo img {
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px; 
  transition: all var(--duration-fast) var(--ease-standard);
}

.btn--outline {
  border: 0.5px solid var(--color-title); 
  color: var(--color-title);
  font-weight: 400;
}

.btn--outline:hover {
  background-color: var(--color-title);
  color: var(--color-bg);
  border-color: var(--color-title);
  font-weight: 600;
  transform: scale(1.04);
  box-shadow: 0 0 4px rgba(243, 241, 239, 0.1); 
}

.btn--filled {
  background-color: var(--color-brown);
  color: var(--color-bg);
  font-weight: 600;
}

.btn--filled:hover {
  opacity: 0.85;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   FOOTER (shared across all pages)
   -------------------------------------------------------------------------- */

.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr; 
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: none;
  padding-inline: 60px;
}

.footer__brand {
  justify-self: start;
}

.footer__icons {
  justify-self: end;
}

.footer__divider {
  width: 0.5px;
  align-self: stretch;
  background-color: rgba(143, 112, 88, 0.1);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer__brand img {
  width: 40px; 
  flex-shrink: 0;
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-title);
}

.footer__contact {
  font-family: var(--font-nav);
  font-size: 0.85rem;
  color: var(--color-body-muted);
}

/* --------------------------------------------------------------------------
   SCROLL-REVEAL UTILITY
   Add class="reveal" to any element; js/main.js toggles "is-visible"
   when it enters the viewport.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --container-pad: 6vw;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-lg);
    padding-inline: var(--container-pad);
  }
  .footer__brand,
  .footer__cta {
    justify-self: center;
  }
  .footer__cta {
    flex-direction: column;
    text-align: center;
  }
  .footer__icons {
    display: none;
  }
  .footer__divider:last-of-type {
    display: none;
  }
}

/* ==========================================================================
   INTRO PRELOADER
   Plays once on every page load/refresh (see js/main.js for the removal
   timer). Sits above everything, fills the viewport exactly, then js
   removes it from the DOM once the animation finishes so it can't block
   clicks or linger as an invisible layer.
   ========================================================================== */
#intro-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  height: 100dvh; 
}

#intro-preloader svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Added by js/main.js once the animation's total runtime has elapsed */
#intro-preloader.is-done {
  display: none;
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* -------------------------------------------------------------------------
   HERO (shared structure for both image + video variants)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.1);
}

.hero__media {
  position: static;
  display: block;
  width: 100%;
  height: auto;  
  object-fit: initial;
  z-index: 0;
  opacity: 0.3;
}


.hero--fullscreen {
  height: 100vh;
  height: 100dvh; 
  min-height: 100vh;
}

.hero--fullscreen .hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  z-index: 0;
}

/* Keep the home hero navy until the MP4 has decoded a real frame.
   This prevents the browser from flashing a poster or a stale page image. */
.hero--fullscreen {
  background-color: var(--color-bg);
}

.hero--fullscreen video.hero__media {
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease-standard);
}

.hero--fullscreen video.hero__media.is-video-ready {
  opacity: 0.7;
  visibility: visible;
}

img.hero__media {
  opacity: 0.25; 
}

/* Darkens the photo/video so title text stays legible */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 12, 23, 0.3) 0%,
    rgba(2, 12, 23, 0.08) 45%,
    rgba(2, 12, 23, 0.4) 100%
  );
  z-index: 1;
}

.hero__content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 var(--container-pad) var(--space-3xl);
  max-width: 900px;
}

.hero__eyebrow {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: var(--space-md);
  top: -40px;
  position: relative;
}

.hero__title {
  margin-bottom: var(--space-md);
  line-height: 0.8; 
}

.hero p {
  color: var(--color-body-muted);
  margin-bottom: var(--space-lg);
}

/* -------------------------------------------------------------------------
   OUR STORY
   ------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 340px 0.85fr auto 1.3fr; 
  gap: var(--space-md);
  align-items: center;
  padding-block: 30px;
  padding-left: 0px;
}

.story__divider {
  width: 1px;
  align-self: stretch;
  margin-block: 70px;
  background-color: rgba(143, 112, 88, 0.1); 
}

.story__map svg {
  width: 70%; 
  height: auto;
  display: block;
}

.story__heading h2 {
  margin-top: var(--space-xs);
  font-weight: 400;
}

.story__body p {
  margin-bottom: var(--space-md);
  padding-left: 40px;
  text-align: justify; 
  font-size: 14px;
}

.story__heading .eyebrow {
  letter-spacing: 2px;
}

.story__link {
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-brown);
  display: inline-flex;
  align-items: center;
  padding-left: 40px;
  gap: 10px;
  transition: gap var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.story__link svg {
  width: 15px; 
  height: 15px;
  display: block;
  transform: translateY(-1px);
}

.story__link:hover {
  gap: 16px; 
  color: var(--color-title);
  transform: scale(1.06);
  filter: drop-shadow(0 0 2px rgba(243, 241, 239, 0.15));
}

/* -------------------------------------------------------------------------
   VALUE ICON ROW
   ------------------------------------------------------------------------- */
/* Full-bleed wrapper — the border lives here so it spans the true viewport
   width, independent of the .container max-width/padding used by its content */
.values-section {
  border-top: 0.5px solid rgba(143, 112, 88, 0.1);
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.1);
}

.edge-line-bottom {
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.1);
}

.edge-line-top {
  border-top: 0.5px solid rgba(143, 112, 88, 0.1);
}

.page-top-clearance {
  margin-top: 140px; 
}

.values-bleed {
  width: 100%;
  padding-inline: 60px; 
}

.values {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; 
  align-items: center;
  gap: var(--space-lg);
  padding-block: 40px;
}

.values__divider {
  width: 0.5px;
  align-self: stretch;
  background-color: rgba(143, 112, 88, 0.1);
}

@media (max-width: 900px) {
  .values-bleed {
    padding-inline: var(--container-pad);
  }
  .values {
    grid-template-columns: 1fr 1fr; 
  }
  .values__divider {
    display: none;
  }
}

@media (max-width: 560px) {
  .values {
    grid-template-columns: 1fr;
  }
  .value-card {
    justify-self: stretch;
    justify-content: flex-start;
  }
  .value-card p {
    width: auto;
    max-width: 240px;
  }
}

.value-card {
  display: flex;
  align-items: center; 
  gap: var(--space-md);
  justify-self: center;
}

.value-card img {
  width: auto;
  height: 100px; 
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}

.value-card:hover img {
  transform: scale(1.08);
}

.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-title);
  margin-bottom: var(--space-xs);
}

.value-card p {
    font-size: 12px;
    width: 200px;
    color: var(--color-body-muted);
}

/* -------------------------------------------------------------------------
   FEATURED PROJECTS GALLERY
   ------------------------------------------------------------------------- */
/* This section isn't wrapped in .container, so it's already full viewport
   width by default — this just gives it its own smaller fixed side padding
   instead of the site's standard 5vw --container-pad used elsewhere,
   matching the mockup's true edge-to-edge treatment. */
.projects-bleed {
  max-width: 1900px; 
  margin-inline: auto;
  padding-inline: 40px; 
}

.projects-layout {
  display: grid;
  grid-template-columns: 0.78fr repeat(4, 1fr); 
  gap: var(--space-md);
  align-items: stretch;
}

.projects-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.projects-intro h2 {
  max-width: 14ch;
  line-height: 1;
  font-weight: 400;
}


.projects-intro__link {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: transform var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.projects-intro__link:hover {
  color: var(--color-title);
  transform: scale(1.06);
  filter: drop-shadow(0 0 2px rgba(243, 241, 239, 0.15));
}

.projects-intro__link svg {
    width: 13px;
    height: 13px;
    display: block;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.projects-intro__link:hover svg {
    transform: translateX(3px);
}

/* .gallery-grid no longer wraps the cards directly — they're now grid items
   of .projects-layout alongside the intro column. Kept as a marker class on
   the cards themselves for hover/transition styling below. */

.gallery-card {
  position: relative;
  aspect-ratio: 273 / 295; 
  border-radius: 10px; 
  overflow: hidden;
  border: 1px solid rgba(143, 112, 88, 0.4);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.gallery-card:hover img {
  transform: scale(1.06);
}

.gallery-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 12, 23, 0) 25%, rgba(2, 12, 23, 1) 100%);
}

.gallery-card__label {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  right: var(--space-md);
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
}

.gallery-card__label span:first-child {
  font-size: 0.65rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translateY(10px);
  color: var(--color-brown);
  display: block;
  margin-bottom: 0.2rem;
}

.gallery-card__label h3 {
  font-family: var(--font-display);
  transform: translateY(10px);
  font-size: 30px;
  letter-spacing: 0.7;
  color: var(--color-title);
}

.gallery-card__arrow {
  width: 34px; 
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  transform: translateY(10px);
  background: transparent;
  color: var(--color-title);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.gallery-card__arrow svg {
  width: 14px; 
  height: 14px;
  display: block;
}

.gallery-card:hover .gallery-card__arrow {
  border-color: var(--color-title);
  background-color: rgba(243, 241, 239, 0.08);
  transform: translateY(10px) scale(1.08);
  box-shadow: 0 0 3px rgba(243, 241, 239, 0.12); 
}

/* -------------------------------------------------------------------------
   SERVICES ROW
   ------------------------------------------------------------------------- */
.services-heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.services-heading h2 {
  font-weight: 400;
}

.services-section-line {
 position: relative;
}

.services-section-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: var(--color-line);
}

.services-heading .eyebrow {
  display: block;
  letter-spacing: 2px;
  font-weight: 600;
}

.services-bleed {
  width: 100%;
  max-width: 1900px; 
  margin-inline: auto;
  padding-inline: 60px; 
}

.services-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; 
  align-items: start; 
  gap: var(--space-lg);
}

.services__divider {
  width: 0.5px;
  align-self: stretch;
  background-color: rgba(143, 112, 88, 0.1);
}

@media (max-width: 900px) {
  .services-bleed--home {
    padding-inline: var(--container-pad);
  }
  .services-row {
    grid-template-columns: 1fr 1fr; 
  }
  .services__divider {
    display: none;
  }
}

@media (max-width: 560px) {
  .services-row {
    grid-template-columns: 1fr;
  }
  .service-item {
    justify-self: stretch;
    justify-content: flex-start;
  }
}

.service-item {
  display: flex; 
  align-items: center;
  gap: var(--space-md);
  justify-self: center; 
}

.service-item img {
  transition: transform var(--duration-base) var(--ease-standard);
}

.service-item:hover img {
  transform: scale(1.08);
}

.service-item img[src*="newbuilds"] {
  width: 80px;
}

.service-item img[src*="renovations"] {
  width: 100px;
}

.service-item img[src*="extensions"] {
  width: 120px;
}

.service-item img[src*="custombuilds"] {
  width: 100px;
}

.service-item h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-title);
  margin-bottom: var(--space-xs);
}

.service-item p {
  font-size: 12px;
  color: var(--color-body-muted);
  max-width: 30ch;
  margin-bottom: var(--space-sm);
}

.service-item__link {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard);
}

.service-item__link:hover {
  gap: var(--space-sm);
  color: var(--color-title);
  transform: scale(1.06);
  filter: drop-shadow(0 0 2px rgba(243, 241, 239, 0.15));
}

/* -------------------------------------------------------------------------
   COMMITMENT / CLOSING BAND
   ------------------------------------------------------------------------- */
.commitment {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 480px;
  overflow: hidden;
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.1);
}

.commitment__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.commitment__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 30%, rgba(2, 12, 23, 0.55) 55%, rgba(2, 12, 23, 0.1) 100%);
  z-index: 1;
}

.commitment__content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: var(--space-2xl) 60px;
}

.commitment__content h2 {
    line-height: 0.9;
}

.commitment__content .eyebrow {
  letter-spacing: 2px;
  font-weight: 600;
}

.commitment__content p {
  margin-block: var(--space-md);
  font-size: 14px;
  color: var(--color-body-muted);
}

/* -------------------------------------------------------------------------
   MOTTLED OVERLAY
   Sits over navy sections for subtle texture. Add class="has-overlay" to a
   .section, positioned as a background layer.
   ------------------------------------------------------------------------- */
.has-overlay {
  position: relative;
}

.has-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/mottledoverlay.png');
  background-size: 900px auto; 
  background-repeat: repeat;
  background-position: center;
  opacity: 0.5; 
  pointer-events: none;
  z-index: 0;
}

.has-overlay > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   FULL FOOTER (contact icons row used site-wide)
   ------------------------------------------------------------------------- */

.footer { padding-block: 30px; }

.footer__brand img {
  width: 80px; 
  flex-shrink: 0;
}

.footer__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__cta .btn {
  padding-inline: 60px; 
}

.footer__cta p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 0.8; 
  color: var(--color-title);
  margin: 0;
}

.footer__icons {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-nav);
  font-size: 0.8rem;
}

.footer__icons a,
.footer__icons span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-body-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__icons a:hover {
  color: var(--color-title);
}

.footer__icons img {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.footer__icons a:hover img {
  transform: scale(1.15);
}

/* -------------------------------------------------------------------------
   RESPONSIVE — HOME PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .story {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-left: calc(var(--container-pad) + 12px);
  }
  .story__divider {
    display: none;
  }
  .story__body p,
  .story__link {
    padding-left: 0;
  }
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects-layout {
    grid-template-columns: repeat(2, 1fr); 
  }
  .projects-layout .projects-intro {
    grid-column: 1 / -1; 
  }
  .projects-intro__link {
    margin-top: var(--space-md);
  }
}

@media (max-width: 640px) {
  .values,
  .projects-layout {
    grid-template-columns: 1fr;
  }
  .commitment__content {
    max-width: 100%;
    background: rgba(2, 12, 23, 0.6);
  }
  .commitment__scrim {
    background: rgba(2, 12, 23, 0.72);
  }
  .hero__content {
    padding-bottom: var(--space-lg);
  }
}

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* -------------------------------------------------------------------------
   INTRO / FAMILY HEADER
   ------------------------------------------------------------------------- */
.about-intro {
  text-align: center;
  padding-block: 60px;
}

.about-intro__header h1 {
  margin-top: 30px;
  line-height: 0.8;
  font-weight: 400;
  margin-bottom: 60px;
}

.about-intro__text {
  max-width: 1400px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.about-intro__text p {
  max-width: none;
  margin-inline: auto;
  font-size: 14px;
  margin-bottom: var(--space-md);
  text-align: center;
}

/* -------------------------------------------------------------------------
   DIRECTORS
   ------------------------------------------------------------------------- */
.directors {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 340px));
  justify-content: center;
  gap: var(--space-2xl);
}

.director__info h3 {
  font-size: 30px;
  font-weight: 400;
}

.director__photo {
  aspect-ratio: 3 / 4; 
  border-radius: 1px;
  border: 1px solid rgba(143, 112, 88, 0.5);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.director__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-wipe {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 18% 0); 
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.photo-wipe.is-visible {
  clip-path: inset(0 0 0% 0);
}

/* -------------------------------------------------------------------------
   PULL QUOTE
   ------------------------------------------------------------------------- */
.about-quote {
  text-align: center;
  border-top: 0.5px solid rgba(143, 112, 88, 0.1);
  border-bottom: 0.5px solid rgba(143, 112, 88, 0.1);
  padding-block: 30px;
}

.about-quote__text {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  color: var(--color-title);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 20px;
  padding-top: 30px;
  line-height: 1.1;
}

.about-quote__signature {
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: clamp(2rem, 5vw, 3.4375rem);
  color: rgb(209, 184, 165);
  max-width: none;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------------
   WHAT SETS US APART
   ------------------------------------------------------------------------- */
.apart-heading {
  text-align: center;
  margin-bottom: var(--space-md);
}

.apart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.apart-section {
  padding-block: 40px;
}

.apart-card {
  border: 0.5px solid rgba(196, 189, 184, 0.2);
  border-radius: 6px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.apart-card:hover {
  border-color: var(--color-body-muted);
  transform: translateY(-4px);
}

.apart-card img {
  height: 100px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.apart-card h3 {
  font-family: var(--font-nav); /* Space Grotesk */
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.apart-card p {
  font-size: 12px;
  max-width: none;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   RESPONSIVE — ABOUT PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .directors {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }
  .apart-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ==========================================================================
   OUR PROCESS PAGE
   ========================================================================== */

/* -------------------------------------------------------------------------
   HERO — reuses .hero/.hero--fullscreen/.hero__media/.hero__scrim, but with
   centered content instead of the home page's bottom-left layout.
   ------------------------------------------------------------------------- */
.process-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--container-pad);
  padding-top: 80px;
}

.process-hero__content .eyebrow {
  font-weight: 600;
  letter-spacing: 2px;
}

.process-hero__content h1 {
  margin-bottom: var(--space-lg);
  padding-top: 40px;
  max-width: 900px;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
  line-height: 0.9;
}

.process-hero__content p {
  max-width: 800px;
  font-size: 14px;
  color: var(--color-body-muted);
  text-align: center;
  margin-inline: auto;
}

.process-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-body-muted);
}

.process-hero__scroll-cue svg {
  width: 22px;
  height: 22px;
  display: block;
}

.process-steps__heading {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.process-steps__list {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
}

.process-steps__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: var(--space-2xl);
}

.process-step__number {
  display: block;
  font-family: 'Cormorant Infant', serif; 
  font-style: italic;
  letter-spacing: -0.1em; 
  font-size: clamp(4rem, 14vw, 12.5rem);
  color: var(--color-brown);
  opacity: 0.22; 
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.process-step h3 {
  margin-bottom: var(--space-md);
}

.process-step p {
  max-width: 800;
  font-size: 14px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-md);
}

.process-step__badge {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  border: 0.5px solid rgba(143, 112, 88, 0.4);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.process-step.is-active .process-step__badge {
  border-color: var(--color-brown);
  background-color: rgba(143, 112, 88, 0.08);
}

/* -------------------------------------------------------------------------
   RESPONSIVE — PROCESS PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .process-steps__list {
    max-width: 100%;
  }
}

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

/* -------------------------------------------------------------------------
   HERO — reuses .hero/.hero--fullscreen/.hero__media/.hero__scrim, centered
   content matching the Process hero pattern.
   ------------------------------------------------------------------------- */
.services-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--container-pad);
}

.services-hero__content h1 {
  margin-bottom: var(--space-lg);
  padding-top: 40px;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
  max-width: 900px;
}

.services-hero__content p {
  max-width: 900px;
  text-align: center;
  margin-inline: auto;
  font-size: 14px;
}

.services-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-body-muted);
}

.services-hero__scroll-cue svg {
  width: 22px;
  height: 22px;
  display: block;
}

.services-bleed {
  width: 100%;
  max-width: 1900px; 
  margin-inline: auto;
  padding-inline: 100px;
}

/* -------------------------------------------------------------------------
   SERVICE BLOCK
   ------------------------------------------------------------------------- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
}


.service-block__divider-line {
  height: 0.5px;
  width: 100%;
  background-color: rgba(143, 112, 88, 0.15); 
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease-standard);
}

.service-block__divider-line.is-visible {
  transform: scaleX(1);
}

.service-block__number {
  display: block;
  font-family: 'Cormorant Infant', serif; 
  font-style: italic;
  font-size: clamp(4.5rem, 16vw, 15.625rem); 
  letter-spacing: -0.1em; /* -10% */
  color: var(--color-brown);
  opacity: 0.22 !important; 
  line-height: 0.72;
}

.service-block__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-block__text h2 {
  margin-bottom: var(--space-md);
  font-weight: 400;
}

.service-block__text > p {
  max-width: 600px;
  margin-bottom: var(--space-lg);
}

.service-block__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-lg);
}

.service-block__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: 0.9rem;
  color: var(--color-body-muted);
}

.service-block__list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--color-brown);
  flex-shrink: 0;
  transform: translateY(-2px);
}

.service-block__image {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: 2px;
  overflow: hidden;
  border: none;
}

.service-block__image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(143, 112, 88, 0.55);
  border-radius: inherit;
  pointer-events: none;
}

.service-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.service-block__image:hover img {
  transform: scale(1.05);
}

.service-image-reveal {
  opacity: 1;
  transform: none;
}



/* -------------------------------------------------------------------------
   RESPONSIVE — SERVICES PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .service-block {
    grid-template-columns: 1fr;
  }
  .service-block__image {
    order: -1; 
  }
}

@media (max-width: 560px) {
  .service-block__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PROJECTS PAGE
   ========================================================================== */

/* -------------------------------------------------------------------------
   HERO — reuses .hero/.hero--fullscreen/.hero__media/.hero__scrim
   ------------------------------------------------------------------------- */
.portfolio-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--container-pad);
}

.portfolio-hero__content h1 {
  margin-bottom: var(--space-lg);
  padding-top: 40px;
  max-width: 900px;
  line-height: 0.8;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
}

.portfolio-hero__content p {
  max-width: 800px;
  font-size: 14px;
  text-align: center;
  margin-inline: auto;
}

.portfolio-hero__content .eyebrow {
  max-width: 800px;
  text-align: center;
  margin-inline: auto;
  font-weight: 600;
}

.portfolio-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-body-muted);
}

.portfolio-hero__scroll-cue svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* -------------------------------------------------------------------------
   PORTFOLIO LIST
   ------------------------------------------------------------------------- */
.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.portfolio-card {
  position: relative;
  aspect-ratio: 16 / 9.2; 
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(197, 185, 176, 0.55)
}

/* -------------------------------------------------------------------------
   IMAGE SLIDER — supports multiple photos per project. Currently each
   project only has one photo, so the dots/arrows auto-hide via JS when
   there's nothing to switch between — adding more <img> tags (see
   projects.html) automatically brings the controls back to life, no CSS
   changes needed.
   ------------------------------------------------------------------------- */
.portfolio-card__slider {
  position: absolute;
  inset: 0;
}

.portfolio-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.portfolio-card__img.is-active {
  opacity: 1;
}

.portfolio-card:hover .portfolio-card__img.is-active {
  transform: scale(1.04);
}

.portfolio-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 12, 23, 0) 45%, rgba(2, 12, 23, 0.9) 100%);
  z-index: 1;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   NUMERAL — same treatment as the Services/Process pages, overlaid on the
   photo in the top-right corner.
   ------------------------------------------------------------------------- */
.portfolio-card__number {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  z-index: 2;
  display: block;
  font-family: 'Cormorant Infant', serif;
  font-style: italic;
  font-size: clamp(3rem, 10vw, 8.75rem);
  letter-spacing: -0.1em;
  color: var(--color-bg-raised);
  opacity: 0.4; 
  line-height: 1;
}

/* -------------------------------------------------------------------------
   CONTENT — title + description, sits inside .portfolio-card__bottom
   ------------------------------------------------------------------------- */
.portfolio-card__content h2 {
  color: var(--color-title);
  margin-bottom: var(--space-xs);
}

.portfolio-card__content p {
  color: rgba(243, 241, 239, 0.8);
  font-size: 0.9rem;
  max-width: 56ch;
}

/* -------------------------------------------------------------------------
   VIEW-PROJECT ARROW — bottom-right, matches the gallery-card__arrow style
   used on the home page for consistency.
   ------------------------------------------------------------------------- */
.portfolio-card__view {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-title);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.portfolio-card__view svg {
  width: 16px;
  height: 16px;
  display: block;
}

.portfolio-card:hover .portfolio-card__view {
  border-color: var(--color-title);
  background-color: rgba(243, 241, 239, 0.08);
  transform: scale(1.08);
}

/* -------------------------------------------------------------------------
   SLIDER CONTROLS — dots + prev/next arrows, ported from the ACP site's
   portfolio-dots/portfolio-arrow pattern onto Lotti's palette. Sit bottom-
   left, just above the title.
   ------------------------------------------------------------------------- */
.portfolio-card__bottom {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); 
  max-width: 640px;
}

.portfolio-card__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.portfolio-dots {
  display: flex;
  gap: 8px;
}

.portfolio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(243, 241, 239, 0.7);
  background: rgba(243, 241, 239, 0.25);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease, transform 0.2s ease;
}

.portfolio-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

.portfolio-dot:hover {
  transform: scale(1.2);
}

.portfolio-dot.is-active {
  background: var(--color-title);
}

/* -------------------------------------------------------------------------
   RESPONSIVE — PROJECTS PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .portfolio-card {
    aspect-ratio: 4 / 5;
  }
  .portfolio-card__number {
    font-size: 3rem;
  }
  .portfolio-card__controls {
    bottom: calc(var(--space-md) + 70px);
  }
  .portfolio-card__bottom {
    left: var(--space-md);
    right: calc(var(--space-md) + 56px); 
    bottom: var(--space-md);
    max-width: none;
  }
  .portfolio-card__view {
    right: var(--space-md);
    bottom: var(--space-md);
  }
}
/* ==========================================================================
   CONTACT PAGE
   Reuses existing tokens/patterns (--color-*, .eyebrow, .btn, .reveal)
   ========================================================================== */

/* -------------------------------------------------------------------------
   HERO — reuses .hero/.hero--fullscreen/.hero__media/.hero__scrim, centered
   content matching the Process/Services/Projects hero pattern.
   ------------------------------------------------------------------------- */
.contact-hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(2, 12, 23, 0.55) 0%,
    rgba(2, 12, 23, 0.35) 45%,
    rgba(2, 12, 23, 0.65) 100%
  );
}

.contact-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--container-pad);
}

.contact-hero__content h1 {
  margin-bottom: var(--space-lg);
  padding-top: 40px;
  max-width: 900px;
  line-height: 0.7;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
  padding-bottom: 30px;
}

.contact-hero__content .eyebrow {
  font-weight: 600;
  letter-spacing: 2px;
}

.contact-hero__content p {
  max-width: 800px;
  font-size: 14px;
  color: var(--color-body-muted);
  text-align: center;
  margin-inline: auto;
}

.contact-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-body-muted);
}

.contact-hero__scroll-cue svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* -------------------------------------------------------------------------
   FORM + DETAILS GRID
   ------------------------------------------------------------------------- */
.contact-section {
  padding-top: var(--space-2xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* -------------------------------------------------------------------------
   ENQUIRY FORM CARD
   ------------------------------------------------------------------------- */
.contact-form-card {
  background-color: var(--color-bg-raised);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-xl);
}

.contact-form-card h2 {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-weight: 400;
}

.contact-form-card > p {
  font-size: 14px;
  margin-bottom: var(--space-lg);
}

.enquiry-form .form-group {
  margin-bottom: var(--space-md);
}

.enquiry-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.enquiry-form label {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: var(--space-xs);
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding-block: 0.7rem;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.enquiry-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F7058' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9 L12 15 L18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px 14px;
  padding-right: var(--space-lg);
}

.enquiry-form select option {
  background-color: var(--color-bg-raised);
  color: var(--color-title);
}

.enquiry-form textarea {
  resize: vertical;
  min-height: 100px;
}

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder {
  color: rgba(243, 241, 239, 0.35);
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--color-brown);
}

.form-honeypot {
  display: none;
}

.form-submit-btn {
  width: 100%;
  justify-content: space-between;
  margin-top: var(--space-sm);
}

.form-submit-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.form-consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--color-brown);
}

.form-consent label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-body-muted);
  line-height: 1.5;
}

.privacy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
  margin-top: -0.4rem;
  margin-bottom: var(--space-sm);
  margin-left: calc(15px + 0.6rem); 
  transition: color var(--duration-fast) var(--ease-standard);
}

.privacy-toggle:hover {
  color: var(--color-title);
}

.privacy-toggle svg {
  width: 10px;
  height: 10px;
  display: block;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.privacy-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.privacy-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: calc(15px + 0.6rem);
  margin-bottom: 0;
  transition: max-height var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard),
              margin-bottom var(--duration-base) var(--ease-standard);
}

.privacy-panel.is-open {
  max-height: 240px;
  opacity: 1;
  margin-bottom: var(--space-sm);
}

.privacy-panel p {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-body-muted);
  max-width: none;
  background-color: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
}

.privacy-panel a {
  color: var(--color-brown);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.privacy-panel a:hover {
  color: var(--color-title);
}

.form-note {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--color-body-muted);
  text-align: center;
  max-width: none;
  margin-top: var(--space-md);
  transition: color var(--duration-fast) var(--ease-standard);
}

.form-note--success {
  color: var(--color-brown);
}

.form-note--error {
  color: #C4776A;
}

/* -------------------------------------------------------------------------
   DIRECT CONTACT DETAILS
   ------------------------------------------------------------------------- */
.contact-info-col {
  padding-top: var(--space-sm);
}

.contact-info-col h2 {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-weight: 400;
}

.contact-info-col > p {
  font-size: 14px;
  margin-bottom: var(--space-lg);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contact-info-icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon img {
  width: 18px;
  height: 18px;
}

.contact-info-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-info-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brown);
}

.contact-info-value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-title);
  transition: color var(--duration-fast) var(--ease-standard);
}

a.contact-info-value:hover {
  color: var(--color-brown);
}

.contact-info-static {
  color: var(--color-body-muted);
  max-width: 32ch;
}

.contact-info-license {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 0.5px solid var(--color-border);
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-body-muted);
}

/* -------------------------------------------------------------------------
   RESPONSIVE — CONTACT PAGE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 560px) {
  .enquiry-form .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-card {
    padding: var(--space-lg);
  }
}

/* ==========================================================================
   ANIMATION ENHANCEMENTS
   Scroll-reveal variants, bespoke per-page entrances, and hover/button
   micro-interactions for the Projects, Services, About Us and Our Process
   pages. Nothing here needs its own prefers-reduced-motion override — the
   global reset near the top of this file already disables all animation
   and transition durations when that's set.
   ========================================================================== */

/* -------------------------------------------------------------------------
   REVEAL VARIANTS
   Alternatives to the base .reveal (fade + rise). js/main.js now also
   observes elements carrying these classes and toggles .is-visible on
   them the same way — see the updated revealEls query.
   ------------------------------------------------------------------------- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Clip-path wipe reveal — generalises the About page's director-photo
   treatment so any image can use it. */
.reveal-clip {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.reveal-clip.is-visible {
  clip-path: inset(0 0 0% 0);
}

/* -------------------------------------------------------------------------
   BUTTON SHEEN
   A soft diagonal light sweep on hover, shared by every .btn variant and
   the nav Contact pill — site-wide, since these are shared components.
   ------------------------------------------------------------------------- */
.btn,
.nav__cta {
  position: relative;
  overflow: hidden;
}

.btn::before,
.nav__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(243, 241, 239, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.btn:hover::before,
.nav__cta:hover::before {
  left: 130%;
}

/* ==========================================================================
   PROJECTS PAGE
   ========================================================================== */

/* Pure, slow fade — no movement at all, so there's nothing to read as a
   "snap". Scoped to .portfolio-list so it doesn't touch .reveal anywhere
   else on the site. */
.portfolio-list .portfolio-card.reveal {
  opacity: 0;
  transform: none;
  transition: opacity 1.8s ease-out;
}

.portfolio-list .portfolio-card.reveal.is-visible {
  opacity: 1;
}

.portfolio-card {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(2, 12, 23, 0.5);
}

.portfolio-card__number {
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.portfolio-card:hover .portfolio-card__number {
  transform: scale(1.08);
  opacity: 0.6;
}

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

.service-block__number.reveal {
  opacity: 0 !important;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.service-block__number.reveal.is-visible {
  opacity: 0.22 !important;
}

.service-item img {
  transition: transform var(--duration-base) var(--ease-standard);
}

.service-item:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

.apart-grid .apart-card.reveal-scale {
  transform: scale(0.9) translateY(16px);
}

.apart-card {
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.apart-card:hover {
  border-color: var(--color-title);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(143, 112, 88, 0.18);
}

.apart-card img {
  transition: transform var(--duration-base) var(--ease-standard);
}

.apart-card:hover img {
  transform: scale(1.1);
}

.gallery-card {
  transition: transform var(--duration-base) var(--ease-standard);
}

.gallery-card:hover {
  transform: translateY(-6px);
}

/* ==========================================================================
   OUR PROCESS PAGE
   ========================================================================== */

.process-step__number.reveal-scale {
  transform: scale(0.5);
}

.process-step__number.reveal-scale.is-visible {
  transform: scale(1);
}

.process-step__number {
  transition: opacity var(--duration-base) var(--ease-standard);
}

.process-step.is-active .process-step__number {
  opacity: 0.5;
}

.process-step__badge {
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.process-step.is-active .process-step__badge {
  transform: scale(1.05);
}


/* -------------------------------------------------------------------------
   HERO SCROLL-CUE — 
   ------------------------------------------------------------------------- */
@keyframes scroll-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

.process-hero__scroll-cue,
.services-hero__scroll-cue,
.portfolio-hero__scroll-cue,
.contact-hero__scroll-cue {
  animation: scroll-cue-bob 2s var(--ease-standard) infinite;
}
/* -------------------------------------------------------------------------
   MOBILE FOOTER — simplify to just brand + CTA
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer__icons {
    display: none;
  }
  .footer__divider:last-of-type {
    display: none;
  }
  .footer {
    padding-block: 20px;
  }
  .footer__grid {
    gap: var(--space-md);
  }
  .footer__brand img {
    width: 56px;
  }
  .footer__cta {
    gap: var(--space-sm);
  }
  .footer__cta p {
    font-size: 1.25rem;
  }
  .footer__cta .btn {
    padding-inline: 36px;
  }
}

/* -------------------------------------------------------------------------
   VALUES + HOME SERVICES ROW — 
   ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .value-card {
    justify-self: stretch;
    justify-content: flex-start;
  }
  .service-item {
    justify-self: stretch;
    justify-content: flex-start;
  }
}

/* -------------------------------------------------------------------------
   HOME SERVICES ROW — mobile padding
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .services-bleed.services-bleed--home {
    padding-inline: var(--container-pad);
  }
}
/* ==========================================================================
   MOBILE / TABLET HOME ALIGNMENT FIXES
   ========================================================================== */
@media (max-width: 900px) {
  .story__map svg {
    overflow: visible;
  }

  .value-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    justify-self: stretch;
    width: 100%;
    gap: var(--space-md);
  }

  .value-card img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    justify-self: center;
  }

  .value-card p {
    width: auto;
    max-width: 240px;
  }

  .services-bleed--home .service-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    justify-self: stretch;
    width: 100%;
    gap: var(--space-md);
  }

  .services-bleed--home .service-item img,
  .services-bleed--home .service-item img[src*="newbuilds"],
  .services-bleed--home .service-item img[src*="renovations"],
  .services-bleed--home .service-item img[src*="extensions"],
  .services-bleed--home .service-item img[src*="custombuilds"] {
    width: 78px;
    height: 78px;
    object-fit: contain;
    justify-self: center;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    justify-items: stretch;
    gap: 16px;
    padding-inline: var(--container-pad);
    text-align: left;
  }

  .footer__divider,
  .footer__icons {
    display: none;
  }

  .footer__brand {
    justify-self: stretch;
    min-width: 0;
    gap: 10px;
  }

  .footer__brand img {
    width: 38px;
  }

  .footer__contact {
    font-size: 10px;
    line-height: 1.45;
  }

  .footer__cta {
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    text-align: center;
  }

  .footer__cta p {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    line-height: 0.9;
  }

  .footer__cta .btn {
    justify-content: center;
    width: 100%;
    padding: 10px 12px;
    font-size: 9px;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(126px, 0.8fr);
    gap: 12px;
  }

  .footer__brand img {
    width: 34px;
  }

  .footer__contact {
    font-size: 9px;
  }

  .footer__cta p {
    font-size: 1rem;
  }
}