/* ==========================================================================
   Genius PRO - Visual Identity & Stylesheet
   Top-Tier Responsive Navigation & Header Architecture
   ========================================================================== */

/* --- Typography & Fonts (Loaded 100% locally for zero external dependencies & maximum privacy) --- */

@font-face {
  font-family: 'Lemon Milk';
  src: url('./assets/fonts/lemon_milk/LEMONMILK-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('./assets/fonts/lemon_milk/LEMONMILK-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('./assets/fonts/lemon_milk/LEMONMILK-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Outfit (Local Webfonts) --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/outfit/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/outfit/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Plus Jakarta Sans (Local Webfonts) --- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans/plus-jakarta-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans/plus-jakarta-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design Tokens --- */
:root {
  --color-orange: #EF7E13;
  --color-orange-hover: #ff912a;
  --color-dark-topbar: #232323;
  --color-dark-bg: #171919;
  --color-text-white: #D9D9D9;
  --color-text-light: #F5F5F5;
  --color-text-muted: #D2D0CE;

  --font-heading: 'Lemon Milk', 'Outfit', sans-serif;
  --font-nav: 'Myriad Pro', 'Myriad', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Myriad Pro', 'Myriad', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-content-width: 1400px;
  --horizontal-padding: 50px;
  --topbar-height: 38px;
  --header-height: 104px;
}

/* --- Base Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Accessibility Utilities --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--color-orange);
  color: #171919;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  z-index: 100000;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 20px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-dark-bg);
  background-image: url('./assets/images/Background for Landing page.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text-light);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}

html:has(body.projects-page),
html:has(body.about-page),
html:has(body.services-page),
html:has(body.page-404),
body.projects-page,
body.about-page,
body.services-page,
body.page-404 {
  background: linear-gradient(180deg, #171919 0%, #222424 45%, #2e3030 100%) !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   CONTACT PAGE SPECIFIC STYLES & GRAPHICS
   ========================================================================== */
body.contact-page {
  --contact-panel-w: min(380px, 21.5vw);
  background-color: var(--color-dark-bg);
  background-image: none !important;
  background: var(--color-dark-bg) !important;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

body.contact-page .site-header {
  background: rgba(14, 16, 16, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Background Graphics Container */
.contact-graphics {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  contain: paint;
  max-width: 100%;
}

/* Map Layer (starts strictly below the header, shifted up to give room for contact form) */
.contact-map-layer {
  position: fixed;
  top: calc(var(--topbar-height) + var(--header-height));
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0 0,
      calc(100% - var(--contact-panel-w) + 0.2542 * (100vh - var(--topbar-height) - var(--header-height)) + 2px) 0,
      calc(100% - var(--contact-panel-w) + 2px) 100%,
      0 100%);
  overflow: hidden;
  contain: paint;
  max-width: 100%;
}

.contact-map-viewport {
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  min-height: calc(100vh - var(--topbar-height) - var(--header-height) + 110px);
  aspect-ratio: 1248 / 760;
}

.contact-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Location Pin on Map (Bosanska 85/2) - Lowered and centered cleanly */
.contact-pin-wrap {
  position: absolute;
  left: 28.93%;
  top: 21%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.contact-pin-marker {
  width: clamp(34px, 2.5vw, 44px);
  height: auto;
  aspect-ratio: 28 / 45;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.75));
  margin: 0 auto;
}

.contact-pin-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-pin-address {
  margin-top: 5px;
  margin-left: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(12px, 0.78vw, 13.5px);
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* 18 Decorative Orange Dots (slanted pattern - spuštene translatorno za 22px kao i koraci 01-05) */
.contact-dots-wrap {
  position: fixed;
  right: calc(var(--contact-panel-w) - 35px);
  bottom: calc(38% - 32px);
  width: 230px;
  height: 86px;
  aspect-ratio: 192 / 72;
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(255, 133, 20, 0.5));
  z-index: 2;
  pointer-events: none;
}

.contact-dots-grid {
  width: 100%;
  height: 100%;
  display: block;
  fill: #FF8514;
}

/* Orange Angled Layer with Fade, Diagonal Slit & Drop Shadow (Right Side) */
.contact-orange-panel-wrap {
  position: fixed;
  top: calc(var(--topbar-height) + var(--header-height));
  right: 0;
  bottom: 0;
  width: var(--contact-panel-w);
  filter: drop-shadow(-20px 0 35px rgba(0, 0, 0, 0.85));
  z-index: 3;
  pointer-events: none;
}

.contact-orange-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(239, 126, 19, 0.38) 0%, rgba(239, 126, 19, 0.68) 45%, rgba(239, 126, 19, 0.92) 100%);
  clip-path: polygon(calc(0.2542 * (100vh - var(--topbar-height) - var(--header-height))) 0, 100% 0, 100% 100%, 0 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Inner Slit across orange panel (Disabled per client request: Izbaciti senku) */
.contact-orange-slit-wrap {
  display: none !important;
}

/* Huge Email SVG (Bottom Right - calibrated to prevent collision with step 05) */
.contact-envelope-wrap {
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(440px, 24vw);
  height: auto;
  z-index: 4;
  pointer-events: none;
  opacity: 0.2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  line-height: 0;
  margin-right: -1px;
  margin-bottom: -1px;
}

.contact-huge-envelope {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   CONTACT PROCESS / WORKFLOW STEPS (01 to 05 Horizontal Ribbon)
   ========================================================================== */
.contact-process-section {
  position: fixed;
  top: calc(var(--topbar-height) + var(--header-height) + clamp(8px, 1.4vh, 20px));
  right: clamp(24px, 3.2vw, 55px);
  width: min(890px, calc(100vw - 480px));
  max-width: 900px;
  z-index: 8;
  pointer-events: none;
}

.contact-process-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  position: relative;
  pointer-events: auto;
  gap: clamp(10px, 1.3vw, 20px);
}

.contact-process-container::after {
  display: none !important;
}

.process-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.process-card-1 { z-index: 1; }
.process-card-2 { z-index: 2; }
.process-card-3 { z-index: 3; }
.process-card-4 { z-index: 4; }
.process-card-5 {
  z-index: 5;
  margin-left: 0;
}

.process-card::before {
  display: none !important;
}

.process-card-facet {
  display: none !important;
}

/* Card inner content */
.process-card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Badge (Parallelogram with Icon) - Exact -14.1° linear diagonal slope */
.process-badge {
  width: 66px;
  height: 43px;
  background: #5d3b1c;
  border: none;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(10.8px 0, 100% 0, calc(100% - 10.8px) 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  margin-bottom: 8px;
  margin-left: 39px;
  align-self: flex-start;
  transition: transform 0.25s ease, background 0.25s ease;
}

.process-badge .process-icon {
  width: auto;
  height: auto;
  max-width: 26px;
  max-height: 24px;
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
  display: block;
}

.process-badge .process-icon path[fill="none"] {
  fill: none !important;
}

/* Number - Clearly visible expanded gap to title (18px) */
.process-number {
  font-family: 'Lemon Milk', sans-serif;
  font-weight: 700;
  font-size: clamp(43px, 3.0vw, 53px);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px #000000, 0 3px 8px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9);
  margin-bottom: 18px;
  margin-left: 32px;
  text-align: left;
}

/* Title - Balanced gap to description (16px) */
.process-title {
  font-family: 'Lemon Milk', sans-serif;
  font-weight: 700;
  font-size: clamp(14.5px, 1.0vw, 17.5px);
  color: var(--color-orange);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px #000000, 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85);
  margin: 0 0 16px 0;
  margin-left: 22px;
  white-space: nowrap;
  text-align: left;
}

/* Description - Exact diagonal slope for text lines (14px, 9.5px, 5px, 0px) */
.process-desc {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.85vw, 14.8px);
  font-weight: 500;
  line-height: 1.40;
  color: #ffffff;
  margin: 0;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-shadow: 
    0 1px 2px #000000,
    0 0 6px #000000,
    0 2px 10px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(0, 0, 0, 0.9);
  -webkit-font-smoothing: antialiased;
}

.desc-line {
  display: block;
  white-space: nowrap;
}

.desc-line.l1 {
  margin-left: 14px;
}

.desc-line.l2 {
  margin-left: 9.5px;
}

.desc-line.l3 {
  margin-left: 5px;
}

.desc-line.l4 {
  margin-left: 0px;
}

/* Hover effects */
.process-card:hover .process-badge {
  background: var(--color-orange-hover, #ff912a);
  box-shadow: 0 4px 14px rgba(239, 126, 19, 0.55);
  transform: translateY(-2px);
}

.process-card:hover .process-badge .process-icon {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.process-card:hover .process-title {
  color: #ffa33b;
  text-shadow: 0 0 10px rgba(239, 126, 19, 0.6);
}

/* ==========================================================================
   CONTACT FORM (Flush Left & Bottom Architectural Alignment)
   ========================================================================== */
.contact-main {
  position: relative;
  z-index: 10;
}

.contact-form-container {
  position: fixed;
  left: 150px;
  bottom: 75px;
  width: min(420px, 26vw);
  z-index: 10;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}


/* Upward fade backdrop removed per client feedback */
.contact-title-fade-top {
  display: none !important;
}

.contact-form-title {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-orange);
  margin-bottom: 12px;
  padding: 2px 6px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.85);
}

.contact-form-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 220%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10, 12, 13, 0.92) 0%, rgba(10, 12, 13, 0.6) 40%, transparent 72%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

.contact-form-fields-wrap {
  position: relative;
  width: 100%;
  filter: none;
}

.contact-form-fields {
  --form-slant: 76px;
  position: relative;
  width: 100%;
  margin-bottom: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--form-slant, 76px)) 100%, 0 100%);
  display: flex;
  flex-direction: column;
}

.contact-inputs-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.contact-input {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', 'Outfit', var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 0 16px;
  box-sizing: border-box;
  color: #FFFFFF;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-input-orange {
  background: linear-gradient(135deg, rgba(239, 126, 19, 0.28) 0%, rgba(30, 25, 22, 0.78) 40%, rgba(18, 17, 16, 0.92) 100%);
  border: 1px solid rgba(239, 126, 19, 0.48);
  box-shadow: inset 0 1px 0 rgba(239, 126, 19, 0.22), 0 4px 14px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-input-orange::placeholder {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', 'Outfit', var(--font-body);
}

.contact-input-orange:focus {
  background: linear-gradient(135deg, rgba(239, 126, 19, 0.35) 0%, rgba(32, 26, 22, 0.85) 40%, rgba(18, 17, 16, 0.96) 100%);
  border-color: var(--color-orange);
  box-shadow: 0 0 0 2.5px rgba(239, 126, 19, 0.35), 0 6px 20px rgba(0, 0, 0, 0.65);
  outline: none;
}

/* Polja 3 & 4 (Email, Phone) - Smanjena providnost, veća čitljivost i bolji kontrast */
.contact-input-gray {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(26, 29, 30, 0.78) 40%, rgba(18, 20, 20, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-input-gray::placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', 'Outfit', var(--font-body);
}

.contact-input-gray:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(28, 32, 33, 0.85) 40%, rgba(18, 20, 20, 0.96) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.32), 0 6px 20px rgba(0, 0, 0, 0.65);
  outline: none;
}

/* Polje 5 (Poruka / Textarea) - Smanjena providnost, veća čitljivost i bolji kontrast */
.contact-textarea {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(26, 29, 30, 0.78) 40%, rgba(18, 20, 20, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 6px;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', 'Outfit', var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 14px 16px;
  outline: none;
  resize: none;
  display: block;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', 'Outfit', var(--font-body);
}

.contact-textarea:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(28, 32, 33, 0.85) 40%, rgba(18, 20, 20, 0.96) 100%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.28), 0 6px 20px rgba(0, 0, 0, 0.55);
  outline: none;
}

.contact-submit-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  background: var(--color-orange);
  color: #171919;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 4px 0 20px;
  height: 38px;
  border: 1.6px solid #171919;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 126, 19, 0.45);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-submit-btn .pill-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #171919;
  color: var(--color-orange);
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.contact-submit-btn .pill-btn-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.contact-submit-btn:hover {
  background: var(--color-orange-hover);
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(239, 126, 19, 0.6);
}

.contact-submit-btn:hover .pill-btn-icon {
  transform: translateX(2px);
}

/* ==========================================================================
   CONTACT LOCATION CARD (Tablet & Mobile replacement for map pin)
   Hidden on desktop (≥1025px), shown on ≤1024px
   ========================================================================== */
.contact-info-cards-group,
.contact-location-card {
  display: none;
  /* Hidden on desktop — map pin visible there */
  position: relative;
  z-index: 20;
  padding: 0;
  pointer-events: auto;
}

.contact-info-cards-group {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 16px;
}

.contact-location-card {
  margin-bottom: 0;
}

.contact-location-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(239, 126, 19, 0.14) 0%, rgba(239, 126, 19, 0.06) 60%, rgba(20, 15, 10, 0.75) 100%);
  border: 1px solid rgba(239, 126, 19, 0.28);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(239, 126, 19, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width: 100%;
  box-sizing: border-box;
}

.contact-location-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--color-orange, #EF7E13);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-location-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-location-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-location-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-orange, #EF7E13);
  text-transform: uppercase;
}

.contact-location-address {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #f0f0f0;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.contact-location-address:hover {
  color: var(--color-orange, #EF7E13);
}

.contact-location-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-orange, #EF7E13);
  border-radius: 6px;
  color: #111213;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  pointer-events: auto;
}

.contact-location-link svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: #111213 !important;
}

.contact-location-link svg path {
  stroke: #111213 !important;
  fill: none !important;
}

.contact-location-link:hover {
  background: #ff912a;
  color: #000000;
  transform: translateX(2px);
  box-shadow: 0 0 10px rgba(239, 126, 19, 0.5);
}

/* ==========================================================================
   CONTACT PAGE RESPONSIVE — COMPREHENSIVE BREAKPOINTS
   Desktop-first down to 320px mobile
   ========================================================================== */

/* --- Ultrawide 2560px+ — scale up typography slightly --- */
@media (min-width: 2560px) {
  body.contact-page {
    --contact-panel-w: min(560px, 21vw);
  }

  .contact-process-section {
    right: 50px;
    width: min(1100px, calc(100vw - 420px));
  }

  .contact-form-container {
    left: 180px;
    bottom: 80px;
    width: min(400px, 22vw);
  }
}

/* --- Large desktop 1920px --- */
@media (max-width: 1920px) and (min-width: 1601px) {
  .contact-process-section {
    right: 50px;
    width: min(840px, calc(100vw - 520px));
  }

  .contact-form-container {
    left: 150px;
    bottom: 75px;
    width: min(540px, 38vw);
  }
}

/* --- Desktop 1600px --- */
@media (max-width: 1600px) and (min-width: 1441px) {
  .contact-process-section {
    top: calc(var(--topbar-height) + var(--header-height) + 6px);
    right: 45px;
    width: min(800px, calc(100vw - 480px));
  }

  .contact-form-container {
    width: min(460px, 34vw);
    left: 120px;
  }

  .contact-form-title {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .contact-inputs-stack {
    gap: 3px;
    margin-bottom: 4px;
  }

  .contact-input {
    height: 30px;
    font-size: 11.5px;
    padding: 0 14px;
  }

  .contact-textarea {
    height: 125px;
    font-size: 12px;
    padding: 12px 14px;
  }

  .contact-submit-btn {
    height: 32px;
    font-size: 11px;
    margin-top: 8px;
    padding: 0 4px 0 16px;
  }
}

/* --- Desktop 1440px — compact fit, clean pin separation --- */
@media (max-width: 1440px) and (min-width: 1281px) {
  .contact-process-section {
    right: 40px;
    width: min(760px, calc(100vw - 460px));
  }

  .contact-process-container {
    width: 100%;
    margin: 0;
  }

  .process-card {
    padding: 0;
  }

  .process-badge {
    width: clamp(56px, 4.0vw, 64px);
    height: clamp(36px, 2.5vh, 42px);
    padding: 5px 10px;
    margin-bottom: 7px;
    margin-left: 31px;
  }

  .process-badge .process-icon {
    max-width: 24px;
    max-height: 22px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }

  .process-number {
    font-size: clamp(38px, 2.7vw, 46px);
    margin-bottom: 7px;
    margin-left: 25px;
    text-align: left;
  }

  .process-title {
    font-size: clamp(13.5px, 0.92vw, 16px);
    margin-bottom: 6px;
    margin-left: 18px;
    text-align: left;
  }

  .process-desc {
    font-size: clamp(11.8px, 0.78vw, 13.8px);
    line-height: 1.38;
    text-align: left;
  }

  .desc-line.l1 { margin-left: 12px; }
  .desc-line.l2 { margin-left: 8px; }
  .desc-line.l3 { margin-left: 4px; }
  .desc-line.l4 { margin-left: 0px; }

  .contact-form-container {
    left: 100px;
    width: min(420px, 32vw);
  }

  .contact-title-fade-top {
    width: min(420px, 32vw);
  }

  /* Compact form element sizes for 1281–1440px */
  .contact-form-fields-wrap {
    filter: none;
  }

  .contact-form-fields {
    --form-slant: 64px;
  }

  .contact-form-title {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .contact-inputs-stack {
    gap: 3.5px;
    margin-bottom: 3.5px;
  }

  .contact-input {
    height: 30px;
    font-size: 11.5px;
    padding: 0 14px;
  }

  .contact-textarea {
    height: 115px;
    font-size: 11.5px;
    padding: 10px 14px;
  }

  .contact-submit-btn {
    height: 32px;
    font-size: 11px;
    margin-top: 8px;
    padding: 0 4px 0 16px;
  }
}

/* --- Laptop/Small desktop 1280px — prevent overlaps --- */
@media (max-width: 1280px) and (min-width: 1025px) {
  body.contact-page {
    --contact-panel-w: min(280px, 22vw);
  }

  .contact-process-section {
    right: 35px;
    width: min(720px, calc(100vw - 420px));
  }

  .contact-process-container {
    width: 100%;
    margin: 0;
  }

  .process-card {
    padding: 0;
  }

  .process-badge {
    width: clamp(44px, 3.4vw, 52px);
    height: clamp(28px, 2.0vh, 34px);
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
  }

  .process-badge .process-icon {
    max-width: 24px;
    max-height: 22px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }

  .process-number {
    font-size: 32px;
    margin-bottom: 6px;
    margin-left: auto;
    margin-right: auto;
  }

  .process-title {
    font-size: 12px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
  }

  .process-desc {
    font-size: 11px;
    line-height: 1.32;
  }

  .desc-line {
    margin: 0 !important;
  }

  .contact-form-container {
    left: 60px;
    bottom: 50px;
    width: min(400px, 32vw);
  }

  .contact-title-fade-top {
    width: min(400px, 32vw);
  }

  /* Compact form element sizes for 1280px screens */
  .contact-form-fields-wrap {
    filter: none;
  }

  .contact-form-fields {
    --form-slant: 60px;
  }

  .contact-form-title {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .contact-inputs-stack {
    gap: 3px;
    margin-bottom: 3px;
  }

  .contact-input {
    height: 30px;
    font-size: 11.5px;
    padding: 0 14px;
  }

  .contact-textarea {
    height: 105px;
    font-size: 11px;
    padding: 8px 12px;
  }

  .contact-submit-btn {
    height: 32px;
    font-size: 11px;
    margin-top: 8px;
    padding: 0 4px 0 16px;
  }

  /* Dots slightly smaller to avoid overlay with step cards */
  .contact-dots-wrap {
    width: 170px;
    height: auto;
    aspect-ratio: 192 / 72;
    right: calc(var(--contact-panel-w) - 20px);
    bottom: calc(40% - 10px);
  }
}

/* --- Low-height desktop (e.g. 1539x697, 1280x800, short laptops) --- */
@media (max-height: 840px) and (min-width: 1025px) {
  .contact-process-section {
    top: calc(var(--topbar-height) + var(--header-height) + 8px);
  }

  .process-badge {
    width: clamp(56px, 4.0vw, 64px);
    height: clamp(36px, 2.5vh, 42px);
    padding: 5px 10px;
    margin-bottom: 7px;
    margin-left: 31px;
  }

  .process-badge .process-icon {
    max-width: 24px;
    max-height: 22px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }

  .process-number {
    font-size: clamp(38px, 2.7vw, 46px);
    margin-bottom: 14px;
    margin-left: 26px;
    text-align: left;
  }

  .process-title {
    font-size: clamp(13.5px, 0.92vw, 16px);
    margin-bottom: 14px;
    margin-left: 18px;
    text-align: left;
  }

  .process-desc {
    font-size: clamp(11.8px, 0.78vw, 13.8px);
    line-height: 1.38;
    text-align: left;
  }

  .desc-line.l1 { margin-left: 12px; }
  .desc-line.l2 { margin-left: 8px; }
  .desc-line.l3 { margin-left: 4px; }
  .desc-line.l4 { margin-left: 0px; }

  .contact-form-container {
    bottom: 28px;
  }
}

/* ========================================================================
   TABLET LANDSCAPE: 1024px and below
   Strategy: scrollable page with fixed dark overlay under form,
   process cards wrap to 3+2 grid, form fully visible below
   ======================================================================== */
@media (max-width: 1024px) {
  body.contact-page {
    --contact-panel-w: 0px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
    /* Dark overlay gradient so scrolled content is legible over map */
    background: linear-gradient(180deg, rgba(20, 22, 22, 0.82) 0%, rgba(20, 22, 22, 0.92) 100%);
  }

  /* Graphics container stays fixed for background atmosphere */
  .contact-graphics {
    position: fixed;
    z-index: 1;
  }

  /* Map stays fixed as clean full-width background — no clipping */
  .contact-map-layer {
    position: fixed;
    clip-path: none !important;
    opacity: 0.55;
  }

  /* Process section: relative, scrollable with clean spacing */
  .contact-process-section {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    z-index: 20;
    pointer-events: auto;
    box-sizing: border-box;
  }

  .contact-process-container {
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 3 cards on first row, 2 centered on second row */
  .process-card {
    flex: 1 1 calc(33.333% - 12px);
    min-width: 180px;
    padding: 12px 14px 16px 14px;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(20, 22, 23, 0.92) 0%, rgba(12, 14, 15, 0.95) 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(239, 126, 19, 0.22) !important;
  }

  .process-card-5 {
    margin-left: 0;
  }

  /* Reset diagonal facet for tablet/mobile — clean card style */
  .process-card::before {
    display: none !important;
  }

  .process-card-facet {
    display: none !important;
  }

  /* Reset all diagonal margins */
  .process-badge,
  .process-number,
  .process-title,
  .desc-line {
    margin-left: 0;
  }

  .process-card-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .process-badge {
    clip-path: none !important;
    transform: none;
    width: 48px;
    height: 34px;
    padding: 4px 6px;
    margin-bottom: 14px;
    border-radius: 5px;
    align-self: flex-start !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-badge .process-icon {
    width: auto;
    height: auto;
    max-width: 28px;
    max-height: 24px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
    transform: none;
  }

  .process-number {
    font-size: 32px;
    margin-bottom: 6px;
  }

  .process-title {
    font-size: 13px;
    margin-bottom: 8px;
    white-space: normal;
    word-break: break-word;
  }

  .process-desc {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    font-size: 12px;
    line-height: 1.45;
  }

  .desc-line {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    margin-left: 0 !important;
  }

  .desc-line:not(:last-child)::after {
    content: " ";
  }

  /* Form: full width, relative position below steps, fully scrollable */
  .contact-form-container {
    position: relative;
    left: 0;
    bottom: auto;
    top: auto;
    width: 100%;
    max-width: 700px;
    margin: 16px auto 0;
    padding: 20px 24px 60px;
    z-index: 20;
  }

  .contact-title-fade-top {
    display: none;
  }

  .contact-form-fields-wrap {
    filter: none !important;
    width: 100%;
  }

  .contact-form-fields {
    clip-path: none !important;
    width: 100%;
  }

  .contact-inputs-stack {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .contact-textarea {
    width: 100%;
    height: 130px;
    padding: 14px 20px;
    margin-top: 6px;
  }

  .contact-submit-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    margin-top: 10px;
  }

  /* Hide orange diagonal panel, slit cut, and decorative envelope on tablet/mobile */
  .contact-orange-panel-wrap,
  .contact-orange-panel,
  .contact-orange-slit-wrap,
  .contact-orange-slit,
  .contact-envelope-wrap {
    display: none !important;
  }

  .contact-dots-wrap {
    display: none;
  }

  .contact-pin-wrap {
    display: none;
  }

  /* Show contact info cards (Email, Mobile, Location) on tablet/mobile */
  .contact-info-cards-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 14px;
  }

  .contact-location-card {
    display: block;
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
}

/* ========================================================================
   TABLET PORTRAIT: 768px and below
   Strategy: single-column layout, full-width form, hero map behind header
   ======================================================================== */
@media (max-width: 768px) {
  body.contact-page {
    --contact-panel-w: 50vw;
  }

  /* Process section: tighter, natural flow below header */
  .contact-process-section {
    margin-top: 14px;
    padding: 0 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-process-container {
    gap: 10px;
  }

  /* 2 cards per row on portrait tablet */
  .process-card {
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
    padding: 14px 14px 16px;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(20, 22, 23, 0.92) 0%, rgba(12, 14, 15, 0.95) 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(239, 126, 19, 0.22) !important;
  }

  .process-badge {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-bottom: 16px !important;
  }

  .process-number {
    font-size: 28px;
    margin-bottom: 5px;
  }

  .process-title {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .process-desc {
    font-size: 11.5px;
    line-height: 1.42;
  }

  /* Form: single column, full-width */
  .contact-form-container {
    padding: 20px 14px max(40px, env(safe-area-inset-bottom, 40px));
    max-width: 100%;
  }

  .contact-inputs-stack {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-input {
    height: 44px;
    font-size: 16px !important;
    padding: 0 16px;
  }

  .contact-textarea {
    height: 120px;
    font-size: 16px !important;
    padding: 14px 16px;
  }

  .contact-submit-btn {
    min-height: 48px;
    font-size: 13px;
    padding: 12px 24px;
    width: 100%;
    justify-content: center;
  }

  .contact-map-viewport {
    width: 100%;
    left: 0;
    top: -30px;
    min-height: 100%;
  }

  .contact-pin-wrap {
    display: none;
  }

  .contact-pin-address {
    font-size: 10px;
  }

  /* Adjust contact info cards for tablet portrait */
  .contact-info-cards-group {
    margin-bottom: 12px;
    gap: 8px;
  }

  .contact-location-card {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
}

/* ========================================================================
   MOBILE LARGE: 480px and below
   Strategy: clean vertical flow, single-column cards, full-width form
   ======================================================================== */
@media (max-width: 480px) {
  body.contact-page {
    --contact-panel-w: 0px;
  }

  /* Process section */
  .contact-process-section {
    margin-top: 10px;
    padding: 0 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Adjust location cards for mobile */
  .contact-info-cards-group {
    margin-bottom: 10px;
    gap: 8px;
  }

  .contact-location-card {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
  }

  .contact-location-card-inner {
    padding: 12px 14px;
    gap: 12px;
  }

  .contact-location-address {
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
  }

  /* Single column stacked cards on phones */
  .contact-process-container {
    flex-direction: column;
    gap: 9px;
  }

  .process-card {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 14px 16px;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(20, 22, 23, 0.92) 0%, rgba(12, 14, 15, 0.95) 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(239, 126, 19, 0.22) !important;
    min-width: 100%;
    width: 100%;
  }

  .process-card-5 {
    margin-left: 0;
  }

  .process-card-content {
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .process-badge {
    flex-shrink: 0;
    margin-bottom: 10px !important;
    width: 46px;
    height: 32px;
    padding: 3px 5px;
    border-radius: 5px;
    align-self: flex-start !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-badge .process-icon {
    width: auto;
    height: auto;
    max-width: 26px;
    max-height: 22px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }

  .process-number {
    font-size: 26px;
    margin-bottom: 3px;
  }

  .process-title {
    font-size: 12.5px;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  .process-desc {
    font-size: 11.5px;
    line-height: 1.42;
  }

  /* Form */
  .contact-form-container {
    padding: 18px 12px max(36px, env(safe-area-inset-bottom, 36px));
  }

  .contact-form-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .contact-inputs-stack {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-input {
    height: 44px;
    font-size: 16px !important;
    padding: 0 14px;
    border-radius: 6px;
  }

  .contact-textarea {
    height: 120px;
    font-size: 16px !important;
    padding: 12px 14px;
    border-radius: 6px;
  }

  .contact-submit-btn {
    min-height: 48px;
    font-size: 12.5px;
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
  }

  .contact-map-viewport {
    width: 100%;
    left: 0;
    top: -20px;
  }
}

/* ========================================================================
   MOBILE SMALL: 375px and below (iPhone SE, small Android)
   ======================================================================== */
@media (max-width: 375px) {
  body.contact-page {
    --contact-panel-w: 38vw;
  }

  .process-card {
    gap: 12px;
    padding: 10px 12px;
  }

  .process-badge {
    width: 42px;
    height: 30px;
    padding: 3px 4px;
    border-radius: 4px;
    margin-bottom: 10px !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-badge .process-icon {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 20px;
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }

  .process-number {
    font-size: 22px;
    margin-bottom: 2px;
  }

  .process-title {
    font-size: 11.5px;
    margin-bottom: 3px;
  }

  .process-desc {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .contact-process-container {
    gap: 8px;
  }

  .contact-form-container {
    padding: 14px 10px max(32px, env(safe-area-inset-bottom, 32px));
  }

  .contact-form-title {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .contact-input {
    height: 44px;
    font-size: 16px !important;
    padding: 0 12px;
  }

  .contact-textarea {
    height: 100px;
    font-size: 16px !important;
    padding: 10px 12px;
  }

  .contact-submit-btn {
    min-height: 46px;
    font-size: 12px;
    padding: 11px 16px;
  }

  .contact-process-section {
    margin-top: 8px;
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-map-viewport {
    width: 100%;
    left: 0;
  }
}

/* ========================================================================
   SAFE MINIMUM: 320px — absolute smallest screens
   ======================================================================== */
@media (max-width: 320px) {
  body.contact-page {
    --contact-panel-w: 35vw;
  }

  .contact-process-section {
    margin-top: 6px;
    padding: 0 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .process-number {
    font-size: 22px;
  }

  .process-title {
    font-size: 10px;
  }

  .process-desc {
    font-size: 9.5px;
  }

  .contact-input {
    height: 44px;
    font-size: 16px;
    padding: 0 12px;
  }

  .contact-textarea {
    height: 90px;
    font-size: 16px;
    padding: 12px 14px;
  }

  .contact-submit-btn {
    font-size: 11px;
    padding: 9px 16px;
  }
}

/* Lock scrolling when mobile drawer is open */
body.menu-open {
  overflow: hidden !important;
  touch-action: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* ==========================================================================
   TOPBAR (#EF7E13 Orange Ribbon)
   ========================================================================== */
.topbar {
  background-color: var(--color-orange);
  color: var(--color-dark-topbar);
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  z-index: 110;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.topbar-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--horizontal-padding);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-dark-topbar);
  line-height: 1;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.topbar-item:hover {
  opacity: 0.85;
}

/* Matching the style of .social-circle on the right per client feedback */
.topbar-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-dark-topbar, #232323);
  color: var(--color-orange, #EF7E13);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar-item:hover .topbar-icon-circle {
  transform: scale(1.08);
  background: #171919;
}

.topbar-svg-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.topbar-icon-circle .topbar-svg-icon {
  width: 13.5px;
  height: 13.5px;
  color: var(--color-orange, #EF7E13);
  stroke: currentColor;
}

.topbar-text {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

/* Right Social Media Circles */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.social-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-dark-topbar);
  color: var(--color-orange);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.social-circle::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -6px;
  right: -6px;
}

.social-circle:hover {
  background: #111313;
  color: #FFFFFF;
  transform: translateY(-1.5px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.social-circle img,
.social-circle svg,
.social-circle .topbar-social-svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
  object-fit: contain;
  transition: fill 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   SITE HEADER (Desktop & Semi-Transparent Glassmorphism)
   ========================================================================== */
.site-header {
  background: rgba(18, 20, 20, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: rgba(14, 16, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.header-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 12px var(--horizontal-padding);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

/* Brand Logo (Image from assets) */
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo:hover {
  opacity: 0.9;
}

.logo-img {
  height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: height 0.3s ease;
}

/* Desktop Navigation Menu */
.header-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-nav);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-white);
  padding: 6px 0;
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}

/* Animated ::after underline */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2.5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-orange);
  box-shadow: 0 0 8px rgba(239, 126, 19, 0.6);
  border-radius: 1px;
  transition: width 0.25s ease;
}

.nav-link:hover {
  color: var(--color-orange);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--color-orange);
}

/* Language Switcher SR / ENG */
.lang-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-left: 48px;
}

.lang-text {
  font-family: var(--font-nav);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-white);
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.lang-text:hover {
  color: var(--color-orange);
}

.lang-text.active {
  color: var(--color-orange);
  font-weight: 700;
}

/* Mobile Toggle Hamburger Button */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 105;
  transition: opacity 0.2s ease;
  touch-action: manipulation;
  padding: 0;
}

.mobile-toggle:hover {
  background: transparent;
  border: none;
  opacity: 0.85;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--color-orange);
  margin: 3px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.2s ease;
}

.mobile-toggle.is-active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--color-orange);
}

.mobile-toggle.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.is-active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--color-orange);
}

/* ==========================================================================
   MOBILE DRAWER & ACCESSIBLE OVERLAY
   ========================================================================== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(18, 20, 20, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(239, 126, 19, 0.25);
  z-index: 130;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.8);
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Drawer Top Bar */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.drawer-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.drawer-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.drawer-close-btn:hover {
  background: rgba(239, 126, 19, 0.2);
  border-color: rgba(239, 126, 19, 0.5);
  color: var(--color-orange);
}

.drawer-close-btn svg {
  width: 18px;
  height: 18px;
}

/* Drawer Language Bar at Top with Globe Icon */
.drawer-lang-bar {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-lang-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: 30px;
}

.drawer-globe-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #FFFFFF;
}

/* Mobile Nav Links */
.mobile-nav {
  padding: 24px 20px;
  flex: 1;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-link {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-white);
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--color-orange);
  background: linear-gradient(90deg, rgba(239, 126, 19, 0.14) 0%, rgba(239, 126, 19, 0.03) 100%);
  border-color: rgba(239, 126, 19, 0.35);
  padding-left: 22px;
}

.mobile-nav-link:hover .nav-arrow,
.mobile-nav-link.active .nav-arrow {
  color: var(--color-orange);
  transform: translateX(4px);
}

/* Drawer Footer */
.mobile-drawer-footer {
  padding: 20px 24px max(28px, env(safe-area-inset-bottom, 28px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drawer-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.drawer-lang-label {
  font-family: var(--font-nav);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.mobile-lang {
  margin-left: 0;
  gap: 14px;
}

.mobile-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-nav);
  font-size: 13.5px;
  line-height: 1;
  color: var(--color-text-white);
  transition: color 0.2s ease;
}

.mobile-contact-line:hover {
  color: var(--color-orange);
}

.mobile-contact-line span:not(.drawer-icon-badge) {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(0.5px);
}

/* Unified icon badge for ALL mobile drawer icons (Contact & Social) */
.drawer-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(239, 126, 19, 0.12);
  border: 1px solid rgba(239, 126, 19, 0.28);
  color: var(--color-orange);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.drawer-icon-badge svg {
  width: 17px;
  height: 17px;
  display: block;
}

.mobile-contact-line:hover .drawer-icon-badge,
.mobile-social-link:hover .drawer-icon-badge {
  background: rgba(239, 126, 19, 0.26);
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.mobile-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.mobile-social-link {
  display: inline-flex;
}

/* ==========================================================================
   FLUID & ADAPTIVE BREAKPOINTS
   ========================================================================== */

/* Laptops & Standard Desktops */
@media (max-width: 1280px) {
  :root {
    --horizontal-padding: 36px;
    --header-height: 94px;
  }

  .logo-img {
    height: 70px;
  }

  .nav-list {
    gap: 24px;
  }

  .lang-group {
    margin-left: 36px;
  }

  .topbar-left {
    gap: 10px;
  }
}

/* Tablets (1024px and below - collapse to mobile drawer) */
@media (max-width: 1024px) {
  :root {
    --horizontal-padding: 24px;
    --header-height: 86px;
  }

  .header-nav {
    display: none;
    /* Collapsed into mobile drawer */
  }

  .mobile-toggle {
    display: flex;
  }

  .logo-img {
    height: 64px;
  }

  /* On tablets and mobile: hide long text, keep clean icon linking directly to map */
  .topbar-address .topbar-text {
    display: none;
  }

  .topbar-address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile Landscape & Tablets (768px and below) */
@media (max-width: 768px) {
  :root {
    --horizontal-padding: 20px;
    --header-height: 82px;
  }

  .logo-img {
    height: 60px;
  }

  .topbar-left {
    gap: 10px;
  }

  .topbar-right {
    gap: 10px;
  }
}

/* Mobile Phones (640px and below) */
@media (max-width: 640px) {
  :root {
    --horizontal-padding: 16px;
    --header-height: 78px;
    --topbar-height: 36px;
  }

  .logo-img {
    height: 54px;
  }

  .topbar-inner {
    padding: 0 var(--horizontal-padding);
    overflow: hidden;
    /* prevent topbar from causing page horizontal scroll */
  }

  .topbar-left {
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .topbar-right {
    gap: 10px;
    flex-shrink: 0;
  }

  /* Hide text labels — keep only icons for email, phone and location pin to map */
  .topbar-email .topbar-text,
  .topbar-phone .topbar-text,
  .topbar-address .topbar-text {
    display: none;
  }

  .topbar-address {
    display: inline-flex;
  }

  .topbar-item {
    min-width: unset;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .topbar-icon-circle {
    width: 26px;
    height: 26px;
  }

  .topbar-text {
    font-size: 12px;
    line-height: 1;
  }

  .topbar-svg-icon {
    width: 14px;
    height: 14px;
    transform: translateY(0.5px);
  }

  .social-circle {
    width: 26px;
    height: 26px;
  }

  .social-circle svg,
  .social-circle .topbar-social-svg {
    width: 14px;
    height: 14px;
  }

  .mobile-toggle {
    width: 42px;
    height: 42px;
  }

  .hamburger-bar {
    width: 20px;
  }
}

/* Extra Small Phones (375px and below) */
@media (max-width: 375px) {
  :root {
    --header-height: 72px;
  }

  .logo-img {
    height: 48px;
  }

  /* Keep only email icon (no text) + phone icon (no text) + address icon (no text) + socials */
  .topbar-email .topbar-text,
  .topbar-phone .topbar-text,
  .topbar-address .topbar-text {
    display: none;
  }

  .topbar-address {
    display: inline-flex;
  }

  .topbar-left {
    gap: 6px;
  }

  .topbar-right {
    gap: 6px;
  }
}

/* ==========================================================================
   SERVICES PAGE SPECIFIC STYLES & GRAPHICS (V2 Master Design)
   ========================================================================== */
body.services-page {
  background: linear-gradient(180deg, #171919 0%, #222424 45%, #2e3030 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Fixed-frame architecture on Desktop: locked 100vh, stationary header/footer/graphics, only .services-main scrolls */
@media (min-width: 1025px) {
  html:has(body.services-page),
  html.services-page-html {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background-color: #171919 !important;
  }

  body.services-page {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #171919 !important;
  }
}

/* Main Container & Placement (Pulled high right under Header, spanning to bottom) */
:root {
  --services-line-left: clamp(16px, 1.8vw, 28px);
  --services-banner-w: clamp(170px, 14vw, 240px);
  --services-banner-r: clamp(24px, 4.0vw, 85px);
  --services-pad-r: clamp(16px, 2.5vw, 45px);
  --services-pad-l: clamp(36px, 4.0vw, 75px);
  --services-pad-b: calc(clamp(44px, 5.5vh, 56px) + clamp(10px, 1.4vh, 18px));
  --services-bulldozer-w: clamp(330px, 29vw, 570px);
  /* Content column: slightly roomier width while maintaining clean clearance before bulldozer */
  --services-content-right: min(1175px, min(63.5vw, calc(100vw - var(--services-bulldozer-w) - var(--services-pad-l) + 52px)));
}

.services-main {
  flex: 1 1 auto;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1820px;
  margin: 0 auto;
  padding-top: clamp(10px, 1.5vh, 22px);
  padding-bottom: var(--services-pad-b);
  padding-left: var(--services-pad-l);
  padding-right: var(--services-pad-r);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

.services-layout-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

/* Orange Framing Border around Content Area (V2 Design) */
.services-frame-border {
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--services-pad-b) - 6px);
  left: calc(-1 * var(--services-pad-l) + var(--services-line-left));
  /* right: reaches exact center axis of symmetry of the orange banner */
  right: calc(var(--services-banner-r) + var(--services-banner-w) * 0.5 - var(--services-pad-r) - max(0px, (100vw - 1820px) * 0.5));
  border-top: 2px solid var(--color-orange);
  border-left: 2px solid var(--color-orange);
  pointer-events: none;
  z-index: 10;
}

.services-frame-border::after {
  content: '';
  position: absolute;
  top: -2px;
  right: 0;
  width: 2px;
  height: clamp(38px, 5.0vh, 65px);
  background: var(--color-orange);
}

/* Header Introduction Section (Eyebrow, Main Title, Intro Paragraph) */
.services-header-intro {
  margin-top: clamp(16px, 2.4vh, 34px);
  margin-bottom: clamp(34px, 4.4vh, 60px);
  width: 100%;
  max-width: var(--services-content-right);
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

.services-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(13px, 0.9vw, 15.5px);
  font-weight: 700;
  color: #dcdcdc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: clamp(4px, 0.5vh, 8px);
  line-height: 1.25;
}

.services-eyebrow-mobile {
  display: none;
}

.services-main-title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.4vw, 25px);
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.24;
  margin: 0 0 clamp(6px, 0.8vh, 12px) 0;
}

.services-intro-text {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.08vw, 18px);
  color: #c4c4c4;
  line-height: 1.58;
  letter-spacing: -0.005em;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* 3 Columns Grid with Dynamic Gap and Staggered Heights */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
  max-width: var(--services-content-right);
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: clamp(28px, 3.8vh, 48px);
  flex: 0 0 auto;
  min-height: 0;
  align-items: start;
}

/* Stagger 3 cards: Card 1 high, Card 2 lower, Card 3 intermediate */
.services-grid .service-card:nth-child(1) {
  margin-top: 0;
}

.services-grid .service-card:nth-child(2) {
  margin-top: clamp(14px, 2.2vh, 30px);
}

.services-grid .service-card:nth-child(3) {
  margin-top: clamp(7px, 1.1vh, 15px);
}

/* Service Card - Highlighted Top & Right edges, carved recess look */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: clamp(34px, 4.2vh, 48px) clamp(16px, 1.3vw, 26px) clamp(14px, 1.8vh, 22px);
  background: rgba(22, 24, 24, 0.72);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1.5px solid rgba(239, 126, 19, 0.55);
  border-right: 1.5px solid rgba(239, 126, 19, 0.55);
  border-bottom: none;
  border-left: none;
  border-radius: 0 10px 8px 0;
  box-shadow: 0 16px 28px -4px rgba(0, 0, 0, 0.82), -3px 0 12px -2px rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease, border-color 0.25s ease, z-index 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.service-card-1,
.service-card-2,
.service-card-3 {
  border-top: 1.5px solid rgba(239, 126, 19, 0.55);
  border-right: 1.5px solid rgba(239, 126, 19, 0.55);
  border-bottom: none;
  border-left: none;
}

.service-card:hover {
  background: rgba(30, 32, 32, 0.9);
  border-top-color: #EF7E13;
  border-right-color: #EF7E13;
  box-shadow: 0 20px 36px -4px rgba(0, 0, 0, 0.9), 0 0 16px rgba(239, 126, 19, 0.25);
  z-index: 4;
}

/* Left flank slit removed per client feedback */
.service-card::before {
  display: none;
}

.service-card>* {
  position: relative;
  z-index: 2;
}

/* Line Art Watermarks from Ukrasni elementi.ai - positioned cleanly in bottom-right corner */
.service-watermark {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.16;
  transition: opacity 0.3s ease, transform 0.3s ease;
  top: auto;
  left: auto;
  bottom: 14px;
  right: 14px;
}

.service-card .service-watermark,
.service-card-1 .service-watermark,
.service-card-2 .service-watermark,
.service-card-3 .service-watermark {
  top: auto;
  left: auto;
  bottom: 14px;
  right: 14px;
}

.service-card:hover .service-watermark {
  opacity: 0.28;
  transform: scale(1.04);
}

.service-watermark .watermark-svg {
  width: clamp(92px, 7.5vw, 130px);
  height: auto;
  max-height: 130px;
  display: block;
}

/* Segment 02 (Chart) watermark icon - slightly reduced size */
.service-card-2 .service-watermark .watermark-svg {
  width: clamp(80px, 6.5vw, 114px);
  max-height: 114px;
}

/* Step Badge (01, 02, 03) - Positioned in the exact top-left corner of each card */
.service-badge-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 3;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange);
  color: #171919;
  font-family: 'Lemon Milk', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 0.9vw, 17px);
  padding: 2.5px 20px 2.5px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  border-radius: 0;
  letter-spacing: 0.8px;
}

/* Card Titles */
.service-title {
  font-family: 'Lemon Milk', sans-serif;
  font-size: clamp(14.5px, 1.1vw, 18.5px);
  font-weight: 700;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: clamp(4px, 0.5vh, 8px);
  line-height: 1.24;
}

/* Card Subtitle */
.service-subtitle {
  font-family: var(--font-body);
  font-size: clamp(11.5px, 0.8vw, 14px);
  font-weight: 600;
  color: var(--color-orange);
  margin-bottom: clamp(6px, 0.9vh, 10px);
  line-height: 1.32;
}

/* Body Text */
.service-body {
  color: #c4c4c4;
  font-size: clamp(11.5px, 0.8vw, 13.8px);
  line-height: 1.48;
}

.service-body p {
  margin: 0;
}

/* Orange Divider Line */
.service-divider {
  width: 100%;
  height: 1.5px;
  background: var(--color-orange);
  opacity: 0.85;
  margin: clamp(8px, 1.2vh, 14px) 0;
}

/* Scope / Included Services */
.service-scope {
  margin-top: 1px;
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(5.5px, 0.85vh, 10.5px);
  padding: 0;
  margin: 0;
}

/* Card 2 has 6 items (1 less than Card 1), so slightly roomier gap aligns its bottom button with Card 1 */
.service-card-2 .service-list {
  gap: clamp(7.5px, 1.15vh, 13.5px);
}

.service-list li {
  font-size: clamp(11.5px, 0.8vw, 13.8px);
  line-height: 1.38;
  color: #c8c8c8;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.service-list .list-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-orange);
  margin-top: 0px;
}

.service-list .service-check-icon {
  width: 11.5px;
  height: 11.5px;
  stroke: var(--color-orange);
}

.service-list .list-text {
  color: #c8c8c8;
  flex: 1;
}

/* Service Pill CTA Button - Sits comfortably below list with zero empty void */
.service-cta-wrap {
  margin-top: clamp(14px, 1.8vh, 24px);
  padding-top: 0;
  position: relative;
  z-index: 4;
}

.service-pill-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-orange);
  border: 2px solid #232323;
  border-radius: 50px;
  color: #171919;
  font-family: 'Lemon Milk', sans-serif;
  font-size: clamp(8.8px, 0.6vw, 11px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.8px;
  text-decoration: none;
  padding: clamp(3px, 0.45vh, 5px) clamp(11px, 0.8vw, 15px);
  gap: 7px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.3, 1), background 0.25s ease, box-shadow 0.28s ease;
  cursor: pointer;
}

.service-pill-btn .btn-label {
  color: #171919;
}

.service-pill-btn .btn-divider {
  width: 1.5px;
  height: 12px;
  background: #171919;
  transform: skewX(-18deg);
}

.service-pill-btn .btn-chevron {
  display: inline-flex;
  align-items: center;
  color: #171919;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-pill-btn .btn-chevron svg {
  width: 10px;
  height: 10px;
}

.service-pill-btn:hover {
  background: #ff8c20;
  box-shadow: -3px 5px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(239, 126, 19, 0.55);
  transform: translateX(8px);
}

.service-pill-btn:hover .btn-chevron {
  transform: translateX(4px);
}

.service-pill-btn:active {
  transform: translateX(5px) scale(0.98);
}

/* ==========================================================================
   BOTTOM CALL TO ACTION BANNER (V2 Design - Seamless, No Box Background)
   ========================================================================== */
.services-bottom-cta {
  margin-top: 0;
  margin-bottom: clamp(14px, 2.2vh, 30px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--services-content-right);
  padding: 0;
  gap: 16px;
  position: relative;
  z-index: 5;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* Remove wide dark horizontal shadow blob per client request */
.services-bottom-cta::before {
  display: none !important;
}

.cta-text-group {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
}

.cta-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(13px, 0.9vw, 15.5px);
  font-weight: 700;
  color: #dcdcdc;
  letter-spacing: 0.08em;
  margin-bottom: clamp(4px, 0.5vh, 8px);
  line-height: 1.25;
  text-transform: uppercase;
}

.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.4vw, 25px);
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.24;
  margin: 0;
}

.cta-subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.08vw, 18px);
  color: #c4c4c4;
  line-height: 1.58;
  letter-spacing: -0.005em;
  margin: 0;
}

.service-pill-btn-cta {
  padding: clamp(4px, 0.6vh, 6.5px) clamp(14px, 1.0vw, 20px);
  white-space: nowrap;
}

/* ==========================================================================
   SERVICES GRAPHICS LAYER (Analytics Vectors & Bulldozer - NO BLUR)
   ========================================================================== */
.services-graphics-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Vertical Orange Banner on Right Side (Behind Bulldozer & Analytics Graphics) */
.services-orange-banner {
  position: absolute;
  right: var(--services-banner-r);
  width: var(--services-banner-w);
  top: calc(var(--topbar-height) + var(--header-height) - clamp(50px, 7.5vh, 85px));
  bottom: clamp(44px, 5.5vh, 56px);
  background: linear-gradient(180deg,
      rgba(239, 126, 19, 0) 0%,
      rgba(239, 126, 19, 0.04) 10%,
      rgba(239, 126, 19, 0.14) 22%,
      rgba(239, 126, 19, 0.28) 36%,
      rgba(239, 126, 19, 0.46) 52%,
      rgba(239, 126, 19, 0.68) 68%,
      rgba(239, 126, 19, 0.88) 84%,
      rgba(239, 126, 19, 1.0) 100%);
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
}

/* Floating Analytics Composition (Donut, 3D Bar Chart, Arrow, Target, Floating Dots) */
.services-analytics-wrap {
  position: absolute;
  width: clamp(260px, 22vw, 400px);
  right: max(0px, calc(var(--services-banner-r) + var(--services-banner-w) * 0.5 - clamp(260px, 22vw, 400px) * 0.48));
  top: calc(var(--topbar-height) + var(--header-height) + clamp(10px, 3.0vh, 45px));
  pointer-events: none;
  z-index: 3;
}

.services-analytics-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bulldozer on Earth (Sitting above bottom orange bar) - NO BLUR! */
.services-bulldozer-wrap,
.services-bulldozer-merged-wrap {
  position: absolute;
  right: 0 !important;
  margin-right: 0 !important;
  bottom: clamp(44px, 5.5vh, 56px);
  width: clamp(330px, 29vw, 570px);
  max-height: clamp(280px, 58vh, 540px);
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.services-bulldozer-img,
.services-bulldozer-merged-img {
  width: 100%;
  height: auto;
  max-height: clamp(280px, 58vh, 540px);
  object-fit: contain;
  object-position: bottom right;
  display: block;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.65));
  transform: none !important;
}

/* ==========================================================================
   SERVICES BOTTOM ORANGE RIBBON WITH 15 CIRCULAR WHITE DOTS (3x5)
   ========================================================================== */
.services-bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(44px, 5.5vh, 57px);
  background-color: var(--color-orange);
  z-index: 20;
  pointer-events: none;
  overflow: visible !important;
  box-shadow: none !important;
  border: none !important;
}

.services-footer-dots-wrap {
  position: absolute;
  right: clamp(15px, 2.2vw, 36px);
  top: -42px;
  width: clamp(180px, 16vw, 236px);
  height: auto;
  aspect-ratio: 236 / 88;
  z-index: 25;
  pointer-events: none;
}

.services-footer-dots-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   SERVICES RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptops & Compact Screens (1025px to 1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {
  :root {
    --services-line-left: clamp(16px, 1.8vw, 24px);
    --services-banner-w: clamp(160px, 14vw, 210px);
    --services-banner-r: clamp(20px, 3.2vw, 45px);
    --services-pad-r: clamp(16px, 2.2vw, 32px);
    --services-pad-l: clamp(36px, 3.8vw, 60px);
    --services-pad-b: calc(clamp(44px, 5.5vh, 54px) + clamp(8px, 1.2vh, 14px));
    --services-bulldozer-w: clamp(320px, 30vw, 450px);
  }

  .services-main {
    padding-left: var(--services-pad-l);
    padding-right: var(--services-pad-r);
    padding-top: clamp(8px, 1.3vh, 18px);
    padding-bottom: var(--services-pad-b);
  }

  .services-frame-border {
    left: calc(-1 * var(--services-pad-l) + var(--services-line-left));
    right: calc(var(--services-banner-r) + var(--services-banner-w) * 0.5 - var(--services-pad-r));
    top: 0;
    bottom: calc(-1 * var(--services-pad-b) - 6px);
  }

  .services-frame-border::after {
    height: clamp(26px, 3.5vh, 42px);
  }

  .services-header-intro {
    margin-top: clamp(12px, 2.0vh, 26px);
    margin-bottom: clamp(26px, 3.8vh, 48px);
  }

  .services-grid {
    gap: clamp(12px, 1.2vw, 20px);
    margin-bottom: clamp(22px, 3.2vh, 38px);
    flex: 0 0 auto;
    align-items: start;
  }

  .services-analytics-wrap {
    width: clamp(240px, 20vw, 330px);
    right: max(0px, calc(var(--services-banner-r) + var(--services-banner-w) * 0.5 - clamp(240px, 20vw, 330px) * 0.48));
    top: calc(var(--topbar-height) + var(--header-height) + clamp(6px, 1.5vh, 24px));
  }
}

/* Tall Desktop (min-height: 940px and min-width: 1201px) */
@media (min-height: 940px) and (min-width: 1201px) {
  :root {
    --services-banner-w: clamp(210px, 16vw, 270px);
    --services-banner-r: clamp(35px, 5.0vw, 90px);
    --services-pad-b: calc(clamp(48px, 5.5vh, 58px) + clamp(12px, 1.6vh, 22px));
    --services-bulldozer-w: clamp(480px, 32vw, 680px);
  }

  .services-main {
    padding-top: clamp(12px, 1.8vh, 26px);
    padding-bottom: var(--services-pad-b);
  }

  .services-header-intro {
    margin-top: clamp(20px, 2.8vh, 40px);
    margin-bottom: clamp(38px, 4.8vh, 64px);
  }

  .services-eyebrow {
    font-size: clamp(13px, 0.9vw, 15.5px);
  }

  .services-main-title {
    font-size: clamp(19px, 1.4vw, 25px);
  }

  .services-intro-text {
    font-size: clamp(15px, 1.08vw, 18px);
    line-height: 1.58;
  }

  .services-grid {
    margin-top: 0;
    margin-bottom: clamp(32px, 4.2vh, 54px);
    gap: clamp(16px, 1.5vw, 26px);
    flex: 0 0 auto;
    align-items: start;
  }

  .services-grid .service-card:nth-child(2) {
    margin-top: clamp(16px, 2.4vh, 32px);
  }

  .services-grid .service-card:nth-child(3) {
    margin-top: clamp(8px, 1.2vh, 16px);
  }

  .service-card {
    height: auto;
    padding-top: clamp(42px, 5.0vh, 56px);
    padding-bottom: clamp(16px, 2.0vh, 26px);
    padding-left: clamp(20px, 1.5vw, 32px);
    padding-right: clamp(20px, 1.5vw, 32px);
  }

  .service-title {
    font-size: clamp(13.5px, 0.96vw, 17px);
  }

  .service-subtitle {
    font-size: clamp(11px, 0.74vw, 13px);
  }

  .service-body {
    font-size: clamp(10.5px, 0.72vw, 12.8px);
    line-height: 1.44;
    margin-bottom: clamp(6px, 1.0vh, 10px);
  }

  .service-divider {
    margin: clamp(7px, 1.0vh, 12px) 0;
  }

  .service-list {
    gap: clamp(4.5px, 0.78vh, 10px);
  }

  .service-card-2 .service-list {
    gap: clamp(7px, 1.1vh, 13.5px);
  }

  .service-list li {
    font-size: clamp(10px, 0.7vw, 12.6px);
    line-height: 1.36;
  }

  .service-cta-wrap {
    margin-top: clamp(16px, 2.0vh, 28px);
    padding-top: 0;
  }

  .service-pill-btn {
    padding: clamp(4px, 0.55vh, 6px) clamp(13px, 0.9vw, 18px);
    font-size: clamp(9.5px, 0.65vw, 11.5px);
  }

  .services-bottom-cta {
    margin-top: 0;
    margin-bottom: clamp(18px, 2.6vh, 36px);
    padding: 0 !important;
  }

  .cta-eyebrow {
    font-size: clamp(13px, 0.9vw, 15.5px);
    margin-bottom: 4px;
  }

  .cta-title {
    font-size: clamp(19px, 1.4vw, 25px);
  }

  .cta-subtitle {
    font-size: clamp(15px, 1.08vw, 18px);
    line-height: 1.58;
  }

  .services-analytics-wrap {
    width: clamp(320px, 24vw, 440px);
    right: max(0px, calc(var(--services-banner-r) + var(--services-banner-w) * 0.5 - clamp(320px, 24vw, 440px) * 0.48));
    top: calc(var(--topbar-height) + var(--header-height) + clamp(12px, 2.5vh, 38px));
  }
}

/* Tablets (1024px and below) */
@media (max-width: 1024px) {
  html:has(body.services-page),
  html.services-page-html {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.services-page {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  .services-main {
    padding-top: clamp(26px, 3.5vw, 38px);
    padding-bottom: 24px;
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
    max-width: 820px;
  }

  .services-frame-border {
    display: none;
  }

  .services-header-intro {
    margin-top: 0;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .services-eyebrow {
    font-size: 11.5px;
    margin-bottom: 4px;
  }

  .services-main-title {
    font-size: clamp(18px, 2.8vw, 23px);
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .services-intro-text {
    font-size: clamp(12px, 1.7vw, 13.5px);
    line-height: 1.5;
    color: #cfcfcf;
  }

  .services-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 22px;
    margin-top: 0;
  }

  .services-grid .service-card:nth-child(1),
  .services-grid .service-card:nth-child(2),
  .services-grid .service-card:nth-child(3) {
    margin-top: 0;
  }

  .service-card {
    padding: clamp(38px, 5.5vw, 44px) clamp(18px, 3.2vw, 24px) clamp(20px, 3.5vw, 26px);
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
  }

  @media (hover: hover) {
    .service-card:hover {
      border: 1.5px solid #EF7E13 !important;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 126, 19, 0.35) !important;
      transform: translateY(-2px);
    }
  }

  .service-card::before {
    display: none;
  }

  .service-badge-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 10px;
  }

  .service-badge {
    font-size: 16px;
    padding: 2.5px 20px 2.5px 12px;
  }

  .service-title {
    font-size: clamp(15px, 2.4vw, 18px);
    margin-bottom: 4px;
  }

  .service-subtitle {
    font-size: clamp(12px, 1.8vw, 13.5px);
    margin-bottom: 8px;
  }

  .service-body {
    font-size: clamp(11.5px, 1.7vw, 13px);
    line-height: 1.5;
  }

  .service-divider {
    margin: 12px 0 14px 0;
    opacity: 0.8;
  }

  .service-list {
    gap: 6px;
  }

  .service-list li {
    font-size: clamp(11.2px, 1.7vw, 12.8px);
    line-height: 1.38;
    color: #d6d6d6;
    gap: 8px;
  }

  /* Decorative watermarks in bottom-right corner of cards on tablet & mobile */
  .service-card .service-watermark,
  .service-watermark {
    top: auto !important;
    bottom: 14px !important;
    right: 14px !important;
    left: auto !important;
    opacity: 0.18 !important;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .service-card:hover .service-watermark {
    opacity: 0.28 !important;
    transform: scale(1.05);
  }

  .service-watermark .watermark-svg {
    height: clamp(98px, 18vw, 130px) !important;
    width: auto !important;
    max-width: 135px !important;
    display: block;
  }

  .service-card-2 .service-watermark .watermark-svg {
    height: clamp(84px, 15vw, 112px) !important;
    max-width: 116px !important;
  }

  .service-cta-wrap {
    margin-top: 18px;
  }

  .service-pill-btn {
    font-size: 11px;
    padding: 7px 18px 7px 20px;
    min-height: 42px;
  }

  /* Bottom CTA Banner on Tablet & Mobile */
  .services-bottom-cta {
    max-width: 100%;
    margin-top: 26px;
    flex-direction: column;
    align-items: flex-start;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: clamp(16px, 2.5vw, 22px) 0 0 0;
    gap: 16px;
    position: relative;
  }

  .services-bottom-cta::before {
    display: none !important;
  }

  .cta-eyebrow {
    font-size: 11.5px;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
  }

  .cta-title {
    font-size: clamp(18px, 2.8vw, 23px);
    line-height: 1.25;
  }

  .cta-subtitle {
    font-size: clamp(12px, 1.7vw, 13.5px);
    line-height: 1.5;
    color: #cfcfcf;
  }

  .service-pill-btn-cta {
    padding: 7px 18px 7px 20px;
    font-size: 11.5px;
    min-height: 40px;
  }

  /* Tablet & Mobile: Clean Bulldozer with Analytics overlay */
  .services-orange-banner {
    display: none !important;
  }

  .services-graphics-layer {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: clamp(24px, 4vh, 40px) 0 0 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 0;
  }

  /* Full-width decorative analytics composition across the mobile screen */
  .services-analytics-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 clamp(-52px, -8vw, -36px) 0 !important;
    padding: 0 clamp(8px, 2.5vw, 18px) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .services-analytics-img {
    width: 100% !important;
    max-width: clamp(255px, 55vw, 370px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)) !important;
  }

  .services-bulldozer-wrap {
    position: relative;
    bottom: 0;
    right: 0;
    left: auto;
    margin-left: auto;
    margin-right: 0;
    transform: none;
    width: clamp(480px, 92vw, 680px);
    max-width: 100%;
    z-index: 5 !important;
    line-height: 0;
    filter: none !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
  }

  .services-bulldozer-img {
    width: 100%;
    height: auto;
    display: block;
    filter: none !important;
    transform: none !important;
  }

  .services-bottom-bar {
    position: relative;
    width: 100%;
    height: clamp(48px, 6.5vh, 58px);
    background-color: var(--color-orange);
    z-index: 10;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* Mobile Phones (600px and below) */
@media (max-width: 600px) {
  .services-main {
    padding-top: 24px;
    padding-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .services-header-intro {
    margin-bottom: 20px;
  }

  .services-eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .services-main-title {
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.25;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
  }

  .services-intro-text {
    font-size: 12px;
    line-height: 1.48;
  }

  .services-grid {
    gap: 18px;
  }

  .service-card {
    padding: 38px 16px 18px 16px;
    border-radius: 7px;
  }

  .service-badge {
    font-size: 15px;
    padding: 2px 18px 2px 11px;
  }

  .service-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .service-subtitle {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .service-body {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .service-divider {
    margin: 10px 0 12px 0;
  }

  .service-list {
    gap: 5px;
  }

  .service-list li {
    font-size: 11.5px;
    line-height: 1.35;
    gap: 7px;
  }

  .service-card .service-watermark,
  .service-watermark {
    top: auto !important;
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    opacity: 0.24 !important;
  }

  .service-watermark .watermark-svg {
    height: clamp(115px, 28vw, 150px) !important;
    width: auto !important;
    max-width: 155px !important;
  }

  .service-card-2 .service-watermark .watermark-svg {
    height: clamp(96px, 23vw, 126px) !important;
    max-width: 130px !important;
  }

  .service-cta-wrap {
    margin-top: 15px;
  }

  .service-pill-btn {
    font-size: 11px;
    padding: 7px 16px;
    min-height: 40px;
  }

  .services-bottom-cta {
    padding: 16px 0 0 0;
    margin-top: 20px;
    gap: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .cta-eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .cta-title {
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.25;
    letter-spacing: 0.4px;
  }

  .cta-subtitle {
    font-size: 12px;
    line-height: 1.48;
    color: #c4c4c4;
  }

  .service-pill-btn-cta {
    padding: 7px 18px;
    font-size: 11.5px;
    min-height: 42px;
  }

  .services-graphics-layer {
    margin-top: 20px;
    height: auto;
    justify-content: flex-end;
  }

  .services-analytics-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 -44px 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    pointer-events: none;
  }

  .services-analytics-img {
    width: 100% !important;
    max-width: clamp(232px, 69vw, 328px) !important;
    height: auto !important;
    margin: 0 auto -20px auto !important;
  }

  .services-bulldozer-wrap {
    width: clamp(380px, 98vw, 540px);
    margin-left: auto;
    margin-right: 0;
    bottom: 0;
    z-index: 5 !important;
    filter: none !important;
  }

  .services-bottom-bar {
    height: 48px;
    overflow: visible !important;
    box-shadow: none !important;
  }
}

/* Extra Small Phones (375px and below) */
@media (max-width: 375px) {
  .services-main {
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 16px;
  }

  .services-main-title {
    font-size: 15px;
  }

  .services-intro-text {
    font-size: 11.5px;
  }

  .service-card {
    padding: 36px 13px 16px 13px;
  }

  .service-title {
    font-size: 14px;
  }

  .service-list li {
    font-size: 11px;
  }

  .service-pill-btn {
    font-size: 10.5px;
    padding: 6px 14px;
    min-height: 40px;
  }

  .service-card .service-watermark,
  .service-watermark {
    bottom: 10px !important;
    right: 10px !important;
    opacity: 0.24 !important;
  }

  .service-watermark .watermark-svg {
    height: clamp(105px, 28vw, 138px) !important;
    width: auto !important;
    max-width: 142px !important;
  }

  .service-card-2 .service-watermark .watermark-svg {
    height: clamp(88px, 23vw, 116px) !important;
    max-width: 120px !important;
  }

  .services-bottom-cta {
    padding: 14px 0 0 0;
  }

  .cta-eyebrow {
    font-size: 10.5px;
  }

  .cta-title {
    font-size: 15px;
  }

  .cta-subtitle {
    font-size: 11.5px;
  }

  .service-pill-btn-cta {
    font-size: 11px;
    padding: 6px 16px;
    min-height: 40px;
  }

  .services-graphics-layer {
    margin-top: 16px;
    height: auto;
    justify-content: flex-end;
  }

  .services-analytics-img {
    max-width: clamp(205px, 72vw, 275px) !important;
  }

  .services-bulldozer-wrap {
    width: clamp(330px, 100vw, 420px);
    margin-left: auto;
    margin-right: 0;
    bottom: 0;
    z-index: 5 !important;
    filter: none !important;
  }

  .services-bottom-bar {
    height: 44px;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .services-footer-dots-wrap {
    right: 20px;
    top: -26px;
    width: 140px;
  }
}

/* ==========================================================================
   LANDING PAGE BODY — Lock scroll on desktop (same as services/contact)
   ========================================================================== */
/* Zero-scroll single-viewport landing page on ALL devices & screens */
html:has(body.landing-page),
body.landing-page {
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100vh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* ==========================================================================
   LANDING PAGE - HERO SECTION
   ========================================================================== */

.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--topbar-height) - var(--header-height));
  height: calc(100svh - var(--topbar-height) - var(--header-height));
  max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

/* Black overlay with 50% opacity over the background */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Decorative orange triangle (from header to ~48% height) */
.hero-accent-triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 18.65%;
  height: 47.7%;
  background: var(--color-orange);
  opacity: 0.3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
  z-index: 2;
}

/* Decorative orange circle near upper-left corner of frame */
.hero-accent-dot {
  position: absolute;
  left: 15.75%;
  top: 15.75%;
  width: clamp(16px, 1.4vw, 26px);
  height: clamp(16px, 1.4vw, 26px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-orange);
  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
}

/* Decorative right orange base facet (from ~86.6% header to ~47.4% bottom) */
.hero-accent-right-base {
  position: absolute;
  inset: 0;
  background: var(--color-orange);
  opacity: 0.3;
  clip-path: polygon(86.6% 0, 100% 0, 100% 100%, 47.4% 100%);
  pointer-events: none;
  z-index: 2;
}

/* Inner diagonal facet with dark drop-shadow slit */
.hero-accent-right-slit-wrap {
  position: absolute;
  inset: 0;
  filter: drop-shadow(-16px 0 20px rgba(0, 0, 0, 0.92)) drop-shadow(-4px 0 6px rgba(0, 0, 0, 0.98));
  pointer-events: none;
  z-index: 2;
}

.hero-accent-right-slit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Orange rectangular border frame - perfectly symmetrical on both sides */
.hero-frame {
  position: absolute;
  top: clamp(24px, 5.5vh, 48px);
  bottom: clamp(24px, 5.5vh, 48px);
  left: 10%;
  right: 10%;
  border-top: 2.5px solid var(--color-orange);
  border-right: 2.5px solid var(--color-orange);
  border-bottom: 2.5px solid var(--color-orange);
  border-left: none;
  pointer-events: none;
  z-index: 3;
}

/* Left border - top segment (stops higher above the text) */
.hero-frame::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 2.5px;
  bottom: calc(54.4% + clamp(65px, 5.0vw, 95px));
  background: var(--color-orange);
}

/* Left border - bottom segment (resumes lower below the text) */
.hero-frame::after {
  content: '';
  position: absolute;
  bottom: -2.5px;
  left: 0;
  width: 2.5px;
  top: calc(45.6% + clamp(65px, 5.0vw, 95px));
  background: var(--color-orange);
}

/* Geometric horizontal stripes, scrims & dots composition */
.hero-stripes-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 4;
  mask-image: linear-gradient(to right, #000 0%, #000 62%, rgba(0, 0, 0, 0.7) 78%, transparent 92%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 62%, rgba(0, 0, 0, 0.7) 78%, transparent 92%);
}

.hero-stripes-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

/* Desktop: hero-body-wrap is transparent (display:contents passes through) */
/* Mobile: becomes a flex column so text + button stay together */
.hero-body-wrap {
  display: contents;
  /* On desktop, acts as if it doesn't exist */
}

.hero-content {
  position: absolute;
  top: 45.6%;
  left: 8.5%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
  padding: 0;
}

.hero-title-line1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 48px);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.12;
  white-space: nowrap;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8);
  margin: 0 0 6px 0;
}

.hero-title-line2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 48px);
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.12;
  white-space: nowrap;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8);
  margin: 0 0 6px 0;
}

.mobile-title-break {
  display: none;
}

.hero-subtitle {
  font-family: 'Myriad Pro', 'Myriad', var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.35vw, 24px);
  color: #e8e8e8;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.85);
  margin: 0;
  line-height: 1.15;
}

/* READ MORE button - positioned bottom-right inside the orange frame */
.hero-read-more {
  position: absolute;
  right: 13%;
  bottom: 17%;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px 10px 18px;
  background: rgba(23, 25, 25, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--color-orange);
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(239, 126, 19, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lightbulb badge on left */
.hero-rm-bulb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--color-orange);
  transition: color 0.3s ease, transform 0.3s ease;
}

.hero-rm-bulb svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Clean, crisp text */
.hero-rm-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(13px, 1vw, 16px);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.hero-rm-text .rm-white {
  color: #ffffff;
  transition: color 0.3s ease;
}

.hero-rm-text .rm-orange {
  color: var(--color-orange);
  transition: color 0.3s ease;
}

/* Hover effect - fills with brand orange, text & bulb turn dark */
.hero-read-more:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(239, 126, 19, 0.6);
}

.hero-read-more:hover .hero-rm-text,
.hero-read-more:hover .hero-rm-text .rm-white,
.hero-read-more:hover .hero-rm-text .rm-orange {
  color: #171919;
}

.hero-read-more:hover .hero-rm-bulb {
  color: #171919;
  transform: scale(1.1);
}

/* Responsive hero */
@media (max-width: 1280px) {
  .hero-frame {
    left: 8%;
    right: 8%;
  }

  .hero-content {
    left: 7.5%;
  }

  .hero-read-more {
    right: 8.5%;
    bottom: 15%;
  }
}

@media (max-width: 1024px) {

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(22px, 3.5vw, 42px);
    white-space: normal;
  }

  .hero-subtitle {
    white-space: normal;
    letter-spacing: 0.14em;
  }

  .hero-frame {
    left: 5%;
    right: 3%;
    top: 6%;
    bottom: 6%;
  }

  .hero-content {
    left: 7%;
  }

  .hero-read-more {
    right: 5%;
    bottom: 10%;
  }

  .hero-accent-triangle {
    width: 24%;
    height: 44%;
  }

  .hero-accent-dot {
    left: 10%;
    top: 12%;
  }

  .hero-accent-right-base {
    clip-path: polygon(82% 0, 100% 0, 100% 100%, 52% 100%);
  }

  .hero-accent-right-slit {
    clip-path: polygon(91% 0, 100% 0, 100% 100%, 63% 100%);
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 0;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    overflow: hidden;
  }

  .hero-frame {
    left: 3%;
    right: 2%;
    top: 5%;
    bottom: 5%;
  }

  .hero-content {
    left: 5%;
    top: calc(45% - 20px);
  }

  .hero-frame::before {
    bottom: calc(55% + 60px);
  }

  .hero-frame::after {
    top: calc(45% + 60px);
  }

  .hero-accent-triangle {
    width: 32%;
    height: 38%;
  }

  .hero-accent-dot {
    left: 8%;
    top: 10%;
  }

  .hero-accent-right-base {
    clip-path: polygon(94% 0, 100% 0, 100% 100%, 82% 100%);
    opacity: 0.18;
  }

  .hero-accent-right-slit {
    display: none !important;
  }

  .hero-stripes-img {
    object-fit: cover;
    object-position: left center;
    opacity: 1 !important;
  }

  .hero-title-line1 {
    font-size: clamp(20px, 5.0vw, 26px);
    margin: 0 0 4px 0;
    line-height: 1.18;
    white-space: normal !important;
  }

  .hero-title-line2 {
    font-size: clamp(19px, 4.6vw, 24px);
    margin: 0 0 6px 0;
    line-height: 1.18;
    white-space: normal !important;
  }

  .mobile-title-break {
    display: none !important;
  }

  .hero-subtitle {
    font-size: clamp(13px, 3.2vw, 15px);
    letter-spacing: 0.04em;
    white-space: normal !important;
    line-height: 1.35;
    margin: 0;
  }

  .hero-read-more {
    right: 4%;
    bottom: 8%;
  }
}

/* Design watermark number — bottom-right corner of hero */
.hero-watermark {
  position: absolute;
  bottom: 18px;
  right: 28px;
  z-index: 5;
  font-family: var(--font-heading);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
  color: rgba(239, 126, 19, 0.55);
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   HERO -- LARGE TABLET / SMALL LAPTOP (640px and below)
   ========================================================================== */
@media (max-width: 640px) {

  /* Switch hero to flex column — text + button always together and visible */
  .hero-body-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 46%;
    left: clamp(14px, 4vw, 24px);
    right: clamp(14px, 4vw, 24px);
    transform: translateY(-50%);
    z-index: 6;
    gap: 16px;
    pointer-events: auto;
    padding: 0;
  }

  /* hero-content: now relative inside the wrap, not absolute on its own */
  .hero-content {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    pointer-events: auto;
  }

  /* hero-read-more: now relative, sits below the text */
  .hero-read-more {
    position: static;
    right: auto;
    bottom: auto;
    pointer-events: auto;
    padding: 8px 20px 8px 14px;
    gap: 8px;
  }

  .hero-section {
    min-height: 0;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    overflow: hidden;
    align-items: center;
  }

  .hero-frame {
    left: 3%;
    right: 2%;
    top: clamp(14px, 3vh, 26px);
    bottom: clamp(14px, 3vh, 26px);
  }

  .hero-frame::before {
    bottom: calc(54% + 55px);
  }

  .hero-frame::after {
    top: calc(46% + 55px);
  }

  .hero-title-line1 {
    font-size: clamp(18px, 4.8vw, 23px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 4px 0;
    transform: none;
  }

  .hero-title-line2 {
    font-size: clamp(17px, 4.4vw, 21px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 6px 0;
    transform: none;
  }

  .hero-subtitle {
    font-size: clamp(12px, 3.0vw, 14px);
    letter-spacing: 0.04em;
    white-space: normal !important;
    line-height: 1.35;
    margin: 0;
    transform: none;
  }

  .hero-accent-triangle {
    width: clamp(70px, 22vw, 110px);
    height: clamp(60px, 18vw, 90px);
    opacity: 0.2;
  }

  .hero-accent-right-base {
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 84% 100%);
    opacity: 0.16;
  }

  .hero-rm-text {
    font-size: clamp(12px, 2.8vw, 14px);
  }

  .hero-rm-bulb {
    width: 24px;
    height: 24px;
  }

  .hero-rm-bulb svg {
    width: 20px;
    height: 20px;
  }

  .hero-watermark {
    font-size: 11px;
    bottom: 12px;
    right: 16px;
  }
}

/* ==========================================================================
   HERO -- MOBILE PHONES (480px and below)
   ========================================================================== */
@media (max-width: 480px) {
  .hero-body-wrap {
    left: clamp(12px, 3.5vw, 18px);
    right: clamp(12px, 3.5vw, 18px);
    top: 46%;
    transform: translateY(-50%);
    gap: 15px;
    padding: 0;
  }

  .hero-section {
    min-height: 0;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    overflow: hidden;
  }

  .hero-frame {
    left: 2%;
    right: 2%;
    top: clamp(12px, 2.5vh, 22px);
    bottom: clamp(12px, 2.5vh, 22px);
  }

  .hero-frame::before {
    bottom: calc(54% + 48px);
  }

  .hero-frame::after {
    top: calc(46% + 48px);
  }

  .hero-title-line1 {
    font-size: clamp(17px, 4.6vw, 21px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 4px 0;
    transform: none;
  }

  .hero-title-line2 {
    font-size: clamp(16px, 4.2vw, 20px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 6px 0;
    transform: none;
  }

  .hero-subtitle {
    font-size: clamp(11.5px, 2.8vw, 13px);
    letter-spacing: 0.04em;
    white-space: normal !important;
    line-height: 1.35;
    margin: 0;
    transform: none;
  }

  .hero-accent-triangle {
    width: clamp(60px, 20vw, 95px);
    height: clamp(50px, 16vw, 80px);
    opacity: 0.18;
  }

  .hero-accent-right-base {
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 85% 100%);
    opacity: 0.15;
  }

  .hero-read-more {
    padding: 7px 18px 7px 12px;
    gap: 8px;
  }

  .hero-rm-text {
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }

  .hero-rm-bulb {
    width: 22px;
    height: 22px;
  }

  .hero-rm-bulb svg {
    width: 18px;
    height: 18px;
  }

  .hero-watermark {
    font-size: 10px;
    bottom: 10px;
    right: 12px;
    opacity: 0.75;
  }
}

/* ==========================================================================
   HERO -- SMALL PHONES (375px and below - iPhone SE, Galaxy A)
   ========================================================================== */
@media (max-width: 375px) {
  .hero-body-wrap {
    left: 12px;
    right: 12px;
    top: 46%;
    transform: translateY(-50%);
    gap: 14px;
    padding: 0;
  }

  .hero-section {
    min-height: 0;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    overflow: hidden;
  }

  .hero-frame {
    left: 2%;
    right: 2%;
    top: 10px;
    bottom: 10px;
  }

  .hero-frame::before {
    bottom: calc(54% + 42px);
  }

  .hero-frame::after {
    top: calc(46% + 42px);
  }

  .hero-title-line1 {
    font-size: clamp(16px, 4.5vw, 19px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 3.5px 0;
    transform: none;
  }

  .hero-title-line2 {
    font-size: clamp(15px, 4.1vw, 18px);
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 5px 0;
    transform: none;
  }

  .hero-subtitle {
    font-size: clamp(11px, 2.7vw, 12.5px);
    letter-spacing: 0.04em;
    white-space: normal !important;
    line-height: 1.35;
    margin: 0;
    transform: none;
  }

  .hero-accent-triangle {
    width: clamp(50px, 18vw, 80px);
    height: clamp(45px, 15vw, 70px);
    opacity: 0.18;
  }

  .hero-accent-right-base {
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 86% 100%);
    opacity: 0.14;
  }

  .hero-read-more {
    padding: 7px 15px 7px 11px;
    gap: 7px;
  }

  .hero-rm-text {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .hero-rm-bulb {
    width: 20px;
    height: 20px;
  }

  .hero-rm-bulb svg {
    width: 16px;
    height: 16px;
  }

  .hero-watermark {
    display: none;
  }
}

/* ==========================================================================
   HERO -- MINIMUM SCREENS (320px - Galaxy Fold, budget phones)
   ========================================================================== */
@media (max-width: 320px) {
  .hero-body-wrap {
    left: 10px;
    right: 10px;
    top: 46%;
    transform: translateY(-50%);
    gap: 13px;
    padding: 0;
  }

  .hero-section {
    min-height: 0;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    overflow: hidden;
  }

  .hero-frame {
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    border-width: 2px;
  }

  .hero-frame::before {
    bottom: calc(54% + 38px);
    width: 2px;
  }

  .hero-frame::after {
    top: calc(46% + 38px);
    width: 2px;
  }

  .hero-title-line1 {
    font-size: 15px;
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 3px 0;
    transform: none;
  }

  .hero-title-line2 {
    font-size: 14px;
    white-space: normal !important;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
    margin: 0 0 4px 0;
    transform: none;
  }

  .hero-subtitle {
    font-size: 10.5px;
    letter-spacing: 0.03em;
    white-space: normal !important;
    line-height: 1.35;
    margin: 0;
    transform: none;
  }

  .hero-accent-right-base {
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 86% 100%);
    opacity: 0.12;
  }

  .hero-accent-triangle {
    width: 38%;
    height: 28%;
    opacity: 0.18;
  }

  .hero-accent-right-base {
    clip-path: polygon(93% 0, 100% 0, 100% 100%, 78% 100%);
    opacity: 0.20;
  }

  .hero-read-more {
    padding: 6px 14px 6px 10px;
    gap: 6px;
    border-width: 1.5px;
  }

  .hero-rm-text {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .hero-rm-bulb {
    width: 19px;
    height: 19px;
  }

  .hero-rm-bulb svg {
    width: 15px;
    height: 15px;
  }

  .hero-watermark {
    display: none;
  }

  .hero-stripes-img {
    animation: none;
  }
}

/* ==========================================================================
   HERO -- LANDSCAPE SHORT PHONES (height <= 500px)
   ========================================================================== */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    height: calc(100dvh - var(--topbar-height) - var(--header-height));
    max-height: calc(100dvh - var(--topbar-height) - var(--header-height));
    height: calc(100svh - var(--topbar-height) - var(--header-height));
  }

  /* In landscape on short phones, use row layout for more breathing room */
  .hero-body-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    left: 5%;
    right: 5%;
    gap: 20px;
    top: 46%;
    transform: translateY(-50%);
  }

  .hero-content {
    flex: 1;
    min-width: 0;
  }

  .hero-read-more {
    flex-shrink: 0;
    padding: 6px 16px 6px 12px;
  }

  .hero-frame {
    top: 3%;
    bottom: 3%;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(14px, 3.5vw, 24px);
    line-height: 1.1;
    white-space: normal;
    word-break: break-word;
  }

  .hero-title-line2 {
    margin-bottom: 5px;
  }

  .hero-subtitle {
    font-size: clamp(8px, 1.8vw, 12px);
    letter-spacing: 0.08em;
  }

  .hero-frame::before {
    bottom: calc(54% + 40px);
  }

  .hero-frame::after {
    top: calc(46% + 40px);
  }
}





/* ==========================================================================
   ABOUT US PAGE SPECIFIC STYLES & TESTIMONIALS
   ========================================================================== */
body.about-page {
  background: linear-gradient(180deg, #171919 0%, #222424 45%, #2e3030 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Zero-scroll single viewport on Desktop (1025px and above) */
@media (min-width: 1025px) {

  /* Document-level natural dark scrolling on Desktop and all screens */
  html.about-page-html,
  html:has(body.about-page) {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #171919 !important;
    scrollbar-color: rgba(239, 126, 19, 0.45) #171919;
    scrollbar-width: thin;
  }

  body.about-page {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    background-color: #171919 !important;
  }
}

html:has(body.about-page)::-webkit-scrollbar,
html.about-page-html::-webkit-scrollbar {
  width: 8px;
  background-color: #171919;
}

html:has(body.about-page)::-webkit-scrollbar-track,
html.about-page-html::-webkit-scrollbar-track {
  background: #171919;
}

html:has(body.about-page)::-webkit-scrollbar-thumb,
html.about-page-html::-webkit-scrollbar-thumb {
  background: rgba(239, 126, 19, 0.45);
  border-radius: 4px;
}

html:has(body.about-page)::-webkit-scrollbar-thumb:hover,
html.about-page-html::-webkit-scrollbar-thumb:hover {
  background: #EF7E13;
}

/* Background Artwork Layer — fits inside the proportional container */
.about-bg-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('./assets/images/about_perfect_bg_base.png?v=15');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

/* Decorative overlays rendered directly in authentic master vector artwork */
.about-watermark-g,
.about-g-shadow-orange,
.about-fade-banner,
.about-stripes-upper,
.about-bottom-ribbon,
.about-stripes-lower {
  display: none;
}

/* Main Container - Natural document height with comfortable bottom padding */
.about-main {
  flex: 1 1 auto;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1820px;
  height: auto !important;
  min-height: calc(100vh - var(--topbar-height) - var(--header-height));
  min-height: calc(100dvh - var(--topbar-height) - var(--header-height));
  max-height: none !important;
  margin: 0 auto;
  padding-top: clamp(14px, 2.2vh, 28px);
  padding-bottom: clamp(60px, 8vh, 100px) !important;
  padding-left: clamp(20px, 2.5vw, 48px);
  padding-right: clamp(20px, 2.5vw, 48px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible !important;
}

.about-layout-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 19.362% 1fr;
  gap: clamp(20px, 2.5vw, 48px);
  align-items: stretch;
}

/* Responsive coordinate synchronization for About background artwork & fade banner:
   Content artboard below header: 2665 x 1328 px
   - Banner right edge / text flush alignment: x = 516 / 2665 = 19.362%
   - Underline Y from bottom: 1098 / 1328 = 82.68% of content height
*/
:root {
  --about-aspect-ratio: 2.0068;
  --about-content-height: calc(100vh - var(--topbar-height) - var(--header-height));
  --about-banner-right: 19.362%;
  --about-underline-bottom: 82.68%;
}

/* Left Column Orange Fade Banner, Pedestal Shadows & Frame Border:
   Authentic elements are baked directly into about_perfect_bg_base.png with exact vector precision */
.about-vertical-crease-shadow,
.about-pedestal-shadow,
.about-frame-border,
.about-continuous-vert-line {
  display: none;
}

/* Left Column: Marko Petrović Profile */
.about-left-col {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-left: 0;
  pointer-events: none;
}

/* Profile Header (CEO AND FOUNDER + MARKO PETROVIĆ)
   Positioned flush to the right edge of the vertical fadeaway banner,
   resting directly above the authentic vector underline inside the container. */
.about-profile-header {
  position: absolute;
  z-index: 25;
  left: 0;
  width: 19.362%;
  bottom: calc(82.68% + 4px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-right: 0;
  margin: 0;
  pointer-events: auto;
}

.about-role {
  position: relative;
  z-index: 6;
  display: block;
  font-family: 'Myriad Pro', 'Myriad', var(--font-body);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
  color: #dcdcdc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  margin-bottom: clamp(3px, 0.4vh, 6px);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 4px 14px rgba(0, 0, 0, 0.9);
}

.about-name-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  position: relative;
}

.about-name {
  position: relative;
  z-index: 6;
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 clamp(2px, 0.3vh, 4px) 0;
  line-height: 1.1;
  white-space: nowrap;
  text-align: right;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 1),
    0 3px 10px rgba(0, 0, 0, 0.95),
    0 6px 20px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(0, 0, 0, 0.85);
}

/* Underline is rendered with vector sharpness directly in about_perfect_bg_base.png */
.about-name-divider {
  display: none;
}

.about-name-divider::after {
  display: none;
}

/* On desktop, Marko's photo with sharp pedestal crease shadow and seamless lower stripes
   is rendered directly in authentic master vector artwork */
.about-photo-wrapper {
  display: none;
}

.about-photo-img {
  display: none;
}

/* Right Column: Central Content - 4 Main Sections (v2 Master Design) */
.about-right-col {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: clamp(10px, 1.8vw, 36px);
  margin-top: 0;
  justify-content: flex-start;
}

.about-content-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 0 10px 0 6px;
  --about-card-gap: clamp(8px, 1.3vh, 16px);
  gap: var(--about-card-gap);
}

/* Individual Section Block */
.about-v2-section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Natural Staircase Offsets matching the diagonal angle of the pedestal */
.about-v2-sec-1 {
  margin-left: 0;
  max-width: min(1060px, 100%);
}

.about-v2-sec-2 {
  margin-left: clamp(16px, 1.8vw, 32px);
  max-width: clamp(520px, 50vw, 840px);
}

.about-v2-sec-3 {
  margin-left: clamp(28px, 3.0vw, 52px);
  max-width: clamp(480px, 46vw, 760px);
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.about-v2-sec-3 .about-v2-body {
  max-width: 100%;
}

.about-v2-sec-4 {
  margin-left: clamp(44px, 4.5vw, 80px);
  max-width: clamp(460px, 44vw, 740px);
}

/* Orange Accent Dot for Section 3 (OUR EXPERIENCE) */
.about-v2-dot {
  position: static;
  display: inline-block;
  vertical-align: middle;
  width: clamp(8px, 0.6vw, 11px);
  height: clamp(8px, 0.6vw, 11px);
  background: var(--color-orange);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: clamp(4px, 0.4vw, 8px);
  box-shadow: 0 0 5px rgba(239, 126, 19, 0.5);
}

/* Subtitle Label (e.g. ABOUT US, WHO WE WORK WITH, OUR EXPERIENCE, GET IN TOUCH) */
.about-v2-label {
  font-family: var(--font-heading);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 600;
  color: #dcdcdc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: clamp(3px, 0.4vh, 6px);
  line-height: 1.2;
}

/* Heading Row: Title + Pill Button inline */
.about-v2-heading-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(6px, 0.8vw, 14px);
  margin-bottom: clamp(5px, 0.7vh, 10px);
}

.about-desktop-br {
  display: none;
}

.about-v2-title {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.25vw, 21px);
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0;
}

/* Body Text Group */
.about-v2-body {
  color: #c4c4c4;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
}

.about-v2-body p {
  margin: 0;
}

.about-v2-body p:last-child {
  margin-bottom: 0;
}

/* Action Button ("GET A FREE QUOTE", "EXPLORE OUR SERVICES", "TAKE A LOOK", "GET IN TOUCH") */
.about-v2-pill-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: var(--color-orange);
  color: #171919;
  border: 1.4px solid #171919;
  border-radius: 50px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.about-v2-btn-text {
  font-family: var(--font-heading);
  font-size: clamp(9.5px, 0.7vw, 12px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #171919;
  padding: 2px 8px 2px 10px;
  display: inline-block;
  line-height: 1.2;
}

.about-v2-btn-divider {
  width: 1.4px;
  height: 12px;
  background: #171919;
  transform: skewX(-14deg);
  margin: 0 1px;
  flex-shrink: 0;
}

.about-v2-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px 6px 1.5px 3px;
  color: #171919;
}

.about-v2-btn-arrow svg {
  width: 8px;
  height: 8px;
  display: block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-v2-pill-btn:hover {
  background: #ff8e26;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 126, 19, 0.5);
}

.about-v2-pill-btn:hover .about-v2-btn-arrow svg {
  transform: translateX(2px);
}

/* 3 Feature Pillars Row in Section 2 (Enhanced size, dividers & width) */
.about-v2-pillars-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: clamp(540px, 48vw, 780px);
  margin-top: clamp(6px, 1.0vh, 14px);
  gap: clamp(8px, 1.0vw, 18px);
}

.about-v2-pillar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.0vw, 16px);
  flex: 1 1 0;
  min-width: 0;
}

.about-v2-pillar-icon {
  position: relative;
  flex-shrink: 0;
  width: clamp(57px, 3.8vw, 68px);
  height: clamp(57px, 3.8vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.about-v2-pillar-icon .pillar-svg-img,
.about-v2-pillar-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: none;
  pointer-events: none;
}

.about-v2-pillar-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.about-v2-pillar-heading {
  font-family: var(--font-heading);
  font-size: clamp(10.5px, 0.7vw, 13px);
  font-weight: 700;
  color: #e0e0e0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 clamp(1px, 0.2vh, 3px) 0;
  line-height: 1.2;
}

.about-v2-pillar-desc {
  font-family: var(--font-body);
  font-size: clamp(9.5px, 0.62vw, 11.5px);
  color: #c4c4c4;
  line-height: 1.36;
  margin: 0;
}

.about-v2-pillar-divider {
  width: 1.5px;
  height: clamp(22px, 2.8vh, 34px);
  background: #585a5b;
  margin: 0 clamp(2px, 0.4vw, 6px);
  flex-shrink: 0;
}

/* Authentic Text Section Shadows ("crni rez" posle svake sekcije) */
/* Authentic Text Section Shadows ("crni rez" posle svake sekcije) - Clean custom gradient on both sides */
.about-v2-shadow {
  display: block;
  position: relative;
  width: 100%;
  max-width: clamp(540px, 54vw, 920px);
  height: clamp(6px, 1.0vh, 12px);
  margin-top: clamp(8px, 1.2vh, 16px);
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.35) 10%,
      rgba(0, 0, 0, 0.85) 30%,
      rgba(0, 0, 0, 0.95) 50%,
      rgba(0, 0, 0, 0.85) 70%,
      rgba(0, 0, 0, 0.35) 90%,
      rgba(0, 0, 0, 0) 100%
    ) top center / 100% 1.5px no-repeat,
    radial-gradient(ellipse 70% 100% at 50% 0%,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.25) 55%,
      transparent 100%
    );
}

.about-v2-shadow-1,
.about-v2-shadow-2,
.about-v2-shadow-3 {
  background-image: none;
}

.about-v2-sec-4 .about-v2-shadow {
  display: none !important;
}

/* ─── 1800px+ fullscreen only (height >= 1020px) ─────────────────────── */
@media (min-width: 1800px) and (min-height: 1020px) {
  .about-content-card {
    height: auto;
    justify-content: flex-start;
    --about-card-gap: clamp(14px, 1.8vh, 22px);
    gap: var(--about-card-gap);
    padding-right: clamp(20px, 2.5vw, 60px);
  }

  .about-v2-pillars-grid {
    max-width: clamp(680px, 52vw, 920px);
    gap: clamp(16px, 1.5vw, 28px);
  }

  .about-v2-sec-1 {
    margin-left: 0;
  }

  .about-v2-sec-2 {
    margin-left: clamp(20px, 2.0vw, 40px);
  }

  .about-v2-sec-3 {
    margin-left: clamp(35px, 3.5vw, 65px);
  }

  .about-v2-sec-4 {
    margin-left: clamp(55px, 5.0vw, 100px);
  }
}

/* ─── 1025px - 1280px: Laptops & smaller desktop viewports ─────────────── */
@media (max-width: 1280px) and (min-width: 1025px) {
  .about-layout-wrapper {
    gap: clamp(14px, 1.8vw, 24px);
  }

  .about-v2-sec-1 {
    margin-left: 0;
  }

  .about-v2-sec-2 {
    margin-left: clamp(10px, 1.2vw, 20px);
  }

  .about-v2-sec-3 {
    margin-left: clamp(18px, 2.0vw, 32px);
  }

  .about-v2-sec-4 {
    margin-left: clamp(26px, 3.0vw, 48px);
  }

  /* Pillars in Section 2: fit comfortably */
  .about-v2-pillars-grid {
    max-width: 100%;
    margin-top: clamp(6px, 1.0vh, 12px);
    gap: clamp(8px, 1.0vw, 16px);
  }

  .about-v2-pillar {
    gap: clamp(6px, 0.7vw, 10px);
  }

  .about-v2-pillar-icon {
    width: 28px;
    height: 28px;
  }

  .about-v2-pillar-icon .pillar-svg-img,
  .about-v2-pillar-icon svg {
    transform: scale(1.15);
  }

  .about-v2-pillar-divider {
    height: clamp(24px, 2.8vh, 34px);
    margin: 0 clamp(2px, 0.4vw, 6px);
  }
}

/* ─── Height-based adaptive scaling for laptops & non-fullscreen viewports ─── */
@media (max-height: 920px) and (min-width: 1025px) {
  .about-main {
    padding-top: clamp(12px, 1.8vh, 22px);
    padding-bottom: clamp(14px, 2.2vh, 26px);
  }

  .about-content-card {
    height: auto;
    justify-content: flex-start;
    --about-card-gap: clamp(6px, 1.0vh, 12px);
    gap: var(--about-card-gap);
  }

  .about-v2-label {
    margin-bottom: clamp(1px, 0.2vh, 3px);
  }

  .about-v2-heading-row {
    margin-bottom: clamp(3px, 0.5vh, 6px);
    gap: clamp(5px, 0.7vw, 10px);
  }

  .about-v2-title {
    font-size: clamp(12px, 0.95vw, 16px);
  }

  .about-v2-body {
    font-size: clamp(10.5px, 0.72vw, 12.8px);
    line-height: 1.4;
  }

  .about-v2-body p {
    margin: 0 0 clamp(2px, 0.3vh, 4px) 0;
  }

  .about-v2-pillars-grid {
    margin-top: clamp(4px, 0.6vh, 8px);
    gap: clamp(6px, 0.8vw, 12px);
  }

  .about-v2-pillar-icon {
    width: clamp(24px, 1.8vw, 30px);
    height: clamp(24px, 1.8vw, 30px);
  }

  .about-v2-shadow {
    height: clamp(4px, 0.6vh, 8px);
    margin-top: clamp(4px, 0.6vh, 8px);
    margin-bottom: 0;
  }
}

@media (max-height: 800px) and (min-width: 1025px) {
  .about-main {
    padding-top: clamp(8px, 1.2vh, 14px);
    padding-bottom: clamp(10px, 1.6vh, 18px);
  }

  .about-content-card {
    height: auto;
    justify-content: flex-start;
    --about-card-gap: clamp(4px, 0.7vh, 8px);
    gap: var(--about-card-gap);
  }

  .about-v2-heading-row {
    margin-bottom: clamp(2px, 0.3vh, 4px);
  }

  .about-v2-label {
    margin-bottom: 1px;
    font-size: clamp(8px, 0.55vw, 10px);
  }

  .about-v2-title {
    font-size: clamp(11px, 0.85vw, 14px);
  }

  .about-v2-body {
    font-size: clamp(9.5px, 0.62vw, 11.5px);
    line-height: 1.32;
  }

  .about-v2-body p {
    margin: 0 0 2px 0;
  }

  .about-v2-pillars-grid {
    margin-top: clamp(3px, 0.5vh, 6px);
    gap: 6px;
  }

  .about-v2-pillar-icon {
    width: 22px;
    height: 22px;
  }

  .about-v2-pillar-divider {
    height: 18px;
  }

  .about-v2-pillar-heading {
    font-size: clamp(9px, 0.55vw, 10.5px);
  }

  .about-v2-pillar-desc {
    font-size: clamp(8px, 0.5vw, 9.5px);
  }

  .about-v2-shadow {
    height: clamp(3px, 0.5vh, 6px);
    margin-top: clamp(3px, 0.5vh, 6px);
    margin-bottom: 0;
  }
}

/* ─── 1024px: tablet & laptop and below — unlock scroll ──────────────────── */
@media (max-width: 1024px) {

  /* Unlock vertical scroll */
  html.about-page-html,
  html:has(body.about-page),
  body.about-page {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
  }

  /* Hide all desktop decorative layers */
  .about-frame-border,
  .about-continuous-vert-line,
  .about-stripes-upper,
  .about-bottom-ribbon,
  .about-stripes-lower,
  .about-watermark-g,
  .about-g-shadow-orange,
  .about-fade-banner,
  .about-pedestal-shadow,
  .about-vertical-crease-shadow {
    display: none;
  }

  /* Hide desktop base artwork on mobile & tablet so the black bottom box is eliminated */
  .about-bg-layer {
    display: none;
  }

  html.about-page-html,
  html:has(body.about-page),
  body.about-page {
    background: linear-gradient(180deg, #171919 0%, #222424 45%, #2e3030 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .about-main {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: clamp(38px, 4.5vw, 48px) 24px 60px;
  }

  .about-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
    height: auto;
  }

  /* Left column: Horizontal Executive Card on tablets & mobile */
  .about-left-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 3.5vw, 24px);
    width: 100%;
    max-width: 540px;
    margin: 0 auto clamp(20px, 3.5vh, 32px) auto;
    padding: clamp(12px, 2.8vw, 16px) clamp(16px, 3.8vw, 24px);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    text-align: left;
    height: auto;
    min-height: 0;
  }

  .about-photo-wrapper {
    order: 1;
    width: clamp(82px, 20vw, 104px);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .about-photo-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .about-photo-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;
    margin: 0;
    transform: none;
    display: block;
    border-radius: 0;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  }

  .about-profile-header {
    order: 2;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: auto !important;
    flex: 1 1 auto;
    max-width: none !important;
    align-self: center !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .about-role {
    text-align: left;
    font-size: clamp(10px, 2.5vw, 11.5px);
    color: #c4c2c0;
    margin-bottom: 3px;
    text-shadow: none;
    letter-spacing: 0.08em;
  }

  .about-name-group {
    align-items: flex-start;
  }

  .about-name {
    text-align: left;
    font-size: clamp(16px, 4.2vw, 24px);
    white-space: normal;
    line-height: 1.15;
    margin: 0 0 5px 0;
    text-shadow: none;
  }

  .about-name-divider {
    width: 44px;
    max-width: 44px;
    height: 2px;
    margin: 0;
    background: var(--color-orange);
    box-shadow: none;
  }

  .about-name-divider::after {
    display: none !important;
  }

  /* Right column */
  .about-right-col {
    padding-right: 0;
    padding-bottom: 0;
    margin-top: 0;
    height: auto;
    min-height: 0;
  }

  .about-content-card {
    --about-card-gap: 24px;
    gap: var(--about-card-gap);
    padding: 0;
    height: auto;
    min-height: 0;
  }

  /* Reset all staircase offsets */
  .about-v2-sec-1,
  .about-v2-sec-2,
  .about-v2-sec-3,
  .about-v2-sec-4 {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  .about-v2-sec-3 .about-v2-body {
    max-width: 100% !important;
  }

  .about-v2-sec-3 {
    padding: 0;
  }

  /* Section typography */
  .about-v2-label {
    font-size: clamp(9px, 1.6vw, 12px);
  }

  .about-v2-title {
    font-size: clamp(14px, 2.6vw, 20px);
  }

  .about-v2-body {
    font-size: clamp(11px, 1.6vw, 14px);
  }

  .about-v2-heading-row {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(8px, 1.4vh, 14px);
  }

  .about-v2-btn-text {
    font-size: clamp(9px, 1.4vw, 11px);
  }

  .about-v2-dot {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 2px;
  }

  /* Pillars — horizontal row on tablet */
  .about-v2-pillars-grid {
    max-width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(14px, 2.2vw, 24px);
    margin-top: clamp(18px, 2.4vw, 26px);
  }

  .about-v2-pillar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
  }

  .about-v2-pillar-icon {
    width: clamp(52px, 5.5vw, 64px);
    height: clamp(52px, 5.5vw, 64px);
  }

  .about-v2-pillar-icon .pillar-svg-img,
  .about-v2-pillar-icon svg {
    width: 100%;
    height: 100%;
    transform: scale(1.15);
  }

  .about-v2-pillar-text-group {
    align-items: center;
    width: 100%;
  }

  .about-v2-pillar-heading {
    font-size: clamp(13px, 1.55vw, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #f0f0f0;
  }

  .about-v2-pillar-desc {
    font-size: clamp(12px, 1.4vw, 14.5px);
    line-height: 1.45;
    color: #c8c6c4;
    margin: 0;
  }

  .about-v2-pillar-divider {
    width: 1.5px;
    height: auto;
    align-self: stretch;
    margin: 0 4px;
    background: #585a5b;
  }

  .about-v2-shadow {
    max-width: 100%;
    height: clamp(26px, 4.2vw, 42px);
    margin-top: var(--about-card-gap, 24px);
    margin-bottom: 0;
  }
}

/* ─── 768px: tablet portrait ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  .about-main {
    padding: 20px 18px max(48px, env(safe-area-inset-bottom, 48px));
  }

  .about-v2-heading-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .about-v2-pill-btn {
    min-height: 38px;
    align-self: flex-start;
  }

  .about-v2-btn-text {
    font-size: 11px;
    font-weight: 800;
    padding: 7px 12px 7px 16px;
    line-height: 1.2;
  }

  .about-v2-btn-divider {
    height: 22px;
  }

  .about-v2-btn-arrow {
    padding: 7px 12px 7px 8px;
  }

  .about-v2-btn-arrow svg {
    width: 12px;
    height: 12px;
  }

  .about-v2-title {
    font-size: clamp(14px, 3.2vw, 19px);
    line-height: 1.25;
  }

  .about-v2-body {
    font-size: clamp(11.5px, 2vw, 14px);
    line-height: 1.5;
  }

  .about-v2-pillars-grid {
    gap: clamp(10px, 2vw, 18px);
    margin-top: 16px;
  }

  .about-v2-pillar-icon {
    width: clamp(46px, 5.8vw, 54px);
    height: clamp(46px, 5.8vw, 54px);
  }

  .about-v2-pillar-heading {
    font-size: clamp(12px, 2.1vw, 14.5px);
    font-weight: 700;
    margin-bottom: 5px;
  }

  .about-v2-pillar-desc {
    font-size: clamp(11.5px, 1.8vw, 13.5px);
    line-height: 1.42;
  }

  .about-content-card {
    --about-card-gap: 24px;
    gap: var(--about-card-gap);
  }
}

/* ─── 600px: large phones / small tablets ────────────────────────────────── */
@media (max-width: 600px) {

  .about-main {
    padding: 16px 16px max(40px, env(safe-area-inset-bottom, 40px));
  }

  /* Pillars: vertical stack as clean cards */
  .about-v2-pillars-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
  }

  .about-v2-pillar {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
  }

  .about-v2-pillar-text-group {
    align-items: flex-start;
  }

  .about-v2-pillar-divider {
    display: none;
  }

  .about-v2-pillar-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .about-v2-title {
    font-size: clamp(13px, 4vw, 17px);
  }

  .about-v2-body {
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .about-v2-label {
    font-size: clamp(9px, 2.2vw, 11px);
  }

  .about-content-card {
    --about-card-gap: 20px;
    gap: var(--about-card-gap);
  }

  .about-v2-shadow {
    max-width: 100%;
    height: clamp(22px, 4.5vw, 34px);
    margin-top: var(--about-card-gap, 20px);
    margin-bottom: 0;
  }
}

/* ─── 480px: standard phones ─────────────────────────────────────────────── */
@media (max-width: 480px) {

  .about-main {
    padding: 24px 14px max(36px, env(safe-area-inset-bottom, 36px));
  }

  .about-left-col {
    gap: 14px;
    padding: 10px 14px;
  }

  .about-v2-heading-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .about-v2-title {
    font-size: clamp(13px, 4.5vw, 17px);
    line-height: 1.25;
  }

  .about-v2-body {
    font-size: clamp(12px, 3.5vw, 15px);
  }

  .about-v2-label {
    font-size: clamp(9px, 2.5vw, 11px);
    letter-spacing: 0.06em;
  }

  .about-v2-pillar-heading {
    font-size: clamp(11px, 2.8vw, 13px);
  }

  .about-v2-pillar-desc {
    font-size: clamp(12px, 3vw, 14px);
  }

  .about-v2-pillar-icon {
    width: 40px;
    height: 40px;
  }

  .about-content-card {
    --about-card-gap: 20px;
    gap: var(--about-card-gap);
  }
}

/* ─── 375px: small phones ─────────────────────────────────────────────────── */
@media (max-width: 375px) {

  .about-main {
    padding: 20px 12px max(32px, env(safe-area-inset-bottom, 32px));
  }

  .about-left-col {
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
  }

  .about-v2-title {
    font-size: clamp(12px, 5vw, 16px);
  }

  .about-v2-body {
    font-size: clamp(11.5px, 3.8vw, 14px);
  }

  .about-v2-label {
    font-size: clamp(8px, 2.6vw, 10px);
  }

  .about-v2-pillar {
    gap: 10px;
  }

  .about-v2-pillar-icon {
    width: 36px;
    height: 36px;
  }

  .about-v2-pillar-heading {
    font-size: clamp(11px, 3vw, 13px);
  }

  .about-v2-pillar-desc {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .about-content-card {
    --about-card-gap: 18px;
    gap: var(--about-card-gap);
  }

  .about-v2-pillars-grid {
    gap: 12px;
  }
}

/* ─── 320px: minimum supported width ─────────────────────────────────────── */
@media (max-width: 320px) {

  .about-main {
    padding: 18px 10px max(28px, env(safe-area-inset-bottom, 28px));
  }

  .about-left-col {
    gap: 10px;
    padding: 8px 10px;
  }

  .about-v2-title {
    font-size: clamp(11px, 5.5vw, 15px);
  }

  .about-v2-body {
    font-size: clamp(11px, 4.2vw, 13px);
    line-height: 1.55;
  }

  .about-v2-pillar {
    gap: 8px;
  }

  .about-v2-pillar-icon {
    width: 32px;
    height: 32px;
  }

  .about-content-card {
    --about-card-gap: 14px;
    gap: var(--about-card-gap);
  }
}

/* ─── Landscape phone (short viewport) ────────────────────────────────────── */
@media (max-height: 500px) and (max-width: 900px) {

  html.about-page-html,
  html:has(body.about-page),
  body.about-page {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .about-frame-border,
  .about-continuous-vert-line,
  .about-stripes-upper,
  .about-bottom-ribbon,
  .about-stripes-lower,
  .about-watermark-g,
  .about-g-shadow-orange,
  .about-fade-banner,
  .about-pedestal-shadow,
  .about-vertical-crease-shadow {
    display: none;
  }

  .about-bg-layer {
    display: none;
  }

  html.about-page-html,
  html:has(body.about-page),
  body.about-page {
    background: linear-gradient(180deg, #171919 0%, #222424 45%, #2e3030 100%) !important;
    background-attachment: fixed !important;
    min-height: 100%;
  }

  .about-main {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 18px 16px 36px;
  }

  .about-layout-wrapper {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }

  .about-content-card {
    --about-card-gap: 16px;
    gap: var(--about-card-gap);
  }

  .about-v2-title {
    font-size: clamp(12px, 2.5vw, 16px);
  }

  .about-v2-body {
    font-size: clamp(11px, 1.8vw, 13px);
  }

  .about-v2-pillars-grid {
    flex-direction: row;
    gap: 12px;
    margin-top: 10px;
  }

  .about-v2-pillar {
    flex-direction: column;
    text-align: center;
  }

  .about-v2-pillar-text-group {
    align-items: center;
  }

  .about-v2-pillar-divider {
    width: 2px;
    height: auto;
    align-self: stretch;
  }
}

/* ==========================================================================
   PROJECTS PAGE STYLES
   ========================================================================== */
html:has(body.projects-empty-page) {
  height: 100%;
  overflow: hidden;
}

body.projects-empty-page {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

body.projects-empty-page .projects-main {
  height: calc(100vh - var(--topbar-height) - var(--header-height));
  height: calc(100dvh - var(--topbar-height) - var(--header-height));
  min-height: auto;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* ==========================================================================
   404 ERROR PAGE — DEAD-CENTER ALIGNMENT ON DESKTOP & RESPONSIVE
   ========================================================================== */
body.page-404 {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

@media (min-width: 1025px) {
  body.page-404 {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: hidden !important; /* Zero scrollbar on desktop when content fits */
  }
}

body.page-404 .topbar,
body.page-404 .site-header {
  flex: 0 0 auto !important;
  width: 100% !important;
}

body.page-404 .error-404-main,
body.page-404 .projects-main {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: calc(100vh - var(--topbar-height, 38px) - var(--header-height, 104px)) !important;
  min-height: calc(100dvh - var(--topbar-height, 38px) - var(--header-height, 104px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: clamp(20px, 4vh, 48px) clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  position: relative !important;
  overflow-y: auto !important;
}

body.page-404 .error-404-card,
body.page-404 .projects-container {
  margin: auto !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body.projects-empty-page .projects-main,
body:not(.projects-page):not(.page-404) .projects-main {
  position: relative;
  min-height: calc(100vh - var(--topbar-height) - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  z-index: 2;
}

.projects-container {
  max-width: 860px;
  width: 100%;
  text-align: center;
  border: 1.5px solid var(--color-orange);
  background: rgba(23, 25, 25, 0.94);
  border-radius: 8px;
  padding: clamp(36px, 6vw, 68px) clamp(24px, 4vw, 52px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}

.projects-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.projects-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.projects-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: #dcdcdc;
  line-height: 1.65;
  max-width: 660px;
  margin: 0 auto 32px auto;
}

.projects-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-orange);
  color: #171919;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(239, 126, 19, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.projects-cta-btn:hover {
  background: var(--color-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 126, 19, 0.6);
}

.projects-cta-btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   RESPONSIVE PATCH — ADDITIONAL FIXES
   Covers: 430px/412px phones, Z Fold 717px, 280px minimum, landscape modes,
   contact form scrollability, services tablet guard, about landscape fix
   ========================================================================== */

/* --- 430px phones (iPhone 14 Pro Max, Pixel 7 Pro) --- */
@media (max-width: 430px) {
  :root {
    --horizontal-padding: 14px;
    --header-height: 72px;
    --topbar-height: 34px;
  }

  .logo-img {
    height: 50px;
  }

  .topbar-left {
    gap: 8px;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
  }

  .topbar-email .topbar-text,
  .topbar-phone .topbar-text,
  .topbar-address .topbar-text {
    display: none;
  }

  .topbar-item {
    min-width: unset;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .topbar-right {
    gap: 8px;
    flex-shrink: 0;
  }
}

/* --- 412px phones (Galaxy S series, Pixel) --- */
@media (max-width: 412px) {
  :root {
    --horizontal-padding: 12px;
  }

  .topbar-left {
    gap: 6px;
  }

  .topbar-right {
    gap: 6px;
  }

  .social-circle {
    width: 26px;
    height: 26px;
  }
}

/* --- 280px absolute minimum (Galaxy Fold outer, budget phones) --- */
@media (max-width: 280px) {
  :root {
    --horizontal-padding: 8px;
    --header-height: 66px;
    --topbar-height: 32px;
  }

  .topbar-inner {
    padding: 0 8px;
  }

  .topbar-left {
    gap: 4px;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
  }

  .topbar-right {
    gap: 4px;
    flex-shrink: 0;
  }

  .social-circle,
  .topbar-icon-circle {
    width: 24px;
    height: 24px;
  }

  .social-circle svg,
  .social-circle .topbar-social-svg,
  .topbar-icon-circle .topbar-svg-icon {
    width: 12px;
    height: 12px;
  }

  .topbar-svg-icon {
    width: 12px;
    height: 12px;
  }

  .logo-img {
    height: 44px;
  }

  .mobile-toggle {
    width: 40px;
    height: 40px;
  }

  .hamburger-bar {
    width: 18px;
  }

  /* Hero on 280px */
  .hero-body-wrap {
    left: 3%;
    right: 4%;
    gap: 10px;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap !important;
  }

  .hero-subtitle {
    font-size: 6.5px;
    white-space: nowrap !important;
  }

  /* Contact on 280px */
  .contact-process-section {
    padding: 0 6px;
  }

  .contact-form-container {
    padding: 12px 8px max(24px, env(safe-area-inset-bottom, 24px));
  }

  .contact-input {
    height: 44px !important;
    font-size: 16px !important;
    padding: 0 10px;
  }

  .contact-textarea {
    height: 88px;
    font-size: 16px !important;
    padding: 10px;
  }

  /* Services on 280px */
  .services-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* About on 280px */
  .about-main {
    padding: 14px 8px max(24px, env(safe-area-inset-bottom, 24px));
  }

  .about-left-col {
    padding: 6px 8px;
  }
}

/* --- Z Fold inner screen ~717px --- */
@media (max-width: 717px) and (min-width: 601px) {

  /* Contact: ensure process cards wrap properly at 717px */
  .contact-process-container {
    gap: 10px;
  }

  .process-card {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 150px;
  }

  /* About: left col fits properly */
  .about-left-col {
    max-width: 480px;
  }

  /* Services: single column on fold inner */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-grid .service-card:nth-child(1),
  .services-grid .service-card:nth-child(2),
  .services-grid .service-card:nth-child(3) {
    margin-top: 0;
  }
}

/* --- Landscape phones 844x390 (iPhone 14) and 932x430 (iPhone 14 Plus) --- */
@media (max-height: 430px) and (min-width: 667px) and (orientation: landscape) {

  /* Contact: scrollable on landscape phone */
  body.contact-page {
    --contact-panel-w: 0px;
    overflow-y: auto !important;
    height: auto !important;
  }

  .contact-process-section {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 12px;
    padding: 0 16px;
    z-index: 20;
  }

  .contact-form-container {
    position: relative;
    left: 0;
    bottom: auto;
    top: auto;
    width: 100%;
    max-width: 600px;
    margin: 12px auto 0;
    padding: 16px 20px 32px;
    z-index: 20;
  }

  .contact-orange-panel-wrap,
  .contact-orange-panel,
  .contact-orange-slit-wrap,
  .contact-orange-slit,
  .contact-envelope-wrap,
  .contact-dots-wrap,
  .contact-pin-wrap {
    display: none !important;
  }

  .contact-title-fade-top {
    display: none;
  }

  .contact-form-fields {
    clip-path: none;
  }

  .contact-inputs-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .contact-info-cards-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
  }

  .contact-location-card {
    display: block;
    margin-bottom: 0;
  }

  /* Hero on landscape phone */
  .hero-section {
    height: calc(100svh - var(--topbar-height) - var(--header-height));
    max-height: calc(100svh - var(--topbar-height) - var(--header-height));
  }

  /* About on landscape phone - match max-height:500 query */
  body.about-page {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .about-main {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 14px 16px 32px;
  }

  .about-layout-wrapper {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* Services on landscape phone */
  body.services-page {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .services-main {
    padding-top: 16px;
    padding-bottom: 20px;
  }
}

/* --- Topbar: prevent horizontal overflow on any narrow screen --- */
.topbar-inner {
  overflow: hidden;
}

/* --- Services: ensure bottom bar doesn't cut content on tablet scroll --- */
@media (max-width: 1024px) {
  .services-bottom-bar {
    position: relative;
    width: 100%;
    z-index: 10;
    flex-shrink: 0;
  }
}

/* --- About: fix content overflow guard on very short landscape phones --- */
@media (max-height: 390px) and (orientation: landscape) {
  body.about-page {
    overflow-y: auto !important;
    height: auto !important;
  }

  .about-main {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* --- Contact: ensure main content area is scrollable on mobile --- */
@media (max-width: 1024px) {
  .contact-main {
    position: relative;
    z-index: 10;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  }
}

/* --- Topbar: ensure topbar never causes horizontal scroll on any width --- */
@media (max-width: 360px) {
  .topbar-left {
    gap: 4px;
    max-width: calc(100% - 100px);
    overflow: hidden;
    min-width: 0;
  }

  .topbar-right {
    gap: 4px;
    flex-shrink: 0;
  }
}

/* --- Hero: fix bottom-right watermark from overflowing on small screens --- */
@media (max-width: 360px) {
  .hero-watermark {
    display: none;
  }

  .hero-read-more {
    max-width: calc(100% - 16px);
    overflow: hidden;
  }

  .hero-rm-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}

/* --- Services: prevent graphics overflow on tablet --- */
@media (max-width: 1024px) {
  .services-graphics-layer {
    overflow: hidden;
  }

  .services-bulldozer-wrap,
  .services-analytics-wrap {
    max-width: 100%;
  }
}

/* --- About: left-col max width at 540px screen width --- */
@media (max-width: 540px) {
  .about-left-col {
    max-width: 100%;
  }

  .about-photo-wrapper {
    width: clamp(64px, 16vw, 80px);
  }
}

/* --- Contact page: ensure process cards don't overflow container at 540-600px --- */
@media (max-width: 600px) and (min-width: 481px) {
  .contact-process-container {
    flex-wrap: wrap;
  }

  .process-card {
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
  }
}

/* --- Safe area insets for notched phones --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-drawer-footer {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  body.contact-page .contact-form-container {
    padding-bottom: max(36px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   ABOUT US — DESKTOP STAGE (all non-mobile-menu devices, >= 1025px)
   The master artboard (1066 x 531.6 pt, below header) is rendered as one
   uniformly scaled "stage": nothing is ever stretched (G stays a circle),
   every text block sits at its exact design coordinate, and the stage
   always fits the viewport. Extra width is filled by a seamless edge bleed.
   1 design pt = var(--s)
   ========================================================================== */
/* ==========================================================================
   ABOUT US — DESKTOP RESPONSIVE LAYOUT (all devices >= 1025px)
   Full-width expansive architecture:
   - Left wing (Marko, pedestal, stripes, diagonal ribbon) anchored to the left
   - Right wing (watermark circular G, frame corner, concentric rings) anchored to the right
   - Center ribbon (#EE7D13) and frame line seamlessly connect left & right
   - Center text block takes all available width between wings with clean dynamic spacing
   - Absolutely NO horizontal stretching: G and Marko maintain 100% true circular/aspect ratio
   ========================================================================== */
@media (min-width: 1025px) {
  body.about-page .about-main {
    --avail-h: calc(100vh - var(--topbar-height) - var(--header-height));
    /* The vertical scale factor maps the master 531.6pt height to the available height */
    --s: calc(var(--avail-h) / 531.6);
    --wing-l-w: calc(345 * var(--s));
    --wing-r-w: calc(296 * var(--s));
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: var(--avail-h);
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;
    background: #171818;
  }

  @supports (height: 100dvh) {
    body.about-page .about-main {
      --avail-h: calc(100dvh - var(--topbar-height) - var(--header-height));
    }
  }

  /* Seamless center fill between left and right wings */
  body.about-page .about-bg-layer {
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--wing-l-w) - 1px);
    right: calc(var(--wing-r-w) - 1px);
    bottom: 0;
    margin: 0;
    padding: 0;
    background-image: url('./assets/images/about_center_fill.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
  }

  /* Left Wing: Marko, pedestal, stripes, and angled ribbon */
  body.about-page .about-wing-left {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--wing-l-w);
    height: var(--avail-h);
    background-image: url('./assets/images/about_left_wing.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
  }

  /* Right Wing: Circular G watermark, concentric rings, right frame line & ribbon */
  body.about-page .about-wing-right {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--wing-r-w);
    height: var(--avail-h);
    background-image: url('./assets/images/about_right_wing.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
  }

  /* Content Wrapper: fills full viewport width, coordinates text precisely */
  body.about-page .about-layout-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--avail-h);
    margin: 0;
    padding: 0;
    display: block;
    z-index: 5;
  }

  body.about-page .about-left-col {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  body.about-page .about-right-col {
    position: absolute;
    top: calc(26 * var(--s) + 2px);
    bottom: calc(48 * var(--s) + clamp(16px, 2.2vh, 26px));
    left: calc(var(--wing-l-w) - clamp(20px, 2.0vw, 42px));
    right: calc(var(--wing-r-w) + clamp(12px, 1.4vw, 30px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
    z-index: 10;
    pointer-events: auto;
    padding-top: clamp(14px, 2.0vh, 20px);
    padding-bottom: clamp(20px, 2.5vh, 34px);
    padding-left: clamp(12px, 1.2vw, 22px);
    padding-right: clamp(14px, 1.4vw, 24px);
  }

  body.about-page .about-right-col::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.about-page .about-content-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3.8vh, 44px);
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  body.about-page .about-photo-wrapper,
  body.about-page .about-name-divider,
  body.about-page .about-watermark-g,
  body.about-page .about-g-shadow-orange,
  body.about-page .about-fade-banner,
  body.about-page .about-stripes-upper,
  body.about-page .about-bottom-ribbon,
  body.about-page .about-stripes-lower,
  body.about-page .about-frame-border,
  body.about-page .about-continuous-vert-line {
    display: none;
  }

  /* Clean custom shadow cut below sections 1, 2, 3 (no shadow below section 4) */
  body.about-page .about-v2-shadow {
    display: block;
    position: relative;
    width: 100%;
    height: 10px;
    margin-top: clamp(14px, 2.0vh, 20px);
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 10%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.95) 50%,
        rgba(0, 0, 0, 0.85) 70%,
        rgba(0, 0, 0, 0.35) 90%,
        rgba(0, 0, 0, 0) 100%
      ) top center / 100% 2px no-repeat,
      radial-gradient(ellipse 70% 100% at 50% 0%,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.25) 55%,
        transparent 100%
      );
  }

  body.about-page .about-v2-sec-4 .about-v2-shadow {
    display: none !important;
  }

  /* ---------- Profile header (right-flush above Marko's pedestal line) ---------- */
  body.about-page .about-profile-header {
    position: absolute;
    left: 0;
    width: calc(207 * var(--s));
    top: calc(58.5 * var(--s));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin: 0;
    padding: 0;
    z-index: 10;
  }

  body.about-page .about-role {
    font-family: var(--font-body);
    font-size: calc(12 * var(--s));
    font-weight: 700;
    color: #dcdcdc;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 0 0 calc(5 * var(--s)) 0;
    text-shadow: none;
  }

  body.about-page .about-name {
    font-family: var(--font-heading);
    font-size: calc(14.85 * var(--s));
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--color-orange);
    margin: 0;
    text-shadow: none;
  }

  /* ---------- Sections: Flow layout inside central scroll with natural staircase ---------- */
  body.about-page .about-v2-section {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  /* Natural staircase offsets matching the diagonal angle of Marko's pedestal */
  body.about-page .about-v2-sec-1 {
    margin-left: 0;
    max-width: min(1080px, 100%);
  }

  body.about-page .about-v2-sec-2 {
    margin-left: clamp(14px, 1.6vw, 32px);
    max-width: min(940px, calc(100% - clamp(14px, 1.6vw, 32px)));
  }

  body.about-page .about-v2-sec-3 {
    margin-left: clamp(26px, 2.8vw, 54px);
    max-width: min(900px, calc(100% - clamp(26px, 2.8vw, 54px)));
  }

  body.about-page .about-v2-sec-4 {
    margin-left: clamp(40px, 4.0vw, 76px);
    max-width: min(860px, calc(100% - clamp(40px, 4.0vw, 76px)));
  }

  body.about-page .about-v2-label {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(13px, 0.9vw, 15.5px);
    font-weight: 700;
    color: #dcdcdc;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0 0 clamp(5px, 0.7vh, 9px) 0;
  }

  body.about-page .about-v2-heading-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(12px, 1.2vw, 20px);
    margin: 0 0 clamp(9px, 1.2vh, 15px) 0;
    height: auto;
  }

  body.about-page .about-v2-title {
    font-family: var(--font-heading);
    font-size: clamp(19px, 1.4vw, 25px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: 0.03em;
    color: var(--color-orange);
    text-transform: uppercase;
    white-space: normal;
    margin: 0;
  }

  body.about-page .about-desktop-br {
    display: inline;
  }

  body.about-page .about-v2-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.08vw, 18px);
    line-height: 1.58;
    letter-spacing: -0.005em;
    color: #c4c4c4;
    max-width: none;
  }

  body.about-page .about-v2-body p {
    margin: 0;
    text-wrap: pretty;
  }
  body.about-page .about-v2-body p:last-child {
    margin-bottom: 0;
  }

  /* ---------- Pill buttons ---------- */
  body.about-page .about-v2-pill-btn {
    height: auto;
    padding: clamp(4px, 0.55vh, 6.5px) clamp(13px, 0.95vw, 18px);
    border-width: 1.5px;
    border-radius: 50px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    gap: 8px;
    margin-top: clamp(2px, 0.25vh, 4px);
    align-self: flex-start;
  }

  body.about-page .about-v2-btn-text {
    font-family: var(--font-heading);
    font-size: clamp(10.5px, 0.75vw, 12.5px);
    font-weight: 900;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.08em;
    padding: 0;
  }

  body.about-page .about-v2-btn-divider {
    width: 1.5px;
    height: 14px;
    margin: 0;
  }

  body.about-page .about-v2-btn-arrow {
    padding: 0;
  }

  body.about-page .about-v2-btn-arrow svg {
    width: 11px;
    height: 11px;
  }

  /* ---------- Pillars (clean proportioned grid) ---------- */
  body.about-page .about-v2-pillars-grid {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: min(980px, 100%);
    height: auto;
    margin: clamp(16px, 2.2vh, 26px) 0 0 0;
    gap: clamp(16px, 1.6vw, 28px);
  }

  body.about-page .about-v2-pillar {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 18px);
    flex: 1 1 0;
    min-width: 0;
  }

  body.about-page .about-v2-pillar-icon {
    width: clamp(64px, 4.3vw, 76px);
    height: clamp(64px, 4.3vw, 76px);
    margin-top: 0;
    flex-shrink: 0;
    opacity: 0.95;
  }

  body.about-page .about-v2-pillar:nth-child(3) .about-v2-pillar-icon {
    width: clamp(64px, 4.3vw, 76px);
    height: clamp(64px, 4.3vw, 76px);
  }

  body.about-page .about-v2-pillar-icon .pillar-svg-img,
  body.about-page .about-v2-pillar-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }

  body.about-page .about-v2-pillar-heading {
    font-family: var(--font-heading);
    font-size: clamp(13.5px, 0.9vw, 15.5px);
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: normal;
    margin: 0 0 clamp(4px, 0.5vh, 8px) 0;
  }

  body.about-page .about-v2-pillar-desc {
    font-family: var(--font-body);
    font-size: clamp(13.5px, 0.95vw, 15.5px);
    line-height: 1.48;
    color: #c4c4c4;
    margin: 0;
  }

  body.about-page .about-v2-pillar-text-group {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.about-page .about-v2-pillar-divider {
    position: static;
    width: 1.5px;
    height: auto;
    align-self: stretch;
    min-height: clamp(52px, 6.5vh, 74px);
    margin: 0 clamp(2px, 0.3vw, 6px);
    background: #6a6b6c;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   DISCRETE SCROLL INDICATOR (About, Services, Projects)
   ========================================================================== */
.scroll-indicator {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 85;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  outline: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-indicator:focus-visible {
  outline: 2px solid #EF7E13;
  outline-offset: 3px;
}

/* Page-specific bottom positioning just above bottom bars / marquees */
body.services-page .scroll-indicator {
  bottom: calc(clamp(44px, 5.5vh, 57px) + 12px);
}

body.projects-page .scroll-indicator {
  bottom: calc(var(--projects-bar-h, 75px) + 16px);
}

body.about-page .scroll-indicator {
  bottom: clamp(68px, 8.5vh, 92px);
}

.scroll-indicator.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

.scroll-indicator__mouse {
  width: 18px;
  height: 28px;
  border: 1.5px solid rgba(239, 126, 19, 0.75);
  border-radius: 10px;
  background: rgba(23, 25, 25, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  padding-top: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.scroll-indicator__wheel {
  width: 2.5px;
  height: 5px;
  background: #EF7E13;
  border-radius: 2px;
  animation: scrollWheelPulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollWheelPulse {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    transform: translateY(7px);
  }
  100% {
    opacity: 0;
    transform: translateY(11px);
  }
}

.scroll-indicator__text {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}

.scroll-indicator:hover .scroll-indicator__mouse {
  border-color: #EF7E13;
  box-shadow: 0 4px 16px rgba(239, 126, 19, 0.4);
  transform: translateY(-2px);
}

.scroll-indicator:hover .scroll-indicator__text {
  color: #FFFFFF;
}

/* Show scroll indicator ONLY on PC (desktop >= 1025px) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .scroll-indicator {
    display: none !important;
  }
}