/* audit-fixes.css : design pass after the 5 Oct 2026 site audit. Loaded last on every page. */

/* 1. Text links (.hl): readable size, matched to the sentence they sit in */
html body a.hl{font-size:1.14em;letter-spacing:.01em;line-height:1.3;padding-bottom:2px}
html body .label a.hl,html body .head-row p a.hl{font-size:1.05rem}
html body .dark a.hl,html body .on-dark a.hl{color:rgba(250,250,249,.95)}
html body .lux-caption a.hl{font-size:var(--fs-label);letter-spacing:.16em;padding-bottom:6px}
@media (max-width:700px){
  html body a.hl{font-size:1.2em}
  html body a.go,html body a.wk-go,html body a.quiet{font-size:.75rem}
}

/* 2. Buttons: two-line labels keep breathing room */
html body .btn,html body a.btn,html body button.btn{line-height:1.4 !important}
@media (max-width:560px){html body .btn{padding-top:12px;padding-bottom:12px;text-align:center}}

/* 3. Flat sections only: no textured backgrounds */
section.bgcover[style*="lib-goldmesh"]{background-image:none !important;background-color:#F1F1F0}

/* 4. Method page, mobile */
@media (max-width:700px){
  body[data-page="method"] h1 br{display:none}
  body[data-page="method"] #cycle svg text{font-size:30px}
}

/* 5. Numbered index rows read left to right on a phone */
@media (max-width:700px){
  .index .row,.index .row .num,.index .row .rt,.index .row .rd{text-align:left}
}

/* 6. Home: five engagements, expand mark sits top right with a proper tap area */
@media (max-width:600px){
  .bd-col-b{position:relative;padding-right:52px !important;min-height:48px}
  .bd-col-b .bd-plus{position:absolute;right:2px;top:-4px;margin:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#121212}
}

/* 7. Home: Selected Work on a phone, light lead band so the page is not one long dark run */
@media (max-width:600px){
  .bd-work{background:#FAFAF9;row-gap:2px}
  .bd-work .bd-work-lead{background:#FAFAF9;color:#121212;padding-top:56px;padding-bottom:40px}
  .bd-work .bd-work-lead .bd-k{color:#6B6B69}
  .bd-work .bd-work-lead .bd-link{color:#121212;border-color:#121212}
  .bd-card{min-height:300px}
  .bd-card .im{filter:grayscale(1) brightness(.8)}
}

/* 8. Forms: dropdowns look like fields */
html body label.fld select,html body .fld select{border:1px solid #A3A3A1 !important;padding:0 44px 0 16px !important;min-height:54px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8A88' stroke-width='1.3'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 16px center !important}

/* 9. Shell Theory figure 1b: stronger construction lines */
.construct .c-rects rect{stroke:rgba(241,241,240,.5) !important;stroke-width:1 !important}
.construct .c-septa line{stroke:rgba(241,241,240,.2) !important}
.pl-panel.pl-ink{justify-content:center}

/* ═══ Audit fix pass, 18 Oct 2026 ═══════════════════════════════════ */

/* 10. The Eight: one on-brand sign-up in place of the Substack embed */
.eight-form{display:flex;gap:0;max-width:480px;margin:6px auto 0;border:1px solid var(--ink,#121212)}
.eight-form input{flex:1;min-width:0;border:0;background:transparent;padding:0 18px;min-height:56px;font:inherit;font-size:var(--fs-body);color:var(--ink,#121212);border-radius:0}
.eight-form input:focus{outline:2px solid var(--ink,#121212);outline-offset:-3px}
.eight-form .btn{margin:0;border:0;border-left:1px solid var(--ink,#121212);min-height:56px;white-space:nowrap}
@media (max-width:520px){
  .eight-form{flex-direction:column;border:0;gap:10px}
  .eight-form input{border:1px solid var(--ink,#121212)}
  .eight-form .btn{border-left:0;width:100%}
}

/* 11. California Closets: radio spot player in the house style */
.spot-player{display:flex;align-items:center;gap:18px;margin-top:24px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:520px}
.spot-btn{display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink,#121212);font-family:'Archivo Expanded',var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
.spot-ic{width:44px;height:44px;border:1px solid var(--ink,#121212);border-radius:50%;position:relative;flex:none}
.spot-ic::before{content:"";position:absolute;left:17px;top:14px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--ink,#121212)}
.spot-player.on .spot-ic::before{left:15px;top:14px;width:4px;height:16px;border:0;border-left:4px solid var(--ink,#121212);border-right:4px solid var(--ink,#121212);box-sizing:content-box;width:4px}
.spot-time{margin-left:auto;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}

/* 12. Field Notes: space between paragraphs */
body.is-note p.prose + p.prose{margin-top:1.15em}

/* 13. Footer: wrapped links stay one link; fine line without hanging dots */
.footer .ft-cols a{display:block;line-height:1.35;padding:7px 0}
.footer .fine .fine-links{display:flex;flex-wrap:wrap;column-gap:1.4em;row-gap:2px}

/* 14. Services: scroll cue on the engagement tabs, phones only */
.svc-nav .svc-more{display:none}
@media (max-width:760px){
  html .svc-nav .svc-more{display:flex;align-items:center;justify-content:center;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;font-size:1.4rem;line-height:1;color:var(--ink,#121212);pointer-events:none;z-index:2}
}

/* 15. Websites: no dead gap before the terms */
body[data-page="websites"] section.sec.tight:has(.ws-terms){padding-top:0}

/* 16. About: university line wraps cleanly when motion is reduced; client marks larger on phones */
@media (prefers-reduced-motion:reduce){
  .uni-row{flex-wrap:wrap;justify-content:center;row-gap:18px;padding-right:0}
}
.uni-row img{opacity:.72}
@media (max-width:640px){
  body[data-page="about"] .lw-row{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  body[data-page="about"] .lw-cell,body[data-page="about"] .lw-cell img{min-height:48px;height:48px}
}

/* 17. Contact: step numbers readable */
html body .pg-seq li::before{font-family:var(--sans) !important;font-size:var(--fs-label) !important;font-weight:500 !important;letter-spacing:.12em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink,#121212) !important;opacity:1 !important}

/* 18. Bench and Careers: unnumbered rows sit flush */
.row.row-flat{grid-template-columns:1fr 2fr}
.row.row-flat .num{display:none}
@media (max-width:760px){.row.row-flat{grid-template-columns:1fr}}

/* 19. Thanks: matched buttons */
body[data-page="thanks"] .cta-row .btn{min-width:200px;justify-content:center;text-align:center}
@media (max-width:520px){body[data-page="thanks"] .cta-row .btn{width:100%}}

/* 20. Diagnostic: what it scores, before you start */
.dg-preview{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.dg-preview li{padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--dsp,var(--display));font-size:var(--fs-lead);font-weight:300;color:var(--ink,#121212)}
.dg-preview span{display:block;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;color:var(--muted);margin-bottom:4px}
@media (max-width:640px){.dg-preview{grid-template-columns:repeat(2,1fr);column-gap:20px}}
.dg-how{margin-top:18px;color:var(--muted);font-size:var(--fs-small);max-width:56ch}

/* 21. Recommendations: every number sits level with its portrait or initials */
body[data-page="recommendations"] .index .row:has(.rec-av){align-items:start}
body[data-page="recommendations"] .index .row:has(.rec-av) .num{line-height:56px}

/* 22. Two-column intros: headings use the full width on phones */
@media (max-width:760px){html body .ws-two h2{max-width:24ch}}

/* 23. Field Notes figures never upscale past the file */
body.is-note .note-plate img{max-width:1200px;margin-inline:auto;display:block}

/* ═══ Motion, 18 Oct 2026 (motion3.js) ═══ */
/* 5. Page-to-page cross-fade (Chrome, Edge, Safari 18.2+; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mv-out .32s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:mv-in .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes mv-out{to{opacity:0}}
@keyframes mv-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 3. "View" disc on work cards */
.mv-view{position:fixed;left:0;top:0;z-index:90;width:84px;height:84px;border-radius:50%;background:rgba(18,18,18,.9);color:#F4F3EF;display:flex;align-items:center;justify-content:center;font-family:'Archivo Expanded',var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .25s ease;backdrop-filter:blur(4px);will-change:transform;border:1px solid rgba(244,243,239,.35)}
.mv-view.on{opacity:1}
a.mv-hovering{cursor:none}
a.mv-hovering .thumb,a.mv-hovering i,a.mv-hovering .im{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
a.mv-hovering .thumb,a.mv-hovering .im{transform:scale(1.035)}

/* 4. Reading progress hairline */
.mv-progress{position:fixed;left:0;top:0;right:0;height:2px;background:var(--ink,#121212);transform-origin:0 50%;transform:scaleX(0);z-index:95;pointer-events:none}

/* ═══ Premium details, 18 Oct 2026 ═══ */
@media (prefers-reduced-motion:no-preference){

  /* 6. Outline buttons: ink sweeps in from the left instead of snapping */
  html body a.btn:not(.primary):not(.fill),html body button.btn:not(.primary):not(.fill){
    background-image:linear-gradient(var(--ink,#121212),var(--ink,#121212));
    background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
    transition:background-size .55s var(--mv-ease,cubic-bezier(.16,.84,.28,1)),color .35s ease .05s,border-color .35s ease}
  html body a.btn:not(.primary):not(.fill):hover,html body button.btn:not(.primary):not(.fill):hover{
    background-color:transparent;background-size:100% 100%;color:var(--paper,#FAFAF9)}
  html body .dark a.btn:not(.primary):not(.fill),html body .footer .btn{
    background-image:linear-gradient(var(--paper,#FAFAF9),var(--paper,#FAFAF9))}
  html body .dark a.btn:not(.primary):not(.fill):hover,html body .footer .btn:hover{color:var(--ink,#121212)}

  /* 7. Arrows in links and buttons lean forward on hover */
  .mv-arrow{display:inline-block;transition:transform .45s var(--mv-ease,cubic-bezier(.16,.84,.28,1))}
  a:hover .mv-arrow{transform:translateX(5px)}

  /* 8. Top navigation: the underline draws from the left */
  .nav .nav-links a{position:relative;border-bottom-color:transparent !important}
  .nav .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink,#121212);
    transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--mv-ease,cubic-bezier(.16,.84,.28,1))}
  .nav .nav-links a:hover::after,.nav .nav-links a.active::after,.nav .nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}

}

/* 24. Case studies: "The impact" up front, Bain-style. 18 Oct 2026 */
.dh-impact{margin:clamp(34px,4vw,56px) 0 0;border-top:1px solid var(--line);padding-top:clamp(22px,2.4vw,30px)}
.dh-imp-k{display:block;font-family:'Archivo Expanded',var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.dh-imp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,48px)}
.dh-imp-row>div{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.dh-imp-row b{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1;color:var(--ink,#121212);white-space:nowrap}
.dh-imp-row span{font-size:var(--fs-small);line-height:1.6;color:var(--body);max-width:30ch}
@media (max-width:700px){.dh-imp-row{grid-template-columns:1fr;gap:22px}.dh-imp-row>div{grid-template-columns:1fr;gap:6px}}
.dossier-next{margin-top:22px;text-align:center;font-size:var(--fs-small);color:rgba(241,241,240,.7)}
.dossier-next a{color:rgba(250,250,249,.95);border-bottom:1px solid rgba(250,250,249,.4)}