/* Shared styles for the /websites/ section: the breakdown page and
   client-work pages. Paper/ink palette, IBM Plex.
   Paper and wash match the brand kit surfaces (#F4F4F2 Kami,
   #EBEBE8 paper-2) so navigating between the homepage and this
   section never shifts the background. */
:root{
  --paper:#F4F4F2;
  --ink:#191817;
  --ink-60:#5C5955;
  --ink-25:#CDC9C1;
  --wash:#EBEBE8;
  --paper-on-ink:#F4F4F2;
  --muted-on-ink:#A9A49C;
  --line-on-ink:#3A3835;
  --maxw:1060px;
}
*{box-sizing:border-box;margin:0;padding:0}
picture{display:block}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip-link{
  position:fixed;z-index:10000;top:10px;left:10px;padding:10px 14px;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0)}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* header */
.top{border-bottom:1px solid var(--ink-25)}
.top-inner{display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mu{
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--paper-on-ink);
  display:grid;place-items:center;
  font-family:"IBM Plex Sans JP","IBM Plex Sans",sans-serif;
  font-weight:500;font-size:17px;line-height:1;
}
.wordmark{font-weight:600;font-size:17px}
.home-link{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-60);text-decoration:none}
.home-link:hover{color:var(--ink)}

/* rhythm */
.section{padding:56px 0}
.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:18px;
}

/* hero */
.hero h1{
  font-size:clamp(36px,6.4vw,58px);
  font-weight:600;line-height:1.06;letter-spacing:-0.015em;
}
.hero .dek{margin-top:16px;max-width:52ch;font-size:clamp(17px,2.2vw,19px);color:var(--ink-60)}

/* live embed in browser chrome */
.proof{border-top:1px solid var(--ink-25);border-bottom:1px solid var(--ink-25);background:var(--wash)}
.proof-inner{padding-block:44px}
.shot{border:1px solid var(--ink-25);background:var(--paper)}
.shot-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink-25);padding:10px 14px}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-60)}
.shot-url{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-60)}
.shot-frame{display:block;width:100%;height:520px;border:0;background:#fff}
.caption{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-60);
}
.caption a{text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px;color:var(--ink)}

/* client-work index grid */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px}
.work-card{display:block;text-decoration:none}
.work-card .shot{display:block;transition:border-color .15s ease}
.work-card:hover .shot{border-color:var(--ink)}
.work-thumb,.work-card picture{display:block;width:100%;height:auto}
.work-label{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.work-name{font-weight:600;font-size:18px;letter-spacing:-0.005em}
.work-go{font-family:"IBM Plex Mono",monospace;font-size:13px;white-space:nowrap;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.work-meta{display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-60)}

/* brand kit screenshot in a shot frame */
.brief .shot{margin-top:28px}
.kit-img{display:block;width:100%;height:auto}

/* quote + one-line process */
.brief blockquote{
  font-size:clamp(22px,3.4vw,30px);
  font-weight:600;line-height:1.25;letter-spacing:-0.01em;
}
.brief cite{
  font-style:normal;font-weight:400;
  font-family:"IBM Plex Mono",monospace;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
  white-space:nowrap;
}
.flow-line{margin-top:18px;max-width:64ch;color:var(--ink-60);font-size:16px}
.close-h2{font-size:clamp(21px,2.8vw,26px);font-weight:600;line-height:1.3;letter-spacing:-0.01em}

/* process steps */
.steps{border-top:1px solid var(--ink-25)}
.step-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:8px}
.step{border-top:2px solid var(--ink);padding-top:16px}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-60)}
.step h3{font-size:18px;font-weight:600;margin-top:8px;letter-spacing:-0.005em}
.step p{margin-top:8px;font-size:15px;color:var(--ink-60)}

/* hand-off band (wash, heading + one CTA) */
.go{border-top:1px solid var(--ink-25);border-bottom:1px solid var(--ink-25);background:var(--wash)}
.go-inner{padding-block:48px;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center}
.go h2{font-size:clamp(21px,2.8vw,26px);font-weight:600;line-height:1.3}
.go p{margin-top:12px;color:var(--ink-60);max-width:52ch}
.go blockquote{margin-top:12px;font-size:clamp(19px,2.6vw,24px);font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.go cite{
  font-style:normal;font-weight:400;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
  white-space:nowrap;
}
.go-cta{
  justify-self:end;
  font-family:"IBM Plex Mono",monospace;font-size:14px;
  text-decoration:none;border:1.5px solid var(--ink);
  padding:13px 22px;border-radius:2px;white-space:nowrap;
}
.go-cta:hover{background:var(--ink);color:var(--paper)}

/* tiers */
.tiers h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-0.01em}
.tier-add-on{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-60)}
.tier-add-on strong{color:var(--ink);font-weight:500}
.tier-add-on b,.ecommerce-option b{font-weight:500;white-space:nowrap}
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:stretch}

/* the dominant package spans the full row; its scope list runs in two
   columns so the card reads wide, not tall */
.card.featured{grid-column:1 / -1}
.card.featured .includes{column-count:2;column-gap:44px}
.card.featured .includes li{break-inside:avoid}
.card.featured .lead{max-width:560px}

/* helper card: not a package, so it reads lighter than the tiers */
.card.aside{border:1px dashed var(--ink-60);justify-content:flex-start}
.card.aside .who{margin-top:16px}
.card.aside .aside-cta{margin-top:22px;text-align:left;font-size:14px}
.card.aside .aside-cta a{border-bottom:1.5px solid var(--ink);padding-bottom:2px}

/* upgrades: expansions after a website conversation, styled as rows so
   they never read as competing tier cards */
.upgrades h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-0.01em}
.addons{display:grid;gap:24px;margin-top:36px}
.addon{
  border:1px solid var(--ink-25);background:var(--paper);
  padding:30px 32px;display:grid;grid-template-columns:1.15fr .85fr;
  gap:36px;align-items:start;
}
.addon-kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)}
.addon h3{font-size:20px;font-weight:600;margin-top:10px;letter-spacing:-0.005em}
.addon-price{font-family:"IBM Plex Mono",monospace;font-size:14px;margin-top:10px}
.addon-copy{margin-top:12px;font-size:15px;color:var(--ink-60);max-width:56ch}
.addon-side{display:flex;flex-direction:column;gap:12px}
.addon-note{font-size:14px;color:var(--ink-60)}
.addon-links{display:flex;flex-direction:column;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.addon-links a{text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px;align-self:flex-start}
.addon .lead{margin-top:6px}
.card{border:1px solid var(--ink);padding:36px 32px 32px;display:flex;flex-direction:column;position:relative}
.card-label{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.price{font-family:"IBM Plex Mono",monospace;font-size:clamp(38px,5vw,48px);font-weight:500;letter-spacing:-0.02em;margin-top:12px;line-height:1}
.price .from{font-size:.42em;font-weight:400;color:var(--ink-60);letter-spacing:0}
.price-sub{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-60);margin-top:10px;padding-bottom:20px;border-bottom:1px solid var(--ink-25)}
.who{margin-top:20px;font-size:15.5px;color:var(--ink-60)}
.includes{list-style:none;margin-top:18px;flex:1}
.includes li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15px}
.includes li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;background:var(--ink)}
.badge{
  position:absolute;top:-13px;left:32px;
  background:var(--paper);border:1px solid var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;color:var(--ink);
}

/* lead form in each card */
.lead{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.lead input{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;
  background:var(--paper);border:1px solid var(--ink-25);border-radius:2px;color:var(--ink);
}
.lead input::placeholder{color:var(--ink-60)}
.lead input:focus{outline:2px solid var(--ink);outline-offset:1px}
.lead select{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;
  background:var(--paper);border:1px solid var(--ink-25);border-radius:2px;color:var(--ink);
}
.lead select:focus{outline:2px solid var(--ink);outline-offset:1px}
.lead select:invalid{color:var(--ink-60)}
.hp{position:absolute !important;left:-9999px;opacity:0;height:0;width:0;padding:0;border:0}
.ecommerce-option{display:flex;align-items:flex-start;gap:10px;padding-top:4px;cursor:pointer;font-size:14px;line-height:1.35}
.lead .ecommerce-option input{width:18px;height:18px;padding:0;margin:1px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.ecommerce-option strong{font-weight:600}
.cta{
  display:block;width:100%;text-align:center;
  background:var(--ink);color:var(--paper-on-ink);
  border:0;cursor:pointer;
  font:inherit;font-weight:500;font-size:16px;
  padding:14px 20px;border-radius:2px;
}
.cta:hover{opacity:.9}
.cta:disabled{opacity:.6;cursor:default}
.lead-alt{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-60);text-align:center}
.lead-alt a{text-decoration:none}
.lead-privacy{font-size:11.5px;line-height:1.45;color:var(--ink-60);text-align:center}
.lead-privacy a{text-underline-offset:2px}
.lead-status{display:none;font-size:14px;color:var(--ink)}
.lead-status.show{display:block}
.lead-success{font-size:15px;border:1px solid var(--ink-25);padding:16px;margin-top:18px}

.card.inverse{background:var(--ink);color:var(--paper-on-ink);border-color:var(--ink)}
.card.inverse .card-label{color:var(--muted-on-ink)}
.card.inverse .price .from{color:var(--muted-on-ink)}
.card.inverse .price-sub{color:var(--muted-on-ink);border-color:var(--line-on-ink)}
.card.inverse .who{color:var(--muted-on-ink)}
.card.inverse .includes li::before{background:var(--paper-on-ink)}
.card.inverse .lead input{background:transparent;border-color:var(--line-on-ink);color:var(--paper-on-ink)}
.card.inverse .lead input::placeholder{color:var(--muted-on-ink)}
.card.inverse .lead input:focus{outline-color:var(--paper-on-ink)}
.card.inverse .cta{background:var(--paper);color:var(--ink)}
.card.inverse .lead-alt{color:var(--muted-on-ink)}
.card.inverse .lead-privacy{color:var(--muted-on-ink)}
.card.inverse .lead-status{color:var(--paper-on-ink)}
.card.inverse .lead-success{border-color:var(--line-on-ink)}

/* close */
.close .community{max-width:58ch;font-size:clamp(17px,2.2vw,19px)}
.close .community strong{font-weight:600}
.ladder{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink-60)}
.ladder b{color:var(--ink);font-weight:500}
.ladder a{color:var(--ink)}
.terms{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--ink-25);
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:2;
  color:var(--ink-60);max-width:70ch;
}
.nonprofit-line{margin-top:22px;font-size:15px}
.nonprofit-line a{text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px}

/* footer */
footer{border-top:1px solid var(--ink-25)}
.foot-inner{
  padding-block:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-60);
}
.foot-mark{display:flex;align-items:center;gap:10px}
.foot-links{display:flex;align-items:center;gap:20px}
.mu.small{width:26px;height:26px;font-size:14px}
.foot-inner a{text-decoration:none}
.foot-inner a:hover{color:var(--ink)}

@media (max-width:1080px){
  .work-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .section{padding:44px 0}
  .proof-inner{padding-block:36px}
  .shot-frame{height:400px}
  .step-grid{grid-template-columns:1fr;gap:22px}
  .tier-grid{grid-template-columns:1fr;gap:32px}
  .card.featured .includes{column-count:1}
  .addon{grid-template-columns:1fr;gap:22px}
  .work-grid{grid-template-columns:1fr;gap:28px}
  .go-inner{grid-template-columns:1fr;gap:24px}
  .go-cta{justify-self:start}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ===========================================================
   mu fx: the tier ladder (2026-08)
   Each card is built with the level of craft its tier buys.
   Tier 1 sits still. Tier 2 answers hover. Tier 3 materializes
   on scroll with a drawn hairline. Tier 4 adds pointer depth
   and the mu signature. "Show the working" reveals the seams.
   =========================================================== */
::selection{background:var(--ink);color:var(--paper)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink-25);border:3px solid var(--paper);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-60)}
@view-transition{navigation:auto}
.mu{view-transition-name:mu-coin}
::view-transition-old(mu-coin),::view-transition-new(mu-coin){animation-duration:.45s}

/* the void takes the button */
.cta{position:relative;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.22,1,.36,1),translate .2s cubic-bezier(.22,1,.36,1)}
.cta .fx-dot{
  position:absolute;z-index:-1;left:var(--fx-x,50%);top:var(--fx-y,50%);
  width:24px;height:24px;border-radius:50%;background:var(--paper);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.cta:hover .fx-dot,.cta:focus-visible .fx-dot{transform:translate(-50%,-50%) scale(18)}
.cta:hover{color:var(--ink)}
.card.inverse .cta .fx-dot{background:var(--ink)}
.card.inverse .cta:hover{color:var(--paper-on-ink)}

/* focus is removal on the lead forms */
.lead input{transition:opacity .35s ease,filter .35s ease}
.lead:has(input:focus-visible) input:not(:focus-visible){opacity:.35;filter:blur(1px)}

/* tier 2: answers hover */
.fx-t2,.card.featured{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}
.fx-t2:hover,.card.featured:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(25,24,23,.4)}

/* universal reveal: mu-fx.js tags blocks with .fx-r and flips .is-in
   through an IntersectionObserver, so this works in every browser.
   Hidden states apply only when JS is present (html.fx-js). */
.fx-js .fx-r{
  opacity:0;transform:translateY(14px);filter:blur(8px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1) var(--fxd,0s),
    transform .7s cubic-bezier(.22,1,.36,1) var(--fxd,0s),
    filter .7s cubic-bezier(.22,1,.36,1) var(--fxd,0s);
}
.fx-js .fx-r.is-in{opacity:1;transform:none;filter:none}

/* tiers 3 and 4 draw their hairline when they arrive */
.fx-t3::after,.fx-t4::after{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1) .3s;
}
.fx-t3.is-in::after,.fx-t4.is-in::after{transform:scaleX(1)}
.card.inverse.fx-t4::after{background:var(--paper-on-ink)}

/* tier 4: pointer depth + the mu signature */
.fx-t3,.fx-t4{position:relative}
.fx-t4{will-change:transform;transition:transform .25s ease-out}
.fx-mu{
  position:absolute;top:14px;right:18px;
  font-family:"IBM Plex Sans JP","IBM Plex Sans",sans-serif;font-weight:500;
  font-size:42px;line-height:1;color:rgba(25,24,23,.07);
  pointer-events:none;user-select:none;
}
.card.inverse .fx-mu{color:rgba(246,244,239,.1)}

/* spotlight: the platform card catches the light under the cursor */
.fx-spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle 220px at var(--fx-sx,50%) var(--fx-sy,50%),rgba(25,24,23,.06),transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.fx-spot:hover::after{opacity:1}

/* show the working: annotation mode */
.fx-anno{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);user-select:none;
}
.fx-anno input{accent-color:#22314A;width:15px;height:15px;margin:0}
.fx-tag{
  position:absolute;bottom:-12px;right:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  color:#22314A;background:#EEF0F4;border:1px solid rgba(34,49,74,.35);
  padding:2px 7px;border-radius:3px;
  opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;z-index:3;
}
main:has(.fx-anno input:checked) .fx-tag{opacity:1;transform:none}
main:has(.fx-anno input:checked) :is(.card,.addon){outline:1px dashed rgba(34,49,74,.45);outline-offset:6px}

@media (prefers-reduced-motion: reduce){
  .fx-t2,.card.featured,.fx-t3,.fx-t4,.cta,.cta .fx-dot,.lead input,.fx-tag,.fx-r{transition:none;animation:none}
  .fx-js .fx-r{opacity:1;filter:none;transform:none}
  .fx-t3::after,.fx-t4::after{transform:scaleX(1);transition:none}
}