/* LGERA Consulting. One visual world: gold light on a cool near-black ground. */
/* One visual world, taken from the LGERA artwork: gold light on a cool
   near-black ground. Deliberately single-theme, so every colour is stated
   outright and the page reads the same whatever the viewer's system prefers. */
:root{
  color-scheme:dark;
  /* Relative to THIS file, not to the page that links it. The stylesheet
     lives in /assets/, so the art beside it is just "hero.webp". */
  --hero-art:url("hero.webp");
  --ground:#000408;
  --raise:#070D14;
  --raise-2:#0C141C;
  --line:#1A242E;
  --line-soft:#111922;
  --gold:#C9A227;
  --gold-lit:#E8CD86;
  --gold-deep:#7E6417;
  --ink:#F3EFE6;
  --ink-2:#AAB1B8;
  --ink-3:#6E7780;
}
*{box-sizing:border-box}
/* The browser's own [hidden] rule is a bare attribute selector, so any class
   that sets `display` beats it. The Teaching panel sets display:flex, which
   left it permanently visible. Restore the intent for the whole page. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
#teaching-statistics,#teaching-ai{scroll-margin-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Newsreader",Georgia,"Times New Roman",serif; font-weight:400; text-wrap:balance; margin:0}
em{font-style:italic; color:var(--gold-lit)}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding-inline:22px}
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:18px;
}
.rule{height:1px; background:linear-gradient(90deg,var(--gold-deep),transparent); border:0; margin:0}

/* ---------------------------------------------------------------- header */
header.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:rgba(0,4,8,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.top-in{max-width:1180px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:20px}
.mark{flex:none; display:block; line-height:0}
.mark img{width:auto; height:46px}
nav.main{margin-left:auto; display:flex; gap:26px; align-items:center}
nav.main a{
  font-size:13.5px; color:var(--ink-2); text-decoration:none; padding:3px 0;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
nav.main a:hover,nav.main a:focus-visible{color:var(--gold-lit); border-bottom-color:var(--gold)}
.menu{position:relative; display:flex}
.menu-btn{
  font-family:inherit; font-size:13.5px; color:var(--ink-2); background:none; border:0;
  border-bottom:1px solid transparent; padding:3px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:color .18s, border-color .18s;
}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--gold-lit); border-bottom-color:var(--gold)}
.menu-btn:focus-visible{outline:2px solid var(--gold-lit); outline-offset:3px}
.chev{width:9px; height:6px; transition:transform .2s}
.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu-panel{
  position:fixed; z-index:50; min-width:252px; padding:8px;
  background:var(--raise); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:2px;
}
.menu-panel a{
  display:block; padding:10px 12px; border-radius:2px; text-decoration:none;
  color:var(--ink); transition:background .16s, color .16s;
}
.menu-panel a span{display:block; font-size:14.5px}
.menu-panel a em{display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:2px}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--raise-2); color:var(--gold-lit); outline:none}
.menu-panel a:hover em,.menu-panel a:focus-visible em{color:var(--ink-2)}
.menu-panel a.all{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border-top:1px solid var(--line-soft); margin-top:6px; padding-top:12px; border-radius:0;
}
@media(max-width:760px){
  .top-in{flex-wrap:wrap; gap:8px; padding-block:11px 9px}
  .mark img{height:38px}
  nav.main{margin-left:0; width:100%; gap:15px; flex-wrap:nowrap; overflow-x:auto;
           padding-bottom:3px; scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a,.menu-btn{white-space:nowrap; font-size:12.5px}
  .menu-panel{min-width:230px}
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative; overflow:hidden; padding-block:0; border-bottom:1px solid var(--line-soft)}
.hero-art{
  background-image:var(--hero-art);
  background-size:cover; background-position:center right; background-repeat:no-repeat;
}
@media(min-width:960px){
  .hero{min-height:660px; display:flex; align-items:center}
  .hero-art{
    position:absolute; top:0; right:0; bottom:0; width:60%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 40%);
  }
  .hero-in{position:relative; z-index:1; width:100%; padding-block:0}
  .hero-copy{max-width:50%}
}
@media(max-width:959px){
  .hero-in{padding-block:52px 0}
  .hero-art{
    margin-top:32px; height:82vw; max-height:470px;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);
            mask-image:linear-gradient(180deg,#000 62%,transparent 98%);
  }
}
h1{font-size:clamp(38px,6.8vw,66px); line-height:1.06; letter-spacing:-.022em}
h1 .gold{color:var(--gold-lit); font-style:italic}
.lede{margin-top:22px; font-size:clamp(16.5px,2vw,19px); color:var(--ink-2); max-width:37ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:13px 24px; border-radius:2px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-solid{background:var(--gold); color:#0A0A06; border:1px solid var(--gold)}
.btn-solid:hover{background:var(--gold-lit); border-color:var(--gold-lit)}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-line:hover{border-color:var(--gold); color:var(--gold-lit)}
.btn:focus-visible{outline:2px solid var(--gold-lit); outline-offset:3px}

/* --------------------------------------------------------------- section */
section{padding-block:74px}
@media(min-width:920px){section{padding-block:100px}}
.sec-head{max-width:46ch}
h2{font-size:clamp(28px,4.4vw,42px); line-height:1.14; letter-spacing:-.015em}
.sec-head p{margin-top:16px; color:var(--ink-2); font-size:17px}

/* the framework band, with the artwork's own icons */
.disc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:50px; border-top:1px solid var(--line-soft)}
@media(min-width:800px){.disc-grid{grid-template-columns:repeat(5,1fr)}}
.disc{
  padding:26px 18px; border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft); transition:background .22s;
}
.disc:hover{background:linear-gradient(180deg,rgba(201,162,39,.06),transparent)}
.disc:nth-child(2n){border-right:0}
@media(min-width:800px){
  .disc{border-bottom:0; border-right:1px solid var(--line-soft); padding:30px 22px}
  .disc:nth-child(2n){border-right:1px solid var(--line-soft)}
  .disc:first-child{padding-left:0}
  .disc:last-child{border-right:0; padding-right:0}
}
.disc img{height:46px; width:auto}
.disc .letter{font-family:"Newsreader",serif; font-size:30px; color:var(--gold); display:block; line-height:1; margin-top:16px}
.disc h3{font-size:12.5px; margin-top:10px; color:var(--ink); font-family:"Archivo",sans-serif;
         font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.disc p{margin-top:9px; font-size:13.5px; color:var(--ink-3); line-height:1.55}

/* services, as rows rather than another card grid */
.rows{margin-top:46px; border-top:1px solid var(--line)}
.row{
  display:grid; grid-template-columns:1fr; gap:10px; padding:32px 0;
  border-bottom:1px solid var(--line); transition:background .2s;
}
@media(min-width:840px){.row{grid-template-columns:64px 1fr 1.15fr; gap:32px; align-items:baseline; padding:38px 0}}
.row:hover{background:linear-gradient(90deg,rgba(201,162,39,.05),transparent 60%)}
.row .num{font-family:"Newsreader",serif; font-size:15px; color:var(--gold); letter-spacing:.14em}
.row h3{font-size:clamp(21px,2.6vw,27px); color:var(--ink); line-height:1.25}
.row p{color:var(--ink-2); font-size:16px; margin:0}

/* teaching cards */
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin-top:46px; align-items:start}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr); gap:20px}}
.card{
  background:var(--raise); border:1px solid var(--line-soft); border-radius:3px;
  padding:30px 26px 26px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s, background .2s;
}
.card:hover{border-color:var(--gold-deep); background:var(--raise-2)}
.card h3{font-size:22px; color:var(--gold-lit)}
.card p{font-size:15px; color:var(--ink-2); margin:0}
.tags{list-style:none; margin:6px 0 0; padding:16px 0 0; display:flex; flex-direction:column;
      gap:9px; border-top:1px solid var(--line-soft)}
.tags li{font-size:13.5px; color:var(--ink-3); display:flex; align-items:center; gap:10px}
.tags li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-deep); flex:none}
.books{margin-top:4px; border-top:1px solid var(--line-soft); padding-top:16px}
.books-label{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px}
.book{
  display:block; text-decoration:none; padding:11px 12px; margin:0 -12px;
  border-radius:2px; transition:background .16s;
}
.book:hover,.book:focus-visible{background:var(--raise-2); outline:none}
.book .t{
  display:block; font-family:"Newsreader",Georgia,serif; font-size:17px; line-height:1.25;
  color:var(--ink); transition:color .16s;
}
.book:hover .t,.book:focus-visible .t{color:var(--gold-lit)}
.book .s{display:block; font-size:12px; color:var(--ink-3); margin-top:4px; letter-spacing:.04em}
.book .t::after{content:"\00a0\2192"; color:var(--gold); font-family:"Archivo",sans-serif; font-size:14px}

/* contact */
.close{border-top:1px solid var(--line-soft); background:linear-gradient(180deg,var(--raise),var(--ground))}
.close-in{text-align:center; padding-block:82px}
.close h2{max-width:18ch; margin-inline:auto}
.close p{margin-top:18px; color:var(--ink-2); max-width:44ch; margin-inline:auto; font-size:17px}
.mailbox{
  margin:30px auto 0; display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--ground);
}
.mailbox code{
  font-family:"Archivo",monospace; font-size:14.5px; color:var(--ink); padding:12px 16px; user-select:all;
}
.mailbox button{
  font-family:inherit; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--raise-2); color:var(--ink-2); border:0; border-left:1px solid var(--line);
  padding:13px 16px; cursor:pointer; transition:color .18s, background .18s;
}
.mailbox button:hover{color:var(--gold-lit); background:var(--raise)}
.mailbox button:focus-visible{outline:2px solid var(--gold-lit); outline-offset:-2px}
.copied{font-size:12.5px; color:var(--gold-lit); margin-top:10px; min-height:1.2em}

footer{border-top:1px solid var(--line-soft); padding-block:32px}
.foot-in{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.foot-disc{font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.foot-disc b{color:var(--gold); font-weight:600}
.foot-c{font-size:12.5px; color:var(--ink-3)}

/* ------------------------------------------------------------- book pages */
.book-hero{padding-block:58px 0}
.back{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none; transition:color .18s;
}
.back:hover,.back:focus-visible{color:var(--gold-lit)}
.book-title{font-size:clamp(32px,5.6vw,54px); line-height:1.08; letter-spacing:-.02em; margin-top:22px}
.book-sub{font-size:clamp(18px,2.4vw,23px); color:var(--gold-lit); font-family:"Newsreader",Georgia,serif;
          font-style:italic; margin-top:10px; max-width:34ch}
.book-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.book-blurb{margin-top:26px; max-width:60ch; color:var(--ink-2); font-size:17px}
.book-cols{display:grid; grid-template-columns:1fr; gap:48px; margin-top:8px}
@media(min-width:900px){.book-cols{grid-template-columns:1.25fr .75fr; gap:64px}}
.toc{list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line-soft); counter-reset:ch}
.toc li{
  counter-increment:ch; display:grid; grid-template-columns:34px 1fr; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.toc li::before{
  content:counter(ch,decimal-leading-zero); font-family:"Newsreader",Georgia,serif;
  font-size:13px; color:var(--gold); letter-spacing:.1em;
}
.toc li span{font-size:16px; color:var(--ink)}
.aside{background:var(--raise); border:1px solid var(--line-soft); border-radius:3px; padding:26px 24px}
.aside h3{font-size:19px; color:var(--gold-lit); margin-bottom:12px}
.aside ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.aside li{font-size:14.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start}
.aside li::before{content:""; width:5px; height:5px; margin-top:9px; border-radius:50%;
                  background:var(--gold-deep); flex:none}
.aside .btn{margin-top:20px}
.aside p{font-size:14px; color:var(--ink-3); margin-top:16px}
.chip{
  font-size:12.5px; color:var(--ink-2); background:var(--raise-2);
  border:1px solid var(--line-soft); border-radius:999px; padding:4px 12px;
}