@import url("https://fonts.bunny.net/css?family=fraunces:400,400i,600,600i,900|jetbrains-mono:400,500&display=swap");

/* ============================================================
   MakeClear — "Resolve"
   Radical restraint. The page performs clarity: a giant word
   resolves from blur to focus, then one idea per screen on a
   field of warm paper. Three values only. Bunny fonts only.
   ============================================================ */

:root{
  --paper:#F7F5F1;        /* warm off-white ground */
  --ink:#14110E;          /* near-black, warm */
  --ink-soft:#5C564E;     /* muted ink for sub-text */
  --signal:#D4452B;       /* the single vermilion */
  --ghost:#C9C5BD;        /* fading jargon only */
  --rule:rgba(20,17,14,.12);
  --display:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:min(1200px,92vw);
  --blur:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- reset / base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--signal);color:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- neutralise the inherited Attention chrome; the content row IS the page ---- */
#header,#nav,#footer,.column-sidebar,.headline-area{display:none!important}
#content{padding:0!important}
#content>.container.columns,#content .container.columns{display:block!important;max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
.column-content,#page-1,.page-container,.page-container.text,#content .page-content{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;float:none!important}

/* ---- shared layout ---- */
.mc-wrap{width:var(--wrap);margin-inline:auto}
.mc-section{padding-block:clamp(5rem,14vh,11rem)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50}
.skip-link:focus{left:.5rem;top:.5rem}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* ---- minimal fixed wordmark bar ---- */
.mc-bar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem clamp(1.25rem,4vw,2.5rem);
  background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:saturate(1.1) blur(6px);
  opacity:0;transform:translateY(-100%);transition:opacity .4s,transform .4s var(--ease)}
.mc-bar.is-shown{opacity:1;transform:none}
.mc-wordmark{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none}
.mc-wordmark .dot{color:var(--signal)}
.mc-bar nav{display:flex;gap:1.4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em}
.mc-bar nav a{text-decoration:none;color:var(--ink-soft);transition:color .25s}
.mc-bar nav a:hover,.mc-bar nav a[aria-current]{color:var(--ink)}
.mc-progress{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--signal);z-index:31;transition:width .1s linear}

/* ---- hero ---- */
.mc-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:6rem clamp(1.25rem,4vw,2.5rem) 4rem}
.mc-hero .ghosts{position:absolute;top:34%;left:0;right:0;display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:center;color:var(--ghost);font-size:clamp(.9rem,2vw,1.3rem);pointer-events:none;user-select:none;transition:opacity 1s ease}
.mc-hero .word{font-family:var(--display);font-weight:900;font-size:clamp(5.5rem,22vw,18rem);line-height:.9;letter-spacing:-.04em;position:relative;z-index:2}
.mc-hero .word .dot{color:var(--signal)}
.mc-hero .lede{font-family:var(--mono);font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--ink-soft);margin-top:2rem;max-width:34ch;z-index:2}
.mc-cue{margin-top:auto;padding-top:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-soft)}
.mc-cue .line{width:1px;height:34px;background:var(--rule)}
.mc-cue svg{width:16px;height:16px}

/* the resolve gesture: blurred + slightly scaled, sharpens to rest */
.resolve{filter:blur(var(--blur));opacity:.0;transform:scale(1.04);transition:filter .9s var(--ease),opacity .7s ease,transform .9s var(--ease)}
.resolve.is-clear{filter:blur(0);opacity:1;transform:none}
.mc-hero .word .dot{opacity:0;transition:opacity .4s ease .55s}
.mc-hero.is-clear .word .dot{opacity:1}
.mc-hero.is-clear .ghosts{opacity:0}

/* ---- prose sections: one idea per screen ---- */
.mc-statement{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5.2vw,4rem);line-height:1.12;letter-spacing:-.02em;max-width:18ch}
.mc-statement em{font-style:italic;color:var(--signal)}
.mc-kicker{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);margin-bottom:1.6rem;display:flex;align-items:center;gap:.7rem}
.mc-kicker::before{content:"";width:26px;height:1px;background:var(--signal)}
.mc-section p.body{font-size:clamp(1rem,1.4vw,1.18rem);max-width:46ch;margin-top:1.6rem;color:var(--ink-soft)}

/* offers: stripped vertical list, no cards */
.mc-offers{border-top:1px solid var(--rule);margin-top:3.5rem}
.mc-offer{display:grid;grid-template-columns:3rem 1fr;gap:1.5rem;padding:2.2rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.mc-offer .n{font-family:var(--mono);font-size:.8rem;color:var(--signal)}
.mc-offer h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.01em;line-height:1.1}
.mc-offer p{font-family:var(--mono);color:var(--ink-soft);margin-top:.6rem;max-width:52ch;font-size:.95rem}

/* proof: one pull quote in emptiness */
.mc-proof{background:var(--ink);color:var(--paper)}
.mc-proof .mc-wrap{text-align:center}
.mc-proof blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,3rem);line-height:1.25;letter-spacing:-.01em;max-width:24ch;margin-inline:auto}
.mc-proof blockquote .q{color:var(--signal)}
.mc-proof cite{display:block;margin-top:2rem;font-family:var(--mono);font-style:normal;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ghost)}

/* contact: irreducible minimum */
.mc-contact .mc-statement{margin-bottom:2rem}
.mc-contact a.email{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,5vw,3.4rem);text-decoration:none;letter-spacing:-.02em;border-bottom:3px solid var(--signal);padding-bottom:.1em;transition:color .25s}
.mc-contact a.email:hover{color:var(--signal)}
.mc-contact .meta{font-family:var(--mono);color:var(--ink-soft);font-size:.9rem;margin-top:2rem;line-height:1.9}

/* footer: the peak-end line */
.mc-footer{border-top:1px solid var(--rule);padding:clamp(3rem,8vh,5rem) 0}
.mc-footer .close{font-family:var(--display);font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.3;max-width:30ch;margin-bottom:2.5rem}
.mc-footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}
.mc-footer a{color:var(--ink-soft);text-decoration:none}
.mc-footer a:hover{color:var(--ink)}

/* ---- reduced motion: everything is already clear ---- */
@media (prefers-reduced-motion:reduce){
  .resolve{filter:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .mc-hero .word .dot,.mc-hero .ghosts{transition:none!important}
  .mc-hero.is-clear .ghosts{opacity:0}
  .mc-hero .word .dot{opacity:1}
  .mc-bar{transition:none}
}

/* ============================================================
   MULTI-PAGE — interior pages (Approach / Work / Proof / Contact)
   Same restraint, same three values. The bar is present from the
   top here, so interior heads clear it; everything else reuses the
   home vocabulary.
   ============================================================ */
.mc-pagehead{padding-top:clamp(8rem,18vh,12rem);padding-bottom:clamp(1.5rem,5vh,3rem)}
.mc-pagehead .mc-lede{font-family:var(--mono);font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink-soft);margin-top:1.8rem;max-width:50ch;line-height:1.75}

/* "go deeper" link — quiet mono, vermilion */
.mc-more{display:inline-flex;align-items:center;gap:.55rem;margin-top:2.2rem;font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--signal);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,gap .25s}
.mc-more::after{content:"\2192"}
.mc-more:hover{border-color:var(--signal);gap:.85rem}

/* the engagement / detail under an offer */
.mc-offer .detail{font-family:var(--mono);font-size:.85rem;color:var(--ink-soft);margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none}
.mc-offer .detail li{position:relative;padding-left:1rem}
.mc-offer .detail li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--signal);border-radius:50%}

/* before -> after: jargon struck, the clear line beneath (the studio's whole gesture) */
.mc-baf{border-top:1px solid var(--rule);margin-top:3.5rem}
.mc-baf .pair{padding:2.1rem 0;border-bottom:1px solid var(--rule)}
.mc-baf .before{font-family:var(--mono);color:var(--ink-soft);font-size:.95rem;text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px;opacity:.8}
.mc-baf .after{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3.2vw,2.1rem);line-height:1.16;letter-spacing:-.01em;margin-top:.7rem}

/* secondary quotes on paper (the dark .mc-proof stays the showpiece) */
.mc-quotes{display:grid;gap:2.8rem;margin-top:3.5rem}
.mc-quote{border-left:2px solid var(--signal);padding-left:1.6rem;max-width:46ch}
.mc-quote blockquote{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(1.2rem,2.6vw,1.75rem);line-height:1.3}
.mc-quote cite{display:block;margin-top:1.1rem;font-family:var(--mono);font-style:normal;font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-soft)}

/* "what to expect" plain list on contact */
.mc-expect{list-style:none;margin-top:2.6rem;display:grid;gap:1.1rem;max-width:48ch}
.mc-expect li{font-family:var(--mono);font-size:.95rem;color:var(--ink-soft);padding-left:1.6rem;position:relative;line-height:1.6}
.mc-expect li::before{content:"\2014";position:absolute;left:0;color:var(--signal)}

@media (max-width:640px){
  .mc-offer{grid-template-columns:1fr;gap:.4rem}
  .mc-bar{padding:.85rem 1.1rem;gap:.6rem}
  .mc-bar nav{display:flex;gap:.85rem;font-size:.66rem;letter-spacing:.08em}
  .mc-hero .ghosts{top:28%}
}

/* ============================================================
   RESOLVE — DEPTH PACK
   Seven new layout components. More to look at, nothing more to
   read. Three values only, hairlines not boxes, Fraunces numerals
   against mono labels. No images, no new colours, no new fonts.
   Append below the existing Resolve CSS. Every heading carries
   .resolve so clarity.js animates it automatically — no JS change.
   ============================================================ */

/* ---- 1. OUTCOME STAT ROW — big Fraunces figures, mono labels ----
   Hard outcomes designed as visual assets: "16 -> 7 words", "1 idea". */
.mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border-block:1px solid var(--rule);margin-top:3.5rem}
.mc-stat{background:var(--paper);padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3vw,2rem)}
.mc-stat .fig{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:.92;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;
  display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap}
.mc-stat .fig .to{color:var(--signal);font-weight:600;font-size:.6em;align-self:center}
.mc-stat .fig .unit{font-family:var(--mono);font-weight:400;font-size:.26em;
  color:var(--ink-soft);letter-spacing:0;align-self:flex-end;margin-bottom:.5em}
.mc-stat .label{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-soft);margin-top:1rem;line-height:1.5}

/* ---- 2. MUDDLE vs CLEAR — two columns, one hairline between ----
   The studio's whole pitch as one picture. Left fades, right lands. */
.mc-vs{display:grid;grid-template-columns:1fr 1fr;margin-top:3.5rem;
  border-block:1px solid var(--rule)}
.mc-vs .side{padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,2.6rem)}
.mc-vs .side+.side{border-left:1px solid var(--rule)}
.mc-vs .tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.2em;margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem}
.mc-vs .tag::before{content:"";width:18px;height:1px;background:currentColor}
.mc-vs .muddle{color:var(--ink-soft)}
.mc-vs .muddle .tag{color:var(--ink-soft)}
.mc-vs .muddle p{font-family:var(--mono);font-size:.95rem;line-height:1.7;color:var(--ink-soft);opacity:.85}
.mc-vs .clear .tag{color:var(--signal)}
.mc-vs .clear p{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.18;letter-spacing:-.01em}

/* ---- 3. PROCESS FLOW — numbered nodes on a vermilion spine ----
   Richer than .mc-offers: a drawn line threads the steps together. */
.mc-flow{list-style:none;margin-top:3.5rem;position:relative}
.mc-flow::before{content:"";position:absolute;left:calc(1.1rem - 1px);top:1.1rem;bottom:1.1rem;
  width:2px;background:var(--signal);opacity:.28}
.mc-flow li{position:relative;padding:0 0 2.6rem 4rem}
.mc-flow li:last-child{padding-bottom:0}
.mc-flow .node{position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--signal);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;color:var(--signal)}
.mc-flow h3{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.8vw,1.9rem);
  line-height:1.14;letter-spacing:-.01em}
.mc-flow p{font-family:var(--mono);font-size:.95rem;color:var(--ink-soft);margin-top:.6rem;max-width:50ch}

/* ---- 4. PULL-QUOTE BREAK — light, on paper (NOT the dark .mc-proof) ----
   A breath between sections. A big open quote, one line of weight.
   Keep .mc-proof rare and dark; use .mc-break freely as the lighter cousin. */
.mc-break{border-block:1px solid var(--rule);margin-block:1rem}
.mc-break blockquote{position:relative;max-width:30ch;margin-inline:auto;text-align:center;
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.24;letter-spacing:-.01em}
.mc-break blockquote::before{content:"\201C";position:absolute;left:50%;top:-.85em;
  transform:translateX(-50%);font-family:var(--display);font-weight:900;font-style:normal;
  font-size:3.2em;line-height:1;color:var(--signal);opacity:.18;pointer-events:none}
.mc-break cite{display:block;margin-top:1.6rem;font-family:var(--mono);font-style:normal;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft)}

/* ---- 5. CONTENTS / INDEX strip — numbered section jump-links ----
   A quiet table of contents. Mono numerals, vermilion on hover/focus. */
.mc-index{list-style:none;border-top:1px solid var(--rule);margin-top:3rem}
.mc-index li{border-bottom:1px solid var(--rule)}
.mc-index a{display:grid;grid-template-columns:3rem 1fr auto;gap:1.2rem;align-items:baseline;
  padding:1.15rem 0;text-decoration:none;color:var(--ink);transition:color .25s,padding-left .25s}
.mc-index .n{font-family:var(--mono);font-size:.78rem;color:var(--signal)}
.mc-index .t{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:-.01em;line-height:1.2}
.mc-index .arrow{font-family:var(--mono);font-size:.9rem;color:var(--ghost);transition:color .25s,transform .25s}
.mc-index a:hover,.mc-index a:focus-visible{color:var(--signal);padding-left:.6rem}
.mc-index a:hover .arrow,.mc-index a:focus-visible .arrow{color:var(--signal);transform:translateX(.3rem)}

/* ---- 6. PRINCIPLES grid — hairline-separated cells, no boxes ----
   A handful of stances, equal weight. The grid lines do the work. */
.mc-principles{display:grid;grid-template-columns:repeat(2,1fr);margin-top:3.5rem;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.mc-principle{padding:clamp(1.6rem,3.5vw,2.4rem);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mc-principle .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--signal);
  text-transform:uppercase}
.mc-principle h3{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.16;letter-spacing:-.01em;margin-top:.9rem}
.mc-principle p{font-family:var(--mono);font-size:.9rem;color:var(--ink-soft);
  line-height:1.65;margin-top:.7rem;max-width:42ch}

/* ---- 7. MARGIN NOTE — a wide editorial aside ----
   A mono label held in the left margin against a Fraunces statement.
   Quiet structure, a different shape on the page. */
.mc-note{display:grid;grid-template-columns:minmax(7rem,16ch) 1fr;gap:clamp(1.5rem,5vw,4rem);
  align-items:baseline;margin-top:3.5rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.mc-note .side-label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--signal);line-height:1.7}
.mc-note .side-label::before{content:"";display:block;width:26px;height:1px;background:var(--signal);margin-bottom:.8rem}
.mc-note .text{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3.2vw,2.2rem);
  line-height:1.28;letter-spacing:-.01em;max-width:30ch}
.mc-note .text em{font-style:italic;color:var(--signal)}

/* ---- responsive: collapse every grid, keep the spine, never crowd ---- */
@media (max-width:640px){
  .mc-stats{grid-template-columns:1fr}
  .mc-vs{grid-template-columns:1fr}
  .mc-vs .side+.side{border-left:none;border-top:1px solid var(--rule)}
  .mc-principles{grid-template-columns:1fr}
  .mc-index a{grid-template-columns:2.2rem 1fr;gap:.8rem}
  .mc-index .arrow{display:none}
  .mc-note{grid-template-columns:1fr;gap:1rem}
  .mc-flow li{padding-left:3.4rem}
}