/* =========================================================
   ODWorks Design System
   Brand tokens, typography, resets, motion and utilities.
   Every page loads this file first, then css/style.css
   ========================================================= */

:root{
  /* Brand */
  --od-blue:#0013FE;
  --od-cyan:#63FFFD;
  --od-gradient:linear-gradient(100deg,#0013FE,#3BC9FF 70%,#63FFFD);

  /* Ink */
  --od-ink:#090B18;
  --od-navy:#07113C;
  --od-navy-deep:#0A1130;
  --od-heading:#0B1B33;
  --od-muted:#626778;
  --od-muted-soft:#8A90A2;

  /* Surfaces */
  --od-white:#FFFFFF;
  --od-cream:#FFF9EE;
  --od-light-blue:#EDF4FF;
  --od-peach:#FFF4EB;
  --od-mint:#ECFAF4;
  --od-lavender:#F1EEFF;
  --od-surface:#F4F6FF;
  --od-grey:#F5F6F8;
  --od-pale-cyan:#E9FFFF;

  /* Lines */
  --od-border:#E3E5EC;
  --od-border-soft:#EDEFF4;

  /* Type */
  --od-font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --od-font-serif:'Playfair Display',Georgia,serif;

  /* Radius */
  --od-radius-sm:8px;
  --od-radius:10px;
  --od-radius-lg:14px;
  --od-radius-xl:16px;

  /* Layout */
  --od-container:1296px;
  --od-gutter:clamp(16.2px,3.6vw,57.6px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:#090B18;font-family:Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:#0013FE;text-decoration:none}
a:hover{color:#07113C}
button,input{font-family:inherit}
::selection{background:#63FFFD;color:#07113C}
:focus-visible{outline:3px solid #0013FE;outline-offset:3px;border-radius:4px}
@keyframes odMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes odDraw{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
@keyframes odFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes odGrow{from{width:0}to{width:94%}}
@keyframes odPulse{0%{box-shadow:0 0 0 0 rgba(99,255,253,.9)}70%{box-shadow:0 0 0 11px rgba(99,255,253,0)}100%{box-shadow:0 0 0 0 rgba(99,255,253,0)}}
@keyframes odRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes odDrift{0%{transform:translate3d(-6%,-4%,0) scale(1)}50%{transform:translate3d(6%,4%,0) scale(1.15)}100%{transform:translate3d(-6%,-4%,0) scale(1)}}
@keyframes odStripes{from{background-position:0 0}to{background-position:280px 280px}}
@keyframes odGlowMove{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8%,10%,0) scale(1.12)}}
[data-reveal]{opacity:0;transform:translate3d(0,30px,0) scale(.97);will-change:opacity,transform;transition:opacity .75s cubic-bezier(.22,.72,.2,1),transform .75s cubic-bezier(.22,.72,.2,1)}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-in="1"]{opacity:1;transform:none}
/* Drop the compositor hint once the reveal has played — a permanent layer costs memory. */
[data-reveal][data-in="1"]{will-change:auto}
[data-only="mobile"]{display:none!important}
@media (max-width:1023px){
 [data-only="desktop"]{display:none!important}
 [data-only="mobile"]{display:flex!important}
 [data-stack]{grid-template-columns:1fr!important}
 [data-stack]>*{grid-column:auto!important;grid-row:auto!important}
}
@media (max-width:767px){[data-hide-sm]{display:none!important}}
@media (max-width:1023px){
 [data-tst-track]{position:static!important;height:auto!important}
 [data-tst-card]{position:relative!important;top:auto!important;left:auto!important;width:100%!important;transform:none!important;opacity:1!important;filter:none!important;pointer-events:auto!important}
 [data-tst-card][data-off="1"]{display:none!important}
 [data-foot-grid]{grid-template-columns:1fr!important}
 [data-foot-grid] > *{grid-column:auto!important}
 [data-spine]{display:none!important}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}
button,input,textarea,select{font-family:inherit}
input::placeholder,textarea::placeholder{color:#9AA1B8}
@keyframes odGridPan{from{background-position:0 0,0 0}to{background-position:96px 96px,96px 96px}}
@keyframes odGlowMove2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(12%,-8%,0) scale(.92)}}
@keyframes odSheen{0%{transform:translate3d(-120%,0,0) skewX(-18deg)}55%,100%{transform:translate3d(220%,0,0) skewX(-18deg)}}
@media (max-width:1023px){
 [data-only="desktop"]{display:none!important}
 [data-only="mobile"]{display:flex!important}
 [data-stack]{grid-template-columns:1fr!important}
 [data-stack]>*{grid-column:auto!important;grid-row:auto!important}
 [data-foot-grid]{grid-template-columns:1fr!important}
}
button,input,select{font-family:inherit}
input::placeholder{color:#9AA1B8}
@media (max-width:1023px){
 [data-only="desktop"]{display:none!important}
 [data-only="mobile"]{display:flex!important}
 [data-stack]{grid-template-columns:1fr!important}
 [data-stack]>*{grid-column:auto!important;grid-row:auto!important}
 [data-side]{position:static!important}
 [data-foot-grid]{grid-template-columns:1fr!important}
}
[data-article] p{margin:0 0 19.8px;font-size:15.8px;line-height:1.75;font-weight:500;color:#3C4152}
[data-article] h2{margin:37.8px 0 12.6px;font-size:clamp(20.7px,1.98vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#0B1B33}
[data-article] h3{margin:28.8px 0 10.8px;font-size:clamp(16.2px,1.44vw,18.9px);font-weight:800;letter-spacing:-.02em;line-height:1.28;color:#0B1B33}
[data-article] ul{margin:0 0 19.8px;padding:0 0 0 22px}
[data-article] li{margin:0 0 9px;font-size:15.3px;line-height:1.7;font-weight:500;color:#3C4152}
[data-article] strong{color:#0B1B33;font-weight:800}
[data-article] blockquote{margin:28.8px 0;padding:19.8px 23.4px;border-left:3px solid #63FFFD;background:#F8F9FC;border-radius:0 12px 12px 0}
[data-article] blockquote p{margin:0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(17.1px,1.71vw,21.6px);line-height:1.45;font-weight:500;color:#0B1B33}
[data-body] p{margin:0 0 19.8px;font-size:15.8px;line-height:1.75;font-weight:500;color:#3C4152}
[data-body] h2{margin:36px 0 12.6px;font-size:clamp(20.7px,1.98vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#0B1B33}
[data-body] h3{margin:27px 0 10.8px;font-size:clamp(16.2px,1.44vw,18.9px);font-weight:800;letter-spacing:-.02em;line-height:1.28;color:#0B1B33}
[data-body] ul{margin:0 0 19.8px;padding:0 0 0 22px}
[data-body] li{margin:0 0 9px;font-size:15.3px;line-height:1.7;font-weight:500;color:#3C4152}
[data-body] strong{color:#0B1B33;font-weight:800}
@media (max-width:1279px){
 [data-mega-grid]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:1023px){
 [data-mega]{display:none!important}
 [data-only="desktop"]{display:none!important}
 [data-only="mobile"]{display:flex!important}
 [data-stack]{grid-template-columns:1fr!important}
 [data-stack]>*{grid-column:auto!important;grid-row:auto!important}
 [data-side]{position:static!important}
 [data-foot-grid]{grid-template-columns:1fr!important}
}

/* WordPress port note: the static build used a client template runtime that removed
   closed dialogs/panels (mobile menu, mega-menu flyout, reviews modal) from the DOM
   entirely. The WP theme instead always renders them and toggles the native `hidden`
   attribute via assets/js/od-app.js. A few ported component classes (.od-17 mobile
   menu, .od-346 reviews modal, .od-574 mega flyout) set `display` directly, and an
   author-stylesheet `display` declaration always beats the browser's built-in
   `[hidden]{display:none}` rule regardless of selector specificity — so without this,
   those three render open on every page load. This single rule makes `hidden` win
   everywhere it's used in the theme. */
[hidden]{display:none!important}