/* DMND Engine, light mode.
   Loaded after /assets/site.css and only swaps colours:
   the dark grounds go Paper, white text goes black, and the yellow
   eyebrows go crimson (yellow disappears on Paper). Layout, rounded
   corners, type, the hero art and every animation are unchanged. The
   contact form keeps its dark card. */

:root{
  /* Brand palette (guidelines, Throttle draft v3)
     Primary    Black  #0D0D0D  text, dark sections, logo
                Paper  #F5F4F0  main background
     Secondary  Crimson #C4161C buttons, links, key highlights (the spark)
                Butter  #F3DD94 tags, fills, bands, accents on Black (the warmth)
     Supporting Charcoal #555555 secondary text on Paper
                White   #FFFFFF  cards on Paper, text on Black and Crimson */
  --black:#0D0D0D;
  --paper:#F5F4F0;
  --crimson:#C4161C;
  --butter:#F3DD94;
  --charcoal:#555555;
  --white:#FFFFFF;

  /* the site's own tokens, pointed at the palette */
  --bg:var(--paper);
  --fg:var(--black);
  --ink:var(--black);
  --ink-on-paper:var(--black);
  --accent:var(--crimson);
  --accent-lift:var(--crimson);   /* no lightened red: Crimson reads on Paper */
  --accent-deep:#E2363C;          /* button hover fills a lighter red */
  --eyebrow:var(--butter);
  --eyebrow-dim:#EBD382;          /* the CTA band's second, slightly deeper yellow */
  --grey:var(--charcoal);
}

/* secondary text on Paper is Charcoal */
.hero__copy,
.vert p,
.why__item p,
.tier p,
.cta__sub{color:var(--charcoal)}

/* Crimson pulse at the guideline value */
@keyframes cta-pulse{
  0%   {box-shadow:0 0 0 0 rgba(196,22,28,.6)}
  70%  {box-shadow:0 0 0 20px rgba(196,22,28,0)}
  100% {box-shadow:0 0 0 0 rgba(196,22,28,0)}
}

/* the hero logo art in flat Crimson rather than a gradient of off-palette reds */
.hero__art{background:var(--crimson)}

/* ---------- header ---------- */
.site-header{background:rgba(245,244,240,.82)}
.site-header:not(.is-top){background:rgba(245,244,240,.95);border-bottom-color:rgba(13,13,13,.14)}
.site-header__logo img{filter:none}
.site-nav a.is-active{color:var(--accent)}
.site-header.is-cta .btn--nav{color:var(--black);border-color:var(--black)}

/* ---------- eyebrows ---------- */
.hero__script,
.eyebrow,
.foot__col h3{color:var(--accent)}

/* ---------- hero ---------- */
.hero__art{opacity:.32}
.hero--inner .hero__art{opacity:.26}
.awards img{filter:invert(1)}

/* the form: a white card on Paper */
.quote{
  --fg:var(--black);
  color:var(--black);
  background:var(--paper);
  border-color:rgba(13,13,13,.1);
  box-shadow:0 24px 60px rgba(13,13,13,.12);
}
.quote__eyebrow{color:var(--crimson)}
.quote__rule{background:var(--crimson)}
.field input,
.field textarea,
.field select{border-bottom-color:var(--black);color:var(--black)}
.field input:focus,
.field textarea:focus,
.field select:focus{border-bottom-color:var(--crimson);box-shadow:0 1px 0 0 var(--crimson)}
.field input::placeholder,
.field textarea::placeholder,
.select select:invalid{color:var(--charcoal)}
.select::after{border-color:var(--charcoal)}
.select option{background:var(--white);color:var(--black)}

/* ---------- dark-ground sections, now Paper ---------- */
.wedge path{stroke:rgba(13,13,13,.16)}
.client--empty{border-color:rgba(13,13,13,.22);color:var(--charcoal)}
.jobs__intro,
.sec__lede,
.prose p,
.band--paper .sec__lede,
.band--paper .prose p{color:var(--charcoal)}
.card{background:var(--white);border-color:rgba(13,13,13,.09)}
.card p{color:var(--charcoal)}
.ticks li,
.band--paper .ticks li{color:var(--charcoal)}
.step p,
.band--paper .step p{color:var(--charcoal)}

/* picture placeholders take the Paper version */
.jobs__media,
.split__media{
  border-color:rgba(13,13,13,.1);
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(196,23,28,.14), transparent 62%),
    linear-gradient(170deg, #ffffff, #e9e7e1 70%);
}
.jobs__media::after,
.split__media::after{opacity:.14}
.split__media[data-label]::before{color:rgba(13,13,13,.38)}
.jobs__media:has(img),
.split__media:has(img){background:none;border:0}

/* ---------- section order ----------
   nav and hero White · the sections under the hero on a Black band that
   starts with the hero's White arrow and ends in the yellow-edged arrow ·
   everything after Paper · CTA band Butter · footer Black.
   The client logos are left out of this version. */
.site-header{background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.site-header:not(.is-top){background:rgba(255,255,255,.55)}

#clients{display:none}

.slab{background:var(--black);--fg:var(--white);color:var(--white)}
.hero{background:var(--white);--fg:var(--black);color:var(--black)}
.wedge{background:var(--black)}
.wedge path{fill:var(--white);stroke:none}   /* the hero's White arrow into the Black */

.slab section:not(.hero) .eyebrow{color:var(--butter)}
.slab section:not(.hero) :is(.jobs__intro,.sec__lede,.prose p){color:rgba(255,255,255,.72)}
.slab section:not(.hero) .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.slab section:not(.hero) .card p{color:rgba(255,255,255,.66)}
.slab section:not(.hero) .ticks li{color:rgba(255,255,255,.74)}
.slab section:not(.hero) .ticks li b{color:var(--white)}
.slab section:not(.hero) .step p{color:rgba(255,255,255,.66)}
.slab section:not(.hero) :is(.jobs__media,.split__media){
  border-color:rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(196,22,28,.5), transparent 62%),
    linear-gradient(170deg, #1a1a1a, var(--black) 65%);
}
.slab section:not(.hero) .split__media::after{opacity:.16}
.slab section:not(.hero) .split__media[data-label]::before{color:rgba(255,255,255,.42)}
.slab section:not(.hero) :is(.jobs__media,.split__media):has(img){background:none;border:0}

/* after the arrow: Paper, with White cards */
main > section:not(.cta){background:var(--paper)}

/* ---------- footer: Black ---------- */
.site-footer{background:var(--black);color:var(--white);border-top:0}
.site-footer::after{background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0))}
.foot__top{border-bottom-color:rgba(255,255,255,.14)}
.foot__mark img{filter:invert(1) brightness(.78);opacity:1}
.foot__brand p{color:rgba(255,255,255,.62)}
.foot__col h3{color:var(--butter)}
.foot__col a{color:rgba(255,255,255,.78)}
.foot__col a:hover{color:var(--butter)}
.foot__word img{filter:invert(1);opacity:.12}

/* ---------- styles carried over from the brand-guidelines page ----------
   the hero eyebrow as a Butter tag, the hero copy in Inter Charcoal, and
   the See What We Do and nav buttons as square Black outlines in Archivo
   Extra Bold Italic, filling Crimson on hover */
.hero__script{
  display:inline-block;
  margin-bottom:clamp(16px,1.2vw,41px);
  padding:.5em .75em;
  background:var(--butter);
  color:var(--black);
  font:600 20px/1 "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.16em;
}
.hero__copy{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(16px,1.0625vw,36px);
  line-height:1.6;
  color:var(--charcoal);
}
.btn--ghost,
.btn--nav{
  border-radius:4px;
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:800;
  font-style:italic;
}
.btn--ghost::before,
.btn--nav::before{border-radius:0 4px 4px 0}
.btn--ghost,
.site-header.is-top .btn--nav,
.site-header.is-cta .btn--nav{
  --swipe:var(--crimson);
  background:transparent;
  border-color:var(--black);
  color:var(--black);
}
.btn--ghost:hover,
.site-header.is-top .btn--nav:hover,
.site-header.is-cta .btn--nav:hover{color:var(--white);border-color:var(--crimson)}
@media (max-width:860px){ .hero__script{font-size:15px} }

/* every eyebrow matches the hero's Butter tag */
.eyebrow,
.band--paper .eyebrow,
.slab section:not(.hero) .eyebrow,
.quote__eyebrow{
  display:inline-block;
  padding:.5em .75em;
  background:var(--butter);
  color:var(--black);
  font:600 20px/1 "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.16em;
}
.quote__eyebrow{margin-bottom:clamp(12px,.9vw,31px)}
@media (max-width:860px){
  .eyebrow,.band--paper .eyebrow,.slab section:not(.hero) .eyebrow,.quote__eyebrow{font-size:15px}
}

/* the form's eyebrow is a mini version of the tag */
.quote__eyebrow{font-size:12px;letter-spacing:.18em;padding:.55em .8em}
@media (max-width:860px){ .quote__eyebrow{font-size:11px} }

/* a slab holding only its hero (contact, 404) stays white and points down into the paper */
.slab-edge:not(:has(.wedge)){background:var(--paper)}
.slab-edge:not(:has(.wedge)) .slab--dark{background:var(--white)}

/* quote form: on Send the fields fade and a spinner sits over them until
   the visitor moves to /thank-you/ */
.quote{position:relative}
.quote > *{transition:opacity .45s ease}
.quote.is-sending > *{opacity:.18;pointer-events:none}
.quote::after{
  content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;border:4px solid rgba(196,22,28,.18);border-top-color:var(--crimson);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.quote.is-sending::after{opacity:1;transform:scale(1);animation:quote-spin .8s linear infinite}
@keyframes quote-spin{from{rotate:0deg}to{rotate:360deg}}
.quote__status:empty{display:none}

/* ---------- mobile menu: a full-screen black sheet that opens from the
   hamburger's corner, links rising in one after another ---------- */
.menu-toggle{display:none}
.site-menu{display:none}
@media (max-width:860px){
  .menu-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
    width:44px;height:44px;margin-left:10px;padding:0 10px;
    background:none;border:0;cursor:pointer;flex:none;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle span{
    display:block;height:2px;width:100%;background:var(--black);border-radius:2px;
    transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .25s ease,background .3s ease;
    transform-origin:50% 50%;
  }
  .site-header .btn--nav{margin-left:auto}

  .site-menu{
    display:flex;flex-direction:column;justify-content:space-between;
    position:fixed;inset:0;z-index:49;
    padding:calc(110px + env(safe-area-inset-top,0px)) 24px calc(36px + env(safe-area-inset-bottom,0px));
    background:var(--black);color:var(--white);
    clip-path:circle(0 at calc(100% - 46px) 40px);
    transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s linear .7s;
    visibility:hidden;overflow-y:auto;
  }
  .site-menu__links{list-style:none;margin:0;padding:0}
  .site-menu__links li{
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .site-menu__links a{
    display:block;padding:14px 0;
    font-family:'Archivo',sans-serif;font-style:italic;font-weight:800;
    font-size:clamp(38px,11vw,64px);line-height:1.05;letter-spacing:-.02em;
    color:var(--white);text-decoration:none;
    transform:translateY(105%);
    transition:transform .6s cubic-bezier(.2,.8,.2,1),color .2s ease;
  }
  .site-menu__links a[aria-current="page"]{color:var(--butter)}
  .site-menu__links a:active,.site-menu__links a:hover{color:var(--accent-deep)}
  .site-menu__foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-top:32px;opacity:0;transform:translateY(16px);
    transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .site-menu__place{
    margin:0;padding:.55em .8em;background:var(--butter);color:var(--black);
    font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  }

  /* open */
  html.menu-open{overflow:hidden}
  html.menu-open .site-menu{
    clip-path:circle(150% at calc(100% - 46px) 40px);
    visibility:visible;transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s;
  }
  html.menu-open .site-menu__links a{transform:none;transition-delay:calc(.22s + var(--i) * .07s)}
  html.menu-open .site-menu__foot{opacity:1;transform:none;transition-delay:.6s}
  html.menu-open .site-header{background:transparent;border-bottom-color:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  html.menu-open .site-header__logo img{filter:invert(1)}
  html.menu-open .site-header .btn--nav{opacity:0;pointer-events:none}
  html.menu-open .menu-toggle span{background:var(--white)}
  html.menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  html.menu-open .menu-toggle span:nth-child(2){opacity:0;transform:scaleX(0)}
  html.menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .site-menu,.site-menu__links a,.site-menu__foot,.menu-toggle span{transition-duration:.01s!important;transition-delay:0s!important}
}
/* 404 and thank-you: no chevron, the white hero runs straight into the footer */
.slab-edge:has(.hero--solo),.slab-edge:has(.hero--solo) .slab--dark{clip-path:none;padding-bottom:0}
html:has(.hero--solo),body:has(.hero--solo){background:var(--black)}
/* founder portrait: keep the head in frame when the panel goes wide on phones */
.split__media--portrait img{object-position:50% 8%}

/* pricing: the hero art is a real dashboard, sitting clear of the copy */
.hero__art--img{
  background:none!important;-webkit-mask:none!important;mask:none!important;
  opacity:1!important;aspect-ratio:auto;transform:translateY(-50%)!important;
}
.hero--inner .hero__art--img{width:min(36vw,740px);right:clamp(-40px,-1vw,0px);top:62%}
.hero__art--img img{display:block;width:100%;height:auto}
.hero--pricing .hero__lead{max-width:52%}
@media (max-width:860px){
  .hero--pricing .hero__lead{max-width:none}
  .hero__art--img{display:none}
}