:root{
  --paper:#FAF9F5;
  --ink:#14181D;
  --ink-soft:#4A4F57;
  --slate:#8A8D85;
  --accent:#1F4B4C;
  --tile-tech:#A85C34;
  --rule:#E4E1D8;
  --nav-h:76px;
  --shadow-sm:0 2px 4px rgba(20,24,29,0.08), 0 6px 14px rgba(20,24,29,0.08);
  --shadow-md:0 2px 4px rgba(20,24,29,0.10), 0 10px 20px rgba(20,24,29,0.14), 0 28px 56px rgba(20,24,29,0.18);
  --shadow-lg:0 4px 8px rgba(20,24,29,0.12), 0 16px 32px rgba(20,24,29,0.18), 0 44px 88px rgba(20,24,29,0.24);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 48px;}
.narrow{max-width:700px;}
.display{font-family:'Space Grotesk',sans-serif;}
.voice{font-family:'Newsreader',serif;font-style:italic;}
.eyebrow{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;}

/* nav — anchored/fixed, starts fully clear, gains white opacity + blur continuously as you scroll */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  padding:0 48px;display:flex;align-items:center;justify-content:flex-end;
  background:rgba(250,249,245,0);
}
nav.solid{box-shadow:var(--shadow-sm);}
nav .navlinks{display:flex;gap:28px;}
nav .navlinks a{font-size:14px;color:rgba(250,249,245,0.85);text-decoration:none;transition:color 0.3s ease;}
nav.solid .navlinks a{color:var(--ink-soft);}
nav .navlinks a:hover{color:var(--paper);}
nav.solid .navlinks a:hover{color:var(--ink);}

/* the three hero text elements are independently fixed + scroll-driven (desktop only) —
   they scroll slower than the page and the name docks into the nav's center. */
.hero-float{
  position:fixed;left:50%;top:50%;z-index:51;
  transform:translate(-50%,-50%);
  text-align:center;white-space:nowrap;pointer-events:none;
}
#heroEyebrow{color:#E8C9A8;font-family:'Inter',sans-serif;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;}
#heroName{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--paper);text-shadow:0 8px 32px rgba(0,0,0,0.35);}
#heroRole{color:rgba(250,249,245,0.86);font-weight:400;white-space:normal;max-width:46ch;}

/* full-bleed photographic hero — now the full viewport height, background only; text lives in the fixed layer above */
.hero{
  position:relative;height:100vh;min-height:640px;overflow:hidden;
}
#scrollCue{
  position:fixed;left:50%;bottom:32px;z-index:2;
  transform:translateX(-50%);color:rgba(250,249,245,0.75);
  transition:opacity 0.3s ease;
}
#scrollCue svg{animation:cueBounce 1.8s ease-in-out infinite;}
@keyframes cueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('https://images.unsplash.com/photo-1744770194336-9ea55bb36e57?fm=jpg&q=80&w=2400&auto=format&fit=crop');
  background-size:cover;background-position:center 30%;background-attachment:fixed;
  filter:saturate(0.45) brightness(0.6);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center, rgba(20,24,29,0.38) 0%, rgba(20,24,29,0.80) 100%);
}

/* three flat colored tile-buttons — one shared color, categories not photos. Below the fold now, no overlap. */
.tiles{
  position:relative;z-index:5;
  max-width:1120px;margin:0 auto;padding:130px 48px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.tile-btn{
  appearance:none;border:none;cursor:pointer;font-family:inherit;
  border-radius:14px;padding:14px 10px;height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--shadow-md);color:var(--paper);opacity:0.5;background:var(--accent);
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.tile-btn svg{width:34px;height:34px;}
.tile-btn .word{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;letter-spacing:0.01em;}
.tile-btn:hover{opacity:0.8;}
.tile-btn.active{opacity:1;transform:translateY(-6px);box-shadow:0 0 0 3px rgba(250,249,245,0.9), var(--shadow-lg);}

/* small triangle that tracks the active tile, pointing down at the panel it controls */
.tile-indicator-track{position:relative;max-width:1120px;margin:0 auto;padding:0 48px;height:10px;}
#tileIndicator{
  position:absolute;top:0;width:0;height:0;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--accent);
  transition:left 0.25s ease;
}

/* dynamic bio panel — content the tiles control. Tinted card + top border ties it back to the active tile. */
.tile-panel-wrap{padding:0 0 10px;}
.tile-panel{
  background:rgba(31,75,74,0.06);border-top:3px solid var(--accent);
  border-radius:0 0 14px 14px;padding:28px 32px 32px;
}
.tile-panel .eyebrow{color:var(--accent);margin-bottom:14px;transition:opacity 0.15s ease;}
.tile-panel p{font-size:16px;color:var(--ink-soft);max-width:66ch;transition:opacity 0.15s ease;}
.tile-panel.fading .eyebrow, .tile-panel.fading p{opacity:0;}

.about{padding:64px 0 64px;}
.about .eyebrow{color:var(--accent);margin-bottom:22px;}
.about p.lede{
  font-family:'Newsreader',serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.2vw,24px);line-height:1.5;color:var(--ink);
  margin-bottom:18px;max-width:60ch;
}
.about p.body{font-size:15.5px;color:var(--ink-soft);max-width:58ch;}

/* solid-color quote banner, full width — like v4's statement block, no photo */
.quote-banner{background:var(--accent);padding:88px 0;margin:64px 0 0;}
.quote-banner .wrap{max-width:820px;}
.quote-banner p{
  font-family:'Newsreader',serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3.2vw,34px);line-height:1.5;color:var(--paper);
}

/* plain photo break, no overlay text — a slot for whatever comes next */
.photo-break{
  height:48vh;min-height:300px;position:relative;margin:64px 0 8px;border-radius:20px;
  max-width:1120px;margin-left:auto;margin-right:auto;overflow:hidden;box-shadow:var(--shadow-lg);
  background-image:
    linear-gradient(0deg, rgba(20,24,29,0.35), rgba(20,24,29,0));
  background-size:cover;background-position:center;
}
.photo-break .cap{
  position:absolute;left:24px;bottom:18px;z-index:2;
  font-size:11px;color:rgba(250,249,245,0.7);
}

.positions-wrap{max-width:1120px;margin:96px auto 0;padding:0 48px;}
.positions{
  background:var(--paper);border-radius:22px;box-shadow:var(--shadow-md);
  border:1px solid var(--rule);
  padding:72px 56px 88px;
}
.positions .eyebrow{color:var(--accent);margin-bottom:36px;}
.position-item{max-width:56ch;margin-bottom:44px;}
.position-item:nth-child(even){margin-left:auto;text-align:right;}
.position-item:last-child{margin-bottom:0;}
.position-item h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;margin-bottom:8px;}
.position-item p{font-size:15.5px;color:var(--ink-soft);}

.credentials{padding:90px 0 90px;}
.credentials .eyebrow{color:var(--accent);margin-bottom:16px;}
.credentials p{font-size:15.5px;color:var(--ink-soft);max-width:64ch;}
.credentials p .item{color:var(--ink);}
.credentials p .sep{color:var(--slate);margin:0 8px;}

.writing{padding:0 0 100px;}
.writing .eyebrow{color:var(--accent);margin-bottom:28px;}
.w-item{padding:18px 0;border-top:1px solid var(--rule);}
.w-item:last-child{border-bottom:1px solid var(--rule);}
.w-item a{color:var(--ink);text-decoration:none;font-size:17px;font-weight:500;}
.w-item a:hover{color:var(--accent);}
.w-item .when{color:var(--slate);font-size:13px;margin-left:10px;font-weight:400;}

footer{padding:36px 0;border-top:1px solid var(--rule);}
.footer-row{display:flex;justify-content:space-between;font-size:13px;color:var(--slate);}
footer a{color:var(--slate);}

/* mobile: skip the scroll-docking animation entirely — simple static centered hero + solid nav */
body.is-mobile nav{background:rgba(250,249,245,0.98) !important;backdrop-filter:none;}
body.is-mobile nav .navlinks a{color:var(--ink-soft);}
body.is-mobile .hero-float{position:static;left:auto;top:auto;transform:none;white-space:normal;pointer-events:auto;}
body.is-mobile .hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav-h) + 24px) 24px 24px;gap:14px;
}
body.is-mobile #heroEyebrow{font-size:11px;}
body.is-mobile #heroName{font-size:clamp(40px,12vw,64px);line-height:1.02;}
body.is-mobile #heroRole{font-size:15px;}
@media(max-width:640px){
  .tiles{gap:10px;padding:80px 20px 0;}
  .tile-indicator-track{padding:0 20px;}
  .tile-btn{height:88px;padding:10px 6px;gap:6px;border-radius:12px;}
  .tile-btn svg{width:26px;height:26px;}
  .tile-btn .word{font-size:14px;}
  .tile-panel{padding:24px 20px 26px;}
}