/* =============================================================
   SITE.CSS — the whole stylesheet, in cascade order.

   Built 2026-09-10 from the nine files the site actually used. Until
   then the pages ran on two parallel stacks: the 23 project pages loaded
   pagez.css and no refresh layer, while index/about/contact/project/404
   loaded pages.css and refresh.2026.css. A rule written in one stack
   never reached the other half of the site.

   Retired in the merge, all provably redundant:
     pagez.css      byte-identical to pages.css
     layout.v2.css  byte-identical to layout.2026.css
     comps.css      an older subset of components.css, 138 lines behind,
                    and loaded by about.html alone

   Section order below IS the cascade order. Keep it. Later sections
   override earlier ones, and refresh.2026 is last on purpose.
============================================================= */


/* ==========================================================================
   SOURCE: animation.css
   ========================================================================== */

/* =========================================================
   Fade-in Animations
   ========================================================= */

.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


.project-card:hover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04);
}

.masonry-item:hover img {
  transform: scale(1.05);
}


/* ==========================================================================
   SOURCE: base.css
   ========================================================================== */

/* -------------------------------------------------
   ROOT VARIABLES & DARK MODE
-------------------------------------------------- */
:root {
  --bg-page: #f5f5f7;
  --bg-surface: #ffffff94;
  --bg-subtle: #f0f2f5;
  --text: #1a1f2a;
  --text-muted: #656b7a;
  --accent: #23737f;
  --accent-soft: #87b8c8ce;
  --overlay: rgba(41, 40, 40, 0.596);
  --muted: #f7f7f7;
  --card-border: #e0e0e0;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-border: rgba(209,213,219,0.8);
  --nav-blur: blur(14px);
  --nav-link: #444;
  --nav-link-hover: #29646d;
  --border-subtle: #dde1ea;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 14px 35px rgba(25, 72, 98, 0.354);
  --transition-fast: 180ms ease-out;
}

.dark-mode {
  --bg: #0f1114;
  --bg-surface: #0f1114;
  --bg-subtle: #0f1114;
  --text: #e6e6e6;
  --overlay: rgba(0,0,0,0.6);
  --muted: #1a1d21;
  --card-border: #252b32;
  --nav-bg: rgba(15,17,20,0.75);
  --nav-border: rgba(255,255,255,0.08);
  --nav-link: #e0e0e0;
  --nav-link-hover: #fff;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}

/* -------------------------------------------------
   DARK MODE TOGGLE
-------------------------------------------------- */
#darkModeToggle {
  position: fixed;
  top: 15px;
  right: 20px;
  padding: 5px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999;
  font-weight: 600;
  font-size:.8rem;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------
   FOOTER CREDIT — Designed & Developed by Studio3C
-------------------------------------------------- */
.footer-credit {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}
.footer-credit a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.footer-credit a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   SOURCE: components.css
   ========================================================================== */

/* ------------------------------------------------- 
SHARE BUTTON
-------------------------------------------------- */
.share-row {
  margin-top: 1.5rem;
}

.share-btn {
  display: inline-flex;
  align-items: center; 
  gap: .5rem;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.share-btn:hover {
  background:#33555a
}

/* ------------------------------------------------- 
READY SECTION BUTTONS
-------------------------------------------------- */

#ready .btn-blue {
  background: var(--accent);
  color: #fff;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-top:20px;
}

#ready .btn-blue:hover {
  background: #103c58;
}

/* ------------------------------------------------- 
BUTTONS
-------------------------------------------------- */

.btn-blue {
  background: var(--accent);
  color: #fff;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-blue:hover {
  background: rgb(22, 100, 151);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  background: #111827;
  color: #f9fafb;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn span {
  font-size: 1.1rem;
}

.btn[disabled] {
  opacity: 0.7;
  cursor: wait;
}


/* ============================
   PROJECT CARD – IMAGE ONLY
============================ */


.project-card.image-only {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3; /* keeps cards from getting too tall */
}

.project-card.image-only img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}


/* Overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.15)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem; /* was 1.5rem */
}

/* BIG title */
.project-overlay-title {
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  padding: 0 0.75rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
  letter-spacing: -5px; 
  opacity: 0.95;
  max-width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
}



/* Hover polish */
.project-card.image-only:hover img {
  transform: scale(1.05);
}

.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card-body {
  padding: 1rem 1.1rem 1.3rem;
}
.project-card-title {
  font-weight: 600;
  margin-bottom: .2rem;
}
.project-card-location {
  font-size: .9rem;
  color: #777;
}

.project-card {
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(0, 0, 0, 0.08), transparent 55%);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(209, 213, 219, 0.8);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.project-card:hover::after {
  opacity: 1;
}

/* Image */
.project-card.image-only {
  position: relative;
  aspect-ratio: 5 / 4; /* was 4 / 3 */
  overflow: hidden;
  border-radius: 5px;
}

.project-card.image-only:hover img {
  transform: scale(1.06);
}

/* ============================
   FORMS
============================ */

.form-row {
  margin-bottom: 1rem;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
}

.form-row input,
.form-row textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text-main);
  background: #f9fafb;
  outline: none;
  transition:
    border-color 160ms ease-out,
    box-shadow 160ms ease-out,
    background 160ms ease-out;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #9ca3af;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(211, 156, 31, 0.35);
}

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

.form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
}

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

.toast {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: #111827;
  color: #f9fafb;
  border: 1px solid rgba(211, 156, 31, 0.85);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  z-index: 80;
}

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

/* was a grey rounded panel; the rest of the site is hairlines and open space now */
.contact-form {
  display: grid;
  /* the rows already carry their own bottom margin; 1.2rem on top of it was double */
  gap: 0;
  /* The form is a grid item in .contact-grid, so it was stretching to match the
     testimonial column beside it, and as a grid itself it handed that extra height
     out to its own rows — which is why the submit button rendered ~100px tall
     instead of the ~46px its padding asks for. Pack the rows at their own size. */
  align-content: start;
  background: none;
  padding: 1.75rem 0 0;
  /* The left column opens with the CONTACT kicker and its rule; the form's rule
     was starting 20px higher, at the top of the grid row, so the two dividers did
     not line up. 20px is the height of that kicker block. */
  margin-top: 20px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border-subtle);
  background: #fff;
  padding: 0.85rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 4px;
  color: var(--text);
  outline: none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 115, 127, 0.12);
}

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

.contact-form-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  padding: 2rem 2.2rem;
  padding-inline: 1.5rem;
}

/* =========================================================
   TESTIMONIALS 
========================================================= */

/* The quote used to sit in the left column under the contact details, which made
   that column about three times the height of the form beside it. It now runs the
   full width below both, so it needs far less reserved height and a cap on the
   measure. */
.testimonials {
  margin-top: 1.5rem;
  position: relative;
  min-height: 240px;
}

.testimonial-slide {
  display: none;
}

.testimonial-slide.active {
  display: block;
}

.testimonial-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-subtle, #ccc);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}

.testimonial-dot.active {
  background: var(--accent, #d39c1f);
}
/* the dots belong under the quote, not centred on a full-width band */
.testimonial-nav {
  justify-content: flex-start;
  margin-left: 1.5rem;
}

.testimonial-slide .section-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
  /* spans the full band; the size comes up a little so the line length in
     characters stays sane at that width */
  max-width: none;
}

.testimonial-slide strong {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.testimonial-wrapper {
  position: relative;
  overflow: hidden;
}

.testimonial-wrapper {
  transition: height 300ms ease;
}
.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
  transform: translateY(8px);
}

.testimonial.is-active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.contact-testimonials .section-lead {
  max-width: 100%;
}

/* =========================================================
   FOOTER (Two Column)
   ========================================================= */


.site-footer {
  border-top: 1px solid rgba(209, 213, 219, 0.8);
  padding: 1.1rem 0 1.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}


.site-footer {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  padding: 2rem 0;
  margin-top: 1rem;
}

.footer-left h3 {
  margin: 0 0 .5rem;
}

.footer-right {
  flex-direction: row;
  gap: 1.5rem;
  justify-content: end;  
  display:block;
  text-align:center;
}

.footer-right a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
}

.footer-right a:hover {
  color: var(--accent);
}

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

.footer-left p{
  margin-top:-5px;
}

/* Footer logo: show ONLY on mobile. Targets the footer brand image
   directly so it works regardless of the per-page #mlogo id/inline style
   (some project pages are missing those). Does not touch the nav logo. */
.site-footer .brand-mark {
  display: none;
}

@media (max-width: 768px) {
  .site-footer .brand-mark {
    display: block;
    margin: 20px auto 0;
    /* the header mark is sized for a header; in the footer it stands on its own */
    width: min(100%, 280px);
    height: auto;
    max-width: 100%;
  }
}



/* -------------------------------------------------
   MASONRY GALLERY
-------------------------------------------------- */

.masonry-item img {
  width: 100%;
  border-radius: 12px;
  display: block;
  transition: transform .4s ease;
  border-radius: var(--radius);
}

.masonry-item:hover img {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}


.gallery-title {
  text-align: center;
  font-size: 2.3rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.masonry-item {
  position: relative;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius);
}

.masonry-hover {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 1.2rem;
  opacity: 0;
  display: flex;
  align-items: flex-end;
  transition: opacity .3s ease;
}

.masonry-item:hover .masonry-hover {
  opacity: 1;
}



/* -------------------------------------------------
   DARK MODE
-------------------------------------------------- */

/* Desktop dark mode toggle */
.dark-toggle-desktop {
  position: fixed;
  top: 15px;
  right: 20px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999;
  font-weight: 600;
  font-size: .8rem;
}

/* Mobile dark mode toggle inside nav */
.dark-toggle-mobile {
  background: var(--accent);
  color: #fff;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  text-align: center;
  margin-top: .5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  width:20%;
}
/* -------------------------------------------------
LIGHT BOX
-------------------------------------------------- */

*
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.lightbox-arrow.left { left: 20px; }
.lightbox-arrow.right { right: 20px; }

/* LIGHTBOX CLOSE BUTTON */
.lightbox-close {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  z-index: 999999;
  transition: opacity .2s ease;
  background:transparent;
  border-radius:10px;
  color:white;
}

.lightbox-close:hover {
  opacity: 0.7;
}

/* -------------------------------------------------
   SCROLL TO TOP
-------------------------------------------------- */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}


/* -------------------------------------------------
   FORGE PANEL
-------------------------------------------------- */
.forge-panel {
  text-decoration: none;
  color: inherit;
}


/* -------------------------------------------------
   SECTION HEADERS
-------------------------------------------------- */

.section-heading {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);

}

.section-title {
  font-size: 1.7rem;
  margin: 0 0 0.6rem;
  color: #111827;
}

.section-lead {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 680px;
}

/* -------------------------------------------------
   PROJECT CARDS
-------------------------------------------------- */
.project-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.project-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 220ms ease-out, filter 220ms ease-out;
  filter: saturate(0.85) contrast(1.02);
}

.project-tag {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: rgba(17, 24, 39, 0.86);
  color: #fefce8;
}

.project-body {
  padding: 0.95rem 1.2rem 1.15rem;
}

.project-title {
  font-size: 1rem;
  margin: 0 0 0.2rem;
  color: #111827;
}

.project-meta {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* -------------------------------------------------
   FORM
-------------------------------------------------- */

.form-row {
  margin-bottom: 1rem;
}

.form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* -------------------------------------------------
   SOCIAL 
-------------------------------------------------- */

.social-links {
  display: flex;
  flex-direction:column;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.social-links-footer {
  display: flex;
  flex-direction:column;
  gap: 1rem;
  margin-top: 0rem;
  justify-content: center;
}

/* SOCIAL */
.social-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 600;
  transition: color .2s ease;
    text-transform: uppercase;
}

.social-item:hover {
  color: var(--accent);
}

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.social-links-footer{
  text-align:center;
  flex-direction:row;
  flex-wrap:wrap;
  margin-top:15px;
}

/* =====================
   POPUP STYLES
===================== */

#popupOverlay,
#popupOverlayTwo {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.65);
  z-index: 99999;
}

#popupOverlay.active,
#popupOverlayTwo.active {
  display: flex !important;
}

#popupOverlay .popup-modal,
#popupOverlayTwo .popup-modal {
  background: #ffffff;
  width: min(900px, 90vw);
  max-height: 85vh;
  overflow-y: auto;

  border-radius: 14px;
  padding: 32px;
  position: relative;
}

#popupOverlay .popup-close,
#popupOverlayTwo .popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
}

body.popup-open {
  overflow: hidden;
}

#popupTitle,
#popupTitleTwo {
  font-size:1.2rem;
}

.popup-content p {
  /* border:1px solid black; */
  padding:20px;
  text-align:justify;
  border-radius:10px;
  background-color:rgba(236, 232, 232, 0.231);
}

/* =========================================================
   MORE PROJECTS — photo-overlay cards (match the hero)
========================================================= */
.more-projects .more-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.more-projects-grid .project-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.more-projects-grid .project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.2);
}

.more-projects-grid .project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.more-projects-grid .project-card:hover img {
  transform: scale(1.06);
}

.more-projects-grid .project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem 1.3rem;
  background: linear-gradient(
    to top,
    rgba(8, 15, 26, 0.86) 0%,
    rgba(8, 15, 26, 0.35) 45%,
    rgba(8, 15, 26, 0) 78%
  );
}

.more-projects-grid .project-card-kicker {
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-projects-grid .project-card-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
  .more-projects .more-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .more-projects .more-projects-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PROJECT INFO — two equal columns, vertically centered,
   with a hairline spanning behind both (left to right)
========================================================= */
/* clip (not hidden) keeps the full-bleed line from adding a
   horizontal scrollbar without breaking the sticky nav */
body {
  overflow-x: clip;
}

.project-info {
  position: relative;
}

/* The summary used to sit in a white panel with a 2px teal border, with a second
   teal rule running the full width of the page behind it. Replaced with a single
   hairline and open space. */
.project-info-grid {
  position: relative;
  z-index: 1;
  align-items: start;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  padding-top: 2.5rem;
}

/* the descriptor reads as a kicker above the name rather than a line under it */
.project-info-grid > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 768px) {
  section.project-info { margin-top: 2rem; }
  .project-info-grid { padding-top: 1.75rem; }
}


/* ==========================================================================
   SOURCE: hero.css
   ========================================================================== */

/* ------------------------------------------------- 
ABOUT MAIN HERO
-------------------------------------------------- */

.hero {
  position: relative;
  min-height: 60vh;
  padding: 3.5rem 0 3.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 5px solid var(--accent);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/project_ct-westport/westport_43.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.70;
  filter: grayscale(40%);
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #fdfdfd 0%, #fdfdfd 48%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent 55%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, 100% - 3rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 3.3fr) minmax(0, 2.4fr);
  gap: 2.5rem;
  align-items: center;
}

/* ------------------------------------------------- 
MISSION CARD
-------------------------------------------------- */

.hero-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--shadow-soft);
  padding: 2.4rem 2.6rem;
}

.hero-kicker {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.hero-title {
  font-size: clamp(2.1rem, 3.1vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 0.8rem;
  color: #101827;
}

.hero-title span {
  color: var(--accent);
}

.hero-text {
  font-size: 0.98rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.7rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.hero-meta span strong {
  display: block;
  color: var(--text-main);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  /* Mobile styles */
  
  .hero-title {
  font-size: clamp(1.1rem, 3.1vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 0.8rem;
  color: #101827;
}
}
/* ------------------------------------------------- 
SECONDARY COLUMN
-------------------------------------------------- */

.hero-secondary {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.hero-highlight {
  width: 100%;
  background: radial-gradient(circle at top left, var(--accent-soft), #ffffff);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(229, 231, 235, 0.9);
  padding: 1.8rem 2rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.hero-highlight-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #111827;
  margin-bottom: 1rem;
}

.hero-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hero-highlight-grid strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}


/* ------------------------------------------------- 
PROJECT PAGE HERO
-------------------------------------------------- */
.project-hero {
  position: relative;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  padding: 6rem clamp(1.5rem, 5vw, 4.5rem) 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  border-bottom: 4px solid var(--accent);
  overflow: hidden;
}

/* Dark gradient scrim so the heading reads crisply over any photo */
.project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 15, 26, 0.88) 0%,
    rgba(8, 15, 26, 0.45) 36%,
    rgba(8, 15, 26, 0.08) 66%,
    rgba(8, 15, 26, 0) 100%
  );
  pointer-events: none;
}

.project-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  background: none;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  text-align: left;
}

/* Accent rule above the title */
.project-hero-overlay::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 1.1rem;
  box-shadow: 0 2px 12px rgba(35, 115, 127, 0.55);
}

.project-hero-title {
  color: #ffffff;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 0.5rem;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.project-hero-location {
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   SOURCE: layout.2026.css
   ========================================================================== */

/* --------- Layout --------- */

.container {
  width: min(1120px, 100% - 3rem);
  margin: 0 auto;
}

.container-2{
  width: 80%;
  margin: 0 auto;
}

.section {
  padding: 2rem 0;
}

.section.projects {
  position: relative;
    background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.section.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-top: 2rem;
  background: linear-gradient(to bottom, #f9fafb, #eef1f7);
  z-index: -1;
}

/* -------------------------------------------------
   PROJECT INFO GRID 
-------------------------------------------------- */
.project-info {
  max-width: 1100px;
  margin: 3.5rem auto;
  padding: 0 2rem;
}

.project-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

/* -------------------------------------------------
   BIO GRID 
-------------------------------------------------- */

.bio-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin-top: 32px;
}

/* ============================
   PROJECTS GRID
============================ */

/* Grid constraint */
.projects-grid {
  max-width: 1250px; /* was 1100px */
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; /* slightly more spacing */
}

/* ============================
   MASONRY GRID
============================ */

.masonry {
  max-width: 1500px;
  margin: 0 auto;
  column-count: 3;
  column-gap: 1.5rem;
}

.masonry-grid {
  column-count: 2;
  column-gap: 1.5rem;
  margin-top: 2rem;
}

.masonry-item {
  position: relative;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 5px;
}



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

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width:100%;
}


/* =========================================================
   ABOUT GRID
   ========================================================= */


.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
  gap: 2.5rem;
  align-items: flex-start;
  margin-top: 1.8rem;
  background: var(--nav-bg);
}

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

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

/* -------------------------------------------------
   MASONRY GALLERY
-------------------------------------------------- */
.project-gallery {
  padding: 0rem 2rem;
}

.masonry-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1.5rem;
  display: block;
  transition: opacity .3s ease, transform .3s ease;
}

/* -------------------------------------------------
   MEDIA QUERIES
-------------------------------------------------- */
@media (max-width: 768px) {
  .project-info-grid { grid-template-columns: 1fr; }
  .masonry { column-count: 1; }
  .project-hero-title { font-size: 2.2rem; }
  .project-nav { flex-direction: column;}

  .contact-info .testimonials{
    display:none;
  }
.contact-points {
    display:none;
}

.hero-secondary {
  display:none;
}


.footer-grid{
grid-template-columns: minmax(0, 1fr);}

.footer-right{
  display:block;
  text-align:center;
}


.section-title {
font-size: 1.10rem;
line-height: 25px;
}


.forge-style {
  padding: 70px 0;
}



.section {
  padding: 1rem 0;
}

.hero-inner {
  width: min(100% - 2.4rem, 640px);
}

.projects-grid {
  /* the columns are re-declared unconditionally further down, so only this
     survives here */
  padding-top: 0px;
}


.footer-inner {
  flex-direction: column;
  align-items: flex-start;
}

.project-info {
  /* base rule already sets max-width:1100px and padding:0 2rem; only the
     vertical margin differs on phones */
  margin: 0;
}

.project-gallery {
    padding:20px;
}

.more-projects-grid {
    gap: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}


#mlogo {
  display: block;
  margin: auto;
}
/* --- ADDED IN THE MERGE ---------------------------------------------
   layout.2026.css ended with an unclosed @media (max-width: 768px), open
   since line 152. As its own file that was harmless: browsers close
   dangling blocks at EOF, so everything after line 152 simply applied at
   phone width. Concatenated, the same dangling brace would have swallowed
   nav.2026, pages, utilities and refresh.2026 into the mobile query and
   erased them on desktop. This brace closes it exactly where the browser
   already did, so rendering is unchanged.

   The rules above were reviewed one at a time. None of them turned out to be
   desktop rules trapped in the wrong place. The block was carrying four exact
   duplicates of rules declared elsewhere, two dead column declarations that a
   later unconditional rule re-declares, an override for a class no page uses,
   and a #mlogo none/block pair with identical conditions. Those are gone. What
   is left is deliberately phone-only and verified to render identically.
-------------------------------------------------------------------- */
}

/* --- LIFTED OUT OF THE MOBILE QUERY ---------------------------------
   These three breakpoints were nested inside the @media (max-width: 768px)
   above, which collapsed all of them to <=768px and left 769-1100px with no
   responsive treatment at all. Moved out to sibling level so they fire in
   their intended range. A byte-identical duplicate of the 1000px block was
   dropped in the same pass.
-------------------------------------------------------------------- */
/* Responsive */
@media (max-width: 1100px) {
  .masonry { column-count: 1; }
}

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


/* Responsive for more projects/nav */
@media (max-width: 900px) {
  .more-projects-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .bio-grid {
    grid-template-columns: 1fr;
  }
  .hero-inner,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .masonry-grid {
    column-count: 1;
  }
  .hero {
    padding-top: 2.8rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-secondary {
    order: -1;
  }

  .hero-card {
    padding: 2rem 2.1rem;
  }

  .about-grid,
  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-header{
    padding:20px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  
}


/* ==========================================================================
   SOURCE: nav.2026.css
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: var(--nav-blur, blur(14px));
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
}

/* --------- NAVBAR --------- */


.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  padding-right:20px;
  padding-inline: 1rem;
}

  /* .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
} */

.site-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  position: relative;
  padding-bottom: 0.25rem;
  transition: color .3s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--transition-fast, .0.2s ease);
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--nav-link-hover, var(--text));
}

.site-nav a:hover::after,
.site-nav a:focus::after {
  width: 100%;
}

/* ============================
   HAMBURGER BUTTON
============================ */

.nav-toggle {
  display: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: #ffffff;
  color: var(--text-main);
}

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  padding: 1.5rem 1.25rem;
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  z-index: 9999;
  border-bottom:2px solid #103c58;
  text-align:center;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a{
  text-decoration: none;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:black;
  text-transform:uppercase;
  font-weight:600;
}

.mobile-nav a:hover{
  color:#103c58;
}

/* ============================
   BRAND LOCKUP
   Client request: his full logo in the nav, at its original 14rem. It comes down
   at the breakpoints below purely so it fits — at 14rem it is 372px wide, which
   no phone can hold.
============================ */

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  height: 12rem;
  width: auto;
  flex: none;
  display: block;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  margin: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.1;
}

.brand-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.brand-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}




/* MOBILE MEDIA QUERIES */
/* The desktop nav row needs the brand lockup plus a 365px link row, which comes to
   ~1016px with the logo at full size. Below that "Contact" ran off the right edge
   and body's overflow-x:clip hid it, so the hamburger takes over from 1023px. */
@media (max-width: 1023px) {
  .nav-toggle {
    display: block;
  }
  .site-nav {
    display: none !important; /* hide desktop nav */
  }
  .brand-mark {
    height: 7rem;
  }

}

/* Phones: a sticky header should not eat a sixth of the screen, so the mark comes
   down and the header padding with it. Placed after the 900px block so it wins. */
@media (max-width: 560px) {
  .nav-inner {
    padding-block: 0.5rem;
  }
  .brand-mark {
    height: 4.2rem;
  }
  .brand-title {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    white-space: normal;
  }
  .brand-subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }
}

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

  .site-nav {
    display: none !important; /* hide desktop nav */
  }
}




/* -------------------------------------------------
   SHRINK-ON-SCROLL NAV (site-wide)
   Large logo at top, condenses once the user scrolls.
   main.js toggles `.scrolled` on `.site-header` past ~60px.
-------------------------------------------------- */
.site-header {
  transition:
    box-shadow 0.3s ease,
    background 0.3s ease,
    padding 0.3s ease;
}

.nav-inner {
  transition: padding 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.brand-mark {
  transition:
    height 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
    box-shadow 0.3s ease;
  will-change: height;
}

.site-header.scrolled {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.site-header.scrolled .nav-inner {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.site-header.scrolled .brand-mark {
  height: 4.75rem;
}

@media (max-width: 1023px) {
  .site-header.scrolled .nav-inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}


/* ==========================================================================
   SOURCE: pages.css
   ========================================================================== */

/* Info Pages */

.info-title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
}

.info-location {
  order: -1;
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.info-summary {
  margin-top: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
}

/* Highlights — hairline rows rather than filled pills */
.info-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
}

.info-highlights li {
  position: relative;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 0;
  margin: 0;
  padding: 0.95rem 0 0.95rem 1.4rem;
  font-size: 0.97rem;
  line-height: 1.5;
}

.info-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.6rem;
  height: 2px;
  background: var(--accent);
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-points {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
}

.about-points li {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.about-points li::before {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 2px;
  background: var(--accent);
  margin-top: 0.72rem;
}

/* was a rounded, bordered, drop-shadowed card floating beside the copy */
.about-sidebar {
  border-top: 1px solid var(--border-subtle);
  padding: 1.6rem 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.about-sidebar strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}


/* =========================================================
   CLEAN CONTACT SECTION
   ========================================================= */

.clean-contact {
  background: #ffffff;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.7rem;
  align-items: flex-start;
}

.contact-aside {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.contact-aside strong {
  color: var(--text-main);
}

.contact {
  background: #ffffff;
  color: #222;
}

.contact-grid {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 3rem;
  margin-top: 2rem;
}

.contact-info h3 {
  margin: 1.2rem 0 0.4rem;
  font-size: 1.05rem;
  color: #333;
}

.contact-info p {
  margin: 0 0 .5rem;
  color: #555;
}

.contact-info .section-title {
  color: #111;
}

/* =========================================================
   PROJECTS PAGES
   ========================================================= */


.projects {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: #222;
}
.projects-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.work-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.work-item:hover img {
  transform: scale(1.05);
}

.work-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity .3s ease;
}

.work-overlay h3 {
  margin: 0;
  font-size: 1.2rem;
}

.work-overlay p {
  margin: 0.3rem 0 0;
  font-size: .9rem;
  opacity: .9;
}

.work-item:hover .work-overlay {
  opacity: 1;

}
/* =========================================================
   PROJECT FILTER BAR
=========================================================  */

.project-filters {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 0px;
  width: 100%;
}

.filter-btn {
  background: none;
  /* border: 1px solid var(--border-subtle); */
  border:0px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  transition: background 200ms ease, color 200ms ease;
  text-transform: uppercase;
  font-size:.95rem;
}

.filter-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight:400;
}

.filter-btn:hover{
  border: 1px solid black;
}

.filter-btn.active:hover{
  border:0px;
}

/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 8px;
}

/* Below ~380px the 320px track floor plus the container's side padding is wider
   than the screen. One column can never overflow. */
@media (max-width: 380px) {
  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =========================================================
   PROJECT CARD – BASE + FILTER ANIMATION
========================================================= */

.project-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;

  opacity: 1;
  transform: translateY(0) scale(1);

  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
  /* aspect-ratio: 3 / 5; */
  border-radius:10px;
}

/* Visible state */
.project-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hidden state */
.project-card.is-hidden {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  pointer-events: none;
}


/* =========================================================
   PROJECT IMAGE MOTION
========================================================= */

.project-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;

  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Image zoom on exit */
.project-card.is-hidden img {
  transform: scale(1.15);
}


/* =========================================================
   HOVER TITLE OVERLAY
========================================================= */

.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 260ms ease;
}

.project-overlay h3 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;

  transform: translateY(12px);
  transition: transform 260ms ease;
}

/* Hover behavior */
.project-card:hover .project-overlay {
  opacity: 1;
}

.project-card:hover .project-overlay h3 {
  transform: translateY(0);
}


/* =========================================================
   MOBILE FALLBACK (NO HOVER)
========================================================= */

@media (hover: none) {
  .project-overlay {
    opacity: 1;
  }

  .project-overlay h3 {
    transform: none;
  }
}

.project-link {
  display: block;
  text-decoration: none;
  color: inherit;
}


  /* -------------------------------------------------
   STICKY FILTER BAR
-------------------------------------------------- */
.project-filters {
  text-align: center;
  margin: 3rem 0 2.5rem;
  padding: 1rem;
  background: var(--bg);
}
.project-filters.sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.filter-option {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 1rem;
  cursor: pointer;
}

.filter-option input {
  transform: scale(1.2);
}


  /* -------------------------------------------------
   MORE PROJECTS
-------------------------------------------------- */

/* Next / Previous nav */
.project-nav {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.project-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: var(--muted);
  color: var(--text);
  font-weight: 600;
  transition: background .25s ease, color .25s ease;
}
.project-nav a:hover {
  background: var(--accent);
  color: #fff;
}

/* More projects grid */
.more-projects {
  max-width: 1100px;
  margin: 4rem auto 5rem;
  padding: 0 2rem;
}
.more-projects-header {
  display: block;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.more-projects-title {
  font-size: 1.7rem;
  font-weight: 700;
}
.more-projects-subtitle {
  font-size: .95rem;
  color: #777;
}

.more-projects-grid {
  display: flex;
  gap: 1.5rem;
}

.more-projects-grid > * {
  flex: 1 1 0;
}



/* =========================================================
   BIO SECTION
========================================================= */

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


.bio-sidebar {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.bio-sidebar img{
  width:50%; border-radius:100px; border:5px solid rgba(0, 128, 128, 0.132);;
}

.bio-stats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bio-stats {
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}

.bio-stats li {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bio-stats strong {
  display: block;
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 2px;
}

.bio-stats span {
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* =========================================================
   READY SECTION
   ========================================================= */

   #ready {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 0fr;
    gap: 2.5rem;
      background: rgba(244, 244, 244, 0.384);
    /* border-bottom: 1px solid var(--nav-border); */
    margin:auto;
    justify-content: center;
    text-align:center;
    gap:0;
  }
  
  #ready .section-lead {
    margin:auto;
  }
  
/* =========================================================
   CONTACT PAGE
   ========================================================= */
  .clean-contact {
    background: #fff;
    color: #222;
  }
  

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

  .forge-style h3{
    font-size:3.8rem;
    opacity: 75%;
  }
  
  .forge-style {
    padding: 50px 0;
  }
  .forge-style {
    padding: 40px 0;
    padding-bottom:0px;
  }
  
  .forge-style__wrap {
    max-width: 1500px;
    height: 700px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
  }
  
  /* Panels */
  .forge-panel {
    flex: 1;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
      flex 0.7s cubic-bezier(.16,.84,.44,1),
      filter .4s ease;
    display: flex;
    align-items: flex-end;
    padding: 28px;
  }
  
  /* Image sources */
  .forge-panel--one {
    background-image: url("/assets/img/project_ct-westport/westport_38.webp");
    border-radius:5px;
  }
  
  .forge-panel--two {
    background-image: url("/assets/img/project_fl-palmbeach/palmbeach_02.webp");
    border-radius:5px;
  }
  
  .forge-panel--three {
    background-image: url("/assets/img/project_ct-westport/westport_54.webp");
    border-radius:5px;
  }
  
  /* Text */
  .forge-panel h3 {
    color: #fff;
    font-size: 4.5rem;
    margin: 0;
    z-index: 2;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    letter-spacing:-5px;
  }

  /* At 4.5rem the longest word ("CONTACT", ~321px) is wider than a panel once the
     three of them share a viewport under ~1150px, which pushed the third panel past
     the right edge. Panels stack below 900px, so this only has to cover the band
     between. Desktop above 1150px is untouched. */
  @media (max-width: 1150px) {
    .forge-panel h3 {
      font-size: 3.4rem;
      letter-spacing: -3px;
    }
  }
  
  /* When hovering the container, hide all titles */
  .forge-style__wrap:hover .forge-panel h3 {
    opacity: 0;
    transform: translateY(10px);
  }
  
  /* Restore title on the hovered panel */
  .forge-style__wrap .forge-panel:hover h3 {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Smooth transition */
  .forge-panel h3 {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  
  
  /* Overlay */
  .forge-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.45),
      rgba(0,0,0,.05)
    );
    transition: opacity .4s ease;
  }
  
  /* Shrink non-hovered panels */
  .forge-style__wrap:hover .forge-panel {
    flex: 0.6;
    filter: grayscale(.2) brightness(.85);
  }
  
  /* Hovered panel dominates */
  .forge-style__wrap .forge-panel:hover {
    flex: 2.6;
    filter: none;
  }
  
  /* Lighten overlay on hover */
  .forge-style__wrap .forge-panel:hover::before {
    opacity: 0.15;
  }
  
  /* Mobile fallback */
  @media (max-width: 900px) {
    .forge-style__wrap {
      flex-direction: column;
      height: auto;
    }
  
    .forge-panel {
      height: 260px;
      flex: none !important;
      filter: none;
    }
        .info-title {
    font-size: 1.3rem;
    font-weight: 700;
    }
    
    .project-filters {
  text-align: center;
  margin: 0;
  padding: 1rem;
  background: var(--bg);
}

.more-projects {
  max-width: 1100px;
  margin: 0rem auto 5rem;
  padding: 0 2rem;
}

  }
  @media (max-width: 720px) {
    .forge-panel h3{
      font-size:3.75rem;
    }
    .info-title {
    font-size: 1.8rem;
    font-weight: 700;
    }
    
    .more-projects {
  max-width: 1100px;
  margin: 0rem auto 5rem;
  padding: 0 2rem;
}}
.more-projects-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
  .more-projects-grid > * {
    flex: 0 0 100%;
  }
}

  


/* ==========================================================================
   SOURCE: utilities.css
   ========================================================================== */

/* Category Pills */
.category-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  font-size: .75rem;
  border-radius: 50px;
}


/* View More functionality */


.view-more-wrap {
  text-align: center;
  margin-top: 2.5rem;
}

.btn-blue.view-less {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

/* -------------------------------------------------
   MASONRY GALLERY
-------------------------------------------------- */

.masonry-item.hidden-gallery {
  display: none;
}


/* =========================================
   FILTER FADE + COLLAPSE
========================================= */

.masonry-item {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.masonry-item.hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  pointer-events: none;
}

/* IMPORTANT: remove from layout AFTER fade */
.masonry-item.collapsed {
  display: none;
}

/* Hide desktop toggle on mobile */
@media (max-width: 900px) {
  .dark-toggle-desktop {
    display: none;
  }
}

/* Hide mobile toggle on desktop */
@media (min-width: 901px) {
  .dark-toggle-mobile {
    display: none;
  }
}


/* =========================================
   PROJECT PAGES GALLERY FILTER — FLIP + FADE
========================================= */

.masonry-item {
  opacity: 1;
  transition:
    opacity 400ms ease,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.masonry-item.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Optional: a little exit zoom (like your projects page) */
.masonry-item img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.masonry-item.is-hidden img {
  transform: scale(1.08);
}

/* =========================================
   LIGHTBOX NAV ARROWS
========================================= */

.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
}

.lightbox-arrow.left {
  left: 16px;
}

.lightbox-arrow.right {
  right: 16px;
}

/* Bigger tap targets on mobile */
@media (max-width: 768px) {
  .lightbox-arrow {
    width: 56px;
    height: 56px;
    font-size: 40px;
  }
}




.category-pill {
  display: none !important;
}

/* =========================================================
   IMAGES — intrinsic dimensions safety net
   ========================================================= */
/* Every <img> carries width and height attributes so the browser can
   reserve space and stop the layout jumping as photos load. Browsers
   derive an aspect-ratio from those attributes only while the computed
   height stays auto, so state it. Lives here rather than in
   refresh.2026.css because only 5 of the 28 pages load that file, and
   the 23 project pages are the ones with the large galleries.
   Class-level rules such as .brand-mark's fixed height still win. */
img {
  height: auto;
}


/* ==========================================================================
   SOURCE: refresh.2026.css
   ========================================================================== */

/* =============================================================
   REFRESH 2026 — Refined & Subtle modernization layer
   Loaded LAST so it overrides the base stylesheets.
   Keeps the existing teal identity; tightens type, spacing,
   buttons, cards, and adds shrink-on-scroll nav.
============================================================= */

/* -------------------------------------------------
   1. PAGE FOUNDATION
-------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  /* base.css set background:var(--bg) which is undefined in light mode (rendered white) */
  background: #ffffff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings reverted to the original system font (per request) */
h1, h2, h3,
.section-title,
.hero-title,
.hero-highlight-title,
.gallery-title,
.project-overlay-title,
.project-hero-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* -------------------------------------------------
   2. TYPE SCALE
-------------------------------------------------- */
#ready h1,
.container > h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #101827;
  margin-bottom: 0.9rem;
}

/* Homepage h1 on a single line on desktop; font scales with the
   viewport so it fits without overflowing. Wraps on mobile. */
@media (min-width: 769px) {
  #ready h1 {
    white-space: nowrap;
    font-size: clamp(1.4rem, 3vw, 2.45rem);
  }
}

.section-title {
  font-size: clamp(1.85rem, 3.2vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.section-lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* About section intro paragraphs: let them span the full section
   (comps.css caps .section-lead at 680px) */
#about > .container > .section-lead {
  max-width: none;
}

/* Homepage CTA lead: drop the 680px cap so it sits on one line on
   desktop (it's ~750px wide) and wraps naturally on narrow screens. */
.cta-lead {
  max-width: none;
}

/* -------------------------------------------------
   3. SECTION RHYTHM
-------------------------------------------------- */
.section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

/* -------------------------------------------------
   4. BUTTONS — refined, consistent, tactile
-------------------------------------------------- */
.btn-blue,
#ready .btn-blue {
  padding: 0.95rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(35, 115, 127, 0.22);
  transition:
    background var(--transition-fast, 180ms ease-out),
    transform var(--transition-fast, 180ms ease-out),
    box-shadow var(--transition-fast, 180ms ease-out);
}

.btn-blue:hover,
#ready .btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(35, 115, 127, 0.3);
}

.btn-blue:active,
#ready .btn-blue:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(35, 115, 127, 0.22);
}

.btn-blue:focus-visible,
#ready .btn-blue:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 3px;
}

/* -------------------------------------------------
   5. HOMEPAGE FORGE PANELS — softer, more polished
-------------------------------------------------- */
.forge-style__wrap {
  border-radius: 14px;
}

.forge-panel {
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.forge-panel h3 {
  letter-spacing: -2px;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------
   6. PROJECT CARDS — ease the heavy filter
-------------------------------------------------- */
.project-image-wrapper img {
  filter: saturate(0.95) contrast(1.01);
}

/* -------------------------------------------------
   6b. ABOUT — tighten Neill's bio card (too tall / empty)
-------------------------------------------------- */
/* Grid items stretch by default, forcing the card to match the
   tall bio text column. Let it size to its own content instead. */
.bio-grid {
  align-items: start;
}

.bio-sidebar {
  padding: 0;
}

/* Editorial portrait: rounded rectangle instead of a small circle, sized
   so the card ends near the bottom of the bio copy beside it. The intro
   paragraph now sits in the left column rather than spanning above the
   grid, which added ~185px of text, so the photo can run close to the
   card width again. 678x853 source, so ~270px wide is ~340px tall. */
.bio-sidebar img {
  width: 100%;
  max-width: 300px;
  border-radius: 6px;
  border: none;
  box-shadow: none;
  margin: 0 auto 1.6rem;
}

.bio-stats strong {
  font-size: 0.95rem;
}

/* Capabilities list: in-list blue buttons -> subtle accent links
   (they open the Permit / Iron Triangle popups) */
.about-points .btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
}

.about-points .btn-blue::after {
  content: "\203A"; /* › */
  font-weight: 700;
  transition: transform 0.18s ease;
}

.about-points .btn-blue:hover {
  background: none;
  color: #103c58;
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-points .btn-blue:hover::after {
  transform: translateX(3px);
}

/* NOTE: shrink-on-scroll nav moved to nav.2026.css so it applies site-wide. */

/* -------------------------------------------------
   7. ABOUT — recognition block (Illustrated Properties)
-------------------------------------------------- */
/* Portrait 4:5 card, so the image column is held narrow and the copy
   runs beside it. At full width the card would be ~500x625 and push
   the section far taller than the text it belongs to. */
.recognition-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 36px;
  margin-top: 24px;
}

.recognition-figure {
  margin: 0;
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 12px 12px 4px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.recognition-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.recognition-figure figcaption {
  padding: 10px 2px 8px;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* comps.css caps .section-lead at 680px; here the column is already
   narrow, so let the copy use it rather than leave a ragged gutter. */
.recognition-copy .section-lead {
  max-width: none;
}

.recognition-copy .section-lead:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .recognition-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Keep the card from filling a phone screen on its own */
  .recognition-figure {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* -------------------------------------------------
   8. ABOUT — close the gaps around the recognition block
-------------------------------------------------- */
/* .section is clamp(2.5rem, 5vw, 4.5rem) top and bottom, so stacked
   sections leave ~144px between them at desktop. That reads as dead
   space here because the bio card and the recognition card both end
   well above their neighbouring copy. Halve it through this run.
   The Testimonials heading also carried an inline margin-top:50px,
   removed from about.html so this spacing is the only thing at work. */
#bio {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

#recognition {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.contact-testimonials {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}