/*
Theme Name: VividLayer
Theme URI: https://vividlayer.com
Author: VividLayer Technology Partners
Description: Custom one-page theme for VividLayer Technology Partners, a Microsoft Power Platform consultancy. Editable content lives in Appearance > Customize > VividLayer Content.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vividlayer
*/

:root{
  --ink:#0d1120;
  --panel:#141a2c;
  --panel-2:#1a2138;
  --line: rgba(255,255,255,0.09);
  --text:#eef1f8;
  --text-dim:#93a0bd;
  --automate:#0E7AE0;
  --apps:#7B2CBF;
  --bi:#FB8B1E;
  --pages:#C21F3A;
  /* "-ink" variants are for TEXT specifically — the raw brand colors above
     read fine as swatches/borders but several fall short of WCAG's 4.5:1
     text-contrast minimum against the panel background (apps 2.4:1, pages
     2.9:1, automate 4.0:1 — all fails). These are the same hues nudged
     lighter in HSL space until they clear 4.5:1, so small colored text
     (the case-study product tag, the stat number) stays legible without
     losing its brand identity. --bi already clears it unchanged. */
  --automate-ink:#1284F0;
  --apps-ink:#A566DC;
  --bi-ink:var(--bi);
  --pages-ink:#E35068;
  --radius: 14px;
  --radius-lg: 32px;
}

/* ==========================================================================
   LIGHT SCHEME — a distinct design language, not a recolored dark theme.
   Toggle via Appearance > Customize > Color Scheme.

   Strategy: the dark theme uses all four brand colors constantly (service
   icons, dots, tags, numbers) because saturated color reads as "premium"
   against near-black. On white, that same habit reads as busy/confetti-like.
   So here color is rationed: ONE accent (blue) carries almost all
   interactive/text color, the full four-color brand gradient is reserved
   for two deliberate "signature" moments (the logo, and the CTA band), and
   individual products are told apart with a thin border accent instead of
   a colored badge. Structure leans on whitespace and hairlines rather than
   boxed, shadowed cards everywhere.
   ========================================================================== */
body.light{
  --ink:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7f7f9;
  --line: rgba(15,23,42,0.09);
  --text:#0c0e16;
  /* Darkened from the original #6b7280 (only ~4.5:1 contrast, the bare
     WCAG AA minimum — read as washed out for body copy). #374151 clears
     ~10:1 while still reading as clearly secondary next to --text. */
  --text-dim:#374151;
  /* every "text on white" use of a brand color routes through blue now,
     for one consistent accent voice instead of four competing ones */
  --automate-ink:#0B5FB0;
  --apps-ink:#0B5FB0;
  --bi-ink:#0B5FB0;
  --pages-ink:#0B5FB0;
}

body.light header{
  background:var(--header-bg, rgba(255,255,255,0.92));
  border-bottom:1px solid var(--line);
}
body.light .btn-secondary{
  border-color:rgba(15,23,42,0.18);
}
body.light .btn-secondary:hover{
  border-color:var(--text);
  background:transparent;
}

/* ---- Signature color-block flourish: the one place all four brand
   colors appear together as a deliberate mark, hidden in dark mode
   since dark mode already uses color throughout ---- */
.brand-flourish{ display:none; gap:6px; margin-bottom:20px; }
.brand-flourish span{ width:28px; height:6px; display:block; }
.brand-flourish span:nth-child(1){ background:var(--automate); }
.brand-flourish span:nth-child(2){ background:var(--apps); }
.brand-flourish span:nth-child(3){ background:var(--pages); }
.brand-flourish span:nth-child(4){ background:var(--bi); }
body.light .brand-flourish{ display:flex; }

/* ---- Hero: open layout, no boxed dark-style card, a thin rule instead ---- */
body.light .hero{
  padding-top:64px;
}
body.light .eyebrow{
  font-family:'Inter', sans-serif;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--text-dim);
}
body.light .eyebrow::before{
  background:var(--text-dim);
}
body.light .flow-card{
  background:transparent;
  border:none;
  padding:0;
}
body.light .flow-card-label{
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
body.light .node-box{
  fill:#ffffff;
  stroke:rgba(15,23,42,0.14);
}

/* ---- Trust strip: quieter, text-forward ---- */
body.light .trust-tag{
  border-color:var(--line);
  color:var(--text-dim);
}

/* ---- Section eyebrows: same neutral treatment as the hero eyebrow ---- */
body.light .section-head .eyebrow{ color:var(--text-dim); }
body.light .section-head .eyebrow::before{ background:var(--text-dim); }

/* ---- Services: white card with a colored top-border accent strip,
   matching the Case Studies card treatment below ---- */
body.light .service-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--accent, var(--automate));
  border-radius:var(--radius);
  padding:26px 22px;
}
body.light .service-icon{
  display:none;
}
body.light .service-card h3{
  font-size:1.1rem;
  margin-bottom:10px;
}
body.light .service-card:hover{
  border-color:rgba(15,23,42,0.16);
  border-top-color:var(--accent, var(--automate));
  transform:translateY(-2px);
}

/* ---- Process: unchanged structurally, already hairline-based — just tone ---- */
body.light .process-num{
  color:var(--text-dim);
  font-weight:500;
}

/* ---- Case studies: neutral tag + industry, color reserved for the
   top border (already handled by the base .case-card rule) and the
   stat, so each card reads calm until the number ---- */
body.light .case-card{
  background:#fff;
  box-shadow:none;
}
body.light .case-tag{
  color:var(--text-dim);
  border-color:var(--line);
}
body.light .case-card:hover{
  border-color:rgba(15,23,42,0.16);
}

/* ---- Testimonial, booking form, contact directory: flat hairline, no shadow ---- */
body.light .testimonial,
body.light .booking-form-card,
body.light .contact-directory-item{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}
body.light .booking-form input[type=text],
body.light .booking-form input[type=email],
body.light .booking-form select,
body.light .booking-form textarea{
  background:var(--panel-2);
  border-color:var(--line);
}
body.light .booking-form input:focus,
body.light .booking-form select:focus,
body.light .booking-form textarea:focus{
  background:#fff;
}

/* ---- CTA band: the one deliberate full-color moment on the page ---- */
body.light .cta-band{
  box-shadow:0 20px 40px -20px rgba(14,122,224,0.35);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.01em;
}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}

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

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

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--automate);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Skip link ---------- */
/* Hidden off-screen until it receives keyboard focus (the first Tab stop
   on the page), then jumps straight to <main id="main">, letting keyboard
   and screen-reader users bypass the header/nav on every page load. */
.skip-link{
  position:absolute;
  top:-100px;
  left:12px;
  z-index:1000;
  /* Slightly darker than --automate — white text directly on --automate
     only clears 4.30:1, just under the 4.5:1 minimum for normal-weight
     text this size; this shade clears 4.6:1. */
  background:#0D75D6;
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  transition:top 0.15s ease;
}
.skip-link:focus{
  top:12px;
}

/* WordPress admin bar compatibility */
body.admin-bar header{ top:32px; }
@media screen and (max-width: 782px){
  body.admin-bar header{ top:46px; }
}

/* ---------- NAV ---------- */
/* Header starts tall with a large, standout logo on first load, then
   shrinks to a compact bar once the visitor scrolls (see js/nav.js, which
   toggles the "scrolled" class on <header>). All the sizing below is the
   "top of page" state; the header.scrolled rules further down restore the
   original compact sizes. */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg, rgba(13,17,32,0.82));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background 0.2s ease;
}
/* When a custom Header Bar color is set (Appearance > Customize > Header
   Bar), the logo text, nav links, and hamburger icon switch to whichever
   of these reads legibly against it — independent of the site's overall
   Color Scheme, since the two can now differ (e.g. a light header on an
   otherwise dark-mode site). Scoping these as custom properties on
   <header> means every element inside that already uses var(--text) /
   var(--text-dim) / var(--line) picks the right color automatically. */
header.header-on-dark{
  --text:#eef1f8;
  --text-dim:#93a0bd;
  --line: rgba(255,255,255,0.14);
}
header.header-on-light{
  --text:#0c0e16;
  --text-dim:#374151;
  --line: rgba(15,23,42,0.14);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:116px;
  transition:height 0.25s ease;
}
.logo{
  display:flex; align-items:center; gap:14px;
  transition:gap 0.25s ease;
}
.logo-mark,
.custom-logo{
  height:58px; width:auto; flex:none;
  transition:height 0.25s ease;
}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}
.logo-name{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--text);
  transition:font-size 0.25s ease;
}
.logo-tag{
  font-size:0.72rem;
  color:var(--text-dim);
  letter-spacing:0.12em;
  transition:font-size 0.25s ease;
}

/* ---------- Compact state after scrolling ---------- */
header.scrolled nav.wrap{ height:76px; }
header.scrolled .logo{ gap:10px; }
header.scrolled .logo-mark,
header.scrolled .custom-logo{ height:30px; }
header.scrolled .logo-name{ font-size:1.05rem; }
header.scrolled .logo-tag{ font-size:0.6rem; }
.nav-links{
  display:flex; align-items:center; gap:34px;
  font-size:0.93rem;
  color:var(--text);
}
.nav-links a{ transition:opacity 0.2s; }
.nav-links a:hover{ opacity:0.7; }
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--text);
  width:40px; height:40px;
  border-radius:8px;
  align-items:center; justify-content:center;
  flex:none;
  cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px; }

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 0 18px;
  border-top:1px solid var(--line);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding:13px 4px;
  font-size:0.98rem;
  color:var(--text);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:none; }
.mobile-menu a:hover{ opacity:0.7; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  nav.wrap{ height:96px; }
  .logo-mark,
  .custom-logo{ height:46px; }
}
@media (max-width: 480px){
  .logo-tag{ display:none; }
  nav.wrap{ height:88px; }
  .logo-mark,
  .custom-logo{ height:40px; }
}
@media (max-width: 400px){
  .logo-name{ font-size:0.92rem; }
  header.scrolled .logo-name{ font-size:0.86rem; }
}

/* ---------- HERO ---------- */
.hero{
  padding:96px 0 60px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem;
  color:var(--bi-ink);
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  background:var(--bi-ink);
  border-radius:50%;
  display:inline-block;
}
.hero h1{
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  max-width:11.5ch;
  margin-bottom:22px;
}
.hero h1 .accent{ color:var(--automate-ink); }
.hero-subtitle{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.15rem;
  margin-bottom:14px;
}
.hero p.lead{
  color:var(--text-dim);
  font-size:1.08rem;
  max-width:46ch;
  margin-bottom:32px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  background:var(--automate);
  color:#fff;
  padding:14px 24px;
  border-radius:9px;
  font-weight:600;
  font-size:0.95rem;
  display:inline-block;
  transition:transform 0.15s, background 0.15s;
  border:none;
  cursor:pointer;
}
.btn-primary:hover{ background:#2a63e0; transform:translateY(-1px); }
.btn-secondary{
  padding:14px 22px;
  border-radius:9px;
  border:1px solid var(--line);
  color:var(--text);
  font-weight:600;
  font-size:0.95rem;
  transition:border-color 0.15s, background 0.15s;
}
.btn-secondary:hover{ border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.03); }
/* Alternate hero button style: a plain blue hyperlink instead of an
   outlined button, chosen from Appearance > Customize > Hero Section >
   Button style. */
.link-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:14px 4px;
  color:var(--automate-ink);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity 0.15s;
}
.link-cta:hover{ opacity:0.75; }

/* ---------- FLOW DIAGRAM (signature element) ---------- */
.flow-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 24px 22px;
}
.flow-card-label{
  font-size:0.72rem;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
}
.flow-card-label span.live{ color:var(--pages-ink); }
.flow-card-label span.live::before{
  content:"●";
  margin-right:5px;
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

svg#flowsvg{ width:100%; height:auto; display:block; }

.flow-line{
  fill:none;
  stroke:var(--line);
  stroke-width:2;
}
.flow-line-active{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:12 300;
  stroke-dashoffset:312;
  opacity:0;
  animation:flowmove 6s ease-in-out infinite;
}
/* Packet only travels during its own short window each cycle (~0.3s-1.5s
   of its delay-shifted timeline), then sits idle/hidden the rest of the
   loop — so a line only "moves" while that step of the flow is actually
   firing, instead of animating continuously forever. */
@keyframes flowmove{
  0%,6%{ stroke-dashoffset:312; opacity:0; }
  9%{ opacity:1; }
  25%{ stroke-dashoffset:0; opacity:1; }
  30%,100%{ stroke-dashoffset:0; opacity:0; }
}
.node-box{
  fill:var(--panel-2);
  stroke:var(--line);
  stroke-width:1.2;
}
.node-dot{
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.node-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  font-weight:600;
  fill:var(--text);
}
.node-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:8.2px;
  font-weight:500;
  fill:var(--text-dim);
}

/* ---------- TRUST STRIP ---------- */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.trust .wrap{
  display:flex; flex-wrap:wrap; gap:14px 34px;
  align-items:center; justify-content:space-between;
  color:var(--text-dim);
  font-size:0.85rem;
}
.trust-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.trust-tag{
  border:1px solid var(--line);
  padding:6px 13px;
  border-radius:999px;
  font-size:0.78rem;
  font-family:'IBM Plex Mono', monospace;
}

/* ---------- SECTION HEADERS ---------- */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head .eyebrow{ color:var(--automate-ink); }
.section-head .eyebrow::before{ background:var(--automate-ink); }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:14px; }
.section-head p{ color:var(--text-dim); font-size:1.02rem; }

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  align-items:start;
}
@media (max-width:980px){ .services-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }

.service-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  transition:border-color 0.2s, transform 0.2s;
  /* Each card has its own deep-link anchor (e.g. #power-automate) — this
     keeps the sticky header from covering its top when linked to directly. */
  scroll-margin-top:100px;
}
.service-card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.2); }
.service-icon{
  width:38px; height:38px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:0.85rem;
}
.service-card h3{ font-size:1.05rem; margin-bottom:9px; }
.service-card p{ color:var(--text-dim); font-size:0.9rem; }

/* "Learn more" disclosure — a native <details>/<summary>, so it expands
   with no JavaScript, same philosophy as the CSS-only booking form
   reveal above. */
.service-more{ margin-top:10px; }
.service-more summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--automate-ink);
  font-weight:600;
  font-size:0.85rem;
  user-select:none;
}
.service-more summary::-webkit-details-marker{ display:none; }
.service-more summary:hover{ opacity:0.75; }
.service-more summary::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform 0.2s ease;
}
.service-more[open] summary::after{ transform:rotate(45deg); }
.service-more .less-label{ display:none; }
.service-more[open] .more-label{ display:none; }
.service-more[open] .less-label{ display:inline; }
.service-more p{
  margin:10px 0 0;
  color:var(--text-dim);
  font-size:0.9rem;
  line-height:1.55;
}

/* Tech stack pills — no label, just the tags. Sits right under the
   summary sentence and above "Learn more" so it's always visible whether
   the card is collapsed or expanded. Wraps naturally (no fixed columns). */
.service-tech{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.service-tech-tag{
  border:1px solid var(--line);
  padding:2px 7px;
  border-radius:999px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--text-dim);
}

/* ---------- PROCESS ---------- */
.process-list{
  display:flex;
  flex-direction:column;
}
.process-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:24px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--automate-ink);
  padding-top:3px;
}
.process-item h3{ font-size:1.15rem; margin-bottom:6px; }
.process-item p{ color:var(--text-dim); max-width:60ch; font-size:0.95rem; }

/* ---------- TESTIMONIAL ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.testimonial-grid.single{ grid-template-columns:1fr; }
@media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }

.testimonial{
  border:1px solid var(--line);
  border-radius:22px;
  padding:52px;
  position:relative;
}
.testimonial-grid:not(.single) .testimonial{ padding:36px; }
@media (max-width:640px){ .testimonial{ padding:34px 24px; } }
.testimonial p.quote{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.5rem;
  font-weight:500;
  max-width:32ch;
  line-height:1.35;
  margin-bottom:26px;
}
.testimonial-grid:not(.single) .testimonial p.quote{ font-size:1.15rem; max-width:none; }
.testimonial .who{ color:var(--text-dim); font-size:0.9rem; }
.testimonial .who b{ color:var(--text); }

/* ---------- CTA BAND ---------- */
.cta-band{
  /* A muted, deeper navy-blue rather than the raw --automate accent —
     at this size (full-width band) the vivid brand blue read as too
     loud, so this is desaturated and darkened. Semi-transparent (not a
     flat fill) so the section's own background shows through slightly
     for a softer, less "painted-on" look — still comfortably safe for
     white text (5.2:1+ in both color schemes; the section behind this
     band is --panel-2, not the base page background). */
  background:rgba(34,78,119,0.8);
  border-radius:24px;
  padding:64px 48px;
  text-align:center;
}
@media (max-width:640px){ .cta-band{ padding:44px 24px; } }
.cta-band h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:14px; }
.cta-band p{ color:#fff; margin-bottom:30px; }
.cta-band .btn-primary{ background:#fff; color:#0d1120; }
.cta-band .btn-primary:hover{ background:#e9ecf6; }
.cta-band .cta-sales-contact{
  margin-top:22px;
  margin-bottom:0;
  font-size:0.92rem;
  color:#fff;
}
.cta-band .cta-sales-contact a{
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cta-alt-contact{
  font-size:0.92rem;
  color:var(--text-dim);
  margin-bottom:10px;
}
.cta-alt-contact a{
  color:var(--automate-ink);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------- BOOKING FORM ---------- */
/* Hidden until the "Book a discovery call" button (linking to #booking-form)
   is clicked — no JavaScript needed, this uses the :target CSS selector. */
#booking-form{
  display:none;
}
#booking-form:target{
  display:block;
  scroll-margin-top:100px;
}

.booking-form-card{
  margin-top:36px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px;
}
@media (max-width:640px){ .booking-form-card{ padding:26px 20px; } }


.booking-banner{
  padding:14px 18px;
  border-radius:10px;
  font-size:0.92rem;
  margin-bottom:24px;
}
.booking-banner.success{
  background:rgba(32,207,168,0.12);
  border:1px solid #20cfa8;
  color:#bdf5e8;
}
.booking-banner.error{
  background:rgba(194,31,58,0.12);
  border:1px solid var(--pages);
  color:#ffd0d8;
}

/* Honeypot field: invisible to real visitors, still present in the DOM for bots that fill in every field. */
.vl-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.booking-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:640px){ .booking-form .form-row{ grid-template-columns:1fr; } }

.booking-form .form-field{
  margin-bottom:20px;
}
.booking-form label{
  display:block;
  font-size:0.86rem;
  font-weight:600;
  margin-bottom:7px;
}
.booking-form label .req{ color:var(--pages-ink); }

.booking-form fieldset{
  border:none;
  padding:0;
  margin:0 0 20px;
}
.booking-form legend{
  font-size:0.86rem;
  font-weight:600;
  margin-bottom:9px;
  padding:0;
  width:100%;
}
.booking-form legend .req{ color:var(--pages-ink); }

.field-hint{
  font-size:0.8rem;
  color:var(--text-dim);
  margin:-3px 0 8px;
}

.checkbox-group,
.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.checkbox-option,
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 14px;
  font-size:0.88rem;
  cursor:pointer;
  transition:border-color 0.15s;
}
.checkbox-option:has(input:checked),
.radio-option:has(input:checked){
  border-color:var(--automate);
  background:rgba(14,122,224,0.08);
}
.checkbox-option input,
.radio-option input{
  accent-color:var(--automate);
  width:15px;
  height:15px;
  flex:none;
}

.booking-form input[type=text],
.booking-form input[type=email],
.booking-form select,
.booking-form textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:9px;
  padding:11px 14px;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:0.94rem;
}
.booking-form textarea{ resize:vertical; }
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  outline:2px solid var(--automate);
  outline-offset:1px;
  border-color:transparent;
}
.booking-form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2393a0bd' stroke-width='1.6'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.booking-form button[type=submit]{
  margin-top:6px;
}

.contact-directory{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr;
  max-width:280px;
  gap:16px;
}
.contact-directory-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
  text-align:center;
}
.contact-directory-item .dept{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:6px;
}
.contact-directory-item a{
  color:var(--automate-ink);
  font-size:0.88rem;
  word-break:break-word;
}
.contact-directory-item a:hover{ text-decoration:underline; }

/* ---------- CASE STUDIES ---------- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  align-items:start;
}
@media (max-width:860px){ .case-grid{ grid-template-columns:1fr; } }

.case-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--card-accent, var(--automate));
  border-radius:var(--radius);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.case-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.case-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--card-accent-ink, var(--automate-ink));
  border:1px solid var(--card-accent, var(--automate));
  padding:4px 10px;
  border-radius:999px;
}
.case-industry{
  font-size:0.78rem;
  color:var(--text-dim);
}
.case-card h3{
  font-size:1.15rem;
}
.case-field{ font-size:0.9rem; color:var(--text-dim); }
.case-field b{
  display:block;
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:4px;
}
.case-stat{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.case-stat-value{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.6rem;
  /* text, not a swatch/border — uses the contrast-safe "-ink" variant
     (see :root) rather than the raw --card-accent */
  color:var(--card-accent-ink, var(--automate-ink));
}
.case-stat-label{ font-size:0.82rem; color:var(--text-dim); }

/* "Learn more" disclosure — everything but the title and headline stat
   (tag/industry, Challenge, Solution, Result) tucks behind this, same
   native <details>/<summary> pattern used on the Services cards. */
.case-more{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:2px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.case-more summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--automate-ink);
  font-weight:600;
  font-size:0.85rem;
  user-select:none;
}
.case-more summary::-webkit-details-marker{ display:none; }
.case-more summary:hover{ opacity:0.75; }
.case-more summary::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform 0.2s ease;
}
.case-more[open] summary::after{ transform:rotate(45deg); }
.case-more .less-label{ display:none; }
.case-more[open] .more-label{ display:none; }

/* Solution + industry: always visible at the bottom of the card, below
   the Learn More toggle — not tucked into the collapsed content. */
.case-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:2px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.case-more[open] .less-label{ display:inline; }

/* ---------- FOOTER ---------- */

footer{
  background:var(--footer-bg, transparent);
  border-top:1px solid var(--line);
  padding:44px 0 36px;
  transition:background 0.2s ease;
}
/* Same idea as the header: when a custom Footer color is set (Appearance
   > Customize > Footer), scope --text/--text-dim/--line to whichever
   reads legibly against it, independent of the site's overall Color
   Scheme. */
footer.footer-on-dark{
  --text:#eef1f8;
  --text-dim:#93a0bd;
  --line: rgba(255,255,255,0.14);
}
footer.footer-on-light{
  --text:#0c0e16;
  --text-dim:#374151;
  --line: rgba(15,23,42,0.14);
}
.footer-brand{
  display:flex; align-items:center; gap:12px;
  padding-bottom:26px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.footer-logo-mark{ height:34px; width:auto; flex:none; }
.footer-brand-name{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1.05rem;
  color:var(--text);
}
.footer-brand-tag{
  font-size:0.62rem;
  color:var(--text-dim);
  letter-spacing:0.12em;
  margin-top:2px;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  color:var(--text); font-size:0.85rem;
}
.footer-links{ display:flex; gap:24px; }

/* ---------- LAYERED SECTION TRANSITIONS ----------
   Instead of each section just ending in a flat line and the next one
   starting flush below it, every major section after the hero is its own
   rounded, elevated panel that overlaps up into the section above it —
   the "break" between sections reads as one panel physically lifting over
   the seam, rather than a hard color change. Panels alternate between two
   close-in-value background tones so the seam is visible even though the
   overall palette stays restrained; the shadow and rounded top corner do
   most of the work of selling the overlap.

   Deliberately NOT applied to the hero (it's the base layer everything
   else lifts off of) or the footer (kept as a plain closing bar rather
   than another floating card). */
#services,
#process,
#case-studies,
.testimonials-section,
#contact{
  position:relative;
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:-56px;
  padding:148px 0 88px;
  box-shadow:0 30px 70px -45px rgba(0,0,0,0.55);
}
#services{ background:var(--panel-2); z-index:2; }
#process{ background:var(--ink); z-index:3; }
#case-studies{ background:var(--panel-2); z-index:4; }
.testimonials-section{ background:var(--ink); z-index:5; }
#contact{ background:var(--panel-2); z-index:6; }

body.light #services,
body.light #process,
body.light #case-studies,
body.light .testimonials-section,
body.light #contact{
  box-shadow:0 25px 55px -35px rgba(15,23,42,0.12);
}

@media (max-width:768px){
  #services,
  #process,
  #case-studies,
  .testimonials-section,
  #contact{
    margin-top:-32px;
    padding:96px 0 60px;
    border-radius:20px 20px 0 0;
  }
}