/* ═══════════════════════════════════════════════════════════════════════════
   DEVUTE ULTIMATE
   Lifted verbatim from the 2026 redesign mockups, then extended with the
   things a static mockup doesn't need: a mobile navigation, WordPress editor
   output, focus states and reduced-motion handling.

   1. Tokens
   2. Base
   3. Layout primitives
   4. Components (from the mockups — class names kept as v6-* so markup matches)
   5. Navigation, including the mobile drawer the mockups don't have
   6. WordPress content styles
   7. Responsive
   8. Accessibility & print
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
:root{
  --ink:#101014;
  --ink-soft:#2A2A31;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F4F1;
  --line:rgba(16,16,20,0.1);
  --line-strong:rgba(16,16,20,0.2);
  --muted:#67676F;
  --muted-2:#9C9CA3;
  --accent:#1B1D40;
  --accent-contrast:#FFFFFF;
  --star:#111114;
  --ok:#22B573;
  --radius:20px;
  --maxw:1440px;
  --gutter:40px;
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── 2. Base ──────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{ max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; }
::selection{ background:var(--accent); color:var(--accent-contrast); }

@keyframes v6-dot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes v6-mq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── 3. Layout primitives ─────────────────────────────────────────────────── */
.dv-shell{ font-family:var(--font-body); color:var(--ink); background:var(--paper); overflow-x:clip; }
.dv-wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ── 4. Components ────────────────────────────────────────────────────────── */
.v6-card{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .25s; }
.v6-card:hover{ transform:translateY(-5px); box-shadow:0 28px 52px -30px rgba(16,16,20,0.22); border-color:var(--line-strong); }

.v6-li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:padding-left .25s ease; }
.v6-li:hover{ padding-left:6px; }
.v6-li:last-child{ border-bottom:none; }
.v6-li:hover .v6-li-a{ opacity:1; transform:none; }
.v6-li-a{ opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s; }

.v6-faq{ border-bottom:1px solid var(--line); }
.v6-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.015em; color:var(--ink); }
.v6-faq summary::-webkit-details-marker{ display:none; }
.v6-faq summary::after{ content:'+'; font-family:var(--font-body); font-weight:500; font-size:26px; color:var(--muted); flex:none; }
.v6-faq[open] summary::after{ content:'\2013'; }

.v6-split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.v6-split > p{ margin:0; }

.v6-nb{ width:54px; height:54px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,color .2s,border-color .2s; font-size:19px; color:var(--ink); background:transparent; flex:none; }
.v6-nb:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.v6-nb-l{ border-color:rgba(255,255,255,0.3); color:#fff; }
.v6-nb-l:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.v6-dot{ height:8px; width:8px; border-radius:999px; background:var(--line-strong); cursor:pointer; transition:width .35s ease, background .35s ease; border:none; padding:0; }

.v6-ind{ transition:background .25s ease; cursor:pointer; }
.v6-ind:hover{ background:var(--ink); }
.v6-ind:hover .v6-ind-i, .v6-ind:hover .v6-ind-t, .v6-ind:hover .v6-ind-d{ color:#fff; }
.v6-ind-i, .v6-ind-t, .v6-ind-d, .v6-ind-ic{ transition:color .25s ease; }
.v6-ind:hover .v6-ind-ic{ color:#fff; }

.v6-csl > *{ position:relative; z-index:2; }
.v6-csl > .v6-cs-bg{ position:absolute; inset:0; z-index:0; }

/* Buttons — the mockups inline these; naming them keeps templates readable. */
.dv-btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:18px 34px; border-radius:999px; text-decoration:none; cursor:pointer; transition:opacity .2s, background .2s, color .2s, border-color .2s; border:1.5px solid transparent; }
.dv-btn--solid{ background:var(--ink); color:#fff; }
.dv-btn--solid:hover{ opacity:.85; }
.dv-btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.dv-btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dv-btn--sm{ font-size:14.5px; padding:13px 24px; }

.dv-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.dv-pulse{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:v6-dot 1.8s ease-in-out infinite; flex:none; }

/* ── 5. Navigation ────────────────────────────────────────────────────────── */
.v6-mi{ height:80px; display:flex; align-items:center; position:static; }
.v6-mi > span{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; cursor:pointer; transition:background .2s; }
.v6-mi:hover > span,
.v6-mi:focus-within > span{ background:var(--surface-2); }
.v6-mi.is-current > span{ background:var(--surface-2); }

.v6-mega{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 40px 70px -40px rgba(16,16,20,0.35); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60; }
.v6-mi:hover .v6-mega,
.v6-mi:focus-within .v6-mega{ opacity:1; visibility:visible; transform:none; }

.v6-ml{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; cursor:pointer; transition:background .2s; text-decoration:none; color:inherit; }
.v6-ml:hover{ background:var(--surface-2); }

/* Mobile drawer. The mockups simply hide the menu below 980px and offer no
   replacement, so this is ours. */
.dv-burger{ display:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:transparent; align-items:center; justify-content:center; cursor:pointer; flex:none; color:var(--ink); }
.dv-burger span{ display:block; width:18px; height:1.6px; background:currentColor; position:relative; transition:background .2s; }
.dv-burger span::before,
.dv-burger span::after{ content:''; position:absolute; left:0; width:18px; height:1.6px; background:currentColor; transition:transform .25s ease, top .25s ease; }
.dv-burger span::before{ top:-6px; }
.dv-burger span::after{ top:6px; }
[data-nav-open] .dv-burger span{ background:transparent; }
[data-nav-open] .dv-burger span::before{ top:0; transform:rotate(45deg); }
[data-nav-open] .dv-burger span::after{ top:0; transform:rotate(-45deg); }

.dv-drawer{ position:fixed; inset:0; z-index:200; background:var(--paper); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1); overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; }
[data-nav-open] .dv-drawer{ transform:none; }
.dv-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px var(--gutter); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); }
/* The close button lives inside the drawer, so it shows at every width. */
.dv-drawer__close{ display:flex; }
.dv-drawer__body{ padding:8px var(--gutter) 40px; }
.dv-drawer__group{ border-bottom:1px solid var(--line); }
.dv-drawer__group > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:20px 0; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.dv-drawer__group > summary::-webkit-details-marker{ display:none; }
.dv-drawer__group > summary::after{ content:'+'; font-size:24px; color:var(--muted); font-weight:400; }
.dv-drawer__group[open] > summary::after{ content:'\2013'; }
.dv-drawer__sub{ padding:0 0 18px; display:flex; flex-direction:column; gap:2px; }
.dv-drawer__label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); padding:14px 0 6px; }
.dv-drawer__link{ display:flex; flex-direction:column; gap:2px; padding:10px 0; text-decoration:none; color:var(--ink); font-weight:600; }
.dv-drawer__link small{ font-weight:500; font-size:13px; color:var(--muted); }
.dv-drawer__flat{ display:block; padding:20px 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.dv-drawer__cta{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.dv-drawer__cta .dv-btn{ justify-content:center; }
body[data-nav-open]{ overflow:hidden; }

/* Image placeholders. The mockups use a custom <image-slot> element for art
   that hasn't been shot yet; these keep the layout honest until it has. */
.dv-imgslot{
  background:var(--surface-2);
  border:1px dashed var(--line-strong);
  border-radius:14px;
  position:relative;
  min-height:80px;
}
.dv-imgslot--circle{ border-radius:50%; }
.dv-imgslot[data-label]::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px; text-align:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.dv-imgslot--circle[data-label]::after{ content:none; }

/* Sliders — horizontal scroll with snap, so they work without JS too. */
[data-slider-track]{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
}
[data-slider-track]::-webkit-scrollbar{ display:none; }
[data-slider-track] > *{ scroll-snap-align:start; flex:none; }

/* ── 6. WordPress content ─────────────────────────────────────────────────── */
.dv-prose{ font-size:18px; line-height:1.75; color:var(--ink-soft); }
.dv-prose > * + *{ margin-top:1.1em; }
.dv-prose h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.028em; color:var(--ink); margin-top:1.8em; }
.dv-prose h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); margin-top:1.6em; }
.dv-prose h4{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink); margin-top:1.4em; }
.dv-prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--line-strong); }
.dv-prose a:hover{ text-decoration-color:var(--ink); }
.dv-prose ul,.dv-prose ol{ padding-left:1.3em; }
.dv-prose li + li{ margin-top:.4em; }
.dv-prose blockquote{ margin:2em 0; padding:24px 28px; background:var(--surface-2); border-radius:var(--radius); font-family:var(--font-display); font-size:22px; line-height:1.35; letter-spacing:-.02em; color:var(--ink); }
.dv-prose blockquote p{ margin:0; }
.dv-prose code{ font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); padding:.15em .4em; border-radius:6px; }
.dv-prose pre{ background:var(--ink); color:#fff; padding:22px; border-radius:14px; overflow-x:auto; }
.dv-prose pre code{ background:none; padding:0; color:inherit; }
.dv-prose img,.dv-prose figure img{ border-radius:14px; }
.dv-prose figcaption{ font-size:14px; color:var(--muted); margin-top:.6em; }
.dv-prose table{ width:100%; border-collapse:collapse; font-size:16px; }
.dv-prose th,.dv-prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.dv-prose hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }
.alignwide{ max-width:1120px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:none; }
.aligncenter{ text-align:center; }
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.wp-caption{ max-width:100%; }
.sticky,.gallery-caption,.bypostauthor{ /* required by the Theme Check */ }

/* Comments — plain, because this site barely uses them. */
.dv-comments{ margin-top:60px; }
.dv-comments ol{ list-style:none; padding:0; }
.dv-comments .comment-body{ padding:20px 0; border-bottom:1px solid var(--line); }

/* Pagination */
.dv-pagination{ display:flex; gap:8px; flex-wrap:wrap; margin-top:56px; }
.dv-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:46px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; font-weight:600; }
.dv-pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dv-pagination .page-numbers:hover{ border-color:var(--line-strong); }

/* ── 7. Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1160px){
  .v6-navmenu{ gap:0 !important; }
  .v6-mi > span{ padding:10px 10px; }
}
@media (max-width:1080px){
  .v6-cs{ grid-template-columns:1fr !important; }
  .v6-g5{ grid-template-columns:1fr 1fr !important; }
  .v6-hostgrid{ grid-template-columns:1fr !important; }
  .v6-split{ flex-direction:column; align-items:flex-start; gap:24px; }
  .v6-hero{ grid-template-columns:1fr !important; }
  .v6-g4{ grid-template-columns:1fr 1fr !important; }
  .v6-g3{ grid-template-columns:1fr !important; }
}
@media (max-width:1080px){
  .dv-footer__grid{ grid-template-columns:1fr 1fr 1fr !important; }
}
@media (max-width:980px){
  :root{ --gutter:24px; }
  .v6-navmenu{ display:none !important; }
  .dv-burger{ display:flex; }
  .dv-topbar__meta{ display:none !important; }
  .v6-g4,.v6-g5{ grid-template-columns:1fr !important; }
  .dv-footer__grid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
}
@media (max-width:900px){
  /* Capability rows: number, title, description. Stack the description under
     the title rather than squeezing three columns onto a phone. */
  .v6-cap{ grid-template-columns:44px 1fr !important; gap:8px 20px !important; }
  .v6-cap > p{ grid-column:2; }
}
@media (max-width:640px){
  .dv-footer__grid{ grid-template-columns:1fr !important; }
  /* The mockups' hero padding is tuned for desktop; ease it off on phones. */
  .v6-hero{ padding-top:56px !important; padding-bottom:56px !important; }
  .v6-cap{ grid-template-columns:1fr !important; }
  .v6-cap > div:first-child{ display:none; }
  .v6-cap > p{ grid-column:1; }
}
@media (max-width:640px){
  :root{ --gutter:20px; }
  .dv-btn{ padding:16px 26px; font-size:15px; }
  .v6-faq summary{ font-size:18px; padding:22px 0; }
  .dv-prose{ font-size:17px; }
}

/* ── 8. Accessibility & print ─────────────────────────────────────────────── */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--paper); clip-path:none; color:var(--ink); display:block;
  font-size:14px; font-weight:700; height:auto; left:5px; line-height:normal;
  padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000;
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media print{
  .dv-topbar,.dv-nav,.dv-drawer,.dv-burger,.dv-footer{ display:none !important; }
  body{ font-size:12pt; }
}