/* Babbage Consultants — website concept, built by Nimblesite.
   Palette sampled from their own registered logo (the three overlapping dots).
   Design spine: the overlap. Their mark is a Venn diagram; their differentiator
   is that several disciplines turn up on one job; the site is built to show it. */

:root{
  /* sampled from img/babbage-logo.png */
  --lime:#D8DF24;
  --green:#A6CD3A;
  --cyan:#00C0F3;
  --blend:#0080C5;
  --blue:#005EA3;
  --blue-deep:#014b81;

  --ink:#1B1F22;
  --slate:#4C6971;      /* also sampled from the logo artwork */
  --slate-2:#6E858C;
  --paper:#F4F6F7;
  --white:#fff;
  --rule:#D5DEE1;
  --rule-soft:#E6ECEE;

  --wrap:1240px;
  --gut:clamp(20px,4vw,44px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing, not tidiness. Every <img> here carries width/height
   attributes (good — they reserve layout space), and a CSS rule that sets width
   alone lets the HTML height attribute survive, so the image renders squashed.
   That is exactly what happened to the footer wordmark: 170x209 instead of
   170x43. The three rules below that deliberately set a height all out-specify
   this one, so they are unaffected. */
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px}
h1,h2,h3,h4{font-family:"Sora",Switzer,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- annotation type: the drawing-sheet label ---------- */
.lab{
  font-family:"Switzer",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
}

/* ---------- masthead ---------- */
.util{background:var(--ink);color:#C9D6DA;font-size:13px}
.util .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.util a{color:#fff;text-decoration:none}
.util .dots{display:inline-flex;gap:4px;vertical-align:-1px;margin-right:8px}
.util .dots i{width:8px;height:8px;border-radius:50%;display:block}

/* DO NOT put backdrop-filter (or filter / transform / perspective / will-change
   on those) back on .mast. A non-none backdrop-filter makes an element the
   containing block for its position:fixed descendants — which silently reparented
   the mobile menu panel to the 81px-tall mast, so the panel's opaque background
   covered only its first two links and the rest overflowed transparently onto
   the page. The blur was buying nothing over a 93%-opaque background anyway;
   the mast is simply opaque now. */
.mast{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px}
.logo{flex:0 0 auto;display:block}
.logo img{width:186px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav a.here{border-bottom-color:var(--blue)}
.nav a.cta{
  border:0;background:var(--blue);color:#fff;border-radius:999px;padding:10px 20px;font-weight:600;
}
.navtoggle{display:none}
.burger{display:none}
.navtop{display:none}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vw,96px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(34px,4.1vw,54px);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{font-size:clamp(18px,1.5vw,21px);color:var(--slate);max-width:34em;margin-top:22px}
.hero .lab{display:block;margin-bottom:18px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;
  font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink)}

/* the overlap diagram — the logo, drawn at page scale */
.venn{width:100%;max-width:460px;margin-left:auto}
.venn svg{width:100%;height:auto;overflow:visible}
.venn circle{mix-blend-mode:multiply}
.venn .vlab{font-family:"Switzer",sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--slate)}
.venn .vnum{font-family:"Sora",sans-serif;font-size:34px;font-weight:700;fill:var(--ink)}
html.js .venn circle{transform-box:fill-box;transform-origin:50% 50%;animation:vpop .9s cubic-bezier(.2,.9,.3,1) both}
html.js .venn circle:nth-of-type(2){animation-delay:.1s}
html.js .venn circle:nth-of-type(3){animation-delay:.2s}
@keyframes vpop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- statistics rail ---------- */
.rail{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--white)}
.rail .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.rail .cell{padding:26px 0 24px;border-left:1px solid var(--rule-soft)}
.rail .cell:first-child{border-left:0}
.rail .cell>div{padding:0 clamp(10px,2vw,26px)}
.rail .n{font-family:"Sora",sans-serif;font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1;letter-spacing:-.03em}
.rail .n span{color:var(--blue)}
.rail .t{font-size:13.5px;color:var(--slate);margin-top:8px;line-height:1.35}

/* ---------- section furniture ---------- */
section{padding:clamp(56px,7vw,96px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(27px,3.2vw,40px);max-width:20ch}
.sec-head p{color:var(--slate);max-width:46ch;margin:14px 0 0}
.more{font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;border-bottom:2px solid var(--cyan);padding-bottom:2px}
.alt{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ink-sec{background:var(--ink);color:#E7EDEF}
.ink-sec h2,.ink-sec h3{color:#fff}
.ink-sec .lab{color:var(--cyan)}
.ink-sec p{color:#B9C7CC}

/* ---------- discipline chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-block;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500;
  background:#EAF0F2;color:var(--slate);border:1px solid var(--rule);white-space:nowrap;
}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.sect{background:transparent;border-style:dashed}

/* ---------- project cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.card{
  background:var(--white);border:1px solid var(--rule);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;
}
.card .shot{aspect-ratio:1000/650;background:#DCE4E6;position:relative}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card .count{
  position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;padding:7px 14px 7px 12px;font-size:12.5px;font-weight:600;
}
.card .count b{font-family:"Sora",sans-serif;font-size:15px}
.card .count .dots{display:inline-flex;gap:3px}
.card .count .dots i{width:7px;height:7px;border-radius:50%;display:block}
.card .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:19px;line-height:1.22}
.card .meta{font-size:13.5px;color:var(--slate);line-height:1.45}
.card .meta b{font-weight:600;color:var(--ink)}
.card .chips{margin-top:auto;padding-top:4px}

/* ---------- the overlap proof band ---------- */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,60px);align-items:center}
.proof-shot{position:relative;border:1px solid #2C3338}
.proof-shot img{width:100%;height:auto}
.stack{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.stack li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid #2E373C}
.stack li:last-child{border-bottom:1px solid #2E373C}
.stack .k{font-family:"Sora",sans-serif;font-size:13px;color:var(--cyan);width:26px;flex:0 0 26px}
.stack .v{font-size:16.5px;color:#fff;font-weight:500}

/* ---------- discipline index ---------- */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.dcell{background:var(--white);padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.dcell h3{font-size:17.5px;line-height:1.25}
.dcell .n{font-family:"Sora",sans-serif;font-size:13px;font-weight:600;color:var(--blue)}
.dcell .who{font-size:13.5px;color:var(--slate)}
.bar{height:4px;background:#EAF0F2;border-radius:999px;overflow:hidden;margin-top:2px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--blue))}

/* ---------- filter toolbar (projects page) ---------- */
.toolbar{background:var(--white);border:1px solid var(--rule);padding:20px 22px;margin-bottom:26px}
.trow{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--rule-soft)}
.trow:first-child{border-top:0;padding-top:0}
.trow>.lab{flex:0 0 104px;padding-top:6px}
.fbtn{
  border:1px solid var(--rule);background:#EAF0F2;color:var(--slate);border-radius:999px;
  padding:5px 13px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
}
.fbtn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.count-out{font-size:14px;color:var(--slate)}
.count-out b{color:var(--ink);font-family:"Sora",sans-serif}
.linkbtn{background:none;border:0;font:inherit;font-size:14px;color:var(--blue);cursor:pointer;text-decoration:underline;padding:0}
.mode{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--slate);cursor:pointer}
.mode input{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--blue)}
.mode span{white-space:nowrap}
.mode b{color:var(--ink)}
.empty{padding:40px 0;color:var(--slate)}

/* ---------- project detail ---------- */
.phero{background:var(--ink)}
.phero img{width:100%;height:clamp(260px,42vw,520px);object-fit:cover}
.pmeta-wrap{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--white)}
.pmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pmeta div{padding:22px clamp(12px,2vw,26px);border-left:1px solid var(--rule-soft)}
.pmeta div:first-child{border-left:0;padding-left:0}
.pmeta .v{font-size:16px;font-weight:500;margin-top:8px}
.prose{max-width:62ch}
.prose h3{font-size:22px;margin:36px 0 12px}
.prose h3:first-child{margin-top:0}
.side{border:1px solid var(--rule);background:var(--white);padding:24px}
.side h3{font-size:15px;margin-bottom:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start}

/* ---------- offices ---------- */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.office{background:var(--white);padding:24px}
.office h3{font-size:17px;margin-bottom:10px}
.office p{font-size:14.5px;color:var(--slate);margin-bottom:.6em}
.office a{font-weight:600}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
input,select,textarea{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--rule);
  background:var(--white);color:var(--ink);border-radius:2px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blend);outline-offset:1px;border-color:var(--blend)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{border:1px solid var(--blend);background:#F0FAFE;padding:22px;margin-top:18px}

/* ---------- notes + footer ---------- */
.note{
  border-left:3px solid var(--lime);background:#FCFDF2;padding:14px 18px;font-size:14px;color:#4A4E33;
  margin:26px 0;
}
.foot{background:var(--ink);color:#9FB2B8;padding:56px 0 34px;font-size:14px}
.foot a{color:#DCE6E9}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-bottom:30px;border-bottom:1px solid #2E373C}
.foot h4{font-family:"Switzer",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot img{width:170px;height:auto;margin-bottom:14px}
.foot .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:13px}
.credit{color:#7F949B}

/* ---------- reveal ---------- */
html.js .rv{opacity:0;transform:translateY(14px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .venn{max-width:380px;margin:8px auto 0}
  .cards,.dgrid,.offices{grid-template-columns:repeat(2,1fr)}
  .rail .wrap{grid-template-columns:repeat(3,1fr)}
  .rail .cell:nth-child(4){border-left:0}
  .proof,.split{grid-template-columns:1fr}
  .pmeta{grid-template-columns:repeat(2,1fr)}
  .pmeta div:nth-child(3){border-left:0}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* The panel is FULL-SCREEN (inset:0), not a 68%-wide drawer. Two reasons, both
     learned the hard way: a partial drawer left the page showing beside it with
     no scrim, and when the panel's own background failed to cover its links the
     result was unreadable rather than merely ugly. Full-screen + opaque means the
     worst case is still legible.
     It is display:none when closed, NOT translated off-canvas — an off-canvas
     fixed element still counts toward documentElement.scrollWidth in Chrome and
     was 268px of horizontal overflow on every page at 390px.
     .mast outranks the panel here so the logo and the Menu/Close control stay
     visible and tappable above it; both live in .mast's stacking context. */
  /* The open menu is a SELF-CONTAINED sheet: it sits above the mast (z 70 > 40)
     and carries its own wordmark and Close control, so its layout owes nothing
     to the height of the utility bar or the mast. The previous attempt padded
     the panel down by a hand-measured 100px to clear the header and the logo
     landed on top of the first link — any magic number here is a bug waiting
     for the header copy to wrap onto a second line. */
  .nav{
    display:none;position:fixed;inset:0;z-index:70;background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(env(safe-area-inset-top, 0px) + 18px) 26px
            calc(env(safe-area-inset-bottom, 0px) + 34px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .navtop{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding-bottom:26px;
  }
  .navlogo{width:168px;height:auto}
  .navclose{display:block;margin:0}
  .nav a{
    width:100%;padding:17px 0;border-bottom:1px solid var(--rule-soft);
    font-size:19px;font-weight:500;
  }
  .nav a.here{border-bottom-color:var(--rule-soft);color:var(--blue)}
  .nav a.cta{
    margin-top:22px;text-align:center;justify-content:center;display:flex;
    border-bottom:0;font-size:16px;padding:15px 24px;
  }
  .navtoggle:checked ~ .nav{display:flex;animation:navin .24s cubic-bezier(.2,.8,.3,1) both}
  @keyframes navin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .burger{
    display:block;margin-left:auto;cursor:pointer;
    border:1px solid var(--rule);background:var(--white);border-radius:999px;
    padding:11px 18px;font-size:14px;font-weight:600;min-width:84px;text-align:center;
  }
  /* the mast's control is always "Menu"; the sheet carries its own "Close" */
  .b-close{display:none}
  .cards,.dgrid,.offices,.form{grid-template-columns:1fr}
  .rail .wrap{grid-template-columns:repeat(2,1fr)}
  .rail .cell{border-left:0;border-top:1px solid var(--rule-soft)}
  .rail .cell:nth-child(-n+2){border-top:0}
  .pmeta{grid-template-columns:1fr}
  .pmeta div{border-left:0;border-top:1px solid var(--rule-soft)}
  .pmeta div:first-child{border-top:0}
  .foot .cols{grid-template-columns:1fr}
  .trow{flex-direction:column;gap:8px}
  .trow>.lab{flex:none;padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  html.js .venn circle{animation:none}
  .navtoggle:checked ~ .nav{animation:none;opacity:1;transform:none}
  html.js .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* Hover styles are gated on a hover-capable pointer. Ungated, iOS Safari
   applies :hover on tap and LEAVES IT STUCK until you tap elsewhere — the
   first menu link kept a cyan underline after the sheet was opened, which
   reads as a wrong 'current page' marker. (1P-83 pass 4.) */
@media (hover:hover){
  .util a:hover{text-decoration:underline}
  .nav a:hover{border-bottom-color:var(--cyan)}
  .nav a.cta:hover{background:var(--blue-deep)}
  .btn-primary:hover{background:var(--blue-deep)}
  .btn-ghost:hover{background:var(--ink);color:#fff}
  .card:hover{border-color:var(--blend)}
  .dcell:hover{background:#FBFDFD}
  .fbtn:hover{border-color:var(--blend)}
}