/* Direction A: Engineer's drawing. Override layer on styles.css. Copy unchanged. */
:root{
  --paper:#F3F4F1; --ink:#101214; --muted:#565C63; --line:#C8CCD0; --rule:#101214;
  --accent:#FF4F12; --grid:rgba(16,18,20,.07);
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
html{background:var(--paper)}
body{
  font:15px/1.7 var(--sans); background-color:var(--paper);
  background-image:radial-gradient(var(--grid) 1px,transparent 1.2px);
  background-size:24px 24px; background-position:-12px -12px;
  counter-reset:sheet;
  margin:12px; border:1px solid var(--rule); min-height:calc(100vh - 24px); position:relative;
}
/* registration ticks in the frame corners */
body:before,body:after{content:"";position:fixed;width:14px;height:14px;pointer-events:none;z-index:5}
body:before{top:6px;left:6px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
body:after{bottom:6px;right:6px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
::selection{background:var(--accent);color:#fff}
a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);border-radius:0}

h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
h3{font-size:1.15rem;letter-spacing:-.01em;line-height:1.3}
em{font-style:normal}
h2 em{font-weight:500}

/* Header: title-block strip */
.site-header{min-height:0;padding-block:18px;border-bottom:1px solid var(--rule);align-items:baseline}
.wordmark{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.wordmark-dot{color:var(--accent)}
nav{gap:0}
nav a{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:0 10px}
nav a+a:before{content:"/";color:var(--line);margin-right:20px;margin-left:-10px}
nav a[aria-current=page]{color:var(--accent);text-decoration:none}

/* Section labels become sheet numbers */
.eyebrow{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.1em;color:var(--muted);counter-increment:sheet;display:flex;gap:12px;align-items:center}
.eyebrow:before{content:"M-" counter(sheet,decimal-leading-zero);color:var(--accent);border:1px solid var(--accent);padding:1px 6px;letter-spacing:.04em}
.eyebrow:after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* Hero */
.hero{padding-block:72px 64px;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:end}
.hero h1{font-size:clamp(3.4rem,9vw,8.25rem);font-weight:500;letter-spacing:-.055em;line-height:.92;margin-bottom:36px}
.tagline{font-family:var(--sans);font-weight:400;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;max-width:640px;border-left:2px solid var(--accent);padding-left:20px}
.tagline cite{font-family:var(--mono);font-weight:400;letter-spacing:.08em}
.entity{font-size:.92rem;max-width:620px}

/* Portrait as a detail callout with dimension line */
.portrait{padding:0;position:relative}
.portrait:before{content:"";position:absolute;inset:auto 0 -22px 0;height:9px;border:1px solid var(--muted);border-top:0;border-radius:0;z-index:0}
.portrait:after{content:"DETAIL A";position:absolute;top:-24px;left:0;font:400 .62rem/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.portrait img{border-radius:0;width:340px;outline:1px solid var(--rule);outline-offset:6px;filter:grayscale(.15) contrast(1.03)}

/* Buttons: square, mono, arrow */
.button{border-radius:0;background:var(--ink);border-color:var(--ink);font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 18px;gap:10px}
.button:after{content:"→";color:var(--accent)}
.button:hover{background:var(--accent);border-color:var(--accent)}
.button:hover:after{color:#fff}
.button.secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.button.secondary:hover{background:var(--ink);color:#fff}

/* Credential band: title block table */
.credential-band{background:transparent;color:var(--ink);border-block:1px solid var(--rule)}
.credentials{padding:0}
.credentials li{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:16px 18px;border-right:1px solid var(--rule)}
.credentials li:first-child{padding-left:0}

/* Sections */
.section{padding-block:72px;border-bottom:1px solid var(--rule)}
.prose p{color:var(--muted)}

/* Stats: schedule table */
.stats{padding:0;border-block:1px solid var(--rule)}
.stats div{padding:22px 20px;border-right:1px solid var(--rule)}
.stats dt{font-family:var(--sans);font-weight:500;font-size:2.6rem;letter-spacing:-.04em}
.stats dd{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}

/* Services: numbered spec rows */
.services{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.services article{display:grid;grid-template-columns:80px minmax(180px,.8fr) 1.6fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.services article>div{display:contents}
.services h3{margin:0}
.number{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:3px}

/* Podcast cards become a log */
.cards{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.podcast-card{display:grid;grid-template-columns:220px 1fr 110px;gap:24px;min-height:0;padding:18px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;align-items:baseline}
.podcast-card .eyebrow{counter-increment:none;color:var(--muted);margin:0;font-size:.66rem}
.podcast-card .eyebrow:before,.podcast-card .eyebrow:after{display:none}
.podcast-card h3{font-size:1.05rem;margin:0}
.podcast-card time{margin:0;text-align:right;font-family:var(--mono);font-size:.7rem}
time{font-family:var(--mono)}
.text-link{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}

/* Companies, FAQ, timeline */
.company-list article{border-top:1px solid var(--line)}
.company-list h3{font-size:1.15rem}
details{border-top:1px solid var(--line)}
summary{font-weight:500}
summary:after{font-family:var(--mono);color:var(--accent);font-size:1rem}
.timeline{border-left:1px solid var(--rule)}
.timeline li:before{border-radius:0;width:9px;height:9px;background:var(--paper);border:1px solid var(--accent);box-shadow:none;left:-30px}
.timeline h3{font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.about-portrait img{border-radius:0;outline:1px solid var(--rule);outline-offset:6px}
.topics{background:transparent;border:1px solid var(--rule);border-radius:0}
.topics li::marker{color:var(--accent)}
.quick-facts,.audit-note{border-radius:0}
.quick-facts{border:1px solid var(--rule)}
.quick-facts dt{font-family:var(--mono);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.contact-links a>span:first-child{font-family:var(--mono)}
.audit-note{background:var(--ink)}
.episode-meta p{font-family:var(--mono);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}

/* CTA band: one dark sheet */
.cta-band{background:var(--ink);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px}
.cta-band .eyebrow{color:#9aa1a8}
.cta-band .eyebrow:after{background:#3a3f45}
.cta-band h2{font-size:clamp(2.4rem,5vw,4.25rem);letter-spacing:-.045em}
.cta-band a{text-decoration-color:var(--accent)}

/* Footer: title block */
.site-footer{border-top:1px solid var(--rule);padding-block:28px}
.site-footer p,.site-footer nav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em}

/* AI section: 10/80/10 flow diagram */
.ai-model .ratio{grid-template-columns:1fr 2.6fr 1fr;border:0;margin:40px 0 28px;position:relative}
.ai-model .ratio div{border:0;padding:46px 14px 0 0;position:relative}
.ai-model .ratio div:before{content:"";position:absolute;top:0;left:0;right:14px;height:22px;border:1px solid var(--rule);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ai-model .ratio div:nth-child(2):before{background:var(--accent);border-color:var(--accent);transition-delay:.35s}
.ai-model .ratio div:nth-child(3):before{transition-delay:.7s}
.ai-model .ratio div:nth-child(-n+3):after{content:"▸";position:absolute;top:2px;right:-1px;font-size:.8rem;color:var(--muted)}
.ai-model .ratio div:nth-child(3):after{content:"■";font-size:.55rem;top:5px}
.ai-model .ratio div:nth-child(4){grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin-top:22px;padding:16px 0 0;border-top:1px dashed var(--line)}
.ai-model .ratio div:nth-child(4):before{display:none}
.ai-model .ratio dt{font-size:2.2rem}
.ai-model .ratio div:nth-child(4) dt{font-size:1.4rem}
.ai-model .ratio.in-view div:before{transform:scaleX(1)}
.ai-model .ai-cta{border-top:1px solid var(--rule)}
@media(prefers-reduced-motion:reduce){.ai-model .ratio div:before{transform:none;transition:none}}

/* Tablet */
@media(min-width:760px) and (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) 260px}.portrait img{width:260px}
  .podcast-card{grid-template-columns:160px 1fr 96px}
  .services article{grid-template-columns:56px 1fr;}.services article p{grid-column:2}
}
/* Phone */
@media(max-width:759px){
  body{margin:6px;min-height:calc(100vh - 12px)}
  nav a{padding:0}
  nav a+a:before{margin:0 10px 0 0}
  nav{gap:8px 10px}
  .hero{grid-template-columns:1fr;gap:48px;align-items:start}
  .eyebrow:after{display:none}
  .portrait{width:min(340px,100%)}
  .hero h1{font-size:clamp(3rem,15vw,4.5rem)}
  .portrait img{width:100%}
  .credentials li,.credentials li:first-child{padding:12px 0;border-right:0;border-bottom:1px solid var(--line)}
  .credentials li:last-child{border-bottom:0}
  .stats div,.stats div:first-child{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .services article{grid-template-columns:40px 1fr;gap:6px 14px}.services article p{grid-column:2}
  .podcast-card{grid-template-columns:1fr;gap:6px}
  .podcast-card time{text-align:left}
  .ai-model .ratio{grid-template-columns:1fr}
  .ai-model .ratio div{padding:34px 0 14px}
  .ai-model .ratio div:before{right:0}
  .ai-model .ratio div:nth-child(-n+3):after{content:"▾";right:auto;left:50%;top:22px}
}


.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:28px 0 -40px}
.crumbs a{color:var(--muted)}
.ai-more{margin-top:18px}
.fig{margin:32px 0 0}
.fig img{width:100%;height:auto;display:block}
.fig-portrait{max-width:220px}
.fig-portrait img{outline:1px solid var(--rule);outline-offset:6px}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);margin-top:28px}
.sub-grid>div{padding:22px 22px 4px 0;border-right:1px solid var(--line);margin-right:22px}
.sub-grid>div:last-child{border-right:0;margin-right:0}
.sub-grid p{color:var(--muted);font-size:.9rem}
@media(max-width:759px){.sub-grid{grid-template-columns:1fr}.sub-grid>div{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-right:0}}
.held .fig-portrait{max-width:240px;margin-top:36px;position:relative}
.held .fig-portrait:before{content:"DETAIL B";display:block;font:400 .62rem/1 var(--mono);letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.held .prose{align-self:start}
@media(max-width:759px){.held .fig-portrait{max-width:200px;margin-top:24px}}
.prose+.prose{margin-top:20px}
.lessons{border-top:1px solid var(--rule);margin-top:24px}
.lessons>div{display:grid;grid-template-columns:minmax(200px,.8fr) 1.6fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.lessons h4{margin:0;font-size:1.05rem;font-weight:500;letter-spacing:-.01em}
.lessons p{margin:0;color:var(--muted);font-size:.9rem}
@media(max-width:759px){.lessons>div{grid-template-columns:1fr;gap:6px}}
.fig+.prose{margin-top:28px}

/* About dropdown */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop+a:before{content:"/";color:var(--line);margin-right:20px;margin-left:-10px}
.drop-toggle{background:none;border:0;padding:4px 6px 4px 0;margin-left:-6px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center}
.drop-toggle:hover,.nav-drop.open .drop-toggle{color:var(--accent)}
.drop-toggle:focus-visible{outline:2px solid var(--accent)}
.drop-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:var(--paper);border:1px solid var(--rule);padding:6px 0;display:none;z-index:20}
.drop-menu:before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.drop-menu a{display:block;padding:9px 14px;white-space:nowrap}
.drop-menu a:before{content:none!important}
.drop-menu a+a{border-top:1px solid var(--line)}
.drop-menu a:hover{color:var(--accent);background:#fff}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu,.nav-drop.open .drop-menu{display:block}
@media(max-width:759px){
  .nav-drop+a:before{margin:0 10px 0 0}
  .drop-menu{min-width:200px}
}
@media(max-width:759px){.drop-toggle{margin-left:2px;padding:4px}}

/* Speaking page */
.speak-hero{padding-top:56px}
.speak-hero h1{font-size:clamp(2.8rem,6vw,5rem)}
.talks{border-top:1px solid var(--rule)}
.talks article{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.talks h3{font-size:1.35rem;margin-bottom:10px}
.talks p{color:var(--muted);max-width:760px}
.talks h4{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.heard{list-style:none;padding:0;margin:0}
.heard li{padding:7px 0;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:.9rem}
.heard li span{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.aud{grid-template-columns:repeat(2,1fr)}
.aud>div:nth-child(2){border-right:0;margin-right:0}
@media(max-width:759px){.talks article{grid-template-columns:40px 1fr;gap:12px}.aud{grid-template-columns:1fr}}
.fmt{grid-template-columns:repeat(4,1fr)}
.talks .fig{margin:18px 0 6px;max-width:760px}
.dl-note{font-size:.85rem;color:var(--muted);margin-top:16px}
@media(max-width:1000px){.fmt{grid-template-columns:repeat(2,1fr)}.fmt>div:nth-child(2){border-right:0;margin-right:0}}
@media(max-width:759px){.fmt{grid-template-columns:1fr}}