/*
Theme Name: Dvyse
Theme URI: https://dvyse.com
Author: Noman Ahmed
Author URI: https://dvyse.com
Description: Custom theme for Dvyse — a founder-led digital studio. Strategy, design, development and SEO.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: dvyse
*/

/* ============================================================
   DESIGN TOKENS
   Change a value here and it updates everywhere on the site.
   ============================================================ */
:root{
  /* Brand */
  --ink:#101413;
  --bone:#F2F4F1;
  --jade-dark:#0A6650;
  --jade-bright:#17B890;
  --muted:#5C6662;

  /* Semantic colour */
  --bg-primary:var(--bone);
  --bg-inverse:var(--ink);
  --surface:#FFFFFF;
  --surface-inverse:#151A19;
  --surface-muted:#E8EBE6;
  --text-primary:var(--ink);
  --text-secondary:var(--muted);
  --text-inverse:var(--bone);
  --text-inverse-secondary:#B4BDB8;
  --text-inverse-muted:#A9B2AD;
  --text-placeholder:#8C948F;
  --accent-readable:var(--jade-dark);
  --accent-on-dark:var(--jade-bright);
  --border-light:rgba(16,20,19,0.12);
  --border-light-strong:rgba(16,20,19,0.16);
  --border-dark:rgba(242,244,241,0.14);
  --border-dark-strong:rgba(242,244,241,0.28);
  --focus:var(--jade-bright);
  --error:#B4483C;
  --stripe-a:#E7EAE5;
  --stripe-b:#EEF0EB;

  /* Type */
  --font-heading:'Manrope',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-extrabold:800;

  --type-hero:clamp(42px,6.4vw,92px);
  --type-page-h1:clamp(38px,5.4vw,76px);
  --type-case-h1:clamp(34px,5vw,68px);
  --type-contact-h1:clamp(36px,4.8vw,64px);
  --type-h2-large:clamp(32px,4.2vw,58px);
  --type-h2:clamp(32px,4vw,54px);
  --type-h2-small:clamp(30px,3.6vw,48px);
  --type-quote:clamp(24px,3vw,40px);
  --type-service-title:clamp(22px,2.6vw,34px);
  --type-h3:clamp(21px,1.8vw,26px);
  --type-stat:clamp(26px,2.4vw,36px);
  --type-lead:clamp(17px,1.3vw,19px);
  --type-body-lg:clamp(17px,1.2vw,19px);
  --type-body:17px;
  --type-body-sm:16px;
  --type-ui:15px;
  --type-caption:14px;
  --type-label:12px;

  --lh-display:1.02; --lh-h1:1.05; --lh-h2:1.08; --lh-h3:1.25;
  --lh-quote:1.28; --lh-tight:1.4; --lh-body:1.62; --lh-relaxed:1.68;

  --ls-display:-0.035em; --ls-h2:-0.03em; --ls-h3:-0.02em;
  --ls-tight:-0.01em; --ls-label:0.14em; --ls-caps:0.06em; --ls-mono:0.1em;

  /* Space */
  --space-xs:8px; --space-sm:14px; --space-md:20px;
  --space-lg:28px; --space-xl:40px; --space-2xl:64px;
  --space-section:clamp(64px,10vw,136px);
  --space-section-md:clamp(56px,7vw,104px);
  --space-section-sm:clamp(48px,6vw,80px);
  --space-hero-top:clamp(120px,14vh,168px);
  --space-page-top:clamp(120px,14vh,160px);
  --gap-grid:clamp(24px,3vw,48px);
  --gap-columns:clamp(36px,5vw,72px);

  /* Layout */
  --container:1280px;
  --page-padding:clamp(20px,4vw,64px);
  --header-height:76px;

  /* Shape */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px;

  /* Motion */
  --motion-fast:200ms; --motion-standard:260ms; --motion-slow:380ms;
  --ease-standard:ease;
  --ease-emphasized:cubic-bezier(.16,1,.3,1);
  --marquee-duration:44s;
}

/* ============================================================
   RESET
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(max-width:768px){html{scroll-padding-top:80px}}
body{
  margin:0;background:var(--bg-primary);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--type-body-sm);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-readable);text-decoration:none}
a:hover{color:var(--text-primary)}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--jade-bright);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--font-heading)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--page-padding)}
.section{padding:var(--space-section) 0}
.section--md{padding:var(--space-section-md) 0}
.section--sm{padding:var(--space-section-sm) 0}
.section--dark{background:var(--bg-inverse);color:var(--text-inverse)}
.section--light{background:var(--bg-primary);color:var(--text-primary)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--gap-columns)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--gap-grid)}
.rule-top{border-top:1px solid var(--border-light);padding-top:var(--space-section-sm)}
.section--dark .rule-top{border-top-color:var(--border-dark)}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--jade-bright);color:var(--ink);
  padding:12px 18px;border-radius:var(--radius-md);font-weight:var(--w-semibold);
  font-size:var(--type-caption);transition:top var(--motion-fast) var(--ease-standard);
}
.skip-link:focus{top:12px;color:var(--ink)}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.eyebrow__dot{width:5px;height:5px;border-radius:50%;background:var(--accent-readable);flex:none}
.section--dark .eyebrow__dot{background:var(--accent-on-dark)}
.eyebrow__text{
  font-size:var(--type-label);font-weight:var(--w-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-readable);
}
.section--dark .eyebrow__text{color:var(--accent-on-dark)}

.h1{font-weight:var(--w-extrabold);font-size:var(--type-page-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-display)}
.h1--hero{font-size:var(--type-hero);line-height:var(--lh-display)}
.h2{font-weight:var(--w-bold);font-size:var(--type-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.h2--large{font-size:var(--type-h2-large)}
.h2--small{font-size:var(--type-h2-small);line-height:1.1}
.h3{font-weight:var(--w-bold);font-size:var(--type-h3);letter-spacing:var(--ls-h3)}
.lead{font-size:var(--type-lead);line-height:var(--lh-body);color:var(--text-secondary);max-width:60ch}
.section--dark .lead{color:var(--text-inverse-secondary)}
.body{font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-secondary)}
.section--dark .body{color:var(--text-inverse-secondary)}
.body-sm{font-size:var(--type-body-sm);line-height:var(--lh-body);color:var(--text-secondary)}
.section--dark .body-sm{color:var(--text-inverse-muted)}
.meta{font-size:var(--type-caption);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:var(--ls-mono)}
.accent{color:var(--accent-on-dark)}
.measure-16{max-width:16ch}.measure-18{max-width:18ch}.measure-20{max-width:20ch}
.measure-52{max-width:52ch}.measure-56{max-width:56ch}.measure-64{max-width:64ch}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;
  border:0;border-radius:var(--radius-md);font-size:var(--type-body-sm);
  font-weight:var(--w-semibold);cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);
}
.btn--primary{background:var(--jade-bright);color:var(--ink)}
.btn--primary:hover{background:var(--bone);color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark:hover{background:var(--jade-dark);color:var(--bone)}
.btn--outline{background:none;border:1px solid var(--border-dark-strong);color:var(--text-inverse);font-weight:var(--w-medium)}
.btn--outline:hover{border-color:var(--jade-bright);background:rgba(23,184,144,0.08);color:var(--text-inverse)}
.btn--lg{min-height:56px;padding:0 32px;font-size:var(--type-body)}
.btn--sm{min-height:44px;padding:0 22px;font-size:var(--type-ui)}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--type-ui);font-weight:var(--w-semibold);color:var(--accent-readable);
  transition:gap var(--motion-fast) var(--ease-standard);
}
.link-arrow:hover{gap:16px;color:var(--accent-readable)}
.section--dark .link-arrow{color:var(--accent-on-dark)}
.link-arrow--underline{border-bottom:1px solid rgba(10,102,80,0.3);padding-bottom:6px}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-height);
  display:flex;align-items:center;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--motion-slow) var(--ease-standard),border-color var(--motion-slow) var(--ease-standard);
}
.site-header.is-scrolled{background:var(--ink);border-bottom-color:var(--border-dark)}
.site-header__inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--page-padding);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.site-header__logo{display:flex;align-items:center;line-height:0}
.site-header__logo img{height:26px;width:auto}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.1vw,32px);list-style:none;margin:0;padding:0}
.site-nav li{list-style:none;display:flex;margin:0}
.site-nav a{
  display:flex;align-items:center;gap:7px;font-size:var(--type-ui);
  font-weight:var(--w-medium);color:var(--text-inverse);
  transition:color var(--motion-fast) var(--ease-standard);
}
.site-nav a:hover{color:var(--jade-bright)}
.site-nav a::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--jade-bright);
  opacity:0;transition:opacity 250ms var(--ease-standard);
}
.site-nav .current-menu-item a::before,
.site-nav .current_page_item a::before,
.site-nav a.is-current::before{opacity:1}
.site-nav .nav-cta a,
.site-nav a.nav-cta{
  min-height:44px;padding:0 22px;margin-left:8px;
  background:var(--jade-bright);color:var(--ink);border-radius:var(--radius-md);
  font-weight:var(--w-semibold);
}
.site-nav .nav-cta a::before,.site-nav a.nav-cta::before{display:none}
.site-nav .nav-cta a:hover,.site-nav a.nav-cta:hover{background:var(--bone);color:var(--ink)}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
  width:48px;height:44px;background:none;border:0;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;height:1.5px;background:var(--bone)}
.nav-toggle span:first-child{width:26px}
.nav-toggle span:last-child{width:18px;background:var(--jade-bright)}

.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:none;flex-direction:column;padding:0 24px 40px;
}
.mobile-menu.is-open{display:flex}
.mobile-menu__top{height:var(--header-height);display:flex;align-items:center;justify-content:space-between}
.mobile-menu__top img{height:26px;width:auto}
.mobile-menu__close{
  width:48px;height:44px;display:flex;align-items:center;justify-content:flex-end;
  background:none;border:0;color:var(--bone);font-size:26px;line-height:1;cursor:pointer;padding:0;
}
.mobile-menu nav{display:flex;flex-direction:column;gap:2px;margin-top:24px;list-style:none;padding:0}
.mobile-menu nav li{list-style:none;display:flex;flex-direction:column;margin:0}
.mobile-menu nav li a{flex:1}
.mobile-menu nav a{
  font-family:var(--font-heading);font-size:30px;font-weight:var(--w-bold);
  letter-spacing:var(--ls-h3);color:var(--bone);padding:12px 0;
  border-bottom:1px solid rgba(242,244,241,0.10);
}
.mobile-menu nav a:hover{color:var(--jade-bright)}
.mobile-menu__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;
  min-height:56px;background:var(--jade-bright);color:var(--ink);
  font-size:var(--type-body);font-weight:var(--w-semibold);border-radius:var(--radius-md);
}
.mobile-menu__note{margin-top:20px;font-size:var(--type-caption);color:var(--muted)}

@media(max-width:939px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--bg-inverse);color:var(--text-inverse);padding:var(--space-hero-top) 0 clamp(56px,7vw,88px)}
.hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(44px,6vw,72px);align-items:center}
.availability{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-lg)}
.availability__dot{width:7px;height:7px;border-radius:50%;background:var(--jade-bright);box-shadow:0 0 0 4px rgba(23,184,144,0.16);flex:none}
.availability__text{font-size:13px;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-inverse-muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--space-xl)}
.hero__footnote{margin-top:36px;font-size:var(--type-caption);color:var(--muted)}

.page-hero{background:var(--bg-inverse);color:var(--text-inverse);padding:var(--space-page-top) 0 var(--space-section-sm)}

/* Browser frame graphic */
.frame{border:1px solid var(--border-dark);border-radius:var(--radius-md);background:var(--surface-inverse);overflow:hidden}
.frame__bar{height:40px;border-bottom:1px solid rgba(242,244,241,0.10);display:flex;align-items:center;gap:7px;padding:0 16px}
.frame__dot{width:7px;height:7px;border-radius:50%;background:rgba(242,244,241,0.20)}
.frame__dot--live{background:var(--jade-bright)}
.frame__url{margin-left:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--muted)}
.frame__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:4/3}
.frame__cell{border-right:1px solid rgba(242,244,241,0.06);border-bottom:1px solid rgba(242,244,241,0.06)}
.frame__cell:nth-child(4n){border-right:0}
.frame__cell:nth-child(n+9){border-bottom:0}
.frame__cell--tint{background:rgba(23,184,144,0.07)}
.frame__mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.frame__mark span{
  display:block;width:clamp(70px,9vw,104px);height:clamp(70px,9vw,104px);
  border-left:2px solid var(--jade-bright);border-bottom:2px solid var(--jade-bright);
  transform:rotate(-45deg);opacity:.92;
}
.frame__steps{
  border-top:1px solid rgba(242,244,241,0.10);padding:18px 20px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--muted);
}
.frame__step{display:flex;align-items:center;gap:7px}
.frame__step--active{color:var(--jade-bright)}
.frame__step i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}
.frame__line{flex:1;min-width:16px;height:1px;background:rgba(242,244,241,0.12)}

/* ============================================================
   CAPABILITY STRIP
   ============================================================ */
.cap-strip{background:var(--bg-inverse);border-top:1px solid rgba(242,244,241,0.10)}
.cap-strip__inner{
  max-width:var(--container);margin:0 auto;padding:22px var(--page-padding);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);overflow-x:auto;
  font-size:13px;font-weight:var(--w-medium);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--text-inverse-muted);white-space:nowrap;
}
.cap-strip__dot{width:4px;height:4px;border-radius:50%;background:var(--jade-bright);flex:none}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{display:flex;align-items:center;gap:30px;width:max-content;animation:logoMarquee var(--marquee-duration) linear infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-c{
  flex:none;width:132px;height:132px;border-radius:50%;background:var(--surface);
  border:1px solid rgba(16,20,19,0.10);display:flex;align-items:center;justify-content:center;
  padding:20px;box-shadow:0 8px 22px rgba(16,20,19,0.10);
  transition:transform var(--motion-standard) var(--ease-emphasized);
}
.logo-c:hover{transform:scale(1.09) translateY(-4px)}
.logo-c--dark{background:var(--ink);border-color:var(--border-dark)}
.logo-c img{max-width:100%;max-height:100%;object-fit:contain}

/* ============================================================
   MEDIA PLACEHOLDERS / IMAGES
   ============================================================ */
.media{overflow:hidden;border-radius:var(--radius-md);border:1px solid rgba(16,20,19,0.10)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-slow) var(--ease-standard)}
.media:hover img{transform:scale(1.03)}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--4x5{aspect-ratio:4/5}
.placeholder{
  width:100%;height:100%;
  background:repeating-linear-gradient(135deg,var(--stripe-a) 0 14px,var(--stripe-b) 14px 28px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--text-placeholder);text-align:center;padding:16px;
}
.portrait{aspect-ratio:4/5;background:var(--surface-muted);overflow:hidden;border-radius:var(--radius-md);border:1px solid rgba(16,20,19,0.10);max-width:460px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ============================================================
   TAGS / CHIPS
   ============================================================ */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;color:var(--text-primary);border:1px solid rgba(16,20,19,0.14);border-radius:var(--radius-sm);padding:6px 12px}
.section--dark .tag{color:var(--text-inverse);border-color:var(--border-dark)}

.filters{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:clamp(28px,3.5vw,44px);border-bottom:1px solid var(--border-light)}
.filter{
  min-height:44px;padding:0 18px;border:1px solid var(--border-light-strong);
  background:none;color:var(--text-primary);border-radius:var(--radius-md);
  font-size:var(--type-caption);font-weight:var(--w-medium);cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard);
}
.filter:hover{border-color:var(--accent-readable);color:var(--accent-readable)}
.filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--bone);font-weight:var(--w-semibold)}

/* ============================================================
   SERVICES ACCORDION
   ============================================================ */
.accordion{border-top:1px solid var(--border-light-strong)}
.section--dark .accordion{border-top-color:var(--border-dark)}
.accordion__item{border-bottom:1px solid var(--border-light-strong)}
.section--dark .accordion__item{border-bottom-color:var(--border-dark)}
.accordion__trigger{
  width:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.4vw,30px) 0;background:none;border:0;
  color:var(--text-primary);text-align:left;cursor:pointer;
  transition:color var(--motion-fast) var(--ease-standard);
}
.section--dark .accordion__trigger{color:var(--text-inverse)}
.accordion__trigger:hover{color:var(--accent-readable)}
.section--dark .accordion__trigger:hover{color:var(--accent-on-dark)}
.accordion__num{font-family:var(--font-mono);font-size:13px;color:var(--accent-readable);flex:none;width:28px}
.section--dark .accordion__num{color:var(--accent-on-dark)}
.accordion__title{flex:1;font-family:var(--font-heading);font-weight:var(--w-bold);font-size:var(--type-service-title);letter-spacing:var(--ls-h3);color:inherit}
.accordion__sign{flex:none;font-size:22px;color:var(--muted)}
.accordion__panel{display:none;padding:0 0 clamp(24px,2.6vw,34px) clamp(44px,calc(28px + 3vw),68px)}
.accordion__item.is-open .accordion__panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px}
.accordion__item.is-open .accordion__sign{transform:rotate(45deg)}
.accordion__sign{transition:transform var(--motion-fast) var(--ease-standard);display:inline-block}
.panel-label{font-size:var(--type-label);font-weight:var(--w-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-readable);margin-bottom:8px}
.section--dark .panel-label{color:var(--accent-on-dark)}
.panel-list{display:grid;gap:8px;font-size:var(--type-body-sm);color:var(--text-primary)}
.section--dark .panel-list{color:var(--text-inverse-secondary)}

/* Service link rows (homepage) */
.service-row{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--border-dark);
  color:var(--text-inverse);transition:color var(--motion-fast) var(--ease-standard);
}
.service-row:hover{color:var(--jade-bright)}
.service-row__num{font-family:var(--font-mono);font-size:13px;color:var(--jade-bright);flex:none;width:28px}
.service-row__title{flex:1;font-family:var(--font-heading);font-weight:var(--w-bold);font-size:clamp(21px,2.3vw,30px);letter-spacing:var(--ls-h3);color:inherit}
.service-row__arrow{flex:none;font-size:16px;color:var(--muted)}

/* ============================================================
   PROCESS
   ============================================================ */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(24px,2.5vw,36px)}
.stage{border-top:1px solid rgba(16,20,19,0.18);padding-top:22px}
.section--dark .stage{border-top-color:rgba(242,244,241,0.20)}
.stage--active{border-top-color:var(--accent-readable)}
.section--dark .stage--active{border-top-color:var(--jade-bright)}
.stage__num{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.stage--active .stage__num{color:var(--accent-readable)}
.section--dark .stage--active .stage__num{color:var(--jade-bright)}
.stage__name{margin:12px 0;font-size:24px;font-weight:var(--w-bold);letter-spacing:var(--ls-h3)}
.stage--active .stage__name{font-weight:var(--w-extrabold);color:var(--accent-readable)}
.section--dark .stage--active .stage__name{color:var(--jade-bright)}

.stage-block{border-top:1px solid var(--border-light-strong);padding-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--gap-grid)}
.stage-block--active{border-top-color:var(--accent-readable)}
.stage-block__name{margin-top:12px;font-size:clamp(26px,3vw,40px);font-weight:var(--w-bold);letter-spacing:var(--ls-h2)}
.stage-block--active .stage-block__name{font-weight:var(--w-extrabold);color:var(--accent-readable)}
.checklist{display:grid;gap:10px;font-size:var(--type-body-sm);color:var(--text-primary)}

/* ============================================================
   NUMBERED EDITORIAL LIST
   ============================================================ */
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 clamp(32px,4vw,72px)}
.point{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--border-light)}
.point__num{font-family:var(--font-mono);font-size:var(--type-label);color:var(--accent-readable);padding-top:4px}
.point p{font-size:var(--type-body);line-height:1.5;color:var(--text-primary)}

.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 clamp(32px,4vw,64px)}
.block{border-top:1px solid rgba(16,20,19,0.14);padding:22px 0}
.block h3{margin-bottom:10px;font-size:19px;font-weight:var(--w-bold);letter-spacing:var(--ls-tight)}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(20px,2.5vw,40px)}
.value{padding-top:20px;border-top:1px solid rgba(242,244,241,0.2);font-family:var(--font-heading);font-weight:var(--w-bold);font-size:clamp(19px,1.9vw,24px);letter-spacing:var(--ls-h3)}

/* ============================================================
   ENGAGEMENT CARDS
   ============================================================ */
.engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.5vw,32px)}
.engagement{display:grid;gap:12px;align-content:start}
.engagement__num{font-family:var(--font-mono);font-size:var(--type-label);color:var(--accent-readable)}
.engagement__title{font-size:22px;font-weight:var(--w-bold);letter-spacing:var(--ls-h3)}
.engagement__price{padding-bottom:14px;border-bottom:1px solid rgba(16,20,19,0.10);font-family:var(--font-heading);font-weight:var(--w-bold);font-size:var(--type-body);letter-spacing:var(--ls-tight);color:var(--accent-readable)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-mark{display:block;font-family:var(--font-heading);font-weight:var(--w-extrabold);font-size:56px;line-height:.6;color:var(--jade-bright);margin-top:20px}
.quote{margin:28px 0 0;font-family:var(--font-heading);font-weight:var(--w-semibold);font-size:var(--type-quote);line-height:var(--lh-quote);letter-spacing:-0.025em;max-width:26ch}
.quote-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--border-dark);max-width:640px}
.quote-meta__dot{width:4px;height:4px;border-radius:50%;background:var(--jade-bright)}
.stat{font-weight:var(--w-bold);font-size:var(--type-stat);letter-spacing:var(--ls-h3);color:var(--text-inverse)}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--muted)}
.review-stats{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:36px;padding-top:24px;border-top:1px solid var(--border-dark);max-width:640px}
.review-stats__note{font-size:13px;color:var(--text-inverse-muted)}
.testimonial-card{background:var(--surface);border:1px solid rgba(16,20,19,0.10);border-radius:var(--radius-lg);padding:24px;display:grid;gap:14px;align-content:start}
.stars{color:var(--jade-dark);font-size:var(--type-caption);letter-spacing:2px}

/* ============================================================
   FAQ
   ============================================================ */
details>summary{-webkit-user-select:none;user-select:none;list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.faq{border-top:1px solid var(--border-dark)}
.faq__item{border-bottom:1px solid var(--border-dark)}
.faq__q{
  padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:clamp(18px,1.8vw,24px);letter-spacing:-0.015em;color:var(--text-inverse);
}
.faq__sign{color:var(--jade-bright);font-size:22px}
.faq__a{margin:0;padding:0 4px 24px;max-width:70ch;font-size:var(--type-body-sm);line-height:var(--lh-body);color:var(--text-inverse-muted)}

/* ============================================================
   FORM
   ============================================================ */
.form-card{border:1px solid var(--border-dark);border-radius:var(--radius-lg);background:var(--surface-inverse);padding:clamp(22px,3vw,40px)}
.form-grid{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.field{display:grid;gap:8px}
.field label{font-size:13px;font-weight:var(--w-medium);letter-spacing:0.04em;color:var(--text-inverse-muted)}
.field input,.field select,.field textarea{
  min-height:48px;padding:0 14px;background:var(--ink);
  border:1px solid rgba(242,244,241,0.18);border-radius:var(--radius-md);
  color:var(--text-inverse);font-size:var(--type-body-sm);width:100%;
}
.field textarea{padding:12px 14px;line-height:1.55;resize:vertical;min-height:auto}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade-bright);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#6E7873}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--type-ui);line-height:1.5;color:var(--text-inverse-secondary);cursor:pointer;padding:4px 0}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--jade-bright);flex:none;min-height:auto}
.detail-rows{display:grid;max-width:420px;margin-top:var(--space-xl)}
.detail-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border-dark)}
.detail-row:last-child{border-bottom:1px solid var(--border-dark)}
.detail-row__k{font-size:var(--type-caption);color:var(--muted)}
.detail-row__v{font-size:var(--type-ui);color:var(--text-inverse)}
a.detail-row__v:hover{color:var(--jade-bright)}
.form-success{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:24px 0}
.form-success__dot{width:10px;height:10px;border-radius:50%;background:var(--jade-bright)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg-inverse);color:var(--text-inverse);border-top:1px solid var(--border-dark)}
.site-footer__cols{
  max-width:var(--container);margin:0 auto;
  padding:var(--space-section-sm) var(--page-padding) 32px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(32px,4vw,56px);
}
.site-footer__brand img{height:30px;width:auto}
.site-footer__tagline{margin-top:20px;max-width:34ch;font-size:var(--type-body-sm);line-height:1.6;color:var(--text-inverse-muted)}
.site-footer h2{
  margin-bottom:18px;font-family:var(--font-body);font-size:var(--type-label);
  font-weight:var(--w-semibold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted);
}
.site-footer nav{display:grid;gap:12px;font-size:var(--type-ui);justify-items:start;list-style:none;margin:0;padding:0}
.site-footer nav li{list-style:none;margin:0}
.site-footer nav a{color:var(--text-inverse-secondary)}
.site-footer nav a:hover{color:var(--jade-bright)}
.site-footer__bar{
  max-width:var(--container);margin:0 auto;
  padding:24px var(--page-padding) 40px;border-top:1px solid rgba(242,244,241,0.10);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:var(--type-caption);color:var(--muted);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--bg-inverse);color:var(--text-inverse);padding:clamp(64px,9vw,128px) 0;border-top:1px solid var(--border-dark)}
.cta-band h2{font-weight:var(--w-extrabold);font-size:clamp(32px,4.8vw,66px);line-height:var(--lh-h1);letter-spacing:var(--ls-display);max-width:18ch}
.cta-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:var(--space-xl)}
.cta-band__email{font-size:var(--type-body);font-weight:var(--w-medium);color:var(--text-inverse);border-bottom:1px solid rgba(242,244,241,0.3);padding-bottom:4px}
.cta-band__email:hover{border-bottom-color:var(--jade-bright);color:var(--jade-bright)}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.case-nav a{border-top:1px solid var(--border-dark);padding-top:18px;color:var(--text-inverse)}
.case-nav a:hover{color:var(--jade-bright)}
.case-nav__label{display:block;font-size:var(--type-label);color:var(--muted);margin-bottom:8px}
.case-nav__title{font-family:var(--font-heading);font-weight:var(--w-bold);font-size:20px}
.case-nav__next{text-align:right}

/* ============================================================
   COOKIE BAR
   ============================================================ */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--ink);
  color:var(--text-inverse);border-top:1px solid var(--border-dark);
  padding:12px clamp(16px,3vw,24px);display:flex;gap:14px;align-items:center;
  box-shadow:0 -8px 24px rgba(16,20,19,0.18);
}
.cookie-bar p{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--text-inverse-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cookie-bar button{flex:none;min-height:36px;padding:0 18px;background:var(--jade-bright);border:0;border-radius:var(--radius-md);color:var(--ink);font-size:13px;font-weight:var(--w-semibold);cursor:pointer}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
/* Reveal is opt-in: JS adds .js-reveal only once it is ready to run.
   If the script fails or never loads, every section stays visible. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 480ms ease-out,transform 480ms ease-out}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}

/* ============================================================
   EDITOR CONTENT
   Anything written in the WordPress editor: articles, Privacy,
   Terms, and the body of a case study.
   ============================================================ */
.dvyse-prose{max-width:70ch;font-size:var(--type-body);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.dvyse-prose > * + *{margin-top:var(--space-md)}
.dvyse-prose h2{
  font-size:clamp(24px,2.4vw,32px);font-weight:var(--w-bold);
  letter-spacing:var(--ls-h3);line-height:var(--lh-h3);
  color:var(--text-primary);margin-top:var(--space-xl);
}
.dvyse-prose h3{
  font-size:clamp(19px,1.8vw,23px);font-weight:var(--w-bold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-h3);
  color:var(--text-primary);margin-top:var(--space-lg);
}
.dvyse-prose h4{font-size:18px;font-weight:var(--w-semibold);color:var(--text-primary);margin-top:var(--space-lg)}
.dvyse-prose a{color:var(--accent-readable);border-bottom:1px solid rgba(10,102,80,0.28)}
.dvyse-prose a:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}
.dvyse-prose strong{color:var(--text-primary);font-weight:var(--w-semibold)}
.dvyse-prose ul,.dvyse-prose ol{padding-left:22px;display:grid;gap:10px}
.dvyse-prose ul{list-style:disc}
.dvyse-prose ol{list-style:decimal}
.dvyse-prose li::marker{color:var(--accent-readable)}
.dvyse-prose blockquote{
  margin:var(--space-lg) 0;padding:20px 0 20px 24px;
  border-left:2px solid var(--accent-readable);
  font-family:var(--font-heading);font-weight:var(--w-semibold);
  font-size:clamp(19px,1.7vw,23px);line-height:1.45;
  letter-spacing:-0.015em;color:var(--text-primary);
}
.dvyse-prose blockquote p{margin:0}
.dvyse-prose img,.dvyse-prose figure{border-radius:var(--radius-md);margin-top:var(--space-lg)}
.dvyse-prose figcaption{font-size:var(--type-caption);color:var(--text-placeholder);margin-top:8px}
.dvyse-prose code{
  font-family:var(--font-mono);font-size:0.9em;background:rgba(16,20,19,0.06);
  padding:2px 6px;border-radius:var(--radius-sm);color:var(--text-primary);
}
.dvyse-prose pre{
  background:var(--ink);color:var(--text-inverse);padding:20px;
  border-radius:var(--radius-md);overflow-x:auto;font-size:14px;line-height:1.6;
}
.dvyse-prose pre code{background:none;padding:0;color:inherit}
.dvyse-prose hr{border:0;border-top:1px solid var(--border-light);margin:var(--space-xl) 0}
.dvyse-prose table{width:100%;border-collapse:collapse;font-size:var(--type-body-sm)}
.dvyse-prose th,.dvyse-prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-light)}
.dvyse-prose th{font-weight:var(--w-semibold);color:var(--text-primary)}

/* Pagination */
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination .page-numbers,.nav-links .page-numbers{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--border-light-strong);border-radius:var(--radius-md);
  font-size:var(--type-ui);font-weight:var(--w-medium);color:var(--text-primary);
}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{border-color:var(--accent-readable);color:var(--accent-readable)}
.pagination .page-numbers.current,.nav-links .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ============================================================
   WORDPRESS CORE
   ============================================================ */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal;
}
.alignleft{float:left;margin-right:var(--space-md)}
.alignright{float:right;margin-left:var(--space-md)}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:var(--type-caption);color:var(--text-secondary);margin-top:8px}


/* ============================================================
   CONTACT FORM PLUGINS
   Makes WPForms and Contact Form 7 output match the Dvyse design
   exactly. Without this the plugin ships its own grey inputs.
   ============================================================ */

/* ---------- WPForms ---------- */
.form-card .wpforms-container,
.form-card .wpforms-container-full{margin:0 !important}
.form-card .wpforms-form{display:grid;gap:20px}
.form-card .wpforms-head-container{display:none}

.form-card .wpforms-field{padding:0 !important;display:grid;gap:8px}
.form-card .wpforms-field-container{display:grid;gap:20px}

.form-card .wpforms-field-label{
  font-size:13px !important;font-weight:var(--w-medium) !important;
  letter-spacing:0.04em;color:var(--text-inverse-muted) !important;
  font-family:var(--font-body) !important;margin:0 !important;display:block;
}
.form-card .wpforms-required-label{color:var(--jade-bright) !important;border:0 !important}
.form-card .wpforms-field-sublabel{
  font-size:12px !important;color:var(--muted) !important;
  font-weight:var(--w-regular) !important;margin-top:4px !important;
}
.form-card .wpforms-field-description{
  font-size:12px !important;color:var(--muted) !important;margin:0 !important;
}

.form-card .wpforms-field input[type=text],
.form-card .wpforms-field input[type=email],
.form-card .wpforms-field input[type=tel],
.form-card .wpforms-field input[type=url],
.form-card .wpforms-field input[type=number],
.form-card .wpforms-field select,
.form-card .wpforms-field textarea{
  min-height:48px !important;padding:0 14px !important;
  background:var(--ink) !important;
  border:1px solid rgba(242,244,241,0.18) !important;
  border-radius:var(--radius-md) !important;
  color:var(--text-inverse) !important;
  font-family:var(--font-body) !important;font-size:var(--type-body-sm) !important;
  width:100% !important;max-width:100% !important;box-shadow:none !important;
  transition:border-color var(--motion-fast) var(--ease-standard);
}
.form-card .wpforms-field textarea{
  padding:12px 14px !important;line-height:1.55 !important;
  resize:vertical;min-height:110px !important;
}
.form-card .wpforms-field select{
  appearance:none;-webkit-appearance:none;padding-right:38px !important;
  background-image:linear-gradient(45deg,transparent 50%,#A9B2AD 50%),linear-gradient(135deg,#A9B2AD 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px) !important;
  background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;
}
.form-card .wpforms-field input:focus,
.form-card .wpforms-field select:focus,
.form-card .wpforms-field textarea:focus{
  border-color:var(--jade-bright) !important;outline:none !important;box-shadow:none !important;
}
.form-card .wpforms-field input::placeholder,
.form-card .wpforms-field textarea::placeholder{color:#6E7873 !important}

/* Two-up rows: give a field the CSS class dvyse-half in WPForms */
@media(min-width:600px){
  .form-card .wpforms-field-container{grid-template-columns:1fr 1fr}
  .form-card .wpforms-field{grid-column:1/-1}
  .form-card .wpforms-field.dvyse-half{grid-column:auto}
}

/* Checkboxes and radios */
.form-card .wpforms-field-checkbox ul,
.form-card .wpforms-field-radio ul{margin:0 !important;padding:0 !important;list-style:none;display:grid;gap:10px}
.form-card .wpforms-field-checkbox li,
.form-card .wpforms-field-radio li{margin:0 !important;display:flex;gap:12px;align-items:flex-start}
.form-card .wpforms-field-checkbox input,
.form-card .wpforms-field-radio input{
  width:20px !important;height:20px !important;min-height:0 !important;
  margin:2px 0 0 !important;accent-color:var(--jade-bright);flex:none;
}
.form-card .wpforms-field-checkbox label,
.form-card .wpforms-field-radio label{
  font-size:var(--type-ui) !important;line-height:1.5 !important;
  color:var(--text-inverse-secondary) !important;font-weight:var(--w-regular) !important;
  cursor:pointer;margin:0 !important;
}

/* Submit */
.form-card .wpforms-submit-container{padding:0 !important;margin:0 !important}
.form-card button[type=submit],
.form-card .wpforms-submit{
  min-height:56px !important;padding:0 30px !important;
  background:var(--jade-bright) !important;border:0 !important;
  border-radius:var(--radius-md) !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;font-size:var(--type-body) !important;
  font-weight:var(--w-semibold) !important;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard) !important;
  box-shadow:none !important;text-transform:none !important;
}
.form-card button[type=submit]:hover,
.form-card .wpforms-submit:hover{background:var(--bone) !important;color:var(--ink) !important}

/* Validation */
.form-card .wpforms-error,
.form-card label.wpforms-error{
  color:#E8897E !important;font-size:13px !important;
  font-weight:var(--w-regular) !important;margin-top:2px !important;
}
.form-card input.wpforms-error,
.form-card textarea.wpforms-error,
.form-card select.wpforms-error{border-color:#B4483C !important}

/* Success message */
.form-card .wpforms-confirmation-container-full,
div.form-card .wpforms-confirmation-container-full{
  background:transparent !important;border:0 !important;
  border-left:3px solid var(--jade-bright) !important;
  padding:8px 0 8px 18px !important;margin:0 !important;
  color:var(--text-inverse) !important;
}
.form-card .wpforms-confirmation-container-full p{
  font-family:var(--font-heading);font-weight:var(--w-semibold);
  font-size:20px;line-height:1.4;color:var(--text-inverse) !important;margin:0 !important;
}

/* ---------- Contact Form 7 ---------- */
.form-card .wpcf7-form{display:grid;gap:20px}
.form-card .wpcf7-form p{margin:0;display:grid;gap:8px;font-size:13px;font-weight:var(--w-medium);letter-spacing:0.04em;color:var(--text-inverse-muted)}
.form-card .wpcf7-form-control-wrap{display:block}
.form-card .wpcf7-form input[type=text],
.form-card .wpcf7-form input[type=email],
.form-card .wpcf7-form input[type=tel],
.form-card .wpcf7-form input[type=url],
.form-card .wpcf7-form select,
.form-card .wpcf7-form textarea{
  min-height:48px;padding:0 14px;background:var(--ink);
  border:1px solid rgba(242,244,241,0.18);border-radius:var(--radius-md);
  color:var(--text-inverse);font-family:var(--font-body);
  font-size:var(--type-body-sm);width:100%;
}
.form-card .wpcf7-form textarea{padding:12px 14px;line-height:1.55;resize:vertical;min-height:110px}
.form-card .wpcf7-form input:focus,
.form-card .wpcf7-form select:focus,
.form-card .wpcf7-form textarea:focus{border-color:var(--jade-bright);outline:none}
.form-card .wpcf7-form input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--jade-bright)}
.form-card .wpcf7-list-item{margin:0;display:flex;gap:12px;align-items:flex-start}
.form-card .wpcf7-list-item-label{font-size:var(--type-ui);line-height:1.5;color:var(--text-inverse-secondary);font-weight:var(--w-regular)}
.form-card .wpcf7-submit{
  min-height:56px;padding:0 30px;background:var(--jade-bright);border:0;
  border-radius:var(--radius-md);color:var(--ink);
  font-size:var(--type-body);font-weight:var(--w-semibold);cursor:pointer;
  justify-self:start;transition:background var(--motion-fast) var(--ease-standard);
}
.form-card .wpcf7-submit:hover{background:var(--bone)}
.form-card .wpcf7-not-valid-tip{color:#E8897E;font-size:13px;font-weight:var(--w-regular)}
.form-card .wpcf7-response-output{
  border:0 !important;border-left:3px solid var(--jade-bright) !important;
  margin:0 !important;padding:8px 0 8px 18px !important;
  color:var(--text-inverse);font-size:var(--type-body-sm);
}