/* DataSync editorial theme: warm ivory canvas with cinematic charcoal surfaces. */
:root {
  --canvas: #F2F0E9;
  --canvas-deep: #e6e2d8;
  --charcoal: #17191a;
  --charcoal-soft: #202324;
  --charcoal-ink: #27292a;
  --body-ink: #30312f;
  --body-muted: #5b5c58;
  --dark-muted: #b9bab5;
  --gold-dark: #896b1e;
  --light-line: rgba(23, 25, 26, .19);
  --dark-line: rgba(242, 240, 233, .19);
  --ink: var(--charcoal);
  --paper: var(--canvas);
  --muted: var(--body-muted);
  --line: var(--light-line);
}

html, body { background: var(--canvas); }
body { color: var(--body-ink); }
main { background: var(--canvas); }
::selection { background: var(--gold); color: var(--charcoal); }

/* The supplied transparent gold-and-graphite logo sits on the ivory brand bar. */
.site-header {
  color: var(--charcoal);
  border-bottom-color: var(--light-line);
  background: var(--canvas);
}
.site-header.header-solid, .site-header.menu-open { background: var(--canvas); }
.mega-menu, .mobile-menu {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  background: #1a1c1d;
  color: var(--canvas);
}
.mega-menu { border-bottom-color: var(--gold); }
.mega-col > a { color: #deded9; }
.mega-col > a:hover, .mobile-menu details a:hover { color: var(--gold-bright); }
.header-cta { border-color: rgba(137, 107, 30, .78); }
.header-cta:hover { background: rgba(191, 155, 46, .13); }

/* Hero and inner-page image mastheads remain cinematic, not flat. */
.hero, .service-hero, .category-hero {
  color: var(--canvas);
  background: var(--charcoal);
}
.hero-shade {
  background: linear-gradient(90deg, rgba(17, 19, 20, .94) 0%, rgba(17, 19, 20, .71) 47%, rgba(17, 19, 20, .21)),
    linear-gradient(0deg, rgba(17, 19, 20, .72), transparent 59%);
}
.service-hero-media > div, .category-image:after {
  background: linear-gradient(90deg, rgba(17, 19, 20, .94), rgba(17, 19, 20, .66) 54%, rgba(17, 19, 20, .2)),
    linear-gradient(0deg, rgba(17, 19, 20, .72), transparent);
}
.hero h1, .service-hero h1, .category-hero h1 { max-width: 12ch; }
.hero h1 em, .service-hero h1 em, .category-hero h1 em { color: #e2bd45; }
.hero .eyebrow, .service-hero .eyebrow, .category-hero .eyebrow { color: #eeece5; }
.hero-lede, .service-hero-copy > p:last-of-type, .category-copy > p:last-child { color: #eeece5; }
.hero .text-link, .service-hero .text-link, .back-link { color: #f2f0e9; }
.scroll-cue, .hero-index { color: #e1ded5; }

/* Ivory is the recurring site background; gold is an accent, not a large fill. */
.marquee {
  --line: var(--dark-line);
  color: var(--canvas);
  background: var(--charcoal);
}
.section, .service-intro, .comparison, .faq-section, .industry-section {
  background: var(--canvas);
  color: var(--body-ink);
}
.section-kicker { color: var(--gold-dark); }
.section-kicker i { background: linear-gradient(90deg, rgba(137, 107, 30, .58), transparent); }
.intro-grid h2, .comparison-grid h2, .faq-section h2, .service-directory-row h2 { color: var(--charcoal); }
.intro-grid p, .industry-row p, .service-directory-row p, .faq-list p { color: var(--body-muted); }

/* The four capability panels feel like dark editorial plates on cream paper. */
.sector-grid {
  gap: clamp(12px, 1.7vw, 24px);
  background: transparent;
}
.sector-card {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal);
  border: 1px solid rgba(23, 25, 26, .25);
  box-shadow: 0 18px 48px rgba(23, 25, 26, .1);
}
.sector-image { aspect-ratio: 16 / 8.4; }
.sector-image img { filter: saturate(.7) contrast(1.06); }
.sector-image:after { background: linear-gradient(0deg, rgba(19, 21, 22, .75), transparent 67%); }
.sector-body { padding: clamp(25px, 3vw, 44px); }
.sector-body > p, .sector-links i { color: #d6af36; }
.sector-body h3 { color: var(--canvas); }
.sector-links a { color: #deded8; font-size: .88rem; }
.sector-links a:hover { color: #edc44a; }

.signal-section {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal);
}
.signal-copy .eyebrow, .proof-copy .eyebrow { color: #e8e6df; }
.signal-copy > p, .proof-copy > p { color: var(--dark-muted); }
.signal-copy ol { color: var(--canvas); }
.signal-visual:after { background: linear-gradient(90deg, rgba(23, 25, 26, .62), transparent); }
.phone-overlay { --line: var(--dark-line); color: var(--canvas); background: rgba(23, 25, 26, .88); }

.industry-list, .service-directory, .faq-list, .comparison-table { border-top-color: var(--light-line); }
.industry-row, .service-directory-row, .faq-list details, .comparison-table > div { border-bottom-color: var(--light-line); }
.industry-row, .service-directory-row { transition: color .25s ease, padding .3s ease, background .3s ease; }
.industry-row:hover, .service-directory-row:hover { padding-inline: 18px; background: var(--canvas-deep); }
.industry-row > span, .service-directory-row > span, .industry-row > i, .service-directory-row > i { color: var(--gold-dark); }
.industry-row h3 { color: var(--charcoal); }

.image-ribbon {
  gap: clamp(12px, 1.7vw, 24px);
  padding: 0 var(--pad) clamp(75px, 8vw, 130px);
  background: var(--canvas);
}
.image-ribbon figure { height: clamp(350px, 45vw, 620px); }
.image-ribbon img, .proof-image img { filter: saturate(.72) contrast(1.08); }
.image-ribbon figcaption { background: rgba(23, 25, 26, .9); color: var(--canvas); }

.contact-band {
  --line: var(--dark-line);
  color: var(--canvas);
  background: var(--charcoal);
  border-top: 4px solid var(--gold);
}
.contact-band p { color: #d4b14a; }
.contact-band .btn {
  color: var(--charcoal);
  background: var(--canvas);
  border-color: var(--canvas);
}
.contact-band .btn:hover { background: #e3dbc8; }

/* The same palette continues through all 17 service detail pages. */
.feature-grid { gap: clamp(12px, 1.5vw, 20px); background: transparent; }
.feature-card {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal-soft);
  border-top: 3px solid var(--gold);
}
.feature-card > span { color: #d4ae39; }
.feature-card h3 { color: var(--canvas); }
.feature-card p { color: var(--dark-muted); }
.calculator-section {
  color: var(--charcoal);
  background: var(--canvas-deep);
  border-block: 1px solid var(--light-line);
}
.calc-copy .eyebrow { color: var(--gold-dark); }
.calc-copy .eyebrow span { background: var(--gold-dark); }
.calc-copy > p { color: var(--body-muted); }
.calculator {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal);
  box-shadow: 0 24px 60px rgba(23, 25, 26, .14);
}
.calculator .btn-gold { color: var(--charcoal); }
.comparison-table b { color: var(--gold-dark); }
.comparison-table span { color: var(--body-muted); }
.proof-section {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal);
}
.proof-copy { background: var(--charcoal); }
.proof-copy li { border-bottom-color: var(--dark-line); }
.proof-copy ul { border-top-color: var(--dark-line); }
.faq-list summary { color: var(--charcoal); }
.faq-list summary span { color: var(--gold-dark); }
.faq-list p { color: var(--body-muted); }

/* Utility surfaces are deliberately dark so inputs and overlays remain calm. */
.lead-dialog, .guide-panel {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: var(--charcoal);
}
.dialog-grid > div:first-child { color: var(--charcoal); background: var(--canvas); }
.dialog-grid > div:first-child .eyebrow { color: var(--gold-dark); }
.dialog-grid > div:first-child .eyebrow span { background: var(--gold-dark); }
.lead-form label { color: #ebe9e2; }
.lead-form input, .lead-form select, .guide-form input { background: #26292a; color: var(--canvas); border-color: var(--dark-line); }
.guide-panel { border-color: rgba(191, 155, 46, .65); }
.guide-messages p { background: #2b2e2f; }
.guide-suggestions button { color: #e6e4dd; }
.guide-launch { box-shadow: 0 14px 36px rgba(23, 25, 26, .25); }
.btn-ghost { border-color: currentColor; }

.footer {
  --line: var(--dark-line);
  --muted: var(--dark-muted);
  color: var(--canvas);
  background: #121415;
}
.footer > div { color: var(--dark-muted); }
.footer-end b { color: var(--canvas); }
.footer a:hover { color: #e2bd45; }

.not-found { color: var(--charcoal); background: var(--canvas); }
.not-found .eyebrow { color: var(--gold-dark); }
.not-found h1 em { color: var(--gold-dark); }

@media (max-width: 1000px) {
  .menu-toggle span { background: var(--charcoal); }
  .mobile-menu details a { color: #e5e2da; }
}
@media (max-width: 760px) {
  .hero-shade { background: linear-gradient(0deg, rgba(17, 19, 20, .96), rgba(17, 19, 20, .35) 87%); }
  .hero h1, .service-hero h1, .category-hero h1 { max-width: none; }
  .sector-grid, .feature-grid { gap: 12px; }
  .sector-links a { font-size: .9rem; }
  .image-ribbon { padding-inline: 22px; }
  .industry-row:hover, .service-directory-row:hover { padding-inline: 8px; }
}

/* Futuristic direction: a quiet interface grid over real UAE footage. */
.site-header {
  min-height: 84px;
  background: var(--canvas);
  border-bottom: 1px solid var(--light-line);
  box-shadow: 0 12px 38px rgba(23, 25, 26, .08);
}
.site-header.header-solid, .site-header.menu-open {
  background: var(--canvas);
}
.primary-nav { gap: clamp(20px, 2.7vw, 42px); }
.primary-nav a, .nav-services { position: relative; font-size: .9rem; letter-spacing: .015em; }
.primary-nav a::after, .nav-services::after {
  content: '';
  position: absolute;
  inset: auto 0 5px;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.primary-nav a:hover::after, .nav-services:hover::after, .site-header.menu-open .nav-services::after { transform: scaleX(1); }
.header-cta { border-radius: 2px; background: transparent; transition: background .25s ease, transform .25s ease; }
.header-cta:hover { transform: translateY(-2px); background: rgba(191, 155, 46, .13); }
.hero { min-height: 100svh; isolation: isolate; }
.hero-media video { filter: saturate(.7) contrast(1.15); }
.hero-shade {
  background: linear-gradient(91deg, rgba(10, 12, 13, .94) 0%, rgba(10, 12, 13, .7) 47%, rgba(10, 12, 13, .28)),
    linear-gradient(0deg, rgba(10, 12, 13, .83), transparent 59%);
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 233, .075) 1px, transparent 1px),
    linear-gradient(0deg, rgba(242, 240, 233, .075) 1px, transparent 1px);
  background-size: clamp(74px, 9vw, 150px) clamp(74px, 9vw, 150px);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 75%);
}
.hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  inset: 112px var(--pad) 46px;
  border: 1px solid rgba(242, 240, 233, .17);
  border-top: 0;
}
.hero-copy { z-index: 2; max-width: 1050px; }
.hero-copy h1 {
  max-width: 14ch;
  margin: 26px 0;
  font-size: clamp(3.7rem, 8.3vw, 8.7rem);
  letter-spacing: -.07em;
  text-shadow: 0 14px 50px rgba(0, 0, 0, .2);
}
.hero-copy h1 em { color: #e7bf47; }
.hero .eyebrow { color: #e7dfca; font-weight: 700; }
.hero .eyebrow span { width: 55px; box-shadow: 0 0 18px rgba(226, 189, 69, .75); }
.hero-lede { max-width: 630px; font-size: clamp(1.05rem, 1.55vw, 1.25rem); }
.hero-actions .btn-gold, .contact-band .btn, .calculator .btn-gold {
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.hero-actions .btn-gold:hover, .contact-band .btn:hover, .calculator .btn-gold:hover { transform: translateY(-3px); }
.hero-index {
  bottom: 108px;
  padding: 18px 20px;
  border: 1px solid rgba(242, 240, 233, .26);
  background: rgba(15, 17, 18, .32);
  backdrop-filter: blur(10px);
}
.scroll-cue { color: #ede9de; }
.scroll-cue i { width: 72px; box-shadow: 0 0 12px rgba(226, 189, 69, .6); }
@media (max-width: 760px) {
  .site-header { min-height: 72px; }
  .hero::after { inset: 88px 12px 20px; }
  .hero::before { background-size: 74px 74px; }
  .hero-copy h1 { max-width: none; font-size: clamp(3.15rem, 16vw, 5.6rem); }
  .hero-shade { background: linear-gradient(0deg, rgba(10, 12, 13, .96), rgba(10, 12, 13, .29) 88%); }
  .scroll-cue { bottom: 42px; }
}

/* Shared interface language across the full service and industry system. */
body { text-rendering: optimizeLegibility; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
.btn { min-height: 50px; border-radius: 2px; }
.btn-gold { box-shadow: inset 0 -2px 0 rgba(23, 25, 26, .16); }
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--page-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #eed27b);
  box-shadow: 0 0 16px rgba(226, 189, 69, .6);
  pointer-events: none;
}
.mega-menu {
  padding-top: 44px;
  padding-bottom: 50px;
  background: linear-gradient(135deg, rgba(24, 27, 28, .99), rgba(13, 15, 16, .99));
  box-shadow: 0 36px 65px rgba(0, 0, 0, .28);
}
.mega-intro { border-right: 1px solid var(--dark-line); padding-right: 22px; }
.mega-intro h2 { color: var(--canvas); }
.mega-label { color: #d4d3cd; }
.mega-col > a { min-height: 40px; align-items: center; padding: 10px 0; font-size: .84rem; line-height: 1.35; }
.mega-col > a i { transition: transform .2s ease; }
.mega-col > a:hover i { transform: translate(3px, -3px); }
.marquee {
  background: var(--canvas);
  border-color: var(--light-line);
  color: var(--charcoal);
  padding: 17px 0;
}
.marquee div { font-weight: 700; letter-spacing: .14em; font-size: .7rem; }
.marquee i { color: var(--gold-dark); }
.section { position: relative; }
.intro {
  background-image: linear-gradient(90deg, rgba(23, 25, 26, .025) 1px, transparent 1px);
  background-size: clamp(110px, 13vw, 220px) 100%;
}
.section-kicker { gap: 24px; margin-bottom: clamp(40px, 5vw, 75px); font-weight: 700; }
.section-kicker span { display: inline-flex; align-items: center; min-height: 31px; }
.section-kicker i { height: 1px; }
.intro-grid { gap: 7vw; }
.intro-grid h2, .signal-copy h2, .calc-copy h2, .proof-copy h2, .faq-section h2 {
  letter-spacing: -.062em;
  text-wrap: balance;
}
.intro-grid p { border-left: 2px solid var(--gold); padding-left: 24px; }
.sector-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #222627, #17191a 68%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
.sector-card::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-top: 2px solid #d8b54b;
  border-right: 2px solid #d8b54b;
  pointer-events: none;
}
.sector-card:hover { transform: translateY(-6px); border-color: rgba(191, 155, 46, .65); box-shadow: 0 24px 60px rgba(23, 25, 26, .19); }
.sector-image { aspect-ratio: 16 / 7.6; }
.sector-image img { filter: saturate(.66) contrast(1.12); transition-duration: 1s; }
.sector-card:hover .sector-image img { transform: scale(1.07); filter: saturate(.9) contrast(1.08); }
.sector-image > span { color: #ead082; text-shadow: 0 4px 25px rgba(0, 0, 0, .45); }
.sector-body h3 { font-size: clamp(1.45rem, 2.15vw, 2.2rem); line-height: 1.18; }
.sector-links { margin-top: 34px; }
.sector-links a { min-height: 49px; align-items: center; line-height: 1.35; transition: color .2s ease, padding .2s ease; }
.sector-links a:hover { padding-left: 8px; }
.sector-links i { font-size: 1.05rem; }
.signal-section { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.signal-copy { position: relative; }
.signal-copy::before {
  content: '';
  position: absolute;
  top: clamp(80px, 10vw, 150px);
  left: var(--pad);
  width: 70px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(226, 189, 69, .65);
  transform: translateY(-27px);
}
.signal-copy li { align-items: baseline; font-size: 1.03rem; }
.signal-copy li span { min-width: 26px; font-weight: 700; }
.signal-visual video { filter: saturate(.68) contrast(1.14); }
.phone-overlay { min-width: 190px; padding: 22px 24px; border-color: rgba(226, 189, 69, .46); }
.industry-section { background: var(--canvas); }
.industry-row { min-height: 130px; border-bottom-width: 1px; }
.industry-row:hover {
  color: var(--canvas);
  background: var(--charcoal);
  padding-inline: 24px;
}
.industry-row:hover h3, .industry-row:hover p { color: var(--canvas); }
.industry-row:hover > span, .industry-row:hover > i { color: #e6bf4c; }
.image-ribbon figure { isolation: isolate; }
.image-ribbon figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 12, 13, .52), transparent 45%);
}
.image-ribbon figcaption { z-index: 1; border-left: 2px solid var(--gold); }
.contact-band {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 94% 14%, rgba(191, 155, 46, .17), transparent 33%), var(--charcoal);
}
.contact-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 233, .04) 1px, transparent 1px);
  background-size: 14% 100%;
}
.contact-band > * { position: relative; z-index: 1; }
.contact-band h2 { max-width: 13ch; text-wrap: balance; }

/* Inner routes carry the same visual system into useful page content. */
.service-hero, .category-hero { isolation: isolate; }
.service-hero::before, .category-hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 233, .05) 1px, transparent 1px);
  background-size: clamp(90px, 10vw, 170px) 100%;
  mask-image: linear-gradient(90deg, black, transparent 82%);
}
.service-hero-media img, .category-image img { filter: saturate(.68) contrast(1.12); }
.service-hero-copy h1, .category-copy h1 { max-width: 13ch; letter-spacing: -.065em; text-wrap: balance; }
.service-hero-copy > p:last-of-type, .category-copy > p:last-child { max-width: 670px; }
.back-link { min-height: 38px; font-size: .9rem; }
.service-mark { padding-left: 30px; border-left: 1px solid rgba(226, 189, 69, .55); }
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  background: linear-gradient(142deg, #25292a, #191b1c 70%);
  border-top-color: #caa43a;
  transition: transform .3s ease, background .3s ease;
}
.feature-card:hover { transform: translateY(-5px); background: linear-gradient(142deg, #303435, #1d2021 70%); }
.feature-card::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-top: 1px solid rgba(226, 189, 69, .8);
  border-right: 1px solid rgba(226, 189, 69, .8);
}
.feature-glyph { opacity: .88; }
.calculator-section { background: #e9e5dc; }
.calculator { position: relative; border: 1px solid rgba(191, 155, 46, .55); }
.calculator::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 60px;
  height: 2px;
  background: #e6bf4c;
}
.calculator label { font-size: 1rem; }
.calculator input[type='range'] { cursor: pointer; }
.calc-result b { letter-spacing: -.05em; }
.comparison-table > div { min-height: 68px; align-items: center; }
.comparison-table > div:first-child { color: var(--charcoal); font-weight: 700; }
.comparison-table b { color: #785d17; }
.comparison-table > div:not(:first-child):hover { background: var(--canvas-deep); padding-inline: 14px; }
.comparison-table > div { transition: background .25s ease, padding .25s ease; }
.proof-image { position: relative; overflow: hidden; min-width: 0; }
.signal-copy, .signal-visual { min-width: 0; }
.proof-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(242, 240, 233, .16); }
.proof-copy { min-width: 0; border-left: 2px solid rgba(191, 155, 46, .7); }
.faq-list summary { min-height: 45px; align-items: center; }
.faq-list summary span { transition: transform .25s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.service-directory-row { min-height: 132px; }
.service-directory-row:hover { color: var(--canvas); background: var(--charcoal); padding-inline: 24px; }
.service-directory-row:hover h2, .service-directory-row:hover p { color: var(--canvas); }
.service-directory-row:hover > span, .service-directory-row:hover > i { color: #e6bf4c; }
.lead-dialog { border-color: rgba(226, 189, 69, .5); box-shadow: 0 40px 110px rgba(0, 0, 0, .45); }
.lead-form input:focus, .lead-form select:focus, .guide-form input:focus { border-color: #d9b544; outline: 1px solid #d9b544; }
.guide-launch { border: 1px solid #d2b045; background: #c7a43c; }
.guide-panel { border-radius: 3px; }
.guide-suggestions button { min-height: 35px; border-radius: 2px; }
.guide-suggestions button:hover { border-color: var(--gold); color: var(--canvas); }
.footer { border-top: 3px solid var(--gold); }
.footer a { min-height: 28px; }

/* A standalone product route sits alongside the existing top-level navigation. */
.primary-nav { gap: clamp(16px, 2.1vw, 32px); white-space: nowrap; }
.primary-nav .nav-product { color: var(--gold-dark); }
.primary-nav .nav-product::after { background: var(--gold-dark); }
.mobile-product-link {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 27px 0 12px;
  border: 1px solid rgba(226, 189, 69, .7);
  padding: 22px 48px 22px 20px;
  background: linear-gradient(125deg, rgba(191, 155, 46, .16), rgba(191, 155, 46, .03));
}
.mobile-product-link span { color: #d2b14c; font-size: .62rem; letter-spacing: .17em; }
.mobile-product-link b { font-size: 1.14rem; font-weight: 500; }
.mobile-product-link i { position: absolute; right: 21px; top: 50%; transform: translateY(-50%); color: #d2b14c; font-style: normal; }
.mobile-product-link:hover { background: rgba(191, 155, 46, .2); }
@media (max-width: 1180px) and (min-width: 1001px) {
  .site-header { padding-inline: 28px; }
  .brand img { width: 170px; }
  .primary-nav { gap: 14px; font-size: .8rem; }
  .header-cta { padding: 11px 13px; font-size: .76rem; }
}

@media (max-width: 1000px) {
  .mobile-menu { background: linear-gradient(135deg, #202324, #121415); }
  .mobile-menu summary { min-height: 64px; align-items: center; cursor: pointer; }
  .mobile-menu details a { min-height: 44px; align-items: center; }
  .mobile-menu-foot a, .mobile-menu-foot button { min-height: 48px; }
  .signal-section { grid-template-columns: minmax(0, 1fr); }
  .proof-section { grid-template-columns: minmax(0, 1fr); }
  .proof-copy { border-left: 0; border-top: 2px solid rgba(191, 155, 46, .7); }
}
@media (max-width: 760px) {
  html { overflow-x: clip; }
  .section-kicker { margin-bottom: 36px; }
  .intro-grid p { padding-left: 17px; }
  .sector-card:hover, .feature-card:hover { transform: none; }
  .sector-image { aspect-ratio: 16 / 9; }
  .sector-body h3 { font-size: 1.5rem; }
  .signal-copy::before { left: 22px; top: 80px; }
  .industry-row, .service-directory-row { min-height: 112px; }
  .industry-row:hover, .service-directory-row:hover { padding-inline: 8px; }
  .service-hero-copy h1, .category-copy h1 { max-width: none; }
  .feature-card { min-height: 320px; }
  .comparison-table > div { gap: 15px; font-size: .88rem; }
  .contact-band h2 { max-width: 18ch; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .header-cta, .sector-card, .feature-card, .industry-row, .service-directory-row,
  .hero-actions .btn-gold, .contact-band .btn, .calculator .btn-gold { transition: none !important; }
}

/* Version 02: a quieter, more editorial studio system. */
:root {
  --sans: 'DM Sans', Arial, sans-serif;
  --display: 'Sora', 'DM Sans', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}
body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-family: var(--display); }
h1, h2 { font-weight: 500; }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; }
.hero-copy h1 { max-width: 13ch; font-size: clamp(3.7rem, 7.6vw, 8.1rem); line-height: .98; letter-spacing: -.075em; }
.hero-lede, .intro-grid p, .category-copy > p:last-child, .service-hero-copy > p:last-of-type { line-height: 1.75; }
.section { padding-block: clamp(100px, 10vw, 165px); }
.section-kicker { letter-spacing: .17em; text-transform: uppercase; font-size: .7rem; }
.intro-grid { align-items: start; }
.intro-grid h2 { max-width: 13ch; font-size: clamp(2.65rem, 4.7vw, 5.2rem); line-height: 1.04; }
.intro-grid p { max-width: 610px; font-size: clamp(1.05rem, 1.3vw, 1.23rem); }
.sector-card { box-shadow: 0 24px 70px rgba(23, 25, 26, .08); }
.sector-image { overflow: hidden; }
.sector-image img { transition: transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.sector-card:hover .sector-image img { transform: scale(1.04); filter: saturate(.9) contrast(1.07); }
.sector-links a:hover { padding-left: 8px; }
.industry-row h3, .service-directory-row h2 { letter-spacing: -.045em; }

.primary-nav .nav-industries {
  position: relative; padding: 12px 0; border: 0; background: none;
  color: inherit; cursor: pointer; font-size: .9rem; letter-spacing: .015em;
}
.nav-industries span { color: var(--gold-dark); margin-left: 7px; }
.primary-nav .nav-industries::after {
  content: ''; position: absolute; inset: auto 0 5px; height: 1px;
  background: var(--gold-dark); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.primary-nav .nav-industries:hover::after, .site-header.industries-open .nav-industries::after { transform: scaleX(1); }
.site-header.industries-open { background: var(--canvas); }
.mega-menu { max-height: calc(100svh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.mega-intro h2 { font-family: var(--serif); font-size: clamp(2.4rem, 3.1vw, 4rem); line-height: .98; }
.mega-col > a { padding-block: 9px; }
.industry-mega {
  position: absolute; top: 100%; left: 0; right: 0; display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 2fr); gap: clamp(30px, 6vw, 100px);
  padding: clamp(35px, 4vw, 65px) var(--pad);
  max-height: calc(100svh - 84px); overflow-y: auto;
  color: var(--canvas); background: #1a1c1d; border-bottom: 1px solid var(--gold);
  box-shadow: 0 36px 65px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(-15px); transition: .28s ease;
}
.site-header.industries-open .industry-mega { opacity: 1; visibility: visible; transform: none; }
.industry-mega-intro { border-right: 1px solid var(--dark-line); padding-right: 34px; }
.industry-mega-intro p { margin: 0; color: #d4d3cd; text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; }
.industry-mega-intro h2 { max-width: 9ch; margin: 22px 0 36px; font: 400 clamp(2.5rem, 3.8vw, 4.7rem)/.95 var(--serif); }
.industry-mega-intro a { color: #e7bf47; font-size: .85rem; }
.industry-mega-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 26px; }
.industry-mega-links a { display: grid; grid-template-columns: 32px 1fr 15px; gap: 10px; align-items: center; min-height: 76px; border-bottom: 1px solid var(--dark-line); font-size: .93rem; line-height: 1.35; transition: color .2s ease, padding .2s ease; }
.industry-mega-links a:hover { color: #e7bf47; padding-left: 6px; }
.industry-mega-links span, .industry-mega-links i { color: #d4af3e; font-style: normal; font-size: .78rem; }

.studio-note { background: var(--canvas-deep); }
.studio-note-grid { display: grid; grid-template-columns: .5fr 1.5fr; gap: 8vw; }
.studio-note-index { align-self: start; margin: 8px 0 0; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.studio-note h2 { margin: 0 0 30px; max-width: 13ch; color: var(--charcoal); font-size: clamp(3rem, 5.3vw, 6rem); line-height: 1.03; letter-spacing: -.06em; }
.studio-note-grid > div > p { max-width: 660px; color: var(--body-muted); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.75; }
.studio-note a { display: inline-flex; gap: 32px; margin-top: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dark); color: var(--charcoal); font-weight: 600; }
.studio-note a span { color: var(--gold-dark); transition: transform .2s ease; }
.studio-note a:hover span { transform: translate(3px,-3px); }

.about-story .intro-grid { margin-bottom: clamp(60px, 7vw, 110px); }
.about-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.about-principles article { min-height: 280px; display: flex; flex-direction: column; padding: clamp(25px, 3vw, 45px); background: var(--charcoal); color: var(--canvas); border-top: 3px solid var(--gold); }
.about-principles article > span { color: #e1bc48; font: 400 2rem/1 var(--serif); }
.about-principles h3 { margin: auto 0 14px; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.25; }
.about-principles p { margin: 0; color: var(--dark-muted); }
.about-presence { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: clamp(100px, 10vw, 165px) var(--pad); background: var(--charcoal); color: var(--canvas); }
.about-presence h2 { max-width: 13ch; font-size: clamp(3rem, 5vw, 5.6rem); line-height: 1.04; letter-spacing: -.06em; }
.about-presence p:last-child { max-width: 560px; color: var(--dark-muted); font-size: 1.13rem; line-height: 1.7; }
.about-offices { display: grid; align-content: start; gap: 17px; padding-top: 10px; }
.about-offices > b { margin-top: 16px; color: #d2ae3f; text-transform: uppercase; letter-spacing: .17em; font-size: .7rem; }
.about-offices strong { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 500; }
.about-offices > div { display: flex; flex-wrap: wrap; gap: 10px; }
.about-offices span { padding: 10px 15px; border: 1px solid var(--dark-line); color: #e7e5df; font-size: .9rem; }

@media (max-width: 1180px) and (min-width: 1001px) {
  .primary-nav { gap: 14px; }
  .primary-nav .nav-industries { font-size: .8rem; }
  .industry-mega-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .industry-mega { display: none; }
  .mobile-industry-list { margin-top: 12px; }
}
@media (max-width: 760px) {
  .hero-copy h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); line-height: .99; }
  .section { padding-block: 92px; }
  .intro-grid h2 { font-size: clamp(2.55rem, 10vw, 3.6rem); }
  .studio-note-grid, .about-presence { grid-template-columns: 1fr; }
  .studio-note-grid { gap: 30px; }
  .studio-note h2, .about-presence h2 { font-size: clamp(3rem, 11vw, 4.2rem); }
  .about-principles { grid-template-columns: 1fr; }
  .about-principles article { min-height: 245px; }
  .about-presence { gap: 45px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-image img, .studio-note a span, .industry-mega-links a { transition: none !important; }
}