:root {
  --base--white: #f2f1ed !important;
  --base--soft-beige: #f2f1ed !important;
  --base--grey-light: #d0cec1 !important;
  --base--secondary-grey: #d0cec1 !important;
  --base--grey: #d0cec1 !important;
  --base--mid-grey: #6b6457 !important;
  --base--dark-grey: #322a20 !important;
  --base--soft-black: #322a20 !important;
  --base--secondary-black: #322a20 !important;
  --base--bold-black: #322a20 !important;
  --base--black: #322a20 !important;
  --_colors-2---base--black: #322a20 !important;
  --_colors-2---base--white: #f2f1ed !important;
  --grey--grey-900: #322a20 !important;
}
.home_two-bg { background-image:url('../images/client-supplied/home/hero.webp') !important; }

/* Preserve project photography at its authored aspect ratio. */
.cs-project-card__media,
.cs-featured__media,
.cs-detail-gallery__item,
.cs-detail-gallery__item--hero,
#home-projects-grid .project_blog-img {
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent;
}
.cs-project-card__media img,
.cs-featured__media img,
.cs-detail-gallery__item img,
#home-projects-grid .project_blog-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Services hero filmstrip: mixed ratios, uncropped, swipeable on small screens. */
.section_services-hero {
  background-color:#f2f1ed !important;
  color:#322a20 !important;
}
.section_services-hero .button:not(.w-variant-ae42f059-7ee0-00c5-607d-3a02bbcf14d1) {
  border-color:#322a20;
  background-color:#322a20;
  color:#f2f1ed;
}
.cs-services-filmstrip {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cs-services-filmstrip::-webkit-scrollbar { display: none; }
.cs-services-filmstrip__track {
  --cs-filmstrip-gap: clamp(0.75rem, 1.25vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--cs-filmstrip-gap);
  width: max-content;
  min-width: 100%;
  padding-inline: 0;
  animation: cs-filmstrip-marquee 34s linear infinite;
  will-change: transform;
}
.cs-services-filmstrip:hover .cs-services-filmstrip__track { animation-play-state:paused; }
@keyframes cs-filmstrip-marquee {
  to { transform:translateX(calc(-50% - (var(--cs-filmstrip-gap) / 2))); }
}
.cs-services-filmstrip figure {
  flex: 0 0 auto;
  margin: 0;
}
.cs-services-filmstrip img {
  width: auto;
  height: auto;
  max-width: min(70vw, 58rem);
  max-height: min(65vh, 40rem);
  display: block;
}
.cs-join-studio { border-top: 1px solid rgba(242, 241, 237, 0.2); padding-top: 5rem; }
.cs-file-label { display: block; color: #f2f1ed; margin-bottom: 0.5rem; }
@media (max-width: 767px) {
  .cs-services-filmstrip__track { animation-duration:26s; }
  .cs-services-filmstrip img {
    max-width: 82vw;
    max-height: 28rem;
  }
  .cs-join-studio { padding-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-services-filmstrip__track { animation:none; }
}

/* Footer recruitment belongs on the dedicated Contact page. */
.section_contact .glass-card {
  background-color: rgba(0, 0, 0, 0.28);
}

/* Keep the homepage Selected Work copy visible if Webflow IX does not initialise. */
.section_jobs .projects_heading .scroll-into-view {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.footer_portfolio { display: none !important; }

/* Mixed-ratio project masonry keeps portrait cards beside stacked landscapes. */
#home-projects-grid,
.cs-projects-grid {
  display: block !important;
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
}
#home-projects-grid > div,
.cs-project-card {
  display: inline-block !important;
  width: 100%;
  margin: 0 0 clamp(2.5rem, 5vw, 5rem);
  break-inside: avoid;
  vertical-align: top;
}
#home-projects-grid .cs-project-card__link,
#home-projects-grid .cs-project-card__title,
#home-projects-grid .cs-project-card__value { color: #322a20; }
#home-projects-grid .cs-project-card__title { letter-spacing: 0.02em; }
#home-projects-grid .cs-project-card__meta { border-color: rgba(50, 42, 32, 0.22); }
#home-projects-grid .cs-project-card__label { color: #6b6457; }
#home-projects-grid .cs-project-card__media {
  width: fit-content;
  max-width: 100%;
  background: transparent !important;
}
#home-projects-grid .cs-project-card__media img {
  width: auto !important;
  max-width: 100%;
  max-height: 48rem;
}

/* Contact page: two purpose-built, accessible enquiry experiences. */
.cs-contact-section { position:relative; z-index:1; padding: clamp(8rem, 12vw, 12rem) 0 clamp(6rem, 9vw, 9rem); }
.cs-contact-project { background: #e7e4dc; color: #322a20; }
.cs-contact-careers { background: #3f716f; color: #f2f1ed; }
.cs-contact-layout { display:grid; grid-template-columns:minmax(18rem, .8fr) minmax(32rem, 1.2fr); gap:clamp(4rem, 9vw, 10rem); align-items:start; }
.cs-contact-layout > * { min-width:0; }
.cs-contact-intro { position:sticky; top:8rem; }
.cs-contact-kicker { margin:0 0 2.25rem; font-size:.78rem; line-height:1; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.cs-contact-intro h1, .cs-contact-intro h2 { margin:0 0 2.25rem; color:inherit; font-size:clamp(3.4rem, 5.3vw, 6.25rem); line-height:.96; letter-spacing:0; font-weight:400; }
.cs-contact-intro > p:last-child { margin:0; max-width:31rem; color:inherit; opacity:.78; font-size:1.08rem; line-height:1.65; }
.cs-contact-form-wrap { border-top:0; padding-top:0; }
.cs-contact-form { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.5rem; }
.cs-field { display:flex; flex-direction:column; gap:.7rem; }
.cs-field-full { grid-column:1 / -1; }
.cs-field label { color:inherit; font-size:.82rem; line-height:1.2; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cs-field label span { opacity:.55; }
.cs-field input:not([type=file]), .cs-field select, .cs-field textarea { width:100%; min-height:3.5rem; margin:0; padding:.8rem 0; border:0; border-bottom:1px solid currentColor; border-radius:0; outline:0; background:transparent; color:inherit; font:inherit; box-shadow:none; }
.cs-field textarea { min-height:8.5rem; resize:vertical; }
.cs-field select { appearance:auto; }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { border-bottom-width:2px; }
.cs-contact-careers .cs-field select option { color:#322a20; }
.cs-upload { position:relative; display:flex; align-items:center; min-height:7.5rem; padding:1.25rem; border:1px dashed currentColor; }
.cs-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.cs-upload div { display:flex; flex-direction:column; gap:.35rem; pointer-events:none; }
.cs-upload strong { text-decoration:underline; text-underline-offset:.22rem; }
.cs-upload small { opacity:.65; font-size:.82rem; }
.cs-home-upload { grid-column:1 / -1; color:#f2f1ed; }
.cs-home-upload > label { display:block; margin-bottom:.7rem; color:inherit; font-size:.82rem; line-height:1.2; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cs-form-action { grid-column:1 / -1; display:flex; align-items:center; gap:1.25rem; margin-top:.75rem; }
.cs-submit { min-height:3.5rem; padding:.9rem 1.5rem; border:1px solid #322a20; border-radius:.35rem; background:#322a20; color:#f2f1ed; font:inherit; cursor:pointer; transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
.cs-contact-careers .cs-submit { border-color:#f2f1ed; background:#f2f1ed; color:#322a20; }
.cs-contact-section .cs-submit:hover,
.cs-contact-section .cs-submit:focus-visible {
  border-color:#41767e !important;
  background-color:#41767e !important;
  color:#f2f1ed !important;
}
.cs-contact-careers .cs-submit:hover,
.cs-contact-careers .cs-submit:focus-visible {
  border-color:#322a20 !important;
  background-color:#322a20 !important;
  color:#f2f1ed !important;
}
.cs-form-action span { max-width:13rem; opacity:.65; font-size:.78rem; line-height:1.4; }
.cs-contact-section .w-form-done, .cs-contact-section .w-form-fail { margin-top:1rem; color:#322a20; }
@media (max-width: 767px) {
  #home-projects-grid,
  .cs-projects-grid { columns: 1; }
  .cs-contact-section { padding:7rem 0 5rem; }
  .cs-contact-section .padding-global { width:100%; box-sizing:border-box; padding-left:1rem !important; padding-right:1rem !important; }
  .cs-contact-section .container-large { width:calc(100vw - 2rem); max-width:calc(100vw - 2rem); margin-left:0; margin-right:0; }
  .cs-contact-layout { grid-template-columns:1fr; gap:3.5rem; }
  .cs-contact-intro { position:static; }
  .cs-contact-intro h1, .cs-contact-intro h2 { font-size:3rem; overflow-wrap:anywhere; }
  .cs-contact-intro > p:last-child { max-width:100%; overflow-wrap:anywhere; }
  .cs-contact-form { grid-template-columns:1fr; gap:1.75rem; }
  .cs-field-full { grid-column:auto; }
  .cs-form-action { grid-column:auto; align-items:flex-start; flex-direction:column; }
}
body { background-color: #f2f1ed; color: #322a20; }
.bg-secondary, .section_about.bg-secondary { background-color: #f2f1ed !important; }
.text-color-subtle { color: #f2f1ed !important; opacity: 1 !important; }
.text-color-secondary { color: #5a5348 !important; opacity: 1 !important; }
.text-white .text-color-subtle,
.text-white .text-color-secondary { color: #f2f1ed !important; opacity: 1 !important; }
.footer-copy { max-width: 24rem; }
.footer-copy-last { white-space: nowrap; }
a:hover, .nav_links:hover, .nav_dropdown-link:hover, .footer_link:hover { color: #41767e !important; }
.button:hover { border-color: #41767e !important; background-color: #41767e !important; color: #f2f1ed !important; }
.button:hover, .button:hover * { color: #f2f1ed !important; }
hr, .line, .divider, [class*="border"], [class*="line"] { border-color: #41767e !important; }
::selection { background: #41767e; color: #f2f1ed; }
.section_footer .footer_layout {
  min-height: 60vh !important;
  align-items: flex-start !important;
  padding-top: 6rem !important;
  padding-bottom: 4rem !important;
}
.section_footer .max-description.is-15rem { margin-top: 0 !important; }
.section_footer .footer_links-layout {
  display: grid !important;
  grid-template-columns: repeat(3, max-content) !important;
  justify-content: start !important;
  width: auto !important;
  max-width: none !important;
  gap: 0.5rem 5rem !important;
}
.section_footer .footer_links { display: flex !important; flex-direction: column !important; gap: 1.4rem !important; }
.section_footer .max-description.is-15rem .text-4xl { font-size: 2.5rem !important; line-height: 1.1 !important; }
.footer_portfolio {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.75rem;
  flex: 0 0 auto;
  margin: 0;
  max-width: 20rem;
}
.footer_portfolio-title { font-size: 1.25rem; font-weight: 600; color: #f2f1ed; letter-spacing: -0.01em; line-height: 1.2; }
.footer_portfolio-sub { font-size: 0.875rem; line-height: 1.5; color: #d0cec1; }
.footer_portfolio-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 3rem;
  background: #f2f1ed;
  border-radius: 6px;
  cursor: pointer;
  color: #322a20;
  box-shadow: inset 0 2px 6px rgba(50,42,32,0.18), inset 0 -1px 2px rgba(255,255,255,0.4);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.footer_portfolio-drop:hover { color: #41767e; box-shadow: inset 0 2px 8px rgba(50,42,32,0.28); }
@media (max-width: 991px) {
  .footer_portfolio { width: 100%; max-width: none; }
  .footer_portfolio-drop { width: 100%; }
}
.footer-mark { font-size: 0 !important; line-height: 0 !important; width: 100% !important; margin-left: 0 !important; }
.footer-mark .footer-mark_img { display: block; width: 100%; height: auto; max-width: none; border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* Page-two content refinements. */
.about_layout-two._2 { align-items: stretch !important; }
.about_layout-two._2 .about_info { align-self: stretch !important; }
.about_layout-two._2 .about_img-two {
  align-self: stretch !important;
  min-height: 100% !important;
  padding-top: 0 !important;
  margin-top: -2.75rem !important;
}
@media (max-width: 991px) {
  .about_layout-two._2 .about_img-two {
    min-height: 0 !important;
    padding-top: 65% !important;
    margin-top: 0 !important;
  }
}
.about-monogram { opacity: 1 !important; font-size: clamp(3.25rem, 8vw, 8rem) !important; line-height: .78 !important; }
.section_about .about_visuals { overflow: hidden !important; }
.about-monogram {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  white-space: nowrap;
}
.about-monogram__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ckds-marquee 22s linear infinite;
}
.about-monogram__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding-right: clamp(2rem, 5vw, 6rem);
}
.about-monogram__group img {
  display: block;
  flex: none;
  width: clamp(14rem, 27vw, 32rem);
  height: auto;
}
@keyframes ckds-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-monogram__track { animation: none; }
}
.cs-home-contact-copy { color: rgba(242,241,237,.82); max-width: 34rem; margin: 1rem 0 0; line-height: 1.5; }
.cs-careers-link { display: inline-block; color: #f2f1ed; margin-top: 1.5rem; text-decoration: underline; text-underline-offset: .3rem; }
.heading_number {
  align-self: flex-start !important;
  align-items: flex-start !important;
}
.heading_number .text-6xl {
  line-height: 0.9 !important;
  transform: translateY(-0.085em) !important;
}
.heading_number > :not(.text-6xl) {
  line-height: 1 !important;
  transform: translateY(0.25rem) !important;
}
.heading_number.scroll-into-view,
.heading_number + * > .scroll-into-view:first-child {
  transform: none !important;
}
:is(.heading, .heading-success, .about_heading, .heading-projects, .experiences_layout):has(> .heading_number) {
  align-items: flex-start !important;
}
:is(.heading, .heading-success, .about_heading, .heading-projects, .experiences_layout):has(> .heading_number) > * {
  align-self: flex-start !important;
}
.journey_timeliine { padding-right: clamp(5rem, 10vw, 10rem) !important; }
/* The journey scroll animation travels a fixed -30% of the viewport. On laptop
   widths the 4x440px columns outrun that travel and the 2025 column gets clipped
   (client 03/08 + 6/08). Narrow the columns there so the travel covers the width. */
@media (min-width: 992px) and (max-width: 1512px) {
  .timeline-step { min-width: 26.5rem; }
}
@media (min-width: 992px) and (max-width: 1366px) {
  .timeline-step { min-width: 23.75rem; }
}
.section-journey .ju-para > .text-color-subtle {
  color: #5a5348 !important;
  opacity: 1 !important;
}

/* Casa Nero dining image is the only full-portrait cover: anchor every crop to the
   bottom of the frame so the chairs and table show (client 6/08). The About FAQ (05)
   instance is the exception: it shows the complete frame uncropped. */
img[src$="casa-nero-01.jpg"] { object-position: center bottom !important; }
.faq_img:has(img[src$="casa-nero-01.jpg"]) {
  height: auto !important;
  padding-top: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
}
.faq_img img[src$="casa-nero-01.jpg"] {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

/* TopNav: combination-mark logo size */
.navbar_logo-link .nav_svg { width: 12rem !important; height: auto !important; }

/* TopNav stays legible over every surface and follows scroll direction. */
.navbar,
.navbar.work-nav {
  z-index:1000 !important;
  position:fixed !important;
  transform:translateY(0);
  transition:transform .28s ease;
  will-change:transform;
}
.navbar.is-nav-hidden { transform:translateY(calc(-100% - 1rem)); }
.navbar .navbar_content {
  max-width:75rem;
  margin:.75rem auto 0;
  border:1px solid rgba(242,241,237,.18);
  border-radius:.75rem;
  background:rgba(50,42,32,.9);
  color:#f2f1ed;
  box-shadow:0 .5rem 1.5rem rgba(50,42,32,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.navbar .nav_container {
  max-width:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.navbar .navbar_list { color:#f2f1ed !important; }
.navbar .nav_links { color:#f2f1ed !important; }
.navbar .nav_links:hover,
.navbar .nav_links.w--current { color:#41767e !important; }
.navbar .nav-button_line { background-color:#322a20; }
@media (max-width:991px) {
  .navbar .navbar_content { margin:.5rem .75rem 0; }
}
@media (prefers-reduced-motion:reduce) {
  .navbar { transition:none; }
}

/* TopNav: active link in accent color */
.nav_links.w--current,
.nav_links.w--current *,
.nav_dropdown-link.w--current,
.footer_link.w--current,
.footer_link.w--current * { color: #41767e !important; }

/* ============================================================
   Homepage Instagram strip
   ============================================================ */
.section_instagram, .cs-instagram {
  background: #d0cec1 !important;
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  min-height: 90vh !important;
  width: 100% !important;
  isolation: isolate;
}
.cs-instagram__head { text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
.cs-instagram__eyebrow { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #41767e; margin-bottom: 0.6rem; }
.cs-instagram__title { font-family: Syne, sans-serif; font-size: 3.75rem; line-height: 1.1; color: #322a20; margin: 0; }
.section_instagram .cs-instagram__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: none !important;
}
.cs-instagram__post {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background: #d0cec1;
  text-decoration: none;
  color: #f2f1ed;
}
.cs-instagram__post img,
.cs-instagram__post video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.cs-instagram__post video { background: #d0cec1; }
.cs-instagram__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 42, 32, 0);
  opacity: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
  color: #f2f1ed;
}
.cs-instagram__post:hover img,
.cs-instagram__post:hover video { transform: scale(1.05); }
.cs-instagram__post:hover .cs-instagram__overlay { opacity: 1; background: rgba(50, 42, 32, 0.35); }
@media (max-width: 767px) {
  .section_instagram .cs-instagram__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }
  .cs-instagram__title { font-size: 1.65rem; }
}

/* ============================================================
   Detail page gallery (up to 5 images: hero + 2x2 grid)
   ============================================================ */
.cs-detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.cs-detail-gallery__item {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent !important;
  align-self: start;
}
.cs-detail-gallery__item--hero { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.cs-detail-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Casa Nero dining photograph: preserve the complete authored portrait frame. */
html[data-project-slug="casa-nero"] .overview_img {
  padding-top: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html[data-project-slug="casa-nero"] .overview_img img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .cs-detail-gallery { grid-template-columns: 1fr; }
  .cs-detail-gallery__item--hero { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Detail page project meta block (Location / Area / Year / Type)
   ============================================================ */
.cs-project-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(50,42,32,0.15);
}
.cs-project-meta > div { display: flex; flex-direction: column; gap: 0.25rem; }
.cs-project-meta__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6457; }
.cs-project-meta__value { font-family: Syne, sans-serif; font-size: 1.05rem; color: #322a20; }

/* CMS list visibility safety net (Webflow IX hides .scroll-into-view) */
#team-grid > div, #home-services-grid > div, #home-projects-grid > div { opacity: 1 !important; visibility: visible !important; }

/* Team card layout (was driven by .scroll-into-view._100 originally) */
#team-grid .team_card.full { max-width: none; width: 100%; }
#team-grid,
#team-grid > .w-dyn-item,
#team-grid .team_card,
#team-grid .team_card .flex._50vh,
#team-grid .team_card-img { background-color: transparent !important; }
#team-grid .team_card .flex._50vh { display: flex; flex-flow: row; align-items: stretch; gap: 5rem; min-height: 60vh; }
#team-grid .team_card-img { width: 50%; padding-top: 0; position: relative; overflow: hidden; aspect-ratio: 4/5; }
#team-grid .team_card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#team-grid .team_card .flex-center._50 { width: 50%; display: flex; flex-direction: column; justify-content: center; gap: 1rem; text-align: left; }
#team-grid .team_card .flex-center._50 [data-cms="name"] { font-size: clamp(2rem, 3vw, 3.5rem); line-height: 1.05; }
#team-grid .team_card .flex-center._50 [data-cms="role"] { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
#team-grid .team_card .flex-center._50 [data-cms="bio"] { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.55; white-space: pre-line; }
#team-grid .team_card .flex-center._50 p { margin: 0; }
@media (max-width: 991px) {
  #team-grid .team_card .flex._50vh { flex-flow: column; gap: 2rem; min-height: auto; }
  #team-grid .team_card-img, #team-grid .team_card .flex-center._50 { width: 100%; }
}

/* ============================================================
   Services page, full-width numbered rows
   ============================================================ */
.cs-service-rows { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
#services-grid > div { opacity: 1 !important; visibility: visible !important; }
.cs-service-row { display: block; }
.cs-service-row__link {
  display: grid;
  grid-template-columns: 1.4fr 1fr 9rem;
  align-items: center;
  gap: 2.5rem;
  padding: 2.25rem 2.5rem;
  border-radius: 4px;
  color: #f2f1ed;
  text-decoration: none;
  transition: background-color 0.25s ease;
  border-bottom: 1px solid #f2f1ed;
  cursor: default;
}
/* Alternate row backgrounds: even rows get a slightly raised panel */
.cs-service-row:nth-child(odd) .cs-service-row__link { background: rgba(242, 241, 237, 0.05); }
.cs-service-row__link:hover { background: inherit; }
.cs-service-row__heading { display: flex; align-items: flex-start; gap: 1.25rem; }
.cs-service-row__number {
  font-family: Syne, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #d0cec1;
  letter-spacing: 0.05em;
}
.cs-service-row__title {
  font-family: Syne, sans-serif;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 500;
  margin: 0;
  color: #f2f1ed;
}
.cs-service-row__summary {
  font-size: 1rem;
  line-height: 1.55;
  color: #d0cec1;
  margin: 0;
}
.cs-service-row__media {
  width: 9rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 4px;
  justify-self: end;
  background: #d0cec1;
}
.cs-service-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cs-service-row__link:hover .cs-service-row__media img { transform: none; }
@media (max-width: 991px) {
  .cs-service-row__link { grid-template-columns: 1fr 8rem; padding: 1.5rem; gap: 1.25rem; }
  .cs-service-row__summary { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cs-service-row__link { grid-template-columns: 1fr; }
  .cs-service-row__title { font-size: 1.85rem; }
  .cs-service-row__media { width: 100%; height: 10rem; justify-self: stretch; }
}

/* ============================================================
   Services page, featured projects (3 staggered cards, watermark)
   ============================================================ */
.cs-featured { position: relative; overflow: hidden; background-color: #f2f1ed; }
.cs-featured__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.cs-featured__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
}
/* Scroll-reveal: slide up from below */
.cs-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.cs-reveal.is-visible { opacity: 1; transform: translateY(0); }
.section_services-hero [hero] { visibility: visible !important; }
.cs-featured__card {
  display: block;
  text-decoration: none;
  color: #322a20;
  transition: transform 0.3s ease;
}
.cs-featured__card:hover { transform: translateY(-4px); }
.cs-featured__card--top,
.cs-featured__card--right { grid-column: auto; grid-row: auto; }
.cs-featured__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #d0cec1; }
.cs-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.cs-featured__card:hover .cs-featured__media img { transform: scale(1.04); }
.cs-featured__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  gap: 1rem;
}
.cs-featured__title { font-size: 1rem; color: #322a20; }
.cs-featured__link  { font-size: 0.95rem; color: #41767e; letter-spacing: 0.02em; }
@media (max-width: 767px) {
  .cs-featured__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-featured__card--top, .cs-featured__card--right { grid-column: 1; grid-row: auto; transform: none; }
  .cs-featured__card--right:hover { transform: translateY(-4px); }
}

/* ============================================================
   Work page, filter chip bar + project grid
   ============================================================ */
.cs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto;
}
.cs-chip {
  appearance: none;
  border: 1px solid rgba(242, 241, 237, 0.35);
  background: transparent;
  color: #f2f1ed;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cs-chip:hover { border-color: #41767e; color: #41767e; }
.cs-chip.is-active {
  background: #41767e;
  border-color: #41767e;
  color: #f2f1ed;
}
.cs-chip__count { opacity: 0.75; margin-left: 0.25rem; font-size: 0.85em; }

.cs-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 3rem;
  width: 100%;
}
#projects-grid > div { opacity: 1 !important; visibility: visible !important; }
.cs-project-card { display: block; }
.cs-project-card__link {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: #f2f1ed;
  text-decoration: none;
}
.cs-project-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d0cec1;
}
.cs-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.cs-project-card__link:hover .cs-project-card__media img { transform: scale(1.04); }
.cs-project-card__title {
  font-family: Syne, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  color: #f2f1ed;
}
.cs-project-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.cs-project-card__info:last-child { justify-self: end; text-align: left; }
.cs-project-card__label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d0cec1;
  margin-bottom: 0.35rem;
}
.cs-project-card__value {
  font-size: 1rem;
  color: #f2f1ed;
}
@media (max-width: 767px) {
  .cs-projects-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cs-project-card__title { font-size: 1.4rem; }
}

/* ============================================================
   About, Life at Checkered Spaces (carousel + copy)
   ============================================================ */
.cs-life {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 4rem;
  align-items: stretch;
}
.cs-life {
  position: relative;
  overflow: hidden;
}
.cs-life__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d0cec1;
  border-radius: 4px;
  min-width: 0;
}
.cs-life__stage { position: absolute; inset: 0; }
.cs-life__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.cs-life__slide.is-active { opacity: 1; }
.cs-life__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
.cs-life__slide img { object-fit: contain !important; }
.cs-life__slide.is-active img { transform: none !important; }
.cs-life__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242, 241, 237, 0.55);
  background: rgba(50, 42, 32, 0.35);
  color: #f2f1ed;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  z-index: 2;
}
.cs-life__arrow:hover { background: #41767e; border-color: #41767e; color: #f2f1ed; }
.cs-life__arrow.is-prev { left: 1rem; }
.cs-life__arrow.is-next { right: 1rem; }
.cs-life__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.15rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}
.cs-life__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(242, 241, 237, 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.cs-life__dot:hover { background: #f2f1ed; }
.cs-life__dot.is-active { background: #41767e; transform: scale(1.3); }
.cs-life__copy { display: flex; align-items: center; }
.cs-life__values { display: flex; flex-direction: column; gap: 1.75rem; width: 100%; }
.cs-life__value { padding-top: 1.25rem; border-top: 1px solid rgba(50, 42, 32, 0.15); }
.cs-life__value:first-child { padding-top: 0; border-top: 0; }
.cs-life__value-title {
  font-family: Syne, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: #322a20;
  margin-bottom: 0.5rem;
}
@media (max-width: 991px) {
  .cs-life { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .cs-life__arrow { width: 2.25rem; height: 2.25rem; }
  .cs-life__arrow.is-prev { left: 0.5rem; }
  .cs-life__arrow.is-next { right: 0.5rem; }
  .cs-life__value-title { font-size: 1.15rem; }
}

/* ============================================================
   Accolades, hero (heading top-left, picture centre, sub bottom-right)
   ============================================================ */
.cs-acc-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 2.5rem;
  align-items: start;
}
.cs-acc-hero__heading {
  grid-column: 1 / span 7;
  grid-row: 1;
  margin: 0;
}
.cs-acc-hero__media {
  position: relative;
  grid-column: 3 / span 8;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d0cec1;
  border-radius: 4px;
}
.cs-acc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-acc-hero__sub {
  grid-column: 8 / span 5;
  grid-row: 3;
  justify-self: end;
  text-align: right;
  max-width: 28rem;
  color: #f2f1ed;
  font-size: 1rem;
  line-height: 1.55;
}
@media (max-width: 991px) {
  .cs-acc-hero__heading { grid-column: 1 / -1; }
  .cs-acc-hero__media   { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .cs-acc-hero__sub     { grid-column: 1 / -1; justify-self: stretch; text-align: left; max-width: none; }
}

/* ============================================================
   Accolades, article cards (2-up) and alternating gallery
   ============================================================ */
.cs-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.cs-article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #322a20;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.cs-article:hover { transform: translateY(-4px); }
.cs-article__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d0cec1;
  border-radius: 4px;
}
.cs-article__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.6s ease;
}
.cs-article:hover .cs-article__media img { transform: none; }
.section_press .cs-article,
.section_gallery .cs-altgallery__item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.cs-article__body { display: flex; flex-direction: column; gap: 0.85rem; }
.cs-article__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #41767e;
}
.cs-article__title {
  font-family: Syne, sans-serif;
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: #322a20;
}
.cs-article__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: #6b6457;
  margin: 0;
}
.cs-article__cta {
  font-size: 0.95rem;
  color: #41767e;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 0.15rem;
  align-self: flex-start;
}
.cs-article__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #41767e;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.cs-article:hover .cs-article__cta::after { transform: scaleX(1); }
@media (max-width: 767px) {
  .cs-articles { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-article__title { font-size: 1.4rem; }
}

/* Alternating vertical gallery */
.cs-altgallery {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.cs-altgallery__item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0;
  align-items: end;
}
.cs-altgallery__item.is-left  .cs-altgallery__media { grid-column: 1 / span 7; }
.cs-altgallery__item.is-right .cs-altgallery__media { grid-column: 6 / span 7; }
.cs-altgallery__item.is-left  .cs-altgallery__caption { grid-column: 1 / span 7; }
.cs-altgallery__item.is-right .cs-altgallery__caption { grid-column: 6 / span 7; text-align: right; }
.cs-altgallery__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #d0cec1;
  border-radius: 4px;
}
.cs-altgallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.cs-altgallery__item:hover .cs-altgallery__media img { transform: scale(1.03); }

/* Award certificate only: show the complete portrait photograph without cropping. */
.cs-altgallery__item:nth-child(2) .cs-altgallery__media {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
}
.cs-altgallery__item:nth-child(2) .cs-altgallery__media img {
  position: static !important;
  inset: auto !important;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cs-acc-hero__media img,
.cs-article__media img,
.cs-altgallery__media img {
  transform: none !important;
  translate: none !important;
  transition: none !important;
  will-change: auto !important;
}
.cs-altgallery__item:hover .cs-altgallery__media img { transform: none !important; }
.cs-altgallery__caption {
  font-family: Syne, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #322a20;
  margin-top: 1.25rem;
  letter-spacing: 0.01em;
}
@media (max-width: 767px) {
  .cs-altgallery { gap: 3.5rem; }
  .cs-altgallery__item.is-left  .cs-altgallery__media,
  .cs-altgallery__item.is-right .cs-altgallery__media,
  .cs-altgallery__item.is-left  .cs-altgallery__caption,
  .cs-altgallery__item.is-right .cs-altgallery__caption {
    grid-column: 1 / -1;
    text-align: left;
  }
  .cs-altgallery__caption { font-size: 1rem; }
}

/* ============================================================
   Site-wide phone layout
   ============================================================ */
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  .padding-global {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .padding-section-large { padding-top: 4rem !important; }
  .spacer-xhuge { padding-top: 3rem !important; }
  .spacer-xlarge { padding-top: 1.5rem !important; }

  .text-6xl {
    font-size: clamp(2.5rem, 12vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.12rem !important;
  }
  .text-5xl {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.08rem !important;
  }

  /* Mobile content must never remain in a partially hidden scroll state. */
  .scroll-into-view {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  [hero="heading"],
  [hero="description"],
  [hero="heading"] *,
  [hero="description"] * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .img-appear .img-wrap { display: none !important; }
  .img-appear img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .navbar .navbar_content { margin: 0.5rem 0.75rem 0 !important; }
  .navbar_logo-link .nav_svg { width: 10.5rem !important; }

  :is(.heading, .heading-success, .about_heading, .heading-projects, .experiences_layout):has(> .heading_number) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }
  .heading_number {
    width: 100%;
    gap: 0.75rem !important;
  }
  .heading_number .text-6xl { font-size: 3rem !important; }
  .heading_number + * { width: 100%; }

  .services_hero,
  .section_projects-main { padding-top: 7rem !important; }
  .services_hero > .text-6xl,
  .section_projects-main .text-6xl {
    max-width: 100%;
    overflow-wrap: normal;
  }

  .sticky-w { height: auto !important; }
  .sticky-main { position: static !important; top: auto !important; }
  .journey_timeliine {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 1rem !important;
    gap: 2.5rem !important;
  }
  .timeline-step {
    width: 100% !important;
    min-width: 0 !important;
  }
  .timeline_path-container { display: none !important; }
  .timeline-info { width: 100% !important; }

  .section_instagram .cs-instagram__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .section_instagram,
  .cs-instagram { min-height: 0 !important; }

  .cs-service-row__link {
    grid-template-columns: 1fr !important;
    padding: 1.25rem 0 !important;
    gap: 1rem !important;
  }
  .cs-service-row__media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    justify-self: stretch !important;
  }
  .cs-service-row__media img { height: auto !important; }

  .cs-project-card__meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .cs-project-card__info:last-child { justify-self: start !important; }

  .cs-acc-hero__grid { row-gap: 1.5rem !important; }
  .heading.is-press,
  .heading.is-gallery { flex-direction: column !important; gap: 1.25rem !important; }

  .cs-detail-gallery {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .cs-detail-gallery__item,
  .cs-detail-gallery__item--hero { grid-column: 1 !important; }
  .project_hero-img { padding-top: 0 !important; }
  .project_hero-img img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .section_footer .footer_layout {
    min-height: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 3rem !important;
  }
  .section_footer .footer_links-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
  }
  .footer_portfolio { align-items: flex-start; text-align: left; }
  .footer-copy-last { white-space: normal; }
}

/* Mobile nav: the template's demo menu ("Home V.2/V.3" visible, real pages
   hidden via .hide-tablet) was never adapted. On phone/tablet, show the real
   pages in the burger menu, hide the template demo entries, and keep the
   Contact button available in the bar. */
@media (max-width: 991px) {
  .nav_mobile .nav_links.hide-tablet { display: flex !important; }
  .nav_links.nav-hide { display: none !important; }
  .login-wrap.hide-tablet { display: flex !important; }
}


/* Active page shown in the brand teal (the hover colour), bold, with a smooth transition. */
.navbar .nav_links, .footer_link .link { transition: color 0.3s ease !important; }
.navbar .nav_links.is-active,
.footer_link.is-active,
.footer_link.is-active .link { color: #41767e !important; font-weight: 700 !important; }

/* About hero: align the image top exactly to the heading's CAP, not its text box.
   1) Pin this one image to the top of its box (no parallax offset) so its top edge
      is at the column top. Scoped to the about hero only.
   2) The heading box has ~0.225em of font ascent space ABOVE the visible letters that
      the image doesn't; trim it so the cap of "Good" meets the image top exactly. */
.about_hero-img .img-parallax {
  top: 0 !important;
  bottom: auto !important;
  height: 100% !important;
  transform: none !important;
}
.about_hero-title h1 { margin-top: -0.225em !important; }