@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-regular.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Kaushan Script";src:url("../fonts/kaushan-script-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
--dp-eyebrow-size:clamp(1.02rem,1.35vw,1.25rem);
  --dp-black:#09080c;
  --dp-ink:#15121b;
  --dp-white:#ffffff;
  --dp-paper:#f7f7f7;
  --dp-purple:#7028df;
  --dp-purple-dark:#4c149f;
  --dp-purple-soft:#a879ef;
  --dp-text:#17131d;
  --dp-muted:#6e6877;
  --dp-body-font:"DM Sans",Arial,sans-serif;
  --dp-border:rgba(23,19,29,.10);
  --dp-shadow:0 24px 60px rgba(20,10,35,.12);
  --dp-shadow-soft:0 18px 46px rgba(20,10,35,.08);
  --dp-glow:0 20px 65px rgba(112,40,223,.28);
  --dp-container:1320px;
  --dp-wide:1380px;
  --dp-gutter:clamp(20px,4vw,56px);
  --dp-section:clamp(84px,10vw,140px);
  --dp-radius-sm:12px;
  --dp-radius-md:22px;
  --dp-radius-lg:34px;
  --dp-h1:clamp(3.45rem,7vw,6rem);
  --dp-hero-h1:clamp(3rem,5.3vw,4.75rem);
  --dp-h2:clamp(2.65rem,4.7vw,4rem);
  --dp-h3:clamp(1.85rem,3vw,2.65rem);
  --dp-card-title:clamp(1.95rem,2.45vw,2.1875rem);
  --dp-control-text:clamp(.76rem,.82vw,.93rem);
  --dp-body-lg:clamp(1rem,1.35vw,1.16rem);
  --dp-fast:160ms;
  --dp-normal:300ms;
  --dp-slow:820ms;
  --dp-ease:cubic-bezier(.22,.8,.2,1);
  --dp-ease-premium:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dp-white)}
body{margin:0;background:var(--dp-white);color:var(--dp-text);font-family:"DM Sans",Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:transparent;color:var(--dp-black)}
.container{width:min(var(--dp-container),calc(100% - (var(--dp-gutter)*2)));margin-inline:auto}
.container-wide{width:min(var(--dp-wide),calc(100% - (var(--dp-gutter)*2)));margin-inline:auto}
.section{padding-block:var(--dp-section)}
.eyebrow{margin:0;font-family:"Kaushan Script",cursive;font-size:var(--dp-eyebrow-size);font-weight:400;line-height:1.15;color:var(--dp-purple)}
.section-subtitle{font-size:var(--dp-eyebrow-size)}
h1,h2,h3{margin:0;font-family:"Barlow Condensed",Arial,sans-serif;text-wrap:balance}
h1{font-size:var(--dp-h1);font-weight:400;line-height:.91;letter-spacing:-.018em}
h2{font-size:var(--dp-h2);font-weight:500;line-height:.94;letter-spacing:-.012em}
h3{font-size:var(--dp-h3);font-weight:500;line-height:.98}
p{margin:0}.lead{font-size:var(--dp-body-lg);line-height:1.75;color:var(--dp-muted)}
.title-surface-light,[data-title-surface="light"]{--dp-title-hover-color:var(--dp-black)}
.title-surface-dark,[data-title-surface="dark"]{--dp-title-hover-color:var(--dp-white)}
.dp-accent,.dp-title-accent{display:inline-block;color:var(--dp-purple);font-weight:700;-webkit-text-fill-color:currentColor;transition:color 520ms var(--dp-ease-premium),transform 360ms var(--dp-ease-premium),letter-spacing 360ms var(--dp-ease-premium)}
.title-surface-light .dp-accent:hover,.title-surface-light .dp-title-accent:hover{color:var(--dp-black);transform:translateY(-2px) scale(1.018);letter-spacing:.008em}
.title-surface-dark .dp-accent:hover,.title-surface-dark .dp-title-accent:hover{color:var(--dp-white);transform:translateY(-2px) scale(1.018);letter-spacing:.008em}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:3px solid rgba(112,40,223,.52);outline-offset:4px;border-radius:8px}


/* Global responsive typography tokens */
@media (max-width:900px){
  :root{--dp-hero-h1:clamp(2.55rem,10.6vw,3.55rem)}
}
@media (max-width:680px){
  :root{--dp-h2:clamp(2.45rem,11vw,3.45rem)}
}
@media (max-width:560px){
  :root{--dp-hero-h1:clamp(2.25rem,10.2vw,2.9rem)}
}
@media (max-width:430px){
  :root{--dp-h2:clamp(2.35rem,11vw,3.15rem)}
}

/* GLOBAL TITLE-ACCENT HOVER RULE — title itself only */
/* Parent/card hover states must never recolor an accent before the cursor reaches the title. */
.dp-title-accent:not(:hover),
.dp-accent:not(:hover){
  color:var(--dp-purple)!important;
  -webkit-text-fill-color:currentColor!important;
  transform:none!important;
  letter-spacing:inherit!important;
  filter:none!important;
}
.title-surface-light .dp-title-accent:hover,
.title-surface-light .dp-accent:hover,
[data-title-surface="light"] .dp-title-accent:hover,
[data-title-surface="light"] .dp-accent:hover{
  color:var(--dp-black)!important;
  -webkit-text-fill-color:currentColor!important;
  transform:translateY(-2px) scale(1.018)!important;
  letter-spacing:.008em!important;
}
.title-surface-dark .dp-title-accent:hover,
.title-surface-dark .dp-accent:hover,
[data-title-surface="dark"] .dp-title-accent:hover,
[data-title-surface="dark"] .dp-accent:hover{
  color:var(--dp-white)!important;
  -webkit-text-fill-color:currentColor!important;
  transform:translateY(-2px) scale(1.018)!important;
  letter-spacing:.008em!important;
}

/* Global subtitle rule: light/white surfaces use the primary brand purple. Dark sections set white explicitly in their own scoped styles. */
.eyebrow,.section-subtitle{color:var(--dp-purple);}

@media(prefers-reduced-motion:reduce){
  .dp-title-accent,.dp-accent{transition:none!important}
}



/* v28: light-section subtitles use the global brand purple consistently. */
.services-subtitle, .web-types__subtitle, .web-tech__subtitle { color: var(--dp-purple) !important; }


/* v32 — Dark-surface subtitle contrast: dark sections always use white subtitles.
   Light/white sections continue using the global brand purple. */
body .title-surface-dark .eyebrow,
body [data-title-surface="dark"] .eyebrow{
  color:var(--dp-white)!important;
}