/* ============================================================
   CAULTEX TECHNOLOGY — Website stylesheet
   Production recreation of the Caultex UI kit.
   Tokens are the source of truth (sampled from the logo);
   component rules are ported 1:1 from the design prototype.
   ============================================================ */


:root {
  /* ---------- BRAND BLUE (sampled & refined from the logo) ---------- */
  --blue-100: #E2F1FF;
  --blue-200: #B9DEFF;
  --blue-300: #7CC4FF;
  --blue-400: #3BA4F5;   /* electric accent / glow */
  --blue-500: #1E8BE0;
  --blue-600: #0072C6;   /* PRIMARY brand azure */
  --blue-700: #00558F;
  --blue-800: #003B70;
  --blue-900: #002A52;   /* deep navy */

  /* ---------- INK / NEUTRALS (cool, blue-tinted) ---------- */
  --ink-950: #060A11;    /* dramatic datacenter black */
  --ink-900: #0B121C;
  --ink-800: #131C28;
  --ink-700: #1E2A39;
  --slate-600: #3A4A5E;
  --slate-500: #5A6B80;
  --slate-400: #8595A8;
  --slate-300: #B4C0CE;
  --slate-200: #D7DEE7;
  --slate-100: #ECF1F6;
  --paper:     #F6F9FC;  /* off-white page */
  --white:     #FFFFFF;

  /* ---------- SEMANTIC STATUS ---------- */
  --success: #1FA971;
  --warning: #E8A317;
  --danger:  #E5484D;
  --info:    var(--blue-600);

  /* ---------- SIGNATURE GRADIENTS ---------- */
  --grad-azure: linear-gradient(135deg, #1E8BE0 0%, #0072C6 55%, #00558F 100%);
  --grad-ink:   linear-gradient(180deg, #0B121C 0%, #060A11 100%);
  --grad-glow:  radial-gradient(120% 120% at 50% 0%, rgba(59,164,245,0.22) 0%, rgba(6,10,17,0) 60%);

  /* ---------- SEMANTIC SURFACE / TEXT (light "business" context) ---------- */
  --bg:          var(--paper);
  --surface:     var(--white);
  --surface-alt: var(--slate-100);
  --border:      var(--slate-200);
  --border-strong: var(--slate-300);
  --fg1:         var(--ink-900);   /* primary text */
  --fg2:         var(--slate-500); /* secondary text */
  --fg3:         var(--slate-400); /* muted / captions */
  --accent:      var(--blue-600);
  --accent-fg:   var(--white);
  --link:        var(--blue-700);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (1.250 major-third, desktop) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  46px;
  --text-4xl:  60px;
  --text-5xl:  76px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;

  /* tracking — wide tracked mono is the brand's "technical label" tic */
  --track-label: 0.18em;
  --track-tight: -0.02em;

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- ELEVATION / SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(6,10,17,0.08);
  --shadow-md: 0 6px 18px rgba(6,10,17,0.10);
  --shadow-lg: 0 18px 48px rgba(6,10,17,0.16);
  --shadow-glow: 0 0 0 1px rgba(59,164,245,0.35), 0 8px 32px rgba(30,139,224,0.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;
}

/* ===========================================================
   BASE
   =========================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
section { position: relative; }

/* Lucide icon sizing inside React-less markup */
.lic { width: 24px; height: 24px; stroke-width: 1.75; }

/* ===========================================================
   SEMANTIC TYPE
   =========================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--blue-600);
}
h1, .h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--fg1); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--track-tight); color: var(--fg1); margin: 0; }
h3, .h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--fg1); margin: 0; }
h4, .h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-snug); color: var(--fg1); margin: 0; }
p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg2); }
.lead { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg2); }
.caption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg3); }
code, .code { font-family: var(--font-mono); font-size: 0.92em; color: var(--blue-700); }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; border: none;
  border-radius: var(--r-sm); white-space: nowrap; padding: 13px 22px;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; letter-spacing: .01em;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), background var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn .lic { width: 17px; height: 17px; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 8px 22px rgba(0,114,198,.30); }
.btn-primary:hover { background: var(--blue-700); box-shadow: 0 10px 28px rgba(0,114,198,.40); }
.btn-ghost { background: transparent; color: var(--blue-700); box-shadow: inset 0 0 0 1.5px var(--blue-600); }
.btn-ghost:hover { background: var(--blue-100); }
.btn-ondark { background: #fff; color: var(--ink-900); }
.btn-ondark:hover { background: var(--blue-100); }
.btn-ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.btn-ghost-dark:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }

/* ===========================================================
   EYEBROW (the // mono label)
   =========================================================== */
.eb { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-600); display: inline-flex; align-items: center; gap: 8px; }
.eb.on-dark { color: var(--blue-300); }
.eb::before { content: "//"; opacity: .6; }

/* ===========================================================
   DATACENTER VISUAL
   =========================================================== */
.dc-visual {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: #05090f;
  box-shadow: inset 0 0 0 1px rgba(80,185,255,.18), var(--shadow-lg);
}
.dc-visual > * { position: relative; z-index: 1; }
.dc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.dc-visual .dc-grade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(118deg, rgba(5,12,24,.42) 0%, rgba(5,12,24,.05) 45%, rgba(8,20,40,.18) 100%); }
.dc-visual .dc-caption-grad { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(4,8,15,.72) 0%, transparent 34%); }
.dc-visual.square-tl { border-radius: 0; }
.dc-tag { position: absolute; left: 18px; bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); z-index: 2; display: flex; align-items: center; gap: 7px; }
.dc-tag .lic { width: 14px; height: 14px; }

/* ===========================================================
   CARDS
   =========================================================== */
.card {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card.no-lift:hover { transform: none; box-shadow: var(--shadow-md); }

/* ===========================================================
   INPUTS
   =========================================================== */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg2); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--slate-200); background: #fff; color: var(--fg1);
  transition: border var(--dur-fast), box-shadow var(--dur-fast); width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,139,224,.18); }

/* ===========================================================
   SECTION RHYTHM
   =========================================================== */
.sec-pad { padding: 96px 0; }
.sec-dark { background: var(--ink-950); color: #fff; background-image: var(--grad-glow); }
.sec-dark p { color: var(--slate-300); }
.sec-white { background: var(--white); }
.bordered-top { border-top: 1px solid var(--slate-200); }
.center { text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: all var(--dur-mid) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--slate-200);
}
.site-header .wrap { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { cursor: pointer; display: flex; align-items: center; margin-left: -26px; }
.brand img { height: 52px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: 6px; white-space: nowrap; color: var(--fg1);
  background: transparent; transition: all var(--dur-fast);
}
.nav-link:hover { background: var(--blue-100); color: var(--blue-700); }
.nav-link.active { color: var(--blue-700); background: var(--blue-100); }
.nav-gap { width: 16px; }

/* ===========================================================
   EXISTING-CUSTOMER UTILITY BAR (below the main nav)
   =========================================================== */
.cust-bar { background: var(--ink-900); border-bottom: 1px solid var(--ink-700); }
.cust-bar .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
.cust-bar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); }
.cust-bar-actions { display: flex; gap: 10px; }
.cust-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: #fff; padding: 7px 14px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.cust-btn:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.cust-btn .lic { width: 15px; height: 15px; color: var(--blue-300); }
.cust-dropdown { position: relative; display: inline-flex; }
button.cust-btn { background: none; cursor: pointer; font: inherit; }
.cust-menu { position: absolute; right: 0; top: calc(100% + 7px); min-width: 210px; background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-sm); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60; box-shadow: var(--shadow-lg); }
.cust-dropdown:hover .cust-menu, .cust-dropdown:focus-within .cust-menu { display: flex; }
.cust-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; font-family: var(--font-display); font-size: 13px; padding: 7px 11px; border-radius: 6px; text-decoration: none; }
.cust-menu a:hover { background: rgba(255,255,255,.08); }
.cust-menu a span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-400); }
@media (max-width: 600px) {
  .cust-bar-label { display: none; }
  .cust-bar .wrap { justify-content: center; gap: 10px; }
  .cust-btn { font-size: 12.5px; padding: 7px 11px; }
}

/* ===========================================================
   HERO / STATS / GENERAL LAYOUT HELPERS
   =========================================================== */
.hero-grid { display: grid; gap: 56px; align-items: center; }
.hero-grid.home { grid-template-columns: 1.05fr .95fr; }
.hero-grid.even { grid-template-columns: 1fr 1fr; gap: 52px; }
.hero-grid.contact { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }

.hero-h1 { font-family: var(--font-display); font-weight: 700; color: #fff; margin: 0; }
.hero-lead { line-height: 1.6; margin-top: 22px; }

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

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat-value { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--blue-300); }
.stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); margin-top: 10px; }

/* ===========================================================
   SECTION HEAD
   =========================================================== */
.section-head { max-width: 960px; margin-bottom: 48px; }
.section-head .intro { max-width: 760px; }
.section-head.center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .intro { max-width: none; }
.section-head h2 { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 16px 0 0; color: var(--fg1); text-wrap: balance; }
.section-head.on-dark h2 { color: #fff; }
.section-head .intro { font-size: 18px; line-height: 1.6; margin-top: 16px; color: var(--fg2); }
.section-head.on-dark .intro { color: var(--slate-300); }

/* ===========================================================
   SERVICE CARD
   =========================================================== */
.service-card { padding: 26px; }
.service-card.dark { background: var(--ink-900); border: 1px solid var(--ink-700); background-image: var(--grad-glow); }
.svc-chip { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--blue-100); color: var(--blue-700); }
.service-card.dark .svc-chip { background: rgba(59,164,245,.15); color: var(--blue-300); }
.svc-chip .lic { width: 24px; height: 24px; }
.service-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--fg1); }
.service-card.dark h3 { color: #fff; }
.service-card p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--fg2); }
.service-card.dark p { color: var(--slate-300); }

/* ===========================================================
   HOME: CREDENTIALS / COVERAGE STRIP
   =========================================================== */
.creds-strip { background: var(--white); border-bottom: 1px solid var(--slate-200); padding: 34px 0; }
.creds-strip .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.creds-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 38px; }
.creds-logos img { height: 34px; width: auto; opacity: .8; filter: saturate(.92); transition: opacity var(--dur-fast); }
.creds-logos img:hover { opacity: 1; }
.creds-coverage { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }

/* ===========================================================
   HOME: DUAL-AUDIENCE SPLIT CARDS
   =========================================================== */
.split-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.split-card .split-body { padding: 30px; }
.split-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 12px 0 10px; }
.split-card p { font-size: 15.5px; line-height: 1.6; color: var(--fg2); margin: 0 0 20px; }

/* ===========================================================
   WORK / CASE STUDIES
   =========================================================== */
.cs-logo { height: 52px; display: flex; align-items: center; margin-bottom: 16px; }
.cs-logo img { max-height: 46px; max-width: 180px; width: auto; object-fit: contain; }
/* white-only logos (e.g. SES) recoloured to dark ink so they read on the light card */
.cs-logo img.cs-mono { filter: brightness(0) saturate(100%); opacity: .82; }
.cs-logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--fg1); }
.proj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.proj-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--blue-700); background: var(--blue-100); padding: 4px 10px; border-radius: var(--r-pill); }
.work-note { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 16px 20px; border: 1px dashed var(--slate-300); border-radius: var(--r-md); background: var(--slate-100); }
.work-note .lic { width: 18px; height: 18px; color: var(--blue-600); flex: none; }
.work-note p { margin: 0; font-size: 14.5px; color: var(--fg2); }

/* ===========================================================
   CTA BAND
   =========================================================== */
.cta-band { padding: 84px 0; }
.cta-inner { max-width: 720px; }
.cta-inner h2 { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 14px; color: #fff; }
.cta-inner p { font-size: 18px; color: var(--slate-300); margin: 0 auto 30px; max-width: 520px; }
.cta-inner .btn-row { justify-content: center; }

/* ===========================================================
   DATA CENTRE: PROCESS STEPS
   =========================================================== */
.process-step { display: flex; gap: 18px; padding-bottom: 22px; }
.step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-600); color: #fff; font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.process-step .step-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.process-step p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); }

/* ===========================================================
   BUSINESS: PRICING + TESTIMONIAL
   =========================================================== */
.plan { padding: 28px; display: flex; flex-direction: column; }
.plan.hot { border: 1.5px solid var(--blue-500); box-shadow: var(--shadow-glow); }
.plan-badge { align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); background: var(--blue-100); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.plan-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.plan-price { margin: 12px 0 18px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.plan-price .per { font-family: var(--font-mono); font-size: 12px; color: var(--fg3); }
.plan-feats { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-feat { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--fg2); }
.plan-feat .lic { width: 18px; height: 18px; color: var(--blue-600); }
.plan-cta { margin-top: 22px; }

.testimonial { padding: 48px 44px; background: var(--ink-900); background-image: var(--grad-glow); border: 1px solid var(--ink-700); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.testimonial .quote-chip { width: 56px; height: 56px; border-radius: 14px; background: rgba(59,164,245,.16); color: var(--blue-300); display: flex; align-items: center; justify-content: center; }
.testimonial blockquote { text-wrap: balance; font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.4; color: #fff; margin: 0; }
.testimonial .attribution { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--slate-300); margin-top: 16px; }

/* ===========================================================
   ABOUT: VALUE CARDS
   =========================================================== */
.value-card { padding: 28px; display: flex; gap: 18px; }
.value-chip { flex: none; width: 46px; height: 46px; border-radius: 11px; background: var(--blue-100); color: var(--blue-700); display: flex; align-items: center; justify-content: center; }
.value-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.value-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-channels { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
.channel { display: flex; gap: 14px; align-items: center; }
.channel .chip { width: 44px; height: 44px; border-radius: 10px; background: rgba(59,164,245,.14); color: var(--blue-300); display: flex; align-items: center; justify-content: center; }
.channel .chan-a { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff; }
.channel .chan-b { display: block; margin-top: 2px; font-size: 13.5px; color: var(--slate-300); }

.contact-card { padding: 32px; }
.svc-picker { display: flex; gap: 10px; }
.svc-opt { flex: 1; padding: 11px 8px; border-radius: 8px; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 500; border: 1.5px solid var(--slate-200); background: #fff; color: var(--fg2); transition: all var(--dur-fast); }
.svc-opt.active { border: 1.5px solid var(--blue-500); background: var(--blue-100); color: var(--blue-700); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-disclaimer { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); text-align: center; margin: 0; }
.form-success { text-align: center; padding: 48px 12px; }
.form-success .check { width: 60px; height: 60px; border-radius: 50%; background: var(--success); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.form-success h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.form-success p { color: var(--fg2); margin: 0 0 22px; }
.hidden { display: none !important; }

/* ---- Contact Form 7 integration (styled to match the design) ---- */
.contact-card .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.contact-card .field .wpcf7-form-control-wrap { display: block; }
.contact-card .wpcf7-submit { align-self: flex-start; margin-top: 4px; }
.contact-card input[aria-invalid="true"], .contact-card textarea[aria-invalid="true"] { border-color: var(--danger) !important; }
.wpcf7-not-valid-tip { font-family: var(--font-body); font-size: 12.5px; color: var(--danger); margin-top: 6px; }
.wpcf7-response-output { font-family: var(--font-body); font-size: 14px; line-height: 1.5; border-radius: var(--r-sm); padding: 11px 14px !important; margin: 4px 0 0 !important; border: 1px solid var(--slate-200); }
form.wpcf7-form.invalid .wpcf7-response-output, form.wpcf7-form.unaccepted .wpcf7-response-output, form.wpcf7-form.spam .wpcf7-response-output { border-color: var(--danger); color: #b23439; background: rgba(229,72,77,.06); }
form.wpcf7-form.sent .wpcf7-response-output { border-color: var(--success); color: #0f7a52; background: rgba(31,169,113,.08); }
.contact-card .wpcf7-spinner { margin: 0 0 0 10px; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer { padding-top: 72px; padding-bottom: 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--ink-700); }
.footer-brand img { height: 32px; margin-bottom: 18px; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; color: var(--slate-300); max-width: 300px; margin: 0; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social span { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: var(--slate-300); }
.footer-col .col-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 16px; }
.footer-col .col-links { display: flex; flex-direction: column; gap: 11px; }
.footer-col .col-links a { cursor: pointer; font-size: 14.5px; color: var(--slate-300); }
.footer-col .col-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--slate-400); }
.footer-bottom .status { display: flex; align-items: center; gap: 8px; }
.footer-bottom .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 980px) {
  .hero-grid.home, .hero-grid.even, .hero-grid.contact { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .testimonial { grid-template-columns: 1fr; gap: 20px; text-align: left; }
}
@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .sec-pad { padding: 64px 0; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}
@media (max-width: 720px) {
  .nav .nav-link { display: none; }
  .brand { margin-left: 0; }
  .brand img { height: 42px; }
  .hero-h1 { font-size: 40px !important; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================================
   BLOG  (index, archive, single)
   ============================================================ */
.blog-hero { padding: 132px 0 64px; }
.blog-hero-title { font-family: var(--font-display); font-size: 52px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: #fff; margin: 14px 0 0; }
.blog-hero-sub { font-size: var(--text-md); color: var(--slate-300); max-width: 640px; margin: 18px 0 0; }
.single-back.on-dark { color: var(--blue-300); margin-bottom: 20px; }

.blog-body { padding: 56px 0 96px; }

.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
.blog-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--fg2); background: var(--surface-alt); border: 1px solid var(--border); padding: 8px 14px; border-radius: var(--r-pill); transition: all var(--dur-fast); }
.blog-chip:hover { color: var(--blue-700); border-color: var(--blue-300); background: var(--blue-100); }
.blog-chip.is-active { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }
.blog-chip-n { font-family: var(--font-mono); font-size: 11px; opacity: .7; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; }
.blog-card { min-width: 0; }
.blog-card-title, .blog-card-excerpt { overflow-wrap: anywhere; }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 26px 24px; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.blog-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); background: var(--blue-100); padding: 4px 10px; border-radius: var(--r-pill); }
.blog-card-meta time { font-family: var(--font-mono); font-size: 12px; color: var(--fg3); }
.blog-card-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 12px; }
.blog-card-title a { color: var(--fg1); }
.blog-card-title a:hover { color: var(--blue-700); }
.blog-card-excerpt { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0 0 18px; flex: 1; }
.blog-card-more { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--blue-700); display: inline-flex; align-items: center; gap: 7px; }
.blog-card-more i, .blog-card-more svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.blog-card:hover .blog-card-more i, .blog-card:hover .blog-card-more svg { transform: translateX(3px); }

.blog-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.blog-pager .page-numbers { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--fg2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 15px; min-width: 44px; text-align: center; transition: all var(--dur-fast); }
.blog-pager a.page-numbers:hover { border-color: var(--blue-300); color: var(--blue-700); background: var(--blue-100); }
.blog-pager .page-numbers.current { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.blog-pager .page-numbers.dots { border: none; }

/* ---- single post ---- */
.single-post { padding: 120px 0 80px; }
.single-wrap { max-width: 760px; }
.single-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--blue-700); margin-bottom: 22px; }
.single-back i, .single-back svg { width: 16px; height: 16px; }
.single-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.single-meta time { font-family: var(--font-mono); font-size: 13px; color: var(--fg3); }
.single-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--fg1); margin: 0 0 36px; }

.post-body { font-size: 17px; line-height: 1.72; color: var(--ink-800); }
.post-body p { margin: 0 0 20px; color: var(--ink-800); }
.post-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--blue-600); }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 26px; }
.post-body li { margin: 0 0 8px; }
.post-body h2 { font-size: 26px; margin: 36px 0 14px; }
.post-body h3 { font-size: 21px; margin: 30px 0 12px; }
.post-body img, .post-body .post-figure img { max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); margin: 8px 0; box-shadow: var(--shadow-sm); }
.post-body .post-figure { float: none !important; max-width: 100% !important; margin: 24px 0 !important; }
.post-body table { max-width: 100%; }
.post-body code { font-family: var(--font-mono); font-size: 0.9em; color: var(--blue-700); background: var(--surface-alt); padding: 2px 6px; border-radius: var(--r-xs); }

.single-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--border); }
.single-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.single-nav-link { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; transition: all var(--dur-fast); }
.single-nav-link.next { text-align: right; }
.single-nav-link:hover { border-color: var(--blue-300); background: var(--blue-100); }
.single-nav-link span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.single-nav-link strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg1); line-height: 1.3; }
.single-cta { padding: 72px 0; }

@media (max-width: 720px) {
  .blog-hero-title { font-size: 38px; }
  .single-title { font-size: 32px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-card-title, .blog-card-excerpt { overflow-wrap: anywhere; }
  .single-nav { grid-template-columns: 1fr; }
  .single-nav-link.next { text-align: left; }
}

/* ============================================================
   caultex-2026 additions (appended after the base system)
   ============================================================ */

/* ---- inline icons ---- */
svg.ic { display: inline-block; vertical-align: middle; flex: none; }
.btn svg.ic { width: 17px; height: 17px; }
.svc-chip svg.ic { width: 24px; height: 24px; }
.cust-btn svg.ic { width: 15px; height: 15px; color: var(--blue-300); }
.value-chip svg.ic { width: 22px; height: 22px; }
.plan-feat svg.ic { width: 18px; height: 18px; color: var(--blue-600); }
.quote-chip svg.ic { width: 26px; height: 26px; }
.channel .chip svg.ic { width: 20px; height: 20px; }
.footer-social span svg.ic { width: 18px; height: 18px; }
.card-link svg.ic, .blog-card-more svg.ic, .single-back svg.ic { width: 16px; height: 16px; }

/* ---- accessibility ---- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--blue-600); color: #fff; padding: 10px 14px; border-radius: 6px; font-family: var(--font-display); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- header: logo never shrinks; nav never crushes it ---- */
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--slate-200); }
.site-header .wrap { height: 84px; }
.brand { flex: none; margin-left: 0; }
.brand img { height: 40px; width: auto; max-width: none; }
.nav { flex: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--fg1); border-radius: 6px; }
.nav-toggle svg.ic:last-child { display: none; }
.nav-mobile-extra { display: none; }

@media (max-width: 1080px) {
  .nav-link { padding: 8px 10px; font-size: 14px; }
  .brand img { height: 34px; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  body.nav-open .nav-toggle svg.ic:first-child { display: none; }
  body.nav-open .nav-toggle svg.ic:last-child { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 84px; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border-bottom: 1px solid var(--slate-200); padding: 12px 20px 20px; box-shadow: var(--shadow-lg); z-index: 60; }
  body.nav-open .nav { display: flex; }
  .nav .nav-link { display: block; padding: 12px 10px; font-size: 16px; }
  .nav .btn { margin-top: 8px; justify-content: center; }
  .nav-gap { display: none; }
  .nav-mobile-extra { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-200); }
  .nav-mobile-extra a { display: flex; align-items: center; gap: 8px; padding: 10px; font-family: var(--font-display); font-size: 15px; color: var(--fg2); }
  .cust-bar { display: none; }
}

/* customer bar: hover + click/keyboard */
.cust-dropdown.open .cust-menu { display: flex; }
/* the bar holds only the logins now (no label), so they sit on the right */
.cust-bar .wrap { justify-content: flex-end; }
@media (max-width: 720px) { .cust-bar-label { display: none; } }

/* ---- heroes ---- */
.hero-home { padding: 96px 0 80px; overflow: hidden; }
.hero-page { padding: 96px 0 80px; }
.hero-page.compact { padding: 80px 0 64px; }
.hero-page.light { padding-bottom: 72px; }
.hero-h1 { font-size: 52px; line-height: 1.06; letter-spacing: -.02em; margin: 18px 0 0; text-wrap: balance; }
.hero-h1.xl { font-size: 60px; line-height: 1.04; letter-spacing: -.025em; margin-top: 20px; }
.hero-h1.on-light { color: var(--fg1); }
.hero-h1 .hl { color: var(--blue-400); }
.hero-lead { font-size: 18px; color: var(--slate-300); max-width: 480px; margin-top: 20px; }
.hero-home .hero-lead { font-size: 19px; }
.hero-lead.on-light { color: var(--fg2); }
.wrap.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.wrap.narrow .hero-lead { max-width: 640px; }
.hero-narrow { max-width: 820px; }
/* narrow heroes (hub, remote support, security, case studies) keep their measure but share the page's left edge */
.hero-page > .wrap.narrow { max-width: 1200px; }
.hero-page > .wrap.narrow > * { max-width: 756px; }
.hero-narrow .hero-lead { max-width: 640px; }
.bordered-stats { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--ink-700); }
.bordered-bottom { border-bottom: 1px solid var(--slate-200); }
@media (max-width: 720px) { .hero-h1.xl { font-size: 40px !important; } .hero-home, .hero-page { padding: 56px 0 56px; } .bordered-stats { margin-top: 48px; } }

/* ---- section heads ---- */
.h2-lg { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 16px 0 0; color: var(--fg1); text-wrap: balance; }
.h2-lg.on-dark { color: #fff; }
.lead.on-dark { color: var(--slate-300); }
.lead { margin-top: 16px; font-size: 17px; }
.h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.small-note { font-size: 13.5px; color: var(--fg3); }
@media (max-width: 720px) { .h2-lg, .section-head h2 { font-size: 30px; } }

/* ---- grids ---- */
.grid-2.top { align-items: start; }
.grid-2.stretch, .grid-3.stretch { align-items: stretch; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* customer hub: four tiles, two by two */
.grid-3.hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) { .grid-3.hub-grid { grid-template-columns: 1fr; } }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; }
@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- cards ---- */
.service-card.featured { border: 1.5px solid var(--blue-500); box-shadow: var(--shadow-glow); }
.card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--blue-700); }
.card-link:hover { color: var(--blue-600); }
.hub-card { padding: 26px; display: flex; flex-direction: column; }
.hub-card .svc-chip { margin-bottom: 18px; }
.hub-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.hub-card p { font-size: 15px; line-height: 1.6; margin: 0 0 18px; flex: 1; }
.btn-row.tight { margin-top: 0; gap: 10px; }
.plan-desc { font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 10px 0 18px; }

/* ---- stat cards ---- */
.stat-card { padding: 44px; background: var(--ink-900); background-image: var(--grad-glow); border: 1px solid var(--ink-700); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.stat-card.dark { padding: 44px; border: 1px solid var(--ink-700); border-radius: 16px; background: var(--ink-900); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.stat-card .stat-value { font-size: 40px; }
@media (max-width: 720px) { .stat-card, .stat-card.dark { padding: 28px; gap: 24px 18px; } .stat-card .stat-value { font-size: 32px; } }

/* ---- trust strip + client logos ---- */
.trust-block { padding: 56px 0 96px; }
.trust-strip { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-bottom: 56px; border-bottom: 1px solid var(--slate-200); }
.trust-block .trust-strip:last-child { border-bottom: 0; padding-bottom: 0; }
.client-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 44px; }
.client-logos img { height: 40px; width: auto; max-width: 180px; object-fit: contain; opacity: .88; transition: opacity var(--dur-fast); }
.client-logos a { display: inline-flex; }
.client-logos img:hover, .client-logos a:focus-visible img { opacity: 1; }
.client-logos img.mono-logo { filter: brightness(0); opacity: .72; height: 34px; }
.case-split { padding-top: 56px; }

/* ---- check lists ---- */
.check-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg2); }
.check-list li svg.ic { width: 18px; height: 18px; color: var(--blue-600); margin-top: 2px; }
.check-list.on-dark li { color: var(--slate-300); }
.check-list.on-dark li svg.ic { color: var(--blue-300); }
.check-list.big { margin-top: 0; gap: 16px; }
.check-list.big li { font-size: 16px; line-height: 1.6; }

/* ---- steps ---- */
.steps { list-style: none; padding: 0; margin: 0; }
.process-step p { margin: 4px 0 0; }

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; }
.faq { padding: 22px 0; border-top: 1px solid var(--slate-200); }
.faq:first-child { border-top: 0; padding-top: 0; }
.faq .q { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg1); margin-bottom: 8px; }
.faq p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---- case studies ---- */
.case-list { display: flex; flex-direction: column; gap: 22px; }
.case-card { padding: 32px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.case-card .cs-logo { height: auto; margin: 0; }
.case-card .cs-logo img { max-height: 56px; max-width: 180px; }
.case-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 10px 0 10px; }
.case-card p { font-size: 15.5px; line-height: 1.65; margin: 0; }
@media (max-width: 720px) { .case-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; } }

/* ---- contact ---- */
.contact-hero { padding-bottom: 96px; }
.contact-card { padding: 32px; }
.contact-card .svc-picker { flex-wrap: wrap; margin-bottom: 18px; }
.contact-card .svc-opt { flex: 1 1 30%; }
.contact-card .wpcf7 label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg2); margin-bottom: 7px; }
.contact-card .wpcf7 input[type=text], .contact-card .wpcf7 input[type=email], .contact-card .wpcf7 input[type=tel], .contact-card .wpcf7 textarea {
  font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--slate-200); background: #fff; color: var(--fg1); width: 100%;
}
.contact-card .wpcf7 input:focus, .contact-card .wpcf7 textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,139,224,.18); }
.contact-card .wpcf7 p { margin: 0 0 14px; }
.contact-card .wpcf7-submit { font-family: var(--font-display); font-weight: 600; font-size: 15px; border: none; border-radius: var(--r-sm); padding: 13px 22px; background: var(--blue-600); color: #fff; box-shadow: 0 8px 22px rgba(0,114,198,.30); cursor: pointer; }
.contact-card .wpcf7-submit:hover { background: var(--blue-700); }
.channel { color: inherit; }

/* ---- blog tweaks ---- */
.blog-hero .single-back { margin-bottom: 20px; }
.single-tags .proj-tag { text-decoration: none; }

/* desktop header density: the logo, six links and the button only fit at these sizes (logo is ~11:1) */
.site-header .wrap, .cust-bar .wrap { max-width: 1440px; }
.cta-short { display: none; }
@media (min-width: 1181px) {
  .brand img { height: 34px; }
  .nav { gap: 2px; }
  .nav-link { padding: 8px 9px; font-size: 14px; }
  .nav-gap { width: 8px; }
  .nav .btn { padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 1300px) and (min-width: 1181px) {
  .brand img { height: 30px; }
  .nav-link { padding: 8px 7px; font-size: 13.5px; }
  .nav .btn .cta-long { display: none; }
  .nav .btn .cta-short { display: inline; }
}

/* light closing band */
.sec-white.cta-band .cta-inner h2 { color: var(--fg1); }
.sec-white.cta-band .cta-inner p { color: var(--fg2); }
.sec-white.cta-band .eb { color: var(--blue-600); }

/* mobile header: logo scales, hamburger stays on screen */
@media (max-width: 1180px) {
  .site-header .wrap { height: 68px; padding: 0 20px; }
  .brand img { height: 28px; }
  .nav { top: 68px; }
}
@media (max-width: 420px) { .brand img { height: 24px; } }

/* ---- estate diagram (flat, animated) ---- */
.diag-wrap { overflow-x: auto; }
.diag { width: 100%; min-width: 760px; height: auto; display: block; }
/* class-only selectors: a `text.t2` selector here used to outrank the size/colour rules below */
.diag .t0, .diag .t2, .diag .t3 { font-family: var(--font-mono); font-size: 12px; fill: var(--slate-500); }
.diag .t0 { fill: var(--ink-900); }
.diag .t1 { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: var(--ink-900); }
.diag .t2 { font-size: 10.5px; letter-spacing: .07em; fill: var(--slate-500); }
.diag .t3 { fill: var(--blue-700); font-size: 12.5px; }
.diag .d-mid { text-anchor: middle; }
.diag .on-ink { fill: #fff; }
.diag .on-ink-blue { fill: var(--blue-300); }
.diag .on-ink2 { fill: var(--slate-300); }
.diag .d-paper { fill: var(--paper); stroke: var(--slate-200); stroke-width: 1; }
.diag .d-node { fill: #fff; stroke: var(--slate-300); stroke-width: 1.25; }
.diag .d-soft { fill: var(--blue-100); stroke: var(--blue-200); stroke-width: 1; }
.diag .d-ink { fill: var(--ink-900); stroke: var(--ink-700); stroke-width: 1; }
.diag .d-ink2 { fill: var(--ink-800); stroke: var(--ink-700); stroke-width: 1; }
.diag .d-link { stroke: var(--blue-600); stroke-width: 2; stroke-dasharray: 7 6; fill: none; }
.diag .d-linkhead { fill: var(--blue-600); }
.diag .d-tele { stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 2 5; fill: none; }
.diag .d-telehead { fill: var(--slate-400); }
.diag .d-pkt { fill: var(--blue-400); }
.diag .d-pkt2 { fill: var(--slate-400); }
.diag .d-blk { fill: var(--blue-300); }

/* entrance: boxes rise in, staggered; lines flow */
@media (prefers-reduced-motion: no-preference) {
  .diag .d-box { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .diag .d-lines { opacity: 0; transition: opacity 900ms var(--ease-out) 700ms; }
  .diag .d-motion { opacity: 0; transition: opacity 600ms var(--ease-out) 1300ms; }
  .in .diag .d-box, .diag.in .d-box { opacity: 1; transform: none; }
  .in .diag .d-b2 { transition-delay: 120ms; } .in .diag .d-b3 { transition-delay: 220ms; } .in .diag .d-b4 { transition-delay: 320ms; }
  .in .diag .d-b5 { transition-delay: 440ms; } .in .diag .d-b6 { transition-delay: 560ms; } .in .diag .d-b7 { transition-delay: 680ms; }
  .in .diag .d-lines, .in .diag .d-motion { opacity: 1; }
  .diag .d-link { animation: cx-flow 1.4s linear infinite; }
  @keyframes cx-flow { to { stroke-dashoffset: -13; } }
  .diag .d-node { animation: cx-beat 4.8s ease-in-out infinite; }
  .diag .d-n2 { animation-delay: 1.6s; } .diag .d-n3 { animation-delay: 3.2s; }
  @keyframes cx-beat { 0%, 100% { stroke: var(--slate-300); } 8% { stroke: var(--blue-400); } 22% { stroke: var(--slate-300); } }
}
@media (prefers-reduced-motion: reduce) {
  .diag .d-motion { display: none; }
}

/* customer-bar dropdown: no dead gap between button and menu, so the pointer can travel down into it */
.cust-dropdown { position: relative; }
.cust-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.cust-menu { top: 100%; margin-top: 8px; padding: 8px; min-width: 240px; }
.cust-menu a { padding: 10px 12px; font-size: 14px; }
.cust-dropdown:hover .cust-menu, .cust-dropdown:focus-within .cust-menu, .cust-dropdown.open .cust-menu { display: flex; }

/* product marks (ctxmail / ctxtech / remote / hub) */
svg.mark, svg.logo { display: inline-block; vertical-align: middle; flex: none; }
.cust-btn svg.mark { width: 26px; height: 26px; margin: -5px 0; }
.nav-mobile-extra svg.mark { width: 24px; height: 24px; }
.svc-chip.mark-chip { background: transparent; width: auto; height: auto; padding: 0; margin-bottom: 14px; }
.hero-logo { margin-bottom: 14px; }
/* remote support + customer hub: the full lockup, big, in the dark hero's right-hand space */
.hero-grid.art-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero-art { display: flex; justify-content: center; align-items: center; }
.hero-art svg.hero-big { width: 100%; max-width: 460px; height: auto; }
.hero-art-link { display: block; width: 100%; max-width: 460px; border-radius: 14px; transition: transform var(--dur-fast), filter var(--dur-fast); }
.hero-art-link:hover, .hero-art-link:focus-visible { transform: translateY(-3px) scale(1.02); filter: brightness(1.12) drop-shadow(0 10px 28px rgba(43,139,230,.35)); }
/* the big lockup replaces the small one; phones hide the big one, so they keep the small */
@media (min-width: 881px) { .art-hero .hero-logo { display: none; } }
@media (max-width: 880px) { .hero-grid.art-hero { grid-template-columns: 1fr; } .hero-art { display: none; } }
.hero-logo svg.logo { height: 56px; width: auto; }
@media (max-width: 720px) { .hero-logo svg.logo { height: 44px; } }

/* nav ctxmail tile + footer platforms row */
.nav-link.nav-ctxmail { display: inline-flex; align-items: center; gap: 6px; }
.nav-link svg.mark { width: 22px; height: 22px; margin: -4px 0; }
.footer-platforms { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 0 4px; }
.footer-platforms .col-head { margin: 0 6px 0 0; }
.footer-platforms svg.logo { height: 30px; width: auto; opacity: .95; }
.footer-platforms a:hover svg.logo { opacity: 1; }

/* responsive overrides (must be last: the grid rules above are unconditional) */
@media (max-width: 980px) {
  .hero-grid.home, .hero-grid.even, .hero-grid.contact { grid-template-columns: 1fr; gap: 36px; }
  .grid-2, .faq-grid, .case-split { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .stat-card, .stat-card.dark { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-pad { padding: 64px 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-card, .stat-card.dark { grid-template-columns: 1fr; }
  .hero-h1 { font-size: 38px; }
  .hero-h1.xl { font-size: 40px; }
  .section-head h2, .h2-lg { font-size: 28px; }
  .cta-inner h2 { font-size: 30px; }
  .btn-row { gap: 10px; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .case-card { grid-template-columns: 1fr; }
  .client-logos { gap: 20px 28px; }
  .client-logos img { height: 30px; }
  .diag { min-width: 720px; }
}
/* phones get the stacked diagram instead of a sideways-scrolling strip */
.diag.diag-m { display: none; min-width: 0; max-width: 420px; margin: 0 auto; }
@media (max-width: 720px) { .diag.diag-d { display: none; } .diag.diag-m { display: block; } .diag-wrap { overflow: visible; } }

/* footer legal row + cookie banner */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; font-family: var(--font-mono); font-size: 12px; }
.footer-legal a, .footer-legal .link-btn { color: var(--slate-300); display: inline-flex; align-items: center; gap: 6px; }
.footer-legal a:hover, .footer-legal .link-btn:hover { color: #fff; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink-950); border-top: 1px solid var(--ink-700); color: #fff; padding: 16px 0; }
.cookie-bar[hidden] { display: none; }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.cookie-inner p { margin: 0; font-size: 14.5px; color: var(--slate-200); max-width: 720px; }
.cookie-inner p a { color: var(--blue-300); text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; }
.cookie-btns .btn { min-width: 110px; justify-content: center; }
@media (max-width: 720px) { .cookie-btns { width: 100%; } .cookie-btns .btn { flex: 1; } }

/* case studies as best practice */
.bp-card { padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 36px; align-items: center; }
.bp-card .lead { font-size: 15.5px; }
.case-card { grid-template-columns: 64px minmax(0, 1fr); gap: 22px; }
.case-card .svc-chip { margin: 0; }
@media (max-width: 980px) { .bp-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }
@media (max-width: 720px) { .case-card { grid-template-columns: 1fr; } }

/* ctxmail protection band (rebuild, restore, move) */
.pr-safe { margin-top: 40px; padding: 32px 36px; border: 1px solid var(--ink-700); border-radius: 16px; background: rgba(255,255,255,.02); }
.pr-safe h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; }
.pr-safe h3 svg.ic { width: 20px; height: 20px; color: var(--blue-300); }
.pr-safe .check-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 36px; }
@media (max-width: 980px) { .pr-safe .check-list { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .pr-safe { padding: 24px 20px; } .pr-safe .check-list { grid-template-columns: 1fr; } }
.cta-inner .cta-where { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; }