@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

/* --- DESIGN SYSTEM & CSS VARIABLES --- */
/* Light mode is the default (:root) and every value below is byte-for-
   byte what it was before dark mode existed — nothing in this block was
   changed, only added to. The new tokens (nav/footer/elevated surfaces,
   button roles, inputs, icon badges) are new *names* for things that
   already had a color; each one is set here to resolve to the exact
   same value the hardcoded/reused-token version produced, so light mode
   renders identically. Dark mode is a second block, `html[data-theme=
   "dark"]`, immediately below — it overrides only these custom
   properties, never a structural rule, so the whole site's markup,
   layout and light theme are untouched by its existence. */
:root {
  /* Colors (Minimal & Lowkey Monochrome Theme in #2b2c32 Charcoal) */
  --bg-primary: #eaeaea;       /* Cool Neutral Light Gray */
  --bg-secondary: #FFFFFF;     /* Pure White */
  --bg-dark: #2b2c32;          /* Rich Charcoal */
  --bg-dark-secondary: #35363d;/* Muted Dark Charcoal */
  --text-primary: #2b2c32;     /* Rich Charcoal */
  --text-secondary: #5a5c66;   /* Muted Slate Charcoal */
  --text-muted: #8c8f9c;       /* Light Slate Charcoal */
  --text-light: #F4F4F4;       /* Light text */
  --text-disabled: #B4B4B4;    /* Disabled-state text (new token, no prior usage) */
  --accent-color: #2b2c32;     /* Charcoal monochrome accent */
  --accent-color-dark: #1f2025;/* Darker Charcoal */
  --accent-light: #EFEFEF;     /* Light Gray Tint */
  --border-color: #DCDCDC;     /* Cool Gray lines */
  --border-color-dark: #3f4049;/* Dark border */
  --shadow-sm: 0 2px 8px rgba(43, 44, 50, 0.02);
  --shadow-md: 0 8px 30px rgba(43, 44, 50, 0.04);
  --shadow-lg: 0 16px 40px rgba(43, 44, 50, 0.06);

  /* Surface roles (new names for existing values — see note above) */
  --nav-bg: rgba(234, 234, 234, 0.9);   /* was hardcoded on .header.scrolled */
  --bg-footer: var(--bg-dark);          /* footer already used bg-dark */
  --bg-elevated: var(--bg-secondary);   /* cards already used bg-secondary */
  --icon-badge-bg: var(--accent-light);
  --icon-badge-color: var(--accent-color);
  --scrollbar-thumb: var(--bg-dark);
  --scrollbar-thumb-hover: var(--bg-dark);

  /* Form fields */
  --input-bg: var(--bg-primary);
  --input-bg-focus: var(--bg-secondary);
  --input-border: var(--border-color);
  --input-focus-ring: rgba(43, 44, 50, 0.08);

  /* Button roles — decoupled from --bg-dark/--bg-secondary on purpose:
     in dark mode a primary button must invert to a LIGHT fill while
     --bg-dark itself stays a dark surface color elsewhere (CTA stripes,
     footer), so buttons need their own tokens rather than reusing those. */
  --btn-fill-bg: var(--bg-dark);              /* .btn-primary, .btn-gold, .back-to-top */
  --btn-fill-text: var(--text-light);
  --btn-fill-border: var(--bg-dark);
  --btn-fill-bg-hover: transparent;
  --btn-fill-text-hover: var(--text-primary);
  --fab-bg-hover: var(--bg-dark-secondary);   /* .back-to-top stays a solid fill on hover, unlike other .btn-fill uses */

  --btn-outline-border: var(--text-primary);  /* .btn-secondary, .btn-outline-gold, social icons */
  --btn-outline-text: var(--text-primary);
  --btn-outline-bg-hover: var(--bg-dark);
  --btn-outline-text-hover: var(--text-light);
  --btn-outline-border-hover: var(--bg-dark);

  --btn-invert-bg: var(--bg-secondary);       /* .btn-dark-primary — white fill for on-photo CTAs */
  --btn-invert-text: var(--bg-dark);
  --btn-invert-border: var(--bg-secondary);
  --btn-invert-bg-hover: transparent;
  --btn-invert-text-hover: var(--text-light);

  --btn-cta-mobile-bg: var(--bg-secondary);   /* mobile-only .cta-stripe .btn override */
  --btn-cta-mobile-text: var(--bg-dark);
  --btn-cta-mobile-border: var(--bg-secondary);
  --btn-cta-mobile-bg-hover: transparent;
  --btn-cta-mobile-text-hover: var(--text-light);

  /* Fonts (Exact template font: Jost) */
  --font-display: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --header-height: 80px;
  --container-width: 1200px;
  --radius-sm: 2px;            /* Sleek sharp corners from template */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s ease;
  --theme-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- DARK MODE --- */
/* Designed as its own surface system (Apple/Linear/Notion-style dark
   UI), not an inversion of light mode: elevation reads as "lighter",
   not "darker" (cards #202124 sit above the #121212 page; the footer
   is pulled the other way, to #0E0E0E, to read as a grounded base
   rather than a raised panel). Buttons flip polarity on purpose — a
   dark-fill primary button would all but disappear on a dark page, so
   primary actions become the light-fill element here instead. */
html[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #202124;        /* elevated surface: cards, section alternation, mobile nav drawer */
  --bg-dark: #181818;             /* CTA stripes / .section-dark band */
  --bg-dark-secondary: #202124;
  --text-primary: #F5F5F5;
  --text-secondary: #C8C8C8;
  --text-muted: #9A9A9A;
  --text-light: #F5F5F5;
  --text-disabled: #6F6F6F;
  --accent-color: #F5F5F5;
  --accent-color-dark: #FFFFFF;   /* the "shift" direction flips: brighten, not darken */
  --accent-light: rgba(255, 255, 255, 0.06);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-dark: rgba(255, 255, 255, 0.05);

  /* Softer, layered, low-opacity — never a single heavy black shadow */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.38), 0 4px 14px rgba(0, 0, 0, 0.22);

  --nav-bg: rgba(18, 18, 18, 0.92);
  --bg-footer: #0E0E0E;
  --bg-elevated: #202124;
  --icon-badge-bg: rgba(255, 255, 255, 0.06);
  --icon-badge-color: #F5F5F5;
  --scrollbar-thumb: #3A3A3D;
  --scrollbar-thumb-hover: #4A4A4E;

  --input-bg: #202124;
  --input-bg-focus: #202124;
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus-ring: rgba(255, 255, 255, 0.1);

  --btn-fill-bg: #F5F5F5;
  --btn-fill-text: #121212;
  --btn-fill-border: #F5F5F5;
  --btn-fill-bg-hover: #FFFFFF;
  --btn-fill-text-hover: #121212;
  --fab-bg-hover: #FFFFFF;

  --btn-outline-border: rgba(255, 255, 255, 0.12);
  --btn-outline-text: #F5F5F5;
  --btn-outline-bg-hover: rgba(255, 255, 255, 0.06);
  --btn-outline-text-hover: #FFFFFF;
  --btn-outline-border-hover: rgba(255, 255, 255, 0.24);

  --btn-invert-bg: #F5F5F5;
  --btn-invert-text: #121212;
  --btn-invert-border: #F5F5F5;
  --btn-invert-bg-hover: transparent;
  --btn-invert-text-hover: #F5F5F5;

  --btn-cta-mobile-bg: #F5F5F5;
  --btn-cta-mobile-text: #121212;
  --btn-cta-mobile-border: #F5F5F5;
  --btn-cta-mobile-bg-hover: transparent;
  --btn-cta-mobile-text-hover: #F5F5F5;
}

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

/* --- THEME TRANSITION --- */
/* Baseline so a data-theme flip fades every color-bearing property
   instead of snapping. Any element with its own more specific
   transition (almost everything interactive already has `transition:
   var(--transition-smooth|fast)`, which is an "all" transition and
   already includes these properties) simply keeps using that instead —
   transition doesn't merge across rules, the more specific one wins
   outright, so this only fills in elements that had no transition of
   their own. */
*, *::before, *::after {
  transition: background-color var(--theme-transition),
              color var(--theme-transition),
              border-color var(--theme-transition),
              box-shadow var(--theme-transition),
              fill var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}

body.page-loaded {
  opacity: 1;
}

body.page-exit {
  opacity: 0;
}

/* Body-copy paragraphs get a touch more breathing room between lines on
   phones — readability matters more on a narrow single column than a
   wide desktop measure. Element-selector specificity means this never
   overrides paragraph classes that already set their own line-height
   intentionally (e.g. the large-display .testimonial-text), only the
   plain body copy that was inheriting the base 1.6 by default. */
@media (max-width: 600px) {
  p {
    line-height: 1.7;
  }
}

/* Custom scrollbar to match the charcoal/neutral theme */
html {
  scrollbar-color: var(--scrollbar-thumb) var(--bg-primary);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-muted);
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

ul {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

/* --- LAYOUT UTILITIES --- */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Mobile design system: a flat 24px gutter, applied once here, replaces
   the 90%-width inset sitewide (which varies 16-21px depending on the
   exact phone width — an inconsistency, not a system). Since virtually
   every section wraps its content in .container, this single rule is
   the foundation the rest of the mobile pass builds on. Desktop/tablet
   keep the original percentage-based .container untouched. */
@media (max-width: 600px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
}

.section {
  padding: clamp(60px, 8vw, 120px) 0;
}

.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

.section-header {
  max-width: 600px;
  margin-bottom: clamp(40px, 6vw, 60px);
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);     /* Muted neutral subtitle */
  margin-bottom: 12px;
  display: block;
  font-weight: 600;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;            /* Semi-bold style from template */
  line-height: 1.2;
  margin-bottom: 20px;
  color: inherit;
  letter-spacing: -0.02em;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.section-dark .section-desc {
  color: var(--text-muted);
}

/* Sitewide section heading hierarchy, tuned for phones: the desktop
   clamp() floors (32px title / 16.8px desc) stay constant the moment a
   phone viewport is narrower than the vw breakpoint, which reads as
   oversized next to the shorter mobile line lengths. Scaling fluidly
   within 320-430px keeps proportions consistent and a little more
   restrained, matching the smaller hero type above. Scoped to phones
   only — tablet/desktop keep the original values untouched. */
@media (max-width: 600px) {
  .section-header {
    margin-bottom: 32px;
  }

  .section-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
  }

  .section-title {
    font-size: clamp(1.6rem, 6.5vw, 2.05rem);
    margin-bottom: 16px;
  }

  .section-desc {
    font-size: 0.95rem;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}

/* Mobile button system: a taller, more generously rounded touch target
   than the sharp-cornered desktop button — a deliberate mobile-specific
   treatment (large radius reads as "made for thumbs" the way the crisp
   2px desktop radius reads as "made for a cursor"). Applies to every
   .btn sitewide (nav CTA, hero CTAs, section CTAs, form submit) so the
   whole mobile experience shares one button language instead of each
   page inventing its own. Standalone, page-level CTAs additionally get
   near-full width below. */
@media (max-width: 600px) {
  .btn {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
  }

  .cta-stripe .btn {
    width: 100%;
    max-width: 340px;
    /* Pre-existing issue (present on desktop too, so left alone there
       per "keep desktop unchanged"): .btn-primary is a dark fill on a
       dark border, sitting on .cta-stripe's own dark background — the
       button has no visible boundary at rest, just floating text. Reuse
       the same two brand colors already used for exactly this situation
       elsewhere (.btn-dark-primary, used for the hero's on-photo CTA)
       instead of introducing anything new. */
    background-color: var(--btn-cta-mobile-bg);
    color: var(--btn-cta-mobile-text);
    border-color: var(--btn-cta-mobile-border);
  }

  .cta-stripe .btn:hover {
    background-color: var(--btn-cta-mobile-bg-hover);
    color: var(--btn-cta-mobile-text-hover);
  }
}

.btn-primary {
  background-color: var(--btn-fill-bg);
  color: var(--btn-fill-text);
  border: 2px solid var(--btn-fill-border);
}

.btn:hover {
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--btn-fill-bg-hover);
  color: var(--btn-fill-text-hover);
  transform: translateY(-3px) scale(1.03);
}

.btn-secondary {
  background-color: transparent;
  color: var(--btn-outline-text);
  border: 2px solid var(--btn-outline-border); /* Bold border from template */
}

.btn-secondary:hover {
  background-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-text-hover);
  border-color: var(--btn-outline-border-hover);
  transform: translateY(-3px) scale(1.03);
}

.btn-gold {
  background-color: var(--btn-fill-bg);
  color: var(--btn-fill-text);
  border: 2px solid var(--btn-fill-border);
}

.btn-gold:hover {
  background-color: var(--btn-fill-bg-hover);
  color: var(--btn-fill-text-hover);
  transform: translateY(-3px) scale(1.03);
}

.btn-outline-gold {
  border: 2px solid var(--btn-outline-border);
  color: var(--btn-outline-text);
}

.btn-outline-gold:hover {
  background-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-text-hover);
  transform: translateY(-3px) scale(1.03);
}

.btn-dark-primary {
  background-color: var(--btn-invert-bg);
  color: var(--btn-invert-text);
  border: 2px solid var(--btn-invert-border);
}

.btn-dark-primary:hover {
  background-color: var(--btn-invert-bg-hover);
  color: var(--btn-invert-text-hover);
  transform: translateY(-3px) scale(1.03);
}

/* --- HEADER & NAVIGATION --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: var(--transition-smooth);
  border-bottom: 1px solid transparent;
}

.header.scrolled {
  background-color: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 70px;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* This has to come after the base rule above (not grouped into the
   earlier .container mobile override) — width/max-width/margin are set
   by both rules, and CSS resolves same-specificity conflicts by source
   order, not by which media query is "more specific". Grouped with the
   earlier rule, this override lost that tie-break and the header kept
   the 90%-width inset (which scales with viewport, ~40-45px here) while
   only its padding applied on top — a header inset that drifted with
   screen width instead of matching the fixed 24px gutter used by every
   section below it. This is the actual fix: match .container exactly. */
@media (max-width: 600px) {
  .header-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 24px;
    box-sizing: border-box;
  }
}

/* Groups nav-menu + theme-toggle + hamburger as one flex item so
   .header-container keeps its original 2-item space-between math
   (logo | everything-else) regardless of the toggle button's presence
   or which of its siblings is hidden at a given breakpoint. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (max-width: 991px) {
  .header-actions {
    gap: 14px;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-text-hover);
  border-color: var(--btn-outline-border-hover);
}

.theme-icon {
  position: absolute;
  transition: opacity var(--theme-transition), transform var(--theme-transition);
}

.theme-icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.theme-icon-moon {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

html[data-theme="dark"] .theme-icon-sun {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

html[data-theme="dark"] .theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

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

.logo img {
  height: 78px;
  width: auto;
  display: block;
  transition: var(--transition-smooth);
}

.header.scrolled .logo img {
  height: 66px;
}

/* The site's own logo mark (not a partner brand logo — those are never
   touched) is a dark charcoal glyph on a transparent PNG. On a dark
   page it would be nearly invisible, so it's the one image dark mode
   is allowed to filter. */
html[data-theme="dark"] .logo img {
  filter: invert(1) brightness(1.35);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 45px);
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  position: relative;
  padding: 8px 0;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Thick underline from template */
  background-color: var(--text-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 700;
}

.nav-cta {
  display: inline-block;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  transition: var(--transition-fast);
}

/* Mobile Nav Styles */
@media (max-width: 991px) {
  .nav-toggle {
    display: flex;
    /* Global reset is box-sizing: border-box, which would make padding eat
       into the fixed 24x18 icon box — force content-box so the visible
       hamburger bars keep their exact size while padding (offset by an
       equal negative margin, so surrounding layout is unaffected) expands
       the tappable area to 44px. */
    box-sizing: content-box;
    padding: 13px;
    margin: -13px;
  }

  /* The icon's own bar-to-X morph was using the site's snappy 0.2s
     linear-ease UI transition, tuned for hover states — not the smooth,
     premium cubic-bezier used for the drawer it opens. Matching the two
     makes the whole open gesture read as one deliberate motion instead
     of a quick flick followed by a slow glide. */
  .nav-toggle span {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--bg-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-smooth);
    z-index: 999;
    overflow-y: auto;
    padding: 90px 24px 40px;
  }

  .nav-menu.active {
    right: 0;
  }

  /* Full-width, min-44px tap targets for the mobile drawer links */
  .nav-menu .nav-link {
    width: 100%;
    max-width: 260px;
    padding: 12px 0;
    text-align: center;
    font-size: 1.05rem;
  }

  /* .nav-cta (below) sets display:inline-block, which — same specificity,
     later in the file — beats .btn's display:inline-flex/justify-content:
     center for this element. .btn's own centering never actually applies
     to the nav CTA, so its label defaults to plain start-aligned text
     inside the width:100% box: measured 30px of space before the text vs
     63px after it at 375px wide, i.e. the label sitting well left of
     center even though the button box itself is centered. Restoring flex
     centering here (only for the mobile-drawer instance of this button,
     not the desktop horizontal-nav one, which .nav-cta alone still
     controls) fixes the label without touching .btn or .nav-cta globally. */
  .nav-menu .nav-cta {
    width: 100%;
    max-width: 260px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* --- HOME HERO SECTION --- */
.hero {
  height: 100vh;
  min-height: 650px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--bg-primary); /* light gray background */
  overflow: hidden;
  padding-top: var(--header-height);
}

.hero-bg {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 45%;
  height: 70%;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  opacity: 0;
  animation: heroBgFadeIn 1.2s ease forwards;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform-origin: center;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@keyframes heroBgFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

/* Blue background block has been completely removed to keep it minimal and lowkey */
.hero-bg::before {
  display: none;
}

/* The modern radial/sunburst accent icon on the top right */
.hero-bg::after {
  content: '✦';
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 4rem;
  color: var(--text-primary);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
}

/* Social icons for use on light backgrounds (contact page), reusing the
   same charcoal-on-light treatment the hero's social row used to have
   before it moved to the Contact page's address block. */
.contact-socials {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.contact-socials .social-link {
  color: var(--btn-outline-text);
  border-color: var(--btn-outline-border);
}

.contact-socials .social-link:hover {
  color: var(--btn-outline-text-hover);
  background-color: var(--btn-outline-bg-hover);
  border-color: var(--btn-outline-border-hover);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--text-primary);
  max-width: 50%;
  padding-bottom: 50px;
}

/* Tagline styled exactly to match the top tagline from template screenshot */
.hero-tagline {
  font-family: 'Krona One', var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;      /* Wide letter tracking */
  color: var(--text-primary);
  display: block;
  margin-bottom: 12px;
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;
}


/* Title styled exactly to match the huge bold title from template screenshot */
.hero-title {
  font-family: 'Krona One', var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4.4rem); /* Sized to fit the ~45%-wide hero-content column without spilling onto the photo */
  font-weight: 800;            /* Extra bold */
  text-transform: uppercase;
  letter-spacing: -0.04em;     /* Tight tracking layout */
  line-height: 0.95;
  color: var(--text-primary);
  margin-bottom: 30px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards,
             heroTitleWipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}

@keyframes heroTitleWipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -1000px 0 0); }
}

/* Lets "Inspiring" and "Lives." bleed a little onto the hero photo for a layered, editorial feel */
.hero-title-overlap {
  display: inline-block;
}

/* Horizontal line separating title and description, as seen in the template screenshot */
.hero-line {
  width: 100px;
  height: 4px;
  background-color: var(--text-primary);
  margin-bottom: 30px;
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.48s forwards;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 500px;
  line-height: 1.6;
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.6s forwards;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.75s forwards;
}

/* Tablet: unchanged structural stacking (photo, then socials, then text)
   — the full editorial recomposition below is phone-specific (<=600px).
   This keeps a sane tablet layout without a second design language. */
@media (max-width: 991px) and (min-width: 601px) {
  .hero {
    height: auto;
    flex-direction: column;
    gap: 16px;
    padding: 104px 0 56px;
  }
  .hero-bg {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-title {
    width: 100%;
  }
}

/* ==========================================================================
   PHONE HERO — dedicated editorial composition (<=600px)

   This is not the desktop hero compressed into a column. It's recomposed
   for one-handed phone use, in this order: inset rounded photo -> eyebrow
   -> heading -> description -> primary CTA -> secondary CTA. The DOM
   order is unchanged (hero-bg, .container still appear in that sequence
   in the markup, and desktop's absolute layering depends on it) —
   `order` re-sequences the flex children so the photo renders first
   despite being first in the DOM already; kept explicit for clarity.
   ========================================================================== */
@media (max-width: 600px) {
  .hero {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 96px 0 48px;
  }

  /* .hero already provides the 24px gutter (from the sitewide .container
     rule) directly on itself, so the nested .container around the text
     block is neutralized here — otherwise the inset would double up.
     .container (not .hero-content, which is nested a level deeper) is
     .hero's actual flex child, so `order` belongs here to move the text
     block to position 2 in the visual sequence. */
  .hero .container {
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    order: 2;
  }

  /* The photo: inset with margins instead of full-bleed, a shorter
     35-45vh editorial crop instead of a dominant slab, and a generous
     rounded corner — the signature "premium mobile" photo treatment
     used for every image on the rest of this pass. */
  .hero-bg {
    position: relative;
    top: 0;
    right: 0;
    order: 1;
    width: calc(100% - 48px);
    margin: 0 24px;
    height: clamp(220px, 40vh, 320px);
    border-radius: 20px;
  }
  .hero-bg img {
    border-radius: 20px;
  }
  .hero-bg::after {
    top: 12px;
    right: 12px;
    font-size: 1.6rem;
  }

  .hero-content {
    max-width: 100%;
    padding-bottom: 0;
  }
  .hero-title {
    width: 100%;
  }

  .hero-tagline {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }

  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
    line-height: 1.08;
    margin-bottom: 16px;
  }

  .hero-line {
    width: 40px;
    height: 3px;
    margin-bottom: 20px;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 28px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .hero-buttons .btn {
    width: 100%;
  }
}

/* --- PHILOSOPHY SECTION (STRIPE) --- */
.philosophy-stripe {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.philosophy-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 25px;
}

.philosophy-text p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.philosophy-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border-left: 2px solid var(--text-primary);
  padding-left: 40px;
}

.stat-item h4 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--accent-color);  /* Monochrome black stat number */
  line-height: 1;
  margin-bottom: 8px;
}

.stat-item p {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .philosophy-stats {
    border-left: none;
    border-top: 2px solid var(--text-primary);
    padding-left: 0;
    padding-top: 32px;
    gap: 24px;
  }
}

/* --- SERVICES CARDS SECTION --- */
.services-section {
  background-color: var(--bg-primary);
}

.service-card {
  background-color: var(--bg-secondary);
  padding: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-color);
}

.service-icon {
  width: 50px;
  height: 50px;
  background-color: var(--icon-badge-bg);
  color: var(--icon-badge-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  font-size: 1.5rem;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 25px;
  flex-grow: 1;
}

.service-link {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  text-transform: uppercase;
}

.service-link span {
  transition: var(--transition-fast);
}

.service-card:hover .service-link {
  color: var(--accent-color);
}

.service-card:hover .service-link span {
  transform: translateX(4px);
}

/* --- FEATURED PROJECTS STRIPE --- */
.featured-projects {
  background-color: var(--bg-secondary);
}

.projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 600px) {
  /* Side-by-side wrap put the "View All Projects" button squeezed next
     to a multi-line heading. Stacking it below, left-aligned, gives the
     heading room to breathe and the button its own clear tap target. */
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.project-card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-color);
}

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

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.9) 100%);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-smooth);
  height: 100%;
}

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

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

.project-cat {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  margin-bottom: 8px;
  font-weight: 600;
  opacity: 0.8;
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.project-view {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
}

.project-view span {
  transition: var(--transition-fast);
}

.project-card:hover .project-view span {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .project-overlay {
    opacity: 1;
    transform: translateY(0);
    padding: 20px;
    background: linear-gradient(180deg, rgba(18,18,18,0) 20%, rgba(18,18,18,0.85) 100%);
  }
}

/* --- TESTIMONIALS --- */
.testimonials {
  background-color: var(--bg-primary);
}

.testimonials-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.testimonial-slide {
  padding: 20px;
  display: none;
}

.testimonial-slide.active {
  display: block;
  animation: testimonialFade 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.quote-icon {
  font-size: 3rem;
  color: var(--accent-color);
  margin-bottom: 20px;
  line-height: 1;
}

.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 30px;
  color: var(--text-primary);
}

.testimonial-author {
  font-weight: 700;
  font-size: 1rem;
}

.testimonial-author span {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.dot.active {
  background-color: var(--accent-color);
  transform: scale(1.3);
}

/* --- CTA STRIPE --- */
.cta-stripe {
  background-color: var(--bg-dark);
  color: var(--text-light);
  text-align: center;
  border-top: 1px solid var(--border-color-dark);
}

.cta-stripe h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.cta-stripe p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 35px;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .cta-stripe h2 {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
    margin-bottom: 12px;
  }
  .cta-stripe p {
    font-size: 1rem;
    margin-bottom: 28px;
  }
}

/* --- FOOTER --- */
.footer {
  background-color: var(--bg-footer);
  color: var(--text-light);
  padding: 80px 0 30px;
  border-top: 1px solid var(--border-color-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  text-transform: uppercase;
  border: 2px solid var(--text-light);
  padding: 4px 10px;
  display: inline-block;
}

.footer-logo span {
  color: var(--text-light);
}

.footer-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 25px;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
  font-weight: 600;
}

.social-link:hover {
  color: var(--text-light);
  border-color: var(--text-light);
  transform: translateY(-3px);
}

.footer-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--text-light);
}

.footer-contact li {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-contact li span {
  color: var(--text-light);
}

.footer-newsletter p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.newsletter-form {
  display: flex;
  border-bottom: 1px solid var(--border-color-dark);
  padding-bottom: 8px;
}

.newsletter-form input {
  flex-grow: 1;
  background-color: transparent;
  color: var(--text-light);
  font-size: 0.95rem;
}

.newsletter-form input::placeholder {
  color: var(--text-muted);
}

.newsletter-btn {
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.newsletter-btn:hover {
  color: var(--text-light);
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid var(--border-color-dark);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- ABOUT PAGE STYLES --- */
.about-hero {
  background-color: var(--bg-secondary);
  padding: 140px 0 80px;
  border-bottom: 1px solid var(--border-color);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.about-hero-img {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.about-intro-text {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-top: 25px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .about-hero-img {
    border-radius: 16px;
  }
}

.values-section {
  background-color: var(--bg-primary);
}

.value-card {
  text-align: center;
  padding: 40px 20px;
}

.value-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.value-card p {
  color: var(--text-secondary);
  max-width: 280px;
  margin: 0 auto;
}

/* --- PROCESS (TIMELINE) --- */
.process-section {
  background-color: var(--bg-secondary);
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  margin-top: 60px;
}

.process-timeline::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary); /* Bold dark timeline from template */
  z-index: 1;
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
}

.step-num {
  width: 80px;
  height: 80px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--text-primary);
  color: var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 auto 25px;
  transition: var(--transition-smooth);
}

.process-step:hover .step-num {
  border-color: var(--accent-color);
  background-color: var(--accent-light);
  color: var(--accent-color);
  transform: scale(1.08);
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.process-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0 10px;
}

@media (max-width: 991px) {
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-timeline::before {
    display: none;
  }
  .process-step {
    display: flex;
    text-align: left;
    align-items: flex-start;
    gap: 20px;
  }
  .step-num {
    margin: 0;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
  }
}

/* --- SERVICES DETAIL PAGE --- */
.service-detail-item {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: clamp(30px, 5vw, 60px);
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: center;
}

.service-detail-icon {
  font-size: 4rem;
  color: var(--accent-color);
  line-height: 1;
}

.service-detail-content h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-detail-content p {
  color: var(--text-secondary);
  margin-bottom: 25px;
}

.service-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
}

.spec-list-item {
  font-size: 0.95rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-list-item span {
  color: var(--accent-color);
  font-weight: bold;
}

@media (max-width: 768px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- BRAND PARTNERS STRIP --- */
/* This section's content (title + one compact logo row) is much shorter
   than the site's other sections, so it doesn't need the generic
   .section clamp(60px, 8vw, 120px) padding. Verified equal via
   getBoundingClientRect() (after letting the .reveal scroll-in
   animation settle) that a single shared padding value here produces a
   matching top/bottom visual gap. */
.brand-partners-section {
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 70px);
  /* Follows the standard theme background like any other section —
     Hettich/Bosch/Kohler's dark ink is swapped for a white variant in
     dark mode instead (see .brand-logo-dark below), so the section no
     longer needs to hold itself back to a fixed light surface. */
}

/* Logos are background-removed transparent PNGs, placed directly on the
   section (no card/box), each keeping its own native aspect ratio.

   Sizes below are matched directly (measured pixel-for-pixel from the
   client-provided reference layout) rather than normalized to a shared
   height or a shared "perceived size" — the reference intentionally
   has CenturyPly/Hettich rendering taller than Häfele/Bosch/Kohler, so
   each logo gets its own explicit height. Width is left auto in every
   case so the source file's native aspect ratio is never distorted.

   Grid columns use `auto` (not `1fr`): these logos' widths are fairly
   close to each other already, but `auto` still avoids stretching any
   of them to fill a wider shared column. `justify-content: center`
   centers the resulting block — still a fixed 4-per-row grid (never an
   orphaned single item on its own row). */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  align-items: center;
  column-gap: 68px;
  row-gap: 60px;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hettich/Bosch/Kohler have both a light-mode and a dark-mode <img>,
   stacked in the same grid cell so swapping is a pure opacity crossfade
   (no layout shift, no JS). Logos with only one <img> are unaffected —
   grid/flex centering works the same whether a cell holds one child or
   two. pointer-events:none on the logo itself (hover now targets
   .brand-item) keeps the momentarily-invisible stacked image from
   swallowing hover before its opacity transition finishes. */
.brand-logo-swap {
  display: grid;
}

.brand-logo-swap .brand-logo {
  grid-area: 1 / 1;
}

.brand-logo {
  display: block;
  width: auto;
  pointer-events: none;
  transition: transform 0.3s ease, opacity var(--theme-transition);
}

.brand-item:hover .brand-logo {
  transform: scale(1.08);
}

.brand-logo-dark {
  opacity: 0;
}

html[data-theme="dark"] .brand-logo-light {
  opacity: 0;
}

html[data-theme="dark"] .brand-logo-dark {
  opacity: 1;
}

.brand-logo--asianpaints { height: 38px; }
.brand-logo--kajaria     { height: 47px; }
.brand-logo--hettich     { height: 65px; }
.brand-logo--hafele      { height: 30px; }
.brand-logo--jaquar      { height: 60px; }
.brand-logo--centuryply  { height: 77px; }
.brand-logo--bosch       { height: 35px; }
.brand-logo--kohler      { height: 39px; }

@media (max-width: 900px) {
  .brand-strip {
    column-gap: 44px;
    row-gap: 48px;
  }
  .brand-logo--asianpaints { height: 29px; }
  .brand-logo--kajaria     { height: 35px; }
  .brand-logo--hettich     { height: 49px; }
  .brand-logo--hafele      { height: 23px; }
  .brand-logo--jaquar      { height: 45px; }
  .brand-logo--centuryply  { height: 58px; }
  .brand-logo--bosch       { height: 26px; }
  .brand-logo--kohler      { height: 29px; }
}

@media (max-width: 600px) {
  .brand-strip {
    grid-template-columns: repeat(2, auto);
    column-gap: 36px;
    row-gap: 40px;
  }
  .brand-logo--asianpaints { height: 21px; }
  .brand-logo--kajaria     { height: 26px; }
  .brand-logo--hettich     { height: 36px; }
  .brand-logo--hafele      { height: 17px; }
  .brand-logo--jaquar      { height: 33px; }
  .brand-logo--centuryply  { height: 42px; }
  .brand-logo--bosch       { height: 19px; }
  .brand-logo--kohler      { height: 21px; }
}

/* --- PORTFOLIO / PROJECTS GALLERY --- */
.portfolio-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.filter-tab {
  padding: 10px 24px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.filter-tab.active,
.filter-tab:hover {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.portfolio-card {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.portfolio-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.portfolio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-card:hover .portfolio-img img {
  transform: scale(1.05);
}

.portfolio-info {
  padding: 25px;
}

.portfolio-info h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.portfolio-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Portfolio Hidden Filter Animation helper */
.portfolio-card.hidden {
  display: none;
}

/* --- LIGHTBOX MODAL --- */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(18, 18, 18, 0.95);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: 900px;
  width: 90%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lightbox-img-wrapper {
  background-color: #000;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color-dark);
}

.lightbox-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-info {
  color: var(--text-light);
}

.lightbox-cat {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  font-weight: 600;
}

.lightbox-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.lightbox-close {
  position: absolute;
  top: -45px;
  right: 0;
  color: var(--text-light);
  font-size: 2rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lightbox-close:hover {
  color: var(--text-muted);
  transform: rotate(90deg);
}

/* --- CONTACT PAGE STYLES --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: flex-start;
}

.contact-card-box {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 600;
}

.form-input {
  border: 1px solid var(--input-border);
  padding: 14px;
  border-radius: var(--radius-sm);
  background-color: var(--input-bg);
  font-size: 0.95rem;
  transition: var(--transition-fast);
  color: var(--text-primary);
}

.form-input:focus {
  border-color: var(--accent-color);
  background-color: var(--input-bg-focus);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
  transform: translateY(-1px);
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 45px;
}

.info-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.info-icon {
  width: 40px;
  height: 40px;
  background-color: var(--accent-light);
  color: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.info-content h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.info-content p,
.info-content a {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.map-placeholder {
  height: 250px;
  background-color: var(--accent-light);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 20px;
}

.map-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 15px;
}

.map-placeholder h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.map-placeholder p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --- FAQ ACCORDION --- */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.accordion-item {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

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

.accordion-header {
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.accordion-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.accordion-icon {
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
  font-weight: 600;
}

.accordion-content {
  padding: 0 25px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
  color: var(--accent-color);
}

.accordion-item.active .accordion-content {
  padding: 0 25px 25px;
  max-height: 250px;
}

/* --- ANIMATIONS (REVEAL ON SCROLL) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Curtain-wipe reveal for section headings, layered on top of the fade-up above */
.reveal .section-title {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

.reveal.active .section-title {
  clip-path: inset(0 0% 0 0);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered reveal for grid/list items so cards cascade in rather than popping together */
.grid-3 > .reveal:nth-child(1),
.project-grid > .reveal:nth-child(1),
.portfolio-grid > .reveal:nth-child(1),
.process-timeline > .reveal:nth-child(1) { transition-delay: 0.05s; }

.grid-3 > .reveal:nth-child(2),
.project-grid > .reveal:nth-child(2),
.portfolio-grid > .reveal:nth-child(2),
.process-timeline > .reveal:nth-child(2) { transition-delay: 0.15s; }

.grid-3 > .reveal:nth-child(3),
.project-grid > .reveal:nth-child(3),
.portfolio-grid > .reveal:nth-child(3),
.process-timeline > .reveal:nth-child(3) { transition-delay: 0.25s; }

.grid-3 > .reveal:nth-child(4),
.process-timeline > .reveal:nth-child(4) { transition-delay: 0.35s; }

.grid-3 > .reveal:nth-child(5) { transition-delay: 0.45s; }

/* Smoother cross-fade for testimonial slide transitions */
@keyframes testimonialFade {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- BACK TO TOP BUTTON --- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--btn-fill-bg);
  color: var(--btn-fill-text);
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition-smooth);
  z-index: 900;
  box-shadow: var(--shadow-md);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--fab-bg-hover);
  transform: translateY(-4px) scale(1.05);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   MOBILE OPTIMIZATION PASS (320px – 600px)
   Additive rules only — nothing above touches or overrides desktop (>991px)
   styling. Grouped here so the mobile-specific behavior is easy to audit
   in one place, mirroring the component order used throughout the file.
   ========================================================================== */

/* --- Small-phone header: the 78px/66px logo is oversized on a 320-390px
   viewport, so scale it down without touching tablet/desktop sizing. ---

   logo.png has large transparent padding baked into the file itself
   (measured: the visible mark sits inset ~35.5% from the left edge of
   the image canvas, ~50.1% of the rendered height at this image's
   aspect ratio). The hamburger icon has no such padding — its bars are
   pure CSS, flush with their own box. So even though both the logo
   <img> box and the nav-toggle box sat at an identical 24px from their
   respective screen edges, the *visible* logomark was landing roughly
   26px further in than the visible hamburger bars — a real, measurable
   asymmetry the box-model alone couldn't show. A negative margin-left
   equal to that baked-in padding (recomputed per height below, since
   the padding is a fixed proportion of the rendered size) pulls the
   visible mark back to the same 24px the hamburger already sits at,
   without touching the image file or the hamburger/header padding.

   The margin goes on .logo (the flex item inside .header-container),
   not on .logo img directly — .logo is itself display:inline-flex, so
   the <img> is a nested flex item, and a negative margin placed there
   triggered the flex-shrink algorithm to compress the image's rendered
   width instead of just shifting its position. Margin on the outer
   .logo avoids that nested-flex interaction; the img inside is sized
   by `height` alone, as before. */
@media (max-width: 480px) {
  .logo {
    margin-left: -26.1px;
  }
  .logo img {
    height: 52px;
  }
  .header.scrolled .logo {
    margin-left: -23.1px;
  }
  .header.scrolled .logo img {
    height: 46px;
  }
}

/* --- Mobile nav drawer: full-bleed on phones, not the 80%/400px tablet
   slide panel ---

   Measured via CDP getBoundingClientRect at every 320-430px width (and
   every plausible phone height, to rule out a scrollbar carve-out): the
   "Book Consultation" button and every nav link are already flexbox-
   centered with mathematically identical left/right gaps *inside*
   .nav-menu at every size (e.g. 24px/24px at 320px, 42px/42px at
   430px — never off by a fraction of a pixel). The perceived unevenness
   isn't in that centering — it's that .nav-menu itself is only 80% wide
   and anchored to the right edge (a fine "slide panel over the page"
   treatment on tablet, where there's room for the sliver of exposed
   page to read as intentional). On a 320-430px phone that sliver is a
   third or more of the screen, so the button's perfectly-equal interior
   margins are being measured by the eye against the actual screen
   edges, not the drawer's own edge — against the screen, the left gap
   and right gap are never equal by construction (left = sliver width +
   24px, right = 24px). Making the phone drawer full width removes that
   mismatched reference frame entirely, so the interior centering (left
   untouched) now reads as centered on the device too. Scoped to ≤600px
   only; the ≥601px tablet drawer keeps its original slide-panel sizing. */
@media (max-width: 600px) {
  .nav-menu {
    width: 100%;
    max-width: 100%;
  }
}

/* --- Grid overflow fix ---
   `minmax(300px/350px, 1fr)` auto-fit/auto-fill tracks are wider than a
   320-430px container (~288-390px after the 90% .container width), which
   forces items past the viewport edge. Force a clean single column at
   exactly the range where the minimum track size would otherwise overflow. */
@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    gap: 24px;
  }

  /* Services page spec checklist: 2 columns squeezes phrases like
     "Structural feasibility analysis" into ~140px. Stack for readability. */
  .service-specs {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Editorial image treatment: the desktop 2px radius reads as sharp,
     architectural precision; on a phone, in a single-column feed, a
     more generous rounded corner is what makes a photo feel like a
     considered editorial crop instead of a raw rectangle scaled down.
     overflow:hidden (already set on these) clips the img to match. */
  .project-card,
  .portfolio-card {
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  /* Trim large fixed paddings that were sized for desktop content boxes;
     on a 320-390px screen they leave too little breathing room. Values
     are pinned to the 8px grid (24 = 3x8) for a consistent, intentional
     rhythm instead of the previous mismatched 18/20/28px mix. */
  .contact-card-box {
    padding: 24px;
  }

  .service-detail-item {
    padding: 24px;
  }

  .service-detail-icon {
    font-size: 2.5rem;
  }

  .about-hero {
    padding: 104px 0 48px;
  }

  .footer {
    padding: 56px 0 24px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Decorative icon reduction ---
     These are secondary/ornamental (a quote mark, a stat-panel icon, a
     map pin, a category glyph) rather than functional controls, so they
     can shrink freely without touching a tap-target minimum. Bringing
     them down keeps them supporting the copy instead of competing with
     it — closer to how a restrained, editorial layout uses iconography. */
  .quote-icon {
    font-size: 2.1rem;
    margin-bottom: 12px;
  }

  .value-icon {
    font-size: 1.85rem;
    margin-bottom: 16px;
  }

  .map-icon {
    font-size: 1.85rem;
    margin-bottom: 12px;
  }

  .service-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    margin-bottom: 20px;
  }

  /* Card padding consistency: bring the desktop 40px card padding down
     to the same 8px-grid value used across the other mobile card
     surfaces (contact, service-detail) above. */
  .service-card {
    padding: 32px 24px;
  }

  .value-card {
    padding: 32px 20px;
  }
}

/* --- iOS Safari auto-zooms any focused input/select/textarea rendered
   below 16px. .form-input is 0.95rem (15.2px) on all screens, so bump it
   to 16px only under the phone breakpoint — desktop sizing is untouched. --- */
@media (max-width: 600px) {
  .form-input,
  .select-box,
  .newsletter-form input {
    font-size: 16px;
  }
}

/* --- Touch target expansion (44px minimum) ---
   These components keep their exact visual size; the extra hit area is
   added via padding + an equal negative margin, which enlarges only the
   clickable box and never shifts surrounding layout or desktop appearance. --- */
@media (max-width: 600px) {
  .filter-tab {
    padding: 12px 20px;
    min-height: 44px;
  }

  /* The newsletter arrow button has no padding at all (14x23px hit area);
     give it a real touch target while keeping the arrow glyph inline
     with the input, using an equal negative margin so the row height
     and alignment with the input field are unaffected. */
  .newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin: -14px;
  }

  .testimonial-dots {
    gap: 6px;
  }

  .dot {
    /* Global reset is box-sizing: border-box, which would make padding
       eat into the 8px width/height. Force content-box here so the visual
       dot stays 8px while padding purely expands the tappable area. */
    box-sizing: content-box;
    position: relative;
    padding: 18px;
    margin: -18px;
    background-clip: content-box;
  }

  /* These were previously enlarged to a flat 44px for touch-target
     compliance, but that made them read as oversized, competing with
     the content instead of sitting quietly beside it. Scale the visible
     circle back down and recover a comfortable tap area the same way as
     .dot/.nav-toggle above: padding + equal negative margin, so the hit
     area grows without the icon itself looking bigger. Decorative social
     links only need to clear WCAG's 24px minimum, not the 44px target
     used for primary actions, so this is a deliberate, safe trade-off. */
  .footer-socials .social-link,
  .contact-socials .social-link {
    box-sizing: content-box;
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
    padding: 5px;
    margin: -5px;
  }

  .footer-socials {
    gap: 8px;
  }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}