/* ==========================================================================
   SITE-WIDE SMOOTH SCROLLING & FLUID TYPOGRAPHY VARIABLES (CLAMP)
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

:root {
  --serif: "Poppins", sans-serif;
  --sans: "Poppins", sans-serif;
  
  /* Recommended Fluid Typography with clamp() */
  --font-h1: clamp(27px, 3.2vw, 46px);
  --font-h2: clamp(21px, 2.25vw, 32px);
  --font-h3: clamp(16px, 1.45vw, 21px);
  --font-h4: clamp(14px, 1.1vw, 16px);
  --font-h5: clamp(13px, 0.95vw, 14px);
  --font-h6: clamp(11px, 0.85vw, 12px);
  
  --font-eyebrow: clamp(9.5px, 0.8vw, 11px);
  --font-lead: clamp(15px, 1.25vw, 18px);
  --font-body: clamp(14px, 1.1vw, 16px);
  --font-small: clamp(10.5px, 0.85vw, 12px);
  --font-button: clamp(11.5px, 0.95vw, 13px);
}

/* Fixed-geometry cards and centered theme control — original navy/brass site. */
.site-header .theme-toggle,
.mobile-menu .theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--depth-rim);
  border-radius:10px;
  line-height:1;
}
.theme-toggle [data-theme-icon] { display:flex; align-items:center; justify-content:center; width:20px; height:20px; line-height:0; }
.theme-toggle [data-theme-icon] .icon { display:block; width:18px; height:18px; margin:0; transform:none; }
/* A rotation made the asymmetric moon look off-centre on hover. */
.theme-toggle:hover [data-theme-icon] .icon { transform:none; }

/* ==========================================================================
   Header Navbar "Enquire Now" CTA:
   - Completely removed/hidden from navbar across all screens
     (PC, Laptop, Tablet, Mobile)
   ========================================================================== */
.site-header .header-cta,
.site-header a.header-cta,
.header-actions .header-cta {
  display: none !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 767px) {
  .site-header .header-actions {
    gap: 8px !important;
  }
}

.process-grid,.values-grid { align-items:stretch; gap:24px; }
/* Four across on a desktop, down from six. Six columns squeezed each card to
   roughly 180px on a 1440px screen: headings wrapped to three lines and the
   body text became a column of two-word rows.

   Six steps into four columns leaves a trailing row of two. That is accepted
   deliberately -- the cards are numbered 01 to 06, so the eye reads them left
   to right and wraps, and the short last row reads as the end of a sequence
   rather than as a gap. Unnumbered cards would need three across instead.

   Home, About and Services all share this grid. */
.process-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.values-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.process-grid article,.values-grid article {
  min-width:0;
  padding:22px 20px;
  border:1px solid var(--depth-rim);
  border-radius:12px;
  background:var(--surface);
  box-shadow:inset 0 1px 0 var(--depth-edge),0 2px 5px var(--raised-base),0 6px 14px -6px var(--raised-shadow);
  overflow-wrap:anywhere;
  transform:none;
  transition:transform 260ms cubic-bezier(.16,1,.3,1),border-color 260ms ease,box-shadow 260ms ease,background-color 260ms ease;
}
.process-grid article.reveal { transition:opacity 600ms ease,transform 260ms cubic-bezier(.16,1,.3,1),border-color 260ms ease,box-shadow 260ms ease,background-color 260ms ease; }
.process-grid article:hover,.values-grid article:hover,
.process-grid article:focus-within,.values-grid article:focus-within {
  border-color:var(--accent-ink) !important;
  background:var(--footer-bg, #f6f1e8) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 4px 12px -2px rgba(35,28,20,.1),0 2px 6px -2px rgba(35,28,20,.06) !important;
  cursor:pointer;
}
.process-grid article::before { content:none; }
.process-grid article { display: flex !important; flex-direction: column !important; height: 100% !important; }
.process-grid .step-number { line-height:1.1; margin:0 0 16px; }
.process-grid h3 { margin:0 0 10px; min-height:2.8em; }
.values-grid article > span { display:block; line-height:1.3; }
.values-grid h3 { margin:14px 0 10px; }
.process-grid p,.values-grid p { margin:0; }
.process-grid article p { margin-top: auto !important; }
@media (max-width:1279px) {
  /* Below a full desktop, four columns put the cards back under 200px, so the
     count steps down to three -- which also squares the rows off, six being
     divisible by three. The full ladder is 4 / 3 / 2 / 1. */
  .process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .process-grid,.values-grid { gap:20px; }
}
@media (max-width:1023px) {
  .values-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .process-grid,.values-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; }
  .process-grid article,.values-grid article { padding:18px 14px; border-radius:10px; }
  .process-grid .step-number { margin-bottom:14px; }
}
@media (max-width:374px) {
  .process-grid,.values-grid { grid-template-columns:1fr; }
  .process-grid h3 { min-height:0; }
}

/* Projects: category filters as label-width chips — same finish as the
   Services jump index (light surface, slim padding, gold active face). */
body[data-route="projects/"] .gallery-toolbar { display:block; border-top:0; border-bottom:0; padding:0 0 10px; margin-bottom:28px; }
body[data-route="projects/"] .filters { --chip-face:#f3e5cc; --chip-rim:#b58a48; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:5px; padding-bottom:0; }
html[data-theme="dark"] body[data-route="projects/"] .filters { --chip-face:#463722; --chip-rim:#ccaa68; }
body[data-route="projects/"] .filter-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:0; min-height:32px; padding:5px 7px;
  border:1px solid var(--depth-rim); border-radius:12px;
  background:var(--surface); color:var(--text);
  font-size:10px; font-weight:500; line-height:1.5;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  box-shadow:inset 0 1px 0 var(--depth-edge),0 2px 2px var(--raised-base),0 6px 14px -8px var(--raised-shadow);
  transform:none; scale:none;
  transition:box-shadow 260ms ease,border-color 260ms ease,background-color 260ms ease;
}
body[data-route="projects/"] .filter-button:hover {
  box-shadow:inset 0 1px 0 var(--depth-edge),0 4px 6px var(--raised-base),0 14px 28px -6px var(--raised-shadow);
}
body[data-route="projects/"] .filter-button.active,
body[data-route="projects/"] .filter-button[aria-pressed="true"] {
  background:var(--chip-face); color:var(--text); border-color:var(--chip-rim);
  box-shadow:inset 0 0 0 1px var(--chip-rim),inset 0 1px 0 var(--depth-edge),0 2px 2px var(--raised-base),0 8px 16px -9px var(--raised-shadow);
}
body[data-route="projects/"] .filter-button:active { box-shadow:inset 0 2px 4px var(--raised-shadow),0 1px 0 var(--depth-rim); }
body[data-route="projects/"] .filter-button:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; }
body[data-route="projects/"] #gallery-count { display:block; text-align:left; margin:8px 0 0; font-size:11px; }
/* Gallery: photo/video filters as the same label-width chips. */
body[data-route="gallery/"] .media-toolbar { display:block; border-top:0; border-bottom:0; padding:0 0 10px; margin-bottom:28px; }
body[data-route="gallery/"] .media-filters { --chip-face:#f3e5cc; --chip-rim:#b58a48; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:5px; }
html[data-theme="dark"] body[data-route="gallery/"] .media-filters { --chip-face:#463722; --chip-rim:#ccaa68; }
body[data-route="gallery/"] .media-filters button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:0; min-height:32px; padding:5px 7px;
  border:1px solid var(--depth-rim); border-radius:12px;
  background:var(--surface); color:var(--text);
  font-size:10px; font-weight:500; line-height:1.5;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  box-shadow:inset 0 1px 0 var(--depth-edge),0 2px 2px var(--raised-base),0 6px 14px -8px var(--raised-shadow);
  transform:none; scale:none;
  transition:box-shadow 260ms ease,border-color 260ms ease,background-color 260ms ease;
}
body[data-route="gallery/"] .media-filters button span { opacity:.75; font-size:9px; }
body[data-route="gallery/"] .media-filters button:hover {
  box-shadow:inset 0 1px 0 var(--depth-edge),0 4px 6px var(--raised-base),0 14px 28px -6px var(--raised-shadow);
}
body[data-route="gallery/"] .media-filters button[aria-pressed="true"] {
  background:var(--chip-face); color:var(--text); border-color:var(--chip-rim);
  box-shadow:inset 0 0 0 1px var(--chip-rim),inset 0 1px 0 var(--depth-edge),0 2px 2px var(--raised-base),0 8px 16px -9px var(--raised-shadow);
}
body[data-route="gallery/"] .media-filters button:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; }
body[data-route="gallery/"] #media-status { display:block; text-align:left; margin:8px 0 0; }

/* ==========================================================================
   Gallery Page: Image & Video Cards Responsive Arrangement
   - Greater than Tab screen (>= 900px / PC & Laptop): 3 cards in one row
   - Tab screen (768px - 899px): 2 cards in one row
   - Mobile (<= 767px): 1 column, fluid 100% width, balanced aspect-ratio
   - Small Mobile (<= 420px): 1 column, compact padding & touch controls
   ========================================================================== */
.media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 900px) {
  .media-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.media-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.media-open {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  text-align: left !important;
}

.media-thumbnail {
  width: 100% !important;
  aspect-ratio: 16 / 10.5 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.media-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.media-thumbnail:has(img) .media-play {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
  left: calc(50% - 19px) !important;
  top: calc(50% - 19px) !important;
}

.media-kind {
  padding: 4px 8px !important;
  font-size: 8.5px !important;
  border-radius: 5px !important;
}

.media-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.media-title {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere !important;
}

/* Tablet screen (768px - 899px): 2 columns */
@media (min-width: 768px) and (max-width: 899px) {
  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Mobile Devices (<= 767px): 1 column, fully fluid width */
@media (max-width: 767px) {
  .media-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .media-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .media-open {
    width: 100% !important;
  }
  .media-thumbnail {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }
  .media-meta {
    padding: 11px 13px !important;
  }
  .media-title {
    font-size: 13px !important;
  }
}

/* Small Mobile Devices (<= 420px): compact padding & controls */
@media (max-width: 420px) {
  .media-grid {
    gap: 13px !important;
  }
  .media-thumbnail {
    aspect-ratio: 16 / 10 !important;
  }
  .media-meta {
    padding: 9px 11px !important;
  }
  .media-title {
    font-size: 12.5px !important;
  }
  .media-thumbnail:has(img) .media-play {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    left: calc(50% - 16px) !important;
    top: calc(50% - 16px) !important;
  }
  .media-kind {
    padding: 3px 6px !important;
    font-size: 7.5px !important;
  }
}
/* Contact: separate FAQ cards, without changing the questions or accordion logic. */
body[data-route="contact-us/"] .faq-list { display:grid; gap:14px; align-content:start; }
body[data-route="contact-us/"] .faq-list details {
  min-width:0; border:1px solid var(--depth-rim); border-radius:12px;
  background:linear-gradient(140deg,var(--depth-glass-strong),var(--surface));
  box-shadow:inset 0 1px 0 var(--depth-edge),0 5px 14px -10px var(--depth-shadow);
  transition:border-color 220ms ease,box-shadow 220ms ease;
}
body[data-route="contact-us/"] .faq-list details:hover,
body[data-route="contact-us/"] .faq-list details[open] {
  border-color:var(--accent-ink);
  box-shadow:inset 0 1px 0 var(--depth-edge),0 8px 20px -13px var(--depth-shadow);
}
body[data-route="contact-us/"] .faq-list summary { min-height:72px; padding:18px 22px; gap:18px; font-weight:500; line-height:1.6; border-radius:11px; }
body[data-route="contact-us/"] .faq-list summary > span {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 30px; width:30px; height:30px; line-height:1;
  border:1px solid var(--depth-rim); border-radius:50%; background:var(--surface);
}
body[data-route="contact-us/"] .faq-list details > p { padding:0 22px 22px; margin:0; line-height:1.85; overflow-wrap:anywhere; }
body[data-route="contact-us/"] .faq-list summary:focus-visible { outline:2px solid var(--accent-ink); outline-offset:-5px; }
@media (max-width:767px) {
  body[data-route="projects/"] .filters { gap:5px; }
  body[data-route="projects/"] .filter-button { min-height:32px; padding:5px 7px; }
  body[data-route="projects/"] .gallery-toolbar { margin-bottom:24px; }
  body[data-route="gallery/"] .media-filters { gap:5px; }
  body[data-route="gallery/"] .media-filters button { min-height:32px; padding:5px 7px; }
  body[data-route="gallery/"] .media-toolbar { margin-bottom:24px; }
  body[data-route="contact-us/"] .faq-list { gap:12px; }
  body[data-route="contact-us/"] .faq-list summary { padding:16px; gap:14px; }
  body[data-route="contact-us/"] .faq-list details > p { padding:0 16px 18px; }
}

/* Section spacing tightening (all pages) */
.section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 1200px) {
  .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
@media (max-width: 767px) {
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
.section-heading {
  margin-bottom: 30px !important;
  gap: 30px !important;
}
.page-heading {
  padding-top: 56px !important;
  padding-bottom: 45px !important;
}
.values-banner {
  padding: 48px 0 !important;
}
.final-cta {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.site-footer {
  padding-top: 48px !important;
}
.service-detail,
.location-section {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* ==========================================================================
   Service Page: Detail Sections Responsive Split & Uniform Image Alignment
   - Tab and Greater screens (>= 768px):
     * Image top starting point aligned with content heading
     * Image height compact, proportional & balanced (aspect-ratio: 4/3, max 390px)
     * All service images identical in size across all sections
     * align-items: start for clean editorial baseline
   - Greater than Tab screen (>= 900px / PC & Laptop): Image (5) Content (7)
     * Odd rows: Image (5fr) on left, Content (7fr) on right
     * Even rows: Content (7fr) on left, Image (5fr) on right
   - Tab screen (768px - 899px): balanced 2-column split (1fr 1fr)
   - Mobile screen (<= 767px): 1-column stacked (Image on top, Content below)
   ========================================================================== */
@media (min-width: 900px) {
  .service-detail {
    display: grid !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    gap: 52px 44px !important;
    align-items: start !important;
  }
  .service-detail-copy {
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .service-detail-copy .service-category {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
  }
  .service-detail-copy h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .service-detail-image {
    align-self: start !important;
    margin-top: 22px !important;
    position: sticky !important;
    top: 110px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 32 / 45 !important;
    max-height: min(765px, calc(100vh - 140px)) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
  .service-detail-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .service-detail:nth-child(odd) .service-detail-image {
    order: 1 !important;
  }
  .service-detail:nth-child(odd) .service-detail-copy {
    order: 2 !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
  }
  .service-detail:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
  }
  .service-detail:nth-child(even) .service-detail-copy {
    order: 1 !important;
    padding-right: 10px !important;
    padding-left: 0 !important;
  }
  .service-detail:nth-child(even) .service-detail-image {
    order: 2 !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .service-detail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 36px 28px !important;
    align-items: start !important;
  }
  .service-detail-copy {
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .service-detail-copy .service-category {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
  }
  .service-detail-copy h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
  .service-detail-image {
    align-self: start !important;
    margin-top: 20px !important;
    position: sticky !important;
    top: 105px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 32 / 45 !important;
    max-height: min(585px, calc(100vh - 130px)) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
  .service-detail-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .service-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
  .service-detail .service-detail-image {
    order: 1 !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 280px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .service-detail .service-detail-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .service-detail .service-detail-copy {
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

#philosophy .philosophy-grid {
  gap: 20px !important;
}

/* About page: Combined OUR STORY & OUR APPROACH 50% 50% single section on PC */
.about-story-approach {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 70px !important;
  align-items: start !important;
  padding-top: 80px !important;
  padding-bottom: 85px !important;
  border-bottom: 1px solid var(--border) !important;
}

.about-story-approach .story-approach-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.about-story-approach .col-header {
  margin-bottom: 6px !important;
}

.about-story-approach .col-header .eyebrow {
  margin-bottom: 12px !important;
}

.about-story-approach .col-header h2 {
  font-family: var(--serif) !important;
  font-size: var(--font-h2) !important;
  line-height: 1.28 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.about-story-approach .col-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.about-story-approach .lead {
  font-family: var(--sans) !important;
  font-size: var(--font-lead) !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.about-story-approach p:not(.eyebrow):not(.lead) {
  font-size: var(--font-body) !important;
  color: var(--text-secondary-readable) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.about-story-approach .approach-col {
  border-left: 1px solid var(--border) !important;
  padding-left: 70px !important;
}

.about-story-approach .experience-note {
  border-left: 2px solid var(--accent, #c4a47c) !important;
  padding: 18px 22px !important;
  background: var(--surface-soft, #f7f4ef) !important;
  margin-top: 10px !important;
  border-radius: 0 6px 6px 0 !important;
}

.about-story-approach .experience-note .eyebrow {
  margin-bottom: 8px !important;
  font-size: 9px !important;
}

.about-story-approach .experience-note > p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
}

.about-story-approach .experience-note > p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 1023px) {
  .about-story-approach {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
    padding-top: 40px !important;
    padding-bottom: 45px !important;
  }
  .about-story-approach .approach-col {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 45px !important;
  }
}

/* Align index buttons / filter chips strictly to the left (no middle / no center) */
body .service-jump,
body[data-route="projects/"] .filters,
body[data-route="gallery/"] .media-filters {
  justify-content: flex-start !important;
}
body[data-route="projects/"] #gallery-count,
body[data-route="gallery/"] #media-status {
  text-align: left !important;
}

/* Unified white background for body and all page sections */
body,
body section,
body .section,
body .home-services,
body .testimonials,
body .founder-section,
body .story-material-section,
body .final-cta,
body .philosophy,
body .philosophy-copy,
body .media-collection,
body .media-enquiry,
body .service-detail,
body .location-section,
body .faq-section,
body .scope-note,
body .editorial-split,
body .about-approach,
body .about-story-approach {
  background: var(--page-bg, #ffffff) !important;
}

body .final-cta {
  background: var(--page-bg, #ffffff) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
}
body .final-cta::before {
  display: none !important;
}

/* ==========================================================================
   About Page: "Meet the Designer" Typography & Quote Size Reduction
   ========================================================================== */
.founder-section .founder-copy .lead {
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  margin: 14px 0 8px !important;
}

.founder-section .founder-copy h2 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

.founder-section .founder-copy .founder-role {
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 14px !important;
}

.founder-section .founder-copy .small-note {
  font-size: 11px !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  opacity: 0.8 !important;
}

.founder-section .founder-copy p[data-biography],
.founder-section .founder-copy > p:not(.eyebrow):not(.lead):not(.founder-role):not(.small-note) {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .founder-section .founder-copy .lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .founder-section .founder-copy h2 {
    font-size: 22px !important;
  }
}

@media (max-width: 767px) {
  .founder-section .founder-copy .lead {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .founder-section .founder-copy h2 {
    font-size: 20px !important;
  }
  .founder-section .founder-copy p[data-biography],
  .founder-section .founder-copy > p:not(.eyebrow):not(.lead):not(.founder-role):not(.small-note) {
    font-size: 13px !important;
  }
}

/* Unified footer background & color across all 20 pages */
body .site-footer,
footer.site-footer {
  background: var(--footer-bg, #f6f1e8) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* WHAT WE CAN CREATE TOGETHER (Home services): remove all on-hover effects; clean natural cards */
body.home-page .service-preview,
.home-services .service-preview {
  min-width: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow-wrap: anywhere;
  transition: none !important;
}
body.home-page .service-preview:hover,
body.home-page .service-preview:focus-within,
.home-services .service-preview:hover,
.home-services .service-preview:focus-within {
  border: none !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
.home-services .service-preview a:hover img,
body.home-page .service-preview a:hover img {
  transform: none !important;
  filter: none !important;
}

/* WORDS THAT MATTER: use clean paragraph text styling */
#client-reviews blockquote,
#client-reviews #testimonial-quote,
.testimonial-slider blockquote {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--font-body) !important;
  line-height: 1.75 !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  text-wrap: pretty;
}
#client-reviews .quote-mark {
  font-family: var(--sans) !important;
  font-style: normal !important;
  color: var(--accent-ink, #8b6d3b) !important;
  opacity: 0.15 !important;
}
#client-reviews .testimonial-person,
.testimonial-slider .testimonial-person {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  margin: 0 !important;
}
#client-reviews .testimonial-person span,
.testimonial-slider .testimonial-person span {
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  color: var(--text-secondary-readable) !important;
  margin-top: 4px !important;
}
#client-reviews .rating,
.testimonial-slider .rating {
  margin-bottom: 12px !important;
}
#client-reviews .slider-controls,
.testimonial-slider .slider-controls {
  margin-top: 16px !important;
}

/* WORDS THAT MATTER: 30 / 70 split on tablet and bigger screens */
@media (min-width: 768px) {
  #client-reviews .testimonial-layout,
  .testimonial-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) !important;
    gap: clamp(32px, 4vw, 56px) !important;
    align-items: start !important;
  }
  #client-reviews .testimonial-layout > div:first-child {
    min-width: 0;
  }
  #client-reviews .testimonial-layout .small-note {
    margin-top: 20px !important;
  }
}

/* THE ART OF FEELING AT HOME (Home featured section):
   - PC (>= 1024px): 4 cards in 1 row
   - Tablet (641px - 1023px): 2x2 grid (2 ke niche 2)
   - Mobile (<= 640px): 1 column (1 ke niche 1)
   - Uniform card height & image aspect-ratio across all viewports
   - Reduced space between location and 'Read the project story'
   - Underline on 'Read the project story' appears ONLY on hover
   - Proper, consistent section vertical spacing */

.selected.section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.process.section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.selected .section-heading {
  margin-bottom: 24px !important;
}
.selected .collection-note {
  margin-top: -12px !important;
  margin-bottom: 24px !important;
}

/* PC Desktop: 4 cards in one row */
@media (min-width: 1024px) {
  .featured-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
}

/* Tablet screen: 2 ke niche 2 */
@media (min-width: 641px) and (max-width: 1023px) {
  .selected.section,
  .process.section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .selected .section-heading {
    margin-bottom: 20px !important;
  }
  .selected .collection-note {
    margin-top: -8px !important;
    margin-bottom: 20px !important;
  }
  .featured-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
}

/* Mobile screen: 1 ke niche 1 */
@media (max-width: 640px) {
  .selected.section,
  .process.section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
  .selected .section-heading {
    margin-bottom: 16px !important;
  }
  .selected .collection-note {
    margin-top: -6px !important;
    margin-bottom: 18px !important;
  }
  .featured-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* Uniform card styling in featured-grid */
.featured-grid .project-card,
.featured-grid .featured-main,
.featured-grid .featured-secondary {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}

.featured-grid .project-open {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.featured-grid .project-image {
  aspect-ratio: 1.25 !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: var(--corner-subtle, 10px) !important;
  display: block !important;
}

.featured-grid .project-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.featured-grid .project-meta {
  margin-top: 14px !important;
  min-height: 48px;
  display: block !important;
  text-align: left !important;
}

.featured-grid .project-title {
  font-family: var(--serif) !important;
  font-size: var(--font-h3) !important;
  line-height: 1.35 !important;
  margin-top: 5px !important;
  display: block !important;
}

.featured-grid .project-summary {
  font-size: var(--font-body) !important;
  line-height: 1.7 !important;
  color: var(--text-secondary-readable) !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  flex-grow: 1 !important;
}

/* Reduce space between location and read the project story with enhanced readability */
.featured-grid .project-location,
.project-card .project-location {
  font-size: 10.5px !important;
  color: var(--text-secondary-readable) !important;
  letter-spacing: 0.3px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.35 !important;
}

@media (max-width: 1023px) {
  .featured-grid .project-location,
  .project-card .project-location {
    font-size: 11px !important;
  }
}

/* Match font, sizing and structure of 'Read the project story' to 'View service' */
.featured-grid .project-story-link,
.project-card .project-story-link {
  margin-top: 0 !important;
  padding: 0 0 4px 0 !important;
  min-height: auto !important;
  gap: 12px !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  width: fit-content !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

@media (max-width: 1023px) {
  .featured-grid .project-story-link,
  .project-card .project-story-link {
    font-size: 11px !important;
  }
}

/* Option 1: Underline on 'Read the project story' & 'View service' shows 35% by default, expands to 100% on hover */
.project-card .project-story-link::after,
.featured-grid .project-story-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--underline-light-brown, #c4a47c) !important;
  transform: scaleX(0.35) !important;
  opacity: 0.55 !important;
  transform-origin: left !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
  pointer-events: none !important;
}

.project-card .project-story-link:hover::after,
.project-card .project-story-link:focus-visible::after,
.featured-grid .project-story-link:hover::after,
.featured-grid .project-story-link:focus-visible::after {
  transform: scaleX(1) !important;
  background: var(--underline-light-brown, #c4a47c) !important;
  opacity: 0.9 !important;
}

.project-card .project-story-link .icon,
.featured-grid .project-story-link .icon {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.project-card .project-story-link:hover .icon:last-child,
.project-card .project-story-link:focus-visible .icon:last-child,
.featured-grid .project-story-link:hover .icon:last-child,
.featured-grid .project-story-link:focus-visible .icon:last-child {
  transform: translateX(4px) !important;
}

/* Home Page: All text links have 35% thin (1px) very light brown line by default, expanding to 100% on hover */
:root {
  --underline-light-brown: #c4a47c;
}
[data-theme="dark"] {
  --underline-light-brown: #caa980;
}

/* The home-only Option 1 underline that used to live here is now applied
   sitewide, further down this file, so every page shares it. */

/* Home Page Enhancements: Studio Highlights Trust Strip */
.intro-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--footer-bg, #f6f1e8);
  box-shadow: inset 0 1px 0 var(--depth-edge, rgba(255,255,255,0.7));
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.stat-num {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent-ink, #8b6d3b);
  letter-spacing: -0.5px;
}
.stat-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 4px;
}
.stat-desc {
  font-size: 10px;
  color: var(--text-secondary-readable);
  line-height: 1.4;
}
@media (max-width: 1023px) {
  .intro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    padding: 20px 22px;
  }
}
@media (max-width: 520px) {
  .intro-stats {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px;
  }
}

/* Glassmorphic Reference Concept Badges */
body.home-page .image-badge,
.project-image .image-badge {
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(35, 28, 20, 0.72) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  border: 1px solid rgba(255, 235, 195, 0.3) !important;
  color: #fff9ed !important;
  font-size: 7.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  pointer-events: none;
}

/* Hero scroll cue floating micro-interaction */
@keyframes vrf-scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
.scroll-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  animation: vrf-scroll-bounce 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}

/* Remove 3D circle button below project card images & redundant arrows */
.round-arrow,
.project-card .round-arrow,
.project-meta .round-arrow {
  display: none !important;
}

.project-meta {
  display: block !important;
  text-align: left !important;
}

.project-meta > span:first-child {
  display: block !important;
  width: 100% !important;
}

/* Remove redundant arrow next to service card title */
.service-preview .service-title > .icon,
.service-preview .service-title > svg {
  display: none !important;
}

.service-preview .service-title {
  display: block !important;
}

/* Gallery Modal: Previous & Next arrow buttons in the middle of the media */
.media-stage-wrapper {
  position: relative !important;
  width: 100% !important;
  background: #0b1828 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.media-stage-wrapper .media-prev,
.media-stage-wrapper .media-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--depth-rim, rgba(0, 0, 0, 0.12)) !important;
  color: var(--text, #10273b) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
}

.media-stage-wrapper .media-prev {
  left: 16px !important;
}

.media-stage-wrapper .media-next {
  right: 16px !important;
}

.media-stage-wrapper .media-prev .icon {
  transform: rotate(180deg) !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
}

.media-stage-wrapper .media-next .icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.media-stage-wrapper .media-prev:hover,
.media-stage-wrapper .media-next:hover {
  background: var(--surface-soft, #f4efe6) !important;
  border-color: var(--accent-ink, #c4a47c) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.media-stage-wrapper .media-prev:disabled,
.media-stage-wrapper .media-next:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  pointer-events: none !important;
}

@media (max-width: 639px) {
  .media-stage-wrapper .media-prev,
  .media-stage-wrapper .media-next {
    width: 38px !important;
    height: 38px !important;
  }
  .media-stage-wrapper .media-prev {
    left: 8px !important;
  }
  .media-stage-wrapper .media-next {
    right: 8px !important;
  }
  .media-stage-wrapper .media-prev .icon,
  .media-stage-wrapper .media-next .icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   Home Hero Buttons:
   1. Size according to text label (width: auto, min-width: 0, padding: 0 22px)
   2. Same exact height for both buttons (height: 48px, line-height: 1)
   3. PC to Tablet (>= 768px): Inline / row layout
   4. Mobile (<= 767px): Column layout
   ========================================================================== */
body.home-page .hero-actions {
  display: flex !important;
  width: auto !important;
}

body.home-page .hero-actions > a,
body.home-page .hero-actions .button,
body.home-page .hero-actions .text-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 0 24px !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

body.home-page .hero-actions .button {
  gap: 14px !important;
}

body.home-page .hero-actions .text-link {
  gap: 12px !important;
  padding-bottom: 0 !important;
}

body.home-page .hero-actions .text-link::after {
  display: none !important;
  content: none !important;
}

body.home-page .hero-actions a .icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* PC to Tablet (min-width: 768px): Inline row layout */
@media (min-width: 768px) {
  body.home-page .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: auto !important;
  }
  body.home-page .hero-actions > a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Mobile (max-width: 767px): Column layout */
@media (max-width: 767px) {
  body.home-page .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body.home-page .hero-actions > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 20px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Projects Page (.gallery-grid): Responsive Column Layout
   - Greater than Tab screen (>= 900px / PC & Laptop): 3 project cards in one row
   - Tab (768px - 899px): 2 project cards in one row
   - Mobile (< 768px): 1 project card in one row
   - Eliminates staggered 80px/55px padding on even cards
   - Identical aspect-ratio (16/10) across all card images
   - Aligns titles, summaries, locations, and action links uniformly
   ========================================================================== */
.gallery-grid,
.gallery-grid.filtered {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 48px 28px !important;
  align-items: stretch !important;
  padding-top: 15px !important;
}

@media (min-width: 900px) {
  .gallery-grid,
  .gallery-grid.filtered {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px 28px !important;
  }
}

.gallery-grid .project-card:not([hidden]):not(.is-hidden),
.gallery-grid.filtered .project-card:not([hidden]):not(.is-hidden) {
  padding-top: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.gallery-grid .project-card[hidden],
.gallery-grid.filtered .project-card[hidden],
.gallery-grid .project-card.is-hidden,
.gallery-grid.filtered .project-card.is-hidden,
#gallery-empty[hidden],
[hidden] {
  display: none !important;
}

.gallery-grid .project-image,
.gallery-grid .project-card .project-image,
.gallery-grid .project-card:nth-child(3n) .project-image,
.gallery-grid .project-card:nth-child(4n) .project-image,
.gallery-grid.filtered .project-image {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  position: relative !important;
  background: var(--surface-soft, #f7f4ef) !important;
}

.gallery-grid .project-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* No hover zoom on gallery photographs — they are shown still. */

.gallery-grid .project-open {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.gallery-grid .project-meta {
  margin-top: 16px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  width: 100% !important;
}

.gallery-grid .project-category {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--accent-ink, #c4a47c) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
}

.gallery-grid .project-title {
  display: block !important;
  font-family: var(--serif) !important;
  font-size: var(--font-h3) !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.gallery-grid .project-summary {
  font-size: var(--font-body) !important;
  color: var(--text-secondary-readable) !important;
  line-height: 1.7 !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
  flex-grow: 1 !important;
}

.gallery-grid .project-location {
  font-size: 10.5px !important;
  color: var(--text-secondary-readable) !important;
  letter-spacing: 0.3px !important;
  margin-top: auto !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.gallery-grid .project-story-link {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

@media (max-width: 899px) and (min-width: 768px) {
  .gallery-grid,
  .gallery-grid.filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px 24px !important;
  }
}

@media (max-width: 767px) {
  .gallery-grid,
  .gallery-grid.filtered {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* ==========================================================================
   Project Lightbox Modal: Previous & Next Buttons
   - Hover effect completely removed
   - Position locked: transform: translateY(-50%)
   - Prev icon locked: transform: rotate(180deg)
   ========================================================================== */
.lightbox-prev,
.lightbox-next,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-prev:active,
.lightbox-next:active,
.lightbox-prev:focus,
.lightbox-next:focus,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  scale: 1 !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--surface, #ffffff) !important;
  background-color: var(--surface, #ffffff) !important;
  background-image: none !important;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12)) !important;
  border-color: var(--border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--text, #10273b) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
  filter: none !important;
  transition: none !important;
}

.lightbox-prev,
.lightbox-prev:hover,
.lightbox-prev:active,
.lightbox-prev:focus,
.lightbox-prev:focus-visible {
  left: 14px !important;
  right: auto !important;
}

.lightbox-next,
.lightbox-next:hover,
.lightbox-next:active,
.lightbox-next:focus,
.lightbox-next:focus-visible {
  right: 14px !important;
  left: auto !important;
}

.lightbox-prev .icon,
.lightbox-prev:hover .icon,
.lightbox-prev:active .icon,
.lightbox-prev:focus .icon,
.lightbox-prev:focus-visible .icon {
  transform: rotate(180deg) !important;
  scale: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: none !important;
}

.lightbox-next .icon,
.lightbox-next:hover .icon,
.lightbox-next:active .icon,
.lightbox-next:focus .icon,
.lightbox-next:focus-visible .icon {
  transform: none !important;
  scale: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: none !important;
}

.lightbox-prev:disabled,
.lightbox-next:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
  pointer-events: none !important;
}

@media (max-width: 639px) {
  .lightbox-prev,
  .lightbox-next,
  .lightbox-prev:hover,
  .lightbox-next:hover {
    width: 38px !important;
    height: 38px !important;
  }
  .lightbox-prev,
  .lightbox-prev:hover {
    left: 8px !important;
  }
  .lightbox-next,
  .lightbox-next:hover {
    right: 8px !important;
  }
  .lightbox-prev .icon,
  .lightbox-prev:hover .icon,
  .lightbox-next .icon,
  .lightbox-next:hover .icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   SITE-WIDE UNIFIED RESPONSIVE TYPOGRAPHY
   Font Family: "Poppins", sans-serif for full web site
   Ensures consistent font size on all pages according to screen size:
   - Desktop (>= 1024px)
   - Tablet  (768px - 1023px)
   - Mobile  (< 768px)
   ========================================================================== */

/* Full website universal font family */
html,
body,
button,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6,
p, span, a, label, li, dt, dd, blockquote, figcaption,
.site-nav a,
.button,
.text-link,
.project-title,
.stat-num,
.stat-label,
.eyebrow {
  font-family: "Poppins", sans-serif !important;
}

/* 1. Main Page / Hero Headings (H1) */
h1,
.hero h1,
.page-heading h1,
.story-hero h1,
.story-title,
.hero-copy h1,
body.home-page .hero h1,
body.inner-page .page-heading h1 {
  font-family: var(--serif) !important;
  font-size: var(--font-h1) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* All em / accent phrases inside headings & text match "Considered spaces." font family (upright normal Poppins) without changing colors */
em,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.hero h1 em,
.story-hero h1 em,
.hero-copy h1 em,
.page-heading h1 em,
.philosophy h2 em,
.philosophy-copy h2 em,
.final-cta h2 em,
.values-banner em,
body.home-page .hero h1 em,
body.inner-page .page-heading h1 em {
  font-family: "Poppins", sans-serif !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* 2. Section Headings (H2) */
h2,
.section h2,
.page-heading h2,
.founder-section h2,
.contact-layout h2,
.service-detail-copy h2,
.final-cta h2,
.story-section h2,
.media-collection h2,
.media-enquiry h2,
.location-section h2,
.contact-info-card h2,
.contact-form-card h2,
.about-story-approach .col-header h2,
.story-heading h2 {
  font-family: var(--serif) !important;
  font-size: var(--font-h2) !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

/* 3. Card Titles & Subsection Headings (H3) */
h3,
.project-title,
.featured-grid .project-title,
.gallery-grid .project-title,
.collection-grid .project-title,
.service-title h3,
.values-grid h3,
.process-step h3,
.detail-label,
.philosophy-grid h3,
.benefits h3 {
  font-family: var(--serif) !important;
  font-size: var(--font-h3) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

/* 4. Subsections & Step Headings (H4) */
h4,
.step-number,
.site-footer h3,
.contact-methods h3,
.home-contact-details h3 {
  font-family: var(--sans) !important;
  font-size: var(--font-h4) !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

/* 5. Eyebrows & Overlines */
.eyebrow,
.service-category,
.project-category,
.section-kicker,
.founder-role,
.contact-channel-label,
.detail-label,
.site-footer h3,
.contact-methods h3,
.home-contact-details h3 {
  font-family: var(--sans) !important;
  font-size: var(--font-eyebrow) !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
}

/* 6. Lead & Intro Paragraphs */
.lead,
.page-intro,
.service-short,
.service-detail-copy > p.service-short,
.hero-copy p.lead,
.about-story-approach .lead,
.story-subtitle {
  font-family: var(--sans) !important;
  font-size: var(--font-lead) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* 7. Standard Body Text & Summaries */
body,
p:not(.eyebrow):not(.lead):not(.small-note):not(.stat-desc):not(.project-location):not(.page-intro):not(.service-short):not(.site-footer *),
#testimonial-quote,
#client-reviews blockquote,
.service-description,
.service-detail-copy > p.service-description,
.service-offers,
.benefits li,
.contact-info-card > p:not(.eyebrow),
.story-body p,
.article-content p,
.col-body p,
.featured-grid .project-summary,
.gallery-grid .project-summary {
  font-family: var(--sans) !important;
  font-size: var(--font-body) !important;
  line-height: 1.75 !important;
}

/* 8. Small Notes, Metadata & Captions */
.small-note,
.stat-desc,
.project-location,
.service-image-caption,
figcaption,
.service-offers li,
.contact-hours dt,
.contact-hours dd,
.map-address,
#gallery-count,
.collection-note,
.testimonial-person span {
  font-size: var(--font-small) !important;
  line-height: 1.5 !important;
}

/* 9. Buttons & Action Links */
.button,
.text-link,
.project-story-link,
.lightbox-story-link {
  font-size: var(--font-button) !important;
}









/* ==========================================================================
   Project Story Page: "The Visual Story" Gallery — Identical Image Sizes
   - Image 1 and Image 2 rendered at the exact same width and height
   - Removes the staggered 90px offset on the second figure
   - Equal columns (1fr 1fr) so both frames share identical width
   - Uniform 3/2 aspect ratio with object-fit: cover on every screen
   ========================================================================== */
.story-gallery {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 35px !important;
  align-items: start !important;
}

.story-gallery figure,
.story-gallery figure:nth-child(even),
.story-gallery figure:nth-child(odd) {
  margin: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.story-gallery figure > img,
.story-gallery figure:nth-child(even) > img,
.story-gallery figure:nth-child(odd) > img,
.story-gallery img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  max-height: 420px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .story-gallery {
    gap: 28px !important;
  }
  .story-gallery figure > img,
  .story-gallery figure:nth-child(even) > img,
  .story-gallery figure:nth-child(odd) > img,
  .story-gallery img {
    aspect-ratio: 3 / 2 !important;
    max-height: 320px !important;
  }
}

@media (max-width: 767px) {
  .story-gallery {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .story-gallery figure > img,
  .story-gallery figure:nth-child(even) > img,
  .story-gallery figure:nth-child(odd) > img,
  .story-gallery img {
    aspect-ratio: 3 / 2 !important;
    max-height: 300px !important;
  }
}

/* ==========================================================================
   Projects Page: Identical Card Image Size on Every Card
   - Overrides every legacy nth-child aspect-ratio variation (1.08, 0.96, 1.3)
   - Same width, same height and same crop across all 10 project cards
   - Applies to the default grid and the filtered grid
   ========================================================================== */
.gallery-grid .project-card .project-image,
.gallery-grid .project-card:nth-child(n) .project-image,
.gallery-grid.filtered .project-card .project-image,
.gallery-grid.filtered .project-card:nth-child(n) .project-image,
body[data-route="projects/"] .gallery-grid .project-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  position: relative !important;
  display: block !important;
  background: var(--surface-soft, #f7f4ef) !important;
}

.gallery-grid .project-card .project-image > img,
.gallery-grid.filtered .project-card .project-image > img,
body[data-route="projects/"] .gallery-grid .project-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit !important;
}

/* ==========================================================================
   Projects Page: Responsive "View project" Hover Popup
   - Scales with the viewport: padding, offsets, icon and font all fluid
   - Font size follows the fluid typography scale
   - Never overflows narrow cards; wraps gracefully
   ========================================================================== */
.project-hover {
  position: absolute !important;
  left: clamp(8px, 1.1vw, 18px) !important;
  right: clamp(8px, 1.1vw, 18px) !important;
  bottom: clamp(8px, 1.1vw, 18px) !important;
  padding: clamp(6px, 0.75vw, 12px) clamp(9px, 1vw, 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(6px, 0.8vw, 14px) !important;
  font-family: var(--sans) !important;
  font-size: clamp(9.5px, 0.85vw, 12.5px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  font-weight: 500 !important;
  border-radius: clamp(5px, 0.5vw, 8px) !important;
  max-width: calc(100% - clamp(16px, 2.2vw, 36px)) !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

.project-hover .icon {
  width: clamp(11px, 1.05vw, 15px) !important;
  height: clamp(11px, 1.05vw, 15px) !important;
  flex-shrink: 0 !important;
}

.project-image .image-badge {
  font-size: clamp(6.5px, 0.6vw, 8.5px) !important;
  letter-spacing: clamp(0.8px, 0.11vw, 1.6px) !important;
  padding: clamp(3px, 0.35vw, 6px) clamp(5px, 0.55vw, 9px) !important;
  left: clamp(8px, 1.1vw, 16px) !important;
  top: clamp(8px, 1.1vw, 16px) !important;
  border-radius: clamp(4px, 0.4vw, 7px) !important;
  line-height: 1.3 !important;
  max-width: calc(100% - clamp(16px, 2.2vw, 32px)) !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .project-hover {
    font-size: clamp(10px, 2.6vw, 12px) !important;
    padding: 8px 12px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .project-hover .icon {
    width: 13px !important;
    height: 13px !important;
  }
  .project-image .image-badge {
    font-size: clamp(6.5px, 1.9vw, 8px) !important;
  }
}

/* ==========================================================================
   Project Story Page: "Another perspective" Next Project Link
   - Responsive font size that scales down with the viewport
   - Icon scales with the label; no oversized desktop text
   ========================================================================== */
/* The next-project link now reads exactly like the home page's "Discover Our
   Story" / "Explore All Services" links: the shared button/CTA token at
   weight 500 and line-height 1.6, so one treatment covers every screen. */
.next-project-link {
  font-family: var(--serif) !important;
  font-size: var(--font-button) !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding-bottom: 4px !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  /* premium.css draws a permanent 1px border here. The shared Option 1
     underline is an animated ::after, so the static border has to go or the
     link would carry two lines at once and nothing would appear to animate. */
  border-bottom: 0 !important;
  position: relative !important;
  text-decoration: none !important;
}

.next-project-link .icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.story-next .eyebrow {
  font-size: var(--font-eyebrow) !important;
}

@media (max-width: 767px) {
  /* Phone: keep the same token as every other screen so the link matches the
     home page links here too; only the gap tightens. */
  .next-project-link {
    font-size: var(--font-button) !important;
    gap: 12px !important;
  }
  .next-project-link .icon {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ==========================================================================
   Touch target sizing
   Icon buttons and the review slider dots are enlarged on touch devices,
   where a small target is easy to mis-tap.

   The filter chips on Projects and Gallery used to be enlarged here too, to
   44px tall with 10px 16px padding and an 8px gap. The Services jump index
   was never in that rule, so on a phone or tablet the same row of chips came
   out noticeably bigger on Projects and Gallery than on Services. The three
   index rows are meant to read as one component, so the chips are no longer
   resized here and keep their 32px height on every screen.

   If the larger touch target is ever wanted back, add .service-jump > a to
   the rule as well rather than reinstating it for two pages out of three.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  #client-reviews .slider-dot {
    min-height: 44px;
    flex: 0 0 34px;
  }
  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ==========================================================================
   404 page
   A dead link is a common way to lose a visitor. This gives them a clear
   route back into the site rather than a bare server error.
   ========================================================================== */
.error-page { max-width: 760px; padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); }
.error-page h1 { margin: 10px 0 20px; }
.error-page .lead { max-width: 52ch; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 46px; }
.error-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.error-links a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.error-links a:hover { border-color: var(--accent); transform: translateY(-2px); }
.error-links strong {
  display: block;
  font-size: var(--font-h4, 16px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.error-links span { font-size: var(--font-caption, 12px); color: var(--text-secondary-readable); line-height: 1.7; }
@media (max-width: 767px) {
  .error-links { grid-template-columns: 1fr; }
  .error-actions .button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Legal page index ("IN THIS DOCUMENT")
   Privacy, Terms and Disclaimer listed their sections as plain 11px text
   links, which read as body copy rather than as something to click. They now
   use the same raised chip treatment as the Projects and Gallery filters, so
   navigation looks and behaves consistently across the site.
   ========================================================================== */
.legal-nav {
  --chip-face: #f3e5cc;
  --chip-rim: #b58a48;
}
html[data-theme="dark"] .legal-nav {
  --chip-face: #463722;
  --chip-rim: #ccaa68;
}
.legal-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  margin: 0 0 6px;
  padding: 7px 12px;
  border: 1px solid var(--depth-rim);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--depth-edge),
    0 2px 2px var(--raised-base),
    0 6px 14px -8px var(--raised-shadow);
  transition: box-shadow 260ms ease, border-color 260ms ease, background-color 260ms ease;
}
.legal-nav > a:hover {
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--depth-edge),
    0 4px 6px var(--raised-base),
    0 14px 28px -6px var(--raised-shadow);
}
.legal-nav > a:active {
  box-shadow: inset 0 2px 4px var(--raised-shadow), 0 1px 0 var(--depth-rim);
}
.legal-nav > a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}
/* The section the reader is currently on, highlighted like an active filter. */
.legal-nav > a.is-current,
.legal-nav > a[aria-current="true"] {
  background: var(--chip-face);
  color: var(--text);
  border-color: var(--chip-rim);
  box-shadow:
    inset 0 0 0 1px var(--chip-rim),
    inset 0 1px 0 var(--depth-edge),
    0 2px 2px var(--raised-base),
    0 8px 16px -9px var(--raised-shadow);
}

/* Tablet and mobile: the index sits above the content, so the chips flow as
   a wrapping row instead of a stacked column. */
@media (max-width: 1023px) {
  .legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }
  .legal-nav .eyebrow {
    flex: 1 0 100%;
    margin-bottom: 4px;
  }
  .legal-nav > a {
    width: auto;
    margin: 0;
  }
}
@media (hover: none) and (pointer: coarse) {
  .legal-nav > a { min-height: 44px; padding: 10px 14px; font-size: 11.5px; }
  .legal-nav { gap: 8px; }
}

/* ==========================================================================
   Unified inline link treatment (sitewide)
   The Option 1 underline — a 35% light-brown rule that grows to full width on
   hover — was scoped to body.home-page, so the same link looked different on
   About, Services, Projects, Gallery, Contact and the legal pages. These rules
   apply one size, one animation and one hover behaviour to every inline link
   on every page.

   Deliberately excluded:
     .hero-actions .text-link  - the glass hero buttons, styled as buttons
     .legal-nav a              - the document index, styled as chips
     .site-credit-link         - the footer credit, a plain underlined link
   ========================================================================== */
  body .text-link:not(.hero-actions *):not(.legal-nav *),
  body .project-story-link,
  body .lightbox-story-link,
  body .next-project-link,
  body .proof-link {
    font-size: var(--font-button);
    font-weight: 500;
    line-height: 1.6;
    padding-bottom: 4px;
    position: relative;
  }
  body .text-link:not(.hero-actions *):not(.legal-nav *)::after,
  body .project-story-link::after,
  body .lightbox-story-link::after,
  body .next-project-link::after,
  body .proof-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--underline-light-brown, #c4a47c);
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.55;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  pointer-events: none;
}
body .text-link:not(.hero-actions *):not(.legal-nav *):hover::after,
body .text-link:not(.hero-actions *):not(.legal-nav *):focus-visible::after,
body .project-story-link:hover::after,
body .project-story-link:focus-visible::after,
  body .lightbox-story-link:hover::after,
  body .lightbox-story-link:focus-visible::after,
  body .next-project-link:hover::after,
  body .next-project-link:focus-visible::after,
  body .proof-link:hover::after,
  body .proof-link:focus-visible::after,
body .service-preview:hover .text-link::after,
body .service-preview a:hover .text-link::after,
body .project-card:hover .project-story-link::after {
  transform: scaleX(1);
  opacity: 0.9;
}
/* The trailing arrow nudges by the same 4px everywhere. */
  body .text-link:not(.hero-actions *):hover .icon:last-child,
  body .project-story-link:hover .icon:last-child,
  body .next-project-link:hover .icon:last-child,
  body .next-project-link:focus-visible .icon:last-child,
body .service-preview:hover .text-link .icon:last-child,
body .service-preview a:hover .text-link .icon:last-child,
body .project-card:hover .project-story-link .icon:last-child {
  transform: translateX(4px);
}
/* Desktop navigation uses the same rule, drawn from zero width. */
body .desktop-nav a::after {
  height: 1px;
  bottom: 3px;
  background: var(--underline-light-brown, #c4a47c);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.55;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
body .desktop-nav a:hover::after,
body .desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  opacity: 0.9;
}

/* Older per-context sizes (10px, 11px, 12px) predate the shared scale and are
   what made the same link look different from page to page. Route them all to
   the one button/CTA token. The hero glass buttons keep their own size. */
body .section-heading > .text-link,
body .service-preview .text-link,
body .philosophy-copy > .text-link,
body .cta-actions .text-link,
body #enquiry-ready .text-link,
body .form-heading > .text-link,
body .legal-content .text-link,
body .story-concept .text-link {
  font-size: var(--font-button);
}

/* ==========================================================================
   Legibility floor
   A screen-by-screen read found copy rendering as small as 6.5px — well under
   the project's own eyebrow floor of 9.5px, and unreadable on a phone. These
   labels now use the fluid tokens, so they scale with the viewport and never
   fall below roughly 9.5-10.5px.
   ========================================================================== */
.image-badge,
.section-number,
.service-kicker,
.glass-tag,
.story-index,
.media-kind,
.compare-label,
.story-category,
.project-index {
  font-size: var(--font-eyebrow);
}
.story-back,
.project-facts dt,
.project-facts dd,
.service-detail-copy strong,
small {
  font-size: var(--font-small);
}

/* Several of the labels above are set with !important in older blocks, so the
   floor is restated here with matching weight. Kept last in the file so it
   wins on specificity order as well. */
.image-badge,
body[data-route="projects/"] .image-badge,
.media-kind,
.project-facts span,
.project-facts dt,
.story-index,
.section-number,
.service-kicker,
.glass-tag,
.compare-label,
.project-index {
  font-size: var(--font-eyebrow) !important;
}
.project-facts strong,
.project-facts dd,
.story-back,
.filter-button,
body[data-route="projects/"] .filter-button,
.media-filters button {
  font-size: var(--font-small) !important;
}
@media (max-width: 767px) {
  .image-badge,
  body[data-route="projects/"] .image-badge,
  .media-kind,
  .project-facts span,
  .section-number,
  .story-index { font-size: var(--font-eyebrow) !important; }
}

/* Remaining sub-11px text found by the per-screen read: the footer address
   line, lightbox specification list, hero captions and the decorative eyebrow
   spans. The footer address in particular is real contact information and was
   rendering at 10px. */
.site-footer .footer-detail-row > span,
.site-footer .footer-detail-row > a,
.lightbox-details dt,
.lightbox-details dd,
.lightbox-details .share-row > span,
.service-jump > a {
  font-size: var(--font-small) !important;
}
.hero-caption > span,
.hero-index > span,
.intro-visual > span,
.intro-foot > span,
.wide-editorial > span {
  font-size: var(--font-eyebrow) !important;
}

/* Gallery filter count badges and the contact form's optional-field hint. */
.media-filters button > span,
.address-details > summary > span {
  font-size: var(--font-eyebrow) !important;
}

/* Service page jump buttons: the labels were set at weight 500, heavier than
   the body copy around them. They now match the "What we offer" list items —
   same size token, regular weight — so the row reads as quiet navigation
   rather than as a block of semi-bold text. The underline, hover and focus
   behaviour are unchanged. */
.service-jump > a {
  font-weight: 400 !important;
}

/* ==========================================================================
   Footer: one size and weight for every line
   The bottom row sat apart from the rest of the footer: the copyright and the
   RITPLPRO credit were being caught by the broad body-paragraph rule above and
   rendering at --font-body, far larger than the 11px links beside them, and
   the credit name was semi-bold at 600.

   Everything in the footer - explore links, service links, policy links,
   email, phone, address, hours, the copyright line and the design credit -
   now shares one size token and regular weight, on every page and at every
   width. Stated with !important because the paragraph rule above uses it.
   ========================================================================== */
.site-footer .footer-grid > div:not(:first-child) > a:not(.text-link),
.site-footer .footer-grid > div > span,
.site-footer [data-service-links] a,
.site-footer .footer-policies > a,
.site-footer .footer-detail-row > a,
.site-footer .footer-detail-row > span,
.site-footer .footer-bottom p,
.site-footer .footer-bottom a,
.site-footer .footer-bottom .designer-credit,
.site-footer .designer-credit .site-credit-link,
.site-footer .designer-credit strong {
  font-size: var(--font-small) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}
/* The studio name stays a link, just no longer heavier than its neighbours. */
.site-footer .designer-credit strong {
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Index buttons: one treatment across Services, Projects, Gallery and legal
   The four index rows had drifted apart. Services sat at --font-small/400
   after the earlier lightening, Projects and Gallery kept weight 500, and the
   legal pages used a fixed 11px at weight 500. They now all match the service
   page: same size token, same regular weight, same line height.
   ========================================================================== */
body[data-route="projects/"] .filter-button,
body[data-route="gallery/"] .media-filters button,
.media-filters button,
.filters .filter-button,
.service-jump > a,
.legal-nav > a {
  font-size: var(--font-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   Policy index: tight chips on tablet and mobile
   Below the two-column breakpoint the index becomes a wrapped row of chips
   above the document, and at 7-12px padding plus a 34-44px min-height it ate
   a large part of the first screen. Every side is now 4px, with a 4px gap
   and no min-height, so the chip is exactly its label plus 4px.

   The touch override further up sets 10px 14px and a 44px min-height; it is
   restated here because that block wins on any real phone or tablet. Desktop
   is untouched - the index is still the sticky sidebar column there.
   ========================================================================== */
@media (max-width: 1023px) {
  .legal-nav {
    gap: 4px !important;
  }
  .legal-nav > a,
  .legal-nav > a[aria-current="true"] {
    padding: 4px 7px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
}

/* The sides are 7px on every screen, desktop sidebar included, so the label
   never sits flush against the chip rim. Written as longhand so it applies
   over both the desktop 7px 12px and the tablet/mobile 4px shorthand above. */
.legal-nav > a,
.legal-nav > a[aria-current="true"] {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* The index column is 4 of 12 and the document 8 of 12, from tablet upward.
   This replaces the 1fr 2.5fr desktop split and the 1fr 2.3fr tablet one, so
   both screens share the same proportion. Phones stay stacked. */
@media (min-width: 768px) {
  .legal-layout {
    grid-template-columns: 4fr 8fr !important;
  }
}

/* Tablet: one entry per row. The index is a narrow sidebar here, not a
   full-width band, so a single column is the only layout the longer labels
   fit on one line - two columns left each chip about 100px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .legal-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }
  .legal-nav .eyebrow {
    grid-column: 1 / -1 !important;
  }
  .legal-nav > a {
    width: auto !important;
  }
}

/* ==========================================================================
   The designer's portrait - "studio drawing"
   Chosen from a five-way comparison; replaces the earlier matted print.

   The register is a marked-up drawing sheet rather than a framed photograph:
   four corner ticks standing off the print, a ruled label above the copy and
   the pull-quote set in a tinted block. It suits a studio that documents
   rooms for a living, and it costs one pseudo-element.

   Nothing here responds to hover: it is a photograph, not a control.
   ========================================================================== */
.portrait-configured {
  --tick-gap: 18px;   /* how far the ticks stand off the print */
  --tick-len: 42px;   /* length of each arm */
  --tick-rule: var(--underline-light-brown, #c4a47c);
  position: relative;
  /* responsive.css clips this frame; the ticks live outside it, so the
     clipping has to go. layout-fixes.css loads later, no !important needed. */
  overflow: visible;
  margin: var(--tick-gap);
}

/* The photograph sits on the site's standard raised-depth stack, the same one
   the featured-work images, project cards and editorial frames use: a hairline
   rim, two tight base shadows that do the near-surface work, and one wide
   diffuse shadow for the lift. Four layers rather than the two soft ones that
   were here, which is what reads as depth instead of as blur.

   --depth-scale multiplies the geometry against that shared recipe. It is the
   one number to change if this wants more or less lift; at 1 the portrait is
   identical to everything else on the stack. It is currently 1.2, asked for
   after seeing 1 on the page.

   The rim is deliberately outside the multiplier. It is a hairline standing in
   for the print's edge, and scaling it past 1px turns a crisp edge into a
   smudge. raised-depth.css made the same call when it took the whole site's
   geometry up by 35% and left the rim at 1px.

   The tokens come from css/raised-depth.css, so dark theme is handled at the
   token level -- --raised-rim, --raised-base and --raised-shadow all have dark
   values there, and no separate override is needed here any more.

   Corners stay square. Everything else on that stack carries border-radius:12px,
   but a drawing sheet has square corners and rounding them would undo the
   register this treatment was chosen for. */
.portrait-configured > img {
  --depth-scale: 1.2;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 1px var(--raised-rim, rgba(132, 110, 71, 0.24)),
    0 calc(4.05px * var(--depth-scale)) calc(1.35px * var(--depth-scale))
      var(--raised-base, rgba(70, 86, 99, 0.16)),
    0 calc(9.45px * var(--depth-scale)) calc(4.05px * var(--depth-scale))
      calc(-1.35px * var(--depth-scale)) var(--raised-base, rgba(70, 86, 99, 0.16)),
    0 calc(21.6px * var(--depth-scale)) calc(35.1px * var(--depth-scale))
      calc(-10.8px * var(--depth-scale)) var(--raised-shadow, rgba(10, 29, 47, 0.11));
}

/* The four corner ticks.

   Eight background layers, two arms per corner - NOT one clip-path polygon.
   A single closed polygon cannot visit four separate corners without
   connecting them, and those connecting diagonals then decide, by nonzero
   winding rule and differently at every aspect ratio, which arms survive.
   The first draft did exactly that and silently painted six arms out of
   eight at every size tested. Background layers are positioned against the
   box's own edges and cannot drift. */
.portrait-configured::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--tick-gap));
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule)),
    linear-gradient(var(--tick-rule), var(--tick-rule));
  /* across, down - repeated for TL, TR, BL, BR in that order */
  background-size:
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* Caption across the foot of the photograph.
   Three gradient stops rather than two: the fade starts sooner and stays
   clear of the sitter's face while still anchoring the text. */
.portrait-configured > .portrait-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 34px 18px 14px;
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.3px;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* Tighter proportions as the column narrows, or the ticks start to dominate
   a photograph that has far less room. */
@media (max-width: 1023px) {
  .portrait-configured {
    --tick-gap: 14px;
    --tick-len: 34px;
  }
}
@media (max-width: 767px) {
  .portrait-configured {
    --tick-gap: 11px;
    --tick-len: 28px;
  }
  .portrait-configured > .portrait-caption { padding: 30px 14px 12px; }
}

/* No dark-theme override for the photograph's shadow. There was one while the
   shadow was hand-rolled; now that it is built from the raised-depth tokens,
   dark is already handled where those tokens are defined. Restating it here
   would have dropped the rim layer and flattened the print back out, which is
   the opposite of what the override was for. The tick rule needs nothing
   either: --underline-light-brown lightens to #caa980 on its own. */

/* --------------------------------------------------------------------------
   Tablet and up: the portrait matches the height of the copy beside it.
   style.css centres the two founder columns and responsive.css pins the frame
   to 550px, so the photograph used to run roughly 120px past the bottom of the
   text on a desktop. Stretching the row instead makes the grid resolve the
   height from the copy, and the frame fills whatever that comes to.

   The vertical margin goes to zero here, which is the whole point: the frame
   has to be EXACTLY the row height for the photograph to measure the same as
   the copy. The ticks then step above and below the frame into the section's
   64px padding, where there is room for them. The horizontal margin stays, so
   the side ticks keep clear of the grid gap.

   object-position matters here. As the frame gets shorter the crop tightens
   from both edges, and this portrait puts the sitter's head about a quarter of
   the way down a tall 2:3 frame. Left centred, a short frame would cut the top
   of his head off, so the crop is biased upward - it keeps headroom and drops
   the least interesting part of the picture, the foreground desk reflection.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .founder-grid {
    align-items: stretch;
  }
  .portrait-configured {
    height: auto;
    min-height: 0;
    align-self: stretch;
    margin: 0 var(--tick-gap);
  }
  .portrait-configured > img {
    /* Taken out of flow deliberately. Left in flow with height:100%, the
       percentage would resolve against an auto-height parent, fall back to
       the image's intrinsic 1536px and drive the row height itself - the
       opposite of matching the copy. Out of flow the frame has no intrinsic
       height, so the grid resolves the row from the copy alone and the
       stretched frame is what the photograph fills. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 22%;
  }
}

/* The copy beside it, in the same register: a ruled label and the pull-quote
   set in a tinted block rather than floating in the measure. */
.founder-section .founder-copy .eyebrow {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e3ded5);
  letter-spacing: 0.28em;
}
.founder-section .founder-copy .lead {
  margin-block: 24px;
  padding: 20px 24px;
  background: var(--surface-soft, #eeeae3);
  border-left: 3px solid var(--accent, #b89b72);
  font-style: italic;
}

/* ==========================================================================
   Photographs do not move on hover — site-wide
   The zoom-on-hover rules were removed at source (css/style.css for project
   and service cards, and the gallery block above). This is the backstop: if
   a later stylesheet or a copied snippet reintroduces a scale, crop-shift or
   filter on a photograph, it is neutralised here.

   Scoped to the known image containers rather than a blanket ":hover img",
   which would also cancel any resting transform an image legitimately has
   while the pointer happens to be over an ancestor.

   Only the photograph is pinned. Captions, badges, overlays and link
   underlines on these cards are untouched and still respond to hover.
   ========================================================================== */
.project-card:hover img,
.project-card:focus-within img,
.project-open:hover img,
.project-open:focus-visible img,
.project-image:hover img,
.service-preview:hover img,
.service-preview a:hover img,
.service-picture:hover img,
.media-card:hover img,
.media-card:focus-within img,
.media-open:hover img,
.media-open:focus-visible img,
.gallery-grid .project-card:hover img,
.story-gallery figure:hover > img,
.featured-grid a:hover img,
.portrait-configured:hover > img,
figure:hover > img {
  transform: none !important;
  scale: none !important;
  filter: none !important;
}

/* `object-position: initial` used to be in the list above, and it was the one
   declaration here that CAUSED a hover effect instead of preventing one.

   The designer's portrait rests at `object-position: 50% 22%` so the frame
   holds the face rather than the middle of the body. `initial` means 50% 50%,
   so hovering snapped the crop down and the photograph visibly jumped — the
   precise effect this block exists to stop. Any figure with a deliberate
   resting crop had the same latent fault.

   It is not needed: the hover crop-shifts it was written against were deleted
   at source, and a resting crop is not a hover effect. Do not put it back. */

/* The transitions existed only to animate those zooms. Removing them stops a
   pointless repaint on every hover. */
.project-image img,
.service-picture img,
.media-card img,
.portrait-configured > img {
  transition: none !important;
}