/* ==========================================================================
   DA DIGITAL WORKS BUSINESS CONSULTING, theme override
   Loaded after style.css + pages.css. Re-points tokens to the formal,
   strategic persona and adds one-pager specific components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');

:root{
  --ink: #0e1a1d;
  --ink-soft: #4b5c60;
  --paper: #f5f3ee;
  --paper-dim: #e9e6dc;
  --paper-line: rgba(14,26,29,.14);
  --paper-line-strong: rgba(14,26,29,.28);
  --white: #ffffff;

  --accent: var(--teal);
  --accent-deep: var(--teal-deep);
  --on-accent: #06181a;

  --f-display: 'Fraunces', serif;
}

body{ font-family: var(--f-body); }
h1,h2,h3,h4{ font-weight: 500; letter-spacing: -.015em; }

.eyebrow{ color: var(--teal-deep); }
.mark svg path{ stroke: var(--teal); }
.marquee__item svg{ color: var(--teal); }

.btn{ --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn::after{ background: var(--teal); }
.btn:hover{ color: var(--on-accent); }
.btn--ghost::after{ background: var(--ink); }

.site-nav.is-scrolled{ background: rgba(245,243,238,.88); }
.preloader{ background: var(--ink); }
.preloader__bar i{ background: var(--teal); }

.hero__kicker{ color: var(--teal); }
.hero__blob{ background: var(--teal); mix-blend-mode: normal; opacity: .5; }
.hero__media img{ filter: grayscale(1) contrast(1.05); }

.cta-band{ background: var(--teal); color: #06181a; }
.cta-band .btn{ --btn-bg: var(--ink); --btn-fg: var(--paper); }
.cta-band .btn::after{ background: var(--ink); }

body.cursor-hover .cursor-ring{ background: var(--teal); border-color: var(--teal); }

/* ==========================================================================
   One-pager scaffolding
   ========================================================================== */
.onepager-nav{
  position: fixed; right: 2.2rem; top: 50%; transform: translateY(-50%);
  z-index: 400;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.onepager-nav a{
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
}
.onepager-nav a i{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper-line-strong);
  transition: background .35s, transform .35s;
}
.onepager-nav a span{
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s, transform .3s;
  background: var(--white);
  padding: .3em .7em; border-radius: 6px;
  box-shadow: 0 6px 16px -8px rgba(14,26,29,.3);
}
.onepager-nav a:hover span{ opacity: 1; transform: translateX(0); }
.onepager-nav a.is-active i{ background: var(--teal); transform: scale(1.3); }
@media (max-width: 1100px){ .onepager-nav{ display: none; } }

.intro-split{
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.intro-split .lede{
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400; line-height: 1.35;
}
.intro-split .body{ color: var(--ink-soft); }
.intro-split .body p + p{ margin-top: 1.1em; }
@media (max-width: 820px){ .intro-split{ grid-template-columns: 1fr; } }

/* framework, legit 4-step sequence from the brand brief */
.framework{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.framework__step{
  background: var(--white);
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2vw, 2rem);
  position: relative;
}
.framework__step .fi{
  font-family: var(--f-display); font-size: 2.4rem; font-weight: 500;
  color: var(--teal);
}
.framework__step h4{
  font-family: var(--f-body); font-weight: 800; font-size: 1rem;
  margin-top: 1.2rem;
}
.framework__step p{ margin-top: .6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 860px){ .framework{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .framework{ grid-template-columns: 1fr; } }

/* focus area accordion cards */
.focus-list{ display: flex; flex-direction: column; }
.focus-item{
  border-top: 1px solid var(--paper-line);
}
.focus-item:last-child{ border-bottom: 1px solid var(--paper-line); }
.focus-item__head{
  width: 100%;
  display: grid; grid-template-columns: 60px 1fr 90px 30px;
  align-items: center; gap: 1.4rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  text-align: left;
}
.focus-item__index{ font-family: var(--f-display); font-size: 1.6rem; color: var(--paper-line-strong); }
.focus-item__head .focus-item__h{ font-family: var(--f-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.focus-item__tag{ font-size: var(--fs-xs); font-weight: 700; color: var(--teal-deep); text-align: right; }
.focus-item__plus{ width: 22px; height: 22px; position: relative; justify-self: end; }
.focus-item__plus::before, .focus-item__plus::after{ content:''; position:absolute; background: var(--ink); top:50%; left:50%; transform: translate(-50%,-50%); }
.focus-item__plus::before{ width: 14px; height: 2px; }
.focus-item__plus::after{ width: 2px; height: 14px; transition: transform .35s var(--ease); }
.focus-item.is-open .focus-item__plus::after{ transform: translate(-50%,-50%) scaleY(0); }
.focus-item__panel{ max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.focus-item__panel-in{ padding-bottom: clamp(1.6rem,3vw,2.4rem); display: grid; grid-template-columns: 60px 1fr; gap: 1.4rem; }
.focus-item__panel-in ul{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; }
.focus-item__panel-in li{
  font-size: var(--fs-sm); color: var(--ink-soft);
  padding-left: 1.1em; position: relative;
}
.focus-item__panel-in li::before{
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}
@media (max-width: 700px){
  .focus-item__head{ grid-template-columns: 36px 1fr 26px; }
  .focus-item__tag{ display: none; }
  .focus-item__panel-in{ grid-template-columns: 1fr; }
  .focus-item__panel-in ul{ grid-template-columns: 1fr; }
}

/* pull quote / positioning statement */
.pull{
  font-family: var(--f-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.4;
  max-width: 20ch;
  border-left: 3px solid var(--teal);
  padding-left: clamp(1.2rem, 3vw, 2rem);
}

/* who it's for cards */
.who-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.who-card{
  padding: 2rem; border-radius: var(--radius-md);
  border: 1px solid var(--paper-line);
}
.who-card h4{ font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.who-card p{ margin-top: .7rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 860px){ .who-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .who-grid{ grid-template-columns: 1fr; } }

/* two-personality compare strip, echoed on consulting page footer CTA */
.persona-flip{
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
}
.persona-flip > a{
  padding: clamp(2rem,4vw,3.2rem);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: filter .3s;
}
.persona-flip > a:hover{ filter: brightness(1.05); }
.persona-flip .p-creative{ background: var(--yellow); color: #1a1608; }
.persona-flip .p-consulting{ background: var(--ink); color: var(--paper); }
.persona-flip h4{ font-family: var(--f-display); font-size: 1.5rem; }
.persona-flip p{ margin-top: .8rem; font-size: var(--fs-sm); opacity: .85; max-width: 32ch; }
.persona-flip span{ display: inline-flex; margin-top: 1.4rem; font-weight: 700; font-size: var(--fs-sm); }
.persona-flip > a:hover span{ text-decoration: underline; }
@media (max-width: 700px){ .persona-flip{ grid-template-columns: 1fr; } }