:root {
  /* Color Palette - Light Wood Luxury.
     The page is white; the only dark surfaces left are the photographic
     heroes and the lightbox, where imagery supplies the contrast. Anything
     that sits on one of those uses --on-image / --rule-on-image instead of
     the ink and rule tokens below. */
  --bg-primary: #ffffff;
  /* A warm near-white, not a grey. Alternating sections still need to read as
     separate bands; at this value the difference registers as "white" but the
     page does not collapse into one flat sheet. */
  --bg-secondary: #f7f4f0;
  --bg-footer: #f2eee9;
  --text-primary: #1b1714;
  --text-secondary: #57504a;
  /* Used throughout the footers, breadcrumbs and card meta. Previously
     undefined, which silently fell back to --text-primary and flattened the
     whole type hierarchy. */
  --text-light: #3a342f;
  /* Tuned against --bg-footer, the darkest surface it lands on: at #736c64 it
     measured 4.48:1 there, just under the 4.5 AA minimum for body text. */
  --text-muted: #6a635b;
  /* The brand gold (#cfa873) reads at about 2:1 on white — fine as a fill on
     dark, unusable as text on light. --accent-gold is the darkened, text-safe
     version used for links and headings; --accent-gold-bright keeps the
     original for fills and for accents sitting on imagery. */
  --accent-gold: #8c6134;
  --accent-gold-hover: #6f4c28;
  --accent-gold-bright: #cfa873;
  --accent-wood-dark: #3a2c20;
  --accent-wood-light: #8b6b4b;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* Hairlines. The dark theme drew these as white-alpha; on white they have to
     be black-alpha or they vanish. Four weights, matching the four alpha
     values the markup was already using. */
  --rule-faint: rgba(0, 0, 0, 0.05);
  --rule-soft: rgba(0, 0, 0, 0.07);
  --rule: rgba(0, 0, 0, 0.11);
  --rule-strong: rgba(0, 0, 0, 0.2);

  /* Text and hairlines that sit on a photographic hero or the lightbox, where
     the backdrop stays dark regardless of the page theme. */
  --on-image: #ffffff;
  --on-image-muted: rgba(255, 255, 255, 0.86);
  --rule-on-image: rgba(255, 255, 255, 0.55);

  /* Shadows were tuned for a black page. On white the same opacities read as
     dirty smudges, so they drop to roughly a fifth. */
  --shadow-card: 0 18px 40px rgba(28, 22, 16, 0.10);
  --shadow-card-hover: 0 28px 60px rgba(28, 22, 16, 0.16);

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Layout */
  --container-max-width: 1300px;
  --section-padding: 8rem 2rem;
  
  /* Animations */
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  max-width: 100%;
  overflow-x: hidden;
}

/* `clip`, not `hidden`: an overflow-x of hidden on <body> turns it into a
   scroll container of its own, and because the *viewport* is what actually
   scrolls, position: sticky inside the page never engages (the sticky
   services rail and the about/contact side columns all silently failed).
   `clip` still cuts off horizontal overflow without creating a scroll
   container. */
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: auto; /* Handled by GSAP ScrollSmoother conceptually or native if standard */
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, iframe, video {
  max-width: 100%;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.2;
}

.highlight {
  color: var(--accent-gold);
  font-weight: 400;
}

.section-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.body-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.center {
  text-align: center;
}

/* Layout Utilities */
.section-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

section {
  padding: var(--section-padding);
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Buttons */
.btn-primary, .btn-primary-small {
  display: inline-block;
  background-color: var(--accent-gold);
  color: var(--bg-primary);
  padding: 1rem 2.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.btn-primary-small {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
}

.btn-primary:hover, .btn-primary-small:hover {
  background-color: var(--accent-gold-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--text-primary);
  padding: 1rem 2.5rem;
  font-family: var(--font-heading);
  text-decoration: none;
  font-size: 1.1rem;
  border: 1px solid var(--text-secondary);
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  border-color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.btn-text {
  color: var(--accent-gold);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  transition: var(--transition-smooth);
}

.btn-text:hover {
  transform: translateX(10px);
}

.w-full { width: 100%; }

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  transition: padding 0.4s ease, background 0.4s ease,
              backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.navbar.scrolled {
  padding: 1rem 0;
}

.nav-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  position: relative;
}

.logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a:not(.btn-primary-small) {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition-smooth);
  position: relative;
}

.nav-links a:not(.btn-primary-small):hover {
  color: var(--text-primary);
}

.nav-links a:not(.btn-primary-small)::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: var(--transition-smooth);
}

.nav-links a:not(.btn-primary-small):hover::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

.mobile-menu-btn span {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--text-primary);
  transition: 0.3s;
}

/* Language switch. Colour and divider live here rather than in the markup's
   inline style so the transparent-header state below can override them
   without !important. */
.lang-switch {
  transition: color 0.4s ease, border-color 0.4s ease;
}

/* Qualified with the `a` and the parent so these outrank the generic
   `.nav-links a` / `.mobile-nav a` colour rules, which are more specific than
   a bare `.lang-switch` and would otherwise win. */
.nav-links a.lang-switch,
.mobile-nav a.lang-switch {
  color: var(--accent-gold);
}

.nav-links a.lang-switch {
  border-left: 1px solid var(--rule-strong);
}

/* --- Transparent header over a photographic hero -------------------------
   Pages that open on a dark image hero (home via .hm-hero, about, services) show the bar
   with no surface of its own, then pick up the white glass once .scrolled is
   set. Pages that open on white (portfolio, blog, articles) keep the glass bar
   from the start — a transparent bar there would leave light-on-white.

   :has() decides this from the markup instead of a per-page class. Where it is
   unsupported the bar simply stays white throughout, which is still legible.

   The logo has to swap too: the mark is dark brown and would disappear against
   the hero photograph, so a light variant is stacked behind it and cross-faded. */
.logo {
  position: relative;
}

/* Most pages wrap the mark in an <a>; its inline-box leading made .logo a few
   pixels taller than the image, so the absolutely-centred light copy sat ~4px
   off the dark one and the cross-fade visibly jumped. */
.logo a {
  display: flex;
  align-items: center;
}

.logo-mark {
  transition: opacity 0.4s ease;
}

.logo-mark--light {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .nav-links a:not(.btn-primary-small) {
  color: var(--on-image-muted);
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .nav-links a:not(.btn-primary-small):hover {
  color: var(--on-image);
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .nav-links a.lang-switch {
  color: var(--accent-gold-bright);
  border-left-color: var(--rule-on-image);
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .mobile-menu-btn span {
  background: var(--on-image);
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .logo-mark--dark {
  opacity: 0;
}

body:has(.hero, .page-hero, .hm-hero) .navbar:not(.scrolled) .logo-mark--light {
  opacity: 1;
}

/* The open mobile menu is a white sheet, so the burger goes back to ink even
   while the bar itself is still transparent. */
body:has(.mobile-menu-overlay.active) .navbar:not(.scrolled) .mobile-menu-btn span {
  background: var(--text-primary);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* For parallax */
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10,9,8,0.9) 0%, rgba(10,9,8,0.4) 100%);
  z-index: -1;
}

.hero-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 10;
}

.hero-title {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  max-width: 600px;
  margin-bottom: 3rem;
}

/* --- Content sitting on a photograph ------------------------------------
   These are the only places left with a dark backdrop: the homepage hero and
   the about/services page headers, whose background image is dimmed to
   brightness(0.4). Their text has to stay light regardless of the page theme.

   .hero-title is deliberately scoped rather than coloured at the class level:
   the portfolio page reuses it in .projects-header, which sits on the plain
   white page, where a white title would be invisible. */
.hero .hero-title,
.page-hero-title {
  color: var(--on-image);
}

.hero .hero-subtitle,
.page-hero .body-text {
  color: var(--on-image-muted);
}

.hero .btn-secondary {
  color: var(--on-image);
  border-color: var(--rule-on-image);
}

.hero .btn-secondary:hover {
  border-color: var(--on-image);
  background: rgba(255, 255, 255, 0.14);
}

.hero-cta-group {
  display: flex;
  gap: 1.5rem;
}

/* About Section */
.about {
  background: var(--bg-primary);
}

.stats-grid {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  padding-top: 3rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 300;
  color: var(--accent-gold);
}

.stat-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
}

.about-visual {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.about-mockup-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  transform: translateZ(0); 
}

.about-mockup-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-mockup-wrapper:hover img {
  transform: scale(1.05);
}

.mockup-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-shadow: inset 0 0 50px rgba(28, 22, 16, 0.10);
  pointer-events: none;
}

/* Services Section */
.services {
  background: var(--bg-secondary);
}

.section-header {
  margin-bottom: 5rem;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem; /* slightly larger clean gap */
  perspective: 1000px;
}
/* Tablets and small desktops */
@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Large desktops only, this guarantees min size */
@media (min-width: 1200px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* An anchor, not a div — the card deep-links to its row on the services page.
   It was always styled with cursor:pointer, so it read as clickable long
   before it actually was. */
.service-card {
  text-decoration: none;
  color: inherit;
  background: var(--bg-primary);
  border: 1px solid var(--rule-faint);
  box-shadow: var(--shadow-card);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Force equal heights in grid */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.service-img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3; /* Completely locks the ratio from stretching */
  flex: 0 0 auto; /* Stop flexbox from squishing it vertically */
  overflow: hidden;
  position: relative;
}

.service-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(140, 97, 52, 0.35);
}

.service-card:hover .service-img-wrapper img {
  transform: scale(1.08); /* slight smooth zoom in */
}

.service-content {
  padding: 2.5rem 2rem;
  flex: 1; /* stretches text container evenly matching card height */
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.service-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.service-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Portfolio Section */
.split-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
}

/* Layout masonry items */
.portfolio-item.tall {
  grid-column: span 5;
  height: 600px;
}

.portfolio-item.wide {
  grid-column: span 7;
  height: 400px;
}

.pt-2 { margin-top: 100px; }

.portfolio-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.portfolio-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.5rem;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.92) 0%, rgba(10, 9, 8, 0.45) 45%, transparent 100%);
  transform: translateY(20px);
  opacity: 0;
  transition: var(--transition-smooth);
}

.portfolio-item:hover .portfolio-meta {
  transform: translateY(0);
  opacity: 1;
}

.portfolio-meta h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--on-image);
}

.portfolio-meta p {
  color: var(--on-image-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

/* Contact Section */
.contact {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  right: -20%;
  bottom: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(207,168,115,0.05) 0%, transparent 70%);
  z-index: 0;
}

.get-in-touch, .contact-form-wrapper {
  position: relative;
  z-index: 1;
}

.info-block {
  margin-top: 2rem;
}

.info-block h3 {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.info-block p {
  font-size: 1.2rem;
}

.glass-form {
  background: var(--bg-secondary);
  backdrop-filter: blur(20px);
  border: 1px solid var(--rule-soft);
  padding: 3rem;
  border-radius: 4px;
}

.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  padding: 1rem 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.1rem;
  outline: none;
  transition: var(--transition-smooth);
}

.form-group select {
  appearance: none;
  color: var(--text-secondary);
}

.form-group select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.form-group label {
  position: absolute;
  top: 1rem;
  left: 0;
  color: var(--text-secondary);
  pointer-events: none;
  transition: var(--transition-smooth);
}

.form-group input:focus, .form-group textarea:focus {
  border-bottom-color: var(--accent-gold);
}

.form-group input:focus ~ label, 
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label, 
.form-group textarea:not(:placeholder-shown) ~ label {
  top: -12px;
  font-size: 0.8rem;
  color: var(--accent-gold);
}

/* Footer */
.footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--rule-soft);
  padding: 5rem 2rem 2rem;
}

.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.footer-logo {
  height: 60px;
  width: auto;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--text-secondary);
  max-width: 400px;
}

.footer-bottom {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: 2rem;
  transition: color 0.3s;
}

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

/* WhatsApp Float */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: transform 0.3s ease;
}

.whatsapp-float svg {
  width: 35px;
  height: 35px;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-5px);
}

/* Mobile Nav Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.98);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: 0.3s;
}

.mobile-nav a:hover {
  color: var(--accent-gold);
}

/* Responsive Design */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: flex; }

  .split-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-visual {
    min-height: 300px;
    margin-top: 3rem;
  }

  .portfolio-item.tall, .portfolio-item.wide {
    grid-column: span 12;
    height: 400px;
  }
  .pt-2 { margin-top: 0; }
  .split-header { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-links a { margin: 0 0.5rem; }

  .stats-grid { flex-wrap: wrap; gap: 1.5rem; justify-content: center; text-align: center; }
  .about-text { text-align: center; }
  .about-mockup-wrapper { height: auto; aspect-ratio: 4/5; max-height: 450px; }
  .hero-cta-group { flex-direction: column; width: 100%; text-align: center; gap: 1rem; }
  .hero-cta-group a { width: 100%; box-sizing: border-box; }
  .section-heading { font-size: 2.2rem; }
  .hero-title { font-size: 2.8rem; line-height: 1.1; }
  .glass-form { padding: 2rem 1.5rem; }
}

/* Phone-specific tightening — prevents horizontal overflow & zoom-out behavior */
@media (max-width: 600px) {
  :root {
    --section-padding: 4.5rem 1.25rem;
  }

  .nav-container {
    padding: 0 1.25rem;
  }

  .logo img {
    height: 44px !important;
  }

  .hero {
    padding: 0 1.25rem;
    min-height: 88vh;
  }

  .hero-title {
    font-size: 2.25rem;
    letter-spacing: -0.5px;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .section-heading {
    font-size: 1.9rem;
    letter-spacing: -0.5px;
  }

  .body-text {
    font-size: 1rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  .btn-text {
    font-size: 1rem;
  }

  .stat-num {
    font-size: 2.25rem;
  }

  .stat-label {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
  }

  .stats-grid {
    gap: 1rem 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
  }

  .service-content {
    padding: 1.75rem 1.5rem;
  }

  .service-title {
    font-size: 1.2rem;
  }

  .portfolio-grid {
    gap: 1rem;
  }

  .portfolio-item.tall,
  .portfolio-item.wide {
    height: 280px;
  }

  .portfolio-meta {
    padding: 1.5rem;
  }

  .portfolio-meta h3 {
    font-size: 1.4rem;
  }

  .glass-form {
    padding: 1.5rem 1.25rem;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 1rem;
  }

  .footer {
    padding: 3rem 1.25rem 1.5rem;
  }

  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-bottom {
    margin-top: 2.5rem !important;
  }

  .footer-logo {
    height: 60px !important;
  }

  .whatsapp-float {
    bottom: 1rem;
    right: 1rem;
    width: 52px;
    height: 52px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  /* Inline-styled language switch: drop the divider on narrow screens */
  .lang-switch {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  .section-header {
    margin-bottom: 3rem;
  }

  .mobile-nav a {
    font-size: 2rem;
  }

  /* Overrides for about/services page inline styles */
  .page-hero {
    height: auto !important;
    min-height: 320px !important;
    padding: 4rem 0;
  }

  .page-hero-content {
    padding: 0 1.25rem !important;
  }

  .page-hero-title {
    font-size: 2.25rem !important;
  }

  .story-section,
  .philosophy-section {
    padding: 4rem 1.25rem !important;
  }

  .story-grid {
    gap: 2.5rem !important;
  }

  .story-img-collage {
    height: 380px !important;
  }

  .story-text-content {
    padding-right: 0 !important;
  }

  .story-title {
    font-size: 2rem !important;
  }

  .stats-section {
    padding: 3rem 1.25rem !important;
  }

  .stats-section .stats-grid {
    gap: 2rem !important;
  }

  .stat-number {
    font-size: 2.75rem !important;
  }

  .stat-label {
    font-size: 0.9rem !important;
  }

  .philosophy-mockup {
    margin-top: 2rem !important;
  }

  .detailed-services-container {
    padding: 4rem 1.25rem !important;
  }

  .service-row {
    gap: 2rem !important;
    margin-bottom: 4rem !important;
  }

  .service-main-title {
    font-size: 2rem !important;
  }

  .service-main-desc {
    font-size: 1rem !important;
  }

  .service-features-list li {
    font-size: 1rem !important;
  }

  /* Contact CTA section with inline padding on about/services pages */
  section.contact[style*="padding"] {
    padding: 4rem 1.25rem !important;
  }

  /* Projects page header title */
  .projects-header .hero-title {
    font-size: 2.25rem !important;
  }
}