/**
 * Celthrac Deep Signal — site chrome (header, nav, footer).
 * Token-only; no hex literals.
 */

/* ---- Skip link ---- */
.ds-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.ds-skip-link:focus {
  left: var(--cx-gutter); top: var(--cx-space-3);
  background: var(--cx-accent); color: var(--cx-white);
  padding: var(--cx-space-3) var(--cx-space-5); border-radius: var(--cx-radius-sm);
}

/* ---- Header ---- */
.ds-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--cx-ink-rgb), .82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cx-n700);
}
.ds-site-header__inner {
  display: flex; align-items: center; gap: var(--cx-space-7);
  min-height: 68px;
}
.ds-brand { display: flex; align-items: center; margin-right: auto; }
.ds-brand a { color: var(--cx-white); text-decoration: none; font-family: var(--cx-fhead); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.ds-brand img { max-height: 34px; width: auto; display: block; }

/* ---- Primary nav ---- */
.ds-primary-nav ul { list-style: none; display: flex; gap: var(--cx-space-7); margin: 0; padding: 0; }
.ds-primary-nav a {
  color: var(--cx-n300); text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: 8px 0; display: inline-block; transition: color var(--cx-dur) var(--cx-ease);
}
.ds-primary-nav a:hover,
.ds-primary-nav a.is-active { color: var(--cx-white); }
.ds-primary-nav a:hover { color: var(--cx-accent); }

/* Header CTA (secondary menu) styled like a primary button. */
.ds-header-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cx-grad); color: var(--cx-white); text-decoration: none;
  font-weight: 700; font-size: .92rem; padding: 10px 18px; border-radius: var(--cx-radius-sm);
  box-shadow: 0 10px 30px -10px var(--cx-accent-glow);
  transition: transform var(--cx-dur) var(--cx-ease), background var(--cx-dur) var(--cx-ease);
}
.ds-header-cta a:hover { transform: translateY(-2px); filter: brightness(1.06); color: var(--cx-white); }

/* ---- Mobile toggle ---- */
.ds-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.ds-nav-toggle__bar { width: 24px; height: 2px; background: var(--cx-white); transition: transform var(--cx-dur) var(--cx-ease), opacity var(--cx-dur) var(--cx-ease); }
.ds-nav-toggle[aria-expanded='true'] .ds-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ds-nav-toggle[aria-expanded='true'] .ds-nav-toggle__bar:nth-child(2) { opacity: 0; }
.ds-nav-toggle[aria-expanded='true'] .ds-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .ds-nav-toggle { display: flex; }
  .ds-primary-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cx-charcoal-2); border-bottom: 1px solid var(--cx-n700);
    max-height: 0; overflow: hidden; transition: max-height var(--cx-dur) var(--cx-ease);
  }
  .ds-primary-nav.is-open { max-height: 70vh; overflow: auto; }
  .ds-primary-nav ul { flex-direction: column; gap: 0; padding: var(--cx-space-4) var(--cx-gutter); }
  .ds-primary-nav li { border-bottom: 1px solid var(--cx-n700); }
  .ds-header-cta { display: none; }
}

/* ---- Main ---- */
.ds-main { display: block; }
.ds-breadcrumb { padding-top: var(--cx-space-5); font-family: var(--cx-fmono); font-size: .78rem; color: var(--cx-n500); }

/* ==========================================================================
 * Theme header nav (.ds-nav) — ported from the self-contained body-design nav
 * so theme-chrome pages (Solutions 155, solution details 156-158, structured
 * detail pages) match the body-design landing pages. Body vars mapped to tokens
 * (--orange -> --cx-accent, --f-head -> --cx-fhead, --ease -> --cx-ease).
 * ========================================================================== */
.ds-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 64px;backdrop-filter:saturate(140%) blur(18px);background:linear-gradient(180deg,rgba(var(--cx-ink-deep-rgb),.96) 0%,rgba(var(--cx-ink-rgb),.90) 100%);border-bottom:1px solid rgba(var(--cx-accent-rgb),.18);box-shadow:0 12px 32px -18px rgba(0,0,0,.9);}
/* ── Wordmark: CEL[TH]RAC› ────────────────────────────────────────────────
   Identity rules:
     • "CELTHRAC" sits in near-white so the mark stays legible at every size.
     • The "TH" ligature-block carries the brand gradient (indigo → violet →
       magenta) — the single hit of colour that makes the mark ownable.
     • The chevron is solid magenta (the gradient terminus) with a soft glow,
       echoing the "forward flow" CTA chevrons used across the site.
   Applied identically in the header nav and the footer (.ds-foot-logo also
   carries .ds-nav-logo), so the mark never drifts between the two.
   ------------------------------------------------------------------------ */
.ds-nav-logo{font-family:var(--cx-fhead);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;color:var(--cx-n100);line-height:1;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;transition:color var(--cx-dur) var(--cx-ease);}
.ds-nav-logo:hover,.ds-nav-logo:focus-visible{color:var(--cx-white);}
.ds-nav-logo em{
  font-style:normal;
  background:var(--cx-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Fallback for engines without background-clip:text — keeps TH coloured. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ds-nav-logo em{background:none;-webkit-text-fill-color:currentColor;color:var(--cx-violet);}
}
.ds-nav-logo .ds-logo-chev{display:inline-flex;align-items:center;justify-content:center;color:var(--cx-magenta);margin-left:6px;filter:drop-shadow(0 0 10px var(--cx-magenta-glow));transition:transform var(--cx-dur) var(--cx-ease);}
.ds-nav-logo:hover .ds-logo-chev,.ds-nav-logo:focus-visible .ds-logo-chev{transform:translateX(2px);}
.ds-nav-logo .ds-logo-chev svg{width:22px;height:22px;display:block;}
.ds-nav-links{display:flex;gap:28px;font-size:.95rem;font-weight:500;}
.ds-nav-links a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s var(--cx-ease);}
.ds-nav-links a:hover{color:var(--cx-accent);}
/* CTA — dual-chevron "forward flow" button matching the body nav */
.ds-nav .ds-btn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;color:var(--cx-white);font-family:var(--cx-fbody);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;line-height:1;position:relative;flex:none;}
.ds-nav .ds-btn-label{position:relative;padding:7px 0;display:inline-block;}
.ds-nav .ds-btn-label::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cx-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--cx-ease);}
.ds-nav .ds-btn:hover .ds-btn-label::after{transform:scaleX(1);}
.ds-nav .ds-btn-chev{position:relative;flex:none;display:block;width:30px;height:30px;overflow:hidden;background:var(--cx-accent);transition:box-shadow .42s var(--cx-ease);}
.ds-nav .ds-btn-chev .chev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cx-white);transition:transform .45s var(--cx-ease);}
.ds-nav .ds-btn-chev .chev svg{width:14px;height:14px;display:block;}
.ds-nav .ds-btn-chev .chev-alt{transform:translateX(-100%);}
.ds-nav .ds-btn:hover .ds-btn-chev{box-shadow:0 0 26px var(--cx-accent-glow);}
.ds-nav .ds-btn:hover .ds-btn-chev .chev:not(.chev-alt){transform:translateX(100%);}
.ds-nav .ds-btn:hover .ds-btn-chev .chev-alt{transform:translateX(0);}
/* mobile toggle */
.ds-nav .ds-nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.ds-nav .ds-nav-toggle span{width:24px;height:2px;background:var(--cx-white);display:block;}
@media (max-width:900px){
  .ds-nav{padding:14px 20px;position:relative;}
  .ds-nav-logo{font-size:1.3rem;}
  .ds-nav .ds-nav-toggle{display:flex;}
  .ds-nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:rgba(var(--cx-ink-rgb),.98);border-bottom:1px solid var(--cx-n700);max-height:0;overflow:hidden;transition:max-height .3s var(--cx-ease);padding:0 20px;z-index:100;}
  .ds-nav-links.is-open{max-height:75vh;padding:10px 20px;overflow:auto;}
  .ds-nav-links a{padding:13px 0;border-bottom:1px solid var(--cx-n700);}
  .ds-nav-cta{display:none;}
}

/* ── Case Studies business-function submenu (main-nav dropdown) ───────────── */
.ds-nav-links .ds-nav-item{position:relative;display:inline-flex;align-items:center;}
.ds-nav-links .ds-has-sub > a{display:inline-flex;align-items:center;}
.ds-nav-links .ds-has-sub > a::after{content:"";width:.4em;height:.4em;margin-left:.5em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .2s var(--cx-ease);}
.ds-nav-links .ds-has-sub:hover > a::after,.ds-nav-links .ds-has-sub:focus-within > a::after{transform:rotate(225deg);opacity:.9;}
.ds-subnav{position:absolute;top:100%;left:-12px;min-width:236px;background:var(--cx-charcoal-3);border:1px solid var(--cx-n700);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--cx-ease),transform .2s var(--cx-ease);box-shadow:0 26px 60px -30px rgba(0,0,0,.85);z-index:120;}
.ds-has-sub:hover .ds-subnav,.ds-has-sub:focus-within .ds-subnav{opacity:1;visibility:visible;transform:translateY(0);}
.ds-subnav a{padding:9px 12px;border-radius:8px;font-size:.9rem;color:rgba(255,255,255,.72);white-space:nowrap;border:0 !important;}
.ds-subnav a:hover,.ds-subnav a:focus{background:rgba(var(--cx-accent-rgb),.14);color:var(--cx-white);}
@media (max-width:900px){
  .ds-nav-links .ds-nav-item{display:block;width:100%;}
  .ds-nav-links .ds-has-sub > a::after{margin-left:auto;}
  .ds-subnav{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:2px 0 8px 14px;min-width:0;}
  .ds-subnav a{padding:9px 0;font-size:.86rem;}
}

/* ── Unified nav on full-bleed landing pages ─────────────────────────────────
   The shared header is rendered outside #smooth-wrapper and fixed to the
   viewport (sticky can't pin against ScrollSmoother's transformed content).
   Content is offset by the header height. The landing node bodies no longer
   carry their own nav. */
.ds-fullbleed-page .ds-nav{position:fixed;left:0;right:0;top:0;z-index:1000;}
.ds-fullbleed-page #smooth-content{padding-top:66px;}
@media (max-width:900px){
  .ds-fullbleed-page #smooth-content{padding-top:60px;}
}


/* ── Turnstile CAPTCHA fieldset ──────────────────────────────────────────────
   turnstile.settings.widget.appearance is `interaction-only`: Cloudflare only
   paints the widget for visitors it decides to challenge, so for almost everyone
   .cf-turnstile resolves to zero height. Without this reset the empty fieldset
   still occupied ~104px of chrome (border, "CAPTCHA" legend, help text) on the
   contact form. Strip the chrome and keep the legend for assistive tech only —
   when Cloudflare does render the widget it carries its own labelling and
   branding. The hidden inputs inside still post normally. */
.captcha-type-challenge--turnstile{border:0;padding:0;margin:0;min-inline-size:0;}
.captcha-type-challenge--turnstile .captcha__title{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.captcha-type-challenge--turnstile .captcha__element{margin:0;}
/* captcha.settings.add_captcha_description is a no-op in captcha 2.x — the
   generic "this question is for testing whether or not you are a human"
   blurb is emitted regardless, so it is suppressed here. */
.captcha-type-challenge--turnstile .captcha__description{display:none;}
.captcha-type-challenge--turnstile .cf-turnstile:not(:empty){margin:var(--cx-space-6) 0;}


/* ── Status / error messages ─────────────────────────────────────────────────
   The `highlighted` region holds system_messages_block and is rendered by both
   page.html.twig and page--fullbleed.html.twig. Bootstrap Barrio's alert styles
   are light-on-light, so they are re-grounded here on the obsidian surface.
   Tokens only. */
/* No vertical padding on the wrapper: the region always contains Drupal's
   hidden message-fallback div and icon <symbol> sprite, so it is never truly
   empty. Spacing lives on the alerts themselves and collapses to zero when
   there are no messages to show. */
.ds-highlighted{max-width:1180px;margin:0 auto;padding:0 var(--cx-space-6);}
.ds-highlighted .messages,
.ds-highlighted .alert{
  background:var(--cx-card);
  border:1px solid var(--cx-n700);
  border-left:3px solid var(--cx-accent);
  border-radius:var(--cx-radius-md);
  color:var(--cx-n300);
  padding:var(--cx-space-5) var(--cx-space-6);
  margin:var(--cx-space-7) 0 0;
  font-size:.95rem;
  line-height:1.55;
}
.ds-highlighted .messages a,
.ds-highlighted .alert a{color:var(--cx-accent-hover);}
.ds-highlighted .messages ul{margin:var(--cx-space-3) 0 0;padding-left:1.15em;}
.ds-highlighted .messages--status,
.ds-highlighted .alert-success{
  border-left-color:var(--cx-success);
  background:linear-gradient(0deg, rgba(var(--cx-success-rgb), .07), rgba(var(--cx-success-rgb), .07)), var(--cx-card);
}
.ds-highlighted .messages--warning,
.ds-highlighted .alert-warning{
  border-left-color:var(--cx-warning);
  background:linear-gradient(0deg, rgba(var(--cx-warning-rgb), .07), rgba(var(--cx-warning-rgb), .07)), var(--cx-card);
}
.ds-highlighted .messages--error,
.ds-highlighted .alert-danger{
  border-left-color:var(--cx-danger);
  background:linear-gradient(0deg, rgba(var(--cx-danger-rgb), .08), rgba(var(--cx-danger-rgb), .08)), var(--cx-card);
  color:var(--cx-n100);
}


/* ── "What we do" mega-menu ──────────────────────────────────────────────────
   Accenture-style: inline trigger in the primary nav opens a full-width panel
   pinned below the sticky header. A left rail switches the right-hand pane.
   Tokens only (tokens.css); behaviour driven by js/nav.js. */
.ds-nav-links .ds-mega{position:static;display:inline-flex;align-items:center;}
.ds-mega-trigger{background:none;border:0;cursor:pointer;font-family:var(--cx-fbody);font-size:.95rem;font-weight:500;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:7px;padding:0;line-height:1;transition:color .2s var(--cx-ease);}
.ds-mega-trigger:hover,.ds-mega.is-open .ds-mega-trigger{color:var(--cx-accent);}
.ds-mega-caret{width:.42em;height:.42em;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .2s var(--cx-ease),opacity .2s var(--cx-ease);}
.ds-mega.is-open .ds-mega-caret{transform:rotate(225deg) translateY(-1px);opacity:.95;}

.ds-mega-panel{position:absolute;left:0;right:0;top:100%;background:linear-gradient(180deg,rgba(var(--cx-ink-rgb),.99) 0%,rgba(var(--cx-ink-deep-rgb),.99) 100%);border-top:1px solid rgba(var(--cx-accent-rgb),.28);border-bottom:1px solid var(--cx-n700);box-shadow:0 34px 70px -34px rgba(0,0,0,.92);z-index:120;}
.ds-mega-panel:not([hidden]){animation:dsMegaIn .18s var(--cx-ease);}
@keyframes dsMegaIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.ds-mega-inner{display:grid;grid-template-columns:312px 1fr;max-width:1180px;margin:0 auto;}

.ds-mega-rail{display:flex;flex-direction:column;gap:4px;padding:24px 22px;border-right:1px solid var(--cx-n700);}
.ds-mega-tab{position:relative;text-align:left;background:none;border:0;cursor:pointer;padding:12px 16px;border-radius:10px;display:flex;flex-direction:column;gap:3px;color:rgba(255,255,255,.82);transition:background .2s var(--cx-ease),color .2s var(--cx-ease);}
.ds-mega-tab:hover,.ds-mega-tab:focus-visible,.ds-mega-tab.is-active{background:rgba(var(--cx-accent-rgb),.12);color:var(--cx-white);outline:none;}
.ds-mega-tab.is-active{box-shadow:inset 3px 0 0 var(--cx-accent);}
.ds-mega-tab__label{font-family:var(--cx-fhead);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;}
.ds-mega-tab__label::after{content:"";width:.4em;height:.4em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:0;transition:opacity .2s var(--cx-ease),transform .2s var(--cx-ease);}
.ds-mega-tab:hover .ds-mega-tab__label::after,.ds-mega-tab.is-active .ds-mega-tab__label::after{opacity:.7;}
.ds-mega-tab__hint{font-size:.78rem;line-height:1.35;color:var(--cx-n500);}

.ds-mega-content{padding:26px 34px;}
.ds-mega-pane[hidden]{display:none;}
.ds-mega-viewall{display:inline-flex;align-items:center;font-family:var(--cx-fmono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-accent);text-decoration:none;margin-bottom:20px;transition:color .18s var(--cx-ease);}
.ds-mega-viewall:hover{color:var(--cx-accent-hover);}
.ds-mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:20px 30px;}
.ds-mega-group{display:flex;flex-direction:column;gap:1px;}
.ds-mega-group__title{margin:0 0 9px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-n500);min-height:.7rem;}
.ds-mega-group a{padding:7px 0;font-size:.92rem;color:rgba(255,255,255,.8);text-decoration:none;border:0 !important;transition:color .18s var(--cx-ease),transform .18s var(--cx-ease);}
.ds-mega-group a:hover,.ds-mega-group a:focus-visible{color:var(--cx-accent);transform:translateX(2px);outline:none;}

/* Mobile: collapse into the existing off-canvas nav as a stacked accordion. */
@media (max-width:900px){
  .ds-mega{display:block;width:100%;}
  .ds-mega-trigger{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--cx-n700);color:rgba(255,255,255,.9);}
  .ds-mega-panel{position:static;box-shadow:none;border-top:0;border-bottom:0;background:transparent;animation:none;}
  .ds-mega-inner{display:block;max-width:none;}
  .ds-mega-rail{display:none;}
  .ds-mega-content{padding:6px 0 10px 14px;}
  .ds-mega-pane,.ds-mega-pane[hidden]{display:block;padding:10px 0;}
  .ds-mega-pane + .ds-mega-pane{border-top:1px solid var(--cx-n700);}
  .ds-mega-viewall{margin:4px 0 12px;font-size:.68rem;}
  .ds-mega-cols{grid-template-columns:1fr;gap:12px;}
  .ds-mega-group__title{min-height:0;}
  .ds-mega-content a{border-bottom:0 !important;padding:9px 0;font-size:.9rem;}
}

/* Featured promo card — right rail of each mega pane (Accenture-style). */
.ds-mega-pane{display:grid;grid-template-columns:minmax(0,1fr) 296px;column-gap:36px;align-items:start;}
.ds-mega-viewall{grid-column:1 / -1;}
.ds-mega-cols{grid-column:1;grid-row:2;}
.ds-mega-feature{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--cx-n700);border-radius:14px;background:linear-gradient(158deg,rgba(var(--cx-accent-rgb),.12) 0%,rgba(34,31,66,.35) 62%);text-decoration:none;transition:border-color .2s var(--cx-ease),transform .2s var(--cx-ease),box-shadow .2s var(--cx-ease);}
.ds-mega-feature:hover,.ds-mega-feature:focus-visible{border-color:rgba(var(--cx-accent-rgb),.55);transform:translateY(-2px);box-shadow:0 20px 44px -26px rgba(var(--cx-accent-rgb),.5);outline:none;}
.ds-mega-feature__eyebrow{font-family:var(--cx-fmono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-accent);}
.ds-mega-feature__title{font-family:var(--cx-fhead);font-weight:600;font-size:1.08rem;line-height:1.2;letter-spacing:-.01em;color:var(--cx-white);}
.ds-mega-feature__desc{font-size:.86rem;line-height:1.4;color:var(--cx-n300);}
.ds-mega-feature__cta{margin-top:2px;font-size:.8rem;font-weight:600;color:var(--cx-accent);}
.ds-mega-feature:hover .ds-mega-feature__cta,.ds-mega-feature:focus-visible .ds-mega-feature__cta{color:var(--cx-accent-hover);}
@media (max-width:900px){
  .ds-mega-feature{grid-column:auto;grid-row:auto;margin-top:14px;}
}