/* =========================================================================
   Shree Gayatri Insulation — style.css
   1 @font-face · 2 tokens · 3 reset · 4 base · 5 layout · 6 components
   7 header / footer · 8 sections · 9 utilities
   Every media query lives in responsive.css.
   ========================================================================= */

/* 1. FONTS --------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* size-matched fallbacks so the swap does not reflow lines */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* 2. TOKENS -------------------------------------------------------------- */
:root {
  --color-ink: #0D1411;
  --color-ink-deep: #0B110E;
  --color-ink-soft: #141E18;
  --color-ink-raised: #18231D;
  --color-ink-line: #1E2A23;
  --color-primary: #4E7A24;
  --color-primary-dark: #3F6A1B;
  --color-lime: #9CC447;
  --color-tint: #E6EEDA;
  --color-tint-text: #2F4A16;
  --color-text: #1A201C;
  --color-body: #4B524D;
  --color-muted: #5F665F;
  --color-faint: #8C948A;
  --color-on-dark: #B9C1B7;
  --color-on-dark-soft: #C9D0C7;
  --color-on-dark-bright: #E2E7DF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F4EF;
  --color-surface: #F1F2EC;
  --color-surface-soft: #F7F7F3;
  --color-border: #E4E6DE;
  --color-border-soft: #ECEDE6;
  --color-hot: #C2511F;
  --color-cold: #2C6E8F;
  --color-whatsapp: #1FA855;
  --color-whatsapp-dark: #188A46;
  --color-white: #FFFFFF;
  --color-error: #C2391F;
  --color-success: #2F7A2F;

  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.16);
  --scrim: rgba(9, 14, 11, 0.9);

  --font-heading: 'Inter Tight', 'Inter Tight Fallback', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem);   /* 40 → 72 */
  --fs-h1: clamp(2.375rem, 1.6rem + 3vw, 3.5rem);         /* 38 → 56 */
  --fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3rem);            /* 32 → 48 */
  --fs-h3: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);          /* 24 → 32 */
  --fs-h4: 1.375rem;                                       /* 22 */
  --fs-h5: 1.25rem;                                        /* 20 */
  --fs-h6: 1.0625rem;                                      /* 17 */
  --fs-lead: 1.125rem;                                     /* 18 */
  --fs-body: 1rem;                                         /* 16 — floor */
  --fs-small: 0.9375rem;                                   /* 15 */
  --fs-xsmall: 0.875rem;                                   /* 14 */
  --fs-micro: 0.8125rem;                                   /* 13 */

  --lh-tight: 1.06;
  --lh-heading: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 3.5rem;   /*  56 */
  --space-9: 4.5rem;   /*  72 */
  --space-10: 6rem;    /*  96 */
  --space-11: 7.5rem;  /* 120 */

  --section-padding: var(--space-11);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-full: 999px;

  --shadow-card: 0 18px 40px rgba(6, 10, 8, 0.10);
  --shadow-panel: 0 30px 80px rgba(6, 10, 8, 0.28), 0 2px 6px rgba(6, 10, 8, 0.08);
  --shadow-header: 0 12px 40px rgba(6, 10, 8, 0.12);

  --container: 1280px;
  --gutter: var(--space-6);
  --header-height: 92px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition: 0.4s var(--ease-smooth);
  --transition-fast: 0.25s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-out);
  --transition-lift: 0.55s var(--ease-out);
}

/* 3. RESET --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-5)); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus:not(:focus-visible) { outline: none; }

/* 4. BASE ---------------------------------------------------------------- */
body {
  min-width: 320px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: inherit;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h6); line-height: var(--lh-snug); letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
strong { font-weight: var(--fw-semibold); }
::selection { background: var(--color-lime); color: var(--color-ink); }
svg.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 5. LAYOUT -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-padding); background: var(--color-bg-alt); }
.section.white { background: var(--color-bg); }
.section.dark { background: var(--color-ink); color: var(--color-white); }
.section.flush-top { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-10);
  margin-bottom: var(--space-8);
}
.section-head .heading-group { flex: 1 1 520px; max-width: 720px; margin-bottom: 0; }
.section-head .section-aside { flex: 0 1 420px; color: var(--color-body); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 22px;
}
.card-grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.card-grid.large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--space-5); }
.card-grid.tight { gap: 14px; }

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-9);
}
.split > * { flex: 1 1 480px; min-width: 0; }
.split.align-start { align-items: flex-start; }
.split.stretch { align-items: stretch; }

/* 6. COMPONENTS ---------------------------------------------------------- */

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn svg.icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--transition); }
.btn:hover svg.icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }
.btn.small { min-height: 48px; padding: 0 22px; font-size: var(--fs-small); }
.btn.btn-block { display: flex; width: 100%; }

.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); }
.btn-dark { background: var(--color-ink); color: var(--color-white); }
.btn-dark:hover { background: var(--color-primary); color: var(--color-white); }
.btn-light { background: var(--color-white); color: var(--color-ink); }
.btn-light:hover { background: var(--color-lime); color: var(--color-ink); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: #D5D8CE; }
.btn-outline:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.btn-ghost { background: var(--glass-strong); color: var(--color-white); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); color: var(--color-white); }
.btn-whatsapp { background: var(--color-whatsapp); color: var(--color-white); }
.btn-whatsapp:hover { background: var(--color-whatsapp-dark); color: var(--color-white); }
.btn-whatsapp svg.icon, .btn-ghost.icon-left svg.icon { width: 20px; height: 20px; stroke-width: 1.8; }
.btn-whatsapp:hover svg.icon { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.text-link svg.icon { width: 16px; height: 16px; stroke-width: 2; color: var(--color-primary); transition: transform var(--transition); }
.text-link:hover svg.icon { transform: translateX(4px); }
.text-link.light { color: var(--color-white); }
.text-link.lime { color: var(--color-lime); }
.text-link.lime svg.icon { color: currentColor; }

/* round icon button */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-white);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.icon-button:hover { background: var(--color-primary); color: var(--color-white); }
.icon-button.light { background: var(--color-white); color: var(--color-ink); }
.icon-button.glass { background: var(--glass-strong); color: var(--color-white); }
.icon-button.raised { background: var(--color-ink-raised); color: var(--color-white); }
.icon-button.whatsapp { background: var(--color-whatsapp); }
.icon-button.soft { background: var(--color-surface); color: var(--color-primary); }
.icon-button svg.icon { width: 18px; height: 18px; }

/* --- Heading group --- */
.heading-group { margin-bottom: var(--space-8); }
.heading-group .heading { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.02em; }
.heading-group p { margin-top: 18px; max-width: 600px; color: var(--color-body); }
.heading-group .kicker { display: block; margin-bottom: var(--space-3); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-primary); }
.heading-group.small .heading { font-size: var(--fs-h3); }
.heading-group.small p { margin-top: var(--space-3); }
.heading-group.centered { text-align: center; }
.heading-group.centered p { margin-inline: auto; }
.heading-group.light .heading { color: var(--color-white); }
.heading-group.light p { color: var(--color-on-dark); }
.heading-group.light .kicker { color: var(--color-lime); }

/* --- Icon tile --- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-tint);
  color: var(--color-primary);
}
.icon-tile svg.icon { width: 24px; height: 24px; }
.icon-tile.small { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.icon-tile.small svg.icon { width: 20px; height: 20px; }
.icon-tile.large { width: 60px; height: 60px; border-radius: 18px; }
.icon-tile.large svg.icon { width: 28px; height: 28px; }
.icon-tile.dark { background: var(--color-ink-line); color: var(--color-lime); }
.icon-tile.solid { background: var(--color-primary); color: var(--color-white); }
.icon-tile.glass { background: var(--glass-strong); color: var(--color-white); }
.icon-tile.white { background: var(--color-white); color: var(--color-primary); }
.icon-tile.hot { background: var(--color-hot); color: var(--color-white); }
.icon-tile.cold { background: var(--color-cold); color: var(--color-white); }

/* --- Filter tabs --- */
.filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
}
.filter-tabs button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-semibold);
  transition: background-color var(--transition), color var(--transition);
}
.filter-tabs button:hover { background: var(--color-surface); }
.filter-tabs button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-white); }
.filter-tabs.dark { border-color: transparent; background: #1B2621; }
.filter-tabs.dark button { color: var(--color-on-dark-soft); }
.filter-tabs.dark button:hover { background: var(--color-ink-line); color: var(--color-white); }
.filter-tabs.dark button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-white); }
[data-tags].is-hidden { display: none; }

/* --- Breadcrumb --- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; list-style: none; font-size: var(--fs-xsmall); font-weight: var(--fw-medium); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--color-on-dark-soft); }
.breadcrumb li + li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb a { color: var(--color-on-dark-soft); }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb [aria-current="page"] { color: var(--color-white); }

/* --- Media (lazy image + skeleton) --- */
.media { position: relative; overflow: hidden; isolation: isolate; background: var(--color-surface); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
.media img { transition: opacity 0.6s ease, transform 0.9s var(--ease-out); }
.js .media img { opacity: 0; }
.media.loaded img { opacity: 1; }
.media.loaded::after { content: none; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* --- Stat list --- */
.stat-list { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); }
.stat-list .stat-value { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
.stat-list .stat-label { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--color-on-dark-soft); }
.stat-list.glass {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-top: var(--space-8);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-xl);
  background: var(--glass);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.stat-list.glass li { padding: 26px 28px; }
.stat-list.glass li + li { border-left: 1px solid var(--glass-line); }
.stat-list.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.stat-list.cards li { padding: 26px; border-radius: var(--radius-lg); background: var(--color-white); }
.stat-list.cards .stat-value { font-size: 2.25rem; }
.stat-list.cards .stat-label { color: var(--color-body); }

/* --- Feature item (icon + title + text) --- */
.feature-item { display: flex; gap: 18px; align-items: flex-start; }
.feature-item h3 { font-size: 1.1875rem; }
.feature-item p { margin-top: 4px; color: var(--color-muted); }
.feature-item.boxed { padding: 22px; border-radius: var(--radius-lg); background: var(--color-white); }
.feature-item.boxed h3 { font-size: var(--fs-h6); }
.feature-item.boxed p { font-size: var(--fs-small); color: var(--color-body); }
.feature-item.boxed.soft { background: var(--color-bg-alt); }
.feature-item.stacked { flex-direction: column; gap: 18px; padding: 24px 22px; border-radius: var(--radius-lg); background: var(--color-white); }
.feature-item.stacked h3 { font-size: 1rem; line-height: 1.4; }
.feature-item.stacked svg.icon { width: 26px; height: 26px; color: var(--color-primary); }
.feature-list { display: flex; flex-direction: column; gap: 22px; }

/* numbered card (how insulation works, team) */
.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 34px;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.info-card .card-number {
  position: absolute;
  top: 8px;
  right: 20px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 5.25rem;
  line-height: 1;
  color: var(--color-surface);
}
.info-card h3 { position: relative; margin-top: 40px; font-size: 1.3125rem; }
.info-card p { position: relative; margin-top: 10px; font-size: var(--fs-small); color: var(--color-body); }
.info-card .card-meta { margin-top: 14px; font-size: var(--fs-micro); color: var(--color-muted); }
.info-card .card-meta + h3 { margin-top: 4px; }
.info-card.accent-top { border-top: 4px solid var(--color-primary); }
.info-card.dark { background: var(--color-ink-soft); color: var(--color-white); }
.info-card.dark .card-number { top: 30px; font-size: 2.75rem; color: #22302A; }
.info-card.dark h3 { margin-top: 32px; font-size: var(--fs-h5); }
.info-card.dark p { color: var(--color-on-dark); }

/* --- Check list --- */
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg.icon { margin-top: 3px; color: var(--color-primary); }
.check-list.light svg.icon { color: var(--color-lime); }
.check-list.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; font-size: var(--fs-small); }
.check-list.columns svg.icon { width: 16px; height: 16px; stroke-width: 2.4; margin-top: 4px; }

.check-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; align-content: center; }
.check-tiles li { display: flex; align-items: center; gap: 16px; padding: 24px 22px; border-radius: var(--radius-lg); background: var(--color-bg-alt); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h6); }
.check-tiles .check-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); }
.check-tiles .check-dot svg.icon { width: 18px; height: 18px; stroke-width: 2.4; }

/* --- Service card --- */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.service-card .card-media { position: relative; height: 230px; overflow: visible; }
.service-card .card-media .media { height: 100%; }
.service-card:hover .card-media img { transform: scale(1.05); }
.service-card .card-badge {
  position: absolute;
  left: 20px;
  bottom: -26px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 4px solid var(--color-white);
  border-radius: 18px;
  background: var(--color-primary);
  color: var(--color-white);
}
.service-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 46px 24px 28px; }
.service-card h3 { font-size: var(--fs-h5); }
.service-card p { color: var(--color-body); font-size: var(--fs-small); }
.service-card .text-link { margin-top: auto; padding-top: 16px; }

/* --- Product card --- */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  background: var(--color-white);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.product-card .card-media { display: flex; align-items: center; justify-content: center; height: 236px; padding: 26px; background: var(--color-surface); }
.product-card .card-media img { width: auto; max-height: 184px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.9s var(--ease-out); }
.product-card:hover .card-media img { transform: scale(1.06); }
.product-card.photo .card-media { padding: 0; }
.product-card.photo .card-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.product-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; }
.product-card .card-category { font-size: var(--fs-micro); color: var(--color-muted); }
.product-card h3 { min-height: 48px; margin-bottom: 16px; font-size: 1.125rem; line-height: 1.33; }
.product-card .card-text { margin: -6px 0 16px; font-size: var(--fs-small); color: var(--color-body); }
.product-card .btn { margin-top: auto; min-height: 52px; font-size: var(--fs-small); }

/* dark "ask our desk" card that sits in a product grid */
.prompt-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
  min-height: 420px;
  padding: 32px 28px;
  border-radius: 22px;
  background: var(--color-ink);
  color: var(--color-white);
}
.prompt-card h3 { margin-top: 26px; font-size: var(--fs-h4); line-height: 1.3; }
.prompt-card p { margin-top: 10px; font-size: var(--fs-small); color: var(--color-on-dark); }
.prompt-card .btn { align-self: flex-start; }

/* horizontal link card (often ordered alongside) */
.link-card { display: flex; align-items: center; gap: 22px; padding: 18px; border-radius: 22px; background: var(--color-white); transition: transform var(--transition), box-shadow var(--transition); }
.link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: inherit; }
.link-card .card-media { flex: none; width: 120px; height: 120px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); }
.link-card .card-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.link-card.photo .card-media { padding: 0; overflow: hidden; }
.link-card.photo .card-media img { object-fit: cover; mix-blend-mode: normal; }
.link-card .card-body { display: flex; flex-direction: column; gap: 6px; }
.link-card h3 { font-size: var(--fs-h5); color: var(--color-ink); }
.link-card p { font-size: var(--fs-small); color: var(--color-body); }
.link-card .text-link { margin-top: 8px; font-size: var(--fs-small); color: var(--color-primary); }

/* tile link with icon (sectors, 404 quick links) */
.tile-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tile-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.tile-link .tile-title { flex: 1; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.tile-link > svg.icon { color: var(--color-faint); transition: transform var(--transition), color var(--transition); }
.tile-link:hover > svg.icon { color: var(--color-primary); transform: translate(2px, -2px); }
.tile-link.large { align-items: flex-start; gap: 18px; padding: 28px; border-radius: var(--radius-xl); }
.tile-link.large .tile-title { display: block; font-size: var(--fs-h5); color: var(--color-ink); }
.tile-link.large .tile-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tile-link.large p { font-size: var(--fs-small); color: var(--color-body); }

/* --- Logo grid / marquee --- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.logo-grid li { display: flex; align-items: center; justify-content: center; height: 96px; padding: 18px 22px; border-radius: var(--radius-lg); background: var(--color-white); transition: transform var(--transition), box-shadow var(--transition); }
.logo-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.logo-grid img { width: auto; max-height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.logo-grid.tall li { height: 110px; }
.logo-grid.soft li { background: var(--color-surface-soft); }
.logo-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo-grid.three li { height: 88px; padding: 14px 18px; }
.logo-grid.three img { max-height: 40px; }
.logo-grid li figcaption { display: none; }

.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee ul { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.logo-marquee:hover ul { animation-play-state: paused; }
.logo-marquee li { display: flex; align-items: center; justify-content: center; flex: none; width: 168px; height: 64px; }
.logo-marquee img { width: auto; max-width: 128px; max-height: 54px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- ISO rows --- */
.cert-list { display: flex; flex-direction: column; gap: 12px; }
.cert-list li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: var(--color-white); }
.cert-list .cert-name { flex: 1; font-weight: var(--fw-medium); }
.cert-list .cert-code { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-primary); }
.cert-card { display: flex; flex-direction: column; gap: 14px; padding: 34px 30px; border-radius: 26px; background: var(--color-white); }
.cert-card .cert-top { display: flex; align-items: center; justify-content: space-between; }
.cert-card .cert-code { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.375rem; color: var(--color-primary); }
.cert-card h3 { margin-top: 10px; font-size: 1.3125rem; }
.cert-card p { font-size: var(--fs-small); color: var(--color-body); }

/* --- Step cards (process) --- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }

/* homepage process line */
.process-line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.process-line::before { content: ""; position: absolute; top: 36px; left: 12%; right: 12%; border-top: 2px dashed #CBD2C2; }
.process-line li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.process-line .step-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 6px solid var(--color-white); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border); }
.process-line .step-icon svg.icon { width: 26px; height: 26px; }
.process-line h3 { margin-top: 8px; font-size: var(--fs-h5); }
.process-line p { max-width: 260px; font-size: var(--fs-small); color: var(--color-body); }

/* dark 1px reason grid */
.reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1px; border-radius: 26px; background: var(--color-ink-line); overflow: hidden; }
.reason-grid li { display: flex; flex-direction: column; gap: 26px; padding: 32px 28px 36px; background: var(--color-ink); transition: background-color var(--transition); }
.reason-grid li:hover { background: var(--color-ink-soft); }
.reason-grid .reason-top { display: flex; align-items: center; justify-content: space-between; color: var(--color-lime); }
.reason-grid .reason-top svg.icon { width: 28px; height: 28px; }
.reason-grid .reason-number { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-muted); }
.reason-grid h3 { font-size: 1.1875rem; line-height: 1.35; }

/* --- Project cards --- */
.project-card { display: flex; flex-direction: column; height: 100%; border-radius: 26px; background: var(--color-white); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.project-card .card-media { height: 260px; }
.project-card:hover .card-media img { transform: scale(1.05); }
.project-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; }
.project-card .card-category { font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); color: var(--color-primary); }
.project-card h3 { font-size: 1.3125rem; }
.project-card p { font-size: var(--fs-small); color: var(--color-body); }
.project-card .project-meta { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-border-soft); }

.project-meta { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.project-meta div { display: flex; align-items: center; gap: 12px; }
.project-meta svg.icon { color: var(--color-primary); }
.project-meta dt { font-size: var(--fs-micro); color: var(--color-muted); }
.project-meta dd { font-weight: var(--fw-semibold); }
.project-meta.light svg.icon { color: var(--color-lime); }
.project-meta.light dt { color: var(--color-on-dark); }
.project-meta.light dd { color: var(--color-white); }

.project-feature { display: flex; flex-wrap: wrap; border-radius: var(--radius-3xl); background: var(--color-ink); color: var(--color-white); overflow: hidden; }
.project-feature .card-media { flex: 1.3 1 560px; min-height: 520px; }
.project-feature .card-body { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; padding: 52px 48px; }
.project-feature .card-category { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); color: var(--color-lime); }
.project-feature h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.15; }
.project-feature p { font-size: 1.0625rem; color: var(--color-on-dark); }
.project-feature .project-meta { padding: 22px; border-radius: var(--radius-lg); background: var(--color-ink-soft); }
.project-feature .btn-row { margin-top: auto; }

/* image overlay tile (homepage projects, sectors, services bento) */
.overlay-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-ink); color: var(--color-white); isolation: isolate; }
.overlay-card:hover { color: var(--color-white); }
.overlay-card > .media, .overlay-card > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.overlay-card img { width: 100%; height: 100%; object-fit: cover; }
.overlay-card:hover img { transform: scale(1.05); }
.overlay-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 14, 11, 0.05) 30%, var(--scrim) 100%); }
.overlay-card .overlay-icon { position: absolute; top: 24px; left: 24px; }
.overlay-card .overlay-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 28px; }
.overlay-card .overlay-title { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.01em; }
.overlay-card .overlay-text { display: block; margin-top: 8px; max-width: 440px; font-size: var(--fs-small); color: #D5DBD3; }
.overlay-card .icon-button { transition: transform var(--transition), background-color var(--transition); }
.overlay-card:hover .icon-button { transform: rotate(-45deg); background: var(--color-lime); color: var(--color-ink); }
.overlay-card.square { aspect-ratio: 1 / 1; max-height: 640px; border-radius: var(--radius-2xl); }
.overlay-card.square .overlay-icon { top: 28px; left: 28px; }
.overlay-card.square .overlay-body { padding: 36px; flex-wrap: wrap; }
.overlay-card.square .overlay-title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem); }
.overlay-card.square .overlay-text { font-size: var(--fs-body); color: var(--color-on-dark-bright); }
.overlay-card.side::before { background: linear-gradient(90deg, var(--scrim) 0%, rgba(9, 14, 11, 0.3) 100%); }

/* --- Industry card --- */
.industry-card { display: flex; flex-direction: column; border-radius: var(--radius-2xl); background: var(--color-white); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.industry-card .card-media-wrap { position: relative; height: 300px; }
.industry-card .card-media-wrap .media { height: 100%; }
.industry-card .card-media-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(9, 14, 11, 0.7) 100%); pointer-events: none; }
.industry-card .icon-tile { position: absolute; top: 24px; left: 24px; z-index: 1; }
.industry-card .card-number { position: absolute; right: 24px; bottom: 18px; z-index: 1; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 3.375rem; line-height: 1; color: rgba(255, 255, 255, 0.85); }
.industry-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 30px; }
.industry-card h3 { font-size: var(--fs-h4); }
.industry-card p { color: var(--color-body); }
.industry-card .card-services { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--color-border-soft); font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); }
.industry-card .card-services li:first-child { font-weight: var(--fw-medium); color: var(--color-muted); }
.industry-card .card-services a { display: inline-flex; align-items: center; gap: 6px; }
.industry-card .card-services svg.icon { width: 15px; height: 15px; stroke-width: 2.4; color: var(--color-primary); }

/* --- Blog cards --- */
.blog-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-xl); background: var(--color-white); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.blog-card .card-media { height: 240px; }
.blog-card:hover .card-media img { transform: scale(1.05); }
.blog-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; }
.blog-card h3 { font-size: 1.3125rem; }
.blog-card h3 a:hover { color: var(--color-primary); }
.blog-card p { font-size: var(--fs-small); color: var(--color-body); }
.blog-card .text-link { margin-top: auto; padding-top: 12px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xsmall); }
.post-meta .post-category { font-weight: var(--fw-semibold); color: var(--color-primary); }
.post-meta time, .post-meta .post-length { color: var(--color-faint); }

.blog-feature { display: flex; flex-wrap: wrap; border-radius: var(--radius-3xl); background: var(--color-white); overflow: hidden; }
.blog-feature .card-media { flex: 1.2 1 520px; min-height: 460px; }
.blog-feature .card-body { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; padding: 52px 48px; }
.blog-feature h2 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.15; }
.blog-feature p { font-size: 1.0625rem; color: var(--color-body); }
.author-row { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--color-border-soft); }
.author-row .author-name { flex: 1; display: flex; flex-direction: column; font-weight: var(--fw-semibold); }
.author-row .author-name span { font-size: var(--fs-xsmall); font-weight: var(--fw-regular); color: var(--color-muted); }
.author-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-ink); }
.author-avatar img { width: 34px; }
.author-avatar.glass { background: var(--glass-strong); }

/* --- Office card --- */
.office-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; border-radius: var(--radius-xl); background: var(--color-white); }
.office-card .office-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-xsmall); color: var(--color-muted); }
.office-card .office-top svg.icon { color: var(--color-primary); }
.office-card h3 { font-size: 1.625rem; line-height: 1.1; }
.office-card address { font-style: normal; font-size: var(--fs-small); color: var(--color-body); }
.office-card .office-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: auto; font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); }
.office-card .office-actions a { display: inline-flex; align-items: center; gap: 8px; }
.office-card .office-actions svg.icon { width: 16px; height: 16px; color: var(--color-primary); }
.office-card.map { padding: 0; overflow: hidden; background: var(--color-bg-alt); }
.office-card.map .office-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.office-card.map h3 { font-size: 1.875rem; line-height: 1; }
.office-card .office-phones { display: flex; flex-direction: column; gap: 6px; font-weight: var(--fw-semibold); }
.office-card .office-phones a { display: inline-flex; align-items: center; gap: 10px; }
.office-card .office-phones svg.icon { width: 16px; height: 16px; color: var(--color-primary); }
.office-card .office-buttons { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.map-art { position: relative; height: 170px; overflow: hidden; background: var(--color-tint); }
.map-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#D5E2C3 1px, transparent 1px), linear-gradient(90deg, #D5E2C3 1px, transparent 1px); background-size: 28px 28px; }
.map-art::after { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 14px; background: var(--color-white); transform: rotate(-8deg); }
.map-art .map-road { position: absolute; left: 38%; top: -10%; bottom: -10%; width: 10px; background: var(--color-white); transform: rotate(12deg); }
.map-art .map-pin { position: absolute; left: 50%; top: 50%; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); box-shadow: 0 0 0 10px rgba(78, 122, 36, 0.18); transform: translate(-50%, -60%); animation: pin-pulse 2.4s ease-out infinite; }
.map-art .map-pin svg.icon { width: 26px; height: 26px; }
@keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(78, 122, 36, 0.35); } 100% { box-shadow: 0 0 0 22px rgba(78, 122, 36, 0); } }

/* --- Contact tile --- */
.contact-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.contact-tile { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-card); transition: transform var(--transition); }
.contact-tile:hover { transform: translateY(-4px); color: inherit; }
.contact-tile .tile-label { display: block; font-size: var(--fs-xsmall); color: var(--color-muted); }
.contact-tile .tile-value { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h6); word-break: break-word; }
.contact-tile.whatsapp { background: var(--color-whatsapp); color: var(--color-white); }
.contact-tile.whatsapp:hover { color: var(--color-white); }
.contact-tile.whatsapp .tile-label { color: #E6F7EC; }
.contact-list { display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-small); }
.contact-list a, .contact-list li > span { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.1); }
.contact-list svg.icon { color: var(--color-lime); }
.contact-list a.whatsapp { background: var(--color-whatsapp); }
.contact-list a.whatsapp svg.icon { color: var(--color-white); }
.contact-list a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.16); }
.contact-list a.whatsapp:hover { background: var(--color-whatsapp-dark); }

/* --- Forms --- */
.site-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.site-form .form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.site-form .form-group.full, .site-form .form-actions, .site-form .file-drop { grid-column: 1 / -1; }
.site-form label { font-size: var(--fs-xsmall); font-weight: var(--fw-medium); color: var(--color-body); }
.site-form .required { color: var(--color-primary); }
.site-form input[type="text"],
.site-form input[type="email"],
.site-form input[type="tel"],
.site-form input[type="date"],
.site-form input[type="time"],
.site-form input[type="search"],
.site-form input[type="number"],
.site-form select,
.site-form textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #DDE0D6;
  border-radius: 14px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--fs-body);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.site-form select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F665F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}
.site-form textarea { min-height: 140px; padding: 14px 16px; resize: vertical; }
.site-form :is(input, select, textarea):focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(78, 122, 36, 0.18); }
.site-form :is(input, textarea)::placeholder { color: var(--color-faint); }
.site-form .form-group.has-error :is(input, select, textarea) { border-color: var(--color-error); }
.site-form .form-error { font-size: var(--fs-micro); color: var(--color-error); }
.site-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-form .form-note { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xsmall); color: var(--color-muted); }
.site-form .form-note svg.icon { color: var(--color-primary); }
.site-form .wpcf7-form-control-wrap { display: block; }
.file-drop { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px dashed #C9CEC0; border-radius: 18px; background: #FAFAF7; cursor: pointer; transition: border-color var(--transition), background-color var(--transition); }
.file-drop:hover { border-color: var(--color-primary); background: var(--color-white); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop .file-text { flex: 1; display: flex; flex-direction: column; font-weight: var(--fw-semibold); color: var(--color-text); }
.file-drop .file-text small { font-size: var(--fs-xsmall); font-weight: var(--fw-regular); color: var(--color-muted); }
.file-drop .file-browse { font-weight: var(--fw-semibold); color: var(--color-primary); }

.site-form.dark label { color: var(--color-on-dark-soft); }
.site-form.dark :is(input, select, textarea) { border-color: var(--glass-line); background-color: var(--glass); color: var(--color-white); }
.site-form.dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D0C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.site-form.dark select option { color: var(--color-text); }
.site-form.dark :is(input, textarea)::placeholder { color: var(--color-faint); }
.site-form.dark .form-note { color: var(--color-on-dark-soft); }
.site-form.dark .form-note svg.icon { color: var(--color-lime); }
.site-form.dark input[type="date"], .site-form.dark input[type="time"] { color-scheme: dark; }

.form-card { padding: 48px; border-radius: var(--radius-3xl); background: var(--color-white); }
.form-card .heading-group { margin-bottom: var(--space-6); }
.form-card.dark { background: var(--color-ink); color: var(--color-white); }

.inline-form { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-form input { flex: 1 1 240px; min-height: 58px; padding: 0 22px; border: 1px solid var(--glass-line); border-radius: var(--radius-full); background: var(--glass); color: var(--color-white); font-size: var(--fs-body); }
.inline-form input::placeholder { color: var(--color-faint); }
.inline-form input:focus { outline: none; border-color: var(--color-lime); }
.inline-form .btn { min-height: 58px; }

/* --- Sidebar --- */
.sidebar { display: flex; flex-direction: column; gap: 18px; }
.sidebar-card { padding: 24px; border-radius: var(--radius-xl); background: var(--color-white); }
.sidebar-card .sidebar-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h6); }
.sidebar-card.dark { padding: 28px; background: var(--color-ink); color: var(--color-white); }
.sidebar-card.dark .sidebar-title { font-size: 1.375rem; line-height: 1.25; }
.sidebar-card.dark p { margin-top: 8px; font-size: var(--fs-small); color: var(--color-on-dark); }
.sidebar-card.dark .btn-row { flex-direction: column; margin-top: 20px; gap: 10px; }
.sidebar-card.dark .btn-row .btn { width: 100%; }
.side-nav { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: var(--fs-small); font-weight: var(--fw-medium); transition: background-color var(--transition), color var(--transition); }
.side-nav a:hover { background: var(--color-bg-alt); color: var(--color-ink); }
.side-nav a span { flex: 1; }
.side-nav svg.icon { width: 18px; height: 18px; color: var(--color-primary); }
.side-nav svg.icon:last-child { width: 16px; height: 16px; color: var(--color-faint); }
.side-nav a[aria-current="page"] { background: var(--color-ink); color: var(--color-white); }
.side-nav a[aria-current="page"] svg.icon:first-child { color: var(--color-lime); }
.download-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.download-list a { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--color-bg-alt); transition: background-color var(--transition); }
.download-list a:hover { background: var(--color-tint); color: inherit; }
.download-list .download-text { flex: 1; display: flex; flex-direction: column; font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.download-list .download-text small { font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--color-muted); }
.toc-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 0; list-style: none; counter-reset: toc; }
.toc-list a { display: flex; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--color-body); counter-increment: toc; transition: background-color var(--transition), color var(--transition); }
.toc-list a::before { content: "0" counter(toc); font-weight: var(--fw-semibold); color: var(--color-primary); }
.toc-list a:hover, .toc-list a.active { background: var(--color-surface); color: var(--color-ink); font-weight: var(--fw-semibold); }

/* --- Product group (service detail) --- */
.stack { display: flex; flex-direction: column; gap: 16px; }

/* --- Spec table --- */
.spec-table { padding: 8px 26px; border-radius: 22px; background: var(--color-white); }
.spec-table div { display: flex; gap: 20px; padding: 14px 0; font-size: var(--fs-small); }
.spec-table div + div { border-top: 1px solid var(--color-border-soft); }
.spec-table dt { flex: 0 0 170px; color: var(--color-muted); }
.spec-table dd { flex: 1; font-weight: var(--fw-medium); }

.note-box { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--color-tint); color: var(--color-tint-text); font-size: var(--fs-small); }
.note-box svg.icon { width: 22px; height: 22px; color: var(--color-primary); }

/* --- Gallery --- */
.gallery .gallery-main { display: flex; align-items: center; justify-content: center; height: 560px; padding: 48px; border-radius: var(--radius-2xl); background: var(--color-white); }
.gallery .gallery-main img { width: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 0.35s ease; }
.gallery .gallery-main img.is-swapping { opacity: 0; }
.gallery .gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.gallery .gallery-thumbs button { display: flex; align-items: center; justify-content: center; height: 110px; padding: 12px; border: 2px solid transparent; border-radius: 18px; background: var(--color-white); transition: border-color var(--transition); }
.gallery .gallery-thumbs button:hover { border-color: var(--color-border); }
.gallery .gallery-thumbs button[aria-pressed="true"] { border-color: var(--color-primary); }
.gallery .gallery-thumbs img { width: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* --- Sticky sub navigation (category page) --- */
.sub-nav { position: sticky; top: var(--header-height); z-index: 20; border-bottom: 1px solid var(--color-border); background: rgba(245, 244, 239, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sub-nav ul { display: flex; gap: 8px; padding-block: 16px; overflow-x: auto; scrollbar-width: none; }
.sub-nav ul::-webkit-scrollbar { display: none; }
.sub-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: var(--radius-full); background: var(--color-white); font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; transition: background-color var(--transition), color var(--transition); }
.sub-nav a span { font-weight: var(--fw-medium); color: var(--color-faint); }
.sub-nav a:hover, .sub-nav a.active { background: var(--color-ink); color: var(--color-white); }
.sub-nav a:hover span, .sub-nav a.active span { color: var(--color-lime); }

/* --- Group head (title + link) --- */
.group-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: 28px; }
.group-head h2 { font-size: var(--fs-h3); }
.group-head p { margin-top: 8px; color: var(--color-body); }

/* --- Quote / testimonial --- */
.quote-card { padding: 48px; border-radius: var(--radius-2xl); background: var(--color-white); }
.quote-card > svg.icon { width: 40px; height: 40px; color: var(--color-primary); }
.quote-card .rating { display: flex; gap: 4px; margin-top: 20px; color: #E2A63B; }
.quote-card .rating svg.icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.quote-card blockquote { margin-top: 18px; font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.4; letter-spacing: -0.01em; }
.quote-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.quote-card figcaption > span:last-child { display: flex; flex-direction: column; font-weight: var(--fw-semibold); }
.quote-card figcaption small { font-size: var(--fs-xsmall); font-weight: var(--fw-regular); color: var(--color-muted); }
.initials { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-tint); color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.dark-quote { padding: 48px; border-radius: var(--radius-2xl); background: var(--color-ink-soft); }
.dark-quote svg.icon { width: 36px; height: 36px; color: var(--color-lime); }
.dark-quote p { margin-top: 18px; font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.3; }
.dark-quote cite { display: block; margin-top: 18px; font-style: normal; color: var(--color-faint); }

/* --- Content area (CMS body) --- */
.content-area { max-width: 760px; }
.content-area > * + * { margin-top: 20px; }
.content-area > :first-child { font-size: 1.3125rem; line-height: 1.7; color: var(--color-text); }
.content-area h2 { margin-top: 52px; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; scroll-margin-top: calc(var(--header-height) + 24px); }
.content-area h3 { margin-top: 36px; font-size: var(--fs-h5); }
.content-area p, .content-area li { font-size: var(--fs-lead); line-height: 1.75; color: #2D332F; }
.content-area a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.content-area ul:not([class]) { padding-left: 1.25em; list-style: disc; }
.content-area ol:not([class]) { padding-left: 1.25em; }
.content-area ul:not([class]) li + li, .content-area ol:not([class]) li + li { margin-top: 8px; }
.content-area img, .content-area figure img { width: 100%; border-radius: var(--radius-xl); }
.content-area figure { margin-top: 32px; }
.content-area figcaption { margin-top: 10px; font-size: var(--fs-xsmall); color: var(--color-muted); }
.content-area blockquote { margin-top: 40px; padding: 34px 36px; border-radius: var(--radius-xl); background: var(--color-ink); color: var(--color-white); }
.content-area blockquote::before { content: ""; display: block; width: 30px; height: 30px; background: var(--color-lime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.content-area blockquote p { margin-top: 14px; font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.5rem; line-height: 1.4; color: var(--color-white); }
.content-area table { width: 100%; margin-top: 30px; border-collapse: separate; border-spacing: 0; border-radius: 22px; background: var(--color-white); overflow: hidden; font-size: var(--fs-small); }
.content-area th { padding: 16px 24px; background: var(--color-ink); color: var(--color-white); font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); text-align: left; }
.content-area td { padding: 18px 24px; border-top: 1px solid var(--color-border-soft); color: var(--color-body); vertical-align: middle; }
.content-area td:first-child { font-weight: var(--fw-semibold); color: var(--color-text); }
.content-area td strong { font-family: var(--font-heading); font-size: 1.125rem; color: var(--color-hot); }
.table-scroll { overflow-x: auto; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--color-border); font-weight: var(--fw-semibold); }
.share-row ul { display: flex; gap: 10px; }

/* --- Comments --- */
.comment-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.comment-item { display: flex; gap: 18px; padding: 24px; border-radius: 22px; background: var(--color-bg-alt); }
.comment-item .comment-body { flex: 1; }
.comment-item .comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.comment-item .comment-head strong { font-weight: var(--fw-semibold); }
.comment-item .comment-head time { font-size: var(--fs-xsmall); color: var(--color-faint); }
.comment-item p { margin-top: 6px; color: #2D332F; }
.comment-item .reply-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); color: var(--color-primary); }
.comment-item .reply-link svg.icon { width: 15px; height: 15px; stroke-width: 2; }

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background-color var(--transition);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-ink); }
.back-to-top svg.icon { transform: rotate(-90deg); }

/* 7. HEADER + NAVIGATION ------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 999; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-white); font-weight: var(--fw-semibold); }
.skip-link:focus { left: 16px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition);
}
.site-header .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; height: 100%; }
.site-header .site-logo { position: relative; flex: none; display: block; }
.site-header .site-logo img { width: auto; height: 56px; transition: opacity var(--transition); }
.site-header .site-logo .logo-dark { position: absolute; inset: 0 auto auto 0; opacity: 0; }
.site-header .header-actions { display: flex; align-items: center; gap: 12px; }
.site-header .header-call { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.12); color: currentColor; transition: background-color var(--transition), color var(--transition); }
.site-header .header-call:hover { background: rgba(255, 255, 255, 0.22); color: currentColor; }
.site-header .header-call svg.icon { width: 18px; height: 18px; }
.site-header .header-cta { min-height: 46px; padding: 0 22px; font-size: var(--fs-small); }

/* scrolled state: solid white bar, dark logo */
.site-header.scrolled { border-bottom-color: transparent; background: var(--color-white); box-shadow: var(--shadow-header); color: var(--color-ink); }
.site-header.scrolled .site-logo .logo-light { opacity: 0; }
.site-header.scrolled .site-logo .logo-dark { opacity: 1; }
.site-header.scrolled .header-call { background: var(--color-surface); color: var(--color-primary); }
.site-header.scrolled .header-cta { background: var(--color-ink); color: var(--color-white); }
.site-header.scrolled .header-cta:hover { background: var(--color-primary); }
.site-header.hidden { transform: translateY(-100%); }

/* the one navigation list */
.site-header .main-nav { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.site-header .main-nav ul { margin: 0; padding: 0; list-style: none; }
.site-header .main-nav .menu { display: flex; align-items: center; gap: 2px; }
.site-header .main-nav .menu-item { position: static; }
.site-header .main-nav .menu a { display: inline-flex; align-items: center; gap: 6px; }
.site-header .main-nav .menu > li > a,
.site-header .main-nav .menu-item.menu-item-top > a { padding: 10px 14px; border-radius: var(--radius-full); color: inherit; transition: background-color var(--transition), color var(--transition); }
.site-header .main-nav .menu-item.menu-item-top > a:hover,
.site-header .main-nav .menu-item.menu-item-top:hover > a { background: rgba(255, 255, 255, 0.1); color: inherit; }
.site-header .main-nav .menu-item.menu-item-top > a[aria-current="page"],
.site-header .main-nav .current-menu-item.menu-item-top > a,
.site-header .main-nav .current-menu-ancestor.menu-item-top > a,
.site-header .main-nav .current_page_item.menu-item-top > a { background: rgba(255, 255, 255, 0.14); }
.site-header.scrolled .main-nav .menu-item.menu-item-top > a:hover,
.site-header.scrolled .main-nav .menu-item.menu-item-top:hover > a { background: var(--color-surface); }
.site-header.scrolled .main-nav .menu-item.menu-item-top > a[aria-current="page"],
.site-header.scrolled .main-nav .current-menu-item.menu-item-top > a,
.site-header.scrolled .main-nav .current-menu-ancestor.menu-item-top > a { background: var(--color-tint); color: var(--color-primary-dark); }
.site-header .main-nav .menu-item-has-children.menu-item-top > a::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.site-header .main-nav .menu-item-has-children.menu-item-top:hover > a::after,
.site-header .main-nav .menu-item-has-children.menu-item-top:focus-within > a::after { transform: rotate(180deg); }
.site-header .main-nav .menu-item.small-drop { position: relative; }

/* dropdown panel */
.site-header .main-nav .mega-panel {
  position: absolute;
  top: 100%;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 40;
  padding-top: 8px;
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.25s ease 0.08s, transform 0.45s var(--ease-out) 0.08s, visibility 0s linear 0.35s;
}
.site-header .main-nav .small-drop .mega-panel { left: -16px; right: auto; width: 380px; }
.site-header .main-nav .menu-item-has-children.menu-item-top:hover > .mega-panel,
.site-header .main-nav .menu-item-has-children.menu-item-top:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.5s var(--ease-out), visibility 0s; }
.site-header .main-nav .mega-inner { display: flex; flex-wrap: wrap; border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-panel); overflow: hidden; }
.site-header .main-nav .small-drop .mega-inner { flex-direction: column; padding: 10px; }

/* sub-menu items */
.site-header .main-nav .sub-menu { flex: 1 1 560px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; padding: 22px; }
.site-header .main-nav .small-drop .sub-menu { display: flex; flex-direction: column; padding: 0; }
.site-header .main-nav .sub-menu a { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: var(--radius-md); color: var(--color-ink); transition: background-color var(--transition-fast); }
.site-header .main-nav .sub-menu a:hover { background: var(--color-bg-alt); color: var(--color-ink); }
.site-header .main-nav .sub-menu .menu-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-primary); transition: background-color var(--transition), color var(--transition); }
.site-header .main-nav .sub-menu a:hover .menu-icon { background: var(--color-primary); color: var(--color-white); }
.site-header .main-nav .sub-menu .menu-text { display: flex; flex-direction: column; gap: 2px; }
.site-header .main-nav .sub-menu .menu-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.site-header .main-nav .sub-menu .menu-desc { font-size: var(--fs-micro); font-weight: var(--fw-regular); line-height: 1.5; color: var(--color-muted); }

/* products mega: grouped columns with thumbnails */
.site-header .main-nav .mega-products .sub-menu { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 26px 22px; }
.site-header .main-nav .mega-products .menu-group > span { display: block; padding: 0 10px 8px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
.site-header .main-nav .mega-products .menu-group ul { display: flex; flex-direction: column; gap: 2px; }
.site-header .main-nav .mega-products .menu-group a { align-items: center; gap: 12px; padding: 8px 10px; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.site-header .main-nav .menu-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
.site-header .main-nav .menu-thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; mix-blend-mode: multiply; }
.site-header .main-nav .menu-thumb.photo img { padding: 0; object-fit: cover; mix-blend-mode: normal; }

/* feature card + strip inside a mega panel */
.site-header .mega-feature { flex: 0 1 360px; padding: 12px; }
.site-header .mega-feature .feature-photo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 330px; padding: 26px; border-radius: 18px; overflow: hidden; color: var(--color-white); isolation: isolate; }
.site-header .mega-feature .feature-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.site-header .mega-feature .feature-photo:hover img { transform: scale(1.05); }
.site-header .mega-feature .feature-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 14, 11, 0.05) 0%, rgba(9, 14, 11, 0.85) 100%); }
.site-header .mega-feature .feature-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.375rem; line-height: 1.25; }
.site-header .mega-feature .feature-text { margin-top: 8px; font-size: var(--fs-xsmall); color: #D5DBD3; }
.site-header .mega-feature .btn { align-self: flex-start; margin-top: 18px; min-height: 44px; padding: 0 18px; font-size: var(--fs-xsmall); }
.site-header .mega-feature .feature-product { display: flex; flex-direction: column; height: 100%; padding: 22px; border-radius: 18px; background: var(--color-surface); }
.site-header .mega-feature .feature-product .feature-label { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-primary); }
.site-header .mega-feature .feature-product .feature-image { display: flex; align-items: center; justify-content: center; height: 170px; }
.site-header .mega-feature .feature-product .feature-image img { max-height: 150px; width: auto; mix-blend-mode: multiply; }
.site-header .mega-feature .feature-product .feature-title { font-size: 1.1875rem; color: var(--color-ink); }
.site-header .mega-feature .feature-product .feature-text { color: var(--color-body); font-size: var(--fs-xsmall); }
.site-header .mega-feature .feature-product .btn { align-self: stretch; }
.site-header .mega-strip { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px 32px; background: var(--color-bg-alt); font-size: var(--fs-xsmall); color: var(--color-body); }
.site-header .mega-strip .strip-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: var(--fw-semibold); color: var(--color-ink); }
.site-header .mega-strip a { display: inline-flex; align-items: center; gap: 8px; }
.site-header .mega-strip svg.icon { width: 16px; height: 16px; color: var(--color-primary); }
.site-header .mega-strip .strip-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.site-header .mega-strip .strip-brands img { width: auto; height: 26px; max-width: 92px; object-fit: contain; mix-blend-mode: multiply; }
.site-header .mega-profile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 4px 4px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-white); }
.site-header .mega-profile:hover { color: var(--color-white); background: var(--color-ink-soft); }
.site-header .mega-profile .profile-text { display: flex; flex-direction: column; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.site-header .mega-profile small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-micro); color: var(--color-on-dark); }
.site-header .mega-profile .profile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-lime); color: var(--color-ink); }

/* drawer-only extras (hidden on desktop) */
.site-header .nav-drawer-head, .site-header .nav-drawer-foot, .site-header .submenu-toggle { display: none; }
.nav-toggle { display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.12); color: currentColor; }
.site-header.scrolled .nav-toggle { background: var(--color-surface); }
.nav-toggle span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(6, 10, 8, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* --- CTA band + footer (one dark section) --- */
.cta-band { position: relative; overflow: hidden; background: var(--color-ink-deep); color: var(--color-white); isolation: isolate; }
.cta-band .cta-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 17, 14, 0.92) 0%, rgba(11, 17, 14, 0.55) 60%, rgba(11, 17, 14, 0.35) 100%), linear-gradient(180deg, rgba(11, 17, 14, 0) 35%, var(--color-ink-deep) 100%); }
.cta-band .cta-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 36px 64px; padding-top: 128px; padding-bottom: 88px; }
.cta-band .cta-copy { flex: 1 1 560px; max-width: 760px; }
.cta-band h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.cta-band p { margin-top: 20px; max-width: 520px; font-size: 1.0625rem; color: var(--color-on-dark-soft); }
.cta-band.with-form .cta-inner { align-items: flex-start; gap: 48px 72px; padding-top: 120px; }
.cta-band.with-form .cta-copy { flex: 1 1 400px; max-width: 520px; }
.cta-band.with-form .site-form { flex: 1.3 1 520px; }
.cta-band .cta-links { margin-top: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-weight: var(--fw-medium); }
.cta-band .cta-links a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cta-band .cta-links a:hover { color: var(--color-lime); }
.cta-band .cta-links svg.icon { color: var(--color-lime); }

.site-footer { background: var(--color-ink-deep); color: var(--color-on-dark); font-size: var(--fs-small); overflow: hidden; }
.site-footer .footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: 48px 0 40px; border-top: 1px solid var(--color-ink-line); border-bottom: 1px solid var(--color-ink-line); }
.site-footer.standalone .footer-top { border-top: 0; padding-top: 72px; }
.site-footer .footer-logo img { width: auto; height: 62px; }
.site-footer .footer-nav ul { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; list-style: none; font-weight: var(--fw-medium); }
.site-footer .footer-nav a { color: var(--color-on-dark-bright); }
.site-footer .footer-nav a:hover { color: var(--color-lime); }
.site-footer .footer-social { display: flex; gap: 10px; }
.site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-ink-raised); color: var(--color-white); transition: background-color var(--transition), transform var(--transition); }
.site-footer .footer-social a:hover { background: var(--color-primary); transform: translateY(-2px); }
.site-footer .footer-social a.whatsapp { background: var(--color-whatsapp); }
.site-footer .footer-social svg.icon { width: 18px; height: 18px; }
.site-footer .footer-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 48px; border-bottom: 1px solid var(--color-ink-line); }
.site-footer .footer-office { display: flex; flex-direction: column; gap: 14px; padding: 32px 0; }
.site-footer .footer-office .office-label { font-size: var(--fs-xsmall); color: var(--color-faint); }
.site-footer .footer-office .office-city { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.875rem; line-height: 1.1; color: var(--color-white); }
.site-footer .footer-office address, .site-footer .footer-office .office-line { display: flex; gap: 12px; font-style: normal; line-height: 1.6; }
.site-footer .footer-office svg.icon { width: 18px; height: 18px; margin-top: 3px; color: var(--color-lime); }
.site-footer .footer-office .office-phone { display: flex; align-items: center; gap: 12px; font-weight: var(--fw-semibold); color: var(--color-white); }
.site-footer .footer-office .office-phone svg.icon { margin-top: 0; }
.site-footer .footer-office .office-phone:hover { color: var(--color-lime); }
.site-footer .footer-office .text-link { font-size: var(--fs-xsmall); }
.site-footer .footer-office .btn { align-self: flex-start; margin-top: 4px; min-height: 48px; padding: 0 22px; font-size: var(--fs-small); }
.site-footer .footer-wordmark { margin-top: 36px; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: clamp(3.5rem, 11.5vw, 10.5rem); line-height: 0.9; letter-spacing: -0.04em; color: #141E18; white-space: nowrap; text-align: center; user-select: none; }
.site-footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 28px 0 34px; font-size: var(--fs-xsmall); color: var(--color-faint); }
.site-footer .footer-legal { display: flex; flex-direction: column; gap: 4px; }
.site-footer .footer-iso { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.site-footer .footer-iso li { padding: 6px 12px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-full); }
.site-footer .footer-credit { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.site-footer .footer-credit .credit-links { display: flex; gap: 22px; }
.site-footer .footer-credit a:hover { color: var(--color-lime); }
.site-footer .footer-credit .credit-studio { font-weight: var(--fw-semibold); color: var(--color-white); }

/* 8. SECTIONS ------------------------------------------------------------ */

/* --- Page hero (inner pages) --- */
.page-hero { position: relative; display: flex; align-items: center; min-height: 620px; padding: calc(var(--header-height) + 88px) 0 96px; background: var(--color-ink); color: var(--color-white); overflow: hidden; isolation: isolate; }
.page-hero .hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 14, 11, 0.9) 0%, rgba(9, 14, 11, 0.66) 50%, rgba(9, 14, 11, 0.3) 100%); }
.page-hero .container { width: 100%; }
.page-hero h1 { margin-top: 26px; max-width: 860px; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.page-hero .hero-lead { margin-top: 22px; max-width: 640px; font-size: var(--fs-lead); color: #D5DBD3; }
.page-hero .btn-row { margin-top: 38px; }
.page-hero .hero-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; margin-top: 40px; }
.page-hero .hero-note { display: inline-flex; align-items: center; gap: 12px; color: #D5DBD3; }
.page-hero .hero-note svg.icon { width: 22px; height: 22px; color: var(--color-lime); }
.page-hero .hero-count { display: inline-flex; align-items: baseline; gap: 10px; color: #D5DBD3; }
.page-hero .hero-count strong { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 2.5rem; line-height: 1; color: var(--color-white); }
.page-hero .stat-list:not(.glass) { margin-top: 40px; }
.page-hero.tall { min-height: 760px; padding-top: calc(var(--header-height) + 72px); padding-bottom: 72px; }
.page-hero.short { min-height: 0; padding: calc(var(--header-height) + 28px) 0 28px; }
.page-hero.short::before { content: none; }
.page-hero.overlap { padding-bottom: 150px; }
.page-hero .post-author { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; font-size: var(--fs-small); color: #D5DBD3; }
.page-hero .post-author .author-who { display: inline-flex; align-items: center; gap: 12px; }
.page-hero .post-author .author-who > span:last-child { display: flex; flex-direction: column; }
.page-hero .post-author strong { color: var(--color-white); }
.page-hero .post-author small { font-size: var(--fs-xsmall); }
.page-hero .post-author .meta-item { display: inline-flex; align-items: center; gap: 8px; }
.page-hero .post-author svg.icon { width: 18px; height: 18px; color: var(--color-lime); }

/* --- Home hero slider --- */
.home-hero { position: relative; display: flex; flex-direction: column; min-height: max(780px, 100svh); padding-top: var(--header-height); background: var(--color-ink); color: var(--color-white); overflow: hidden; isolation: isolate; }
.home-hero .hero-slides { position: absolute; inset: 0; z-index: -2; }
.home-hero .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); backface-visibility: hidden; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), transform 7s linear; }
.home-hero .hero-slides img.active { opacity: 1; transform: scale(1.04); }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 14, 11, 0.82) 0%, rgba(9, 14, 11, 0.55) 50%, rgba(9, 14, 11, 0.15) 100%); }
.home-hero .hero-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px 64px; padding-top: 64px; padding-bottom: 64px; }
.home-hero .hero-content { flex: 1 1 560px; max-width: 700px; }
.home-hero .hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); color: var(--color-lime); }
.home-hero .hero-kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.home-hero h1 { margin-top: 20px; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.home-hero .hero-text { margin-top: 22px; max-width: 560px; font-size: var(--fs-lead); color: #D5DBD3; }
.home-hero .hero-copy { transition: opacity 0.45s var(--ease-smooth), transform 0.6s var(--ease-out); }
.home-hero .hero-copy.is-changing { opacity: 0; transform: translateY(12px); }
.home-hero .btn-row { margin-top: 36px; }
.home-hero .hero-form { flex: 0 1 400px; display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--glass-line); border-radius: var(--radius-xl); background: rgba(13, 20, 17, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.home-hero .hero-form h2 { font-size: var(--fs-h5); }
.home-hero .hero-form .form-intro p { margin-top: 4px; font-size: var(--fs-xsmall); color: var(--color-on-dark-soft); }
.home-hero .hero-form .site-form { grid-template-columns: 1fr; gap: 14px; }
.home-hero .hero-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 36px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.home-hero .slide-status { display: flex; align-items: center; gap: 18px; }
.home-hero .slide-counter { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.home-hero .slide-dots { display: flex; gap: 8px; }
.home-hero .slide-dots button { display: flex; align-items: center; height: 24px; padding: 0; border: 0; background: transparent; }
.home-hero .slide-dots button span { display: block; width: 32px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); transition: width var(--transition), background-color var(--transition); }
.home-hero .slide-dots button[aria-pressed="true"] span { width: 64px; background: var(--color-white); }
.home-hero .slide-arrows { display: flex; gap: 10px; }
.home-hero .slide-arrows .icon-button { border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; }
.home-hero .slide-arrows .icon-button:hover { background: var(--color-white); color: var(--color-ink); }
.home-hero .slide-arrows .prev svg.icon { transform: rotate(180deg); }

/* --- Client strip --- */
.client-strip { border-bottom: 1px solid var(--color-border-soft); background: var(--color-bg-alt); }
.client-strip .container { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding-block: 40px; }
.client-strip .strip-copy { flex: 0 0 220px; }
.client-strip .strip-copy strong { display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.875rem; line-height: 1.1; }
.client-strip .strip-copy p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted); }
.client-strip .logo-marquee { flex: 1 1 560px; min-width: 0; }

/* --- About collage --- */
.photo-collage { position: relative; min-height: 600px; }
.photo-collage .collage-main { position: absolute; left: 0; top: 0; width: 78%; height: 470px; border-radius: var(--radius-xl); }
.photo-collage .collage-side { position: absolute; right: 0; bottom: 0; width: 56%; height: 300px; border: 8px solid var(--color-bg); border-radius: var(--radius-xl); }
.photo-collage .collage-badge { position: absolute; left: 24px; bottom: 30px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 170px; height: 170px; border: 8px solid var(--color-bg); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); text-align: center; }
.photo-collage .collage-badge strong { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 2.5rem; line-height: 1; }
.photo-collage .collage-badge span { margin-top: 6px; font-size: var(--fs-micro); line-height: 1.3; color: var(--color-tint); }
.photo-collage .collage-card { position: absolute; left: 24px; bottom: 24px; z-index: 1; width: 220px; padding: 22px; border-radius: 22px; background: var(--color-ink); color: var(--color-white); }
.photo-collage .collage-card svg.icon { width: 28px; height: 28px; color: var(--color-lime); }
.photo-collage .collage-card strong { display: block; margin-top: 14px; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.875rem; line-height: 1; }
.photo-collage .collage-card span { display: block; margin-top: 8px; font-size: var(--fs-xsmall); color: var(--color-on-dark); }
.photo-collage.alt .collage-main { width: 78%; height: 82%; border-radius: var(--radius-2xl); }
.photo-collage.alt .collage-side { width: 52%; height: 50%; border-color: var(--color-bg-alt); }
.section.white .photo-collage .collage-side, .section.white .photo-collage .collage-badge { border-color: var(--color-bg); }
.section:not(.white) .photo-collage .collage-side, .section:not(.white) .photo-collage .collage-badge { border-color: var(--color-bg-alt); }
.intro-copy > p { margin-top: 22px; font-size: 1.0625rem; color: var(--color-body); }
.intro-copy > p + p { margin-top: 16px; font-size: var(--fs-body); }
.intro-copy .feature-list, .intro-copy .cert-list { margin-top: 34px; }
.intro-copy .btn-row, .intro-copy > .btn { margin-top: 38px; }

/* --- Services bento --- */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 20px; }
.bento-grid .overlay-card { height: 100%; border-radius: var(--radius-xl); }
.bento-grid .overlay-card .overlay-body { padding: 22px 20px; }
.bento-grid .overlay-card .overlay-icon { top: 20px; left: 20px; }
.bento-grid .bento-hero { grid-column: span 2; grid-row: span 2; }
.bento-grid .bento-hero .overlay-body { padding: 32px; }
.bento-grid .bento-hero .overlay-title { font-size: 2rem; }
.bento-grid .bento-hero .overlay-text { font-size: var(--fs-body); }
.bento-grid .bento-wide { grid-column: span 2; }
.bento-grid .bento-wide .overlay-body { justify-content: flex-start; max-width: 420px; padding: 26px 24px; }
.bento-grid .bento-wide .overlay-title { font-size: 1.5rem; }

/* --- Projects mosaic (home) --- */
.project-mosaic { display: flex; flex-wrap: wrap; gap: 24px; }
.project-mosaic > .overlay-card { flex: 1.3 1 520px; min-height: 624px; border-radius: var(--radius-2xl); }
.project-mosaic .mosaic-side { flex: 1 1 380px; display: flex; flex-direction: column; gap: 24px; }
.project-mosaic .mosaic-side .overlay-card { flex: 1; min-height: 300px; }
.project-mosaic .project-meta { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.project-mosaic .overlay-body { padding: 36px; }
.project-mosaic .overlay-card .overlay-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.project-mosaic .mosaic-side .overlay-title { font-size: 1.375rem; }
.project-mosaic .mosaic-side .overlay-body { padding: 26px; }
.project-mosaic .area-line { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: var(--fs-xsmall); color: #D5DBD3; }
.project-mosaic .area-line strong { color: var(--color-white); }

/* --- Mission / vision --- */
.mission-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.mission-grid .mission-quote { flex: 1 1 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px; border-radius: var(--radius-2xl); background: var(--color-ink-soft); }
.mission-grid .mission-quote .dark-quote { padding: 0; background: none; }
.mission-grid .mission-cards { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-5); }
.mission-card { flex: 1; padding: 40px; border-radius: var(--radius-2xl); background: var(--color-white); color: var(--color-text); }
.mission-card svg.icon { width: 34px; height: 34px; color: var(--color-primary); }
.mission-card h3 { margin-top: 22px; font-size: var(--fs-h4); }
.mission-card p { margin-top: 12px; font-size: 1.0625rem; color: var(--color-body); }
.mission-card.green { background: var(--color-primary); color: var(--color-white); }
.mission-card.green svg.icon { color: var(--color-white); }
.mission-card.green p { color: var(--color-tint); }

/* --- Photo panel with stats (presence) --- */
.photo-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 560px; padding: 44px; border-radius: var(--radius-2xl); background: var(--color-ink); color: var(--color-white); overflow: hidden; isolation: isolate; }
.photo-panel > img, .photo-panel > .media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.photo-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 14, 11, 0.82) 0%, rgba(9, 14, 11, 0.35) 55%, rgba(9, 14, 11, 0.85) 100%); }
.photo-panel h2 { max-width: 520px; }
.photo-panel .stat-list .stat-value { font-size: 2.25rem; }
.photo-panel.short { min-height: 240px; padding: 30px; justify-content: flex-end; gap: 6px; border-radius: var(--radius-3xl); }
.photo-panel.short::before { background: linear-gradient(180deg, rgba(9, 14, 11, 0.1), rgba(9, 14, 11, 0.85)); }
.photo-panel.short h3 { font-size: var(--fs-h4); line-height: 1.3; }
.photo-panel.short p { font-size: var(--fs-small); color: #D5DBD3; }

/* --- Two ways (services) --- */
.mode-card { flex: 1 1 440px; display: flex; flex-direction: column; gap: 18px; padding: 44px; border-radius: var(--radius-2xl); background: var(--color-white); }
.mode-card h3 { margin-top: 10px; font-size: 1.75rem; }
.mode-card > p { color: var(--color-body); }
.mode-card .check-list { margin-top: 6px; }
.mode-card .btn { margin-top: auto; align-self: flex-start; }
.mode-card .mode-action { margin-top: auto; padding-top: 18px; }
.mode-card.dark { background: var(--color-ink); color: var(--color-white); }
.mode-card.dark > p { color: var(--color-on-dark); }
.mode-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* --- Applications (product detail) --- */
.apps-card { flex: 1 1 380px; align-self: flex-start; padding: 40px; border-radius: var(--radius-2xl); background: var(--color-ink); color: var(--color-white); }
.apps-card h3 { font-size: 1.625rem; }
.apps-card ul { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.apps-card li { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-md); background: var(--color-ink-soft); }
.apps-card li svg.icon { width: 24px; height: 24px; color: var(--color-lime); }
.apps-card .media { margin-top: 22px; height: 200px; border-radius: 18px; }

/* --- Brand panel (product detail) --- */
.brand-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; padding: 48px; border-radius: var(--radius-2xl); background: var(--color-white); }
.brand-panel .heading-group { flex: 1 1 360px; margin-bottom: 0; }
.brand-panel .logo-grid { flex: 1 1 520px; }
.brand-panel .logo-grid li { flex-direction: column; gap: 10px; height: 120px; background: var(--color-surface-soft); }
.brand-panel .logo-grid figcaption { display: block; font-size: var(--fs-micro); color: var(--color-muted); }

/* --- Help card (products) --- */
.help-card { flex: 1 1 520px; display: flex; flex-direction: column; gap: 22px; padding: 48px; border-radius: var(--radius-2xl); background: var(--color-ink); color: var(--color-white); }
.help-card > p { max-width: 520px; font-size: 1.0625rem; color: var(--color-on-dark); }
.help-card .help-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.help-card .help-points li { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--color-ink-soft); font-weight: var(--fw-medium); }
.help-card .help-points svg.icon { width: 22px; height: 22px; color: var(--color-lime); }
.help-card .btn-row { margin-top: auto; }
.brand-card { flex: 1 1 420px; padding: 44px; border-radius: var(--radius-2xl); background: var(--color-white); }
.brand-card h2 { font-size: 1.75rem; }
.brand-card p { margin-top: 10px; color: var(--color-body); }
.brand-card .logo-grid { margin-top: 28px; }

/* --- Client groups (dark) --- */
.client-groups > li { display: flex; flex-wrap: wrap; gap: 20px 48px; padding: 36px 0; border-top: 1px solid var(--color-ink-line); }
.client-groups .group-intro { flex: 1 1 380px; display: flex; gap: 20px; align-items: flex-start; }
.client-groups .group-meta { font-size: var(--fs-xsmall); color: var(--color-faint); }
.client-groups h3 { margin-top: 4px; font-size: var(--fs-h4); }
.client-groups .group-intro p { margin-top: 8px; font-size: var(--fs-small); color: var(--color-on-dark); }
.client-groups .group-names { flex: 1.3 1 480px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; align-content: start; }
.client-groups .group-names li { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-medium); color: var(--color-on-dark-bright); }
.client-groups .group-names li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-lime); }
.also-supplied { margin-top: 22px; padding: 26px 28px; border-radius: 22px; background: var(--color-white); }
.also-supplied h3 { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-xsmall); color: var(--color-muted); letter-spacing: 0; }
.also-supplied p { margin-top: 10px; font-weight: var(--fw-medium); line-height: 1.9; }

/* --- Newsletter (blog) --- */
.newsletter-card { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; padding: 56px; border-radius: var(--radius-3xl); background: var(--color-ink); color: var(--color-white); }
.newsletter-card > div { flex: 1 1 420px; }
.newsletter-card svg.icon { width: 34px; height: 34px; color: var(--color-lime); }
.newsletter-card h2 { margin-top: 20px; }
.newsletter-card p { margin-top: 14px; color: var(--color-on-dark); }
.newsletter-card .inline-form { flex: 1 1 420px; }

/* --- Contact page --- */
.contact-overlap { position: relative; z-index: 2; margin-top: -88px; }
.contact-layout { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: stretch; }
.contact-layout .form-card { flex: 1.5 1 560px; }
.contact-layout .contact-side { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-layout .form-card.dark { padding: 40px; }
.contact-layout .form-card.dark > svg.icon { width: 32px; height: 32px; color: var(--color-lime); }
.contact-layout .form-card.dark h2 { margin-top: 18px; font-size: 1.75rem; }
.contact-layout .form-card.dark p { margin-top: 10px; font-size: var(--fs-small); color: var(--color-on-dark); }
.contact-layout .form-card.dark .site-form { margin-top: 24px; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-layout .form-card.dark .site-form .form-group.full, .contact-layout .form-card.dark .site-form .btn { grid-column: 1 / -1; }
.contact-layout .photo-panel { flex: 1; }

/* --- Service detail layout --- */
.detail-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-7); }
.detail-layout .detail-main { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.detail-layout .sidebar { flex: 0 1 340px; position: sticky; top: calc(var(--header-height) + 24px); }
.detail-layout .detail-main h2 { font-size: var(--fs-h3); }
.detail-layout .detail-main .heading-group .heading { font-size: var(--fs-h2); }
.detail-layout .detail-main > div > p { margin-top: 16px; color: var(--color-body); }
.detail-layout .detail-main > div > p.lead { margin-top: 22px; font-size: 1.0625rem; }
.photo-pair { display: flex; gap: 16px; margin-top: 32px; }
.photo-pair .media { flex: 1; height: 320px; border-radius: var(--radius-xl); }
.photo-pair .media:first-child { flex: 1.4; }
.reason-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.reason-cards li { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border-radius: 22px; background: var(--color-white); font-weight: var(--fw-medium); }

/* --- Product detail --- */
.product-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-7) 64px; }
.product-layout .gallery { flex: 1 1 520px; min-width: 0; position: sticky; top: calc(var(--header-height) + 24px); }
.product-layout .product-info { flex: 1 1 480px; min-width: 0; }
.product-info .product-category { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-primary); }
.product-info h1 { margin-top: 10px; font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.5rem); }
.product-info .product-intro { margin-top: 20px; font-size: 1.0625rem; color: var(--color-body); }
.product-info .spec-table, .product-info .btn-row { margin-top: 28px; }
.product-info .note-box { margin-top: 22px; }

/* --- Blog post layout --- */
.post-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) var(--space-9); }
.post-layout .content-area { flex: 1 1 640px; min-width: 0; }
.post-layout .sidebar { flex: 0 1 340px; position: sticky; top: calc(var(--header-height) + 24px); }
.comments-wrap { max-width: 760px; }
.comments-wrap h2 { font-size: 1.875rem; }
.comments-wrap h3 { margin-top: 48px; font-size: 1.5rem; }
.comments-wrap .site-form { margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* --- 404 --- */
.error-hero { position: relative; display: flex; align-items: center; min-height: max(900px, 100svh); padding: calc(var(--header-height) + 72px) 0 112px; background: var(--color-ink); color: var(--color-white); text-align: center; overflow: hidden; isolation: isolate; }
.error-hero .hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.error-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(13, 20, 17, 0.55) 0%, rgba(13, 20, 17, 0.94) 70%); }
.error-hero .container { display: flex; flex-direction: column; align-items: center; }
.error-code { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.5vw, 22px); }
.error-code .error-digit { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: clamp(10.5rem, 22vw, 18.75rem); line-height: 0.8; letter-spacing: -0.06em; }
.error-code .pipe-zero { flex: none; width: clamp(150px, 19vw, 250px); height: auto; }
.error-code .pipe-zero .pipe-wool { transform-origin: 110px 110px; animation: wool-spin 40s linear infinite; }
@keyframes wool-spin { to { transform: rotate(360deg); } }
.error-hero h1 { margin-top: 48px; font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.375rem); line-height: 1.1; }
.error-hero .hero-lead { margin-top: 18px; max-width: 560px; font-size: var(--fs-lead); color: var(--color-on-dark-soft); }
.search-pill { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin-top: 36px; padding: 8px 8px 8px 22px; border: 1px solid var(--glass-line); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); }
.search-pill svg.icon { color: var(--color-lime); }
.search-pill input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--color-white); font-size: var(--fs-body); }
.search-pill input::placeholder { color: var(--color-faint); }
.search-pill input:focus { outline: none; }
.search-pill:focus-within { border-color: var(--color-lime); }
.search-pill .btn { min-height: 48px; padding: 0 24px; }
.error-hero .btn-row { justify-content: center; margin-top: 28px; }

/* --- Style guide page --- */
.guide-block + .guide-block { margin-top: var(--space-9); }
.guide-block > h2 { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-h4); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch-grid li { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); font-size: var(--fs-micro); }
.swatch-grid .swatch { height: 72px; }
.swatch-grid span { display: block; padding: 10px 12px; }
.swatch-ink { background: var(--color-ink); } .swatch-ink-deep { background: var(--color-ink-deep); } .swatch-primary { background: var(--color-primary); }
.swatch-primary-dark { background: var(--color-primary-dark); } .swatch-lime { background: var(--color-lime); } .swatch-tint { background: var(--color-tint); }
.swatch-bg-alt { background: var(--color-bg-alt); } .swatch-surface { background: var(--color-surface); } .swatch-body { background: var(--color-body); }
.swatch-hot { background: var(--color-hot); } .swatch-cold { background: var(--color-cold); } .swatch-whatsapp { background: var(--color-whatsapp); }
.type-scale > * + * { margin-top: 18px; }
.guide-dark { padding: 32px; border-radius: var(--radius-xl); background: var(--color-ink); color: var(--color-white); }

/* 9. UTILITIES ----------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-scroll { position: fixed; width: 100%; overflow: hidden; }
.mt-section { margin-top: var(--space-10); }
svg.icon.flip { transform: rotate(180deg); }
.media-stack { display: flex; flex-direction: column; }
.media-stack .heading-group { margin-bottom: 36px; }
.media-stack .feature-photo { flex: 1; min-height: 320px; border-radius: 26px; }
.photo-panel .stat-list .stat-label { color: var(--color-on-dark-soft); }
.stack.mt-list { margin-top: 26px; }
.reason-cards .icon-tile { margin-top: -2px; }
.detail-layout .detail-main .heading-group { margin-bottom: 0; }
.benefit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.split.align-start > div > .card-grid.tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.brand-panel.soft-panel { background: var(--color-bg-alt); }
.brand-panel .logo-grid figure { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-panel .logo-grid li { background: var(--color-white); }
.project-card .project-meta-wrap { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-border-soft); }
.project-meta > div > span { display: flex; flex-direction: column; }
.project-card .card-body > p:not(.card-category) { margin-bottom: 8px; }
.trust-copy .heading-group { margin-bottom: var(--space-5); }
.trust-copy { flex: 1 1 360px; }
.trust-logos { flex: 2 1 640px; }
.project-meta p { display: flex; flex-direction: column; }
.project-meta .meta-label { font-size: var(--fs-micro); color: var(--color-muted); }
.project-meta .meta-value { font-weight: var(--fw-semibold); }
.project-meta.light .meta-label { color: var(--color-on-dark); }
.project-meta.light .meta-value { color: var(--color-white); }
.cert-card.soft-card { background: var(--color-bg-alt); }
.content-area .media { border-radius: var(--radius-xl); }
.sidebar-card.dark > svg.icon { width: 30px; height: 30px; margin-bottom: 16px; color: var(--color-lime); }
.error-code .pipe-zero .pipe-wool line { stroke: inherit; }
.tile-link.large .tile-body p { margin: 0; }
.guide-title { margin-bottom: var(--space-8); font-size: var(--fs-display); }
.guide-h1 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.guide-h2 { font-size: var(--fs-h2); }
.guide-small { font-size: var(--fs-xsmall); color: var(--color-muted); }
.mt-gap { margin-top: var(--space-5); }

/* cards on a white section sit on the off-white tone so they stay visible */
.section.white :is(.service-card, .product-card, .info-card:not(.dark), .feature-item.boxed, .tile-link, .reason-cards li, .area-grid li, .project-card, .blog-card, .office-card:not(.map), .stat-list.cards li, .link-card, .cert-list li, .sidebar-card:not(.dark), .industry-card, .logo-grid:not(.soft) li, .quote-card, .spec-table, .also-supplied, .comment-item) { background: var(--color-bg-alt); }
.section.white .comment-item { background: var(--color-bg-alt); }
.section.white .product-card .card-media { background: var(--color-white); }
.section.white .link-card .card-media { background: var(--color-white); }
.card-grid > li > :is(article, a, div) { height: 100%; }
.site-header .main-nav .small-drop .sub-menu { flex: none; }
.blog-card .card-media, .link-card .card-media { overflow: hidden; }
.card-media > .media { height: 100%; }
.content-area .share-row a { color: var(--color-white); text-decoration: none; }
.content-area .share-row .share-list { display: flex; gap: 10px; margin: 0; }

/* ---------- motion (CSS only) ---------- */
/* cards lift on one soft curve */
:is(.service-card, .product-card, .project-card, .blog-card, .industry-card, .info-card, .link-card, .tile-link, .contact-tile, .logo-grid li) {
  transition: transform var(--transition-lift), box-shadow var(--transition-lift), background-color var(--transition);
}
.btn { transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition-fast), box-shadow var(--transition); }
.btn:hover { box-shadow: 0 10px 24px rgba(6, 10, 8, 0.14); }
.btn-ghost:hover, .site-header .header-cta:hover { box-shadow: none; }

/* scroll reveal: hidden only once JS has run, released to normal CSS after */
.js [data-anim]:not(.revealed) { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.9s var(--ease-out); }
.js [data-anim].in-view:not(.revealed) { opacity: 1; transform: none; }

/* page-load entrance for banner copy (never the banner photo) */
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js :is(.page-hero, .home-hero, .error-hero) :is(.breadcrumb, .hero-kicker, h1, .hero-text, .hero-lead, .btn-row, .hero-extra, .stat-list, .post-author, .error-code, .search-pill, .hero-form) {
  animation: rise-in 0.9s var(--ease-out) both;
}
.js :is(.page-hero, .home-hero, .error-hero) h1 { animation-delay: 0.08s; }
.js :is(.page-hero, .home-hero, .error-hero) :is(.hero-lead, .hero-text, .post-author, .search-pill) { animation-delay: 0.16s; }
.js :is(.page-hero, .home-hero, .error-hero) :is(.btn-row, .hero-extra, .stat-list) { animation-delay: 0.24s; }
.js .home-hero .hero-form { animation-delay: 0.3s; }

/* filter results fade up */
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-tags] { transition: opacity 0.25s ease; }
[data-tags].is-leaving { opacity: 0; }
[data-tags].is-entering { animation: fade-up 0.55s var(--ease-out) both; }

/* mobile drawer links slide in one after another */
.site-header .main-nav.open .menu-item.menu-item-top, .site-header .main-nav.open .nav-drawer-foot { animation: drawer-in 0.5s var(--ease-out) both; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(2) { animation-delay: 0.04s; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(3) { animation-delay: 0.08s; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(4) { animation-delay: 0.12s; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(5) { animation-delay: 0.16s; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(6) { animation-delay: 0.2s; }
.site-header .main-nav.open .menu-item.menu-item-top:nth-child(7) { animation-delay: 0.24s; }
.site-header .main-nav.open .nav-drawer-foot { animation-delay: 0.28s; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* ---------- sitemap additions ---------- */
.site-header .main-nav .small-drop.drop-end .mega-panel { left: auto; right: -16px; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.variant-card { padding: 28px; border-radius: var(--radius-xl); background: var(--color-bg-alt); }
.variant-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: var(--fs-h5); }
.variant-card h3 span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-faint); }
.variant-card .check-list.columns { grid-template-columns: 1fr; }

/* infrastructure */
.facility-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-2xl); background: var(--color-white); overflow: hidden; transition: transform var(--transition-lift), box-shadow var(--transition-lift); }
.facility-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.facility-card .card-media { height: 320px; }
.facility-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 30px; }
.facility-card h3 { font-size: 1.75rem; }
.facility-card .card-meta, .location-copy .card-meta { font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); color: var(--color-primary); }
.facility-card p { color: var(--color-body); }
.facility-card address { display: flex; gap: 10px; font-style: normal; font-size: var(--fs-small); color: var(--color-muted); }
.facility-card address svg.icon { margin-top: 3px; color: var(--color-primary); }
.facility-card .text-link { margin-top: auto; padding-top: 8px; }
.menu-thumb-lg { flex: none; display: inline-flex; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
.menu-thumb-lg img { width: 100%; height: 100%; padding: 5px; object-fit: contain; mix-blend-mode: multiply; }
.menu-thumb-lg.photo img { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.section.white .tile-link .menu-thumb-lg { background: var(--color-white); }

/* why choose us */
.reason-grid p { margin-top: -14px; font-size: var(--fs-small); color: var(--color-on-dark); }
.compare-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-2xl); background: var(--color-white); overflow: hidden; }
.compare-table th, .compare-table td { padding: 20px 26px; border-top: 1px solid var(--color-border-soft); text-align: left; vertical-align: middle; }
.compare-table thead th { border-top: 0; padding-block: 22px; font-size: var(--fs-small); color: var(--color-muted); }
.compare-table thead th:nth-child(2) { background: var(--color-ink); }
.compare-table tbody th { width: 30%; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.compare-table td { width: 35%; font-size: var(--fs-small); color: var(--color-body); }
.compare-table td svg.icon { display: inline-block; vertical-align: -5px; margin-right: 10px; }
.compare-table td:nth-child(2) { background: var(--color-tint); color: var(--color-tint-text); font-weight: var(--fw-medium); }
.compare-table td:nth-child(2) svg.icon { color: var(--color-primary); }
.compare-table td:nth-child(3) svg.icon { color: var(--color-faint); }
.compare-us img { width: auto; height: 40px; filter: brightness(0) invert(1); }

/* certifications */
.cert-detail { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 34px 30px; border-radius: 26px; background: var(--color-white); }
.cert-detail .cert-top { display: flex; align-items: center; justify-content: space-between; }
.cert-detail .cert-code { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.375rem; color: var(--color-primary); }
.cert-detail h3 { margin-top: 10px; font-size: 1.3125rem; }
.cert-detail > p { font-size: var(--fs-small); color: var(--color-body); }
.cert-detail .check-list { margin-top: 6px; font-size: var(--fs-small); }
.cert-detail .btn { align-self: flex-start; margin-top: auto; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.download-grid a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--color-white); transition: transform var(--transition-lift), box-shadow var(--transition-lift); }
.download-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.download-grid .download-text { flex: 1; display: flex; flex-direction: column; font-weight: var(--fw-semibold); }
.download-grid .download-text small { font-size: var(--fs-xsmall); font-weight: var(--fw-regular); color: var(--color-muted); }
.download-grid a > svg.icon { color: var(--color-primary); }

/* locations */
.split.reverse { flex-direction: row-reverse; }
.location-media { position: relative; min-height: 460px; border-radius: var(--radius-2xl); overflow: hidden; }
.location-media > .media { position: absolute; inset: 0; height: 100%; }
.location-media .map-art { position: absolute; right: 20px; bottom: 20px; width: 220px; height: 150px; border: 6px solid var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.location-copy h2 { margin-top: 8px; font-size: var(--fs-h2); }
.location-copy > p { margin-top: 16px; color: var(--color-body); }
.location-facts { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding: 24px; border-radius: var(--radius-xl); background: var(--color-white); }
.section.white .location-facts { background: var(--color-bg-alt); }
.location-facts li { display: flex; gap: 14px; align-items: flex-start; }
.location-facts svg.icon { margin-top: 2px; color: var(--color-primary); }
.location-facts address { font-style: normal; }
.location-facts .office-phones { display: flex; flex-direction: column; gap: 4px; font-weight: var(--fw-semibold); }
.location-facts .office-phones svg.icon { display: none; }
.location-copy .btn-row { margin-top: 28px; }

/* datasheets */
.sheet-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-7); }
.sheet-layout .sidebar { flex: 0 1 320px; position: sticky; top: calc(var(--header-height) + 24px); }
.sheet-library { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sheet-group { padding: 26px; border-radius: var(--radius-xl); background: var(--color-white); scroll-margin-top: calc(var(--header-height) + 24px); }
.sheet-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border-soft); }
.sheet-head h2 { flex: 1; font-size: var(--fs-h5); }
.sheet-count { font-size: var(--fs-xsmall); color: var(--color-faint); }
.sheet-list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.sheet-list li + li { border-top: 1px solid var(--color-border-soft); }
.sheet-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-primary); }
.sheet-text { flex: 1; display: flex; flex-direction: column; }
.sheet-text small { font-size: var(--fs-xsmall); color: var(--color-muted); }
.sheet-empty { padding: 28px; border-radius: var(--radius-xl); background: var(--color-white); color: var(--color-body); }
.sheet-empty a { font-weight: var(--fw-semibold); color: var(--color-primary); text-decoration: underline; }
.search-box { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0 14px; border: 1px solid #DDE0D6; border-radius: 14px; background: var(--color-bg-alt); transition: border-color var(--transition), box-shadow var(--transition); }
.search-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(78, 122, 36, 0.18); }
.search-box svg.icon { color: var(--color-faint); }
.search-box input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; font-size: var(--fs-body); }
.search-box input:focus { outline: none; }
.sidebar-card label.sidebar-title { display: block; }
.sidebar-text a { font-weight: var(--fw-semibold); color: var(--color-primary); word-break: break-word; }

/* FAQs */
.faq-main { gap: var(--space-7); }
.faq-group { scroll-margin-top: calc(var(--header-height) + 24px); }
.faq-group h2 { margin-bottom: 20px; font-size: var(--fs-h3); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: var(--radius-lg); background: var(--color-white); transition: box-shadow var(--transition); interpolate-size: allow-keywords; }
.faq-item[open] { box-shadow: var(--shadow-card); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.0625rem; cursor: pointer; list-style: none; transition: color var(--transition); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary); }
.faq-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-tint); transition: background-color var(--transition), transform var(--transition); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--color-primary); transform: translate(-50%, -50%); transition: transform var(--transition), background-color var(--transition); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--color-primary); transform: rotate(180deg); }
.faq-item[open] .faq-icon::before { background: var(--color-white); }
.faq-item[open] .faq-icon::after { background: var(--color-white); transform: translate(-50%, -50%) rotate(0deg); }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-answer { padding: 0 24px 24px; color: var(--color-body); }

/* quote + technical forms */
.quote-form { display: flex; flex-direction: column; gap: 36px; }
.form-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-section legend { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h5); }
.form-section + .form-section { padding-top: 32px; border-top: 1px solid var(--color-border-soft); }
.step-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-tint); color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-xsmall); }
.form-consent { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-small); color: var(--color-body); }
.form-consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); }
.quote-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.quote-form .form-note { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xsmall); color: var(--color-muted); }
.quote-form .form-note svg.icon { color: var(--color-primary); }
.next-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.next-steps strong { display: block; font-size: var(--fs-small); }
.next-steps span:last-child { font-size: var(--fs-xsmall); color: var(--color-body); }
.sidebar-card.dark .btn-row .btn-light { justify-content: center; }
.help-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sidebar { min-width: 0; }

/* ---------------------------------------------------------------- service detail pages */
.answer-box { margin-bottom: 40px; padding: 26px 30px; border-radius: var(--radius-xl); border-left: 4px solid var(--color-primary); background: var(--color-tint); color: var(--color-tint-text); }
.answer-box .answer-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-primary-dark); }
.answer-box .answer-label svg.icon { width: 20px; height: 20px; color: var(--color-primary); }
.answer-box p + p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.7; }
.detail-layout .detail-main > div > .check-list.mt-list { margin-top: 22px; }
.detail-layout .detail-main > div > .table-scroll { margin-top: 26px; }
.detail-main a:not(.btn) { color: var(--color-primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); }
.detail-main a:not(.btn):hover { color: var(--color-primary); }
.data-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-xl); background: var(--color-white); overflow: hidden; font-size: var(--fs-small); }
.data-table th, .data-table td { padding: 16px 22px; border-top: 1px solid var(--color-border-soft); text-align: left; vertical-align: top; }
.data-table thead th { border-top: 0; background: var(--color-ink); color: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.data-table td { color: var(--color-body); }
.data-table td:first-child { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-text); }
.data-table tbody tr { transition: background-color var(--transition); }
.data-table tbody tr:hover { background: var(--color-tint); }
.faq-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-7); }
.faq-layout > .heading-group { flex: 0 1 400px; position: sticky; top: calc(var(--header-height) + 24px); }
.faq-layout > .faq-list { flex: 1 1 560px; min-width: 0; }
.faq-answer a { color: var(--color-primary-dark); text-decoration: underline; }
.split > .split-photo { align-self: stretch; min-height: 460px; border-radius: var(--radius-2xl); }
.intro-copy > .check-list { margin-top: 26px; }
.intro-copy > .answer-box + .heading-group { margin-top: 0; }
.detail-main .product-group h3 a { color: inherit; text-decoration: none; }
.detail-main .product-group h3 a:hover { color: var(--color-primary); }

/* service pages: 3-column application tiles and product cards */
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.area-grid li { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; border-radius: 22px; background: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.125rem; line-height: 1.35; transition: box-shadow var(--transition), transform var(--transition); }
.area-grid li:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.product-group { display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--color-white); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.product-group:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.product-group .card-media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--color-surface); overflow: hidden; }
.product-group .card-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.9s var(--ease-out); }
.product-group.photo .card-media { padding: 0; }
.product-group.photo .card-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.product-group:hover .card-media img { transform: scale(1.04); }
.product-group .card-body { flex: 1; padding: 22px 24px 26px; }
.product-group h3 { font-size: 1.1875rem; }
.product-group .card-body > p { margin-top: 6px; font-size: var(--fs-small); color: var(--color-muted); }
.product-group .check-list { margin-top: 16px; gap: 9px; font-size: var(--fs-small); }
.area-grid .icon-tile { width: 52px; height: 52px; border-radius: 16px; }
.area-grid .icon-tile svg.icon { width: 24px; height: 24px; }

/* ---------- product catalogue (categories + product pages) ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.catalog-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-xl); background: var(--color-white); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.catalog-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.catalog-card .card-media { display: block; aspect-ratio: 1 / 1; background: var(--color-white); overflow: hidden; }
.catalog-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.catalog-card:hover .card-media img { transform: scale(1.04); }
.catalog-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; border-top: 1px solid var(--color-border-soft); }
.catalog-card .card-category { font-size: var(--fs-micro); color: var(--color-muted); }
.catalog-card .card-title { font-size: 1.125rem; font-weight: var(--fw-semibold); line-height: 1.33; color: var(--color-ink); }
.catalog-card .card-text { font-size: var(--fs-small); color: var(--color-body); }
.catalog-card .text-link { margin-top: auto; padding-top: 10px; }
.section.white .catalog-card { background: var(--color-bg-alt); }
.section.white .catalog-card .card-media { background: var(--color-white); }

.gallery.square .gallery-main { height: auto; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; }
.gallery.square .gallery-main img { width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.product-info .product-sub { margin-top: 8px; font-size: 1.125rem; font-weight: var(--fw-medium); color: var(--color-muted); }
.spec-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.spec-chips li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--color-white); }
.spec-chips .chip-value { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-ink); }
.spec-chips .chip-label { font-size: var(--fs-micro); color: var(--color-muted); }

.spec-block .table-scroll { margin-top: 24px; }
.spec-block .table-title { margin-top: 44px; font-size: 1.375rem; }
.spec-block .table-note { margin-top: 10px; font-size: var(--fs-small); color: var(--color-muted); }
.spec-block .table-title + .table-scroll { margin-top: 18px; }

.use-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.app-list { display: grid; gap: 10px; margin-top: 24px; }
.app-list li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--color-white); font-weight: var(--fw-medium); }
.app-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-tint); color: var(--color-primary); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.use-advs .check-list { margin-top: 24px; }
.notes-card { margin-top: 32px; padding: 26px; border-radius: 22px; background: var(--color-white); }
.notes-card h3 { font-size: 1.125rem; }
.notes-card .check-list { margin-top: 16px; }

.datasheet-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.datasheet-list a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; border-radius: 18px; background: var(--color-bg-alt); color: var(--color-ink); font-weight: var(--fw-medium); text-decoration: none; transition: background var(--transition); }
.datasheet-list a:hover { background: var(--color-tint); }
.datasheet-list svg.icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-primary); }
.datasheet-list .ds-meta { margin-left: auto; font-size: var(--fs-micro); color: var(--color-muted); }

/* product page: applications, benefits, services */
.apps-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.apps-panel { position: sticky; top: calc(var(--header-height) + 24px); display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: var(--radius-2xl); background: var(--color-ink); color: var(--color-white); }
.apps-panel h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); color: var(--color-white); }
.apps-panel p { color: rgba(255, 255, 255, 0.72); }
.apps-panel .media { height: 220px; margin-top: 8px; border-radius: 18px; }
.apps-panel .media img { width: 100%; height: 100%; object-fit: cover; }
.app-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.app-cards li { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 168px; padding: 24px; border-radius: 22px; background: var(--color-bg-alt); transition: box-shadow var(--transition), transform var(--transition); }
.app-cards li:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.app-cards .app-top { display: flex; align-items: flex-start; justify-content: space-between; }
.app-cards .icon-tile { width: 52px; height: 52px; border-radius: 16px; }
.app-cards .icon-tile svg.icon { width: 24px; height: 24px; }
.app-cards .app-num { width: auto; height: auto; background: none; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
.app-cards .app-name { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.4; color: var(--color-ink); }
.app-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
.section:not(.white) .app-cards li { background: var(--color-white); }
.section.white .feature-item.stacked, .section.white .faq-item, .section.white .notes-card { background: var(--color-bg-alt); }
.benefit-grid + .notes-card { margin-top: 28px; }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logo-grid.one { grid-template-columns: minmax(0, 240px); }
.benefit-grid.fill { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* product page: specs beside a quote form */
.spec-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin-top: 8px; }
.spec-split .spec-main > .table-scroll:first-child { margin-top: 0; }
.data-table.compact th, .data-table.compact td { padding: 12px 20px; }
.data-table.compact td:first-child { width: 36%; font-weight: var(--fw-semibold); color: var(--color-ink); }
.quote-card { position: sticky; top: calc(var(--header-height) + 24px); display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: var(--radius-2xl); background: var(--color-ink); color: var(--color-white); }
.quote-card h3 { font-size: 1.375rem; line-height: 1.3; color: var(--color-white); }
.quote-card > p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.72); }
.site-form.stacked { grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.site-form.stacked textarea { min-height: 88px; }
.site-form.stacked .btn-block { width: 100%; justify-content: center; }
.quote-alt { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-small); }
.quote-alt a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-white); text-decoration: none; }
.quote-alt svg.icon { width: 18px; height: 18px; color: var(--color-lime); }

/* product page: lead card, datasheet strip, datasheet popup */
.spec-split { grid-template-columns: minmax(0, 1fr) 360px; }
.lead-card { position: sticky; top: calc(var(--header-height) + 24px); display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--radius-2xl); background: var(--color-white); box-shadow: var(--shadow-card); border-top: 4px solid var(--color-primary); }
.lead-head { display: flex; align-items: center; gap: 14px; }
.lead-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--color-surface); }
.lead-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lead-kicker { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-primary); }
.lead-kicker svg.icon { width: 14px; height: 14px; }
.lead-head h3 { margin-top: 2px; font-size: 1.375rem; line-height: 1.25; }
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-field { position: relative; display: block; }
.lead-field input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg-alt); font: inherit; font-size: var(--fs-small); color: var(--color-ink); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.lead-field.has-icon input { padding-left: 46px; }
.lead-field.has-icon svg.icon { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.lead-field input:focus { outline: none; border-color: var(--color-primary); background: var(--color-white); box-shadow: 0 0 0 3px rgba(78, 122, 36, 0.18); }
.lead-field input::placeholder { color: var(--color-faint); }
.btn.btn-block { width: 100%; justify-content: center; }
.lead-form .btn { min-height: 52px; margin-top: 4px; }
.lead-or { display: flex; align-items: center; gap: 12px; font-size: var(--fs-micro); color: var(--color-muted); }
.lead-or::before, .lead-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-soft); }
.lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-actions .btn { justify-content: center; min-height: 48px; padding-inline: 12px; font-size: var(--fs-small); }
.lead-done { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--color-tint); font-size: var(--fs-small); color: var(--color-tint-text); }
.lead-done[hidden], .ds-done[hidden], .lead-form[hidden] { display: none; }

.ds-strip { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 20px; border-radius: var(--radius-xl); background: var(--color-white); border: 1px dashed var(--color-border); }
.ds-strip .ds-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-strip .ds-text strong { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--color-ink); }
.ds-strip .ds-text span { font-size: var(--fs-small); color: var(--color-muted); }
.ds-strip .btn { flex: 0 0 auto; }
.ds-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--color-tint); color: var(--color-primary); }
.ds-icon svg.icon { width: 24px; height: 24px; }
.ds-icon.done { width: 40px; height: 40px; border-radius: 50%; }

.ds-modal { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--radius-2xl); background: var(--color-white); color: var(--color-body); box-shadow: 0 30px 80px rgba(8, 14, 10, 0.35); }
.ds-modal::backdrop { background: rgba(8, 14, 10, 0.6); backdrop-filter: blur(3px); }
.ds-modal[open] { animation: ds-in 0.28s var(--ease-out); }
@keyframes ds-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.ds-modal-inner { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 26px; }
.ds-close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-ink); cursor: pointer; }
.ds-close svg.icon { width: 18px; height: 18px; }
.ds-modal-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.ds-kicker { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-primary); }
.ds-modal h2 { font-size: 1.5rem; line-height: 1.2; }
.ds-product { padding: 12px 14px; border-radius: 12px; background: var(--color-bg-alt); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-ink); }
.ds-small { font-size: var(--fs-micro); color: var(--color-muted); text-align: center; }
.ds-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ds-done h3 { font-size: 1.25rem; }
.ds-done p a { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) { .ds-modal[open] { animation: none; } }

/* Studio product shots: the grey backdrop is baked into each square image, so show them full-bleed */
:root { --color-studio: #EAEAE7; }
.catalog-card .card-media, .section.white .catalog-card .card-media, .gallery.square .gallery-main, .lead-thumb { background: var(--color-studio); }
.product-card.studio .card-media, .section.white .product-card.studio .card-media { height: auto; aspect-ratio: 1 / 1; padding: 0; background: var(--color-studio); overflow: hidden; }
.product-card.studio .card-media img, .product-group.studio .card-media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.product-group.studio .card-media { padding: 0; background: var(--color-studio); }
.site-header .main-nav .menu-thumb, .menu-thumb-lg, .section.white .tile-link .menu-thumb-lg { background: var(--color-studio); }
.site-header .main-nav .menu-thumb img, .menu-thumb-lg img { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.site-header .mega-feature .feature-product .feature-image img { border-radius: var(--radius-sm); mix-blend-mode: normal; }
.product-group.studio .card-media { aspect-ratio: 1 / 1; }

/* Footer wordmark: full company name, sized to fill the footer width exactly at every screen size.
   12.45 = text width / font size for "SHREE GAYATRI INSULATION" in the heading font. */
.site-footer > .container { container-type: inline-size; }
.site-footer .footer-wordmark { font-size: 7.4vw; font-size: calc(100cqi / 12.45); white-space: nowrap; overflow: hidden; text-align: center; }